@react-router/dev 0.0.0-experimental-a383e1e6e → 0.0.0-experimental-b9cf540fe

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # `@react-router/dev`
 
+## 7.1.5
+
+### Patch Changes
+
+- Updated dependencies:
+  - `react-router@7.1.5`
+  - `@react-router/node@7.1.5`
+  - `@react-router/serve@7.1.5`
+
 ## 7.1.4
 
 ### Patch Changes

package/bin.js

@@ -5,8 +5,8 @@ let arg = require("arg");
 // default `NODE_ENV` so React loads the proper version in it's CJS entry script.
 // We have to do this before importing `run.ts` since that is what imports
 // `react` (indirectly via `react-router`)
-let args = arg({}, { argv: process.argv.slice(2), stopAtPositional: true });
-if (args._[0] === "dev") {
+let args = arg({}, { argv: process.argv.slice(2), permissive: true });
+if (args._.length === 0 || args._[0] === "dev") {
   process.env.NODE_ENV = process.env.NODE_ENV ?? "development";
 } else {
   process.env.NODE_ENV = process.env.NODE_ENV ?? "production";

package/dist/cli/index.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 /**
- * @react-router/dev v0.0.0-experimental-a383e1e6e
+ * @react-router/dev v0.0.0-experimental-b9cf540fe
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -706,8 +706,6 @@ function generate(ctx, route) {
       export type HeadersArgs = T.HeadersArgs
       export type HeadersFunction = (args: HeadersArgs) => Headers | HeadersInit
 
-      export type unstable_MiddlewareArgs = T.CreateServerMiddlewareArgs<Info>
-      export type unstable_ClientMiddlewareArgs = T.CreateClientMiddlewareArgs<Info>
       export type LoaderArgs = T.CreateServerLoaderArgs<Info>
       export type ClientLoaderArgs = T.CreateClientLoaderArgs<Info>
       export type ActionArgs = T.CreateServerActionArgs<Info>
@@ -926,7 +924,28 @@ var init_cache = __esm({
 });
 
 // vite/route-chunks.ts
-var routeChunkExportNames, routeChunkNames, routeChunkQueryStringPrefix, routeChunkQueryStrings;
+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";
@@ -938,6 +957,7 @@ var init_route_chunks = __esm({
       "clientLoader",
       "HydrateFallback"
     ];
+    mainChunkName = "main";
     routeChunkNames = ["main", ...routeChunkExportNames];
     routeChunkQueryStringPrefix = "?route-chunk=";
     routeChunkQueryStrings = {
@@ -985,7 +1005,235 @@ 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, import_kebabCase, CLIENT_ONLY_NON_COMPONENT_EXPORTS, CLIENT_ROUTE_EXPORTS, virtualHmrRuntime, virtualInjectHmrRuntime, virtual, getServerBuildDirectory, defaultEntriesDir, defaultEntries, REACT_REFRESH_HEADER;
+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 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 mergeBuildOptions(base, overrides) {
+  let vite2 = getVite();
+  return vite2.mergeConfig({ build: base }, { build: overrides }).build;
+}
+async function getEnvironmentOptionsResolvers(ctx, buildManifest) {
+  let { serverBuildFile, serverModuleFormat } = ctx.reactRouterConfig;
+  function getBaseBuildOptions({
+    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);
+          }
+        }
+      }
+    };
+  }
+  function getBaseServerBuildOptions({
+    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 environmentOptionsResolvers = {
+    client: ({ viteUserConfig }) => ({
+      build: mergeBuildOptions(getBaseBuildOptions({ viteUserConfig }), {
+        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)
+    )) {
+      environmentOptionsResolvers[`ssr-bundle-${serverBundleId}`] = ({
+        viteUserConfig
+      }) => ({
+        build: mergeBuildOptions(
+          getBaseServerBuildOptions({ viteUserConfig }),
+          {
+            outDir: getServerBuildDirectory(ctx, { serverBundleId }),
+            rollupOptions: {
+              input: `${virtual.serverBuild.id}?route-ids=${Object.keys(
+                routes2
+              ).join(",")}`
+            }
+          }
+        )
+      });
+    }
+  } else {
+    environmentOptionsResolvers.ssr = ({ viteUserConfig }) => ({
+      build: mergeBuildOptions(getBaseServerBuildOptions({ viteUserConfig }), {
+        outDir: getServerBuildDirectory(ctx),
+        rollupOptions: {
+          input: viteUserConfig.build?.rollupOptions?.input ?? virtual.serverBuild.id
+        }
+      })
+    });
+  }
+  return environmentOptionsResolvers;
+}
+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 init_plugin = __esm({
   "vite/plugin.ts"() {
     "use strict";
@@ -996,6 +1244,7 @@ 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"));
@@ -1012,22 +1261,7 @@ var init_plugin = __esm({
     init_vite();
     init_config();
     init_with_props();
-    CLIENT_ONLY_NON_COMPONENT_EXPORTS = [
-      "clientAction",
-      "clientLoader",
-      "unstable_clientMiddleware",
-      "handle",
-      "meta",
-      "links",
-      "shouldRevalidate"
-    ];
-    CLIENT_ROUTE_EXPORTS = [
-      ...CLIENT_ONLY_NON_COMPONENT_EXPORTS,
-      "default",
-      "ErrorBoundary",
-      "HydrateFallback",
-      "Layout"
-    ];
+    BUILD_CLIENT_ROUTE_QUERY_STRING = "?__react-router-build-client-route";
     virtualHmrRuntime = create("hmr-runtime");
     virtualInjectHmrRuntime = create("inject-hmr-runtime");
     virtual = {
@@ -1035,11 +1269,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",
@@ -1077,121 +1312,6 @@ 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);
-    }
-  }
-  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();
-}
-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;
-      }
-    })
-  );
-  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 = () => {
@@ -1202,17 +1322,22 @@ async function cleanBuildDirectory(viteConfig, ctx) {
     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;
+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 build(root, {
   assetsInlineLimit,
@@ -1237,10 +1362,17 @@ async function build(root, {
   }
   let { reactRouterConfig } = ctx;
   let vite2 = getVite();
-  async function viteBuild({
-    ssr,
-    serverBundleBuildConfig
-  }) {
+  async function viteBuild(environmentOptionsResolvers2, environmentName) {
+    let ssr = environmentName !== "client";
+    let resolveOptions = environmentOptionsResolvers2[environmentName];
+    invariant(
+      resolveOptions,
+      `Missing environment options resolver for ${environmentName}`
+    );
+    let environmentBuildContext = {
+      name: environmentName,
+      resolveOptions
+    };
     await vite2.build({
       root,
       mode,
@@ -1255,14 +1387,25 @@ async function build(root, {
       optimizeDeps: { force },
       clearScreen,
       logLevel,
-      ...serverBundleBuildConfig ? { __reactRouterServerBundleBuildConfig: serverBundleBuildConfig } : {}
+      ...{ __reactRouterEnvironmentBuildContext: environmentBuildContext }
     });
   }
   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);
+  let buildManifest = await getBuildManifest(ctx);
+  let environmentOptionsResolvers = await getEnvironmentOptionsResolvers(
+    ctx,
+    buildManifest
+  );
+  await viteBuild(environmentOptionsResolvers, "client");
+  let serverEnvironmentNames = Object.keys(
+    environmentOptionsResolvers
+  ).filter((environmentName) => environmentName !== "client");
+  await Promise.all(
+    serverEnvironmentNames.map(
+      (environmentName) => viteBuild(environmentOptionsResolvers, environmentName)
+    )
+  );
+  let viteManifestPaths = getViteManifestPaths(environmentOptionsResolvers);
   await Promise.all(
     viteManifestPaths.map(async (viteManifestPath) => {
       let manifestExists = await import_fs_extra.default.pathExists(viteManifestPath);
@@ -1291,7 +1434,6 @@ var init_build = __esm({
     import_fs_extra = __toESM(require("fs-extra"));
     import_picocolors5 = __toESM(require("picocolors"));
     init_plugin();
-    init_config();
     init_invariant();
     init_vite();
   }

package/dist/config.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-a383e1e6e
+ * @react-router/dev v0.0.0-experimental-b9cf540fe
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/routes.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-a383e1e6e
+ * @react-router/dev v0.0.0-experimental-b9cf540fe
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/vite/cloudflare.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-a383e1e6e
+ * @react-router/dev v0.0.0-experimental-b9cf540fe
  *
  * Copyright (c) Remix Software Inc.
  *