Upgrade ESLint so we can use JSX Fragment syntax (#16328)

Now that we're using Babel 7, this is the last blocker.
facebook · Aug 9, 2019 · 0bd0c52 · 0bd0c52
1 parent 07d062d
commit 0bd0c52
Show file tree

Hide file tree

Showing 40 changed files with 831 additions and 682 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -12,18 +12,13 @@ module.exports = {
   extends: 'fbjs',
 
   // Stop ESLint from looking for a configuration file in parent folders
-  'root': true,
+  root: true,
 
-  plugins: [
-    'jest',
-    'no-for-of-loops',
-    'react',
-    'react-internal',
-  ],
+  plugins: ['jest', 'no-for-of-loops', 'react', 'react-internal'],
 
-  parser: 'espree',
+  parser: 'babel-eslint',
   parserOptions: {
-    ecmaVersion: 2017,
+    ecmaVersion: 8,
     sourceType: 'script',
     ecmaFeatures: {
       experimentalObjectRestSpread: true,
@@ -40,8 +35,8 @@ module.exports = {
     'dot-location': [ERROR, 'property'],
     'dot-notation': ERROR,
     'eol-last': ERROR,
-    'eqeqeq': [ERROR, 'allow-null'],
-    'indent': OFF,
+    eqeqeq: [ERROR, 'allow-null'],
+    indent: OFF,
     'jsx-quotes': [ERROR, 'prefer-double'],
     'keyword-spacing': [ERROR, {after: true, before: true}],
     'no-bitwise': OFF,
@@ -51,9 +46,9 @@ module.exports = {
     'no-shadow': ERROR,
     'no-unused-expressions': ERROR,
     'no-unused-vars': [ERROR, {args: 'none'}],
-    'no-use-before-define': [ERROR, {functions: false, variables: false}],
+    'no-use-before-define': OFF,
     'no-useless-concat': OFF,
-    'quotes': [ERROR, 'single', {avoidEscape: true, allowTemplateLiterals: true }],
+    quotes: [ERROR, 'single', {avoidEscape: true, allowTemplateLiterals: true}],
     'space-before-blocks': ERROR,
     'space-before-function-paren': OFF,
     'valid-typeof': [ERROR, {requireStringLiterals: true}],
@@ -65,6 +60,12 @@ module.exports = {
     'no-var': ERROR,
     strict: ERROR,
 
+    // Enforced by Prettier
+    // TODO: Prettier doesn't handle long strings or long comments. Not a big
+    // deal. But I turned it off because loading the plugin causes some obscure
+    // syntax error and it didn't seem worth investigating.
+    'max-len': OFF,
+
     // React & JSX
     // Our transforms set this automatically
     'react/jsx-boolean-value': [ERROR, 'always'],
@@ -78,7 +79,10 @@ module.exports = {
     'react/react-in-jsx-scope': ERROR,
     'react/self-closing-comp': ERROR,
     // We don't care to do this
-    'react/jsx-wrap-multilines': [ERROR, {declaration: false, assignment: false}],
+    'react/jsx-wrap-multilines': [
+      ERROR,
+      {declaration: false, assignment: false},
+    ],
 
     // Prevent for...of loops because they require a Symbol polyfill.
     // You can disable this rule for code that isn't shipped (e.g. build scripts and tests).
@@ -112,6 +116,7 @@ module.exports = {
       files: esNextPaths,
       parser: 'babel-eslint',
       parserOptions: {
+        ecmaVersion: 8,
         sourceType: 'module',
       },
       rules: {
@@ -124,14 +129,14 @@ module.exports = {
       rules: {
         // https://github.com/jest-community/eslint-plugin-jest
         'jest/no-focused-tests': ERROR,
-      }
+      },
     },
     {
       files: ['packages/react-native-renderer/**/*.js'],
       globals: {
         nativeFabricUIManager: true,
-      }
-    }
+      },
+    },
   ],
 
   globals: {

diff --git a/fixtures/dom/src/components/fixtures/suspense/index.js b/fixtures/dom/src/components/fixtures/suspense/index.js
@@ -46,15 +46,15 @@ class SuspendyTreeChild extends React.Component {
 
   render() {
     return (
-      <React.Fragment>
+      <>
         <Suspense fallback={<div>(display: none)</div>}>
           <div>
             <AsyncStep text={`${this.state.step} + ${this.id}`} ms={500} />
             {this.props.children}
           </div>
         </Suspense>
         <button onClick={this.increment}>Hide</button>
-      </React.Fragment>
+      </>
     );
   }
 }
@@ -86,22 +86,22 @@ class SuspendyTree extends React.Component {
   };
   render() {
     return (
-      <React.Fragment>
+      <>
         <div ref={this.parentContainer}>
           <div ref={this.container} />
         </div>
         <div>
           {this.container.current !== null
             ? ReactDOM.createPortal(
-                <React.Fragment>
+                <>
                   <SuspendyTreeChild>{this.props.children}</SuspendyTreeChild>
                   <button onClick={this.removeAndRestore}>Remove</button>
-                </React.Fragment>,
+                </>,
                 this.container.current
               )
             : null}
         </div>
-      </React.Fragment>
+      </>
     );
   }
 }

diff --git a/package.json b/package.json
@@ -45,12 +45,12 @@
     "cross-env": "^5.1.1",
     "danger": "^3.0.4",
     "error-stack-parser": "^2.0.2",
-    "eslint": "^4.1.0",
+    "eslint": "^6.1.0",
     "eslint-config-fbjs": "^1.1.1",
-    "eslint-plugin-babel": "^3.3.0",
     "eslint-plugin-flowtype": "^2.25.0",
     "eslint-plugin-jest": "^21.6.1",
     "eslint-plugin-no-for-of-loops": "^1.0.0",
+    "eslint-plugin-babel": "^5.3.0",
     "eslint-plugin-react": "^6.7.1",
     "eslint-plugin-react-internal": "link:./scripts/eslint-rules",
     "fbjs-scripts": "^0.8.3",

diff --git a/packages/react-dom/src/__tests__/ReactDOMFiber-test.js b/packages/react-dom/src/__tests__/ReactDOMFiber-test.js
@@ -178,11 +178,11 @@ describe('ReactDOMFiber', () => {
 
   it('renders an empty fragment', () => {
     const Div = () => <div />;
-    const EmptyFragment = () => <React.Fragment />;
+    const EmptyFragment = () => <></>;
     const NonEmptyFragment = () => (
-      <React.Fragment>
+      <>
         <Div />
-      </React.Fragment>
+      </>
     );
 
     ReactDOM.render(<EmptyFragment />, container);
@@ -475,10 +475,10 @@ describe('ReactDOMFiber', () => {
         return (
           <div>
             {this.state.show && (
-              <React.Fragment>
+              <>
                 {ReactDOM.createPortal(null, portalContainer)}
                 <div>child</div>
-              </React.Fragment>
+              </>
             )}
             <div>parent</div>
           </div>

diff --git a/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.internal.js
@@ -581,11 +581,11 @@ describe('ReactDOMFiberAsync', () => {
       }
 
       root.render(
-        <React.Fragment>
+        <>
           <Text text="A" />
           <Text text="B" />
           <Text text="C" />
-        </React.Fragment>,
+        </>,
       );
 
       // Nothing should have rendered yet

diff --git a/packages/react-dom/src/__tests__/ReactDOMHooks-test.js b/packages/react-dom/src/__tests__/ReactDOMHooks-test.js
@@ -82,10 +82,10 @@ describe('ReactDOMHooks', () => {
       });
 
       return (
-        <React.Fragment>
+        <>
           <input ref={inputRef} onInput={handleInput} />
           <label ref={labelRef}>{text}</label>
-        </React.Fragment>
+        </>
       );
     };
 
@@ -115,10 +115,10 @@ describe('ReactDOMHooks', () => {
       });
 
       return (
-        <React.Fragment>
+        <>
           <input ref={inputRef} onInput={handleInput} />
           <label ref={labelRef}>{text}</label>
-        </React.Fragment>
+        </>
       );
     };
 

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationClassContextType-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationClassContextType-test.js
@@ -240,12 +240,12 @@ describe('ReactDOMServerIntegration', () => {
                   </Theme.Provider>
                   <LanguageConsumer>
                     {language => (
-                      <React.Fragment>
+                      <>
                         <ThemeConsumer>
                           {theme => <div id="theme3">{theme}</div>}
                         </ThemeConsumer>
                         <div id="language2">{language}</div>
-                      </React.Fragment>
+                      </>
                     )}
                   </LanguageConsumer>
                 </Theme.Provider>

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationFragment-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationFragment-test.js
@@ -42,9 +42,9 @@ describe('ReactDOMServerIntegration', () => {
   describe('React.Fragment', () => {
     itRenders('a fragment with one child', async render => {
       let e = await render(
-        <React.Fragment>
+        <>
           <div>text1</div>
-        </React.Fragment>,
+        </>,
       );
       let parent = e.parentNode;
       expect(parent.childNodes[0].tagName).toBe('DIV');
@@ -56,19 +56,19 @@ describe('ReactDOMServerIntegration', () => {
       };
       let Footer = props => {
         return (
-          <React.Fragment>
+          <>
             <h2>footer</h2>
             <h3>about</h3>
-          </React.Fragment>
+          </>
         );
       };
       let e = await render(
-        <React.Fragment>
+        <>
           <div>text1</div>
           <span>text2</span>
           <Header />
           <Footer />
-        </React.Fragment>,
+        </>,
       );
       let parent = e.parentNode;
       expect(parent.childNodes[0].tagName).toBe('DIV');
@@ -80,21 +80,21 @@ describe('ReactDOMServerIntegration', () => {
 
     itRenders('a nested fragment', async render => {
       let e = await render(
-        <React.Fragment>
-          <React.Fragment>
+        <>
+          <>
             <div>text1</div>
-          </React.Fragment>
+          </>
           <span>text2</span>
-          <React.Fragment>
-            <React.Fragment>
-              <React.Fragment>
+          <>
+            <>
+              <>
                 {null}
                 <p />
-              </React.Fragment>
+              </>
               {false}
-            </React.Fragment>
-          </React.Fragment>
-        </React.Fragment>,
+            </>
+          </>
+        </>,
       );
       let parent = e.parentNode;
       expect(parent.childNodes[0].tagName).toBe('DIV');

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationNewContext-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationNewContext-test.js
@@ -270,12 +270,12 @@ describe('ReactDOMServerIntegration', () => {
                   </Theme.Provider>
                   <Language.Consumer>
                     {language => (
-                      <React.Fragment>
+                      <>
                         <Theme.Consumer>
                           {theme => <div id="theme3">{theme}</div>}
                         </Theme.Consumer>
                         <div id="language2">{language}</div>
-                      </React.Fragment>
+                      </>
                     )}
                   </Language.Consumer>
                 </Theme.Provider>

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -157,10 +157,10 @@ describe('ReactDOMServerPartialHydration', () => {
         throw promise;
       } else {
         return (
-          <React.Fragment>
+          <>
             <div>Middle</div>
             Some text
-          </React.Fragment>
+          </>
         );
       }
     }
@@ -1022,12 +1022,12 @@ describe('ReactDOMServerPartialHydration', () => {
         <div>
           <Suspense
             fallback={
-              <React.Fragment>
+              <>
                 <Suspense fallback="Loading...">
                   <Child />
                 </Suspense>
                 <span>Inner Sibling</span>
-              </React.Fragment>
+              </>
             }>
             <Child />
           </Suspense>

diff --git a/packages/react-reconciler/src/__tests__/ReactBatchedMode-test.internal.js b/packages/react-reconciler/src/__tests__/ReactBatchedMode-test.internal.js
@@ -53,11 +53,11 @@ describe('ReactBatchedMode', () => {
     const root = ReactNoop.createSyncRoot();
 
     root.render(
-      <React.Fragment>
+      <>
         <Text text="A" />
         <Text text="B" />
         <Text text="C" />
-      </React.Fragment>,
+      </>,
     );
 
     // Nothing should have rendered yet
@@ -112,11 +112,11 @@ describe('ReactBatchedMode', () => {
     expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
     expect(Scheduler).toFlushExpired(['A', 'B', 'C']);
     expect(root).toMatchRenderedOutput(
-      <React.Fragment>
+      <>
         <span>A</span>
         <span>B</span>
         <span>C</span>
-      </React.Fragment>,
+      </>,
     );
   });
 
@@ -133,10 +133,10 @@ describe('ReactBatchedMode', () => {
     const foo1 = React.createRef(null);
     const foo2 = React.createRef(null);
     root.render(
-      <React.Fragment>
+      <>
         <Foo label="A" ref={foo1} />
         <Foo label="B" ref={foo2} />
-      </React.Fragment>,
+      </>,
     );
 
     // Mount