@vitejs/plugin-react 4.4.0-beta.1 → 4.4.0-beta.2

package/README.md

@@ -94,6 +94,16 @@ This option does not enable _code transformation_. That is handled by esbuild.
 
 Here's the [complete list of Babel parser plugins](https://babeljs.io/docs/en/babel-parser#ecmascript-proposalshttpsgithubcombabelproposals).
 
+### 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}`.
+
 ## Middleware mode
 
 In [middleware mode](https://vite.dev/config/server-options.html#server-middlewaremode), you should make sure your entry `index.html` file is transformed by Vite. Here's an example for an Express server:

package/dist/index.cjs

@@ -17,7 +17,7 @@ window.$RefreshReg$ = () => {};
 window.$RefreshSig$ = () => (type) => type;`;
 const getPreambleCode = (base) => preambleCode.replace("__BASE__", base);
 const 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;
 
 `,
@@ -241,7 +241,8 @@ function viteReact(opts = {}) {
           result.code,
           result.map,
           "@vitejs/plugin-react",
-          id
+          id,
+          opts.reactRefreshHost
         );
       }
     }

package/dist/index.d.cts

@@ -21,6 +21,14 @@ interface Options {
     babel?: BabelOptions | ((id: string, options: {
         ssr?: boolean;
     }) => BabelOptions);
+    /**
+     * React Fast Refresh runtime URL prefix.
+     * Useful in a module federation context to enable HMR by specifying
+     * the host application URL in the Vite config of a remote application.
+     * @example
+     * reactRefreshHost: 'http://localhost:3000'
+     */
+    reactRefreshHost?: string;
 }
 type BabelOptions = Omit<TransformOptions, 'ast' | 'filename' | 'root' | 'sourceFileName' | 'sourceMaps' | 'inputSourceMap'>;
 /**

package/dist/index.d.mts

@@ -21,6 +21,14 @@ interface Options {
     babel?: BabelOptions | ((id: string, options: {
         ssr?: boolean;
     }) => BabelOptions);
+    /**
+     * React Fast Refresh runtime URL prefix.
+     * Useful in a module federation context to enable HMR by specifying
+     * the host application URL in the Vite config of a remote application.
+     * @example
+     * reactRefreshHost: 'http://localhost:3000'
+     */
+    reactRefreshHost?: string;
 }
 type BabelOptions = Omit<TransformOptions, 'ast' | 'filename' | 'root' | 'sourceFileName' | 'sourceMaps' | 'inputSourceMap'>;
 /**

package/dist/index.d.ts

@@ -21,6 +21,14 @@ interface Options {
     babel?: BabelOptions | ((id: string, options: {
         ssr?: boolean;
     }) => BabelOptions);
+    /**
+     * React Fast Refresh runtime URL prefix.
+     * Useful in a module federation context to enable HMR by specifying
+     * the host application URL in the Vite config of a remote application.
+     * @example
+     * reactRefreshHost: 'http://localhost:3000'
+     */
+    reactRefreshHost?: string;
 }
 type BabelOptions = Omit<TransformOptions, 'ast' | 'filename' | 'root' | 'sourceFileName' | 'sourceMaps' | 'inputSourceMap'>;
 /**

package/dist/index.mjs

@@ -14,7 +14,7 @@ window.$RefreshReg$ = () => {};
 window.$RefreshSig$ = () => (type) => type;`;
 const getPreambleCode = (base) => preambleCode.replace("__BASE__", base);
 const 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;
@@ -55,7 +55,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;
 
 `,
@@ -238,7 +238,8 @@ function viteReact(opts = {}) {
           result.code,
           result.map,
           "@vitejs/plugin-react",
-          id
+          id,
+          opts.reactRefreshHost
         );
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitejs/plugin-react",
-  "version": "4.4.0-beta.1",
+  "version": "4.4.0-beta.2",
   "license": "MIT",
   "author": "Evan You",
   "description": "The default Vite plugin for React projects",
@@ -48,11 +48,11 @@
   },
   "homepage": "https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#readme",
   "dependencies": {
-    "@babel/core": "^7.26.0",
+    "@babel/core": "^7.26.10",
     "@babel/plugin-transform-react-jsx-self": "^7.25.9",
     "@babel/plugin-transform-react-jsx-source": "^7.25.9",
     "@types/babel__core": "^7.20.5",
-    "react-refresh": "^0.14.2"
+    "react-refresh": "^0.17.0"
   },
   "peerDependencies": {
     "vite": "^4.2.0 || ^5.0.0 || ^6.0.0"