Revamp logic to catch more cases [publish] (#97)

Author: ArnaudBarre

CHANGELOG.md

@@ -1,5 +1,76 @@
 # Changelog
 
+## 0.5.0
+
+### Breaking changes
+
+- The package now ships as ESM and requires ESLint 9 + node 20. Because legacy config doesn't support ESM, this requires to use [flat config](https://eslint.org/docs/latest/use/configure/migration-guide)
+- A new `reactRefresh` export is available and prefered over the default export. It's an object with two properties:
+  - `plugin`: The plugin object with the rules
+  - `configs`: An object containing configuration presets, each exposed as a function. These functions accept your custom options, merge them with sensible defaults for that config, and return the final config object.
+- `customHOCs` option was renamed to `extraHOCs`
+- Validation of HOCs calls is now more strict, you may need to add some HOCs to the `extraHOCs` option
+
+Config example:
+
+```js
+import { defineConfig } from "eslint/config";
+import { reactRefresh } from "eslint-plugin-react-refresh";
+
+export default defineConfig(
+  /* Main config */
+  reactRefresh.configs.vite({ extraHOCs: ["someLibHOC"] }),
+);
+```
+
+Config example without config:
+
+```js
+import { defineConfig } from "eslint/config";
+import { reactRefresh } from "eslint-plugin-react-refresh";
+
+export default defineConfig({
+  files: ["**/*.ts", "**/*.tsx"],
+  plugins: {
+    // other plugins
+    "react-refresh": reactRefresh.plugin,
+  },
+  rules: {
+    // other rules
+    "react-refresh/only-export-components": [
+      "warn",
+      { extraHOCs: ["someLibHOC"] },
+    ],
+  },
+});
+```
+
+### Why
+
+This version follows a revamp of the internal logic to better make the difference between random call expressions like `export const Enum = Object.keys(Record)` and actual React HOC calls like `export const MemoComponent = memo(Component)`. (fixes [#93](https://github.com/ArnaudBarre/eslint-plugin-react-refresh/issues/93))
+
+The rule now handles ternaries and patterns like `export default customHOC(props)(Component)` which makes it able to correctly support files like [this one](https://github.com/eclipse-apoapsis/ort-server/blob/ddfc624ce71b9f2ca6bad9b8c82d4c3249dd9c8b/ui/src/routes/__root.tsx) given this config:
+
+```json
+{
+  "react-refresh/only-export-components": [
+    "warn",
+    { "extraHOCs": ["createRootRouteWithContext"] }
+  ]
+}
+```
+
+> [!NOTE]
+> Actually createRoute functions from TanStack Router are not React HOCs, they return route objects that [fake to be a memoized component](https://github.com/TanStack/router/blob/8628d0189412ccb8d3a01840aa18bac8295e18c8/packages/react-router/src/route.tsx#L263) but are not. When only doing `createRootRoute({ component: Foo })`, HMR will work fine, but as soon as you add a prop to the options that is not a React component, HMR will not work. I would recommend to avoid adding any TanStack function to `extraHOCs` it you want to preserve good HMR in the long term. [Bluesky thread](https://bsky.app/profile/arnaud-barre.bsky.social/post/3ma5h5tf2sk2e).
+
+Because I'm not 100% sure this new logic doesn't introduce any false positive, this is done in a major-like version. This also give me the occasion to remove the hardcoded `connect` from the rule. If you are using `connect` from `react-redux`, you should now add it to `extraHOCs` like this:
+
+```json
+{
+  "react-refresh/only-export-components": ["warn", { "extraHOCs": ["connect"] }]
+}
+```
+
 ## 0.4.26
 
 - Revert changes to fix [#93](https://github.com/ArnaudBarre/eslint-plugin-react-refresh/issues/93) (fixes [#95](https://github.com/ArnaudBarre/eslint-plugin-react-refresh/issues/95))
@@ -73,7 +144,7 @@ export default observer(Foo);
 {
   "react-refresh/only-export-components": [
     "error",
-    { "customHOCs": ["observer"] }
+    { "extraHOCs": ["observer"] }
   ]
 }
 ```

README.md

@@ -34,11 +34,11 @@ This plugin provides a single rule, `react-refresh/only-export-components`. Ther
 
 ```js
 import { defineConfig } from "eslint/config";
-import reactRefresh from "eslint-plugin-react-refresh";
+import { reactRefresh } from "eslint-plugin-react-refresh";
 
 export default defineConfig(
   /* Main config */
-  reactRefresh.configs.recommended,
+  reactRefresh.configs.recommended(),
 );
 ```
 
@@ -48,56 +48,45 @@ This enables the `allowConstantExport` option which is supported by Vite React p
 
 ```js
 import { defineConfig } from "eslint/config";
-import reactRefresh from "eslint-plugin-react-refresh";
+import { reactRefresh } from "eslint-plugin-react-refresh";
 
 export default defineConfig(
   /* Main config */
-  reactRefresh.configs.vite,
+  reactRefresh.configs.vite(),
 );
 ```
 
-### Next config <small>(v0.4.21)</small>
+### Next config
 
 This allows exports like `fetchCache` and `revalidate` which are used in Page or Layout components and don't trigger a full page reload.
 
 ```js
 import { defineConfig } from "eslint/config";
-import reactRefresh from "eslint-plugin-react-refresh";
+import { reactRefresh } from "eslint-plugin-react-refresh";
 
 export default defineConfig(
   /* Main config */
-  reactRefresh.configs.next,
+  reactRefresh.configs.next(),
 );
 ```
 
 ### Without config
 
 ```js
 import { defineConfig } from "eslint/config";
-import reactRefresh from "eslint-plugin-react-refresh";
+import { reactRefresh } from "eslint-plugin-react-refresh";
 
 export default defineConfig({
   // in main config for TSX/JSX source files
   plugins: {
-    "react-refresh": reactRefresh,
+    "react-refresh": reactRefresh.plugin,
   },
   rules: {
     "react-refresh/only-export-components": "error",
   },
 });
 ```
 
-### Legacy config
-
-```jsonc
-{
-  "plugins": ["react-refresh"],
-  "rules": {
-    "react-refresh/only-export-components": "error",
-  },
-}
-```
-
 ## Examples
 
 These examples are from enabling `react-refresh/only-exports-components`.
@@ -152,20 +141,33 @@ These options are all present on `react-refresh/only-exports-components`.
 
 ```ts
 interface Options {
+  extraHOCs?: string[];
   allowExportNames?: string[];
   allowConstantExport?: boolean;
-  customHOCs?: string[];
   checkJS?: boolean;
 }
 
 const defaultOptions: Options = {
+  extraHOCs: [],
   allowExportNames: [],
   allowConstantExport: false,
-  customHOCs: [],
   checkJS: false,
 };
 ```
 
+### extraHOCs <small>(v0.5.0)</small>
+
+If you're exporting components wrapped in non built-in React HOC (memo, forwardRef, lazy), you can use this option to avoid false positives.
+
+```json
+{
+  "react-refresh/only-export-components": [
+    "error",
+    { "extraHOCs": ["observer", "withAuth"] }
+  ]
+}
+```
+
 ### allowExportNames <small>(v0.4.4)</small>
 
 > Default: `[]`
@@ -218,16 +220,3 @@ If you're using JSX inside `.js` files (which I don't recommend because it force
   "react-refresh/only-export-components": ["error", { "checkJS": true }]
 }
 ```
-
-### customHOCs <small>(v0.4.15)</small>
-
-If you're exporting a component wrapped in a custom HOC, you can use this option to avoid false positives.
-
-```json
-{
-  "react-refresh/only-export-components": [
-    "error",
-    { "customHOCs": ["observer", "withAuth"] }
-  ]
-}
-```

bun.lock

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-react-refresh",
-  "version": "0.4.26",
+  "version": "0.5.0",
   "type": "module",
   "license": "MIT",
   "scripts": {
@@ -15,7 +15,7 @@
     "experimentalOperatorPosition": "start"
   },
   "peerDependencies": {
-    "eslint": ">=8.40"
+    "eslint": ">=9"
   },
   "devDependencies": {
     "@arnaud-barre/eslint-config": "^6.1.2",

package.json

@@ -12,7 +12,8 @@ await build({
   entryPoints: ["src/index.ts"],
   outdir: "dist",
   platform: "node",
-  target: "node14",
+  format: "esm",
+  target: "node20",
   external: Object.keys(packageJSON.peerDependencies),
 });
 
@@ -27,12 +28,16 @@ writeFileSync(
       description:
         "Validate that your components can safely be updated with Fast Refresh",
       version: packageJSON.version,
-      type: "commonjs",
+      type: "module",
       author: "Arnaud Barré (https://github.com/ArnaudBarre)",
       license: packageJSON.license,
       repository: "github:ArnaudBarre/eslint-plugin-react-refresh",
-      main: "index.js",
-      types: "index.d.ts",
+      exports: {
+        ".": {
+          types: "./index.d.ts",
+          default: "./index.js",
+        },
+      },
       keywords: [
         "eslint",
         "eslint-plugin",

scripts/bundle.ts

@@ -1,62 +1,74 @@
 import { onlyExportComponents } from "./only-export-components.ts";
+import type { OnlyExportComponentsOptions } from "./types.d.ts";
 
-export const rules = {
+const rules = {
   "only-export-components": onlyExportComponents,
 };
-
 const plugin = { rules };
 
-export const configs = {
-  recommended: {
-    name: "react-refresh/recommended",
-    plugins: { "react-refresh": plugin },
-    rules: { "react-refresh/only-export-components": "error" },
-  },
-  vite: {
-    name: "react-refresh/vite",
+const buildConfig =
+  ({
+    name,
+    baseOptions,
+  }: {
+    name: string;
+    baseOptions: OnlyExportComponentsOptions;
+  }) =>
+  (options?: OnlyExportComponentsOptions) => ({
+    name: `react-refresh/${name}`,
     plugins: { "react-refresh": plugin },
     rules: {
       "react-refresh/only-export-components": [
         "error",
-        { allowConstantExport: true },
+        { ...baseOptions, ...options },
       ],
     },
-  },
-  next: {
-    name: "react-refresh/next",
-    plugins: { "react-refresh": plugin },
-    rules: {
-      "react-refresh/only-export-components": [
-        "error",
-        {
-          allowExportNames: [
-            // https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config
-            "experimental_ppr",
-            "dynamic",
-            "dynamicParams",
-            "revalidate",
-            "fetchCache",
-            "runtime",
-            "preferredRegion",
-            "maxDuration",
-            // https://nextjs.org/docs/app/api-reference/functions/generate-metadata
-            "metadata",
-            "generateMetadata",
-            // https://nextjs.org/docs/app/api-reference/functions/generate-viewport
-            "viewport",
-            "generateViewport",
-            // https://nextjs.org/docs/app/api-reference/functions/generate-image-metadata
-            "generateImageMetadata",
-            // https://nextjs.org/docs/app/api-reference/functions/generate-sitemaps
-            "generateSitemaps",
-            // https://nextjs.org/docs/app/api-reference/functions/generate-static-params
-            "generateStaticParams",
-          ],
-        },
+  });
+
+const configs = {
+  recommended: buildConfig({ name: "recommended", baseOptions: {} }),
+  vite: buildConfig({
+    name: "vite",
+    baseOptions: { allowConstantExport: true },
+  }),
+  next: buildConfig({
+    name: "next",
+    baseOptions: {
+      allowExportNames: [
+        // https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config
+        "experimental_ppr",
+        "dynamic",
+        "dynamicParams",
+        "revalidate",
+        "fetchCache",
+        "runtime",
+        "preferredRegion",
+        "maxDuration",
+        // https://nextjs.org/docs/app/api-reference/functions/generate-metadata
+        "metadata",
+        "generateMetadata",
+        // https://nextjs.org/docs/app/api-reference/functions/generate-viewport
+        "viewport",
+        "generateViewport",
+        // https://nextjs.org/docs/app/api-reference/functions/generate-image-metadata
+        "generateImageMetadata",
+        // https://nextjs.org/docs/app/api-reference/functions/generate-sitemaps
+        "generateSitemaps",
+        // https://nextjs.org/docs/app/api-reference/functions/generate-static-params
+        "generateStaticParams",
       ],
     },
-  },
+  }),
 };
 
-// Probably not needed, but keep for backwards compatibility
-export default { rules, configs };
+export const reactRefresh = { plugin, configs };
+
+/** Prefer reactRefresh export which exposed configs as functions */
+export default {
+  rules,
+  configs: {
+    recommended: configs.recommended(),
+    vite: configs.vite(),
+    next: configs.next(),
+  },
+};