Initial commit [publish]

Author: ArnaudBarre

.github/workflows/publish.yml

@@ -0,0 +1,22 @@
+name: Publish to npm
+on:
+  push:
+    branches:
+      - main
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    if: ${{ contains(github.event.head_commit.message, '[publish]') }}
+    steps:
+      - uses: actions/checkout@v2
+      - run: yarn install --frozen-lockfile
+      - run: yarn build
+      - run: yarn test
+      # Setup .npmrc file to publish to npm
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '16.x'
+          registry-url: 'https://registry.npmjs.org'
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -0,0 +1,3 @@
+.idea/
+node_modules/
+src/*.js

.npmignore

@@ -0,0 +1,3 @@
+*.ts
+tsconfig.json
+test*

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Arnaud Barré (https://github.com/ArnaudBarre)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,55 @@
+# eslint-plugin-react-refresh
+
+Validate that your components can safely be updated with fast refresh.
+
+⚠️ To avoid false positive, this plugin is only applied on `tsx` & `jsx` files.
+
+## Installation
+
+```sh
+npm i -D eslint-plugin-react-refresh
+```
+
+## Usage
+
+```json
+{
+  "plugins": ["react-refresh"],
+  "rules": {
+    "react-refresh/only-export-components": "warn"
+  }
+}
+```
+
+## Fail
+
+```jsx
+export const foo = () => {};
+export const Bar = () => <></>;
+```
+
+```jsx
+export const CONSTANT = 3;
+export const Foo = () => <></>;
+```
+
+```jsx
+export default function () {}
+```
+
+```jsx
+export * from "./foo";
+```
+
+## Pass
+
+```js
+export default function Foo() {
+  return <></>;
+}
+```
+
+```js
+const foo = () => {};
+export const Bar = () => <></>;
+```

package.json

@@ -0,0 +1,33 @@
+{
+  "name": "eslint-plugin-react-refresh",
+  "description": "Validate that your components can safely be updated with fast refresh",
+  "version": "0.1.0",
+  "license": "MIT",
+  "author": "Arnaud Barré (https://github.com/ArnaudBarre)",
+  "main": "src/index.js",
+  "keywords": [
+    "eslint",
+    "eslint-plugin",
+    "react",
+    "react-refresh",
+    "fast refresh"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "test": "node src/tests.js"
+  },
+  "prettier": {
+    "trailingComma": "all"
+  },
+  "peerDependencies": {
+    "eslint": ">=7"
+  },
+  "devDependencies": {
+    "@types/eslint": "^8.4.0",
+    "@types/node": "^17.0.10",
+    "@typescript-eslint/experimental-utils": "^5.10.0",
+    "eslint": "^8.7.0",
+    "prettier": "^2.5.1",
+    "typescript": "^4.5.5"
+  }
+}

src/index.ts

@@ -0,0 +1,3 @@
+export const rules = {
+  "only-export-components": require("./only-export-components.ts").rule,
+};

src/only-export-components.ts

@@ -0,0 +1,90 @@
+import { TSESLint } from "@typescript-eslint/experimental-utils";
+import { TSESTree } from "@typescript-eslint/types";
+import { ExportDeclaration } from "@typescript-eslint/types/dist/ast-spec";
+
+export const rule: TSESLint.RuleModule<
+  "exportAll" | "namedExport" | "anonymousExport"
+> = {
+  meta: {
+    messages: {
+      exportAll:
+        "This rule can't verify that `export *` only export components",
+      namedExport:
+        "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.",
+    },
+    type: "problem",
+    schema: [],
+  },
+  create: (context) => {
+    if (!context.getFilename().endsWith("x")) return {};
+
+    return {
+      Program(program) {
+        let mayHaveReactExport = false;
+        const nonComponentExport: TSESTree.BindingName[] = [];
+
+        const handleIdentifier = (identifierNode: TSESTree.BindingName) => {
+          if (identifierNode.type !== "Identifier") {
+            nonComponentExport.push(identifierNode);
+            return;
+          }
+          if (/^[A-Z][a-zA-Z]*$/.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)) {
+            nonComponentExport.push(identifierNode);
+          }
+        };
+
+        const handleExportDeclaration = (node: ExportDeclaration) => {
+          if (node.type === "VariableDeclaration") {
+            for (const variable of node.declarations) {
+              handleIdentifier(variable.id);
+            }
+          } else if (node.type === "FunctionDeclaration") {
+            if (node.id === null) {
+              context.report({ messageId: "anonymousExport", node });
+            } else {
+              handleIdentifier(node.id);
+            }
+          }
+        };
+
+        for (const node of program.body) {
+          if (node.type === "ExportAllDeclaration") {
+            context.report({ messageId: "exportAll", node });
+          } else if (node.type === "ExportDefaultDeclaration") {
+            if (
+              node.declaration.type === "VariableDeclaration" ||
+              node.declaration.type === "FunctionDeclaration"
+            ) {
+              handleExportDeclaration(node.declaration);
+            }
+            if (
+              node.declaration.type === "ArrowFunctionExpression" &&
+              !node.declaration.id
+            ) {
+              context.report({ messageId: "anonymousExport", node });
+            }
+          } else if (node.type === "ExportNamedDeclaration") {
+            if (node.declaration) handleExportDeclaration(node.declaration);
+            for (const specifier of node.specifiers) {
+              handleIdentifier(specifier.exported);
+            }
+          }
+        }
+
+        if (!mayHaveReactExport) return;
+
+        for (const node of nonComponentExport) {
+          context.report({ messageId: "namedExport", node });
+        }
+      },
+    };
+  },
+};

src/tests.ts

@@ -0,0 +1,136 @@
+import { RuleTester } from "eslint";
+import { rule } from "./only-export-components";
+
+const ruleTester = new RuleTester({
+  parserOptions: { sourceType: "module", ecmaVersion: 2018 },
+});
+
+const valid = [
+  {
+    name: "Direct export named component",
+    code: "export function Foo() {};",
+  },
+  {
+    name: "Export named component",
+    code: "function Foo() {}; export { Foo };",
+  },
+  {
+    name: "Export default named component",
+    code: "function Foo() {}; export default Foo;",
+  },
+  {
+    name: "Direct export default named component",
+    code: "export default function Foo() {}",
+  },
+  {
+    name: "Direct export AF component",
+    code: "export const Foo = () => {};",
+  },
+  {
+    name: "Export AF component",
+    code: "const Foo = () => {}; export { Foo };",
+  },
+  {
+    name: "Default export AF component",
+    code: "const Foo = () => {}; export default Foo;",
+  },
+  {
+    name: "Two components & local variable",
+    code: "const foo = 4; export const Bar = () => {}; export const Baz = () => {};",
+  },
+  {
+    name: "Two components & local function",
+    code: "const foo = () => {}; export const Bar = () => {}; export const Baz = () => {};",
+  },
+  {
+    name: "Direct export variable",
+    code: "export const foo = 3;",
+  },
+  {
+    name: "Export variables",
+    code: "const foo = 3; const bar = 'Hello'; export { foo, bar };",
+  },
+  {
+    name: "Direct export AF",
+    code: "export const foo = () => {};",
+  },
+  {
+    name: "Direct export default AF",
+    code: "export default function foo () {};",
+  },
+];
+
+const invalid = [
+  {
+    name: "Component and function",
+    code: "export const foo = () => {}; export const Bar = () => {};",
+    errorId: "namedExport",
+  },
+  {
+    name: "Component and variable (direct export)",
+    code: "export const foo = 4; export const Bar = () => {};",
+    errorId: "namedExport",
+  },
+  {
+    name: "Component and variable",
+    code: "const foo = 4; const Bar = () => {}; export { foo, Bar };",
+    errorId: "namedExport",
+  },
+  {
+    name: "Export all",
+    code: "export * from './foo';",
+    errorId: "exportAll",
+  },
+  {
+    name: "Export default anonymous AF",
+    code: "export default () => {};",
+    errorId: "anonymousExport",
+  },
+  {
+    name: "Export default anonymous function",
+    code: "export default function () {};",
+    errorId: "anonymousExport",
+  },
+  {
+    name: "Component and constant",
+    code: "export const CONSTANT = 3; export const Foo = () => {};",
+    errorId: "namedExport",
+  },
+];
+
+let failedTests = 0;
+
+const it = (name: string, cases: Parameters<typeof ruleTester.run>[2]) => {
+  try {
+    ruleTester.run(
+      "only-export-components",
+      // @ts-ignore Mismatch between typescript-eslint and eslint
+      rule,
+      cases,
+    );
+    console.log(`${name} ✅`);
+  } catch (e) {
+    console.log(`${name} ❌`);
+    console.error(e);
+    failedTests++;
+  }
+};
+
+valid.forEach(({ name, code }) => {
+  it(name, {
+    valid: [{ filename: "Test.jsx", code }],
+    invalid: [],
+  });
+});
+
+invalid.forEach(({ name, code, errorId }) => {
+  it(name, {
+    valid: [],
+    invalid: [{ filename: "Test.jsx", code, errors: [{ messageId: errorId }] }],
+  });
+});
+
+if (failedTests) {
+  console.log(`${failedTests} tests failed`);
+  process.exit(1);
+}

tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "include": ["src"],
+  "compilerOptions": {
+    /* Target node12 */
+    "module": "CommonJS",
+    "lib": ["ES2019"],
+    "target": "ES2019",
+
+    /* Imports */
+    "moduleResolution": "node", // Allow `index` imports
+    "resolveJsonModule": true, // Allow json import
+    "forceConsistentCasingInFileNames": true, // Avoid difference in case between file name and import
+    "allowSyntheticDefaultImports": true, // Allow import fs from "fs"
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "useUnknownInCatchVariables": true
+  }
+}