feat: expose virtual for simpler preamble setup on ssr

Author: hi-ogawa

packages/common/package.json

@@ -7,6 +7,9 @@
     ".": "./index.ts",
     "./refresh-runtime": "./refresh-runtime.js"
   },
+  "dependencies": {
+    "@rolldown/pluginutils": "1.0.0-beta.41"
+  },
   "peerDependencies": {
     "vite": "^4.2.0 || ^5.0.0 || ^6.0.0"
   }

packages/common/refresh-utils.ts

@@ -1,3 +1,6 @@
+import type { Plugin } from 'vite'
+import { exactRegex } from '@rolldown/pluginutils'
+
 export const runtimePublicPath = '/@react-refresh'
 
 const reactCompRE = /extends\s+(?:React\.)?(?:Pure)?Component/
@@ -60,3 +63,36 @@ function $RefreshSig$() { return RefreshRuntime.createSignatureFunctionForTransf
 
   return newCode
 }
+
+export function virtualPreamblePlugin({
+  name,
+  isEnabled,
+}: {
+  name: string
+  isEnabled: () => boolean
+}): Plugin {
+  return {
+    name: 'vite:react-virtual-preamble',
+    resolveId: {
+      order: 'pre',
+      filter: { id: exactRegex(name) },
+      handler(source) {
+        if (source === name) {
+          return '\0' + source
+        }
+      },
+    },
+    load: {
+      filter: { id: exactRegex('\0' + name) },
+      handler(id) {
+        if (id === '\0' + name) {
+          if (isEnabled()) {
+            // vite dev import analysis can rewrite base
+            return preambleCode.replace('__BASE__', '/')
+          }
+          return ''
+        }
+      },
+    },
+  }
+}

packages/plugin-react/package.json

@@ -20,7 +20,10 @@
     "dist"
   ],
   "type": "module",
-  "exports": "./dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./preamble": "./preamble.d.ts"
+  },
   "scripts": {
     "dev": "tsdown --watch ./src --watch ../common",
     "build": "tsdown",

packages/plugin-react/preamble.d.ts

@@ -0,0 +1 @@
+export {}

packages/plugin-react/src/index.ts

@@ -12,6 +12,7 @@ import {
   preambleCode,
   runtimePublicPath,
   silenceUseClientWarning,
+  virtualPreamblePlugin,
 } from '@vitejs/react-common'
 import {
   exactRegex,
@@ -524,6 +525,10 @@ export default function viteReact(opts: Options = {}): Plugin[] {
       ? [viteRefreshWrapper, viteConfigPost, viteReactRefreshFullBundleMode]
       : []),
     viteReactRefresh,
+    virtualPreamblePlugin({
+      name: '@vitejs/plugin-react/preamble',
+      isEnabled: () => !skipFastRefresh && !isFullBundle,
+    }),
   ]
 }
 

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

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

playground/ssr-react/vite.config.js

@@ -41,10 +41,14 @@ export default defineConfig({
                 '/src/entry-server.jsx',
               )
               const appHtml = render(url)
-              const template = await server.transformIndexHtml(
-                url,
-                fs.readFileSync(path.resolve(_dirname, 'index.html'), 'utf-8'),
+              const template = fs.readFileSync(
+                path.resolve(_dirname, 'index.html'),
+                'utf-8',
               )
+              // const template = await server.transformIndexHtml(
+              //   url,
+              //   fs.readFileSync(path.resolve(_dirname, 'index.html'), 'utf-8'),
+              // )
               const html = template.replace(`<!--app-html-->`, appHtml)
               res.setHeader('content-type', 'text/html').end(html)
             } catch (e) {