@rspack/plugin-react-refresh 1.5.2 → 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/client/errorOverlayEntry.js

@@ -1,13 +1,4 @@
 /* global __react_refresh_error_overlay__, __react_refresh_socket__, __resourceQuery */
-/**
- * The following code is modified based on
- * https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/f1c8b9a44198449093ca95f85af5df97925e1cfc/client/ErrorOverlayEntry.js
- *
- * MIT Licensed
- * Author Michael Mok
- * Copyright (c) 2019 Michael Mok
- * https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/0b960573797bf38926937994c481e4fec9ed8aa6/LICENSE
- */
 const events = require('./utils/errorEventHandlers.js');
 const formatWebpackErrors = require('./utils/formatWebpackErrors.js');
 const runWithRetry = require('./utils/retry.js');

package/client/overlay/index.js

@@ -1,12 +1,3 @@
-/**
- * The following code is modified based on
- * https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/f1c8b9a44198449093ca95f85af5df97925e1cfc/overlay/index.js
- *
- * MIT Licensed
- * Author Michael Mok
- * Copyright (c) 2019 Michael Mok
- * https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/0b960573797bf38926937994c481e4fec9ed8aa6/LICENSE
- */
 const RuntimeErrorFooter = require('./components/RuntimeErrorFooter.js');
 const RuntimeErrorHeader = require('./components/RuntimeErrorHeader.js');
 const CompileErrorContainer = require('./containers/CompileErrorContainer.js');

package/client/reactRefresh.js

@@ -1,8 +1,6 @@
-// Thanks https://github.com/pmmmwh/react-refresh-webpack-plugin
 const RefreshUtils = require('./refreshUtils');
 const RefreshRuntime = require('react-refresh/runtime');
 
-// Port from https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/main/loader/utils/getRefreshModuleRuntime.js#L29
 function refresh(moduleId, webpackHot) {
   const currentExports = RefreshUtils.getModuleExports(moduleId);
   const fn = (exports) => {

package/client/reactRefreshEntry.js

@@ -1,13 +1,3 @@
-/**
- * The following code is modified based on
- * https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/0b960573797bf38926937994c481e4fec9ed8aa6/client/ReactRefreshEntry.js
- *
- * MIT Licensed
- * Author Michael Mok
- * Copyright (c) 2019 Michael Mok
- * https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/0b960573797bf38926937994c481e4fec9ed8aa6/LICENSE
- */
-
 var RefreshRuntime = require('react-refresh/runtime');
 var safeThis = (function () {
   // copied from core-js-pure/features/global-this

package/client/refreshUtils.js

@@ -1,13 +1,3 @@
-/**
- * The following code is modified based on
- * https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/0b960573797bf38926937994c481e4fec9ed8aa6/lib/runtime/RefreshUtils.js
- *
- * MIT Licensed
- * Author Michael Mok
- * Copyright (c) 2019 Michael Mok
- * https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/0b960573797bf38926937994c481e4fec9ed8aa6/LICENSE
- */
-
 /* global __webpack_require__ */
 var Refresh = require('react-refresh/runtime');
 

package/client/utils/ansi-html.js

@@ -1,15 +1,8 @@
 /* eslint-disable */
 // @ts-nocheck
 /**
- * The following code is modified based on
- * https://github.com/mahdyar/ansi-html-community/blob/b86cc3f1fa1d118477877352f0eafe1a70fd20ab/index.js
- *
- * Supported:
- *  - added support for 24-bit RGB colors.
- *
- * Apache 2.0 Licensed
- * Author @Tjatse
- * https://github.com/mahdyar/ansi-html-community/blob/master/LICENSE
+ * The following code is modified based on mahdyar/ansi-html-community
+ * Added support for 24-bit RGB colors.
  */
 'use strict';
 

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;
 }
@@ -167,7 +168,7 @@ function getSocketIntegration(integrationType) {
     return resolvedSocketIntegration;
 }
 function addEntry(entry, compiler) {
-    new compiler.webpack.EntryPlugin(compiler.context, entry, {
+    new compiler.rspack.EntryPlugin(compiler.context, entry, {
         name: void 0
     }).apply(compiler);
 }
@@ -181,7 +182,6 @@ class ReactRefreshRspackPlugin {
     static get deprecated_runtimePaths() {
         return getRefreshRuntimePaths();
     }
-    static loader = 'builtin:react-refresh-loader';
     constructor(options = {}){
         this.options = normalizeOptions(options);
     }
@@ -194,7 +194,7 @@ class ReactRefreshRspackPlugin {
         if (this.options.injectEntry) for (const entry of addEntries.prependEntries)addEntry(entry, compiler);
         if (false !== this.options.overlay && this.options.overlay.sockIntegration) addSocketEntry(this.options.overlay.sockIntegration, compiler);
         for (const entry of addEntries.overlayEntries)addEntry(entry, compiler);
-        new compiler.webpack.ProvidePlugin({
+        new compiler.rspack.ProvidePlugin({
             $ReactRefreshRuntime$: reactRefreshPath
         }).apply(compiler);
         if (this.options.injectLoader) compiler.options.module.rules.unshift({
@@ -214,10 +214,10 @@ class ReactRefreshRspackPlugin {
                     'url'
                 ]
             },
-            use: ReactRefreshRspackPlugin.loader
+            use: this.options.reactRefreshLoader
         });
         const definedModules = {
-            __react_refresh_library__: JSON.stringify(compiler.webpack.Template.toIdentifier(this.options.library || compiler.options.output.uniqueName || compiler.options.output.library)),
+            __react_refresh_library__: JSON.stringify(compiler.rspack.Template.toIdentifier(this.options.library || compiler.options.output.uniqueName || compiler.options.output.library)),
             __reload_on_runtime_errors__: this.options.reloadOnRuntimeErrors
         };
         const providedModules = {
@@ -230,8 +230,8 @@ class ReactRefreshRspackPlugin {
             if (this.options.overlay.module) providedModules.__react_refresh_error_overlay__ = require.resolve(this.options.overlay.module);
             if (this.options.overlay.sockIntegration) providedModules.__react_refresh_socket__ = getSocketIntegration(this.options.overlay.sockIntegration);
         }
-        new compiler.webpack.DefinePlugin(definedModules).apply(compiler);
-        new compiler.webpack.ProvidePlugin(providedModules).apply(compiler);
+        new compiler.rspack.DefinePlugin(definedModules).apply(compiler);
+        new compiler.rspack.ProvidePlugin(providedModules).apply(compiler);
         compiler.options.resolve.alias = {
             'react-refresh': getRefreshRuntimeDirPath(),
             ...compiler.options.resolve.alias

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/WHMEventSource.d.ts

@@ -1,15 +1,5 @@
-/**
- * The following code is modified based on
- * https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/f770d3962c388da01eeda7079bff5f40c93992d2/sockets/WHMEventSource.js
- *
- * MIT Licensed
- * Author Michael Mok
- * Copyright (c) 2019 Michael Mok
- * https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/f770d3962c388da01eeda7079bff5f40c93992d2/LICENSE
- */
 /**
  * The hard-coded singleton key for webpack-hot-middleware's client instance.
- *
  * [Ref](https://github.com/webpack-contrib/webpack-hot-middleware/blob/cb29abb9dde435a1ac8e9b19f82d7d36b1093198/client.js#L152)
  */
 declare const singletonKey = "__webpack_hot_middleware_reporter__";

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.2",
-  "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,25 +32,21 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
-    "@rslib/core": "^0.15.1",
-    "@rspack/core": "^1.5.8",
-    "@types/jest": "29.5.14",
-    "@types/node": "^22.17.0",
-    "bumpp": "^10.2.3",
+    "@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.0.0",
-    "execa": "9.6.0",
-    "fs-extra": "11.3.0",
-    "jest": "29.7.0",
-    "jest-cli": "29.7.0",
-    "jest-environment-node": "29.7.0",
-    "nano-staged": "^0.8.0",
-    "react-refresh": "^0.17.0",
-    "semver": "7.7.2",
+    "cross-env": "^10.1.0",
+    "execa": "9.6.1",
+    "fs-extra": "11.3.2",
+    "nano-staged": "^0.9.0",
+    "react-refresh": "^0.18.0",
+    "semver": "7.7.3",
     "simple-git-hooks": "^2.13.1",
-    "ts-jest": "29.4.0",
     "ts-node": "^10.9.2",
-    "typescript": "5.9.2"
+    "typescript": "5.9.3"
   },
   "dependencies": {
     "error-stack-parser": "^2.1.4",
@@ -74,7 +70,7 @@
     "dev": "rslib build -w",
     "lint": "biome check .",
     "lint:write": "biome check . --write",
-    "test": "jest --colors",
+    "test": "rstest",
     "release": "node ./scripts/release.mjs",
     "bump": "npx bumpp --no-push --no-tag --no-commit"
   }