feat: auto inject hmr preamble without transformIndexHtml

Author: hi-ogawa

packages/common/refresh-utils.ts

@@ -12,7 +12,8 @@ export const preambleCode = `import { injectIntoGlobalHook } from "__BASE__${run
 )}";
 injectIntoGlobalHook(window);
 window.$RefreshReg$ = () => {};
-window.$RefreshSig$ = () => (type) => type;`
+window.$RefreshSig$ = () => (type) => type;
+`
 
 export const getPreambleCode = (base: string): string =>
   preambleCode.replace('__BASE__', base)
@@ -94,5 +95,13 @@ export function virtualPreamblePlugin({
         }
       },
     },
+    transform: {
+      filter: { code: /__REACT_DEVTOOLS_GLOBAL_HOOK__/ },
+      handler(code) {
+        if (isEnabled() && code.includes('__REACT_DEVTOOLS_GLOBAL_HOOK__')) {
+          return `import ${JSON.stringify(name)};` + code
+        }
+      },
+    },
   }
 }

packages/plugin-react/src/index.ts

@@ -510,11 +510,11 @@ export default function viteReact(opts: Options = {}): Plugin[] {
     transformIndexHtml() {
       if (!skipFastRefresh && !isFullBundle)
         return [
-          {
-            tag: 'script',
-            attrs: { type: 'module' },
-            children: getPreambleCode(base),
-          },
+          // {
+          //   tag: 'script',
+          //   attrs: { type: 'module' },
+          //   children: getPreambleCode(base),
+          // },
         ]
     },
   }

playground/ssr-react/src/entry-client.jsx

@@ -1,4 +1,3 @@
-import '@vitejs/plugin-react/preamble'
 import ReactDOM from 'react-dom/client'
 import { App } from './App'