refactor(rules/style): use Program:exit to improve rule logic (#2)

Author: marcalexiei

package.json

@@ -5,13 +5,16 @@
   "description": "ESLint plugin to ensure consistent react imports and relative usage",
   "main": "index.js",
   "scripts": {
+    "build": "tsc -p tsconfig.build.json",
     "test": "vitest"
   },
   "keywords": [],
   "author": "Marco Pasqualetti @marcalexiei",
   "license": "MIT",
   "packageManager": "pnpm@9.9.0+sha512.60c18acd138bff695d339be6ad13f7e936eea6745660d4cc4a776d5247c540d0edee1a563695c183a66eb917ef88f2b4feb1fc25f32a7adcadc7aaf3438e99c1",
   "devDependencies": {
+    "@types/estree": "1.0.5",
+    "@types/json-schema": "7.0.15",
     "@typescript-eslint/parser": "8.4.0",
     "eslint": "9.10.0",
     "typescript": "5.5.4",

pnpm-lock.yaml

@@ -0,0 +1,116 @@
+import type { Rule } from "eslint";
+import type * as ESTree from "estree";
+
+interface StyleRuleOptions {
+  syntax: "default" | "namespace";
+}
+
+const styleRule: Rule.RuleModule = {
+  meta: {
+    type: "suggestion",
+    fixable: "code",
+    docs: {
+      description: [
+        "Enforces React import style across your code.",
+        "Can be customized to use default or namespace import.",
+        "By default converts exports using namespace import",
+      ].join(" "),
+    },
+    messages: {
+      wrongImport: "You should import React using {{syntax}} import syntax",
+      multipleImport:
+        "React was already imported. This import should be removed when using {{syntax}} import",
+    },
+    schema: [
+      {
+        type: "object",
+        properties: {
+          syntax: { enum: ["default", "namespace"] },
+        },
+        additionalProperties: false,
+      },
+    ],
+  },
+  create(context) {
+    const [{ syntax = "namespace" } = {}] = context.options as [
+      StyleRuleOptions?
+    ];
+
+    const invalidImportTypes: Array<string> = [
+      "ImportSpecifier",
+      /**
+       * Based on {@link StyleRuleOptions.syntax} we integrate the array with the unwanted import syntax:
+       * If syntax is `default` we should exclude `namespace` imports and vice-versa.
+       */
+      syntax === "default"
+        ? "ImportNamespaceSpecifier"
+        : "ImportDefaultSpecifier",
+    ];
+
+    /**
+     * Variable used to store all react imports not following the required syntax
+     */
+    const reactInvalidImports: Array<ESTree.ImportDeclaration> = [];
+
+    return {
+      ImportDeclaration: (node) => {
+        const { source, specifiers } = node;
+
+        /** @todo might change selector to something like ImportDeclaration[source.value="react"] */
+        if (source.value !== "react") return;
+
+        if (specifiers.some((it) => invalidImportTypes.includes(it.type))) {
+          reactInvalidImports.push(node);
+        }
+      },
+
+      "Program:exit": () => {
+        /** Check if there is at least one invalid import */
+        if (!reactInvalidImports.length) return;
+
+        const [firstImport, ...otherReactImports] = reactInvalidImports;
+
+        /** Replace the first import with the right import based on options */
+        context.report({
+          messageId: "wrongImport",
+          data: { syntax },
+          loc: { ...firstImport.loc! },
+          fix(fixer) {
+            /** Cycle all imports to understand if it should become a import type */
+            const importType = reactInvalidImports.every(
+              (importNode) =>
+                "importKind" in importNode && importNode.importKind === "type"
+            )
+              ? "type"
+              : "";
+
+            const correctImportSyntax =
+              syntax === "default" ? "React" : "* as React";
+
+            /** @todo maybe there is a more smart method working directly on AST node to do this */
+            const newImport = `import ${importType} ${correctImportSyntax} from 'react';`;
+
+            return fixer.replaceText(
+              firstImport,
+              newImport.replace(/\s+/g, " ")
+            );
+          },
+        });
+
+        /** All additional imports can be removed */
+        for (const reactImportNode of otherReactImports) {
+          context.report({
+            messageId: "multipleImport",
+            data: { syntax },
+            loc: { ...reactImportNode.loc! },
+            fix(fixer) {
+              return fixer.remove(reactImportNode);
+            },
+          });
+        }
+      },
+    };
+  },
+};
+
+export default styleRule;

src/style.spec.ts src/rules/style.spec.ts

@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
     "module": "NodeNext",
-    "moduleResolution": "NodeNext"
+    "moduleResolution": "NodeNext",
+    "strict": true
   }
 }