@rspack/plugin-react-refresh 1.4.3 → 1.5.1

package/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({
@@ -199,6 +217,21 @@ new ReactRefreshPlugin({
 });
 ```
 
+### reloadOnRuntimeErrors
+
+- Type: `boolean`
+- Default: `false`
+
+Config the plugin whether trigger a full page reload when an unrecoverable runtime error is encountered.
+
+Currently, only module factory undefined error is considered as unrecoverable runtime error.
+
+```js
+new ReactRefreshPlugin({
+  reloadOnRuntimeErrors: true,
+});
+```
+
 ## 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/overlay/index.js

@@ -240,7 +240,12 @@ function render() {
  */
 function cleanup() {
   // Clean up and reset all internal state.
-  document.body.removeChild(iframeRoot);
+  try {
+    document.body.removeChild(iframeRoot);
+  } catch (e) {
+    // In case user render react app directly to body， will trigger `NotFoundError` when recovery from an Error
+    // https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild#exceptions
+  }
   scheduledRenderFn = null;
   root = null;
   iframeRoot = null;

package/client/reactRefresh.js

@@ -6,7 +6,21 @@ const RefreshRuntime = require('react-refresh/runtime');
 function refresh(moduleId, webpackHot) {
   const currentExports = RefreshUtils.getModuleExports(moduleId);
   const fn = (exports) => {
-    RefreshUtils.executeRuntime(exports, moduleId, webpackHot);
+    var errorOverlay;
+    if (typeof __react_refresh_error_overlay__ !== 'undefined') {
+      errorOverlay = __react_refresh_error_overlay__;
+    }
+    var testMode;
+    if (typeof __react_refresh_test__ !== 'undefined') {
+      testMode = __react_refresh_test__;
+    }
+    RefreshUtils.executeRuntime(
+      exports,
+      moduleId,
+      webpackHot,
+      errorOverlay,
+      testMode,
+    );
   };
   if (typeof Promise !== 'undefined' && currentExports instanceof Promise) {
     currentExports.then(fn);

package/client/refreshUtils.js

@@ -209,6 +209,7 @@ function shouldInvalidateReactRefreshBoundary(prevExports, nextExports) {
 }
 
 var enqueueUpdate = createDebounceUpdate();
+
 function executeRuntime(
   moduleExports,
   moduleId,
@@ -245,6 +246,15 @@ function executeRuntime(
          * @returns {void}
          */
         function hotErrorHandler(error) {
+          console.error(error);
+          if (
+            __reload_on_runtime_errors__ &&
+            isUnrecoverableRuntimeError(error)
+          ) {
+            location.reload();
+            return;
+          }
+
           if (typeof refreshOverlay !== 'undefined' && refreshOverlay) {
             refreshOverlay.handleRuntimeError(error);
           }
@@ -287,6 +297,10 @@ function executeRuntime(
   }
 }
 
+function isUnrecoverableRuntimeError(error) {
+  return error.message.startsWith('RuntimeError: factory is undefined');
+}
+
 module.exports = Object.freeze({
   enqueueUpdate: enqueueUpdate,
   executeRuntime: executeRuntime,

package/dist/index.js

@@ -58,6 +58,7 @@ class ReactRefreshRspackPlugin {
         }).apply(compiler);
         if (this.options.injectLoader) {
             compiler.options.module.rules.unshift({
+                test: this.options.test,
                 // biome-ignore lint: exists
                 include: this.options.include,
                 exclude: {
@@ -65,6 +66,11 @@ class ReactRefreshRspackPlugin {
                     or: [this.options.exclude, [...paths_1.runtimePaths]].filter(Boolean),
                 },
                 resourceQuery: this.options.resourceQuery,
+                dependency: {
+                    // `new URL("static/sdk.js", import.meta.url)` the sdk.js is an asset module
+                    // we shoudn't inject react refresh for asset module
+                    not: ['url'],
+                },
                 use: ReactRefreshRspackPlugin.loader,
             });
         }
@@ -73,6 +79,7 @@ class ReactRefreshRspackPlugin {
             __react_refresh_library__: JSON.stringify(compiler.webpack.Template.toIdentifier(this.options.library ||
                 compiler.options.output.uniqueName ||
                 compiler.options.output.library)),
+            __reload_on_runtime_errors__: this.options.reloadOnRuntimeErrors,
         };
         const providedModules = {
             __react_refresh_utils__: paths_1.refreshUtilsPath,

package/dist/options.d.ts

@@ -11,11 +11,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.
@@ -66,6 +75,11 @@ export type PluginOptions = {
      * @default true
      */
     injectEntry?: boolean;
+    /**
+     * Whether to reload the page on runtime errors. E.g: undefined module factory
+     * @default false
+     */
+    reloadOnRuntimeErrors?: boolean;
 };
 export interface NormalizedPluginOptions extends Required<PluginOptions> {
     overlay: false | OverlayOptions;

package/dist/options.js

@@ -34,6 +34,7 @@ function normalizeOptions(options) {
     d(options, 'forceEnable', false);
     d(options, 'injectLoader', true);
     d(options, 'injectEntry', true);
+    d(options, 'reloadOnRuntimeErrors', false);
     options.overlay = normalizeOverlay(options.overlay);
     return options;
 }

package/exports/index.d.mts

@@ -1,4 +1,4 @@
-import { ReactRefreshRspackPlugin, type PluginOptions } from '../dist/index.js';
+import { type PluginOptions, ReactRefreshRspackPlugin } from '../dist/index.js';
 
 export type { PluginOptions };
 export { ReactRefreshRspackPlugin };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rspack/plugin-react-refresh",
-  "version": "1.4.3",
+  "version": "1.5.1",
   "repository": "https://github.com/rspack-contrib/rspack-plugin-react-refresh",
   "license": "MIT",
   "description": "React refresh plugin for Rspack",
@@ -32,24 +32,25 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
-    "@continuous-auth/client": "2.3.2",
-    "@rslib/core": "^0.6.8",
-    "@rspack/core": "1.3.8",
+    "@rslib/core": "^0.11.0",
+    "@rspack/core": "1.4.11",
     "@types/jest": "29.5.14",
-    "@types/node": "^22.15.3",
-    "cross-env": "^7.0.3",
-    "execa": "9.5.2",
+    "@types/node": "^22.17.0",
+    "bumpp": "^10.2.3",
+    "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.1",
-    "simple-git-hooks": "^2.13.0",
-    "ts-jest": "29.3.2",
+    "semver": "7.7.2",
+    "simple-git-hooks": "^2.13.1",
+    "ts-jest": "29.4.0",
     "ts-node": "^10.9.2",
-    "typescript": "5.8.3"
+    "typescript": "5.9.2"
   },
   "dependencies": {
     "error-stack-parser": "^2.1.4",
@@ -66,8 +67,7 @@
   },
   "publishConfig": {
     "access": "public",
-    "registry": "https://registry.npmjs.org/",
-    "provenance": true
+    "registry": "https://registry.npmjs.org/"
   },
   "scripts": {
     "build": "tsc -b ./tsconfig.build.json",
@@ -75,6 +75,7 @@
     "lint": "biome check .",
     "lint:write": "biome check . --write",
     "test": "jest --colors",
-    "release": "node ./scripts/release.mjs"
+    "release": "node ./scripts/release.mjs",
+    "bump": "npx bumpp --no-push --no-tag --no-commit"
   }
 }