feat: update rolldown-related dependencies and use client-side HMR in bundled-dev (#22961)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Hana <shuyuan@voidzero.dev>
Co-authored-by: shulaoda <165626830+shulaoda@users.noreply.github.com>
Co-authored-by: andrew <andywangsy@gmail.com>
Co-authored-by: 翠 <green@sapphi.red>

Author: 4 people

docs/package.json

@@ -14,7 +14,7 @@
     "@voidzero-dev/vitepress-theme": "^5.0.2",
     "feed": "^6.0.0",
     "markdown-it-image-size": "^15.0.1",
-    "oxc-minify": "^0.139.0",
+    "oxc-minify": "^0.140.0",
     "vitepress": "^2.0.0-alpha.18",
     "vitepress-plugin-graphviz": "^0.1.0",
     "vitepress-plugin-group-icons": "^1.7.5",

package.json

@@ -64,7 +64,7 @@
     "oxfmt": "^0.59.0",
     "picocolors": "^1.1.1",
     "playwright-chromium": "^1.61.1",
-    "rolldown": "~1.1.5",
+    "rolldown": "~1.2.0",
     "rollup": "^4.59.0",
     "simple-git-hooks": "^2.13.1",
     "tsx": "^4.23.1",

packages/create-vite/package.json

@@ -38,7 +38,7 @@
     "@vercel/detect-agent": "^1.2.3",
     "cross-spawn": "^7.0.6",
     "mri": "^1.2.0",
-    "tsdown": "^0.22.5",
+    "tsdown": "^0.22.8",
     "unrun": "^0.3.1"
   }
 }

packages/plugin-legacy/package.json

@@ -54,7 +54,7 @@
   "devDependencies": {
     "acorn": "^8.17.0",
     "picocolors": "^1.1.1",
-    "tsdown": "^0.22.5",
+    "tsdown": "^0.22.8",
     "unrun": "^0.3.1",
     "vite": "workspace:*"
   },

packages/vite/package.json

@@ -72,7 +72,7 @@
     "lightningcss": "^1.33.0",
     "picomatch": "^4.0.5",
     "postcss": "^8.5.20",
-    "rolldown": "~1.1.5",
+    "rolldown": "~1.2.0",
     "tinyglobby": "^0.2.17"
   },
   "devDependencies": {
@@ -122,7 +122,7 @@
     "postcss-modules": "^9.0.1",
     "premove": "^4.0.0",
     "resolve.exports": "^2.0.3",
-    "rolldown-plugin-dts": "^0.27.6",
+    "rolldown-plugin-dts": "^0.27.9",
     "rollup": "^4.59.0",
     "rollup-plugin-license": "^3.7.1",
     "sass": "^1.101.0",

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),
+  }
+}