Add detection for ES6 via import/export and some other test cases.

jsx-eslint · Apr 18, 2022 · fe84e80 · fe84e80
1 parent c9b286f
commit fe84e80
Show file tree

Hide file tree

Showing 2 changed files with 116 additions and 4 deletions.
diff --git a/lib/rules/function-component-definition.js b/lib/rules/function-component-definition.js
@@ -217,7 +217,7 @@ module.exports = {
     // --------------------------------------------------------------------------
     const validatePairs = [];
     let hasEs6OrJsx = false;
-    return {
+    const astHandlers = {
       FunctionDeclaration(node) {
         validatePairs.push([node, 'function-declaration']);
       },
@@ -230,13 +230,27 @@ module.exports = {
       VariableDeclaration(node) {
         hasEs6OrJsx = hasEs6OrJsx || node.kind === 'const' || node.kind === 'let';
       },
-      JSXElement() {
-        hasEs6OrJsx = true;
-      },
       'Program:exit'() {
         if (hasEs6OrJsx) fileVarType = 'const';
         validatePairs.forEach((pair) => validate(pair[0], pair[1]));
       },
     };
+    // if any of the following are detected, assume es6
+    [
+      'ImportDeclaration',
+      'ExportNamedDeclaration',
+      'ExportDefaultDeclaration',
+      'ExportAllDeclaration',
+      'ExportSpecifier',
+      'ExportDefaultSpecifier',
+      'JSXElement',
+      'TSExportAssignment',
+      'TSImportEqualsDeclaration',
+    ].forEach((es6Flag) => {
+      astHandlers[es6Flag] = () => {
+        hasEs6OrJsx = true;
+      };
+    });
+    return astHandlers;
   }),
 };
diff --git a/tests/lib/rules/function-component-definition.js b/tests/lib/rules/function-component-definition.js
@@ -479,6 +479,56 @@ ruleTester.run('function-component-definition', rule, {
       options: [{ namedComponents: 'function-expression' }],
       errors: [{ messageId: 'function-expression' }],
     },
+    {
+      code: `
+        let Hello = (props) => {
+          return <div/>;
+        }
+      `,
+      output: `
+        let Hello = function(props) {
+          return <div/>;
+        }
+      `,
+      options: [{ namedComponents: 'function-expression' }],
+      errors: [{ messageId: 'function-expression' }],
+    },
+    {
+      code: `
+        let Hello;
+        Hello = (props) => {
+          return <div/>;
+        }
+      `,
+      output: `
+        let Hello;
+        Hello = function(props) {
+          return <div/>;
+        }
+      `,
+      options: [{ namedComponents: 'function-expression' }],
+      errors: [{ messageId: 'function-expression' }],
+    },
+    {
+      code: `
+        let Hello = (props) => {
+          return <div/>;
+        }
+        Hello = function(props) {
+          return <span/>;
+        }
+      `,
+      output: `
+        let Hello = function(props) {
+          return <div/>;
+        }
+        Hello = function(props) {
+          return <span/>;
+        }
+      `,
+      options: [{ namedComponents: 'function-expression' }],
+      errors: [{ messageId: 'function-expression' }],
+    },
     {
       code: `
         function Hello(props) {
@@ -619,6 +669,54 @@ ruleTester.run('function-component-definition', rule, {
       errors: [{ messageId: 'function-expression' }],
       features: ['types'],
     },
+    {
+      code: `
+        import * as React from 'react';
+        function Hello(props: Test) {
+          return React.createElement('div');
+        }
+      `,
+      output: `
+        import * as React from 'react';
+        const Hello = function(props: Test) {
+          return React.createElement('div');
+        }
+      `,
+      options: [{ namedComponents: 'function-expression' }],
+      errors: [{ messageId: 'function-expression' }],
+      features: ['types'],
+    },
+    {
+      code: `
+        export function Hello(props: Test) {
+          return React.createElement('div');
+        }
+      `,
+      output: `
+        export const Hello = function(props: Test) {
+          return React.createElement('div');
+        }
+      `,
+      options: [{ namedComponents: 'function-expression' }],
+      errors: [{ messageId: 'function-expression' }],
+      features: ['types'],
+    },
+    {
+      code: `
+        function Hello(props) {
+          return React.createElement('div');
+        }
+        export default Hello;
+      `,
+      output: `
+        const Hello = function(props) {
+          return React.createElement('div');
+        }
+        export default Hello;
+      `,
+      options: [{ namedComponents: 'function-expression' }],
+      errors: [{ messageId: 'function-expression' }],
+    },
     {
       code: `
         var Hello = (props: Test) => {