@react-router/dev 7.1.5-pre.0 → 7.2.0-pre.0

package/dist/cli/index.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 /**
- * @react-router/dev v7.1.5-pre.0
+ * @react-router/dev v7.2.0-pre.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -178,7 +178,7 @@ function validateRouteConfig({
         `Route config in "${routeConfigFile}" is invalid.`,
         root ? `${root}` : [],
         nested ? Object.entries(nested).map(
-          ([path10, message]) => `Path: routes.${path10}
+          ([path9, message]) => `Path: routes.${path9}
 ${message}`
         ) : []
       ].flat().join("\n\n")
@@ -389,7 +389,9 @@ async function resolveConfig({
     );
   }
   let future = {
-    unstable_optimizeDeps: reactRouterUserConfig.future?.unstable_optimizeDeps ?? false
+    unstable_optimizeDeps: reactRouterUserConfig.future?.unstable_optimizeDeps ?? false,
+    unstable_splitRouteModules: reactRouterUserConfig.future?.unstable_splitRouteModules ?? false,
+    unstable_viteEnvironmentApi: reactRouterUserConfig.future?.unstable_viteEnvironmentApi ?? false
   };
   let reactRouterConfig = deepFreeze({
     appDirectory,
@@ -764,7 +766,7 @@ var init_generate = __esm({
     Path3 = __toESM(require("pathe"));
     Pathe2 = __toESM(require("pathe/utils"));
     init_paths();
-    noExtension = (path10) => Path3.join(Path3.dirname(path10), Pathe2.filename(path10));
+    noExtension = (path9) => Path3.join(Path3.dirname(path9), Pathe2.filename(path9));
   }
 });
 
@@ -915,6 +917,59 @@ var init_remove_exports = __esm({
   }
 });
 
+// vite/cache.ts
+var init_cache = __esm({
+  "vite/cache.ts"() {
+    "use strict";
+  }
+});
+
+// vite/route-chunks.ts
+function getRouteChunkModuleId(filePath, chunkName) {
+  return `${filePath}${routeChunkQueryStrings[chunkName]}`;
+}
+function isRouteChunkModuleId(id) {
+  return Object.values(routeChunkQueryStrings).some(
+    (queryString) => id.endsWith(queryString)
+  );
+}
+function isRouteChunkName(name) {
+  return name === mainChunkName || routeChunkExportNames.includes(name);
+}
+function getRouteChunkNameFromModuleId(id) {
+  if (!isRouteChunkModuleId(id)) {
+    return null;
+  }
+  let chunkName = id.split(routeChunkQueryStringPrefix)[1].split("&")[0];
+  if (!isRouteChunkName(chunkName)) {
+    return null;
+  }
+  return chunkName;
+}
+var routeChunkExportNames, mainChunkName, routeChunkNames, routeChunkQueryStringPrefix, routeChunkQueryStrings;
+var init_route_chunks = __esm({
+  "vite/route-chunks.ts"() {
+    "use strict";
+    init_invariant();
+    init_cache();
+    init_babel();
+    routeChunkExportNames = [
+      "clientAction",
+      "clientLoader",
+      "HydrateFallback"
+    ];
+    mainChunkName = "main";
+    routeChunkNames = ["main", ...routeChunkExportNames];
+    routeChunkQueryStringPrefix = "?route-chunk=";
+    routeChunkQueryStrings = {
+      main: `${routeChunkQueryStringPrefix}main`,
+      clientAction: `${routeChunkQueryStringPrefix}clientAction`,
+      clientLoader: `${routeChunkQueryStringPrefix}clientLoader`,
+      HydrateFallback: `${routeChunkQueryStringPrefix}HydrateFallback`
+    };
+  }
+});
+
 // vite/with-props.ts
 var import_dedent2, vmod;
 var init_with_props = __esm({
@@ -931,11 +986,12 @@ var init_with_props = __esm({
 async function resolveViteConfig({
   configFile,
   mode,
-  root
+  root,
+  plugins
 }) {
   let vite2 = getVite();
   let viteConfig = await vite2.resolveConfig(
-    { mode, configFile, root },
+    { mode, configFile, root, plugins },
     "build",
     // command
     "production",
@@ -951,7 +1007,315 @@ async function resolveViteConfig({
 async function extractPluginContext(viteConfig) {
   return viteConfig["__reactRouterPluginContext"];
 }
-var import_node_crypto, path7, url, fse, babel2, import_react_router2, import_es_module_lexer, import_jsesc, import_picocolors4, virtualHmrRuntime, virtualInjectHmrRuntime, virtual, getServerBuildDirectory, defaultEntriesDir, defaultEntries, REACT_REFRESH_HEADER;
+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 getServerEnvironmentKeys(record, buildManifest) {
+  return getServerEnvironmentEntries(record, buildManifest).map(([key]) => key);
+}
+function getAddressableRoutes(routes2) {
+  let nonAddressableIds = /* @__PURE__ */ new Set();
+  for (let id in routes2) {
+    let route = routes2[id];
+    if (route.index) {
+      invariant(
+        route.parentId,
+        `Expected index route "${route.id}" to have "parentId" set`
+      );
+      nonAddressableIds.add(route.parentId);
+    }
+    if (typeof route.path !== "string" && !route.index) {
+      nonAddressableIds.add(id);
+    }
+  }
+  return Object.values(routes2).filter(
+    (route) => !nonAddressableIds.has(route.id)
+  );
+}
+function getRouteBranch(routes2, routeId) {
+  let branch = [];
+  let currentRouteId = routeId;
+  while (currentRouteId) {
+    let route = routes2[currentRouteId];
+    invariant(route, `Missing route for ${currentRouteId}`);
+    branch.push(route);
+    currentRouteId = route.parentId;
+  }
+  return branch.reverse();
+}
+function hasServerBundles(buildManifest) {
+  return Object.keys(buildManifest.serverBundles ?? {}).length > 0;
+}
+function getRoutesByServerBundleId(buildManifest) {
+  if (!buildManifest.routeIdToServerBundleId) {
+    return {};
+  }
+  let routesByServerBundleId = {};
+  for (let [routeId, serverBundleId] of Object.entries(
+    buildManifest.routeIdToServerBundleId
+  )) {
+    routesByServerBundleId[serverBundleId] ??= {};
+    let branch = getRouteBranch(buildManifest.routes, routeId);
+    for (let route of branch) {
+      routesByServerBundleId[serverBundleId][route.id] = route;
+    }
+  }
+  return routesByServerBundleId;
+}
+async function cleanBuildDirectory(viteConfig, ctx) {
+  let buildDirectory = ctx.reactRouterConfig.buildDirectory;
+  let isWithinRoot = () => {
+    let relativePath = path7.relative(ctx.rootDirectory, buildDirectory);
+    return !relativePath.startsWith("..") && !path7.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 path7.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 = path7.dirname(viteManifestPath);
+      let viteDirFiles = await fse.readdir(viteDir);
+      if (viteDirFiles.length === 0) {
+        await fse.remove(viteDir);
+      }
+    })
+  );
+}
+async function getBuildManifest(ctx) {
+  let { routes: routes2, serverBundles, appDirectory } = ctx.reactRouterConfig;
+  if (!serverBundles) {
+    return { routes: routes2 };
+  }
+  let { normalizePath } = await import("vite");
+  let serverBuildDirectory = getServerBuildDirectory(ctx);
+  let resolvedAppDirectory = path7.resolve(ctx.rootDirectory, appDirectory);
+  let rootRelativeRoutes = Object.fromEntries(
+    Object.entries(routes2).map(([id, route]) => {
+      let filePath = path7.join(resolvedAppDirectory, route.file);
+      let rootRelativeFilePath = normalizePath(
+        path7.relative(ctx.rootDirectory, filePath)
+      );
+      return [id, { ...route, file: rootRelativeFilePath }];
+    })
+  );
+  let buildManifest = {
+    serverBundles: {},
+    routeIdToServerBundleId: {},
+    routes: rootRelativeRoutes
+  };
+  await Promise.all(
+    getAddressableRoutes(routes2).map(async (route) => {
+      let branch = getRouteBranch(routes2, route.id);
+      let serverBundleId = await serverBundles({
+        branch: branch.map(
+          (route2) => configRouteToBranchRoute({
+            ...route2,
+            // Ensure absolute paths are passed to the serverBundles function
+            file: path7.join(resolvedAppDirectory, route2.file)
+          })
+        )
+      });
+      if (typeof serverBundleId !== "string") {
+        throw new Error(`The "serverBundles" function must return a string`);
+      }
+      if (!/^[a-zA-Z0-9-_]+$/.test(serverBundleId)) {
+        throw new Error(
+          `The "serverBundles" function must only return strings containing alphanumeric characters, hyphens and underscores.`
+        );
+      }
+      buildManifest.routeIdToServerBundleId[route.id] = serverBundleId;
+      buildManifest.serverBundles[serverBundleId] ??= {
+        id: serverBundleId,
+        file: normalizePath(
+          path7.join(
+            path7.relative(
+              ctx.rootDirectory,
+              path7.join(serverBuildDirectory, serverBundleId)
+            ),
+            ctx.reactRouterConfig.serverBuildFile
+          )
+        )
+      };
+    })
+  );
+  return buildManifest;
+}
+function mergeEnvironmentOptions(base, ...overrides) {
+  let vite2 = getVite();
+  return overrides.reduce(
+    (merged, override) => vite2.mergeConfig(merged, override, false),
+    base
+  );
+}
+async function getEnvironmentOptionsResolvers(ctx, buildManifest, viteCommand) {
+  let { serverBuildFile, serverModuleFormat } = ctx.reactRouterConfig;
+  let packageRoot = path7.dirname(
+    require.resolve("@react-router/dev/package.json")
+  );
+  let { moduleSyncEnabled } = await import(`file:///${path7.join(packageRoot, "module-sync-enabled/index.mjs")}`);
+  let vite2 = getVite();
+  let viteServerConditions = [
+    ...vite2.defaultServerConditions ?? [],
+    ...moduleSyncEnabled ? ["module-sync"] : []
+  ];
+  function getBaseOptions({
+    viteUserConfig
+  }) {
+    return {
+      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 getBaseServerOptions({
+    viteUserConfig
+  }) {
+    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 }) => mergeEnvironmentOptions(getBaseOptions({ viteUserConfig }), {
+      build: {
+        rollupOptions: {
+          input: [
+            ctx.entryClientFilePath,
+            ...Object.values(ctx.reactRouterConfig.routes).flatMap(
+              (route) => {
+                let routeFilePath = path7.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 }) {
+              let routeChunkModuleId = moduleIds.find(isRouteChunkModuleId);
+              let routeChunkName = routeChunkModuleId ? getRouteChunkNameFromModuleId(routeChunkModuleId) : null;
+              let routeChunkSuffix = routeChunkName ? `-${(0, import_kebabCase.default)(routeChunkName)}` : "";
+              return `assets/[name]${routeChunkSuffix}-[hash].js`;
+            }
+          }
+        },
+        outDir: getClientBuildDirectory(ctx.reactRouterConfig)
+      }
+    })
+  };
+  if (hasServerBundles(buildManifest)) {
+    for (let [serverBundleId, routes2] of Object.entries(
+      getRoutesByServerBundleId(buildManifest)
+    )) {
+      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(
+                routes2
+              ).join(",")}`
+            }
+          }
+        },
+        // Ensure server bundle environments extend the user's SSR
+        // environment config if it exists
+        viteUserConfig.environments?.ssr ?? {}
+      );
+    }
+  } else {
+    environmentOptionsResolvers.ssr = ({ viteUserConfig }) => mergeEnvironmentOptions(getBaseServerOptions({ viteUserConfig }), {
+      build: {
+        outDir: getServerBuildDirectory(ctx),
+        rollupOptions: {
+          input: (ctx.reactRouterConfig.future.unstable_viteEnvironmentApi ? viteUserConfig.environments?.ssr?.build?.rollupOptions?.input : viteUserConfig.build?.rollupOptions?.input) ?? virtual.serverBuild.id
+        }
+      }
+    });
+  }
+  return environmentOptionsResolvers;
+}
+function resolveEnvironmentsOptions(environmentResolvers, resolverOptions) {
+  let environmentOptions = {};
+  for (let [environmentName, resolver] of Object.entries(
+    environmentResolvers
+  )) {
+    environmentOptions[environmentName] = resolver(resolverOptions);
+  }
+  return environmentOptions;
+}
+function isNonNullable(x) {
+  return x != null;
+}
+var import_node_crypto, path7, url, fse, babel2, import_react_router2, import_es_module_lexer, import_pick3, import_jsesc, import_picocolors4, import_kebabCase, BUILD_CLIENT_ROUTE_QUERY_STRING, SSR_BUNDLE_PREFIX, virtualHmrRuntime, virtualInjectHmrRuntime, virtual, getServerBuildDirectory, getClientBuildDirectory, defaultEntriesDir, defaultEntries, REACT_REFRESH_HEADER;
 var init_plugin = __esm({
   "vite/plugin.ts"() {
     "use strict";
@@ -962,8 +1326,10 @@ var init_plugin = __esm({
     babel2 = __toESM(require("@babel/core"));
     import_react_router2 = require("react-router");
     import_es_module_lexer = require("es-module-lexer");
+    import_pick3 = __toESM(require("lodash/pick"));
     import_jsesc = __toESM(require("jsesc"));
     import_picocolors4 = __toESM(require("picocolors"));
+    import_kebabCase = __toESM(require("lodash/kebabCase"));
     init_typegen();
     init_invariant();
     init_babel();
@@ -973,9 +1339,12 @@ var init_plugin = __esm({
     init_resolve_file_url();
     init_combine_urls();
     init_remove_exports();
+    init_route_chunks();
     init_vite();
     init_config();
     init_with_props();
+    BUILD_CLIENT_ROUTE_QUERY_STRING = "?__react-router-build-client-route";
+    SSR_BUNDLE_PREFIX = "ssrBundle_";
     virtualHmrRuntime = create("hmr-runtime");
     virtualInjectHmrRuntime = create("inject-hmr-runtime");
     virtual = {
@@ -983,11 +1352,12 @@ var init_plugin = __esm({
       serverManifest: create("server-manifest"),
       browserManifest: create("browser-manifest")
     };
-    getServerBuildDirectory = (ctx) => path7.join(
+    getServerBuildDirectory = (ctx, { serverBundleId } = {}) => path7.join(
       ctx.reactRouterConfig.buildDirectory,
       "server",
-      ...ctx.serverBundleBuildConfig ? [ctx.serverBundleBuildConfig.serverBundleId] : []
+      ...serverBundleId ? [serverBundleId] : []
     );
+    getClientBuildDirectory = (reactRouterConfig) => path7.join(reactRouterConfig.buildDirectory, "client");
     defaultEntriesDir = path7.resolve(
       path7.dirname(require.resolve("@react-router/dev/package.json")),
       "dist",
@@ -1025,144 +1395,83 @@ var build_exports = {};
 __export(build_exports, {
   build: () => build
 });
-function getAddressableRoutes(routes2) {
-  let nonAddressableIds = /* @__PURE__ */ new Set();
-  for (let id in routes2) {
-    let route = routes2[id];
-    if (route.index) {
-      invariant(
-        route.parentId,
-        `Expected index route "${route.id}" to have "parentId" set`
-      );
-      nonAddressableIds.add(route.parentId);
-    }
-    if (typeof route.path !== "string" && !route.index) {
-      nonAddressableIds.add(id);
-    }
+async function build(root, viteBuildOptions) {
+  await preloadVite();
+  let vite2 = getVite();
+  let configResult = await loadConfig({ rootDirectory: root });
+  if (!configResult.ok) {
+    throw new Error(configResult.error);
   }
-  return Object.values(routes2).filter(
-    (route) => !nonAddressableIds.has(route.id)
-  );
-}
-function getRouteBranch(routes2, routeId) {
-  let branch = [];
-  let currentRouteId = routeId;
-  while (currentRouteId) {
-    let route = routes2[currentRouteId];
-    invariant(route, `Missing route for ${currentRouteId}`);
-    branch.push(route);
-    currentRouteId = route.parentId;
+  let config = configResult.value;
+  let unstable_viteEnvironmentApi = config.future.unstable_viteEnvironmentApi;
+  let viteMajor = parseInt(vite2.version.split(".")[0], 10);
+  if (unstable_viteEnvironmentApi && viteMajor === 5) {
+    throw new Error(
+      "The future.unstable_viteEnvironmentApi option is not supported in Vite 5"
+    );
   }
-  return branch.reverse();
+  return await (unstable_viteEnvironmentApi ? viteAppBuild(root, viteBuildOptions) : viteBuild(root, viteBuildOptions));
 }
-async function getServerBuilds(ctx) {
-  let { rootDirectory } = ctx;
-  const { routes: routes2, serverBuildFile, serverBundles, appDirectory } = ctx.reactRouterConfig;
-  let serverBuildDirectory = getServerBuildDirectory(ctx);
-  if (!serverBundles) {
-    return {
-      serverBuilds: [{ ssr: true }],
-      buildManifest: { routes: routes2 }
-    };
-  }
-  let { normalizePath } = await import("vite");
-  let resolvedAppDirectory = import_node_path2.default.resolve(rootDirectory, appDirectory);
-  let rootRelativeRoutes = Object.fromEntries(
-    Object.entries(routes2).map(([id, route]) => {
-      let filePath = import_node_path2.default.join(resolvedAppDirectory, route.file);
-      let rootRelativeFilePath = normalizePath(
-        import_node_path2.default.relative(rootDirectory, filePath)
-      );
-      return [id, { ...route, file: rootRelativeFilePath }];
-    })
-  );
-  let buildManifest = {
-    serverBundles: {},
-    routeIdToServerBundleId: {},
-    routes: rootRelativeRoutes
-  };
-  let serverBundleBuildConfigById = /* @__PURE__ */ new Map();
-  await Promise.all(
-    getAddressableRoutes(routes2).map(async (route) => {
-      let branch = getRouteBranch(routes2, route.id);
-      let serverBundleId = await serverBundles({
-        branch: branch.map(
-          (route2) => configRouteToBranchRoute({
-            ...route2,
-            // Ensure absolute paths are passed to the serverBundles function
-            file: import_node_path2.default.join(resolvedAppDirectory, route2.file)
-          })
-        )
-      });
-      if (typeof serverBundleId !== "string") {
-        throw new Error(`The "serverBundles" function must return a string`);
-      }
-      if (!/^[a-zA-Z0-9-_]+$/.test(serverBundleId)) {
-        throw new Error(
-          `The "serverBundles" function must only return strings containing alphanumeric characters, hyphens and underscores.`
-        );
-      }
-      buildManifest.routeIdToServerBundleId[route.id] = serverBundleId;
-      let relativeServerBundleDirectory = import_node_path2.default.relative(
-        rootDirectory,
-        import_node_path2.default.join(serverBuildDirectory, serverBundleId)
-      );
-      let serverBuildConfig = serverBundleBuildConfigById.get(serverBundleId);
-      if (!serverBuildConfig) {
-        buildManifest.serverBundles[serverBundleId] = {
-          id: serverBundleId,
-          file: normalizePath(
-            import_node_path2.default.join(relativeServerBundleDirectory, serverBuildFile)
-          )
-        };
-        serverBuildConfig = {
-          routes: {},
-          serverBundleId
-        };
-        serverBundleBuildConfigById.set(serverBundleId, serverBuildConfig);
-      }
-      for (let route2 of branch) {
-        serverBuildConfig.routes[route2.id] = route2;
+async function viteAppBuild(root, {
+  assetsInlineLimit,
+  clearScreen,
+  config: configFile,
+  emptyOutDir,
+  force,
+  logLevel,
+  minify,
+  mode,
+  sourcemapClient,
+  sourcemapServer
+}) {
+  let vite2 = getVite();
+  let builder = await vite2.createBuilder({
+    root,
+    mode,
+    configFile,
+    build: {
+      assetsInlineLimit,
+      emptyOutDir,
+      minify
+    },
+    optimizeDeps: { force },
+    clearScreen,
+    logLevel,
+    plugins: [
+      {
+        name: "react-router:cli-config",
+        configEnvironment(name) {
+          if (sourcemapClient && name === "client") {
+            return {
+              build: {
+                sourcemap: sourcemapClient
+              }
+            };
+          }
+          if (sourcemapServer && name !== "client") {
+            return {
+              build: {
+                sourcemap: sourcemapServer
+              }
+            };
+          }
+        },
+        configResolved(config) {
+          let hasReactRouterPlugin = config.plugins.find(
+            (plugin2) => plugin2.name === "react-router"
+          );
+          if (!hasReactRouterPlugin) {
+            throw new Error(
+              "React Router Vite plugin not found in Vite config"
+            );
+          }
+        }
       }
-    })
-  );
-  let serverBuilds = Array.from(serverBundleBuildConfigById.values()).map(
-    (serverBundleBuildConfig) => {
-      let serverBuild = {
-        ssr: true,
-        serverBundleBuildConfig
-      };
-      return serverBuild;
-    }
-  );
-  return {
-    serverBuilds,
-    buildManifest
-  };
-}
-async function cleanBuildDirectory(viteConfig, ctx) {
-  let buildDirectory = ctx.reactRouterConfig.buildDirectory;
-  let isWithinRoot = () => {
-    let relativePath = import_node_path2.default.relative(ctx.rootDirectory, buildDirectory);
-    return !relativePath.startsWith("..") && !import_node_path2.default.isAbsolute(relativePath);
-  };
-  if (viteConfig.build.emptyOutDir ?? isWithinRoot()) {
-    await import_fs_extra.default.remove(buildDirectory);
-  }
-}
-function getViteManifestPaths(ctx, serverBuilds) {
-  let buildRelative = (pathname) => import_node_path2.default.resolve(ctx.reactRouterConfig.buildDirectory, pathname);
-  let viteManifestPaths = [
-    "client/.vite/manifest.json",
-    ...serverBuilds.map(({ serverBundleBuildConfig }) => {
-      let serverBundleId = serverBundleBuildConfig?.serverBundleId;
-      let serverBundlePath = serverBundleId ? serverBundleId + "/" : "";
-      return `server/${serverBundlePath}.vite/manifest.json`;
-    })
-  ].map((srcPath) => buildRelative(srcPath));
-  return viteManifestPaths;
+    ]
+  });
+  await builder.buildApp();
 }
-async function build(root, {
+async function viteBuild(root, {
   assetsInlineLimit,
   clearScreen,
   config: configFile,
@@ -1174,21 +1483,36 @@ async function build(root, {
   sourcemapClient,
   sourcemapServer
 }) {
-  await preloadVite();
-  let viteConfig = await resolveViteConfig({ configFile, mode, root });
-  const ctx = await extractPluginContext(viteConfig);
+  let viteUserConfig = {};
+  let viteConfig = await resolveViteConfig({
+    configFile,
+    mode,
+    root,
+    plugins: [
+      {
+        name: "react-router:extract-vite-user-config",
+        config(config) {
+          viteUserConfig = config;
+        }
+      }
+    ]
+  });
+  let ctx = await extractPluginContext(viteConfig);
   if (!ctx) {
     console.error(
       import_picocolors5.default.red("React Router Vite plugin not found in Vite config")
     );
     process.exit(1);
   }
-  let { reactRouterConfig } = ctx;
-  let vite2 = getVite();
-  async function viteBuild({
-    ssr,
-    serverBundleBuildConfig
-  }) {
+  async function buildEnvironment(environmentName) {
+    let vite2 = getVite();
+    let ssr = environmentName !== "client";
+    let resolveOptions = environmentOptionsResolvers[environmentName];
+    invariant(resolveOptions);
+    let environmentBuildContext = {
+      name: environmentName,
+      resolveOptions
+    };
     await vite2.build({
       root,
       mode,
@@ -1203,43 +1527,41 @@ async function build(root, {
       optimizeDeps: { force },
       clearScreen,
       logLevel,
-      ...serverBundleBuildConfig ? { __reactRouterServerBundleBuildConfig: serverBundleBuildConfig } : {}
+      ...{ __reactRouterEnvironmentBuildContext: environmentBuildContext }
     });
   }
+  let { reactRouterConfig } = ctx;
+  let buildManifest = await getBuildManifest(ctx);
+  let environmentOptionsResolvers = await getEnvironmentOptionsResolvers(
+    ctx,
+    buildManifest,
+    "build"
+  );
+  let environmentsOptions = resolveEnvironmentsOptions(
+    environmentOptionsResolvers,
+    { viteUserConfig }
+  );
   await cleanBuildDirectory(viteConfig, ctx);
-  await viteBuild({ ssr: false });
-  let { serverBuilds, buildManifest } = await getServerBuilds(ctx);
-  await Promise.all(serverBuilds.map(viteBuild));
-  let viteManifestPaths = getViteManifestPaths(ctx, serverBuilds);
-  await Promise.all(
-    viteManifestPaths.map(async (viteManifestPath) => {
-      let manifestExists = await import_fs_extra.default.pathExists(viteManifestPath);
-      if (!manifestExists) return;
-      if (!ctx.viteManifestEnabled) {
-        await import_fs_extra.default.remove(viteManifestPath);
-      }
-      let viteDir = import_node_path2.default.dirname(viteManifestPath);
-      let viteDirFiles = await import_fs_extra.default.readdir(viteDir);
-      if (viteDirFiles.length === 0) {
-        await import_fs_extra.default.remove(viteDir);
-      }
-    })
+  await buildEnvironment("client");
+  let serverEnvironmentNames = getServerEnvironmentKeys(
+    environmentOptionsResolvers,
+    buildManifest
   );
+  await Promise.all(serverEnvironmentNames.map(buildEnvironment));
+  await cleanViteManifests(environmentsOptions, ctx);
   await reactRouterConfig.buildEnd?.({
     buildManifest,
     reactRouterConfig,
     viteConfig
   });
 }
-var import_node_path2, import_fs_extra, import_picocolors5;
+var import_picocolors5;
 var init_build = __esm({
   "vite/build.ts"() {
     "use strict";
-    import_node_path2 = __toESM(require("path"));
-    import_fs_extra = __toESM(require("fs-extra"));
     import_picocolors5 = __toESM(require("picocolors"));
-    init_plugin();
     init_config();
+    init_plugin();
     init_invariant();
     init_vite();
   }
@@ -1314,8 +1636,8 @@ var import_semver = __toESM(require("semver"));
 var import_picocolors8 = __toESM(require("picocolors"));
 
 // cli/commands.ts
-var path9 = __toESM(require("path"));
-var import_fs_extra2 = __toESM(require("fs-extra"));
+var path8 = __toESM(require("path"));
+var import_fs_extra = __toESM(require("fs-extra"));
 var import_package_json2 = __toESM(require("@npmcli/package-json"));
 var import_exit_hook = __toESM(require("exit-hook"));
 var import_picocolors7 = __toESM(require("picocolors"));
@@ -1468,14 +1790,14 @@ async function generateEntry(entry, reactRouterRoot, flags = {}) {
     console.error(import_picocolors7.default.red(`No default server entry detected.`));
     return;
   }
-  let defaultsDirectory = path9.resolve(
-    path9.dirname(require.resolve("@react-router/dev/package.json")),
+  let defaultsDirectory = path8.resolve(
+    path8.dirname(require.resolve("@react-router/dev/package.json")),
     "dist",
     "config",
     "defaults"
   );
-  let defaultEntryClient = path9.resolve(defaultsDirectory, "entry.client.tsx");
-  let defaultEntryServer = path9.resolve(
+  let defaultEntryClient = path8.resolve(defaultsDirectory, "entry.client.tsx");
+  let defaultEntryServer = path8.resolve(
     defaultsDirectory,
     `entry.server.node.tsx`
   );
@@ -1484,19 +1806,19 @@ async function generateEntry(entry, reactRouterRoot, flags = {}) {
   let useTypeScript = flags.typescript ?? true;
   let outputExtension = useTypeScript ? "tsx" : "jsx";
   let outputEntry = `${entry}.${outputExtension}`;
-  let outputFile2 = path9.resolve(appDirectory, outputEntry);
+  let outputFile2 = path8.resolve(appDirectory, outputEntry);
   if (!useTypeScript) {
     let javascript = transpile(contents, {
       cwd: rootDirectory,
       filename: isServerEntry ? defaultEntryServer : defaultEntryClient
     });
-    await import_fs_extra2.default.writeFile(outputFile2, javascript, "utf-8");
+    await import_fs_extra.default.writeFile(outputFile2, javascript, "utf-8");
   } else {
-    await import_fs_extra2.default.writeFile(outputFile2, contents, "utf-8");
+    await import_fs_extra.default.writeFile(outputFile2, contents, "utf-8");
   }
   console.log(
     import_picocolors7.default.blue(
-      `Entry file ${entry} created at ${path9.relative(
+      `Entry file ${entry} created at ${path8.relative(
         rootDirectory,
         outputFile2
       )}.`
@@ -1505,10 +1827,10 @@ async function generateEntry(entry, reactRouterRoot, flags = {}) {
 }
 async function checkForEntry(rootDirectory, appDirectory, entries2) {
   for (let entry of entries2) {
-    let entryPath = path9.resolve(appDirectory, entry);
-    let exists = await import_fs_extra2.default.pathExists(entryPath);
+    let entryPath = path8.resolve(appDirectory, entry);
+    let exists = await import_fs_extra.default.pathExists(entryPath);
     if (exists) {
-      let relative8 = path9.relative(rootDirectory, entryPath);
+      let relative8 = path8.relative(rootDirectory, entryPath);
       console.error(import_picocolors7.default.red(`Entry file ${relative8} already exists.`));
       return process.exit(1);
     }
@@ -1516,12 +1838,12 @@ async function checkForEntry(rootDirectory, appDirectory, entries2) {
 }
 async function createServerEntry(rootDirectory, appDirectory, inputFile) {
   await checkForEntry(rootDirectory, appDirectory, serverEntries);
-  let contents = await import_fs_extra2.default.readFile(inputFile, "utf-8");
+  let contents = await import_fs_extra.default.readFile(inputFile, "utf-8");
   return contents;
 }
 async function createClientEntry(rootDirectory, appDirectory, inputFile) {
   await checkForEntry(rootDirectory, appDirectory, clientEntries);
-  let contents = await import_fs_extra2.default.readFile(inputFile, "utf-8");
+  let contents = await import_fs_extra.default.readFile(inputFile, "utf-8");
   return contents;
 }
 async function typegen(root, flags) {