feat: resolved createEnvironment

docs/guide/api-vite-environment.md

@@ -306,7 +306,7 @@ One of the goals of this feature is to provide a customizable API to process and
 ```ts
 import { DevEnvironment, RemoteEnvironmentTransport } from 'vite'
 
-function createWorkerdDevEnvironment(name: string, config: ResolvedConfig, options?: DevEnvironmentOptions) {
+function createWorkerdDevEnvironment(name: string, config: ResolvedConfig, context: DevEnvironmentContext) {
   const hot = /* ... */
   const connection = /* ... */
   const transport = new RemoteEnvironmentTransport({
@@ -317,7 +317,7 @@ function createWorkerdDevEnvironment(name: string, config: ResolvedConfig, optio
   const workerdDevEnvironment = new DevEnvironment(name, config, {
     options: {
       resolve: { conditions: ['custom'] },
-      ...options,
+      ...context.options,
     },
     hot,
     runner: {
@@ -336,7 +336,7 @@ const ssrEnvironment = createWorkerdEnvironment('ssr', config)
 
 ## Environment Configuration
 
-Environments are explicitely configured with the `environments` config option.
+Environments are explicitly configured with the `environments` config option.
 
 ```js
 export default {
@@ -403,9 +403,12 @@ export default {
   environments: {
     rsc: {
       dev: {
-        createEnvironment(name, config) {
+        createEnvironment(name, config, { watcher }) {
           // Called with 'rsc' and the resolved config during dev
-          return createNodeDevEnvironment(name, config)
+          return createNodeDevEnvironment(name, config, {
+            hot: customHotChannel(),
+            watcher
+          })
         }
       },
       build: {
@@ -434,8 +437,11 @@ function createWorkedEnvironment(userConfig) {
         ],
       },
       dev: {
-        createEnvironment(name, config) {
-          return createWorkerdDevEnvironment(name, config)
+        createEnvironment(name, config, { watcher }) {
+          return createWorkerdDevEnvironment(name, config, {
+            hot: customHotChannel(),
+            watcher,
+          })
         },
       },
       build: {
@@ -782,9 +788,10 @@ const runner = new ModuleRunner(
 import { BroadcastChannel } from 'node:worker_threads'
 import { createServer, RemoteEnvironmentTransport, DevEnvironment } from 'vite'
 
-function createWorkerEnvironment(name, config) {
+function createWorkerEnvironment(name, config, context) {
   const worker = new Worker('./worker.js')
   return new DevEnvironment(name, config, {
+    hot: /* custom hot channel */,
     runner: {
       transport: new RemoteEnvironmentTransport({
         send: (data) => worker.postMessage(data),

packages/vite/src/node/build.ts

@@ -400,6 +400,7 @@ export function resolveBuildEnvironmentOptions(
     reportCompressedSize: true,
     chunkSizeWarningLimit: 500,
     watch: null,
+    createEnvironment: (name, config) => new BuildEnvironment(name, config),
   }
 
   const userBuildEnvironmentOptions = raw
@@ -517,8 +518,10 @@ export async function build(
   const config = await resolveConfigToBuild(inlineConfig)
   const environmentName =
     config.build.lib || !config.build.ssr ? 'client' : 'ssr'
-  const createEnvironment = getBuildCreateEnvironment(config, environmentName)
-  const environment = await createEnvironment(environmentName, config)
+  const environment = await config.build.createEnvironment(
+    environmentName,
+    config,
+  )
   await environment.init()
   return buildEnvironment(config, environment, config.build.lib)
 }
@@ -1510,18 +1513,6 @@ export function resolveBuilderOptions(
   }
 }
 
-// TODO: Move createEnvironment resolving during build and dev to config stage
-function getBuildCreateEnvironment(
-  config: ResolvedConfig,
-  environmentName: string,
-) {
-  return (
-    config.environments[environmentName].build?.createEnvironment ??
-    ((name: string, config: ResolvedConfig) =>
-      new BuildEnvironment(name, config))
-  )
-}
-
 export type ResolvedBuilderOptions = Required<BuilderOptions>
 
 export async function createBuilder(
@@ -1548,8 +1539,6 @@ export async function createBuilder(
   }
 
   for (const name of Object.keys(config.environments)) {
-    const createEnvironment = getBuildCreateEnvironment(config, name)
-
     // We need to resolve the config again so we can properly merge options
     // and get a new set of plugins for each build environment. The ecosystem
     // expects plugins to be run for the same environment once they are created
@@ -1598,7 +1587,10 @@ export async function createBuilder(
       )
     }
 
-    const environment = await createEnvironment(name, environmentConfig)
+    const environment = await environmentConfig.build.createEnvironment(
+      name,
+      environmentConfig,
+    )
 
     await environment.init()
 

packages/vite/src/node/config.ts

@@ -42,7 +42,10 @@ import {
 } from './build'
 import type { ResolvedServerOptions, ServerOptions } from './server'
 import { resolveServerOptions } from './server'
-import type { DevEnvironment } from './server/environment'
+import { DevEnvironment } from './server/environment'
+import { createNodeDevEnvironment } from './server/environments/nodeEnvironment'
+import { createServerHotChannel } from './server/hmr'
+import type { WebSocketServer } from './server/ws'
 import type { PreviewOptions, ResolvedPreviewOptions } from './preview'
 import { resolvePreviewOptions } from './preview'
 import {
@@ -137,6 +140,10 @@ export function defineConfig(config: UserConfigExport): UserConfigExport {
   return config
 }
 
+export interface CreateDevEnvironmentContext {
+  ws: WebSocketServer
+}
+
 export interface DevEnvironmentOptions {
   /**
    * Files to be pre-transformed. Supports glob patterns.
@@ -176,6 +183,7 @@ export interface DevEnvironmentOptions {
   createEnvironment?: (
     name: string,
     config: ResolvedConfig,
+    context: CreateDevEnvironmentContext,
   ) => Promise<DevEnvironment> | DevEnvironment
 
   /**
@@ -205,18 +213,37 @@ export interface DevEnvironmentOptions {
   // fs: { strict?: boolean, allow, deny }
 }
 
-export type ResolvedDevEnvironmentOptions = Required<
-  Omit<DevEnvironmentOptions, 'createEnvironment'>
-> & {
-  // TODO: Should we set the default at config time? For now, it is defined on server init
-  createEnvironment:
-    | ((
-        name: string,
-        config: ResolvedConfig,
-      ) => Promise<DevEnvironment> | DevEnvironment)
-    | undefined
+function createDefaultClientDevEnvironment(
+  name: string,
+  config: ResolvedConfig,
+  context: CreateDevEnvironmentContext,
+) {
+  return new DevEnvironment(name, config, {
+    hot: context.ws,
+  })
+}
+
+function createDefaultSsrDevEnvironment(
+  name: string,
+  config: ResolvedConfig,
+): DevEnvironment {
+  return createNodeDevEnvironment(name, config, {
+    hot: createServerHotChannel(),
+  })
 }
 
+function createDefaultDevEnvironment(
+  name: string,
+  config: ResolvedConfig,
+  context: CreateDevEnvironmentContext,
+): DevEnvironment {
+  return config.environments[name].consumer === 'client'
+    ? createDefaultClientDevEnvironment(name, config, context)
+    : createDefaultSsrDevEnvironment(name, config)
+}
+
+export type ResolvedDevEnvironmentOptions = Required<DevEnvironmentOptions>
+
 type EnvironmentResolveOptions = ResolveOptions & {
   alias?: AliasOptions
 }
@@ -603,7 +630,7 @@ export function resolveDevEnvironmentOptions(
       preserverSymlinks,
       environmentName,
     ),
-    createEnvironment: dev?.createEnvironment,
+    createEnvironment: dev?.createEnvironment ?? createDefaultDevEnvironment,
     recoverable: dev?.recoverable ?? environmentName === 'client',
     moduleRunnerTransform:
       dev?.moduleRunnerTransform ??

packages/vite/src/node/index.ts

@@ -21,7 +21,10 @@ export { buildErrorMessage } from './server/middlewares/error'
 
 export { RemoteEnvironmentTransport } from './server/environmentTransport'
 export { createNodeDevEnvironment } from './server/environments/nodeEnvironment'
-export { DevEnvironment, type DevEnvironmentSetup } from './server/environment'
+export {
+  DevEnvironment,
+  type DevEnvironmentContext,
+} from './server/environment'
 export { BuildEnvironment } from './build'
 
 export { fetchModule, type FetchModuleOptions } from './ssr/fetchModule'

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

@@ -53,8 +53,12 @@ export function loadFallbackPlugin(config: ResolvedConfig): Plugin {
             throw e
           }
         }
-        if (code != null && environment.watcher) {
-          ensureWatchedFile(environment.watcher, file, config.root)
+        if (code != null && environment.pluginContainer.watcher) {
+          ensureWatchedFile(
+            environment.pluginContainer.watcher,
+            file,
+            config.root,
+          )
         }
       }
       if (code) {

packages/vite/src/node/server/environment.ts

@@ -31,9 +31,8 @@ import {
 } from './pluginContainer'
 import type { RemoteEnvironmentTransport } from './environmentTransport'
 
-export interface DevEnvironmentSetup {
+export interface DevEnvironmentContext {
   hot: false | HotChannel
-  watcher?: FSWatcher
   options?: EnvironmentOptions
   runner?: FetchModuleOptions & {
     transport?: RemoteEnvironmentTransport
@@ -45,7 +44,6 @@ export class DevEnvironment extends BaseEnvironment {
   mode = 'dev' as const // TODO: should this be 'serve'?
   moduleGraph: EnvironmentModuleGraph
 
-  watcher?: FSWatcher
   depsOptimizer?: DepsOptimizer
   /**
    * @internal
@@ -100,14 +98,14 @@ export class DevEnvironment extends BaseEnvironment {
   constructor(
     name: string,
     config: ResolvedConfig,
-    setup: DevEnvironmentSetup,
+    context: DevEnvironmentContext,
   ) {
     let options =
       config.environments[name] ?? getDefaultResolvedEnvironmentOptions(config)
-    if (setup.options) {
+    if (context.options) {
       options = mergeConfig(
         options,
-        setup.options,
+        context.options,
       ) as ResolvedEnvironmentOptions
     }
     super(name, config, options)
@@ -118,16 +116,15 @@ export class DevEnvironment extends BaseEnvironment {
       this.pluginContainer!.resolveId(url, undefined),
     )
 
-    this.hot = setup.hot || createNoopHotChannel()
-    this.watcher = setup.watcher
+    this.hot = context.hot || createNoopHotChannel()
 
     this._onCrawlEndCallbacks = []
     this._crawlEndFinder = setupOnCrawlEnd(() => {
       this._onCrawlEndCallbacks.forEach((cb) => cb())
     })
 
-    this._ssrRunnerOptions = setup.runner || {}
-    setup.runner?.transport?.register(this)
+    this._ssrRunnerOptions = context?.runner ?? {}
+    context?.runner?.transport?.register(this)
 
     this.hot.on('vite:invalidate', async ({ path, message }) => {
       invalidateModule(this, {
@@ -137,16 +134,16 @@ export class DevEnvironment extends BaseEnvironment {
     })
 
     const { optimizeDeps } = this.config.dev
-    if (setup.depsOptimizer) {
-      this.depsOptimizer = setup.depsOptimizer
+    if (context?.depsOptimizer) {
+      this.depsOptimizer = context.depsOptimizer
     } else if (isDepOptimizationDisabled(optimizeDeps)) {
       this.depsOptimizer = undefined
     } else {
       // We only support auto-discovery for the client environment, for all other
       // environments `noDiscovery` has no effect and a simpler explicit deps
       // optimizer is used that only optimizes explicitly included dependencies
       // so it doesn't need to reload the environment. Now that we have proper HMR
-      // and full reload for general environments, we can enable autodiscovery for
+      // and full reload for general environments, we can enable auto-discovery for
       // them in the future
       this.depsOptimizer = (
         optimizeDeps.noDiscovery || name !== 'client'
@@ -156,7 +153,7 @@ export class DevEnvironment extends BaseEnvironment {
     }
   }
 
-  async init(): Promise<void> {
+  async init(options?: { watcher?: FSWatcher }): Promise<void> {
     if (this._initiated) {
       return
     }
@@ -165,6 +162,7 @@ export class DevEnvironment extends BaseEnvironment {
     this._pluginContainer = await createEnvironmentPluginContainer(
       this,
       this._plugins,
+      options?.watcher,
     )
 
     // TODO: Should buildStart be called here? It break backward compatibility if we do,

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

@@ -1,15 +1,15 @@
 import type { ResolvedConfig } from '../../config'
-import type { DevEnvironmentSetup } from '../environment'
+import type { DevEnvironmentContext } from '../environment'
 import { DevEnvironment } from '../environment'
 import { asyncFunctionDeclarationPaddingLineCount } from '../../../shared/utils'
 
 export function createNodeDevEnvironment(
   name: string,
   config: ResolvedConfig,
-  options: DevEnvironmentSetup,
+  context: DevEnvironmentContext,
 ): DevEnvironment {
   return new DevEnvironment(name, config, {
-    ...options,
+    ...context,
     runner: {
       processSourceMap(map) {
         // this assumes that "new AsyncFunction" is used to create the module
@@ -18,7 +18,7 @@ export function createNodeDevEnvironment(
             ';'.repeat(asyncFunctionDeclarationPaddingLineCount) + map.mappings,
         })
       },
-      ...options?.runner,
+      ...context.runner,
     },
   })
 }