feat(bundled-dev): client-side HMR

packages/vite/rolldown.config.ts

@@ -26,7 +26,7 @@ const envConfig = defineConfig({
 })
 
 const clientConfig = defineConfig({
-  input: path.resolve(dirname, 'src/client/client.ts'),
+  input: path.resolve(dirname, 'src/client/clientEntry.ts'),
   platform: 'browser',
   transform: {
     target: 'es2020',
@@ -38,6 +38,20 @@ const clientConfig = defineConfig({
   },
 })
 
+// separate entry so the full-bundle-mode HMR code is never bundled into `client.mjs`
+const bundledDevClientConfig = defineConfig({
+  input: path.resolve(dirname, 'src/client/bundledDevClient.ts'),
+  platform: 'browser',
+  transform: {
+    target: 'es2020',
+  },
+  external: ['@vite/env'],
+  output: {
+    dir: path.resolve(dirname, 'dist'),
+    entryFileNames: 'client/bundledDevClient.mjs',
+  },
+})
+
 const sharedNodeOptions = defineConfig({
   platform: 'node',
   treeshake: {
@@ -155,6 +169,7 @@ const moduleRunnerConfig = defineConfig({
 export default defineConfig([
   envConfig,
   clientConfig,
+  bundledDevClientConfig,
   nodeConfig,
   moduleRunnerConfig,
 ])

packages/vite/src/client/bundledDevClient.ts

@@ -0,0 +1,70 @@
+import { nanoid } from 'nanoid/non-secure'
+import type { DevRuntime as DevRuntimeType } from 'rolldown/experimental/runtime-types'
+import {
+  BundledDevHMRClient,
+  BundledDevHMRContext,
+} from './bundledDevHmrClient'
+import {
+  base,
+  clearOverlayOrReloadOnFirstUpdate,
+  pageReload,
+  registerBundledDevClient,
+  removeStyle,
+  transport,
+  updateStyle,
+} from './client'
+
+// keep the same public exports as `client.ts`, which this entry replaces when inlined
+export {
+  createHotContext,
+  injectQuery,
+  removeStyle,
+  updateStyle,
+  ErrorOverlay,
+} from './client'
+
+// injected by rolldown's hmr plugin into the bundle prelude, ahead of this client
+declare const DevRuntime: typeof DevRuntimeType
+
+if (typeof DevRuntime !== 'undefined') {
+  class ViteDevRuntime extends DevRuntime {
+    override createModuleHotContext(moduleId: string) {
+      const ctx = new BundledDevHMRContext(bundledDevHmrClient, moduleId)
+      // @ts-expect-error TODO: support CSS properly
+      ctx._internal = { updateStyle, removeStyle }
+      return ctx
+    }
+  }
+
+  const clientId = nanoid()
+
+  transport.send({
+    type: 'custom',
+    event: 'vite:client-connected',
+    data: { clientId },
+  })
+
+  const runtime = ((globalThis as any).__rolldown_runtime__ ??=
+    new ViteDevRuntime(clientId))
+
+  const bundledDevHmrClient = new BundledDevHMRClient(
+    {
+      error: (err) => console.error('[vite]', err),
+      debug: (...msg) => console.debug('[vite]', ...msg),
+    },
+    transport,
+    runtime,
+    {
+      base,
+      beforeApply: clearOverlayOrReloadOnFirstUpdate,
+      pageReload,
+    },
+  )
+  registerBundledDevClient(bundledDevHmrClient)
+
+  runtime.hooks = {
+    createModuleHotContext: (id: string) => runtime.createModuleHotContext(id),
+    onModuleCacheRemoval: (id: string) =>
+      bundledDevHmrClient.handleModuleCacheRemoval(id),
+  }
+}