feat: using vite hmr runtime

Author: underfin

packages/vite/src/client/client.ts

@@ -7,7 +7,8 @@ import {
   normalizeModuleRunnerTransport,
 } from '../shared/moduleRunnerTransport'
 import { ErrorOverlay, overlayId } from './overlay'
-import '@vite/env'
+import './hmrModuleRunner'
+// import '@vite/env'
 
 // injected by the hmr plugin when served
 declare const __BASE__: string
@@ -140,19 +141,16 @@ const hmrClient = new HMRClient(
   },
   transport,
   async function importUpdatedModule({
+    url,
     acceptedPath,
-    timestamp,
-    explicitImportRequired,
+    // timestamp,
+    // explicitImportRequired,
     isWithinCircularImport,
   }) {
-    const [acceptedPathWithoutQuery, query] = acceptedPath.split(`?`)
+    // const [acceptedPathWithoutQuery, query] = acceptedPath.split(`?`)
     const importPromise = import(
       /* @vite-ignore */
-      base +
-        acceptedPathWithoutQuery.slice(1) +
-        `?${explicitImportRequired ? 'import&' : ''}t=${timestamp}${
-          query ? `&${query}` : ''
-        }`
+      base + url
     )
     if (isWithinCircularImport) {
       importPromise.catch(() => {
@@ -163,7 +161,10 @@ const hmrClient = new HMRClient(
         pageReload()
       })
     }
-    return await importPromise
+    // @ts-expect-error globalThis.__rolldown_runtime__
+    return await importPromise.then(() =>
+      globalThis.__rolldown_runtime__.loadExports(acceptedPath),
+    )
   },
 )
 transport.connect!(handleMessage)

packages/vite/src/node/build.ts

@@ -87,6 +87,7 @@ import type { MinimalPluginContext, Plugin, PluginContext } from './plugin'
 import type { RollupPluginHooks } from './typeUtils'
 import { buildOxcPlugin } from './plugins/oxc'
 import type { ViteDevServer } from './server'
+import { getHmrImplement } from './plugins/clientInjections'
 
 export interface BuildEnvironmentOptions {
   /**
@@ -655,7 +656,12 @@ async function buildEnvironment(
       '.css': 'js',
     },
     experimental: {
-      hmr: true,
+      hmr: server
+        ? {
+            implement: await getHmrImplement(environment.config),
+          }
+        : false,
+      // hmr: true,
       // hmr: server ? {
       //   host: server._currentServerHost!,
       //   port: server._currentServerPort!,

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

@@ -1,4 +1,5 @@
 import path from 'node:path'
+import fs from 'node:fs'
 import type { Plugin } from '../plugin'
 import type { ResolvedConfig } from '../config'
 import { CLIENT_ENTRY, ENV_ENTRY } from '../constants'
@@ -121,3 +122,65 @@ function escapeReplacement(value: string | number | boolean | null) {
   const jsonValue = JSON.stringify(value)
   return () => jsonValue
 }
+
+export async function getHmrImplement(config: ResolvedConfig): Promise<string> {
+  const content = fs.readFileSync(normalizedClientEntry, 'utf-8')
+  const resolvedServerHostname = (await resolveHostname(config.server.host))
+    .name
+  const resolvedServerPort = config.server.port!
+  const devBase = config.base
+
+  const serverHost = `${resolvedServerHostname}:${resolvedServerPort}${devBase}`
+
+  let hmrConfig = config.server.hmr
+  hmrConfig = isObject(hmrConfig) ? hmrConfig : undefined
+  const host = hmrConfig?.host || null
+  const protocol = hmrConfig?.protocol || null
+  const timeout = hmrConfig?.timeout || 30000
+  const overlay = hmrConfig?.overlay !== false
+  const isHmrServerSpecified = !!hmrConfig?.server
+  const hmrConfigName = path.basename(config.configFile || 'vite.config.js')
+
+  // hmr.clientPort -> hmr.port
+  // -> (24678 if middleware mode and HMR server is not specified) -> new URL(import.meta.url).port
+  let port = hmrConfig?.clientPort || hmrConfig?.port || null
+  if (config.server.middlewareMode && !isHmrServerSpecified) {
+    port ||= 24678
+  }
+
+  let directTarget = hmrConfig?.host || resolvedServerHostname
+  directTarget += `:${hmrConfig?.port || resolvedServerPort}`
+  directTarget += devBase
+
+  let hmrBase = devBase
+  if (hmrConfig?.path) {
+    hmrBase = path.posix.join(hmrBase, hmrConfig.path)
+  }
+
+  const modeReplacement = escapeReplacement(config.mode)
+  const baseReplacement = escapeReplacement(devBase)
+  const serverHostReplacement = escapeReplacement(serverHost)
+  const hmrProtocolReplacement = escapeReplacement(protocol)
+  const hmrHostnameReplacement = escapeReplacement(host)
+  const hmrPortReplacement = escapeReplacement(port)
+  const hmrDirectTargetReplacement = escapeReplacement(directTarget)
+  const hmrBaseReplacement = escapeReplacement(hmrBase)
+  const hmrTimeoutReplacement = escapeReplacement(timeout)
+  const hmrEnableOverlayReplacement = escapeReplacement(overlay)
+  const hmrConfigNameReplacement = escapeReplacement(hmrConfigName)
+  const wsTokenReplacement = escapeReplacement(config.webSocketToken)
+
+  return content
+    .replace(`__MODE__`, modeReplacement)
+    .replace(/__BASE__/g, baseReplacement)
+    .replace(`__SERVER_HOST__`, serverHostReplacement)
+    .replace(`__HMR_PROTOCOL__`, hmrProtocolReplacement)
+    .replace(`__HMR_HOSTNAME__`, hmrHostnameReplacement)
+    .replace(`__HMR_PORT__`, hmrPortReplacement)
+    .replace(`__HMR_DIRECT_TARGET__`, hmrDirectTargetReplacement)
+    .replace(`__HMR_BASE__`, hmrBaseReplacement)
+    .replace(`__HMR_TIMEOUT__`, hmrTimeoutReplacement)
+    .replace(`__HMR_ENABLE_OVERLAY__`, hmrEnableOverlayReplacement)
+    .replace(`__HMR_CONFIG_NAME__`, hmrConfigNameReplacement)
+    .replace(`__WS_TOKEN__`, wsTokenReplacement)
+}

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

@@ -131,7 +131,7 @@ export async function resolvePlugins(
         : oxcPlugin(config)
       : null,
     enableNativePlugin === true
-      ? nativeJsonPlugin({ ...config.json, isBuild })
+      ? nativeJsonPlugin({ ...config.json, minify: isBuild })
       : jsonPlugin(config.json, isBuild),
     enableNativePlugin === true ? nativeWasmHelperPlugin() : wasmHelperPlugin(),
     webWorkerPlugin(config),

packages/vite/types/hmrPayload.d.ts

@@ -24,6 +24,7 @@ export interface UpdatePayload {
 
 export interface Update {
   type: 'js-update' | 'css-update'
+  url?: string // the hmr chunk url
   path: string
   acceptedPath: string
   timestamp: number

vitest.config.e2e.ts

@@ -14,6 +14,9 @@ export default defineConfig({
   test: {
     include: ['./playground/**/*.spec.[tj]s'],
     exclude: [
+      './playground/hmr/**/*.spec.[tj]s',
+      './playground/ssr/**/*.spec.[tj]s',
+      './playground/ssr*/**/*.spec.[tj]s',
       './playground/legacy/**/*.spec.[tj]s', // system format
       ...(isBuild
         ? [