@rspack/plugin-react-refresh 1.0.0 → 1.0.2

package/README.md

@@ -6,8 +6,8 @@
 # @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://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>
 
@@ -81,6 +81,91 @@ 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.
+
+Checkout [OverlayOptions](https://github.com/rspack-contrib/rspack-plugin-react-refresh/blob/main/src/options.ts#L4) type signature for more details.
+
+- 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.

package/dist/index.js

@@ -4,20 +4,21 @@ 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,
-];
+const getIntegrationEntry_1 = require("./utils/getIntegrationEntry");
+function addEntry(entry, compiler) {
+    new compiler.webpack.EntryPlugin(compiler.context, entry, {
+        name: undefined,
+    }).apply(compiler);
+}
+function addSocketEntry(sockIntegration, compiler) {
+    const integrationEntry = (0, getIntegrationEntry_1.getIntegrationEntry)(sockIntegration);
+    if (integrationEntry) {
+        addEntry(integrationEntry, compiler);
+    }
+}
 class ReactRefreshRspackPlugin {
     constructor(options = {}) {
         this.options = (0, options_1.normalizeOptions)(options);
@@ -38,24 +39,24 @@ class ReactRefreshRspackPlugin {
             options: this.options,
         });
         for (const entry of addEntries.prependEntries) {
-            new compiler.webpack.EntryPlugin(compiler.context, entry, {
-                name: undefined,
-            }).apply(compiler);
+            addEntry(entry, compiler);
+        }
+        if (this.options.overlay !== false &&
+            this.options.overlay.sockIntegration) {
+            addSocketEntry(this.options.overlay.sockIntegration, compiler);
         }
         for (const entry of addEntries.overlayEntries) {
-            new compiler.webpack.EntryPlugin(compiler.context, entry, {
-                name: undefined,
-            }).apply(compiler);
+            addEntry(entry, 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 +67,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 +91,5 @@ class ReactRefreshRspackPlugin {
         };
     }
 }
-ReactRefreshRspackPlugin.deprecated_runtimePaths = runtimePaths;
+ReactRefreshRspackPlugin.deprecated_runtimePaths = paths_1.runtimePaths;
 module.exports = ReactRefreshRspackPlugin;

package/dist/options.d.ts

@@ -1,19 +1,46 @@
+import type { RuleSetCondition } from '@rspack/core';
 import type { IntegrationType } from './utils/getSocketIntegration';
 interface OverlayOptions {
     entry: string;
     module: string;
-    sockIntegration: IntegrationType;
+    sockIntegration: IntegrationType | false;
     sockHost?: string;
     sockPath?: string;
     sockPort?: string;
     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/WHMEventSource.d.ts

@@ -0,0 +1,36 @@
+/**
+ * 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__";
+interface WHMClient {
+    cleanProblemsCache: () => void;
+    problems: () => boolean;
+    success: () => void;
+    useCustomOverlay: (customOverlay: {
+        showProblems: (type: string, data: string[]) => void;
+        clear: () => void;
+    }) => void;
+}
+declare global {
+    interface Window {
+        [singletonKey]: WHMClient;
+    }
+}
+/**
+ * Initializes a socket server for HMR for webpack-hot-middleware.
+ * @param {function(*): void} messageHandler A handler to consume Webpack compilation messages.
+ * @returns {void}
+ */
+export declare function init(messageHandler: (...args: unknown[]) => void): void;
+export {};

package/dist/sockets/WHMEventSource.js

@@ -0,0 +1,34 @@
+"use strict";
+/**
+ * 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
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.init = init;
+/**
+ * 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)
+ */
+const singletonKey = '__webpack_hot_middleware_reporter__';
+/**
+ * Initializes a socket server for HMR for webpack-hot-middleware.
+ * @param {function(*): void} messageHandler A handler to consume Webpack compilation messages.
+ * @returns {void}
+ */
+function init(messageHandler) {
+    const client = window[singletonKey];
+    client.useCustomOverlay({
+        showProblems(type, data) {
+            messageHandler({ type, data });
+        },
+        clear() {
+            messageHandler({ type: 'ok' });
+        },
+    });
+}

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

@@ -0,0 +1,7 @@
+import type { IntegrationType } from './getSocketIntegration';
+/**
+ * Gets entry point of a supported socket integration.
+ * @param integrationType A valid socket integration type or a path to a module.
+ * @returns Path to the resolved integration entry point.
+ */
+export declare function getIntegrationEntry(integrationType: IntegrationType): string | undefined;

package/dist/utils/getIntegrationEntry.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getIntegrationEntry = getIntegrationEntry;
+/**
+ * Gets entry point of a supported socket integration.
+ * @param integrationType A valid socket integration type or a path to a module.
+ * @returns Path to the resolved integration entry point.
+ */
+function getIntegrationEntry(integrationType) {
+    let resolvedEntry;
+    switch (integrationType) {
+        case 'whm': {
+            resolvedEntry = 'webpack-hot-middleware/client';
+            break;
+        }
+    }
+    return resolvedEntry;
+}

package/dist/utils/getSocketIntegration.d.ts

@@ -1,2 +1,2 @@
-export type IntegrationType = 'wds';
+export type IntegrationType = 'wds' | 'whm' | (string & {});
 export declare function getSocketIntegration(integrationType: IntegrationType): string;

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) {
@@ -8,6 +8,10 @@ function getSocketIntegration(integrationType) {
             resolvedSocketIntegration = require.resolve('../sockets/WDSSocket');
             break;
         }
+        case 'whm': {
+            resolvedSocketIntegration = require.resolve('../sockets/WHMEventSource');
+            break;
+        }
         default: {
             resolvedSocketIntegration = require.resolve(integrationType);
             break;
@@ -15,4 +19,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",
+  "version": "1.0.2",
   "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,32 +28,35 @@
     ]
   },
   "devDependencies": {
-    "@biomejs/biome": "^1.8.3",
-    "@rspack/core": "1.0.0-beta.4",
-    "@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/jest": "29.5.14",
+    "@types/node": "^22.10.1",
     "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",
     "jest-environment-node": "29.7.0",
     "nano-staged": "^0.8.0",
+    "react-refresh": "^0.14.2",
     "semver": "7.6.3",
     "simple-git-hooks": "^2.11.1",
-    "ts-jest": "29.1.2",
-    "typescript": "5.0.2"
+    "ts-jest": "29.2.5",
+    "ts-node": "^10.9.2",
+    "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",
+    "@continuous-auth/client": "2.3.2"
   },
   "peerDependencies": {
-    "react-refresh": ">=0.10.0 <1.0.0"
+    "react-refresh": ">=0.10.0 <1.0.0",
+    "webpack-hot-middleware": "2.x"
   },
   "peerDependenciesMeta": {
-    "react-refresh": {
+    "webpack-hot-middleware": {
       "optional": true
     }
   },