Catch components in entrypoints or with non-component exports [publish]

Author: ArnaudBarre

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 0.3.0
+
+Report an error when a file that contains components that can't be fast-refreshed because:
+
+- There are no export (entrypoint)
+- Exports are not components
+
 ## 0.2.1
 
 Doc only: Update limitations section README.md

README.md

@@ -57,6 +57,16 @@ export default function () {}
 export * from "./foo";
 ```
 
+```jsx
+const Tab = () => {};
+export const tabs = [<Tab />, <Tab />];
+```
+
+```jsx
+const App = () => {};
+createRoot(document.getElementById("root")).render(<App />);
+```
+
 ## Pass
 
 ```jsx
@@ -69,3 +79,8 @@ export default function Foo() {
 const foo = () => {};
 export const Bar = () => <></>;
 ```
+
+```jsx
+import { App } from "./App";
+createRoot(document.getElementById("root")).render(<App />);
+```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-react-refresh",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "license": "MIT",
   "scripts": {
     "build": "scripts/bundle.ts",

src/only-export-components.ts

@@ -1,8 +1,18 @@
 import { TSESLint } from "@typescript-eslint/utils";
 import { TSESTree } from "@typescript-eslint/types";
 
+const possibleReactExportRE = /^[A-Z][a-zA-Z]*$/;
+// Only letters, starts with uppercase and at least one lowercase
+// This can lead to some false positive (ex: `const CMS = () => <></>`)
+// But allow to catch `export const CONSTANT = 3`
+const strictReactExportRE = /^[A-Z][a-zA-Z]*[a-z]+[a-zA-Z]*$/;
+
 export const onlyExportComponents: TSESLint.RuleModule<
-  "exportAll" | "namedExport" | "anonymousExport"
+  | "exportAll"
+  | "namedExport"
+  | "anonymousExport"
+  | "noExport"
+  | "localComponents"
 > = {
   meta: {
     messages: {
@@ -12,6 +22,10 @@ export const onlyExportComponents: TSESLint.RuleModule<
         "Fast refresh only works when a file only export components. Use a new file to share constant or functions between components.",
       anonymousExport:
         "Fast refresh can't handle anonymous component. Add a name to your export.",
+      localComponents:
+        "Fast refresh only works when a file only export components. Move your component(s) to a separate file.",
+      noExport:
+        "Fast refresh only works when a file has exports. Move your component(s) to a separate file.",
     },
     type: "problem",
     schema: [],
@@ -22,67 +36,102 @@ export const onlyExportComponents: TSESLint.RuleModule<
 
     return {
       Program(program) {
+        let hasExports = false;
         let mayHaveReactExport = false;
+        const localComponents: TSESTree.Identifier[] = [];
         const nonComponentExport: TSESTree.BindingName[] = [];
 
-        const handleIdentifier = (identifierNode: TSESTree.BindingName) => {
+        const handleLocalIdentifier = (
+          identifierNode: TSESTree.BindingName,
+        ) => {
+          if (identifierNode.type !== "Identifier") return;
+          if (possibleReactExportRE.test(identifierNode.name)) {
+            localComponents.push(identifierNode);
+          }
+        };
+
+        const handleExportIdentifier = (
+          identifierNode: TSESTree.BindingName,
+        ) => {
           if (identifierNode.type !== "Identifier") {
             nonComponentExport.push(identifierNode);
             return;
           }
-          if (/^[A-Z][a-zA-Z]*$/.test(identifierNode.name)) {
+          if (
+            !mayHaveReactExport &&
+            possibleReactExportRE.test(identifierNode.name)
+          ) {
             mayHaveReactExport = true;
           }
-          // Only letters, starts with uppercase and at least one lowercase
-          // This can lead to some false positive (ex: `const CMS = () => <></>`)
-          // But allow to catch `export const CONSTANT = 3`
-          if (!/^[A-Z][a-zA-Z]*[a-z]+[a-zA-Z]*$/.test(identifierNode.name)) {
+          if (!strictReactExportRE.test(identifierNode.name)) {
             nonComponentExport.push(identifierNode);
           }
         };
 
         const handleExportDeclaration = (node: TSESTree.ExportDeclaration) => {
           if (node.type === "VariableDeclaration") {
             for (const variable of node.declarations) {
-              handleIdentifier(variable.id);
+              handleExportIdentifier(variable.id);
             }
           } else if (node.type === "FunctionDeclaration") {
             if (node.id === null) {
               context.report({ messageId: "anonymousExport", node });
             } else {
-              handleIdentifier(node.id);
+              handleExportIdentifier(node.id);
             }
           }
         };
 
         for (const node of program.body) {
           if (node.type === "ExportAllDeclaration") {
+            hasExports = true;
             context.report({ messageId: "exportAll", node });
           } else if (node.type === "ExportDefaultDeclaration") {
+            hasExports = true;
             if (
               node.declaration.type === "VariableDeclaration" ||
               node.declaration.type === "FunctionDeclaration"
             ) {
               handleExportDeclaration(node.declaration);
             }
+            if (node.declaration.type === "Identifier") {
+              handleExportIdentifier(node.declaration);
+            }
             if (
               node.declaration.type === "ArrowFunctionExpression" &&
               !node.declaration.id
             ) {
               context.report({ messageId: "anonymousExport", node });
             }
           } else if (node.type === "ExportNamedDeclaration") {
+            hasExports = true;
             if (node.declaration) handleExportDeclaration(node.declaration);
             for (const specifier of node.specifiers) {
-              handleIdentifier(specifier.exported);
+              handleExportIdentifier(specifier.exported);
+            }
+          } else if (node.type === "VariableDeclaration") {
+            for (const variable of node.declarations) {
+              handleLocalIdentifier(variable.id);
             }
+          } else if (node.type === "FunctionDeclaration") {
+            handleLocalIdentifier(node.id);
           }
         }
 
-        if (!mayHaveReactExport) return;
-
-        for (const node of nonComponentExport) {
-          context.report({ messageId: "namedExport", node });
+        if (hasExports) {
+          if (mayHaveReactExport) {
+            for (const node of nonComponentExport) {
+              context.report({ messageId: "namedExport", node });
+            }
+          } else if (localComponents.length) {
+            for (const node of localComponents) {
+              context.report({ messageId: "localComponents", node });
+            }
+          }
+        } else if (localComponents.length) {
+          for (const node of localComponents) {
+            context.report({ messageId: "noExport", node });
+          }
         }
       },
     };

src/tests.ts

@@ -3,7 +3,11 @@ import { RuleTester } from "eslint";
 import { onlyExportComponents } from "./only-export-components";
 
 const ruleTester = new RuleTester({
-  parserOptions: { sourceType: "module", ecmaVersion: 2018 },
+  parserOptions: {
+    sourceType: "module",
+    ecmaVersion: 2018,
+    ecmaFeatures: { jsx: true },
+  },
 });
 
 const valid = [
@@ -97,6 +101,16 @@ const invalid = [
     code: "export const CONSTANT = 3; export const Foo = () => {};",
     errorId: "namedExport",
   },
+  {
+    name: "Unexported component and export",
+    code: "const Tab = () => {}; export const tabs = [<Tab />, <Tab />];",
+    errorId: "localComponents",
+  },
+  {
+    name: "Unexported component and no export",
+    code: "const App = () => {}; createRoot(document.getElementById('root')).render(<App />);",
+    errorId: "noExport",
+  },
 ];
 
 let failedTests = 0;