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

package/dist/cli/index.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 /**
- * @react-router/dev v0.0.0-experimental-a2c4d7fad
+ * @react-router/dev v0.0.0-experimental-004e483a8
  *
  * 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")
@@ -390,7 +390,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,
@@ -678,6 +679,7 @@ var init_paths = __esm({
 // 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) => {
@@ -695,15 +697,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 {
@@ -738,6 +747,36 @@ function getRouteLineage(routes2, 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;
+}
 var import_dedent, Path3, Pathe2, noExtension;
 var init_generate = __esm({
   "typegen/generate.ts"() {
@@ -746,7 +785,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));
   }
 });
 
@@ -802,94 +841,74 @@ async function writeAll(ctx) {
     import_node_fs3.default.mkdirSync(Path4.dirname(typesPath), { recursive: true });
     import_node_fs3.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_fs3.default.writeFileSync(registerPath, register(ctx));
 }
 function register(ctx) {
-  const routes2 = 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, routes2].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(routes2, route) {
+  const result = [];
+  while (route) {
+    result.push(route);
+    if (!route.parentId) break;
+    route = routes2[route.parentId];
+  }
+  result.reverse();
+  return result;
 }
-var import_node_fs3, import_dedent2, Path4, import_picocolors3, t2;
+var import_node_fs3, import_dedent2, Path4, import_picocolors3;
 var init_typegen = __esm({
   "typegen/index.ts"() {
     "use strict";
@@ -901,7 +920,6 @@ var init_typegen = __esm({
     init_babel();
     init_generate();
     init_paths();
-    ({ t: t2 } = babel_exports);
   }
 });
 
@@ -1043,11 +1061,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",
@@ -1063,6 +1082,17 @@ async function resolveViteConfig({
 async function extractPluginContext(viteConfig) {
   return viteConfig["__reactRouterPluginContext"];
 }
+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) {
@@ -1112,6 +1142,39 @@ function getRoutesByServerBundleId(buildManifest) {
   }
   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) {
@@ -1171,77 +1234,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 = 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 {
-      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 = 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);
-            })
+            ...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 }) {
@@ -1253,19 +1340,19 @@ async function getEnvironmentOptionsResolvers(ctx, buildManifest) {
           }
         },
         outDir: getClientBuildDirectory(ctx.reactRouterConfig)
-      })
+      }
     })
   };
   if (hasServerBundles(buildManifest)) {
     for (let [serverBundleId, routes2] 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(
@@ -1273,25 +1360,37 @@ 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;
 }
+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, virtualHmrRuntime, virtualInjectHmrRuntime, virtual, getServerBuildDirectory, getClientBuildDirectory, defaultEntriesDir, defaultEntries, REACT_REFRESH_HEADER;
+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";
@@ -1320,6 +1419,7 @@ var init_plugin = __esm({
     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 = {
@@ -1370,34 +1470,83 @@ var build_exports = {};
 __export(build_exports, {
   build: () => build
 });
-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);
+async function build(root, viteBuildOptions) {
+  await preloadVite();
+  let vite2 = getVite();
+  let configResult = await loadConfig({ rootDirectory: root });
+  if (!configResult.ok) {
+    throw new Error(configResult.error);
   }
+  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 await (unstable_viteEnvironmentApi ? viteAppBuild(root, viteBuildOptions) : viteBuild(root, viteBuildOptions));
 }
-function getViteManifestPaths(environmentOptionsResolvers) {
-  return Object.entries(environmentOptionsResolvers).map(
-    ([environmentName, resolveOptions]) => {
-      invariant(
-        resolveOptions,
-        `Expected build environment options resolver for ${environmentName}`
-      );
-      let options = resolveOptions({
-        viteCommand: "build",
-        viteUserConfig: {}
-      });
-      let outDir = options.build.outDir;
-      invariant(outDir, `Expected build.outDir for ${environmentName}`);
-      return import_node_path2.default.join(outDir, ".vite/manifest.json");
-    }
-  );
+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"
+            );
+          }
+        }
+      }
+    ]
+  });
+  await builder.buildApp();
 }
-async function build(root, {
+async function viteBuild(root, {
   assetsInlineLimit,
   clearScreen,
   config: configFile,
@@ -1409,24 +1558,32 @@ 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(environmentOptionsResolvers2, environmentName) {
+  async function buildEnvironment(environmentName) {
+    let vite2 = getVite();
     let ssr = environmentName !== "client";
-    let resolveOptions = environmentOptionsResolvers2[environmentName];
-    invariant(
-      resolveOptions,
-      `Missing environment options resolver for ${environmentName}`
-    );
+    let resolveOptions = environmentOptionsResolvers[environmentName];
+    invariant(resolveOptions);
     let environmentBuildContext = {
       name: environmentName,
       resolveOptions
@@ -1448,49 +1605,37 @@ async function build(root, {
       ...{ __reactRouterEnvironmentBuildContext: environmentBuildContext }
     });
   }
-  await cleanBuildDirectory(viteConfig, ctx);
+  let { reactRouterConfig } = ctx;
   let buildManifest = await getBuildManifest(ctx);
   let environmentOptionsResolvers = await getEnvironmentOptionsResolvers(
     ctx,
-    buildManifest
+    buildManifest,
+    "build"
   );
-  await viteBuild(environmentOptionsResolvers, "client");
-  let serverEnvironmentNames = Object.keys(
-    environmentOptionsResolvers
-  ).filter((environmentName) => environmentName !== "client");
-  await Promise.all(
-    serverEnvironmentNames.map(
-      (environmentName) => viteBuild(environmentOptionsResolvers, environmentName)
-    )
+  let environmentsOptions = resolveEnvironmentsOptions(
+    environmentOptionsResolvers,
+    { viteUserConfig }
   );
-  let viteManifestPaths = getViteManifestPaths(environmentOptionsResolvers);
-  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 cleanBuildDirectory(viteConfig, ctx);
+  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_config();
     init_plugin();
     init_invariant();
     init_vite();
@@ -1566,8 +1711,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"));
@@ -1635,8 +1780,8 @@ var babel = __toESM(require("@babel/core"));
 var import_plugin_syntax_jsx = __toESM(require("@babel/plugin-syntax-jsx"));
 var import_preset_typescript = __toESM(require("@babel/preset-typescript"));
 var import_prettier = __toESM(require("prettier"));
-function transpile(tsx2, options = {}) {
-  let mjs = babel.transformSync(tsx2, {
+function transpile(tsx, options = {}) {
+  let mjs = babel.transformSync(tsx, {
     compact: false,
     cwd: options.cwd,
     filename: options.filename,
@@ -1720,14 +1865,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`
   );
@@ -1736,19 +1881,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
       )}.`
@@ -1757,23 +1902,23 @@ 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 relative9 = path9.relative(rootDirectory, entryPath);
-      console.error(import_picocolors7.default.red(`Entry file ${relative9} already exists.`));
+      let relative8 = path8.relative(rootDirectory, entryPath);
+      console.error(import_picocolors7.default.red(`Entry file ${relative8} already exists.`));
       return process.exit(1);
     }
   }
 }
 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) {