feat: full bundle dev env

packages/vite/src/client/client.ts

@@ -1,3 +1,4 @@
+/// <reference types="rolldown/experimental/runtime-types" />
 import type { ErrorPayload, HotPayload } from 'types/hmrPayload'
 import type { ViteHotContext } from 'types/hot'
 import { HMRClient, HMRContext } from '../shared/hmr'
@@ -20,6 +21,7 @@ declare const __HMR_BASE__: string
 declare const __HMR_TIMEOUT__: number
 declare const __HMR_ENABLE_OVERLAY__: boolean
 declare const __WS_TOKEN__: string
+declare const __FULL_BUNDLE_MODE__: boolean
 
 console.debug('[vite] connecting...')
 
@@ -37,6 +39,7 @@ const directSocketHost = __HMR_DIRECT_TARGET__
 const base = __BASE__ || '/'
 const hmrTimeout = __HMR_TIMEOUT__
 const wsToken = __WS_TOKEN__
+const isFullBundleMode = __FULL_BUNDLE_MODE__
 
 const transport = normalizeModuleRunnerTransport(
   (() => {
@@ -140,32 +143,53 @@ const hmrClient = new HMRClient(
     debug: (...msg) => console.debug('[vite]', ...msg),
   },
   transport,
-  async function importUpdatedModule({
-    acceptedPath,
-    timestamp,
-    explicitImportRequired,
-    isWithinCircularImport,
-  }) {
-    const [acceptedPathWithoutQuery, query] = acceptedPath.split(`?`)
-    const importPromise = import(
-      /* @vite-ignore */
-      base +
-        acceptedPathWithoutQuery.slice(1) +
-        `?${explicitImportRequired ? 'import&' : ''}t=${timestamp}${
-          query ? `&${query}` : ''
-        }`
-    )
-    if (isWithinCircularImport) {
-      importPromise.catch(() => {
-        console.info(
-          `[hmr] ${acceptedPath} failed to apply HMR as it's within a circular import. Reloading page to reset the execution order. ` +
-            `To debug and break the circular import, you can run \`vite --debug hmr\` to log the circular dependency path if a file change triggered it.`,
+  isFullBundleMode
+    ? async function importUpdatedModule({
+        url,
+        acceptedPath,
+        isWithinCircularImport,
+      }) {
+        const importPromise = import(base + url!).then(() =>
+          // @ts-expect-error globalThis.__rolldown_runtime__
+          globalThis.__rolldown_runtime__.loadExports(acceptedPath),
         )
-        pageReload()
-      })
-    }
-    return await importPromise
-  },
+        if (isWithinCircularImport) {
+          importPromise.catch(() => {
+            console.info(
+              `[hmr] ${acceptedPath} failed to apply HMR as it's within a circular import. Reloading page to reset the execution order. ` +
+                `To debug and break the circular import, you can run \`vite --debug hmr\` to log the circular dependency path if a file change triggered it.`,
+            )
+            pageReload()
+          })
+        }
+        return await importPromise
+      }
+    : async function importUpdatedModule({
+        acceptedPath,
+        timestamp,
+        explicitImportRequired,
+        isWithinCircularImport,
+      }) {
+        const [acceptedPathWithoutQuery, query] = acceptedPath.split(`?`)
+        const importPromise = import(
+          /* @vite-ignore */
+          base +
+            acceptedPathWithoutQuery.slice(1) +
+            `?${explicitImportRequired ? 'import&' : ''}t=${timestamp}${
+              query ? `&${query}` : ''
+            }`
+        )
+        if (isWithinCircularImport) {
+          importPromise.catch(() => {
+            console.info(
+              `[hmr] ${acceptedPath} failed to apply HMR as it's within a circular import. Reloading page to reset the execution order. ` +
+                `To debug and break the circular import, you can run \`vite --debug hmr\` to log the circular dependency path if a file change triggered it.`,
+            )
+            pageReload()
+          })
+        }
+        return await importPromise
+      },
 )
 transport.connect!(createHMRHandler(handleMessage))
 
@@ -575,3 +599,28 @@ export function injectQuery(url: string, queryToInject: string): string {
 }
 
 export { ErrorOverlay }
+
+if (isFullBundleMode && typeof DevRuntime !== 'undefined') {
+  class ViteDevRuntime extends DevRuntime {
+    override createModuleHotContext(moduleId: string) {
+      const ctx = createHotContext(moduleId)
+      // @ts-expect-error TODO: support CSS
+      ctx._internal = {
+        updateStyle,
+        removeStyle,
+      }
+      // @ts-expect-error TODO: support this function (used by plugin-react)
+      ctx.getExports = async () =>
+        // @ts-expect-error __rolldown_runtime__ / ctx.ownerPath
+        __rolldown_runtime__.loadExports(ctx.ownerPath)
+      return ctx
+    }
+
+    override applyUpdates(_boundaries: string[]): void {
+      // TODO: how should this be handled?
+      // noop, handled in the HMR client
+    }
+  }
+
+  ;(globalThis as any).__rolldown_runtime__ ??= new ViteDevRuntime()
+}

packages/vite/src/node/build.ts

@@ -407,6 +407,7 @@ export function resolveBuildEnvironmentOptions(
   raw: BuildEnvironmentOptions,
   logger: Logger,
   consumer: 'client' | 'server' | undefined,
+  isFullBundledDev: boolean,
 ): ResolvedBuildEnvironmentOptions {
   const deprecatedPolyfillModulePreload = raw.polyfillModulePreload
   const { polyfillModulePreload, ...rest } = raw
@@ -427,7 +428,7 @@ export function resolveBuildEnvironmentOptions(
     {
       ...buildEnvironmentOptionsDefaults,
       cssCodeSplit: !raw.lib,
-      minify: consumer === 'server' ? false : 'oxc',
+      minify: consumer === 'server' || isFullBundledDev ? false : 'oxc',
       rollupOptions: {},
       rolldownOptions: undefined,
       ssr: consumer === 'server',
@@ -488,10 +489,11 @@ export async function resolveBuildPlugins(config: ResolvedConfig): Promise<{
   pre: Plugin[]
   post: Plugin[]
 }> {
+  const isBuild = config.command === 'build'
   return {
     pre: [
       completeSystemWrapPlugin(),
-      ...(!config.isWorker ? [prepareOutDirPlugin()] : []),
+      ...(isBuild && !config.isWorker ? [prepareOutDirPlugin()] : []),
       perEnvironmentPlugin(
         'vite:rollup-options-plugins',
         async (environment) =>
@@ -504,11 +506,11 @@ export async function resolveBuildPlugins(config: ResolvedConfig): Promise<{
       ...(config.isWorker ? [webWorkerPostPlugin(config)] : []),
     ],
     post: [
-      ...buildImportAnalysisPlugin(config),
+      ...(isBuild ? buildImportAnalysisPlugin(config) : []),
       ...(config.nativePluginEnabledLevel >= 1 ? [] : [buildOxcPlugin()]),
       ...(config.build.minify === 'esbuild' ? [buildEsbuildPlugin()] : []),
-      terserPlugin(config),
-      ...(!config.isWorker
+      ...(isBuild ? [terserPlugin(config)] : []),
+      ...(isBuild && !config.isWorker
         ? [
             manifestPlugin(config),
             ssrManifestPlugin(),
@@ -549,10 +551,10 @@ function resolveConfigToBuild(
   )
 }
 
-function resolveRolldownOptions(
+export function resolveRolldownOptions(
   environment: Environment,
   chunkMetadataMap: ChunkMetadataMap,
-) {
+): RolldownOptions {
   const { root, packageCache, build: options } = environment.config
   const libOptions = options.lib
   const { logger } = environment
@@ -874,7 +876,7 @@ async function buildEnvironment(
   }
 }
 
-function enhanceRollupError(e: RollupError) {
+export function enhanceRollupError(e: RollupError): void {
   const stackOnly = extractStack(e)
 
   let msg = colors.red((e.plugin ? `[${e.plugin}] ` : '') + e.message)
@@ -1040,7 +1042,7 @@ const dynamicImportWarningIgnoreList = [
   `statically analyzed`,
 ]
 
-function clearLine() {
+export function clearLine(): void {
   const tty = process.stdout.isTTY && !process.env.CI
   if (tty) {
     process.stdout.clearLine(0)

packages/vite/src/node/cli.ts

@@ -53,6 +53,10 @@ interface GlobalCLIOptions {
   w?: boolean
 }
 
+interface ExperimentalDevOptions {
+  fullBundle?: boolean
+}
+
 interface BuilderCLIOptions {
   app?: boolean
 }
@@ -195,93 +199,105 @@ cli
     '--force',
     `[boolean] force the optimizer to ignore the cache and re-bundle`,
   )
-  .action(async (root: string, options: ServerOptions & GlobalCLIOptions) => {
-    filterDuplicateOptions(options)
-    // output structure is preserved even after bundling so require()
-    // is ok here
-    const { createServer } = await import('./server')
-    try {
-      const server = await createServer({
-        root,
-        base: options.base,
-        mode: options.mode,
-        configFile: options.config,
-        configLoader: options.configLoader,
-        logLevel: options.logLevel,
-        clearScreen: options.clearScreen,
-        server: cleanGlobalCLIOptions(options),
-        forceOptimizeDeps: options.force,
-      })
+  .option('--fullBundle', `[boolean] use experimental full bundle mode`)
+  .action(
+    async (
+      root: string,
+      options: ServerOptions & ExperimentalDevOptions & GlobalCLIOptions,
+    ) => {
+      filterDuplicateOptions(options)
+      // output structure is preserved even after bundling so require()
+      // is ok here
+      const { createServer } = await import('./server')
+      try {
+        const server = await createServer({
+          root,
+          base: options.base,
+          mode: options.mode,
+          configFile: options.config,
+          configLoader: options.configLoader,
+          logLevel: options.logLevel,
+          clearScreen: options.clearScreen,
+          server: cleanGlobalCLIOptions(options),
+          forceOptimizeDeps: options.force,
+          experimental: {
+            fullBundleMode: options.fullBundle,
+          },
+        })
 
-      if (!server.httpServer) {
-        throw new Error('HTTP server not available')
-      }
+        if (!server.httpServer) {
+          throw new Error('HTTP server not available')
+        }
 
-      await server.listen()
+        await server.listen()
 
-      const info = server.config.logger.info
+        const info = server.config.logger.info
 
-      const modeString =
-        options.mode && options.mode !== 'development'
-          ? `  ${colors.bgGreen(` ${colors.bold(options.mode)} `)}`
+        const modeString =
+          options.mode && options.mode !== 'development'
+            ? `  ${colors.bgGreen(` ${colors.bold(options.mode)} `)}`
+            : ''
+        const viteStartTime = global.__vite_start_time ?? false
+        const startupDurationString = viteStartTime
+          ? colors.dim(
+              `ready in ${colors.reset(
+                colors.bold(Math.ceil(performance.now() - viteStartTime)),
+              )} ms`,
+            )
           : ''
-      const viteStartTime = global.__vite_start_time ?? false
-      const startupDurationString = viteStartTime
-        ? colors.dim(
-            `ready in ${colors.reset(
-              colors.bold(Math.ceil(performance.now() - viteStartTime)),
-            )} ms`,
-          )
-        : ''
-      const hasExistingLogs =
-        process.stdout.bytesWritten > 0 || process.stderr.bytesWritten > 0
+        const hasExistingLogs =
+          process.stdout.bytesWritten > 0 || process.stderr.bytesWritten > 0
 
-      info(
-        `\n  ${colors.green(
-          `${colors.bold('ROLLDOWN-VITE')} v${VERSION}`,
-        )}${modeString}  ${startupDurationString}\n`,
-        {
-          clear: !hasExistingLogs,
-        },
-      )
+        info(
+          `\n  ${colors.green(
+            `${colors.bold('ROLLDOWN-VITE')} v${VERSION}`,
+          )}${modeString}  ${startupDurationString}\n`,
+          {
+            clear: !hasExistingLogs,
+          },
+        )
 
-      server.printUrls()
-      const customShortcuts: CLIShortcut<typeof server>[] = []
-      if (profileSession) {
-        customShortcuts.push({
-          key: 'p',
-          description: 'start/stop the profiler',
-          async action(server) {
-            if (profileSession) {
-              await stopProfiler(server.config.logger.info)
-            } else {
-              const inspector = await import('node:inspector').then(
-                (r) => r.default,
-              )
-              await new Promise<void>((res) => {
-                profileSession = new inspector.Session()
-                profileSession.connect()
-                profileSession.post('Profiler.enable', () => {
-                  profileSession!.post('Profiler.start', () => {
-                    server.config.logger.info('Profiler started')
-                    res()
+        server.printUrls()
+        const customShortcuts: CLIShortcut<typeof server>[] = []
+        if (profileSession) {
+          customShortcuts.push({
+            key: 'p',
+            description: 'start/stop the profiler',
+            async action(server) {
+              if (profileSession) {
+                await stopProfiler(server.config.logger.info)
+              } else {
+                const inspector = await import('node:inspector').then(
+                  (r) => r.default,
+                )
+                await new Promise<void>((res) => {
+                  profileSession = new inspector.Session()
+                  profileSession.connect()
+                  profileSession.post('Profiler.enable', () => {
+                    profileSession!.post('Profiler.start', () => {
+                      server.config.logger.info('Profiler started')
+                      res()
+                    })
                   })
                 })
-              })
-            }
+              }
+            },
+          })
+        }
+        server.bindCLIShortcuts({ print: true, customShortcuts })
+      } catch (e) {
+        const logger = createLogger(options.logLevel)
+        logger.error(
+          colors.red(`error when starting dev server:\n${e.stack}`),
+          {
+            error: e,
           },
-        })
+        )
+        await stopProfiler(logger.info)
+        process.exit(1)
       }
-      server.bindCLIShortcuts({ print: true, customShortcuts })
-    } catch (e) {
-      const logger = createLogger(options.logLevel)
-      logger.error(colors.red(`error when starting dev server:\n${e.stack}`), {
-        error: e,
-      })
-      await stopProfiler(logger.info)
-      process.exit(1)
-    }
-  })
+    },
+  )
 
 // build
 cli