diff --git a/README.md b/README.md index 0788f71..7d78e8e 100644 --- a/README.md +++ b/README.md @@ -36,7 +36,6 @@ Import the plugin in your code: ```js // Named import (recommended) import { ReactRefreshRspackPlugin } from "@rspack/plugin-react-refresh"; - ``` - CommonJS: @@ -101,12 +100,31 @@ Compared to the previous approach, this method decouples the React Fast Refresh ## Options +### test + +- Type: [Rspack.RuleSetCondition](https://rspack.dev/config/module#condition) +- Default: `undefined` + +Specifies which files should be processed by the React Refresh loader. This option is passed to the `builtin:react-refresh-loader` as the `rule.test` condition. + +Works identically to Rspack's [rule.test](https://rspack.dev/config/module#ruletest) option. + +```js +new ReactRefreshPlugin({ + test: [/\.jsx$/, /\.tsx$/], +}); +``` + ### include - Type: [Rspack.RuleSetCondition](https://rspack.dev/config/module#condition) - Default: `/\.([cm]js|[jt]sx?|flow)$/i` -Include files to be processed by the plugin. The value is the same as the [rule.test](https://rspack.dev/config/module#ruletest) option in Rspack. +Explicitly includes files to be processed by the React Refresh loader. This option is passed to the `builtin:react-refresh-loader` as the `rule.include` condition. + +Use this to limit processing to specific directories or file patterns. + +Works identically to Rspack's [rule.include](https://rspack.dev/config/module#ruleinclude) option. ```js new ReactRefreshPlugin({ diff --git a/src/index.ts b/src/index.ts index 7254abc..6c8a976 100644 --- a/src/index.ts +++ b/src/index.ts @@ -80,6 +80,7 @@ class ReactRefreshRspackPlugin { if (this.options.injectLoader) { compiler.options.module.rules.unshift({ + test: this.options.test, // biome-ignore lint: exists include: this.options.include!, exclude: { diff --git a/src/options.ts b/src/options.ts index eabbaf0..729998e 100644 --- a/src/options.ts +++ b/src/options.ts @@ -13,11 +13,20 @@ interface OverlayOptions { export type PluginOptions = { /** - * Include files to be processed by the plugin. - * The value is the same as the `rule.test` option in Rspack. - * @default /\.([cm]js|[jt]sx?|flow)$/i + * Specifies which files should be processed by the React Refresh loader. + * This option is passed to the `builtin:react-refresh-loader` as the `rule.test` condition. + * Works identically to Rspack's `rule.test` option. * @see https://rspack.dev/config/module#ruletest */ + test?: RuleSetCondition; + /** + * Explicitly includes files to be processed by the React Refresh loader. + * This option is passed to the `builtin:react-refresh-loader` as the `rule.include` condition. + * Use this to limit processing to specific directories or file patterns. + * Works identically to Rspack's `rule.include` option. + * @default /\.([cm]js|[jt]sx?|flow)$/i + * @see https://rspack.dev/config/module#ruleinclude + */ include?: RuleSetCondition | null; /** * Exclude files from being processed by the plugin. diff --git a/test/test.spec.ts b/test/test.spec.ts index fcc8495..89df179 100644 --- a/test/test.spec.ts +++ b/test/test.spec.ts @@ -128,6 +128,21 @@ describe('react-refresh-rspack-plugin', () => { ); }); + it('should test selected file when compiling', (done) => { + compileWithReactRefresh( + path.join(__dirname, 'fixtures/custom'), + { + exclude: null, + test: path.join(__dirname, 'fixtures/node_modules/foo'), + include: null, + }, + (_, __, { vendor }) => { + expect(vendor).toContain('function $RefreshReg$'); + done(); + }, + ); + }); + it('should include selected file when compiling', (done) => { compileWithReactRefresh( path.join(__dirname, 'fixtures/custom'),