Skip to content

Commit 0bd0c52

Browse files
acdliteacdlite
authored
Upgrade ESLint so we can use JSX Fragment syntax (#16328)
Now that we're using Babel 7, this is the last blocker.
1 parent 07d062d commit 0bd0c52

40 files changed

+831
-682
lines changed

‎.eslintrc.js

Lines changed: 22 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,13 @@ module.exports = {
1212
extends: 'fbjs',
1313

1414
// Stop ESLint from looking for a configuration file in parent folders
15-
'root': true,
15+
root: true,
1616

17-
plugins: [
18-
'jest',
19-
'no-for-of-loops',
20-
'react',
21-
'react-internal',
22-
],
17+
plugins: ['jest', 'no-for-of-loops', 'react', 'react-internal'],
2318

24-
parser: 'espree',
19+
parser: 'babel-eslint',
2520
parserOptions: {
26-
ecmaVersion: 2017,
21+
ecmaVersion: 8,
2722
sourceType: 'script',
2823
ecmaFeatures: {
2924
experimentalObjectRestSpread: true,
@@ -40,8 +35,8 @@ module.exports = {
4035
'dot-location': [ERROR, 'property'],
4136
'dot-notation': ERROR,
4237
'eol-last': ERROR,
43-
'eqeqeq': [ERROR, 'allow-null'],
44-
'indent': OFF,
38+
eqeqeq: [ERROR, 'allow-null'],
39+
indent: OFF,
4540
'jsx-quotes': [ERROR, 'prefer-double'],
4641
'keyword-spacing': [ERROR, {after: true, before: true}],
4742
'no-bitwise': OFF,
@@ -51,9 +46,9 @@ module.exports = {
5146
'no-shadow': ERROR,
5247
'no-unused-expressions': ERROR,
5348
'no-unused-vars': [ERROR, {args: 'none'}],
54-
'no-use-before-define': [ERROR, {functions: false, variables: false}],
49+
'no-use-before-define': OFF,
5550
'no-useless-concat': OFF,
56-
'quotes': [ERROR, 'single', {avoidEscape: true, allowTemplateLiterals: true }],
51+
quotes: [ERROR, 'single', {avoidEscape: true, allowTemplateLiterals: true}],
5752
'space-before-blocks': ERROR,
5853
'space-before-function-paren': OFF,
5954
'valid-typeof': [ERROR, {requireStringLiterals: true}],
@@ -65,6 +60,12 @@ module.exports = {
6560
'no-var': ERROR,
6661
strict: ERROR,
6762

63+
// Enforced by Prettier
64+
// TODO: Prettier doesn't handle long strings or long comments. Not a big
65+
// deal. But I turned it off because loading the plugin causes some obscure
66+
// syntax error and it didn't seem worth investigating.
67+
'max-len': OFF,
68+
6869
// React & JSX
6970
// Our transforms set this automatically
7071
'react/jsx-boolean-value': [ERROR, 'always'],
@@ -78,7 +79,10 @@ module.exports = {
7879
'react/react-in-jsx-scope': ERROR,
7980
'react/self-closing-comp': ERROR,
8081
// We don't care to do this
81-
'react/jsx-wrap-multilines': [ERROR, {declaration: false, assignment: false}],
82+
'react/jsx-wrap-multilines': [
83+
ERROR,
84+
{declaration: false, assignment: false},
85+
],
8286

8387
// Prevent for...of loops because they require a Symbol polyfill.
8488
// You can disable this rule for code that isn't shipped (e.g. build scripts and tests).
@@ -112,6 +116,7 @@ module.exports = {
112116
files: esNextPaths,
113117
parser: 'babel-eslint',
114118
parserOptions: {
119+
ecmaVersion: 8,
115120
sourceType: 'module',
116121
},
117122
rules: {
@@ -124,14 +129,14 @@ module.exports = {
124129
rules: {
125130
// https://github.com/jest-community/eslint-plugin-jest
126131
'jest/no-focused-tests': ERROR,
127-
}
132+
},
128133
},
129134
{
130135
files: ['packages/react-native-renderer/**/*.js'],
131136
globals: {
132137
nativeFabricUIManager: true,
133-
}
134-
}
138+
},
139+
},
135140
],
136141

137142
globals: {

‎fixtures/dom/src/components/fixtures/suspense/index.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -46,15 +46,15 @@ class SuspendyTreeChild extends React.Component {
4646

4747
render() {
4848
return (
49-
<React.Fragment>
49+
<>
5050
<Suspense fallback={<div>(display: none)</div>}>
5151
<div>
5252
<AsyncStep text={`${this.state.step} + ${this.id}`} ms={500} />
5353
{this.props.children}
5454
</div>
5555
</Suspense>
5656
<button onClick={this.increment}>Hide</button>
57-
</React.Fragment>
57+
</>
5858
);
5959
}
6060
}
@@ -86,22 +86,22 @@ class SuspendyTree extends React.Component {
8686
};
8787
render() {
8888
return (
89-
<React.Fragment>
89+
<>
9090
<div ref={this.parentContainer}>
9191
<div ref={this.container} />
9292
</div>
9393
<div>
9494
{this.container.current !== null
9595
? ReactDOM.createPortal(
96-
<React.Fragment>
96+
<>
9797
<SuspendyTreeChild>{this.props.children}</SuspendyTreeChild>
9898
<button onClick={this.removeAndRestore}>Remove</button>
99-
</React.Fragment>,
99+
</>,
100100
this.container.current
101101
)
102102
: null}
103103
</div>
104-
</React.Fragment>
104+
</>
105105
);
106106
}
107107
}

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,12 +45,12 @@
4545
"cross-env": "^5.1.1",
4646
"danger": "^3.0.4",
4747
"error-stack-parser": "^2.0.2",
48-
"eslint": "^4.1.0",
48+
"eslint": "^6.1.0",
4949
"eslint-config-fbjs": "^1.1.1",
50-
"eslint-plugin-babel": "^3.3.0",
5150
"eslint-plugin-flowtype": "^2.25.0",
5251
"eslint-plugin-jest": "^21.6.1",
5352
"eslint-plugin-no-for-of-loops": "^1.0.0",
53+
"eslint-plugin-babel": "^5.3.0",
5454
"eslint-plugin-react": "^6.7.1",
5555
"eslint-plugin-react-internal": "link:./scripts/eslint-rules",
5656
"fbjs-scripts": "^0.8.3",

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -178,11 +178,11 @@ describe('ReactDOMFiber', () => {
178178

179179
it('renders an empty fragment', () => {
180180
const Div = () => <div />;
181-
const EmptyFragment = () => <React.Fragment />;
181+
const EmptyFragment = () => <></>;
182182
const NonEmptyFragment = () => (
183-
<React.Fragment>
183+
<>
184184
<Div />
185-
</React.Fragment>
185+
</>
186186
);
187187

188188
ReactDOM.render(<EmptyFragment />, container);
@@ -475,10 +475,10 @@ describe('ReactDOMFiber', () => {
475475
return (
476476
<div>
477477
{this.state.show && (
478-
<React.Fragment>
478+
<>
479479
{ReactDOM.createPortal(null, portalContainer)}
480480
<div>child</div>
481-
</React.Fragment>
481+
</>
482482
)}
483483
<div>parent</div>
484484
</div>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -581,11 +581,11 @@ describe('ReactDOMFiberAsync', () => {
581581
}
582582

583583
root.render(
584-
<React.Fragment>
584+
<>
585585
<Text text="A" />
586586
<Text text="B" />
587587
<Text text="C" />
588-
</React.Fragment>,
588+
</>,
589589
);
590590

591591
// Nothing should have rendered yet

‎packages/react-dom/src/__tests__/ReactDOMHooks-test.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -82,10 +82,10 @@ describe('ReactDOMHooks', () => {
8282
});
8383

8484
return (
85-
<React.Fragment>
85+
<>
8686
<input ref={inputRef} onInput={handleInput} />
8787
<label ref={labelRef}>{text}</label>
88-
</React.Fragment>
88+
</>
8989
);
9090
};
9191

@@ -115,10 +115,10 @@ describe('ReactDOMHooks', () => {
115115
});
116116

117117
return (
118-
<React.Fragment>
118+
<>
119119
<input ref={inputRef} onInput={handleInput} />
120120
<label ref={labelRef}>{text}</label>
121-
</React.Fragment>
121+
</>
122122
);
123123
};
124124

‎packages/react-dom/src/__tests__/ReactDOMServerIntegrationClassContextType-test.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -240,12 +240,12 @@ describe('ReactDOMServerIntegration', () => {
240240
</Theme.Provider>
241241
<LanguageConsumer>
242242
{language => (
243-
<React.Fragment>
243+
<>
244244
<ThemeConsumer>
245245
{theme => <div id="theme3">{theme}</div>}
246246
</ThemeConsumer>
247247
<div id="language2">{language}</div>
248-
</React.Fragment>
248+
</>
249249
)}
250250
</LanguageConsumer>
251251
</Theme.Provider>

‎packages/react-dom/src/__tests__/ReactDOMServerIntegrationFragment-test.js

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -42,9 +42,9 @@ describe('ReactDOMServerIntegration', () => {
4242
describe('React.Fragment', () => {
4343
itRenders('a fragment with one child', async render => {
4444
let e = await render(
45-
<React.Fragment>
45+
<>
4646
<div>text1</div>
47-
</React.Fragment>,
47+
</>,
4848
);
4949
let parent = e.parentNode;
5050
expect(parent.childNodes[0].tagName).toBe('DIV');
@@ -56,19 +56,19 @@ describe('ReactDOMServerIntegration', () => {
5656
};
5757
let Footer = props => {
5858
return (
59-
<React.Fragment>
59+
<>
6060
<h2>footer</h2>
6161
<h3>about</h3>
62-
</React.Fragment>
62+
</>
6363
);
6464
};
6565
let e = await render(
66-
<React.Fragment>
66+
<>
6767
<div>text1</div>
6868
<span>text2</span>
6969
<Header />
7070
<Footer />
71-
</React.Fragment>,
71+
</>,
7272
);
7373
let parent = e.parentNode;
7474
expect(parent.childNodes[0].tagName).toBe('DIV');
@@ -80,21 +80,21 @@ describe('ReactDOMServerIntegration', () => {
8080

8181
itRenders('a nested fragment', async render => {
8282
let e = await render(
83-
<React.Fragment>
84-
<React.Fragment>
83+
<>
84+
<>
8585
<div>text1</div>
86-
</React.Fragment>
86+
</>
8787
<span>text2</span>
88-
<React.Fragment>
89-
<React.Fragment>
90-
<React.Fragment>
88+
<>
89+
<>
90+
<>
9191
{null}
9292
<p />
93-
</React.Fragment>
93+
</>
9494
{false}
95-
</React.Fragment>
96-
</React.Fragment>
97-
</React.Fragment>,
95+
</>
96+
</>
97+
</>,
9898
);
9999
let parent = e.parentNode;
100100
expect(parent.childNodes[0].tagName).toBe('DIV');

‎packages/react-dom/src/__tests__/ReactDOMServerIntegrationNewContext-test.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -270,12 +270,12 @@ describe('ReactDOMServerIntegration', () => {
270270
</Theme.Provider>
271271
<Language.Consumer>
272272
{language => (
273-
<React.Fragment>
273+
<>
274274
<Theme.Consumer>
275275
{theme => <div id="theme3">{theme}</div>}
276276
</Theme.Consumer>
277277
<div id="language2">{language}</div>
278-
</React.Fragment>
278+
</>
279279
)}
280280
</Language.Consumer>
281281
</Theme.Provider>

‎packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -157,10 +157,10 @@ describe('ReactDOMServerPartialHydration', () => {
157157
throw promise;
158158
} else {
159159
return (
160-
<React.Fragment>
160+
<>
161161
<div>Middle</div>
162162
Some text
163-
</React.Fragment>
163+
</>
164164
);
165165
}
166166
}
@@ -1022,12 +1022,12 @@ describe('ReactDOMServerPartialHydration', () => {
10221022
<div>
10231023
<Suspense
10241024
fallback={
1025-
<React.Fragment>
1025+
<>
10261026
<Suspense fallback="Loading...">
10271027
<Child />
10281028
</Suspense>
10291029
<span>Inner Sibling</span>
1030-
</React.Fragment>
1030+
</>
10311031
}>
10321032
<Child />
10331033
</Suspense>

‎packages/react-reconciler/src/__tests__/ReactBatchedMode-test.internal.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -53,11 +53,11 @@ describe('ReactBatchedMode', () => {
5353
const root = ReactNoop.createSyncRoot();
5454

5555
root.render(
56-
<React.Fragment>
56+
<>
5757
<Text text="A" />
5858
<Text text="B" />
5959
<Text text="C" />
60-
</React.Fragment>,
60+
</>,
6161
);
6262

6363
// Nothing should have rendered yet
@@ -112,11 +112,11 @@ describe('ReactBatchedMode', () => {
112112
expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
113113
expect(Scheduler).toFlushExpired(['A', 'B', 'C']);
114114
expect(root).toMatchRenderedOutput(
115-
<React.Fragment>
115+
<>
116116
<span>A</span>
117117
<span>B</span>
118118
<span>C</span>
119-
</React.Fragment>,
119+
</>,
120120
);
121121
});
122122

@@ -133,10 +133,10 @@ describe('ReactBatchedMode', () => {
133133
const foo1 = React.createRef(null);
134134
const foo2 = React.createRef(null);
135135
root.render(
136-
<React.Fragment>
136+
<>
137137
<Foo label="A" ref={foo1} />
138138
<Foo label="B" ref={foo2} />
139-
</React.Fragment>,
139+
</>,
140140
);
141141

142142
// Mount

0 commit comments

Comments
 (0)