Skip to content

Commit 26442b9

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

Some content is hidden

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

47 files changed

+2424
-3228
lines changed

‎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

‎spec/dummy/client/app/components/ImageExample/ImageExample.js renamed to ‎spec/dummy/client/app/components/ImageExample/ImageExample.jsx

+24-23
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,41 @@
11
import React from 'react';
2-
import PropTypes from 'prop-types';
3-
import css from './ImageExample.scss';
42

5-
// Note the global alias for images
3+
// Note the global alias for image
4+
// eslint-disable-next-line import/no-unresolved
65
import logo from 'images/256egghead.png';
6+
// eslint-disable-next-line import/no-unresolved
7+
import legoIcon from 'images/lego_icon.svg';
8+
9+
import css from './ImageExample.scss';
710
import bowerLogo from './bower.png';
811
import blueprintIcon from './blueprint_icon.svg';
9-
import legoIcon from 'images/lego_icon.svg';
10-
const TestComponent = (props) => (
12+
13+
const TestComponent = (_props) => (
1114
<div>
1215
<h1 className={css.red}>This is a test of CSS module color red.</h1>
13-
<hr/>
16+
<hr />
1417
<h1 className={css.background}>Here is a label with a background-image from the CSS modules
15-
imported</h1>
16-
<img src={logo}/>
17-
<hr/>
18+
imported
19+
</h1>
20+
<img src={logo} alt="logo" />
21+
<hr />
1822
<h1 className={css.backgroundSameDirectory}>This label has a background image from the same
19-
directory. Below is an img tag in the same directory</h1>
20-
<img src={bowerLogo}/>
21-
<hr/>
23+
directory. Below is an img tag in the same directory
24+
</h1>
25+
<img src={bowerLogo} alt="bower logo" />
26+
<hr />
2227
<h1> Below is an img tag of a svg in the same directory</h1>
23-
<img src={blueprintIcon}/>
24-
<hr/>
28+
<img src={blueprintIcon} alt="blueprint icon" />
29+
<hr />
2530
<h1>Below is a div with a background svg</h1>
26-
<div className={css.googleLogo}/>
27-
<hr/>
31+
<div className={css.googleLogo} alt="google logo" />
32+
<hr />
2833
<h1>SVG lego icon img tag with global path</h1>
29-
<img src={legoIcon}/>
30-
<hr/>
34+
<img src={legoIcon} alt="lego icon" />
35+
<hr />
3136
<h1>SVG lego icon with background image to global path</h1>
32-
<div className={css.legoIcon}/>
37+
<div className={css.legoIcon} alt="lego icon again" />
3338
</div>
3439
);
3540

36-
TestComponent.propTypes = {
37-
message: PropTypes.string,
38-
};
39-
4041
export default TestComponent;

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

+13-10
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,14 @@ function renderContextRows(railsContext) {
88
return _.transform(railsContext, (accum, value, key) => {
99
if (key !== 'serverSide') {
1010
const className = `js-${key}`;
11-
accum.push(
12-
<tr key={className}>
13-
<td><strong>
11+
accum.push(<tr key={className}>
12+
<td>
13+
<strong>
1414
{key}:&nbsp;
15-
</strong></td>
16-
<td className={className}>{`${value}`}</td>
17-
</tr>,
18-
);
15+
</strong>
16+
</td>
17+
<td className={className}>{`${value}`}</td>
18+
</tr>);
1919
}
2020
}, []);
2121
}
@@ -24,12 +24,15 @@ const RailsContext = (props) => (
2424
<table>
2525
<thead>
2626
<tr>
27-
<th><i>
27+
<th>
28+
<i>
2829
key
29-
</i></th>
30+
</i>
31+
</th>
3032
<th><i>
3133
value
32-
</i></th>
34+
</i>
35+
</th>
3336
</tr>
3437
</thead>
3538
<tbody>

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@ import React from 'react';
22
import { Helmet } from 'react-helmet';
33
import HelloWorld from './HelloWorld';
44

5-
const EchoProps = (props) => (
5+
const ReactHelmet = (props) => (
66
<div>
77
<Helmet>
88
<title>Custom page title</title>
99
</Helmet>
1010
Props: {JSON.stringify(props)}
11-
<HelloWorld {...props}/>
11+
<HelloWorld {...props} />
1212
</div>
1313
);
1414

15-
export default EchoProps;
15+
export default ReactHelmet;

0 commit comments

Comments
 (0)