94f44aeba7 · samitouri/QOS-React · siGit Code & Deploy

fixtures/art/VectorWidget.js

+6 -6

@@ -137,12 +137,12 @@ var RING_TWO_PATH =

137 var RING_THREE_PATH =

138 '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';

139 var RING_TWO_ROTATE = new Transform()

140 - .translate(84.000000, 89.000000)

141 - .rotate(-240.000000)

142 - .translate(-84.000000, -89.000000);

140 + .translate(84.0, 89.0)

141 + .rotate(-240.0)

142 + .translate(-84.0, -89.0);

143 var RING_THREE_ROTATE = new Transform()

144 - .translate(84.000000, 89.000000)

145 - .rotate(-300.000000)

146 - .translate(-84.000000, -89.000000);

144 + .translate(84.0, 89.0)

145 + .rotate(-300.0)

146 + .translate(-84.0, -89.0);

147

148 module.exports = VectorWidget;

fixtures/attribute-behavior/src/App.js

+31 -30

@@ -185,7 +185,9 @@ function getCanonicalizedValue(value) {

185 if (typeof value.length === 'number') {

186 return (

187 '[' +

188 - Array.from(value).map(v => getCanonicalizedValue(v)).join(', ') +

188 + Array.from(value)

189 + .map(v => getCanonicalizedValue(v))

190 + .join(', ') +

191 ']'

192 );

193 }

@@ -459,7 +461,9 @@ function prepareState(initGlobals) {

461 hasSameBehaviorForAll,

462 rowPatternHash,

463 // "Good enough" id that we can store in localStorage

462 - rowIdHash: `${attribute.name} ${attribute.tagName} ${attribute.overrideStringValue}`,

464 + rowIdHash: `${attribute.name} ${attribute.tagName} ${

465 + attribute.overrideStringValue

466 + }`,

467 };

468 const rowGroup = rowPatternHashes.get(rowPatternHash) || new Set();

469 rowGroup.add(row);

@@ -677,9 +681,11 @@ function CellContent(props) {

681 <RowHeader

682 checked={completedHashes.has(rowPatternHash)}

683 onChange={() => toggleAttribute(rowPatternHash)}>

680 - {row.hasSameBehaviorForAll

681 - ? attribute.name

682 - : <b css={{color: 'purple'}}>{attribute.name}</b>}

684 + {row.hasSameBehaviorForAll ? (

685 + attribute.name

686 + ) : (

687 + <b css={{color: 'purple'}}>{attribute.name}</b>

688 + )}

689 </RowHeader>

690 );

691 }

@@ -754,8 +760,10 @@ class App extends React.Component {

760 async componentDidMount() {

761 const sources = {

762 ReactStable: 'https://unpkg.com/react@latest/umd/react.development.js',

757 - ReactDOMStable: 'https://unpkg.com/react-dom@latest/umd/react-dom.development.js',

758 - ReactDOMServerStable: 'https://unpkg.com/react-dom@latest/umd/react-dom-server.browser.development.js',

763 + ReactDOMStable:

764 + 'https://unpkg.com/react-dom@latest/umd/react-dom.development.js',

765 + ReactDOMServerStable:

766 + 'https://unpkg.com/react-dom@latest/umd/react-dom-server.browser.development.js',

767 ReactNext: '/react.development.js',

768 ReactDOMNext: '/react-dom.development.js',

769 ReactDOMServerNext: '/react-dom-server.browser.development.js',

@@ -860,12 +868,12 @@ class App extends React.Component {

868 case ALPHABETICAL:

869 return filteredAttributes.sort(

870 (attr1, attr2) =>

863 - (attr1.name.toLowerCase() < attr2.name.toLowerCase() ? -1 : 1)

871 + attr1.name.toLowerCase() < attr2.name.toLowerCase() ? -1 : 1

872 );

873 case REV_ALPHABETICAL:

874 return filteredAttributes.sort(

875 (attr1, attr2) =>

868 - (attr1.name.toLowerCase() < attr2.name.toLowerCase() ? 1 : -1)

876 + attr1.name.toLowerCase() < attr2.name.toLowerCase() ? 1 : -1

877 );

878 case GROUPED_BY_ROW_PATTERN: {

879 return filteredAttributes.sort((attr1, attr2) => {

@@ -895,7 +903,8 @@ class App extends React.Component {

903

904 let log = '';

905 for (let attribute of attributes) {

898 - log += `## \`${attribute.name}\` (on \`<${attribute.tagName || 'div'}>\` inside \`<${attribute.containerTagName || 'div'}>\`)\n`;

906 + log += `## \`${attribute.name}\` (on \`<${attribute.tagName ||

907 + 'div'}>\` inside \`<${attribute.containerTagName || 'div'}>\`)\n`;

908 log += '| Test Case | Flags | Result |\n';

909 log += '| --- | --- | --- |\n';

910

@@ -950,8 +959,9 @@ class App extends React.Component {

959 return (

960 <div>

961 <h1>Loading...</h1>

953 - {!useFastMode &&

954 - <h3>The progress is reported in the window title.</h3>}

962 + {!useFastMode && (

963 + <h3>The progress is reported in the window title.</h3>

964 + )}

965 </div>

966 );

967 }

@@ -959,31 +969,22 @@ class App extends React.Component {

969 <div>

970 <div>

971 <select value={this.state.sortOrder} onChange={this.onUpdateSort}>

962 - <option value={ALPHABETICAL}>

963 - alphabetical

964 - </option>

965 - <option value={REV_ALPHABETICAL}>

966 - reverse alphabetical

967 - </option>

972 + <option value={ALPHABETICAL}>alphabetical</option>

973 + <option value={REV_ALPHABETICAL}>reverse alphabetical</option>

974 <option value={GROUPED_BY_ROW_PATTERN}>

975 grouped by row pattern :)

976 </option>

977 </select>

978 <select value={this.state.filter} onChange={this.onUpdateFilter}>

973 - <option value={ALL}>

974 - all

975 - </option>

976 - <option value={INCOMPLETE}>

977 - incomplete

978 - </option>

979 - <option value={COMPLETE}>

980 - complete

981 - </option>

979 + <option value={ALL}>all</option>

980 + <option value={INCOMPLETE}>incomplete</option>

981 + <option value={COMPLETE}>complete</option>

982 </select>

983 <button style={{marginLeft: '10px'}} onClick={this.handleSaveClick}>

984 - Save latest results to a file

985 - {' '}

986 - <span role="img" aria-label="Save">💾</span>

984 + Save latest results to a file{' '}

985 + <span role="img" aria-label="Save">

986 + 💾

987 + </span>

988 </button>

989 </div>

990 <AutoSizer disableHeight={true}>

fixtures/attribute-behavior/src/attributes.js

+6 -3

@@ -843,7 +843,8 @@ const attributes = [

843 name: 'gradientTransform',

844 read: getSVGProperty('gradientTransform'),

845 containerTagName: 'svg',

846 - overrideStringValue: 'translate(-10,-20) scale(2) rotate(45) translate(5,10)',

846 + overrideStringValue:

847 + 'translate(-10,-20) scale(2) rotate(45) translate(5,10)',

848 tagName: 'linearGradient',

849 },

850 {

@@ -1353,7 +1354,8 @@ const attributes = [

1354 read: getSVGProperty('patternTransform'),

1355 containerTagName: 'svg',

1356 tagName: 'pattern',

1356 - overrideStringValue: 'translate(-10,-20) scale(2) rotate(45) translate(5,10)',

1357 + overrideStringValue:

1358 + 'translate(-10,-20) scale(2) rotate(45) translate(5,10)',

1359 },

1360 {

1361 name: 'patternUnits',

@@ -1940,7 +1942,8 @@ const attributes = [

1942 read: getSVGProperty('transform'),

1943 containerTagName: 'svg',

1944 tagName: 'a',

1943 - overrideStringValue: 'translate(-10,-20) scale(2) rotate(45) translate(5,10)',

1945 + overrideStringValue:

1946 + 'translate(-10,-20) scale(2) rotate(45) translate(5,10)',

1947 },

1948 {name: 'type', tagName: 'button', overrideStringValue: 'reset'},

1949 {

fixtures/dom/src/components/Fixture.js

+1 -5

@@ -9,11 +9,7 @@ class Fixture extends React.Component {

9 render() {

10 const {children} = this.props;

11

12 - return (

13 - <div className="test-fixture">

14 - {children}

15 - </div>

16 - );

12 + return <div className="test-fixture">{children}</div>;

13 }

14 }

15

fixtures/dom/src/components/Header.js

+3 -1

@@ -71,7 +71,9 @@ class Header extends React.Component {

71 value={this.state.version}

72 onChange={this.handleVersionChange}>

73 {this.state.versions.map(version => (

74 - <option key={version} value={version}>{version}</option>

74 + <option key={version} value={version}>

75 + {version}

76 + </option>

77 ))}

78 </select>

79 </label>

fixtures/dom/src/components/TestCase.js

+26 -25

@@ -59,60 +59,65 @@ class TestCase extends React.Component {

59 type="checkbox"

60 checked={complete}

61 onChange={this.handleChange}

62 - />

63 - {' '}{title}

62 + />{' '}

63 + {title}

64 </label>

65 </h2>

66

67 <dl className="test-case__details">

68 {introducedIn && <dt>First broken in: </dt>}

69 - {introducedIn &&

69 + {introducedIn && (

70 <dd>

71 <a

72 href={'https://github.com/facebook/react/tag/v' + introducedIn}>

73 <code>{introducedIn}</code>

74 </a>

75 - </dd>}

75 + </dd>

76 + )}

77

78 {resolvedIn && <dt>First supported in: </dt>}

78 - {resolvedIn &&

79 + {resolvedIn && (

80 <dd>

81 <a href={'https://github.com/facebook/react/tag/v' + resolvedIn}>

82 <code>{resolvedIn}</code>

83 </a>

83 - </dd>}

84 + </dd>

85 + )}

86

87 {resolvedBy && <dt>Fixed by: </dt>}

86 - {resolvedBy &&

88 + {resolvedBy && (

89 <dd>

90 <a

91 href={

92 'https://github.com/facebook/react/pull/' +

91 - resolvedBy.slice(1)

93 + resolvedBy.slice(1)

94 }>

95 <code>{resolvedBy}</code>

96 </a>

95 - </dd>}

97 + </dd>

98 + )}

99

100 {affectedBrowsers && <dt>Affected browsers: </dt>}

101 {affectedBrowsers && <dd>{affectedBrowsers}</dd>}

102

103 {relatedIssues && <dt>Related Issues: </dt>}

101 - {relatedIssues && <dd><IssueList issues={relatedIssues} /></dd>}

104 + {relatedIssues && (

105 + <dd>

106 + <IssueList issues={relatedIssues} />

107 + </dd>

108 + )}

109 </dl>

110

104 - <p className="test-case__desc">

105 - {description}

106 - </p>

111 + <p className="test-case__desc">{description}</p>

112

113 <div className="test-case__body">

109 - {!isTestFixed &&

114 + {!isTestFixed && (

115 <p className="test-case__invalid-version">

111 - <strong>Note:</strong>

112 - {' '}

113 - This test case was fixed in a later version of React.

114 - This test is not expected to pass for the selected version, and that's ok!

115 - </p>}

116 + <strong>Note:</strong> This test case was fixed in a later version

117 + of React. This test is not expected to pass for the selected

118 + version, and that's ok!

119 + </p>

120 + )}

121

122 {children}

123 </div>

@@ -129,9 +134,7 @@ TestCase.Steps = class extends React.Component {

134 return (

135 <div>

136 <h3>Steps to reproduce:</h3>

132 - <ol>

133 - {children}

134 - </ol>

137 + <ol>{children}</ol>

138 </div>

139 );

140 }

@@ -143,9 +146,7 @@ TestCase.ExpectedResult = class extends React.Component {

146 return (

147 <div>

148 <h3>Expected Result:</h3>

146 - <p>

147 - {children}

148 - </p>

149 + <p>{children}</p>

150 </div>

151 );

152 }

fixtures/dom/src/components/fixtures/buttons/index.js

+3 -1

@@ -20,7 +20,9 @@ export default class ButtonTestCases extends React.Component {

20 <TestCase.ExpectedResult>

21 Nothing should happen

22 </TestCase.ExpectedResult>

23 - <button disabled onClick={onButtonClick}>Click Me</button>

23 + <button disabled onClick={onButtonClick}>

24 + Click Me

25 + </button>

26 </TestCase>

27 <TestCase

28 title="onClick with disabled buttons containing other elements"

fixtures/dom/src/components/fixtures/custom-elements/index.js

+5 -5

@@ -42,11 +42,11 @@ export default class ButtonTestCases extends React.Component {

42 <TestCase.ExpectedResult>

43 You should see "Hello, World" printed below.{' '}

44 </TestCase.ExpectedResult>

45 - {supportsCustomElements

46 - ? <my-element />

47 - : <div>

48 - This browser does not support custom elements.

49 - </div>}

45 + {supportsCustomElements ? (

46 + <my-element />

47 + ) : (

48 + <div>This browser does not support custom elements.</div>

49 + )}

50 </TestCase>

51 </FixtureSet>

52 );

fixtures/dom/src/components/fixtures/date-inputs/index.js

+2 -3

@@ -16,9 +16,8 @@ class DateInputFixtures extends React.Component {

16 </TestCase.Steps>

17

18 <TestCase.ExpectedResult>

19 - The month, day, and year values should correctly

20 - transfer. The hours/minutes/seconds should not be

21 - discarded.

19 + The month, day, and year values should correctly transfer. The

20 + hours/minutes/seconds should not be discarded.

21 </TestCase.ExpectedResult>

22

23 <Fixture>

fixtures/dom/src/components/fixtures/date-inputs/switch-date-test-case.js

+4 -3

@@ -16,7 +16,9 @@ class SwitchDateTestCase extends React.Component {

16

17 return (

18 <div>

19 - <p><b>{attrs.type}</b> input type ({attrs.value})</p>

19 + <p>

20 + <b>{attrs.type}</b> input type ({attrs.value})

21 + </p>

22 <p>

23 <input

24 type={attrs.type}

@@ -28,8 +30,7 @@ class SwitchDateTestCase extends React.Component {

30 type="checkbox"

31 checked={this.state.fullDate}

32 onChange={this.updateFullDate}

31 - />

32 - {' '}

33 + />{' '}

34 Switch type

35 </label>

36 </p>

fixtures/dom/src/components/fixtures/error-handling/index.js

+5 -4

@@ -134,9 +134,9 @@ export default class ErrorHandlingTestCases extends React.Component {

134 </TestCase.Steps>

135 <TestCase.ExpectedResult>

136 The "Trigger error" button should be replaced with "Captured an

137 - error: A cross-origin error was thrown [...]". The actual error message should

138 - be logged to the console: "Uncaught Error: Expected true to

139 - be false".

137 + error: A cross-origin error was thrown [...]". The actual error

138 + message should be logged to the console: "Uncaught Error: Expected

139 + true to be false".

140 </TestCase.ExpectedResult>

141 <Example

142 buttonText="Trigger cross-origin error"

@@ -154,7 +154,8 @@ export default class ErrorHandlingTestCases extends React.Component {

154 <li>Click the "Trigger render error and catch" button</li>

155 </TestCase.Steps>

156 <TestCase.ExpectedResult>

157 - Open the console. "Uncaught Error: Caught error" should have been logged by the browser.

157 + Open the console. "Uncaught Error: Caught error" should have been

158 + logged by the browser.

159 </TestCase.ExpectedResult>

160 <TriggerErrorAndCatch />

161 </TestCase>

fixtures/dom/src/components/fixtures/event-pooling/mouse-move.js

+2 -6

@@ -35,12 +35,8 @@ class MouseMove extends React.Component {

35 <p>

36 Was the event pooled?{' '}

37 <b>

38 - {events.length ? events.length <= 1 ? 'Yes' : 'No' : 'Unsure'}

39 - {' '}

40 - (

41 - {events.length}

42 - {' '}

43 - events)

38 + {events.length ? (events.length <= 1 ? 'Yes' : 'No') : 'Unsure'} (

39 + {events.length} events)

40 </b>

41 </p>

42 </TestCase>

fixtures/dom/src/components/fixtures/event-pooling/persistence.js

+4 -7

@@ -41,7 +41,8 @@ class Persistence extends React.Component {

41 </TestCase.Steps>

42

43 <TestCase.ExpectedResult>

44 - The pool size should not increase above 1, but reduce to 0 when hovering over the persisted region.

44 + The pool size should not increase above 1, but reduce to 0 when

45 + hovering over the persisted region.

46 </TestCase.ExpectedResult>

47

48 <h2>Add Pooled Event:</h2>

@@ -50,13 +51,9 @@ class Persistence extends React.Component {

51 <h2>Add Persisted Event:</h2>

52 <HitBox onMouseMove={this.addPersisted} />

53

53 - <p>

54 - Pool size: {pooled.length}

55 - </p>

54 + <p>Pool size: {pooled.length}</p>

55

57 - <p>

58 - Persisted size: {persisted}

59 - </p>

56 + <p>Persisted size: {persisted}</p>

57 </TestCase>

58 );

59 }

fixtures/dom/src/components/fixtures/input-change-events/InputPlaceholderFixture.js

+4 -4

@@ -41,14 +41,14 @@ class InputPlaceholderFixture extends React.Component {

41 type="text"

42 placeholder={placeholder}

43 onChange={this.handleChange}

44 - />

45 - {' '}

44 + />{' '}

45 <button onClick={this.handleGeneratePlaceholder}>

46 Change placeholder

47 </button>

49 -

48 <p style={{color}}>

51 - <code>onChange</code>{' calls: '}<strong>{changeCount}</strong>

49 + <code>onChange</code>

50 + {' calls: '}

51 + <strong>{changeCount}</strong>

52 </p>

53 <button onClick={this.handleReset}>Reset count</button>

54 </Fixture>

fixtures/dom/src/components/fixtures/input-change-events/RadioClickFixture.js

+4 -3

@@ -34,10 +34,11 @@ class RadioClickFixture extends React.Component {

34 <label>

35 <input defaultChecked type="radio" onChange={this.handleChange} />

36 Test case radio input

37 - </label>

38 - {' '}

37 + </label>{' '}

38 <p style={{color}}>

40 - <code>onChange</code>{' calls: '}<strong>{changeCount}</strong>

39 + <code>onChange</code>

40 + {' calls: '}

41 + <strong>{changeCount}</strong>

42 </p>

43 <button onClick={this.handleReset}>Reset count</button>

44 </Fixture>

fixtures/dom/src/components/fixtures/input-change-events/RadioGroupFixture.js

+4 -4

@@ -43,11 +43,11 @@ class RadioGroupFixture extends React.Component {

43 <label>

44 <input name="foo" type="radio" onChange={this.handleChange} />

45 Radio 2

46 - </label>

47 -

48 - {' '}

46 + </label>{' '}

47 <p style={{color}}>

50 - <code>onChange</code>{' calls: '}<strong>{changeCount}</strong>

48 + <code>onChange</code>

49 + {' calls: '}

50 + <strong>{changeCount}</strong>

51 </p>

52 <button onClick={this.handleReset}>Reset count</button>

53 </Fixture>

fixtures/dom/src/components/fixtures/input-change-events/RangeKeyboardFixture.js

+8 -8

@@ -60,16 +60,16 @@ class RangeKeyboardFixture extends React.Component {

60 ref={r => (this.input = r)}

61 onChange={this.handleChange}

62 />

63 - <button onClick={() => this.input.focus()}>

64 - Focus Knob

65 - </button>

66 - </div>

67 - {' '}

68 -

63 + <button onClick={() => this.input.focus()}>Focus Knob</button>

64 + </div>{' '}

65 <p style={{color}}>

70 - <code>onKeyDown</code>{' calls: '}<strong>{keydownCount}</strong>

66 + <code>onKeyDown</code>

67 + {' calls: '}

68 + <strong>{keydownCount}</strong>

69 {' vs '}

72 - <code>onChange</code>{' calls: '}<strong>{changeCount}</strong>

70 + <code>onChange</code>

71 + {' calls: '}

72 + <strong>{changeCount}</strong>

73 </p>

74 <button onClick={this.handleReset}>Reset counts</button>

75 </Fixture>

fixtures/dom/src/components/fixtures/input-change-events/index.js

+2 -2

@@ -24,8 +24,8 @@ class InputChangeEvents extends React.Component {

24 </TestCase.Steps>

25

26 <TestCase.ExpectedResult>

27 - The <code>onKeyDown</code> call count should be equal to

28 - the <code>onChange</code> call count.

27 + The <code>onKeyDown</code> call count should be equal to the{' '}

28 + <code>onChange</code> call count.

29 </TestCase.ExpectedResult>

30

31 <RangeKeyboardFixture />

fixtures/dom/src/components/fixtures/number-inputs/NumberTestCase.js

+2 -1

@@ -24,7 +24,8 @@ class NumberTestCase extends React.Component {

24 onChange={this.onChange}

25 />

26 <span className="hint">

27 - {' '}Value: {JSON.stringify(this.state.value)}

27 + {' '}

28 + Value: {JSON.stringify(this.state.value)}

29 </span>

30 </fieldset>

31

fixtures/dom/src/components/fixtures/number-inputs/index.js

+9 -10

@@ -27,9 +27,9 @@ function NumberInputs() {

27 <NumberTestCase />

28

29 <p className="footnote">

30 - <b>Notes:</b> Chrome and Safari clear trailing

31 - decimals on blur. React makes this concession so that the

32 - value attribute remains in sync with the value property.

30 + <b>Notes:</b> Chrome and Safari clear trailing decimals on blur. React

31 + makes this concession so that the value attribute remains in sync with

32 + the value property.

33 </p>

34 </TestCase>

35

@@ -177,14 +177,13 @@ function NumberInputs() {

177 <NumberInputExtraZeroes />

178

179 <p className="footnote">

180 - <b>Notes:</b> Firefox drops extraneous zeroes when

181 - assigned. Zeroes are preserved when editing, however

182 - directly assigning a new value will drop zeroes. This

183 - {' '}

180 + <b>Notes:</b> Firefox drops extraneous zeroes when assigned. Zeroes

181 + are preserved when editing, however directly assigning a new value

182 + will drop zeroes. This{' '}

183 <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.

184 + is a bug in Firefox

185 + </a>{' '}

186 + that we can not control for.

187 </p>

188 </TestCase>

189 </FixtureSet>

fixtures/dom/src/components/fixtures/password-inputs/PasswordTestCase.js

+2 -1

@@ -21,7 +21,8 @@ class PasswordTestCase extends React.Component {

21 onChange={this.onChange}

22 />

23 <span className="hint">

24 - {' '}Value: {JSON.stringify(this.state.value)}

24 + {' '}

25 + Value: {JSON.stringify(this.state.value)}

26 </span>

27 </fieldset>

28

fixtures/dom/src/components/fixtures/selects/index.js

+7 -4

@@ -84,13 +84,15 @@ class SelectFixture extends React.Component {

84 </TestCase.Steps>

85

86 <TestCase.ExpectedResult>

87 - The initial picked option should be "Please select an

88 - item", however it should not be a selectable option.

87 + The initial picked option should be "Please select an item", however

88 + it should not be a selectable option.

89 </TestCase.ExpectedResult>

90

91 <div className="test-fixture">

92 <select defaultValue="">

93 - <option value="" disabled>Please select an item</option>

93 + <option value="" disabled>

94 + Please select an item

95 + </option>

96 <option>0</option>

97 <option>1</option>

98 <option>2</option>

@@ -100,7 +102,8 @@ class SelectFixture extends React.Component {

102

103 <TestCase title="An unselected disabled option" relatedIssues="2803">

104 <TestCase.ExpectedResult>

103 - The initial picked option value should "0": the first non-disabled option.

105 + The initial picked option value should "0": the first non-disabled

106 + option.

107 </TestCase.ExpectedResult>

108

109 <div className="test-fixture">

fixtures/dom/src/components/fixtures/text-inputs/InputTestCase.js

+1 -3

@@ -43,9 +43,7 @@ class InputTestCase extends React.Component {

43 <fieldset>

44 <legend>Controlled {type}</legend>

45 <input type={type} value={value} onChange={this.onChange} />

46 - <p className="hint">

47 - Value: {JSON.stringify(this.state.value)}

48 - </p>

46 + <p className="hint">Value: {JSON.stringify(this.state.value)}</p>

47 </fieldset>

48

49 <fieldset>

fixtures/dom/src/components/fixtures/text-inputs/index.js

+3 -3

@@ -36,9 +36,9 @@ class TextInputFixtures extends React.Component {

36 </Fixture>

37

38 <p className="footnote">

39 - This issue was first introduced when we added extra logic

40 - to number inputs to prevent unexpected behavior in Chrome

41 - and Safari (see the number input test case).

39 + This issue was first introduced when we added extra logic to number

40 + inputs to prevent unexpected behavior in Chrome and Safari (see the

41 + number input test case).

42 </p>

43 </TestCase>

44

fixtures/dom/src/components/fixtures/textareas/index.js

+1 -3

@@ -27,9 +27,7 @@ export default class TextAreaFixtures extends React.Component {

27 </form>

28 <div className="container">

29 <h4>Controlled Output:</h4>

30 - <div className="output">

31 - {this.state.value}

32 - </div>

30 + <div className="output">{this.state.value}</div>

31 </div>

32 </div>

33 </TestCase>

fixtures/dom/src/index.js

+9 -7

@@ -1,11 +1,13 @@

1 import './polyfills';

2 import loadReact from './react-loader';

3

4 -loadReact().then(() => import('./components/App')).then(App => {

5 - const {React, ReactDOM} = window;

4 +loadReact()

5 + .then(() => import('./components/App'))

6 + .then(App => {

7 + const {React, ReactDOM} = window;

8

7 - ReactDOM.render(

8 - React.createElement(App.default),

9 - document.getElementById('root')

10 - );

11 -});

9 + ReactDOM.render(

10 + React.createElement(App.default),

11 + document.getElementById('root')

12 + );

13 + });

fixtures/dom/src/tags.js

+1 -1

@@ -38,7 +38,7 @@ try {

38 * Attempts to load tags from sessionStorage. In cases where

39 * sessionStorage is not available (Safari private browsing) or the

40 * tags are cached a fetch request is made to the GitHub API.

41 - *

41 + *

42 * Returns a promise so that the consuming module can always assume

43 * the request is async, even if its loaded from sessionStorage.

44 */

fixtures/fiber-debugger/src/App.js

+7 -11

@@ -160,14 +160,15 @@ class App extends Component {

160

161 return (

162 <div style={{height: '100%'}}>

163 - {fibers &&

163 + {fibers && (

164 <Draggable>

165 <Fibers

166 fibers={fibers}

167 show={this.state.show}

168 graphSettings={this.state.graphSettings}

169 />

170 - </Draggable>}

170 + </Draggable>

171 + )}

172 <div

173 style={{

174 width: '100%',

@@ -187,17 +188,12 @@ class App extends Component {

188 max={history.length - 1}

189 value={currentStep}

190 onChange={e =>

190 - this.setState({currentStep: Number(e.target.value)})}

191 + this.setState({currentStep: Number(e.target.value)})

192 + }

193 />

194 <p>

193 - Step

194 - {' '}

195 - {currentStep}

196 - :

197 - {' '}

198 - {friendlyAction}

199 - {' '}

200 - (

195 + Step {currentStep}

196 + : {friendlyAction} (

197 <a style={{color: 'gray'}} onClick={this.handleEdit} href="#">

198 Edit

199 </a>

fixtures/fiber-debugger/src/Fibers.js

+92 -82

@@ -83,7 +83,8 @@ function Graph(props) {

83 y: interpolatingStyle.y + props.dy,

84 vanillaX: node.x,

85 vanillaY: node.y,

86 - })}

86 + })

87 + }

88 </Motion>

89 );

90 });

@@ -227,7 +228,8 @@ function Edge(props) {

228 />

229 <text>

230 <textPath xlinkHref={`#${lineID}`}>

230 - {' '}{props.children}

231 + {' '}

232 + {props.children}

233 </textPath>

234 </text>

235 </svg>

@@ -258,9 +260,8 @@ export default function Fibers({fibers, show, graphSettings, ...rest}) {

260 );

261

262 const isDragging = rest.className.indexOf('dragging') > -1;

261 - const [_, sdx, sdy] = rest.style.transform.match(

262 - /translate$(-?\d+)px,(-?\d+)px$/

263 - ) || [];

263 + const [_, sdx, sdy] =

264 + rest.style.transform.match(/translate$(-?\d+)px,(-?\d+)px$/) || [];

265 const dx = Number(sdx);

266 const dy = Number(sdy);

267

@@ -298,29 +299,31 @@ export default function Fibers({fibers, show, graphSettings, ...rest}) {

299 /*prettyFormat(fiber, { plugins: [reactElement ]})*/

300 'todo: this was hanging last time I tried to pretty print'

301 }>

301 - <small>{fiber.tag} #{fiber.id}</small>

302 + <small>

303 + {fiber.tag} #{fiber.id}

304 + </small>

305 <br />

306 {fiber.type}

307 <br />

305 - {fibers.currentIDs.indexOf(fiber.id) === -1

306 - ? <small>

307 - {fiber.pendingWorkPriority !== 0 && [

308 - <span key="span">

309 - Needs: {formatPriority(fiber.pendingWorkPriority)}

310 - </span>,

311 - <br key="br" />,

312 - ]}

313 - {fiber.memoizedProps !== null &&

308 + {fibers.currentIDs.indexOf(fiber.id) === -1 ? (

309 + <small>

310 + {fiber.pendingWorkPriority !== 0 && [

311 + <span key="span">

312 + Needs: {formatPriority(fiber.pendingWorkPriority)}

313 + </span>,

314 + <br key="br" />,

315 + ]}

316 + {fiber.memoizedProps !== null &&

317 fiber.pendingProps !== null && [

318 fiber.memoizedProps === fiber.pendingProps

319 ? 'Can reuse memoized.'

320 : 'Cannot reuse memoized.',

321 <br key="br" />,

322 ]}

320 - </small>

321 - : <small>

322 - Committed

323 - </small>}

323 + </small>

324 + ) : (

325 + <small>Committed</small>

326 + )}

327 {fiber.effectTag && [

328 <br key="br" />,

329 <small key="small">Effect: {fiber.effectTag}</small>,

@@ -328,75 +331,82 @@ export default function Fibers({fibers, show, graphSettings, ...rest}) {

331 </div>

332 </Vertex>,

333 fiber.child &&

331 - show.child &&

332 - <Edge

333 - source={fiber.id}

334 - target={fiber.child}

335 - kind="child"

336 - weight={1000}

337 - key={`${fiber.id}-${fiber.child}-child`}>

338 - child

339 - </Edge>,

334 + show.child && (

335 + <Edge

336 + source={fiber.id}

337 + target={fiber.child}

338 + kind="child"

339 + weight={1000}

340 + key={`${fiber.id}-${fiber.child}-child`}>

341 + child

342 + </Edge>

343 + ),

344 fiber.sibling &&

341 - show.sibling &&

342 - <Edge

343 - source={fiber.id}

344 - target={fiber.sibling}

345 - kind="sibling"

346 - weight={2000}

347 - key={`${fiber.id}-${fiber.sibling}-sibling`}>

348 - sibling

349 - </Edge>,

345 + show.sibling && (

346 + <Edge

347 + source={fiber.id}

348 + target={fiber.sibling}

349 + kind="sibling"

350 + weight={2000}

351 + key={`${fiber.id}-${fiber.sibling}-sibling`}>

352 + sibling

353 + </Edge>

354 + ),

355 fiber.return &&

351 - show.return &&

352 - <Edge

353 - source={fiber.id}

354 - target={fiber.return}

355 - kind="return"

356 - weight={1000}

357 - key={`${fiber.id}-${fiber.return}-return`}>

358 - return

359 - </Edge>,

356 + show.return && (

357 + <Edge

358 + source={fiber.id}

359 + target={fiber.return}

360 + kind="return"

361 + weight={1000}

362 + key={`${fiber.id}-${fiber.return}-return`}>

363 + return

364 + </Edge>

365 + ),

366 fiber.nextEffect &&

361 - show.fx &&

362 - <Edge

363 - source={fiber.id}

364 - target={fiber.nextEffect}

365 - kind="fx"

366 - weight={100}

367 - key={`${fiber.id}-${fiber.nextEffect}-nextEffect`}>

368 - nextFx

369 - </Edge>,

367 + show.fx && (

368 + <Edge

369 + source={fiber.id}

370 + target={fiber.nextEffect}

371 + kind="fx"

372 + weight={100}

373 + key={`${fiber.id}-${fiber.nextEffect}-nextEffect`}>

374 + nextFx

375 + </Edge>

376 + ),

377 fiber.firstEffect &&

371 - show.fx &&

372 - <Edge

373 - source={fiber.id}

374 - target={fiber.firstEffect}

375 - kind="fx"

376 - weight={100}

377 - key={`${fiber.id}-${fiber.firstEffect}-firstEffect`}>

378 - firstFx

379 - </Edge>,

378 + show.fx && (

379 + <Edge

380 + source={fiber.id}

381 + target={fiber.firstEffect}

382 + kind="fx"

383 + weight={100}

384 + key={`${fiber.id}-${fiber.firstEffect}-firstEffect`}>

385 + firstFx

386 + </Edge>

387 + ),

388 fiber.lastEffect &&

381 - show.fx &&

382 - <Edge

383 - source={fiber.id}

384 - target={fiber.lastEffect}

385 - kind="fx"

386 - weight={100}

387 - key={`${fiber.id}-${fiber.lastEffect}-lastEffect`}>

388 - lastFx

389 - </Edge>,

389 + show.fx && (

390 + <Edge

391 + source={fiber.id}

392 + target={fiber.lastEffect}

393 + kind="fx"

394 + weight={100}

395 + key={`${fiber.id}-${fiber.lastEffect}-lastEffect`}>

396 + lastFx

397 + </Edge>

398 + ),

399 fiber.alternate &&

391 - show.alt &&

392 - <Edge

393 - source={fiber.id}

394 - target={fiber.alternate}

395 - kind="alt"

396 - weight={10}

397 - key={`${fiber.id}-${fiber.alternate}-alt`}>

398 - alt

399 - </Edge>,

400 + show.alt && (

401 + <Edge

402 + source={fiber.id}

403 + target={fiber.alternate}

404 + kind="alt"

405 + weight={10}

406 + key={`${fiber.id}-${fiber.alternate}-alt`}>

407 + alt

408 + </Edge>

409 + ),

410 ])}

411 </Graph>

412 </div>

fixtures/reconciler/index.js

+6 -3

@@ -297,7 +297,10 @@ Noop.render(

297 <div>Hello</div>

298 <Children>

299 Hello world

300 - <span>{'Number '}{42}</span>

300 + <span>

301 + {'Number '}

302 + {42}

303 + </span>

304 <Test active={true} ref={t => (instance = t)} />

305 </Children>

306 </main>

@@ -324,7 +327,7 @@ const expected1 = [

327 assert.deepEqual(

328 actual1,

329 expected1,

327 - 'Error. Noop.getChildren() returned unexpected value.\nExpected:\ ' +

330 + 'Error. Noop.getChildren() returned unexpected value.\nExpected: ' +

331 JSON.stringify(expected1, null, 2) +

332 '\n\nActual:\n ' +

333 JSON.stringify(actual1, null, 2)

@@ -357,7 +360,7 @@ const expected2 = [

360 assert.deepEqual(

361 actual2,

362 expected2,

360 - 'Error. Noop.getChildren() returned unexpected value.\nExpected:\ ' +

363 + 'Error. Noop.getChildren() returned unexpected value.\nExpected: ' +

364 JSON.stringify(expected2, null, 2) +

365 '\n\nActual:\n ' +

366 JSON.stringify(actual2, null, 2)

fixtures/ssr/src/components/Page.js

+4 -13

@@ -20,19 +20,10 @@ export default class Page extends Component {

20 );

21 return (

22 <div>

23 - <p suppressHydrationWarning={true}>

24 - A random number: {Math.random()}

25 - </p>

26 - <p>

27 - Autofocus on page load: {autofocusedInputs}

28 - </p>

29 - <p>

30 - {!this.state.active ? link : 'Thanks!'}

31 - </p>

32 - {this.state.active &&

33 - <p>

34 - Autofocus on update: {autofocusedInputs}

35 - </p>}

23 + <p suppressHydrationWarning={true}>A random number: {Math.random()}</p>

24 + <p>Autofocus on page load: {autofocusedInputs}</p>

25 + <p>{!this.state.active ? link : 'Thanks!'}</p>

26 + {this.state.active && <p>Autofocus on update: {autofocusedInputs}</p>}

27 </div>

28 );

29 }

package.json

+1 -1

@@ -73,7 +73,7 @@

73 "ncp": "^2.0.0",

74 "object-assign": "^4.1.1",

75 "platform": "^1.1.0",

76 - "prettier": "1.2.2",

76 + "prettier": "1.8.1",

77 "prop-types": "^15.6.0",

78 "rimraf": "^2.6.1",

79 "rollup": "^0.49.3",

packages/events/ResponderEventPlugin.js

+6 -6

@@ -321,10 +321,10 @@ function setResponderAndExtractTransfer(

321 var shouldSetEventType = isStartish(topLevelType)

322 ? eventTypes.startShouldSetResponder

323 : isMoveish(topLevelType)

324 - ? eventTypes.moveShouldSetResponder

325 - : topLevelType === 'topSelectionChange'

326 - ? eventTypes.selectionChangeShouldSetResponder

327 - : eventTypes.scrollShouldSetResponder;

324 + ? eventTypes.moveShouldSetResponder

325 + : topLevelType === 'topSelectionChange'

326 + ? eventTypes.selectionChangeShouldSetResponder

327 + : eventTypes.scrollShouldSetResponder;

328

329 // TODO: stop one short of the current responder.

330 var bubbleShouldSetFrom = !responderInst

@@ -518,8 +518,8 @@ var ResponderEventPlugin = {

518 var incrementalTouch = isResponderTouchStart

519 ? eventTypes.responderStart

520 : isResponderTouchMove

521 - ? eventTypes.responderMove

522 - : isResponderTouchEnd ? eventTypes.responderEnd : null;

521 + ? eventTypes.responderMove

522 + : isResponderTouchEnd ? eventTypes.responderEnd : null;

523

524 if (incrementalTouch) {

525 var gesture = ResponderSyntheticEvent.getPooled(

packages/events/SyntheticEvent.js

+13 -12

@@ -99,9 +99,10 @@ function SyntheticEvent(

99 }

100 }

101

102 - var defaultPrevented = nativeEvent.defaultPrevented != null

103 - ? nativeEvent.defaultPrevented

104 - : nativeEvent.returnValue === false;

102 + var defaultPrevented =

103 + nativeEvent.defaultPrevented != null

104 + ? nativeEvent.defaultPrevented

105 + : nativeEvent.returnValue === false;

106 if (defaultPrevented) {

107 this.isDefaultPrevented = emptyFunction.thatReturnsTrue;

108 } else {

@@ -227,9 +228,9 @@ SyntheticEvent.augmentClass = function(Class, Interface) {

228 };

229

230 /** Proxying after everything set on SyntheticEvent

230 - * to resolve Proxy issue on some WebKit browsers

231 - * in which some Event properties are set to undefined (GH#10010)

232 - */

231 + * to resolve Proxy issue on some WebKit browsers

232 + * in which some Event properties are set to undefined (GH#10010)

233 + */

234 if (__DEV__) {

235 if (isProxySupported) {

236 /*eslint-disable no-func-assign */

@@ -267,12 +268,12 @@ if (__DEV__) {

268 addEventPoolingTo(SyntheticEvent);

269

270 /**

270 - * Helper to nullify syntheticEvent instance properties when destructing

271 - *

272 - * @param {String} propName

273 - * @param {?object} getVal

274 - * @return {object} defineProperty object

275 - */

271 + * Helper to nullify syntheticEvent instance properties when destructing

272 + *

273 + * @param {String} propName

274 + * @param {?object} getVal

275 + * @return {object} defineProperty object

276 + */

277 function getPooledWarningPropertyDefinition(propName, getVal) {

278 var isFunction = typeof getVal === 'function';

279 return {

packages/events/TouchHistoryMath.js

+10 -8

@@ -32,22 +32,24 @@ var TouchHistoryMath = {

32 var total = 0;

33 var count = 0;

34

35 - var oneTouchData = touchHistory.numberActiveTouches === 1

36 - ? touchHistory.touchBank[touchHistory.indexOfSingleActiveTouch]

37 - : null;

35 + var oneTouchData =

36 + touchHistory.numberActiveTouches === 1

37 + ? touchHistory.touchBank[touchHistory.indexOfSingleActiveTouch]

38 + : null;

39

40 if (oneTouchData !== null) {

41 if (

42 oneTouchData.touchActive &&

43 oneTouchData.currentTimeStamp > touchesChangedAfter

44 ) {

44 - total += ofCurrent && isXAxis

45 - ? oneTouchData.currentPageX

46 - : ofCurrent && !isXAxis

45 + total +=

46 + ofCurrent && isXAxis

47 + ? oneTouchData.currentPageX

48 + : ofCurrent && !isXAxis

49 ? oneTouchData.currentPageY

50 : !ofCurrent && isXAxis

49 - ? oneTouchData.previousPageX

50 - : oneTouchData.previousPageY;

51 + ? oneTouchData.previousPageX

52 + : oneTouchData.previousPageY;

53 count = 1;

54 }

55 } else {

packages/react-art/npm/Wedge.js

+5 -2

@@ -61,7 +61,7 @@ var Wedge = createReactClass({

61 // 360, 720, etc.

62 return this.circleRadians;

63 } else {

64 - return degrees * this.radiansPerDegree % this.circleRadians;

64 + return (degrees * this.radiansPerDegree) % this.circleRadians;

65 }

66 },

67

@@ -77,7 +77,10 @@ var Wedge = createReactClass({

77 _createCirclePath: function _createCirclePath(or, ir) {

78 var path = Path();

79

80 - path.move(0, or).arc(or * 2, 0, or).arc(-or * 2, 0, or);

80 + path

81 + .move(0, or)

82 + .arc(or * 2, 0, or)

83 + .arc(-or * 2, 0, or);

84

85 if (ir) {

86 path

packages/react-call-return/src/__tests__/ReactCallReturn-test.js

+19 -3

@@ -74,7 +74,13 @@ describe('ReactCallReturn', () => {

74 }

75

76 function App() {

77 - return <div><Parent foo={true}><Indirection /></Parent></div>;

77 + return (

78 + <div>

79 + <Parent foo={true}>

80 + <Indirection />

81 + </Parent>

82 + </div>

83 + );

84 }

85

86 ReactNoop.render(<App />);

@@ -130,7 +136,13 @@ describe('ReactCallReturn', () => {

136 }

137

138 function App(props) {

133 - return <div><Parent foo={props.foo}><Indirection /></Parent></div>;

139 + return (

140 + <div>

141 + <Parent foo={props.foo}>

142 + <Indirection />

143 + </Parent>

144 + </div>

145 + );

146 }

147

148 ReactNoop.render(<App foo={true} />);

@@ -190,7 +202,11 @@ describe('ReactCallReturn', () => {

202 }

203 }

204

193 - ReactNoop.render(<Parent><Child /></Parent>);

205 + ReactNoop.render(

206 + <Parent>

207 + <Child />

208 + </Parent>,

209 + );

210 ReactNoop.flush();

211

212 expect(ops).toEqual(['Parent', 'Child', 'HandleReturns', 'Continuation']);

packages/react-cs-renderer/src/ReactNativeCSFeatureFlags.js

+1 -1

@@ -30,6 +30,6 @@ export function addUserTimingListener() {

30

31 // Flow magic to verify the exports of this file match the original version.

32 // eslint-disable-next-line no-unused-vars

33 -type Check<_X, Y: _X, X: Y=_X> = null;

33 +type Check<_X, Y: _X, X: Y = _X> = null;

34 // eslint-disable-next-line no-unused-expressions

35 (null: Check<CSFeatureFlagsType, FeatureFlagsType>);

packages/react-dom/src/__tests__/ReactComponent-test.js

+26 -6

@@ -104,7 +104,11 @@ describe('ReactComponent', () => {

104 class Component extends React.Component {

105 render() {

106 var inner = <Wrapper object={innerObj} ref="inner" />;

107 - var outer = <Wrapper object={outerObj} ref="outer">{inner}</Wrapper>;

107 + var outer = (

108 + <Wrapper object={outerObj} ref="outer">

109 + {inner}

110 + </Wrapper>

111 + );

112 return outer;

113 }

114

@@ -120,7 +124,11 @@ describe('ReactComponent', () => {

124 it('should not have refs on unmounted components', () => {

125 class Parent extends React.Component {

126 render() {

123 - return <Child><div ref="test" /></Child>;

127 + return (

128 + <Child>

129 + <div ref="test" />

130 + </Child>

131 + );

132 }

133

134 componentDidMount() {

@@ -357,7 +365,11 @@ describe('ReactComponent', () => {

365 }

366

367 function Bar() {

360 - return <Indirection><X /></Indirection>;

368 + return (

369 + <Indirection>

370 + <X />

371 + </Indirection>

372 + );

373 }

374

375 function Foo() {

@@ -513,7 +525,11 @@ describe('ReactComponent', () => {

525

526 it('warns on function as a child to host component', () => {

527 function Foo() {

516 - return <div><span>{Foo}</span></div>;

528 + return (

529 + <div>

530 + <span>{Foo}</span>

531 + </div>

532 + );

533 }

534 spyOn(console, 'error');

535 var container = document.createElement('div');

@@ -553,8 +569,12 @@ describe('ReactComponent', () => {

569 render() {

570 return (

571 <div>

556 - {Foo}{Foo}

557 - <span>{Foo}{Foo}</span>

572 + {Foo}

573 + {Foo}

574 + <span>

575 + {Foo}

576 + {Foo}

577 + </span>

578 </div>

579 );

580 }

packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.js

+6 -6

@@ -373,11 +373,7 @@ describe('ReactComponentLifeCycle', () => {

373 }

374 // you would *NEVER* do anything like this in real code!

375 this.state.hasRenderCompleted = true;

376 - return (

377 - <div ref="theDiv">

378 - I am the inner DIV

379 - </div>

380 - );

376 + return <div ref="theDiv">I am the inner DIV</div>;

377 }

378

379 componentWillUnmount() {

@@ -536,7 +532,11 @@ describe('ReactComponentLifeCycle', () => {

532 componentDidUpdate = logger('outer componentDidUpdate');

533 componentWillUnmount = logger('outer componentWillUnmount');

534 render() {

539 - return <div><Inner x={this.props.x} /></div>;

535 + return (

536 + <div>

537 + <Inner x={this.props.x} />

538 + </div>

539 + );

540 }

541 }

542

packages/react-dom/src/__tests__/ReactCompositeComponent-test.js

+49 -15

@@ -48,9 +48,11 @@ describe('ReactCompositeComponent', () => {

48

49 render() {

50 var toggleActivatedState = this._toggleActivatedState;

51 - return !this.state.activated

52 - ? <a ref="x" onClick={toggleActivatedState} />

53 - : <b ref="x" onClick={toggleActivatedState} />;

51 + return !this.state.activated ? (

52 + <a ref="x" onClick={toggleActivatedState} />

53 + ) : (

54 + <b ref="x" onClick={toggleActivatedState} />

55 + );

56 }

57 };

58

@@ -65,9 +67,11 @@ describe('ReactCompositeComponent', () => {

67

68 render() {

69 var className = this.props.anchorClassOn ? 'anchorClass' : '';

68 - return this.props.renderAnchor

69 - ? <a ref="anch" className={className} />

70 - : <b />;

70 + return this.props.renderAnchor ? (

71 + <a ref="anch" className={className} />

72 + ) : (

73 + <b />

74 + );

75 }

76 };

77 });

@@ -110,7 +114,11 @@ describe('ReactCompositeComponent', () => {

114

115 class Parent extends React.Component {

116 render() {

113 - return <div><Child /></div>;

117 + return (

118 + <div>

119 + <Child />

120 + </div>

121 + );

122 }

123 }

124

@@ -582,7 +590,11 @@ describe('ReactCompositeComponent', () => {

590 it('should pass context to children when not owner', () => {

591 class Parent extends React.Component {

592 render() {

585 - return <Child><Grandchild /></Child>;

593 + return (

594 + <Child>

595 + <Grandchild />

596 + </Child>

597 + );

598 }

599 }

600

@@ -685,7 +697,11 @@ describe('ReactCompositeComponent', () => {

697 }

698

699 parentInstance = ReactTestUtils.renderIntoDocument(

688 - <Parent><Middle><Child /></Middle></Parent>,

700 + <Parent>

701 + <Middle>

702 + <Child />

703 + </Middle>

704 + </Parent>,

705 );

706

707 expect(parentInstance.state.flag).toBe(false);

@@ -1139,15 +1155,23 @@ describe('ReactCompositeComponent', () => {

1155 if (this.props.flipped) {

1156 return (

1157 <div>

1142 - <Static ref="static0" key="B">B (ignored)</Static>

1143 - <Static ref="static1" key="A">A (ignored)</Static>

1158 + <Static ref="static0" key="B">

1159 + B (ignored)

1160 + </Static>

1161 + <Static ref="static1" key="A">

1162 + A (ignored)

1163 + </Static>

1164 </div>

1165 );

1166 } else {

1167 return (

1168 <div>

1149 - <Static ref="static0" key="A">A</Static>

1150 - <Static ref="static1" key="B">B</Static>

1169 + <Static ref="static0" key="A">

1170 + A

1171 + </Static>

1172 + <Static ref="static1" key="B">

1173 + B

1174 + </Static>

1175 </div>

1176 );

1177 }

@@ -1221,7 +1245,12 @@ describe('ReactCompositeComponent', () => {

1245 }

1246

1247 var div = document.createElement('div');

1224 - ReactDOM.render(<Parent><Component /></Parent>, div);

1248 + ReactDOM.render(

1249 + <Parent>

1250 + <Component />

1251 + </Parent>,

1252 + div,

1253 + );

1254 });

1255

1256 it('should replace state', () => {

@@ -1314,7 +1343,12 @@ describe('ReactCompositeComponent', () => {

1343 }

1344 }

1345

1317 - ReactDOM.render(<Outer><Component /></Outer>, container);

1346 + ReactDOM.render(

1347 + <Outer>

1348 + <Component />

1349 + </Outer>,

1350 + container,

1351 + );

1352 ReactDOM.render(<Outer />, container);

1353 });

1354

packages/react-dom/src/__tests__/ReactCompositeComponentDOMMinimalism-test.js

+5 -21

@@ -33,21 +33,13 @@ describe('ReactCompositeComponentDOMMinimalism', () => {

33

34 LowerLevelComposite = class extends React.Component {

35 render() {

36 - return (

37 - <div>

38 - {this.props.children}

39 - </div>

40 - );

36 + return <div>{this.props.children}</div>;

37 }

38 };

39

40 MyCompositeComponent = class extends React.Component {

41 render() {

46 - return (

47 - <LowerLevelComposite>

48 - {this.props.children}

49 - </LowerLevelComposite>

50 - );

42 + return <LowerLevelComposite>{this.props.children}</LowerLevelComposite>;

43 }

44 };

45

@@ -59,20 +51,14 @@ describe('ReactCompositeComponentDOMMinimalism', () => {

51 });

52

53 it('should not render extra nodes for non-interpolated text', () => {

62 - var instance = (

63 - <MyCompositeComponent>

64 - A string child

65 - </MyCompositeComponent>

66 - );

54 + var instance = <MyCompositeComponent>A string child</MyCompositeComponent>;

55 instance = ReactTestUtils.renderIntoDocument(instance);

56 expectSingleChildlessDiv(instance);

57 });

58

59 it('should not render extra nodes for non-interpolated text', () => {

60 var instance = (

73 - <MyCompositeComponent>

74 - {'Interpolated String Child'}

75 - </MyCompositeComponent>

61 + <MyCompositeComponent>{'Interpolated String Child'}</MyCompositeComponent>

62 );

63 instance = ReactTestUtils.renderIntoDocument(instance);

64 expectSingleChildlessDiv(instance);

@@ -81,9 +67,7 @@ describe('ReactCompositeComponentDOMMinimalism', () => {

67 it('should not render extra nodes for non-interpolated text', () => {

68 var instance = (

69 <MyCompositeComponent>

84 - <ul>

85 - This text causes no children in ul, just innerHTML

86 - </ul>

70 + <ul>This text causes no children in ul, just innerHTML</ul>

71 </MyCompositeComponent>

72 );

73 instance = ReactTestUtils.renderIntoDocument(instance);

packages/react-dom/src/__tests__/ReactCompositeComponentState-test.js

+4 -2

@@ -390,7 +390,8 @@ describe('ReactCompositeComponent-state', () => {

390 this.setState({step: 2}, () => {

391 // Tests that earlier setState callbacks are not dropped

392 ops.push(

393 - `callback -- step: ${this.state.step}, extra: ${!!this.state.extra}`,

393 + `callback -- step: ${this.state.step}, extra: ${!!this.state

394 + .extra}`,

395 );

396 });

397 // Treat like replaceState

@@ -437,7 +438,8 @@ describe('ReactCompositeComponent-state', () => {

438 this.setState({step: 2}, () => {

439 // Tests that earlier setState callbacks are not dropped

440 ops.push(

440 - `callback -- step: ${this.state.step}, extra: ${!!this.state.extra}`,

441 + `callback -- step: ${this.state.step}, extra: ${!!this.state

442 + .extra}`,

443 );

444 });

445 // Treat like replaceState

packages/react-dom/src/__tests__/ReactDOM-test.js

+3 -2

@@ -207,8 +207,9 @@ describe('ReactDOM', () => {

207 return (

208 <div>

209 <input id="one" ref={r => (input = input || r)} />

210 - {this.props.showTwo &&

211 - <input id="two" ref={r => (input2 = input2 || r)} />}

210 + {this.props.showTwo && (

211 + <input id="two" ref={r => (input2 = input2 || r)} />

212 + )}

213 </div>

214 );

215 }

packages/react-dom/src/__tests__/ReactDOMComponent-test.js

+134 -29

@@ -580,22 +580,40 @@ describe('ReactDOMComponent', () => {

580 it('should transition from innerHTML to children in nested el', () => {

581 var container = document.createElement('div');

582 ReactDOM.render(

583 - <div><div dangerouslySetInnerHTML={{__html: 'bonjour'}} /></div>,

583 + <div>

584 + <div dangerouslySetInnerHTML={{__html: 'bonjour'}} />

585 + </div>,

586 container,

587 );

588

589 expect(container.textContent).toEqual('bonjour');

588 - ReactDOM.render(<div><div><span>adieu</span></div></div>, container);

590 + ReactDOM.render(

591 + <div>

592 + <div>

593 + <span>adieu</span>

594 + </div>

595 + </div>,

596 + container,

597 + );

598 expect(container.textContent).toEqual('adieu');

599 });

600

601 it('should transition from children to innerHTML in nested el', () => {

602 var container = document.createElement('div');

594 - ReactDOM.render(<div><div><span>adieu</span></div></div>, container);

603 + ReactDOM.render(

604 + <div>

605 + <div>

606 + <span>adieu</span>

607 + </div>

608 + </div>,

609 + container,

610 + );

611

612 expect(container.textContent).toEqual('adieu');

613 ReactDOM.render(

598 - <div><div dangerouslySetInnerHTML={{__html: 'bonjour'}} /></div>,

614 + <div>

615 + <div dangerouslySetInnerHTML={{__html: 'bonjour'}} />

616 + </div>,

617 container,

618 );

619 expect(container.textContent).toEqual('bonjour');

@@ -744,10 +762,12 @@ describe('ReactDOMComponent', () => {

762 ReactDOM.render(

763 <div>

764 <div key="one">

747 - <div key="A">A</div><div key="B">B</div>

765 + <div key="A">A</div>

766 + <div key="B">B</div>

767 </div>

768 <div key="two">

750 - <div key="C">C</div><div key="D">D</div>

769 + <div key="C">C</div>

770 + <div key="D">D</div>

771 </div>

772 </div>,

773 container,

@@ -756,10 +776,12 @@ describe('ReactDOMComponent', () => {

776 ReactDOM.render(

777 <div>

778 <div key="one">

759 - <div key="B">B</div><div key="A">A</div>

779 + <div key="B">B</div>

780 + <div key="A">A</div>

781 </div>

782 <div key="two">

762 - <div key="D">D</div><div key="C">C</div>

783 + <div key="D">D</div>

784 + <div key="C">C</div>

785 </div>

786 </div>,

787 container,

@@ -1050,13 +1072,20 @@ describe('ReactDOMComponent', () => {

1072 var container = document.createElement('div');

1073

1074 var returnedValue = ReactDOMServer.renderToString(

1053 - <menu><menuitem /></menu>,

1075 + <menu>

1076 + <menuitem />

1077 + </menu>,

1078 );

1079

1080 expect(returnedValue).toContain('</menuitem>');

1081

1082 expect(function() {

1059 - ReactDOM.render(<menu><menuitem>children</menuitem></menu>, container);

1083 + ReactDOM.render(

1084 + <menu>

1085 + <menuitem>children</menuitem>

1086 + </menu>,

1087 + container,

1088 + );

1089 }).toThrowError(

1090 'menuitem is a void element tag and must neither have `children` nor use ' +

1091 '`dangerouslySetInnerHTML`.',

@@ -1275,7 +1304,12 @@ describe('ReactDOMComponent', () => {

1304

1305 it('should warn about contentEditable and children', () => {

1306 spyOn(console, 'error');

1278 - ReactDOM.render(<div contentEditable={true}><div /></div>, container);

1307 + ReactDOM.render(

1308 + <div contentEditable={true}>

1309 + <div />

1310 + </div>,

1311 + container,

1312 + );

1313 expectDev(console.error.calls.count()).toBe(1);

1314 expectDev(console.error.calls.argsFor(0)[0]).toContain('contentEditable');

1315 });

@@ -1352,7 +1386,12 @@ describe('ReactDOMComponent', () => {

1386 }

1387

1388 var container = document.createElement('div');

1355 - ReactDOM.render(<div><Inner /></div>, container);

1389 + ReactDOM.render(

1390 + <div>

1391 + <Inner />

1392 + </div>,

1393 + container,

1394 + );

1395 ReactDOM.unmountComponentAtNode(container);

1396 });

1397 });

@@ -1386,21 +1425,37 @@ describe('ReactDOMComponent', () => {

1425 describe('nesting validation', () => {

1426 it('warns on invalid nesting', () => {

1427 spyOn(console, 'error');

1389 - ReactTestUtils.renderIntoDocument(<div><tr /><tr /></div>);

1428 + ReactTestUtils.renderIntoDocument(

1429 + <div>

1430 + <tr />

1431 + <tr />

1432 + </div>,

1433 + );

1434

1391 - expectDev(console.error.calls.count()).toBe(1);

1435 + expectDev(console.error.calls.count()).toBe(2);

1436 expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toBe(

1437 'Warning: validateDOMNesting(...): <tr> cannot appear as a child of ' +

1438 '<div>.' +

1439 '\n in tr (at **)' +

1440 '\n in div (at **)',

1441 );

1442 + expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(1)[0])).toBe(

1443 + 'Warning: validateDOMNesting(...): <tr> cannot appear as a child of ' +

1444 + '<div>.' +

1445 + '\n in tr (at **)' +

1446 + '\n in div (at **)',

1447 + );

1448 });

1449

1450 it('warns on invalid nesting at root', () => {

1451 spyOn(console, 'error');

1452 var p = document.createElement('p');

1403 - ReactDOM.render(<span><p /></span>, p);

1453 + ReactDOM.render(

1454 + <span>

1455 + <p />

1456 + </span>,

1457 + p,

1458 + );

1459

1460 expectDev(console.error.calls.count()).toBe(1);

1461 expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toBe(

@@ -1423,7 +1478,11 @@ describe('ReactDOMComponent', () => {

1478

1479 class Foo extends React.Component {

1480 render() {

1426 - return <table><Row /> </table>;

1481 + return (

1482 + <table>

1483 + <Row />{' '}

1484 + </table>

1485 + );

1486 }

1487 }

1488

@@ -1480,7 +1539,11 @@ describe('ReactDOMComponent', () => {

1539 }

1540

1541 function Viz1() {

1483 - return <table><FancyRow /></table>;

1542 + return (

1543 + <table>

1544 + <FancyRow />

1545 + </table>

1546 + );

1547 }

1548 function App1() {

1549 return <Viz1 />;

@@ -1498,7 +1561,11 @@ describe('ReactDOMComponent', () => {

1561 );

1562

1563 function Viz2() {

1501 - return <FancyTable><FancyRow /></FancyTable>;

1564 + return (

1565 + <FancyTable>

1566 + <FancyRow />

1567 + </FancyTable>

1568 + );

1569 }

1570 function App2() {

1571 return <Viz2 />;

@@ -1517,7 +1584,11 @@ describe('ReactDOMComponent', () => {

1584 '\n in Viz2 (at **)',

1585 );

1586

1520 - ReactTestUtils.renderIntoDocument(<FancyTable><FancyRow /></FancyTable>);

1587 + ReactTestUtils.renderIntoDocument(

1588 + <FancyTable>

1589 + <FancyRow />

1590 + </FancyTable>,

1591 + );

1592 expectDev(console.error.calls.count()).toBe(3);

1593 expectDev(

1594 normalizeCodeLocInfo(console.error.calls.argsFor(2)[0]),

@@ -1530,7 +1601,11 @@ describe('ReactDOMComponent', () => {

1601 '\n in FancyTable (at **)',

1602 );

1603

1533 - ReactTestUtils.renderIntoDocument(<table><FancyRow /></table>);

1604 + ReactTestUtils.renderIntoDocument(

1605 + <table>

1606 + <FancyRow />

1607 + </table>,

1608 + );

1609 expectDev(console.error.calls.count()).toBe(4);

1610 expectDev(

1611 normalizeCodeLocInfo(console.error.calls.argsFor(3)[0]),

@@ -1541,7 +1616,11 @@ describe('ReactDOMComponent', () => {

1616 '\n in table (at **)',

1617 );

1618

1544 - ReactTestUtils.renderIntoDocument(<FancyTable><tr /></FancyTable>);

1619 + ReactTestUtils.renderIntoDocument(

1620 + <FancyTable>

1621 + <tr />

1622 + </FancyTable>,

1623 + );

1624 expectDev(console.error.calls.count()).toBe(5);

1625 expectDev(

1626 normalizeCodeLocInfo(console.error.calls.argsFor(4)[0]),

@@ -1558,7 +1637,13 @@ describe('ReactDOMComponent', () => {

1637 }

1638 }

1639

1561 - ReactTestUtils.renderIntoDocument(<Link><div><Link /></div></Link>);

1640 + ReactTestUtils.renderIntoDocument(

1641 + <Link>

1642 + <div>

1643 + <Link />

1644 + </div>

1645 + </Link>,

1646 + );

1647 expectDev(console.error.calls.count()).toBe(6);

1648 expectDev(

1649 normalizeCodeLocInfo(console.error.calls.argsFor(5)[0]),

@@ -1771,8 +1856,8 @@ describe('ReactDOMComponent', () => {

1856 var previousLine = (matches || [])[1];

1857

1858 expectDev(console.error.calls.argsFor(1)[0]).toContain('onClick');

1774 - matches = console.error.calls.argsFor(1)[0].match(/.*$.*:(\d+)$.*/) || {

1775 - };

1859 + matches =

1860 + console.error.calls.argsFor(1)[0].match(/.*$.*:(\d+)$.*/) || {};

1861 var currentLine = (matches || [])[1];

1862

1863 //verify line number has a proper relative difference,

@@ -1786,7 +1871,14 @@ describe('ReactDOMComponent', () => {

1871

1872 class Parent extends React.Component {

1873 render() {

1789 - return <div><Child1 /><Child2 /><Child3 /><Child4 /></div>;

1874 + return (

1875 + <div>

1876 + <Child1 />

1877 + <Child2 />

1878 + <Child3 />

1879 + <Child4 />

1880 + </div>

1881 + );

1882 }

1883 }

1884

@@ -1837,7 +1929,14 @@ describe('ReactDOMComponent', () => {

1929

1930 class Parent extends React.Component {

1931 render() {

1840 - return <div><Child1 /><Child2 /><Child3 /><Child4 /></div>;

1932 + return (

1933 + <div>

1934 + <Child1 />

1935 + <Child2 />

1936 + <Child3 />

1937 + <Child4 />

1938 + </div>

1939 + );

1940 }

1941 }

1942

@@ -1980,7 +2079,9 @@ describe('ReactDOMComponent', () => {

2079 spyOn(console, 'error');

2080

2081 var el = ReactTestUtils.renderIntoDocument(

1983 - <svg><text arabic-form="initial" /></svg>,

2082 + <svg>

2083 + <text arabic-form="initial" />

2084 + </svg>,

2085 );

2086 var text = el.querySelector('text');

2087

@@ -2264,7 +2365,9 @@ describe('ReactDOMComponent', () => {

2365 it('the font-face element is not a custom element', function() {

2366 spyOn(console, 'error');

2367 var el = ReactTestUtils.renderIntoDocument(

2267 - <svg><font-face x-height={false} /></svg>,

2368 + <svg>

2369 + <font-face x-height={false} />

2370 + </svg>,

2371 );

2372

2373 expect(el.querySelector('font-face').hasAttribute('x-height')).toBe(

@@ -2280,7 +2383,9 @@ describe('ReactDOMComponent', () => {

2383 it('the font-face element does not allow unknown boolean values', function() {

2384 spyOn(console, 'error');

2385 var el = ReactTestUtils.renderIntoDocument(

2283 - <svg><font-face whatever={false} /></svg>,

2386 + <svg>

2387 + <font-face whatever={false} />

2388 + </svg>,

2389 );

2390

2391 expect(el.querySelector('font-face').hasAttribute('whatever')).toBe(

packages/react-dom/src/__tests__/ReactDOMComponentTree-test.js

+5 -1

@@ -85,7 +85,11 @@ describe('ReactDOMComponentTree', () => {

85 }

86

87 function renderAndQuery(sel) {

88 - var root = renderMarkupIntoDocument(<section><Component /></section>);

88 + var root = renderMarkupIntoDocument(

89 + <section>

90 + <Component />

91 + </section>,

92 + );

93 return sel ? root.querySelector(sel) : root;

94 }

95

packages/react-dom/src/__tests__/ReactDOMEventListener-test.js

+7 -1

@@ -193,7 +193,13 @@ describe('ReactDOMEventListener', () => {

193

194 render() {

195 var inner = <div ref="inner">Inner</div>;

196 - return <div><div onMouseOut={onMouseOut} id="outer">{inner}</div></div>;

196 + return (

197 + <div>

198 + <div onMouseOut={onMouseOut} id="outer">

199 + {inner}

200 + </div>

201 + </div>

202 + );

203 }

204 }

205

packages/react-dom/src/__tests__/ReactDOMFiber-test.js

+13 -22

@@ -133,7 +133,12 @@ describe('ReactDOMFiber', () => {

133

134 class Fragment extends React.Component {

135 render() {

136 - return [<Wrapper key="a"><div /></Wrapper>, <span key="b" />];

136 + return [

137 + <Wrapper key="a">

138 + <div />

139 + </Wrapper>,

140 + <span key="b" />,

141 + ];

142 }

143 }

144

@@ -204,9 +209,7 @@ describe('ReactDOMFiber', () => {

209 var portalContainer = document.createElement('div');

210

211 ReactDOM.render(

207 - <div>

208 - {ReactDOM.createPortal(<div>portal</div>, portalContainer)}

209 - </div>,

212 + <div>{ReactDOM.createPortal(<div>portal</div>, portalContainer)}</div>,

213 container,

214 );

215 expect(portalContainer.innerHTML).toBe('<div>portal</div>');

@@ -382,54 +385,42 @@ describe('ReactDOMFiber', () => {

385 var portalContainer = document.createElement('div');

386

387 ReactDOM.render(

385 - <div>

386 - {ReactDOM.createPortal(<div>portal:1</div>, portalContainer)}

387 - </div>,

388 + <div>{ReactDOM.createPortal(<div>portal:1</div>, portalContainer)}</div>,

389 container,

390 );

391 expect(portalContainer.innerHTML).toBe('<div>portal:1</div>');

392 expect(container.innerHTML).toBe('<div></div>');

393

394 ReactDOM.render(

394 - <div>

395 - {ReactDOM.createPortal(<div>portal:2</div>, portalContainer)}

396 - </div>,

395 + <div>{ReactDOM.createPortal(<div>portal:2</div>, portalContainer)}</div>,

396 container,

397 );

398 expect(portalContainer.innerHTML).toBe('<div>portal:2</div>');

399 expect(container.innerHTML).toBe('<div></div>');

400

401 ReactDOM.render(

403 - <div>

404 - {ReactDOM.createPortal(<p>portal:3</p>, portalContainer)}

405 - </div>,

402 + <div>{ReactDOM.createPortal(<p>portal:3</p>, portalContainer)}</div>,

403 container,

404 );

405 expect(portalContainer.innerHTML).toBe('<p>portal:3</p>');

406 expect(container.innerHTML).toBe('<div></div>');

407

408 ReactDOM.render(

412 - <div>

413 - {ReactDOM.createPortal(['Hi', 'Bye'], portalContainer)}

414 - </div>,

409 + <div>{ReactDOM.createPortal(['Hi', 'Bye'], portalContainer)}</div>,

410 container,

411 );

412 expect(portalContainer.innerHTML).toBe('HiBye');

413 expect(container.innerHTML).toBe('<div></div>');

414

415 ReactDOM.render(

421 - <div>

422 - {ReactDOM.createPortal(['Bye', 'Hi'], portalContainer)}

423 - </div>,

416 + <div>{ReactDOM.createPortal(['Bye', 'Hi'], portalContainer)}</div>,

417 container,

418 );

419 expect(portalContainer.innerHTML).toBe('ByeHi');

420 expect(container.innerHTML).toBe('<div></div>');

421

422 ReactDOM.render(

430 - <div>

431 - {ReactDOM.createPortal(null, portalContainer)}

432 - </div>,

423 + <div>{ReactDOM.createPortal(null, portalContainer)}</div>,

424 container,

425 );

426 expect(portalContainer.innerHTML).toBe('');

packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js

+27 -7

@@ -46,13 +46,17 @@ describe('ReactDOMFiberAsync', () => {

46

47 it('renders synchronously', () => {

48 ReactDOM.render(

49 - <AsyncComponent><div>Hi</div></AsyncComponent>,

49 + <AsyncComponent>

50 + <div>Hi</div>

51 + </AsyncComponent>,

52 container,

53 );

54 expect(container.textContent).toEqual('Hi');

55

56 ReactDOM.render(

55 - <AsyncComponent><div>Bye</div></AsyncComponent>,

57 + <AsyncComponent>

58 + <div>Bye</div>

59 + </AsyncComponent>,

60 container,

61 );

62 expect(container.textContent).toEqual('Bye');

@@ -70,7 +74,9 @@ describe('ReactDOMFiberAsync', () => {

74

75 it('AsyncComponent at the root makes the entire tree async', () => {

76 ReactDOM.render(

73 - <AsyncComponent><div>Hi</div></AsyncComponent>,

77 + <AsyncComponent>

78 + <div>Hi</div>

79 + </AsyncComponent>,

80 container,

81 );

82 expect(container.textContent).toEqual('');

@@ -78,7 +84,9 @@ describe('ReactDOMFiberAsync', () => {

84 expect(container.textContent).toEqual('Hi');

85

86 ReactDOM.render(

81 - <AsyncComponent><div>Bye</div></AsyncComponent>,

87 + <AsyncComponent>

88 + <div>Bye</div>

89 + </AsyncComponent>,

90 container,

91 );

92 expect(container.textContent).toEqual('Hi');

@@ -97,7 +105,9 @@ describe('ReactDOMFiberAsync', () => {

105 }

106

107 ReactDOM.render(

100 - <AsyncComponent><Component /></AsyncComponent>,

108 + <AsyncComponent>

109 + <Component />

110 + </AsyncComponent>,

111 container,

112 );

113 expect(container.textContent).toEqual('');

@@ -120,7 +130,12 @@ describe('ReactDOMFiberAsync', () => {

130 }

131 }

132

123 - ReactDOM.render(<div><Component /></div>, container);

133 + ReactDOM.render(

134 + <div>

135 + <Component />

136 + </div>,

137 + container,

138 + );

139 jest.runAllTimers();

140

141 instance.setState({step: 1});

@@ -145,7 +160,12 @@ describe('ReactDOMFiberAsync', () => {

160 }

161 }

162

148 - ReactDOM.render(<div><Component /></div>, container);

163 + ReactDOM.render(

164 + <div>

165 + <Component />

166 + </div>,

167 + container,

168 + );

169 jest.runAllTimers();

170

171 instance.setState({step: 1});

packages/react-dom/src/__tests__/ReactDOMInput-test.js

-1

@@ -629,7 +629,6 @@ describe('ReactDOMInput', () => {

629 A

630 <input ref="b" type="radio" name="fruit" onChange={emptyFunction} />

631 B

632 -

632 <form>

633 <input

634 ref="c"

packages/react-dom/src/__tests__/ReactDOMOption-test.js

+18 -3

@@ -25,7 +25,11 @@ describe('ReactDOMOption', () => {

25 });

26

27 it('should flatten children to a string', () => {

28 - var stub = <option>{1} {'foo'}</option>;

28 + var stub = (

29 + <option>

30 + {1} {'foo'}

31 + </option>

32 + );

33 stub = ReactTestUtils.renderIntoDocument(stub);

34 var node = ReactDOM.findDOMNode(stub);

35

@@ -34,7 +38,11 @@ describe('ReactDOMOption', () => {

38

39 it('should ignore and warn invalid children types', () => {

40 spyOn(console, 'error');

37 - var el = <option>{1} <div /> {2}</option>;

41 + var el = (

42 + <option>

43 + {1} <div /> {2}

44 + </option>

45 + );

46 var node = ReactTestUtils.renderIntoDocument(el);

47 expect(node.innerHTML).toBe('1 2');

48 ReactTestUtils.renderIntoDocument(el);

@@ -50,7 +58,14 @@ describe('ReactDOMOption', () => {

58 });

59

60 it('should ignore null/undefined/false children without warning', () => {

53 - var stub = <option>{1} {false}{true}{null}{undefined} {2}</option>;

61 + var stub = (

62 + <option>

63 + {1} {false}

64 + {true}

65 + {null}

66 + {undefined} {2}

67 + </option>

68 + );

69 spyOn(console, 'error');

70 stub = ReactTestUtils.renderIntoDocument(stub);

71

packages/react-dom/src/__tests__/ReactDOMProduction-test.js

+9 -3

@@ -205,7 +205,9 @@ describe('ReactDOMProduction', () => {

205 ReactDOM.render(<Component />, container);

206 }).toThrowError(

207 `Minified React error #${errorCode}; visit ` +

208 - `http://facebook.github.io/react/docs/error-decoder.html?invariant=${errorCode}&args[]=Component` +

208 + `http://facebook.github.io/react/docs/error-decoder.html?invariant=${

209 + errorCode

210 + }&args[]=Component` +

211 ' for the full message or use the non-minified dev environment' +

212 ' for full errors and additional helpful warnings.',

213 );

@@ -219,7 +221,9 @@ describe('ReactDOMProduction', () => {

221 ReactDOM.render(<input>children</input>, container),

222 ).toThrowError(

223 `Minified React error #${errorCode}; visit ` +

222 - `http://facebook.github.io/react/docs/error-decoder.html?invariant=${errorCode}&args[]=input&args[]=` +

224 + `http://facebook.github.io/react/docs/error-decoder.html?invariant=${

225 + errorCode

226 + }&args[]=input&args[]=` +

227 ' for the full message or use the non-minified dev environment' +

228 ' for full errors and additional helpful warnings.',

229 );

@@ -227,7 +231,9 @@ describe('ReactDOMProduction', () => {

231 ReactDOMServer.renderToString(<input>children</input>, container),

232 ).toThrowError(

233 `Minified React error #${errorCode}; visit ` +

230 - `http://facebook.github.io/react/docs/error-decoder.html?invariant=${errorCode}&args[]=input&args[]=` +

234 + `http://facebook.github.io/react/docs/error-decoder.html?invariant=${

235 + errorCode

236 + }&args[]=input&args[]=` +

237 ' for the full message or use the non-minified dev environment' +

238 ' for full errors and additional helpful warnings.',

239 );

packages/react-dom/src/__tests__/ReactDOMRoot-test.js

+27 -5

@@ -38,7 +38,11 @@ describe('ReactDOMRoot', () => {

38 it('supports hydration', async () => {

39 const markup = await new Promise(resolve =>

40 resolve(

41 - ReactDOMServer.renderToString(<div><span className="extra" /></div>),

41 + ReactDOMServer.renderToString(

42 + <div>

43 + <span className="extra" />

44 + </div>,

45 + ),

46 ),

47 );

48

@@ -48,14 +52,22 @@ describe('ReactDOMRoot', () => {

52 const container1 = document.createElement('div');

53 container1.innerHTML = markup;

54 const root1 = ReactDOM.createRoot(container1);

51 - root1.render(<div><span /></div>);

55 + root1.render(

56 + <div>

57 + <span />

58 + </div>,

59 + );

60 expect(console.error.calls.count()).toBe(0);

61

62 // Accepts `hydrate` option

63 const container2 = document.createElement('div');

64 container2.innerHTML = markup;

65 const root2 = ReactDOM.createRoot(container2, {hydrate: true});

58 - root2.render(<div><span /></div>);

66 + root2.render(

67 + <div>

68 + <span />

69 + </div>,

70 + );

71 expect(console.error.calls.count()).toBe(1);

72 expect(console.error.calls.argsFor(0)[0]).toMatch('Extra attributes');

73 });

@@ -64,9 +76,19 @@ describe('ReactDOMRoot', () => {

76 spyOn(console, 'error');

77 container.innerHTML = '<div>a</div><div>b</div>';

78 const root = ReactDOM.createRoot(container);

67 - root.render(<div><span>c</span><span>d</span></div>);

79 + root.render(

80 + <div>

81 + <span>c</span>

82 + <span>d</span>

83 + </div>,

84 + );

85 expect(container.textContent).toEqual('abcd');

69 - root.render(<div><span>d</span><span>c</span></div>);

86 + root.render(

87 + <div>

88 + <span>d</span>

89 + <span>c</span>

90 + </div>,

91 + );

92 expect(container.textContent).toEqual('abdc');

93 });

94 });

packages/react-dom/src/__tests__/ReactDOMSelect-test.js

+48 -16

@@ -95,7 +95,9 @@ describe('ReactDOMSelect', () => {

95

96 // Changing `defaultValue` should do nothing.

97 ReactDOM.render(

98 - <select multiple={true} defaultValue={['monkey']}>{options}</select>,

98 + <select multiple={true} defaultValue={['monkey']}>

99 + {options}

100 + </select>,

101 container,

102 );

103

@@ -121,7 +123,9 @@ describe('ReactDOMSelect', () => {

123

124 // Changing the `value` prop should change the selected option.

125 ReactDOM.render(

124 - <select value="gorilla" onChange={noop}>{options}</select>,

126 + <select value="gorilla" onChange={noop}>

127 + {options}

128 + </select>,

129 container,

130 );

131 expect(node.value).toEqual('gorilla');

@@ -160,7 +164,9 @@ describe('ReactDOMSelect', () => {

164

165 // Changing the `value` prop should change the selected option.

166 ReactDOM.render(

163 - <select value="gorilla" onChange={noop}>{options}</select>,

167 + <select value="gorilla" onChange={noop}>

168 + {options}

169 + </select>,

170 container,

171 );

172 expect(node.value).toEqual('gorilla');

@@ -408,7 +414,9 @@ describe('ReactDOMSelect', () => {

414 var node = ReactDOM.findDOMNode(stub);

415

416 ReactDOM.render(

411 - <select value="gorilla" onChange={noop}>{options}</select>,

417 + <select value="gorilla" onChange={noop}>

418 + {options}

419 + </select>,

420 container,

421 );

422

@@ -470,9 +478,15 @@ describe('ReactDOMSelect', () => {

478

479 var select = ReactDOM.render(

480 <select multiple={true} defaultValue={['giraffe']}>

473 - <option key="monkey" value="monkey">A monkey!</option>

474 - <option key="giraffe" value="giraffe">A giraffe!</option>

475 - <option key="gorilla" value="gorilla">A gorilla!</option>

481 + <option key="monkey" value="monkey">

482 + A monkey!

483 + </option>

484 + <option key="giraffe" value="giraffe">

485 + A giraffe!

486 + </option>

487 + <option key="gorilla" value="gorilla">

488 + A gorilla!

489 + </option>

490 </select>,

491 container,

492 );

@@ -484,8 +498,12 @@ describe('ReactDOMSelect', () => {

498

499 ReactDOM.render(

500 <select multiple={true} defaultValue={['giraffe']}>

487 - <option key="monkey" value="monkey">A monkey!</option>

488 - <option key="gorilla" value="gorilla">A gorilla!</option>

501 + <option key="monkey" value="monkey">

502 + A monkey!

503 + </option>

504 + <option key="gorilla" value="gorilla">

505 + A gorilla!

506 + </option>

507 </select>,

508 container,

509 );

@@ -495,9 +513,15 @@ describe('ReactDOMSelect', () => {

513

514 ReactDOM.render(

515 <select multiple={true} defaultValue={['giraffe']}>

498 - <option key="monkey" value="monkey">A monkey!</option>

499 - <option key="giraffe" value="giraffe">A giraffe!</option>

500 - <option key="gorilla" value="gorilla">A gorilla!</option>

516 + <option key="monkey" value="monkey">

517 + A monkey!

518 + </option>

519 + <option key="giraffe" value="giraffe">

520 + A giraffe!

521 + </option>

522 + <option key="gorilla" value="gorilla">

523 + A gorilla!

524 + </option>

525 </select>,

526 container,

527 );

@@ -511,7 +535,9 @@ describe('ReactDOMSelect', () => {

535 spyOn(console, 'error');

536

537 ReactTestUtils.renderIntoDocument(

514 - <select value={null}><option value="test" /></select>,

538 + <select value={null}>

539 + <option value="test" />

540 + </select>,

541 );

542 expectDev(console.error.calls.argsFor(0)[0]).toContain(

543 '`value` prop on `select` should not be null. ' +

@@ -520,7 +546,9 @@ describe('ReactDOMSelect', () => {

546 );

547

548 ReactTestUtils.renderIntoDocument(

523 - <select value={null}><option value="test" /></select>,

549 + <select value={null}>

550 + <option value="test" />

551 + </select>,

552 );

553 expectDev(console.error.calls.count()).toBe(1);

554 });

@@ -528,7 +556,9 @@ describe('ReactDOMSelect', () => {

556 it('should warn if value is null and multiple is true', () => {

557 spyOn(console, 'error');

558 ReactTestUtils.renderIntoDocument(

531 - <select value={null} multiple={true}><option value="test" /></select>,

559 + <select value={null} multiple={true}>

560 + <option value="test" />

561 + </select>,

562 );

563

564 expectDev(console.error.calls.count()).toBe(1);

@@ -540,7 +570,9 @@ describe('ReactDOMSelect', () => {

570 );

571

572 ReactTestUtils.renderIntoDocument(

543 - <select value={null} multiple={true}><option value="test" /></select>,

573 + <select value={null} multiple={true}>

574 + <option value="test" />

575 + </select>,

576 );

577 expectDev(console.error.calls.count()).toBe(1);

578 });

packages/react-dom/src/__tests__/ReactDOMServerIntegration-test.js

+312 -87

@@ -51,7 +51,9 @@ async function expectErrors(fn, count) {

51 console.error.calls.count() !== 0

52 ) {

53 console.log(

54 - `We expected ${count} warning(s), but saw ${console.error.calls.count()} warning(s).`,

54 + `We expected ${

55 + count

56 + } warning(s), but saw ${console.error.calls.count()} warning(s).`,

57 );

58 if (console.error.calls.count() > 0) {

59 console.log(`We saw these warnings:`);

@@ -230,7 +232,9 @@ function itClientRenders(desc, testFn) {

232 testFn(clientCleanRender));

233 it(`renders ${desc} with client render on top of good server markup`, () =>

234 testFn(clientRenderOnServerString));

233 - it(`renders ${desc} with client render on top of bad server markup`, async () => {

235 + it(`renders ${

236 + desc

237 + } with client render on top of bad server markup`, async () => {

238 try {

239 await testFn(clientRenderOnBadMarkup);

240 } catch (x) {

@@ -349,7 +353,11 @@ describe('ReactDOMServerIntegration', () => {

353 });

354

355 itRenders('a self-closing tag as a child', async render => {

352 - const e = await render(<div><br /></div>);

356 + const e = await render(

357 + <div>

358 + <br />

359 + </div>,

360 + );

361 expect(e.childNodes.length).toBe(1);

362 expect(e.firstChild.tagName).toBe('BR');

363 });

@@ -406,7 +414,11 @@ describe('ReactDOMServerIntegration', () => {

414 });

415

416 itRenders('a fragment with one child', async render => {

409 - let e = await render(<React.Fragment><div>text1</div></React.Fragment>);

417 + let e = await render(

418 + <React.Fragment>

419 + <div>text1</div>

420 + </React.Fragment>,

421 + );

422 let parent = e.parentNode;

423 expect(parent.childNodes[0].tagName).toBe('DIV');

424 });

@@ -416,7 +428,12 @@ describe('ReactDOMServerIntegration', () => {

428 return <p>header</p>;

429 };

430 let Footer = props => {

419 - return <React.Fragment><h2>footer</h2><h3>about</h3></React.Fragment>;

431 + return (

432 + <React.Fragment>

433 + <h2>footer</h2>

434 + <h3>about</h3>

435 + </React.Fragment>

436 + );

437 };

438 let e = await render(

439 <React.Fragment>

@@ -443,7 +460,11 @@ describe('ReactDOMServerIntegration', () => {

460 <span>text2</span>

461 <React.Fragment>

462 <React.Fragment>

446 - <React.Fragment>{null}<p /></React.Fragment>{false}

463 + <React.Fragment>

464 + {null}

465 + <p />

466 + </React.Fragment>

467 + {false}

468 </React.Fragment>

469 </React.Fragment>

470 </React.Fragment>,

@@ -1018,7 +1039,11 @@ describe('ReactDOMServerIntegration', () => {

1039 );

1040

1041 itRenders('SVG tags with dashes in them', async render => {

1021 - const e = await render(<svg><font-face accentHeight={10} /></svg>);

1042 + const e = await render(

1043 + <svg>

1044 + <font-face accentHeight={10} />

1045 + </svg>,

1046 + );

1047 expect(e.firstChild.hasAttribute('accentHeight')).toBe(false);

1048 expect(e.firstChild.getAttribute('accent-height')).toBe('10');

1049 });

@@ -1082,7 +1107,13 @@ describe('ReactDOMServerIntegration', () => {

1107 });

1108

1109 itRenders('a div with multiple empty text children', async render => {

1085 - const e = await render(<div>{''}{''}{''}</div>);

1110 + const e = await render(

1111 + <div>

1112 + {''}

1113 + {''}

1114 + {''}

1115 + </div>,

1116 + );

1117 if (render === serverRender || render === streamRender) {

1118 // For plain server markup result we should have no text nodes if

1119 // they're all empty.

@@ -1097,6 +1128,7 @@ describe('ReactDOMServerIntegration', () => {

1128 });

1129

1130 itRenders('a div with multiple whitespace children', async render => {

1131 + // prettier-ignore

1132 const e = await render(<div>{' '}{' '}{' '}</div>);

1133 if (

1134 render === serverRender ||

@@ -1118,7 +1150,11 @@ describe('ReactDOMServerIntegration', () => {

1150 });

1151

1152 itRenders('a div with text sibling to a node', async render => {

1121 - const e = await render(<div>Text<span>More Text</span></div>);

1153 + const e = await render(

1154 + <div>

1155 + Text<span>More Text</span>

1156 + </div>,

1157 + );

1158 let spanNode;

1159 expect(e.childNodes.length).toBe(2);

1160 spanNode = e.childNodes[1];

@@ -1168,7 +1204,12 @@ describe('ReactDOMServerIntegration', () => {

1204 });

1205

1206 itRenders('an element with two text children', async render => {

1171 - const e = await render(<div>{'foo'}{'bar'}</div>);

1207 + const e = await render(

1208 + <div>

1209 + {'foo'}

1210 + {'bar'}

1211 + </div>,

1212 + );

1213 if (

1214 render === serverRender ||

1215 render === clientRenderOnServerString ||

@@ -1189,7 +1230,13 @@ describe('ReactDOMServerIntegration', () => {

1230 'a component returning text node between two text nodes',

1231 async render => {

1232 const B = () => 'b';

1192 - const e = await render(<div>{'a'}<B />{'c'}</div>);

1233 + const e = await render(

1234 + <div>

1235 + {'a'}

1236 + <B />

1237 + {'c'}

1238 + </div>,

1239 + );

1240 if (

1241 render === serverRender ||

1242 render === clientRenderOnServerString ||

@@ -1272,7 +1319,12 @@ describe('ReactDOMServerIntegration', () => {

1319 });

1320

1321 itRenders('an element with number and text children', async render => {

1275 - const e = await render(<div>{'foo'}{40}</div>);

1322 + const e = await render(

1323 + <div>

1324 + {'foo'}

1325 + {40}

1326 + </div>,

1327 + );

1328 // with Fiber, there are just two text nodes.

1329 if (

1330 render === serverRender ||

@@ -1309,7 +1361,11 @@ describe('ReactDOMServerIntegration', () => {

1361

1362 itRenders('a null component children as empty', async render => {

1363 const NullComponent = () => null;

1312 - const e = await render(<div><NullComponent /></div>);

1364 + const e = await render(

1365 + <div>

1366 + <NullComponent />

1367 + </div>,

1368 + );

1369 expect(e.childNodes.length).toBe(0);

1370 });

1371

@@ -1326,13 +1382,26 @@ describe('ReactDOMServerIntegration', () => {

1382 });

1383

1384 itRenders('null and false children together as blank', async render => {

1329 - const e = await render(<div>{false}{null}foo{null}{false}</div>);

1385 + const e = await render(

1386 + <div>

1387 + {false}

1388 + {null}foo{null}

1389 + {false}

1390 + </div>,

1391 + );

1392 expect(e.childNodes.length).toBe(1);

1393 expectTextNode(e.childNodes[0], 'foo');

1394 });

1395

1396 itRenders('only null and false children as blank', async render => {

1335 - const e = await render(<div>{false}{null}{null}{false}</div>);

1397 + const e = await render(

1398 + <div>

1399 + {false}

1400 + {null}

1401 + {null}

1402 + {false}

1403 + </div>,

1404 + );

1405 expect(e.childNodes.length).toBe(0);

1406 });

1407 });

@@ -1357,7 +1426,9 @@ describe('ReactDOMServerIntegration', () => {

1426 'svg child element with a namespace attribute',

1427 async render => {

1428 let e = await render(

1360 - <svg><image xlinkHref="http://i.imgur.com/w7GCRPb.png" /></svg>,

1429 + <svg>

1430 + <image xlinkHref="http://i.imgur.com/w7GCRPb.png" />

1431 + </svg>,

1432 );

1433 e = e.firstChild;

1434 expect(e.childNodes.length).toBe(0);

@@ -1371,7 +1442,9 @@ describe('ReactDOMServerIntegration', () => {

1442

1443 itRenders('svg child element with a badly cased alias', async render => {

1444 let e = await render(

1374 - <svg><image xlinkhref="http://i.imgur.com/w7GCRPb.png" /></svg>,

1445 + <svg>

1446 + <image xlinkhref="http://i.imgur.com/w7GCRPb.png" />

1447 + </svg>,

1448 1,

1449 );

1450 e = e.firstChild;

@@ -1397,7 +1470,13 @@ describe('ReactDOMServerIntegration', () => {

1470 );

1471

1472 itRenders('svg element with a mixed case name', async render => {

1400 - let e = await render(<svg><filter><feMorphology /></filter></svg>);

1473 + let e = await render(

1474 + <svg>

1475 + <filter>

1476 + <feMorphology />

1477 + </filter>

1478 + </svg>,

1479 + );

1480 e = e.firstChild.firstChild;

1481 expect(e.childNodes.length).toBe(0);

1482 expect(e.tagName).toBe('feMorphology');

@@ -1516,10 +1595,12 @@ describe('ReactDOMServerIntegration', () => {

1595 const e = await render(

1596 <Component>

1597 <Component>

1519 - <Component /><Component />

1598 + <Component />

1599 + <Component />

1600 </Component>

1601 <Component>

1522 - <Component /><Component />

1602 + <Component />

1603 + <Component />

1604 </Component>

1605 </Component>,

1606 );

@@ -1538,7 +1619,11 @@ describe('ReactDOMServerIntegration', () => {

1619 });

1620

1621 itRenders('a div with a child', async render => {

1541 - const e = await render(<div id="parent"><div id="child" /></div>);

1622 + const e = await render(

1623 + <div id="parent">

1624 + <div id="child" />

1625 + </div>,

1626 + );

1627 expect(e.id).toBe('parent');

1628 expect(e.childNodes.length).toBe(1);

1629 expect(e.childNodes[0].id).toBe('child');

@@ -1547,7 +1632,10 @@ describe('ReactDOMServerIntegration', () => {

1632

1633 itRenders('a div with multiple children', async render => {

1634 const e = await render(

1550 - <div id="parent"><div id="child1" /><div id="child2" /></div>,

1635 + <div id="parent">

1636 + <div id="child1" />

1637 + <div id="child2" />

1638 + </div>,

1639 );

1640 expect(e.id).toBe('parent');

1641 expect(e.childNodes.length).toBe(2);

@@ -1561,7 +1649,9 @@ describe('ReactDOMServerIntegration', () => {

1649 'a div with multiple children separated by whitespace',

1650 async render => {

1651 const e = await render(

1564 - <div id="parent"><div id="child1" /> <div id="child2" /></div>,

1652 + <div id="parent">

1653 + <div id="child1" /> <div id="child2" />

1654 + </div>,

1655 );

1656 expect(e.id).toBe('parent');

1657 let child1, child2, textNode;

@@ -1631,7 +1721,10 @@ describe('ReactDOMServerIntegration', () => {

1721

1722 itRenders('>,<, and & as multiple children', async render => {

1723 const e = await render(

1634 - <div>{'<span>Text1"</span>'}{'<span>Text2"</span>'}</div>,

1724 + <div>

1725 + {'<span>Text1"</span>'}

1726 + {'<span>Text2"</span>'}

1727 + </div>,

1728 );

1729 if (

1730 render === serverRender ||

@@ -1681,7 +1774,12 @@ describe('ReactDOMServerIntegration', () => {

1774 itRenders(

1775 'an element with two text children with special characters',

1776 async render => {

1684 - const e = await render(<div>{'foo\rbar'}{'\r\nbaz\nqux\u0000'}</div>);

1777 + const e = await render(

1778 + <div>

1779 + {'foo\rbar'}

1780 + {'\r\nbaz\nqux\u0000'}

1781 + </div>,

1782 + );

1783 if (render === serverRender || render === streamRender) {

1784 // We have three nodes because there is a comment between them.

1785 expect(e.childNodes.length).toBe(3);

@@ -1975,9 +2073,15 @@ describe('ReactDOMServerIntegration', () => {

2073 var options;

2074 beforeEach(function() {

2075 options = [

1978 - <option key={1} value="foo" id="foo">Foo</option>,

1979 - <option key={2} value="bar" id="bar">Bar</option>,

1980 - <option key={3} value="baz" id="baz">Baz</option>,

2076 + <option key={1} value="foo" id="foo">

2077 + Foo

2078 + </option>,

2079 + <option key={2} value="bar" id="bar">

2080 + Bar

2081 + </option>,

2082 + <option key={3} value="baz" id="baz">

2083 + Baz

2084 + </option>,

2085 ];

2086 });

2087

@@ -2002,14 +2106,18 @@ describe('ReactDOMServerIntegration', () => {

2106

2107 itRenders('a select with a value and an onChange', async render => {

2108 const e = await render(

2005 - <select value="bar" onChange={() => {}}>{options}</select>,

2109 + <select value="bar" onChange={() => {}}>

2110 + {options}

2111 + </select>,

2112 );

2113 expectSelectValue(e, 'bar');

2114 });

2115

2116 itRenders('a select with a value and readOnly', async render => {

2117 const e = await render(

2012 - <select value="bar" readOnly={true}>{options}</select>,

2118 + <select value="bar" readOnly={true}>

2119 + {options}

2120 + </select>,

2121 );

2122 expectSelectValue(e, 'bar');

2123 });

@@ -2160,8 +2268,12 @@ describe('ReactDOMServerIntegration', () => {

2268 <select

2269 value={this.state.value}

2270 onChange={this.handleChange.bind(this)}>

2163 - <option key="1" value="Hello">Hello</option>

2164 - <option key="2" value="Goodbye">Goodbye</option>

2271 + <option key="1" value="Hello">

2272 + Hello

2273 + </option>

2274 + <option key="2" value="Goodbye">

2275 + Goodbye

2276 + </option>

2277 </select>

2278 );

2279 }

@@ -2304,32 +2416,30 @@ describe('ReactDOMServerIntegration', () => {

2416

2417 // skipping this test because React 15 does the wrong thing. it blows

2418 // away the user's typing in the textarea.

2307 - xit(

2308 - 'should not blow away user-entered text on successful reconnect to an uncontrolled textarea',

2309 - () =>

2310 - testUserInteractionBeforeClientRender(

2311 - <textarea defaultValue="Hello" />,

2312 - ),

2313 - );

2419 + xit('should not blow away user-entered text on successful reconnect to an uncontrolled textarea', () =>

2420 + testUserInteractionBeforeClientRender(

2421 + <textarea defaultValue="Hello" />,

2422 + ));

2423

2424 // skipping this test because React 15 does the wrong thing. it blows

2425 // away the user's typing in the textarea.

2317 - xit(

2318 - 'should not blow away user-entered text on successful reconnect to a controlled textarea',

2319 - async () => {

2320 - let changeCount = 0;

2321 - await testUserInteractionBeforeClientRender(

2322 - <ControlledTextArea onChange={() => changeCount++} />,

2323 - );

2324 - expect(changeCount).toBe(0);

2325 - },

2326 - );

2426 + xit('should not blow away user-entered text on successful reconnect to a controlled textarea', async () => {

2427 + let changeCount = 0;

2428 + await testUserInteractionBeforeClientRender(

2429 + <ControlledTextArea onChange={() => changeCount++} />,

2430 + );

2431 + expect(changeCount).toBe(0);

2432 + });

2433

2434 it('should not blow away user-selected value on successful reconnect to an uncontrolled select', () =>

2435 testUserInteractionBeforeClientRender(

2436 <select defaultValue="Hello">

2331 - <option key="1" value="Hello">Hello</option>

2332 - <option key="2" value="Goodbye">Goodbye</option>

2437 + <option key="1" value="Hello">

2438 + Hello

2439 + </option>

2440 + <option key="2" value="Goodbye">

2441 + Goodbye

2442 + </option>

2443 </select>,

2444 ));

2445

@@ -2370,7 +2480,9 @@ describe('ReactDOMServerIntegration', () => {

2480 ClassChildWithContext.contextTypes = {text: PropTypes.string};

2481

2482 const e = await render(

2373 - <PurpleContext><ClassChildWithContext /></PurpleContext>,

2483 + <PurpleContext>

2484 + <ClassChildWithContext />

2485 + </PurpleContext>,

2486 );

2487 expect(e.textContent).toBe('purple');

2488 });

@@ -2382,7 +2494,9 @@ describe('ReactDOMServerIntegration', () => {

2494 StatelessChildWithContext.contextTypes = {text: PropTypes.string};

2495

2496 const e = await render(

2385 - <PurpleContext><StatelessChildWithContext /></PurpleContext>,

2497 + <PurpleContext>

2498 + <StatelessChildWithContext />

2499 + </PurpleContext>,

2500 );

2501 expect(e.textContent).toBe('purple');

2502 });

@@ -2396,7 +2510,9 @@ describe('ReactDOMServerIntegration', () => {

2510 }

2511

2512 const e = await render(

2399 - <PurpleContext><ClassChildWithoutContext /></PurpleContext>,

2513 + <PurpleContext>

2514 + <ClassChildWithoutContext />

2515 + </PurpleContext>,

2516 );

2517 expect(e.textContent).toBe('');

2518 });

@@ -2408,7 +2524,9 @@ describe('ReactDOMServerIntegration', () => {

2524 }

2525

2526 const e = await render(

2411 - <PurpleContext><StatelessChildWithoutContext /></PurpleContext>,

2527 + <PurpleContext>

2528 + <StatelessChildWithoutContext />

2529 + </PurpleContext>,

2530 );

2531 expect(e.textContent).toBe('');

2532 });

@@ -2423,7 +2541,9 @@ describe('ReactDOMServerIntegration', () => {

2541 ClassChildWithWrongContext.contextTypes = {foo: PropTypes.string};

2542

2543 const e = await render(

2426 - <PurpleContext><ClassChildWithWrongContext /></PurpleContext>,

2544 + <PurpleContext>

2545 + <ClassChildWithWrongContext />

2546 + </PurpleContext>,

2547 );

2548 expect(e.textContent).toBe('');

2549 });

@@ -2438,7 +2558,9 @@ describe('ReactDOMServerIntegration', () => {

2558 };

2559

2560 const e = await render(

2441 - <PurpleContext><StatelessChildWithWrongContext /></PurpleContext>,

2561 + <PurpleContext>

2562 + <StatelessChildWithWrongContext />

2563 + </PurpleContext>,

2564 );

2565 expect(e.textContent).toBe('');

2566 });

@@ -2451,7 +2573,11 @@ describe('ReactDOMServerIntegration', () => {

2573

2574 const Child = props => <Grandchild />;

2575

2454 - const e = await render(<PurpleContext><Child /></PurpleContext>);

2576 + const e = await render(

2577 + <PurpleContext>

2578 + <Child />

2579 + </PurpleContext>,

2580 + );

2581 expect(e.textContent).toBe('purple');

2582 });

2583

@@ -2462,7 +2588,11 @@ describe('ReactDOMServerIntegration', () => {

2588 Grandchild.contextTypes = {text: PropTypes.string};

2589

2590 const e = await render(

2465 - <PurpleContext><RedContext><Grandchild /></RedContext></PurpleContext>,

2591 + <PurpleContext>

2592 + <RedContext>

2593 + <Grandchild />

2594 + </RedContext>

2595 + </PurpleContext>,

2596 );

2597 expect(e.textContent).toBe('red');

2598 });

@@ -2707,8 +2837,12 @@ describe('ReactDOMServerIntegration', () => {

2837

2838 it('can explicitly ignore errors reconnecting different element types of children', () =>

2839 expectMarkupMatch(

2710 - <div><div /></div>,

2711 - <div suppressHydrationWarning={true}><span /></div>,

2840 + <div>

2841 + <div />

2842 + </div>,

2843 + <div suppressHydrationWarning={true}>

2844 + <span />

2845 + </div>,

2846 ));

2847

2848 it('can explicitly ignore errors reconnecting missing attributes', () =>

@@ -2731,8 +2865,12 @@ describe('ReactDOMServerIntegration', () => {

2865

2866 it('can not deeply ignore errors reconnecting different attribute values', () =>

2867 expectMarkupMismatch(

2734 - <div><div id="foo" /></div>,

2735 - <div suppressHydrationWarning={true}><div id="bar" /></div>,

2868 + <div>

2869 + <div id="foo" />

2870 + </div>,

2871 + <div suppressHydrationWarning={true}>

2872 + <div id="bar" />

2873 + </div>,

2874 ));

2875 });

2876

@@ -2801,8 +2939,14 @@ describe('ReactDOMServerIntegration', () => {

2939

2940 it('should error reconnecting different text in two code blocks', () =>

2941 expectMarkupMismatch(

2804 - <div>{'Text1'}{'Text2'}</div>,

2805 - <div>{'Text1'}{'Text3'}</div>,

2942 + <div>

2943 + {'Text1'}

2944 + {'Text2'}

2945 + </div>,

2946 + <div>

2947 + {'Text1'}

2948 + {'Text3'}

2949 + </div>,

2950 ));

2951

2952 it('can explicitly ignore reconnecting different text', () =>

@@ -2813,33 +2957,74 @@ describe('ReactDOMServerIntegration', () => {

2957

2958 it('can explicitly ignore reconnecting different text in two code blocks', () =>

2959 expectMarkupMatch(

2816 - <div suppressHydrationWarning={true}>{'Text1'}{'Text2'}</div>,

2817 - <div suppressHydrationWarning={true}>{'Text1'}{'Text3'}</div>,

2960 + <div suppressHydrationWarning={true}>

2961 + {'Text1'}

2962 + {'Text2'}

2963 + </div>,

2964 + <div suppressHydrationWarning={true}>

2965 + {'Text1'}

2966 + {'Text3'}

2967 + </div>,

2968 ));

2969 });

2970

2971 describe('element trees and children', function() {

2972 it('should error reconnecting missing children', () =>

2823 - expectMarkupMismatch(<div><div /></div>, <div />));

2973 + expectMarkupMismatch(

2974 + <div>

2975 + <div />

2976 + </div>,

2977 + <div />,

2978 + ));

2979

2980 it('should error reconnecting added children', () =>

2826 - expectMarkupMismatch(<div />, <div><div /></div>));

2981 + expectMarkupMismatch(

2982 + <div />,

2983 + <div>

2984 + <div />

2985 + </div>,

2986 + ));

2987

2988 it('should error reconnecting more children', () =>

2829 - expectMarkupMismatch(<div><div /></div>, <div><div /><div /></div>));

2989 + expectMarkupMismatch(

2990 + <div>

2991 + <div />

2992 + </div>,

2993 + <div>

2994 + <div />

2995 + <div />

2996 + </div>,

2997 + ));

2998

2999 it('should error reconnecting fewer children', () =>

2832 - expectMarkupMismatch(<div><div /><div /></div>, <div><div /></div>));

3000 + expectMarkupMismatch(

3001 + <div>

3002 + <div />

3003 + <div />

3004 + </div>,

3005 + <div>

3006 + <div />

3007 + </div>,

3008 + ));

3009

3010 it('should error reconnecting reordered children', () =>

3011 expectMarkupMismatch(

2836 - <div><div /><span /></div>,

2837 - <div><span /><div /></div>,

3012 + <div>

3013 + <div />

3014 + <span />

3015 + </div>,

3016 + <div>

3017 + <span />

3018 + <div />

3019 + </div>,

3020 ));

3021

3022 it('should error reconnecting a div with children separated by whitespace on the client', () =>

3023 expectMarkupMismatch(

2842 - <div id="parent"><div id="child1" /><div id="child2" /></div>,

3024 + <div id="parent">

3025 + <div id="child1" />

3026 + <div id="child2" />

3027 + </div>,

3028 // prettier-ignore

3029 <div id="parent"><div id="child1" /> <div id="child2" /></div>, // eslint-disable-line no-multi-spaces

3030 ));

@@ -2848,47 +3033,87 @@ describe('ReactDOMServerIntegration', () => {

3033 expectMarkupMismatch(

3034 // prettier-ignore

3035 <div id="parent"><div id="child1" /> <div id="child2" /></div>, // eslint-disable-line no-multi-spaces

2851 - <div id="parent"><div id="child1" /><div id="child2" /></div>,

3036 + <div id="parent">

3037 + <div id="child1" />

3038 + <div id="child2" />

3039 + </div>,

3040 ));

3041

3042 it('should error reconnecting a div with children separated by different whitespace', () =>

3043 expectMarkupMismatch(

2856 - <div id="parent"><div id="child1" /> <div id="child2" /></div>,

3044 + <div id="parent">

3045 + <div id="child1" /> <div id="child2" />

3046 + </div>,

3047 // prettier-ignore

3048 <div id="parent"><div id="child1" /> <div id="child2" /></div>, // eslint-disable-line no-multi-spaces

3049 ));

3050

3051 it('can distinguish an empty component from a dom node', () =>

3052 expectMarkupMismatch(

2863 - <div><span /></div>,

2864 - <div><EmptyComponent /></div>,

3053 + <div>

3054 + <span />

3055 + </div>,

3056 + <div>

3057 + <EmptyComponent />

3058 + </div>,

3059 ));

3060

3061 it('can distinguish an empty component from an empty text component', () =>

2868 - expectMarkupMatch(<div><EmptyComponent /></div>, <div>{''}</div>));

3062 + expectMarkupMatch(

3063 + <div>

3064 + <EmptyComponent />

3065 + </div>,

3066 + <div>{''}</div>,

3067 + ));

3068

3069 it('can explicitly ignore reconnecting more children', () =>

3070 expectMarkupMatch(

2872 - <div><div /></div>,

2873 - <div suppressHydrationWarning={true}><div /><div /></div>,

3071 + <div>

3072 + <div />

3073 + </div>,

3074 + <div suppressHydrationWarning={true}>

3075 + <div />

3076 + <div />

3077 + </div>,

3078 ));

3079

3080 it('can explicitly ignore reconnecting fewer children', () =>

3081 expectMarkupMatch(

2878 - <div><div /><div /></div>,

2879 - <div suppressHydrationWarning={true}><div /></div>,

3082 + <div>

3083 + <div />

3084 + <div />

3085 + </div>,

3086 + <div suppressHydrationWarning={true}>

3087 + <div />

3088 + </div>,

3089 ));

3090

3091 it('can explicitly ignore reconnecting reordered children', () =>

3092 expectMarkupMatch(

2884 - <div suppressHydrationWarning={true}><div /><span /></div>,

2885 - <div suppressHydrationWarning={true}><span /><div /></div>,

3093 + <div suppressHydrationWarning={true}>

3094 + <div />

3095 + <span />

3096 + </div>,

3097 + <div suppressHydrationWarning={true}>

3098 + <span />

3099 + <div />

3100 + </div>,

3101 ));

3102

3103 it('can not deeply ignore reconnecting reordered children', () =>

3104 expectMarkupMismatch(

2890 - <div suppressHydrationWarning={true}><div><div /><span /></div></div>,

2891 - <div suppressHydrationWarning={true}><div><span /><div /></div></div>,

3105 + <div suppressHydrationWarning={true}>

3106 + <div>

3107 + <div />

3108 + <span />

3109 + </div>

3110 + </div>,

3111 + <div suppressHydrationWarning={true}>

3112 + <div>

3113 + <span />

3114 + <div />

3115 + </div>

3116 + </div>,

3117 ));

3118 });

3119

packages/react-dom/src/__tests__/ReactDOMTextComponent-test.js

+170 -72

@@ -31,7 +31,14 @@ describe('ReactDOMTextComponent', () => {

31

32 it('updates a mounted text component in place', () => {

33 var el = document.createElement('div');

34 - var inst = ReactDOM.render(<div><span />{'foo'}{'bar'}</div>, el);

34 + var inst = ReactDOM.render(

35 + <div>

36 + <span />

37 + {'foo'}

38 + {'bar'}

39 + </div>,

40 + el,

41 + );

42 let nodes = filterOutComments(ReactDOM.findDOMNode(inst).childNodes);

43

44 let foo = nodes[1];

@@ -39,7 +46,14 @@ describe('ReactDOMTextComponent', () => {

46 expect(foo.data).toBe('foo');

47 expect(bar.data).toBe('bar');

48

42 - inst = ReactDOM.render(<div><span />{'baz'}{'qux'}</div>, el);

49 + inst = ReactDOM.render(

50 + <div>

51 + <span />

52 + {'baz'}

53 + {'qux'}

54 + </div>,

55 + el,

56 + );

57 // After the update, the text nodes should have stayed in place (as opposed

58 // to getting unmounted and remounted)

59 nodes = filterOutComments(ReactDOM.findDOMNode(inst).childNodes);

@@ -51,19 +65,40 @@ describe('ReactDOMTextComponent', () => {

65

66 it('can be toggled in and out of the markup', () => {

67 var el = document.createElement('div');

54 - var inst = ReactDOM.render(<div>{'foo'}<div />{'bar'}</div>, el);

68 + var inst = ReactDOM.render(

69 + <div>

70 + {'foo'}

71 + <div />

72 + {'bar'}

73 + </div>,

74 + el,

75 + );

76

77 var container = ReactDOM.findDOMNode(inst);

78 let childNodes = filterOutComments(container.childNodes);

79 let childDiv = childNodes[1];

80

60 - inst = ReactDOM.render(<div>{null}<div />{null}</div>, el);

81 + inst = ReactDOM.render(

82 + <div>

83 + {null}

84 + <div />

85 + {null}

86 + </div>,

87 + el,

88 + );

89 container = ReactDOM.findDOMNode(inst);

90 childNodes = filterOutComments(container.childNodes);

91 expect(childNodes.length).toBe(1);

92 expect(childNodes[0]).toBe(childDiv);

93

66 - inst = ReactDOM.render(<div>{'foo'}<div />{'bar'}</div>, el);

94 + inst = ReactDOM.render(

95 + <div>

96 + {'foo'}

97 + <div />

98 + {'bar'}

99 + </div>,

100 + el,

101 + );

102 container = ReactDOM.findDOMNode(inst);

103 childNodes = filterOutComments(container.childNodes);

104 expect(childNodes.length).toBe(3);

@@ -77,42 +112,71 @@ describe('ReactDOMTextComponent', () => {

112 * See #9836 tracking whether we'll need to fix this or if it's unnecessary.

113 */

114

80 - xit(

81 - 'can reconcile text merged by Node.normalize() alongside other elements',

82 - () => {

83 - var el = document.createElement('div');

84 - var inst = ReactDOM.render(

85 - <div>{'foo'}{'bar'}{'baz'}<span />{'qux'}</div>,

86 - el,

87 - );

88 -

89 - var container = ReactDOM.findDOMNode(inst);

90 - container.normalize();

91 -

92 - inst = ReactDOM.render(

93 - <div>{'bar'}{'baz'}{'qux'}<span />{'foo'}</div>,

94 - el,

95 - );

96 - container = ReactDOM.findDOMNode(inst);

97 - expect(container.textContent).toBe('barbazquxfoo');

98 - },

99 - );

115 + xit('can reconcile text merged by Node.normalize() alongside other elements', () => {

116 + var el = document.createElement('div');

117 + var inst = ReactDOM.render(

118 + <div>

119 + {'foo'}

120 + {'bar'}

121 + {'baz'}

122 + <span />

123 + {'qux'}

124 + </div>,

125 + el,

126 + );

127 +

128 + var container = ReactDOM.findDOMNode(inst);

129 + container.normalize();

130 +

131 + inst = ReactDOM.render(

132 + <div>

133 + {'bar'}

134 + {'baz'}

135 + {'qux'}

136 + <span />

137 + {'foo'}

138 + </div>,

139 + el,

140 + );

141 + container = ReactDOM.findDOMNode(inst);

142 + expect(container.textContent).toBe('barbazquxfoo');

143 + });

144

145 xit('can reconcile text merged by Node.normalize()', () => {

146 var el = document.createElement('div');

103 - var inst = ReactDOM.render(<div>{'foo'}{'bar'}{'baz'}</div>, el);

147 + var inst = ReactDOM.render(

148 + <div>

149 + {'foo'}

150 + {'bar'}

151 + {'baz'}

152 + </div>,

153 + el,

154 + );

155

156 var container = ReactDOM.findDOMNode(inst);

157 container.normalize();

158

108 - inst = ReactDOM.render(<div>{'bar'}{'baz'}{'qux'}</div>, el);

159 + inst = ReactDOM.render(

160 + <div>

161 + {'bar'}

162 + {'baz'}

163 + {'qux'}

164 + </div>,

165 + el,

166 + );

167 container = ReactDOM.findDOMNode(inst);

168 expect(container.textContent).toBe('barbazqux');

169 });

170

171 it('can reconcile text from pre-rendered markup', () => {

172 var el = document.createElement('div');

115 - var reactEl = <div>{'foo'}{'bar'}{'baz'}</div>;

173 + var reactEl = (

174 + <div>

175 + {'foo'}

176 + {'bar'}

177 + {'baz'}

178 + </div>

179 + );

180 el.innerHTML = ReactDOMServer.renderToString(reactEl);

181

182 ReactDOM.hydrate(reactEl, el);

@@ -120,7 +184,13 @@ describe('ReactDOMTextComponent', () => {

184

185 ReactDOM.unmountComponentAtNode(el);

186

123 - reactEl = <div>{''}{''}{''}</div>;

187 + reactEl = (

188 + <div>

189 + {''}

190 + {''}

191 + {''}

192 + </div>

193 + );

194 el.innerHTML = ReactDOMServer.renderToString(reactEl);

195

196 ReactDOM.hydrate(reactEl, el);

@@ -129,7 +199,13 @@ describe('ReactDOMTextComponent', () => {

199

200 xit('can reconcile text arbitrarily split into multiple nodes', () => {

201 var el = document.createElement('div');

132 - var inst = ReactDOM.render(<div><span />{'foobarbaz'}</div>, el);

202 + var inst = ReactDOM.render(

203 + <div>

204 + <span />

205 + {'foobarbaz'}

206 + </div>,

207 + el,

208 + );

209

210 var container = ReactDOM.findDOMNode(inst);

211 let childNodes = filterOutComments(ReactDOM.findDOMNode(inst).childNodes);

@@ -144,55 +220,77 @@ describe('ReactDOMTextComponent', () => {

220 childNodes[1].nextSibling,

221 );

222

147 - inst = ReactDOM.render(<div><span />{'barbazqux'}</div>, el);

223 + inst = ReactDOM.render(

224 + <div>

225 + <span />

226 + {'barbazqux'}

227 + </div>,

228 + el,

229 + );

230 container = ReactDOM.findDOMNode(inst);

231 expect(container.textContent).toBe('barbazqux');

232 });

233

152 - xit(

153 - 'can reconcile text arbitrarily split into multiple nodes on some substitutions only',

154 - () => {

155 - var el = document.createElement('div');

156 - var inst = ReactDOM.render(

157 - <div>

158 - <span />{'bar'}<span />{'foobarbaz'}{'foo'}{'barfoo'}<span />

159 - </div>,

160 - el,

161 - );

162 -

163 - var container = ReactDOM.findDOMNode(inst);

164 - let childNodes = filterOutComments(ReactDOM.findDOMNode(inst).childNodes);

165 - let textNode = childNodes[3];

166 - textNode.textContent = 'foo';

167 - container.insertBefore(

168 - document.createTextNode('bar'),

169 - childNodes[3].nextSibling,

170 - );

171 - container.insertBefore(

172 - document.createTextNode('baz'),

173 - childNodes[3].nextSibling,

174 - );

175 - let secondTextNode = childNodes[5];

176 - secondTextNode.textContent = 'bar';

177 - container.insertBefore(

178 - document.createTextNode('foo'),

179 - childNodes[5].nextSibling,

180 - );

181 -

182 - inst = ReactDOM.render(

183 - <div>

184 - <span />{'baz'}<span />{'barbazqux'}{'bar'}{'bazbar'}<span />

185 - </div>,

186 - el,

187 - );

188 - container = ReactDOM.findDOMNode(inst);

189 - expect(container.textContent).toBe('bazbarbazquxbarbazbar');

190 - },

191 - );

234 + xit('can reconcile text arbitrarily split into multiple nodes on some substitutions only', () => {

235 + var el = document.createElement('div');

236 + var inst = ReactDOM.render(

237 + <div>

238 + <span />

239 + {'bar'}

240 + <span />

241 + {'foobarbaz'}

242 + {'foo'}

243 + {'barfoo'}

244 + <span />

245 + </div>,

246 + el,

247 + );

248 +

249 + var container = ReactDOM.findDOMNode(inst);

250 + let childNodes = filterOutComments(ReactDOM.findDOMNode(inst).childNodes);

251 + let textNode = childNodes[3];

252 + textNode.textContent = 'foo';

253 + container.insertBefore(

254 + document.createTextNode('bar'),

255 + childNodes[3].nextSibling,

256 + );

257 + container.insertBefore(

258 + document.createTextNode('baz'),

259 + childNodes[3].nextSibling,

260 + );

261 + let secondTextNode = childNodes[5];

262 + secondTextNode.textContent = 'bar';

263 + container.insertBefore(

264 + document.createTextNode('foo'),

265 + childNodes[5].nextSibling,

266 + );

267 +

268 + inst = ReactDOM.render(

269 + <div>

270 + <span />

271 + {'baz'}

272 + <span />

273 + {'barbazqux'}

274 + {'bar'}

275 + {'bazbar'}

276 + <span />

277 + </div>,

278 + el,

279 + );

280 + container = ReactDOM.findDOMNode(inst);

281 + expect(container.textContent).toBe('bazbarbazquxbarbazbar');

282 + });

283

284 xit('can unmount normalized text nodes', () => {

285 var el = document.createElement('div');

195 - ReactDOM.render(<div>{''}{'foo'}{'bar'}</div>, el);

286 + ReactDOM.render(

287 + <div>

288 + {''}

289 + {'foo'}

290 + {'bar'}

291 + </div>,

292 + el,

293 + );

294 el.normalize();

295 ReactDOM.render(<div />, el);

296 expect(el.innerHTML).toBe('<div></div>');

packages/react-dom/src/__tests__/ReactDOMTextarea-test.js

+9 -2

@@ -329,7 +329,10 @@ describe('ReactDOMTextarea', () => {

329

330 expect(function() {

331 ReactTestUtils.renderIntoDocument(

332 - <textarea>{'hello'}{'there'}</textarea>,

332 + <textarea>

333 + {'hello'}

334 + {'there'}

335 + </textarea>,

336 );

337 }).toThrow();

338

@@ -337,7 +340,11 @@ describe('ReactDOMTextarea', () => {

340

341 var node;

342 expect(function() {

340 - node = renderTextarea(<textarea><strong /></textarea>);

343 + node = renderTextarea(

344 + <textarea>

345 + <strong />

346 + </textarea>,

347 + );

348 }).not.toThrow();

349

350 expect(node.value).toBe('[object Object]');

packages/react-dom/src/__tests__/ReactErrorBoundaries-test.js

+4 -12

@@ -594,9 +594,7 @@ describe('ReactErrorBoundaries', () => {

594 ReactDOM.render(<span>After 1</span>, container1);

595 ReactDOM.render(<span>After 2</span>, container2);

596 ReactDOM.render(

597 - <ErrorBoundary forceRetry={true}>

598 - After 3

599 - </ErrorBoundary>,

597 + <ErrorBoundary forceRetry={true}>After 3</ErrorBoundary>,

598 container3,

599 );

600 expect(container1.firstChild.textContent).toBe('After 1');

@@ -1621,18 +1619,14 @@ describe('ReactErrorBoundaries', () => {

1619 var fail = false;

1620 var container = document.createElement('div');

1621 ReactDOM.render(

1624 - <ErrorBoundary>

1625 - {getAMixOfNormalAndBrokenRenderElements()}

1626 - </ErrorBoundary>,

1622 + <ErrorBoundary>{getAMixOfNormalAndBrokenRenderElements()}</ErrorBoundary>,

1623 container,

1624 );

1625 expect(container.textContent).not.toContain('Caught an error');

1626

1627 fail = true;

1628 ReactDOM.render(

1633 - <ErrorBoundary>

1634 - {getAMixOfNormalAndBrokenRenderElements()}

1635 - </ErrorBoundary>,

1629 + <ErrorBoundary>{getAMixOfNormalAndBrokenRenderElements()}</ErrorBoundary>,

1630 container,

1631 );

1632 expect(container.textContent).toBe('Caught an error: Hello.');

@@ -1784,9 +1778,7 @@ describe('ReactErrorBoundaries', () => {

1778 <ErrorBoundary>

1779 <BrokenComponentDidMountErrorBoundary

1780 renderError={error => (

1787 - <div>

1788 - We should never catch our own error: {error.message}.

1789 - </div>

1781 + <div>We should never catch our own error: {error.message}.</div>

1782 )}

1783 />

1784 </ErrorBoundary>,

packages/react-dom/src/__tests__/ReactIdentity-test.js

+27 -6

@@ -50,11 +50,15 @@ describe('ReactIdentity', () => {

50 var node1;

51 var node2;

52 ReactDOM.render(

53 - <Wrapper key="wrap1"><span ref={c => (node1 = c)} /></Wrapper>,

53 + <Wrapper key="wrap1">

54 + <span ref={c => (node1 = c)} />

55 + </Wrapper>,

56 container,

57 );

58 ReactDOM.render(

57 - <Wrapper key="wrap2"><span ref={c => (node2 = c)} /></Wrapper>,

59 + <Wrapper key="wrap2">

60 + <span ref={c => (node2 = c)} />

61 + </Wrapper>,

62 container,

63 );

64

@@ -64,7 +68,11 @@ describe('ReactIdentity', () => {

68 function renderAComponentWithKeyIntoContainer(key, container) {

69 class Wrapper extends React.Component {

70 render() {

67 - return <div><span ref="span" key={key} /></div>;

71 + return (

72 + <div>

73 + <span ref="span" key={key} />

74 + </div>

75 + );

76 }

77 }

78

@@ -123,7 +131,12 @@ describe('ReactIdentity', () => {

131

132 class TestContainer extends React.Component {

133 render() {

126 - return <TestComponent>{instance0}{instance1}</TestComponent>;

134 + return (

135 + <TestComponent>

136 + {instance0}

137 + {instance1}

138 + </TestComponent>

139 + );

140 }

141 }

142

@@ -153,7 +166,10 @@ describe('ReactIdentity', () => {

166 render() {

167 return (

168 <div>

156 - <TestComponent>{instance0}{instance1}</TestComponent>

169 + <TestComponent>

170 + {instance0}

171 + {instance1}

172 + </TestComponent>

173 </div>

174 );

175 }

@@ -167,7 +183,12 @@ describe('ReactIdentity', () => {

183 it('should let text nodes retain their uniqueness', () => {

184 class TestComponent extends React.Component {

185 render() {

170 - return <div>{this.props.children}<span /></div>;

186 + return (

187 + <div>

188 + {this.props.children}

189 + <span />

190 + </div>

191 + );

192 }

193 }

194

packages/react-dom/src/__tests__/ReactMount-test.js

+10 -2

@@ -195,7 +195,11 @@ describe('ReactMount', () => {

195

196 class Component extends React.Component {

197 render() {

198 - return <div><div /></div>;

198 + return (

199 + <div>

200 + <div />

201 + </div>

202 + );

203 }

204 }

205

@@ -221,7 +225,11 @@ describe('ReactMount', () => {

225

226 class Component extends React.Component {

227 render() {

224 - return <div><div /></div>;

228 + return (

229 + <div>

230 + <div />

231 + </div>

232 + );

233 }

234 }

235

packages/react-dom/src/__tests__/ReactMultiChild-test.js

+41 -13

@@ -44,13 +44,23 @@ describe('ReactMultiChild', () => {

44 expect(mockUpdate.mock.calls.length).toBe(0);

45 expect(mockUnmount.mock.calls.length).toBe(0);

46

47 - ReactDOM.render(<div><MockComponent /></div>, container);

47 + ReactDOM.render(

48 + <div>

49 + <MockComponent />

50 + </div>,

51 + container,

52 + );

53

54 expect(mockMount.mock.calls.length).toBe(1);

55 expect(mockUpdate.mock.calls.length).toBe(0);

56 expect(mockUnmount.mock.calls.length).toBe(0);

57

53 - ReactDOM.render(<div><MockComponent /></div>, container);

58 + ReactDOM.render(

59 + <div>

60 + <MockComponent />

61 + </div>,

62 + container,

63 + );

64

65 expect(mockMount.mock.calls.length).toBe(1);

66 expect(mockUpdate.mock.calls.length).toBe(1);

@@ -74,12 +84,22 @@ describe('ReactMultiChild', () => {

84 expect(mockMount.mock.calls.length).toBe(0);

85 expect(mockUnmount.mock.calls.length).toBe(0);

86

77 - ReactDOM.render(<div><MockComponent /></div>, container);

87 + ReactDOM.render(

88 + <div>

89 + <MockComponent />

90 + </div>,

91 + container,

92 + );

93

94 expect(mockMount.mock.calls.length).toBe(1);

95 expect(mockUnmount.mock.calls.length).toBe(0);

96

82 - ReactDOM.render(<div><span /></div>, container);

97 + ReactDOM.render(

98 + <div>

99 + <span />

100 + </div>,

101 + container,

102 + );

103

104 expect(mockMount.mock.calls.length).toBe(1);

105 expect(mockUnmount.mock.calls.length).toBe(1);

@@ -114,7 +134,9 @@ describe('ReactMultiChild', () => {

134 expect(mockUnmount.mock.calls.length).toBe(0);

135

136 ReactDOM.render(

117 - <WrapperComponent><MockComponent /></WrapperComponent>,

137 + <WrapperComponent>

138 + <MockComponent />

139 + </WrapperComponent>,

140 container,

141 );

142

@@ -139,12 +161,22 @@ describe('ReactMultiChild', () => {

161 expect(mockMount.mock.calls.length).toBe(0);

162 expect(mockUnmount.mock.calls.length).toBe(0);

163

142 - ReactDOM.render(<div><MockComponent key="A" /></div>, container);

164 + ReactDOM.render(

165 + <div>

166 + <MockComponent key="A" />

167 + </div>,

168 + container,

169 + );

170

171 expect(mockMount.mock.calls.length).toBe(1);

172 expect(mockUnmount.mock.calls.length).toBe(0);

173

147 - ReactDOM.render(<div><MockComponent key="B" /></div>, container);

174 + ReactDOM.render(

175 + <div>

176 + <MockComponent key="B" />

177 + </div>,

178 + container,

179 + );

180

181 expect(mockMount.mock.calls.length).toBe(2);

182 expect(mockUnmount.mock.calls.length).toBe(1);

@@ -165,9 +197,7 @@ describe('ReactMultiChild', () => {

197 render() {

198 return (

199 <div>

168 - <WrapperComponent>

169 - {this.props.children}

170 - </WrapperComponent>

200 + <WrapperComponent>{this.props.children}</WrapperComponent>

201 </div>

202 );

203 }

@@ -211,9 +241,7 @@ describe('ReactMultiChild', () => {

241 render() {

242 return (

243 <div>

214 - <WrapperComponent>

215 - {this.props.children}

216 - </WrapperComponent>

244 + <WrapperComponent>{this.props.children}</WrapperComponent>

245 </div>

246 );

247 }

packages/react-dom/src/__tests__/ReactMultiChildReconcile-test.js

+15 -23

@@ -52,11 +52,7 @@ class StatusDisplay extends React.Component {

52 }

53

54 render() {

55 - return (

56 - <div>

57 - {this.props.contentKey}

58 - </div>

59 - );

55 + return <div>{this.props.contentKey}</div>;

56 }

57 }

58

@@ -65,10 +61,10 @@ class StatusDisplay extends React.Component {

61 */

62 class FriendsStatusDisplay extends React.Component {

63 /**

68 - * Gets the order directly from each rendered child's `index` field.

69 - * Refs are not maintained in the rendered order, and neither is

70 - * `this._renderedChildren` (surprisingly).

71 - */

64 + * Gets the order directly from each rendered child's `index` field.

65 + * Refs are not maintained in the rendered order, and neither is

66 + * `this._renderedChildren` (surprisingly).

67 + */

68 getOriginalKeys() {

69 var originalKeys = [];

70 for (var key in this.props.usernameToStatus) {

@@ -117,23 +113,19 @@ class FriendsStatusDisplay extends React.Component {

113 for (var key in this.props.usernameToStatus) {

114 var status = this.props.usernameToStatus[key];

115 children.push(

120 - !status

121 - ? null

122 - : <StatusDisplay

123 - key={key}

124 - ref={key}

125 - contentKey={key}

126 - onFlush={this.verifyPreviousRefsResolved.bind(this, key)}

127 - status={status}

128 - />,

116 + !status ? null : (

117 + <StatusDisplay

118 + key={key}

119 + ref={key}

120 + contentKey={key}

121 + onFlush={this.verifyPreviousRefsResolved.bind(this, key)}

122 + status={status}

123 + />

124 + ),

125 );

126 }

127 var childrenToRender = this.props.prepareChildren(children);

132 - return (

133 - <div>

134 - {childrenToRender}

135 - </div>

136 - );

128 + return <div>{childrenToRender}</div>;

129 }

130 }

131

packages/react-dom/src/__tests__/ReactMultiChildText-test.js

+23 -4

@@ -180,18 +180,37 @@ describe('ReactMultiChildText', () => {

180 });

181

182 it('should render between nested components and inline children', () => {

183 - ReactTestUtils.renderIntoDocument(<div><h1><span /><span /></h1></div>);

183 + ReactTestUtils.renderIntoDocument(

184 + <div>

185 + <h1>

186 + <span />

187 + <span />

188 + </h1>

189 + </div>,

190 + );

191

192 expect(function() {

186 - ReactTestUtils.renderIntoDocument(<div><h1>A</h1></div>);

193 + ReactTestUtils.renderIntoDocument(

194 + <div>

195 + <h1>A</h1>

196 + </div>,

197 + );

198 }).not.toThrow();

199

200 expect(function() {

190 - ReactTestUtils.renderIntoDocument(<div><h1>{['A']}</h1></div>);

201 + ReactTestUtils.renderIntoDocument(

202 + <div>

203 + <h1>{['A']}</h1>

204 + </div>,

205 + );

206 }).not.toThrow();

207

208 expect(function() {

194 - ReactTestUtils.renderIntoDocument(<div><h1>{['A', 'B']}</h1></div>);

209 + ReactTestUtils.renderIntoDocument(

210 + <div>

211 + <h1>{['A', 'B']}</h1>

212 + </div>,

213 + );

214 }).not.toThrow();

215 });

216 });

packages/react-dom/src/__tests__/ReactRenderDocument-test.js

+16 -48

@@ -52,9 +52,7 @@ describe('rendering React components at document', () => {

52 <head>

53 <title>Hello World</title>

54 </head>

55 - <body>

56 - {'Hello ' + this.props.hello}

57 - </body>

55 + <body>{'Hello ' + this.props.hello}</body>

56 </html>

57 );

58 }

@@ -83,9 +81,7 @@ describe('rendering React components at document', () => {

81 <head>

82 <title>Hello World</title>

83 </head>

86 - <body>

87 - Hello world

88 - </body>

84 + <body>Hello world</body>

85 </html>

86 );

87 }

@@ -112,9 +108,7 @@ describe('rendering React components at document', () => {

108 <head>

109 <title>Hello World</title>

110 </head>

115 - <body>

116 - Hello world

117 - </body>

111 + <body>Hello world</body>

112 </html>

113 );

114 }

@@ -127,9 +121,7 @@ describe('rendering React components at document', () => {

121 <head>

122 <title>Hello World</title>

123 </head>

130 - <body>

131 - Goodbye world

132 - </body>

124 + <body>Goodbye world</body>

125 </html>

126 );

127 }

@@ -157,9 +149,7 @@ describe('rendering React components at document', () => {

149 <head>

150 <title>Hello World</title>

151 </head>

160 - <body>

161 - {this.props.text}

162 - </body>

152 + <body>{this.props.text}</body>

153 </html>

154 );

155 }

@@ -194,9 +184,7 @@ describe('rendering React components at document', () => {

184 <head>

185 <title>Hello World</title>

186 </head>

197 - <body>

198 - {this.props.text}

199 - </body>

187 + <body>{this.props.text}</body>

188 </html>

189 );

190 }

@@ -233,9 +221,7 @@ describe('rendering React components at document', () => {

221 <head>

222 <title>Hello World</title>

223 </head>

236 - <body>

237 - {this.props.text}

238 - </body>

224 + <body>{this.props.text}</body>

225 </html>

226 );

227 }

@@ -255,9 +241,7 @@ describe('rendering React components at document', () => {

241 <head>

242 <title>Hello World</title>

243 </head>

258 - <body>

259 - Hello world

260 - </body>

244 + <body>Hello world</body>

245 </html>

246 );

247

@@ -279,9 +263,7 @@ describe('rendering React components at document', () => {

263 <head>

264 <title>Hello World</title>

265 </head>

282 - <body>

283 - {'Hello ' + this.props.hello}

284 - </body>

266 + <body>{'Hello ' + this.props.hello}</body>

267 </html>

268 );

269 }

@@ -308,9 +290,7 @@ describe('rendering React components at document', () => {

290 <head>

291 <title>Hello World</title>

292 </head>

311 - <body>

312 - Hello world

313 - </body>

293 + <body>Hello world</body>

294 </html>

295 );

296 }

@@ -334,9 +314,7 @@ describe('rendering React components at document', () => {

314 <head>

315 <title>Hello World</title>

316 </head>

337 - <body>

338 - Hello world

339 - </body>

317 + <body>Hello world</body>

318 </html>

319 );

320 }

@@ -349,9 +327,7 @@ describe('rendering React components at document', () => {

327 <head>

328 <title>Hello World</title>

329 </head>

352 - <body>

353 - Goodbye world

354 - </body>

330 + <body>Goodbye world</body>

331 </html>

332 );

333 }

@@ -378,9 +354,7 @@ describe('rendering React components at document', () => {

354 <head>

355 <title>Hello World</title>

356 </head>

381 - <body>

382 - {this.props.text}

383 - </body>

357 + <body>{this.props.text}</body>

358 </html>

359 );

360 }

@@ -416,9 +390,7 @@ describe('rendering React components at document', () => {

390 <head>

391 <title>Hello World</title>

392 </head>

419 - <body>

420 - {this.props.text}

421 - </body>

393 + <body>{this.props.text}</body>

394 </html>

395 );

396 }

@@ -449,9 +421,7 @@ describe('rendering React components at document', () => {

421 <head>

422 <title>Hello World</title>

423 </head>

452 - <body>

453 - {this.props.text}

454 - </body>

424 + <body>{this.props.text}</body>

425 </html>

426 );

427 }

@@ -472,9 +442,7 @@ describe('rendering React components at document', () => {

442 <head>

443 <title>Hello World</title>

444 </head>

475 - <body>

476 - Hello world

477 - </body>

445 + <body>Hello world</body>

446 </html>

447 );

448

packages/react-dom/src/__tests__/ReactServerRendering-test.js

+21 -5

@@ -81,7 +81,11 @@ describe('ReactDOMServer', () => {

81 it('should render composite components', () => {

82 class Parent extends React.Component {

83 render() {

84 - return <div><Child name="child" /></div>;

84 + return (

85 + <div>

86 + <Child name="child" />

87 + </div>

88 + );

89 }

90 }

91

@@ -198,7 +202,9 @@ describe('ReactDOMServer', () => {

202

203 render() {

204 return (

201 - <span ref="span" onClick={this.click}>Name: {this.props.name}</span>

205 + <span ref="span" onClick={this.click}>

206 + Name: {this.props.name}

207 + </span>

208 );

209 }

210 }

@@ -410,7 +416,11 @@ describe('ReactDOMServer', () => {

416

417 class TestComponent extends React.Component {

418 render() {

413 - return <span><NestedComponent /></span>;

419 + return (

420 + <span>

421 + <NestedComponent />

422 + </span>

423 + );

424 }

425 }

426

@@ -422,7 +432,11 @@ describe('ReactDOMServer', () => {

432 it('should not put checksum and React ID on text components', () => {

433 class TestComponent extends React.Component {

434 render() {

425 - return <span>{'hello'} {'world'}</span>;

435 + return (

436 + <span>

437 + {'hello'} {'world'}

438 + </span>

439 + );

440 }

441 }

442

@@ -595,7 +609,9 @@ describe('ReactDOMServer', () => {

609 };

610

611 var markup = ReactDOMServer.renderToString(

598 - <ContextProvider><Component /></ContextProvider>,

612 + <ContextProvider>

613 + <Component />

614 + </ContextProvider>,

615 );

616 expect(markup).toContain('hello, world');

617 });

packages/react-dom/src/__tests__/ReactStatelessComponent-test.js

+5 -1

@@ -126,7 +126,11 @@ describe('ReactStatelessComponent', () => {

126 it('should throw when stateless component returns undefined', () => {

127 function NotAComponent() {}

128 expect(function() {

129 - ReactTestUtils.renderIntoDocument(<div><NotAComponent /></div>);

129 + ReactTestUtils.renderIntoDocument(

130 + <div>

131 + <NotAComponent />

132 + </div>,

133 + );

134 }).toThrowError(

135 'NotAComponent(...): Nothing was returned from render. ' +

136 'This usually means a return statement is missing. Or, to render nothing, return null.',

packages/react-dom/src/__tests__/ReactTestUtils-test.js

+28 -18

@@ -78,7 +78,11 @@ describe('ReactTestUtils', () => {

78 it('can scryRenderedDOMComponentsWithClass with TextComponent', () => {

79 class Wrapper extends React.Component {

80 render() {

81 - return <div>Hello <span>Jim</span></div>;

81 + return (

82 + <div>

83 + Hello <span>Jim</span>

84 + </div>

85 + );

86 }

87 }

88

@@ -93,7 +97,11 @@ describe('ReactTestUtils', () => {

97 it('can scryRenderedDOMComponentsWithClass with className contains \\n', () => {

98 class Wrapper extends React.Component {

99 render() {

96 - return <div>Hello <span className={'x\ny'}>Jim</span></div>;

100 + return (

101 + <div>

102 + Hello <span className={'x\ny'}>Jim</span>

103 + </div>

104 + );

105 }

106 }

107

@@ -108,7 +116,11 @@ describe('ReactTestUtils', () => {

116 it('can scryRenderedDOMComponentsWithClass with multiple classes', () => {

117 class Wrapper extends React.Component {

118 render() {

111 - return <div>Hello <span className={'x y z'}>Jim</span></div>;

119 + return (

120 + <div>

121 + Hello <span className={'x y z'}>Jim</span>

122 + </div>

123 + );

124 }

125 }

126

@@ -210,9 +222,7 @@ describe('ReactTestUtils', () => {

222 <head ref="head">

223 <title>hello</title>

224 </head>

213 - <body ref="body">

214 - hello, world

215 - </body>

225 + <body ref="body">hello, world</body>

226 </html>

227 );

228 }

@@ -231,7 +241,11 @@ describe('ReactTestUtils', () => {

241 });

242

243 it('can scry with stateless components involved', () => {

234 - const Stateless = () => <div><hr /></div>;

244 + const Stateless = () => (

245 + <div>

246 + <hr />

247 + </div>

248 + );

249

250 class SomeComponent extends React.Component {

251 render() {

@@ -311,11 +325,7 @@ describe('ReactTestUtils', () => {

325 it('should throw when attempting to use a React element', () => {

326 class SomeComponent extends React.Component {

327 render() {

314 - return (

315 - <div onClick={this.props.handleClick}>

316 - hello, world.

317 - </div>

318 - );

328 + return <div onClick={this.props.handleClick}>hello, world.</div>;

329 }

330 }

331

@@ -336,11 +346,7 @@ describe('ReactTestUtils', () => {

346 it('should throw when attempting to use a component instance', () => {

347 class SomeComponent extends React.Component {

348 render() {

339 - return (

340 - <div onClick={this.props.handleClick}>

341 - hello, world.

342 - </div>

343 - );

349 + return <div onClick={this.props.handleClick}>hello, world.</div>;

350 }

351 }

352

@@ -403,7 +409,11 @@ describe('ReactTestUtils', () => {

409

410 class MyComponent extends React.Component {

411 render() {

406 - return <div><input type="text" onChange={onChange} /></div>;

412 + return (

413 + <div>

414 + <input type="text" onChange={onChange} />

415 + </div>

416 + );

417 }

418 }

419

packages/react-dom/src/__tests__/ReactUpdates-test.js

+59 -11

@@ -60,7 +60,11 @@ describe('ReactUpdates', () => {

60 }

61

62 render() {

63 - return <div>({this.state.x}, {this.state.y})</div>;

63 + return (

64 + <div>

65 + ({this.state.x}, {this.state.y})

66 + </div>

67 + );

68 }

69 }

70

@@ -92,7 +96,11 @@ describe('ReactUpdates', () => {

96 }

97

98 render() {

95 - return <div>({this.props.x}, {this.state.y})</div>;

99 + return (

100 + <div>

101 + ({this.props.x}, {this.state.y})

102 + </div>

103 + );

104 }

105 }

106

@@ -125,7 +133,11 @@ describe('ReactUpdates', () => {

133 }

134

135 render() {

128 - return <div><Child ref="child" x={this.state.x} /></div>;

136 + return (

137 + <div>

138 + <Child ref="child" x={this.state.x} />

139 + </div>

140 + );

141 }

142 }

143

@@ -174,7 +186,11 @@ describe('ReactUpdates', () => {

186 }

187

188 render() {

177 - return <div><Child ref="child" x={this.state.x} /></div>;

189 + return (

190 + <div>

191 + <Child ref="child" x={this.state.x} />

192 + </div>

193 + );

194 }

195 }

196

@@ -347,7 +363,11 @@ describe('ReactUpdates', () => {

363

364 class Top extends React.Component {

365 render() {

350 - return <Middle><Bottom /></Middle>;

366 + return (

367 + <Middle>

368 + <Bottom />

369 + </Middle>

370 + );

371 }

372 }

373

@@ -518,7 +538,12 @@ describe('ReactUpdates', () => {

538 var portal = null;

539 // If we're using Fiber, we use Portals instead to achieve this.

540 portal = ReactDOM.createPortal(<B ref={n => (b = n)} />, bContainer);

521 - return <div>A{this.state.x}{portal}</div>;

541 + return (

542 + <div>

543 + A{this.state.x}

544 + {portal}

545 + </div>

546 + );

547 }

548 }

549

@@ -547,7 +572,11 @@ describe('ReactUpdates', () => {

572

573 render() {

574 updates.push('Outer-render-' + this.state.x);

550 - return <div><Inner x={this.state.x} ref="inner" /></div>;

575 + return (

576 + <div>

577 + <Inner x={this.state.x} ref="inner" />

578 + </div>

579 + );

580 }

581

582 componentDidUpdate() {

@@ -1152,9 +1181,21 @@ describe('ReactUpdates', () => {

1181

1182 const container = document.createElement('div');

1183 // Mount

1155 - ReactDOM.render(<div><Foo /><Bar /></div>, container);

1184 + ReactDOM.render(

1185 + <div>

1186 + <Foo />

1187 + <Bar />

1188 + </div>,

1189 + container,

1190 + );

1191 // Root update

1157 - ReactDOM.render(<div><Foo /><Bar /></div>, container);

1192 + ReactDOM.render(

1193 + <div>

1194 + <Foo />

1195 + <Bar />

1196 + </div>,

1197 + container,

1198 + );

1199 expect(ops).toEqual([

1200 // Mount

1201 'a: false',

@@ -1239,7 +1280,9 @@ describe('ReactUpdates', () => {

1280 ops.push('Foo');

1281 return (

1282 <div>

1242 - <div hidden={true}><Bar /></div>

1283 + <div hidden={true}>

1284 + <Bar />

1285 + </div>

1286 <Baz />

1287 </div>

1288 );

@@ -1289,7 +1332,12 @@ describe('ReactUpdates', () => {

1332 this.setState({step: 2});

1333 }

1334 render() {

1292 - return <div>Hello {this.props.name}{this.state.step}</div>;

1335 + return (

1336 + <div>

1337 + Hello {this.props.name}

1338 + {this.state.step}

1339 + </div>

1340 + );

1341 }

1342 }

1343

packages/react-dom/src/__tests__/findDOMNode-test.js

+5 -1

@@ -21,7 +21,11 @@ describe('findDOMNode', () => {

21 it('findDOMNode should find dom element', () => {

22 class MyNode extends React.Component {

23 render() {

24 - return <div><span>Noise</span></div>;

24 + return (

25 + <div>

26 + <span>Noise</span>

27 + </div>

28 + );

29 }

30 }

31

packages/react-dom/src/__tests__/multiple-copies-of-react-test.js

+1 -5

@@ -16,11 +16,7 @@ class TextWithStringRef extends React.Component {

16 render() {

17 jest.resetModules();

18 React = require('react');

19 - return (

20 - <span ref="foo">

21 - Hello world!

22 - </span>

23 - );

19 + return <span ref="foo">Hello world!</span>;

20 }

21 }

22

packages/react-dom/src/__tests__/refs-destruction-test.js

+3 -5

@@ -27,11 +27,9 @@ describe('refs-destruction', () => {

27 render() {

28 return (

29 <div>

30 - {this.props.destroy

31 - ? null

32 - : <div ref="theInnerDiv">

33 - Lets try to destroy this.

34 - </div>}

30 + {this.props.destroy ? null : (

31 + <div ref="theInnerDiv">Lets try to destroy this.</div>

32 + )}

33 </div>

34 );

35 }

packages/react-dom/src/__tests__/refs-test.js

+7 -1

@@ -353,7 +353,13 @@ describe('root level refs', () => {

353 var divInst = null;

354 var ref2 = jest.fn(value => (divInst = value));

355 result = ReactDOM.render(

356 - [<Comp ref={ref} key="a" />, 5, <div ref={ref2} key="b">Hello</div>],

356 + [

357 + <Comp ref={ref} key="a" />,

358 + 5,

359 + <div ref={ref2} key="b">

360 + Hello

361 + </div>,

362 + ],

363 container,

364 );

365

packages/react-dom/src/client/ReactDOM.js

+25 -18

@@ -92,11 +92,11 @@ ReactControlledComponent.injection.injectFiberControlledHostComponent(

92

93 type DOMContainer =

94 | (Element & {

95 - _reactRootContainer: ?Object,

96 - })

95 + _reactRootContainer: ?Object,

96 + })

97 | (Document & {

98 - _reactRootContainer: ?Object,

99 - });

98 + _reactRootContainer: ?Object,

99 + });

100

101 type Container = Element | Document;

102 type Props = {

@@ -126,12 +126,14 @@ let selectionInformation: ?mixed = null;

126 * @internal

127 */

128 function isValidContainer(node) {

129 - return !!(node &&

129 + return !!(

130 + node &&

131 (node.nodeType === ELEMENT_NODE ||

132 node.nodeType === DOCUMENT_NODE ||

133 node.nodeType === DOCUMENT_FRAGMENT_NODE ||

134 (node.nodeType === COMMENT_NODE &&

134 - node.nodeValue === ' react-mount-point-unstable ')));

135 + node.nodeValue === ' react-mount-point-unstable '))

136 + );

137 }

138

139 function getReactRootElementInContainer(container: any) {

@@ -148,9 +150,11 @@ function getReactRootElementInContainer(container: any) {

150

151 function shouldHydrateDueToLegacyHeuristic(container) {

152 const rootElement = getReactRootElementInContainer(container);

151 - return !!(rootElement &&

153 + return !!(

154 + rootElement &&

155 rootElement.nodeType === ELEMENT_NODE &&

153 - rootElement.hasAttribute(ROOT_ATTRIBUTE_NAME));

156 + rootElement.hasAttribute(ROOT_ATTRIBUTE_NAME)

157 + );

158 }

159

160 function shouldAutoFocusHostComponent(type: string, props: Props): boolean {

@@ -178,9 +182,10 @@ const DOMRenderer = ReactFiberReconciler({

182 break;

183 }

184 default: {

181 - const container: any = nodeType === COMMENT_NODE

182 - ? rootContainerInstance.parentNode

183 - : rootContainerInstance;

185 + const container: any =

186 + nodeType === COMMENT_NODE

187 + ? rootContainerInstance.parentNode

188 + : rootContainerInstance;

189 const ownNamespace = container.namespaceURI || null;

190 type = container.tagName;

191 namespace = getChildNamespace(ownNamespace, type);

@@ -673,8 +678,9 @@ function renderSubtreeIntoContainer(

678

679 const isRootRenderedBySomeReact = !!container._reactRootContainer;

680 const rootEl = getReactRootElementInContainer(container);

676 - const hasNonRootReactChild = !!(rootEl &&

677 - ReactDOMComponentTree.getInstanceFromNode(rootEl));

681 + const hasNonRootReactChild = !!(

682 + rootEl && ReactDOMComponentTree.getInstanceFromNode(rootEl)

683 + );

684

685 warning(

686 !hasNonRootReactChild || isRootRenderedBySomeReact,

@@ -900,8 +906,9 @@ const ReactDOM: Object = {

906 } else {

907 if (__DEV__) {

908 const rootEl = getReactRootElementInContainer(container);

903 - const hasNonRootReactChild = !!(rootEl &&

904 - ReactDOMComponentTree.getInstanceFromNode(rootEl));

909 + const hasNonRootReactChild = !!(

910 + rootEl && ReactDOMComponentTree.getInstanceFromNode(rootEl)

911 + );

912

913 // Check if the container itself is a React root node.

914 const isContainerReactRoot =

@@ -915,9 +922,9 @@ const ReactDOM: Object = {

922 'was rendered by React and is not a top-level container. %s',

923 isContainerReactRoot

924 ? 'You may have accidentally passed in a React root node instead ' +

918 - 'of its container.'

925 + 'of its container.'

926 : 'Instead, have the parent component update its state and ' +

920 - 'rerender in order to remove this component.',

927 + 'rerender in order to remove this component.',

928 );

929 }

930

@@ -985,7 +992,7 @@ if (__DEV__) {

992 'https://fb.me/react-devtools' +

993 (protocol === 'file:'

994 ? '\nYou might need to use a local HTTP server (instead of file://): ' +

988 - 'https://fb.me/react-devtools-faq'

995 + 'https://fb.me/react-devtools-faq'

996 : ''),

997 'font-weight:bold',

998 );

packages/react-dom/src/client/ReactDOMComponentTree.js

+3 -1

@@ -8,7 +8,9 @@

8 import {HostComponent, HostText} from 'shared/ReactTypeOfWork';

9 import invariant from 'fbjs/lib/invariant';

10

11 -const randomKey = Math.random().toString(36).slice(2);

11 +const randomKey = Math.random()

12 + .toString(36)

13 + .slice(2);

14 const internalInstanceKey = '__reactInternalInstance$' + randomKey;

15 const internalEventHandlersKey = '__reactEventHandlers$' + randomKey;

16

packages/react-dom/src/client/ReactDOMFB.js

+1 -2

@@ -10,8 +10,7 @@

10 import * as ReactFiberTreeReflection from 'shared/ReactFiberTreeReflection';

11 import * as ReactInstanceMap from 'shared/ReactInstanceMap';

12 // TODO: direct imports like some-package/src/* are bad. Fix me.

13 -import * as ReactFiberErrorLogger

14 - from 'react-reconciler/src/ReactFiberErrorLogger';

13 +import * as ReactFiberErrorLogger from 'react-reconciler/src/ReactFiberErrorLogger';

14 import ReactErrorUtils from 'shared/ReactErrorUtils';

15 import {addUserTimingListener} from 'shared/ReactFeatureFlags';

16

packages/react-dom/src/client/ReactDOMFiberComponent.js

+13 -20

@@ -8,8 +8,7 @@

8 */

9

10 // TODO: direct imports like some-package/src/* are bad. Fix me.

11 -import ReactDebugCurrentFiber

12 - from 'react-reconciler/src/ReactDebugCurrentFiber';

11 +import ReactDebugCurrentFiber from 'react-reconciler/src/ReactDebugCurrentFiber';

12 import {registrationNameModules} from 'events/EventPluginRegistry';

13 import emptyFunction from 'fbjs/lib/emptyFunction';

14 import warning from 'fbjs/lib/warning';

@@ -29,15 +28,9 @@ import {getPropertyInfo, shouldSetAttribute} from '../shared/DOMProperty';

28 import assertValidProps from '../shared/assertValidProps';

29 import {DOCUMENT_NODE, DOCUMENT_FRAGMENT_NODE} from '../shared/HTMLNodeType';

30 import isCustomComponent from '../shared/isCustomComponent';

32 -import {

33 - validateProperties as validateARIAProperties,

34 -} from '../shared/ReactDOMInvalidARIAHook';

35 -import {

36 - validateProperties as validateInputProperties,

37 -} from '../shared/ReactDOMNullInputValuePropHook';

38 -import {

39 - validateProperties as validateUnknownProperties,

40 -} from '../shared/ReactDOMUnknownPropertyHook';

31 +import {validateProperties as validateARIAProperties} from '../shared/ReactDOMInvalidARIAHook';

32 +import {validateProperties as validateInputProperties} from '../shared/ReactDOMNullInputValuePropHook';

33 +import {validateProperties as validateUnknownProperties} from '../shared/ReactDOMUnknownPropertyHook';

34

35 var {

36 getCurrentFiberOwnerName,

@@ -86,9 +79,8 @@ if (__DEV__) {

79 var NORMALIZE_NULL_AND_REPLACEMENT_REGEX = /\u0000|\uFFFD/g;

80

81 var normalizeMarkupForTextOrAttribute = function(markup: mixed): string {

89 - const markupString = typeof markup === 'string'

90 - ? markup

91 - : '' + (markup: any);

82 + const markupString =

83 + typeof markup === 'string' ? markup : '' + (markup: any);

84 return markupString

85 .replace(NORMALIZE_NEWLINES_REGEX, '\n')

86 .replace(NORMALIZE_NULL_AND_REPLACEMENT_REGEX, '');

@@ -184,12 +176,13 @@ if (__DEV__) {

176 // re-initializing custom elements if they exist. But this breaks

177 // how <noscript> is being handled. So we use the same document.

178 // See the discussion in https://github.com/facebook/react/pull/11157.

187 - var testElement = parent.namespaceURI === HTML_NAMESPACE

188 - ? parent.ownerDocument.createElement(parent.tagName)

189 - : parent.ownerDocument.createElementNS(

190 - (parent.namespaceURI: any),

191 - parent.tagName,

192 - );

179 + var testElement =

180 + parent.namespaceURI === HTML_NAMESPACE

181 + ? parent.ownerDocument.createElement(parent.tagName)

182 + : parent.ownerDocument.createElementNS(

183 + (parent.namespaceURI: any),

184 + parent.tagName,

185 + );

186 testElement.innerHTML = html;

187 return testElement.innerHTML;

188 };

packages/react-dom/src/client/ReactDOMFiberInput.js

+4 -7

@@ -8,15 +8,13 @@

8 */

9

10 // TODO: direct imports like some-package/src/* are bad. Fix me.

11 -import ReactDebugCurrentFiber

12 - from 'react-reconciler/src/ReactDebugCurrentFiber';

11 +import ReactDebugCurrentFiber from 'react-reconciler/src/ReactDebugCurrentFiber';

12 import invariant from 'fbjs/lib/invariant';

13 import warning from 'fbjs/lib/warning';

14

15 import * as DOMPropertyOperations from './DOMPropertyOperations';

16 import {getFiberCurrentPropsFromNode} from './ReactDOMComponentTree';

18 -import ReactControlledValuePropTypes

19 - from '../shared/ReactControlledValuePropTypes';

17 +import ReactControlledValuePropTypes from '../shared/ReactControlledValuePropTypes';

18

19 type InputWithWrapperState = HTMLInputElement & {

20 _wrapperState: {

@@ -136,9 +134,8 @@ export function initWrapperState(element: Element, props: Object) {

134 var defaultValue = props.defaultValue;

135 var node = ((element: any): InputWithWrapperState);

136 node._wrapperState = {

139 - initialChecked: props.checked != null

140 - ? props.checked

141 - : props.defaultChecked,

137 + initialChecked:

138 + props.checked != null ? props.checked : props.defaultChecked,

139 initialValue: props.value != null ? props.value : defaultValue,

140 controlled: isControlled(props),

141 };

packages/react-dom/src/client/ReactDOMFiberSelect.js

+2 -4

@@ -8,12 +8,10 @@

8 */

9

10 // TODO: direct imports like some-package/src/* are bad. Fix me.

11 -import ReactDebugCurrentFiber

12 - from 'react-reconciler/src/ReactDebugCurrentFiber';

11 +import ReactDebugCurrentFiber from 'react-reconciler/src/ReactDebugCurrentFiber';

12 import warning from 'fbjs/lib/warning';

13

15 -import ReactControlledValuePropTypes

16 - from '../shared/ReactControlledValuePropTypes';

14 +import ReactControlledValuePropTypes from '../shared/ReactControlledValuePropTypes';

15

16 var {

17 getCurrentFiberOwnerName,

packages/react-dom/src/client/ReactDOMFiberTextarea.js

+2 -4

@@ -10,11 +10,9 @@

10 import invariant from 'fbjs/lib/invariant';

11 import warning from 'fbjs/lib/warning';

12 // TODO: direct imports like some-package/src/* are bad. Fix me.

13 -import ReactDebugCurrentFiber

14 - from 'react-reconciler/src/ReactDebugCurrentFiber';

13 +import ReactDebugCurrentFiber from 'react-reconciler/src/ReactDebugCurrentFiber';

14

16 -import ReactControlledValuePropTypes

17 - from '../shared/ReactControlledValuePropTypes';

15 +import ReactControlledValuePropTypes from '../shared/ReactControlledValuePropTypes';

16

17 var {getCurrentFiberStackAddendum} = ReactDebugCurrentFiber;

18 var didWarnValDefaultVal = false;

packages/react-dom/src/client/getTextContentAccessor.js

+2 -3

@@ -19,9 +19,8 @@ function getTextContentAccessor() {

19 if (!contentKey && ExecutionEnvironment.canUseDOM) {

20 // Prefer textContent to innerText because many browsers support both but

21 // SVG <text> elements don't support innerText even when <div> does.

22 - contentKey = 'textContent' in document.documentElement

23 - ? 'textContent'

24 - : 'innerText';

22 + contentKey =

23 + 'textContent' in document.documentElement ? 'textContent' : 'innerText';

24 }

25 return contentKey;

26 }

packages/react-dom/src/client/setInnerHTML.js

+1 -2

@@ -6,8 +6,7 @@

6 */

7

8 import {Namespaces} from '../shared/DOMNamespaces';

9 -import createMicrosoftUnsafeLocalFunction

10 - from '../shared/createMicrosoftUnsafeLocalFunction';

9 +import createMicrosoftUnsafeLocalFunction from '../shared/createMicrosoftUnsafeLocalFunction';

10

11 // SVG temp container for IE lacking innerHTML

12 let reusableSVGContainer;

packages/react-dom/src/client/validateDOMNesting.js

+1 -2

@@ -8,8 +8,7 @@

8 import emptyFunction from 'fbjs/lib/emptyFunction';

9 import warning from 'fbjs/lib/warning';

10 // TODO: direct imports like some-package/src/* are bad. Fix me.

11 -import ReactDebugCurrentFiber

12 - from 'react-reconciler/src/ReactDebugCurrentFiber';

11 +import ReactDebugCurrentFiber from 'react-reconciler/src/ReactDebugCurrentFiber';

12

13 const {getCurrentFiberStackAddendum} = ReactDebugCurrentFiber;

14 var validateDOMNesting = emptyFunction;

packages/react-dom/src/events/BrowserEventConstants.js

+6 -6

@@ -17,10 +17,10 @@ import getVendorPrefixedEventName from './getVendorPrefixedEventName';

17 var topLevelTypes = {

18 topAbort: 'abort',

19 topAnimationEnd: getVendorPrefixedEventName('animationend') || 'animationend',

20 - topAnimationIteration: getVendorPrefixedEventName('animationiteration') ||

21 - 'animationiteration',

22 - topAnimationStart: getVendorPrefixedEventName('animationstart') ||

23 - 'animationstart',

20 + topAnimationIteration:

21 + getVendorPrefixedEventName('animationiteration') || 'animationiteration',

22 + topAnimationStart:

23 + getVendorPrefixedEventName('animationstart') || 'animationstart',

24 topBlur: 'blur',

25 topCancel: 'cancel',

26 topCanPlay: 'canplay',

@@ -81,8 +81,8 @@ var topLevelTypes = {

81 topTouchEnd: 'touchend',

82 topTouchMove: 'touchmove',

83 topTouchStart: 'touchstart',

84 - topTransitionEnd: getVendorPrefixedEventName('transitionend') ||

85 - 'transitionend',

84 + topTransitionEnd:

85 + getVendorPrefixedEventName('transitionend') || 'transitionend',

86 topVolumeChange: 'volumechange',

87 topWaiting: 'waiting',

88 topWheel: 'wheel',

packages/react-dom/src/events/FallbackCompositionState.js

+1 -1

@@ -15,7 +15,7 @@ import getTextContentAccessor from '../client/getTextContentAccessor';

15 * both its text content and its current position in the DOM. Since the

16 * browser may natively replace the target node during composition, we can

17 * use its position to find its replacement.

18 - *

18 + *

19 *

20 */

21 var compositionState = {

packages/react-dom/src/events/SelectEventPlugin.js

+4 -3

@@ -140,9 +140,10 @@ var SelectEventPlugin = {

140 nativeEvent,

141 nativeEventTarget,

142 ) {

143 - var doc = nativeEventTarget.window === nativeEventTarget

144 - ? nativeEventTarget.document

145 - : nativeEventTarget.nodeType === DOCUMENT_NODE

143 + var doc =

144 + nativeEventTarget.window === nativeEventTarget

145 + ? nativeEventTarget.document

146 + : nativeEventTarget.nodeType === DOCUMENT_NODE

147 ? nativeEventTarget

148 : nativeEventTarget.ownerDocument;

149 // Track whether all listeners exists for this plugin. If none exist, we do

packages/react-dom/src/events/SyntheticWheelEvent.js

+3 -3

@@ -23,9 +23,9 @@ var WheelEventInterface = {

23 ? event.deltaY

24 : // Fallback to `wheelDeltaY` for Webkit and normalize (down is positive).

25 'wheelDeltaY' in event

26 - ? -event.wheelDeltaY

27 - : // Fallback to `wheelDelta` for IE<9 and normalize (down is positive).

28 - 'wheelDelta' in event ? -event.wheelDelta : 0;

26 + ? -event.wheelDeltaY

27 + : // Fallback to `wheelDelta` for IE<9 and normalize (down is positive).

28 + 'wheelDelta' in event ? -event.wheelDelta : 0;

29 },

30 deltaZ: null,

31

packages/react-dom/src/events/TapEventPlugin.js

+1 -1

@@ -23,7 +23,7 @@ import SyntheticUIEvent from './SyntheticUIEvent';

23 type TouchPropertyKey = 'clientX' | 'clientY' | 'pageX' | 'pageY';

24

25 declare class _Touch extends Touch {

26 - [key: TouchPropertyKey]: number,

26 + [key: TouchPropertyKey]: number;

27 }

28

29 type AxisCoordinateData = {

packages/react-dom/src/events/__tests__/EnterLeaveEventPlugin-test.js

+3 -2

@@ -93,8 +93,9 @@ describe('EnterLeaveEventPlugin', () => {

93 <div

94 onMouseEnter={() => parentEnterCalls++}

95 ref={node => (parent = node)}>

96 - {this.props.showChild &&

97 - <div onMouseEnter={() => childEnterCalls++} />}

96 + {this.props.showChild && (

97 + <div onMouseEnter={() => childEnterCalls++} />

98 + )}

99 </div>

100 );

101 }

packages/react-dom/src/events/__tests__/SimpleEventPlugin-test.js

+15 -5

@@ -46,7 +46,9 @@ describe('SimpleEventPlugin', function() {

46

47 it('A non-interactive tags clicks bubble when disabled', function() {

48 var element = ReactTestUtils.renderIntoDocument(

49 - <div onClick={onClick}><div /></div>,

49 + <div onClick={onClick}>

50 + <div />

51 + </div>,

52 );

53 var child = ReactDOM.findDOMNode(element).firstChild;

54

@@ -56,7 +58,9 @@ describe('SimpleEventPlugin', function() {

58

59 it('does not register a click when clicking a child of a disabled element', function() {

60 var element = ReactTestUtils.renderIntoDocument(

59 - <button onClick={onClick} disabled={true}><span /></button>,

61 + <button onClick={onClick} disabled={true}>

62 + <span />

63 + </button>,

64 );

65 var child = ReactDOM.findDOMNode(element).querySelector('span');

66

@@ -66,7 +70,9 @@ describe('SimpleEventPlugin', function() {

70

71 it('triggers click events for children of disabled elements', function() {

72 var element = ReactTestUtils.renderIntoDocument(

69 - <button disabled={true}><span onClick={onClick} /></button>,

73 + <button disabled={true}>

74 + <span onClick={onClick} />

75 + </button>,

76 );

77 var child = ReactDOM.findDOMNode(element).querySelector('span');

78

@@ -77,7 +83,9 @@ describe('SimpleEventPlugin', function() {

83 it('triggers parent captured click events when target is a child of a disabled elements', function() {

84 var element = ReactTestUtils.renderIntoDocument(

85 <div onClickCapture={onClick}>

80 - <button disabled={true}><span /></button>

86 + <button disabled={true}>

87 + <span />

88 + </button>

89 </div>,

90 );

91 var child = ReactDOM.findDOMNode(element).querySelector('span');

@@ -88,7 +96,9 @@ describe('SimpleEventPlugin', function() {

96

97 it('triggers captured click events for children of disabled elements', function() {

98 var element = ReactTestUtils.renderIntoDocument(

91 - <button disabled={true}><span onClickCapture={onClick} /></button>,

99 + <button disabled={true}>

100 + <span onClickCapture={onClick} />

101 + </button>,

102 );

103 var child = ReactDOM.findDOMNode(element).querySelector('span');

104

packages/react-dom/src/events/__tests__/SyntheticEvent-test.js

+21 -24

@@ -146,32 +146,29 @@ describe('SyntheticEvent', () => {

146 // TODO: reenable this test. We are currently silencing these warnings when

147 // using TestUtils.Simulate to avoid spurious warnings that result from the

148 // way we simulate events.

149 - xit(

150 - 'should properly log warnings when events simulated with rendered components',

151 - () => {

152 - spyOn(console, 'error');

153 - var event;

154 - var element = document.createElement('div');

155 - function assignEvent(e) {

156 - event = e;

157 - }

158 - var instance = ReactDOM.render(<div onClick={assignEvent} />, element);

159 - ReactTestUtils.Simulate.click(ReactDOM.findDOMNode(instance));

160 - expectDev(console.error.calls.count()).toBe(0);

149 + xit('should properly log warnings when events simulated with rendered components', () => {

150 + spyOn(console, 'error');

151 + var event;

152 + var element = document.createElement('div');

153 + function assignEvent(e) {

154 + event = e;

155 + }

156 + var instance = ReactDOM.render(<div onClick={assignEvent} />, element);

157 + ReactTestUtils.Simulate.click(ReactDOM.findDOMNode(instance));

158 + expectDev(console.error.calls.count()).toBe(0);

159

162 - // access a property to cause the warning

163 - event.nativeEvent; // eslint-disable-line no-unused-expressions

160 + // access a property to cause the warning

161 + event.nativeEvent; // eslint-disable-line no-unused-expressions

162

165 - expectDev(console.error.calls.count()).toBe(1);

166 - expectDev(console.error.calls.argsFor(0)[0]).toBe(

167 - 'Warning: This synthetic event is reused for performance reasons. If ' +

168 - "you're seeing this, you're accessing the property `nativeEvent` on a " +

169 - 'released/nullified synthetic event. This is set to null. If you must ' +

170 - 'keep the original synthetic event around, use event.persist(). ' +

171 - 'See https://fb.me/react-event-pooling for more information.',

172 - );

173 - },

174 - );

163 + expectDev(console.error.calls.count()).toBe(1);

164 + expectDev(console.error.calls.argsFor(0)[0]).toBe(

165 + 'Warning: This synthetic event is reused for performance reasons. If ' +

166 + "you're seeing this, you're accessing the property `nativeEvent` on a " +

167 + 'released/nullified synthetic event. This is set to null. If you must ' +

168 + 'keep the original synthetic event around, use event.persist(). ' +

169 + 'See https://fb.me/react-event-pooling for more information.',

170 + );

171 + });

172

173 it('should warn if Proxy is supported and the synthetic event is added a property', () => {

174 spyOn(console, 'error');

packages/react-dom/src/events/getEventKey.js

+1 -1

@@ -3,7 +3,7 @@

3 *

4 * This source code is licensed under the MIT license found in the

5 * LICENSE file in the root directory of this source tree.

6 - *

6 + *

7 * @flow

8 */

9

packages/react-dom/src/server/DOMMarkupOperations.js

+1 -2

@@ -14,8 +14,7 @@ import {

14 shouldAttributeAcceptBooleanValue,

15 shouldSetAttribute,

16 } from '../shared/DOMProperty';

17 -import quoteAttributeValueForBrowser

18 - from '../shared/quoteAttributeValueForBrowser';

17 +import quoteAttributeValueForBrowser from '../shared/quoteAttributeValueForBrowser';

18 import warning from 'fbjs/lib/warning';

19

20 // isAttributeNameSafe() is currently duplicated in DOMPropertyOperations.

packages/react-dom/src/server/ReactPartialRenderer.js

+10 -17

@@ -30,23 +30,16 @@ import {

30 getIntrinsicNamespace,

31 getChildNamespace,

32 } from '../shared/DOMNamespaces';

33 -import ReactControlledValuePropTypes

34 - from '../shared/ReactControlledValuePropTypes';

33 +import ReactControlledValuePropTypes from '../shared/ReactControlledValuePropTypes';

34 import assertValidProps from '../shared/assertValidProps';

35 import dangerousStyleValue from '../shared/dangerousStyleValue';

36 import escapeTextContentForBrowser from '../shared/escapeTextContentForBrowser';

37 import isCustomComponent from '../shared/isCustomComponent';

38 import omittedCloseTags from '../shared/omittedCloseTags';

39 import warnValidStyle from '../shared/warnValidStyle';

41 -import {

42 - validateProperties as validateARIAProperties,

43 -} from '../shared/ReactDOMInvalidARIAHook';

44 -import {

45 - validateProperties as validateInputProperties,

46 -} from '../shared/ReactDOMNullInputValuePropHook';

47 -import {

48 - validateProperties as validateUnknownProperties,

49 -} from '../shared/ReactDOMUnknownPropertyHook';

40 +import {validateProperties as validateARIAProperties} from '../shared/ReactDOMInvalidARIAHook';

41 +import {validateProperties as validateInputProperties} from '../shared/ReactDOMNullInputValuePropHook';

42 +import {validateProperties as validateUnknownProperties} from '../shared/ReactDOMUnknownPropertyHook';

43

44 var REACT_FRAGMENT_TYPE =

45 (typeof Symbol === 'function' &&

@@ -435,9 +428,10 @@ function resolve(

428 var dontMutate = true;

429 for (var i = oldReplace ? 1 : 0; i < oldQueue.length; i++) {

430 var partial = oldQueue[i];

438 - var partialState = typeof partial === 'function'

439 - ? partial.call(inst, nextState, element.props, publicContext)

440 - : partial;

431 + var partialState =

432 + typeof partial === 'function'

433 + ? partial.call(inst, nextState, element.props, publicContext)

434 + : partial;

435 if (partialState) {

436 if (dontMutate) {

437 dontMutate = false;

@@ -828,9 +822,8 @@ class ReactDOMServerRenderer {

822 didWarnDefaultSelectValue = true;

823 }

824 }

831 - this.currentSelectValue = props.value != null

832 - ? props.value

833 - : props.defaultValue;

825 + this.currentSelectValue =

826 + props.value != null ? props.value : props.defaultValue;

827 props = Object.assign({}, props, {

828 value: undefined,

829 });

packages/react-dom/src/shared/CSSPropertyOperations.js

+11 -11

@@ -14,11 +14,11 @@ import warnValidStyle from './warnValidStyle';

14 */

15

16 /**

17 - * This creates a string that is expected to be equivalent to the style

18 - * attribute generated by server-side rendering. It by-passes warnings and

19 - * security checks so it's not safe to use this value for anything other than

20 - * comparison. It is only used in DEV for SSR validation.

21 - */

17 + * This creates a string that is expected to be equivalent to the style

18 + * attribute generated by server-side rendering. It by-passes warnings and

19 + * security checks so it's not safe to use this value for anything other than

20 + * comparison. It is only used in DEV for SSR validation.

21 + */

22 export function createDangerousStringForStyles(styles) {

23 if (__DEV__) {

24 var serialized = '';

@@ -45,12 +45,12 @@ export function createDangerousStringForStyles(styles) {

45 }

46

47 /**

48 - * Sets the value for multiple styles on a node. If a value is specified as

49 - * '' (empty string), the corresponding style property will be unset.

50 - *

51 - * @param {DOMElement} node

52 - * @param {object} styles

53 - */

48 + * Sets the value for multiple styles on a node. If a value is specified as

49 + * '' (empty string), the corresponding style property will be unset.

50 + *

51 + * @param {DOMElement} node

52 + * @param {object} styles

53 + */

54 export function setValueForStyles(node, styles, getStack) {

55 var style = node.style;

56 for (var styleName in styles) {

packages/react-dom/src/test-utils/ReactTestUtils.js

+4 -3

@@ -461,9 +461,10 @@ function makeNativeSimulator(eventType) {

461

462 Object.keys(topLevelTypes).forEach(function(eventType) {

463 // Event type is stored as 'topClick' - we transform that to 'click'

464 - var convenienceName = eventType.indexOf('top') === 0

465 - ? eventType.charAt(3).toLowerCase() + eventType.substr(4)

466 - : eventType;

464 + var convenienceName =

465 + eventType.indexOf('top') === 0

466 + ? eventType.charAt(3).toLowerCase() + eventType.substr(4)

467 + : eventType;

468 /**

469 * @param {!Element|ReactDOMComponent} domComponentOrNode

470 * @param {?Event} nativeEventData Fake native event to use in SyntheticEvent.

packages/react-native-renderer/src/ReactNativeAttributePayload.js

+14 -12

@@ -106,9 +106,10 @@ function restoreDeletedValuesInNestedArray(

106 typeof attributeConfig.process === 'function'

107 ) {

108 // case: CustomAttributeConfiguration

109 - var nextValue = typeof attributeConfig.process === 'function'

110 - ? attributeConfig.process(nextProp)

111 - : nextProp;

109 + var nextValue =

110 + typeof attributeConfig.process === 'function'

111 + ? attributeConfig.process(nextProp)

112 + : nextProp;

113 updatePayload[propKey] = nextValue;

114 }

115 removedKeys[propKey] = false;

@@ -123,9 +124,8 @@ function diffNestedArrayProperty(

124 nextArray: Array<NestedNode>,

125 validAttributes: AttributeConfiguration,

126 ): ?Object {

126 - var minLength = prevArray.length < nextArray.length

127 - ? prevArray.length

128 - : nextArray.length;

127 + var minLength =

128 + prevArray.length < nextArray.length ? prevArray.length : nextArray.length;

129 var i;

130 for (i = 0; i < minLength; i++) {

131 // Diff any items in the array in the forward direction. Repeated keys

@@ -350,9 +350,10 @@ function diffProperties(

350 typeof attributeConfig.process === 'function'

351 ) {

352 // case: CustomAttributeConfiguration

353 - var nextValue = typeof attributeConfig.process === 'function'

354 - ? attributeConfig.process(nextProp)

355 - : nextProp;

353 + var nextValue =

354 + typeof attributeConfig.process === 'function'

355 + ? attributeConfig.process(nextProp)

356 + : nextProp;

357 updatePayload[propKey] = nextValue;

358 }

359 continue;

@@ -380,9 +381,10 @@ function diffProperties(

381 ? attributeConfig.diff(prevProp, nextProp)

382 : defaultDiffer(prevProp, nextProp));

383 if (shouldUpdate) {

383 - nextValue = typeof attributeConfig.process === 'function'

384 - ? attributeConfig.process(nextProp)

385 - : nextProp;

384 + nextValue =

385 + typeof attributeConfig.process === 'function'

386 + ? attributeConfig.process(nextProp)

387 + : nextProp;

388 (updatePayload || (updatePayload = {}))[propKey] = nextValue;

389 }

390 } else {

packages/react-native-renderer/src/ReactNativeComponent.js

+4 -2

@@ -37,8 +37,10 @@ import findNumericNodeHandle from './findNumericNodeHandle';

37 *

38 * @abstract

39 */

40 -class ReactNativeComponent<DefaultProps, Props, State>

41 - extends React.Component<Props, State> {

40 +class ReactNativeComponent<DefaultProps, Props, State> extends React.Component<

41 + Props,

42 + State,

43 +> {

44 static defaultProps: $Abstract<DefaultProps>;

45 props: Props;

46 state: State;

packages/react-native-renderer/src/ReactNativeEventEmitter.js

+4 -3

@@ -145,10 +145,11 @@ export function receiveTouches(

145 touches: Array<Object>,

146 changedIndices: Array<number>,

147 ) {

148 - var changedTouches = eventTopLevelType === 'topTouchEnd' ||

148 + var changedTouches =

149 + eventTopLevelType === 'topTouchEnd' ||

150 eventTopLevelType === 'topTouchCancel'

150 - ? removeTouchesAtIndices(touches, changedIndices)

151 - : touchSubsequence(touches, changedIndices);

151 + ? removeTouchesAtIndices(touches, changedIndices)

152 + : touchSubsequence(touches, changedIndices);

153

154 for (var jj = 0; jj < changedTouches.length; jj++) {

155 var touch = changedTouches[jj];

packages/react-native-renderer/src/ReactNativeFiberErrorDialog.js

+3 -1

@@ -30,7 +30,9 @@ export function showDialog(capturedError: CapturedError): boolean {

30 errorToHandle = error;

31

32 try {

33 - errorToHandle.message = `${summary}\n\nThis error is located at:${componentStack}`;

33 + errorToHandle.message = `${summary}\n\nThis error is located at:${

34 + componentStack

35 + }`;

36 } catch (e) {}

37 } else if (typeof error === 'string') {

38 errorToHandle = new Error(

packages/react-native-renderer/src/ReactNativeFiberRenderer.js

+4 -6

@@ -14,11 +14,9 @@ import emptyObject from 'fbjs/lib/emptyObject';

14 import invariant from 'fbjs/lib/invariant';

15 // Modules provided by RN:

16 import UIManager from 'UIManager';

17 -import deepFreezeAndThrowOnMutationInDev

18 - from 'deepFreezeAndThrowOnMutationInDev';

17 +import deepFreezeAndThrowOnMutationInDev from 'deepFreezeAndThrowOnMutationInDev';

18

20 -import * as ReactNativeViewConfigRegistry

21 - from './ReactNativeViewConfigRegistry';

19 +import * as ReactNativeViewConfigRegistry from './ReactNativeViewConfigRegistry';

20 import * as ReactNativeAttributePayload from './ReactNativeAttributePayload';

21 import {

22 precacheFiberNode,

@@ -132,9 +130,9 @@ const NativeRenderer = ReactFiberReconciler({

130 // Either way we need to pass a copy of the Array to prevent it from being frozen.

131 const nativeTags = parentInstance._children.map(

132 child =>

135 - (typeof child === 'number'

133 + typeof child === 'number'

134 ? child // Leaf node (eg text)

137 - : child._nativeTag),

135 + : child._nativeTag,

136 );

137

138 UIManager.setChildren(

packages/react-native-renderer/src/ReactNativeInjection.js

+1 -2

@@ -26,8 +26,7 @@ import ReactNativeBridgeEventPlugin from './ReactNativeBridgeEventPlugin';

26 import * as ReactNativeComponentTree from './ReactNativeComponentTree';

27 import * as ReactNativeEventEmitter from './ReactNativeEventEmitter';

28 import ReactNativeEventPluginOrder from './ReactNativeEventPluginOrder';

29 -import ReactNativeGlobalResponderHandler

30 - from './ReactNativeGlobalResponderHandler';

29 +import ReactNativeGlobalResponderHandler from './ReactNativeGlobalResponderHandler';

30

31 /**

32 * Register the event emitter with the native bridge

packages/react-native-renderer/src/ReactNativeRenderer.js

+1 -2

@@ -13,8 +13,7 @@ import type {ReactNodeList} from 'shared/ReactTypes';

13 import './ReactNativeInjection';

14

15 // TODO: direct imports like some-package/src/* are bad. Fix me.

16 -import * as ReactFiberErrorLogger

17 - from 'react-reconciler/src/ReactFiberErrorLogger';

16 +import * as ReactFiberErrorLogger from 'react-reconciler/src/ReactFiberErrorLogger';

17 import * as ReactPortal from 'react-reconciler/src/ReactPortal';

18 import * as ReactGenericBatching from 'events/ReactGenericBatching';

19 import TouchHistoryMath from 'events/TouchHistoryMath';

packages/react-native-renderer/src/ReactNativeViewConfigRegistry.js

+9 -9

@@ -18,11 +18,11 @@ const viewConfigCallbacks = new Map();

18 const viewConfigs = new Map();

19

20 /**

21 - * Registers a native view/component by name.

22 - * A callback is provided to load the view config from UIManager.

23 - * The callback is deferred until the view is actually rendered.

24 - * This is done to avoid causing Prepack deopts.

25 - */

21 + * Registers a native view/component by name.

22 + * A callback is provided to load the view config from UIManager.

23 + * The callback is deferred until the view is actually rendered.

24 + * This is done to avoid causing Prepack deopts.

25 + */

26 export function register(name: string, callback: ViewConfigGetter): string {

27 invariant(

28 !viewConfigCallbacks.has(name),

@@ -34,10 +34,10 @@ export function register(name: string, callback: ViewConfigGetter): string {

34 }

35

36 /**

37 - * Retrieves a config for the specified view.

38 - * If this is the first time the view has been used,

39 - * This configuration will be lazy-loaded from UIManager.

40 - */

37 + * Retrieves a config for the specified view.

38 + * If this is the first time the view has been used,

39 + * This configuration will be lazy-loaded from UIManager.

40 + */

41 export function get(name: string): ReactNativeBaseComponentViewConfig {

42 let viewConfig;

43 if (!viewConfigs.has(name)) {

packages/react-native-renderer/src/__tests__/ReactNativeEvents-test.js

+8 -8

@@ -352,14 +352,14 @@ it('handles events without target', () => {

352 ReactNative.render(

353 <View id="parent">

354 <View key={1}>

355 - {renderFirstComponent

356 - ? <View

357 - id="one"

358 - onResponderEnd={() => log.push('one responder end')}

359 - onResponderStart={() => log.push('one responder start')}

360 - onStartShouldSetResponder={() => true}

361 - />

362 - : null}

355 + {renderFirstComponent ? (

356 + <View

357 + id="one"

358 + onResponderEnd={() => log.push('one responder end')}

359 + onResponderStart={() => log.push('one responder start')}

360 + onStartShouldSetResponder={() => true}

361 + />

362 + ) : null}

363 </View>

364 <View key={2}>

365 <View

packages/react-native-renderer/src/__tests__/ReactNativeMount-test.js

+1 -3

@@ -151,9 +151,7 @@ describe('ReactNative', () => {

151 render() {

152 var chars = this.props.chars.split('');

153 return (

154 - <View>

155 - {chars.map(text => <View key={text} title={text} />)}

156 - </View>

154 + <View>{chars.map(text => <View key={text} title={text} />)}</View>

155 );

156 }

157 }

packages/react-noop-renderer/src/ReactNoop.js

+1 -2

@@ -18,8 +18,7 @@ import type {Fiber} from 'react-reconciler/src/ReactFiber';

18 import type {UpdateQueue} from 'react-reconciler/src/ReactFiberUpdateQueue';

19

20 // TODO: direct imports like some-package/src/* are bad. Fix me.

21 -import ReactFiberInstrumentation

22 - from 'react-reconciler/src/ReactFiberInstrumentation';

21 +import ReactFiberInstrumentation from 'react-reconciler/src/ReactFiberInstrumentation';

22 import ReactFiberReconciler from 'react-reconciler';

23 import {enablePersistentReconciler} from 'shared/ReactFeatureFlags';

24 import * as ReactInstanceMap from 'shared/ReactInstanceMap';

packages/react-reconciler/src/ReactChildFiber.js

+4 -6

@@ -10,9 +10,7 @@

10 import type {ReactElement} from 'shared/ReactElementType';

11 import type {ReactCall, ReactPortal, ReactReturn} from 'shared/ReactTypes';

12 import type {Fiber} from 'react-reconciler/src/ReactFiber';

13 -import type {

14 - ExpirationTime,

15 -} from 'react-reconciler/src/ReactFiberExpirationTime';

13 +import type {ExpirationTime} from 'react-reconciler/src/ReactFiberExpirationTime';

14

15 import {enableReactFragment} from 'shared/ReactFeatureFlags';

16 import {NoEffect, Placement, Deletion} from 'shared/ReactTypeOfSideEffect';

@@ -1092,7 +1090,7 @@ function ChildReconciler(shouldClone, shouldTrackSideEffects) {

1090 for (

1091 ;

1092 oldFiber !== null && !step.done;

1095 - newIdx++, (step = newChildren.next())

1093 + newIdx++, step = newChildren.next()

1094 ) {

1095 if (oldFiber.index > newIdx) {

1096 nextOldFiber = oldFiber;

@@ -1147,7 +1145,7 @@ function ChildReconciler(shouldClone, shouldTrackSideEffects) {

1145 if (oldFiber === null) {

1146 // If we don't have any more existing children we can choose a fast path

1147 // since the rest will all be insertions.

1150 - for (; !step.done; newIdx++, (step = newChildren.next())) {

1148 + for (; !step.done; newIdx++, step = newChildren.next()) {

1149 const newFiber = createChild(returnFiber, step.value, expirationTime);

1150 if (newFiber === null) {

1151 continue;

@@ -1168,7 +1166,7 @@ function ChildReconciler(shouldClone, shouldTrackSideEffects) {

1166 const existingChildren = mapRemainingChildren(returnFiber, oldFiber);

1167

1168 // Keep scanning and use the map to restore deleted items as moves.

1171 - for (; !step.done; newIdx++, (step = newChildren.next())) {

1169 + for (; !step.done; newIdx++, step = newChildren.next()) {

1170 const newFiber = updateFromMap(

1171 existingChildren,

1172 returnFiber,

packages/react-reconciler/src/ReactDebugCurrentFiber.js

+1 -3

@@ -8,9 +8,7 @@

8 */

9

10 import {ReactDebugCurrentFrame} from 'shared/ReactGlobalSharedState';

11 -import {

12 - getStackAddendumByWorkInProgressFiber,

13 -} from 'shared/ReactFiberComponentTreeHook';

11 +import {getStackAddendumByWorkInProgressFiber} from 'shared/ReactFiberComponentTreeHook';

12 import getComponentName from 'shared/getComponentName';

13

14 import type {Fiber} from './ReactFiber';

packages/react-reconciler/src/ReactDebugFiberPerf.js

+3 -1

@@ -344,7 +344,9 @@ export function stopWorkLoopTimer(interruptedBy: Fiber | null): void {

344 warning = 'A top-level update interrupted the previous render';

345 } else {

346 const componentName = getComponentName(interruptedBy) || 'Unknown';

347 - warning = `An update to ${componentName} interrupted the previous render`;

347 + warning = `An update to ${

348 + componentName

349 + } interrupted the previous render`;

350 }

351 } else if (commitCountInCurrentWorkLoop > 1) {

352 warning = 'There were cascading updates';

packages/react-reconciler/src/ReactFiberClassComponent.js

+4 -2

@@ -645,8 +645,10 @@ export default function(

645 oldProps === newProps &&

646 oldState === newState &&

647 !hasContextChanged() &&

648 - !(workInProgress.updateQueue !== null &&

649 - workInProgress.updateQueue.hasForceUpdate)

648 + !(

649 + workInProgress.updateQueue !== null &&

650 + workInProgress.updateQueue.hasForceUpdate

651 + )

652 ) {

653 // If an update was already in progress, we should schedule an Update

654 // effect even though we're bailing out, so that cWU/cDU are called.

packages/react-reconciler/src/ReactFiberCommitWork.js

+4 -6

@@ -119,9 +119,8 @@ export default function<T, P, I, TI, PI, C, CC, CX, PL>(

119 case HostRoot: {

120 const updateQueue = finishedWork.updateQueue;

121 if (updateQueue !== null) {

122 - const instance = finishedWork.child !== null

123 - ? finishedWork.child.stateNode

124 - : null;

122 + const instance =

123 + finishedWork.child !== null ? finishedWork.child.stateNode : null;

124 commitCallbacks(updateQueue, instance);

125 }

126 return;

@@ -622,9 +621,8 @@ export default function<T, P, I, TI, PI, C, CC, CX, PL>(

621 // For hydration we reuse the update path but we treat the oldProps

622 // as the newProps. The updatePayload will contain the real change in

623 // this case.

625 - const oldText: string = current !== null

626 - ? current.memoizedProps

627 - : newText;

624 + const oldText: string =

625 + current !== null ? current.memoizedProps : newText;

626 commitTextUpdate(textInstance, oldText, newText);

627 return;

628 }

packages/react-reconciler/src/ReactFiberErrorLogger.js

+3 -1

@@ -47,7 +47,9 @@ export function logCapturedError(capturedError: CapturedError): void {

47 `using the error boundary you provided, ${errorBoundaryName}.`;

48 } else {

49 errorBoundaryMessage =

50 - `This error was initially handled by the error boundary ${errorBoundaryName}.\n` +

50 + `This error was initially handled by the error boundary ${

51 + errorBoundaryName

52 + }.\n` +

53 `Recreating the tree from scratch failed so React will unmount the tree.`;

54 }

55 } else {

packages/react-reconciler/src/ReactFiberScheduler.js

+1 -3

@@ -13,9 +13,7 @@ import type {FiberRoot} from './ReactFiberRoot';

13 import type {HydrationContext} from './ReactFiberHydrationContext';

14 import type {ExpirationTime} from './ReactFiberExpirationTime';

15

16 -import {

17 - getStackAddendumByWorkInProgressFiber,

18 -} from 'shared/ReactFiberComponentTreeHook';

16 +import {getStackAddendumByWorkInProgressFiber} from 'shared/ReactFiberComponentTreeHook';

17 import ReactErrorUtils from 'shared/ReactErrorUtils';

18 import {ReactCurrentOwner} from 'shared/ReactGlobalSharedState';

19 import {

packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.js

+3 -1

@@ -55,7 +55,9 @@ describe('ReactFiberHostContext', () => {

55

56 const container = Renderer.createContainer(/* root: */ null);

57 Renderer.updateContainer(

58 - <a><b /></a>,

58 + <a>

59 + <b />

60 + </a>,

61 container,

62 /* parentComponent: */ null,

63 /* callback: */ null,

packages/react-reconciler/src/__tests__/ReactFragment-test.js

+162 -108

@@ -97,12 +97,14 @@ describe('ReactFragment', () => {

97 }

98

99 function Foo({condition}) {

100 - return condition

101 - ? <Stateful key="a" />

102 - : <React.Fragment>

103 - <Stateful key="a" />

104 - <div key="b">World</div>

105 - </React.Fragment>;

100 + return condition ? (

101 + <Stateful key="a" />

102 + ) : (

103 + <React.Fragment>

104 + <Stateful key="a" />

105 + <div key="b">World</div>

106 + </React.Fragment>

107 + );

108 }

109

110 ReactNoop.render(<Foo condition={true} />);

@@ -135,13 +137,15 @@ describe('ReactFragment', () => {

137 }

138

139 function Foo({condition}) {

138 - return condition

139 - ? <React.Fragment>

140 - <Stateful />

141 - </React.Fragment>

142 - : <React.Fragment>

143 - <Stateful />

144 - </React.Fragment>;

140 + return condition ? (

141 + <React.Fragment>

142 + <Stateful />

143 + </React.Fragment>

144 + ) : (

145 + <React.Fragment>

146 + <Stateful />

147 + </React.Fragment>

148 + );

149 }

150

151 ReactNoop.render(<Foo condition={true} />);

@@ -174,22 +178,24 @@ describe('ReactFragment', () => {

178 }

179

180 function Foo({condition}) {

177 - return condition

178 - ? <React.Fragment>

181 + return condition ? (

182 + <React.Fragment>

183 + <React.Fragment>

184 <React.Fragment>

180 - <React.Fragment>

181 - <Stateful key="a" />

182 - </React.Fragment>

185 + <Stateful key="a" />

186 </React.Fragment>

187 </React.Fragment>

185 - : <React.Fragment>

188 + </React.Fragment>

189 + ) : (

190 + <React.Fragment>

191 + <React.Fragment>

192 <React.Fragment>

187 - <React.Fragment>

188 - <div />

189 - <Stateful key="a" />

190 - </React.Fragment>

193 + <div />

194 + <Stateful key="a" />

195 </React.Fragment>

192 - </React.Fragment>;

196 + </React.Fragment>

197 + </React.Fragment>

198 + );

199 }

200

201 ReactNoop.render(<Foo condition={true} />);

@@ -222,11 +228,17 @@ describe('ReactFragment', () => {

228 }

229

230 function Foo({condition}) {

225 - return condition

226 - ? <React.Fragment>

227 - <React.Fragment><Stateful key="a" /></React.Fragment>

231 + return condition ? (

232 + <React.Fragment>

233 + <React.Fragment>

234 + <Stateful key="a" />

235 </React.Fragment>

229 - : <React.Fragment><Stateful key="a" /></React.Fragment>;

236 + </React.Fragment>

237 + ) : (

238 + <React.Fragment>

239 + <Stateful key="a" />

240 + </React.Fragment>

241 + );

242 }

243

244 ReactNoop.render(<Foo condition={true} />);

@@ -259,13 +271,15 @@ describe('ReactFragment', () => {

271 }

272

273 function Foo({condition}) {

262 - return condition

263 - ? <Stateful key="a" />

264 - : <React.Fragment>

265 - <React.Fragment>

266 - <Stateful key="a" />

267 - </React.Fragment>

268 - </React.Fragment>;

274 + return condition ? (

275 + <Stateful key="a" />

276 + ) : (

277 + <React.Fragment>

278 + <React.Fragment>

279 + <Stateful key="a" />

280 + </React.Fragment>

281 + </React.Fragment>

282 + );

283 }

284

285 ReactNoop.render(<Foo condition={true} />);

@@ -298,14 +312,16 @@ describe('ReactFragment', () => {

312 }

313

314 function Foo({condition}) {

301 - return condition

302 - ? <Stateful key="a" />

303 - : <React.Fragment>

304 - <React.Fragment>

305 - <Stateful key="a" />

306 - </React.Fragment>

307 - <div />

308 - </React.Fragment>;

315 + return condition ? (

316 + <Stateful key="a" />

317 + ) : (

318 + <React.Fragment>

319 + <React.Fragment>

320 + <Stateful key="a" />

321 + </React.Fragment>

322 + <div />

323 + </React.Fragment>

324 + );

325 }

326

327 ReactNoop.render(<Foo condition={true} />);

@@ -338,13 +354,13 @@ describe('ReactFragment', () => {

354 }

355

356 function Foo({condition}) {

341 - return condition

342 - ? <React.Fragment>

343 - <Stateful key="a" />

344 - </React.Fragment>

345 - : <React.Fragment>

346 - {[<Stateful key="a" />]}

347 - </React.Fragment>;

357 + return condition ? (

358 + <React.Fragment>

359 + <Stateful key="a" />

360 + </React.Fragment>

361 + ) : (

362 + <React.Fragment>{[<Stateful key="a" />]}</React.Fragment>

363 + );

364 }

365

366 ReactNoop.render(<Foo condition={true} />);

@@ -377,11 +393,13 @@ describe('ReactFragment', () => {

393 }

394

395 function Foo({condition}) {

380 - return condition

381 - ? [<Stateful key="a" />]

382 - : <React.Fragment>

383 - <Stateful key="a" />

384 - </React.Fragment>;

396 + return condition ? (

397 + [<Stateful key="a" />]

398 + ) : (

399 + <React.Fragment>

400 + <Stateful key="a" />

401 + </React.Fragment>

402 + );

403 }

404

405 ReactNoop.render(<Foo condition={true} />);

@@ -414,11 +432,15 @@ describe('ReactFragment', () => {

432 }

433

434 function Foo({condition}) {

417 - return condition

418 - ? <React.Fragment>{[<Stateful key="a" />]}</React.Fragment>

419 - : <React.Fragment>

420 - <React.Fragment><Stateful key="a" /></React.Fragment>

421 - </React.Fragment>;

435 + return condition ? (

436 + <React.Fragment>{[<Stateful key="a" />]}</React.Fragment>

437 + ) : (

438 + <React.Fragment>

439 + <React.Fragment>

440 + <Stateful key="a" />

441 + </React.Fragment>

442 + </React.Fragment>

443 + );

444 }

445

446 ReactNoop.render(<Foo condition={true} />);

@@ -451,9 +473,11 @@ describe('ReactFragment', () => {

473 }

474

475 function Foo({condition}) {

454 - return condition

455 - ? <React.Fragment>{[<Stateful key="a" />]}</React.Fragment>

456 - : [[<Stateful key="a" />]];

476 + return condition ? (

477 + <React.Fragment>{[<Stateful key="a" />]}</React.Fragment>

478 + ) : (

479 + [[<Stateful key="a" />]]

480 + );

481 }

482

483 ReactNoop.render(<Foo condition={true} />);

@@ -486,11 +510,15 @@ describe('ReactFragment', () => {

510 }

511

512 function Foo({condition}) {

489 - return condition

490 - ? <React.Fragment>

491 - <React.Fragment><Stateful key="a" /></React.Fragment>

513 + return condition ? (

514 + <React.Fragment>

515 + <React.Fragment>

516 + <Stateful key="a" />

517 </React.Fragment>

493 - : [[<Stateful key="a" />]];

518 + </React.Fragment>

519 + ) : (

520 + [[<Stateful key="a" />]]

521 + );

522 }

523

524 ReactNoop.render(<Foo condition={true} />);

@@ -523,14 +551,16 @@ describe('ReactFragment', () => {

551 }

552

553 function Foo({condition}) {

526 - return condition

527 - ? <React.Fragment key="a">

528 - <Stateful />

529 - </React.Fragment>

530 - : <React.Fragment key="b">

531 - <Stateful />

532 - <span>World</span>

533 - </React.Fragment>;

554 + return condition ? (

555 + <React.Fragment key="a">

556 + <Stateful />

557 + </React.Fragment>

558 + ) : (

559 + <React.Fragment key="b">

560 + <Stateful />

561 + <span>World</span>

562 + </React.Fragment>

563 + );

564 }

565

566 ReactNoop.render(<Foo condition={true} />);

@@ -563,13 +593,15 @@ describe('ReactFragment', () => {

593 }

594

595 function Foo({condition}) {

566 - return condition

567 - ? <React.Fragment key="a">

568 - <Stateful />

569 - </React.Fragment>

570 - : <React.Fragment>

571 - <Stateful />

572 - </React.Fragment>;

596 + return condition ? (

597 + <React.Fragment key="a">

598 + <Stateful />

599 + </React.Fragment>

600 + ) : (

601 + <React.Fragment>

602 + <Stateful />

603 + </React.Fragment>

604 + );

605 }

606

607 ReactNoop.render(<Foo condition={true} />);

@@ -602,25 +634,27 @@ describe('ReactFragment', () => {

634 }

635

636 function Foo({condition}) {

605 - return condition

606 - ? <div>

607 - <React.Fragment key="c">

608 - <span>foo</span>

609 - <div key="b">

610 - <Stateful key="a" />

611 - </div>

612 - </React.Fragment>

613 - <span>boop</span>

614 - </div>

615 - : <div>

616 - <span>beep</span>

617 - <React.Fragment key="c">

618 - <div key="b">

619 - <Stateful key="a" />

620 - </div>

621 - <span>bar</span>

622 - </React.Fragment>

623 - </div>;

637 + return condition ? (

638 + <div>

639 + <React.Fragment key="c">

640 + <span>foo</span>

641 + <div key="b">

642 + <Stateful key="a" />

643 + </div>

644 + </React.Fragment>

645 + <span>boop</span>

646 + </div>

647 + ) : (

648 + <div>

649 + <span>beep</span>

650 + <React.Fragment key="c">

651 + <div key="b">

652 + <Stateful key="a" />

653 + </div>

654 + <span>bar</span>

655 + </React.Fragment>

656 + </div>

657 + );

658 }

659

660 ReactNoop.render(<Foo condition={true} />);

@@ -654,11 +688,21 @@ describe('ReactFragment', () => {

688 }

689

690 function Foo({condition}) {

657 - return condition

658 - ? <div>

659 - {<React.Fragment key="foo"><Stateful /></React.Fragment>}<span />

660 - </div>

661 - : <div>{[<Stateful />]}<span /></div>;

691 + return condition ? (

692 + <div>

693 + {

694 + <React.Fragment key="foo">

695 + <Stateful />

696 + </React.Fragment>

697 + }

698 + <span />

699 + </div>

700 + ) : (

701 + <div>

702 + {[<Stateful />]}

703 + <span />

704 + </div>

705 + );

706 }

707

708 ReactNoop.render(<Foo condition={true} />);

@@ -697,8 +741,18 @@ describe('ReactFragment', () => {

741

742 function Foo({condition}) {

743 return condition

700 - ? [<span />, <React.Fragment><Stateful /></React.Fragment>]

701 - : [<span />, <React.Fragment><Stateful /></React.Fragment>];

744 + ? [

745 + <span />,

746 + <React.Fragment>

747 + <Stateful />

748 + </React.Fragment>,

749 + ]

750 + : [

751 + <span />,

752 + <React.Fragment>

753 + <Stateful />

754 + </React.Fragment>,

755 + ];

756 }

757

758 ReactNoop.render(<Foo condition={true} />);

packages/react-reconciler/src/__tests__/ReactIncremental-test.js

+358 -353

@@ -39,7 +39,11 @@ describe('ReactIncremental', () => {

39 var barCalled = false;

40 function Bar() {

41 barCalled = true;

42 - return <span><div>Hello World</div></span>;

42 + return (

43 + <span>

44 + <div>Hello World</div>

45 + </span>

46 + );

47 }

48

49 var fooCalled = false;

@@ -647,9 +651,7 @@ describe('ReactIncremental', () => {

651 return (

652 <div>

653 <Bar>{props.text2}</Bar>

650 - <div hidden={true}>

651 - {props.step === 0 ? step0 : middleContent}

652 - </div>

654 + <div hidden={true}>{props.step === 0 ? step0 : middleContent}</div>

655 </div>

656 );

657 }

@@ -706,171 +708,167 @@ describe('ReactIncremental', () => {

708 expect(ops).toEqual(['Middle']);

709 });

710

709 - xit(

710 - 'can reuse work that began but did not complete, after being preempted',

711 - () => {

712 - let ops = [];

713 - let child;

714 - let sibling;

711 + xit('can reuse work that began but did not complete, after being preempted', () => {

712 + let ops = [];

713 + let child;

714 + let sibling;

715

716 - function GreatGrandchild() {

717 - ops.push('GreatGrandchild');

718 - return <div />;

719 - }

716 + function GreatGrandchild() {

717 + ops.push('GreatGrandchild');

718 + return <div />;

719 + }

720

721 - function Grandchild() {

722 - ops.push('Grandchild');

723 - return <GreatGrandchild />;

724 - }

721 + function Grandchild() {

722 + ops.push('Grandchild');

723 + return <GreatGrandchild />;

724 + }

725

726 - class Child extends React.Component {

727 - state = {step: 0};

728 - render() {

729 - child = this;

730 - ops.push('Child');

731 - return <Grandchild />;

732 - }

726 + class Child extends React.Component {

727 + state = {step: 0};

728 + render() {

729 + child = this;

730 + ops.push('Child');

731 + return <Grandchild />;

732 }

733 + }

734

735 - class Sibling extends React.Component {

736 - render() {

737 - ops.push('Sibling');

738 - sibling = this;

739 - return <div />;

740 - }

735 + class Sibling extends React.Component {

736 + render() {

737 + ops.push('Sibling');

738 + sibling = this;

739 + return <div />;

740 }

741 + }

742

743 - function Parent() {

744 - ops.push('Parent');

745 - return [

746 - // The extra div is necessary because when Parent bails out during the

747 - // high priority update, its progressedPriority is set to high.

748 - // So its direct children cannot be reused when we resume at

749 - // low priority. I think this would be fixed by changing

750 - // pendingWorkPriority and progressedPriority to be the priority of

751 - // the children only, not including the fiber itself.

752 - <div key="a"><Child /></div>,

753 - <Sibling key="b" />,

754 - ];

755 - }

743 + function Parent() {

744 + ops.push('Parent');

745 + return [

746 + // The extra div is necessary because when Parent bails out during the

747 + // high priority update, its progressedPriority is set to high.

748 + // So its direct children cannot be reused when we resume at

749 + // low priority. I think this would be fixed by changing

750 + // pendingWorkPriority and progressedPriority to be the priority of

751 + // the children only, not including the fiber itself.

752 + <div key="a">

753 + <Child />

754 + </div>,

755 + <Sibling key="b" />,

756 + ];

757 + }

758

757 - ReactNoop.render(<Parent />);

758 - ReactNoop.flush();

759 - ops = [];

760 -

761 - // Begin working on a low priority update to Child, but stop before

762 - // GreatGrandchild. Child and Grandchild begin but don't complete.

763 - child.setState({step: 1});

764 - ReactNoop.flushDeferredPri(30);

765 - expect(ops).toEqual(['Child', 'Grandchild']);

766 -

767 - // Interrupt the current low pri work with a high pri update elsewhere in

768 - // the tree.

769 - ops = [];

770 - ReactNoop.flushSync(() => {

771 - sibling.setState({});

772 - });

773 - expect(ops).toEqual(['Sibling']);

759 + ReactNoop.render(<Parent />);

760 + ReactNoop.flush();

761 + ops = [];

762

775 - // Continue the low pri work. The work on Child and GrandChild was memoized

776 - // so they should not be worked on again.

777 - ops = [];

778 - ReactNoop.flush();

779 - expect(ops).toEqual([

780 - // No Child

781 - // No Grandchild

782 - 'GreatGrandchild',

783 - ]);

784 - },

785 - );

786 -

787 - xit(

788 - 'can reuse work if shouldComponentUpdate is false, after being preempted',

789 - () => {

790 - var ops = [];

791 -

792 - function Bar(props) {

793 - ops.push('Bar');

794 - return <div>{props.children}</div>;

795 - }

763 + // Begin working on a low priority update to Child, but stop before

764 + // GreatGrandchild. Child and Grandchild begin but don't complete.

765 + child.setState({step: 1});

766 + ReactNoop.flushDeferredPri(30);

767 + expect(ops).toEqual(['Child', 'Grandchild']);

768

797 - class Middle extends React.Component {

798 - shouldComponentUpdate(nextProps) {

799 - return this.props.children !== nextProps.children;

800 - }

801 - render() {

802 - ops.push('Middle');

803 - return <span>{this.props.children}</span>;

804 - }

805 - }

769 + // Interrupt the current low pri work with a high pri update elsewhere in

770 + // the tree.

771 + ops = [];

772 + ReactNoop.flushSync(() => {

773 + sibling.setState({});

774 + });

775 + expect(ops).toEqual(['Sibling']);

776

807 - class Content extends React.Component {

808 - shouldComponentUpdate(nextProps) {

809 - return this.props.step !== nextProps.step;

810 - }

811 - render() {

812 - ops.push('Content');

813 - return (

814 - <div>

815 - <Middle>{this.props.step === 0 ? 'Hi' : 'Hello'}</Middle>

816 - <Bar>{this.props.step === 0 ? this.props.text : '-'}</Bar>

817 - <Middle>{this.props.step === 0 ? 'There' : 'World'}</Middle>

818 - </div>

819 - );

820 - }

777 + // Continue the low pri work. The work on Child and GrandChild was memoized

778 + // so they should not be worked on again.

779 + ops = [];

780 + ReactNoop.flush();

781 + expect(ops).toEqual([

782 + // No Child

783 + // No Grandchild

784 + 'GreatGrandchild',

785 + ]);

786 + });

787 +

788 + xit('can reuse work if shouldComponentUpdate is false, after being preempted', () => {

789 + var ops = [];

790 +

791 + function Bar(props) {

792 + ops.push('Bar');

793 + return <div>{props.children}</div>;

794 + }

795 +

796 + class Middle extends React.Component {

797 + shouldComponentUpdate(nextProps) {

798 + return this.props.children !== nextProps.children;

799 }

800 + render() {

801 + ops.push('Middle');

802 + return <span>{this.props.children}</span>;

803 + }

804 + }

805

823 - function Foo(props) {

824 - ops.push('Foo');

806 + class Content extends React.Component {

807 + shouldComponentUpdate(nextProps) {

808 + return this.props.step !== nextProps.step;

809 + }

810 + render() {

811 + ops.push('Content');

812 return (

813 <div>

827 - <Bar>{props.text}</Bar>

828 - <div hidden={true}>

829 - <Content step={props.step} text={props.text} />

830 - </div>

814 + <Middle>{this.props.step === 0 ? 'Hi' : 'Hello'}</Middle>

815 + <Bar>{this.props.step === 0 ? this.props.text : '-'}</Bar>

816 + <Middle>{this.props.step === 0 ? 'There' : 'World'}</Middle>

817 </div>

818 );

819 }

820 + }

821

835 - // Init

836 - ReactNoop.render(<Foo text="foo" step={0} />);

837 - ReactNoop.flush();

822 + function Foo(props) {

823 + ops.push('Foo');

824 + return (

825 + <div>

826 + <Bar>{props.text}</Bar>

827 + <div hidden={true}>

828 + <Content step={props.step} text={props.text} />

829 + </div>

830 + </div>

831 + );

832 + }

833

839 - expect(ops).toEqual(['Foo', 'Bar', 'Content', 'Middle', 'Bar', 'Middle']);

834 + // Init

835 + ReactNoop.render(<Foo text="foo" step={0} />);

836 + ReactNoop.flush();

837

841 - ops = [];

838 + expect(ops).toEqual(['Foo', 'Bar', 'Content', 'Middle', 'Bar', 'Middle']);

839

843 - // Make a quick update which will schedule low priority work to

844 - // update the middle content.

845 - ReactNoop.render(<Foo text="bar" step={1} />);

846 - ReactNoop.flushDeferredPri(30 + 5);

840 + ops = [];

841

848 - expect(ops).toEqual(['Foo', 'Bar']);

842 + // Make a quick update which will schedule low priority work to

843 + // update the middle content.

844 + ReactNoop.render(<Foo text="bar" step={1} />);

845 + ReactNoop.flushDeferredPri(30 + 5);

846

850 - ops = [];

847 + expect(ops).toEqual(['Foo', 'Bar']);

848

852 - // The middle content is now pending rendering...

853 - ReactNoop.flushDeferredPri(30 + 25 + 5);

854 - expect(ops).toEqual(['Content', 'Middle', 'Bar']); // One more Middle left.

849 + ops = [];

850

856 - ops = [];

851 + // The middle content is now pending rendering...

852 + ReactNoop.flushDeferredPri(30 + 25 + 5);

853 + expect(ops).toEqual(['Content', 'Middle', 'Bar']); // One more Middle left.

854

858 - // but we'll interrupt it to render some higher priority work.

859 - // The middle content will bailout so it remains untouched.

860 - ReactNoop.render(<Foo text="foo" step={1} />);

861 - ReactNoop.flushDeferredPri(30);

855 + ops = [];

856

863 - expect(ops).toEqual(['Foo', 'Bar']);

857 + // but we'll interrupt it to render some higher priority work.

858 + // The middle content will bailout so it remains untouched.

859 + ReactNoop.render(<Foo text="foo" step={1} />);

860 + ReactNoop.flushDeferredPri(30);

861

865 - ops = [];

862 + expect(ops).toEqual(['Foo', 'Bar']);

863

867 - // Since we did nothing to the middle subtree during the interuption,

868 - // we should be able to reuse the reconciliation work that we already did

869 - // without restarting.

870 - ReactNoop.flush();

871 - expect(ops).toEqual(['Middle']);

872 - },

873 - );

864 + ops = [];

865 +

866 + // Since we did nothing to the middle subtree during the interuption,

867 + // we should be able to reuse the reconciliation work that we already did

868 + // without restarting.

869 + ReactNoop.flush();

870 + expect(ops).toEqual(['Middle']);

871 + });

872

873 it('memoizes work even if shouldComponentUpdate returns false', () => {

874 let ops = [];

@@ -1194,14 +1192,26 @@ describe('ReactIncremental', () => {

1192 ];

1193 }

1194

1197 - ReactNoop.render(<div><Foo step={0} /><Baz /><Baz /></div>);

1195 + ReactNoop.render(

1196 + <div>

1197 + <Foo step={0} />

1198 + <Baz />

1199 + <Baz />

1200 + </div>,

1201 + );

1202 ReactNoop.flush();

1203

1204 ops = [];

1205

1206 // Flush part way through with new props, fully completing the first Bar.

1207 // However, it doesn't commit yet.

1204 - ReactNoop.render(<div><Foo step={1} /><Baz /><Baz /></div>);

1208 + ReactNoop.render(

1209 + <div>

1210 + <Foo step={1} />

1211 + <Baz />

1212 + <Baz />

1213 + </div>,

1214 + );

1215 ReactNoop.flushDeferredPri(45);

1216 expect(ops).toEqual(['Foo', 'Bar:A-1', 'Bar:B-1', 'Baz']);

1217

@@ -1270,55 +1280,52 @@ describe('ReactIncremental', () => {

1280 ]);

1281 });

1282

1273 - xit(

1274 - 'uses state set in componentWillMount even if initial render was aborted',

1275 - () => {

1276 - var ops = [];

1283 + xit('uses state set in componentWillMount even if initial render was aborted', () => {

1284 + var ops = [];

1285

1278 - class LifeCycle extends React.Component {

1279 - constructor(props) {

1280 - super(props);

1281 - this.state = {x: this.props.x + '(ctor)'};

1282 - }

1283 - componentWillMount() {

1284 - ops.push('componentWillMount:' + this.state.x);

1285 - this.setState({x: this.props.x + '(willMount)'});

1286 - }

1287 - componentDidMount() {

1288 - ops.push('componentDidMount:' + this.state.x);

1289 - }

1290 - render() {

1291 - ops.push('render:' + this.state.x);

1292 - return <span />;

1293 - }

1286 + class LifeCycle extends React.Component {

1287 + constructor(props) {

1288 + super(props);

1289 + this.state = {x: this.props.x + '(ctor)'};

1290 }

1295 -

1296 - function App(props) {

1297 - ops.push('App');

1298 - return <LifeCycle x={props.x} />;

1291 + componentWillMount() {

1292 + ops.push('componentWillMount:' + this.state.x);

1293 + this.setState({x: this.props.x + '(willMount)'});

1294 + }

1295 + componentDidMount() {

1296 + ops.push('componentDidMount:' + this.state.x);

1297 + }

1298 + render() {

1299 + ops.push('render:' + this.state.x);

1300 + return <span />;

1301 }

1302 + }

1303

1301 - ReactNoop.render(<App x={0} />);

1302 - ReactNoop.flushDeferredPri(20);

1304 + function App(props) {

1305 + ops.push('App');

1306 + return <LifeCycle x={props.x} />;

1307 + }

1308

1304 - expect(ops).toEqual([

1305 - 'App',

1306 - 'componentWillMount:0(ctor)',

1307 - 'render:0(willMount)',

1308 - ]);

1309 + ReactNoop.render(<App x={0} />);

1310 + ReactNoop.flushDeferredPri(20);

1311

1310 - ops = [];

1311 - ReactNoop.render(<App x={1} />);

1312 - ReactNoop.flush();

1312 + expect(ops).toEqual([

1313 + 'App',

1314 + 'componentWillMount:0(ctor)',

1315 + 'render:0(willMount)',

1316 + ]);

1317

1314 - expect(ops).toEqual([

1315 - 'App',

1316 - 'componentWillMount:0(willMount)',

1317 - 'render:1(willMount)',

1318 - 'componentDidMount:1(willMount)',

1319 - ]);

1320 - },

1321 - );

1318 + ops = [];

1319 + ReactNoop.render(<App x={1} />);

1320 + ReactNoop.flush();

1321 +

1322 + expect(ops).toEqual([

1323 + 'App',

1324 + 'componentWillMount:0(willMount)',

1325 + 'render:1(willMount)',

1326 + 'componentDidMount:1(willMount)',

1327 + ]);

1328 + });

1329

1330 xit('calls componentWill* twice if an update render is aborted', () => {

1331 var ops = [];

@@ -1556,104 +1563,101 @@ describe('ReactIncremental', () => {

1563 // incomplete parents.

1564 });

1565

1559 - xit(

1560 - 'skips will/DidUpdate when bailing unless an update was already in progress',

1561 - () => {

1562 - var ops = [];

1566 + xit('skips will/DidUpdate when bailing unless an update was already in progress', () => {

1567 + var ops = [];

1568

1564 - class LifeCycle extends React.Component {

1565 - componentWillMount() {

1566 - ops.push('componentWillMount');

1567 - }

1568 - componentDidMount() {

1569 - ops.push('componentDidMount');

1570 - }

1571 - componentWillReceiveProps(nextProps) {

1572 - ops.push('componentWillReceiveProps');

1573 - }

1574 - shouldComponentUpdate(nextProps) {

1575 - ops.push('shouldComponentUpdate');

1576 - // Bail

1577 - return this.props.x !== nextProps.x;

1578 - }

1579 - componentWillUpdate(nextProps) {

1580 - ops.push('componentWillUpdate');

1581 - }

1582 - componentDidUpdate(prevProps) {

1583 - ops.push('componentDidUpdate');

1584 - }

1585 - render() {

1586 - ops.push('render');

1587 - return <span />;

1588 - }

1569 + class LifeCycle extends React.Component {

1570 + componentWillMount() {

1571 + ops.push('componentWillMount');

1572 }

1590 -

1591 - function Sibling() {

1592 - ops.push('render sibling');

1573 + componentDidMount() {

1574 + ops.push('componentDidMount');

1575 + }

1576 + componentWillReceiveProps(nextProps) {

1577 + ops.push('componentWillReceiveProps');

1578 + }

1579 + shouldComponentUpdate(nextProps) {

1580 + ops.push('shouldComponentUpdate');

1581 + // Bail

1582 + return this.props.x !== nextProps.x;

1583 + }

1584 + componentWillUpdate(nextProps) {

1585 + ops.push('componentWillUpdate');

1586 + }

1587 + componentDidUpdate(prevProps) {

1588 + ops.push('componentDidUpdate');

1589 + }

1590 + render() {

1591 + ops.push('render');

1592 return <span />;

1593 }

1594 + }

1595

1596 - function App(props) {

1597 - return [<LifeCycle key="a" x={props.x} />, <Sibling key="b" />];

1598 - }

1596 + function Sibling() {

1597 + ops.push('render sibling');

1598 + return <span />;

1599 + }

1600

1600 - ReactNoop.render(<App x={0} />);

1601 - ReactNoop.flush();

1601 + function App(props) {

1602 + return [<LifeCycle key="a" x={props.x} />, <Sibling key="b" />];

1603 + }

1604

1603 - expect(ops).toEqual([

1604 - 'componentWillMount',

1605 - 'render',

1606 - 'render sibling',

1607 - 'componentDidMount',

1608 - ]);

1605 + ReactNoop.render(<App x={0} />);

1606 + ReactNoop.flush();

1607

1610 - ops = [];

1608 + expect(ops).toEqual([

1609 + 'componentWillMount',

1610 + 'render',

1611 + 'render sibling',

1612 + 'componentDidMount',

1613 + ]);

1614

1612 - // Update to same props

1613 - ReactNoop.render(<App x={0} />);

1614 - ReactNoop.flush();

1615 + ops = [];

1616

1616 - expect(ops).toEqual([

1617 - 'componentWillReceiveProps',

1618 - 'shouldComponentUpdate',

1619 - // no componentWillUpdate

1620 - // no render

1621 - 'render sibling',

1622 - // no componentDidUpdate

1623 - ]);

1624 -

1625 - ops = [];

1626 -

1627 - // Begin updating to new props...

1628 - ReactNoop.render(<App x={1} />);

1629 - ReactNoop.flushDeferredPri(30);

1630 -

1631 - expect(ops).toEqual([

1632 - 'componentWillReceiveProps',

1633 - 'shouldComponentUpdate',

1634 - 'componentWillUpdate',

1635 - 'render',

1636 - 'render sibling',

1637 - // no componentDidUpdate yet

1638 - ]);

1639 -

1640 - ops = [];

1641 -

1642 - // ...but we'll interrupt it to rerender the same props.

1643 - ReactNoop.render(<App x={1} />);

1644 - ReactNoop.flush();

1617 + // Update to same props

1618 + ReactNoop.render(<App x={0} />);

1619 + ReactNoop.flush();

1620

1646 - // We can bail out this time, but we must call componentDidUpdate.

1647 - expect(ops).toEqual([

1648 - 'componentWillReceiveProps',

1649 - 'shouldComponentUpdate',

1650 - // no componentWillUpdate

1651 - // no render

1652 - 'render sibling',

1653 - 'componentDidUpdate',

1654 - ]);

1655 - },

1656 - );

1621 + expect(ops).toEqual([

1622 + 'componentWillReceiveProps',

1623 + 'shouldComponentUpdate',

1624 + // no componentWillUpdate

1625 + // no render

1626 + 'render sibling',

1627 + // no componentDidUpdate

1628 + ]);

1629 +

1630 + ops = [];

1631 +

1632 + // Begin updating to new props...

1633 + ReactNoop.render(<App x={1} />);

1634 + ReactNoop.flushDeferredPri(30);

1635 +

1636 + expect(ops).toEqual([

1637 + 'componentWillReceiveProps',

1638 + 'shouldComponentUpdate',

1639 + 'componentWillUpdate',

1640 + 'render',

1641 + 'render sibling',

1642 + // no componentDidUpdate yet

1643 + ]);

1644 +

1645 + ops = [];

1646 +

1647 + // ...but we'll interrupt it to rerender the same props.

1648 + ReactNoop.render(<App x={1} />);

1649 + ReactNoop.flush();

1650 +

1651 + // We can bail out this time, but we must call componentDidUpdate.

1652 + expect(ops).toEqual([

1653 + 'componentWillReceiveProps',

1654 + 'shouldComponentUpdate',

1655 + // no componentWillUpdate

1656 + // no render

1657 + 'render sibling',

1658 + 'componentDidUpdate',

1659 + ]);

1660 + });

1661

1662 it('can nest batchedUpdates', () => {

1663 var ops = [];

@@ -2120,11 +2124,7 @@ describe('ReactIncremental', () => {

2124 state = {locale: 'fr'};

2125 render() {

2126 statefulInst = this;

2123 - return (

2124 - <Intl locale={this.state.locale}>

2125 - {this.props.children}

2126 - </Intl>

2127 - );

2127 + return <Intl locale={this.state.locale}>{this.props.children}</Intl>;

2128 }

2129 }

2130

@@ -2240,9 +2240,11 @@ describe('ReactIncremental', () => {

2240 if (this.state.throwError) {

2241 throw Error();

2242 }

2243 - return this.props.depth < 4

2244 - ? <ContextProvider depth={this.props.depth + 1} />

2245 - : <div />;

2243 + return this.props.depth < 4 ? (

2244 + <ContextProvider depth={this.props.depth + 1} />

2245 + ) : (

2246 + <div />

2247 + );

2248 }

2249 }

2250

@@ -2304,91 +2306,88 @@ describe('ReactIncremental', () => {

2306 ]);

2307 });

2308

2307 - xit(

2308 - 'should reuse memoized work if pointers are updated before calling lifecycles',

2309 - () => {

2310 - let cduNextProps = [];

2311 - let cduPrevProps = [];

2312 - let scuNextProps = [];

2313 - let scuPrevProps = [];

2314 - let renderCounter = 0;

2309 + xit('should reuse memoized work if pointers are updated before calling lifecycles', () => {

2310 + let cduNextProps = [];

2311 + let cduPrevProps = [];

2312 + let scuNextProps = [];

2313 + let scuPrevProps = [];

2314 + let renderCounter = 0;

2315

2316 - function SecondChild(props) {

2317 - return <span>{props.children}</span>;

2318 - }

2316 + function SecondChild(props) {

2317 + return <span>{props.children}</span>;

2318 + }

2319

2320 - class FirstChild extends React.Component {

2321 - componentDidUpdate(prevProps, prevState) {

2322 - cduNextProps.push(this.props);

2323 - cduPrevProps.push(prevProps);

2324 - }

2325 - shouldComponentUpdate(nextProps, nextState) {

2326 - scuNextProps.push(nextProps);

2327 - scuPrevProps.push(this.props);

2328 - return this.props.children !== nextProps.children;

2329 - }

2330 - render() {

2331 - renderCounter++;

2332 - return <span>{this.props.children}</span>;

2333 - }

2320 + class FirstChild extends React.Component {

2321 + componentDidUpdate(prevProps, prevState) {

2322 + cduNextProps.push(this.props);

2323 + cduPrevProps.push(prevProps);

2324 }

2335 -

2336 - class Middle extends React.Component {

2337 - render() {

2338 - return (

2339 - <div>

2340 - <FirstChild>{this.props.children}</FirstChild>

2341 - <SecondChild>{this.props.children}</SecondChild>

2342 - </div>

2343 - );

2344 - }

2325 + shouldComponentUpdate(nextProps, nextState) {

2326 + scuNextProps.push(nextProps);

2327 + scuPrevProps.push(this.props);

2328 + return this.props.children !== nextProps.children;

2329 + }

2330 + render() {

2331 + renderCounter++;

2332 + return <span>{this.props.children}</span>;

2333 }

2334 + }

2335

2347 - function Root(props) {

2336 + class Middle extends React.Component {

2337 + render() {

2338 return (

2349 - <div hidden={true}>

2350 - <Middle {...props} />

2339 + <div>

2340 + <FirstChild>{this.props.children}</FirstChild>

2341 + <SecondChild>{this.props.children}</SecondChild>

2342 </div>

2343 );

2344 }

2345 + }

2346

2355 - // Initial render of the entire tree.

2356 - // Renders: Root, Middle, FirstChild, SecondChild

2357 - ReactNoop.render(<Root>A</Root>);

2358 - ReactNoop.flush();

2347 + function Root(props) {

2348 + return (

2349 + <div hidden={true}>

2350 + <Middle {...props} />

2351 + </div>

2352 + );

2353 + }

2354

2360 - expect(renderCounter).toBe(1);

2361 -

2362 - // Schedule low priority work to update children.

2363 - // Give it enough time to partially render.

2364 - // Renders: Root, Middle, FirstChild

2365 - ReactNoop.render(<Root>B</Root>);

2366 - ReactNoop.flushDeferredPri(20 + 30 + 5);

2367 -

2368 - // At this point our FirstChild component has rendered a second time,

2369 - // But since the render is not completed cDU should not be called yet.

2370 - expect(renderCounter).toBe(2);

2371 - expect(scuPrevProps).toEqual([{children: 'A'}]);

2372 - expect(scuNextProps).toEqual([{children: 'B'}]);

2373 - expect(cduPrevProps).toEqual([]);

2374 - expect(cduNextProps).toEqual([]);

2375 -

2376 - // Next interrupt the partial render with higher priority work.

2377 - // The in-progress child content will bailout.

2378 - // Renders: Root, Middle, FirstChild, SecondChild

2379 - ReactNoop.render(<Root>B</Root>);

2380 - ReactNoop.flush();

2355 + // Initial render of the entire tree.

2356 + // Renders: Root, Middle, FirstChild, SecondChild

2357 + ReactNoop.render(<Root>A</Root>);

2358 + ReactNoop.flush();

2359 +

2360 + expect(renderCounter).toBe(1);

2361 +

2362 + // Schedule low priority work to update children.

2363 + // Give it enough time to partially render.

2364 + // Renders: Root, Middle, FirstChild

2365 + ReactNoop.render(<Root>B</Root>);

2366 + ReactNoop.flushDeferredPri(20 + 30 + 5);

2367 +

2368 + // At this point our FirstChild component has rendered a second time,

2369 + // But since the render is not completed cDU should not be called yet.

2370 + expect(renderCounter).toBe(2);

2371 + expect(scuPrevProps).toEqual([{children: 'A'}]);

2372 + expect(scuNextProps).toEqual([{children: 'B'}]);

2373 + expect(cduPrevProps).toEqual([]);

2374 + expect(cduNextProps).toEqual([]);

2375 +

2376 + // Next interrupt the partial render with higher priority work.

2377 + // The in-progress child content will bailout.

2378 + // Renders: Root, Middle, FirstChild, SecondChild

2379 + ReactNoop.render(<Root>B</Root>);

2380 + ReactNoop.flush();

2381

2382 - // At this point the higher priority render has completed.

2383 - // Since FirstChild props didn't change, sCU returned false.

2384 - // The previous memoized copy should be used.

2385 - expect(renderCounter).toBe(2);

2386 - expect(scuPrevProps).toEqual([{children: 'A'}, {children: 'B'}]);

2387 - expect(scuNextProps).toEqual([{children: 'B'}, {children: 'B'}]);

2388 - expect(cduPrevProps).toEqual([{children: 'A'}]);

2389 - expect(cduNextProps).toEqual([{children: 'B'}]);

2390 - },

2391 - );

2382 + // At this point the higher priority render has completed.

2383 + // Since FirstChild props didn't change, sCU returned false.

2384 + // The previous memoized copy should be used.

2385 + expect(renderCounter).toBe(2);

2386 + expect(scuPrevProps).toEqual([{children: 'A'}, {children: 'B'}]);

2387 + expect(scuNextProps).toEqual([{children: 'B'}, {children: 'B'}]);

2388 + expect(cduPrevProps).toEqual([{children: 'A'}]);

2389 + expect(cduNextProps).toEqual([{children: 'B'}]);

2390 + });

2391

2392 it('updates descendants with new context values', () => {

2393 let rendered = [];

@@ -2428,7 +2427,11 @@ describe('ReactIncremental', () => {

2427 }

2428

2429 ReactNoop.render(

2431 - <TopContextProvider><Middle><Child /></Middle></TopContextProvider>,

2430 + <TopContextProvider>

2431 + <Middle>

2432 + <Child />

2433 + </Middle>

2434 + </TopContextProvider>,

2435 );

2436

2437 ReactNoop.flush();

@@ -2549,7 +2552,9 @@ describe('ReactIncremental', () => {

2552 ReactNoop.render(

2553 <TopContextProvider>

2554 <MiddleScu>

2552 - <MiddleContextProvider><Child /></MiddleContextProvider>

2555 + <MiddleContextProvider>

2556 + <Child />

2557 + </MiddleContextProvider>

2558 </MiddleScu>

2559 </TopContextProvider>,

2560 );

packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.js

+6 -6

@@ -891,11 +891,7 @@ describe('ReactIncrementalErrorHandling', () => {

891 }

892

893 function Foo(props) {

894 - return (

895 - <div>

896 - {props.hide ? null : <Bar ref={barRef} />}

897 - </div>

898 - );

894 + return <div>{props.hide ? null : <Bar ref={barRef} />}</div>;

895 }

896

897 ReactNoop.render(<Foo />);

@@ -1148,7 +1144,11 @@ describe('ReactIncrementalErrorHandling', () => {

1144 }

1145 }

1146

1151 - ReactNoop.render(<ErrorBoundary><Foo /></ErrorBoundary>);

1147 + ReactNoop.render(

1148 + <ErrorBoundary>

1149 + <Foo />

1150 + </ErrorBoundary>,

1151 + );

1152 expect(ReactNoop.flush()).toEqual([

1153 'render: 0',

1154 'render: 1',

packages/react-reconciler/src/__tests__/ReactIncrementalPerf-test.js

+42 -8

@@ -134,11 +134,19 @@ describe('ReactDebugFiberPerf', () => {

134 }

135

136 it('measures a simple reconciliation', () => {

137 - ReactNoop.render(<Parent><Child /></Parent>);

137 + ReactNoop.render(

138 + <Parent>

139 + <Child />

140 + </Parent>,

141 + );

142 addComment('Mount');

143 ReactNoop.flush();

144

141 - ReactNoop.render(<Parent><Child /></Parent>);

145 + ReactNoop.render(

146 + <Parent>

147 + <Child />

148 + </Parent>,

149 + );

150 addComment('Update');

151 ReactNoop.flush();

152

@@ -196,7 +204,11 @@ describe('ReactDebugFiberPerf', () => {

204 }

205 }

206

199 - ReactNoop.render(<Parent><Cascading /></Parent>);

207 + ReactNoop.render(

208 + <Parent>

209 + <Cascading />

210 + </Parent>,

211 + );

212 addComment('Should print a warning');

213 ReactNoop.flush();

214 expect(getFlameChart()).toMatchSnapshot();

@@ -233,10 +245,18 @@ describe('ReactDebugFiberPerf', () => {

245 }

246 }

247

236 - ReactNoop.render(<Parent><NotCascading /></Parent>);

248 + ReactNoop.render(

249 + <Parent>

250 + <NotCascading />

251 + </Parent>,

252 + );

253 addComment('Should not print a warning');

254 ReactNoop.flush();

239 - ReactNoop.render(<Parent><NotCascading /></Parent>);

255 + ReactNoop.render(

256 + <Parent>

257 + <NotCascading />

258 + </Parent>,

259 + );

260 addComment('Should not print a warning');

261 ReactNoop.flush();

262 expect(getFlameChart()).toMatchSnapshot();

@@ -328,14 +348,22 @@ describe('ReactDebugFiberPerf', () => {

348 throw new Error('Game over');

349 }

350

331 - ReactNoop.render(<Parent><Baddie /></Parent>);

351 + ReactNoop.render(

352 + <Parent>

353 + <Baddie />

354 + </Parent>,

355 + );

356 try {

357 addComment('Will fatal');

358 ReactNoop.flush();

359 } catch (err) {

360 expect(err.message).toBe('Game over');

361 }

338 - ReactNoop.render(<Parent><Child /></Parent>);

362 + ReactNoop.render(

363 + <Parent>

364 + <Child />

365 + </Parent>,

366 + );

367 addComment('Will reconcile from a clean state');

368 ReactNoop.flush();

369 expect(getFlameChart()).toMatchSnapshot();

@@ -464,7 +492,13 @@ describe('ReactDebugFiberPerf', () => {

492 }

493

494 function App() {

467 - return <div><CoParent foo={true}><Indirection /></CoParent></div>;

495 + return (

496 + <div>

497 + <CoParent foo={true}>

498 + <Indirection />

499 + </CoParent>

500 + </div>

501 + );

502 }

503

504 ReactNoop.render(<App />);

packages/react-reconciler/src/__tests__/ReactIncrementalReflection-test.js

+7 -9

@@ -145,15 +145,13 @@ describe('ReactIncrementalReflection', () => {

145 }

146 render() {

147 ops.push('render');

148 - return this.props.step < 2

149 - ? <span ref={ref => (this.span = ref)} />

150 - : this.props.step === 2

151 - ? <div ref={ref => (this.div = ref)} />

152 - : this.props.step === 3

153 - ? null

154 - : this.props.step === 4

155 - ? <div ref={ref => (this.span = ref)} />

156 - : null;

148 + return this.props.step < 2 ? (

149 + <span ref={ref => (this.span = ref)} />

150 + ) : this.props.step === 2 ? (

151 + <div ref={ref => (this.div = ref)} />

152 + ) : this.props.step === 3 ? null : this.props.step === 4 ? (

153 + <div ref={ref => (this.span = ref)} />

154 + ) : null;

155 }

156 }

157

packages/react-reconciler/src/__tests__/ReactIncrementalSideEffects-test.js

+30 -26

@@ -67,8 +67,8 @@ describe('ReactIncrementalSideEffects', () => {

67 {props.text === 'World'

68 ? [<Bar key="a" text={props.text} />, <div key="b" />]

69 : props.text === 'Hi'

70 - ? [<div key="b" />, <Bar key="a" text={props.text} />]

71 - : null}

70 + ? [<div key="b" />, <Bar key="a" text={props.text} />]

71 + : null}

72 <span prop="test" />

73 </div>

74 );

@@ -161,11 +161,13 @@ describe('ReactIncrementalSideEffects', () => {

161 function Foo(props) {

162 return (

163 <div>

164 - {props.useClass

165 - ? <ClassComponent />

166 - : props.useFunction

167 - ? <FunctionalComponent />

168 - : props.useText ? 'Text' : null}

164 + {props.useClass ? (

165 + <ClassComponent />

166 + ) : props.useFunction ? (

167 + <FunctionalComponent />

168 + ) : props.useText ? (

169 + 'Text'

170 + ) : null}

171 Trail

172 </div>

173 );

@@ -211,9 +213,11 @@ describe('ReactIncrementalSideEffects', () => {

213 function Foo(props) {

214 return (

215 <div>

214 - {props.useClass

215 - ? <ClassComponent key="a" />

216 - : props.useFunction ? <FunctionalComponent key="a" /> : null}

216 + {props.useClass ? (

217 + <ClassComponent key="a" />

218 + ) : props.useFunction ? (

219 + <FunctionalComponent key="a" />

220 + ) : null}

221 Trail

222 </div>

223 );

@@ -311,12 +315,14 @@ describe('ReactIncrementalSideEffects', () => {

315 function Foo(props) {

316 return (

317 <div hidden={true}>

314 - {props.step === 0

315 - ? <div>

316 - <Bar>Hi</Bar>

317 - <Bar>{props.text}</Bar>

318 - </div>

319 - : middleContent}

318 + {props.step === 0 ? (

319 + <div>

320 + <Bar>Hi</Bar>

321 + <Bar>{props.text}</Bar>

322 + </div>

323 + ) : (

324 + middleContent

325 + )}

326 </div>

327 );

328 }

@@ -879,9 +885,7 @@ describe('ReactIncrementalSideEffects', () => {

885 [<Bar key="e" name="E" />, <Bar key="f" name="F" />],

886 ]

887 : []}

882 - <div>

883 - {props.show ? <Bar key="g" name="G" /> : null}

884 - </div>

888 + <div>{props.show ? <Bar key="g" name="G" /> : null}</div>

889 <Bar name="this should not unmount" />

890 </div>

891 );

@@ -999,13 +1003,13 @@ describe('ReactIncrementalSideEffects', () => {

1003 }

1004

1005 function Foo(props) {

1002 - return props.show

1003 - ? <div>

1004 - <ClassComponent ref={n => ops.push(n)} />

1005 - <FunctionalComponent ref={n => ops.push(n)} />

1006 - <div ref={n => ops.push(n)} />

1007 - </div>

1008 - : null;

1006 + return props.show ? (

1007 + <div>

1008 + <ClassComponent ref={n => ops.push(n)} />

1009 + <FunctionalComponent ref={n => ops.push(n)} />

1010 + <div ref={n => ops.push(n)} />

1011 + </div>

1012 + ) : null;

1013 }

1014

1015 ReactNoop.render(<Foo show={true} />);

packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js

+14 -2

@@ -128,7 +128,13 @@ describe('ReactIncrementalUpdates', () => {

128 state = {};

129 render() {

130 instance = this;

131 - return <span prop={Object.keys(this.state).sort().join('')} />;

131 + return (

132 + <span

133 + prop={Object.keys(this.state)

134 + .sort()

135 + .join('')}

136 + />

137 + );

138 }

139 }

140

@@ -177,7 +183,13 @@ describe('ReactIncrementalUpdates', () => {

183 state = {};

184 render() {

185 instance = this;

180 - return <span prop={Object.keys(this.state).sort().join('')} />;

186 + return (

187 + <span

188 + prop={Object.keys(this.state)

189 + .sort()

190 + .join('')}

191 + />

192 + );

193 }

194 }

195

packages/react-reconciler/src/__tests__/ReactPersistent-test.js

+6 -1

@@ -152,7 +152,12 @@ describe('ReactPersistent', () => {

152 }

153

154 function Child(props) {

155 - return <div><BailoutTest />{props.children}</div>;

155 + return (

156 + <div>

157 + <BailoutTest />

158 + {props.children}

159 + </div>

160 + );

161 }

162 const portalContainer = {rootID: 'persistent-portal-test', children: []};

163 const emptyPortalChildSet = portalContainer.children;

packages/react-reconciler/src/__tests__/ReactTopLevelFragment-test.js

+10 -6

@@ -40,9 +40,11 @@ describe('ReactTopLevelFragment', function() {

40 }

41

42 function Fragment({condition}) {

43 - return condition

44 - ? <Stateful key="a" />

45 - : [<Stateful key="a" />, <div key="b">World</div>];

43 + return condition ? (

44 + <Stateful key="a" />

45 + ) : (

46 + [<Stateful key="a" />, <div key="b">World</div>]

47 + );

48 }

49 ReactNoop.render(<Fragment />);

50 ReactNoop.flush();

@@ -70,9 +72,11 @@ describe('ReactTopLevelFragment', function() {

72 }

73

74 function Fragment({condition}) {

73 - return condition

74 - ? <Stateful key="a" />

75 - : [[<Stateful key="a" />, <div key="b">World</div>], <div key="c" />];

75 + return condition ? (

76 + <Stateful key="a" />

77 + ) : (

78 + [[<Stateful key="a" />, <div key="b">World</div>], <div key="c" />]

79 + );

80 }

81 ReactNoop.render(<Fragment />);

82 ReactNoop.flush();

packages/react-rt-renderer/src/ReactNativeRT.js

+4 -6

@@ -11,11 +11,8 @@ import type {ReactNativeRTType} from './ReactNativeRTTypes';

11 import type {ReactNodeList} from 'shared/ReactTypes';

12

13 // TODO: direct imports like some-package/src/* are bad. Fix me.

14 -import * as ReactFiberErrorLogger

15 - from 'react-reconciler/src/ReactFiberErrorLogger';

16 -import {

17 - showDialog,

18 -} from 'react-native-renderer/src/ReactNativeFiberErrorDialog';

14 +import * as ReactFiberErrorLogger from 'react-reconciler/src/ReactFiberErrorLogger';

15 +import {showDialog} from 'react-native-renderer/src/ReactNativeFiberErrorDialog';

16 import * as ReactPortal from 'react-reconciler/src/ReactPortal';

17 import * as ReactGenericBatching from 'events/ReactGenericBatching';

18 import ReactVersion from 'shared/ReactVersion';

@@ -84,7 +81,8 @@ const ReactNativeRTFiber: ReactNativeRTType = {

81

82 ReactNativeRTFiberRenderer.injectIntoDevTools({

83 findFiberByHostInstance: getFiberFromTag,

87 - getInspectorDataForViewTag: ReactNativeRTFiberInspector.getInspectorDataForViewTag,

84 + getInspectorDataForViewTag:

85 + ReactNativeRTFiberInspector.getInspectorDataForViewTag,

86 bundleType: __DEV__ ? 1 : 0,

87 version: ReactVersion,

88 rendererPackageName: 'react-rt-renderer',

packages/react-rt-renderer/src/__tests__/ReactNativeRT-test.js

+6 -1

@@ -46,7 +46,12 @@ describe('ReactNativeRT', () => {

46 expect(RTManager.appendChild).not.toBeCalled();

47 expect(RTManager.updateNode).toBeCalledWith(1, {foo: 'bar'});

48

49 - ReactNativeRT.render(<rt-box foo="bar"><rt-box /></rt-box>, 11);

49 + ReactNativeRT.render(

50 + <rt-box foo="bar">

51 + <rt-box />

52 + </rt-box>,

53 + 11,

54 + );

55

56 expect(RTManager.createNode.mock.calls.length).toBe(2);

57 expect(RTManager.appendChildToContext.mock.calls.length).toBe(1);

packages/react-test-renderer/src/ReactShallowRenderer.js

+1 -1

@@ -44,7 +44,7 @@ class ReactShallowRenderer {

44 'ReactShallowRenderer render(): Invalid component element.%s',

45 typeof element === 'function'

46 ? ' Instead of passing a component class, make sure to instantiate ' +

47 - 'it by passing it to React.createElement.'

47 + 'it by passing it to React.createElement.'

48 : '',

49 );

50 // Show a special message for host elements since it's a common case.

packages/react-test-renderer/src/ReactTestRenderer.js

+4 -3

@@ -540,9 +540,10 @@ function expectOne(

540 return all[0];

541 }

542

543 - const prefix = all.length === 0

544 - ? 'No instances found '

545 - : `Expected 1 but found ${all.length} instances `;

543 + const prefix =

544 + all.length === 0

545 + ? 'No instances found '

546 + : `Expected 1 but found ${all.length} instances `;

547

548 throw new Error(prefix + message);

549 }

packages/react-test-renderer/src/__tests__/ReactShallowRenderer-test.js

+8 -16

@@ -65,7 +65,11 @@ describe('ReactShallowRenderer', () => {

65

66 it('should only render 1 level deep', () => {

67 function Parent() {

68 - return <div><Child /></div>;

68 + return (

69 + <div>

70 + <Child />

71 + </div>

72 + );

73 }

74 function Child() {

75 throw Error('This component should not render');

@@ -638,11 +642,7 @@ describe('ReactShallowRenderer', () => {

642 };

643 render() {

644 instance = this;

641 - return (

642 - <p>

643 - {this.state.counter}

644 - </p>

645 - );

645 + return <p>{this.state.counter}</p>;

646 }

647 }

648

@@ -670,11 +670,7 @@ describe('ReactShallowRenderer', () => {

670 };

671 render() {

672 instance = this;

673 - return (

674 - <p>

675 - {this.state.counter}

676 - </p>

677 - );

673 + return <p>{this.state.counter}</p>;

674 }

675 }

676

@@ -708,11 +704,7 @@ describe('ReactShallowRenderer', () => {

704 };

705 render() {

706 instance = this;

711 - return (

712 - <p>

713 - {this.state.counter}

714 - </p>

715 - );

707 + return <p>{this.state.counter}</p>;

708 }

709 }

710

packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.js

+19 -15

@@ -371,9 +371,14 @@ describe('ReactTestRenderer', () => {

371 return <div />;

372 }

373 }

374 - const inst = ReactTestRenderer.create(<div><Foo /></div>, {

375 - createNodeMock: () => 'foo',

376 - });

374 + const inst = ReactTestRenderer.create(

375 + <div>

376 + <Foo />

377 + </div>,

378 + {

379 + createNodeMock: () => 'foo',

380 + },

381 + );

382 expect(() => inst.unmount()).not.toThrow();

383 expect(count).toEqual(1);

384 });

@@ -420,7 +425,10 @@ describe('ReactTestRenderer', () => {

425 log.push('Boundary render');

426 if (!this.state.error) {

427 return (

423 - <div><button onClick={this.onClick}>ClickMe</button><Angry /></div>

428 + <div>

429 + <button onClick={this.onClick}>ClickMe</button>

430 + <Angry />

431 + </div>

432 );

433 } else {

434 return <div>Happy Birthday!</div>;

@@ -457,11 +465,7 @@ describe('ReactTestRenderer', () => {

465 it('can update text nodes', () => {

466 class Component extends React.Component {

467 render() {

460 - return (

461 - <div>

462 - {this.props.children}

463 - </div>

464 - );

468 + return <div>{this.props.children}</div>;

469 }

470 }

471

@@ -489,7 +493,11 @@ describe('ReactTestRenderer', () => {

493 children: ['42'],

494 props: {},

495 });

492 - renderer.update(<Component><div /></Component>);

496 + renderer.update(

497 + <Component>

498 + <div />

499 + </Component>,

500 + );

501 expect(renderer.toJSON()).toEqual({

502 type: 'div',

503 children: [

@@ -696,11 +704,7 @@ describe('ReactTestRenderer', () => {

704 class Bar extends React.Component {

705 render() {

706 const {special, children} = this.props;

699 - return (

700 - <Foo className={special ? 'special' : 'normal'}>

701 - {children}

702 - </Foo>

703 - );

707 + return <Foo className={special ? 'special' : 'normal'}>{children}</Foo>;

708 }

709 }

710

packages/react/src/ReactElement.js

+4 -3

@@ -237,9 +237,10 @@ export function createElement(type, config, children) {

237 typeof props.$$typeof === 'undefined' ||

238 props.$$typeof !== REACT_ELEMENT_TYPE

239 ) {

240 - var displayName = typeof type === 'function'

241 - ? type.displayName || type.name || 'Unknown'

242 - : type;

240 + var displayName =

241 + typeof type === 'function'

242 + ? type.displayName || type.name || 'Unknown'

243 + : type;

244 if (key) {

245 defineKeyPropWarningGetter(props, displayName);

246 }

packages/react/src/ReactElementValidator.js

+7 -4

@@ -101,9 +101,10 @@ function getCurrentComponentErrorInfo(parentType) {

101 var info = getDeclarationErrorAddendum();

102

103 if (!info) {

104 - var parentName = typeof parentType === 'string'

105 - ? parentType

106 - : parentType.displayName || parentType.name;

104 + var parentName =

105 + typeof parentType === 'string'

106 + ? parentType

107 + : parentType.displayName || parentType.name;

108 if (parentName) {

109 info = `\n\nCheck the top-level render call using <${parentName}>.`;

110 }

@@ -144,7 +145,9 @@ function validateExplicitKey(element, parentType) {

145 element._owner !== ReactCurrentOwner.current

146 ) {

147 // Give the component that originally created this child.

147 - childOwner = ` It was passed a child from ${getComponentName(element._owner)}.`;

148 + childOwner = ` It was passed a child from ${getComponentName(

149 + element._owner,

150 + )}.`;

151 }

152

153 currentlyValidatingElement = element;

packages/react/src/__tests__/ReactChildren-test.js

+4 -20

@@ -233,11 +233,7 @@ describe('ReactChildren', () => {

233 return kid;

234 });

235

236 - var instance = (

237 - <div>

238 - {[[zero, one, two], [three, four], five]}

239 - </div>

240 - );

236 + var instance = <div>{[[zero, one, two], [three, four], five]}</div>;

237

238 function assertCalls() {

239 expect(callback.calls.count()).toBe(6);

@@ -327,11 +323,7 @@ describe('ReactChildren', () => {

323 return kid;

324 });

325

330 - var instance = (

331 - <div>

332 - {threeDivIterable}

333 - </div>

334 - );

326 + var instance = <div>{threeDivIterable}</div>;

327

328 function assertCalls() {

329 expect(callback.calls.count()).toBe(3);

@@ -385,11 +377,7 @@ describe('ReactChildren', () => {

377 return kid;

378 });

379

388 - var instance = (

389 - <div>

390 - {threeDivIterable}

391 - </div>

392 - );

380 + var instance = <div>{threeDivIterable}</div>;

381

382 function assertCalls() {

383 expect(callback.calls.count()).toBe(3);

@@ -815,11 +803,7 @@ describe('ReactChildren', () => {

803 var four = <div key="keyFour" />;

804 var five = <div key="keyFive" />;

805

818 - var instance = (

819 - <div>

820 - {[[[zero, one, two], [three, four], five], null]}

821 - </div>

822 - );

806 + var instance = <div>{[[[zero, one, two], [three, four], five], null]}</div>;

807 var numberOfChildren = React.Children.count(instance.props.children);

808 expect(numberOfChildren).toBe(7);

809 });

packages/react/src/__tests__/ReactElementClone-test.js

+11 -5

@@ -90,9 +90,7 @@ describe('ReactElementClone', () => {

90 class Parent extends React.Component {

91 render() {

92 return (

93 - <div>

94 - {React.cloneElement(this.props.child, {className: 'xyz'})}

95 - </div>

93 + <div>{React.cloneElement(this.props.child, {className: 'xyz'})}</div>

94 );

95 }

96 }

@@ -189,7 +187,11 @@ describe('ReactElementClone', () => {

187

188 class Grandparent extends React.Component {

189 render() {

192 - return <Parent ref="parent"><span key="abc" /></Parent>;

190 + return (

191 + <Parent ref="parent">

192 + <span key="abc" />

193 + </Parent>

194 + );

195 }

196 }

197

@@ -207,7 +209,11 @@ describe('ReactElementClone', () => {

209

210 class Grandparent extends React.Component {

211 render() {

210 - return <Parent ref="parent"><span ref="child" /></Parent>;

212 + return (

213 + <Parent ref="parent">

214 + <span ref="child" />

215 + </Parent>

216 + );

217 }

218 }

219

packages/react/src/__tests__/ReactJSXElement-test.js

+7 -1

@@ -132,7 +132,13 @@ describe('ReactJSXElement', () => {

132 var a = 1;

133 var b = 2;

134 var c = 3;

135 - var element = <Component>{a}{b}{c}</Component>;

135 + var element = (

136 + <Component>

137 + {a}

138 + {b}

139 + {c}

140 + </Component>

141 + );

142 expect(element.props.children).toEqual([1, 2, 3]);

143 expectDev(console.error.calls.count()).toBe(0);

144 });

packages/react/src/__tests__/ReactJSXElementValidator-test.js

+5 -1

@@ -93,7 +93,11 @@ describe('ReactJSXElementValidator', () => {

93

94 class Foo extends React.Component {

95 render() {

96 - return <React.Fragment a={1} b={2}>hello</React.Fragment>;

96 + return (

97 + <React.Fragment a={1} b={2}>

98 + hello

99 + </React.Fragment>

100 + );

101 }

102 }

103

packages/react/src/__tests__/onlyChild-test.js

+4 -20

@@ -40,42 +40,26 @@ describe('onlyChild', () => {

40

41 it('should fail when passed nully values', () => {

42 expect(function() {

43 - var instance = (

44 - <WrapComponent>

45 - {null}

46 - </WrapComponent>

47 - );

43 + var instance = <WrapComponent>{null}</WrapComponent>;

44 React.Children.only(instance.props.children);

45 }).toThrow();

46

47 expect(function() {

52 - var instance = (

53 - <WrapComponent>

54 - {undefined}

55 - </WrapComponent>

56 - );

48 + var instance = <WrapComponent>{undefined}</WrapComponent>;

49 React.Children.only(instance.props.children);

50 }).toThrow();

51 });

52

53 it('should fail when key/value objects', () => {

54 expect(function() {

63 - var instance = (

64 - <WrapComponent>

65 - {[<span key="abc" />]}

66 - </WrapComponent>

67 - );

55 + var instance = <WrapComponent>{[<span key="abc" />]}</WrapComponent>;

56 React.Children.only(instance.props.children);

57 }).toThrow();

58 });

59

60 it('should not fail when passed interpolated single child', () => {

61 expect(function() {

74 - var instance = (

75 - <WrapComponent>

76 - {<span />}

77 - </WrapComponent>

78 - );

62 + var instance = <WrapComponent>{<span />}</WrapComponent>;

63 React.Children.only(instance.props.children);

64 }).not.toThrow();

65 });

packages/shared/ReactDOMFrameScheduling.js

+7 -4

@@ -95,7 +95,11 @@ if (!ExecutionEnvironment.canUseDOM) {

95 }

96

97 // We use the postMessage trick to defer idle work until after the repaint.

98 - var messageKey = '__reactIdleCallback$' + Math.random().toString(36).slice(2);

98 + var messageKey =

99 + '__reactIdleCallback$' +

100 + Math.random()

101 + .toString(36)

102 + .slice(2);

103 var idleTick = function(event) {

104 if (event.source !== window || event.data !== messageKey) {

105 return;

@@ -130,9 +134,8 @@ if (!ExecutionEnvironment.canUseDOM) {

134 // running on 120hz display or 90hz VR display.

135 // Take the max of the two in case one of them was an anomaly due to

136 // missed frame deadlines.

133 - activeFrameTime = nextFrameTime < previousFrameTime

134 - ? previousFrameTime

135 - : nextFrameTime;

137 + activeFrameTime =

138 + nextFrameTime < previousFrameTime ? previousFrameTime : nextFrameTime;

139 } else {

140 previousFrameTime = nextFrameTime;

141 }

packages/shared/ReactInstanceMap.js

+4 -4

@@ -16,10 +16,10 @@

16 */

17

18 /**

19 - * This API should be called `delete` but we'd have to make sure to always

20 - * transform these to strings for IE support. When this transform is fully

21 - * supported we can rename it.

22 - */

19 + * This API should be called `delete` but we'd have to make sure to always

20 + * transform these to strings for IE support. When this transform is fully

21 + * supported we can rename it.

22 + */

23 export function remove(key) {

24 key._reactInternalFiber = undefined;

25 }

packages/shared/__tests__/ReactErrorUtils-test.js

+6 -2

@@ -74,7 +74,9 @@ describe('ReactErrorUtils', () => {

74 expect(callback).toBeCalledWith('arg1', 'arg2');

75 });

76

77 - it(`should call the callback with the provided context (${environment})`, () => {

77 + it(`should call the callback with the provided context (${

78 + environment

79 + })`, () => {

80 var context = {didCall: false};

81 ReactErrorUtils.invokeGuardedCallback(

82 'foo',

@@ -102,7 +104,9 @@ describe('ReactErrorUtils', () => {

104 expect(ReactErrorUtils.clearCaughtError()).toBe(error);

105 });

106

105 - it(`should return false from clearCaughtError if no error was thrown (${environment})`, () => {

107 + it(`should return false from clearCaughtError if no error was thrown (${

108 + environment

109 + })`, () => {

110 var callback = jest.fn();

111 ReactErrorUtils.invokeGuardedCallback('foo', callback, null);

112 expect(ReactErrorUtils.hasCaughtError()).toBe(false);

packages/shared/describeComponentFrame.js

+4 -4

@@ -17,10 +17,10 @@ export default function(

17 (name || 'Unknown') +

18 (source

19 ? ' (at ' +

20 - source.fileName.replace(/^.*[\\\/]/, '') +

21 - ':' +

22 - source.lineNumber +

23 - ')'

20 + source.fileName.replace(/^.*[\\\/]/, '') +

21 + ':' +

22 + source.lineNumber +

23 + ')'

24 : ownerName ? ' (created by ' + ownerName + ')' : '')

25 );

26 }

scripts/eslint-rules/__tests__/no-primitive-constructors-test.js

+6 -3

@@ -20,7 +20,8 @@ ruleTester.run('eslint-rules/no-primitive-constructors', rule, {

20 code: 'Boolean(obj)',

21 errors: [

22 {

23 - message: 'Do not use the Boolean constructor. To cast a value to a boolean, use double negation: !!value',

23 + message:

24 + 'Do not use the Boolean constructor. To cast a value to a boolean, use double negation: !!value',

25 },

26 ],

27 },

@@ -28,7 +29,8 @@ ruleTester.run('eslint-rules/no-primitive-constructors', rule, {

29 code: 'String(obj)',

30 errors: [

31 {

31 - message: 'Do not use the String constructor. ' +

32 + message:

33 + 'Do not use the String constructor. ' +

34 'To cast a value to a string, concat it with the empty string ' +

35 "(unless it's a symbol, which has different semantics): '' + value",

36 },

@@ -38,7 +40,8 @@ ruleTester.run('eslint-rules/no-primitive-constructors', rule, {

40 code: 'Number(string)',

41 errors: [

42 {

41 - message: 'Do not use the Number constructor. To cast a value to a number, use the plus operator: +value',

43 + message:

44 + 'Do not use the Number constructor. To cast a value to a number, use the plus operator: +value',

45 },

46 ],

47 },

scripts/eslint-rules/__tests__/warning-and-invariant-args-test.js

+10 -5

@@ -49,7 +49,8 @@ ruleTester.run('eslint-rules/warning-and-invariant-args', rule, {

49 code: "warning(true, 'expected %s, got %s');",

50 errors: [

51 {

52 - message: 'Expected 4 arguments in call to warning based on the number of ' +

52 + message:

53 + 'Expected 4 arguments in call to warning based on the number of ' +

54 '"%s" substitutions, but got 2',

55 },

56 ],

@@ -58,7 +59,8 @@ ruleTester.run('eslint-rules/warning-and-invariant-args', rule, {

59 code: "warning(true, 'foo is a bar under foobar', 'junk argument');",

60 errors: [

61 {

61 - message: 'Expected 2 arguments in call to warning based on the number of ' +

62 + message:

63 + 'Expected 2 arguments in call to warning based on the number of ' +

64 '"%s" substitutions, but got 3',

65 },

66 ],

@@ -67,7 +69,8 @@ ruleTester.run('eslint-rules/warning-and-invariant-args', rule, {

69 code: "invariant(true, 'error!');",

70 errors: [

71 {

70 - message: 'The invariant format should be able to uniquely identify this ' +

72 + message:

73 + 'The invariant format should be able to uniquely identify this ' +

74 'invariant. Please, use a more descriptive format than: error!',

75 },

76 ],

@@ -76,7 +79,8 @@ ruleTester.run('eslint-rules/warning-and-invariant-args', rule, {

79 code: "warning(true, 'error!');",

80 errors: [

81 {

79 - message: 'The warning format should be able to uniquely identify this ' +

82 + message:

83 + 'The warning format should be able to uniquely identify this ' +

84 'warning. Please, use a more descriptive format than: error!',

85 },

86 ],

@@ -85,7 +89,8 @@ ruleTester.run('eslint-rules/warning-and-invariant-args', rule, {

89 code: "warning(true, '%s %s, %s %s: %s (%s)', 1, 2, 3, 4, 5, 6);",

90 errors: [

91 {

88 - message: 'The warning format should be able to uniquely identify this ' +

92 + message:

93 + 'The warning format should be able to uniquely identify this ' +

94 'warning. Please, use a more descriptive format than: ' +

95 '%s %s, %s %s: %s (%s)',

96 },

scripts/eslint-rules/no-primitive-constructors.js

+1 -1

@@ -5,7 +5,7 @@

5 * LICENSE file in the root directory of this source tree.

6 *

7 * @emails react-core

8 -*/

8 + */

9

10 'use strict';

11

scripts/eslint-rules/warning-and-invariant-args.js

+1 -1

@@ -5,7 +5,7 @@

5 * LICENSE file in the root directory of this source tree.

6 *

7 * @emails react-core

8 -*/

8 + */

9

10 'use strict';

11

scripts/prettier/index.js

+2 -3

@@ -85,9 +85,8 @@ Object.keys(config).forEach(key => {

85 const options = config[key].options;

86 const ignore = config[key].ignore;

87

88 - const globPattern = patterns.length > 1

89 - ? `{${patterns.join(',')}}`

90 - : `${patterns.join(',')}`;

88 + const globPattern =

89 + patterns.length > 1 ? `{${patterns.join(',')}}` : `${patterns.join(',')}`;

90 const files = glob

91 .sync(globPattern, {ignore})

92 .filter(f => !onlyChanged || changedFiles.has(f));

scripts/print-warnings/print-warnings.js

+5 -1

@@ -64,7 +64,11 @@ function transform(file, enc, cb) {

64

65 gs(['packages/**/*.js', '!**/__tests__/**/*.js', '!**/__mocks__/**/*.js']).pipe(

66 through.obj(transform, cb => {

67 - process.stdout.write(Array.from(warnings).sort().join('\n') + '\n');

67 + process.stdout.write(

68 + Array.from(warnings)

69 + .sort()

70 + .join('\n') + '\n'

71 + );

72 cb();

73 })

74 );

scripts/release/build-commands/check-circle-ci-status.js

+2 -1

@@ -34,7 +34,8 @@ const check = async ({cwd}) => {

34 chalk`

35 CircleCI failed

36

37 - {white The most recent CircleCI build has a status of {red.bold ${outcome || status}}}

37 + {white The most recent CircleCI build has a status of {red.bold ${outcome ||

38 + status}}}

39 {white Please retry this build in CircleCI if you believe this is an error.}

40 `

41 );

scripts/release/build-commands/parse-build-parameters.js

+4 -2

@@ -35,11 +35,13 @@ module.exports = () => {

35 },

36 {

37 desc: '2. Dry run build a release candidate (no git commits).',

38 - example: '$ ./build.js [bold]{--dry} [bold]{-v} [underline]{16.0.0-rc.0}',

38 + example:

39 + '$ ./build.js [bold]{--dry} [bold]{-v} [underline]{16.0.0-rc.0}',

40 },

41 {

42 desc: '3. Release from another checkout.',

42 - example: '$ ./build.js [bold]{--version}=[underline]{16.0.0} [bold]{--path}=/path/to/react/repo',

43 + example:

44 + '$ ./build.js [bold]{--version}=[underline]{16.0.0} [bold]{--path}=/path/to/react/repo',

45 },

46 ],

47 },

scripts/release/build-commands/print-post-build-summary.js

+6 -2

@@ -36,13 +36,17 @@ module.exports = ({cwd, dry, path, version}) => {

36 Here are a few things to keep in mind:

37 • The changes should be easy to understand. (Friendly one-liners are better than PR titles.)

38 • Make sure all contributors are credited.

39 - • Verify that the markup is valid by previewing it in the editor: {blue.bold ${CHANGELOG_PATH}}

39 + • Verify that the markup is valid by previewing it in the editor: {blue.bold ${

40 + CHANGELOG_PATH

41 + }}

42

43 {bold.underline Step 2: Smoke test the packages}

44

45 1. Open {yellow.bold ${standaloneFixturePath}} in the browser.

46 2. It should say {italic "Hello world!"}

45 - 3. Next go to {yellow.bold ${packagingFixturesPath}} and run {bold node build-all.js}

47 + 3. Next go to {yellow.bold ${

48 + packagingFixturesPath

49 + }} and run {bold node build-all.js}

50 4. Install the "serve" module ({bold npm install -g serve})

51 5. Go to the repo root and {bold serve -s .}

52 6. Open {blue.bold http://localhost:5000/fixtures/packaging}

scripts/release/build.js

+3 -1

@@ -49,7 +49,9 @@ const run = async () => {

49 const stack = error.stack.replace(error.message, '');

50

51 console.log(

52 - `${chalk.bgRed.white(' ERROR ')} ${chalk.red(message)}\n\n${chalk.gray(stack)}`

52 + `${chalk.bgRed.white(' ERROR ')} ${chalk.red(message)}\n\n${chalk.gray(

53 + stack

54 + )}`

55 );

56

57 process.exit(1);

scripts/release/config.js

+2 -1

@@ -23,7 +23,8 @@ const paramDefinitions = [

23 name: 'path',

24 type: String,

25 alias: 'p',

26 - description: 'Location of React repository to release; defaults to [bold]{cwd}',

26 + description:

27 + 'Location of React repository to release; defaults to [bold]{cwd}',

28 defaultValue: '.',

29 },

30 {

scripts/release/publish-commands/check-build-status.js

+3 -1

@@ -18,7 +18,9 @@ module.exports = async ({cwd, version}) => {

18

19 if (packageJson.version !== version) {

20 throw Error(

21 - chalk`Expected version {bold.white ${version}} but found {bold.white ${packageJson.version}}`

21 + chalk`Expected version {bold.white ${version}} but found {bold.white ${

22 + packageJson.version

23 + }}`

24 );

25 }

26 };

scripts/release/publish-commands/parse-publish-params.js

+4 -2

@@ -35,11 +35,13 @@ module.exports = () => {

35 },

36 {

37 desc: '2. Dry run publish a release candidate.',

38 - example: '$ ./publish.js [bold]{--dry} [bold]{-v} [underline]{16.0.0-rc.0}',

38 + example:

39 + '$ ./publish.js [bold]{--dry} [bold]{-v} [underline]{16.0.0-rc.0}',

40 },

41 {

42 desc: '3. Release from another checkout.',

42 - example: '$ ./publish.js [bold]{--version}=[underline]{16.0.0} [bold]{--path}=/path/to/react/repo',

43 + example:

44 + '$ ./publish.js [bold]{--version}=[underline]{16.0.0} [bold]{--path}=/path/to/react/repo',

45 },

46 ],

47 },

scripts/release/publish-commands/publish-to-npm.js

+3 -1

@@ -40,7 +40,9 @@ const push = async ({cwd, dry, version}) => {

40 if (remoteVersion !== packageVersion) {

41 throw Error(

42 chalk`Published version {yellow.bold ${packageVersion}} for ` +

43 - chalk`{bold ${project}} but NPM shows {yellow.bold ${remoteVersion}}`

43 + chalk`{bold ${project}} but NPM shows {yellow.bold ${

44 + remoteVersion

45 + }}`

46 );

47 }

48

scripts/release/publish.js

+3 -1

@@ -29,7 +29,9 @@ const run = async () => {

29 const stack = error.stack.replace(error.message, '');

30

31 console.log(

32 - `${chalk.bgRed.white(' ERROR ')} ${chalk.red(message)}\n\n${chalk.gray(stack)}`

32 + `${chalk.bgRed.white(' ERROR ')} ${chalk.red(message)}\n\n${chalk.gray(

33 + stack

34 + )}`

35 );

36

37 process.exit(1);

scripts/release/utils.js

+3 -1

@@ -40,7 +40,9 @@ const logPromise = async (promise, text, completedLabel = '') => {

40 const id = setInterval(() => {

41 index = ++index % frames.length;

42 logUpdate(

43 - `${chalk.yellow(frames[index])} ${text} ${chalk.gray('- this may take a few seconds')}`

43 + `${chalk.yellow(frames[index])} ${text} ${chalk.gray(

44 + '- this may take a few seconds'

45 + )}`

46 );

47 }, interval);

48

scripts/rollup/build.js

+9 -3

@@ -146,10 +146,15 @@ const RECONCILER_WRAPPER_INTRO = `var $$$reconciler;\nmodule.exports = function(

146 const RECONCILER_WRAPPER_OUTRO = `return ($$$reconciler || ($$$reconciler = module.exports))(config);\n};\n`;

147

148 function getReconcilerBanner(bundleType, filename) {

149 - let banner = `${Header.getHeader(filename, reactVersion)}\n\n'use strict';\n\n\n`;

149 + let banner = `${Header.getHeader(

150 + filename,

151 + reactVersion

152 + )}\n\n'use strict';\n\n\n`;

153 switch (bundleType) {

154 case NODE_DEV:

152 - banner += `if (process.env.NODE_ENV !== "production") {\n${RECONCILER_WRAPPER_INTRO}`;

155 + banner += `if (process.env.NODE_ENV !== "production") {\n${

156 + RECONCILER_WRAPPER_INTRO

157 + }`;

158 break;

159 case NODE_PROD:

160 banner += RECONCILER_WRAPPER_INTRO;

@@ -258,7 +263,8 @@ function getRollupOutputOptions(

263 {

264 banner: getBanner(bundleType, globalName, filename, moduleType),

265 destDir: 'build/',

261 - file: 'build/' +

266 + file:

267 + 'build/' +

268 Packaging.getOutputPathRelativeToBuildFolder(

269 bundleType,

270 filename,

scripts/rollup/shims/rollup/ReactFeatureFlags-www.js

+1 -1

@@ -62,6 +62,6 @@ function updateFlagOutsideOfReactCallStack() {

62

63 // Flow magic to verify the exports of this file match the original version.

64 // eslint-disable-next-line no-unused-vars

65 -type Check<_X, Y: _X, X: Y=_X> = null;

65 +type Check<_X, Y: _X, X: Y = _X> = null;

66 // eslint-disable-next-line no-unused-expressions

67 (null: Check<FeatureFlagsShimType, FeatureFlagsType>);

scripts/rollup/sync.js

+2 -3

@@ -35,9 +35,8 @@ function syncReactDom(buildPath, wwwPath) {

35 }

36

37 function syncReactNativeHelper(buildPath, fbSourcePath, relativeDestPath) {

38 - fbSourcePath = typeof fbSourcePath === 'string'

39 - ? fbSourcePath

40 - : DEFAULT_FB_SOURCE_PATH;

38 + fbSourcePath =

39 + typeof fbSourcePath === 'string' ? fbSourcePath : DEFAULT_FB_SOURCE_PATH;

40

41 if (fbSourcePath.charAt(fbSourcePath.length - 1) !== '/') {

42 fbSourcePath += '/';

yarn.lock

+18 -73

@@ -98,12 +98,6 @@ ansi-styles@^2.2.1:

98 version "2.2.1"

99 resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"

100

101 -ansi-styles@^3.0.0:

102 - version "3.0.0"

103 - resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.0.0.tgz#5404e93a544c4fec7f048262977bebfe3155e0c1"

104 - dependencies:

105 - color-convert "^1.0.0"

106 -

101 ansi-styles@^3.1.0:

102 version "3.1.0"

103 resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.1.0.tgz#09c202d5c917ec23188caa5c9cb9179cd9547750"

@@ -221,10 +215,6 @@ ast-types@0.9.6:

215 version "0.9.6"

216 resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.9.6.tgz#102c9e9e9005d3e7e3829bf0c4fa24ee862ee9b9"

217

224 -ast-types@0.9.8:

225 - version "0.9.8"

226 - resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.9.8.tgz#6cb6a40beba31f49f20928e28439fc14a3dab078"

227 -

218 astral-regex@^1.0.0:

219 version "1.0.0"

220 resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9"

@@ -276,7 +266,7 @@ babel-cli@^6.6.5:

266 optionalDependencies:

267 chokidar "^1.6.1"

268

279 -babel-code-frame@6.22.0, babel-code-frame@^6.16.0, babel-code-frame@^6.22.0:

269 +babel-code-frame@^6.16.0, babel-code-frame@^6.22.0:

270 version "6.22.0"

271 resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.22.0.tgz#027620bee567a88c32561574e7fd0801d33118e4"

272 dependencies:

@@ -881,10 +871,6 @@ babylon@6.15.0, babylon@^6.11.0:

871 version "6.15.0"

872 resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.15.0.tgz#ba65cfa1a80e1759b0e89fb562e27dccae70348e"

873

884 -babylon@7.0.0-beta.8:

885 - version "7.0.0-beta.8"

886 - resolved "https://registry.yarnpkg.com/babylon/-/babylon-7.0.0-beta.8.tgz#2bdc5ae366041442c27e068cce6f0d7c06ea9949"

887 -

874 babylon@^5.8.38:

875 version "5.8.38"

876 resolved "https://registry.yarnpkg.com/babylon/-/babylon-5.8.38.tgz#ec9b120b11bf6ccd4173a18bf217e60b79859ffd"

@@ -1052,7 +1038,7 @@ center-align@^0.1.1:

1038 align-text "^0.1.3"

1039 lazy-cache "^1.0.3"

1040

1055 -chalk@*, chalk@1.1.3, chalk@^1.0.0, chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3:

1041 +chalk@*, chalk@^1.0.0, chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3:

1042 version "1.1.3"

1043 resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"

1044 dependencies:

@@ -1740,7 +1726,7 @@ estree-walker@^0.5.0:

1726 version "0.5.0"

1727 resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.5.0.tgz#aae3b57c42deb8010e349c892462f0e71c5dd1aa"

1728

1743 -esutils@2.0.2, esutils@^2.0.0, esutils@^2.0.2:

1729 +esutils@^2.0.0, esutils@^2.0.2:

1730 version "2.0.2"

1731 resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"

1732

@@ -1943,10 +1929,6 @@ flow-bin@^0.53.1:

1929 version "0.53.1"

1930 resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.53.1.tgz#9b22b63a23c99763ae533ebbab07f88c88c97d84"

1931

1946 -flow-parser@0.43.0:

1947 - version "0.43.0"

1948 - resolved "https://registry.yarnpkg.com/flow-parser/-/flow-parser-0.43.0.tgz#e2b8eb1ac83dd53f7b6b04a7c35b6a52c33479b7"

1949 -

1932 for-in@^1.0.1:

1933 version "1.0.2"

1934 resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"

@@ -2047,10 +2029,6 @@ get-caller-file@^1.0.1:

2029 version "1.0.2"

2030 resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"

2031

2050 -get-stdin@5.0.1:

2051 - version "5.0.1"

2052 - resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-5.0.1.tgz#122e161591e21ff4c52530305693f20e6393a398"

2053 -

2032 get-stdin@^4.0.1:

2033 version "4.0.1"

2034 resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"

@@ -2104,17 +2082,6 @@ glob-stream@^6.1.0:

2082 to-absolute-glob "^2.0.0"

2083 unique-stream "^2.0.2"

2084

2107 -glob@7.1.1, glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.1:

2108 - version "7.1.1"

2109 - resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.1.tgz#805211df04faaf1c63a3600306cdf5ade50b2ec8"

2110 - dependencies:

2111 - fs.realpath "^1.0.0"

2112 - inflight "^1.0.4"

2113 - inherits "2"

2114 - minimatch "^3.0.2"

2115 - once "^1.3.0"

2116 - path-is-absolute "^1.0.0"

2117 -

2085 glob@^5.0.15, glob@^5.0.5:

2086 version "5.0.15"

2087 resolved "https://registry.yarnpkg.com/glob/-/glob-5.0.15.tgz#1bc936b9e02f4a603fcc222ecf7633d30b8b93b1"

@@ -2135,6 +2102,17 @@ glob@^6.0.4:

2102 once "^1.3.0"

2103 path-is-absolute "^1.0.0"

2104

2105 +glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.1:

2106 + version "7.1.1"

2107 + resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.1.tgz#805211df04faaf1c63a3600306cdf5ade50b2ec8"

2108 + dependencies:

2109 + fs.realpath "^1.0.0"

2110 + inflight "^1.0.4"

2111 + inherits "2"

2112 + minimatch "^3.0.2"

2113 + once "^1.3.0"

2114 + path-is-absolute "^1.0.0"

2115 +

2116 glob@^7.1.2:

2117 version "7.1.2"

2118 resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"

@@ -2831,13 +2809,6 @@ jest-matcher-utils@21.3.0-beta.4:

2809 jest-get-type "21.3.0-beta.4"

2810 pretty-format "21.3.0-beta.4"

2811

2834 -jest-matcher-utils@^19.0.0:

2835 - version "19.0.0"

2836 - resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-19.0.0.tgz#5ecd9b63565d2b001f61fbf7ec4c7f537964564d"

2837 - dependencies:

2838 - chalk "^1.1.3"

2839 - pretty-format "^19.0.0"

2840 -

2812 jest-message-util@21.3.0-beta.4:

2813 version "21.3.0-beta.4"

2814 resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-21.3.0-beta.4.tgz#018dd79f8d7b1a4bbbd9f5b3d59354d14ac9641f"

@@ -2927,15 +2898,6 @@ jest-util@21.3.0-beta.4:

2898 jest-validate "21.3.0-beta.4"

2899 mkdirp "^0.5.1"

2900

2930 -jest-validate@19.0.0:

2931 - version "19.0.0"

2932 - resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-19.0.0.tgz#8c6318a20ecfeaba0ba5378bfbb8277abded4173"

2933 - dependencies:

2934 - chalk "^1.1.1"

2935 - jest-matcher-utils "^19.0.0"

2936 - leven "^2.0.0"

2937 - pretty-format "^19.0.0"

2938 -

2901 jest-validate@21.3.0-beta.4:

2902 version "21.3.0-beta.4"

2903 resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-21.3.0-beta.4.tgz#cfb0cdb38f7eb694f909ad041687645fd1b90452"

@@ -3086,7 +3048,7 @@ leven@^1.0.2:

3048 version "1.0.2"

3049 resolved "https://registry.yarnpkg.com/leven/-/leven-1.0.2.tgz#9144b6eebca5f1d0680169f1a6770dcea60b75c3"

3050

3089 -leven@^2.0.0, leven@^2.1.0:

3051 +leven@^2.1.0:

3052 version "2.1.0"

3053 resolved "https://registry.yarnpkg.com/leven/-/leven-2.1.0.tgz#c2e7a9f772094dee9d34202ae8acce4687875580"

3054

@@ -3709,20 +3671,9 @@ preserve@^0.2.0:

3671 version "0.2.0"

3672 resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"

3673

3712 -prettier@1.2.2:

3713 - version "1.2.2"

3714 - resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.2.2.tgz#22d17c1132faaaea1f1d4faea31f19f7a1959f3e"

3715 - dependencies:

3716 - ast-types "0.9.8"

3717 - babel-code-frame "6.22.0"

3718 - babylon "7.0.0-beta.8"

3719 - chalk "1.1.3"

3720 - esutils "2.0.2"

3721 - flow-parser "0.43.0"

3722 - get-stdin "5.0.1"

3723 - glob "7.1.1"

3724 - jest-validate "19.0.0"

3725 - minimist "1.2.0"

3674 +prettier@1.8.1:

3675 + version "1.8.1"

3676 + resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.8.1.tgz#91064d778c08c85ac1cbe6b23195c34310d039f9"

3677

3678 pretty-format@21.3.0-beta.4:

3679 version "21.3.0-beta.4"

@@ -3731,12 +3682,6 @@ pretty-format@21.3.0-beta.4:

3682 ansi-regex "^3.0.0"

3683 ansi-styles "^3.2.0"

3684

3734 -pretty-format@^19.0.0:

3735 - version "19.0.0"

3736 - resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-19.0.0.tgz#56530d32acb98a3fa4851c4e2b9d37b420684c84"

3737 - dependencies:

3738 - ansi-styles "^3.0.0"

3739 -

3685 private@^0.1.6, private@~0.1.5:

3686 version "0.1.7"

3687 resolved "https://registry.yarnpkg.com/private/-/private-0.1.7.tgz#68ce5e8a1ef0a23bb570cc28537b5332aba63ef1"

Update prettier to 1.8.1 (#10785)