feat: separate module graphs per environment

packages/vite/src/client/client.ts

@@ -422,7 +422,7 @@ export function removeStyle(id: string): void {
 }
 
 export function createHotContext(ownerPath: string): ViteHotContext {
-  return new HMRContext(hmrClient, ownerPath)
+  return new HMRContext(hmrClient, ownerPath, 'browser')
 }
 
 /**

packages/vite/src/node/index.ts

@@ -112,14 +112,20 @@ export type {
   WebSocketCustomListener,
 } from './server/ws'
 export type { PluginContainer } from './server/pluginContainer'
-export type { ModuleGraph, ModuleNode, ResolvedUrl } from './server/moduleGraph'
+export type {
+  ModuleGraph,
+  ModuleNode,
+  EnvironmentModuleGraph,
+  EnvironmentModuleNode,
+  ResolvedUrl,
+} from './server/moduleGraph'
 export type { SendOptions } from './server/send'
 export type { ProxyOptions } from './server/middlewares/proxy'
 export type {
   TransformOptions,
   TransformResult,
 } from './server/transformRequest'
-export type { HmrOptions, HmrContext } from './server/hmr'
+export type { HmrOptions, HmrContext, HotUpdateContext } from './server/hmr'
 
 export type {
   HMRBroadcaster,

packages/vite/src/node/optimizer/optimizer.ts

@@ -539,7 +539,7 @@ async function createDepsOptimizer(
       // Cached transform results have stale imports (resolved to
       // old locations) so they need to be invalidated before the page is
       // reloaded.
-      server.moduleGraph.invalidateAll()
+      server.getModuleGraph('browser').invalidateAll()
 
       server.hot.send({
         type: 'full-reload',

packages/vite/src/node/packages.ts

@@ -253,7 +253,7 @@ export function watchPackageDataPlugin(packageCache: PackageCache): Plugin {
         invalidatePackageData(packageCache, path.normalize(id))
       }
     },
-    handleHotUpdate({ file }) {
+    hotUpdate({ file }) {
       if (file.endsWith('/package.json')) {
         invalidatePackageData(packageCache, path.normalize(file))
       }

packages/vite/src/node/plugin.ts

@@ -12,8 +12,8 @@ export type { PluginContext } from 'rollup'
 import type { ConfigEnv, ResolvedConfig, UserConfig } from './config'
 import type { ServerHook } from './server'
 import type { IndexHtmlTransform } from './plugins/html'
-import type { ModuleNode } from './server/moduleGraph'
-import type { HmrContext } from './server/hmr'
+import type { EnvironmentModuleNode, ModuleNode } from './server/moduleGraph'
+import type { HmrContext, HotUpdateContext } from './server/hmr'
 import type { PreviewServerHook } from './preview'
 
 /**
@@ -119,6 +119,19 @@ export interface Plugin<A = any> extends RollupPlugin<A> {
    * `{ order: 'pre', handler: hook }`
    */
   transformIndexHtml?: IndexHtmlTransform
+
+  /**
+   * @deprecated
+   * Compat support, ctx.modules is a backward compatible ModuleNode array
+   * with the mixed client and ssr moduleGraph. Use hotUpdate instead
+   */
+  handleHotUpdate?: ObjectHook<
+    (
+      this: void,
+      ctx: HmrContext,
+    ) => Array<ModuleNode> | void | Promise<Array<ModuleNode> | void>
+  >
+
   /**
    * Perform custom handling of HMR updates.
    * The handler receives a context containing changed filename, timestamp, a
@@ -134,11 +147,14 @@ export interface Plugin<A = any> extends RollupPlugin<A> {
    * - If the hook doesn't return a value, the hmr update will be performed as
    *   normal.
    */
-  handleHotUpdate?: ObjectHook<
+  hotUpdate?: ObjectHook<
     (
       this: void,
-      ctx: HmrContext,
-    ) => Array<ModuleNode> | void | Promise<Array<ModuleNode> | void>
+      ctx: HotUpdateContext,
+    ) =>
+      | Array<EnvironmentModuleNode>
+      | void
+      | Promise<Array<EnvironmentModuleNode> | void>
   >
 
   /**
@@ -153,6 +169,7 @@ export interface Plugin<A = any> extends RollupPlugin<A> {
         attributes: Record<string, string>
         custom?: CustomPluginOptions
         ssr?: boolean
+        environment?: string
         /**
          * @internal
          */
@@ -165,15 +182,15 @@ export interface Plugin<A = any> extends RollupPlugin<A> {
     (
       this: PluginContext,
       id: string,
-      options?: { ssr?: boolean },
+      options?: { ssr?: boolean; environment?: string },
     ) => Promise<LoadResult> | LoadResult
   >
   transform?: ObjectHook<
     (
       this: TransformPluginContext,
       code: string,
       id: string,
-      options?: { ssr?: boolean },
+      options?: { ssr?: boolean; environment?: string },
     ) => Promise<TransformResult> | TransformResult
   >
 }

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

@@ -28,8 +28,8 @@ import {
   urlRE,
 } from '../utils'
 import { DEFAULT_ASSETS_INLINE_LIMIT, FS_PREFIX } from '../constants'
-import type { ModuleGraph } from '../server/moduleGraph'
 import { cleanUrl, withTrailingSlash } from '../../shared/utils'
+import type { ViteDevServer } from '../server'
 
 // referenceId is base64url but replaces - with $
 export const assetUrlRE = /__VITE_ASSET__([\w$]+)__(?:\$_(.*?)__)?/g
@@ -140,8 +140,7 @@ const viteBuildPublicIdPrefix = '\0vite:asset:public'
  */
 export function assetPlugin(config: ResolvedConfig): Plugin {
   registerCustomMime()
-
-  let moduleGraph: ModuleGraph | undefined
+  let server: ViteDevServer
 
   return {
     name: 'vite:asset',
@@ -151,8 +150,8 @@ export function assetPlugin(config: ResolvedConfig): Plugin {
       generatedAssets.set(config, new Map())
     },
 
-    configureServer(server) {
-      moduleGraph = server.moduleGraph
+    configureServer(_server) {
+      server = _server
     },
 
     resolveId(id) {
@@ -169,7 +168,7 @@ export function assetPlugin(config: ResolvedConfig): Plugin {
       }
     },
 
-    async load(id) {
+    async load(id, options) {
       if (id.startsWith(viteBuildPublicIdPrefix)) {
         id = id.slice(viteBuildPublicIdPrefix.length)
       }
@@ -198,8 +197,9 @@ export function assetPlugin(config: ResolvedConfig): Plugin {
       let url = await fileToUrl(id, config, this)
 
       // Inherit HMR timestamp if this asset was invalidated
-      if (moduleGraph) {
-        const mod = moduleGraph.getModuleById(id)
+      if (server) {
+        const environment = options?.environment ?? 'browser'
+        const mod = server.getModuleGraph(environment).getModuleById(id)
         if (mod && mod.lastHMRTimestamp > 0) {
           url = injectQuery(url, `t=${mod.lastHMRTimestamp}`)
         }

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

@@ -26,7 +26,7 @@ import { formatMessages, transform } from 'esbuild'
 import type { RawSourceMap } from '@ampproject/remapping'
 import { WorkerWithFallback } from 'artichokie'
 import { getCodeWithSourcemap, injectSourcesContent } from '../server/sourcemap'
-import type { ModuleNode } from '../server/moduleGraph'
+import type { EnvironmentModuleNode } from '../server/moduleGraph'
 import type { ResolveFn, ViteDevServer } from '../'
 import {
   createToImportMetaURLBasedRelativeRuntime,
@@ -923,7 +923,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
 }
 
 export function cssAnalysisPlugin(config: ResolvedConfig): Plugin {
-  let server: ViteDevServer
+  let server: ViteDevServer | undefined
 
   return {
     name: 'vite:css-analysis',
@@ -941,9 +941,9 @@ export function cssAnalysisPlugin(config: ResolvedConfig): Plugin {
         return
       }
 
-      const ssr = options?.ssr === true
-      const { moduleGraph } = server
-      const thisModule = moduleGraph.getModuleById(id)
+      const environment = options?.environment ?? 'browser'
+      const moduleGraph = server?.getModuleGraph(environment)
+      const thisModule = moduleGraph?.getModuleById(id)
 
       // Handle CSS @import dependency HMR and other added modules via this.addWatchFile.
       // JS-related HMR is handled in the import-analysis plugin.
@@ -960,22 +960,21 @@ export function cssAnalysisPlugin(config: ResolvedConfig): Plugin {
         if (pluginImports) {
           // record deps in the module graph so edits to @import css can trigger
           // main import to hot update
-          const depModules = new Set<string | ModuleNode>()
+          const depModules = new Set<string | EnvironmentModuleNode>()
           const devBase = config.base
           for (const file of pluginImports) {
             depModules.add(
               isCSSRequest(file)
-                ? moduleGraph.createFileOnlyEntry(file)
-                : await moduleGraph.ensureEntryFromUrl(
+                ? moduleGraph!.createFileOnlyEntry(file)
+                : await moduleGraph!.ensureEntryFromUrl(
                     stripBase(
                       await fileToUrl(file, config, this),
                       (config.server?.origin ?? '') + devBase,
                     ),
-                    ssr,
                   ),
             )
           }
-          moduleGraph.updateModuleInfo(
+          moduleGraph!.updateModuleInfo(
             thisModule,
             depModules,
             null,
@@ -984,7 +983,6 @@ export function cssAnalysisPlugin(config: ResolvedConfig): Plugin {
             new Set(),
             null,
             isSelfAccepting,
-            ssr,
           )
         } else {
           thisModule.isSelfAccepting = isSelfAccepting

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

@@ -483,7 +483,9 @@ async function reloadOnTsconfigChange(changedFile: string) {
     )
 
     // clear module graph to remove code compiled with outdated config
-    server.moduleGraph.invalidateAll()
+    server.environments.forEach((environment) =>
+      server.getModuleGraph(environment).invalidateAll(),
+    )
 
     // reset tsconfck so that recompile works with up2date configs
     tsconfckCache?.clear()

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

@@ -214,6 +214,7 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
       }
 
       const ssr = options?.ssr === true
+      const environment = options?.environment ?? 'browser'
 
       if (canSkipImportAnalysis(importer)) {
         debug?.(colors.dim(`[skipped] ${prettifyUrl(importer, root)}`))
@@ -238,10 +239,10 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
 
       const depsOptimizer = getDepsOptimizer(config, ssr)
 
-      const { moduleGraph } = server
+      const moduleGraph = server.getModuleGraph(environment)
       // since we are already in the transform phase of the importer, it must
       // have been loaded so its entry is guaranteed in the module graph.
-      const importerModule = moduleGraph.getModuleById(importer)!
+      const importerModule = moduleGraph.getModuleById(importer)
       if (!importerModule) {
         // This request is no longer valid. It could happen for optimized deps
         // requests. A full reload is going to request this id again.
@@ -380,7 +381,6 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
             // We use an internal function to avoid resolving the url again
             const depModule = await moduleGraph._ensureEntryFromUrl(
               unwrapId(url),
-              ssr,
               canSkipImportAnalysis(url) || forceSkipImportAnalysis,
               resolved,
             )
@@ -525,9 +525,9 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
             // record as safe modules
             // safeModulesPath should not include the base prefix.
             // See https://github.com/vitejs/vite/issues/9438#issuecomment-1465270409
-            server?.moduleGraph.safeModulesPath.add(
-              fsPathFromUrl(stripBase(url, base)),
-            )
+            server
+              ?.getModuleGraph('browser')
+              .safeModulesPath.add(fsPathFromUrl(stripBase(url, base)))
 
             if (url !== specifier) {
               let rewriteDone = false
@@ -727,10 +727,7 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
       // normalize and rewrite accepted urls
       const normalizedAcceptedUrls = new Set<string>()
       for (const { url, start, end } of acceptedUrls) {
-        const [normalized] = await moduleGraph.resolveUrl(
-          toAbsoluteUrl(url),
-          ssr,
-        )
+        const [normalized] = await moduleGraph.resolveUrl(toAbsoluteUrl(url))
         normalizedAcceptedUrls.add(normalized)
         str().overwrite(start, end, JSON.stringify(normalized), {
           contentOnly: true,
@@ -775,7 +772,6 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
           normalizedAcceptedUrls,
           isPartiallySelfAccepting ? acceptedExports : null,
           isSelfAccepting,
-          ssr,
           staticImportedUrls,
         )
         if (hasHMR && prunedImports) {

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

@@ -22,7 +22,7 @@ import { stringifyQuery } from 'ufo'
 import type { GeneralImportGlobOptions } from 'types/importGlob'
 import type { Plugin } from '../plugin'
 import type { ViteDevServer } from '../server'
-import type { ModuleNode } from '../server/moduleGraph'
+import type { EnvironmentModuleNode } from '../server/moduleGraph'
 import type { ResolvedConfig } from '../config'
 import { evalValue, normalizePath, transformStableResult } from '../utils'
 import type { Logger } from '../logger'
@@ -47,8 +47,10 @@ interface ParsedGeneralImportGlobOptions extends GeneralImportGlobOptions {
 export function getAffectedGlobModules(
   file: string,
   server: ViteDevServer,
-): ModuleNode[] {
-  const modules: ModuleNode[] = []
+): EnvironmentModuleNode[] {
+  const modules: EnvironmentModuleNode[] = []
+  // TODO: properly support other runtimes. Changing _importGlobMap breaks VitePress
+  // https://github.com/vuejs/vitepress/blob/28989df83446923a9e7c8ada345b0778119ed66f/src/node/plugins/staticDataPlugin.ts#L128
   for (const [id, allGlobs] of server._importGlobMap!) {
     // (glob1 || glob2) && !glob3 && !glob4...
     if (
@@ -58,13 +60,16 @@ export function getAffectedGlobModules(
           (!negated.length || negated.every((glob) => isMatch(file, glob))),
       )
     ) {
-      const mod = server.moduleGraph.getModuleById(id)
-      if (mod) modules.push(mod)
+      const mod = server.getModuleGraph('browser').getModuleById(id)
+
+      if (mod) {
+        if (mod.file) {
+          server.getModuleGraph('browser').onFileChange(mod.file)
+        }
+        modules.push(mod)
+      }
     }
   }
-  modules.forEach((i) => {
-    if (i?.file) server.moduleGraph.onFileChange(i.file)
-  })
   return modules
 }
 
@@ -77,7 +82,7 @@ export function importGlobPlugin(config: ResolvedConfig): Plugin {
       server = _server
       server._importGlobMap.clear()
     },
-    async transform(code, id) {
+    async transform(code, id, options) {
       if (!code.includes('import.meta.glob')) return
       const result = await transformGlobImport(
         code,

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

@@ -230,7 +230,7 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin {
       }
     },
 
-    async transform(raw, id) {
+    async transform(raw, id, options) {
       const workerFileMatch = workerFileRE.exec(id)
       if (workerFileMatch) {
         // if import worker by worker constructor will have query.type
@@ -252,7 +252,8 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin {
           } else if (server) {
             // dynamic worker type we can't know how import the env
             // so we copy /@vite/env code of server transform result into file header
-            const { moduleGraph } = server
+            const environment = options?.environment ?? 'browser'
+            const moduleGraph = server.getModuleGraph(environment)
             const module = moduleGraph.getModuleById(ENV_ENTRY)
             injectEnv = module?.transformResult?.code || ''
           }