@react-router/dev 0.0.0-experimental-a2c4d7fad → 0.0.0-experimental-004e483a8

package/dist/vite.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-a2c4d7fad
+ * @react-router/dev v0.0.0-experimental-004e483a8
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -454,7 +454,8 @@ async function resolveConfig({
   }
   let future = {
     unstable_optimizeDeps: reactRouterUserConfig.future?.unstable_optimizeDeps ?? false,
-    unstable_splitRouteModules: reactRouterUserConfig.future?.unstable_splitRouteModules ?? false
+    unstable_splitRouteModules: reactRouterUserConfig.future?.unstable_splitRouteModules ?? false,
+    unstable_viteEnvironmentApi: reactRouterUserConfig.future?.unstable_viteEnvironmentApi ?? false
   };
   let reactRouterConfig = deepFreeze({
     appDirectory,
@@ -669,6 +670,7 @@ function getTypesPath(ctx, route) {
 // typegen/generate.ts
 function generate2(ctx, route) {
   const lineage = getRouteLineage(ctx.config.routes, route);
+  const urlpath = lineage.map((route2) => route2.path).join("/");
   const typesPath = getTypesPath(ctx, route);
   const parents = lineage.slice(0, -1);
   const parentTypeImports = parents.map((parent, i) => {
@@ -686,15 +688,22 @@ function generate2(ctx, route) {
     // ${route.file}
 
     import type * as T from "react-router/route-module"
-    import type { Routes } from "react-router/types"
 
     ${parentTypeImports}
 
-    type RouteId = "${route.id}"
+    type Module = typeof import("../${Pathe2.filename(route.file)}.js")
 
-    export type Info = Routes[RouteId] & {
+    export type Info = {
       parents: [${parents.map((_, i) => `Parent${i}`).join(", ")}],
-      id: RouteId
+      id: "${route.id}"
+      file: "${route.file}"
+      path: "${route.path}"
+      params: {${formatParamProperties(
+    urlpath
+  )}} & { [key: string]: string | undefined }
+      module: Module
+      loaderData: T.CreateLoaderData<Module>
+      actionData: T.CreateActionData<Module>
     }
 
     export namespace Route {
@@ -730,9 +739,38 @@ function getRouteLineage(routes, route) {
   result.reverse();
   return result;
 }
+function formatParamProperties(urlpath) {
+  const params = parseParams(urlpath);
+  const properties = Object.entries(params).map(([name, values]) => {
+    if (values.length === 1) {
+      const isOptional = values[0];
+      return isOptional ? `"${name}"?: string` : `"${name}": string`;
+    }
+    const items = values.map(
+      (isOptional) => isOptional ? "string | undefined" : "string"
+    );
+    return `"${name}": [${items.join(", ")}]`;
+  });
+  return properties.join("; ");
+}
+function parseParams(urlpath) {
+  const result = {};
+  let segments = urlpath.split("/");
+  segments.forEach((segment) => {
+    const match = segment.match(/^:([\w-]+)(\?)?/);
+    if (!match) return;
+    const param = match[1];
+    const isOptional = match[2] !== void 0;
+    result[param] ??= [];
+    result[param].push(isOptional);
+    return;
+  });
+  const hasSplat = segments.at(-1) === "*";
+  if (hasSplat) result["*"] = [false];
+  return result;
+}
 
 // typegen/index.ts
-var { t: t2 } = babel_exports;
 async function watch(rootDirectory, { logger } = {}) {
   const ctx = await createContext2({ rootDirectory, watch: true });
   await writeAll(ctx);
@@ -780,92 +818,72 @@ async function writeAll(ctx) {
     import_node_fs2.default.mkdirSync(Path4.dirname(typesPath), { recursive: true });
     import_node_fs2.default.writeFileSync(typesPath, content);
   });
-  Object.values(ctx.config.routes).map(
-    (route) => t2.tsPropertySignature(
-      t2.stringLiteral(route.id),
-      t2.tsTypeAnnotation(
-        t2.tsTypeLiteral([
-          t2.tsPropertySignature(
-            t2.identifier("parentId"),
-            t2.tsTypeAnnotation(
-              route.parentId ? t2.tsLiteralType(t2.stringLiteral(route.parentId)) : t2.tsUndefinedKeyword()
-            )
-          ),
-          t2.tsPropertySignature(
-            t2.identifier("path"),
-            t2.tsTypeAnnotation(
-              route.path ? t2.tsLiteralType(t2.stringLiteral(route.path)) : t2.tsUndefinedKeyword()
-            )
-          ),
-          t2.tsPropertySignature(
-            t2.identifier("module"),
-            t2.tsTypeAnnotation(
-              t2.tsTypeQuery(t2.tsImportType(t2.stringLiteral(route.file)))
-            )
-          )
-        ])
-      )
-    )
-  );
   const registerPath = Path4.join(typegenDir, "+register.ts");
   import_node_fs2.default.writeFileSync(registerPath, register(ctx));
 }
 function register(ctx) {
-  const routes = generate(
-    t2.tsTypeAliasDeclaration(
-      t2.identifier("Routes"),
-      null,
-      t2.tsTypeLiteral(
-        Object.values(ctx.config.routes).map(
-          (route) => t2.tsPropertySignature(
-            t2.stringLiteral(route.id),
-            t2.tsTypeAnnotation(
-              t2.tsTypeLiteral([
-                t2.tsPropertySignature(
-                  t2.identifier("parentId"),
-                  t2.tsTypeAnnotation(
-                    route.parentId ? t2.tsLiteralType(t2.stringLiteral(route.parentId)) : t2.tsUndefinedKeyword()
-                  )
-                ),
-                t2.tsPropertySignature(
-                  t2.identifier("path"),
-                  t2.tsTypeAnnotation(
-                    route.path ? t2.tsLiteralType(t2.stringLiteral(route.path)) : t2.tsUndefinedKeyword()
-                  )
-                ),
-                t2.tsPropertySignature(
-                  t2.identifier("module"),
-                  t2.tsTypeAnnotation(
-                    t2.tsTypeQuery(
-                      t2.tsImportType(
-                        t2.stringLiteral(compiledModulePath(ctx, route))
-                      )
-                    )
-                  )
-                )
-              ])
-            )
-          )
-        )
-      )
-    )
-  ).code;
-  const registerTypes = import_dedent2.default`
-    import "react-router/types";
+  const register2 = import_dedent2.default`
+    import "react-router";
 
-    declare module "react-router/types" {
+    declare module "react-router" {
       interface Register {
-        routes: Routes;
+        params: Params;
       }
     }
   `;
-  return [registerTypes, routes].join("\n\n");
+  const { t: t2 } = babel_exports;
+  const typeParams = t2.tsTypeAliasDeclaration(
+    t2.identifier("Params"),
+    null,
+    t2.tsTypeLiteral(
+      Object.values(ctx.config.routes).map((route) => {
+        const lineage = getRouteLineage2(ctx.config.routes, route);
+        const fullpath = lineage.map((route2) => route2.path).join("/");
+        const params = parseParams2(fullpath);
+        return t2.tsPropertySignature(
+          t2.stringLiteral(fullpath),
+          t2.tsTypeAnnotation(
+            t2.tsTypeLiteral(
+              Object.entries(params).map(([param, isRequired]) => {
+                const property = t2.tsPropertySignature(
+                  t2.stringLiteral(param),
+                  t2.tsTypeAnnotation(t2.tsStringKeyword())
+                );
+                property.optional = !isRequired;
+                return property;
+              })
+            )
+          )
+        );
+      })
+    )
+  );
+  return [register2, generate(typeParams).code].join("\n\n");
+}
+function parseParams2(fullpath) {
+  const result = {};
+  let segments = fullpath.split("/");
+  segments.forEach((segment) => {
+    const match = segment.match(/^:([\w-]+)(\?)?/);
+    if (!match) return;
+    const param = match[1];
+    const isRequired = match[2] === void 0;
+    result[param] ||= isRequired;
+    return;
+  });
+  const hasSplat = segments.at(-1) === "*";
+  if (hasSplat) result["*"] = true;
+  return result;
 }
-function compiledModulePath(ctx, route) {
-  return "./" + Path4.relative(
-    ctx.rootDirectory,
-    Path4.join(ctx.config.appDirectory, route.file)
-  ).replace(/\.(js|ts)x?$/, ".js");
+function getRouteLineage2(routes, route) {
+  const result = [];
+  while (route) {
+    result.push(route);
+    if (!route.parentId) break;
+    route = routes[route.parentId];
+  }
+  result.reverse();
+  return result;
 }
 
 // vite/node-adapter.ts
@@ -1970,6 +1988,20 @@ var CLIENT_ROUTE_EXPORTS = [
   "shouldRevalidate"
 ];
 var BUILD_CLIENT_ROUTE_QUERY_STRING = "?__react-router-build-client-route";
+var SSR_BUNDLE_PREFIX = "ssrBundle_";
+function isSeverBundleEnvironmentName(name) {
+  return name.startsWith(SSR_BUNDLE_PREFIX);
+}
+function getServerEnvironmentEntries(record, buildManifest) {
+  return Object.entries(record).filter(
+    ([name]) => buildManifest.serverBundles ? isSeverBundleEnvironmentName(name) : name === "ssr"
+  );
+}
+function getServerEnvironmentValues(record, buildManifest) {
+  return getServerEnvironmentEntries(record, buildManifest).map(
+    ([, value]) => value
+  );
+}
 var isRouteEntryModuleId = (id) => {
   return id.endsWith(BUILD_CLIENT_ROUTE_QUERY_STRING);
 };
@@ -2138,7 +2170,7 @@ var resolveEnvironmentBuildContext = ({
   let buildContext = viteUserConfig.__reactRouterEnvironmentBuildContext;
   let resolvedBuildContext = {
     name: buildContext.name,
-    options: buildContext.resolveOptions({ viteCommand, viteUserConfig })
+    options: buildContext.resolveOptions({ viteUserConfig })
   };
   return resolvedBuildContext;
 };
@@ -2163,6 +2195,7 @@ var reactRouterVitePlugin = () => {
   let viteUserConfig;
   let viteConfigEnv;
   let viteConfig;
+  let buildManifest;
   let cssModulesManifest = {};
   let viteChildCompiler = null;
   let cache = /* @__PURE__ */ new Map();
@@ -2481,14 +2514,6 @@ var reactRouterVitePlugin = () => {
         let viteClientConditions = [
           ...vite2.defaultClientConditions ?? []
         ];
-        let packageRoot = path6.dirname(
-          require.resolve("@react-router/dev/package.json")
-        );
-        let { moduleSyncEnabled } = await import(`file:///${path6.join(packageRoot, "module-sync-enabled/index.mjs")}`);
-        let viteServerConditions = [
-          ...vite2.defaultServerConditions ?? [],
-          ...moduleSyncEnabled ? ["module-sync"] : []
-        ];
         logger = vite2.createLogger(viteUserConfig.logLevel, {
           prefix: "[react-router]"
         });
@@ -2504,26 +2529,37 @@ var reactRouterVitePlugin = () => {
           watch: viteCommand === "serve"
         });
         await updatePluginContext();
+        buildManifest = await getBuildManifest(ctx);
         Object.assign(
           process.env,
           vite2.loadEnv(
             viteConfigEnv.mode,
-            ctx.rootDirectory,
+            viteUserConfig.envDir ?? ctx.rootDirectory,
             // We override default prefix of "VITE_" with a blank string since
             // we're targeting the server, so we want to load all environment
             // variables, not just those explicitly marked for the client
             ""
           )
         );
+        let environments = await getEnvironmentsOptions(
+          ctx,
+          buildManifest,
+          viteCommand,
+          { viteUserConfig }
+        );
+        let serverEnvironment = getServerEnvironmentValues(
+          environments,
+          buildManifest
+        )[0];
+        invariant(serverEnvironment);
+        let clientEnvironment = environments.client;
+        invariant(clientEnvironment);
         return {
           __reactRouterPluginContext: ctx,
           appType: viteCommand === "serve" && viteConfigEnv.mode === "production" && ctx.reactRouterConfig.ssr === false ? "spa" : "custom",
           ssr: {
-            external: ssrExternals,
-            resolve: {
-              conditions: viteCommand === "build" ? viteServerConditions : ["development", ...viteServerConditions],
-              externalConditions: viteCommand === "build" ? viteServerConditions : ["development", ...viteServerConditions]
-            }
+            external: serverEnvironment.resolve?.external,
+            resolve: serverEnvironment.resolve
           },
           optimizeDeps: {
             entries: ctx.reactRouterConfig.future.unstable_optimizeDeps ? [
@@ -2572,11 +2608,41 @@ var reactRouterVitePlugin = () => {
           // will throw an error that the file is not allowed to be read.
           // https://vitejs.dev/config/server-options#server-fs-allow
           server: viteUserConfig.server?.fs?.allow ? { fs: { allow: defaultEntries } } : void 0,
-          build: ctx.environmentBuildContext?.options.build ?? (await getEnvironmentOptions(
-            ctx,
-            viteConfigEnv.isSsrBuild ? "ssr" : "client",
-            { viteCommand, viteUserConfig }
-          )).build
+          ...ctx.reactRouterConfig.future.unstable_viteEnvironmentApi ? {
+            environments,
+            build: {
+              // This isn't honored by the SSR environment config (which seems
+              // to be a Vite bug?) so we set it here too.
+              ssrEmitAssets: true
+            },
+            builder: {
+              sharedConfigBuild: true,
+              sharedPlugins: true,
+              async buildApp(builder) {
+                invariant(viteConfig);
+                invariant(buildManifest);
+                viteConfig.logger.info(
+                  "Using Vite Environment API (experimental)"
+                );
+                let { reactRouterConfig } = ctx;
+                await cleanBuildDirectory(viteConfig, ctx);
+                await builder.build(builder.environments.client);
+                let serverEnvironments = getServerEnvironmentValues(
+                  builder.environments,
+                  buildManifest
+                );
+                await Promise.all(serverEnvironments.map(builder.build));
+                await cleanViteManifests(environments, ctx);
+                await reactRouterConfig.buildEnd?.({
+                  buildManifest,
+                  reactRouterConfig,
+                  viteConfig
+                });
+              }
+            }
+          } : {
+            build: ctx.environmentBuildContext?.options.build ?? (viteConfigEnv.isSsrBuild ? serverEnvironment.build : clientEnvironment.build)
+          }
         };
       },
       async configResolved(resolvedViteConfig) {
@@ -2734,14 +2800,15 @@ var reactRouterVitePlugin = () => {
         // After the SSR build is finished, we inspect the Vite manifest for
         // the SSR build and move server-only assets to client assets directory
         async handler() {
-          if (!viteConfigEnv.isSsrBuild) {
+          let { future } = ctx.reactRouterConfig;
+          if (future.unstable_viteEnvironmentApi ? this.environment.name === "client" : !viteConfigEnv.isSsrBuild) {
             return;
           }
           invariant(viteConfig);
           let clientBuildDirectory = getClientBuildDirectory(
             ctx.reactRouterConfig
           );
-          let serverBuildDirectory = ctx.environmentBuildContext?.options.build.outDir ?? getServerBuildDirectory(ctx);
+          let serverBuildDirectory = future.unstable_viteEnvironmentApi ? this.environment.config?.build?.outDir : ctx.environmentBuildContext?.options.build?.outDir ?? getServerBuildDirectory(ctx);
           let ssrViteManifest = await loadViteManifest(serverBuildDirectory);
           let ssrAssetPaths = getViteManifestAssetPaths(ssrViteManifest);
           let movedAssetPaths = [];
@@ -3689,6 +3756,39 @@ function validateRouteChunks({
     ].join("\n\n")
   );
 }
+async function cleanBuildDirectory(viteConfig, ctx) {
+  let buildDirectory = ctx.reactRouterConfig.buildDirectory;
+  let isWithinRoot = () => {
+    let relativePath = path6.relative(ctx.rootDirectory, buildDirectory);
+    return !relativePath.startsWith("..") && !path6.isAbsolute(relativePath);
+  };
+  if (viteConfig.build.emptyOutDir ?? isWithinRoot()) {
+    await fse.remove(buildDirectory);
+  }
+}
+async function cleanViteManifests(environmentsOptions, ctx) {
+  let viteManifestPaths = Object.entries(environmentsOptions).map(
+    ([environmentName, options]) => {
+      let outDir = options.build?.outDir;
+      invariant(outDir, `Expected build.outDir for ${environmentName}`);
+      return path6.join(outDir, ".vite/manifest.json");
+    }
+  );
+  await Promise.all(
+    viteManifestPaths.map(async (viteManifestPath) => {
+      let manifestExists = await fse.pathExists(viteManifestPath);
+      if (!manifestExists) return;
+      if (!ctx.viteManifestEnabled) {
+        await fse.remove(viteManifestPath);
+      }
+      let viteDir = path6.dirname(viteManifestPath);
+      let viteDirFiles = await fse.readdir(viteDir);
+      if (viteDirFiles.length === 0) {
+        await fse.remove(viteDir);
+      }
+    })
+  );
+}
 async function getBuildManifest(ctx) {
   let { routes, serverBundles, appDirectory } = ctx.reactRouterConfig;
   if (!serverBundles) {
@@ -3748,77 +3848,101 @@ async function getBuildManifest(ctx) {
   );
   return buildManifest;
 }
-function mergeBuildOptions(base, overrides) {
+function mergeEnvironmentOptions(base, ...overrides) {
   let vite2 = getVite();
-  return vite2.mergeConfig({ build: base }, { build: overrides }).build;
+  return overrides.reduce(
+    (merged, override) => vite2.mergeConfig(merged, override, false),
+    base
+  );
 }
-async function getEnvironmentOptionsResolvers(ctx, buildManifest) {
+async function getEnvironmentOptionsResolvers(ctx, buildManifest, viteCommand) {
   let { serverBuildFile, serverModuleFormat } = ctx.reactRouterConfig;
-  function getBaseBuildOptions({
+  let packageRoot = path6.dirname(
+    require.resolve("@react-router/dev/package.json")
+  );
+  let { moduleSyncEnabled } = await import(`file:///${path6.join(packageRoot, "module-sync-enabled/index.mjs")}`);
+  let vite2 = getVite();
+  let viteServerConditions = [
+    ...vite2.defaultServerConditions ?? [],
+    ...moduleSyncEnabled ? ["module-sync"] : []
+  ];
+  function getBaseOptions({
     viteUserConfig
   }) {
     return {
-      cssMinify: viteUserConfig.build?.cssMinify ?? true,
-      manifest: true,
-      // The manifest is enabled for all builds to detect SSR-only assets
-      rollupOptions: {
-        preserveEntrySignatures: "exports-only",
-        // Silence Rollup "use client" warnings
-        // Adapted from https://github.com/vitejs/vite-plugin-react/pull/144
-        onwarn(warning, defaultHandler) {
-          if (warning.code === "MODULE_LEVEL_DIRECTIVE" && warning.message.includes("use client")) {
-            return;
-          }
-          let userHandler = viteUserConfig.build?.rollupOptions?.onwarn;
-          if (userHandler) {
-            userHandler(warning, defaultHandler);
-          } else {
-            defaultHandler(warning);
+      build: {
+        cssMinify: viteUserConfig.build?.cssMinify ?? true,
+        manifest: true,
+        // The manifest is enabled for all builds to detect SSR-only assets
+        rollupOptions: {
+          preserveEntrySignatures: "exports-only",
+          // Silence Rollup "use client" warnings
+          // Adapted from https://github.com/vitejs/vite-plugin-react/pull/144
+          onwarn(warning, defaultHandler) {
+            if (warning.code === "MODULE_LEVEL_DIRECTIVE" && warning.message.includes("use client")) {
+              return;
+            }
+            let userHandler = viteUserConfig.build?.rollupOptions?.onwarn;
+            if (userHandler) {
+              userHandler(warning, defaultHandler);
+            } else {
+              defaultHandler(warning);
+            }
           }
         }
       }
     };
   }
-  function getBaseServerBuildOptions({
+  function getBaseServerOptions({
     viteUserConfig
   }) {
-    return mergeBuildOptions(getBaseBuildOptions({ viteUserConfig }), {
-      // We move SSR-only assets to client assets. Note that the
-      // SSR build can also emit code-split JS files (e.g. by
-      // dynamic import) under the same assets directory
-      // regardless of "ssrEmitAssets" option, so we also need to
-      // keep these JS files have to be kept as-is.
-      ssrEmitAssets: true,
-      copyPublicDir: false,
-      // Assets in the public directory are only used by the client
-      rollupOptions: {
-        output: {
-          entryFileNames: serverBuildFile,
-          format: serverModuleFormat
+    let conditions = viteCommand === "build" ? viteServerConditions : ["development", ...viteServerConditions];
+    return mergeEnvironmentOptions(getBaseOptions({ viteUserConfig }), {
+      resolve: {
+        external: ssrExternals,
+        conditions,
+        externalConditions: conditions
+      },
+      build: {
+        // We move SSR-only assets to client assets. Note that the
+        // SSR build can also emit code-split JS files (e.g. by
+        // dynamic import) under the same assets directory
+        // regardless of "ssrEmitAssets" option, so we also need to
+        // keep these JS files have to be kept as-is.
+        ssrEmitAssets: true,
+        copyPublicDir: false,
+        // Assets in the public directory are only used by the client
+        rollupOptions: {
+          output: {
+            entryFileNames: serverBuildFile,
+            format: serverModuleFormat
+          }
         }
       }
     });
   }
   let environmentOptionsResolvers = {
-    client: ({ viteUserConfig }) => ({
-      build: mergeBuildOptions(getBaseBuildOptions({ viteUserConfig }), {
+    client: ({ viteUserConfig }) => mergeEnvironmentOptions(getBaseOptions({ viteUserConfig }), {
+      build: {
         rollupOptions: {
           input: [
             ctx.entryClientFilePath,
-            ...Object.values(ctx.reactRouterConfig.routes).flatMap((route) => {
-              let routeFilePath = path6.resolve(
-                ctx.reactRouterConfig.appDirectory,
-                route.file
-              );
-              let isRootRoute = route.file === ctx.reactRouterConfig.routes.root.file;
-              let code = fse.readFileSync(routeFilePath, "utf-8");
-              return [
-                `${routeFilePath}${BUILD_CLIENT_ROUTE_QUERY_STRING}`,
-                ...ctx.reactRouterConfig.future.unstable_splitRouteModules && !isRootRoute ? routeChunkExportNames.map(
-                  (exportName) => code.includes(exportName) ? getRouteChunkModuleId(routeFilePath, exportName) : null
-                ) : []
-              ].filter(isNonNullable);
-            })
+            ...Object.values(ctx.reactRouterConfig.routes).flatMap(
+              (route) => {
+                let routeFilePath = path6.resolve(
+                  ctx.reactRouterConfig.appDirectory,
+                  route.file
+                );
+                let isRootRoute = route.file === ctx.reactRouterConfig.routes.root.file;
+                let code = fse.readFileSync(routeFilePath, "utf-8");
+                return [
+                  `${routeFilePath}${BUILD_CLIENT_ROUTE_QUERY_STRING}`,
+                  ...ctx.reactRouterConfig.future.unstable_splitRouteModules && !isRootRoute ? routeChunkExportNames.map(
+                    (exportName) => code.includes(exportName) ? getRouteChunkModuleId(routeFilePath, exportName) : null
+                  ) : []
+                ].filter(isNonNullable);
+              }
+            )
           ],
           output: {
             entryFileNames({ moduleIds }) {
@@ -3830,19 +3954,19 @@ async function getEnvironmentOptionsResolvers(ctx, buildManifest) {
           }
         },
         outDir: getClientBuildDirectory(ctx.reactRouterConfig)
-      })
+      }
     })
   };
   if (hasServerBundles(buildManifest)) {
     for (let [serverBundleId, routes] of Object.entries(
       getRoutesByServerBundleId(buildManifest)
     )) {
-      environmentOptionsResolvers[`ssr-bundle-${serverBundleId}`] = ({
-        viteUserConfig
-      }) => ({
-        build: mergeBuildOptions(
-          getBaseServerBuildOptions({ viteUserConfig }),
-          {
+      const serverBundleEnvironmentId = serverBundleId.replaceAll("-", "_");
+      const environmentName = `${SSR_BUNDLE_PREFIX}${serverBundleEnvironmentId}`;
+      environmentOptionsResolvers[environmentName] = ({ viteUserConfig }) => mergeEnvironmentOptions(
+        getBaseServerOptions({ viteUserConfig }),
+        {
+          build: {
             outDir: getServerBuildDirectory(ctx, { serverBundleId }),
             rollupOptions: {
               input: `${virtual.serverBuild.id}?route-ids=${Object.keys(
@@ -3850,30 +3974,43 @@ async function getEnvironmentOptionsResolvers(ctx, buildManifest) {
               ).join(",")}`
             }
           }
-        )
-      });
+        },
+        // Ensure server bundle environments extend the user's SSR
+        // environment config if it exists
+        viteUserConfig.environments?.ssr ?? {}
+      );
     }
   } else {
-    environmentOptionsResolvers.ssr = ({ viteUserConfig }) => ({
-      build: mergeBuildOptions(getBaseServerBuildOptions({ viteUserConfig }), {
+    environmentOptionsResolvers.ssr = ({ viteUserConfig }) => mergeEnvironmentOptions(getBaseServerOptions({ viteUserConfig }), {
+      build: {
         outDir: getServerBuildDirectory(ctx),
         rollupOptions: {
           input: viteUserConfig.build?.rollupOptions?.input ?? virtual.serverBuild.id
         }
-      })
+      }
     });
   }
   return environmentOptionsResolvers;
 }
-async function getEnvironmentOptions(ctx, environmentName, resolverOptions) {
-  let buildManifest = await getBuildManifest(ctx);
-  let environmentResolvers = await getEnvironmentOptionsResolvers(
+function resolveEnvironmentsOptions(environmentResolvers, resolverOptions) {
+  let environmentOptions = {};
+  for (let [environmentName, resolver] of Object.entries(
+    environmentResolvers
+  )) {
+    environmentOptions[environmentName] = resolver(resolverOptions);
+  }
+  return environmentOptions;
+}
+async function getEnvironmentsOptions(ctx, buildManifest, viteCommand, resolverOptions) {
+  let environmentOptionsResolvers = await getEnvironmentOptionsResolvers(
     ctx,
-    buildManifest
+    buildManifest,
+    viteCommand
+  );
+  return resolveEnvironmentsOptions(
+    environmentOptionsResolvers,
+    resolverOptions
   );
-  let resolver = environmentResolvers[environmentName];
-  invariant(resolver, `Missing environment resolver for ${environmentName}`);
-  return resolver(resolverOptions);
 }
 function isNonNullable(x) {
   return x != null;