@react-router/dev 0.0.0-experimental-345f1da12 → 0.0.0-experimental-d312c78a4

package/dist/cli/index.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 /**
- * @react-router/dev v0.0.0-experimental-345f1da12
+ * @react-router/dev v0.0.0-experimental-d312c78a4
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -317,6 +317,7 @@ async function resolveConfig({
     basename: basename2,
     buildDirectory: userBuildDirectory,
     buildEnd,
+    future: userFuture,
     prerender,
     serverBuildFile,
     serverBundles,
@@ -389,7 +390,8 @@ async function resolveConfig({
     );
   }
   let future = {
-    unstable_optimizeDeps: reactRouterUserConfig.future?.unstable_optimizeDeps ?? false
+    unstable_optimizeDeps: reactRouterUserConfig.future?.unstable_optimizeDeps ?? false,
+    unstable_routeChunks: userFuture?.unstable_routeChunks ?? false
   };
   let reactRouterConfig = deepFreeze({
     appDirectory,
@@ -586,67 +588,137 @@ var init_config = __esm({
   }
 });
 
+// typegen/paths.ts
+function getTypesDir(ctx) {
+  return Path2.join(ctx.rootDirectory, ".react-router/types");
+}
+function getTypesPath(ctx, route) {
+  return Path2.join(
+    getTypesDir(ctx),
+    Path2.relative(ctx.rootDirectory, ctx.config.appDirectory),
+    Path2.dirname(route.file),
+    "+types/" + Pathe.filename(route.file) + ".ts"
+  );
+}
+var Path2, Pathe;
+var init_paths = __esm({
+  "typegen/paths.ts"() {
+    "use strict";
+    Path2 = __toESM(require("pathe"));
+    Pathe = __toESM(require("pathe/utils"));
+  }
+});
+
 // typegen/generate.ts
-function generate(route) {
+function generate(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) => {
+    const rel = Path3.relative(
+      Path3.dirname(typesPath),
+      getTypesPath(ctx, parent)
+    );
+    const indent = i === 0 ? "" : "  ".repeat(2);
+    let source = noExtension(rel);
+    if (!source.startsWith("../")) source = "./" + source;
+    return `${indent}import type { Info as Parent${i} } from "${source}.js"`;
+  }).join("\n");
   return import_dedent.default`
     // React Router generated types for route:
     // ${route.file}
 
-    import type { RouteExports, Routes } from "react-router/types";
+    import type * as T from "react-router/route-module"
 
-    type RouteId = "${route.id}"
-    export type Info = Routes[RouteId];
+    ${parentTypeImports}
 
-    type Exports = RouteExports[RouteId];
+    type Module = typeof import("../${Pathe2.filename(route.file)}.js")
+
+    export type Info = {
+      parents: [${parents.map((_, i) => `Parent${i}`).join(", ")}],
+      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 {
-      export type LinkDescriptors = Exports["links"]["return"];
-      export type LinksFunction = () => LinkDescriptors;
+      export type LinkDescriptors = T.LinkDescriptors
+      export type LinksFunction = () => LinkDescriptors
 
-      export type MetaArgs = Exports["meta"]["args"];
-      export type MetaDescriptors = Exports["meta"]["return"];
-      export type MetaFunction = (args: MetaArgs) => MetaDescriptors;
+      export type MetaArgs = T.CreateMetaArgs<Info>
+      export type MetaDescriptors = T.MetaDescriptors
+      export type MetaFunction = (args: MetaArgs) => MetaDescriptors
 
-      export type HeadersArgs = Exports["headers"]["args"];
-      export type HeadersFunction = (args: HeadersArgs) => Headers | HeadersInit;
+      export type HeadersArgs = T.HeadersArgs
+      export type HeadersFunction = (args: HeadersArgs) => Headers | HeadersInit
 
-      export type LoaderArgs = Exports["loader"]["args"];
-      export type ClientLoaderArgs = Exports["clientLoader"]["args"];
-      export type ActionArgs = Exports["action"]["args"];
-      export type ClientActionArgs = Exports["clientAction"]["args"];
+      export type LoaderArgs = T.CreateServerLoaderArgs<Info>
+      export type ClientLoaderArgs = T.CreateClientLoaderArgs<Info>
+      export type ActionArgs = T.CreateServerActionArgs<Info>
+      export type ClientActionArgs = T.CreateClientActionArgs<Info>
 
-      export type HydrateFallbackProps = Exports["HydrateFallback"]["args"];
-      export type ComponentProps = Exports["default"]["args"];
-      export type ErrorBoundaryProps = Exports["ErrorBoundary"]["args"];
+      export type HydrateFallbackProps = T.CreateHydrateFallbackProps<Info>
+      export type ComponentProps = T.CreateComponentProps<Info>
+      export type ErrorBoundaryProps = T.CreateErrorBoundaryProps<Info>
     }
   `;
 }
-var import_dedent;
-var init_generate = __esm({
-  "typegen/generate.ts"() {
-    "use strict";
-    import_dedent = __toESM(require("dedent"));
+function getRouteLineage(routes2, route) {
+  const result = [];
+  while (route) {
+    result.push(route);
+    if (!route.parentId) break;
+    route = routes2[route.parentId];
   }
-});
-
-// typegen/paths.ts
-function getTypesDir(ctx) {
-  return Path2.join(ctx.rootDirectory, ".react-router/types");
+  result.reverse();
+  return result;
 }
-function getTypesPath(ctx, route) {
-  return Path2.join(
-    getTypesDir(ctx),
-    Path2.relative(ctx.rootDirectory, ctx.config.appDirectory),
-    Path2.dirname(route.file),
-    "+types/" + Pathe.filename(route.file) + ".ts"
-  );
+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("; ");
 }
-var Path2, Pathe;
-var init_paths = __esm({
-  "typegen/paths.ts"() {
+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"() {
     "use strict";
-    Path2 = __toESM(require("pathe"));
-    Pathe = __toESM(require("pathe/utils"));
+    import_dedent = __toESM(require("dedent"));
+    Path3 = __toESM(require("pathe"));
+    Pathe2 = __toESM(require("pathe/utils"));
+    init_paths();
+    noExtension = (path10) => Path3.join(Path3.dirname(path10), Pathe2.filename(path10));
   }
 });
 
@@ -693,100 +765,22 @@ async function createContext2({
     config
   };
 }
-function asJS(path10) {
-  return path10.replace(/\.(js|ts)x?$/, ".js");
-}
-function formatRoute({ id, path: path10, file, parentId }) {
-  return [
-    `"${id}": {`,
-    `  parentId: ${JSON.stringify(parentId)}`,
-    `  path: ${JSON.stringify(path10)}`,
-    `  module: typeof import("./app/${asJS(file)}")`,
-    `}`
-  ].map((line) => `  ${line}`).join("\n");
-}
 async function writeAll(ctx) {
-  let routes2 = Object.values(ctx.config.routes);
-  let pathsToParams = /* @__PURE__ */ new Map();
-  for (let route of routes2) {
-    if (route.path === void 0) continue;
-    let lineage = getRouteLineage(ctx.config.routes, route);
-    let path10 = lineage.filter((route2) => route2.path !== void 0).map((route2) => route2.path).join("/");
-    if (path10 === "") path10 = "/";
-    pathsToParams.set(path10, parseParams(path10));
-  }
-  let formattedPaths = `type Paths = {`;
-  for (let [path10, params] of pathsToParams.entries()) {
-    let formattedParams = Object.entries(params).map(
-      ([param, required]) => `"${param}"${required ? "" : "?"}: string`
-    );
-    let formattedEntry = `"${path10}": {${formattedParams.join(",")}},
-`;
-    formattedPaths += formattedEntry;
-  }
-  formattedPaths += `}`;
   const typegenDir = getTypesDir(ctx);
   import_node_fs2.default.rmSync(typegenDir, { recursive: true, force: true });
-  const newTypes = Path3.join(typegenDir, "routes.ts");
-  import_node_fs2.default.mkdirSync(Path3.dirname(newTypes), { recursive: true });
-  import_node_fs2.default.writeFileSync(
-    newTypes,
-    formattedPaths + `
-
-type Routes = {
-${routes2.map(formatRoute).join("\n")}
-}
-
-` + import_dedent2.default`
-        declare module "react-router/types" {
-          interface Register {
-            paths: Paths
-            routes: Routes
-          }
-        }
-
-        export {}
-    `
-  );
   Object.values(ctx.config.routes).forEach((route) => {
     const typesPath = getTypesPath(ctx, route);
-    const content = generate(route);
-    import_node_fs2.default.mkdirSync(Path3.dirname(typesPath), { recursive: true });
+    const content = generate(ctx, route);
+    import_node_fs2.default.mkdirSync(Path4.dirname(typesPath), { recursive: true });
     import_node_fs2.default.writeFileSync(typesPath, content);
   });
 }
-function getRouteLineage(routes2, route) {
-  const result = [];
-  while (route) {
-    result.push(route);
-    if (!route.parentId) break;
-    route = routes2[route.parentId];
-  }
-  result.reverse();
-  return result;
-}
-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 isRequired = match[2] === void 0;
-    result[param] ||= isRequired;
-    return;
-  });
-  const hasSplat = segments.at(-1) === "*";
-  if (hasSplat) result["*"] = true;
-  return result;
-}
-var import_node_fs2, import_dedent2, Path3, import_picocolors2;
+var import_node_fs2, Path4, import_picocolors2;
 var init_typegen = __esm({
   "typegen/index.ts"() {
     "use strict";
     import_node_fs2 = __toESM(require("fs"));
-    import_dedent2 = __toESM(require("dedent"));
-    Path3 = __toESM(require("pathe"));
+    Path4 = __toESM(require("pathe"));
     import_picocolors2 = __toESM(require("picocolors"));
     init_config();
     init_generate();
@@ -875,12 +869,43 @@ var init_remove_exports = __esm({
   }
 });
 
+// vite/cache.ts
+var init_cache = __esm({
+  "vite/cache.ts"() {
+    "use strict";
+  }
+});
+
+// vite/route-chunks.ts
+var routeChunkExportNames, routeChunkNames, routeChunkQueryStringPrefix, routeChunkQueryStrings;
+var init_route_chunks = __esm({
+  "vite/route-chunks.ts"() {
+    "use strict";
+    init_invariant();
+    init_cache();
+    init_babel();
+    routeChunkExportNames = [
+      "clientAction",
+      "clientLoader",
+      "HydrateFallback"
+    ];
+    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_dedent3, vmod;
+var import_dedent2, vmod;
 var init_with_props = __esm({
   "vite/with-props.ts"() {
     "use strict";
-    import_dedent3 = __toESM(require("dedent"));
+    import_dedent2 = __toESM(require("dedent"));
     init_babel();
     init_virtual_module();
     vmod = create("with-props");
@@ -970,6 +995,7 @@ var init_plugin = __esm({
     init_resolve_file_url();
     init_combine_urls();
     init_remove_exports();
+    init_route_chunks();
     init_vite();
     init_config();
     init_with_props();
@@ -991,7 +1017,7 @@ var init_plugin = __esm({
       "config",
       "defaults"
     );
-    defaultEntries = fse.readdirSync(defaultEntriesDir).map((filename2) => path6.join(defaultEntriesDir, filename2));
+    defaultEntries = fse.readdirSync(defaultEntriesDir).map((filename3) => path6.join(defaultEntriesDir, filename3));
     invariant(defaultEntries.length > 0, "No default entries found");
     REACT_REFRESH_HEADER = `
 import RefreshRuntime from "${virtualHmrRuntime.id}";
@@ -1548,8 +1574,8 @@ async function checkForEntry(rootDirectory, appDirectory, entries2) {
     let entryPath = path9.resolve(appDirectory, entry);
     let exists = await import_fs_extra2.default.pathExists(entryPath);
     if (exists) {
-      let relative7 = path9.relative(rootDirectory, entryPath);
-      console.error(import_picocolors7.default.red(`Entry file ${relative7} already exists.`));
+      let relative8 = path9.relative(rootDirectory, entryPath);
+      console.error(import_picocolors7.default.red(`Entry file ${relative8} already exists.`));
       return process.exit(1);
     }
   }

package/dist/config.d.ts

@@ -38,6 +38,10 @@ type ServerBundlesBuildManifest = BaseBuildManifest & {
 type ServerModuleFormat = "esm" | "cjs";
 interface FutureConfig {
     unstable_optimizeDeps: boolean;
+    /**
+     * Automatically split route modules into multiple chunks when possible.
+     */
+    unstable_routeChunks?: boolean | "enforce";
 }
 type BuildManifest = DefaultBuildManifest | ServerBundlesBuildManifest;
 type BuildEndHook = (args: {
@@ -129,7 +133,7 @@ type ResolvedReactRouterConfig = Readonly<{
     /**
      * Enabled future flags
      */
-    future: FutureConfig;
+    future: Required<FutureConfig>;
     /**
      * An array of URLs to prerender to HTML files at build time.  Can also be a
      * function returning an array to dynamically generate URLs.

package/dist/config.js

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

package/dist/routes.js

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

package/dist/static/refresh-utils.cjs

@@ -23,6 +23,7 @@ const enqueueUpdate = debounce(async () => {
           `[react-router:hmr] No module update found for route ${route.id}`
         );
       }
+
       let routeModule = {
         ...imported,
         // react-refresh takes care of updating these in-place,

package/dist/vite/cloudflare.js

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