@rspack/plugin-react-refresh 1.5.3 → 1.6.0

package/README.md

@@ -1,8 +1,3 @@
-<picture>
-  <source media="(prefers-color-scheme: dark)" srcset="https://assets.rspack.dev/rspack/rspack-banner-plain-dark.png">
-  <img alt="Rspack Banner" src="https://assets.rspack.dev/rspack/rspack-banner-plain-light.png">
-</picture>
-
 # @rspack/plugin-react-refresh
 
 <p>
@@ -95,19 +90,19 @@ Compared to the previous approach, this method decouples the React Fast Refresh
 
 ## Example
 
-- For usage with `builtin:swc-loader`, you can refer to the example at [examples/react-refresh](https://github.com/rspack-contrib/rspack-examples/tree/main/rspack/react-refresh/rspack.config.js), When using with `swc-loader`, simply replace `builtin:swc-loader` with `swc-loader`.
-- For usage with `babel-loader`, you can refer to the example at [examples/react-refresh-babel-loader](https://github.com/rspack-contrib/rspack-examples/tree/main/rspack/react-refresh-babel-loader/rspack.config.js)
+- For usage with `builtin:swc-loader`, you can refer to the example at [examples/react-refresh](https://github.com/rstackjs/rspack-examples/tree/main/rspack/react-refresh/rspack.config.js), When using with `swc-loader`, simply replace `builtin:swc-loader` with `swc-loader`.
+- For usage with `babel-loader`, you can refer to the example at [examples/react-refresh-babel-loader](https://github.com/rstackjs/rspack-examples/tree/main/rspack/react-refresh-babel-loader/rspack.config.js)
 
 ## Options
 
 ### test
 
-- Type: [Rspack.RuleSetCondition](https://rspack.dev/config/module#condition)
+- Type: [Rspack.RuleSetCondition](https://rspack.rs/config/module-rules#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.
+Works identically to Rspack's [rule.test](https://rspack.rs/config/module-rules#rulestest) option.
 
 ```js
 new ReactRefreshPlugin({
@@ -117,14 +112,14 @@ new ReactRefreshPlugin({
 
 ### include
 
-- Type: [Rspack.RuleSetCondition](https://rspack.dev/config/module#condition)
+- Type: [Rspack.RuleSetCondition](https://rspack.rs/config/module-rules#condition)
 - Default: `/\.([cm]js|[jt]sx?|flow)$/i`
 
 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.
+Works identically to Rspack's [rule.include](https://rspack.rs/config/module-rules#rulesinclude) option.
 
 ```js
 new ReactRefreshPlugin({
@@ -134,10 +129,10 @@ new ReactRefreshPlugin({
 
 ### exclude
 
-- Type: [Rspack.RuleSetCondition](https://rspack.dev/config/module#condition)
+- Type: [Rspack.RuleSetCondition](https://rspack.rs/config/module-rules#condition)
 - Default: `/node_modules/`
 
-Exclude files from being processed by the plugin. The value is the same as the [rule.exclude](https://rspack.dev/config/module#ruleexclude) option in Rspack.
+Exclude files from being processed by the plugin. The value is the same as the [rule.exclude](https://rspack.rs/config/module-rules#rulesexclude) option in Rspack.
 
 ```js
 new ReactRefreshPlugin({
@@ -147,10 +142,10 @@ new ReactRefreshPlugin({
 
 ### resourceQuery
 
-- Type: [Rspack.RuleSetCondition](https://rspack.dev/config/module#condition)
+- Type: [Rspack.RuleSetCondition](https://rspack.rs/config/module-rules#condition)
 - Default: `undefined`
 
-Can be used to exclude certain resources from being processed by the plugin by the resource query. The value is the same as the [rule.resourceQuery](https://rspack.dev/config/module#ruleresourcequery) option in Rspack.
+Can be used to exclude certain resources from being processed by the plugin by the resource query. The value is the same as the [rule.resourceQuery](https://rspack.rs/config/module-rules#rulesresourcequery) option in Rspack.
 
 For example, to exclude all resources with the `raw` query, such as `import rawTs from './ReactComponent.ts?raw';`, use the following:
 
@@ -197,7 +192,7 @@ It is most useful when multiple instances of React Refresh is running together s
 
 Modify the behavior of the error overlay.
 
-Checkout [OverlayOptions](https://github.com/rspack-contrib/rspack-plugin-react-refresh/blob/main/src/options.ts#L4) type signature for more details.
+Checkout [OverlayOptions](https://github.com/rstackjs/rspack-plugin-react-refresh/blob/main/src/options.ts#L4) type signature for more details.
 
 - Enable the error overlay:
 
@@ -232,6 +227,21 @@ new ReactRefreshPlugin({
 });
 ```
 
+### reactRefreshLoader
+
+- Type: `string`
+- Default: `builtin:react-refresh-loader`
+
+Be default, the plugin uses `builtin:react-refresh-loader` loader implementation [from Rspack](https://github.com/web-infra-dev/rspack/tree/main/crates/rspack_loader_react_refresh) in order ot inject
+the React Refresh utilities into each module. `reactRefreshLoader` option allows to specify the loader, that implements 
+custom React Refresh instrumentation if needed.
+
+```js
+new ReactRefreshPlugin({
+    reactRefreshLoader: 'my-advanced-react-refresh-loader',
+});
+```
+
 ## Credits
 
 Thanks to the [react-refresh-webpack-plugin](https://github.com/pmmmwh/react-refresh-webpack-plugin) created by [@pmmmwh](https://github.com/pmmmwh), which inspires implement this plugin.

package/dist/index.d.ts

@@ -7,7 +7,6 @@ declare class ReactRefreshRspackPlugin {
      * @deprecated
      */
     static get deprecated_runtimePaths(): string[];
-    static loader: string;
     constructor(options?: PluginOptions);
     apply(compiler: Compiler): void;
 }

package/dist/index.js

@@ -63,6 +63,7 @@ function normalizeOptions(options) {
     d(options, 'injectLoader', true);
     d(options, 'injectEntry', true);
     d(options, 'reloadOnRuntimeErrors', false);
+    d(options, 'reactRefreshLoader', 'builtin:react-refresh-loader');
     options.overlay = normalizeOverlay(options.overlay);
     return options;
 }
@@ -181,7 +182,6 @@ class ReactRefreshRspackPlugin {
     static get deprecated_runtimePaths() {
         return getRefreshRuntimePaths();
     }
-    static loader = 'builtin:react-refresh-loader';
     constructor(options = {}){
         this.options = normalizeOptions(options);
     }
@@ -214,7 +214,7 @@ class ReactRefreshRspackPlugin {
                     'url'
                 ]
             },
-            use: ReactRefreshRspackPlugin.loader
+            use: this.options.reactRefreshLoader
         });
         const definedModules = {
             __react_refresh_library__: JSON.stringify(compiler.rspack.Template.toIdentifier(this.options.library || compiler.options.output.uniqueName || compiler.options.output.library)),

package/dist/options.d.ts

@@ -14,7 +14,7 @@ export type PluginOptions = {
      * 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
+     * @see https://rspack.rs/config/module-rules#rulestest
      */
     test?: RuleSetCondition;
     /**
@@ -23,20 +23,20 @@ export type PluginOptions = {
      * 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
+     * @see https://rspack.rs/config/module-rules#rulesinclude
      */
     include?: RuleSetCondition | null;
     /**
      * Exclude files from being processed by the plugin.
      * The value is the same as the `rule.exclude` option in Rspack.
      * @default /node_modules/
-     * @see https://rspack.dev/config/module#ruleexclude
+     * @see https://rspack.rs/config/module-rules#rulesexclude
      */
     exclude?: RuleSetCondition | null;
     /**
      * Can be used to exclude certain resources from being processed by
      * the plugin by the resource query.
-     * @see https://rspack.dev/config/module#ruleresourcequery
+     * @see https://rspack.rs/config/module-rules#rulesresourcequery
      *
      * @example
      * To exclude all resources with the `raw` query, such as
@@ -80,6 +80,11 @@ export type PluginOptions = {
      * @default false
      */
     reloadOnRuntimeErrors?: boolean;
+    /**
+     * Allows to specify custom react-refresh loader
+     * @default "builtin:react-refresh-loader"
+     */
+    reactRefreshLoader?: string;
 };
 export interface NormalizedPluginOptions extends Required<PluginOptions> {
     overlay: false | OverlayOptions;

package/dist/sockets/utils/getSocketUrlParts.js

@@ -69,7 +69,7 @@ function getSocketUrlParts(resourceQuery, metadata = {}) {
     if (isEmptyHostname && window.location.hostname && 0 === window.location.protocol.indexOf('http')) urlParts.hostname = window.location.hostname;
     if (!urlParts.protocol || urlParts.hostname && (isEmptyHostname || 'https:' === window.location.protocol)) urlParts.protocol = window.location.protocol;
     if (!urlParts.port) urlParts.port = window.location.port;
-    if (!urlParts.hostname || !urlParts.pathname) throw new Error("[React Refresh] Failed to get an URL for the socket connection.\nThis usually means that the current executed script doesn't have a `src` attribute set.\nYou should either specify the socket path parameters under the `devServer` key in your Rspack config, or use the `overlay` option.\nhttps://www.rspack.dev/guide/tech/react#fast-refresh");
+    if (!urlParts.hostname || !urlParts.pathname) throw new Error("[React Refresh] Failed to get an URL for the socket connection.\nThis usually means that the current executed script doesn't have a `src` attribute set.\nYou should either specify the socket path parameters under the `devServer` key in your Rspack config, or use the `overlay` option.\nhttps://rspack.rs/guide/tech/react#fast-refresh");
     return {
         auth: urlParts.auth,
         hostname: urlParts.hostname,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rspack/plugin-react-refresh",
-  "version": "1.5.3",
-  "repository": "https://github.com/rspack-contrib/rspack-plugin-react-refresh",
+  "version": "1.6.0",
+  "repository": "https://github.com/rstackjs/rspack-plugin-react-refresh",
   "license": "MIT",
   "description": "React refresh plugin for Rspack",
   "main": "exports/index.cjs",
@@ -32,16 +32,16 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
-    "@rslib/core": "^0.17.0",
-    "@rspack/core": "^1.6.0",
-    "@rstest/core": "^0.6.1",
-    "@types/node": "^22.18.13",
-    "bumpp": "^10.3.1",
+    "@rslib/core": "^0.18.2",
+    "@rspack/core": "^1.6.5",
+    "@rstest/core": "^0.6.8",
+    "@types/node": "^24.10.1",
+    "bumpp": "^10.3.2",
     "cac": "^6.7.14",
     "cross-env": "^10.1.0",
-    "execa": "9.6.0",
+    "execa": "9.6.1",
     "fs-extra": "11.3.2",
-    "nano-staged": "^0.8.0",
+    "nano-staged": "^0.9.0",
     "react-refresh": "^0.18.0",
     "semver": "7.7.3",
     "simple-git-hooks": "^2.13.1",