@react-router/dev 0.0.0-experimental-759a11a62 → 0.0.0-experimental-beaa4f52a

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # `@react-router/dev`
 
+## 7.1.3
+
+### Patch Changes
+
+- Fix `reveal` and `routes` CLI commands ([#12745](https://github.com/remix-run/react-router/pull/12745))
+- Updated dependencies:
+  - `react-router@7.1.3`
+  - `@react-router/node@7.1.3`
+  - `@react-router/serve@7.1.3`
+
+## 7.1.2
+
+### Patch Changes
+
+- Fix default external conditions in Vite v6. This fixes resolution issues with certain npm packages. ([#12644](https://github.com/remix-run/react-router/pull/12644))
+- Fix mismatch in prerendering html/data files when path is missing a leading slash ([#12684](https://github.com/remix-run/react-router/pull/12684))
+- Use `module-sync` server condition when enabled in the runtime. This fixes React context mismatches (e.g. `useHref() may be used only in the context of a <Router> component.`) during development on Node 22.10.0+ when using libraries that have a peer dependency on React Router. ([#12729](https://github.com/remix-run/react-router/pull/12729))
+- Fix react-refresh source maps ([#12686](https://github.com/remix-run/react-router/pull/12686))
+- Updated dependencies:
+  - `react-router@7.1.2`
+  - `@react-router/node@7.1.2`
+  - `@react-router/serve@7.1.2`
+
 ## 7.1.1
 
 ### Patch Changes

package/dist/cli/index.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 /**
- * @react-router/dev v0.0.0-experimental-759a11a62
+ * @react-router/dev v0.0.0-experimental-beaa4f52a
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -496,6 +496,15 @@ async function createConfigLoader({
     }
   };
 }
+async function loadConfig({ rootDirectory }) {
+  let configLoader = await createConfigLoader({
+    rootDirectory,
+    watch: false
+  });
+  let config = await configLoader.getConfig();
+  await configLoader.close();
+  return config;
+}
 function findEntry(dir, basename2, options) {
   for (let ext of entryExts) {
     let file = import_pathe3.default.resolve(dir, basename2 + ext);
@@ -586,46 +595,42 @@ var init_config = __esm({
   }
 });
 
-// typegen/generate.ts
-function generate(route) {
-  return import_dedent.default`
-    // React Router generated types for route:
-    // ${route.file}
-
-    import type { RouteExports, Routes } from "react-router/types";
-
-    type RouteId = "${route.id}"
-    export type Info = Routes[RouteId];
-
-    type Exports = RouteExports[RouteId];
-
-    export namespace Route {
-      export type LinkDescriptors = Exports["links"]["return"];
-      export type LinksFunction = () => LinkDescriptors;
-
-      export type MetaArgs = Exports["meta"]["args"];
-      export type MetaDescriptors = Exports["meta"]["return"];
-      export type MetaFunction = (args: MetaArgs) => MetaDescriptors;
-
-      export type HeadersArgs = Exports["headers"]["args"];
-      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 HydrateFallbackProps = Exports["HydrateFallback"]["args"];
-      export type ComponentProps = Exports["default"]["args"];
-      export type ErrorBoundaryProps = Exports["ErrorBoundary"]["args"];
-    }
-  `;
-}
-var import_dedent;
-var init_generate = __esm({
-  "typegen/generate.ts"() {
+// vite/profiler.ts
+var import_node_fs2, import_node_path, import_picocolors2, getSession, start, profileCount, stop;
+var init_profiler = __esm({
+  "vite/profiler.ts"() {
     "use strict";
-    import_dedent = __toESM(require("dedent"));
+    import_node_fs2 = __toESM(require("fs"));
+    import_node_path = __toESM(require("path"));
+    import_picocolors2 = __toESM(require("picocolors"));
+    getSession = () => global.__reactRouter_profile_session;
+    start = async (callback) => {
+      let inspector = await import("inspector").then((r) => r.default);
+      let session = global.__reactRouter_profile_session = new inspector.Session();
+      session.connect();
+      session.post("Profiler.enable", () => {
+        session.post("Profiler.start", callback);
+      });
+    };
+    profileCount = 0;
+    stop = (log) => {
+      let session = getSession();
+      if (!session) return;
+      return new Promise((res, rej) => {
+        session.post("Profiler.stop", (err2, { profile }) => {
+          if (err2) return rej(err2);
+          let outPath = import_node_path.default.resolve(`./react-router-${profileCount++}.cpuprofile`);
+          import_node_fs2.default.writeFileSync(outPath, JSON.stringify(profile));
+          log(
+            import_picocolors2.default.yellow(
+              `CPU profile written to ${import_picocolors2.default.white(import_picocolors2.default.dim(outPath))}`
+            )
+          );
+          global.__reactRouter_profile_session = void 0;
+          res();
+        });
+      });
+    };
   }
 });
 
@@ -650,6 +655,121 @@ var init_paths = __esm({
   }
 });
 
+// typegen/generate.ts
+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 * as T from "react-router/route-module"
+
+    ${parentTypeImports}
+
+    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 = T.LinkDescriptors
+      export type LinksFunction = () => LinkDescriptors
+
+      export type MetaArgs = T.CreateMetaArgs<Info>
+      export type MetaDescriptors = T.MetaDescriptors
+      export type MetaFunction = (args: MetaArgs) => MetaDescriptors
+
+      export type HeadersArgs = T.HeadersArgs
+      export type HeadersFunction = (args: HeadersArgs) => Headers | HeadersInit
+
+      export type MiddlewareArgs = T.CreateServerMiddlewareArgs<Info>
+      export type ClientMiddlewareArgs = T.CreateClientMiddlewareArgs<Info>
+      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 = T.CreateHydrateFallbackProps<Info>
+      export type ComponentProps = T.CreateComponentProps<Info>
+      export type ErrorBoundaryProps = T.CreateErrorBoundaryProps<Info>
+    }
+  `;
+}
+function getRouteLineage(routes2, route) {
+  const result = [];
+  while (route) {
+    result.push(route);
+    if (!route.parentId) break;
+    route = routes2[route.parentId];
+  }
+  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"() {
+    "use strict";
+    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));
+  }
+});
+
 // typegen/index.ts
 async function run(rootDirectory) {
   const ctx = await createContext2({ rootDirectory, watch: false });
@@ -658,16 +778,16 @@ async function run(rootDirectory) {
 async function watch(rootDirectory, { logger } = {}) {
   const ctx = await createContext2({ rootDirectory, watch: true });
   await writeAll(ctx);
-  logger?.info(import_picocolors2.default.green("generated types"), { timestamp: true, clear: true });
+  logger?.info(import_picocolors3.default.green("generated types"), { timestamp: true, clear: true });
   ctx.configLoader.onChange(async ({ result, routeConfigChanged }) => {
     if (!result.ok) {
-      logger?.error(import_picocolors2.default.red(result.error), { timestamp: true, clear: true });
+      logger?.error(import_picocolors3.default.red(result.error), { timestamp: true, clear: true });
       return;
     }
     ctx.config = result.value;
     if (routeConfigChanged) {
       await writeAll(ctx);
-      logger?.info(import_picocolors2.default.green("regenerated types"), {
+      logger?.info(import_picocolors3.default.green("regenerated types"), {
         timestamp: true,
         clear: true
       });
@@ -693,105 +813,23 @@ async function createContext2({
     config
   };
 }
-function asJS(path10) {
-  return path10.replace(/\.(js|ts)x?$/, ".js");
-}
-function formatRoute(ctx, { id, path: path10, file, parentId }) {
-  const modulePath = Path3.relative(
-    ctx.rootDirectory,
-    Path3.join(ctx.config.appDirectory, file)
-  );
-  return [
-    `"${id}": {`,
-    `  parentId: ${JSON.stringify(parentId)}`,
-    `  path: ${JSON.stringify(path10)}`,
-    `  module: typeof import("${asJS(modulePath)}")`,
-    `}`
-  ].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((route) => formatRoute(ctx, route)).join("\n")}
-}
-
-` + import_dedent2.default`
-        declare module "react-router/types" {
-          interface Register {
-            paths: Paths
-            routes: Routes
-          }
-        }
-
-        export {}
-    `
-  );
+  import_node_fs3.default.rmSync(typegenDir, { recursive: true, force: true });
   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 });
-    import_node_fs2.default.writeFileSync(typesPath, content);
+    const content = generate(ctx, route);
+    import_node_fs3.default.mkdirSync(Path4.dirname(typesPath), { recursive: true });
+    import_node_fs3.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_fs3, Path4, import_picocolors3;
 var init_typegen = __esm({
   "typegen/index.ts"() {
     "use strict";
-    import_node_fs2 = __toESM(require("fs"));
-    import_dedent2 = __toESM(require("dedent"));
-    Path3 = __toESM(require("pathe"));
-    import_picocolors2 = __toESM(require("picocolors"));
+    import_node_fs3 = __toESM(require("fs"));
+    Path4 = __toESM(require("pathe"));
+    import_picocolors3 = __toESM(require("picocolors"));
     init_config();
     init_generate();
     init_paths();
@@ -824,21 +862,21 @@ var init_node_adapter = __esm({
 });
 
 // vite/resolve-file-url.ts
-var path4;
+var path5;
 var init_resolve_file_url = __esm({
   "vite/resolve-file-url.ts"() {
     "use strict";
-    path4 = __toESM(require("path"));
+    path5 = __toESM(require("path"));
     init_vite();
   }
 });
 
 // vite/styles.ts
-var path5, import_react_router, cssFileRegExp, cssModulesRegExp;
+var path6, import_react_router, cssFileRegExp, cssModulesRegExp;
 var init_styles = __esm({
   "vite/styles.ts"() {
     "use strict";
-    path5 = __toESM(require("path"));
+    path6 = __toESM(require("path"));
     import_react_router = require("react-router");
     init_resolve_file_url();
     init_vite();
@@ -880,11 +918,11 @@ var init_remove_exports = __esm({
 });
 
 // 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");
@@ -915,56 +953,19 @@ async function resolveViteConfig({
 async function extractPluginContext(viteConfig) {
   return viteConfig["__reactRouterPluginContext"];
 }
-async function loadPluginContext({
-  configFile,
-  root
-}) {
-  if (!root) {
-    root = process.env.REACT_ROUTER_ROOT || process.cwd();
-  }
-  configFile = configFile ?? findConfig(root, "vite.config", [
-    ".ts",
-    ".cts",
-    ".mts",
-    ".js",
-    ".cjs",
-    ".mjs"
-  ]);
-  if (!configFile) {
-    console.error(import_picocolors3.default.red("Vite config file not found"));
-    process.exit(1);
-  }
-  let viteConfig = await resolveViteConfig({ configFile, root });
-  let ctx = await extractPluginContext(viteConfig);
-  if (!ctx) {
-    console.error(
-      import_picocolors3.default.red("React Router Vite plugin not found in Vite config")
-    );
-    process.exit(1);
-  }
-  return ctx;
-}
-function findConfig(dir, basename2, extensions) {
-  for (let ext of extensions) {
-    let name = basename2 + ext;
-    let file = path6.join(dir, name);
-    if (fse.existsSync(file)) return file;
-  }
-  return void 0;
-}
-var import_node_crypto, path6, url, fse, babel, import_react_router2, import_es_module_lexer, import_jsesc, import_picocolors3, virtualHmrRuntime, virtualInjectHmrRuntime, virtual, getServerBuildDirectory, defaultEntriesDir, defaultEntries, REACT_REFRESH_HEADER;
+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;
 var init_plugin = __esm({
   "vite/plugin.ts"() {
     "use strict";
     import_node_crypto = require("crypto");
-    path6 = __toESM(require("path"));
+    path7 = __toESM(require("path"));
     url = __toESM(require("url"));
     fse = __toESM(require("fs-extra"));
-    babel = __toESM(require("@babel/core"));
+    babel2 = __toESM(require("@babel/core"));
     import_react_router2 = require("react-router");
     import_es_module_lexer = require("es-module-lexer");
     import_jsesc = __toESM(require("jsesc"));
-    import_picocolors3 = __toESM(require("picocolors"));
+    import_picocolors4 = __toESM(require("picocolors"));
     init_typegen();
     init_invariant();
     init_babel();
@@ -984,18 +985,18 @@ var init_plugin = __esm({
       serverManifest: create("server-manifest"),
       browserManifest: create("browser-manifest")
     };
-    getServerBuildDirectory = (ctx) => path6.join(
+    getServerBuildDirectory = (ctx) => path7.join(
       ctx.reactRouterConfig.buildDirectory,
       "server",
       ...ctx.serverBundleBuildConfig ? [ctx.serverBundleBuildConfig.serverBundleId] : []
     );
-    defaultEntriesDir = path6.resolve(
-      path6.dirname(require.resolve("@react-router/dev/package.json")),
+    defaultEntriesDir = path7.resolve(
+      path7.dirname(require.resolve("@react-router/dev/package.json")),
       "dist",
       "config",
       "defaults"
     );
-    defaultEntries = fse.readdirSync(defaultEntriesDir).map((filename2) => path6.join(defaultEntriesDir, filename2));
+    defaultEntries = fse.readdirSync(defaultEntriesDir).map((filename3) => path7.join(defaultEntriesDir, filename3));
     invariant(defaultEntries.length > 0, "No default entries found");
     REACT_REFRESH_HEADER = `
 import RefreshRuntime from "${virtualHmrRuntime.id}";
@@ -1021,45 +1022,6 @@ if (import.meta.hot && !inWebWorker) {
   }
 });
 
-// vite/profiler.ts
-var import_node_fs3, import_node_path, import_picocolors4, getSession, start, profileCount, stop;
-var init_profiler = __esm({
-  "vite/profiler.ts"() {
-    "use strict";
-    import_node_fs3 = __toESM(require("fs"));
-    import_node_path = __toESM(require("path"));
-    import_picocolors4 = __toESM(require("picocolors"));
-    getSession = () => global.__reactRouter_profile_session;
-    start = async (callback) => {
-      let inspector = await import("inspector").then((r) => r.default);
-      let session = global.__reactRouter_profile_session = new inspector.Session();
-      session.connect();
-      session.post("Profiler.enable", () => {
-        session.post("Profiler.start", callback);
-      });
-    };
-    profileCount = 0;
-    stop = (log) => {
-      let session = getSession();
-      if (!session) return;
-      return new Promise((res, rej) => {
-        session.post("Profiler.stop", (err2, { profile }) => {
-          if (err2) return rej(err2);
-          let outPath = import_node_path.default.resolve(`./react-router-${profileCount++}.cpuprofile`);
-          import_node_fs3.default.writeFileSync(outPath, JSON.stringify(profile));
-          log(
-            import_picocolors4.default.yellow(
-              `CPU profile written to ${import_picocolors4.default.white(import_picocolors4.default.dim(outPath))}`
-            )
-          );
-          global.__reactRouter_profile_session = void 0;
-          res();
-        });
-      });
-    };
-  }
-});
-
 // vite/build.ts
 var build_exports = {};
 __export(build_exports, {
@@ -1359,6 +1321,8 @@ var import_fs_extra2 = __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"));
+var import_react_router3 = require("react-router");
+init_config();
 
 // config/format.ts
 function formatRoutes(routeManifest, format) {
@@ -1416,16 +1380,13 @@ function formatRoutesAsJsx(routeManifest) {
   return output;
 }
 
-// cli/commands.ts
-init_plugin();
-
 // cli/useJavascript.ts
-var babel2 = __toESM(require("@babel/core"));
+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(tsx, options = {}) {
-  let mjs = babel2.transformSync(tsx, {
+  let mjs = babel.transformSync(tsx, {
     compact: false,
     cwd: options.cwd,
     filename: options.filename,
@@ -1442,18 +1403,14 @@ init_profiler();
 init_typegen();
 init_vite();
 async function routes(reactRouterRoot, flags = {}) {
-  let ctx = await loadPluginContext({
-    root: reactRouterRoot,
-    configFile: flags.config
-  });
-  if (!ctx) {
-    console.error(
-      import_picocolors7.default.red("React Router Vite plugin not found in Vite config")
-    );
+  let rootDirectory = reactRouterRoot ?? process.cwd();
+  let configResult = await loadConfig({ rootDirectory });
+  if (!configResult.ok) {
+    console.error(import_picocolors7.default.red(configResult.error));
     process.exit(1);
   }
   let format = flags.json ? "json" : "jsx";
-  console.log(formatRoutes(ctx.reactRouterConfig.routes, format));
+  console.log(formatRoutes(configResult.value.routes, format));
 }
 async function build2(root, options = {}) {
   if (!root) {
@@ -1487,17 +1444,18 @@ var conjunctionListFormat = new Intl.ListFormat("en", {
   type: "conjunction"
 });
 async function generateEntry(entry, reactRouterRoot, flags = {}) {
-  let ctx = await loadPluginContext({
-    root: reactRouterRoot,
-    configFile: flags.config
-  });
-  let rootDirectory = ctx.rootDirectory;
-  let appDirectory = ctx.reactRouterConfig.appDirectory;
   if (!entry) {
     await generateEntry("entry.client", reactRouterRoot, flags);
     await generateEntry("entry.server", reactRouterRoot, flags);
     return;
   }
+  let rootDirectory = reactRouterRoot ?? process.cwd();
+  let configResult = await loadConfig({ rootDirectory });
+  if (!configResult.ok) {
+    console.error(import_picocolors7.default.red(configResult.error));
+    return;
+  }
+  let appDirectory = configResult.value.appDirectory;
   if (!entries.includes(entry)) {
     let entriesArray = Array.from(entries);
     let list = conjunctionListFormat.format(entriesArray);

package/dist/config/defaults/entry.server.node.tsx

@@ -61,7 +61,7 @@ export default function handleRequest(
       }
     );
 
-    // Abort the rendering stream after the `streamTimeout` so it has tine to
+    // Abort the rendering stream after the `streamTimeout` so it has time to
     // flush down the rejected boundaries
     setTimeout(abort, streamTimeout + 1000);
   });

package/dist/config.js

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

package/dist/routes.js

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

package/dist/vite/cloudflare.js

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

package/dist/vite.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-759a11a62
+ * @react-router/dev v0.0.0-experimental-beaa4f52a
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -57,8 +57,7 @@ var import_picocolors3 = __toESM(require("picocolors"));
 
 // typegen/index.ts
 var import_node_fs2 = __toESM(require("fs"));
-var import_dedent2 = __toESM(require("dedent"));
-var Path3 = __toESM(require("pathe"));
+var Path4 = __toESM(require("pathe"));
 var import_picocolors2 = __toESM(require("picocolors"));
 
 // config/config.ts
@@ -625,54 +624,127 @@ function findEntry(dir, basename2, options) {
 
 // typegen/generate.ts
 var import_dedent = __toESM(require("dedent"));
-function generate(route) {
+var Path3 = __toESM(require("pathe"));
+var Pathe2 = __toESM(require("pathe/utils"));
+
+// typegen/paths.ts
+var Path2 = __toESM(require("pathe"));
+var Pathe = __toESM(require("pathe/utils"));
+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"
+  );
+}
+
+// typegen/generate.ts
+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 MiddlewareArgs = T.CreateServerMiddlewareArgs<Info>
+      export type ClientMiddlewareArgs = T.CreateClientMiddlewareArgs<Info>
+      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>
     }
   `;
 }
-
-// typegen/paths.ts
-var Path2 = __toESM(require("pathe"));
-var Pathe = __toESM(require("pathe/utils"));
-function getTypesDir(ctx) {
-  return Path2.join(ctx.rootDirectory, ".react-router/types");
+var noExtension = (path7) => Path3.join(Path3.dirname(path7), Pathe2.filename(path7));
+function getRouteLineage(routes, route) {
+  const result = [];
+  while (route) {
+    result.push(route);
+    if (!route.parentId) break;
+    route = routes[route.parentId];
+  }
+  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("; ");
+}
+function parseParams(urlpath) {
+  const result = {};
+  let segments = urlpath.split("/");
+  segments.forEach((segment) => {
+    const match = segment.match(/^:([\w-]+)(\?)?/);
+    if (!match) return;
+    const param = match[1];
+    const isOptional = match[2] !== void 0;
+    result[param] ??= [];
+    result[param].push(isOptional);
+    return;
+  });
+  const hasSplat = segments.at(-1) === "*";
+  if (hasSplat) result["*"] = [false];
+  return result;
 }
 
 // typegen/index.ts
@@ -714,97 +786,16 @@ async function createContext2({
     config
   };
 }
-function asJS(path7) {
-  return path7.replace(/\.(js|ts)x?$/, ".js");
-}
-function formatRoute(ctx, { id, path: path7, file, parentId }) {
-  const modulePath = Path3.relative(
-    ctx.rootDirectory,
-    Path3.join(ctx.config.appDirectory, file)
-  );
-  return [
-    `"${id}": {`,
-    `  parentId: ${JSON.stringify(parentId)}`,
-    `  path: ${JSON.stringify(path7)}`,
-    `  module: typeof import("${asJS(modulePath)}")`,
-    `}`
-  ].map((line) => `  ${line}`).join("\n");
-}
 async function writeAll(ctx) {
-  let routes = Object.values(ctx.config.routes);
-  let pathsToParams = /* @__PURE__ */ new Map();
-  for (let route of routes) {
-    if (route.path === void 0) continue;
-    let lineage = getRouteLineage(ctx.config.routes, route);
-    let path7 = lineage.filter((route2) => route2.path !== void 0).map((route2) => route2.path).join("/");
-    if (path7 === "") path7 = "/";
-    pathsToParams.set(path7, parseParams(path7));
-  }
-  let formattedPaths = `type Paths = {`;
-  for (let [path7, params] of pathsToParams.entries()) {
-    let formattedParams = Object.entries(params).map(
-      ([param, required]) => `"${param}"${required ? "" : "?"}: string`
-    );
-    let formattedEntry = `"${path7}": {${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 = {
-${routes.map((route) => formatRoute(ctx, route)).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(routes, route) {
-  const result = [];
-  while (route) {
-    result.push(route);
-    if (!route.parentId) break;
-    route = routes[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;
-}
 
 // vite/babel.ts
 var import_parser = require("@babel/parser");
@@ -1171,7 +1162,7 @@ function invalidDestructureError(name) {
 }
 
 // vite/with-props.ts
-var import_dedent3 = __toESM(require("dedent"));
+var import_dedent2 = __toESM(require("dedent"));
 var vmod = create("with-props");
 var NAMED_COMPONENT_EXPORTS = ["HydrateFallback", "ErrorBoundary"];
 var plugin = {
@@ -1182,7 +1173,7 @@ var plugin = {
   },
   async load(id) {
     if (id !== vmod.resolvedId) return;
-    return import_dedent3.default`
+    return import_dedent2.default`
       import { createElement as h } from "react";
       import { useActionData, useLoaderData, useMatches, useParams, useRouteError } from "react-router";
 
@@ -1295,10 +1286,11 @@ function toFunctionExpression(decl) {
 }
 
 // vite/plugin.ts
-var SERVER_ONLY_ROUTE_EXPORTS = ["loader", "action", "headers"];
+var SERVER_ONLY_ROUTE_EXPORTS = ["loader", "action", "middleware", "headers"];
 var CLIENT_ROUTE_EXPORTS = [
   "clientAction",
   "clientLoader",
+  "clientMiddleware",
   "default",
   "ErrorBoundary",
   "handle",
@@ -1447,7 +1439,7 @@ var defaultEntriesDir = path6.resolve(
   "config",
   "defaults"
 );
-var defaultEntries = fse.readdirSync(defaultEntriesDir).map((filename2) => path6.join(defaultEntriesDir, filename2));
+var defaultEntries = fse.readdirSync(defaultEntriesDir).map((filename3) => path6.join(defaultEntriesDir, filename3));
 invariant(defaultEntries.length > 0, "No default entries found");
 var reactRouterDevLoadContext = () => ({});
 var reactRouterVitePlugin = () => {
@@ -1715,8 +1707,13 @@ var reactRouterVitePlugin = () => {
         let viteClientConditions = [
           ...vite2.defaultClientConditions ?? []
         ];
+        let packageRoot = path6.dirname(
+          require.resolve("@react-router/dev/package.json")
+        );
+        let { moduleSyncEnabled } = await import(`file:///${path6.join(packageRoot, "module-sync-enabled/index.mjs")}`);
         let viteServerConditions = [
-          ...vite2.defaultServerConditions ?? []
+          ...vite2.defaultServerConditions ?? [],
+          ...moduleSyncEnabled ? ["module-sync"] : []
         ];
         logger = vite2.createLogger(viteUserConfig.logLevel, {
           prefix: "[react-router]"
@@ -1773,9 +1770,9 @@ var reactRouterVitePlugin = () => {
           },
           optimizeDeps: {
             entries: ctx.reactRouterConfig.future.unstable_optimizeDeps ? [
-              ctx.entryClientFilePath,
+              vite2.normalizePath(ctx.entryClientFilePath),
               ...Object.values(ctx.reactRouterConfig.routes).map(
-                (route) => path6.join(ctx.reactRouterConfig.appDirectory, route.file)
+                (route) => resolveRelativeRouteFilePath(route, ctx.reactRouterConfig)
               )
             ] : [],
             include: [
@@ -2073,6 +2070,7 @@ var reactRouterVitePlugin = () => {
               viteConfig,
               ctx.reactRouterConfig,
               serverBuildDirectory,
+              ssrViteManifest[virtual.serverBuild.id].file,
               clientBuildDirectory
             );
           }
@@ -2081,6 +2079,7 @@ var reactRouterVitePlugin = () => {
               viteConfig,
               ctx.reactRouterConfig,
               serverBuildDirectory,
+              ssrViteManifest[virtual.serverBuild.id].file,
               clientBuildDirectory
             );
           }
@@ -2424,6 +2423,7 @@ function addRefreshWrapper(reactRouterConfig, code, id) {
   let acceptExports = route ? [
     "clientAction",
     "clientLoader",
+    "clientMiddleware",
     "handle",
     "meta",
     "links",
@@ -2513,11 +2513,8 @@ async function getRouteMetadata(ctx, viteChildCompiler, route, readRouteFile) {
   };
   return info;
 }
-async function getPrerenderBuildAndHandler(viteConfig, reactRouterConfig, serverBuildDirectory) {
-  let serverBuildPath = path6.join(
-    serverBuildDirectory,
-    reactRouterConfig.serverBuildFile
-  );
+async function getPrerenderBuildAndHandler(viteConfig, serverBuildDirectory, serverBuildFile) {
+  let serverBuildPath = path6.join(serverBuildDirectory, serverBuildFile);
   let build = await import(url.pathToFileURL(serverBuildPath).toString());
   let { createRequestHandler: createHandler } = await import("react-router");
   return {
@@ -2525,11 +2522,11 @@ async function getPrerenderBuildAndHandler(viteConfig, reactRouterConfig, server
     handler: createHandler(build, viteConfig.mode)
   };
 }
-async function handleSpaMode(viteConfig, reactRouterConfig, serverBuildDirectory, clientBuildDirectory) {
+async function handleSpaMode(viteConfig, reactRouterConfig, serverBuildDirectory, serverBuildFile, clientBuildDirectory) {
   let { handler } = await getPrerenderBuildAndHandler(
     viteConfig,
-    reactRouterConfig,
-    serverBuildDirectory
+    serverBuildDirectory,
+    serverBuildFile
   );
   let request = new Request(`http://localhost${reactRouterConfig.basename}`);
   let response = await handler(request);
@@ -2541,11 +2538,11 @@ async function handleSpaMode(viteConfig, reactRouterConfig, serverBuildDirectory
     "SPA Mode: index.html has been written to your " + import_picocolors3.default.bold(path6.relative(process.cwd(), clientBuildDirectory)) + " directory"
   );
 }
-async function handlePrerender(viteConfig, reactRouterConfig, serverBuildDirectory, clientBuildDirectory) {
+async function handlePrerender(viteConfig, reactRouterConfig, serverBuildDirectory, serverBuildPath, clientBuildDirectory) {
   let { build, handler } = await getPrerenderBuildAndHandler(
     viteConfig,
-    reactRouterConfig,
-    serverBuildDirectory
+    serverBuildDirectory,
+    serverBuildPath
   );
   let routes = createPrerenderRoutes(build.routes);
   let routesToPrerender;
@@ -2741,6 +2738,8 @@ function createPrerenderRoutes(manifest, parentId = "", routesByParentId = group
       loader: route.module.loader ? () => null : void 0,
       action: void 0,
       handle: route.module.handle
+      // middleware is not necessary here since we just need to know which
+      // routes have loaders so we know what paths to prerender
     };
     return route.index ? {
       index: true,

package/module-sync-enabled/false.cjs

@@ -0,0 +1 @@
+exports.default = false;

package/module-sync-enabled/index.d.mts

@@ -0,0 +1,2 @@
+declare const moduleSyncEnabled: boolean;
+export { moduleSyncEnabled };

package/module-sync-enabled/index.mjs

@@ -0,0 +1,4 @@
+import { createRequire } from "node:module";
+const require = createRequire(import.meta.url);
+const moduleSyncEnabled = require("#module-sync-enabled").default;
+export { moduleSyncEnabled };

package/module-sync-enabled/true.mjs

@@ -0,0 +1,2 @@
+const moduleSyncEnabled = true;
+export default moduleSyncEnabled;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-router/dev",
-  "version": "0.0.0-experimental-759a11a62",
+  "version": "0.0.0-experimental-beaa4f52a",
   "description": "Dev tools and CLI for React Router",
   "homepage": "https://reactrouter.com",
   "bugs": {
@@ -31,6 +31,12 @@
     },
     "./package.json": "./package.json"
   },
+  "imports": {
+    "#module-sync-enabled": {
+      "module-sync": "./module-sync-enabled/true.mjs",
+      "default": "./module-sync-enabled/false.cjs"
+    }
+  },
   "bin": {
     "react-router": "bin.js"
   },
@@ -40,6 +46,7 @@
       "files": [
         "cli/**",
         "config/**",
+        "module-sync-enabled/**",
         "typegen/**",
         "vite/**",
         "*.ts",
@@ -81,7 +88,7 @@
     "set-cookie-parser": "^2.6.0",
     "valibot": "^0.41.0",
     "vite-node": "3.0.0-beta.2",
-    "@react-router/node": "0.0.0-experimental-759a11a62"
+    "@react-router/node": "0.0.0-experimental-beaa4f52a"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.5",
@@ -110,15 +117,15 @@
     "vite": "^6.0.0",
     "wireit": "0.14.9",
     "wrangler": "^3.28.2",
-    "react-router": "^0.0.0-experimental-759a11a62",
-    "@react-router/serve": "0.0.0-experimental-759a11a62"
+    "@react-router/serve": "0.0.0-experimental-beaa4f52a",
+    "react-router": "^0.0.0-experimental-beaa4f52a"
   },
   "peerDependencies": {
     "typescript": "^5.1.0",
     "vite": "^5.1.0 || ^6.0.0",
     "wrangler": "^3.28.2",
-    "@react-router/serve": "^0.0.0-experimental-759a11a62",
-    "react-router": "^0.0.0-experimental-759a11a62"
+    "@react-router/serve": "^0.0.0-experimental-beaa4f52a",
+    "react-router": "^0.0.0-experimental-beaa4f52a"
   },
   "peerDependenciesMeta": {
     "@react-router/serve": {
@@ -136,6 +143,7 @@
   },
   "files": [
     "dist/",
+    "module-sync-enabled/",
     "bin.js",
     "CHANGELOG.md",
     "LICENSE.md",