Update exports + rename customHOCs to extraHOCs

Author: ArnaudBarre

CHANGELOG.md

@@ -5,8 +5,10 @@
 ### Breaking changes
 
 - Packages now ships as ESM and requires ESLint 9 + node 20
-- Validation of HOCs calls is now more strict, you may need to add some HOCs to the `customHOCs` option
+- Plugin is now exported under `<default>.plugin` instead of `<default>`. Named export have been removed.
 - Configs are now functions that return the config object with passed options merged with the base options of that config
+- `customHOCs` was renamed to `extraHOCs`
+- Validation of HOCs calls is now more strict, you may need to add some HOCs to the `extraHOCs` option
 
 Example:
 
@@ -16,10 +18,32 @@ import reactRefresh from "eslint-plugin-react-refresh";
 
 export default defineConfig(
   /* Main config */
-  reactRefresh.configs.vite({ customHOCs: ["connect"] }),
+  reactRefresh.configs.vite({ extraHOCs: ["someLibHOC"] }),
 );
 ```
 
+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))
@@ -30,22 +54,19 @@ The rule now handles ternaries and patterns like `export default customHOC(props
 {
   "react-refresh/only-export-components": [
     "warn",
-    { "customHOCs": ["createRootRouteWithContext"] }
+    { "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 `customHOCs` it you want to preserve good HMR in the long term. [Bluesky thread](https://bsky.app/profile/arnaud-barre.bsky.social/post/3ma5h5tf2sk2e).
+> 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 `customHOCs` like this:
+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",
-    { "customHOCs": ["connect"] }
-  ]
+  "react-refresh/only-export-components": ["warn", { "extraHOCs": ["connect"] }]
 }
 ```
 
@@ -122,7 +143,7 @@ export default observer(Foo);
 {
   "react-refresh/only-export-components": [
     "error",
-    { "customHOCs": ["observer"] }
+    { "extraHOCs": ["observer"] }
   ]
 }
 ```

README.md

@@ -79,7 +79,7 @@ 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",
@@ -141,29 +141,29 @@ These options are all present on `react-refresh/only-exports-components`.
 
 ```ts
 interface Options {
-  customHOCs?: string[];
+  extraHOCs?: string[];
   allowExportNames?: string[];
   allowConstantExport?: boolean;
   checkJS?: boolean;
 }
 
 const defaultOptions: Options = {
-  customHOCs: [],
+  extraHOCs: [],
   allowExportNames: [],
   allowConstantExport: false,
   checkJS: false,
 };
 ```
 
-### customHOCs <small>(v0.4.15)</small>
+### extraHOCs <small>(v0.5.0)</small>
 
-If you're exporting a component wrapped in a custom HOC, you can use this option to avoid false positives.
+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",
-    { "customHOCs": ["observer", "withAuth"] }
+    { "extraHOCs": ["observer", "withAuth"] }
   ]
 }
 ```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-react-refresh",
-  "version": "0.5.0-alpha.0",
+  "version": "0.5.0-alpha.1",
   "type": "module",
   "license": "MIT",
   "scripts": {

src/index.ts

@@ -1,12 +1,12 @@
 import { onlyExportComponents } from "./only-export-components.ts";
 import type { OnlyExportComponentsOptions } from "./types.d.ts";
 
-export const rules = {
-  "only-export-components": onlyExportComponents,
+const plugin = {
+  rules: {
+    "only-export-components": onlyExportComponents,
+  },
 };
 
-const plugin = { rules };
-
 const buildConfig =
   ({
     name,
@@ -26,7 +26,7 @@ const buildConfig =
     },
   });
 
-export const configs = {
+const configs = {
   recommended: buildConfig({ name: "recommended", baseOptions: {} }),
   vite: buildConfig({
     name: "vite",
@@ -62,5 +62,4 @@ export const configs = {
   }),
 };
 
-// Probably not needed, but keep for backwards compatibility
-export default { rules, configs };
+export default { plugin, configs };

src/only-export-components.test.ts

@@ -70,27 +70,27 @@ const valid: {
   {
     name: "styled components",
     code: "export const Foo = () => {}; export const Bar = styled.div`padding-bottom: 6px;`;",
-    options: { customHOCs: ["styled"] },
+    options: { extraHOCs: ["styled"] },
   },
   {
     name: "styled components",
     code: "export const Foo = () => {}; export const Flex = styled.div({ display: 'flex' });",
-    options: { customHOCs: ["styled"] },
+    options: { extraHOCs: ["styled"] },
   },
   {
     name: "Curried HOC with styled (object form)",
     code: "export const Foo = () => {}; export const Flex = styled('div')({display: 'flex'});",
-    options: { customHOCs: ["styled"] },
+    options: { extraHOCs: ["styled"] },
   },
   {
     name: "Curried HOC with styled (template literal form)",
     code: "export const Foo = () => {}; export const Flex = styled('div')`display: flex;`;",
-    options: { customHOCs: ["styled"] },
+    options: { extraHOCs: ["styled"] },
   },
   {
     name: "Curried HOC only first call",
     code: "export const Foo = () => {}; export const Flex = styled('div');",
-    options: { customHOCs: ["styled"] },
+    options: { extraHOCs: ["styled"] },
   },
   {
     name: "Direct export variable",
@@ -210,7 +210,7 @@ const valid: {
   {
     name: "Allow connect from react-redux",
     code: "const MyComponent = () => {}; export default connect(() => ({}))(MyComponent);",
-    options: { customHOCs: ["connect"] },
+    options: { extraHOCs: ["connect"] },
   },
   {
     name: "Two components, one of them with 'Context' in its name",
@@ -227,7 +227,7 @@ const valid: {
   {
     name: "Custom HOCs like mobx's observer",
     code: "const MyComponent = () => {}; export default observer(MyComponent);",
-    options: { customHOCs: ["observer"] },
+    options: { extraHOCs: ["observer"] },
   },
   {
     name: "Local constant with component casing and non component function",
@@ -257,7 +257,7 @@ const valid: {
   {
     name: "TanStack Router",
     code: "const RootComponent = () => {}; export const Route = createRootRoute()({ component: RootComponent });",
-    options: { customHOCs: ["createRootRoute"] },
+    options: { extraHOCs: ["createRootRoute"] },
   },
   {
     name: "Rename export",

src/only-export-components.ts

@@ -22,7 +22,7 @@ export const onlyExportComponents: TSESLint.RuleModule<
       anonymousExport:
         "Fast refresh can't handle anonymous components. Add a name to your export.",
       localComponents:
-        "Fast refresh only works when a file only exports components. Move your component(s) to a separate file. If all exports are HOCs, add them to the `customHOCs` option.",
+        "Fast refresh only works when a file only exports components. Move your component(s) to a separate file. If all exports are HOCs, add them to the `extraHOCs` option.",
       noExport:
         "Fast refresh only works when a file has exports. Move your component(s) to a separate file.",
       reactContext:
@@ -33,7 +33,7 @@ export const onlyExportComponents: TSESLint.RuleModule<
       {
         type: "object",
         properties: {
-          customHOCs: { type: "array", items: { type: "string" } },
+          extraHOCs: { type: "array", items: { type: "string" } },
           allowExportNames: { type: "array", items: { type: "string" } },
           allowConstantExport: { type: "boolean" },
           checkJS: { type: "boolean" },
@@ -45,7 +45,7 @@ export const onlyExportComponents: TSESLint.RuleModule<
   defaultOptions: [],
   create: (context) => {
     const {
-      customHOCs = [],
+      extraHOCs = [],
       allowExportNames,
       allowConstantExport = false,
       checkJS = false,
@@ -70,7 +70,7 @@ export const onlyExportComponents: TSESLint.RuleModule<
       ? new Set(allowExportNames)
       : undefined;
 
-    const validHOCs = ["memo", "forwardRef", "lazy", ...customHOCs];
+    const validHOCs = ["memo", "forwardRef", "lazy", ...extraHOCs];
     const getHocName = (
       node: TSESTree.CallExpression | TSESTree.TaggedTemplateExpression,
     ): string | undefined => {

src/types.d.ts

@@ -1,7 +1,7 @@
 type Rules = { "only-export-components": any };
 
 export type OnlyExportComponentsOptions = {
-  customHOCs?: string[];
+  extraHOCs?: string[];
   allowExportNames?: string[];
   allowConstantExport?: boolean;
   checkJS?: boolean;
@@ -14,7 +14,9 @@ type Config = (options?: OnlyExportComponentsOptions) => {
 };
 
 declare const _default: {
-  rules: Rules;
+  plugin: {
+    rules: Rules;
+  };
   configs: {
     recommended: Config;
     vite: Config;