feat: environment api

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/environment.ts

@@ -0,0 +1,24 @@
+// We are using command: 'serve' | 'build' to aling with the command flag passed to hooks.
+// It would be better if we would use 'dev' here but can tackle that if we managed to modify
+// command at the hooks level. There could also be Preview environments later on.
+
+export class Environment {
+  id: string
+  type: string
+  constructor(
+    id: string,
+    options: {
+      type: string
+    },
+  ) {
+    this.id = id
+    this.type = options.type
+  }
+}
+
+export class BuildEnvironment extends Environment {
+  command = 'build' as const
+  constructor(id: string, options: { type: string }) {
+    super(id, options)
+  }
+}

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.browserEnvironment.moduleGraph.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,9 +12,11 @@ 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'
+import type { ModuleExecutionEnvironment } from './server/environment'
+import type { BuildEnvironment } from './environment'
 
 /**
  * Vite plugins extends the Rollup plugin interface with a few extra
@@ -119,6 +121,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 +149,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 +171,7 @@ export interface Plugin<A = any> extends RollupPlugin<A> {
         attributes: Record<string, string>
         custom?: CustomPluginOptions
         ssr?: boolean
+        environment?: ModuleExecutionEnvironment | BuildEnvironment
         /**
          * @internal
          */
@@ -165,15 +184,21 @@ export interface Plugin<A = any> extends RollupPlugin<A> {
     (
       this: PluginContext,
       id: string,
-      options?: { ssr?: boolean },
+      options?: {
+        ssr?: boolean
+        environment?: ModuleExecutionEnvironment | BuildEnvironment
+      },
     ) => Promise<LoadResult> | LoadResult
   >
   transform?: ObjectHook<
     (
       this: TransformPluginContext,
       code: string,
       id: string,
-      options?: { ssr?: boolean },
+      options?: {
+        ssr?: boolean
+        environment?: ModuleExecutionEnvironment | BuildEnvironment
+      },
     ) => Promise<TransformResult> | TransformResult
   >
 }

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

@@ -28,8 +28,9 @@ 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'
+import type { ModuleExecutionEnvironment } from '../server/environment'
 
 // referenceId is base64url but replaces - with $
 export const assetUrlRE = /__VITE_ASSET__([\w$]+)__(?:\$_(.*?)__)?/g
@@ -140,8 +141,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 +151,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 +169,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 +198,11 @@ 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 as
+          | ModuleExecutionEnvironment
+          | undefined
+        const mod = environment?.moduleGraph.getModuleById(id)
         if (mod && mod.lastHMRTimestamp > 0) {
           url = injectQuery(url, `t=${mod.lastHMRTimestamp}`)
         }

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

@@ -26,8 +26,8 @@ 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 { ResolveFn, ViteDevServer } from '../'
+import type { EnvironmentModuleNode } from '../server/moduleGraph'
+import type { ResolveFn } from '../'
 import {
   createToImportMetaURLBasedRelativeRuntime,
   resolveUserExternal,
@@ -923,15 +923,9 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
 }
 
 export function cssAnalysisPlugin(config: ResolvedConfig): Plugin {
-  let server: ViteDevServer
-
   return {
     name: 'vite:css-analysis',
 
-    configureServer(_server) {
-      server = _server
-    },
-
     async transform(_, id, options) {
       if (
         !isCSSRequest(id) ||
@@ -941,9 +935,10 @@ export function cssAnalysisPlugin(config: ResolvedConfig): Plugin {
         return
       }
 
-      const ssr = options?.ssr === true
-      const { moduleGraph } = server
-      const thisModule = moduleGraph.getModuleById(id)
+      const environment = options?.environment
+      const moduleGraph =
+        environment?.command === 'serve' ? environment.moduleGraph : undefined
+      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 +955,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 +978,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) =>
+      environment.moduleGraph.invalidateAll(),
+    )
 
     // reset tsconfck so that recompile works with up2date configs
     tsconfckCache?.clear()

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

@@ -54,6 +54,7 @@ import { checkPublicFile } from '../publicDir'
 import { getDepOptimizationConfig } from '../config'
 import type { ResolvedConfig } from '../config'
 import type { Plugin } from '../plugin'
+import type { ModuleExecutionEnvironment } from '../server/environment'
 import { shouldExternalizeForSSR } from '../ssr/ssrExternal'
 import { getDepsOptimizer, optimizedDepNeedsInterop } from '../optimizer'
 import {
@@ -209,11 +210,16 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
     async transform(source, importer, options) {
       // In a real app `server` is always defined, but it is undefined when
       // running src/node/server/__tests__/pluginContainer.spec.ts
-      if (!server) {
+
+      const ssr = options?.ssr === true
+      const environment =
+        (options?.environment as ModuleExecutionEnvironment) || undefined
+
+      if (!server || !environment) {
         return null
       }
 
-      const ssr = options?.ssr === true
+      const moduleGraph = environment.moduleGraph
 
       if (canSkipImportAnalysis(importer)) {
         debug?.(colors.dim(`[skipped] ${prettifyUrl(importer, root)}`))
@@ -238,10 +244,9 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
 
       const depsOptimizer = getDepsOptimizer(config, ssr)
 
-      const { moduleGraph } = server
       // 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 +385,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 +529,7 @@ 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?._safeModulesPath.add(fsPathFromUrl(stripBase(url, base)))
 
             if (url !== specifier) {
               let rewriteDone = false
@@ -727,10 +729,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 +774,6 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
           normalizedAcceptedUrls,
           isPartiallySelfAccepting ? acceptedExports : null,
           isSelfAccepting,
-          ssr,
           staticImportedUrls,
         )
         if (hasHMR && prunedImports) {