@vitejs/plugin-react-swc 3.9.0-beta.2 → 3.9.0

package/README.md

@@ -93,6 +93,16 @@ react({
 })
 ```
 
+### reactRefreshHost
+
+The `reactRefreshHost` option is only necessary in a module federation context. It enables HMR to work between a remote & host application. In your remote Vite config, you would add your host origin:
+
+```js
+react({ reactRefreshHost: 'http://localhost:3000' })
+```
+
+Under the hood, this simply updates the React Fash Refresh runtime URL from `/@react-refresh` to `http://localhost:3000/@react-refresh` to ensure there is only one Refresh runtime across the whole application. Note that if you define `base` option in the host application, you need to include it in the option, like: `http://localhost:3000/{base}`.
+
 ### useAtYourOwnRisk_mutateSwcOptions
 
 The future of Vite is with OXC, and from the beginning this was a design choice to not exposed too many specialties from SWC so that Vite React users can move to another transformer later.

package/index.cjs

@@ -17,7 +17,7 @@ window.$RefreshReg$ = () => {};
 window.$RefreshSig$ = () => (type) => type;`;
 var getPreambleCode = (base) => preambleCode.replace("__BASE__", base);
 var avoidSourceMapOption = Symbol();
-function addRefreshWrapper(code, map, pluginName, id) {
+function addRefreshWrapper(code, map, pluginName, id, reactRefreshHost = "") {
   const hasRefresh = refreshContentRE.test(code);
   const onlyReactComp = !hasRefresh && reactCompRE.test(code);
   const normalizedMap = map === avoidSourceMapOption ? null : map;
@@ -58,7 +58,7 @@ if (import.meta.hot && !inWebWorker) {
     }
   }
   const sharedHead = removeLineBreaksIfNeeded(
-    `import * as RefreshRuntime from "${runtimePublicPath}";
+    `import * as RefreshRuntime from "${reactRefreshHost}${runtimePublicPath}";
 const inWebWorker = typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope;
 
 `,
@@ -124,6 +124,7 @@ var react = (_options) => {
     plugins: (_options == null ? void 0 : _options.plugins) ? _options == null ? void 0 : _options.plugins.map((el) => [resolve(el[0]), el[1]]) : void 0,
     devTarget: (_options == null ? void 0 : _options.devTarget) ?? "es2020",
     parserConfig: _options == null ? void 0 : _options.parserConfig,
+    reactRefreshHost: _options == null ? void 0 : _options.reactRefreshHost,
     useAtYourOwnRisk_mutateSwcOptions: _options == null ? void 0 : _options.useAtYourOwnRisk_mutateSwcOptions
   };
   return [
@@ -143,6 +144,8 @@ var react = (_options) => {
       apply: "serve",
       config: () => ({
         esbuild: false,
+        // NOTE: oxc option only exists in rolldown-vite
+        oxc: false,
         optimizeDeps: {
           include: [`${options.jsxImportSource}/jsx-dev-runtime`],
           esbuildOptions: { jsx: "automatic" }
@@ -187,7 +190,8 @@ var react = (_options) => {
           result.code,
           result.map,
           "@vitejs/plugin-react-swc",
-          id
+          id,
+          options.reactRefreshHost
         );
       }
     },

package/index.d.ts

@@ -29,6 +29,14 @@ type Options = {
      * Exclusion of node_modules should be handled by the function if needed.
      */
     parserConfig?: (id: string) => ParserConfig | undefined;
+    /**
+     * React Fast Refresh runtime URL prefix.
+     * Useful in a module federation context to enable HMR by specifying
+     * the host application URL in a Vite config of a remote application.
+     * @example
+     * reactRefreshHost: 'http://localhost:3000'
+     */
+    reactRefreshHost?: string;
     /**
      * The future of Vite is with OXC, and from the beginning this was a design choice
      * to not exposed too many specialties from SWC so that Vite React users can move to

package/index.mjs

@@ -19,7 +19,7 @@ window.$RefreshReg$ = () => {};
 window.$RefreshSig$ = () => (type) => type;`;
 var getPreambleCode = (base) => preambleCode.replace("__BASE__", base);
 var avoidSourceMapOption = Symbol();
-function addRefreshWrapper(code, map, pluginName, id) {
+function addRefreshWrapper(code, map, pluginName, id, reactRefreshHost = "") {
   const hasRefresh = refreshContentRE.test(code);
   const onlyReactComp = !hasRefresh && reactCompRE.test(code);
   const normalizedMap = map === avoidSourceMapOption ? null : map;
@@ -60,7 +60,7 @@ if (import.meta.hot && !inWebWorker) {
     }
   }
   const sharedHead = removeLineBreaksIfNeeded(
-    `import * as RefreshRuntime from "${runtimePublicPath}";
+    `import * as RefreshRuntime from "${reactRefreshHost}${runtimePublicPath}";
 const inWebWorker = typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope;
 
 `,
@@ -125,6 +125,7 @@ var react = (_options) => {
     plugins: (_options == null ? void 0 : _options.plugins) ? _options == null ? void 0 : _options.plugins.map((el) => [resolve(el[0]), el[1]]) : void 0,
     devTarget: (_options == null ? void 0 : _options.devTarget) ?? "es2020",
     parserConfig: _options == null ? void 0 : _options.parserConfig,
+    reactRefreshHost: _options == null ? void 0 : _options.reactRefreshHost,
     useAtYourOwnRisk_mutateSwcOptions: _options == null ? void 0 : _options.useAtYourOwnRisk_mutateSwcOptions
   };
   return [
@@ -144,6 +145,8 @@ var react = (_options) => {
       apply: "serve",
       config: () => ({
         esbuild: false,
+        // NOTE: oxc option only exists in rolldown-vite
+        oxc: false,
         optimizeDeps: {
           include: [`${options.jsxImportSource}/jsx-dev-runtime`],
           esbuildOptions: { jsx: "automatic" }
@@ -188,7 +191,8 @@ var react = (_options) => {
           result.code,
           result.map,
           "@vitejs/plugin-react-swc",
-          id
+          id,
+          options.reactRefreshHost
         );
       }
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitejs/plugin-react-swc",
-  "version": "3.9.0-beta.2",
+  "version": "3.9.0",
   "license": "MIT",
   "author": "Arnaud Barré (https://github.com/ArnaudBarre)",
   "description": "Speed up your Vite dev server with SWC",
@@ -23,7 +23,7 @@
   },
   "homepage": "https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react-swc#readme",
   "dependencies": {
-    "@swc/core": "^1.11.11"
+    "@swc/core": "^1.11.21"
   },
   "peerDependencies": {
     "vite": "^4 || ^5 || ^6"