Skip to content

Commit 1fec85a

Browse files
justin808justin808
committed
Updates to spec/dummy for new packages
* fixed tests * updated packages in spec/dummy * add prettier
1 parent 11c9014 commit 1fec85a

File tree

57 files changed

+2932
-4303
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

57 files changed

+2932
-4303
lines changed

‎.eslintrc

+6-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
---
2-
extends: eslint-config-shakacode
2+
extends:
3+
- eslint-config-shakacode
4+
- prettier
5+
- prettier/react
36

47
plugins:
5-
- react
8+
- prettier
69

710
globals:
811
__DEBUG_SERVER_ERRORS__: true
@@ -17,7 +20,7 @@ rules:
1720
no-console: 0
1821
function-paren-newline: 0
1922
object-curly-newline: 0
20-
23+
2124

2225
# https://github.com/benmosher/eslint-plugin-import/issues/340
2326
import/no-extraneous-dependencies: 0

‎CONTRIBUTING.md

-8
Original file line numberDiff line numberDiff line change
@@ -127,14 +127,6 @@ _Note: running `npm i` automatically builds the npm package before installing. H
127127
### Prereqs
128128
After checking out the repo, making sure you have rvm and nvm setup (setup ruby and node), cd to `spec/dummy` and run `bin/setup` to install ruby dependencies. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
129129

130-
Additionally, our RSpec tests use the poltergeist web driver. You will need to install the phantomjs node module:
131-
132-
```sh
133-
yarn global add phantomjs-prebuilt
134-
```
135-
136-
Note this *must* be installed globally for the dummy test project rspec runner to see it properly.
137-
138130
### Local Node Package
139131
Because the example and dummy apps rely on the react-on-rails node package, they should link directly to your local version to pick up any changes you may have made to that package. To achieve this, switch to the dummy app's root directory and run this command below which runs something like [this script](spec/dummy/package.json#L14)
140132

‎docs/additional-reading/images.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ const assetLoaderRules = [
3939

4040

4141

42-
A full example can be found at [spec/dummy/client/app/components/ImageExample/ImageExample.js](../../spec/dummy/client/app/components/ImageExample/ImageExample.js)
42+
A full example can be found at [spec/dummy/client/app/components/ImageExample/ImageExample.jsx](../../spec/dummy/client/app/components/ImageExample/ImageExample.jsx)
4343

4444
You are free to use images either in image tags or as background images in SCSS files. You can
4545
use a "global" location of /client/app/assets/images or a relative path to your JS or SCSS file, as

‎docs/additional-reading/rails_view_rendering_from_inline_javascript.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,10 @@ You can easily render React components in your JavaScript with `render` method t
1212
* @param name Name of your registered component
1313
* @param props Props to pass to your component
1414
* @param domNodeId
15+
* @param hydrate [optional] Pass truthy to update server rendered html. Default is falsy
1516
* @returns {virtualDomElement} Reference to your component's backing instance
1617
*/
17-
ReactOnRails.render(componentName, props, elementId)
18+
ReactOnRails.render(componentName, props, domNodeId)
1819
```
1920

2021
## Why do we need this?

‎docs/api/view-helpers-api.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ adding meta-tags to a page. It is exactly like react_component except for the fo
4141

4242
1. `prerender: true` is automatically added to options, as this method doesn't make sense for
4343
client only rendering.
44-
2. Your JavaScript for server rendering must return an Object for the key `server_rendered_html`.
44+
2. Your JavaScript generator function for server rendering must return an Object rather than a React Component.
4545
3. Your view code must expect an object and not a string.
4646

4747
Here is an example of ERB view code:

‎docs/misc-pending/code-splitting.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ Different markup is generated on the client than on the server. Why does this ha
2121

2222
### The solution
2323

24-
To prevent this, you have to wait until the code chunk is fetched before doing the initial render on the client side. To accomplish this, react on rails allows you to register a renderer. This works just like registering a generator function, except that the function you pass takes three arguments: `renderer(props, railsContext, domNodeId)`, and is responsible for calling `ReactDOM.render` to render the component to the DOM. React on rails will automatically detect when a generator function takes three arguments, and will not call `ReactDOM.render`, instead allowing you to control the initial render yourself.
24+
To prevent this, you have to wait until the code chunk is fetched before doing the initial render on the client side. To accomplish this, react on rails allows you to register a renderer. This works just like registering a generator function, except that the function you pass takes three arguments: `renderer(props, railsContext, domNodeId)`, and is responsible for calling `ReactDOM.render` or `ReactDOM.hydrate` to render the component to the DOM. React on rails will automatically detect when a generator function takes three arguments, and will not call `ReactDOM.render` or `ReactDOM.hydrate`, instead allowing you to control the initial render yourself. Note, you have to be careful to call `ReactDOM.hydrate` rather than `ReactDOM.render` if you are are server rendering.
2525

2626
Here's an example of how you might use this in practice:
2727

@@ -115,7 +115,7 @@ See:
115115

116116
- [spec/dummy/client/app/startup/clientRegistration.jsx](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/startup/clientRegistration.jsx)
117117
- [spec/dummy/client/app/startup/serverRegistration.jsx](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/startup/serverRegistration.jsx)
118-
- [spec/dummy/client/app/startup/DeferredRenderAppRenderer.jsx](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/startup/DeferredRenderAppRenderer.jsx) <-- Code splitting implemented here
118+
- [spec/dummy/client/app/startup/DeferredRenderAppClient](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/startup/DeferredRenderAppClient.jsx)<-- Code splitting implemented here
119119
- [spec/dummy/client/app/startup/DeferredRenderAppServer.jsx](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/startup/DeferredRenderAppServer.jsx)
120120
- [spec/dummy/client/app/components/DeferredRender.jsx](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/components/DeferredRender.jsx)
121121
- [spec/dummy/client/app/components/DeferredRenderAsyncPage.jsx](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/components/DeferredRenderAsyncPage.jsx)

‎lib/react_on_rails/helper.rb

+1-1
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@ def react_component(component_name, options = {})
136136
# It is exactly like react_component except for the following:
137137
# 1. prerender: true is automatically added, as this method doesn't make sense for client only
138138
# rendering.
139-
# 2. Your JavaScript for server rendering must return an Object for the key server_rendered_html.
139+
# 2. Your JavaScript generator function for server rendering must return an Object rather than a React component.
140140
# 3. Your view code must expect an object and not a string.
141141
#
142142
# Here is an example of the view code:

‎node_package/src/ReactOnRails.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -153,14 +153,16 @@ ctx.ReactOnRails = {
153153
* @param name Name of your registered component
154154
* @param props Props to pass to your component
155155
* @param domNodeId
156+
* @param hydrate Pass truthy to update server rendered html. Default is falsy
156157
* @returns {virtualDomElement} Reference to your component's backing instance
157158
*/
158-
render(name, props, domNodeId) {
159+
render(name, props, domNodeId, hydrate) {
159160
const componentObj = ComponentRegistry.get(name);
160161
const reactElement = createReactElement({ componentObj, props, domNodeId });
161162

163+
const render = hydrate ? ReactDOM.hydrate : ReactDOM.render;
162164
// eslint-disable-next-line react/no-render-return-value
163-
return ReactDOM.render(reactElement, document.getElementById(domNodeId));
165+
return render(reactElement, document.getElementById(domNodeId));
164166
},
165167

166168
/**

‎package.json

+6-1
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,11 @@
2020
"blue-tape": "^1.0.0",
2121
"create-react-class": "^15.6.0",
2222
"eslint": "^5.7.0",
23+
"eslint-config-prettier": "^3.1.0",
2324
"eslint-config-shakacode": "^16.0.1",
2425
"eslint-plugin-import": "^2.6.1",
2526
"eslint-plugin-jsx-a11y": "^6.1.2",
27+
"eslint-plugin-prettier": "^3.0.0",
2628
"eslint-plugin-react": "^7.1.0",
2729
"flow-bin": "^0.83.0",
2830
"jsdom": "^11.1.0",
@@ -85,6 +87,9 @@
8587
},
8688
"homepage": "https://github.com/shakacode/react_on_rails#readme",
8789
"dependencies": {
88-
"@babel/runtime-corejs2": "^7.0.0"
90+
"@babel/runtime-corejs2": "^7.0.0",
91+
"nps": "^5.9.3",
92+
"prettier": "^1.14.3",
93+
"prettier-eslint-cli": "^4.7.1"
8994
}
9095
}

‎spec/dummy/.prettierignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎spec/dummy/.prettierrc

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
printWidth: 110
2+
tabWidth: 2
3+
useTabs: false
4+
semi: true
5+
singleQuote: true
6+
trailingComma: all
7+
bracketSpacing: true
8+
jsxBracketSameLine: false
9+
parser: flow
10+
11+
overrides:
12+
- files: "*.@(css|scss)"
13+
options:
14+
parser: css
15+
singleQuote: false
16+
printWidth: 120
17+
- files: "*.@(json)"
18+
options:
19+
parser: json
20+
printWidth: 100

‎spec/dummy/app/views/pages/client_side_manual_render.html.erb

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11

2-
<%= react_component("ManualRenderApp", props: {}, prerender: false) %>
2+
<%= react_component("ManualRenderApp", props: { prerender: false }, prerender: false) %>
33
<hr/>
44

55
<h2>Using Renderer Functions to Manually Render Your App</h2>
66
<ul>
77
<li>
88
<p>Use react_component the same way you would if you were registering a generator function or component:</p>
99
<pre>
10-
<%%= react_component("ManualRenderApp", props: {}, prerender: false) %>
10+
<%%= react_component("ManualRenderApp", props: { prerender: false }, prerender: false) %>
1111
</pre>
1212
<h4>spec/dummy/app/views/pages/client_side_manual_render.html.erb</h4>
1313
<br>

‎spec/dummy/app/views/pages/deferred_render_with_server_rendering.html.erb

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
Use register to expose the rendering function to ReactOnRails on the client side:
1010
</p>
1111
<pre>
12-
import DeferredRenderApp from './DeferredRenderAppRenderer';
12+
import DeferredRenderApp from './DeferredRenderAppClient';
1313

1414
ReactOnRails.register({
1515
DeferredRenderApp,
@@ -33,6 +33,6 @@
3333
</li>
3434

3535
<li>
36-
See <b>spec/dummy/client/app/startup/DeferredRenderAppRenderer.jsx</b> and <b>spec/dummy/client/app/startup/DeferredRenderAppServer.jsx</b>
36+
See <b>spec/dummy/client/app/startup/DeferredRenderAppClient</b> and <b>spec/dummy/client/app/startup/DeferredRenderAppServer.jsx</b>
3737
</li>
3838
</ul>

‎spec/dummy/app/views/pages/index.html.erb

+2-2
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,13 @@ This page demonstrates a few things the other pages do not show:
2121
</p>
2222

2323
<pre>
24-
<%%= react_component("ReduxApp", props: @app_props_server_render, trace: true, id: "ReduxApp-react-component-0") %><br/>
24+
<%%= react_component("ReduxApp", props: @app_props_server_render.merge(prerender: false), trace: true, prerender: false, id: "ReduxApp-react-component-0") %>
2525
</pre>
2626
<p>
2727
That will generate this, which is done only once on the server side:
2828
</p>
2929

30-
<%= react_component("ReduxApp", props: @app_props_server_render, trace: true, id: "ReduxApp-react-component-0") %>
30+
<%= react_component("ReduxApp", props: @app_props_server_render.merge(prerender: false), trace: true, prerender: false, id: "ReduxApp-react-component-0") %>
3131
<hr/>
3232

3333
<h1>Server Rendered React Component Without Redux</h1>

‎spec/dummy/app/views/pages/server_side_hello_world_shared_store.html.erb

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<%= redux_store("SharedReduxStore", props: @app_props_server_render) %>
22

3-
<%= react_component("ReduxSharedStoreApp", prerender: true, trace: true, id: "ReduxSharedStoreApp-react-component-0") %>
3+
<%= react_component("ReduxSharedStoreApp", props: { prerender: true }, prerender: true, trace: true, id: "ReduxSharedStoreApp-react-component-0") %>
44
<hr/>
55
<h1>Second Hello World</h1>
6-
<%= react_component("ReduxSharedStoreApp", prerender: true, trace: true, id: "ReduxSharedStoreApp-react-component-1") %>
6+
<%= react_component("ReduxSharedStoreApp", props: { prerender: true }, prerender: true, trace: true, id: "ReduxSharedStoreApp-react-component-1") %>
77
<hr/>
88

99
<h1>React Rails Client Side Only Rendering, 2 components, same Redux store </h1>
@@ -29,10 +29,10 @@
2929
<pre>
3030
<%%= redux_store("SharedReduxStore", props: @app_props_server_render) %>
3131

32-
<%%= react_component("ReduxSharedStoreApp", prerender: false, trace: true, id: "ReduxSharedStoreApp-react-component-0") %>
32+
<%%= react_component("ReduxSharedStoreApp", props: { prerender: true }, prerender: true, trace: true, id: "ReduxSharedStoreApp-react-component-0") %>
3333

3434
Second Hello World
35-
<%%= react_component("ReduxSharedStoreApp", prerender: false, trace: true, id: "ReduxSharedStoreApp-react-component-1") %>
35+
<%%= react_component("ReduxSharedStoreApp", props: { prerender: true }, prerender: true, trace: true, id: "ReduxSharedStoreApp-react-component-1")
3636
</pre>
3737
</li>
3838
</ol>

‎spec/dummy/app/views/pages/server_side_hello_world_shared_store_controller.html.erb

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11

2-
<%= react_component("ReduxSharedStoreApp", prerender: true, trace: true, id: "ReduxSharedStoreApp-react-component-0") %>
2+
<%= react_component("ReduxSharedStoreApp", props: { prerender: true }, prerender: true, trace: true, id: "ReduxSharedStoreApp-react-component-0") %>
33
<hr/>
44
<h1>Second Hello World</h1>
5-
<%= react_component("ReduxSharedStoreApp", prerender: true, trace: true, id: "ReduxSharedStoreApp-react-component-1") %>
5+
<%= react_component("ReduxSharedStoreApp", props: { prerender: true}, prerender: true, trace: true, id: "ReduxSharedStoreApp-react-component-1") %>
66
<hr/>
77

88
<h1>React Rails Client Side Only Rendering, 2 components, same Redux store from controller</h1>

‎spec/dummy/app/views/pages/server_side_hello_world_shared_store_defer.html.erb

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<% redux_store("SharedReduxStore", props: @app_props_server_render, defer: true) %>
22

3-
<%= react_component("ReduxSharedStoreApp", prerender: true, trace: true, id: "ReduxSharedStoreApp-react-component-0") %>
3+
<%= react_component("ReduxSharedStoreApp", props: { prerender: true }, prerender: true, trace: true, id: "ReduxSharedStoreApp-react-component-0") %>
44
<hr/>
55
<h1>Second Hello World</h1>
6-
<%= react_component("ReduxSharedStoreApp", prerender: true, trace: true, id: "ReduxSharedStoreApp-react-component-1") %>
6+
<%= react_component("ReduxSharedStoreApp", props: { prerender: true }, prerender: true, trace: true, id: "ReduxSharedStoreApp-react-component-1") %>
77
<hr/>
88

99
<h1>React Rails Client Side Only Rendering, 2 components, same Redux store </h1>

‎spec/dummy/app/views/pages/server_side_redux_app.html.erb

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

2-
<%= react_component("ReduxApp", props: @app_props_server_render, prerender: true, trace: true, id: "ReduxApp-react-component-0") %>
2+
<%= react_component("ReduxApp", props: @app_props_server_render.merge(prerender: true), prerender: true, trace: true, id: "ReduxApp-react-component-0") %>
33
<hr/>
44

55
<h1>Server Rendered/Cached React/Redux Component</h1>
@@ -54,7 +54,8 @@
5454
Place the component on the view: spec/dummy/app/views/pages/server_side_redux_app.html.erb
5555
<br/>
5656
<pre>
57-
<%%= react_component("ReduxApp", props: @app_props_server_render, prerender: true, trace: true, id: "ReduxApp-react-component-0") %>
57+
<%%=
58+
react_component("ReduxApp", props: @app_props_server_render.merge(prerender: true), prerender: true, trace: true, id: "ReduxApp-react-component-0") %>
5859
</pre>
5960
</li>
6061
</ol>

‎spec/dummy/app/views/pages/server_side_redux_app_cached.html.erb

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<% puts "=" * 80 %>
55
<% puts "server rendering react components" %>
66
<% puts "=" * 80 %>
7-
<%= react_component("ReduxApp", props: @app_props_server_render, prerender: true, trace: true, id: "ReduxApp-react-component-0") %>
7+
<%= react_component("ReduxApp", props: @app_props_server_render.merge(prerender: true), prerender: true, trace: true, id: "ReduxApp-react-component-0") %>
88
<% end %>
99
<hr/>
1010

@@ -62,7 +62,7 @@
6262
<br/>
6363
<pre>
6464
<%% cache @app_props_server_render do %>
65-
<%%= react_component("ReduxApp", props: @app_props_server_render, prerender: true, trace: true, id: "ReduxApp-react-component-0") %>
65+
<%%= react_component("ReduxApp", props: @app_props_server_render.merge(prerender: true), prerender: true, trace: true, id: "ReduxApp-react-component-0") %>
6666
<%% end %>
6767
</pre>
6868
</li>

‎spec/dummy/client/.eslintrc

+7-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
---
22

3-
extends: eslint-config-shakacode
3+
extends:
4+
- eslint-config-shakacode
5+
- prettier
6+
- prettier/react
7+
8+
plugins:
9+
- prettier
410

511
rules:
612
react/forbid-prop-types: 0

‎spec/dummy/client/app/components/CacheDisabled.jsx

-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react';
22

33
export default class CacheDisabled extends React.Component {
4-
54
componentWillUnmount() {
65
// eslint-disable-next-line no-console
76
console.log('CacheDisabled#componentWillUnmount');

‎spec/dummy/client/app/components/DeferredRender.jsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,10 @@ const DeferredRender = ({ children }) => (
1313
{
1414
children ||
1515
<p>
16-
<Link to="/deferred_render_with_server_rendering/async_page">
16+
<Link
17+
to="/deferred_render_with_server_rendering/async_page"
18+
href="/deferred_render_with_server_rendering/async_page"
19+
>
1720
Test Async Route
1821
</Link>
1922
</p>

‎spec/dummy/client/app/components/DeferredRenderAsyncPage.jsx

+24-9
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,28 @@
11
import React from 'react';
22

3-
const DeferredRenderAsyncPage = () => (
4-
<div>
5-
<p>Noice! It works.</p>
6-
<p>
7-
Now, try reloading this page and looking at the developer console.
8-
There shouldn&apos;t be any client/server mismatch error from React.
9-
</p>
10-
</div>
11-
);
3+
class DeferredRenderAsyncPage extends React.Component {
4+
constructor(props) {
5+
super(props);
6+
this.state = { mounted: 'false' };
7+
}
8+
9+
componentDidMount() {
10+
// eslint-disable-next-line react/no-did-mount-set-state
11+
this.setState({ mounted: 'true' });
12+
}
13+
14+
render() {
15+
return (
16+
<div>
17+
<p>Noice! It works.</p>
18+
<p>Mounted: {this.state.mounted}</p>
19+
<p>
20+
Now, try reloading this page and looking at the developer console.
21+
There shouldn&apos;t be any client/server mismatch error from React.
22+
</p>
23+
</div>
24+
);
25+
}
26+
}
1227

1328
export default DeferredRenderAsyncPage;

‎spec/dummy/client/app/components/HelloWorld.jsx

-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import css from './HelloWorld.scss';
77

88
// Super simple example of the simplest possible React component
99
class HelloWorld extends React.Component {
10-
1110
static propTypes = {
1211
helloWorldData: PropTypes.shape({
1312
name: PropTypes.string,

‎spec/dummy/client/app/components/HelloWorldRedux.jsx

-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import RailsContext from './RailsContext';
44

55
// Super simple example of the simplest possible React component
66
export default class HelloWorldRedux extends React.Component {
7-
87
static propTypes = {
98
actions: PropTypes.object.isRequired,
109
data: PropTypes.object.isRequired,

‎spec/dummy/client/app/components/HelloWorldRehydratable.jsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import ReactOnRails from 'react-on-rails';
44
import RailsContext from './RailsContext';
55

66
class HelloWorldRehydratable extends React.Component {
7-
87
static propTypes = {
98
helloWorldData: PropTypes.shape({
109
name: PropTypes.string,
@@ -47,7 +46,7 @@ class HelloWorldRehydratable extends React.Component {
4746
// Read props from the component specification tag and merge railsContext
4847
const mergedProps = { ...JSON.parse(componentSpecificationTag.textContent), railsContext };
4948
// Hydrate
50-
ReactOnRails.render(registeredComponentName, mergedProps, component.id);
49+
ReactOnRails.render(registeredComponentName, mergedProps, component.id, true);
5150
}
5251
}
5352

0 commit comments

Comments
 (0)