@rspack/plugin-react-refresh 1.0.0-beta.5 → 1.0.1

package/README.md

@@ -5,6 +5,12 @@
 
 # @rspack/plugin-react-refresh
 
+<p>
+  <a href="https://www.npmjs.com/package/@rspack/plugin-react-refresh?activeTab=readme"><img src="https://img.shields.io/npm/v/@rspack/plugin-react-refresh?style=flat-square&colorA=564341&colorB=EDED91" alt="npm version" /></a>
+  <a href="https://npmcharts.com/compare/@rspack/plugin-react-refresh?minimal=true"><img src="https://img.shields.io/npm/dm/@rspack/plugin-react-refresh.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="downloads" /></a>
+  <a href="https://github.com/web-infra-dev/rspack/blob/main/LICENSE"><img src="https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="license" /></a>
+</p>
+
 React refresh plugin for [Rspack](https://github.com/web-infra-dev/rspack).
 
 ## Installation
@@ -29,8 +35,8 @@ Enabling [React Fast Refresh](https://reactnative.dev/docs/fast-refresh) functio
 - Code transformation can be added through loaders, such as [jsc.transform.react.refresh](https://swc.rs/docs/configuration/compilation#jsctransformreactrefresh) for [swc-loader](https://swc.rs/docs/usage/swc-loader) or the [react-refresh/babel](https://github.com/facebook/react/tree/main/packages/react-refresh) for [babel-loader](https://github.com/babel/babel-loader).
 
 ```js
-const ReactRefreshPlugin = require('@rspack/plugin-react-refresh');
-const isDev = process.env.NODE_ENV === 'development';
+const ReactRefreshPlugin = require("@rspack/plugin-react-refresh");
+const isDev = process.env.NODE_ENV === "development";
 
 module.exports = {
   experiments: {
@@ -39,17 +45,17 @@ module.exports = {
     },
   },
   // ...
-  mode: isDev ? 'development' : 'production',
+  mode: isDev ? "development" : "production",
   module: {
     rules: [
       {
         test: /\.jsx$/,
         use: {
-          loader: 'builtin:swc-loader',
+          loader: "builtin:swc-loader",
           options: {
             jsc: {
               parser: {
-                syntax: 'ecmascript',
+                syntax: "ecmascript",
                 jsx: true,
               },
               transform: {
@@ -75,6 +81,93 @@ Compared to the previous approach, this method decouples the React Fast Refresh
 - 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)
 
+## Options
+
+### 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` option in Rspack.
+
+```js
+new ReactRefreshPlugin({
+  include: [/\.jsx$/, /\.tsx$/],
+});
+```
+
+### exclude
+
+- Type: [Rspack.RuleSetCondition](https://rspack.dev/config/module#condition)
+- Default: `/node_modules/`
+
+Exclude files from being processed by the plugin. The value is the same as the `rule.exclude` option in Rspack.
+
+```js
+new ReactRefreshPlugin({
+  exclude: [/node_modules/, /some-other-module/],
+});
+```
+
+### forceEnable
+
+- Type: `boolean`
+- Default: `false`
+
+Whether to force enable the plugin.
+
+By default, the plugin will not be enabled in non-development environments. If you want to force enable the plugin, you can set this option to `true`.
+
+```js
+new ReactRefreshPlugin({
+  forceEnable: true,
+});
+```
+
+It is useful if you want to:
+
+- Use the plugin in production.
+- Use the plugin with the `none` mode without setting `NODE_ENV`.
+- Use the plugin in environments we do not support, such as `electron-prerender` (**WARNING: Proceed at your own risk**).
+
+### library
+
+- Type: `string`
+- Default: `output.uniqueName || output.library`
+
+Sets a namespace for the React Refresh runtime.
+
+It is most useful when multiple instances of React Refresh is running together simultaneously.
+
+### overlay
+
+- Type: `boolean | OverlayOptions`
+- Default: `false`
+
+Modify the behavior of the error overlay.
+
+- Enable the error overlay:
+
+```js
+new ReactRefreshPlugin({
+  overlay: true,
+});
+```
+
+- Configure the error overlay:
+
+```js
+new ReactRefreshPlugin({
+  overlay: {
+    // ...
+  },
+});
+```
+
+## 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.
+
 ## License
 
-Rspack is [MIT licensed](https://github.com/web-infra-dev/rspack/blob/main/LICENSE).
+`@rspack/plugin-react-refresh` is [MIT licensed](https://github.com/web-infra-dev/rspack/blob/main/LICENSE).

package/dist/index.js

@@ -4,20 +4,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 const node_path_1 = __importDefault(require("node:path"));
 const options_1 = require("./options");
+const paths_1 = require("./paths");
 const getAdditionalEntries_1 = require("./utils/getAdditionalEntries");
 const getSocketIntegration_1 = require("./utils/getSocketIntegration");
-const reactRefreshPath = require.resolve('../client/reactRefresh.js');
-const reactRefreshEntryPath = require.resolve('../client/reactRefreshEntry.js');
-const refreshUtilsPath = require.resolve('../client/refreshUtils.js');
-const refreshRuntimeDirPath = node_path_1.default.dirname(require.resolve('react-refresh', {
-    paths: [reactRefreshPath],
-}));
-const runtimePaths = [
-    reactRefreshEntryPath,
-    reactRefreshPath,
-    refreshUtilsPath,
-    refreshRuntimeDirPath,
-];
 class ReactRefreshRspackPlugin {
     constructor(options = {}) {
         this.options = (0, options_1.normalizeOptions)(options);
@@ -48,14 +37,14 @@ class ReactRefreshRspackPlugin {
             }).apply(compiler);
         }
         new compiler.webpack.ProvidePlugin({
-            $ReactRefreshRuntime$: reactRefreshPath,
+            $ReactRefreshRuntime$: paths_1.reactRefreshPath,
         }).apply(compiler);
         compiler.options.module.rules.unshift({
             // biome-ignore lint: exists
             include: this.options.include,
             exclude: {
                 // biome-ignore lint: exists
-                or: [this.options.exclude, [...runtimePaths]].filter(Boolean),
+                or: [this.options.exclude, [...paths_1.runtimePaths]].filter(Boolean),
             },
             use: 'builtin:react-refresh-loader',
         });
@@ -66,7 +55,7 @@ class ReactRefreshRspackPlugin {
                 compiler.options.output.library)),
         };
         const providedModules = {
-            __react_refresh_utils__: refreshUtilsPath,
+            __react_refresh_utils__: paths_1.refreshUtilsPath,
         };
         if (this.options.overlay === false) {
             // Stub errorOverlay module so their calls can be erased
@@ -90,5 +79,5 @@ class ReactRefreshRspackPlugin {
         };
     }
 }
-ReactRefreshRspackPlugin.deprecated_runtimePaths = runtimePaths;
+ReactRefreshRspackPlugin.deprecated_runtimePaths = paths_1.runtimePaths;
 module.exports = ReactRefreshRspackPlugin;

package/dist/options.d.ts

@@ -1,3 +1,4 @@
+import type { RuleSetCondition } from '@rspack/core';
 import type { IntegrationType } from './utils/getSocketIntegration';
 interface OverlayOptions {
     entry: string;
@@ -9,11 +10,37 @@ interface OverlayOptions {
     sockProtocol?: string;
 }
 export type PluginOptions = {
-    include?: string | RegExp | (string | RegExp)[] | null;
-    exclude?: string | RegExp | (string | RegExp)[] | null;
+    /**
+     * 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
+     */
+    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/
+     */
+    exclude?: RuleSetCondition | null;
+    /**
+     * Sets a namespace for the React Refresh runtime.
+     * It is most useful when multiple instances of React Refresh is running
+     * together simultaneously.
+     * @default `output.uniqueName || output.library`
+     */
     library?: string;
+    /**
+     * Whether to force enable the plugin.
+     * By default, the plugin will not be enabled in non-development environments.
+     * If you want to force enable the plugin, you can set this option to `true`.
+     * @default false
+     */
     forceEnable?: boolean;
-    overlay?: boolean | OverlayOptions;
+    /**
+     * Modify the behavior of the error overlay.
+     * @default false
+     */
+    overlay?: boolean | Partial<OverlayOptions>;
 };
 export interface NormalizedPluginOptions extends Required<PluginOptions> {
     overlay: false | OverlayOptions;

package/dist/options.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.normalizeOptions = void 0;
+exports.normalizeOptions = normalizeOptions;
 const d = (object, property, defaultValue) => {
     // TODO: should we also add default for null?
     if (typeof object[property] === 'undefined' &&
@@ -35,4 +35,3 @@ function normalizeOptions(options) {
     options.overlay = normalizeOverlay(options.overlay);
     return options;
 }
-exports.normalizeOptions = normalizeOptions;

package/dist/paths.d.ts

@@ -0,0 +1,5 @@
+export declare const reactRefreshPath: string;
+export declare const reactRefreshEntryPath: string;
+export declare const refreshUtilsPath: string;
+export declare const refreshRuntimeDirPath: string;
+export declare const runtimePaths: string[];

package/dist/paths.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.runtimePaths = exports.refreshRuntimeDirPath = exports.refreshUtilsPath = exports.reactRefreshEntryPath = exports.reactRefreshPath = void 0;
+const node_path_1 = __importDefault(require("node:path"));
+exports.reactRefreshPath = require.resolve('../client/reactRefresh.js');
+exports.reactRefreshEntryPath = require.resolve('../client/reactRefreshEntry.js');
+exports.refreshUtilsPath = require.resolve('../client/refreshUtils.js');
+exports.refreshRuntimeDirPath = node_path_1.default.dirname(require.resolve('react-refresh', {
+    paths: [exports.reactRefreshPath],
+}));
+exports.runtimePaths = [
+    exports.reactRefreshEntryPath,
+    exports.reactRefreshPath,
+    exports.refreshUtilsPath,
+    exports.refreshRuntimeDirPath,
+];

package/dist/sockets/WDSSocket.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.init = void 0;
+exports.init = init;
 /**
  * The following code is modified based on
  * https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/f1c8b9a44198449093ca95f85af5df97925e1cfc/sockets/WDSSocket.js
@@ -40,4 +40,3 @@ function init(messageHandler, resourceQuery) {
         });
     }
 }
-exports.init = init;

package/dist/sockets/utils/getCurrentScriptSource.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = getCurrentScriptSource;
 function getCurrentScriptSource() {
     // `document.currentScript` is the most accurate way to get the current running script,
     // but is not supported in all browsers (most notably, IE).
@@ -19,4 +20,3 @@ function getCurrentScriptSource() {
     const currentScript = scriptElementsWithSrc[scriptElementsWithSrc.length - 1];
     return currentScript.getAttribute('src');
 }
-exports.default = getCurrentScriptSource;

package/dist/sockets/utils/getSocketUrlParts.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = getSocketUrlParts;
 const getCurrentScriptSource_1 = __importDefault(require("./getCurrentScriptSource"));
 function getSocketUrlParts(resourceQuery, metadata = {}) {
     const urlParts = {};
@@ -105,4 +106,3 @@ function getSocketUrlParts(resourceQuery, metadata = {}) {
         port: urlParts.port || undefined,
     };
 }
-exports.default = getSocketUrlParts;

package/dist/sockets/utils/getUrlFromParts.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = urlFromParts;
 /**
  * Create a valid URL from parsed URL parts.
  * @param urlParts The parsed URL parts.
@@ -26,4 +27,3 @@ function urlFromParts(urlParts, metadata = {}) {
     const url = new URL(urlParts.pathname, fullProtocol + fullHost);
     return url.href;
 }
-exports.default = urlFromParts;

package/dist/sockets/utils/getWDSMetadata.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = getWDSMetadata;
 function getWDSMetadata(SocketClient) {
     let enforceWs = false;
     if (typeof SocketClient.name !== 'undefined' &&
@@ -27,4 +28,3 @@ function getWDSMetadata(SocketClient) {
         version: version,
     };
 }
-exports.default = getWDSMetadata;

package/dist/utils/getAdditionalEntries.js

@@ -3,8 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getAdditionalEntries = void 0;
+exports.getAdditionalEntries = getAdditionalEntries;
 const node_querystring_1 = __importDefault(require("node:querystring"));
+const paths_1 = require("../paths");
 function getAdditionalEntries({ devServer, options, }) {
     const resourceQuery = {};
     if (devServer) {
@@ -75,7 +76,7 @@ function getAdditionalEntries({ devServer, options, }) {
     });
     const prependEntries = [
         // React-refresh runtime
-        require.resolve('../../client/reactRefreshEntry'),
+        paths_1.reactRefreshEntryPath,
     ];
     const overlayEntries = [
         // Error overlay runtime
@@ -85,4 +86,3 @@ function getAdditionalEntries({ devServer, options, }) {
     ].filter(Boolean);
     return { prependEntries, overlayEntries };
 }
-exports.getAdditionalEntries = getAdditionalEntries;

package/dist/utils/getSocketIntegration.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getSocketIntegration = void 0;
+exports.getSocketIntegration = getSocketIntegration;
 function getSocketIntegration(integrationType) {
     let resolvedSocketIntegration;
     switch (integrationType) {
@@ -15,4 +15,3 @@ function getSocketIntegration(integrationType) {
     }
     return resolvedSocketIntegration;
 }
-exports.getSocketIntegration = getSocketIntegration;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rspack/plugin-react-refresh",
-  "version": "1.0.0-beta.5",
+  "version": "1.0.1",
   "repository": "https://github.com/rspack-contrib/rspack-plugin-react-refresh",
   "license": "MIT",
   "description": "React refresh plugin for rspack",
@@ -12,6 +12,7 @@
     },
     "./react-refresh": "./client/reactRefresh.js",
     "./react-refresh-entry": "./client/reactRefreshEntry.js",
+    "./overlay": "./client/overlay/index.js",
     "./package.json": "./package.json"
   },
   "files": [
@@ -27,15 +28,13 @@
     ]
   },
   "devDependencies": {
-    "@biomejs/biome": "^1.8.3",
-    "@rspack/core": "1.0.0-beta.3",
-    "@rspack/test-tools": "1.0.0-beta.3",
-    "@rspack/dev-server": "1.0.0-beta.3",
-    "@types/node": "^20.14.13",
-    "@types/jest": "29.5.12",
-    "react-refresh": "^0.14.0",
+    "@biomejs/biome": "^1.9.4",
+    "@rspack/core": "1.1.4",
+    "@types/node": "^22.10.1",
+    "@types/jest": "29.5.14",
+    "react-refresh": "^0.14.2",
     "cross-env": "^7.0.3",
-    "execa": "9.3.0",
+    "execa": "9.5.1",
     "fs-extra": "11.2.0",
     "jest": "29.7.0",
     "jest-cli": "29.7.0",
@@ -43,12 +42,12 @@
     "nano-staged": "^0.8.0",
     "semver": "7.6.3",
     "simple-git-hooks": "^2.11.1",
-    "ts-jest": "29.1.2",
-    "typescript": "5.0.2"
+    "ts-jest": "29.2.5",
+    "typescript": "5.7.2"
   },
   "dependencies": {
-    "error-stack-parser": "^2.0.6",
-    "html-entities": "^2.1.0"
+    "error-stack-parser": "^2.1.4",
+    "html-entities": "^2.5.2"
   },
   "peerDependencies": {
     "react-refresh": ">=0.10.0 <1.0.0"