eslint-plugin-react-refresh

• Support re-exporting namespace components (fixes #116)

• Fix SCREAMING_SNAKE_CASE constant exported via export { Name } incorrectly treated as React component #114 (fixes #113)
• Add contentType and size to allowExportNames in Next config #115

• Add instant to allowExportNames in Next config #112

• Fix check for non component class exported via export { } #110 (fixes #109)

• Support nested function calls for extraHOCs (actually fixes #104)

• Mark ESLint v10 as supported
• Support false positives with TypeScript function overloading (fixes #105)
• Support nested function calls for extraHOCs (fixes #104)

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
• 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 (like connect or styled)

Config example:

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:

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)

The rule now handles ternaries and patterns like export default customHOC(props)(Component) which makes it able to correctly support files like this one given this config:

{
  "react-refresh/only-export-components": [
    "warn",
    { "extraHOCs": ["createRootRouteWithContext"] }
  ]
}

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:

{
  "react-refresh/only-export-components": ["warn", { "extraHOCs": ["connect"] }]
}

• Revert changes to fix #93 (fixes #95)

• Report cases like export const ENUM = Object.keys(TABLE) as EnumType[]; (fixes #93)
• Allow _ in component names (#94)

• Add "generateImageMetadata", "generateSitemaps" & "generateStaticParams" to allowExportNames in Next config

• Add "metadata", "generateMetadata" & "generateViewport" to allowExportNames in Next config

• Add "viewport" to allowExportNames in Next config (#89)

• Add Next config (fixes #85)

This allows exports like fetchCache and revalidate which are used in Page or Layout components and don't trigger a full page reload.

import reactRefresh from "eslint-plugin-react-refresh";

export default [
  /* Main config */
  reactRefresh.configs.next,
];

• Don't warn on nested HOC calls (fixes #79)
• Fix false positive with as const (fixes #80)

Add name to configs for ESLint Config Inspector

ESM/CJS interop is the worse that happened to this ecosystem, this is all I have to say.

• Fix detection of local components to not generate warning on for variable inside JSX files that follow React component naming (fixes #75)
• Update types to not require extra unnecessary .default property access under TS node16 module resolution (fixes #70)

Fix CJS/ESM interop issue. Sorry everyone for the trouble.

Add support for custom HOCs (#60)

By default, the rule only knows that memo & forwardRef function calls with return a React component. With this option, you can also allow extra function names like Mobx observer to make this code valid:

const Foo = () => <></>;
export default observer(Foo);

{
  "react-refresh/only-export-components": [
    "error",
    { "customHOCs": ["observer"] }
  ]
}

Thanks @HorusGoul!

Add recommended config and simple types (#67)

You can now add the recommended config to your ESLint config like this:

import reactRefresh from "eslint-plugin-react-refresh";

export default [
  /* Main config */
  reactRefresh.configs.recommended, // Or reactRefresh.configs.vite for Vite users
];

To follow ESLint recommandations, the rule is added with the error severity.

Some simple types ensure that people typecheking their config won't need @ts-expect-error anymore.

Bump ESLint peer dependency to 8.40

This was actually done by mistake in the previous release when moving from a deprecated API to a new one.

Given that ESLint 8 is officialy end-of-life and the only report (#56) didn't get likes, I'm going forward and documenting the expected minimum version from ESLin in the package JSON so that people can get warning from their package manager.

• Warn if a context is exported alongside a component (fixes #53). Thanks @IgorAufricht!

• Support for react-redux connect (export default connect(mapStateToProps, mapDispatchToProps)(MyComponent)) (fixes #51)
• Support for Arbitrary Module Identifiers syntax (fixes #52)

• Support type assertion on default export (fixes #48)
• Add default export to fix usage with jiti (fixes #50)

• Ignore type exports (ex. export type foo = string;) (fixes #47)

• Support function Foo() {}; export default React.memo(Foo) (#46) (thanks @SukkaW!)

• Support function Foo() {}; export default memo(Foo) (fixes #44) (thanks @SukkaW!)

• Support export const foo = -1 with allowConstantExport (fixes #43)

• Support export { Component as default } (fixes #41)

• Ignore cypress test files (#39)

• Allow TaggedTemplateExpression for styled components (fixes #32)

• Add allowExportNames option (fixes #29)
• Support memo default export function components (fixes #27)
• Warn on export expressions that are not React component (array, object, logical expression, ...) (fixes #26)

• Add warning for TS enums exports

• Fix typos in messages (#15, #16). Thanks @adamschachne & @janikga!

• Ignore export type * (fixes #12)
• Support for all-uppercase function wrapped in forwardRef/memo (#11)

Add allowConstantExport option (fixes #8)

This option allow to don't warn when a constant (string, number, boolean, templateLiteral) is exported aside one or more components.

This should be enabled if the fast refresh implementation correctly handles this case (HMR when the constant doesn't change, propagate update to importers when the constant changes). Vite supports it, PR welcome if you notice other integrations works well.

Allow all-uppercase function exports (fixes #11)

This only works when using direct export. So this pattern doesn't warn anymore:

export const CMS = () => <></>;

But this one will still warn:

const CMS = () => <></>;
export default CMS;

Ignore stories files (*.stories.*) (Fixes #10)

Report default CallExpression exports (#7) (Fixes #6)

This allows to report a warning for this kind of patterns that creates anonymous components:

export default compose()(MainComponent)

Add checkJS option (#5) (Fixes #4)

Ignore test files (*.test.*, *.spec.*) (Fixes #2)

Allow numbers in component names (Fixes #1)

Report an error when a file that contains components that can't be fast-refreshed because:

• There are no export (entrypoint)
• Exports are not components

Doc only: Update limitations section README.md

• Fix TS import
• Document limitations

Initial release