feat: integrate vite:build-html plugin

Author: hi-ogawa

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

@@ -732,6 +732,10 @@ export function buildHtmlPlugin(config: ResolvedConfig): RolldownPlugin {
 
           await Promise.all(setModuleSideEffectPromises)
 
+          if (config.experimental.rolldownDev?.reactRefresh) {
+            js = `import "virtual:react-refresh/entry";\n${js}`
+          }
+
           // Force rollup to keep this module from being shared between other entry points.
           // If the resulting chunk is empty, it will be removed in generateBundle.
           return { code: js, moduleSideEffects: 'no-treeshake' }
@@ -768,7 +772,13 @@ export function buildHtmlPlugin(config: ResolvedConfig): RolldownPlugin {
         tag: 'script',
         attrs: {
           ...(isAsync ? { async: true } : {}),
-          type: 'module',
+          ...(config.experimental.rolldownDev
+            ? {
+                defer: true,
+              }
+            : {
+                type: 'module',
+              }),
           // crossorigin must be set not only for serving assets in a different origin
           // but also to make it possible to preload the script using `<link rel="preload">`.
           // `<script type="module">` used to fetch the script with credential mode `omit`,

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

@@ -61,7 +61,7 @@ export async function resolvePlugins(
 
   return [
     depOptimizationEnabled ? optimizedDepsPlugin() : null,
-    isBuild ? metadataPlugin() : null,
+    rolldownDev || isBuild ? metadataPlugin() : null,
     !isWorker ? watchPackageDataPlugin(config.packageCache) : null,
     !isBuild ? preAliasPlugin(config) : null,
     enableNativePlugin
@@ -164,7 +164,7 @@ export async function resolvePlugins(
     enableNativePlugin ? nativeWasmFallbackPlugin() : wasmFallbackPlugin(),
     definePlugin(config),
     cssPostPlugin(config),
-    isBuild && buildHtmlPlugin(config),
+    (rolldownDev || isBuild) && buildHtmlPlugin(config),
     workerImportMetaUrlPlugin(config),
     assetImportMetaUrlPlugin(config),
     ...buildPlugins.pre,

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

@@ -13,7 +13,6 @@ import type {
   ConfigEnv,
   DevEnvironmentOptions,
   HmrContext,
-  ResolvedConfig,
   UserConfig,
   ViteDevServer,
 } from '../..'
@@ -33,6 +32,10 @@ const logger = createLogger('info', {
   allowClearScreen: false,
 })
 
+//
+// Vite plugin hooks
+//
+
 export function rolldownDevHandleConfig(
   config: UserConfig,
   env: ConfigEnv,
@@ -64,6 +67,7 @@ export function rolldownDevHandleConfig(
         // NOTE
         // this is not "build" option any more (or is there a way to handle entry lazily?)
         build: {
+          modulePreload: false,
           rollupOptions: {
             input:
               config.build?.rollupOptions?.input ??
@@ -167,6 +171,10 @@ window.__rolldown_hot = hot;
   return code
 }
 
+//
+// Rolldown dev environment
+//
+
 class RolldownEnvironment extends DevEnvironment {
   instance!: rolldown.RolldownBuild
   result!: rolldown.RolldownOutput
@@ -220,7 +228,9 @@ class RolldownEnvironment extends DevEnvironment {
     plugins = plugins.filter(
       (p) =>
         !(typeof p.name === 'number' || p.name?.startsWith('vite:')) ||
-        ['vite:define'].includes(p.name) ||
+        ['vite:define', 'vite:build-html', 'vite:build-metadata'].includes(
+          p.name,
+        ) ||
         ['AliasPlugin', 'TransformPlugin'].includes(p.constructor.name),
     )
     plugins = plugins.map((p) => injectEnvironmentToHooks(this as any, p))
@@ -238,7 +248,7 @@ class RolldownEnvironment extends DevEnvironment {
       },
       plugins: [
         ...plugins,
-        rolldownHtmlPlugin(this.config, this.rolldownDevOptions),
+        patchRuntimePlugin(),
         reactRefreshPlugin(this.rolldownDevOptions),
       ],
     }
@@ -293,60 +303,18 @@ class RolldownEnvironment extends DevEnvironment {
   }
 }
 
-// TODO: use vite:build-html plugin
-function rolldownHtmlPlugin(
-  config: ResolvedConfig,
-  rolldownDevOptions: RolldownDevOptions,
-): rolldown.Plugin {
-  const htmlEntryMap = new Map<string, MagicString>()
-
+function patchRuntimePlugin(): rolldown.Plugin {
   return {
-    name: 'vite:rolldown-html',
-    transform: {
-      filter: {
-        id: {
-          include: [/\.html$/],
-        },
-      },
-      async handler(code, id) {
-        // process html (will be emiited later during generateBundle)
-        const htmlOutput = new MagicString(code)
-        htmlEntryMap.set(id, htmlOutput)
-
-        let jsOutput = ``
-        if (rolldownDevOptions?.reactRefresh) {
-          jsOutput += `import "virtual:react-refresh/entry";\n`
-        }
-
-        // extract <script src="...">
-        const matches = code.matchAll(
-          /<script\b[^>]+\bsrc=["']([^"']+)["'][^>]*>.*?<\/script>/dg,
-        )
-        for (const match of matches) {
-          const src = match[1]
-          const resolved = await this.resolve(src, id)
-          if (!resolved) {
-            this.warn(`unresolved src '${src}' in '${id}'`)
-            continue
-          }
-          jsOutput += `import ${JSON.stringify(resolved.id)};\n`
-          const [start, end] = match.indices![0]
-          htmlOutput.remove(start, end)
-        }
-
-        // emit js entry
-        return {
-          code: jsOutput,
-          moduleSideEffects: 'no-treeshake',
-        }
-      },
-    },
+    name: 'vite:rolldown-patch-runtime',
     renderChunk(code) {
       // patch rolldown_runtime to workaround a few things
       if (code.includes('//#region rolldown:runtime')) {
         const output = new MagicString(code)
-        // patch out hard-coded WebSocket setup "const socket = WebSocket(`ws://localhost:8080`)"
-        output.replace(/const socket =.*?\n\};/s, '')
+        // replace hard-coded WebSocket setup with custom client
+        output.replace(
+          /const socket =.*?\n\};/s,
+          'import("/@rolldown/client");',
+        )
         // trigger full rebuild on non-accepting entry invalidation
         output
           .replace('parents: [parent],', 'parents: parent ? [parent] : [],')
@@ -362,40 +330,11 @@ function rolldownHtmlPlugin(
         return { code: output.toString(), map: output.generateMap() }
       }
     },
-    generateBundle(options, bundle) {
-      for (const key in bundle) {
-        const chunk = bundle[key]
-        // emit final html
-        if (chunk.type === 'chunk' && chunk.facadeModuleId) {
-          const htmlId = chunk.facadeModuleId
-          const htmlOutput = htmlEntryMap.get(htmlId)
-          if (htmlOutput) {
-            // inject js entry
-            htmlOutput.appendLeft(
-              htmlOutput.original.indexOf(`</body>`),
-              `<script ${options.format === 'es' ? 'type="module"' : ''} src="/${chunk.fileName}"></script>`,
-            )
-
-            // inject client
-            htmlOutput.appendLeft(
-              htmlOutput.original.indexOf(`</head>`),
-              `<script type="module" src="/@rolldown/client"></script>`,
-            )
-
-            this.emitFile({
-              type: 'asset',
-              fileName: path.relative(config.root, htmlId),
-              originalFileName: htmlId,
-              source: htmlOutput.toString(),
-            })
-          }
-        }
-      }
-    },
   }
 }
 
 // TODO: workaround rolldownExperimental.reactPlugin which injects js to html via `load` hook
+// TODO: can we inject to "react" itself?
 function reactRefreshPlugin(
   rolldownDevOptions: RolldownDevOptions,
 ): rolldown.Plugin {