@rspack/plugin-react-refresh 1.6.1 → 2.0.0-beta.0

package/README.md

@@ -8,6 +8,11 @@
 
 React refresh plugin for [Rspack](https://github.com/web-infra-dev/rspack).
 
+## Versions
+
+- `2.x`: For Rspack v2.
+- `1.x`: For Rspack v1, see [v1.x - README](https://github.com/rstackjs/rspack-dev-server/tree/v1.x#rspackdev-server) for usage guide.
+
 ## Installation
 
 First you need to install this plugin and its dependencies:
@@ -26,17 +31,8 @@ bun add @rspack/plugin-react-refresh react-refresh -D
 
 Import the plugin in your code:
 
-- ES modules:
-
-```js
-// Named import (recommended)
-import { ReactRefreshRspackPlugin } from "@rspack/plugin-react-refresh";
-```
-
-- CommonJS:
-
 ```js
-const ReactRefreshRspackPlugin = require("@rspack/plugin-react-refresh");
+import { ReactRefreshRspackPlugin } from '@rspack/plugin-react-refresh';
 ```
 
 ## Usage
@@ -47,27 +43,22 @@ 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";
-
-module.exports = {
-  experiments: {
-    rspackFuture: {
-      disableTransformByDefault: true,
-    },
-  },
-  // ...
-  mode: isDev ? "development" : "production",
+import { ReactRefreshRspackPlugin } from '@rspack/plugin-react-refresh';
+
+const isDev = process.env.NODE_ENV === 'development';
+
+export default {
+  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: {
@@ -82,7 +73,7 @@ module.exports = {
       },
     ],
   },
-  plugins: [isDev && new ReactRefreshPlugin()].filter(Boolean),
+  plugins: [isDev && new ReactRefreshRspackPlugin()],
 };
 ```
 
@@ -98,7 +89,7 @@ Compared to the previous approach, this method decouples the React Fast Refresh
 ### test
 
 - Type: [Rspack.RuleSetCondition](https://rspack.rs/config/module-rules#condition)
-- Default: `undefined`
+- Default: `/\.(?:js|jsx|mjs|cjs|ts|tsx|mts|cts)$/`
 
 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.
 
@@ -113,7 +104,7 @@ new ReactRefreshPlugin({
 ### include
 
 - Type: [Rspack.RuleSetCondition](https://rspack.rs/config/module-rules#condition)
-- Default: `/\.([cm]js|[jt]sx?|flow)$/i`
+- Default: `undefined`
 
 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.
 
@@ -185,33 +176,6 @@ 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/rstackjs/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: {
-    // ...
-  },
-});
-```
-
 ### reloadOnRuntimeErrors
 
 - Type: `boolean`
@@ -232,13 +196,11 @@ new ReactRefreshPlugin({
 - 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.
+By default, the plugin uses the `builtin:react-refresh-loader` loader implementation [from Rspack](https://github.com/web-infra-dev/rspack/tree/main/crates/rspack_loader_react_refresh) to inject the React Refresh utilities into each module. The `reactRefreshLoader` option allows you to specify a loader that implements custom React Refresh instrumentation if needed.
 
 ```js
 new ReactRefreshPlugin({
-    reactRefreshLoader: 'my-advanced-react-refresh-loader',
+  reactRefreshLoader: 'my-advanced-react-refresh-loader',
 });
 ```
 

package/client/reactRefresh.js

@@ -1,35 +1,23 @@
-const RefreshUtils = require('./refreshUtils');
-const RefreshRuntime = require('react-refresh/runtime');
+import {
+  createSignatureFunctionForTransform,
+  register,
+} from 'react-refresh/runtime';
+import { executeRuntime, getModuleExports } from './refreshUtils.js';
 
-function refresh(moduleId, webpackHot) {
-  const currentExports = RefreshUtils.getModuleExports(moduleId);
-  const fn = (exports) => {
-    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,
-    );
+function refresh(moduleId, hot) {
+  const currentExports = getModuleExports(moduleId);
+  const runRefresh = (moduleExports) => {
+    const testMode =
+      typeof __react_refresh_test__ !== 'undefined'
+        ? __react_refresh_test__
+        : undefined;
+    executeRuntime(moduleExports, moduleId, hot, testMode);
   };
   if (typeof Promise !== 'undefined' && currentExports instanceof Promise) {
-    currentExports.then(fn);
+    currentExports.then(runRefresh);
   } else {
-    fn(currentExports);
+    runRefresh(currentExports);
   }
 }
 
-module.exports = {
-  refresh,
-  register: RefreshRuntime.register,
-  createSignatureFunctionForTransform:
-    RefreshRuntime.createSignatureFunctionForTransform,
-};
+export { createSignatureFunctionForTransform, refresh, register };

package/client/reactRefreshEntry.js

@@ -1,20 +1,19 @@
-var RefreshRuntime = require('react-refresh/runtime');
-var safeThis = (function () {
+import { injectIntoGlobalHook } from 'react-refresh/runtime';
+
+const safeThis = (() => {
   // copied from core-js-pure/features/global-this
   'use strict';
 
-  var check = function (it) {
-    return it && it.Math == Math && it;
-  };
+  const check = (it) => it && it.Math === Math && it;
 
   // https://github.com/zloirock/core-js/issues/86#issuecomment-115759028
   // eslint-disable-next-line es/no-global-this -- safe
   return (
-    check(typeof globalThis == 'object' && globalThis) ||
-    check(typeof window == 'object' && window) ||
+    check(typeof globalThis === 'object' && globalThis) ||
+    check(typeof window === 'object' && window) ||
     // eslint-disable-next-line no-restricted-globals -- safe
-    check(typeof self == 'object' && self) ||
-    check(typeof __webpack_require__.g == 'object' && __webpack_require__.g) ||
+    check(typeof self === 'object' && self) ||
+    check(typeof __webpack_require__.g === 'object' && __webpack_require__.g) ||
     // eslint-disable-next-line no-new-func -- fallback
     (function () {
       return this;
@@ -26,18 +25,18 @@ var safeThis = (function () {
 
 if (process.env.NODE_ENV !== 'production') {
   if (typeof safeThis !== 'undefined') {
-    var $RefreshInjected$ = '__reactRefreshInjected';
+    let $RefreshInjected$ = '__reactRefreshInjected';
     // Namespace the injected flag (if necessary) for monorepo compatibility
     if (
       typeof __react_refresh_library__ !== 'undefined' &&
       __react_refresh_library__
     ) {
-      $RefreshInjected$ += '_' + __react_refresh_library__;
+      $RefreshInjected$ += `_${__react_refresh_library__}`;
     }
 
     // Only inject the runtime if it hasn't been injected
     if (!safeThis[$RefreshInjected$]) {
-      RefreshRuntime.injectIntoGlobalHook(safeThis);
+      injectIntoGlobalHook(safeThis);
 
       // Empty implementation to avoid "ReferenceError: variable is not defined" in module which didn't pass builtin:react-refresh-loader
       safeThis.$RefreshSig$ = () => (type) => type;

package/client/refreshUtils.js

@@ -1,9 +1,14 @@
 /* global __webpack_require__ */
-var Refresh = require('react-refresh/runtime');
+import {
+  getFamilyByType,
+  isLikelyComponentType,
+  performReactRefresh,
+  register,
+} from 'react-refresh/runtime';
 
 /**
- * Extracts exports from a webpack module object.
- * @param {string} moduleId A Webpack module ID.
+ * Extracts exports from a Rspack module object.
+ * @param {string} moduleId An Rspack module ID.
  * @returns {*} An exports object from the module.
  */
 function getModuleExports(moduleId) {
@@ -15,23 +20,22 @@ function getModuleExports(moduleId) {
     return {};
   }
 
-  var maybeModule = __webpack_require__.c[moduleId];
+  const maybeModule = __webpack_require__.c[moduleId];
   if (typeof maybeModule === 'undefined') {
     // `moduleId` is available but the module in cache is unavailable,
-    // which indicates the module is somehow corrupted (e.g. broken Webpacak `module` globals).
+    // which indicates the module is somehow corrupted (e.g. broken Rspack `module` globals).
     // We will warn the user (as this is likely a mistake) and assume they cannot be refreshed.
     console.warn(
-      '[React Refresh] Failed to get exports for module: ' + moduleId + '.',
+      `[React Refresh] Failed to get exports for module: ${moduleId}.`,
     );
     return {};
   }
 
-  var exportsOrPromise = maybeModule.exports;
+  const exportsOrPromise = maybeModule.exports;
   if (typeof Promise !== 'undefined' && exportsOrPromise instanceof Promise) {
-    return exportsOrPromise.then(function (exports) {
-      return exports;
-    });
+    return exportsOrPromise.then((moduleExports) => moduleExports);
   }
+
   return exportsOrPromise;
 }
 
@@ -40,25 +44,24 @@ function getModuleExports(moduleId) {
  * If this signature changes, it's unsafe to accept the boundary.
  *
  * This implementation is based on the one in [Metro](https://github.com/facebook/metro/blob/907d6af22ac6ebe58572be418e9253a90665ecbd/packages/metro/src/lib/polyfills/require.js#L795-L816).
- * @param {*} moduleExports A Webpack module exports object.
+ * @param {*} moduleExports An Rspack module exports object.
  * @returns {string[]} A React refresh boundary signature array.
  */
 function getReactRefreshBoundarySignature(moduleExports) {
-  var signature = [];
-  signature.push(Refresh.getFamilyByType(moduleExports));
+  const signature = [getFamilyByType(moduleExports)];
 
   if (moduleExports == null || typeof moduleExports !== 'object') {
     // Exit if we can't iterate over exports.
     return signature;
   }
 
-  for (var key in moduleExports) {
+  for (const key in moduleExports) {
     if (key === '__esModule') {
       continue;
     }
 
     signature.push(key);
-    signature.push(Refresh.getFamilyByType(moduleExports[key]));
+    signature.push(getFamilyByType(moduleExports[key]));
   }
 
   return signature;
@@ -73,22 +76,26 @@ function createDebounceUpdate() {
    * A cached setTimeout handler.
    * @type {number | undefined}
    */
-  var refreshTimeout;
+  let refreshTimeout;
 
   /**
-   * Performs react refresh on a delay and clears the error overlay.
-   * @param {function(): void} callback
+   * Performs React Refresh on a delay.
+   * @param {function(): void} [callback]
    * @returns {void}
    */
-  function enqueueUpdate(callback) {
-    if (typeof refreshTimeout === 'undefined') {
-      refreshTimeout = setTimeout(function () {
-        refreshTimeout = undefined;
-        Refresh.performReactRefresh();
-        callback();
-      }, 30);
+  const enqueueUpdate = (callback) => {
+    if (typeof refreshTimeout !== 'undefined') {
+      return;
     }
-  }
+
+    refreshTimeout = setTimeout(() => {
+      refreshTimeout = undefined;
+      performReactRefresh();
+      if (callback) {
+        callback();
+      }
+    }, 30);
+  };
 
   return enqueueUpdate;
 }
@@ -97,11 +104,11 @@ function createDebounceUpdate() {
  * Checks if all exports are likely a React component.
  *
  * This implementation is based on the one in [Metro](https://github.com/facebook/metro/blob/febdba2383113c88296c61e28e4ef6a7f4939fda/packages/metro/src/lib/polyfills/require.js#L748-L774).
- * @param {*} moduleExports A Webpack module exports object.
+ * @param {*} moduleExports An Rspack module exports object.
  * @returns {boolean} Whether the exports are React component like.
  */
 function isReactRefreshBoundary(moduleExports) {
-  if (Refresh.isLikelyComponentType(moduleExports)) {
+  if (isLikelyComponentType(moduleExports)) {
     return true;
   }
   if (
@@ -113,9 +120,9 @@ function isReactRefreshBoundary(moduleExports) {
     return false;
   }
 
-  var hasExports = false;
-  var areAllExportsComponents = true;
-  for (var key in moduleExports) {
+  let hasExports = false;
+  let areAllExportsComponents = true;
+  for (const key in moduleExports) {
     hasExports = true;
 
     // This is the ES Module indicator flag
@@ -124,11 +131,11 @@ function isReactRefreshBoundary(moduleExports) {
     }
 
     // We can (and have to) safely execute getters here,
-    // as Webpack manually assigns harmony exports to getters,
+    // as Rspack/webpack manually assigns ESM exports to getters,
     // without any side-effects attached.
     // Ref: https://github.com/webpack/webpack/blob/b93048643fe74de2a6931755911da1212df55897/lib/MainTemplate.js#L281
-    var exportValue = moduleExports[key];
-    if (!Refresh.isLikelyComponentType(exportValue)) {
+    const exportValue = moduleExports[key];
+    if (!isLikelyComponentType(exportValue)) {
       areAllExportsComponents = false;
     }
   }
@@ -140,14 +147,14 @@ function isReactRefreshBoundary(moduleExports) {
  * Checks if exports are likely a React component and registers them.
  *
  * This implementation is based on the one in [Metro](https://github.com/facebook/metro/blob/febdba2383113c88296c61e28e4ef6a7f4939fda/packages/metro/src/lib/polyfills/require.js#L818-L835).
- * @param {*} moduleExports A Webpack module exports object.
- * @param {string} moduleId A Webpack module ID.
+ * @param {*} moduleExports An Rspack module exports object.
+ * @param {string} moduleId An Rspack module ID.
  * @returns {void}
  */
 function registerExportsForReactRefresh(moduleExports, moduleId) {
-  if (Refresh.isLikelyComponentType(moduleExports)) {
+  if (isLikelyComponentType(moduleExports)) {
     // Register module.exports if it is likely a component
-    Refresh.register(moduleExports, moduleId + ' %exports%');
+    register(moduleExports, `${moduleId} %exports%`);
   }
 
   if (
@@ -159,16 +166,16 @@ function registerExportsForReactRefresh(moduleExports, moduleId) {
     return;
   }
 
-  for (var key in moduleExports) {
+  for (const key in moduleExports) {
     // Skip registering the ES Module indicator
     if (key === '__esModule') {
       continue;
     }
 
-    var exportValue = moduleExports[key];
-    if (Refresh.isLikelyComponentType(exportValue)) {
-      var typeID = moduleId + ' %exports% ' + key;
-      Refresh.register(exportValue, typeID);
+    const exportValue = moduleExports[key];
+    if (isLikelyComponentType(exportValue)) {
+      const typeID = `${moduleId} %exports% ${key}`;
+      register(exportValue, typeID);
     }
   }
 }
@@ -177,111 +184,87 @@ function registerExportsForReactRefresh(moduleExports, moduleId) {
  * Compares previous and next module objects to check for mutated boundaries.
  *
  * This implementation is based on the one in [Metro](https://github.com/facebook/metro/blob/907d6af22ac6ebe58572be418e9253a90665ecbd/packages/metro/src/lib/polyfills/require.js#L776-L792).
- * @param {*} prevExports The current Webpack module exports object.
- * @param {*} nextExports The next Webpack module exports object.
+ * @param {*} prevExports The current Rspack module exports object.
+ * @param {*} nextExports The next Rspack module exports object.
  * @returns {boolean} Whether the React refresh boundary should be invalidated.
  */
 function shouldInvalidateReactRefreshBoundary(prevExports, nextExports) {
-  var prevSignature = getReactRefreshBoundarySignature(prevExports);
-  var nextSignature = getReactRefreshBoundarySignature(nextExports);
-
-  if (prevSignature.length !== nextSignature.length) {
-    return true;
-  }
-
-  for (var i = 0; i < nextSignature.length; i += 1) {
-    if (prevSignature[i] !== nextSignature[i]) {
-      return true;
-    }
-  }
-
-  return false;
+  const prevSignature = getReactRefreshBoundarySignature(prevExports);
+  const nextSignature = getReactRefreshBoundarySignature(nextExports);
+
+  return (
+    prevSignature.length !== nextSignature.length ||
+    nextSignature.some(
+      (signatureItem, index) => prevSignature[index] !== signatureItem,
+    )
+  );
 }
 
-var enqueueUpdate = createDebounceUpdate();
+const enqueueUpdate = createDebounceUpdate();
 
-function executeRuntime(
-  moduleExports,
-  moduleId,
-  webpackHot,
-  refreshOverlay,
-  isTest,
-) {
+function executeRuntime(moduleExports, moduleId, hot, isTest) {
   registerExportsForReactRefresh(moduleExports, moduleId);
 
-  if (webpackHot) {
-    var isHotUpdate = !!webpackHot.data;
-    var prevExports;
+  if (hot) {
+    const isHotUpdate = Boolean(hot.data);
+    let prevExports;
     if (isHotUpdate) {
-      prevExports = webpackHot.data.prevExports;
+      prevExports = hot.data.prevExports;
     }
 
     if (isReactRefreshBoundary(moduleExports)) {
-      webpackHot.dispose(
-        /**
-         * A callback to performs a full refresh if React has unrecoverable errors,
-         * and also caches the to-be-disposed module.
-         * @param {*} data A hot module data object from Webpack HMR.
-         * @returns {void}
-         */
-        function hotDisposeCallback(data) {
-          // We have to mutate the data object to get data registered and cached
-          data.prevExports = moduleExports;
-        },
-      );
-      webpackHot.accept(
-        /**
-         * An error handler to allow self-recovering behaviours.
-         * @param {Error} error An error occurred during evaluation of a module.
-         * @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);
-          }
-
-          if (typeof isTest !== 'undefined' && isTest) {
-            if (window.onHotAcceptError) {
-              window.onHotAcceptError(error.message);
-            }
-          }
-
-          __webpack_require__.c[moduleId].hot.accept(hotErrorHandler);
-        },
-      );
+      /**
+       * A callback to perform a full refresh if React has unrecoverable errors,
+       * and also caches the to-be-disposed module.
+       * @param {*} data A hot module data object from Rspack HMR.
+       * @returns {void}
+       */
+      const hotDisposeCallback = (data) => {
+        // We have to mutate the data object to get data registered and cached
+        data.prevExports = moduleExports;
+      };
+      /**
+       * An error handler to allow self-recovering behaviors.
+       * @param {Error} error An error occurred during evaluation of a module.
+       * @returns {void}
+       */
+      const hotErrorHandler = (error) => {
+        console.error(error);
+        if (
+          __reload_on_runtime_errors__ &&
+          isUnrecoverableRuntimeError(error)
+        ) {
+          location.reload();
+          return;
+        }
+
+        if (
+          typeof isTest !== 'undefined' &&
+          isTest &&
+          window.onHotAcceptError
+        ) {
+          window.onHotAcceptError(error.message);
+        }
+
+        __webpack_require__.c[moduleId].hot.accept(hotErrorHandler);
+      };
+
+      hot.dispose(hotDisposeCallback);
+      hot.accept(hotErrorHandler);
 
       if (isHotUpdate) {
         if (
           isReactRefreshBoundary(prevExports) &&
           shouldInvalidateReactRefreshBoundary(prevExports, moduleExports)
         ) {
-          webpackHot.invalidate();
+          hot.invalidate();
         } else {
-          enqueueUpdate(
-            /**
-             * A function to dismiss the error overlay after performing React refresh.
-             * @returns {void}
-             */
-            function updateCallback() {
-              if (typeof refreshOverlay !== 'undefined' && refreshOverlay) {
-                refreshOverlay.clearRuntimeErrors();
-              }
-            },
-          );
+          enqueueUpdate();
         }
       }
     } else {
       if (isHotUpdate && typeof prevExports !== 'undefined') {
-        webpackHot.invalidate();
+        hot.invalidate();
       }
     }
   }
@@ -291,11 +274,11 @@ function isUnrecoverableRuntimeError(error) {
   return error.message.startsWith('RuntimeError: factory is undefined');
 }
 
-module.exports = Object.freeze({
-  enqueueUpdate: enqueueUpdate,
-  executeRuntime: executeRuntime,
-  getModuleExports: getModuleExports,
-  isReactRefreshBoundary: isReactRefreshBoundary,
-  shouldInvalidateReactRefreshBoundary: shouldInvalidateReactRefreshBoundary,
-  registerExportsForReactRefresh: registerExportsForReactRefresh,
-});
+export {
+  enqueueUpdate,
+  executeRuntime,
+  getModuleExports,
+  isReactRefreshBoundary,
+  registerExportsForReactRefresh,
+  shouldInvalidateReactRefreshBoundary,
+};

package/dist/index.d.ts

@@ -1,14 +1,9 @@
 import type { Compiler } from '@rspack/core';
-import type { NormalizedPluginOptions, PluginOptions } from './options';
+import type { NormalizedPluginOptions, PluginOptions } from './options.js';
 export type { PluginOptions };
 declare class ReactRefreshRspackPlugin {
     options: NormalizedPluginOptions;
-    /**
-     * @deprecated
-     */
-    static get deprecated_runtimePaths(): string[];
     constructor(options?: PluginOptions);
     apply(compiler: Compiler): void;
 }
 export { ReactRefreshRspackPlugin };
-export default ReactRefreshRspackPlugin;