@samitouri / QOS-React / commits / d04618b28b

Run all fixtures through Prettier (#10157)

* Include fixtures in prettier default pattern * Run all fixtures through Prettier

Brandon Dail committed Jul 12, 2017 at 11:19 UTC d04618b28b4faf0e512878d073a93a779d735f96
59 files changed +627 -556
fixtures/art/VectorWidget.js
+44 -25
@@ -6,7 +6,7 @@
6 * LICENSE file in the root directory of this source tree. An additional grant
7 * of patent rights can be found in the PATENTS file in the same directory.
8 */
9 -"use strict";
9 +'use strict';
10
11 var React = require('react');
12 var ReactART = require('react-art');
@@ -72,10 +72,7 @@ class VectorWidget extends React.Component {
72 */
73 render() {
74 return (
75 - <Surface
76 - width={700}
77 - height={700}
78 - style={{cursor: 'pointer'}}>
75 + <Surface width={700} height={700} style={{cursor: 'pointer'}}>
76 {this.renderGraphic(this.state.degrees)}
77 </Surface>
78 );
@@ -84,12 +81,9 @@ class VectorWidget extends React.Component {
81 /**
82 * Better SVG support for React coming soon.
83 */
87 - renderGraphic = (rotation) => {
88 -
84 + renderGraphic = rotation => {
85 return (
90 - <Group
91 - onMouseDown={this.handleMouseDown}
92 - onMouseUp={this.handleMouseUp}>
86 + <Group onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}>
87 <Group x={210} y={135}>
88 <Shape fill="rgba(0,0,0,0.1)" d={BORDER_PATH} />
89 <Shape fill="#7BC7BA" d={BG_PATH} />
@@ -102,8 +96,18 @@ class VectorWidget extends React.Component {
96 <Shape fill="#FFFFFF" d={CENTER_DOT_PATH} />
97 <Group>
98 <Shape d={RING_ONE_PATH} stroke="#FFFFFF" strokeWidth={8} />
105 - <Shape d={RING_TWO_PATH} transform={RING_TWO_ROTATE} stroke="#FFFFFF" strokeWidth={8} />
106 - <Shape d={RING_THREE_PATH} transform={RING_THREE_ROTATE} stroke="#FFFFFF" strokeWidth={8} />
99 + <Shape
100 + d={RING_TWO_PATH}
101 + transform={RING_TWO_ROTATE}
102 + stroke="#FFFFFF"
103 + strokeWidth={8}
104 + />
105 + <Shape
106 + d={RING_THREE_PATH}
107 + transform={RING_THREE_ROTATE}
108 + stroke="#FFFFFF"
109 + strokeWidth={8}
110 + />
111 </Group>
112 </Group>
113 </Group>
@@ -113,18 +117,33 @@ class VectorWidget extends React.Component {
117 };
118 }
119
116 -var BORDER_PATH = "M3.00191459,4 C1.34400294,4 0,5.34785514 0,7.00550479 L0,220.994495 C0,222.65439 1.34239483,224 3.00191459,224 L276.998085,224 C278.655997,224 280,222.652145 280,220.994495 L280,7.00550479 C280,5.34561033 278.657605,4 276.998085,4 L3.00191459,4 Z M3.00191459,4";
117 -var BG_PATH = "M3.00191459,1 C1.34400294,1 0,2.34785514 0,4.00550479 L0,217.994495 C0,219.65439 1.34239483,221 3.00191459,221 L276.998085,221 C278.655997,221 280,219.652145 280,217.994495 L280,4.00550479 C280,2.34561033 278.657605,1 276.998085,1 L3.00191459,1 Z M3.00191459,1";
118 -var BAR_PATH = "M3.00191459,0 C1.34400294,0 0,1.34559019 0,3.00878799 L0,21 C0,21 0,21 0,21 L280,21 C280,21 280,21 280,21 L280,3.00878799 C280,1.34708027 278.657605,0 276.998085,0 L3.00191459,0 Z M3.00191459,0";
119 -var RED_DOT_PATH = "M12.5,17 C16.0898511,17 19,14.0898511 19,10.5 C19,6.91014895 16.0898511,4 12.5,4 C8.91014895,4 6,6.91014895 6,10.5 C6,14.0898511 8.91014895,17 12.5,17 Z M12.5,17";
120 -var YELLOW_DOT_PATH = "M31.5,17 C35.0898511,17 38,14.0898511 38,10.5 C38,6.91014895 35.0898511,4 31.5,4 C27.9101489,4 25,6.91014895 25,10.5 C25,14.0898511 27.9101489,17 31.5,17 Z M31.5,17";
121 -var GREEN_DOT_PATH = "M50.5,17 C54.0898511,17 57,14.0898511 57,10.5 C57,6.91014895 54.0898511,4 50.5,4 C46.9101489,4 44,6.91014895 44,10.5 C44,14.0898511 46.9101489,17 50.5,17 Z M50.5,17";
122 -var CENTER_DOT_PATH = "M84,105 C92.8365564,105 100,97.8365564 100,89 C100,80.1634436 92.8365564,73 84,73 C75.1634436,73 68,80.1634436 68,89 C68,97.8365564 75.1634436,105 84,105 Z M84,105";
123 -var RING_ONE_PATH = "M84,121 C130.391921,121 168,106.673113 168,89 C168,71.3268871 130.391921,57 84,57 C37.6080787,57 0,71.3268871 0,89 C0,106.673113 37.6080787,121 84,121 Z M84,121";
124 -var RING_TWO_PATH = "M84,121 C130.391921,121 168,106.673113 168,89 C168,71.3268871 130.391921,57 84,57 C37.6080787,57 0,71.3268871 0,89 C0,106.673113 37.6080787,121 84,121 Z M84,121";
125 -var RING_THREE_PATH = "M84,121 C130.391921,121 168,106.673113 168,89 C168,71.3268871 130.391921,57 84,57 C37.6080787,57 0,71.3268871 0,89 C0,106.673113 37.6080787,121 84,121 Z M84,121";
126 -var RING_TWO_ROTATE = new Transform().translate(84.000000, 89.000000).rotate(-240.000000).translate(-84.000000, -89.000000);
127 -var RING_THREE_ROTATE = new Transform().translate(84.000000, 89.000000).rotate(-300.000000).translate(-84.000000, -89.000000);
120 +var BORDER_PATH =
121 + 'M3.00191459,4 C1.34400294,4 0,5.34785514 0,7.00550479 L0,220.994495 C0,222.65439 1.34239483,224 3.00191459,224 L276.998085,224 C278.655997,224 280,222.652145 280,220.994495 L280,7.00550479 C280,5.34561033 278.657605,4 276.998085,4 L3.00191459,4 Z M3.00191459,4';
122 +var BG_PATH =
123 + 'M3.00191459,1 C1.34400294,1 0,2.34785514 0,4.00550479 L0,217.994495 C0,219.65439 1.34239483,221 3.00191459,221 L276.998085,221 C278.655997,221 280,219.652145 280,217.994495 L280,4.00550479 C280,2.34561033 278.657605,1 276.998085,1 L3.00191459,1 Z M3.00191459,1';
124 +var BAR_PATH =
125 + 'M3.00191459,0 C1.34400294,0 0,1.34559019 0,3.00878799 L0,21 C0,21 0,21 0,21 L280,21 C280,21 280,21 280,21 L280,3.00878799 C280,1.34708027 278.657605,0 276.998085,0 L3.00191459,0 Z M3.00191459,0';
126 +var RED_DOT_PATH =
127 + 'M12.5,17 C16.0898511,17 19,14.0898511 19,10.5 C19,6.91014895 16.0898511,4 12.5,4 C8.91014895,4 6,6.91014895 6,10.5 C6,14.0898511 8.91014895,17 12.5,17 Z M12.5,17';
128 +var YELLOW_DOT_PATH =
129 + 'M31.5,17 C35.0898511,17 38,14.0898511 38,10.5 C38,6.91014895 35.0898511,4 31.5,4 C27.9101489,4 25,6.91014895 25,10.5 C25,14.0898511 27.9101489,17 31.5,17 Z M31.5,17';
130 +var GREEN_DOT_PATH =
131 + 'M50.5,17 C54.0898511,17 57,14.0898511 57,10.5 C57,6.91014895 54.0898511,4 50.5,4 C46.9101489,4 44,6.91014895 44,10.5 C44,14.0898511 46.9101489,17 50.5,17 Z M50.5,17';
132 +var CENTER_DOT_PATH =
133 + 'M84,105 C92.8365564,105 100,97.8365564 100,89 C100,80.1634436 92.8365564,73 84,73 C75.1634436,73 68,80.1634436 68,89 C68,97.8365564 75.1634436,105 84,105 Z M84,105';
134 +var RING_ONE_PATH =
135 + 'M84,121 C130.391921,121 168,106.673113 168,89 C168,71.3268871 130.391921,57 84,57 C37.6080787,57 0,71.3268871 0,89 C0,106.673113 37.6080787,121 84,121 Z M84,121';
136 +var RING_TWO_PATH =
137 + 'M84,121 C130.391921,121 168,106.673113 168,89 C168,71.3268871 130.391921,57 84,57 C37.6080787,57 0,71.3268871 0,89 C0,106.673113 37.6080787,121 84,121 Z M84,121';
138 +var RING_THREE_PATH =
139 + 'M84,121 C130.391921,121 168,106.673113 168,89 C168,71.3268871 130.391921,57 84,57 C37.6080787,57 0,71.3268871 0,89 C0,106.673113 37.6080787,121 84,121 Z M84,121';
140 +var RING_TWO_ROTATE = new Transform()
141 + .translate(84.000000, 89.000000)
142 + .rotate(-240.000000)
143 + .translate(-84.000000, -89.000000);
144 +var RING_THREE_ROTATE = new Transform()
145 + .translate(84.000000, 89.000000)
146 + .rotate(-300.000000)
147 + .translate(-84.000000, -89.000000);
148
149 module.exports = VectorWidget;
130 -
fixtures/art/app.js
+1 -1
@@ -1,4 +1,4 @@
1 -"use strict";
1 +'use strict';
2
3 var React = require('react');
4 var ReactDOM = require('react-dom');
fixtures/art/webpack.config.js
+6 -6
@@ -16,19 +16,19 @@ module.exports = {
16 require.resolve('babel-preset-react'),
17 ],
18 },
19 - }
20 - ]
19 + },
20 + ],
21 },
22 plugins: [
23 new webpack.DefinePlugin({
24 'process.env': {
25 NODE_ENV: JSON.stringify('development'),
26 },
27 - })
27 + }),
28 ],
29 resolve: {
30 alias: {
31 - react: require.resolve('react')
32 - }
33 - }
31 + react: require.resolve('react'),
32 + },
33 + },
34 };
fixtures/dom/public/react-loader.js
+2 -1
@@ -29,7 +29,8 @@ var version = query.version || 'local';
29
30 if (version !== 'local') {
31 REACT_PATH = 'https://unpkg.com/react@' + version + '/dist/react.min.js';
32 - DOM_PATH = 'https://unpkg.com/react-dom@' + version + '/dist/react-dom.min.js';
32 + DOM_PATH =
33 + 'https://unpkg.com/react-dom@' + version + '/dist/react-dom.min.js';
34 }
35
36 document.write('<script src="' + REACT_PATH + '"></script>');
fixtures/dom/src/components/App.js
+2 -2
@@ -4,11 +4,11 @@ import Fixtures from './fixtures';
4
5 import '../style.css';
6
7 -function App () {
7 +function App() {
8 return (
9 <div>
10 <Header />
11 - <div className="container" >
11 + <div className="container">
12 <Fixtures />
13 </div>
14 </div>
fixtures/dom/src/components/Fixture.js
+2 -2
@@ -7,7 +7,7 @@ const propTypes = {
7
8 class Fixture extends React.Component {
9 render() {
10 - const { children } = this.props;
10 + const {children} = this.props;
11
12 return (
13 <div className="test-fixture">
@@ -19,4 +19,4 @@ class Fixture extends React.Component {
19
20 Fixture.propTypes = propTypes;
21
22 -export default Fixture
22 +export default Fixture;
fixtures/dom/src/components/FixtureSet.js
+3 -6
@@ -7,16 +7,13 @@ const propTypes = {
7 };
8
9 class FixtureSet extends React.Component {
10 -
10 render() {
12 - const { title, description, children } = this.props;
11 + const {title, description, children} = this.props;
12
13 return (
14 <div>
15 <h1>{title}</h1>
17 - {description && (
18 - <p>{description}</p>
19 - )}
16 + {description && <p>{description}</p>}
17
18 {children}
19 </div>
@@ -26,4 +23,4 @@ class FixtureSet extends React.Component {
23
24 FixtureSet.propTypes = propTypes;
25
29 -export default FixtureSet
26 +export default FixtureSet;
fixtures/dom/src/components/Header.js
+46 -38
@@ -1,4 +1,4 @@
1 -import { parse, stringify } from 'query-string';
1 +import {parse, stringify} from 'query-string';
2 import getVersionTags from '../tags';
3 const React = window.React;
4
@@ -8,15 +8,14 @@ class Header extends React.Component {
8 const query = parse(window.location.search);
9 const version = query.version || 'local';
10 const versions = [version];
11 - this.state = { version, versions };
11 + this.state = {version, versions};
12 }
13 componentWillMount() {
14 - getVersionTags()
15 - .then(tags => {
16 - let versions = tags.map(tag => tag.name.slice(1));
17 - versions = [`local`, ...versions];
18 - this.setState({ versions });
19 - })
14 + getVersionTags().then(tags => {
15 + let versions = tags.map(tag => tag.name.slice(1));
16 + versions = [`local`, ...versions];
17 + this.setState({versions});
18 + });
19 }
20 handleVersionChange(event) {
21 const query = parse(window.location.search);
@@ -31,41 +30,50 @@ class Header extends React.Component {
30 }
31 render() {
32 return (
34 - <header className="header">
35 - <div className="header__inner">
36 - <span className="header__logo">
37 - <img src="https://facebook.github.io/react/img/logo.svg" alt="" width="32" height="32" />
38 - React Sandbox (v{React.version})
39 - </span>
33 + <header className="header">
34 + <div className="header__inner">
35 + <span className="header__logo">
36 + <img
37 + src="https://facebook.github.io/react/img/logo.svg"
38 + alt=""
39 + width="32"
40 + height="32"
41 + />
42 + React Sandbox (v{React.version})
43 + </span>
44
41 - <div className="header-controls">
42 - <label htmlFor="example">
43 - <span className="sr-only">Select an example</span>
44 - <select value={window.location.pathname} onChange={this.handleFixtureChange}>
45 - <option value="/">Select a Fixture</option>
46 - <option value="/range-inputs">Range Inputs</option>
47 - <option value="/text-inputs">Text Inputs</option>
48 - <option value="/number-inputs">Number Input</option>
49 - <option value="/password-inputs">Password Input</option>
50 - <option value="/selects">Selects</option>
51 - <option value="/textareas">Textareas</option>
52 - <option value="/input-change-events">Input change events</option>
53 - <option value="/buttons">Buttons</option>
54 - </select>
55 - </label>
56 - <label htmlFor="react_version">
57 - <span className="sr-only">Select a version to test</span>
58 - <select
59 - value={this.state.version}
60 - onChange={this.handleVersionChange}>
45 + <div className="header-controls">
46 + <label htmlFor="example">
47 + <span className="sr-only">Select an example</span>
48 + <select
49 + value={window.location.pathname}
50 + onChange={this.handleFixtureChange}>
51 + <option value="/">Select a Fixture</option>
52 + <option value="/range-inputs">Range Inputs</option>
53 + <option value="/text-inputs">Text Inputs</option>
54 + <option value="/number-inputs">Number Input</option>
55 + <option value="/password-inputs">Password Input</option>
56 + <option value="/selects">Selects</option>
57 + <option value="/textareas">Textareas</option>
58 + <option value="/input-change-events">
59 + Input change events
60 + </option>
61 + <option value="/buttons">Buttons</option>
62 + </select>
63 + </label>
64 + <label htmlFor="react_version">
65 + <span className="sr-only">Select a version to test</span>
66 + <select
67 + value={this.state.version}
68 + onChange={this.handleVersionChange}>
69 {this.state.versions.map(version => (
70 <option key={version} value={version}>{version}</option>
71 ))}
64 - </select>
65 - </label>
72 + </select>
73 + </label>
74 + </div>
75 </div>
67 - </div>
68 - </header>
76 + </header>
77 );
78 }
79 }
fixtures/dom/src/components/TestCase.js
+44 -54
@@ -2,14 +2,14 @@ import cn from 'classnames';
2 import semver from 'semver';
3 import React from 'react';
4 import PropTypes from 'prop-types';
5 -import { parse } from 'query-string';
6 -import { semverString } from './propTypes';
5 +import {parse} from 'query-string';
6 +import {semverString} from './propTypes';
7
8 const propTypes = {
9 children: PropTypes.node.isRequired,
10 title: PropTypes.node.isRequired,
11 resolvedIn: semverString,
12 - resolvedBy: PropTypes.string
12 + resolvedBy: PropTypes.string,
13 };
14
15 class TestCase extends React.Component {
@@ -21,10 +21,10 @@ class TestCase extends React.Component {
21 };
22 }
23
24 - handleChange = (e) => {
24 + handleChange = e => {
25 this.setState({
26 - complete: e.target.checked
27 - })
26 + complete: e.target.checked,
27 + });
28 };
29
30 render() {
@@ -37,24 +37,16 @@ class TestCase extends React.Component {
37 children,
38 } = this.props;
39
40 - let { complete } = this.state;
40 + let {complete} = this.state;
41
42 - const { version } = parse(window.location.search);
43 - const isTestRelevant = (
44 - !version ||
45 - !resolvedIn ||
46 - semver.gte(version, resolvedIn)
47 - );
42 + const {version} = parse(window.location.search);
43 + const isTestRelevant =
44 + !version || !resolvedIn || semver.gte(version, resolvedIn);
45
46 complete = !isTestRelevant || complete;
47
48 return (
52 - <section
53 - className={cn(
54 - "test-case",
55 - complete && 'test-case--complete'
56 - )}
57 - >
49 + <section className={cn('test-case', complete && 'test-case--complete')}>
50 <h2 className="test-case__title type-subheading">
51 <label>
52 <input
@@ -68,31 +60,28 @@ class TestCase extends React.Component {
60 </h2>
61
62 <dl className="test-case__details">
71 - {resolvedIn && (
72 - <dt>First supported in: </dt>)}
73 - {resolvedIn && (
74 - <dd>
75 - <a href={'https://github.com/facebook/react/tag/v' + resolvedIn}>
76 - <code>{resolvedIn}</code>
77 - </a>
78 - </dd>
79 - )}
80 -
81 - {resolvedBy && (
82 - <dt>Fixed by: </dt>)}
83 - {resolvedBy && (
63 + {resolvedIn && <dt>First supported in: </dt>}
64 + {resolvedIn &&
65 + <dd>
66 + <a href={'https://github.com/facebook/react/tag/v' + resolvedIn}>
67 + <code>{resolvedIn}</code>
68 + </a>
69 + </dd>}
70 +
71 + {resolvedBy && <dt>Fixed by: </dt>}
72 + {resolvedBy &&
73 <dd>
85 - <a href={'https://github.com/facebook/react/pull/' + resolvedBy.slice(1)}>
74 + <a
75 + href={
76 + 'https://github.com/facebook/react/pull/' +
77 + resolvedBy.slice(1)
78 + }>
79 <code>{resolvedBy}</code>
80 </a>
88 - </dd>
89 - )}
90 -
91 - {affectedBrowsers &&
92 - <dt>Affected browsers: </dt>}
93 - {affectedBrowsers &&
94 - <dd>{affectedBrowsers}</dd>
95 - }
81 + </dd>}
82 +
83 + {affectedBrowsers && <dt>Affected browsers: </dt>}
84 + {affectedBrowsers && <dd>{affectedBrowsers}</dd>}
85 </dl>
86
87 <p className="test-case__desc">
@@ -100,12 +89,13 @@ class TestCase extends React.Component {
89 </p>
90
91 <div className="test-case__body">
103 - {!isTestRelevant &&(
104 - <p className="test-case__invalid-version">
105 - <strong>Note:</strong> This test case was fixed in a later version of React.
106 - This test is not expected to pass for the selected version, and that's ok!
107 - </p>
108 - )}
92 + {!isTestRelevant &&
93 + <p className="test-case__invalid-version">
94 + <strong>Note:</strong>
95 + {' '}
96 + This test case was fixed in a later version of React.
97 + This test is not expected to pass for the selected version, and that's ok!
98 + </p>}
99
100 {children}
101 </div>
@@ -118,7 +108,7 @@ TestCase.propTypes = propTypes;
108
109 TestCase.Steps = class extends React.Component {
110 render() {
121 - const { children } = this.props;
111 + const {children} = this.props;
112 return (
113 <div>
114 <h3>Steps to reproduce:</h3>
@@ -126,13 +116,13 @@ TestCase.Steps = class extends React.Component {
116 {children}
117 </ol>
118 </div>
129 - )
119 + );
120 }
131 -}
121 +};
122
123 TestCase.ExpectedResult = class extends React.Component {
124 render() {
135 - const { children } = this.props
125 + const {children} = this.props;
126 return (
127 <div>
128 <h3>Expected Result:</h3>
@@ -140,7 +130,7 @@ TestCase.ExpectedResult = class extends React.Component {
130 {children}
131 </p>
132 </div>
143 - )
133 + );
134 }
145 -}
146 -export default TestCase
135 +};
136 +export default TestCase;
fixtures/dom/src/components/fixtures/buttons/index.js
+4 -4
@@ -21,10 +21,10 @@ export default class ButtonTestCases extends React.Component {
21 Nothing should happen
22 </TestCase.ExpectedResult>
23 <button disabled onClick={onButtonClick}>Click Me</button>
24 - </TestCase>
25 - <TestCase
26 - title="onClick with disabled buttons containing other elements"
27 - description="The onClick event handler should not be invoked when clicking on a disabled button that contains other elements">
24 + </TestCase>
25 + <TestCase
26 + title="onClick with disabled buttons containing other elements"
27 + description="The onClick event handler should not be invoked when clicking on a disabled button that contains other elements">
28 <TestCase.Steps>
29 <li>Click on the disabled button, which contains a span</li>
30 </TestCase.Steps>
fixtures/dom/src/components/fixtures/index.js
+1 -1
@@ -29,7 +29,7 @@ function FixturesPage() {
29 case '/password-inputs':
30 return <PasswordInputFixtures />;
31 case '/buttons':
32 - return <ButtonFixtures />
32 + return <ButtonFixtures />;
33 default:
34 return <p>Please select a test fixture.</p>;
35 }
fixtures/dom/src/components/fixtures/input-change-events/InputPlaceholderFixture.js
+14 -16
@@ -2,8 +2,6 @@ import React from 'react';
2
3 import Fixture from '../../Fixture';
4
5 -
6 -
5 class InputPlaceholderFixture extends React.Component {
6 constructor(props, context) {
7 super(props, context);
@@ -15,32 +13,32 @@ class InputPlaceholderFixture extends React.Component {
13 }
14
15 handleChange = () => {
18 - this.setState(({ changeCount }) => {
16 + this.setState(({changeCount}) => {
17 return {
20 - changeCount: changeCount + 1
21 - }
22 - })
23 - }
18 + changeCount: changeCount + 1,
19 + };
20 + });
21 + };
22 handleGeneratePlaceholder = () => {
23 this.setState({
26 - placeholder: `A placeholder: ${Math.random() * 100}`
27 - })
28 - }
24 + placeholder: `A placeholder: ${Math.random() * 100}`,
25 + });
26 + };
27
28 handleReset = () => {
29 this.setState({
30 changeCount: 0,
33 - })
34 - }
31 + });
32 + };
33
34 render() {
37 - const { placeholder, changeCount } = this.state;
35 + const {placeholder, changeCount} = this.state;
36 const color = changeCount === 0 ? 'green' : 'red';
37
38 return (
39 <Fixture>
40 <input
43 - type='text'
41 + type="text"
42 placeholder={placeholder}
43 onChange={this.handleChange}
44 />
@@ -49,12 +47,12 @@ class InputPlaceholderFixture extends React.Component {
47 Change placeholder
48 </button>
49
52 - <p style={{ color }}>
50 + <p style={{color}}>
51 <code>onChange</code>{' calls: '}<strong>{changeCount}</strong>
52 </p>
53 <button onClick={this.handleReset}>Reset count</button>
54 </Fixture>
57 - )
55 + );
56 }
57 }
58
fixtures/dom/src/components/fixtures/input-change-events/RadioClickFixture.js
+12 -16
@@ -12,40 +12,36 @@ class RadioClickFixture extends React.Component {
12 }
13
14 handleChange = () => {
15 - this.setState(({ changeCount }) => {
15 + this.setState(({changeCount}) => {
16 return {
17 - changeCount: changeCount + 1
18 - }
19 - })
20 - }
17 + changeCount: changeCount + 1,
18 + };
19 + });
20 + };
21
22 handleReset = () => {
23 this.setState({
24 changeCount: 0,
25 - })
26 - }
25 + });
26 + };
27
28 render() {
29 - const { changeCount } = this.state;
29 + const {changeCount} = this.state;
30 const color = changeCount === 0 ? 'green' : 'red';
31 -
31 +
32 return (
33 <Fixture>
34 <label>
35 - <input
36 - defaultChecked
37 - type='radio'
38 - onChange={this.handleChange}
39 - />
35 + <input defaultChecked type="radio" onChange={this.handleChange} />
36 Test case radio input
37 </label>
38 {' '}
43 - <p style={{ color }}>
39 + <p style={{color}}>
40 <code>onChange</code>{' calls: '}<strong>{changeCount}</strong>
41 </p>
42 <button onClick={this.handleReset}>Reset count</button>
43 </Fixture>
48 - )
44 + );
45 }
46 }
47
fixtures/dom/src/components/fixtures/input-change-events/RangeKeyboardFixture.js
+21 -23
@@ -2,7 +2,6 @@ import React from 'react';
2
3 import Fixture from '../../Fixture';
4
5 -
5 class RangeKeyboardFixture extends React.Component {
6 constructor(props, context) {
7 super(props, context);
@@ -14,61 +13,60 @@ class RangeKeyboardFixture extends React.Component {
13 }
14
15 componentDidMount() {
17 - this.input.addEventListener('keydown', this.handleKeydown, false)
16 + this.input.addEventListener('keydown', this.handleKeydown, false);
17 }
18
19 componentWillUnmount() {
21 - this.input.removeEventListener('keydown', this.handleKeydown, false)
20 + this.input.removeEventListener('keydown', this.handleKeydown, false);
21 }
22
23 handleChange = () => {
25 - this.setState(({ changeCount }) => {
24 + this.setState(({changeCount}) => {
25 return {
27 - changeCount: changeCount + 1
28 - }
29 - })
30 - }
26 + changeCount: changeCount + 1,
27 + };
28 + });
29 + };
30
32 - handleKeydown = (e) => {
31 + handleKeydown = e => {
32 // only interesting in arrow key events
34 - if (![37, 38, 39, 40].includes(e.keyCode))
35 - return;
33 + if (![37, 38, 39, 40].includes(e.keyCode)) return;
34
37 - this.setState(({ keydownCount }) => {
35 + this.setState(({keydownCount}) => {
36 return {
39 - keydownCount: keydownCount + 1
40 - }
41 - })
42 - }
37 + keydownCount: keydownCount + 1,
38 + };
39 + });
40 + };
41
42 handleReset = () => {
43 this.setState({
44 keydownCount: 0,
45 changeCount: 0,
48 - })
49 - }
46 + });
47 + };
48
49 render() {
52 - const { keydownCount, changeCount } = this.state;
50 + const {keydownCount, changeCount} = this.state;
51 const color = keydownCount === changeCount ? 'green' : 'red';
52
53 return (
54 <Fixture>
55 <input
58 - type='range'
59 - ref={r => this.input = r}
56 + type="range"
57 + ref={r => (this.input = r)}
58 onChange={this.handleChange}
59 />
60 {' '}
61
64 - <p style={{ color }}>
62 + <p style={{color}}>
63 <code>onKeyDown</code>{' calls: '}<strong>{keydownCount}</strong>
64 {' vs '}
65 <code>onChange</code>{' calls: '}<strong>{changeCount}</strong>
66 </p>
67 <button onClick={this.handleReset}>Reset counts</button>
68 </Fixture>
71 - )
69 + );
70 }
71 }
72
fixtures/dom/src/components/fixtures/input-change-events/index.js
+5 -10
@@ -11,14 +11,12 @@ class InputChangeEvents extends React.Component {
11 return (
12 <FixtureSet
13 title="Input change events"
14 - description="Tests proper behavior of the onChange event for inputs"
15 - >
14 + description="Tests proper behavior of the onChange event for inputs">
15 <TestCase
16 title="Range keyboard changes"
17 description={`
18 Range inputs should fire onChange events for keyboard events
20 - `}
21 - >
19 + `}>
20 <TestCase.Steps>
21 <li>Focus range input</li>
22 <li>change value via the keyboard arrow keys</li>
@@ -38,8 +36,7 @@ class InputChangeEvents extends React.Component {
36 Radio inputs should only fire change events when the checked
37 state changes.
38 `}
41 - resolvedIn="16.0.0"
42 - >
39 + resolvedIn="16.0.0">
40 <TestCase.Steps>
41 <li>Click on the Radio input (or label text)</li>
42 </TestCase.Steps>
@@ -59,8 +56,7 @@ class InputChangeEvents extends React.Component {
56 `}
57 resolvedIn="15.0.0"
58 resolvedBy="#5004"
62 - affectedBrowsers="IE9+"
63 - >
59 + affectedBrowsers="IE9+">
60 <TestCase.Steps>
61 <li>Click on the Text input</li>
62 <li>Click on the "Change placeholder" button</li>
@@ -77,5 +73,4 @@ class InputChangeEvents extends React.Component {
73 }
74 }
75
80 -
81 -export default InputChangeEvents
76 +export default InputChangeEvents;
fixtures/dom/src/components/fixtures/number-inputs/NumberInputDecimal.js
+4 -4
@@ -3,12 +3,12 @@ const React = window.React;
3 import Fixture from '../../Fixture';
4
5 class NumberInputDecimal extends React.Component {
6 - state = { value: '.98' };
6 + state = {value: '.98'};
7 changeValue = () => {
8 this.setState({
9 value: '0.98',
10 });
11 - }
11 + };
12 render() {
13 const {value} = this.state;
14 return (
@@ -19,8 +19,8 @@ class NumberInputDecimal extends React.Component {
19 <input
20 type="number"
21 value={value}
22 - onChange={(e) => {
23 - this.setState({value: e.target.value});
22 + onChange={e => {
23 + this.setState({value: e.target.value});
24 }}
25 />
26 <button onClick={this.changeValue}>change.98 to 0.98</button>
fixtures/dom/src/components/fixtures/number-inputs/NumberInputExtraZeroes.js
+6 -6
@@ -3,17 +3,17 @@ const React = window.React;
3 import Fixture from '../../Fixture';
4
5 class NumberInputExtraZeroes extends React.Component {
6 - state = { value: '3.0000' }
6 + state = {value: '3.0000'};
7 changeValue = () => {
8 this.setState({
9 - value: '3.0000'
9 + value: '3.0000',
10 });
11 - }
11 + };
12 onChange = event => {
13 - this.setState({ value: event.target.value });
14 - }
13 + this.setState({value: event.target.value});
14 + };
15 render() {
16 - const { value } = this.state
16 + const {value} = this.state;
17 return (
18 <Fixture>
19 <div>{this.props.children}</div>
fixtures/dom/src/components/fixtures/number-inputs/NumberTestCase.js
+14 -8
@@ -3,13 +3,13 @@ const React = window.React;
3 import Fixture from '../../Fixture';
4
5 class NumberTestCase extends React.Component {
6 - state = { value: '' };
7 - onChange = (event) => {
8 - const parsed = parseFloat(event.target.value, 10)
9 - const value = isNaN(parsed) ? '' : parsed
6 + state = {value: ''};
7 + onChange = event => {
8 + const parsed = parseFloat(event.target.value, 10);
9 + const value = isNaN(parsed) ? '' : parsed;
10
11 - this.setState({ value })
12 - }
11 + this.setState({value});
12 + };
13 render() {
14 return (
15 <Fixture>
@@ -18,8 +18,14 @@ class NumberTestCase extends React.Component {
18 <div className="control-box">
19 <fieldset>
20 <legend>Controlled</legend>
21 - <input type="number" value={this.state.value} onChange={this.onChange} />
22 - <span className="hint"> Value: {JSON.stringify(this.state.value)}</span>
21 + <input
22 + type="number"
23 + value={this.state.value}
24 + onChange={this.onChange}
25 + />
26 + <span className="hint">
27 + {' '}Value: {JSON.stringify(this.state.value)}
28 + </span>
29 </fieldset>
30
31 <fieldset>
fixtures/dom/src/components/fixtures/number-inputs/index.js
+29 -40
@@ -9,14 +9,12 @@ import NumberInputExtraZeroes from './NumberInputExtraZeroes';
9 function NumberInputs() {
10 return (
11 <FixtureSet
12 - title="Number inputs"
13 - description="Number inputs inconsistently assign and report the value
14 - property depending on the browser."
15 - >
12 + title="Number inputs"
13 + description="Number inputs inconsistently assign and report the value
14 + property depending on the browser.">
15 <TestCase
17 - title="Backspacing"
18 - description="The decimal place should not be lost"
19 - >
16 + title="Backspacing"
17 + description="The decimal place should not be lost">
18 <TestCase.Steps>
19 <li>Type "3.1"</li>
20 <li>Press backspace, eliminating the "1"</li>
@@ -36,9 +34,8 @@ function NumberInputs() {
34 </TestCase>
35
36 <TestCase
39 - title="Decimal precision"
40 - description="Supports decimal precision greater than 2 places"
41 - >
37 + title="Decimal precision"
38 + description="Supports decimal precision greater than 2 places">
39 <TestCase.Steps>
40 <li>Type "0.01"</li>
41 </TestCase.Steps>
@@ -51,9 +48,8 @@ function NumberInputs() {
48 </TestCase>
49
50 <TestCase
54 - title="Exponent form"
55 - description="Supports exponent form ('2e4')"
56 - >
51 + title="Exponent form"
52 + description="Supports exponent form ('2e4')">
53 <TestCase.Steps>
54 <li>Type "2e"</li>
55 <li>Type 4, to read "2e4"</li>
@@ -66,10 +62,7 @@ function NumberInputs() {
62 <NumberTestCase />
63 </TestCase>
64
69 - <TestCase
70 - title="Exponent Form"
71 - description="Pressing 'e' at the end"
72 - >
65 + <TestCase title="Exponent Form" description="Pressing 'e' at the end">
66 <TestCase.Steps>
67 <li>Type "3.14"</li>
68 <li>Press "e", so that the input reads "3.14e"</li>
@@ -83,9 +76,8 @@ function NumberInputs() {
76 </TestCase>
77
78 <TestCase
86 - title="Exponent Form"
87 - description="Supports pressing 'ee' in the middle of a number"
88 - >
79 + title="Exponent Form"
80 + description="Supports pressing 'ee' in the middle of a number">
81 <TestCase.Steps>
82 <li>Type "3.14"</li>
83 <li>Move the text cursor to after the decimal place</li>
@@ -100,9 +92,8 @@ function NumberInputs() {
92 </TestCase>
93
94 <TestCase
103 - title="Trailing Zeroes"
104 - description="Typing '3.0' preserves the trailing zero"
105 - >
95 + title="Trailing Zeroes"
96 + description="Typing '3.0' preserves the trailing zero">
97 <TestCase.Steps>
98 <li>Type "3.0"</li>
99 </TestCase.Steps>
@@ -115,9 +106,8 @@ function NumberInputs() {
106 </TestCase>
107
108 <TestCase
118 - title="Inserting decimals precision"
119 - description="Inserting '.' in to '300' maintains the trailing zeroes"
120 - >
109 + title="Inserting decimals precision"
110 + description="Inserting '.' in to '300' maintains the trailing zeroes">
111 <TestCase.Steps>
112 <li>Type "300"</li>
113 <li>Move the cursor to after the "3"</li>
@@ -131,9 +121,8 @@ function NumberInputs() {
121 </TestCase>
122
123 <TestCase
134 - title="Replacing numbers with -"
135 - description="Replacing a number with the '-' sign should not clear the value"
136 - >
124 + title="Replacing numbers with -"
125 + description="Replacing a number with the '-' sign should not clear the value">
126 <TestCase.Steps>
127 <li>Type "3"</li>
128 <li>Select the entire value"</li>
@@ -147,9 +136,8 @@ function NumberInputs() {
136 </TestCase>
137
138 <TestCase
150 - title="Negative numbers"
151 - description="Typing minus when inserting a negative number should work"
152 - >
139 + title="Negative numbers"
140 + description="Typing minus when inserting a negative number should work">
141 <TestCase.Steps>
142 <li>Type "-"</li>
143 <li>Type '3'</li>
@@ -161,9 +149,8 @@ function NumberInputs() {
149 <NumberTestCase />
150 </TestCase>
151 <TestCase
164 - title="Decimal numbers"
165 - description="eg: initial value is '.98', when format to '0.98', should change to '0.98' "
166 - >
152 + title="Decimal numbers"
153 + description="eg: initial value is '.98', when format to '0.98', should change to '0.98' ">
154 <TestCase.Steps>
155 <li>initial value is '.98'</li>
156 <li>setState to '0.98'</li>
@@ -177,8 +164,7 @@ function NumberInputs() {
164
165 <TestCase
166 title="Trailing zeroes"
180 - description="Extraneous zeroes should be retained when changing the value via setState"
181 - >
167 + description="Extraneous zeroes should be retained when changing the value via setState">
168 <TestCase.Steps>
169 <li>Change the text to 4.0000</li>
170 <li>Click "Reset to 3.0000"</li>
@@ -193,9 +179,12 @@ function NumberInputs() {
179 <p className="footnote">
180 <b>Notes:</b> Firefox drops extraneous zeroes when
181 assigned. Zeroes are preserved when editing, however
196 - directly assigning a new value will drop zeroes. This <a
197 - href="https://bugzilla.mozilla.org/show_bug.cgi?id=1003896">is
198 - a bug in Firefox</a> that we can not control for.
182 + directly assigning a new value will drop zeroes. This
183 + {' '}
184 + <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1003896">
185 + is
186 + a bug in Firefox
187 + </a> that we can not control for.
188 </p>
189 </TestCase>
190 </FixtureSet>
fixtures/dom/src/components/fixtures/password-inputs/PasswordTestCase.js
+12 -6
@@ -3,10 +3,10 @@ const React = window.React;
3 import Fixture from '../../Fixture';
4
5 class PasswordTestCase extends React.Component {
6 - state = { value: '' };
7 - onChange = (event) => {
8 - this.setState({ value: event.target.value })
9 - }
6 + state = {value: ''};
7 + onChange = event => {
8 + this.setState({value: event.target.value});
9 + };
10 render() {
11 return (
12 <Fixture>
@@ -15,8 +15,14 @@ class PasswordTestCase extends React.Component {
15 <div className="control-box">
16 <fieldset>
17 <legend>Controlled</legend>
18 - <input type="password" value={this.state.value} onChange={this.onChange} />
19 - <span className="hint"> Value: {JSON.stringify(this.state.value)}</span>
18 + <input
19 + type="password"
20 + value={this.state.value}
21 + onChange={this.onChange}
22 + />
23 + <span className="hint">
24 + {' '}Value: {JSON.stringify(this.state.value)}
25 + </span>
26 </fieldset>
27
28 <fieldset>
fixtures/dom/src/components/fixtures/password-inputs/index.js
+1 -1
@@ -2,7 +2,7 @@ const React = window.React;
2
3 import FixtureSet from '../../FixtureSet';
4 import TestCase from '../../TestCase';
5 -import PasswordTestCase from './PasswordTestCase'
5 +import PasswordTestCase from './PasswordTestCase';
6
7 function NumberInputs() {
8 return (
fixtures/dom/src/components/fixtures/range-inputs/index.js
+9 -5
@@ -1,16 +1,20 @@
1 const React = window.React;
2
3 class RangeInputs extends React.Component {
4 - state = { value: 0.5 };
5 - onChange = (event) => {
6 - this.setState({ value: event.target.value });
7 - }
4 + state = {value: 0.5};
5 + onChange = event => {
6 + this.setState({value: event.target.value});
7 + };
8 render() {
9 return (
10 <form>
11 <fieldset>
12 <legend>Controlled</legend>
13 - <input type="range" value={this.state.value} onChange={this.onChange} />
13 + <input
14 + type="range"
15 + value={this.state.value}
16 + onChange={this.onChange}
17 + />
18 <span className="hint">Value: {this.state.value}</span>
19 </fieldset>
20
fixtures/dom/src/components/fixtures/selects/index.js
+4 -4
@@ -1,10 +1,10 @@
1 const React = window.React;
2
3 class SelectFixture extends React.Component {
4 - state = { value: '' };
5 - onChange = (event) => {
6 - this.setState({ value: event.target.value });
7 - }
4 + state = {value: ''};
5 + onChange = event => {
6 + this.setState({value: event.target.value});
7 + };
8 render() {
9 return (
10 <form>
fixtures/dom/src/components/fixtures/text-inputs/InputTestCase.js
+10 -10
@@ -6,35 +6,35 @@ class InputTestCase extends React.Component {
6 static defaultProps = {
7 type: 'text',
8 defaultValue: '',
9 - parseAs: 'text'
10 - }
9 + parseAs: 'text',
10 + };
11
12 - constructor () {
12 + constructor() {
13 super(...arguments);
14
15 this.state = {
16 - value: this.props.defaultValue
16 + value: this.props.defaultValue,
17 };
18 }
19
20 - onChange = (event) => {
20 + onChange = event => {
21 const raw = event.target.value;
22
23 switch (this.props.type) {
24 case 'number':
25 const parsed = parseFloat(event.target.value, 10);
26
27 - this.setState({ value: isNaN(parsed) ? '' : parsed });
27 + this.setState({value: isNaN(parsed) ? '' : parsed});
28
29 break;
30 default:
31 - this.setState({ value: raw });
31 + this.setState({value: raw});
32 }
33 - }
33 + };
34
35 render() {
36 - const { children, type, defaultValue } = this.props;
37 - const { value } = this.state;
36 + const {children, type, defaultValue} = this.props;
37 + const {value} = this.state;
38
39 return (
40 <Fixture>
fixtures/dom/src/components/fixtures/text-inputs/index.js
+9 -7
@@ -10,8 +10,7 @@ class TextInputFixtures extends React.Component {
10 return (
11 <FixtureSet
12 title="Inputs"
13 - description="Common behavior across controled and uncontrolled inputs"
14 - >
13 + description="Common behavior across controled and uncontrolled inputs">
14 <TestCase title="Numbers in a controlled text field with no handler">
15 <TestCase.Steps>
16 <li>Move the cursor to after "2" in the text field</li>
@@ -31,7 +30,7 @@ class TextInputFixtures extends React.Component {
30
31 <fieldset>
32 <legend>Value as string</legend>
34 - <input value={"2"} onChange={() => {}} />
33 + <input value={'2'} onChange={() => {}} />
34 </fieldset>
35 </div>
36 </Fixture>
@@ -73,13 +72,16 @@ class TextInputFixtures extends React.Component {
72
73 <TestCase title="All inputs" description="General test of all inputs">
74 <InputTestCase type="text" defaultValue="Text" />
76 - <InputTestCase type="email" defaultValue="user@example.com"/>
75 + <InputTestCase type="email" defaultValue="user@example.com" />
76 <InputTestCase type="number" defaultValue={0} />
78 - <InputTestCase type="url" defaultValue="http://example.com"/>
79 - <InputTestCase type="tel" defaultValue="555-555-5555"/>
77 + <InputTestCase type="url" defaultValue="http://example.com" />
78 + <InputTestCase type="tel" defaultValue="555-555-5555" />
79 <InputTestCase type="color" defaultValue="#ff0000" />
80 <InputTestCase type="date" defaultValue="2017-01-01" />
82 - <InputTestCase type="datetime-local" defaultValue="2017-01-01T01:00" />
81 + <InputTestCase
82 + type="datetime-local"
83 + defaultValue="2017-01-01T01:00"
84 + />
85 <InputTestCase type="time" defaultValue="01:00" />
86 <InputTestCase type="month" defaultValue="2017-01" />
87 <InputTestCase type="week" defaultValue="2017-W01" />
fixtures/dom/src/components/fixtures/textareas/index.js
+4 -4
@@ -1,10 +1,10 @@
1 const React = window.React;
2
3 class TextAreaFixtures extends React.Component {
4 - state = { value: '' };
5 - onChange = (event) => {
6 - this.setState({ value: event.target.value });
7 - }
4 + state = {value: ''};
5 + onChange = event => {
6 + this.setState({value: event.target.value});
7 + };
8 render() {
9 return (
10 <div>
fixtures/dom/src/components/propTypes.js
+3 -3
@@ -1,15 +1,15 @@
1 import PropTypes from 'prop-types';
2 import semver from 'semver';
3
4 -export function semverString (props, propName, componentName) {
4 +export function semverString(props, propName, componentName) {
5 let version = props[propName];
6
7 let error = PropTypes.string(...arguments);
8 if (!error && version != null && !semver.valid(version))
9 error = new Error(
10 `\`${propName}\` should be a valid "semantic version" matching ` +
11 - 'an existing React version'
11 + 'an existing React version',
12 );
13
14 return error || null;
15 -};
15 +}
fixtures/dom/src/index.js
+1 -4
@@ -2,7 +2,4 @@ const React = window.React;
2 const ReactDOM = window.ReactDOM;
3 import App from './components/App';
4
5 -ReactDOM.render(
6 - <App />,
7 - document.getElementById('root')
8 -);
5 +ReactDOM.render(<App />, document.getElementById('root'));
fixtures/dom/src/tags.js
+12 -12
@@ -21,15 +21,15 @@ const fallbackTags = [
21 '15.1.0',
22 '15.0.2',
23 '0.14.8',
24 - '0.13.0'
25 - ].map(version => ({
26 - name: `v${version}`
27 - }))
24 + '0.13.0',
25 +].map(version => ({
26 + name: `v${version}`,
27 +}));
28
29 let canUseSessionStorage = true;
30
31 try {
32 - sessionStorage.setItem('foo', '')
32 + sessionStorage.setItem('foo', '');
33 } catch (err) {
34 canUseSessionStorage = false;
35 }
@@ -43,7 +43,7 @@ try {
43 * the request is async, even if its loaded from sessionStorage.
44 */
45 export default function getVersionTags() {
46 - return new Promise((resolve) => {
46 + return new Promise(resolve => {
47 let cachedTags;
48 if (canUseSessionStorage) {
49 cachedTags = sessionStorage.getItem(TAGS_CACHE_KEY);
@@ -52,19 +52,19 @@ export default function getVersionTags() {
52 cachedTags = JSON.parse(cachedTags);
53 resolve(cachedTags);
54 } else {
55 - fetch('https://api.github.com/repos/facebook/react/tags', { mode: 'cors' })
55 + fetch('https://api.github.com/repos/facebook/react/tags', {mode: 'cors'})
56 .then(res => res.json())
57 .then(tags => {
58 // A message property indicates an error was sent from the API
59 if (tags.message) {
60 - return resolve(fallbackTags)
60 + return resolve(fallbackTags);
61 }
62 if (canUseSessionStorage) {
63 - sessionStorage.setItem(TAGS_CACHE_KEY, JSON.stringify(tags))
63 + sessionStorage.setItem(TAGS_CACHE_KEY, JSON.stringify(tags));
64 }
65 - resolve(tags)
65 + resolve(tags);
66 })
67 - .catch(() => resolve(fallbackTags))
67 + .catch(() => resolve(fallbackTags));
68 }
69 - })
69 + });
70 }
fixtures/fiber-debugger/src/App.js
+79 -58
@@ -1,4 +1,4 @@
1 -import React, { Component } from 'react';
1 +import React, {Component} from 'react';
2 import Draggable from 'react-draggable';
3 import ReactNoop from 'react-noop-renderer';
4 import Editor from './Editor';
@@ -6,7 +6,9 @@ import Fibers from './Fibers';
6 import describeFibers from './describeFibers';
7
8 // The only place where we use it.
9 -const ReactFiberInstrumentation = ReactNoop.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactFiberInstrumentation;
9 +const ReactFiberInstrumentation =
10 + ReactNoop.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
11 + .ReactFiberInstrumentation;
12
13 function getFiberState(root, workInProgress) {
14 if (!root) {
@@ -40,8 +42,8 @@ class App extends Component {
42 return: false,
43 fx: false,
44 progressedChild: false,
43 - progressedDel: false
44 - }
45 + progressedDel: false,
46 + },
47 };
48 }
49
@@ -57,49 +59,52 @@ class App extends Component {
59 ReactNoop.render(null);
60 ReactNoop.flush();
61 ReactFiberInstrumentation.debugTool = {
60 - onMountContainer: (root) => {
62 + onMountContainer: root => {
63 currentRoot = root;
64 },
63 - onUpdateContainer: (root) => {
65 + onUpdateContainer: root => {
66 currentRoot = root;
67 },
66 - onBeginWork: (fiber) => {
68 + onBeginWork: fiber => {
69 const fibers = getFiberState(currentRoot, fiber);
70 const stage = currentStage;
69 - this.setState(({ history }) => ({
71 + this.setState(({history}) => ({
72 history: [
71 - ...history, {
73 + ...history,
74 + {
75 action: 'BEGIN',
76 fibers,
74 - stage
75 - }
76 - ]
77 + stage,
78 + },
79 + ],
80 }));
81 },
79 - onCompleteWork: (fiber) => {
82 + onCompleteWork: fiber => {
83 const fibers = getFiberState(currentRoot, fiber);
84 const stage = currentStage;
82 - this.setState(({ history }) => ({
85 + this.setState(({history}) => ({
86 history: [
84 - ...history, {
87 + ...history,
88 + {
89 action: 'COMPLETE',
90 fibers,
87 - stage
88 - }
89 - ]
91 + stage,
92 + },
93 + ],
94 }));
95 },
92 - onCommitWork: (fiber) => {
96 + onCommitWork: fiber => {
97 const fibers = getFiberState(currentRoot, fiber);
98 const stage = currentStage;
95 - this.setState(({ history }) => ({
99 + this.setState(({history}) => ({
100 history: [
97 - ...history, {
101 + ...history,
102 + {
103 action: 'COMMIT',
104 fibers,
100 - stage
101 - }
102 - ]
105 + stage,
106 + },
107 + ],
108 }));
109 },
110 };
@@ -110,38 +115,40 @@ class App extends Component {
115 toContain() {},
116 toEqual() {},
117 });
113 - window.log = s => currentStage = s;
118 + window.log = s => (currentStage = s);
119 // eslint-disable-next-line
115 - eval(window.Babel.transform(code, {
116 - presets: ['react', 'es2015']
117 - }).code);
120 + eval(
121 + window.Babel.transform(code, {
122 + presets: ['react', 'es2015'],
123 + }).code,
124 + );
125 }
126
120 - handleEdit = (e) => {
127 + handleEdit = e => {
128 e.preventDefault();
129 this.setState({
123 - isEditing: true
130 + isEditing: true,
131 });
125 - }
132 + };
133
127 - handleCloseEdit = (nextCode) => {
134 + handleCloseEdit = nextCode => {
135 localStorage.setItem('fiber-debugger-code', nextCode);
136 this.setState({
137 isEditing: false,
138 history: [],
139 currentStep: 0,
133 - code: nextCode
140 + code: nextCode,
141 });
142 this.runCode(nextCode);
136 - }
143 + };
144
145 render() {
139 - const { history, currentStep, isEditing, code } = this.state;
146 + const {history, currentStep, isEditing, code} = this.state;
147 if (isEditing) {
148 return <Editor code={code} onClose={this.handleCloseEdit} />;
149 }
150
144 - const { fibers, action, stage } = history[currentStep] || {};
151 + const {fibers, action, stage} = history[currentStep] || {};
152 let friendlyAction;
153 if (fibers) {
154 let wipFiber = fibers.descriptions[fibers.workInProgressID];
@@ -150,45 +157,59 @@ class App extends Component {
157 }
158
159 return (
153 - <div style={{ height: '100%' }}>
160 + <div style={{height: '100%'}}>
161 {fibers &&
162 <Draggable>
163 <Fibers fibers={fibers} show={this.state.show} />
157 - </Draggable>
158 - }
159 - <div style={{
160 - width: '100%',
161 - textAlign: 'center',
162 - position: 'fixed',
163 - bottom: 0,
164 - padding: 10,
165 - zIndex: 1,
166 - backgroundColor: '#fafafa',
167 - border: '1px solid #ccc'
168 - }}>
164 + </Draggable>}
165 + <div
166 + style={{
167 + width: '100%',
168 + textAlign: 'center',
169 + position: 'fixed',
170 + bottom: 0,
171 + padding: 10,
172 + zIndex: 1,
173 + backgroundColor: '#fafafa',
174 + border: '1px solid #ccc',
175 + }}>
176 <input
177 type="range"
171 - style={{ width: '25%' }}
178 + style={{width: '25%'}}
179 min={0}
180 max={history.length - 1}
181 value={currentStep}
175 - onChange={e => this.setState({ currentStep: Number(e.target.value) })}
182 + onChange={e => this.setState({currentStep: Number(e.target.value)})}
183 />
177 - <p>Step {currentStep}: {friendlyAction} (<a style={{ color: 'gray' }} onClick={this.handleEdit} href='#'>Edit</a>)</p>
184 + <p>
185 + Step
186 + {' '}
187 + {currentStep}
188 + :
189 + {' '}
190 + {friendlyAction}
191 + {' '}
192 + (
193 + <a style={{color: 'gray'}} onClick={this.handleEdit} href="#">
194 + Edit
195 + </a>
196 + )
197 + </p>
198 {stage && <p>Stage: {stage}</p>}
179 - {Object.keys(this.state.show).map(key =>
180 - <label style={{ marginRight: '10px' }} key={key}>
199 + {Object.keys(this.state.show).map(key => (
200 + <label style={{marginRight: '10px'}} key={key}>
201 <input
202 type="checkbox"
203 checked={this.state.show[key]}
204 onChange={e => {
185 - this.setState(({ show }) => ({
186 - show: {...show, [key]: !show[key]}
205 + this.setState(({show}) => ({
206 + show: {...show, [key]: !show[key]},
207 }));
188 - }} />
208 + }}
209 + />
210 {key}
211 </label>
191 - )}
212 + ))}
213 </div>
214 </div>
215 );
fixtures/fiber-debugger/src/Editor.js
+16 -12
@@ -1,34 +1,38 @@
1 -import React, { Component } from 'react';
1 +import React, {Component} from 'react';
2
3 class Editor extends Component {
4 constructor(props) {
5 super(props);
6 this.state = {
7 - code: props.code
7 + code: props.code,
8 };
9 }
10
11 render() {
12 return (
13 - <div style={{
14 - height: '100%',
15 - width: '100%'
16 - }}>
13 + <div
14 + style={{
15 + height: '100%',
16 + width: '100%',
17 + }}>
18 <textarea
19 value={this.state.code}
19 - onChange={e => this.setState({ code: e.target.value })}
20 + onChange={e => this.setState({code: e.target.value})}
21 style={{
22 height: '80%',
23 width: '100%',
23 - fontSize: '15px'
24 - }} />
25 - <div style={{ height: '20%', textAlign: 'center' }}>
26 - <button onClick={() => this.props.onClose(this.state.code)} style={{ fontSize: 'large' }}>
24 + fontSize: '15px',
25 + }}
26 + />
27 + <div style={{height: '20%', textAlign: 'center'}}>
28 + <button
29 + onClick={() => this.props.onClose(this.state.code)}
30 + style={{fontSize: 'large'}}>
31 Run
32 </button>
33 </div>
34 </div>
31 - )
35 + );
36 }
37 }
38
fixtures/fiber-debugger/src/Fibers.js
+156 -116
@@ -1,5 +1,5 @@
1 import React from 'react';
2 -import { Motion, spring } from 'react-motion';
2 +import {Motion, spring} from 'react-motion';
3 import dagre from 'dagre';
4 // import prettyFormat from 'pretty-format';
5 // import reactElement from 'pretty-format/plugins/ReactElement';
@@ -35,7 +35,7 @@ function Graph(props) {
35 g.setNode(child.key, {
36 label: child,
37 width: child.props.width,
38 - height: child.props.height
38 + height: child.props.height,
39 });
40 } else if (child.type.isEdge) {
41 const relationshipKey = child.props.source + ':' + child.props.target;
@@ -52,34 +52,36 @@ function Graph(props) {
52 g.setEdge(child.props.source, child.props.target, {
53 label: child,
54 allChildren: children.map(c => c.props.children),
55 - weight: child.props.weight
55 + weight: child.props.weight,
56 });
57 });
58
59 dagre.layout(g);
60
61 - var activeNode = g.nodes().map(v => g.node(v)).find(node =>
62 - node.label.props.isActive
63 - );
64 - const [winX, winY] = [window.innerWidth / 2, window.innerHeight / 2]
65 - var focusDx = activeNode ? (winX - activeNode.x) : 0;
66 - var focusDy = activeNode ? (winY - activeNode.y) : 0;
61 + var activeNode = g
62 + .nodes()
63 + .map(v => g.node(v))
64 + .find(node => node.label.props.isActive);
65 + const [winX, winY] = [window.innerWidth / 2, window.innerHeight / 2];
66 + var focusDx = activeNode ? winX - activeNode.x : 0;
67 + var focusDy = activeNode ? winY - activeNode.y : 0;
68
69 var nodes = g.nodes().map(v => {
70 var node = g.node(v);
71 return (
71 - <Motion style={{
72 - x: props.isDragging ? node.x + focusDx : spring(node.x + focusDx),
73 - y: props.isDragging ? node.y + focusDy : spring(node.y + focusDy)
74 - }} key={node.label.key}>
72 + <Motion
73 + style={{
74 + x: props.isDragging ? node.x + focusDx : spring(node.x + focusDx),
75 + y: props.isDragging ? node.y + focusDy : spring(node.y + focusDy),
76 + }}
77 + key={node.label.key}>
78 {interpolatingStyle =>
79 React.cloneElement(node.label, {
80 x: interpolatingStyle.x + props.dx,
81 y: interpolatingStyle.y + props.dy,
82 vanillaX: node.x,
83 vanillaY: node.y,
81 - })
82 - }
84 + })}
85 </Motion>
86 );
87 });
@@ -88,25 +90,31 @@ function Graph(props) {
90 var edge = g.edge(e);
91 let idx = 0;
92 return (
91 - <Motion style={edge.points.reduce((bag, point) => {
92 - bag[idx + ':x'] = props.isDragging ? point.x + focusDx : spring(point.x + focusDx);
93 - bag[idx + ':y'] = props.isDragging ? point.y + focusDy : spring(point.y + focusDy);
94 - idx++;
95 - return bag;
96 - }, {})} key={edge.label.key}>
93 + <Motion
94 + style={edge.points.reduce((bag, point) => {
95 + bag[idx + ':x'] = props.isDragging
96 + ? point.x + focusDx
97 + : spring(point.x + focusDx);
98 + bag[idx + ':y'] = props.isDragging
99 + ? point.y + focusDy
100 + : spring(point.y + focusDy);
101 + idx++;
102 + return bag;
103 + }, {})}
104 + key={edge.label.key}>
105 {interpolatedStyle => {
106 let points = [];
107 Object.keys(interpolatedStyle).forEach(key => {
108 const [idx, prop] = key.split(':');
109 if (!points[idx]) {
102 - points[idx] = { x: props.dx, y: props.dy };
110 + points[idx] = {x: props.dx, y: props.dy};
111 }
112 points[idx][prop] += interpolatedStyle[key];
113 });
114 return React.cloneElement(edge.label, {
115 points,
116 id: edge.label.key,
109 - children: edge.allChildren.join(', ')
117 + children: edge.allChildren.join(', '),
118 });
119 }}
120 </Motion>
@@ -114,10 +122,11 @@ function Graph(props) {
122 });
123
124 return (
117 - <div style={{
118 - position: 'relative',
119 - height: '100%'
120 - }}>
125 + <div
126 + style={{
127 + position: 'relative',
128 + height: '100%',
129 + }}>
130 {edges}
131 {nodes}
132 </div>
@@ -130,17 +139,18 @@ function Vertex(props) {
139 }
140
141 return (
133 - <div style={{
134 - position: 'absolute',
135 - border: '1px solid black',
136 - left: (props.x-(props.width/2)),
137 - top: (props.y-(props.height/2)),
138 - width: props.width,
139 - height: props.height,
140 - overflow: 'hidden',
141 - padding: '4px',
142 - wordWrap: 'break-word'
143 - }}>
142 + <div
143 + style={{
144 + position: 'absolute',
145 + border: '1px solid black',
146 + left: props.x - props.width / 2,
147 + top: props.y - props.height / 2,
148 + width: props.width,
149 + height: props.height,
150 + overflow: 'hidden',
151 + padding: '4px',
152 + wordWrap: 'break-word',
153 + }}>
154 {props.children}
155 </div>
156 );
@@ -154,49 +164,67 @@ const strokes = {
164 return: 'red',
165 fx: 'purple',
166 progressedChild: 'cyan',
157 - progressedDel: 'brown'
167 + progressedDel: 'brown',
168 };
169
170 function Edge(props) {
171 var points = props.points;
162 - var path = "M" + points[0].x + " " + points[0].y + " ";
172 + var path = 'M' + points[0].x + ' ' + points[0].y + ' ';
173
174 if (!points[0].x || !points[0].y) {
175 return null;
176 }
177
178 for (var i = 1; i < points.length; i++) {
169 - path += "L" + points[i].x + " " + points[i].y + " ";
170 - if (!points[i].x || !points[i].y) {
171 - return null;
172 - }
179 + path += 'L' + points[i].x + ' ' + points[i].y + ' ';
180 + if (!points[i].x || !points[i].y) {
181 + return null;
182 + }
183 }
184
185 var lineID = props.id;
186
187 return (
178 - <svg width="100%" height="100%" style={{
179 - position: 'absolute',
180 - left: 0,
181 - right: 0,
182 - top: 0,
183 - bottom: 0,
184 - }}>
188 + <svg
189 + width="100%"
190 + height="100%"
191 + style={{
192 + position: 'absolute',
193 + left: 0,
194 + right: 0,
195 + top: 0,
196 + bottom: 0,
197 + }}>
198 <defs>
199 <path d={path} id={lineID} />
187 - <marker id="markerCircle" markerWidth="8" markerHeight="8" refX="5" refY="5">
188 - <circle cx="5" cy="5" r="3" style={{stroke: 'none', fill:'black'}}/>
200 + <marker
201 + id="markerCircle"
202 + markerWidth="8"
203 + markerHeight="8"
204 + refX="5"
205 + refY="5">
206 + <circle cx="5" cy="5" r="3" style={{stroke: 'none', fill: 'black'}} />
207 </marker>
190 - <marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="6"
191 - orient="auto">
208 + <marker
209 + id="markerArrow"
210 + markerWidth="13"
211 + markerHeight="13"
212 + refX="2"
213 + refY="6"
214 + orient="auto">
215 <path d="M2,2 L2,11 L10,6 L2,2" style={{fill: 'black'}} />
216 </marker>
217 </defs>
218
196 - <use xlinkHref={`#${lineID}`} fill="none" stroke={strokes[props.kind]} style={{
197 - markerStart: 'url(#markerCircle)',
198 - markerEnd: 'url(#markerArrow)'
199 - }} />
219 + <use
220 + xlinkHref={`#${lineID}`}
221 + fill="none"
222 + stroke={strokes[props.kind]}
223 + style={{
224 + markerStart: 'url(#markerCircle)',
225 + markerEnd: 'url(#markerArrow)',
226 + }}
227 + />
228 <text>
229 <textPath xlinkHref={`#${lineID}`}>
230 {'     '}{props.children}
@@ -226,32 +254,31 @@ function formatPriority(priority) {
254 }
255 }
256
229 -export default function Fibers({ fibers, show, ...rest }) {
230 - const items = Object.keys(fibers.descriptions).map(id =>
231 - fibers.descriptions[id]
257 +export default function Fibers({fibers, show, ...rest}) {
258 + const items = Object.keys(fibers.descriptions).map(
259 + id => fibers.descriptions[id],
260 );
261
262 const isDragging = rest.className.indexOf('dragging') > -1;
235 - const [_, sdx, sdy] = rest.style.transform.match(/translate\((-?\d+)px,(-?\d+)px\)/) || [];
263 + const [_, sdx, sdy] = rest.style.transform.match(
264 + /translate\((-?\d+)px,(-?\d+)px\)/,
265 + ) || [];
266 const dx = Number(sdx);
267 const dy = Number(sdy);
268
269 return (
240 - <div {...rest} style={{
241 - width: '100%',
242 - height: '100%',
243 - position: 'absolute',
244 - top: 0,
245 - left: 0,
246 - ...rest.style,
247 - transform: null
248 - }}>
249 - <Graph
250 - className="graph"
251 - dx={dx}
252 - dy={dy}
253 - isDragging={isDragging}
254 - >
270 + <div
271 + {...rest}
272 + style={{
273 + width: '100%',
274 + height: '100%',
275 + position: 'absolute',
276 + top: 0,
277 + left: 0,
278 + ...rest.style,
279 + transform: null,
280 + }}>
281 + <Graph className="graph" dx={dx} dy={dy} isDragging={isDragging}>
282 {items.map(fiber => [
283 <Vertex
284 key={fiber.id}
@@ -262,7 +289,7 @@ export default function Fibers({ fibers, show, ...rest }) {
289 style={{
290 width: '100%',
291 height: '100%',
265 - backgroundColor: getFiberColor(fibers, fiber.id)
292 + backgroundColor: getFiberColor(fibers, fiber.id),
293 }}
294 title={
295 /*prettyFormat(fiber, { plugins: [reactElement ]})*/
@@ -272,36 +299,40 @@ export default function Fibers({ fibers, show, ...rest }) {
299 <br />
300 {fiber.type}
301 <br />
275 - {fibers.currentIDs.indexOf(fiber.id) === -1 ?
276 - <small>
277 - {fiber.pendingWorkPriority !== 0 && [
278 - <span style={{
279 - fontWeight: fiber.pendingWorkPriority <= fiber.progressedPriority ?
280 - 'bold' :
281 - 'normal'
282 - }} key="span">
283 - Needs: {formatPriority(fiber.pendingWorkPriority)}
284 - </span>,
285 - <br key="br" />
286 - ]}
287 - {fiber.progressedPriority !== 0 && [
288 - `Finished: ${formatPriority(fiber.progressedPriority)}`,
289 - <br key="br" />
290 - ]}
291 - {fiber.memoizedProps !== null && fiber.pendingProps !== null && [
292 - fiber.memoizedProps === fiber.pendingProps ?
293 - 'Can reuse memoized.' :
294 - 'Cannot reuse memoized.',
295 - <br />
296 - ]}
297 - </small> :
298 - <small>
299 - Committed
300 - </small>
301 - }
302 + {fibers.currentIDs.indexOf(fiber.id) === -1
303 + ? <small>
304 + {fiber.pendingWorkPriority !== 0 && [
305 + <span
306 + style={{
307 + fontWeight: fiber.pendingWorkPriority <=
308 + fiber.progressedPriority
309 + ? 'bold'
310 + : 'normal',
311 + }}
312 + key="span">
313 + Needs: {formatPriority(fiber.pendingWorkPriority)}
314 + </span>,
315 + <br key="br" />,
316 + ]}
317 + {fiber.progressedPriority !== 0 && [
318 + `Finished: ${formatPriority(fiber.progressedPriority)}`,
319 + <br key="br" />,
320 + ]}
321 + {fiber.memoizedProps !== null &&
322 + fiber.pendingProps !== null && [
323 + fiber.memoizedProps === fiber.pendingProps
324 + ? 'Can reuse memoized.'
325 + : 'Cannot reuse memoized.',
326 + <br />,
327 + ]}
328 + </small>
329 + : <small>
330 + Committed
331 + </small>}
332 </div>
333 </Vertex>,
304 - fiber.child && show.child &&
334 + fiber.child &&
335 + show.child &&
336 <Edge
337 source={fiber.id}
338 target={fiber.child}
@@ -310,7 +341,8 @@ export default function Fibers({ fibers, show, ...rest }) {
341 key={`${fiber.id}-${fiber.child}-child`}>
342 child
343 </Edge>,
313 - fiber.progressedChild && show.progressedChild &&
344 + fiber.progressedChild &&
345 + show.progressedChild &&
346 <Edge
347 source={fiber.id}
348 target={fiber.progressedChild}
@@ -319,7 +351,8 @@ export default function Fibers({ fibers, show, ...rest }) {
351 key={`${fiber.id}-${fiber.progressedChild}-pChild`}>
352 pChild
353 </Edge>,
322 - fiber.sibling && show.sibling &&
354 + fiber.sibling &&
355 + show.sibling &&
356 <Edge
357 source={fiber.id}
358 target={fiber.sibling}
@@ -328,7 +361,8 @@ export default function Fibers({ fibers, show, ...rest }) {
361 key={`${fiber.id}-${fiber.sibling}-sibling`}>
362 sibling
363 </Edge>,
331 - fiber.return && show.return &&
364 + fiber.return &&
365 + show.return &&
366 <Edge
367 source={fiber.id}
368 target={fiber.return}
@@ -337,7 +371,8 @@ export default function Fibers({ fibers, show, ...rest }) {
371 key={`${fiber.id}-${fiber.return}-return`}>
372 return
373 </Edge>,
340 - fiber.nextEffect && show.fx &&
374 + fiber.nextEffect &&
375 + show.fx &&
376 <Edge
377 source={fiber.id}
378 target={fiber.nextEffect}
@@ -346,7 +381,8 @@ export default function Fibers({ fibers, show, ...rest }) {
381 key={`${fiber.id}-${fiber.nextEffect}-nextEffect`}>
382 nextFx
383 </Edge>,
349 - fiber.firstEffect && show.fx &&
384 + fiber.firstEffect &&
385 + show.fx &&
386 <Edge
387 source={fiber.id}
388 target={fiber.firstEffect}
@@ -355,7 +391,8 @@ export default function Fibers({ fibers, show, ...rest }) {
391 key={`${fiber.id}-${fiber.firstEffect}-firstEffect`}>
392 firstFx
393 </Edge>,
358 - fiber.lastEffect && show.fx &&
394 + fiber.lastEffect &&
395 + show.fx &&
396 <Edge
397 source={fiber.id}
398 target={fiber.lastEffect}
@@ -364,7 +401,8 @@ export default function Fibers({ fibers, show, ...rest }) {
401 key={`${fiber.id}-${fiber.lastEffect}-lastEffect`}>
402 lastFx
403 </Edge>,
367 - fiber.progressedFirstDeletion && show.progressedDel &&
404 + fiber.progressedFirstDeletion &&
405 + show.progressedDel &&
406 <Edge
407 source={fiber.id}
408 target={fiber.progressedFirstDeletion}
@@ -373,7 +411,8 @@ export default function Fibers({ fibers, show, ...rest }) {
411 key={`${fiber.id}-${fiber.progressedFirstDeletion}-pFD`}>
412 pFDel
413 </Edge>,
376 - fiber.progressedLastDeletion && show.progressedDel &&
414 + fiber.progressedLastDeletion &&
415 + show.progressedDel &&
416 <Edge
417 source={fiber.id}
418 target={fiber.progressedLastDeletion}
@@ -382,7 +421,8 @@ export default function Fibers({ fibers, show, ...rest }) {
421 key={`${fiber.id}-${fiber.progressedLastDeletion}-pLD`}>
422 pLDel
423 </Edge>,
385 - fiber.alternate && show.alt &&
424 + fiber.alternate &&
425 + show.alt &&
426 <Edge
427 source={fiber.id}
428 target={fiber.alternate}
fixtures/fiber-debugger/src/describeFibers.js
+2 -2
@@ -55,7 +55,7 @@ export default function describeFibers(rootFiber, workInProgress) {
55 ...fiber,
56 id: id,
57 tag: getFriendlyTag(fiber.tag),
58 - type: (fiber.type && ('<' + (fiber.type.name || fiber.type) + '>')),
58 + type: fiber.type && '<' + (fiber.type.name || fiber.type) + '>',
59 stateNode: `[${typeof fiber.stateNode}]`,
60 return: acknowledgeFiber(fiber.return),
61 child: acknowledgeFiber(fiber.child),
@@ -91,6 +91,6 @@ export default function describeFibers(rootFiber, workInProgress) {
91 descriptions,
92 rootID,
93 currentIDs: Array.from(currentIDs),
94 - workInProgressID
94 + workInProgressID,
95 };
96 }
fixtures/fiber-debugger/src/index.js
+1 -4
@@ -3,7 +3,4 @@ import ReactDOM from 'react-dom';
3 import App from './App';
4 import './index.css';
5
6 -ReactDOM.render(
7 - <App />,
8 - document.getElementById('root')
9 -);
6 +ReactDOM.render(<App />, document.getElementById('root'));
fixtures/packaging/browserify/dev/input.js
+1 -1
@@ -3,5 +3,5 @@ var ReactDOM = require('react-dom');
3
4 ReactDOM.render(
5 React.createElement('h1', null, 'Hello World!'),
6 - document.getElementById('container')
6 + document.getElementById('container'),
7 );
fixtures/packaging/browserify/prod/input.js
+1 -1
@@ -3,5 +3,5 @@ var ReactDOM = require('react-dom');
3
4 ReactDOM.render(
5 React.createElement('h1', null, 'Hello World!'),
6 - document.getElementById('container')
6 + document.getElementById('container'),
7 );
fixtures/packaging/brunch/dev/app/initialize.js
+1 -1
@@ -3,5 +3,5 @@ var ReactDOM = require('react-dom');
3
4 ReactDOM.render(
5 React.createElement('h1', null, 'Hello World!'),
6 - document.getElementById('container')
6 + document.getElementById('container'),
7 );
fixtures/packaging/brunch/dev/input.js
+1 -1
@@ -3,5 +3,5 @@ var ReactDOM = require('react-dom');
3
4 ReactDOM.render(
5 React.createElement('h1', null, 'Hello World!'),
6 - document.getElementById('container')
6 + document.getElementById('container'),
7 );
fixtures/packaging/brunch/prod/app/initialize.js
+1 -1
@@ -3,5 +3,5 @@ var ReactDOM = require('react-dom');
3
4 ReactDOM.render(
5 React.createElement('h1', null, 'Hello World!'),
6 - document.getElementById('container')
6 + document.getElementById('container'),
7 );
fixtures/packaging/brunch/prod/input.js
+1 -1
@@ -3,5 +3,5 @@ var ReactDOM = require('react-dom');
3
4 ReactDOM.render(
5 React.createElement('h1', null, 'Hello World!'),
6 - document.getElementById('container')
6 + document.getElementById('container'),
7 );
fixtures/packaging/build-all.js
+1 -1
@@ -2,7 +2,7 @@ const fs = require('fs');
2 const path = require('path');
3 const child_process = require('child_process');
4
5 -const fixtureDirs = fs.readdirSync(__dirname).filter((file) => {
5 +const fixtureDirs = fs.readdirSync(__dirname).filter(file => {
6 return fs.statSync(path.join(__dirname, file)).isDirectory();
7 });
8
fixtures/packaging/rjs/dev/input.js
+1 -1
@@ -1,6 +1,6 @@
1 require(['react', 'react-dom'], function(React, ReactDOM) {
2 ReactDOM.render(
3 React.createElement('h1', null, 'Hello World!'),
4 - document.getElementById('container')
4 + document.getElementById('container'),
5 );
6 });
fixtures/packaging/rjs/prod/input.js
+1 -1
@@ -1,6 +1,6 @@
1 require(['react', 'react-dom'], function(React, ReactDOM) {
2 ReactDOM.render(
3 React.createElement('h1', null, 'Hello World!'),
4 - document.getElementById('container')
4 + document.getElementById('container'),
5 );
6 });
fixtures/packaging/systemjs-builder/dev/input.js
+1 -1
@@ -3,5 +3,5 @@ import ReactDOM from 'react-dom';
3
4 ReactDOM.render(
5 React.createElement('h1', null, 'Hello World!'),
6 - document.getElementById('container')
6 + document.getElementById('container'),
7 );
fixtures/packaging/systemjs-builder/prod/input.js
+1 -1
@@ -3,5 +3,5 @@ import ReactDOM from 'react-dom';
3
4 ReactDOM.render(
5 React.createElement('h1', null, 'Hello World!'),
6 - document.getElementById('container')
6 + document.getElementById('container'),
7 );
fixtures/packaging/webpack-alias/dev/config.js
+1 -1
@@ -8,7 +8,7 @@ module.exports = {
8 resolve: {
9 root: path.resolve('../../../../build/packages'),
10 alias: {
11 - 'react': 'react/umd/react.development',
11 + react: 'react/umd/react.development',
12 'react-dom': 'react-dom/umd/react-dom.development',
13 },
14 },
fixtures/packaging/webpack-alias/dev/input.js
+1 -1
@@ -3,5 +3,5 @@ var ReactDOM = require('react-dom');
3
4 ReactDOM.render(
5 React.createElement('h1', null, 'Hello World!'),
6 - document.getElementById('container')
6 + document.getElementById('container'),
7 );
fixtures/packaging/webpack-alias/prod/config.js
+1 -1
@@ -8,7 +8,7 @@ module.exports = {
8 resolve: {
9 root: path.resolve('../../../../build/packages'),
10 alias: {
11 - 'react': 'react/umd/react.production.min',
11 + react: 'react/umd/react.production.min',
12 'react-dom': 'react-dom/umd/react-dom.production.min',
13 },
14 },
fixtures/packaging/webpack-alias/prod/input.js
+1 -1
@@ -3,5 +3,5 @@ var ReactDOM = require('react-dom');
3
4 ReactDOM.render(
5 React.createElement('h1', null, 'Hello World!'),
6 - document.getElementById('container')
6 + document.getElementById('container'),
7 );
fixtures/packaging/webpack/dev/input.js
+1 -1
@@ -3,5 +3,5 @@ var ReactDOM = require('react-dom');
3
4 ReactDOM.render(
5 React.createElement('h1', null, 'Hello World!'),
6 - document.getElementById('container')
6 + document.getElementById('container'),
7 );
fixtures/packaging/webpack/prod/config.js
+7 -7
@@ -9,11 +9,11 @@ module.exports = {
9 resolve: {
10 root: path.resolve('../../../../build/packages/'),
11 },
12 - plugins: [
13 - new webpack.DefinePlugin({
14 - 'process.env':{
15 - 'NODE_ENV': JSON.stringify('production')
16 - }
17 - })
18 - ]
12 + plugins: [
13 + new webpack.DefinePlugin({
14 + 'process.env': {
15 + NODE_ENV: JSON.stringify('production'),
16 + },
17 + }),
18 + ],
19 };
fixtures/packaging/webpack/prod/input.js
+1 -1
@@ -3,5 +3,5 @@ var ReactDOM = require('react-dom');
3
4 ReactDOM.render(
5 React.createElement('h1', null, 'Hello World!'),
6 - document.getElementById('container')
6 + document.getElementById('container'),
7 );
fixtures/ssr/server/index.js
+8 -7
@@ -35,10 +35,13 @@ app.use(express.static(path.resolve(__dirname, '..', 'build')));
35
36 // Proxy everything else to create-react-app's webpack development server
37 if (process.env.NODE_ENV === 'development') {
38 - app.use('/', proxy({
39 - ws: true,
40 - target: 'http://localhost:3001'
41 - }));
38 + app.use(
39 + '/',
40 + proxy({
41 + ws: true,
42 + target: 'http://localhost:3001',
43 + }),
44 + );
45 }
46
47 app.listen(3000, () => {
@@ -50,9 +53,7 @@ app.on('error', function(error) {
53 throw error;
54 }
55
53 - var bind = typeof port === 'string'
54 - ? 'Pipe ' + port
55 - : 'Port ' + port;
56 + var bind = typeof port === 'string' ? 'Pipe ' + port : 'Port ' + port;
57
58 switch (error.code) {
59 case 'EACCES':
fixtures/ssr/server/render.js
+1 -1
@@ -19,4 +19,4 @@ export default function render() {
19 // There's no way to render a doctype in React so prepend manually.
20 // Also append a bootstrap script tag.
21 return '<!DOCTYPE html>' + html;
22 -};
22 +}
fixtures/ssr/src/components/App.js
+1 -1
@@ -1,4 +1,4 @@
1 -import React, { Component } from 'react';
1 +import React, {Component} from 'react';
2
3 import Chrome from './Chrome';
4 import Page from './Page';
fixtures/ssr/src/components/Chrome.js
+6 -4
@@ -1,4 +1,4 @@
1 -import React, { Component } from 'react';
1 +import React, {Component} from 'react';
2
3 import './Chrome.css';
4
@@ -16,9 +16,11 @@ export default class Chrome extends Component {
16 </head>
17 <body>
18 {this.props.children}
19 - <script dangerouslySetInnerHTML={{
20 - __html: `assetManifest = ${JSON.stringify(assets)};`
21 - }} />
19 + <script
20 + dangerouslySetInnerHTML={{
21 + __html: `assetManifest = ${JSON.stringify(assets)};`,
22 + }}
23 + />
24 <script src={assets['main.js']} />
25 </body>
26 </html>
fixtures/ssr/src/components/Page.js
+6 -6
@@ -1,12 +1,12 @@
1 -import React, { Component } from 'react';
1 +import React, {Component} from 'react';
2
3 import './Page.css';
4
5 export default class Page extends Component {
6 - state = { active: false };
7 - handleClick = (e) => {
8 - this.setState({ active: true });
9 - }
6 + state = {active: false};
7 + handleClick = e => {
8 + this.setState({active: true});
9 + };
10 render() {
11 const link = (
12 <a className="bold" onClick={this.handleClick}>
@@ -16,7 +16,7 @@ export default class Page extends Component {
16 return (
17 <div>
18 <p>
19 - {!this.state.active ? link : "Thanks!"}
19 + {!this.state.active ? link : 'Thanks!'}
20 </p>
21 </div>
22 );
fixtures/ssr/src/index.js
+1 -1
@@ -1,5 +1,5 @@
1 import React from 'react';
2 -import { render } from 'react-dom';
2 +import {render} from 'react-dom';
3
4 import App from './components/App';
5
scripts/prettier/index.js
+1 -1
@@ -34,7 +34,7 @@ const defaultOptions = {
34 };
35 const config = {
36 default: {
37 - patterns: ['src/**/*.js'],
37 + patterns: ['src/**/*.js', 'fixtures/**/*.js'],
38 ignore: ['**/third_party/**', '**/node_modules/**'],
39 },
40 scripts: {