refactor: inline react-refresh/runtime

Author: hi-ogawa

packages/vite/src/node/plugins/html.ts

@@ -732,10 +732,6 @@ export function buildHtmlPlugin(config: ResolvedConfig): RolldownPlugin {
 
           await Promise.all(setModuleSideEffectPromises)
 
-          if (config.experimental.rolldownDev?.reactRefresh) {
-            js = `import "virtual:react-refresh/entry";\n${js}`
-          }
-
           // Force rollup to keep this module from being shared between other entry points.
           // If the resulting chunk is empty, it will be removed in generateBundle.
           return { code: js, moduleSideEffects: 'no-treeshake' }

packages/vite/src/node/server/environments/rolldown.ts

@@ -202,8 +202,8 @@ class RolldownEnvironment extends DevEnvironment {
       },
       plugins: [
         ...plugins,
-        patchRuntimePlugin(),
-        reactRefreshPlugin(this.rolldownDevOptions),
+        patchRuntimePlugin(this.rolldownDevOptions),
+        reactRefreshPlugin(),
       ],
     }
     this.instance = await rolldown.rolldown(inputOptions)
@@ -257,7 +257,9 @@ class RolldownEnvironment extends DevEnvironment {
   }
 }
 
-function patchRuntimePlugin(): rolldown.Plugin {
+function patchRuntimePlugin(
+  rolldownDevOptions: RolldownDevOptions,
+): rolldown.Plugin {
   return {
     name: 'vite:rolldown-patch-runtime',
     renderChunk(code) {
@@ -278,6 +280,9 @@ function patchRuntimePlugin(): rolldown.Plugin {
 						}
 						for (var i = 0; i < module.parents.length; i++) {`,
           )
+        if (rolldownDevOptions.reactRefresh) {
+          output.prepend(getReactRefreshRuntimeCode())
+        }
         return { code: output.toString(), map: output.generateMap() }
       }
     },
@@ -320,82 +325,64 @@ window.__rolldown_hot = hot;
   return `(() => {/*** @vite/client ***/\n${code}}\n)()`
 }
 
-// TODO: workaround rolldownExperimental.reactPlugin which injects js to html via `load` hook
-// TODO: can we inject to "react" itself?
-function reactRefreshPlugin(
-  rolldownDevOptions: RolldownDevOptions,
-): rolldown.Plugin {
+function reactRefreshPlugin(): rolldown.Plugin {
   return {
-    name: 'react-hmr',
+    name: 'vite:rolldown-react-refresh',
     transform: {
       filter: {
         code: {
           include: ['$RefreshReg$'],
         },
       },
       handler(code, id) {
-        const output = new MagicString(code)
-        output.prepend(`
-					import * as __$refresh from 'virtual:react-refresh';
-					const [$RefreshSig$, $RefreshReg$] = __$refresh.create(${JSON.stringify(id)});
-				`)
-        output.append(`
-					__$refresh.setupHot(module.hot);
-				`)
-        return { code: output.toString(), map: output.generateMap() }
-      },
-    },
-    resolveId: {
-      filter: {
-        id: {
-          include: [/^virtual:react-refresh/],
-        },
-      },
-      handler: (source) => '\0' + source,
-    },
-    load: {
-      filter: {
-        id: {
-          include: [/^\0virtual:react-refresh/],
-        },
-      },
-      async handler(id) {
-        if (!rolldownDevOptions.reactRefresh) {
-          return `export {}`
-        }
-        const resolved = require.resolve('react-refresh/runtime')
-        if (id === '\0virtual:react-refresh/entry') {
-          return `
-						import runtime from ${JSON.stringify(resolved)};
-						runtime.injectIntoGlobalHook(window);
-					`
-        }
-        if (id === '\0virtual:react-refresh') {
-          return `
-						import runtime from ${JSON.stringify(resolved)};
-
-						export const create = (file) => [
-							runtime.createSignatureFunctionForTransform,
-							(type, id) => runtime.register(type, file + '_' + id),
-						];
-
-						function debounce(fn, delay) {
-							let handle
-							return () => {
-								clearTimeout(handle)
-								handle = setTimeout(fn, delay)
-							}
-						}
-						const debouncedRefresh = debounce(runtime.performReactRefresh, 16);
-
-						export function setupHot(hot) {
-							hot.accept((prev) => {
-								debouncedRefresh();
-							});
-						}
-					`
-        }
+        return [
+          `const [$RefreshSig$, $RefreshReg$] = __react_refresh_transform_define(${JSON.stringify(id)})`,
+          code,
+          `__react_refresh_transform_setupHot(module.hot)`,
+        ].join(';')
       },
     },
   }
 }
+
+// inject react refresh runtime in client runtime to ensure initialized early
+function getReactRefreshRuntimeCode() {
+  const code = fs.readFileSync(
+    path.resolve(
+      require.resolve('react-refresh/runtime'),
+      '..',
+      'cjs/react-refresh-runtime.development.js',
+    ),
+    'utf-8',
+  )
+  const output = new MagicString(code)
+  output.prepend('self.__react_refresh_runtime = {};\n')
+  output.replaceAll('process.env.NODE_ENV !== "production"', 'true')
+  output.replaceAll(/\bexports\./g, '__react_refresh_runtime.')
+  output.append(`
+		(() => {
+			__react_refresh_runtime.injectIntoGlobalHook(self);
+
+			__react_refresh_transform_define = (file) => [
+				__react_refresh_runtime.createSignatureFunctionForTransform,
+				(type, id) => __react_refresh_runtime.register(type, file + '_' + id)
+			];
+
+			__react_refresh_transform_setupHot = (hot) => {
+				hot.accept((prev) => {
+					debouncedRefresh();
+				});
+			};
+
+			function debounce(fn, delay) {
+				let handle
+				return () => {
+					clearTimeout(handle)
+					handle = setTimeout(fn, delay)
+				}
+			}
+			const debouncedRefresh = debounce(__react_refresh_runtime.performReactRefresh, 16);
+		})()
+	`)
+  return output.toString()
+}

playground/rolldown-dev-ssr/src/entry-client.tsx

@@ -1,5 +1,3 @@
-// TODO: how to inject automatically?
-import 'virtual:react-refresh/entry'
 import React from 'react'
 import ReactDOMClient from 'react-dom/client'
 import { App } from './app'