refactor: migrate package runtime to ESM

.github/workflows/release.yml

@@ -60,8 +60,8 @@ jobs:
 
       - name: Dry run release to npm
         if: inputs.dry_run
-        run: node scripts/release.mjs --dry-run --tag ${{ inputs.tag }}
+        run: node scripts/release.js --dry-run --tag ${{ inputs.tag }}
 
       - name: Release to npm
         if: ${{ !inputs.dry_run }}
-        run: node scripts/release.mjs --tag ${{ inputs.tag }}
+        run: node scripts/release.js --tag ${{ inputs.tag }}

README.md

@@ -43,12 +43,6 @@ import { ReactRefreshRspackPlugin } from '@rspack/plugin-react-refresh';
 const isDev = process.env.NODE_ENV === 'development';
 
 export default {
-  experiments: {
-    rspackFuture: {
-      disableTransformByDefault: true,
-    },
-  },
-  // ...
   mode: isDev ? 'development' : 'production',
   module: {
     rules: [
@@ -74,7 +68,7 @@ export default {
       },
     ],
   },
-  plugins: [isDev && new ReactRefreshRspackPlugin()].filter(Boolean),
+  plugins: [isDev && new ReactRefreshRspackPlugin()],
 };
 ```
 

client/reactRefresh.js

@@ -1,14 +1,17 @@
-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 currentExports = getModuleExports(moduleId);
   const fn = (exports) => {
     var testMode;
     if (typeof __react_refresh_test__ !== 'undefined') {
       testMode = __react_refresh_test__;
     }
-    RefreshUtils.executeRuntime(exports, moduleId, webpackHot, testMode);
+    executeRuntime(exports, moduleId, webpackHot, testMode);
   };
   if (typeof Promise !== 'undefined' && currentExports instanceof Promise) {
     currentExports.then(fn);
@@ -17,9 +20,4 @@ function refresh(moduleId, webpackHot) {
   }
 }
 
-module.exports = {
-  refresh,
-  register: RefreshRuntime.register,
-  createSignatureFunctionForTransform:
-    RefreshRuntime.createSignatureFunctionForTransform,
-};
+export { createSignatureFunctionForTransform, refresh, register };

client/reactRefreshEntry.js

@@ -1,4 +1,5 @@
-var RefreshRuntime = require('react-refresh/runtime');
+import { injectIntoGlobalHook } from 'react-refresh/runtime';
+
 var safeThis = (function () {
   // copied from core-js-pure/features/global-this
   'use strict';
@@ -37,7 +38,7 @@ if (process.env.NODE_ENV !== 'production') {
 
     // 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;

client/refreshUtils.js

@@ -1,5 +1,10 @@
 /* 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.
@@ -45,7 +50,7 @@ function getModuleExports(moduleId) {
  */
 function getReactRefreshBoundarySignature(moduleExports) {
   var signature = [];
-  signature.push(Refresh.getFamilyByType(moduleExports));
+  signature.push(getFamilyByType(moduleExports));
 
   if (moduleExports == null || typeof moduleExports !== 'object') {
     // Exit if we can't iterate over exports.
@@ -58,7 +63,7 @@ function getReactRefreshBoundarySignature(moduleExports) {
     }
 
     signature.push(key);
-    signature.push(Refresh.getFamilyByType(moduleExports[key]));
+    signature.push(getFamilyByType(moduleExports[key]));
   }
 
   return signature;
@@ -84,7 +89,7 @@ function createDebounceUpdate() {
     if (typeof refreshTimeout === 'undefined') {
       refreshTimeout = setTimeout(function () {
         refreshTimeout = undefined;
-        Refresh.performReactRefresh();
+        performReactRefresh();
         if (callback) {
           callback();
         }
@@ -103,7 +108,7 @@ function createDebounceUpdate() {
  * @returns {boolean} Whether the exports are React component like.
  */
 function isReactRefreshBoundary(moduleExports) {
-  if (Refresh.isLikelyComponentType(moduleExports)) {
+  if (isLikelyComponentType(moduleExports)) {
     return true;
   }
   if (
@@ -130,7 +135,7 @@ function isReactRefreshBoundary(moduleExports) {
     // 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)) {
+    if (!isLikelyComponentType(exportValue)) {
       areAllExportsComponents = false;
     }
   }
@@ -147,9 +152,9 @@ function isReactRefreshBoundary(moduleExports) {
  * @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 (
@@ -168,9 +173,9 @@ function registerExportsForReactRefresh(moduleExports, moduleId) {
     }
 
     var exportValue = moduleExports[key];
-    if (Refresh.isLikelyComponentType(exportValue)) {
+    if (isLikelyComponentType(exportValue)) {
       var typeID = moduleId + ' %exports% ' + key;
-      Refresh.register(exportValue, typeID);
+      register(exportValue, typeID);
     }
   }
 }
@@ -273,11 +278,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.json

@@ -4,12 +4,12 @@
   "repository": "https://github.com/rstackjs/rspack-plugin-react-refresh",
   "license": "MIT",
   "description": "React refresh plugin for Rspack",
-  "type": "commonjs",
+  "type": "module",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "default": "./dist/index.mjs"
+      "default": "./dist/index.js"
     },
     "./react-refresh": "./client/reactRefresh.js",
     "./react-refresh-entry": "./client/reactRefreshEntry.js",
@@ -22,7 +22,7 @@
     "lint:write": "biome check . --write",
     "prepare": "simple-git-hooks && npm run build",
     "test": "rstest",
-    "release": "node ./scripts/release.mjs",
+    "release": "node ./scripts/release.js",
     "bump": "npx bumpp --no-push --no-tag --no-commit"
   },
   "files": ["client", "dist"],

scripts/release.mjs → scripts/release.js

@@ -1,5 +1,5 @@
 import path from 'path';
-import * as url from 'url';
+import { fileURLToPath } from 'url';
 import cac from 'cac';
 import { $ } from 'execa';
 import fs from 'fs-extra';
@@ -16,7 +16,7 @@ cli.option('--tag <tag>', 'The npm tag to publish under (default: canary)', {
   default: 'canary',
 });
 
-const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
 const PKG_PATH = path.resolve(__dirname, '../package.json');
 const pkg = fs.readJsonSync(PKG_PATH);
 const publishVersion = pkg.version;

src/index.ts

@@ -1,13 +1,13 @@
 import type { Compiler } from '@rspack/core';
-import { normalizeOptions } from './options';
-import type { NormalizedPluginOptions, PluginOptions } from './options';
+import { normalizeOptions } from './options.js';
+import type { NormalizedPluginOptions, PluginOptions } from './options.js';
 import {
   getRefreshRuntimeDirPath,
   getRefreshRuntimePaths,
   reactRefreshEntryPath,
   reactRefreshPath,
   refreshUtilsPath,
-} from './paths';
+} from './paths.js';
 
 export type { PluginOptions };
 

src/options.ts

@@ -56,7 +56,6 @@ export type PluginOptions = {
    * @default true
    */
   injectLoader?: boolean;
-
   /**
    * Whether to inject the client/reactRefreshEntry.js
    * @default true

src/paths.ts

@@ -1,26 +1,27 @@
+import { createRequire } from 'node:module';
 import path from 'node:path';
 
 export const reactRefreshPath = path.join(
-  __dirname,
+  import.meta.dirname,
   '../client/reactRefresh.js',
 );
 export const reactRefreshEntryPath = path.join(
-  __dirname,
+  import.meta.dirname,
   '../client/reactRefreshEntry.js',
 );
 export const refreshUtilsPath = path.join(
-  __dirname,
+  import.meta.dirname,
   '../client/refreshUtils.js',
 );
 
+const require = createRequire(import.meta.url);
+
 let refreshRuntimeDirPath: string;
 
 export function getRefreshRuntimeDirPath() {
   if (!refreshRuntimeDirPath) {
     refreshRuntimeDirPath = path.dirname(
-      require.resolve('react-refresh', {
-        paths: [reactRefreshPath],
-      }),
+      require.resolve('react-refresh/runtime'),
     );
   }
   return refreshRuntimeDirPath;

test/fixtures/custom/index.js

@@ -1 +1 @@
-require('foo');
+import 'foo';

test/fixtures/default/index.js

@@ -1,2 +1,3 @@
-require('foo');
-module.exports = 'default';
+import 'foo';
+
+export default 'default';

test/fixtures/loader/index.js

@@ -1 +1 @@
-require('foo');
+import 'foo';

test/fixtures/query/foo.js

@@ -1 +1 @@
-module.exports = 'foo';
+export default 'foo';

test/fixtures/query/index.js

@@ -1 +1 @@
-require('./foo?raw');
+import './foo.js?raw';