maxjhandsome
/
react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update prettier to 1.8.1 (#10785) 

* Change prettier dependency in package.json version 1.8.1

* Update yarn.lock

* Apply prettier changes

* Fix ReactDOMServerIntegration-test.js

* Fix test for ReactDOMComponent-test.js
This commit is contained in:
Clement Hoang 2017-11-07 18:09:33 +00:00 committed by GitHub
parent 05f3ecc3ea
commit 94f44aeba7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
160 changed files with 2494 additions and 1704 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
fixtures/art/VectorWidget.js
View File

@ -137,12 +137,12 @@ var RING_TWO_PATH =
var RING_THREE_PATH =
'M84,121 C130.391921,121 168,106.673113 168,89 C168,71.3268871 130.391921,57 84,57 C37.6080787,57 0,71.3268871 0,89 C0,106.673113 37.6080787,121 84,121 Z M84,121';
var RING_TWO_ROTATE = new Transform()
.translate(84.000000, 89.000000)
.rotate(-240.000000)
.translate(-84.000000, -89.000000);
.translate(84.0, 89.0)
.rotate(-240.0)
.translate(-84.0, -89.0);
var RING_THREE_ROTATE = new Transform()
.translate(84.000000, 89.000000)
.rotate(-300.000000)
.translate(-84.000000, -89.000000);
.translate(84.0, 89.0)
.rotate(-300.0)
.translate(-84.0, -89.0);
module.exports = VectorWidget;

61
fixtures/attribute-behavior/src/App.js
View File

@ -185,7 +185,9 @@ function getCanonicalizedValue(value) {
if (typeof value.length === 'number') {
return (
'[' +
Array.from(value).map(v => getCanonicalizedValue(v)).join(', ') +
Array.from(value)
.map(v => getCanonicalizedValue(v))
.join(', ') +
']'
);
}
@ -459,7 +461,9 @@ function prepareState(initGlobals) {
hasSameBehaviorForAll,
rowPatternHash,
// "Good enough" id that we can store in localStorage
rowIdHash: `${attribute.name} ${attribute.tagName} ${attribute.overrideStringValue}`,
rowIdHash: `${attribute.name} ${attribute.tagName} ${
attribute.overrideStringValue
}`,
};
const rowGroup = rowPatternHashes.get(rowPatternHash) || new Set();
rowGroup.add(row);
@ -677,9 +681,11 @@ function CellContent(props) {
<RowHeader
checked={completedHashes.has(rowPatternHash)}
onChange={() => toggleAttribute(rowPatternHash)}>
{row.hasSameBehaviorForAll
? attribute.name
: <b css={{color: 'purple'}}>{attribute.name}</b>}
{row.hasSameBehaviorForAll ? (
attribute.name
) : (
<b css={{color: 'purple'}}>{attribute.name}</b>
)}
</RowHeader>
);
}
@ -754,8 +760,10 @@ class App extends React.Component {
async componentDidMount() {
const sources = {
ReactStable: 'https://unpkg.com/react@latest/umd/react.development.js',
ReactDOMStable: 'https://unpkg.com/react-dom@latest/umd/react-dom.development.js',
ReactDOMServerStable: 'https://unpkg.com/react-dom@latest/umd/react-dom-server.browser.development.js',
ReactDOMStable:
'https://unpkg.com/react-dom@latest/umd/react-dom.development.js',
ReactDOMServerStable:
'https://unpkg.com/react-dom@latest/umd/react-dom-server.browser.development.js',
ReactNext: '/react.development.js',
ReactDOMNext: '/react-dom.development.js',
ReactDOMServerNext: '/react-dom-server.browser.development.js',
@ -860,12 +868,12 @@ class App extends React.Component {
case ALPHABETICAL:
return filteredAttributes.sort(
(attr1, attr2) =>
(attr1.name.toLowerCase() < attr2.name.toLowerCase() ? -1 : 1)
attr1.name.toLowerCase() < attr2.name.toLowerCase() ? -1 : 1
);
case REV_ALPHABETICAL:
return filteredAttributes.sort(
(attr1, attr2) =>
(attr1.name.toLowerCase() < attr2.name.toLowerCase() ? 1 : -1)
attr1.name.toLowerCase() < attr2.name.toLowerCase() ? 1 : -1
);
case GROUPED_BY_ROW_PATTERN: {
return filteredAttributes.sort((attr1, attr2) => {
@ -895,7 +903,8 @@ class App extends React.Component {
let log = '';
for (let attribute of attributes) {
log += `## \`${attribute.name}\` (on \`<${attribute.tagName || 'div'}>\` inside \`<${attribute.containerTagName || 'div'}>\`)\n`;
log += `## \`${attribute.name}\` (on \`<${attribute.tagName ||
'div'}>\` inside \`<${attribute.containerTagName || 'div'}>\`)\n`;
log += '| Test Case | Flags | Result |\n';
log += '| --- | --- | --- |\n';
@ -950,8 +959,9 @@ class App extends React.Component {
return (
<div>
<h1>Loading...</h1>
{!useFastMode &&
<h3>The progress is reported in the window title.</h3>}
{!useFastMode && (
<h3>The progress is reported in the window title.</h3>
)}
</div>
);
}
@ -959,31 +969,22 @@ class App extends React.Component {
<div>
<div>
<select value={this.state.sortOrder} onChange={this.onUpdateSort}>
<option value={ALPHABETICAL}>
alphabetical
</option>
<option value={REV_ALPHABETICAL}>
reverse alphabetical
</option>
<option value={ALPHABETICAL}>alphabetical</option>
<option value={REV_ALPHABETICAL}>reverse alphabetical</option>
<option value={GROUPED_BY_ROW_PATTERN}>
grouped by row pattern :)
</option>
</select>
<select value={this.state.filter} onChange={this.onUpdateFilter}>
<option value={ALL}>
all
</option>
<option value={INCOMPLETE}>
incomplete
</option>
<option value={COMPLETE}>
complete
</option>
<option value={ALL}>all</option>
<option value={INCOMPLETE}>incomplete</option>
<option value={COMPLETE}>complete</option>
</select>
<button style={{marginLeft: '10px'}} onClick={this.handleSaveClick}>
Save latest results to a file
{' '}
<span role="img" aria-label="Save">💾</span>
Save latest results to a file{' '}
<span role="img" aria-label="Save">
💾
</span>
</button>
</div>
<AutoSizer disableHeight={true}>

9
fixtures/attribute-behavior/src/attributes.js
View File

@ -843,7 +843,8 @@ const attributes = [
name: 'gradientTransform',
read: getSVGProperty('gradientTransform'),
containerTagName: 'svg',
overrideStringValue: 'translate(-10,-20) scale(2) rotate(45) translate(5,10)',
overrideStringValue:
'translate(-10,-20) scale(2) rotate(45) translate(5,10)',
tagName: 'linearGradient',
},
{
@ -1353,7 +1354,8 @@ const attributes = [
read: getSVGProperty('patternTransform'),
containerTagName: 'svg',
tagName: 'pattern',
overrideStringValue: 'translate(-10,-20) scale(2) rotate(45) translate(5,10)',
overrideStringValue:
'translate(-10,-20) scale(2) rotate(45) translate(5,10)',
},
{
name: 'patternUnits',
@ -1940,7 +1942,8 @@ const attributes = [
read: getSVGProperty('transform'),
containerTagName: 'svg',
tagName: 'a',
overrideStringValue: 'translate(-10,-20) scale(2) rotate(45) translate(5,10)',
overrideStringValue:
'translate(-10,-20) scale(2) rotate(45) translate(5,10)',
},
{name: 'type', tagName: 'button', overrideStringValue: 'reset'},
{

6
fixtures/dom/src/components/Fixture.js
View File

@ -9,11 +9,7 @@ class Fixture extends React.Component {
render() {
const {children} = this.props;
return (
<div className="test-fixture">
{children}
</div>
);
return <div className="test-fixture">{children}</div>;
}
}

4
fixtures/dom/src/components/Header.js
View File

@ -71,7 +71,9 @@ class Header extends React.Component {
value={this.state.version}
onChange={this.handleVersionChange}>
{this.state.versions.map(version => (
<option key={version} value={version}>{version}</option>
<option key={version} value={version}>
{version}
</option>
))}
</select>
</label>

51
fixtures/dom/src/components/TestCase.js
View File

@ -59,60 +59,65 @@ class TestCase extends React.Component {
type="checkbox"
checked={complete}
onChange={this.handleChange}
/>
{' '}{title}
/>{' '}
{title}
</label>
</h2>
<dl className="test-case__details">
{introducedIn && <dt>First broken in: </dt>}
{introducedIn &&
{introducedIn && (
<dd>
<a
href={'https://github.com/facebook/react/tag/v' + introducedIn}>
<code>{introducedIn}</code>
</a>
</dd>}
</dd>
)}
{resolvedIn && <dt>First supported in: </dt>}
{resolvedIn &&
{resolvedIn && (
<dd>
<a href={'https://github.com/facebook/react/tag/v' + resolvedIn}>
<code>{resolvedIn}</code>
</a>
</dd>}
</dd>
)}
{resolvedBy && <dt>Fixed by: </dt>}
{resolvedBy &&
{resolvedBy && (
<dd>
<a
href={
'https://github.com/facebook/react/pull/' +
resolvedBy.slice(1)
resolvedBy.slice(1)
}>
<code>{resolvedBy}</code>
</a>
</dd>}
</dd>
)}
{affectedBrowsers && <dt>Affected browsers: </dt>}
{affectedBrowsers && <dd>{affectedBrowsers}</dd>}
{relatedIssues && <dt>Related Issues: </dt>}
{relatedIssues && <dd><IssueList issues={relatedIssues} /></dd>}
{relatedIssues && (
<dd>
<IssueList issues={relatedIssues} />
</dd>
)}
</dl>
<p className="test-case__desc">
{description}
</p>
<p className="test-case__desc">{description}</p>
<div className="test-case__body">
{!isTestFixed &&
{!isTestFixed && (
<p className="test-case__invalid-version">
<strong>Note:</strong>
{' '}
This test case was fixed in a later version of React.
This test is not expected to pass for the selected version, and that's ok!
</p>}
<strong>Note:</strong> This test case was fixed in a later version
of React. This test is not expected to pass for the selected
version, and that's ok!
</p>
)}
{children}
</div>
@ -129,9 +134,7 @@ TestCase.Steps = class extends React.Component {
return (
<div>
<h3>Steps to reproduce:</h3>
<ol>
{children}
</ol>
<ol>{children}</ol>
</div>
);
}
@ -143,9 +146,7 @@ TestCase.ExpectedResult = class extends React.Component {
return (
<div>
<h3>Expected Result:</h3>
<p>
{children}
</p>
<p>{children}</p>
</div>
);
}

4
fixtures/dom/src/components/fixtures/buttons/index.js
View File

@ -20,7 +20,9 @@ export default class ButtonTestCases extends React.Component {
<TestCase.ExpectedResult>
Nothing should happen
</TestCase.ExpectedResult>
<button disabled onClick={onButtonClick}>Click Me</button>
<button disabled onClick={onButtonClick}>
Click Me
</button>
</TestCase>
<TestCase
title="onClick with disabled buttons containing other elements"

10
fixtures/dom/src/components/fixtures/custom-elements/index.js
View File

@ -42,11 +42,11 @@ export default class ButtonTestCases extends React.Component {
<TestCase.ExpectedResult>
You should see "Hello, World" printed below.{' '}
</TestCase.ExpectedResult>
{supportsCustomElements
? <my-element />
: <div>
This browser does not support custom elements.
</div>}
{supportsCustomElements ? (
<my-element />
) : (
<div>This browser does not support custom elements.</div>
)}
</TestCase>
</FixtureSet>
);

5
fixtures/dom/src/components/fixtures/date-inputs/index.js
View File

@ -16,9 +16,8 @@ class DateInputFixtures extends React.Component {
</TestCase.Steps>
<TestCase.ExpectedResult>
The month, day, and year values should correctly
transfer. The hours/minutes/seconds should not be
discarded.
The month, day, and year values should correctly transfer. The
hours/minutes/seconds should not be discarded.
</TestCase.ExpectedResult>
<Fixture>

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

@ -16,7 +16,9 @@ class SwitchDateTestCase extends React.Component {
return (
<div>
<p><b>{attrs.type}</b> input type ({attrs.value})</p>
<p>
<b>{attrs.type}</b> input type ({attrs.value})
</p>
<p>
<input
type={attrs.type}
@ -28,8 +30,7 @@ class SwitchDateTestCase extends React.Component {
type="checkbox"
checked={this.state.fullDate}
onChange={this.updateFullDate}
/>
{' '}
/>{' '}
Switch type
</label>
</p>

9
fixtures/dom/src/components/fixtures/error-handling/index.js
View File

@ -134,9 +134,9 @@ export default class ErrorHandlingTestCases extends React.Component {
</TestCase.Steps>
<TestCase.ExpectedResult>
The "Trigger error" button should be replaced with "Captured an
error: A cross-origin error was thrown [...]". The actual error message should
be logged to the console: "Uncaught Error: Expected true to
be false".
error: A cross-origin error was thrown [...]". The actual error
message should be logged to the console: "Uncaught Error: Expected
true to be false".
</TestCase.ExpectedResult>
<Example
buttonText="Trigger cross-origin error"
@ -154,7 +154,8 @@ export default class ErrorHandlingTestCases extends React.Component {
<li>Click the "Trigger render error and catch" button</li>
</TestCase.Steps>
<TestCase.ExpectedResult>
Open the console. "Uncaught Error: Caught error" should have been logged by the browser.
Open the console. "Uncaught Error: Caught error" should have been
logged by the browser.
</TestCase.ExpectedResult>
<TriggerErrorAndCatch />
</TestCase>

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

@ -35,12 +35,8 @@ class MouseMove extends React.Component {
<p>
Was the event pooled?{' '}
<b>
{events.length ? events.length <= 1 ? 'Yes' : 'No' : 'Unsure'}
{' '}
(
{events.length}
{' '}
events)
{events.length ? (events.length <= 1 ? 'Yes' : 'No') : 'Unsure'} (
{events.length} events)
</b>
</p>
</TestCase>

11
fixtures/dom/src/components/fixtures/event-pooling/persistence.js
View File

@ -41,7 +41,8 @@ class Persistence extends React.Component {
</TestCase.Steps>
<TestCase.ExpectedResult>
The pool size should not increase above 1, but reduce to 0 when hovering over the persisted region.
The pool size should not increase above 1, but reduce to 0 when
hovering over the persisted region.
</TestCase.ExpectedResult>
<h2>Add Pooled Event:</h2>
@ -50,13 +51,9 @@ class Persistence extends React.Component {
<h2>Add Persisted Event:</h2>
<HitBox onMouseMove={this.addPersisted} />
<p>
Pool size: {pooled.length}
</p>
<p>Pool size: {pooled.length}</p>
<p>
Persisted size: {persisted}
</p>
<p>Persisted size: {persisted}</p>
</TestCase>
);
}

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

@ -41,14 +41,14 @@ class InputPlaceholderFixture extends React.Component {
type="text"
placeholder={placeholder}
onChange={this.handleChange}
/>
{' '}
/>{' '}
<button onClick={this.handleGeneratePlaceholder}>
Change placeholder
</button>
<p style={{color}}>
<code>onChange</code>{' calls: '}<strong>{changeCount}</strong>
<code>onChange</code>
{' calls: '}
<strong>{changeCount}</strong>
</p>
<button onClick={this.handleReset}>Reset count</button>
</Fixture>

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

@ -34,10 +34,11 @@ class RadioClickFixture extends React.Component {
<label>
<input defaultChecked type="radio" onChange={this.handleChange} />
Test case radio input
</label>
{' '}
</label>{' '}
<p style={{color}}>
<code>onChange</code>{' calls: '}<strong>{changeCount}</strong>
<code>onChange</code>
{' calls: '}
<strong>{changeCount}</strong>
</p>
<button onClick={this.handleReset}>Reset count</button>
</Fixture>

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

@ -43,11 +43,11 @@ class RadioGroupFixture extends React.Component {
<label>
<input name="foo" type="radio" onChange={this.handleChange} />
Radio 2
</label>
{' '}
</label>{' '}
<p style={{color}}>
<code>onChange</code>{' calls: '}<strong>{changeCount}</strong>
<code>onChange</code>
{' calls: '}
<strong>{changeCount}</strong>
</p>
<button onClick={this.handleReset}>Reset count</button>
</Fixture>

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

@ -60,16 +60,16 @@ class RangeKeyboardFixture extends React.Component {
ref={r => (this.input = r)}
onChange={this.handleChange}
/>
<button onClick={() => this.input.focus()}>
Focus Knob
</button>
</div>
{' '}
<button onClick={() => this.input.focus()}>Focus Knob</button>
</div>{' '}
<p style={{color}}>
<code>onKeyDown</code>{' calls: '}<strong>{keydownCount}</strong>
<code>onKeyDown</code>
{' calls: '}
<strong>{keydownCount}</strong>
{' vs '}
<code>onChange</code>{' calls: '}<strong>{changeCount}</strong>
<code>onChange</code>
{' calls: '}
<strong>{changeCount}</strong>
</p>
<button onClick={this.handleReset}>Reset counts</button>
</Fixture>

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

@ -24,8 +24,8 @@ class InputChangeEvents extends React.Component {
</TestCase.Steps>
<TestCase.ExpectedResult>
The <code>onKeyDown</code> call count should be equal to
the <code>onChange</code> call count.
The <code>onKeyDown</code> call count should be equal to the{' '}
<code>onChange</code> call count.
</TestCase.ExpectedResult>
<RangeKeyboardFixture />

3
fixtures/dom/src/components/fixtures/number-inputs/NumberTestCase.js
View File

@ -24,7 +24,8 @@ class NumberTestCase extends React.Component {
onChange={this.onChange}
/>
<span className="hint">
{' '}Value: {JSON.stringify(this.state.value)}
{' '}
Value: {JSON.stringify(this.state.value)}
</span>
</fieldset>

19
fixtures/dom/src/components/fixtures/number-inputs/index.js
View File

@ -27,9 +27,9 @@ function NumberInputs() {
<NumberTestCase />
<p className="footnote">
<b>Notes:</b> Chrome and Safari clear trailing
decimals on blur. React makes this concession so that the
value attribute remains in sync with the value property.
<b>Notes:</b> Chrome and Safari clear trailing decimals on blur. React
makes this concession so that the value attribute remains in sync with
the value property.
</p>
</TestCase>
@ -177,14 +177,13 @@ function NumberInputs() {
<NumberInputExtraZeroes />
<p className="footnote">
<b>Notes:</b> Firefox drops extraneous zeroes when
assigned. Zeroes are preserved when editing, however
directly assigning a new value will drop zeroes. This
{' '}
<b>Notes:</b> Firefox drops extraneous zeroes when assigned. Zeroes
are preserved when editing, however directly assigning a new value
will drop zeroes. This{' '}
<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1003896">
is
a bug in Firefox
</a> that we can not control for.
is a bug in Firefox
</a>{' '}
that we can not control for.
</p>
</TestCase>
</FixtureSet>

3
fixtures/dom/src/components/fixtures/password-inputs/PasswordTestCase.js
View File

@ -21,7 +21,8 @@ class PasswordTestCase extends React.Component {
onChange={this.onChange}
/>
<span className="hint">
{' '}Value: {JSON.stringify(this.state.value)}
{' '}
Value: {JSON.stringify(this.state.value)}
</span>
</fieldset>

11
fixtures/dom/src/components/fixtures/selects/index.js
View File

@ -84,13 +84,15 @@ class SelectFixture extends React.Component {
</TestCase.Steps>
<TestCase.ExpectedResult>
The initial picked option should be "Please select an
item", however it should not be a selectable option.
The initial picked option should be "Please select an item", however
it should not be a selectable option.
</TestCase.ExpectedResult>
<div className="test-fixture">
<select defaultValue="">
<option value="" disabled>Please select an item</option>
<option value="" disabled>
Please select an item
</option>
<option>0</option>
<option>1</option>
<option>2</option>
@ -100,7 +102,8 @@ class SelectFixture extends React.Component {
<TestCase title="An unselected disabled option" relatedIssues="2803">
<TestCase.ExpectedResult>
The initial picked option value should "0": the first non-disabled option.
The initial picked option value should "0": the first non-disabled
option.
</TestCase.ExpectedResult>
<div className="test-fixture">

4
fixtures/dom/src/components/fixtures/text-inputs/InputTestCase.js
View File

@ -43,9 +43,7 @@ class InputTestCase extends React.Component {
<fieldset>
<legend>Controlled {type}</legend>
<input type={type} value={value} onChange={this.onChange} />
<p className="hint">
Value: {JSON.stringify(this.state.value)}
</p>
<p className="hint">Value: {JSON.stringify(this.state.value)}</p>
</fieldset>
<fieldset>

6
fixtures/dom/src/components/fixtures/text-inputs/index.js
View File

@ -36,9 +36,9 @@ class TextInputFixtures extends React.Component {
</Fixture>
<p className="footnote">
This issue was first introduced when we added extra logic
to number inputs to prevent unexpected behavior in Chrome
and Safari (see the number input test case).
This issue was first introduced when we added extra logic to number
inputs to prevent unexpected behavior in Chrome and Safari (see the
number input test case).
</p>
</TestCase>

4
fixtures/dom/src/components/fixtures/textareas/index.js
View File

@ -27,9 +27,7 @@ export default class TextAreaFixtures extends React.Component {
</form>
<div className="container">
<h4>Controlled Output:</h4>
<div className="output">
{this.state.value}
</div>
<div className="output">{this.state.value}</div>
</div>
</div>
</TestCase>

16
fixtures/dom/src/index.js
View File

@ -1,11 +1,13 @@
import './polyfills';
import loadReact from './react-loader';
loadReact().then(() => import('./components/App')).then(App => {
const {React, ReactDOM} = window;
loadReact()
.then(() => import('./components/App'))
.then(App => {
const {React, ReactDOM} = window;
ReactDOM.render(
React.createElement(App.default),
document.getElementById('root')
);
});
ReactDOM.render(
React.createElement(App.default),
document.getElementById('root')
);
});

18
fixtures/fiber-debugger/src/App.js
View File

@ -160,14 +160,15 @@ class App extends Component {
return (
<div style={{height: '100%'}}>
{fibers &&
{fibers && (
<Draggable>
<Fibers
fibers={fibers}
show={this.state.show}
graphSettings={this.state.graphSettings}
/>
</Draggable>}
</Draggable>
)}
<div
style={{
width: '100%',
@ -187,17 +188,12 @@ class App extends Component {
max={history.length - 1}
value={currentStep}
onChange={e =>
this.setState({currentStep: Number(e.target.value)})}
this.setState({currentStep: Number(e.target.value)})
}
/>
<p>
Step
{' '}
{currentStep}
:
{' '}
{friendlyAction}
{' '}
(
Step {currentStep}
: {friendlyAction} (
<a style={{color: 'gray'}} onClick={this.handleEdit} href="#">
Edit
</a>

174
fixtures/fiber-debugger/src/Fibers.js
View File

@ -83,7 +83,8 @@ function Graph(props) {
y: interpolatingStyle.y + props.dy,
vanillaX: node.x,
vanillaY: node.y,
})}
})
}
</Motion>
);
});
@ -227,7 +228,8 @@ function Edge(props) {
/>
<text>
<textPath xlinkHref={`#${lineID}`}>
{'     '}{props.children}
{'     '}
{props.children}
</textPath>
</text>
</svg>
@ -258,9 +260,8 @@ export default function Fibers({fibers, show, graphSettings, ...rest}) {
);
const isDragging = rest.className.indexOf('dragging') > -1;
const [_, sdx, sdy] = rest.style.transform.match(
/translate\((-?\d+)px,(-?\d+)px\)/
) || [];
const [_, sdx, sdy] =
rest.style.transform.match(/translate\((-?\d+)px,(-?\d+)px\)/) || [];
const dx = Number(sdx);
const dy = Number(sdy);
@ -298,29 +299,31 @@ export default function Fibers({fibers, show, graphSettings, ...rest}) {
/*prettyFormat(fiber, { plugins: [reactElement ]})*/
'todo: this was hanging last time I tried to pretty print'
}>
<small>{fiber.tag} #{fiber.id}</small>
<small>
{fiber.tag} #{fiber.id}
</small>
<br />
{fiber.type}
<br />
{fibers.currentIDs.indexOf(fiber.id) === -1
? <small>
{fiber.pendingWorkPriority !== 0 && [
<span key="span">
Needs: {formatPriority(fiber.pendingWorkPriority)}
</span>,
<br key="br" />,
]}
{fiber.memoizedProps !== null &&
{fibers.currentIDs.indexOf(fiber.id) === -1 ? (
<small>
{fiber.pendingWorkPriority !== 0 && [
<span key="span">
Needs: {formatPriority(fiber.pendingWorkPriority)}
</span>,
<br key="br" />,
]}
{fiber.memoizedProps !== null &&
fiber.pendingProps !== null && [
fiber.memoizedProps === fiber.pendingProps
? 'Can reuse memoized.'
: 'Cannot reuse memoized.',
<br key="br" />,
]}
</small>
: <small>
Committed
</small>}
</small>
) : (
<small>Committed</small>
)}
{fiber.effectTag && [
<br key="br" />,
<small key="small">Effect: {fiber.effectTag}</small>,
@ -328,75 +331,82 @@ export default function Fibers({fibers, show, graphSettings, ...rest}) {
</div>
</Vertex>,
fiber.child &&
show.child &&
<Edge
source={fiber.id}
target={fiber.child}
kind="child"
weight={1000}
key={`${fiber.id}-${fiber.child}-child`}>
child
</Edge>,
show.child && (
<Edge
source={fiber.id}
target={fiber.child}
kind="child"
weight={1000}
key={`${fiber.id}-${fiber.child}-child`}>
child
</Edge>
),
fiber.sibling &&
show.sibling &&
<Edge
source={fiber.id}
target={fiber.sibling}
kind="sibling"
weight={2000}
key={`${fiber.id}-${fiber.sibling}-sibling`}>
sibling
</Edge>,
show.sibling && (
<Edge
source={fiber.id}
target={fiber.sibling}
kind="sibling"
weight={2000}
key={`${fiber.id}-${fiber.sibling}-sibling`}>
sibling
</Edge>
),
fiber.return &&
show.return &&
<Edge
source={fiber.id}
target={fiber.return}
kind="return"
weight={1000}
key={`${fiber.id}-${fiber.return}-return`}>
return
</Edge>,
show.return && (
<Edge
source={fiber.id}
target={fiber.return}
kind="return"
weight={1000}
key={`${fiber.id}-${fiber.return}-return`}>
return
</Edge>
),
fiber.nextEffect &&
show.fx &&
<Edge
source={fiber.id}
target={fiber.nextEffect}
kind="fx"
weight={100}
key={`${fiber.id}-${fiber.nextEffect}-nextEffect`}>
nextFx
</Edge>,
show.fx && (
<Edge
source={fiber.id}
target={fiber.nextEffect}
kind="fx"
weight={100}
key={`${fiber.id}-${fiber.nextEffect}-nextEffect`}>
nextFx
</Edge>
),
fiber.firstEffect &&
show.fx &&
<Edge
source={fiber.id}
target={fiber.firstEffect}
kind="fx"
weight={100}
key={`${fiber.id}-${fiber.firstEffect}-firstEffect`}>
firstFx
</Edge>,
show.fx && (
<Edge
source={fiber.id}
target={fiber.firstEffect}
kind="fx"
weight={100}
key={`${fiber.id}-${fiber.firstEffect}-firstEffect`}>
firstFx
</Edge>
),
fiber.lastEffect &&
show.fx &&
<Edge
source={fiber.id}
target={fiber.lastEffect}
kind="fx"
weight={100}
key={`${fiber.id}-${fiber.lastEffect}-lastEffect`}>
lastFx
</Edge>,
show.fx && (
<Edge
source={fiber.id}
target={fiber.lastEffect}
kind="fx"
weight={100}
key={`${fiber.id}-${fiber.lastEffect}-lastEffect`}>
lastFx
</Edge>
),
fiber.alternate &&
show.alt &&
<Edge
source={fiber.id}
target={fiber.alternate}
kind="alt"
weight={10}
key={`${fiber.id}-${fiber.alternate}-alt`}>
alt
</Edge>,
show.alt && (
<Edge
source={fiber.id}
target={fiber.alternate}
kind="alt"
weight={10}
key={`${fiber.id}-${fiber.alternate}-alt`}>
alt
</Edge>
),
])}
</Graph>
</div>

9
fixtures/reconciler/index.js
View File

@ -297,7 +297,10 @@ Noop.render(
<div>Hello</div>
<Children>
Hello world
<span>{'Number '}{42}</span>
<span>
{'Number '}
{42}
</span>
<Test active={true} ref={t => (instance = t)} />
</Children>
</main>
@ -324,7 +327,7 @@ const expected1 = [
assert.deepEqual(
actual1,
expected1,
'Error. Noop.getChildren() returned unexpected value.\nExpected:\ ' +
'Error. Noop.getChildren() returned unexpected value.\nExpected: ' +
JSON.stringify(expected1, null, 2) +
'\n\nActual:\n ' +
JSON.stringify(actual1, null, 2)
@ -357,7 +360,7 @@ const expected2 = [
assert.deepEqual(
actual2,
expected2,
'Error. Noop.getChildren() returned unexpected value.\nExpected:\ ' +
'Error. Noop.getChildren() returned unexpected value.\nExpected: ' +
JSON.stringify(expected2, null, 2) +
'\n\nActual:\n ' +
JSON.stringify(actual2, null, 2)

17
fixtures/ssr/src/components/Page.js
View File

@ -20,19 +20,10 @@ export default class Page extends Component {
);
return (
<div>
<p suppressHydrationWarning={true}>
A random number: {Math.random()}
</p>
<p>
Autofocus on page load: {autofocusedInputs}
</p>
<p>
{!this.state.active ? link : 'Thanks!'}
</p>
{this.state.active &&
<p>
Autofocus on update: {autofocusedInputs}
</p>}
<p suppressHydrationWarning={true}>A random number: {Math.random()}</p>
<p>Autofocus on page load: {autofocusedInputs}</p>
<p>{!this.state.active ? link : 'Thanks!'}</p>
{this.state.active && <p>Autofocus on update: {autofocusedInputs}</p>}
</div>
);
}

2
package.json
View File

@ -73,7 +73,7 @@
"ncp": "^2.0.0",
"object-assign": "^4.1.1",
"platform": "^1.1.0",
"prettier": "1.2.2",
"prettier": "1.8.1",
"prop-types": "^15.6.0",
"rimraf": "^2.6.1",
"rollup": "^0.49.3",

12
packages/events/ResponderEventPlugin.js
View File

@ -321,10 +321,10 @@ function setResponderAndExtractTransfer(
var shouldSetEventType = isStartish(topLevelType)
? eventTypes.startShouldSetResponder
: isMoveish(topLevelType)
? eventTypes.moveShouldSetResponder
: topLevelType === 'topSelectionChange'
? eventTypes.selectionChangeShouldSetResponder
: eventTypes.scrollShouldSetResponder;
? eventTypes.moveShouldSetResponder
: topLevelType === 'topSelectionChange'
? eventTypes.selectionChangeShouldSetResponder
: eventTypes.scrollShouldSetResponder;
// TODO: stop one short of the current responder.
var bubbleShouldSetFrom = !responderInst
@ -518,8 +518,8 @@ var ResponderEventPlugin = {
var incrementalTouch = isResponderTouchStart
? eventTypes.responderStart
: isResponderTouchMove
? eventTypes.responderMove
: isResponderTouchEnd ? eventTypes.responderEnd : null;
? eventTypes.responderMove
: isResponderTouchEnd ? eventTypes.responderEnd : null;
if (incrementalTouch) {
var gesture = ResponderSyntheticEvent.getPooled(

25
packages/events/SyntheticEvent.js
View File

@ -99,9 +99,10 @@ function SyntheticEvent(
}
}
var defaultPrevented = nativeEvent.defaultPrevented != null
? nativeEvent.defaultPrevented
: nativeEvent.returnValue === false;
var defaultPrevented =
nativeEvent.defaultPrevented != null
? nativeEvent.defaultPrevented
: nativeEvent.returnValue === false;
if (defaultPrevented) {
this.isDefaultPrevented = emptyFunction.thatReturnsTrue;
} else {
@ -227,9 +228,9 @@ SyntheticEvent.augmentClass = function(Class, Interface) {
};
/** Proxying after everything set on SyntheticEvent
* to resolve Proxy issue on some WebKit browsers
* in which some Event properties are set to undefined (GH#10010)
*/
* to resolve Proxy issue on some WebKit browsers
* in which some Event properties are set to undefined (GH#10010)
*/
if (__DEV__) {
if (isProxySupported) {
/*eslint-disable no-func-assign */
@ -267,12 +268,12 @@ if (__DEV__) {
addEventPoolingTo(SyntheticEvent);
/**
* Helper to nullify syntheticEvent instance properties when destructing
*
* @param {String} propName
* @param {?object} getVal
* @return {object} defineProperty object
*/
* Helper to nullify syntheticEvent instance properties when destructing
*
* @param {String} propName
* @param {?object} getVal
* @return {object} defineProperty object
*/
function getPooledWarningPropertyDefinition(propName, getVal) {
var isFunction = typeof getVal === 'function';
return {

18
packages/events/TouchHistoryMath.js
View File

@ -32,22 +32,24 @@ var TouchHistoryMath = {
var total = 0;
var count = 0;
var oneTouchData = touchHistory.numberActiveTouches === 1
? touchHistory.touchBank[touchHistory.indexOfSingleActiveTouch]
: null;
var oneTouchData =
touchHistory.numberActiveTouches === 1
? touchHistory.touchBank[touchHistory.indexOfSingleActiveTouch]
: null;
if (oneTouchData !== null) {
if (
oneTouchData.touchActive &&
oneTouchData.currentTimeStamp > touchesChangedAfter
) {
total += ofCurrent && isXAxis
? oneTouchData.currentPageX
: ofCurrent && !isXAxis
total +=
ofCurrent && isXAxis
? oneTouchData.currentPageX
: ofCurrent && !isXAxis
? oneTouchData.currentPageY
: !ofCurrent && isXAxis
? oneTouchData.previousPageX
: oneTouchData.previousPageY;
? oneTouchData.previousPageX
: oneTouchData.previousPageY;
count = 1;
}
} else {

7
packages/react-art/npm/Wedge.js vendored
View File

@ -61,7 +61,7 @@ var Wedge = createReactClass({
// 360, 720, etc.
return this.circleRadians;
} else {
return degrees * this.radiansPerDegree % this.circleRadians;
return (degrees * this.radiansPerDegree) % this.circleRadians;
}
},
@ -77,7 +77,10 @@ var Wedge = createReactClass({
_createCirclePath: function _createCirclePath(or, ir) {
var path = Path();
path.move(0, or).arc(or * 2, 0, or).arc(-or * 2, 0, or);
path
.move(0, or)
.arc(or * 2, 0, or)
.arc(-or * 2, 0, or);
if (ir) {
path

22
packages/react-call-return/src/__tests__/ReactCallReturn-test.js vendored
View File

@ -74,7 +74,13 @@ describe('ReactCallReturn', () => {
}
function App() {
return <div><Parent foo={true}><Indirection /></Parent></div>;
return (
<div>
<Parent foo={true}>
<Indirection />
</Parent>
</div>
);
}
ReactNoop.render(<App />);
@ -130,7 +136,13 @@ describe('ReactCallReturn', () => {
}
function App(props) {
return <div><Parent foo={props.foo}><Indirection /></Parent></div>;
return (
<div>
<Parent foo={props.foo}>
<Indirection />
</Parent>
</div>
);
}
ReactNoop.render(<App foo={true} />);
@ -190,7 +202,11 @@ describe('ReactCallReturn', () => {
}
}
ReactNoop.render(<Parent><Child /></Parent>);
ReactNoop.render(
<Parent>
<Child />
</Parent>,
);
ReactNoop.flush();
expect(ops).toEqual(['Parent', 'Child', 'HandleReturns', 'Continuation']);

2
packages/react-cs-renderer/src/ReactNativeCSFeatureFlags.js vendored
View File

@ -30,6 +30,6 @@ export function addUserTimingListener() {
// Flow magic to verify the exports of this file match the original version.
// eslint-disable-next-line no-unused-vars
type Check<_X, Y: _X, X: Y=_X> = null;
type Check<_X, Y: _X, X: Y = _X> = null;
// eslint-disable-next-line no-unused-expressions
(null: Check<CSFeatureFlagsType, FeatureFlagsType>);

32
packages/react-dom/src/__tests__/ReactComponent-test.js vendored
View File

@ -104,7 +104,11 @@ describe('ReactComponent', () => {
class Component extends React.Component {
render() {
var inner = <Wrapper object={innerObj} ref="inner" />;
var outer = <Wrapper object={outerObj} ref="outer">{inner}</Wrapper>;
var outer = (
<Wrapper object={outerObj} ref="outer">
{inner}
</Wrapper>
);
return outer;
}
@ -120,7 +124,11 @@ describe('ReactComponent', () => {
it('should not have refs on unmounted components', () => {
class Parent extends React.Component {
render() {
return <Child><div ref="test" /></Child>;
return (
<Child>
<div ref="test" />
</Child>
);
}
componentDidMount() {
@ -357,7 +365,11 @@ describe('ReactComponent', () => {
}
function Bar() {
return <Indirection><X /></Indirection>;
return (
<Indirection>
<X />
</Indirection>
);
}
function Foo() {
@ -513,7 +525,11 @@ describe('ReactComponent', () => {
it('warns on function as a child to host component', () => {
function Foo() {
return <div><span>{Foo}</span></div>;
return (
<div>
<span>{Foo}</span>
</div>
);
}
spyOn(console, 'error');
var container = document.createElement('div');
@ -553,8 +569,12 @@ describe('ReactComponent', () => {
render() {
return (
<div>
{Foo}{Foo}
<span>{Foo}{Foo}</span>
{Foo}
{Foo}
<span>
{Foo}
{Foo}
</span>
</div>
);
}

12
packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.js vendored
View File

@ -373,11 +373,7 @@ describe('ReactComponentLifeCycle', () => {
}
// you would *NEVER* do anything like this in real code!
this.state.hasRenderCompleted = true;
return (
<div ref="theDiv">
I am the inner DIV
</div>
);
return <div ref="theDiv">I am the inner DIV</div>;
}
componentWillUnmount() {
@ -536,7 +532,11 @@ describe('ReactComponentLifeCycle', () => {
componentDidUpdate = logger('outer componentDidUpdate');
componentWillUnmount = logger('outer componentWillUnmount');
render() {
return <div><Inner x={this.props.x} /></div>;
return (
<div>
<Inner x={this.props.x} />
</div>
);
}
}

64
packages/react-dom/src/__tests__/ReactCompositeComponent-test.js vendored
View File

@ -48,9 +48,11 @@ describe('ReactCompositeComponent', () => {
render() {
var toggleActivatedState = this._toggleActivatedState;
return !this.state.activated
? <a ref="x" onClick={toggleActivatedState} />
: <b ref="x" onClick={toggleActivatedState} />;
return !this.state.activated ? (
<a ref="x" onClick={toggleActivatedState} />
) : (
<b ref="x" onClick={toggleActivatedState} />
);
}
};
@ -65,9 +67,11 @@ describe('ReactCompositeComponent', () => {
render() {
var className = this.props.anchorClassOn ? 'anchorClass' : '';
return this.props.renderAnchor
? <a ref="anch" className={className} />
: <b />;
return this.props.renderAnchor ? (
<a ref="anch" className={className} />
) : (
<b />
);
}
};
});
@ -110,7 +114,11 @@ describe('ReactCompositeComponent', () => {
class Parent extends React.Component {
render() {
return <div><Child /></div>;
return (
<div>
<Child />
</div>
);
}
}
@ -582,7 +590,11 @@ describe('ReactCompositeComponent', () => {
it('should pass context to children when not owner', () => {
class Parent extends React.Component {
render() {
return <Child><Grandchild /></Child>;
return (
<Child>
<Grandchild />
</Child>
);
}
}
@ -685,7 +697,11 @@ describe('ReactCompositeComponent', () => {
}
parentInstance = ReactTestUtils.renderIntoDocument(
<Parent><Middle><Child /></Middle></Parent>,
<Parent>
<Middle>
<Child />
</Middle>
</Parent>,
);
expect(parentInstance.state.flag).toBe(false);
@ -1139,15 +1155,23 @@ describe('ReactCompositeComponent', () => {
if (this.props.flipped) {
return (
<div>
<Static ref="static0" key="B">B (ignored)</Static>
<Static ref="static1" key="A">A (ignored)</Static>
<Static ref="static0" key="B">
B (ignored)
</Static>
<Static ref="static1" key="A">
A (ignored)
</Static>
</div>
);
} else {
return (
<div>
<Static ref="static0" key="A">A</Static>
<Static ref="static1" key="B">B</Static>
<Static ref="static0" key="A">
A
</Static>
<Static ref="static1" key="B">
B
</Static>
</div>
);
}
@ -1221,7 +1245,12 @@ describe('ReactCompositeComponent', () => {
}
var div = document.createElement('div');
ReactDOM.render(<Parent><Component /></Parent>, div);
ReactDOM.render(
<Parent>
<Component />
</Parent>,
div,
);
});
it('should replace state', () => {
@ -1314,7 +1343,12 @@ describe('ReactCompositeComponent', () => {
}
}
ReactDOM.render(<Outer><Component /></Outer>, container);
ReactDOM.render(
<Outer>
<Component />
</Outer>,
container,
);
ReactDOM.render(<Outer />, container);
});

36
packages/react-dom/src/__tests__/ReactCompositeComponentDOMMinimalism-test.js vendored
View File

@ -33,21 +33,13 @@ describe('ReactCompositeComponentDOMMinimalism', () => {
LowerLevelComposite = class extends React.Component {
render() {
return (
<div>
{this.props.children}
</div>
);
return <div>{this.props.children}</div>;
}
};
MyCompositeComponent = class extends React.Component {
render() {
return (
<LowerLevelComposite>
{this.props.children}
</LowerLevelComposite>
);
return <LowerLevelComposite>{this.props.children}</LowerLevelComposite>;
}
};
@ -58,11 +50,15 @@ describe('ReactCompositeComponentDOMMinimalism', () => {
};
});
it('should not render extra nodes for non-interpolated text', () => {
var instance = <MyCompositeComponent>A string child</MyCompositeComponent>;
instance = ReactTestUtils.renderIntoDocument(instance);
expectSingleChildlessDiv(instance);
});
it('should not render extra nodes for non-interpolated text', () => {
var instance = (
<MyCompositeComponent>
A string child
</MyCompositeComponent>
<MyCompositeComponent>{'Interpolated String Child'}</MyCompositeComponent>
);
instance = ReactTestUtils.renderIntoDocument(instance);
expectSingleChildlessDiv(instance);
@ -71,19 +67,7 @@ describe('ReactCompositeComponentDOMMinimalism', () => {
it('should not render extra nodes for non-interpolated text', () => {
var instance = (
<MyCompositeComponent>
{'Interpolated String Child'}
</MyCompositeComponent>
);
instance = ReactTestUtils.renderIntoDocument(instance);
expectSingleChildlessDiv(instance);
});
it('should not render extra nodes for non-interpolated text', () => {
var instance = (
<MyCompositeComponent>
<ul>
This text causes no children in ul, just innerHTML
</ul>
<ul>This text causes no children in ul, just innerHTML</ul>
</MyCompositeComponent>
);
instance = ReactTestUtils.renderIntoDocument(instance);

6
packages/react-dom/src/__tests__/ReactCompositeComponentState-test.js vendored
View File

@ -390,7 +390,8 @@ describe('ReactCompositeComponent-state', () => {
this.setState({step: 2}, () => {
// Tests that earlier setState callbacks are not dropped
ops.push(
`callback -- step: ${this.state.step}, extra: ${!!this.state.extra}`,
`callback -- step: ${this.state.step}, extra: ${!!this.state
.extra}`,
);
});
// Treat like replaceState
@ -437,7 +438,8 @@ describe('ReactCompositeComponent-state', () => {
this.setState({step: 2}, () => {
// Tests that earlier setState callbacks are not dropped
ops.push(
`callback -- step: ${this.state.step}, extra: ${!!this.state.extra}`,
`callback -- step: ${this.state.step}, extra: ${!!this.state
.extra}`,
);
});
// Treat like replaceState

5
packages/react-dom/src/__tests__/ReactDOM-test.js vendored
View File

@ -207,8 +207,9 @@ describe('ReactDOM', () => {
return (
<div>
<input id="one" ref={r => (input = input || r)} />
{this.props.showTwo &&
<input id="two" ref={r => (input2 = input2 || r)} />}
{this.props.showTwo && (
<input id="two" ref={r => (input2 = input2 || r)} />
)}
</div>
);
}

163
packages/react-dom/src/__tests__/ReactDOMComponent-test.js vendored
View File

@ -580,22 +580,40 @@ describe('ReactDOMComponent', () => {
it('should transition from innerHTML to children in nested el', () => {
var container = document.createElement('div');
ReactDOM.render(
<div><div dangerouslySetInnerHTML={{__html: 'bonjour'}} /></div>,
<div>
<div dangerouslySetInnerHTML={{__html: 'bonjour'}} />
</div>,
container,
);
expect(container.textContent).toEqual('bonjour');
ReactDOM.render(<div><div><span>adieu</span></div></div>, container);
ReactDOM.render(
<div>
<div>
<span>adieu</span>
</div>
</div>,
container,
);
expect(container.textContent).toEqual('adieu');
});
it('should transition from children to innerHTML in nested el', () => {
var container = document.createElement('div');
ReactDOM.render(<div><div><span>adieu</span></div></div>, container);
ReactDOM.render(
<div>
<div>
<span>adieu</span>
</div>
</div>,
container,
);
expect(container.textContent).toEqual('adieu');
ReactDOM.render(
<div><div dangerouslySetInnerHTML={{__html: 'bonjour'}} /></div>,
<div>
<div dangerouslySetInnerHTML={{__html: 'bonjour'}} />
</div>,
container,
);
expect(container.textContent).toEqual('bonjour');
@ -744,10 +762,12 @@ describe('ReactDOMComponent', () => {
ReactDOM.render(
<div>
<div key="one">
<div key="A">A</div><div key="B">B</div>
<div key="A">A</div>
<div key="B">B</div>
</div>
<div key="two">
<div key="C">C</div><div key="D">D</div>
<div key="C">C</div>
<div key="D">D</div>
</div>
</div>,
container,
@ -756,10 +776,12 @@ describe('ReactDOMComponent', () => {
ReactDOM.render(
<div>
<div key="one">
<div key="B">B</div><div key="A">A</div>
<div key="B">B</div>
<div key="A">A</div>
</div>
<div key="two">
<div key="D">D</div><div key="C">C</div>
<div key="D">D</div>
<div key="C">C</div>
</div>
</div>,
container,
@ -1050,13 +1072,20 @@ describe('ReactDOMComponent', () => {
var container = document.createElement('div');
var returnedValue = ReactDOMServer.renderToString(
<menu><menuitem /></menu>,
<menu>
<menuitem />
</menu>,
);
expect(returnedValue).toContain('</menuitem>');
expect(function() {
ReactDOM.render(<menu><menuitem>children</menuitem></menu>, container);
ReactDOM.render(
<menu>
<menuitem>children</menuitem>
</menu>,
container,
);
}).toThrowError(
'menuitem is a void element tag and must neither have `children` nor use ' +
'`dangerouslySetInnerHTML`.',
@ -1275,7 +1304,12 @@ describe('ReactDOMComponent', () => {
it('should warn about contentEditable and children', () => {
spyOn(console, 'error');
ReactDOM.render(<div contentEditable={true}><div /></div>, container);
ReactDOM.render(
<div contentEditable={true}>
<div />
</div>,
container,
);
expectDev(console.error.calls.count()).toBe(1);
expectDev(console.error.calls.argsFor(0)[0]).toContain('contentEditable');
});
@ -1352,7 +1386,12 @@ describe('ReactDOMComponent', () => {
}
var container = document.createElement('div');
ReactDOM.render(<div><Inner /></div>, container);
ReactDOM.render(
<div>
<Inner />
</div>,
container,
);
ReactDOM.unmountComponentAtNode(container);
});
});
@ -1386,21 +1425,37 @@ describe('ReactDOMComponent', () => {
describe('nesting validation', () => {
it('warns on invalid nesting', () => {
spyOn(console, 'error');
ReactTestUtils.renderIntoDocument(<div><tr /><tr /></div>);
ReactTestUtils.renderIntoDocument(
<div>
<tr />
<tr />
</div>,
);
expectDev(console.error.calls.count()).toBe(1);
expectDev(console.error.calls.count()).toBe(2);
expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toBe(
'Warning: validateDOMNesting(...): <tr> cannot appear as a child of ' +
'<div>.' +
'\n in tr (at **)' +
'\n in div (at **)',
);
expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(1)[0])).toBe(
'Warning: validateDOMNesting(...): <tr> cannot appear as a child of ' +
'<div>.' +
'\n in tr (at **)' +
'\n in div (at **)',
);
});
it('warns on invalid nesting at root', () => {
spyOn(console, 'error');
var p = document.createElement('p');
ReactDOM.render(<span><p /></span>, p);
ReactDOM.render(
<span>
<p />
</span>,
p,
);
expectDev(console.error.calls.count()).toBe(1);
expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toBe(
@ -1423,7 +1478,11 @@ describe('ReactDOMComponent', () => {
class Foo extends React.Component {
render() {
return <table><Row /> </table>;
return (
<table>
<Row />{' '}
</table>
);
}
}
@ -1480,7 +1539,11 @@ describe('ReactDOMComponent', () => {
}
function Viz1() {
return <table><FancyRow /></table>;
return (
<table>
<FancyRow />
</table>
);
}
function App1() {
return <Viz1 />;
@ -1498,7 +1561,11 @@ describe('ReactDOMComponent', () => {
);
function Viz2() {
return <FancyTable><FancyRow /></FancyTable>;
return (
<FancyTable>
<FancyRow />
</FancyTable>
);
}
function App2() {
return <Viz2 />;
@ -1517,7 +1584,11 @@ describe('ReactDOMComponent', () => {
'\n in Viz2 (at **)',
);
ReactTestUtils.renderIntoDocument(<FancyTable><FancyRow /></FancyTable>);
ReactTestUtils.renderIntoDocument(
<FancyTable>
<FancyRow />
</FancyTable>,
);
expectDev(console.error.calls.count()).toBe(3);
expectDev(
normalizeCodeLocInfo(console.error.calls.argsFor(2)[0]),
@ -1530,7 +1601,11 @@ describe('ReactDOMComponent', () => {
'\n in FancyTable (at **)',
);
ReactTestUtils.renderIntoDocument(<table><FancyRow /></table>);
ReactTestUtils.renderIntoDocument(
<table>
<FancyRow />
</table>,
);
expectDev(console.error.calls.count()).toBe(4);
expectDev(
normalizeCodeLocInfo(console.error.calls.argsFor(3)[0]),
@ -1541,7 +1616,11 @@ describe('ReactDOMComponent', () => {
'\n in table (at **)',
);
ReactTestUtils.renderIntoDocument(<FancyTable><tr /></FancyTable>);
ReactTestUtils.renderIntoDocument(
<FancyTable>
<tr />
</FancyTable>,
);
expectDev(console.error.calls.count()).toBe(5);
expectDev(
normalizeCodeLocInfo(console.error.calls.argsFor(4)[0]),
@ -1558,7 +1637,13 @@ describe('ReactDOMComponent', () => {
}
}
ReactTestUtils.renderIntoDocument(<Link><div><Link /></div></Link>);
ReactTestUtils.renderIntoDocument(
<Link>
<div>
<Link />
</div>
</Link>,
);
expectDev(console.error.calls.count()).toBe(6);
expectDev(
normalizeCodeLocInfo(console.error.calls.argsFor(5)[0]),
@ -1771,8 +1856,8 @@ describe('ReactDOMComponent', () => {
var previousLine = (matches || [])[1];
expectDev(console.error.calls.argsFor(1)[0]).toContain('onClick');
matches = console.error.calls.argsFor(1)[0].match(/.*\(.*:(\d+)\).*/) || {
};
matches =
console.error.calls.argsFor(1)[0].match(/.*\(.*:(\d+)\).*/) || {};
var currentLine = (matches || [])[1];
//verify line number has a proper relative difference,
@ -1786,7 +1871,14 @@ describe('ReactDOMComponent', () => {
class Parent extends React.Component {
render() {
return <div><Child1 /><Child2 /><Child3 /><Child4 /></div>;
return (
<div>
<Child1 />
<Child2 />
<Child3 />
<Child4 />
</div>
);
}
}
@ -1837,7 +1929,14 @@ describe('ReactDOMComponent', () => {
class Parent extends React.Component {
render() {
return <div><Child1 /><Child2 /><Child3 /><Child4 /></div>;
return (
<div>
<Child1 />
<Child2 />
<Child3 />
<Child4 />
</div>
);
}
}
@ -1980,7 +2079,9 @@ describe('ReactDOMComponent', () => {
spyOn(console, 'error');
var el = ReactTestUtils.renderIntoDocument(
<svg><text arabic-form="initial" /></svg>,
<svg>
<text arabic-form="initial" />
</svg>,
);
var text = el.querySelector('text');
@ -2264,7 +2365,9 @@ describe('ReactDOMComponent', () => {
it('the font-face element is not a custom element', function() {
spyOn(console, 'error');
var el = ReactTestUtils.renderIntoDocument(
<svg><font-face x-height={false} /></svg>,
<svg>
<font-face x-height={false} />
</svg>,
);
expect(el.querySelector('font-face').hasAttribute('x-height')).toBe(
@ -2280,7 +2383,9 @@ describe('ReactDOMComponent', () => {
it('the font-face element does not allow unknown boolean values', function() {
spyOn(console, 'error');
var el = ReactTestUtils.renderIntoDocument(
<svg><font-face whatever={false} /></svg>,
<svg>
<font-face whatever={false} />
</svg>,
);
expect(el.querySelector('font-face').hasAttribute('whatever')).toBe(

6
packages/react-dom/src/__tests__/ReactDOMComponentTree-test.js vendored
View File

@ -85,7 +85,11 @@ describe('ReactDOMComponentTree', () => {
}
function renderAndQuery(sel) {
var root = renderMarkupIntoDocument(<section><Component /></section>);
var root = renderMarkupIntoDocument(
<section>
<Component />
</section>,
);
return sel ? root.querySelector(sel) : root;
}

8
packages/react-dom/src/__tests__/ReactDOMEventListener-test.js vendored
View File

@ -193,7 +193,13 @@ describe('ReactDOMEventListener', () => {
render() {
var inner = <div ref="inner">Inner</div>;
return <div><div onMouseOut={onMouseOut} id="outer">{inner}</div></div>;
return (
<div>
<div onMouseOut={onMouseOut} id="outer">
{inner}
</div>
</div>
);
}
}

35
packages/react-dom/src/__tests__/ReactDOMFiber-test.js vendored
View File

@ -133,7 +133,12 @@ describe('ReactDOMFiber', () => {
class Fragment extends React.Component {
render() {
return [<Wrapper key="a"><div /></Wrapper>, <span key="b" />];
return [
<Wrapper key="a">
<div />
</Wrapper>,
<span key="b" />,
];
}
}
@ -204,9 +209,7 @@ describe('ReactDOMFiber', () => {
var portalContainer = document.createElement('div');
ReactDOM.render(
<div>
{ReactDOM.createPortal(<div>portal</div>, portalContainer)}
</div>,
<div>{ReactDOM.createPortal(<div>portal</div>, portalContainer)}</div>,
container,
);
expect(portalContainer.innerHTML).toBe('<div>portal</div>');
@ -382,54 +385,42 @@ describe('ReactDOMFiber', () => {
var portalContainer = document.createElement('div');
ReactDOM.render(
<div>
{ReactDOM.createPortal(<div>portal:1</div>, portalContainer)}
</div>,
<div>{ReactDOM.createPortal(<div>portal:1</div>, portalContainer)}</div>,
container,
);
expect(portalContainer.innerHTML).toBe('<div>portal:1</div>');
expect(container.innerHTML).toBe('<div></div>');
ReactDOM.render(
<div>
{ReactDOM.createPortal(<div>portal:2</div>, portalContainer)}
</div>,
<div>{ReactDOM.createPortal(<div>portal:2</div>, portalContainer)}</div>,
container,
);
expect(portalContainer.innerHTML).toBe('<div>portal:2</div>');
expect(container.innerHTML).toBe('<div></div>');
ReactDOM.render(
<div>
{ReactDOM.createPortal(<p>portal:3</p>, portalContainer)}
</div>,
<div>{ReactDOM.createPortal(<p>portal:3</p>, portalContainer)}</div>,
container,
);
expect(portalContainer.innerHTML).toBe('<p>portal:3</p>');
expect(container.innerHTML).toBe('<div></div>');
ReactDOM.render(
<div>
{ReactDOM.createPortal(['Hi', 'Bye'], portalContainer)}
</div>,
<div>{ReactDOM.createPortal(['Hi', 'Bye'], portalContainer)}</div>,
container,
);
expect(portalContainer.innerHTML).toBe('HiBye');
expect(container.innerHTML).toBe('<div></div>');
ReactDOM.render(
<div>
{ReactDOM.createPortal(['Bye', 'Hi'], portalContainer)}
</div>,
<div>{ReactDOM.createPortal(['Bye', 'Hi'], portalContainer)}</div>,
container,
);
expect(portalContainer.innerHTML).toBe('ByeHi');
expect(container.innerHTML).toBe('<div></div>');
ReactDOM.render(
<div>
{ReactDOM.createPortal(null, portalContainer)}
</div>,
<div>{ReactDOM.createPortal(null, portalContainer)}</div>,
container,
);
expect(portalContainer.innerHTML).toBe('');

34
packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js vendored
View File

@ -46,13 +46,17 @@ describe('ReactDOMFiberAsync', () => {
it('renders synchronously', () => {
ReactDOM.render(
<AsyncComponent><div>Hi</div></AsyncComponent>,
<AsyncComponent>
<div>Hi</div>
</AsyncComponent>,
container,
);
expect(container.textContent).toEqual('Hi');
ReactDOM.render(
<AsyncComponent><div>Bye</div></AsyncComponent>,
<AsyncComponent>
<div>Bye</div>
</AsyncComponent>,
container,
);
expect(container.textContent).toEqual('Bye');
@ -70,7 +74,9 @@ describe('ReactDOMFiberAsync', () => {
it('AsyncComponent at the root makes the entire tree async', () => {
ReactDOM.render(
<AsyncComponent><div>Hi</div></AsyncComponent>,
<AsyncComponent>
<div>Hi</div>
</AsyncComponent>,
container,
);
expect(container.textContent).toEqual('');
@ -78,7 +84,9 @@ describe('ReactDOMFiberAsync', () => {
expect(container.textContent).toEqual('Hi');
ReactDOM.render(
<AsyncComponent><div>Bye</div></AsyncComponent>,
<AsyncComponent>
<div>Bye</div>
</AsyncComponent>,
container,
);
expect(container.textContent).toEqual('Hi');
@ -97,7 +105,9 @@ describe('ReactDOMFiberAsync', () => {
}
ReactDOM.render(
<AsyncComponent><Component /></AsyncComponent>,
<AsyncComponent>
<Component />
</AsyncComponent>,
container,
);
expect(container.textContent).toEqual('');
@ -120,7 +130,12 @@ describe('ReactDOMFiberAsync', () => {
}
}
ReactDOM.render(<div><Component /></div>, container);
ReactDOM.render(
<div>
<Component />
</div>,
container,
);
jest.runAllTimers();
instance.setState({step: 1});
@ -145,7 +160,12 @@ describe('ReactDOMFiberAsync', () => {
}
}
ReactDOM.render(<div><Component /></div>, container);
ReactDOM.render(
<div>
<Component />
</div>,
container,
);
jest.runAllTimers();
instance.setState({step: 1});

1
packages/react-dom/src/__tests__/ReactDOMInput-test.js vendored
View File

@ -629,7 +629,6 @@ describe('ReactDOMInput', () => {
A
<input ref="b" type="radio" name="fruit" onChange={emptyFunction} />
B
<form>
<input
ref="c"

21
packages/react-dom/src/__tests__/ReactDOMOption-test.js vendored
View File

@ -25,7 +25,11 @@ describe('ReactDOMOption', () => {
});
it('should flatten children to a string', () => {
var stub = <option>{1} {'foo'}</option>;
var stub = (
<option>
{1} {'foo'}
</option>
);
stub = ReactTestUtils.renderIntoDocument(stub);
var node = ReactDOM.findDOMNode(stub);
@ -34,7 +38,11 @@ describe('ReactDOMOption', () => {
it('should ignore and warn invalid children types', () => {
spyOn(console, 'error');
var el = <option>{1} <div /> {2}</option>;
var el = (
<option>
{1} <div /> {2}
</option>
);
var node = ReactTestUtils.renderIntoDocument(el);
expect(node.innerHTML).toBe('1 2');
ReactTestUtils.renderIntoDocument(el);
@ -50,7 +58,14 @@ describe('ReactDOMOption', () => {
});
it('should ignore null/undefined/false children without warning', () => {
var stub = <option>{1} {false}{true}{null}{undefined} {2}</option>;
var stub = (
<option>
{1} {false}
{true}
{null}
{undefined} {2}
</option>
);
spyOn(console, 'error');
stub = ReactTestUtils.renderIntoDocument(stub);

12
packages/react-dom/src/__tests__/ReactDOMProduction-test.js vendored
View File

@ -205,7 +205,9 @@ describe('ReactDOMProduction', () => {
ReactDOM.render(<Component />, container);
}).toThrowError(
`Minified React error #${errorCode}; visit ` +
`http://facebook.github.io/react/docs/error-decoder.html?invariant=${errorCode}&args[]=Component` +
`http://facebook.github.io/react/docs/error-decoder.html?invariant=${
errorCode
}&args[]=Component` +
' for the full message or use the non-minified dev environment' +
' for full errors and additional helpful warnings.',
);
@ -219,7 +221,9 @@ describe('ReactDOMProduction', () => {
ReactDOM.render(<input>children</input>, container),
).toThrowError(
`Minified React error #${errorCode}; visit ` +
`http://facebook.github.io/react/docs/error-decoder.html?invariant=${errorCode}&args[]=input&args[]=` +
`http://facebook.github.io/react/docs/error-decoder.html?invariant=${
errorCode
}&args[]=input&args[]=` +
' for the full message or use the non-minified dev environment' +
' for full errors and additional helpful warnings.',
);
@ -227,7 +231,9 @@ describe('ReactDOMProduction', () => {
ReactDOMServer.renderToString(<input>children</input>, container),
).toThrowError(
`Minified React error #${errorCode}; visit ` +
`http://facebook.github.io/react/docs/error-decoder.html?invariant=${errorCode}&args[]=input&args[]=` +
`http://facebook.github.io/react/docs/error-decoder.html?invariant=${
errorCode
}&args[]=input&args[]=` +
' for the full message or use the non-minified dev environment' +
' for full errors and additional helpful warnings.',
);

32
packages/react-dom/src/__tests__/ReactDOMRoot-test.js vendored
View File

@ -38,7 +38,11 @@ describe('ReactDOMRoot', () => {
it('supports hydration', async () => {
const markup = await new Promise(resolve =>
resolve(
ReactDOMServer.renderToString(<div><span className="extra" /></div>),
ReactDOMServer.renderToString(
<div>
<span className="extra" />
</div>,
),
),
);
@ -48,14 +52,22 @@ describe('ReactDOMRoot', () => {
const container1 = document.createElement('div');
container1.innerHTML = markup;
const root1 = ReactDOM.createRoot(container1);
root1.render(<div><span /></div>);
root1.render(
<div>
<span />
</div>,
);
expect(console.error.calls.count()).toBe(0);
// Accepts `hydrate` option
const container2 = document.createElement('div');
container2.innerHTML = markup;
const root2 = ReactDOM.createRoot(container2, {hydrate: true});
root2.render(<div><span /></div>);
root2.render(
<div>
<span />
</div>,
);
expect(console.error.calls.count()).toBe(1);
expect(console.error.calls.argsFor(0)[0]).toMatch('Extra attributes');
});
@ -64,9 +76,19 @@ describe('ReactDOMRoot', () => {
spyOn(console, 'error');
container.innerHTML = '<div>a</div><div>b</div>';
const root = ReactDOM.createRoot(container);
root.render(<div><span>c</span><span>d</span></div>);
root.render(
<div>
<span>c</span>
<span>d</span>
</div>,
);
expect(container.textContent).toEqual('abcd');
root.render(<div><span>d</span><span>c</span></div>);
root.render(
<div>
<span>d</span>
<span>c</span>
</div>,
);
expect(container.textContent).toEqual('abdc');
});
});

64
packages/react-dom/src/__tests__/ReactDOMSelect-test.js vendored
View File

@ -95,7 +95,9 @@ describe('ReactDOMSelect', () => {
// Changing `defaultValue` should do nothing.
ReactDOM.render(
<select multiple={true} defaultValue={['monkey']}>{options}</select>,
<select multiple={true} defaultValue={['monkey']}>
{options}
</select>,
container,
);
@ -121,7 +123,9 @@ describe('ReactDOMSelect', () => {
// Changing the `value` prop should change the selected option.
ReactDOM.render(
<select value="gorilla" onChange={noop}>{options}</select>,
<select value="gorilla" onChange={noop}>
{options}
</select>,
container,
);
expect(node.value).toEqual('gorilla');
@ -160,7 +164,9 @@ describe('ReactDOMSelect', () => {
// Changing the `value` prop should change the selected option.
ReactDOM.render(
<select value="gorilla" onChange={noop}>{options}</select>,
<select value="gorilla" onChange={noop}>
{options}
</select>,
container,
);
expect(node.value).toEqual('gorilla');
@ -408,7 +414,9 @@ describe('ReactDOMSelect', () => {
var node = ReactDOM.findDOMNode(stub);
ReactDOM.render(
<select value="gorilla" onChange={noop}>{options}</select>,
<select value="gorilla" onChange={noop}>
{options}
</select>,
container,
);
@ -470,9 +478,15 @@ describe('ReactDOMSelect', () => {
var select = ReactDOM.render(
<select multiple={true} defaultValue={['giraffe']}>
<option key="monkey" value="monkey">A monkey!</option>
<option key="giraffe" value="giraffe">A giraffe!</option>
<option key="gorilla" value="gorilla">A gorilla!</option>
<option key="monkey" value="monkey">
A monkey!
</option>
<option key="giraffe" value="giraffe">
A giraffe!
</option>
<option key="gorilla" value="gorilla">
A gorilla!
</option>
</select>,
container,
);
@ -484,8 +498,12 @@ describe('ReactDOMSelect', () => {
ReactDOM.render(
<select multiple={true} defaultValue={['giraffe']}>
<option key="monkey" value="monkey">A monkey!</option>
<option key="gorilla" value="gorilla">A gorilla!</option>
<option key="monkey" value="monkey">
A monkey!
</option>
<option key="gorilla" value="gorilla">
A gorilla!
</option>
</select>,
container,
);
@ -495,9 +513,15 @@ describe('ReactDOMSelect', () => {
ReactDOM.render(
<select multiple={true} defaultValue={['giraffe']}>
<option key="monkey" value="monkey">A monkey!</option>
<option key="giraffe" value="giraffe">A giraffe!</option>
<option key="gorilla" value="gorilla">A gorilla!</option>
<option key="monkey" value="monkey">
A monkey!
</option>
<option key="giraffe" value="giraffe">
A giraffe!
</option>
<option key="gorilla" value="gorilla">
A gorilla!
</option>
</select>,
container,
);
@ -511,7 +535,9 @@ describe('ReactDOMSelect', () => {
spyOn(console, 'error');
ReactTestUtils.renderIntoDocument(
<select value={null}><option value="test" /></select>,
<select value={null}>
<option value="test" />
</select>,
);
expectDev(console.error.calls.argsFor(0)[0]).toContain(
'`value` prop on `select` should not be null. ' +
@ -520,7 +546,9 @@ describe('ReactDOMSelect', () => {
);
ReactTestUtils.renderIntoDocument(
<select value={null}><option value="test" /></select>,
<select value={null}>
<option value="test" />
</select>,
);
expectDev(console.error.calls.count()).toBe(1);
});
@ -528,7 +556,9 @@ describe('ReactDOMSelect', () => {
it('should warn if value is null and multiple is true', () => {
spyOn(console, 'error');
ReactTestUtils.renderIntoDocument(
<select value={null} multiple={true}><option value="test" /></select>,
<select value={null} multiple={true}>
<option value="test" />
</select>,
);
expectDev(console.error.calls.count()).toBe(1);
@ -540,7 +570,9 @@ describe('ReactDOMSelect', () => {
);
ReactTestUtils.renderIntoDocument(
<select value={null} multiple={true}><option value="test" /></select>,
<select value={null} multiple={true}>
<option value="test" />
</select>,
);
expectDev(console.error.calls.count()).toBe(1);
});

399
packages/react-dom/src/__tests__/ReactDOMServerIntegration-test.js vendored
View File

@ -51,7 +51,9 @@ async function expectErrors(fn, count) {
console.error.calls.count() !== 0
) {
console.log(
`We expected ${count} warning(s), but saw ${console.error.calls.count()} warning(s).`,
`We expected ${
count
} warning(s), but saw ${console.error.calls.count()} warning(s).`,
);
if (console.error.calls.count() > 0) {
console.log(`We saw these warnings:`);
@ -230,7 +232,9 @@ function itClientRenders(desc, testFn) {
testFn(clientCleanRender));
it(`renders ${desc} with client render on top of good server markup`, () =>
testFn(clientRenderOnServerString));
it(`renders ${desc} with client render on top of bad server markup`, async () => {
it(`renders ${
desc
} with client render on top of bad server markup`, async () => {
try {
await testFn(clientRenderOnBadMarkup);
} catch (x) {
@ -349,7 +353,11 @@ describe('ReactDOMServerIntegration', () => {
});
itRenders('a self-closing tag as a child', async render => {
const e = await render(<div><br /></div>);
const e = await render(
<div>
<br />
</div>,
);
expect(e.childNodes.length).toBe(1);
expect(e.firstChild.tagName).toBe('BR');
});
@ -406,7 +414,11 @@ describe('ReactDOMServerIntegration', () => {
});
itRenders('a fragment with one child', async render => {
let e = await render(<React.Fragment><div>text1</div></React.Fragment>);
let e = await render(
<React.Fragment>
<div>text1</div>
</React.Fragment>,
);
let parent = e.parentNode;
expect(parent.childNodes[0].tagName).toBe('DIV');
});
@ -416,7 +428,12 @@ describe('ReactDOMServerIntegration', () => {
return <p>header</p>;
};
let Footer = props => {
return <React.Fragment><h2>footer</h2><h3>about</h3></React.Fragment>;
return (
<React.Fragment>
<h2>footer</h2>
<h3>about</h3>
</React.Fragment>
);
};
let e = await render(
<React.Fragment>
@ -443,7 +460,11 @@ describe('ReactDOMServerIntegration', () => {
<span>text2</span>
<React.Fragment>
<React.Fragment>
<React.Fragment>{null}<p /></React.Fragment>{false}
<React.Fragment>
{null}
<p />
</React.Fragment>
{false}
</React.Fragment>
</React.Fragment>
</React.Fragment>,
@ -1018,7 +1039,11 @@ describe('ReactDOMServerIntegration', () => {
);
itRenders('SVG tags with dashes in them', async render => {
const e = await render(<svg><font-face accentHeight={10} /></svg>);
const e = await render(
<svg>
<font-face accentHeight={10} />
</svg>,
);
expect(e.firstChild.hasAttribute('accentHeight')).toBe(false);
expect(e.firstChild.getAttribute('accent-height')).toBe('10');
});
@ -1082,7 +1107,13 @@ describe('ReactDOMServerIntegration', () => {
});
itRenders('a div with multiple empty text children', async render => {
const e = await render(<div>{''}{''}{''}</div>);
const e = await render(
<div>
{''}
{''}
{''}
</div>,
);
if (render === serverRender || render === streamRender) {
// For plain server markup result we should have no text nodes if
// they're all empty.
@ -1097,6 +1128,7 @@ describe('ReactDOMServerIntegration', () => {
});
itRenders('a div with multiple whitespace children', async render => {
// prettier-ignore
const e = await render(<div>{' '}{' '}{' '}</div>);
if (
render === serverRender ||
@ -1118,7 +1150,11 @@ describe('ReactDOMServerIntegration', () => {
});
itRenders('a div with text sibling to a node', async render => {
const e = await render(<div>Text<span>More Text</span></div>);
const e = await render(
<div>
Text<span>More Text</span>
</div>,
);
let spanNode;
expect(e.childNodes.length).toBe(2);
spanNode = e.childNodes[1];
@ -1168,7 +1204,12 @@ describe('ReactDOMServerIntegration', () => {
});
itRenders('an element with two text children', async render => {
const e = await render(<div>{'foo'}{'bar'}</div>);
const e = await render(
<div>
{'foo'}
{'bar'}
</div>,
);
if (
render === serverRender ||
render === clientRenderOnServerString ||
@ -1189,7 +1230,13 @@ describe('ReactDOMServerIntegration', () => {
'a component returning text node between two text nodes',
async render => {
const B = () => 'b';
const e = await render(<div>{'a'}<B />{'c'}</div>);
const e = await render(
<div>
{'a'}
<B />
{'c'}
</div>,
);
if (
render === serverRender ||
render === clientRenderOnServerString ||
@ -1272,7 +1319,12 @@ describe('ReactDOMServerIntegration', () => {
});
itRenders('an element with number and text children', async render => {
const e = await render(<div>{'foo'}{40}</div>);
const e = await render(
<div>
{'foo'}
{40}
</div>,
);
// with Fiber, there are just two text nodes.
if (
render === serverRender ||
@ -1309,7 +1361,11 @@ describe('ReactDOMServerIntegration', () => {
itRenders('a null component children as empty', async render => {
const NullComponent = () => null;
const e = await render(<div><NullComponent /></div>);
const e = await render(
<div>
<NullComponent />
</div>,
);
expect(e.childNodes.length).toBe(0);
});
@ -1326,13 +1382,26 @@ describe('ReactDOMServerIntegration', () => {
});
itRenders('null and false children together as blank', async render => {
const e = await render(<div>{false}{null}foo{null}{false}</div>);
const e = await render(
<div>
{false}
{null}foo{null}
{false}
</div>,
);
expect(e.childNodes.length).toBe(1);
expectTextNode(e.childNodes[0], 'foo');
});
itRenders('only null and false children as blank', async render => {
const e = await render(<div>{false}{null}{null}{false}</div>);
const e = await render(
<div>
{false}
{null}
{null}
{false}
</div>,
);
expect(e.childNodes.length).toBe(0);
});
});
@ -1357,7 +1426,9 @@ describe('ReactDOMServerIntegration', () => {
'svg child element with a namespace attribute',
async render => {
let e = await render(
<svg><image xlinkHref="http://i.imgur.com/w7GCRPb.png" /></svg>,
<svg>
<image xlinkHref="http://i.imgur.com/w7GCRPb.png" />
</svg>,
);
e = e.firstChild;
expect(e.childNodes.length).toBe(0);
@ -1371,7 +1442,9 @@ describe('ReactDOMServerIntegration', () => {
itRenders('svg child element with a badly cased alias', async render => {
let e = await render(
<svg><image xlinkhref="http://i.imgur.com/w7GCRPb.png" /></svg>,
<svg>
<image xlinkhref="http://i.imgur.com/w7GCRPb.png" />
</svg>,
1,
);
e = e.firstChild;
@ -1397,7 +1470,13 @@ describe('ReactDOMServerIntegration', () => {
);
itRenders('svg element with a mixed case name', async render => {
let e = await render(<svg><filter><feMorphology /></filter></svg>);
let e = await render(
<svg>
<filter>
<feMorphology />
</filter>
</svg>,
);
e = e.firstChild.firstChild;
expect(e.childNodes.length).toBe(0);
expect(e.tagName).toBe('feMorphology');
@ -1516,10 +1595,12 @@ describe('ReactDOMServerIntegration', () => {
const e = await render(
<Component>
<Component>
<Component /><Component />
<Component />
<Component />
</Component>
<Component>
<Component /><Component />
<Component />
<Component />
</Component>
</Component>,
);
@ -1538,7 +1619,11 @@ describe('ReactDOMServerIntegration', () => {
});
itRenders('a div with a child', async render => {
const e = await render(<div id="parent"><div id="child" /></div>);
const e = await render(
<div id="parent">
<div id="child" />
</div>,
);
expect(e.id).toBe('parent');
expect(e.childNodes.length).toBe(1);
expect(e.childNodes[0].id).toBe('child');
@ -1547,7 +1632,10 @@ describe('ReactDOMServerIntegration', () => {
itRenders('a div with multiple children', async render => {
const e = await render(
<div id="parent"><div id="child1" /><div id="child2" /></div>,
<div id="parent">
<div id="child1" />
<div id="child2" />
</div>,
);
expect(e.id).toBe('parent');
expect(e.childNodes.length).toBe(2);
@ -1561,7 +1649,9 @@ describe('ReactDOMServerIntegration', () => {
'a div with multiple children separated by whitespace',
async render => {
const e = await render(
<div id="parent"><div id="child1" /> <div id="child2" /></div>,
<div id="parent">
<div id="child1" /> <div id="child2" />
</div>,
);
expect(e.id).toBe('parent');
let child1, child2, textNode;
@ -1631,7 +1721,10 @@ describe('ReactDOMServerIntegration', () => {
itRenders('>,<, and & as multiple children', async render => {
const e = await render(
<div>{'<span>Text1&quot;</span>'}{'<span>Text2&quot;</span>'}</div>,
<div>
{'<span>Text1&quot;</span>'}
{'<span>Text2&quot;</span>'}
</div>,
);
if (
render === serverRender ||
@ -1681,7 +1774,12 @@ describe('ReactDOMServerIntegration', () => {
itRenders(
'an element with two text children with special characters',
async render => {
const e = await render(<div>{'foo\rbar'}{'\r\nbaz\nqux\u0000'}</div>);
const e = await render(
<div>
{'foo\rbar'}
{'\r\nbaz\nqux\u0000'}
</div>,
);
if (render === serverRender || render === streamRender) {
// We have three nodes because there is a comment between them.
expect(e.childNodes.length).toBe(3);
@ -1975,9 +2073,15 @@ describe('ReactDOMServerIntegration', () => {
var options;
beforeEach(function() {
options = [
<option key={1} value="foo" id="foo">Foo</option>,
<option key={2} value="bar" id="bar">Bar</option>,
<option key={3} value="baz" id="baz">Baz</option>,
<option key={1} value="foo" id="foo">
Foo
</option>,
<option key={2} value="bar" id="bar">
Bar
</option>,
<option key={3} value="baz" id="baz">
Baz
</option>,
];
});
@ -2002,14 +2106,18 @@ describe('ReactDOMServerIntegration', () => {
itRenders('a select with a value and an onChange', async render => {
const e = await render(
<select value="bar" onChange={() => {}}>{options}</select>,
<select value="bar" onChange={() => {}}>
{options}
</select>,
);
expectSelectValue(e, 'bar');
});
itRenders('a select with a value and readOnly', async render => {
const e = await render(
<select value="bar" readOnly={true}>{options}</select>,
<select value="bar" readOnly={true}>
{options}
</select>,
);
expectSelectValue(e, 'bar');
});
@ -2160,8 +2268,12 @@ describe('ReactDOMServerIntegration', () => {
<select
value={this.state.value}
onChange={this.handleChange.bind(this)}>
<option key="1" value="Hello">Hello</option>
<option key="2" value="Goodbye">Goodbye</option>
<option key="1" value="Hello">
Hello
</option>
<option key="2" value="Goodbye">
Goodbye
</option>
</select>
);
}
@ -2304,32 +2416,30 @@ describe('ReactDOMServerIntegration', () => {
// skipping this test because React 15 does the wrong thing. it blows
// away the user's typing in the textarea.
xit(
'should not blow away user-entered text on successful reconnect to an uncontrolled textarea',
() =>
testUserInteractionBeforeClientRender(
<textarea defaultValue="Hello" />,
),
);
xit('should not blow away user-entered text on successful reconnect to an uncontrolled textarea', () =>
testUserInteractionBeforeClientRender(
<textarea defaultValue="Hello" />,
));
// skipping this test because React 15 does the wrong thing. it blows
// away the user's typing in the textarea.
xit(
'should not blow away user-entered text on successful reconnect to a controlled textarea',
async () => {
let changeCount = 0;
await testUserInteractionBeforeClientRender(
<ControlledTextArea onChange={() => changeCount++} />,
);
expect(changeCount).toBe(0);
},
);
xit('should not blow away user-entered text on successful reconnect to a controlled textarea', async () => {
let changeCount = 0;
await testUserInteractionBeforeClientRender(
<ControlledTextArea onChange={() => changeCount++} />,
);
expect(changeCount).toBe(0);
});
it('should not blow away user-selected value on successful reconnect to an uncontrolled select', () =>
testUserInteractionBeforeClientRender(
<select defaultValue="Hello">
<option key="1" value="Hello">Hello</option>
<option key="2" value="Goodbye">Goodbye</option>
<option key="1" value="Hello">
Hello
</option>
<option key="2" value="Goodbye">
Goodbye
</option>
</select>,
));
@ -2370,7 +2480,9 @@ describe('ReactDOMServerIntegration', () => {
ClassChildWithContext.contextTypes = {text: PropTypes.string};
const e = await render(
<PurpleContext><ClassChildWithContext /></PurpleContext>,
<PurpleContext>
<ClassChildWithContext />
</PurpleContext>,
);
expect(e.textContent).toBe('purple');
});
@ -2382,7 +2494,9 @@ describe('ReactDOMServerIntegration', () => {
StatelessChildWithContext.contextTypes = {text: PropTypes.string};
const e = await render(
<PurpleContext><StatelessChildWithContext /></PurpleContext>,
<PurpleContext>
<StatelessChildWithContext />
</PurpleContext>,
);
expect(e.textContent).toBe('purple');
});
@ -2396,7 +2510,9 @@ describe('ReactDOMServerIntegration', () => {
}
const e = await render(
<PurpleContext><ClassChildWithoutContext /></PurpleContext>,
<PurpleContext>
<ClassChildWithoutContext />
</PurpleContext>,
);
expect(e.textContent).toBe('');
});
@ -2408,7 +2524,9 @@ describe('ReactDOMServerIntegration', () => {
}
const e = await render(
<PurpleContext><StatelessChildWithoutContext /></PurpleContext>,
<PurpleContext>
<StatelessChildWithoutContext />
</PurpleContext>,
);
expect(e.textContent).toBe('');
});
@ -2423,7 +2541,9 @@ describe('ReactDOMServerIntegration', () => {
ClassChildWithWrongContext.contextTypes = {foo: PropTypes.string};
const e = await render(
<PurpleContext><ClassChildWithWrongContext /></PurpleContext>,
<PurpleContext>
<ClassChildWithWrongContext />
</PurpleContext>,
);
expect(e.textContent).toBe('');
});
@ -2438,7 +2558,9 @@ describe('ReactDOMServerIntegration', () => {
};
const e = await render(
<PurpleContext><StatelessChildWithWrongContext /></PurpleContext>,
<PurpleContext>
<StatelessChildWithWrongContext />
</PurpleContext>,
);
expect(e.textContent).toBe('');
});
@ -2451,7 +2573,11 @@ describe('ReactDOMServerIntegration', () => {
const Child = props => <Grandchild />;
const e = await render(<PurpleContext><Child /></PurpleContext>);
const e = await render(
<PurpleContext>
<Child />
</PurpleContext>,
);
expect(e.textContent).toBe('purple');
});
@ -2462,7 +2588,11 @@ describe('ReactDOMServerIntegration', () => {
Grandchild.contextTypes = {text: PropTypes.string};
const e = await render(
<PurpleContext><RedContext><Grandchild /></RedContext></PurpleContext>,
<PurpleContext>
<RedContext>
<Grandchild />
</RedContext>
</PurpleContext>,
);
expect(e.textContent).toBe('red');
});
@ -2707,8 +2837,12 @@ describe('ReactDOMServerIntegration', () => {
it('can explicitly ignore errors reconnecting different element types of children', () =>
expectMarkupMatch(
<div><div /></div>,
<div suppressHydrationWarning={true}><span /></div>,
<div>
<div />
</div>,
<div suppressHydrationWarning={true}>
<span />
</div>,
));
it('can explicitly ignore errors reconnecting missing attributes', () =>
@ -2731,8 +2865,12 @@ describe('ReactDOMServerIntegration', () => {
it('can not deeply ignore errors reconnecting different attribute values', () =>
expectMarkupMismatch(
<div><div id="foo" /></div>,
<div suppressHydrationWarning={true}><div id="bar" /></div>,
<div>
<div id="foo" />
</div>,
<div suppressHydrationWarning={true}>
<div id="bar" />
</div>,
));
});
@ -2801,8 +2939,14 @@ describe('ReactDOMServerIntegration', () => {
it('should error reconnecting different text in two code blocks', () =>
expectMarkupMismatch(
<div>{'Text1'}{'Text2'}</div>,
<div>{'Text1'}{'Text3'}</div>,
<div>
{'Text1'}
{'Text2'}
</div>,
<div>
{'Text1'}
{'Text3'}
</div>,
));
it('can explicitly ignore reconnecting different text', () =>
@ -2813,33 +2957,74 @@ describe('ReactDOMServerIntegration', () => {
it('can explicitly ignore reconnecting different text in two code blocks', () =>
expectMarkupMatch(
<div suppressHydrationWarning={true}>{'Text1'}{'Text2'}</div>,
<div suppressHydrationWarning={true}>{'Text1'}{'Text3'}</div>,
<div suppressHydrationWarning={true}>
{'Text1'}
{'Text2'}
</div>,
<div suppressHydrationWarning={true}>
{'Text1'}
{'Text3'}
</div>,
));
});
describe('element trees and children', function() {
it('should error reconnecting missing children', () =>
expectMarkupMismatch(<div><div /></div>, <div />));
expectMarkupMismatch(
<div>
<div />
</div>,
<div />,
));
it('should error reconnecting added children', () =>
expectMarkupMismatch(<div />, <div><div /></div>));
expectMarkupMismatch(
<div />,
<div>
<div />
</div>,
));
it('should error reconnecting more children', () =>
expectMarkupMismatch(<div><div /></div>, <div><div /><div /></div>));
expectMarkupMismatch(
<div>
<div />
</div>,
<div>
<div />
<div />
</div>,
));
it('should error reconnecting fewer children', () =>
expectMarkupMismatch(<div><div /><div /></div>, <div><div /></div>));
expectMarkupMismatch(
<div>
<div />
<div />
</div>,
<div>
<div />
</div>,
));
it('should error reconnecting reordered children', () =>
expectMarkupMismatch(
<div><div /><span /></div>,
<div><span /><div /></div>,
<div>
<div />
<span />
</div>,
<div>
<span />
<div />
</div>,
));
it('should error reconnecting a div with children separated by whitespace on the client', () =>
expectMarkupMismatch(
<div id="parent"><div id="child1" /><div id="child2" /></div>,
<div id="parent">
<div id="child1" />
<div id="child2" />
</div>,
// prettier-ignore
<div id="parent"><div id="child1" /> <div id="child2" /></div>, // eslint-disable-line no-multi-spaces
));
@ -2848,47 +3033,87 @@ describe('ReactDOMServerIntegration', () => {
expectMarkupMismatch(
// prettier-ignore
<div id="parent"><div id="child1" /> <div id="child2" /></div>, // eslint-disable-line no-multi-spaces
<div id="parent"><div id="child1" /><div id="child2" /></div>,
<div id="parent">
<div id="child1" />
<div id="child2" />
</div>,
));
it('should error reconnecting a div with children separated by different whitespace', () =>
expectMarkupMismatch(
<div id="parent"><div id="child1" /> <div id="child2" /></div>,
<div id="parent">
<div id="child1" /> <div id="child2" />
</div>,
// prettier-ignore
<div id="parent"><div id="child1" /> <div id="child2" /></div>, // eslint-disable-line no-multi-spaces
));
it('can distinguish an empty component from a dom node', () =>
expectMarkupMismatch(
<div><span /></div>,
<div><EmptyComponent /></div>,
<div>
<span />
</div>,
<div>
<EmptyComponent />
</div>,
));
it('can distinguish an empty component from an empty text component', () =>
expectMarkupMatch(<div><EmptyComponent /></div>, <div>{''}</div>));
expectMarkupMatch(
<div>
<EmptyComponent />
</div>,
<div>{''}</div>,
));
it('can explicitly ignore reconnecting more children', () =>
expectMarkupMatch(
<div><div /></div>,
<div suppressHydrationWarning={true}><div /><div /></div>,
<div>
<div />
</div>,
<div suppressHydrationWarning={true}>
<div />
<div />
</div>,
));
it('can explicitly ignore reconnecting fewer children', () =>
expectMarkupMatch(
<div><div /><div /></div>,
<div suppressHydrationWarning={true}><div /></div>,
<div>
<div />
<div />
</div>,
<div suppressHydrationWarning={true}>
<div />
</div>,
));
it('can explicitly ignore reconnecting reordered children', () =>
expectMarkupMatch(
<div suppressHydrationWarning={true}><div /><span /></div>,
<div suppressHydrationWarning={true}><span /><div /></div>,
<div suppressHydrationWarning={true}>
<div />
<span />
</div>,
<div suppressHydrationWarning={true}>
<span />
<div />
</div>,
));
it('can not deeply ignore reconnecting reordered children', () =>
expectMarkupMismatch(
<div suppressHydrationWarning={true}><div><div /><span /></div></div>,
<div suppressHydrationWarning={true}><div><span /><div /></div></div>,
<div suppressHydrationWarning={true}>
<div>
<div />
<span />
</div>
</div>,
<div suppressHydrationWarning={true}>
<div>
<span />
<div />
</div>
</div>,
));
});

242
packages/react-dom/src/__tests__/ReactDOMTextComponent-test.js vendored
View File

@ -31,7 +31,14 @@ describe('ReactDOMTextComponent', () => {
it('updates a mounted text component in place', () => {
var el = document.createElement('div');
var inst = ReactDOM.render(<div><span />{'foo'}{'bar'}</div>, el);
var inst = ReactDOM.render(
<div>
<span />
{'foo'}
{'bar'}
</div>,
el,
);
let nodes = filterOutComments(ReactDOM.findDOMNode(inst).childNodes);
let foo = nodes[1];
@ -39,7 +46,14 @@ describe('ReactDOMTextComponent', () => {
expect(foo.data).toBe('foo');
expect(bar.data).toBe('bar');
inst = ReactDOM.render(<div><span />{'baz'}{'qux'}</div>, el);
inst = ReactDOM.render(
<div>
<span />
{'baz'}
{'qux'}
</div>,
el,
);
// After the update, the text nodes should have stayed in place (as opposed
// to getting unmounted and remounted)
nodes = filterOutComments(ReactDOM.findDOMNode(inst).childNodes);
@ -51,19 +65,40 @@ describe('ReactDOMTextComponent', () => {
it('can be toggled in and out of the markup', () => {
var el = document.createElement('div');
var inst = ReactDOM.render(<div>{'foo'}<div />{'bar'}</div>, el);
var inst = ReactDOM.render(
<div>
{'foo'}
<div />
{'bar'}
</div>,
el,
);
var container = ReactDOM.findDOMNode(inst);
let childNodes = filterOutComments(container.childNodes);
let childDiv = childNodes[1];
inst = ReactDOM.render(<div>{null}<div />{null}</div>, el);
inst = ReactDOM.render(
<div>
{null}
<div />
{null}
</div>,
el,
);
container = ReactDOM.findDOMNode(inst);
childNodes = filterOutComments(container.childNodes);
expect(childNodes.length).toBe(1);
expect(childNodes[0]).toBe(childDiv);
inst = ReactDOM.render(<div>{'foo'}<div />{'bar'}</div>, el);
inst = ReactDOM.render(
<div>
{'foo'}
<div />
{'bar'}
</div>,
el,
);
container = ReactDOM.findDOMNode(inst);
childNodes = filterOutComments(container.childNodes);
expect(childNodes.length).toBe(3);
@ -77,42 +112,71 @@ describe('ReactDOMTextComponent', () => {
* See #9836 tracking whether we'll need to fix this or if it's unnecessary.
*/
xit(
'can reconcile text merged by Node.normalize() alongside other elements',
() => {
var el = document.createElement('div');
var inst = ReactDOM.render(
<div>{'foo'}{'bar'}{'baz'}<span />{'qux'}</div>,
el,
);
var container = ReactDOM.findDOMNode(inst);
container.normalize();
inst = ReactDOM.render(
<div>{'bar'}{'baz'}{'qux'}<span />{'foo'}</div>,
el,
);
container = ReactDOM.findDOMNode(inst);
expect(container.textContent).toBe('barbazquxfoo');
},
);
xit('can reconcile text merged by Node.normalize()', () => {
xit('can reconcile text merged by Node.normalize() alongside other elements', () => {
var el = document.createElement('div');
var inst = ReactDOM.render(<div>{'foo'}{'bar'}{'baz'}</div>, el);
var inst = ReactDOM.render(
<div>
{'foo'}
{'bar'}
{'baz'}
<span />
{'qux'}
</div>,
el,
);
var container = ReactDOM.findDOMNode(inst);
container.normalize();
inst = ReactDOM.render(<div>{'bar'}{'baz'}{'qux'}</div>, el);
inst = ReactDOM.render(
<div>
{'bar'}
{'baz'}
{'qux'}
<span />
{'foo'}
</div>,
el,
);
container = ReactDOM.findDOMNode(inst);
expect(container.textContent).toBe('barbazquxfoo');
});
xit('can reconcile text merged by Node.normalize()', () => {
var el = document.createElement('div');
var inst = ReactDOM.render(
<div>
{'foo'}
{'bar'}
{'baz'}
</div>,
el,
);
var container = ReactDOM.findDOMNode(inst);
container.normalize();
inst = ReactDOM.render(
<div>
{'bar'}
{'baz'}
{'qux'}
</div>,
el,
);
container = ReactDOM.findDOMNode(inst);
expect(container.textContent).toBe('barbazqux');
});
it('can reconcile text from pre-rendered markup', () => {
var el = document.createElement('div');
var reactEl = <div>{'foo'}{'bar'}{'baz'}</div>;
var reactEl = (
<div>
{'foo'}
{'bar'}
{'baz'}
</div>
);
el.innerHTML = ReactDOMServer.renderToString(reactEl);
ReactDOM.hydrate(reactEl, el);
@ -120,7 +184,13 @@ describe('ReactDOMTextComponent', () => {
ReactDOM.unmountComponentAtNode(el);
reactEl = <div>{''}{''}{''}</div>;
reactEl = (
<div>
{''}
{''}
{''}
</div>
);
el.innerHTML = ReactDOMServer.renderToString(reactEl);
ReactDOM.hydrate(reactEl, el);
@ -129,7 +199,13 @@ describe('ReactDOMTextComponent', () => {
xit('can reconcile text arbitrarily split into multiple nodes', () => {
var el = document.createElement('div');
var inst = ReactDOM.render(<div><span />{'foobarbaz'}</div>, el);
var inst = ReactDOM.render(
<div>
<span />
{'foobarbaz'}
</div>,
el,
);
var container = ReactDOM.findDOMNode(inst);
let childNodes = filterOutComments(ReactDOM.findDOMNode(inst).childNodes);
@ -144,55 +220,77 @@ describe('ReactDOMTextComponent', () => {
childNodes[1].nextSibling,
);
inst = ReactDOM.render(<div><span />{'barbazqux'}</div>, el);
inst = ReactDOM.render(
<div>
<span />
{'barbazqux'}
</div>,
el,
);
container = ReactDOM.findDOMNode(inst);
expect(container.textContent).toBe('barbazqux');
});
xit(
'can reconcile text arbitrarily split into multiple nodes on some substitutions only',
() => {
var el = document.createElement('div');
var inst = ReactDOM.render(
<div>
<span />{'bar'}<span />{'foobarbaz'}{'foo'}{'barfoo'}<span />
</div>,
el,
);
xit('can reconcile text arbitrarily split into multiple nodes on some substitutions only', () => {
var el = document.createElement('div');
var inst = ReactDOM.render(
<div>
<span />
{'bar'}
<span />
{'foobarbaz'}
{'foo'}
{'barfoo'}
<span />
</div>,
el,
);
var container = ReactDOM.findDOMNode(inst);
let childNodes = filterOutComments(ReactDOM.findDOMNode(inst).childNodes);
let textNode = childNodes[3];
textNode.textContent = 'foo';
container.insertBefore(
document.createTextNode('bar'),
childNodes[3].nextSibling,
);
container.insertBefore(
document.createTextNode('baz'),
childNodes[3].nextSibling,
);
let secondTextNode = childNodes[5];
secondTextNode.textContent = 'bar';
container.insertBefore(
document.createTextNode('foo'),
childNodes[5].nextSibling,
);
var container = ReactDOM.findDOMNode(inst);
let childNodes = filterOutComments(ReactDOM.findDOMNode(inst).childNodes);
let textNode = childNodes[3];
textNode.textContent = 'foo';
container.insertBefore(
document.createTextNode('bar'),
childNodes[3].nextSibling,
);
container.insertBefore(
document.createTextNode('baz'),
childNodes[3].nextSibling,
);
let secondTextNode = childNodes[5];
secondTextNode.textContent = 'bar';
container.insertBefore(
document.createTextNode('foo'),
childNodes[5].nextSibling,
);
inst = ReactDOM.render(
<div>
<span />{'baz'}<span />{'barbazqux'}{'bar'}{'bazbar'}<span />
</div>,
el,
);
container = ReactDOM.findDOMNode(inst);
expect(container.textContent).toBe('bazbarbazquxbarbazbar');
},
);
inst = ReactDOM.render(
<div>
<span />
{'baz'}
<span />
{'barbazqux'}
{'bar'}
{'bazbar'}
<span />
</div>,
el,
);
container = ReactDOM.findDOMNode(inst);
expect(container.textContent).toBe('bazbarbazquxbarbazbar');
});
xit('can unmount normalized text nodes', () => {
var el = document.createElement('div');
ReactDOM.render(<div>{''}{'foo'}{'bar'}</div>, el);
ReactDOM.render(
<div>
{''}
{'foo'}
{'bar'}
</div>,
el,
);
el.normalize();
ReactDOM.render(<div />, el);
expect(el.innerHTML).toBe('<div></div>');

11
packages/react-dom/src/__tests__/ReactDOMTextarea-test.js vendored
View File

@ -329,7 +329,10 @@ describe('ReactDOMTextarea', () => {
expect(function() {
ReactTestUtils.renderIntoDocument(
<textarea>{'hello'}{'there'}</textarea>,
<textarea>
{'hello'}
{'there'}
</textarea>,
);
}).toThrow();
@ -337,7 +340,11 @@ describe('ReactDOMTextarea', () => {
var node;
expect(function() {
node = renderTextarea(<textarea><strong /></textarea>);
node = renderTextarea(
<textarea>
<strong />
</textarea>,
);
}).not.toThrow();
expect(node.value).toBe('[object Object]');

16
packages/react-dom/src/__tests__/ReactErrorBoundaries-test.js vendored
View File

@ -594,9 +594,7 @@ describe('ReactErrorBoundaries', () => {
ReactDOM.render(<span>After 1</span>, container1);
ReactDOM.render(<span>After 2</span>, container2);
ReactDOM.render(
<ErrorBoundary forceRetry={true}>
After 3
</ErrorBoundary>,
<ErrorBoundary forceRetry={true}>After 3</ErrorBoundary>,
container3,
);
expect(container1.firstChild.textContent).toBe('After 1');
@ -1621,18 +1619,14 @@ describe('ReactErrorBoundaries', () => {
var fail = false;
var container = document.createElement('div');
ReactDOM.render(
<ErrorBoundary>
{getAMixOfNormalAndBrokenRenderElements()}
</ErrorBoundary>,
<ErrorBoundary>{getAMixOfNormalAndBrokenRenderElements()}</ErrorBoundary>,
container,
);
expect(container.textContent).not.toContain('Caught an error');
fail = true;
ReactDOM.render(
<ErrorBoundary>
{getAMixOfNormalAndBrokenRenderElements()}
</ErrorBoundary>,
<ErrorBoundary>{getAMixOfNormalAndBrokenRenderElements()}</ErrorBoundary>,
container,
);
expect(container.textContent).toBe('Caught an error: Hello.');
@ -1784,9 +1778,7 @@ describe('ReactErrorBoundaries', () => {
<ErrorBoundary>
<BrokenComponentDidMountErrorBoundary
renderError={error => (
<div>
We should never catch our own error: {error.message}.
</div>
<div>We should never catch our own error: {error.message}.</div>
)}
/>
</ErrorBoundary>,

33
packages/react-dom/src/__tests__/ReactIdentity-test.js vendored
View File

@ -50,11 +50,15 @@ describe('ReactIdentity', () => {
var node1;
var node2;
ReactDOM.render(
<Wrapper key="wrap1"><span ref={c => (node1 = c)} /></Wrapper>,
<Wrapper key="wrap1">
<span ref={c => (node1 = c)} />
</Wrapper>,
container,
);
ReactDOM.render(
<Wrapper key="wrap2"><span ref={c => (node2 = c)} /></Wrapper>,
<Wrapper key="wrap2">
<span ref={c => (node2 = c)} />
</Wrapper>,
container,
);
@ -64,7 +68,11 @@ describe('ReactIdentity', () => {
function renderAComponentWithKeyIntoContainer(key, container) {
class Wrapper extends React.Component {
render() {
return <div><span ref="span" key={key} /></div>;
return (
<div>
<span ref="span" key={key} />
</div>
);
}
}
@ -123,7 +131,12 @@ describe('ReactIdentity', () => {
class TestContainer extends React.Component {
render() {
return <TestComponent>{instance0}{instance1}</TestComponent>;
return (
<TestComponent>
{instance0}
{instance1}
</TestComponent>
);
}
}
@ -153,7 +166,10 @@ describe('ReactIdentity', () => {
render() {
return (
<div>
<TestComponent>{instance0}{instance1}</TestComponent>
<TestComponent>
{instance0}
{instance1}
</TestComponent>
</div>
);
}
@ -167,7 +183,12 @@ describe('ReactIdentity', () => {
it('should let text nodes retain their uniqueness', () => {
class TestComponent extends React.Component {
render() {
return <div>{this.props.children}<span /></div>;
return (
<div>
{this.props.children}
<span />
</div>
);
}
}

12
packages/react-dom/src/__tests__/ReactMount-test.js vendored
View File

@ -195,7 +195,11 @@ describe('ReactMount', () => {
class Component extends React.Component {
render() {
return <div><div /></div>;
return (
<div>
<div />
</div>
);
}
}
@ -221,7 +225,11 @@ describe('ReactMount', () => {
class Component extends React.Component {
render() {
return <div><div /></div>;
return (
<div>
<div />
</div>
);
}
}

54
packages/react-dom/src/__tests__/ReactMultiChild-test.js vendored
View File

@ -44,13 +44,23 @@ describe('ReactMultiChild', () => {
expect(mockUpdate.mock.calls.length).toBe(0);
expect(mockUnmount.mock.calls.length).toBe(0);
ReactDOM.render(<div><MockComponent /></div>, container);
ReactDOM.render(
<div>
<MockComponent />
</div>,
container,
);
expect(mockMount.mock.calls.length).toBe(1);
expect(mockUpdate.mock.calls.length).toBe(0);
expect(mockUnmount.mock.calls.length).toBe(0);
ReactDOM.render(<div><MockComponent /></div>, container);
ReactDOM.render(
<div>
<MockComponent />
</div>,
container,
);
expect(mockMount.mock.calls.length).toBe(1);
expect(mockUpdate.mock.calls.length).toBe(1);
@ -74,12 +84,22 @@ describe('ReactMultiChild', () => {
expect(mockMount.mock.calls.length).toBe(0);
expect(mockUnmount.mock.calls.length).toBe(0);
ReactDOM.render(<div><MockComponent /></div>, container);
ReactDOM.render(
<div>
<MockComponent />
</div>,
container,
);
expect(mockMount.mock.calls.length).toBe(1);
expect(mockUnmount.mock.calls.length).toBe(0);
ReactDOM.render(<div><span /></div>, container);
ReactDOM.render(
<div>
<span />
</div>,
container,
);
expect(mockMount.mock.calls.length).toBe(1);
expect(mockUnmount.mock.calls.length).toBe(1);
@ -114,7 +134,9 @@ describe('ReactMultiChild', () => {
expect(mockUnmount.mock.calls.length).toBe(0);
ReactDOM.render(
<WrapperComponent><MockComponent /></WrapperComponent>,
<WrapperComponent>
<MockComponent />
</WrapperComponent>,
container,
);
@ -139,12 +161,22 @@ describe('ReactMultiChild', () => {
expect(mockMount.mock.calls.length).toBe(0);
expect(mockUnmount.mock.calls.length).toBe(0);
ReactDOM.render(<div><MockComponent key="A" /></div>, container);
ReactDOM.render(
<div>
<MockComponent key="A" />
</div>,
container,
);
expect(mockMount.mock.calls.length).toBe(1);
expect(mockUnmount.mock.calls.length).toBe(0);
ReactDOM.render(<div><MockComponent key="B" /></div>, container);
ReactDOM.render(
<div>
<MockComponent key="B" />
</div>,
container,
);
expect(mockMount.mock.calls.length).toBe(2);
expect(mockUnmount.mock.calls.length).toBe(1);
@ -165,9 +197,7 @@ describe('ReactMultiChild', () => {
render() {
return (
<div>
<WrapperComponent>
{this.props.children}
</WrapperComponent>
<WrapperComponent>{this.props.children}</WrapperComponent>
</div>
);
}
@ -211,9 +241,7 @@ describe('ReactMultiChild', () => {
render() {
return (
<div>
<WrapperComponent>
{this.props.children}
</WrapperComponent>
<WrapperComponent>{this.props.children}</WrapperComponent>
</div>
);
}

38
packages/react-dom/src/__tests__/ReactMultiChildReconcile-test.js vendored
View File

@ -52,11 +52,7 @@ class StatusDisplay extends React.Component {
}
render() {
return (
<div>
{this.props.contentKey}
</div>
);
return <div>{this.props.contentKey}</div>;
}
}
@ -65,10 +61,10 @@ class StatusDisplay extends React.Component {
*/
class FriendsStatusDisplay extends React.Component {
/**
* Gets the order directly from each rendered child's `index` field.
* Refs are not maintained in the rendered order, and neither is
* `this._renderedChildren` (surprisingly).
*/
* Gets the order directly from each rendered child's `index` field.
* Refs are not maintained in the rendered order, and neither is
* `this._renderedChildren` (surprisingly).
*/
getOriginalKeys() {
var originalKeys = [];
for (var key in this.props.usernameToStatus) {
@ -117,23 +113,19 @@ class FriendsStatusDisplay extends React.Component {
for (var key in this.props.usernameToStatus) {
var status = this.props.usernameToStatus[key];
children.push(
!status
? null
: <StatusDisplay
key={key}
ref={key}
contentKey={key}
onFlush={this.verifyPreviousRefsResolved.bind(this, key)}
status={status}
/>,
!status ? null : (
<StatusDisplay
key={key}
ref={key}
contentKey={key}
onFlush={this.verifyPreviousRefsResolved.bind(this, key)}
status={status}
/>
),
);
}
var childrenToRender = this.props.prepareChildren(children);
return (
<div>
{childrenToRender}
</div>
);
return <div>{childrenToRender}</div>;
}
}

27
packages/react-dom/src/__tests__/ReactMultiChildText-test.js vendored
View File

@ -180,18 +180,37 @@ describe('ReactMultiChildText', () => {
});
it('should render between nested components and inline children', () => {
ReactTestUtils.renderIntoDocument(<div><h1><span /><span /></h1></div>);
ReactTestUtils.renderIntoDocument(
<div>
<h1>
<span />
<span />
</h1>
</div>,
);
expect(function() {
ReactTestUtils.renderIntoDocument(<div><h1>A</h1></div>);
ReactTestUtils.renderIntoDocument(
<div>
<h1>A</h1>
</div>,
);
}).not.toThrow();
expect(function() {
ReactTestUtils.renderIntoDocument(<div><h1>{['A']}</h1></div>);
ReactTestUtils.renderIntoDocument(
<div>
<h1>{['A']}</h1>
</div>,
);
}).not.toThrow();
expect(function() {
ReactTestUtils.renderIntoDocument(<div><h1>{['A', 'B']}</h1></div>);
ReactTestUtils.renderIntoDocument(
<div>
<h1>{['A', 'B']}</h1>
</div>,
);
}).not.toThrow();
});
});

64
packages/react-dom/src/__tests__/ReactRenderDocument-test.js vendored
View File

@ -52,9 +52,7 @@ describe('rendering React components at document', () => {
<head>
<title>Hello World</title>
</head>
<body>
{'Hello ' + this.props.hello}
</body>
<body>{'Hello ' + this.props.hello}</body>
</html>
);
}
@ -83,9 +81,7 @@ describe('rendering React components at document', () => {
<head>
<title>Hello World</title>
</head>
<body>
Hello world
</body>
<body>Hello world</body>
</html>
);
}
@ -112,9 +108,7 @@ describe('rendering React components at document', () => {
<head>
<title>Hello World</title>
</head>
<body>
Hello world
</body>
<body>Hello world</body>
</html>
);
}
@ -127,9 +121,7 @@ describe('rendering React components at document', () => {
<head>
<title>Hello World</title>
</head>
<body>
Goodbye world
</body>
<body>Goodbye world</body>
</html>
);
}
@ -157,9 +149,7 @@ describe('rendering React components at document', () => {
<head>
<title>Hello World</title>
</head>
<body>
{this.props.text}
</body>
<body>{this.props.text}</body>
</html>
);
}
@ -194,9 +184,7 @@ describe('rendering React components at document', () => {
<head>
<title>Hello World</title>
</head>
<body>
{this.props.text}
</body>
<body>{this.props.text}</body>
</html>
);
}
@ -233,9 +221,7 @@ describe('rendering React components at document', () => {
<head>
<title>Hello World</title>
</head>
<body>
{this.props.text}
</body>
<body>{this.props.text}</body>
</html>
);
}
@ -255,9 +241,7 @@ describe('rendering React components at document', () => {
<head>
<title>Hello World</title>
</head>
<body>
Hello world
</body>
<body>Hello world</body>
</html>
);
@ -279,9 +263,7 @@ describe('rendering React components at document', () => {
<head>
<title>Hello World</title>
</head>
<body>
{'Hello ' + this.props.hello}
</body>
<body>{'Hello ' + this.props.hello}</body>
</html>
);
}
@ -308,9 +290,7 @@ describe('rendering React components at document', () => {
<head>
<title>Hello World</title>
</head>
<body>
Hello world
</body>
<body>Hello world</body>
</html>
);
}
@ -334,9 +314,7 @@ describe('rendering React components at document', () => {
<head>
<title>Hello World</title>
</head>
<body>
Hello world
</body>
<body>Hello world</body>
</html>
);
}
@ -349,9 +327,7 @@ describe('rendering React components at document', () => {
<head>
<title>Hello World</title>
</head>
<body>
Goodbye world
</body>
<body>Goodbye world</body>
</html>
);
}
@ -378,9 +354,7 @@ describe('rendering React components at document', () => {
<head>
<title>Hello World</title>
</head>
<body>
{this.props.text}
</body>
<body>{this.props.text}</body>
</html>
);
}
@ -416,9 +390,7 @@ describe('rendering React components at document', () => {
<head>
<title>Hello World</title>
</head>
<body>
{this.props.text}
</body>
<body>{this.props.text}</body>
</html>
);
}
@ -449,9 +421,7 @@ describe('rendering React components at document', () => {
<head>
<title>Hello World</title>
</head>
<body>
{this.props.text}
</body>
<body>{this.props.text}</body>
</html>
);
}
@ -472,9 +442,7 @@ describe('rendering React components at document', () => {
<head>
<title>Hello World</title>
</head>
<body>
Hello world
</body>
<body>Hello world</body>
</html>
);

26
packages/react-dom/src/__tests__/ReactServerRendering-test.js vendored
View File

@ -81,7 +81,11 @@ describe('ReactDOMServer', () => {
it('should render composite components', () => {
class Parent extends React.Component {
render() {
return <div><Child name="child" /></div>;
return (
<div>
<Child name="child" />
</div>
);
}
}
@ -198,7 +202,9 @@ describe('ReactDOMServer', () => {
render() {
return (
<span ref="span" onClick={this.click}>Name: {this.props.name}</span>
<span ref="span" onClick={this.click}>
Name: {this.props.name}
</span>
);
}
}
@ -410,7 +416,11 @@ describe('ReactDOMServer', () => {
class TestComponent extends React.Component {
render() {
return <span><NestedComponent /></span>;
return (
<span>
<NestedComponent />
</span>
);
}
}
@ -422,7 +432,11 @@ describe('ReactDOMServer', () => {
it('should not put checksum and React ID on text components', () => {
class TestComponent extends React.Component {
render() {
return <span>{'hello'} {'world'}</span>;
return (
<span>
{'hello'} {'world'}
</span>
);
}
}
@ -595,7 +609,9 @@ describe('ReactDOMServer', () => {
};
var markup = ReactDOMServer.renderToString(
<ContextProvider><Component /></ContextProvider>,
<ContextProvider>
<Component />
</ContextProvider>,
);
expect(markup).toContain('hello, world');
});

6
packages/react-dom/src/__tests__/ReactStatelessComponent-test.js vendored
View File

@ -126,7 +126,11 @@ describe('ReactStatelessComponent', () => {
it('should throw when stateless component returns undefined', () => {
function NotAComponent() {}
expect(function() {
ReactTestUtils.renderIntoDocument(<div><NotAComponent /></div>);
ReactTestUtils.renderIntoDocument(
<div>
<NotAComponent />
</div>,
);
}).toThrowError(
'NotAComponent(...): Nothing was returned from render. ' +
'This usually means a return statement is missing. Or, to render nothing, return null.',

46
packages/react-dom/src/__tests__/ReactTestUtils-test.js vendored
View File

@ -78,7 +78,11 @@ describe('ReactTestUtils', () => {
it('can scryRenderedDOMComponentsWithClass with TextComponent', () => {
class Wrapper extends React.Component {
render() {
return <div>Hello <span>Jim</span></div>;
return (
<div>
Hello <span>Jim</span>
</div>
);
}
}
@ -93,7 +97,11 @@ describe('ReactTestUtils', () => {
it('can scryRenderedDOMComponentsWithClass with className contains \\n', () => {
class Wrapper extends React.Component {
render() {
return <div>Hello <span className={'x\ny'}>Jim</span></div>;
return (
<div>
Hello <span className={'x\ny'}>Jim</span>
</div>
);
}
}
@ -108,7 +116,11 @@ describe('ReactTestUtils', () => {
it('can scryRenderedDOMComponentsWithClass with multiple classes', () => {
class Wrapper extends React.Component {
render() {
return <div>Hello <span className={'x y z'}>Jim</span></div>;
return (
<div>
Hello <span className={'x y z'}>Jim</span>
</div>
);
}
}
@ -210,9 +222,7 @@ describe('ReactTestUtils', () => {
<head ref="head">
<title>hello</title>
</head>
<body ref="body">
hello, world
</body>
<body ref="body">hello, world</body>
</html>
);
}
@ -231,7 +241,11 @@ describe('ReactTestUtils', () => {
});
it('can scry with stateless components involved', () => {
const Stateless = () => <div><hr /></div>;
const Stateless = () => (
<div>
<hr />
</div>
);
class SomeComponent extends React.Component {
render() {
@ -311,11 +325,7 @@ describe('ReactTestUtils', () => {
it('should throw when attempting to use a React element', () => {
class SomeComponent extends React.Component {
render() {
return (
<div onClick={this.props.handleClick}>
hello, world.
</div>
);
return <div onClick={this.props.handleClick}>hello, world.</div>;
}
}
@ -336,11 +346,7 @@ describe('ReactTestUtils', () => {
it('should throw when attempting to use a component instance', () => {
class SomeComponent extends React.Component {
render() {
return (
<div onClick={this.props.handleClick}>
hello, world.
</div>
);
return <div onClick={this.props.handleClick}>hello, world.</div>;
}
}
@ -403,7 +409,11 @@ describe('ReactTestUtils', () => {
class MyComponent extends React.Component {
render() {
return <div><input type="text" onChange={onChange} /></div>;
return (
<div>
<input type="text" onChange={onChange} />
</div>
);
}
}

70
packages/react-dom/src/__tests__/ReactUpdates-test.js vendored
View File

@ -60,7 +60,11 @@ describe('ReactUpdates', () => {
}
render() {
return <div>({this.state.x}, {this.state.y})</div>;
return (
<div>
({this.state.x}, {this.state.y})
</div>
);
}
}
@ -92,7 +96,11 @@ describe('ReactUpdates', () => {
}
render() {
return <div>({this.props.x}, {this.state.y})</div>;
return (
<div>
({this.props.x}, {this.state.y})
</div>
);
}
}
@ -125,7 +133,11 @@ describe('ReactUpdates', () => {
}
render() {
return <div><Child ref="child" x={this.state.x} /></div>;
return (
<div>
<Child ref="child" x={this.state.x} />
</div>
);
}
}
@ -174,7 +186,11 @@ describe('ReactUpdates', () => {
}
render() {
return <div><Child ref="child" x={this.state.x} /></div>;
return (
<div>
<Child ref="child" x={this.state.x} />
</div>
);
}
}
@ -347,7 +363,11 @@ describe('ReactUpdates', () => {
class Top extends React.Component {
render() {
return <Middle><Bottom /></Middle>;
return (
<Middle>
<Bottom />
</Middle>
);
}
}
@ -518,7 +538,12 @@ describe('ReactUpdates', () => {
var portal = null;
// If we're using Fiber, we use Portals instead to achieve this.
portal = ReactDOM.createPortal(<B ref={n => (b = n)} />, bContainer);
return <div>A{this.state.x}{portal}</div>;
return (
<div>
A{this.state.x}
{portal}
</div>
);
}
}
@ -547,7 +572,11 @@ describe('ReactUpdates', () => {
render() {
updates.push('Outer-render-' + this.state.x);
return <div><Inner x={this.state.x} ref="inner" /></div>;
return (
<div>
<Inner x={this.state.x} ref="inner" />
</div>
);
}
componentDidUpdate() {
@ -1152,9 +1181,21 @@ describe('ReactUpdates', () => {
const container = document.createElement('div');
// Mount
ReactDOM.render(<div><Foo /><Bar /></div>, container);
ReactDOM.render(
<div>
<Foo />
<Bar />
</div>,
container,
);
// Root update
ReactDOM.render(<div><Foo /><Bar /></div>, container);
ReactDOM.render(
<div>
<Foo />
<Bar />
</div>,
container,
);
expect(ops).toEqual([
// Mount
'a: false',
@ -1239,7 +1280,9 @@ describe('ReactUpdates', () => {
ops.push('Foo');
return (
<div>
<div hidden={true}><Bar /></div>
<div hidden={true}>
<Bar />
</div>
<Baz />
</div>
);
@ -1289,7 +1332,12 @@ describe('ReactUpdates', () => {
this.setState({step: 2});
}
render() {
return <div>Hello {this.props.name}{this.state.step}</div>;
return (
<div>
Hello {this.props.name}
{this.state.step}
</div>
);
}
}

6
packages/react-dom/src/__tests__/findDOMNode-test.js vendored
View File

@ -21,7 +21,11 @@ describe('findDOMNode', () => {
it('findDOMNode should find dom element', () => {
class MyNode extends React.Component {
render() {
return <div><span>Noise</span></div>;
return (
<div>
<span>Noise</span>
</div>
);
}
}

6
packages/react-dom/src/__tests__/multiple-copies-of-react-test.js vendored
View File

@ -16,11 +16,7 @@ class TextWithStringRef extends React.Component {
render() {
jest.resetModules();
React = require('react');
return (
<span ref="foo">
Hello world!
</span>
);
return <span ref="foo">Hello world!</span>;
}
}

8
packages/react-dom/src/__tests__/refs-destruction-test.js vendored
View File

@ -27,11 +27,9 @@ describe('refs-destruction', () => {
render() {
return (
<div>
{this.props.destroy
? null
: <div ref="theInnerDiv">
Lets try to destroy this.
</div>}
{this.props.destroy ? null : (
<div ref="theInnerDiv">Lets try to destroy this.</div>
)}
</div>
);
}

8
packages/react-dom/src/__tests__/refs-test.js vendored
View File

@ -353,7 +353,13 @@ describe('root level refs', () => {
var divInst = null;
var ref2 = jest.fn(value => (divInst = value));
result = ReactDOM.render(
[<Comp ref={ref} key="a" />, 5, <div ref={ref2} key="b">Hello</div>],
[
<Comp ref={ref} key="a" />,
5,
<div ref={ref2} key="b">
Hello
</div>,
],
container,
);

43
packages/react-dom/src/client/ReactDOM.js vendored
View File

@ -92,11 +92,11 @@ ReactControlledComponent.injection.injectFiberControlledHostComponent(
type DOMContainer =
| (Element & {
_reactRootContainer: ?Object,
})
_reactRootContainer: ?Object,
})
| (Document & {
_reactRootContainer: ?Object,
});
_reactRootContainer: ?Object,
});
type Container = Element | Document;
type Props = {
@ -126,12 +126,14 @@ let selectionInformation: ?mixed = null;
* @internal
*/
function isValidContainer(node) {
return !!(node &&
return !!(
node &&
(node.nodeType === ELEMENT_NODE ||
node.nodeType === DOCUMENT_NODE ||
node.nodeType === DOCUMENT_FRAGMENT_NODE ||
(node.nodeType === COMMENT_NODE &&
node.nodeValue === ' react-mount-point-unstable ')));
node.nodeValue === ' react-mount-point-unstable '))
);
}
function getReactRootElementInContainer(container: any) {
@ -148,9 +150,11 @@ function getReactRootElementInContainer(container: any) {
function shouldHydrateDueToLegacyHeuristic(container) {
const rootElement = getReactRootElementInContainer(container);
return !!(rootElement &&
return !!(
rootElement &&
rootElement.nodeType === ELEMENT_NODE &&
rootElement.hasAttribute(ROOT_ATTRIBUTE_NAME));
rootElement.hasAttribute(ROOT_ATTRIBUTE_NAME)
);
}
function shouldAutoFocusHostComponent(type: string, props: Props): boolean {
@ -178,9 +182,10 @@ const DOMRenderer = ReactFiberReconciler({
break;
}
default: {
const container: any = nodeType === COMMENT_NODE
? rootContainerInstance.parentNode
: rootContainerInstance;
const container: any =
nodeType === COMMENT_NODE
? rootContainerInstance.parentNode
: rootContainerInstance;
const ownNamespace = container.namespaceURI || null;
type = container.tagName;
namespace = getChildNamespace(ownNamespace, type);
@ -673,8 +678,9 @@ function renderSubtreeIntoContainer(
const isRootRenderedBySomeReact = !!container._reactRootContainer;
const rootEl = getReactRootElementInContainer(container);
const hasNonRootReactChild = !!(rootEl &&
ReactDOMComponentTree.getInstanceFromNode(rootEl));
const hasNonRootReactChild = !!(
rootEl && ReactDOMComponentTree.getInstanceFromNode(rootEl)
);
warning(
!hasNonRootReactChild || isRootRenderedBySomeReact,
@ -900,8 +906,9 @@ const ReactDOM: Object = {
} else {
if (__DEV__) {
const rootEl = getReactRootElementInContainer(container);
const hasNonRootReactChild = !!(rootEl &&
ReactDOMComponentTree.getInstanceFromNode(rootEl));
const hasNonRootReactChild = !!(
rootEl && ReactDOMComponentTree.getInstanceFromNode(rootEl)
);
// Check if the container itself is a React root node.
const isContainerReactRoot =
@ -915,9 +922,9 @@ const ReactDOM: Object = {
'was rendered by React and is not a top-level container. %s',
isContainerReactRoot
? 'You may have accidentally passed in a React root node instead ' +
'of its container.'
'of its container.'
: 'Instead, have the parent component update its state and ' +
'rerender in order to remove this component.',
'rerender in order to remove this component.',
);
}
@ -985,7 +992,7 @@ if (__DEV__) {
'https://fb.me/react-devtools' +
(protocol === 'file:'
? '\nYou might need to use a local HTTP server (instead of file://): ' +
'https://fb.me/react-devtools-faq'
'https://fb.me/react-devtools-faq'
: ''),
'font-weight:bold',
);

4
packages/react-dom/src/client/ReactDOMComponentTree.js vendored
View File

@ -8,7 +8,9 @@
import {HostComponent, HostText} from 'shared/ReactTypeOfWork';
import invariant from 'fbjs/lib/invariant';
const randomKey = Math.random().toString(36).slice(2);
const randomKey = Math.random()
.toString(36)
.slice(2);
const internalInstanceKey = '__reactInternalInstance$' + randomKey;
const internalEventHandlersKey = '__reactEventHandlers$' + randomKey;

3
packages/react-dom/src/client/ReactDOMFB.js vendored
View File

@ -10,8 +10,7 @@
import * as ReactFiberTreeReflection from 'shared/ReactFiberTreeReflection';
import * as ReactInstanceMap from 'shared/ReactInstanceMap';
// TODO: direct imports like some-package/src/* are bad. Fix me.
import * as ReactFiberErrorLogger
from 'react-reconciler/src/ReactFiberErrorLogger';
import * as ReactFiberErrorLogger from 'react-reconciler/src/ReactFiberErrorLogger';
import ReactErrorUtils from 'shared/ReactErrorUtils';
import {addUserTimingListener} from 'shared/ReactFeatureFlags';

33
packages/react-dom/src/client/ReactDOMFiberComponent.js vendored
View File

@ -8,8 +8,7 @@
*/
// TODO: direct imports like some-package/src/* are bad. Fix me.
import ReactDebugCurrentFiber
from 'react-reconciler/src/ReactDebugCurrentFiber';
import ReactDebugCurrentFiber from 'react-reconciler/src/ReactDebugCurrentFiber';
import {registrationNameModules} from 'events/EventPluginRegistry';
import emptyFunction from 'fbjs/lib/emptyFunction';
import warning from 'fbjs/lib/warning';
@ -29,15 +28,9 @@ import {getPropertyInfo, shouldSetAttribute} from '../shared/DOMProperty';
import assertValidProps from '../shared/assertValidProps';
import {DOCUMENT_NODE, DOCUMENT_FRAGMENT_NODE} from '../shared/HTMLNodeType';
import isCustomComponent from '../shared/isCustomComponent';
import {
validateProperties as validateARIAProperties,
} from '../shared/ReactDOMInvalidARIAHook';
import {
validateProperties as validateInputProperties,
} from '../shared/ReactDOMNullInputValuePropHook';
import {
validateProperties as validateUnknownProperties,
} from '../shared/ReactDOMUnknownPropertyHook';
import {validateProperties as validateARIAProperties} from '../shared/ReactDOMInvalidARIAHook';
import {validateProperties as validateInputProperties} from '../shared/ReactDOMNullInputValuePropHook';
import {validateProperties as validateUnknownProperties} from '../shared/ReactDOMUnknownPropertyHook';
var {
getCurrentFiberOwnerName,
@ -86,9 +79,8 @@ if (__DEV__) {
var NORMALIZE_NULL_AND_REPLACEMENT_REGEX = /\u0000|\uFFFD/g;
var normalizeMarkupForTextOrAttribute = function(markup: mixed): string {
const markupString = typeof markup === 'string'
? markup
: '' + (markup: any);
const markupString =
typeof markup === 'string' ? markup : '' + (markup: any);
return markupString
.replace(NORMALIZE_NEWLINES_REGEX, '\n')
.replace(NORMALIZE_NULL_AND_REPLACEMENT_REGEX, '');
@ -184,12 +176,13 @@ if (__DEV__) {
// re-initializing custom elements if they exist. But this breaks
// how <noscript> is being handled. So we use the same document.
// See the discussion in https://github.com/facebook/react/pull/11157.
var testElement = parent.namespaceURI === HTML_NAMESPACE
? parent.ownerDocument.createElement(parent.tagName)
: parent.ownerDocument.createElementNS(
(parent.namespaceURI: any),
parent.tagName,
);
var testElement =
parent.namespaceURI === HTML_NAMESPACE
? parent.ownerDocument.createElement(parent.tagName)
: parent.ownerDocument.createElementNS(
(parent.namespaceURI: any),
parent.tagName,
);
testElement.innerHTML = html;
return testElement.innerHTML;
};

11
packages/react-dom/src/client/ReactDOMFiberInput.js vendored
View File

@ -8,15 +8,13 @@
*/
// TODO: direct imports like some-package/src/* are bad. Fix me.
import ReactDebugCurrentFiber
from 'react-reconciler/src/ReactDebugCurrentFiber';
import ReactDebugCurrentFiber from 'react-reconciler/src/ReactDebugCurrentFiber';
import invariant from 'fbjs/lib/invariant';
import warning from 'fbjs/lib/warning';
import * as DOMPropertyOperations from './DOMPropertyOperations';
import {getFiberCurrentPropsFromNode} from './ReactDOMComponentTree';
import ReactControlledValuePropTypes
from '../shared/ReactControlledValuePropTypes';
import ReactControlledValuePropTypes from '../shared/ReactControlledValuePropTypes';
type InputWithWrapperState = HTMLInputElement & {
_wrapperState: {
@ -136,9 +134,8 @@ export function initWrapperState(element: Element, props: Object) {
var defaultValue = props.defaultValue;
var node = ((element: any): InputWithWrapperState);
node._wrapperState = {
initialChecked: props.checked != null
? props.checked
: props.defaultChecked,
initialChecked:
props.checked != null ? props.checked : props.defaultChecked,
initialValue: props.value != null ? props.value : defaultValue,
controlled: isControlled(props),
};

6
packages/react-dom/src/client/ReactDOMFiberSelect.js vendored
View File

@ -8,12 +8,10 @@
*/
// TODO: direct imports like some-package/src/* are bad. Fix me.
import ReactDebugCurrentFiber
from 'react-reconciler/src/ReactDebugCurrentFiber';
import ReactDebugCurrentFiber from 'react-reconciler/src/ReactDebugCurrentFiber';
import warning from 'fbjs/lib/warning';
import ReactControlledValuePropTypes
from '../shared/ReactControlledValuePropTypes';
import ReactControlledValuePropTypes from '../shared/ReactControlledValuePropTypes';
var {
getCurrentFiberOwnerName,

6
packages/react-dom/src/client/ReactDOMFiberTextarea.js vendored
View File

@ -10,11 +10,9 @@
import invariant from 'fbjs/lib/invariant';
import warning from 'fbjs/lib/warning';
// TODO: direct imports like some-package/src/* are bad. Fix me.
import ReactDebugCurrentFiber
from 'react-reconciler/src/ReactDebugCurrentFiber';
import ReactDebugCurrentFiber from 'react-reconciler/src/ReactDebugCurrentFiber';
import ReactControlledValuePropTypes
from '../shared/ReactControlledValuePropTypes';
import ReactControlledValuePropTypes from '../shared/ReactControlledValuePropTypes';
var {getCurrentFiberStackAddendum} = ReactDebugCurrentFiber;
var didWarnValDefaultVal = false;

5
packages/react-dom/src/client/getTextContentAccessor.js vendored
View File

@ -19,9 +19,8 @@ function getTextContentAccessor() {
if (!contentKey && ExecutionEnvironment.canUseDOM) {
// Prefer textContent to innerText because many browsers support both but
// SVG <text> elements don't support innerText even when <div> does.
contentKey = 'textContent' in document.documentElement
? 'textContent'
: 'innerText';
contentKey =
'textContent' in document.documentElement ? 'textContent' : 'innerText';
}
return contentKey;
}

3
packages/react-dom/src/client/setInnerHTML.js vendored
View File

@ -6,8 +6,7 @@
*/
import {Namespaces} from '../shared/DOMNamespaces';
import createMicrosoftUnsafeLocalFunction
from '../shared/createMicrosoftUnsafeLocalFunction';
import createMicrosoftUnsafeLocalFunction from '../shared/createMicrosoftUnsafeLocalFunction';
// SVG temp container for IE lacking innerHTML
let reusableSVGContainer;

3
packages/react-dom/src/client/validateDOMNesting.js vendored
View File

@ -8,8 +8,7 @@
import emptyFunction from 'fbjs/lib/emptyFunction';
import warning from 'fbjs/lib/warning';
// TODO: direct imports like some-package/src/* are bad. Fix me.
import ReactDebugCurrentFiber
from 'react-reconciler/src/ReactDebugCurrentFiber';
import ReactDebugCurrentFiber from 'react-reconciler/src/ReactDebugCurrentFiber';
const {getCurrentFiberStackAddendum} = ReactDebugCurrentFiber;
var validateDOMNesting = emptyFunction;

12
packages/react-dom/src/events/BrowserEventConstants.js vendored
View File

@ -17,10 +17,10 @@ import getVendorPrefixedEventName from './getVendorPrefixedEventName';
var topLevelTypes = {
topAbort: 'abort',
topAnimationEnd: getVendorPrefixedEventName('animationend') || 'animationend',
topAnimationIteration: getVendorPrefixedEventName('animationiteration') ||
'animationiteration',
topAnimationStart: getVendorPrefixedEventName('animationstart') ||
'animationstart',
topAnimationIteration:
getVendorPrefixedEventName('animationiteration') || 'animationiteration',
topAnimationStart:
getVendorPrefixedEventName('animationstart') || 'animationstart',
topBlur: 'blur',
topCancel: 'cancel',
topCanPlay: 'canplay',
@ -81,8 +81,8 @@ var topLevelTypes = {
topTouchEnd: 'touchend',
topTouchMove: 'touchmove',
topTouchStart: 'touchstart',
topTransitionEnd: getVendorPrefixedEventName('transitionend') ||
'transitionend',
topTransitionEnd:
getVendorPrefixedEventName('transitionend') || 'transitionend',
topVolumeChange: 'volumechange',
topWaiting: 'waiting',
topWheel: 'wheel',

7
packages/react-dom/src/events/SelectEventPlugin.js vendored
View File

@ -140,9 +140,10 @@ var SelectEventPlugin = {
nativeEvent,
nativeEventTarget,
) {
var doc = nativeEventTarget.window === nativeEventTarget
? nativeEventTarget.document
: nativeEventTarget.nodeType === DOCUMENT_NODE
var doc =
nativeEventTarget.window === nativeEventTarget
? nativeEventTarget.document
: nativeEventTarget.nodeType === DOCUMENT_NODE
? nativeEventTarget
: nativeEventTarget.ownerDocument;
// Track whether all listeners exists for this plugin. If none exist, we do

6
packages/react-dom/src/events/SyntheticWheelEvent.js vendored
View File

@ -23,9 +23,9 @@ var WheelEventInterface = {
? event.deltaY
: // Fallback to `wheelDeltaY` for Webkit and normalize (down is positive).
'wheelDeltaY' in event
? -event.wheelDeltaY
: // Fallback to `wheelDelta` for IE<9 and normalize (down is positive).
'wheelDelta' in event ? -event.wheelDelta : 0;
? -event.wheelDeltaY
: // Fallback to `wheelDelta` for IE<9 and normalize (down is positive).
'wheelDelta' in event ? -event.wheelDelta : 0;
},
deltaZ: null,

2
packages/react-dom/src/events/TapEventPlugin.js vendored
View File

@ -23,7 +23,7 @@ import SyntheticUIEvent from './SyntheticUIEvent';
type TouchPropertyKey = 'clientX' | 'clientY' | 'pageX' | 'pageY';
declare class _Touch extends Touch {
[key: TouchPropertyKey]: number,
[key: TouchPropertyKey]: number;
}
type AxisCoordinateData = {

5
packages/react-dom/src/events/__tests__/EnterLeaveEventPlugin-test.js vendored
View File

@ -93,8 +93,9 @@ describe('EnterLeaveEventPlugin', () => {
<div
onMouseEnter={() => parentEnterCalls++}
ref={node => (parent = node)}>
{this.props.showChild &&
<div onMouseEnter={() => childEnterCalls++} />}
{this.props.showChild && (
<div onMouseEnter={() => childEnterCalls++} />
)}
</div>
);
}

20
packages/react-dom/src/events/__tests__/SimpleEventPlugin-test.js vendored
View File

@ -46,7 +46,9 @@ describe('SimpleEventPlugin', function() {
it('A non-interactive tags clicks bubble when disabled', function() {
var element = ReactTestUtils.renderIntoDocument(
<div onClick={onClick}><div /></div>,
<div onClick={onClick}>
<div />
</div>,
);
var child = ReactDOM.findDOMNode(element).firstChild;
@ -56,7 +58,9 @@ describe('SimpleEventPlugin', function() {
it('does not register a click when clicking a child of a disabled element', function() {
var element = ReactTestUtils.renderIntoDocument(
<button onClick={onClick} disabled={true}><span /></button>,
<button onClick={onClick} disabled={true}>
<span />
</button>,
);
var child = ReactDOM.findDOMNode(element).querySelector('span');
@ -66,7 +70,9 @@ describe('SimpleEventPlugin', function() {
it('triggers click events for children of disabled elements', function() {
var element = ReactTestUtils.renderIntoDocument(
<button disabled={true}><span onClick={onClick} /></button>,
<button disabled={true}>
<span onClick={onClick} />
</button>,
);
var child = ReactDOM.findDOMNode(element).querySelector('span');
@ -77,7 +83,9 @@ describe('SimpleEventPlugin', function() {
it('triggers parent captured click events when target is a child of a disabled elements', function() {
var element = ReactTestUtils.renderIntoDocument(
<div onClickCapture={onClick}>
<button disabled={true}><span /></button>
<button disabled={true}>
<span />
</button>
</div>,
);
var child = ReactDOM.findDOMNode(element).querySelector('span');
@ -88,7 +96,9 @@ describe('SimpleEventPlugin', function() {
it('triggers captured click events for children of disabled elements', function() {
var element = ReactTestUtils.renderIntoDocument(
<button disabled={true}><span onClickCapture={onClick} /></button>,
<button disabled={true}>
<span onClickCapture={onClick} />
</button>,
);
var child = ReactDOM.findDOMNode(element).querySelector('span');

45
packages/react-dom/src/events/__tests__/SyntheticEvent-test.js vendored
View File

@ -146,32 +146,29 @@ describe('SyntheticEvent', () => {
// TODO: reenable this test. We are currently silencing these warnings when
// using TestUtils.Simulate to avoid spurious warnings that result from the
// way we simulate events.
xit(
'should properly log warnings when events simulated with rendered components',
() => {
spyOn(console, 'error');
var event;
var element = document.createElement('div');
function assignEvent(e) {
event = e;
}
var instance = ReactDOM.render(<div onClick={assignEvent} />, element);
ReactTestUtils.Simulate.click(ReactDOM.findDOMNode(instance));
expectDev(console.error.calls.count()).toBe(0);
xit('should properly log warnings when events simulated with rendered components', () => {
spyOn(console, 'error');
var event;
var element = document.createElement('div');
function assignEvent(e) {
event = e;
}
var instance = ReactDOM.render(<div onClick={assignEvent} />, element);
ReactTestUtils.Simulate.click(ReactDOM.findDOMNode(instance));
expectDev(console.error.calls.count()).toBe(0);
// access a property to cause the warning
event.nativeEvent; // eslint-disable-line no-unused-expressions
// access a property to cause the warning
event.nativeEvent; // eslint-disable-line no-unused-expressions
expectDev(console.error.calls.count()).toBe(1);
expectDev(console.error.calls.argsFor(0)[0]).toBe(
'Warning: This synthetic event is reused for performance reasons. If ' +
"you're seeing this, you're accessing the property `nativeEvent` on a " +
'released/nullified synthetic event. This is set to null. If you must ' +
'keep the original synthetic event around, use event.persist(). ' +
'See https://fb.me/react-event-pooling for more information.',
);
},
);
expectDev(console.error.calls.count()).toBe(1);
expectDev(console.error.calls.argsFor(0)[0]).toBe(
'Warning: This synthetic event is reused for performance reasons. If ' +
"you're seeing this, you're accessing the property `nativeEvent` on a " +
'released/nullified synthetic event. This is set to null. If you must ' +
'keep the original synthetic event around, use event.persist(). ' +
'See https://fb.me/react-event-pooling for more information.',
);
});
it('should warn if Proxy is supported and the synthetic event is added a property', () => {
spyOn(console, 'error');

3
packages/react-dom/src/server/DOMMarkupOperations.js vendored
View File

@ -14,8 +14,7 @@ import {
shouldAttributeAcceptBooleanValue,
shouldSetAttribute,
} from '../shared/DOMProperty';
import quoteAttributeValueForBrowser
from '../shared/quoteAttributeValueForBrowser';
import quoteAttributeValueForBrowser from '../shared/quoteAttributeValueForBrowser';
import warning from 'fbjs/lib/warning';
// isAttributeNameSafe() is currently duplicated in DOMPropertyOperations.

27
packages/react-dom/src/server/ReactPartialRenderer.js vendored
View File

@ -30,23 +30,16 @@ import {
getIntrinsicNamespace,
getChildNamespace,
} from '../shared/DOMNamespaces';
import ReactControlledValuePropTypes
from '../shared/ReactControlledValuePropTypes';
import ReactControlledValuePropTypes from '../shared/ReactControlledValuePropTypes';
import assertValidProps from '../shared/assertValidProps';
import dangerousStyleValue from '../shared/dangerousStyleValue';
import escapeTextContentForBrowser from '../shared/escapeTextContentForBrowser';
import isCustomComponent from '../shared/isCustomComponent';
import omittedCloseTags from '../shared/omittedCloseTags';
import warnValidStyle from '../shared/warnValidStyle';
import {
validateProperties as validateARIAProperties,
} from '../shared/ReactDOMInvalidARIAHook';
import {
validateProperties as validateInputProperties,
} from '../shared/ReactDOMNullInputValuePropHook';
import {
validateProperties as validateUnknownProperties,
} from '../shared/ReactDOMUnknownPropertyHook';
import {validateProperties as validateARIAProperties} from '../shared/ReactDOMInvalidARIAHook';
import {validateProperties as validateInputProperties} from '../shared/ReactDOMNullInputValuePropHook';
import {validateProperties as validateUnknownProperties} from '../shared/ReactDOMUnknownPropertyHook';
var REACT_FRAGMENT_TYPE =
(typeof Symbol === 'function' &&
@ -435,9 +428,10 @@ function resolve(
var dontMutate = true;
for (var i = oldReplace ? 1 : 0; i < oldQueue.length; i++) {
var partial = oldQueue[i];
var partialState = typeof partial === 'function'
? partial.call(inst, nextState, element.props, publicContext)
: partial;
var partialState =
typeof partial === 'function'
? partial.call(inst, nextState, element.props, publicContext)
: partial;
if (partialState) {
if (dontMutate) {
dontMutate = false;
@ -828,9 +822,8 @@ class ReactDOMServerRenderer {
didWarnDefaultSelectValue = true;
}
}
this.currentSelectValue = props.value != null
? props.value
: props.defaultValue;
this.currentSelectValue =
props.value != null ? props.value : props.defaultValue;
props = Object.assign({}, props, {
value: undefined,
});

22
packages/react-dom/src/shared/CSSPropertyOperations.js vendored
View File

@ -14,11 +14,11 @@ import warnValidStyle from './warnValidStyle';
*/
/**
* This creates a string that is expected to be equivalent to the style
* attribute generated by server-side rendering. It by-passes warnings and
* security checks so it's not safe to use this value for anything other than
* comparison. It is only used in DEV for SSR validation.
*/
* This creates a string that is expected to be equivalent to the style
* attribute generated by server-side rendering. It by-passes warnings and
* security checks so it's not safe to use this value for anything other than
* comparison. It is only used in DEV for SSR validation.
*/
export function createDangerousStringForStyles(styles) {
if (__DEV__) {
var serialized = '';
@ -45,12 +45,12 @@ export function createDangerousStringForStyles(styles) {
}
/**
* Sets the value for multiple styles on a node. If a value is specified as
* '' (empty string), the corresponding style property will be unset.
*
* @param {DOMElement} node
* @param {object} styles
*/
* Sets the value for multiple styles on a node. If a value is specified as
* '' (empty string), the corresponding style property will be unset.
*
* @param {DOMElement} node
* @param {object} styles
*/
export function setValueForStyles(node, styles, getStack) {
var style = node.style;
for (var styleName in styles) {

7
packages/react-dom/src/test-utils/ReactTestUtils.js vendored
View File

@ -461,9 +461,10 @@ function makeNativeSimulator(eventType) {
Object.keys(topLevelTypes).forEach(function(eventType) {
// Event type is stored as 'topClick' - we transform that to 'click'
var convenienceName = eventType.indexOf('top') === 0
? eventType.charAt(3).toLowerCase() + eventType.substr(4)
: eventType;
var convenienceName =
eventType.indexOf('top') === 0
? eventType.charAt(3).toLowerCase() + eventType.substr(4)
: eventType;
/**
* @param {!Element|ReactDOMComponent} domComponentOrNode
* @param {?Event} nativeEventData Fake native event to use in SyntheticEvent.

26
packages/react-native-renderer/src/ReactNativeAttributePayload.js vendored
View File

@ -106,9 +106,10 @@ function restoreDeletedValuesInNestedArray(
typeof attributeConfig.process === 'function'
) {
// case: CustomAttributeConfiguration
var nextValue = typeof attributeConfig.process === 'function'
? attributeConfig.process(nextProp)
: nextProp;
var nextValue =
typeof attributeConfig.process === 'function'
? attributeConfig.process(nextProp)
: nextProp;
updatePayload[propKey] = nextValue;
}
removedKeys[propKey] = false;
@ -123,9 +124,8 @@ function diffNestedArrayProperty(
nextArray: Array<NestedNode>,
validAttributes: AttributeConfiguration,
): ?Object {
var minLength = prevArray.length < nextArray.length
? prevArray.length
: nextArray.length;
var minLength =
prevArray.length < nextArray.length ? prevArray.length : nextArray.length;
var i;
for (i = 0; i < minLength; i++) {
// Diff any items in the array in the forward direction. Repeated keys
@ -350,9 +350,10 @@ function diffProperties(
typeof attributeConfig.process === 'function'
) {
// case: CustomAttributeConfiguration
var nextValue = typeof attributeConfig.process === 'function'
? attributeConfig.process(nextProp)
: nextProp;
var nextValue =
typeof attributeConfig.process === 'function'
? attributeConfig.process(nextProp)
: nextProp;
updatePayload[propKey] = nextValue;
}
continue;
@ -380,9 +381,10 @@ function diffProperties(
? attributeConfig.diff(prevProp, nextProp)
: defaultDiffer(prevProp, nextProp));
if (shouldUpdate) {
nextValue = typeof attributeConfig.process === 'function'
? attributeConfig.process(nextProp)
: nextProp;
nextValue =
typeof attributeConfig.process === 'function'
? attributeConfig.process(nextProp)
: nextProp;
(updatePayload || (updatePayload = {}))[propKey] = nextValue;
}
} else {

6
packages/react-native-renderer/src/ReactNativeComponent.js vendored
View File

@ -37,8 +37,10 @@ import findNumericNodeHandle from './findNumericNodeHandle';
*
* @abstract
*/
class ReactNativeComponent<DefaultProps, Props, State>
extends React.Component<Props, State> {
class ReactNativeComponent<DefaultProps, Props, State> extends React.Component<
Props,
State,
> {
static defaultProps: $Abstract<DefaultProps>;
props: Props;
state: State;

7
packages/react-native-renderer/src/ReactNativeEventEmitter.js vendored
View File

@ -145,10 +145,11 @@ export function receiveTouches(
touches: Array<Object>,
changedIndices: Array<number>,
) {
var changedTouches = eventTopLevelType === 'topTouchEnd' ||
var changedTouches =
eventTopLevelType === 'topTouchEnd' ||
eventTopLevelType === 'topTouchCancel'
? removeTouchesAtIndices(touches, changedIndices)
: touchSubsequence(touches, changedIndices);
? removeTouchesAtIndices(touches, changedIndices)
: touchSubsequence(touches, changedIndices);
for (var jj = 0; jj < changedTouches.length; jj++) {
var touch = changedTouches[jj];

4
packages/react-native-renderer/src/ReactNativeFiberErrorDialog.js vendored
View File

@ -30,7 +30,9 @@ export function showDialog(capturedError: CapturedError): boolean {
errorToHandle = error;
try {
errorToHandle.message = `${summary}\n\nThis error is located at:${componentStack}`;
errorToHandle.message = `${summary}\n\nThis error is located at:${
componentStack
}`;
} catch (e) {}
} else if (typeof error === 'string') {
errorToHandle = new Error(

10
packages/react-native-renderer/src/ReactNativeFiberRenderer.js vendored
View File

@ -14,11 +14,9 @@ import emptyObject from 'fbjs/lib/emptyObject';
import invariant from 'fbjs/lib/invariant';
// Modules provided by RN:
import UIManager from 'UIManager';
import deepFreezeAndThrowOnMutationInDev
from 'deepFreezeAndThrowOnMutationInDev';
import deepFreezeAndThrowOnMutationInDev from 'deepFreezeAndThrowOnMutationInDev';
import * as ReactNativeViewConfigRegistry
from './ReactNativeViewConfigRegistry';
import * as ReactNativeViewConfigRegistry from './ReactNativeViewConfigRegistry';
import * as ReactNativeAttributePayload from './ReactNativeAttributePayload';
import {
precacheFiberNode,
@ -132,9 +130,9 @@ const NativeRenderer = ReactFiberReconciler({
// Either way we need to pass a copy of the Array to prevent it from being frozen.
const nativeTags = parentInstance._children.map(
child =>
(typeof child === 'number'
typeof child === 'number'
? child // Leaf node (eg text)
: child._nativeTag),
: child._nativeTag,
);
UIManager.setChildren(

3
packages/react-native-renderer/src/ReactNativeInjection.js vendored
View File

@ -26,8 +26,7 @@ import ReactNativeBridgeEventPlugin from './ReactNativeBridgeEventPlugin';
import * as ReactNativeComponentTree from './ReactNativeComponentTree';
import * as ReactNativeEventEmitter from './ReactNativeEventEmitter';
import ReactNativeEventPluginOrder from './ReactNativeEventPluginOrder';
import ReactNativeGlobalResponderHandler
from './ReactNativeGlobalResponderHandler';
import ReactNativeGlobalResponderHandler from './ReactNativeGlobalResponderHandler';
/**
* Register the event emitter with the native bridge

3
packages/react-native-renderer/src/ReactNativeRenderer.js vendored
View File

@ -13,8 +13,7 @@ import type {ReactNodeList} from 'shared/ReactTypes';
import './ReactNativeInjection';
// TODO: direct imports like some-package/src/* are bad. Fix me.
import * as ReactFiberErrorLogger
from 'react-reconciler/src/ReactFiberErrorLogger';
import * as ReactFiberErrorLogger from 'react-reconciler/src/ReactFiberErrorLogger';
import * as ReactPortal from 'react-reconciler/src/ReactPortal';
import * as ReactGenericBatching from 'events/ReactGenericBatching';
import TouchHistoryMath from 'events/TouchHistoryMath';

18
packages/react-native-renderer/src/ReactNativeViewConfigRegistry.js vendored
View File

@ -18,11 +18,11 @@ const viewConfigCallbacks = new Map();
const viewConfigs = new Map();
/**
* Registers a native view/component by name.
* A callback is provided to load the view config from UIManager.
* The callback is deferred until the view is actually rendered.
* This is done to avoid causing Prepack deopts.
*/
* Registers a native view/component by name.
* A callback is provided to load the view config from UIManager.
* The callback is deferred until the view is actually rendered.
* This is done to avoid causing Prepack deopts.
*/
export function register(name: string, callback: ViewConfigGetter): string {
invariant(
!viewConfigCallbacks.has(name),
@ -34,10 +34,10 @@ export function register(name: string, callback: ViewConfigGetter): string {
}
/**
* Retrieves a config for the specified view.
* If this is the first time the view has been used,
* This configuration will be lazy-loaded from UIManager.
*/
* Retrieves a config for the specified view.
* If this is the first time the view has been used,
* This configuration will be lazy-loaded from UIManager.
*/
export function get(name: string): ReactNativeBaseComponentViewConfig {
let viewConfig;
if (!viewConfigs.has(name)) {

Some files were not shown because too many files have changed in this diff Show More