feat: using vite hmr runtime

Author: underfin

Diff for: 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)

Diff for: packages/vite/src/client/hmrModuleRunner.ts

@@ -0,0 +1,88 @@
+import { createHotContext } from './client'
+
+class DevRuntime {
+    modules: Record<string, { exports: any }> = {}
+
+    static getInstance() {
+      // @ts-expect-error __rolldown_runtime__
+      let instance = globalThis.__rolldown_runtime__;
+      if (!instance) {
+        instance = new DevRuntime();
+        // @ts-expect-error __rolldown_runtime__
+        globalThis.__rolldown_runtime__ = instance;
+      }
+      return instance
+    }
+
+    createModuleHotContext(moduleId: string) {
+      return createHotContext(moduleId);
+    }
+
+    applyUpdates(_boundaries: string[]) {
+      // trigger callbacks of accept() correctly
+      // for (const moduleId of boundaries) {
+      //   const hotContext = this.moduleHotContexts.get(moduleId);
+      //   if (hotContext) {
+      //     const acceptCallbacks = hotContext.acceptCallbacks;
+      //     acceptCallbacks.filter((cb) => {
+      //       cb.fn(this.modules[moduleId].exports);
+      //     })
+      //   }
+      // }
+      // this.moduleHotContextsToBeUpdated.forEach((hotContext, moduleId) => {
+      //   this.moduleHotContexts[moduleId] = hotContext;
+      // })
+      // this.moduleHotContextsToBeUpdated.clear()
+      // swap new contexts
+    }
+
+    registerModule(id: string, exportGetters: Record<string, () => any>) {
+      const exports = {};
+      Object.keys(exportGetters).forEach((key) => {
+        if (Object.prototype.hasOwnProperty.call(exportGetters, key)) {
+          Object.defineProperty(exports, key, {
+            enumerable: true,
+            get: exportGetters[key],
+          });
+        }
+      })
+      if (this.modules[id]) {
+        this.modules[id] = {
+          exports,
+        }
+      } else {
+        // If the module is not in the cache, we need to register it.
+        this.modules[id] = {
+          exports,
+        };
+      }
+    }
+  
+    loadExports(id: string) {
+      const module = this.modules[id];
+      if (module) {
+        return module.exports;
+      } else {
+        console.warn(`Module ${id} not found`);
+        return {};
+      }
+    }
+  
+    // __esmMin
+    // createEsmInitializer = (fn, res) => () => (fn && (res = fn(fn = 0)), res)
+    // __commonJSMin
+    // createCjsInitializer = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports)
+  }
+  
+  DevRuntime.getInstance();
+  
+  // export function loadScript(url: string): void {
+  //   const script = document.createElement('script');
+  //   script.src = url;
+  //   script.type = 'module';
+  //   script.onerror = function () {
+  //     console.error('Failed to load script: ' + url);
+  //   }
+  //   document.body.appendChild(script);
+  // }
+  

Diff for: 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!,

Diff for: 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)
+}

Diff for: 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),

Diff for: 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

Diff for: 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
         ? [