refactor: inline @vite/client in runtime

Author: hi-ogawa

packages/vite/src/node/server/environments/rolldown.ts

@@ -109,19 +109,6 @@ export function rolldownDevConfigureServer(server: ViteDevServer): void {
     sirv(environments.client.outDir, { dev: true, extensions: ['html'] }),
   )
 
-  // reuse /@vite/client for Websocket API but serve it on our own
-  // TODO: include it in `rolldown_runtime`?
-  const rolldownClientCode = getRolldownClientCode()
-  server.middlewares.use((req, res, next) => {
-    const url = new URL(req.url ?? '', 'https://rolldown.rs')
-    if (url.pathname === '/@rolldown/client') {
-      res.setHeader('content-type', 'text/javascript;charset=utf-8')
-      res.end(rolldownClientCode)
-      return
-    }
-    next()
-  })
-
   // full build on non self accepting entry
   server.ws.on('rolldown:hmr-deadend', async (data) => {
     logger.info(`hmr-deadend '${data.moduleId}'`, { timestamp: true })
@@ -138,39 +125,6 @@ export async function rolldownDevHandleHotUpdate(
   await environments.client.handleUpdate(ctx)
 }
 
-function getRolldownClientCode() {
-  let code = fs.readFileSync(CLIENT_ENTRY, 'utf-8')
-  const replacements = {
-    // TODO: packages/vite/src/node/plugins/clientInjections.ts
-    __BASE__: `"/"`,
-    __SERVER_HOST__: `""`,
-    __HMR_PROTOCOL__: `null`,
-    __HMR_HOSTNAME__: `null`,
-    __HMR_PORT__: `new URL(import.meta.url).port`,
-    __HMR_DIRECT_TARGET__: `""`,
-    __HMR_BASE__: `"/"`,
-    __HMR_TIMEOUT__: `30000`,
-    __HMR_ENABLE_OVERLAY__: `true`,
-    __HMR_CONFIG_NAME__: `""`,
-    // runtime define is not necessary
-    [`import '@vite/env';`]: ``,
-    [`import "@vite/env";`]: ``, // for local pnpm dev
-  }
-  for (const [k, v] of Object.entries(replacements)) {
-    code = code.replaceAll(k, v)
-  }
-  code = code.replace(/\/\/# sourceMappingURL.*/, '')
-  // inject own hmr event handler
-  code += `
-const hot = createHotContext("/__rolldown");
-hot.on("rolldown:hmr", (data) => {
-	(0, eval)(data[1]);
-});
-window.__rolldown_hot = hot;
-`
-  return code
-}
-
 //
 // Rolldown dev environment
 //
@@ -311,10 +265,7 @@ function patchRuntimePlugin(): rolldown.Plugin {
       if (code.includes('//#region rolldown:runtime')) {
         const output = new MagicString(code)
         // replace hard-coded WebSocket setup with custom client
-        output.replace(
-          /const socket =.*?\n\};/s,
-          'import("/@rolldown/client");',
-        )
+        output.replace(/const socket =.*?\n\};/s, getRolldownClientCode())
         // trigger full rebuild on non-accepting entry invalidation
         output
           .replace('parents: [parent],', 'parents: parent ? [parent] : [],')
@@ -333,6 +284,42 @@ function patchRuntimePlugin(): rolldown.Plugin {
   }
 }
 
+// reuse /@vite/client for Websocket API
+function getRolldownClientCode() {
+  let code = fs.readFileSync(CLIENT_ENTRY, 'utf-8')
+  const replacements = {
+    // TODO: packages/vite/src/node/plugins/clientInjections.ts
+    __BASE__: `"/"`,
+    __SERVER_HOST__: `""`,
+    __HMR_PROTOCOL__: `null`,
+    __HMR_HOSTNAME__: `null`,
+    __HMR_PORT__: `new URL(self.location.href).port`,
+    __HMR_DIRECT_TARGET__: `""`,
+    __HMR_BASE__: `"/"`,
+    __HMR_TIMEOUT__: `30000`,
+    __HMR_ENABLE_OVERLAY__: `true`,
+    __HMR_CONFIG_NAME__: `""`,
+  }
+  for (const [k, v] of Object.entries(replacements)) {
+    code = code.replaceAll(k, v)
+  }
+  // runtime define is not necessary
+  code = code.replace(/^import\s*['"]@vite\/env['"]/gm, '')
+  // remove esm
+  code = code.replace(/^export\s*\{[^}]*\}/gm, '')
+  code = code.replace(/\bimport.meta.url\b/g, 'self.location.href')
+  code = code.replace(/^\/\/#.*/gm, '')
+  // inject own hmr event handler
+  code += `
+const hot = createHotContext("/__rolldown");
+hot.on("rolldown:hmr", (data) => {
+	(0, eval)(data[1]);
+});
+window.__rolldown_hot = hot;
+`
+  return `(() => {/*** @vite/client ***/\n${code}}\n)()`
+}
+
 // TODO: workaround rolldownExperimental.reactPlugin which injects js to html via `load` hook
 // TODO: can we inject to "react" itself?
 function reactRefreshPlugin(

playground/rolldown-dev-ssr/src/entry-server.tsx

@@ -13,7 +13,6 @@ const handler: Connect.SimpleHandleFunction = (req, res) => {
 	<head>
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<script type="module" src="/@rolldown/client"></script>
 	</head>
 	<body>
 		<div id="root">${ssrHtml}</div>