@remotion/browser-bundler 4.0.539 → 4.0.540

package/dist/compiler.js

@@ -401,23 +401,22 @@ var getBrowserReactRefreshVirtualFiles = ({
   runtime,
   utils
 }) => {
-  if (typeof { entry: `var RefreshRuntime = require('react-refresh/runtime');
-var safeThis = (function () {
+  if (typeof { entry: `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;
@@ -429,18 +428,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;
@@ -451,47 +450,40 @@ if (process.env.NODE_ENV !== 'production') {
     }
   }
 }
-`, runtime: `const RefreshUtils = require('./refreshUtils');
-const RefreshRuntime = require('react-refresh/runtime');
-
-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,
-    );
+`, runtime: `import {
+  createSignatureFunctionForTransform,
+  register,
+} from 'react-refresh/runtime';
+import { executeRuntime, getModuleExports } from './refreshUtils.js';
+
+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 };
 `, utils: `/* 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) {
@@ -503,23 +495,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;
 }
 
@@ -528,25 +519,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;
@@ -561,22 +551,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;
 }
@@ -585,11 +579,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 (
@@ -601,9 +595,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
@@ -612,11 +606,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;
     }
   }
@@ -628,14 +622,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 (
@@ -647,16 +641,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);
     }
   }
 }
@@ -665,111 +659,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;
-    }
-  }
+  const prevSignature = getReactRefreshBoundarySignature(prevExports);
+  const nextSignature = getReactRefreshBoundarySignature(nextExports);
 
-  return false;
+  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;
-          }
+      /**
+       * 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 refreshOverlay !== 'undefined' && refreshOverlay) {
-            refreshOverlay.handleRuntimeError(error);
-          }
+        if (
+          typeof isTest !== 'undefined' &&
+          isTest &&
+          window.onHotAcceptError
+        ) {
+          window.onHotAcceptError(error.message);
+        }
 
-          if (typeof isTest !== 'undefined' && isTest) {
-            if (window.onHotAcceptError) {
-              window.onHotAcceptError(error.message);
-            }
-          }
+        __webpack_require__.c[moduleId].hot.accept(hotErrorHandler);
+      };
 
-          __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();
       }
     }
   }
@@ -779,35 +749,34 @@ 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,
+};
 ` } === "undefined") {
     throw new Error("Browser bundler React Refresh files were not injected.");
   }
   return {
-    [entry]: { entry: `var RefreshRuntime = require('react-refresh/runtime');
-var safeThis = (function () {
+    [entry]: { entry: `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;
@@ -819,18 +788,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;
@@ -841,47 +810,40 @@ if (process.env.NODE_ENV !== 'production') {
     }
   }
 }
-`, runtime: `const RefreshUtils = require('./refreshUtils');
-const RefreshRuntime = require('react-refresh/runtime');
-
-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,
-    );
+`, runtime: `import {
+  createSignatureFunctionForTransform,
+  register,
+} from 'react-refresh/runtime';
+import { executeRuntime, getModuleExports } from './refreshUtils.js';
+
+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 };
 `, utils: `/* 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) {
@@ -893,23 +855,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;
 }
 
@@ -918,25 +879,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;
@@ -951,22 +911,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;
 }
@@ -975,11 +939,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 (
@@ -991,9 +955,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
@@ -1002,11 +966,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;
     }
   }
@@ -1018,14 +982,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 (
@@ -1037,16 +1001,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);
     }
   }
 }
@@ -1055,111 +1019,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;
-    }
-  }
+  const prevSignature = getReactRefreshBoundarySignature(prevExports);
+  const nextSignature = getReactRefreshBoundarySignature(nextExports);
 
-  return false;
+  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;
-          }
+      /**
+       * 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 refreshOverlay !== 'undefined' && refreshOverlay) {
-            refreshOverlay.handleRuntimeError(error);
-          }
+        if (
+          typeof isTest !== 'undefined' &&
+          isTest &&
+          window.onHotAcceptError
+        ) {
+          window.onHotAcceptError(error.message);
+        }
 
-          if (typeof isTest !== 'undefined' && isTest) {
-            if (window.onHotAcceptError) {
-              window.onHotAcceptError(error.message);
-            }
-          }
+        __webpack_require__.c[moduleId].hot.accept(hotErrorHandler);
+      };
 
-          __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();
       }
     }
   }
@@ -1169,32 +1109,31 @@ 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,
+};
 ` }.entry,
-    [runtime]: { entry: `var RefreshRuntime = require('react-refresh/runtime');
-var safeThis = (function () {
+    [runtime]: { entry: `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;
@@ -1206,18 +1145,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;
@@ -1228,47 +1167,40 @@ if (process.env.NODE_ENV !== 'production') {
     }
   }
 }
-`, runtime: `const RefreshUtils = require('./refreshUtils');
-const RefreshRuntime = require('react-refresh/runtime');
-
-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,
-    );
+`, runtime: `import {
+  createSignatureFunctionForTransform,
+  register,
+} from 'react-refresh/runtime';
+import { executeRuntime, getModuleExports } from './refreshUtils.js';
+
+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 };
 `, utils: `/* 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) {
@@ -1280,23 +1212,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;
 }
 
@@ -1305,25 +1236,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;
@@ -1338,22 +1268,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;
 }
@@ -1362,11 +1296,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 (
@@ -1378,9 +1312,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
@@ -1389,11 +1323,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;
     }
   }
@@ -1405,14 +1339,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 (
@@ -1424,16 +1358,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);
     }
   }
 }
@@ -1442,111 +1376,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;
-    }
-  }
+  const prevSignature = getReactRefreshBoundarySignature(prevExports);
+  const nextSignature = getReactRefreshBoundarySignature(nextExports);
 
-  return false;
+  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;
-          }
+      /**
+       * 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 refreshOverlay !== 'undefined' && refreshOverlay) {
-            refreshOverlay.handleRuntimeError(error);
-          }
+        if (
+          typeof isTest !== 'undefined' &&
+          isTest &&
+          window.onHotAcceptError
+        ) {
+          window.onHotAcceptError(error.message);
+        }
 
-          if (typeof isTest !== 'undefined' && isTest) {
-            if (window.onHotAcceptError) {
-              window.onHotAcceptError(error.message);
-            }
-          }
+        __webpack_require__.c[moduleId].hot.accept(hotErrorHandler);
+      };
 
-          __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();
       }
     }
   }
@@ -1556,32 +1466,31 @@ 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,
+};
 ` }.runtime,
-    [utils]: { entry: `var RefreshRuntime = require('react-refresh/runtime');
-var safeThis = (function () {
+    [utils]: { entry: `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;
@@ -1593,18 +1502,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;
@@ -1615,47 +1524,40 @@ if (process.env.NODE_ENV !== 'production') {
     }
   }
 }
-`, runtime: `const RefreshUtils = require('./refreshUtils');
-const RefreshRuntime = require('react-refresh/runtime');
-
-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,
-    );
+`, runtime: `import {
+  createSignatureFunctionForTransform,
+  register,
+} from 'react-refresh/runtime';
+import { executeRuntime, getModuleExports } from './refreshUtils.js';
+
+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 };
 `, utils: `/* 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) {
@@ -1667,23 +1569,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;
 }
 
@@ -1692,25 +1593,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;
@@ -1725,22 +1625,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;
 }
@@ -1749,11 +1653,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 (
@@ -1765,9 +1669,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
@@ -1776,11 +1680,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;
     }
   }
@@ -1792,14 +1696,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 (
@@ -1811,16 +1715,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);
     }
   }
 }
@@ -1829,111 +1733,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;
-    }
-  }
+  const prevSignature = getReactRefreshBoundarySignature(prevExports);
+  const nextSignature = getReactRefreshBoundarySignature(nextExports);
 
-  return false;
+  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;
-          }
+      /**
+       * 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 refreshOverlay !== 'undefined' && refreshOverlay) {
-            refreshOverlay.handleRuntimeError(error);
-          }
+        if (
+          typeof isTest !== 'undefined' &&
+          isTest &&
+          window.onHotAcceptError
+        ) {
+          window.onHotAcceptError(error.message);
+        }
 
-          if (typeof isTest !== 'undefined' && isTest) {
-            if (window.onHotAcceptError) {
-              window.onHotAcceptError(error.message);
-            }
-          }
+        __webpack_require__.c[moduleId].hot.accept(hotErrorHandler);
+      };
 
-          __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();
       }
     }
   }
@@ -1943,14 +1823,14 @@ 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,
+};
 ` }.utils
   };
 };