Fix use real eslint plugin react refresh config

package.json

@@ -67,7 +67,7 @@
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-compiler": "19.0.0-beta-df7b47d-20241124",
     "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "0.4.14",
+    "eslint-plugin-react-refresh": "0.4.16",
     "eslint-plugin-regexp": "^2.7.0",
     "eslint-plugin-storybook": "0.11.1",
     "eslint-plugin-testing-library": "^7.0.0",

src/configs/react.ts

@@ -17,7 +17,7 @@ export const reactConfig = async () => {
     interopDefault(import("eslint-plugin-react")),
     interopDefault(import("eslint-plugin-jsx-a11y")),
     import("eslint-plugin-react-hooks"),
-    import("eslint-plugin-react-refresh"),
+    interopDefault(import("eslint-plugin-react-refresh")),
     interopDefault(import("eslint-plugin-react-compiler")),
   ]);
 

src/rules.gen.d.ts

@@ -9802,9 +9802,10 @@ type ReactHooksExhaustiveDeps = []|[{
 }]
 // ----- react-refresh/only-export-components -----
 type ReactRefreshOnlyExportComponents = []|[{
+  allowExportNames?: string[]
   allowConstantExport?: boolean
+  customHOCs?: string[]
   checkJS?: boolean
-  allowExportNames?: string[]
 }]
 // ----- react/boolean-prop-naming -----
 type ReactBooleanPropNaming = []|[{

src/rules/__snapshots__/react.spec.ts.snap

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`should create react rules 1`] = `
+exports[`reactRules > should create react rules 1`] = `
 {
   "jsx-a11y/alt-text": "error",
   "jsx-a11y/anchor-ambiguous-text": "off",
@@ -194,7 +194,8 @@ exports[`should create react rules 1`] = `
   "react-refresh/only-export-components": [
     "warn",
     {
-      "allowConstantExport": true,
+      "allowConstantExport": undefined,
+      "allowExportNames": [],
     },
   ],
   "react/boolean-prop-naming": "off",

src/rules/react.spec.ts

@@ -1,5 +1,53 @@
+import { isPackageExists } from "local-pkg";
+
 import { reactRules } from "./react";
 
-test("should create react rules", async () => {
-  await expect(reactRules()).resolves.toMatchSnapshot();
+vi.mock("local-pkg");
+
+describe("reactRules", () => {
+  it("should create react rules", async () => {
+    await expect(reactRules()).resolves.toMatchSnapshot();
+  });
+
+  it("should add allowExportNames for nextjs", async () => {
+    vi.mocked(isPackageExists).mockImplementation((name) => {
+      return name === "next";
+    });
+
+    const rules = await reactRules();
+
+    const allowExportNames =
+      rules["react-refresh/only-export-components"][1].allowExportNames;
+
+    expect(allowExportNames).toMatchInlineSnapshot(`
+      [
+        "dynamic",
+        "dynamicParams",
+        "revalidate",
+        "fetchCache",
+        "runtime",
+        "preferredRegion",
+        "maxDuration",
+        "config",
+        "generateStaticParams",
+        "metadata",
+        "generateMetadata",
+        "viewport",
+        "generateViewport",
+      ]
+    `);
+  });
+
+  it("should only enable allowConstantExport for vite", async () => {
+    vi.mocked(isPackageExists).mockImplementation((name) => {
+      return name === "vite";
+    });
+
+    const rules = await reactRules();
+
+    const allowConstantExport =
+      rules["react-refresh/only-export-components"][1].allowConstantExport;
+
+    expect(allowConstantExport).toBeTruthy();
+  });
 });

src/rules/react.ts

@@ -1,13 +1,32 @@
 import type { Rules } from "../types";
 
+import { hasNext, hasVite } from "../utils/has-dependency";
 import { interopDefault } from "../utils/interop-default";
 import { normalizeRuleEntries } from "../utils/normalize-rule-entries";
 
+const nextAllowedExportNames = [
+  "dynamic",
+  "dynamicParams",
+  "revalidate",
+  "fetchCache",
+  "runtime",
+  "preferredRegion",
+  "maxDuration",
+  "config",
+  "generateStaticParams",
+  "metadata",
+  "generateMetadata",
+  "viewport",
+  "generateViewport",
+];
+
 export const reactRules = async () => {
   const [reactPlugin, jsxA11yPlugin] = await Promise.all([
     interopDefault(import("eslint-plugin-react")),
     interopDefault(import("eslint-plugin-jsx-a11y")),
   ]);
+  const isUsingNext = hasNext();
+  const isUsingVite = hasVite();
 
   return {
     ...jsxA11yPlugin.configs.recommended.rules,
@@ -18,7 +37,10 @@ export const reactRules = async () => {
     "react-hooks/rules-of-hooks": "error",
     "react-refresh/only-export-components": [
       "warn",
-      { allowConstantExport: true },
+      {
+        allowConstantExport: isUsingVite,
+        allowExportNames: isUsingNext ? nextAllowedExportNames : [],
+      },
     ],
     "react/boolean-prop-naming": "off", // revisit
     "react/button-has-type": "error",

src/stubs.d.ts

@@ -37,14 +37,6 @@ declare module "eslint-plugin-jsx-a11y" {
   export default plugin;
 }
 
-declare module "eslint-plugin-react-refresh" {
-  import type { ESLint } from "eslint";
-
-  const plugin: ESLint.Plugin;
-
-  export default plugin;
-}
-
 // TODO: remove when https://github.com/eslint-community/eslint-plugin-eslint-comments/issues/214 is resolved.
 declare module "@eslint-community/eslint-plugin-eslint-comments/configs" {
   import type { Linter } from "eslint";

src/utils/has-dependency.ts

@@ -43,3 +43,11 @@ export const hasPlaywright = () => {
 export const hasStorybook = () => {
   return isPackageExists("storybook");
 };
+
+export const hasNext = () => {
+  return isPackageExists("next");
+};
+
+export const hasVite = () => {
+  return isPackageExists("vite");
+};