You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Since the `RunnableDevEnvironment` can only be used to run the code in the same runtime as the Vite server, it requires a runtime that can run the Vite Server (a runtime that is compatible with Node.js). This means that you will need to use the raw `DevEnvironment` to make it runtime agnostic.
98
98
@@ -264,7 +264,7 @@ export function createHandler(input) {
264
264
}
265
265
```
266
266
267
-
## Environments during build
267
+
## Environments During Build
268
268
269
269
In the CLI, calling `vite build` and `vite build --ssr` will still build the client only and ssr only environments for backward compatibility.
270
270
@@ -283,6 +283,6 @@ export default {
283
283
}
284
284
```
285
285
286
-
## Environment agnostic code
286
+
## Environment Agnostic Code
287
287
288
288
Most of the time, the current `environment` instance will be available as part of the context of the code being run so the need to access them through `server.environments` should be rare. For example, inside plugin hooks the environment is exposed as part of the `PluginContext`, so it can be accessed using `this.environment`. See [Environment API for Plugins](./api-environment-plugins.md) to learn about how to build environment aware plugins.
Copy file name to clipboardExpand all lines: docs/guide/api-environment-instances.md
+3-3Lines changed: 3 additions & 3 deletions
Original file line number
Diff line number
Diff line change
@@ -1,4 +1,4 @@
1
-
# Using `Environment`instances
1
+
# Using `Environment`Instances
2
2
3
3
:::warning Experimental
4
4
Environment API is experimental. We'll keep the APIs stable during Vite 6 to let the ecosystem experiment and build on top of it. We're planning to stabilize these new APIs with potential breaking changes in Vite 7.
@@ -11,7 +11,7 @@ Resources:
11
11
Please share your feedback with us.
12
12
:::
13
13
14
-
## Accessing the environments
14
+
## Accessing the Environments
15
15
16
16
During dev, the available environments in a dev server can be accessed using `server.environments`:
17
17
@@ -118,7 +118,7 @@ An environment instance in the Vite server lets you process a URL using the `env
118
118
We are using `transformRequest(url)` and `warmupRequest(url)` in the current version of this proposal so it is easier to discuss and understand for users used to Vite's current API. Before releasing, we can take the opportunity to review these names too. For example, it could be named `environment.processModule(url)` or `environment.loadModule(url)` taking a page from Rollup's `context.load(id)` in plugin hooks. For the moment, we think keeping the current names and delaying this discussion is better.
119
119
:::
120
120
121
-
## Separate module graphs
121
+
## Separate Module Graphs
122
122
123
123
Each environment has an isolated module graph. All module graphs have the same signature, so generic algorithms can be implemented to crawl or query the graph without depending on the environment. `hotUpdate` is a good example. When a file is modified, the module graph of each environment will be used to discover the affected modules and perform HMR for each environment independently.
Copy file name to clipboardExpand all lines: docs/guide/api-environment-plugins.md
+8-8Lines changed: 8 additions & 8 deletions
Original file line number
Diff line number
Diff line change
@@ -11,7 +11,7 @@ Resources:
11
11
Please share your feedback with us.
12
12
:::
13
13
14
-
## Accessing the current environment in hooks
14
+
## Accessing the Current Environment in Hooks
15
15
16
16
Given that there were only two Environments until Vite 6 (`client` and `ssr`), a `ssr` boolean was enough to identify the current environment in Vite APIs. Plugin Hooks received a `ssr` boolean in the last options parameter, and several APIs expected an optional last `ssr` parameter to properly associate modules to the correct environment (for example `server.moduleGraph.getModuleByUrl(url, { ssr })`).
17
17
@@ -27,7 +27,7 @@ A plugin could use the `environment` instance to change how a module is processe
27
27
}
28
28
```
29
29
30
-
## Registering new environments using hooks
30
+
## Registering New Environments Using Hooks
31
31
32
32
Plugins can add new environments in the `config` hook (for example to have a separate module graph for [RSC](https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components)):
33
33
@@ -39,7 +39,7 @@ Plugins can add new environments in the `config` hook (for example to have a sep
39
39
40
40
An empty object is enough to register the environment, default values from the root level environment config.
41
41
42
-
## Configuring environment using hooks
42
+
## Configuring Environment Using Hooks
43
43
44
44
While the `config` hook is running, the complete list of environments isn't yet known and the environments can be affected by both the default values from the root level environment config or explicitly through the `config.environments` record.
45
45
Plugins should set default values using the `config` hook. To configure each environment, they can use the new `configEnvironment` hook. This hook is called for each environment with its partially resolved config including resolution of final defaults.
@@ -50,7 +50,7 @@ Plugins should set default values using the `config` hook. To configure each env
In the same way as during dev, plugin hooks also receive the environment instance during build, replacing the `ssr` boolean.
190
190
This also works for `renderChunk`, `generateBundle`, and other build only hooks.
191
191
192
-
## Shared plugins during build
192
+
## Shared Plugins During Build
193
193
194
194
Before Vite 6, the plugins pipelines worked in a different way during dev and build:
195
195
@@ -204,7 +204,7 @@ In a future major (Vite 7 or 8), we aim to have complete alignment:
204
204
205
205
There will also be a single `ResolvedConfig` instance shared during build, allowing for caching at entire app build process level in the same way as we have been doing with `WeakMap<ResolvedConfig, CachedData>` during dev.
206
206
207
-
For Vite 6, we need to do a smaller step to keep backward compatibility. Ecosystem plugins are currently using `config.build` instead of `environment.config.build` to access configuration, so we need to create a new `ResolvedConfig` perenvironment by default. A project can opt-in into sharing the full config and plugins pipeline setting `builder.sharedConfigBuild` to `true`.
207
+
For Vite 6, we need to do a smaller step to keep backward compatibility. Ecosystem plugins are currently using `config.build` instead of `environment.config.build` to access configuration, so we need to create a new `ResolvedConfig` per-environment by default. A project can opt-in into sharing the full config and plugins pipeline setting `builder.sharedConfigBuild` to `true`.
208
208
209
209
This option would only work of a small subset of projects at first, so plugin authors can opt-in for a particular plugin to be shared by setting the `sharedDuringBuild` flag to `true`. This allows for easily sharing state both for regular plugins:
Copy file name to clipboardExpand all lines: docs/guide/api-environment-runtimes.md
+2-2Lines changed: 2 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -11,7 +11,7 @@ Resources:
11
11
Please share your feedback with us.
12
12
:::
13
13
14
-
## Environment factories
14
+
## Environment Factories
15
15
16
16
Environments factories are intended to be implemented by Environment providers like Cloudflare, and not by end users. Environment factories return a `EnvironmentOptions` for the most common case of using the target runtime for both dev and build environments. The default environment options can also be set so the user doesn't need to do it.
17
17
@@ -72,7 +72,7 @@ and frameworks can use an environment with the workerd runtime to do SSR using:
72
72
constssrEnvironment=server.environments.ssr
73
73
```
74
74
75
-
## Creating a new environment factory
75
+
## Creating a New Environment Factory
76
76
77
77
A Vite dev server exposes two environments by default: a `client` environment and an `ssr` environment. The client environment is a browser environment by default, and the module runner is implemented by importing the virtual module `/@vite/client` to client apps. The SSR environment runs in the same Node runtime as the Vite server by default and allows application servers to be used to render requests during dev with full HMR support.
Copy file name to clipboardExpand all lines: docs/guide/api-environment.md
+6-6Lines changed: 6 additions & 6 deletions
Original file line number
Diff line number
Diff line change
@@ -15,11 +15,11 @@ Please share your feedback with us.
15
15
16
16
Vite 6 formalizes the concept of Environments. Until Vite 5, there were two implicit Environments (`client`, and optionally `ssr`). The new Environment API allows users and framework authors to create as many environments as needed to map the way their apps work in production. This new capability required a big internal refactoring, but a lot of effort has been placed on backward compatibility. The initial goal of Vite 6 is to move the ecosystem to the new major as smoothly as possible, delaying the adoption of these new experimental APIs until enough users have migrated and frameworks and plugin authors have validated the new design.
17
17
18
-
## Closing the gap between build and dev
18
+
## Closing the Gap Between Build and Dev
19
19
20
20
For a simple SPA/MPA, no new APIs around environments are exposed to the config. Internally, Vite will apply the options to a `client` environment, but it's not necessary to know of this concept when configuring Vite. The config and behavior from Vite 5 should work seamlessly here.
21
21
22
-
When we move to a typical serverside rendered (SSR) app, we'll have two environments:
22
+
When we move to a typical server-side rendered (SSR) app, we'll have two environments:
23
23
24
24
-`client`: runs the app in the browser.
25
25
-`server`: runs the app in node (or other server runtimes) which renders pages before sending them to the browser.
@@ -68,7 +68,7 @@ export default {
68
68
}
69
69
```
70
70
71
-
When not explicitly documented, environment inherit the configured top-level config options (for example, the new `server` and `edge` environments will inherit the `build.sourcemap: false` option). A small number of top-level options, like `optimizeDeps`, only apply to the `client` environment, as they don't work well when applied as a default to server environments. The `client` environment can also be configured explicitly through `environments.client`, but we recommend to do it with the top-level options so the client config remains unchanged when adding new environments.
71
+
When not explicitly documented, environment inherits the configured top-level config options (for example, the new `server` and `edge` environments will inherit the `build.sourcemap: false` option). A small number of top-level options, like `optimizeDeps`, only apply to the `client` environment, as they don't work well when applied as a default to server environments. The `client` environment can also be configured explicitly through `environments.client`, but we recommend to do it with the top-level options so the client config remains unchanged when adding new environments.
72
72
73
73
The `EnvironmentOptions` interface exposes all the per-environment options. There are environment options that apply to both `build` and `dev`, like `resolve`. And there are `DevEnvironmentOptions` and `BuildEnvironmentOptions` for dev and build specific options (like `dev.warmup` or `build.outDir`). Some options like `optimizeDeps` only applies to dev, but is kept as top level instead of nested in `dev` for backward compatibility.
74
74
@@ -83,7 +83,7 @@ interface EnvironmentOptions {
83
83
}
84
84
```
85
85
86
-
The `UserConfig` interface extends from the `EnvironmentOptions` interface, allowing to configure the client and defaults for other environments, configured through the `environments` option. The `client` and a server environment named `ssr` are always present during dev. This allows backward compatibility with `server.ssrLoadModule(url)` and `server.moduleGraph`. During build, the `client` environment is always present, and the `ssr` environment is only present if it is explicitly configured (using `environments.ssr` or for backward compatibility `build.ssr`). An app doesn't need to use the `ssr` name for their SSR environment, it could name it `server` for example.
86
+
The `UserConfig` interface extends from the `EnvironmentOptions` interface, allowing to configure the client and defaults for other environments, configured through the `environments` option. The `client` and a server environment named `ssr` are always present during dev. This allows backward compatibility with `server.ssrLoadModule(url)` and `server.moduleGraph`. During build, the `client` environment is always present, and the `ssr` environment is only present if it is explicitly configured (using `environments.ssr` or for backward compatibility `build.ssr`). An app doesn't need to use the `ssr` name for its SSR environment, it could name it `server` for example.
Note that the `ssr` top-level property is going to be deprecated once the Environment API is stable. This option has the same role as `environments`, but for the default `ssr` environment and only allowed configuring of a small set of options.
96
96
97
-
## Custom environment instances
97
+
## Custom Environment Instances
98
98
99
99
Low level configuration APIs are available so runtime providers can provide environments with proper defaults for their runtimes. These environments can also spawn other processes or threads to run the modules during dev in a closer runtime to the production environment.
100
100
@@ -129,7 +129,7 @@ We don't recommend switching to Environment API yet. We are aiming for a good po
129
129
-[SSR using `ModuleRunner` API](/changes/ssr-using-modulerunner)
130
130
-[Shared plugins during build](/changes/shared-plugins-during-build)
131
131
132
-
## Target users
132
+
## Target Users
133
133
134
134
This guide provides the basic concepts about environments for end users.
0 commit comments