feat: add backwards compatible option reactRefreshPrefix

Author: i

packages/plugin-react/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 ## Unreleased
 
+### Add backwards compatible option `reactRefreshPrefix`
+
+Add backwards compatible option `reactRefreshPrefix` to set React refresh runtime url prefix.
+This is useful in module federation context to enable HMR by setting the host url on a vite config which is serving a remote app.
+See full discussion here: https://github.com/module-federation/vite/issues/183#issuecomment-2751825367
+
+```ts
+export default defineConfig(({ command }) => {
+  return {
+    plugins: [react({ reactRefreshPrefix: 'http://localhost:3000' })],
+  }
+})
+```
+
 ## 4.3.4 (2024-11-26)
 
 ### Add Vite 6 to peerDependencies range

packages/plugin-react/src/fast-refresh.ts

@@ -1,8 +1,11 @@
 import fs from 'node:fs'
 import path from 'node:path'
 import { createRequire } from 'node:module'
+import { type Options } from './index'
 
-export const runtimePublicPath = '/@react-refresh'
+export const runtimePublicPath = (
+  reactRefreshPrefix?: Options['reactRefreshPrefix'],
+): string => `${reactRefreshPrefix ?? ''}/@react-refresh`
 
 const _require = createRequire(import.meta.url)
 const reactRefreshDir = path.dirname(
@@ -21,15 +24,16 @@ export default exports
 `
 
 export const preambleCode = `
-import RefreshRuntime from "__BASE__${runtimePublicPath.slice(1)}"
+import RefreshRuntime from "__BASE__${runtimePublicPath().slice(1)}"
 RefreshRuntime.injectIntoGlobalHook(window)
 window.$RefreshReg$ = () => {}
 window.$RefreshSig$ = () => (type) => type
 window.__vite_plugin_react_preamble_installed__ = true
 `
 
-const sharedHeader = `
-import RefreshRuntime from "${runtimePublicPath}";
+const sharedHeader = (opts: Options) =>
+  `
+import RefreshRuntime from "${runtimePublicPath(opts.reactRefreshPrefix)}";
 
 const inWebWorker = typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope;
 `.replace(/\n+/g, '')
@@ -74,9 +78,13 @@ if (import.meta.hot && !inWebWorker) {
   });
 }`
 
-export function addRefreshWrapper(code: string, id: string): string {
+export function addRefreshWrapper(
+  code: string,
+  id: string,
+  opts: Options,
+): string {
   return (
-    sharedHeader +
+    sharedHeader(opts) +
     functionHeader.replace('__SOURCE__', JSON.stringify(id)) +
     code +
     functionFooter +
@@ -87,6 +95,7 @@ export function addRefreshWrapper(code: string, id: string): string {
 export function addClassComponentRefreshWrapper(
   code: string,
   id: string,
+  opts: Options,
 ): string {
-  return sharedHeader + code + sharedFooter(id)
+  return sharedHeader(opts) + code + sharedFooter(id)
 }

packages/plugin-react/src/index.ts

@@ -47,6 +47,14 @@ export interface Options {
   babel?:
     | BabelOptions
     | ((id: string, options: { ssr?: boolean }) => BabelOptions)
+  /**
+   * React refresh runtime url prefix.
+   * Useful in module federation context to enable HMR by
+   * setting the host url on a vite config which is serving a remote app.
+   * @example
+   * reactRefreshPrefix: 'http://localhost:3000'
+   */
+  reactRefreshPrefix?: string
 }
 
 export type BabelOptions = Omit<
@@ -261,9 +269,9 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
         let code = result.code!
         if (useFastRefresh) {
           if (refreshContentRE.test(code)) {
-            code = addRefreshWrapper(code, id)
+            code = addRefreshWrapper(code, id, opts)
           } else if (reactCompRE.test(code)) {
-            code = addClassComponentRefreshWrapper(code, id)
+            code = addClassComponentRefreshWrapper(code, id, opts)
           }
         }
         return { code, map: result.map }
@@ -299,12 +307,12 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
       },
     }),
     resolveId(id) {
-      if (id === runtimePublicPath) {
+      if (id === runtimePublicPath(opts.reactRefreshPrefix)) {
         return id
       }
     },
     load(id) {
-      if (id === runtimePublicPath) {
+      if (id === runtimePublicPath(opts.reactRefreshPrefix)) {
         return runtimeCode
       }
     },