@react-router/dev 0.0.0-experimental-58b44aa83 → 0.0.0-experimental-689d76079

package/CHANGELOG.md

@@ -1,5 +1,91 @@
 # `@react-router/dev`
 
+## v7.14.1
+
+### Patch Changes
+
+- Add TypeScript 6 support to peer dependency ranges
+- Updated dependencies:
+  - [`react-router@7.14.1`](https://github.com/remix-run/react-router/releases/tag/react-router@7.14.1)
+  - [`@react-router/node@7.14.1`](https://github.com/remix-run/react-router/releases/tag/@react-router/node@7.14.1)
+  - [`@react-router/serve@7.14.1`](https://github.com/remix-run/react-router/releases/tag/@react-router/serve@7.14.1)
+
+## 7.14.0
+
+### Minor Changes
+
+- Add support for Vite 8 ([#14876](https://github.com/remix-run/react-router/pull/14876))
+
+### Patch Changes
+
+- support for prerendering multiple server bundles with v8_viteEnvironmentApi ([#14921](https://github.com/remix-run/react-router/pull/14921))
+
+- rsc framework mode prerender / spa mode support ([#14907](https://github.com/remix-run/react-router/pull/14907))
+
+- UNSTABLE RSC FRAMEWORK MODE BREAKING CHANGE - Existing route module exports remain unchanged from stable v7 non-RSC mode, but new exports are added for RSC mode. If you want to use RSC features, you will need to update your route modules to export the new annotations. ([#14901](https://github.com/remix-run/react-router/pull/14901))
+
+  If you are using RSC framework mode currently, you will need to update your route modules to the new conventions. The following route module components have their own mutually exclusive server component counterparts:
+
+  | Server Component Export | Client Component  |
+  | ----------------------- | ----------------- |
+  | `ServerComponent`       | `default`         |
+  | `ServerErrorBoundary`   | `ErrorBoundary`   |
+  | `ServerLayout`          | `Layout`          |
+  | `ServerHydrateFallback` | `HydrateFallback` |
+
+  If you were previously exporting a `ServerComponent`, your `ErrorBoundary`, `Layout`, and `HydrateFallback` were also server components. If you want to keep those as server components, you can rename them and prefix them with `Server`. If you were previously importing the implementations of those components from a client module, you can simply inline them.
+
+  Example:
+
+  Before
+
+  ```tsx
+  import { ErrorBoundary as ClientErrorBoundary } from "./client";
+
+  export function ServerComponent() {
+    // ...
+  }
+
+  export function ErrorBoundary() {
+    return <ClientErrorBoundary />;
+  }
+
+  export function Layout() {
+    // ...
+  }
+
+  export function HydrateFallback() {
+    // ...
+  }
+  ```
+
+  After
+
+  ```tsx
+  export function ServerComponent() {
+    // ...
+  }
+
+  export function ErrorBoundary() {
+    // previous implementation of ClientErrorBoundary, this is now a client component
+  }
+
+  export function ServerLayout() {
+    // rename previous Layout export to ServerLayout to make it a server component
+  }
+
+  export function ServerHydrateFallback() {
+    // rename previous HydrateFallback export to ServerHydrateFallback to make it a server component
+  }
+  ```
+
+- update the reveal command to support rsc for `entry.client`, `entry.rsc`, `entry.ssr` ([#14904](https://github.com/remix-run/react-router/pull/14904))
+
+- Updated dependencies:
+  - `react-router@7.14.0`
+  - `@react-router/node@7.14.0`
+  - `@react-router/serve@7.14.0`
+
 ## 7.13.2
 
 ### Patch Changes

package/dist/cli/index.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 /**
- * @react-router/dev v0.0.0-experimental-58b44aa83
+ * @react-router/dev v0.0.0-experimental-689d76079
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -1078,7 +1078,7 @@ function routeFilesType({
                   t2.tsPropertySignature(
                     t2.identifier("page"),
                     t2.tsTypeAnnotation(
-                      pages ? t2.tsUnionType(
+                      pages.size > 0 ? t2.tsUnionType(
                         Array.from(pages).map(
                           (page) => t2.tsLiteralType(t2.stringLiteral(page))
                         )

package/dist/config.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-58b44aa83
+ * @react-router/dev v0.0.0-experimental-689d76079
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/routes.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-58b44aa83
+ * @react-router/dev v0.0.0-experimental-689d76079
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/vite/cloudflare.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-58b44aa83
+ * @react-router/dev v0.0.0-experimental-689d76079
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/vite.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-58b44aa83
+ * @react-router/dev v0.0.0-experimental-689d76079
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -1096,7 +1096,7 @@ function routeFilesType({
                   t2.tsPropertySignature(
                     t2.identifier("page"),
                     t2.tsTypeAnnotation(
-                      pages ? t2.tsUnionType(
+                      pages.size > 0 ? t2.tsUnionType(
                         Array.from(pages).map(
                           (page) => t2.tsLiteralType(t2.stringLiteral(page))
                         )
@@ -5677,6 +5677,7 @@ function escapeHtml(html) {
 // vite/rsc/plugin.ts
 var import_es_module_lexer3 = require("es-module-lexer");
 var Path5 = __toESM(require("pathe"));
+var babel2 = __toESM(require("@babel/core"));
 var import_picocolors5 = __toESM(require("picocolors"));
 var import_fs = require("fs");
 var import_promises4 = require("fs/promises");
@@ -5684,91 +5685,12 @@ var import_pathe6 = __toESM(require("pathe"));
 
 // vite/rsc/virtual-route-config.ts
 var import_pathe5 = __toESM(require("pathe"));
-var js = String.raw;
 function createVirtualRouteConfig({
   appDirectory,
   routeConfig
 }) {
   let routeIdByFile = /* @__PURE__ */ new Map();
-  let code = js`import * as React from "react";
-function frameworkRoute(lazy) {
-  return async () => {
-    const mod = await lazy();
-    let Component;
-    let Layout;
-    let ErrorBoundary;
-    let HydrateFallback;
-    if ("default" in mod && mod.default) {
-      if ("ServerComponent" in mod && mod.ServerComponent) {
-        throw new Error("Module cannot have both a default export and a ServerComponent export");
-      }
-      Component = mod.default;
-    } else if ("ServerComponent" in mod && mod.ServerComponent) {
-      Component = mod.ServerComponent;
-    }
-    if ("Layout" in mod && mod.Layout) {
-      if ("ServerLayout" in mod && mod.ServerLayout) {
-        throw new Error("Module cannot have both a Layout export and a ServerLayout export");
-      }
-      Layout = mod.Layout;
-    } else if ("ServerLayout" in mod && mod.ServerLayout) {
-      Layout = mod.ServerLayout;
-    }
-    if ("ErrorBoundary" in mod && mod.ErrorBoundary) {
-      if ("ServerErrorBoundary" in mod && mod.ServerErrorBoundary) {
-        throw new Error(
-          "Module cannot have both an ErrorBoundary export and a ServerErrorBoundary export",
-        );
-      }
-      ErrorBoundary = mod.ErrorBoundary;
-    } else if ("ServerErrorBoundary" in mod && mod.ServerErrorBoundary) {
-      ErrorBoundary = mod.ServerErrorBoundary;
-    }
-    if ("HydrateFallback" in mod && mod.HydrateFallback) {
-      if ("ServerHydrateFallback" in mod && mod.ServerHydrateFallback) {
-        throw new Error(
-          "Module cannot have both a HydrateFallback export and a ServerHydrateFallback export",
-        );
-      }
-      HydrateFallback = mod.HydrateFallback;
-    } else if ("ServerHydrateFallback" in mod && mod.ServerHydrateFallback) {
-      HydrateFallback = mod.ServerHydrateFallback;
-    }
-
-    const {
-      action,
-      clientAction,
-      clientLoader,
-      clientMiddleware,
-      handle,
-      headers,
-      links,
-      loader,
-      meta,
-      middleware,
-      shouldRevalidate,
-    } = mod;
-
-    return {
-      Component,
-      ErrorBoundary,
-      HydrateFallback,
-      Layout,
-      action,
-      clientAction,
-      clientLoader,
-      clientMiddleware,
-      handle,
-      headers,
-      links,
-      loader,
-      meta,
-      middleware,
-      shouldRevalidate,
-    };
-  };
-}
-export default [`;
+  let code = "export default [";
   const closeRouteSymbol = Symbol("CLOSE_ROUTE");
   let stack = [
     ...routeConfig
@@ -5784,9 +5706,9 @@ export default [`;
     const routeFile = import_pathe5.default.resolve(appDirectory, route.file);
     const routeId = route.id || createRouteId2(route.file, appDirectory);
     routeIdByFile.set(routeFile, routeId);
-    code += `lazy: frameworkRoute(() => import(${JSON.stringify(
-      `${routeFile}`
-    )})),`;
+    code += `lazy: () => import(${JSON.stringify(
+      `${routeFile}?route-module`
+    )}),`;
     code += `id: ${JSON.stringify(routeId)},`;
     if (typeof route.path === "string") {
       code += `path: ${JSON.stringify(route.path)},`;
@@ -5814,216 +5736,227 @@ function createRouteId2(file, appDirectory) {
 
 // vite/rsc/virtual-route-modules.ts
 var import_es_module_lexer2 = require("es-module-lexer");
-var ENSURE_CLIENT_ROUTE_MODULE_CHUNK_FOR_HMR = `
-import * as ___EnsureClientRouteModuleForHMR_REACT___ from "react";
-export function EnsureClientRouteModuleForHMR___() { return ___EnsureClientRouteModuleForHMR_REACT___.createElement(___EnsureClientRouteModuleForHMR_REACT___.Fragment, null) }
-`;
-function virtualRouteModulesPlugin({
-  environments: { client = ["client", "ssr"], server = ["rsc"] } = {},
-  isRouteModule,
-  isRootRouteModule,
-  transformToJs
+var SERVER_COMPONENT_EXPORTS = [
+  "ServerComponent",
+  "ServerLayout",
+  "ServerHydrateFallback",
+  "ServerErrorBoundary"
+];
+var SERVER_COMPONENT_EXPORTS_SET = new Set(SERVER_COMPONENT_EXPORTS);
+function isServerComponentExport(name) {
+  return SERVER_COMPONENT_EXPORTS_SET.has(name);
+}
+var SERVER_ROUTE_EXPORTS = [
+  ...SERVER_COMPONENT_EXPORTS,
+  "loader",
+  "action",
+  "middleware",
+  "headers"
+];
+var SERVER_ROUTE_EXPORTS_SET = new Set(SERVER_ROUTE_EXPORTS);
+function isServerRouteExport(name) {
+  return SERVER_ROUTE_EXPORTS_SET.has(name);
+}
+var CLIENT_NON_COMPONENT_EXPORTS2 = [
+  "clientAction",
+  "clientLoader",
+  "clientMiddleware",
+  "handle",
+  "meta",
+  "links",
+  "shouldRevalidate"
+];
+var CLIENT_ROUTE_EXPORTS2 = [
+  ...CLIENT_NON_COMPONENT_EXPORTS2,
+  "default",
+  "ErrorBoundary",
+  "HydrateFallback",
+  "Layout"
+];
+var CLIENT_ROUTE_EXPORTS_SET = new Set(CLIENT_ROUTE_EXPORTS2);
+function isClientRouteExport(name) {
+  return CLIENT_ROUTE_EXPORTS_SET.has(name);
+}
+var mutuallyExclusiveRouteExports = /* @__PURE__ */ new Map([
+  ["ErrorBoundary", "ServerErrorBoundary"],
+  ["HydrateFallback", "ServerHydrateFallback"],
+  ["Layout", "ServerLayout"],
+  ["default", "ServerComponent"]
+]);
+var ROUTE_EXPORTS = [
+  ...SERVER_ROUTE_EXPORTS,
+  ...CLIENT_ROUTE_EXPORTS2
+];
+var ROUTE_EXPORTS_SET = new Set(ROUTE_EXPORTS);
+function isRouteExport(name) {
+  return ROUTE_EXPORTS_SET.has(name);
+}
+function isCustomRouteExport(name) {
+  return !isRouteExport(name);
+}
+function hasReactServerCondition(viteEnvironment) {
+  return viteEnvironment.config.resolve.conditions.includes("react-server");
+}
+function transformVirtualRouteModules({
+  id,
+  code,
+  viteCommand,
+  routeIdByFile,
+  rootRouteFile,
+  viteEnvironment
 }) {
-  let clientEnvironments = new Set(client);
-  let serverEnvironments = new Set(server);
-  let cache = /* @__PURE__ */ new Map();
-  async function createClientRouteEntry(id, code) {
-    let result = "";
-    let routeChunks = detectRouteChunks2(cache, id, code);
-    let { staticExports } = await parseRouteExports(code);
-    validateRouteModuleExports(staticExports);
-    let needsReactImport = false;
-    for (let exportName of staticExports) {
-      if (isServerRouteExport(exportName)) {
-        continue;
-      }
-      if ((exportName === "clientAction" || exportName === "clientLoader") && routeChunks.hasRouteChunkByExportName[exportName]) {
-        result += `export const ${exportName} = async (...args) => import("${createId(id, "client-route-module", exportName)}").then(mod => mod.${exportName}(...args));
-`;
-      } else if (exportName === "HydrateFallback") {
-        needsReactImport = true;
-        result += `export const ${exportName} = React.lazy(() => import("${createId(
-          id,
-          "client-route-module",
-          routeChunks.hasRouteChunkByExportName[exportName] ? exportName : "shared"
-        )}").then(mod => ({ default: mod.${exportName} })));
-`;
-      } else {
-        result += `export { ${exportName} } from "${createId(
-          id,
-          "client-route-module",
-          routeChunks.hasRouteChunkByExportName[exportName] ? exportName : "shared"
-        )}";
-`;
+  if (isVirtualRouteModuleId(id) || routeIdByFile.has(id)) {
+    return createVirtualRouteModuleCode({
+      id,
+      code,
+      rootRouteFile,
+      viteCommand,
+      viteEnvironment
+    });
+  }
+  if (isVirtualServerRouteModuleId(id)) {
+    return createVirtualServerRouteModuleCode({
+      id,
+      code,
+      viteEnvironment
+    });
+  }
+  if (isVirtualClientRouteModuleId(id)) {
+    return createVirtualClientRouteModuleCode({
+      id,
+      code,
+      rootRouteFile,
+      viteCommand
+    });
+  }
+}
+async function createVirtualRouteModuleCode({
+  id,
+  code: routeSource,
+  rootRouteFile,
+  viteCommand,
+  viteEnvironment
+}) {
+  const isReactServer = hasReactServerCondition(viteEnvironment);
+  const { staticExports, hasClientExports } = parseRouteExports(routeSource);
+  for (const exportName of staticExports) {
+    if (mutuallyExclusiveRouteExports.has(exportName)) {
+      const conflictingExport = mutuallyExclusiveRouteExports.get(exportName);
+      if (staticExports.includes(conflictingExport)) {
+        throw new Error(
+          `Route module cannot export both "${exportName}" and "${conflictingExport}". Please choose one or the other.`
+        );
       }
     }
-    if (needsReactImport) {
-      result = `import * as React from "react";
-${result}`;
-    }
-    return {
-      code: '"use client";\n' + result
-    };
   }
-  async function createServerRouteEntry(id, code, isRootRouteModule2) {
-    let result = "";
-    let routeChunks = detectRouteChunks2(cache, id, code);
-    let { staticExports } = await parseRouteExports(code);
-    validateRouteModuleExports(staticExports);
-    let needsReactImport = false;
-    for (let exportName of staticExports) {
-      if (isClientRouteExport(exportName)) {
-        result += `export { ${exportName} } from "${createId(
-          id,
-          "client-route-module",
-          routeChunks.hasRouteChunkByExportName[exportName] ? exportName : "shared"
-        )}";
+  const clientModuleId = getVirtualClientModuleId(id);
+  const serverModuleId = getVirtualServerModuleId(id);
+  let code = "";
+  if (isReactServer && staticExports.some(isServerComponentExport)) {
+    code += `import React from "react";
 `;
-      } else if (isServerComponentExport(exportName)) {
-        needsReactImport = true;
-        result += `import { ${exportName} as ${exportName}WithoutCss } from "${createId(id, "server-route-module")}";
+  }
+  for (const staticExport of staticExports) {
+    if (isReactServer && isServerComponentExport(staticExport)) {
+      code += `import { ${staticExport} as ${staticExport}WithoutCss } from "${serverModuleId}";
 `;
-        result += `export function ${exportName}(props) {
+      code += `export ${staticExport === "ServerComponent" ? "default " : " "}function ${staticExport.replace(/^Server/, "")}(props) {
 `;
-        result += `  return React.createElement(React.Fragment, null,
+      code += `  return React.createElement(React.Fragment, null,
 `;
-        result += `    import.meta.viteRsc.loadCss(),
+      code += `    import.meta.viteRsc.loadCss(),
 `;
-        result += `    React.createElement(EnsureClientRouteModuleForHMR___, null),
+      code += `    React.createElement(${staticExport}WithoutCss, props),
 `;
-        result += `    React.createElement(${exportName}WithoutCss, props),
+      code += `  );
 `;
-        result += `  );
+      code += `}
 `;
-        result += `}
+    } else if (isReactServer && isServerRouteExport(staticExport)) {
+      code += `export { ${staticExport} } from "${serverModuleId}";
 `;
-      } else {
-        result += `export { ${exportName} } from "${createId(id, "server-route-module")}";
+    } else if (isClientRouteExport(staticExport)) {
+      code += `export { ${staticExport} } from "${clientModuleId}";
 `;
-      }
-    }
-    if (needsReactImport) {
-      result = `import * as React from "react";
-import { EnsureClientRouteModuleForHMR___ } from "${createId(id, "client-route-module", "shared")}";
-
-${result}`;
-    }
-    if (isRootRouteModule2 && !staticExports.includes("ErrorBoundary") && !staticExports.includes("ServerErrorBoundary")) {
-      result += `export { ErrorBoundary } from "${createId(id, "client-route-module", "shared")}";
+    } else if (isCustomRouteExport(staticExport)) {
+      code += `export { ${staticExport} } from "${isReactServer ? serverModuleId : clientModuleId}";
 `;
     }
-    return {
-      code: result
-    };
   }
-  function createServerRouteModule(code) {
-    const ast = import_parser.parse(code, {
-      sourceType: "module"
-    });
-    removeExports(ast, CLIENT_ROUTE_EXPORTS2);
-    return generate(ast);
-  }
-  async function createClientRouteModuleChunk(id, code, chunk, isRootRouteModule2) {
-    let routeChunks = detectRouteChunks2(cache, id, code);
-    const ast = import_parser.parse(code, {
-      sourceType: "module"
-    });
-    const { staticExports } = await parseRouteExports(code);
-    if (chunk === "shared") {
-      removeExports(ast, [
-        ...SERVER_ROUTE_EXPORTS,
-        ...routeChunks.chunkedExports
-      ]);
-    } else {
-      const toRemove = /* @__PURE__ */ new Set([...SERVER_ROUTE_EXPORTS, ...staticExports]);
-      toRemove.delete(chunk);
-      removeExports(ast, Array.from(toRemove));
-    }
-    const generated = generate(ast);
-    let result = '"use client";\n' + generated.code;
-    if (chunk === "shared") {
-      if (isRootRouteModule2 && !staticExports.includes("ErrorBoundary") && !staticExports.includes("ServerErrorBoundary")) {
-        const hasRootLayout = staticExports.includes("Layout") || staticExports.includes("ServerLayout");
-        result += `
-import { createElement as __rr_createElement } from "react";
+  if (isRootRouteFile({ id, rootRouteFile }) && !staticExports.includes("ErrorBoundary") && !staticExports.includes("ServerErrorBoundary")) {
+    code += `export { ErrorBoundary } from "${clientModuleId}";
 `;
-        result += `import { UNSAFE_RSCDefaultRootErrorBoundary } from "react-router";
+  }
+  if (viteCommand === "serve" && !hasClientExports) {
+    code += `export { __ensureClientRouteModuleForHMR } from "${clientModuleId}";
 `;
-        result += `export function ErrorBoundary() {
+  }
+  return code;
+}
+function createVirtualServerRouteModuleCode({
+  id,
+  code: routeSource,
+  viteEnvironment
+}) {
+  if (!hasReactServerCondition(viteEnvironment)) {
+    throw new Error(
+      [
+        "Virtual server route module was loaded outside of the RSC environment.",
+        `Environment Name: ${viteEnvironment.name}`,
+        `Module ID: ${id}`
+      ].join("\n")
+    );
+  }
+  const { staticExports } = parseRouteExports(routeSource);
+  const clientModuleId = getVirtualClientModuleId(id);
+  const serverRouteModuleAst = import_parser.parse(routeSource, {
+    sourceType: "module"
+  });
+  removeExports(serverRouteModuleAst, CLIENT_ROUTE_EXPORTS2);
+  const generatorResult = generate(serverRouteModuleAst);
+  for (const staticExport of staticExports) {
+    if (isClientRouteExport(staticExport)) {
+      generatorResult.code += "\n";
+      generatorResult.code += `export { ${staticExport} } from "${clientModuleId}";
 `;
-        result += `  return __rr_createElement(UNSAFE_RSCDefaultRootErrorBoundary, { hasRootLayout: ${hasRootLayout} });
+    }
+  }
+  return generatorResult;
+}
+function createVirtualClientRouteModuleCode({
+  id,
+  code: routeSource,
+  rootRouteFile,
+  viteCommand
+}) {
+  const { staticExports, hasClientExports } = parseRouteExports(routeSource);
+  const clientRouteModuleAst = import_parser.parse(routeSource, {
+    sourceType: "module"
+  });
+  removeExports(clientRouteModuleAst, SERVER_ROUTE_EXPORTS);
+  const generatorResult = generate(clientRouteModuleAst);
+  generatorResult.code = '"use client";' + generatorResult.code;
+  if (isRootRouteFile({ id, rootRouteFile }) && !staticExports.includes("ErrorBoundary") && !staticExports.includes("ServerErrorBoundary")) {
+    const hasRootLayout = staticExports.includes("Layout");
+    generatorResult.code += `
+import { createElement as __rr_createElement } from "react";
 `;
-        result += `}
+    generatorResult.code += `import { UNSAFE_RSCDefaultRootErrorBoundary } from "react-router";
 `;
-      }
-      result += ENSURE_CLIENT_ROUTE_MODULE_CHUNK_FOR_HMR;
-    }
-    result += `
-if (import.meta.hot) {
+    generatorResult.code += `export function ErrorBoundary() {
 `;
-    result += `  import.meta.hot.accept((mod) => {
-      if (!mod.default) {
-        __reactRouterDataRouter.revalidate();
-      }
-    });
+    generatorResult.code += `  return __rr_createElement(UNSAFE_RSCDefaultRootErrorBoundary, { hasRootLayout: ${hasRootLayout} });
 `;
-    result += `}
+    generatorResult.code += `}
 `;
-    return {
-      code: result
-    };
   }
-  return {
-    name: "react-router-rsc-virtual-route-modules",
-    transform: {
-      order: "pre",
-      async handler(_code, id) {
-        const [filename2, ...rest] = id.split("?");
-        if (!isRouteModule(filename2)) {
-          return;
-        }
-        let isClientEnvironment = clientEnvironments.has(this.environment.name);
-        let isServerEnvironment = serverEnvironments.has(this.environment.name);
-        if (!isClientEnvironment && !isServerEnvironment) {
-          return;
-        }
-        let code = await transformToJs(_code, filename2);
-        let searchParams = rest.length > 0 ? new URLSearchParams(rest.join("?")) : null;
-        let clientRouteModuleType = searchParams?.get("client-route-module");
-        let isServerRouteModule = searchParams?.has("server-route-module");
-        if (clientRouteModuleType) {
-          return await createClientRouteModuleChunk(
-            id,
-            code,
-            clientRouteModuleType,
-            isRootRouteModule(filename2)
-          );
-        }
-        if (isServerRouteModule) {
-          return createServerRouteModule(code);
-        }
-        if (isClientEnvironment) {
-          return await createClientRouteEntry(id, code);
-        }
-        return await createServerRouteEntry(
-          id,
-          code,
-          isRootRouteModule(filename2)
-        );
-      }
-    }
-  };
-}
-function createId(id, type, value) {
-  let [base, ...rest] = id.split("?");
-  const searchParams = new URLSearchParams(rest.join("?"));
-  searchParams.delete("client-route-module");
-  searchParams.delete("server-route-module");
-  searchParams.set(type, value || "");
-  return `${base}?${searchParams.toString()}`;
+  if (viteCommand === "serve" && !hasClientExports) {
+    generatorResult.code += `
+export const __ensureClientRouteModuleForHMR = true;`;
+  }
+  return generatorResult;
 }
-async function parseRouteExports(code) {
-  await import_es_module_lexer2.init;
+function parseRouteExports(code) {
   const [, exportSpecifiers] = (0, import_es_module_lexer2.parse)(code);
   const staticExports = exportSpecifiers.map(({ n: name }) => name);
   return {
@@ -6031,95 +5964,27 @@ async function parseRouteExports(code) {
     hasClientExports: staticExports.some(isClientRouteExport)
   };
 }
-var CLIENT_NON_COMPONENT_EXPORTS2 = [
-  "clientAction",
-  "clientLoader",
-  "clientMiddleware",
-  "handle",
-  "meta",
-  "links",
-  "shouldRevalidate"
-];
-var CLIENT_ROUTE_EXPORTS2 = [
-  ...CLIENT_NON_COMPONENT_EXPORTS2,
-  "default",
-  "ErrorBoundary",
-  "HydrateFallback",
-  "Layout"
-];
-var CLIENT_ROUTE_EXPORTS_SET = new Set(CLIENT_ROUTE_EXPORTS2);
-function isClientRouteExport(name) {
-  return CLIENT_ROUTE_EXPORTS_SET.has(name);
+function getVirtualClientModuleId(id) {
+  return `${id.split("?")[0]}?client-route-module`;
 }
-var SERVER_COMPONENT_EXPORTS = [
-  "ServerComponent",
-  "ServerLayout",
-  "ServerHydrateFallback",
-  "ServerErrorBoundary"
-];
-var SERVER_COMPONENT_EXPORTS_SET = new Set(SERVER_COMPONENT_EXPORTS);
-function isServerComponentExport(name) {
-  return SERVER_COMPONENT_EXPORTS_SET.has(name);
+function getVirtualServerModuleId(id) {
+  return `${id.split("?")[0]}?server-route-module`;
 }
-var SERVER_ROUTE_EXPORTS = [
-  ...SERVER_COMPONENT_EXPORTS,
-  "loader",
-  "action",
-  "middleware",
-  "headers"
-];
-var SERVER_ROUTE_EXPORTS_SET = new Set(SERVER_ROUTE_EXPORTS);
-function isServerRouteExport(name) {
-  return SERVER_ROUTE_EXPORTS_SET.has(name);
+function isVirtualRouteModuleId(id) {
+  return /(\?|&)route-module(&|$)/.test(id);
 }
-var CLIENT_MODULE_CHUNKS = /* @__PURE__ */ new Set([
-  "clientAction",
-  "clientLoader",
-  "clientMiddleware",
-  "HydrateFallback"
-]);
-var MUTUALLY_EXCLUSIVE_ROUTE_EXPORTS = /* @__PURE__ */ new Map([
-  ["ErrorBoundary", "ServerErrorBoundary"],
-  ["HydrateFallback", "ServerHydrateFallback"],
-  ["Layout", "ServerLayout"],
-  ["default", "ServerComponent"]
-]);
-function validateRouteModuleExports(toValidate) {
-  let errors = [];
-  for (let [clientExport, serverExport] of MUTUALLY_EXCLUSIVE_ROUTE_EXPORTS) {
-    if (toValidate.includes(clientExport) && toValidate.includes(serverExport)) {
-      errors.push([clientExport, serverExport]);
-    }
-  }
-  if (errors.length > 0) {
-    throw new Error(
-      `Invalid route module exports. The following pairs of exports are mutually exclusive and cannot be exported from the same module:
-` + errors.map(
-        ([clientExport, serverExport]) => `- ${clientExport} and ${serverExport}`
-      ).join("\n")
-    );
-  }
+function isVirtualClientRouteModuleId(id) {
+  return /(\?|&)client-route-module(&|$)/.test(id);
 }
-function detectRouteChunks2(cache, id, code) {
-  function noRouteChunks() {
-    return {
-      chunkedExports: [],
-      hasRouteChunks: false,
-      hasRouteChunkByExportName: {
-        clientAction: false,
-        clientLoader: false,
-        clientMiddleware: false,
-        HydrateFallback: false
-      }
-    };
-  }
-  if (!Array.from(CLIENT_MODULE_CHUNKS).some(
-    (exportName) => code.includes(exportName)
-  )) {
-    return noRouteChunks();
-  }
-  let [filename2] = id.split("?");
-  return detectRouteChunks(code, cache, filename2);
+function isVirtualServerRouteModuleId(id) {
+  return /(\?|&)server-route-module(&|$)/.test(id);
+}
+function isRootRouteFile({
+  id,
+  rootRouteFile
+}) {
+  const filePath = id.split("?")[0];
+  return filePath === rootRouteFile;
 }
 
 // vite/rsc/plugin.ts
@@ -6145,25 +6010,6 @@ function reactRouterRSCVitePlugin() {
       newConfig.routes.root.file
     );
   }
-  function isRouteModule(id) {
-    if (routeIdByFile?.has(id)) {
-      return true;
-    }
-    return false;
-  }
-  function isRootRouteModule(id) {
-    return import_pathe6.default.normalize(id) === import_pathe6.default.normalize(rootRouteFile);
-  }
-  async function transformToJs(code, filename2) {
-    await preloadVite();
-    let vite2 = getVite();
-    return (await vite2.transformWithEsbuild(code, filename2, {
-      target: "esnext",
-      format: "esm",
-      jsx: "automatic",
-      jsxDev: viteCommand !== "build"
-    })).code;
-  }
   return [
     {
       name: "react-router/rsc",
@@ -6353,6 +6199,27 @@ ${errors.map((x) => ` - ${x}`).join("\n")}
                 ]
               }
             }
+          },
+          build: {
+            rollupOptions: {
+              // Copied from https://github.com/vitejs/vite-plugin-react/blob/c602225271d4acf462ba00f8d6d8a2e42492c5cd/packages/common/warning.ts
+              onwarn(warning, defaultHandler) {
+                if (warning.code === "MODULE_LEVEL_DIRECTIVE" && (warning.message.includes("use client") || warning.message.includes("use server"))) {
+                  return;
+                }
+                if (warning.code === "SOURCEMAP_ERROR" && warning.message.includes("resolve original location") && warning.pos === 0) {
+                  return;
+                }
+                if (viteUserConfig.build?.rollupOptions?.onwarn) {
+                  viteUserConfig.build.rollupOptions.onwarn(
+                    warning,
+                    defaultHandler
+                  );
+                } else {
+                  defaultHandler(warning);
+                }
+              }
+            }
           }
         };
       },
@@ -6495,15 +6362,20 @@ ${errors.map((x) => ` - ${x}`).join("\n")}
         }
       }
     },
-    virtualRouteModulesPlugin({
-      environments: {
-        client: ["client", "ssr"],
-        server: ["rsc"]
-      },
-      isRouteModule,
-      isRootRouteModule,
-      transformToJs
-    }),
+    {
+      name: "react-router/rsc/virtual-route-modules",
+      transform(code, id) {
+        if (!routeIdByFile) return;
+        return transformVirtualRouteModules({
+          code,
+          id,
+          viteCommand,
+          routeIdByFile,
+          rootRouteFile,
+          viteEnvironment: this.environment
+        });
+      }
+    },
     {
       name: "react-router/rsc/virtual-basename",
       resolveId(id) {
@@ -6545,129 +6417,121 @@ ${errors.map((x) => ` - ${x}`).join("\n")}
       async load(id) {
         if (id !== virtual2.injectHmrRuntime.resolvedId) return;
         return viteCommand === "serve" ? [
-          `if (import.meta.hot) {
-  import.meta.hot.accept();
-  import.meta.hot.on('rsc:update', () => {
-    __reactRouterDataRouter.revalidate()
-  })
-}`
+          `import RefreshRuntime from "${virtual2.hmrRuntime.id}"`,
+          "RefreshRuntime.injectIntoGlobalHook(window)",
+          "window.$RefreshReg$ = () => {}",
+          "window.$RefreshSig$ = () => (type) => type",
+          "window.__vite_plugin_react_preamble_installed__ = true"
         ].join("\n") : "";
       }
     },
-    // {
-    //   name: "react-router/rsc/hmr/runtime",
-    //   enforce: "pre",
-    //   resolveId(id) {
-    //     if (id === virtual.hmrRuntime.id) return virtual.hmrRuntime.resolvedId;
-    //   },
-    //   async load(id) {
-    //     if (id !== virtual.hmrRuntime.resolvedId) return;
-    //     const reactRefreshDir = path.dirname(
-    //       require.resolve("react-refresh/package.json"),
-    //     );
-    //     const reactRefreshRuntimePath = join(
-    //       reactRefreshDir,
-    //       "cjs/react-refresh-runtime.development.js",
-    //     );
-    //     return [
-    //       "const exports = {}",
-    //       await readFile(reactRefreshRuntimePath, "utf8"),
-    //       await readFile(
-    //         require.resolve("./static/rsc-refresh-utils.mjs"),
-    //         "utf8",
-    //       ),
-    //       "export default exports",
-    //     ].join("\n");
-    //   },
-    // },
-    // {
-    //   name: "react-router/rsc/hmr/react-refresh",
-    //   async transform(code, id, options) {
-    //     if (viteCommand !== "serve") return;
-    //     if (id.includes("/node_modules/")) return;
-    //     const filepath = id.split("?")[0];
-    //     const extensionsRE = /\.(jsx?|tsx?|mdx?)$/;
-    //     if (!extensionsRE.test(filepath)) return;
-    //     const devRuntime = "react/jsx-dev-runtime";
-    //     const ssr = options?.ssr === true;
-    //     const isJSX = filepath.endsWith("x");
-    //     const useFastRefresh = !ssr && (isJSX || code.includes(devRuntime));
-    //     if (!useFastRefresh) return;
-    //     // if (isVirtualClientRouteModuleId(id)) {
-    //     //   const routeId = routeIdByFile?.get(filepath);
-    //     //   return { code: addRefreshWrapper({ routeId, code, id }) };
-    //     // }
-    //     const result = await babel.transformAsync(code, {
-    //       babelrc: false,
-    //       configFile: false,
-    //       filename: id,
-    //       sourceFileName: filepath,
-    //       parserOpts: {
-    //         sourceType: "module",
-    //         allowAwaitOutsideFunction: true,
-    //       },
-    //       plugins: [[require("react-refresh/babel"), { skipEnvCheck: true }]],
-    //       sourceMaps: true,
-    //     });
-    //     if (result === null) return;
-    //     code = result.code!;
-    //     const refreshContentRE = /\$Refresh(?:Reg|Sig)\$\(/;
-    //     if (refreshContentRE.test(code)) {
-    //       code = addRefreshWrapper({ code, id });
-    //     }
-    //     return { code, map: result.map };
-    //   },
-    // },
-    // {
-    //   name: "react-router/rsc/hmr/updates",
-    //   async hotUpdate(this, { server, file, modules }) {
-    //     if (this.environment.name !== "rsc") return;
-    //     const clientModules =
-    //       server.environments.client.moduleGraph.getModulesByFile(file);
-    //     const vite = await import("vite");
-    //     const isServerOnlyChange =
-    //       !clientModules ||
-    //       clientModules.size === 0 ||
-    //       // Handle CSS injected from server-first routes (with ?direct query
-    //       // string) since the client graph has a reference to the CSS
-    //       (vite.isCSSRequest(file) &&
-    //         Array.from(clientModules).some((mod) =>
-    //           mod.id?.includes("?direct"),
-    //         ));
-    //     for (const mod of getModulesWithImporters(modules)) {
-    //       if (!mod.file) continue;
-    //       const normalizedPath = path.normalize(mod.file);
-    //       const routeId = routeIdByFile?.get(normalizedPath);
-    //       if (routeId !== undefined) {
-    //         const routeSource = await readFile(normalizedPath, "utf8");
-    //         const virtualRouteModuleCode = (
-    //           await server.environments.rsc.pluginContainer.transform(
-    //             routeSource,
-    //             `${normalizedPath}?route-module`,
-    //           )
-    //         ).code;
-    //         const { staticExports } = parseRouteExports(virtualRouteModuleCode);
-    //         const hasAction = staticExports.includes("action");
-    //         const hasComponent = staticExports.includes("default");
-    //         const hasErrorBoundary = staticExports.includes("ErrorBoundary");
-    //         const hasLoader = staticExports.includes("loader");
-    //         server.hot.send({
-    //           type: "custom",
-    //           event: "react-router:hmr",
-    //           data: {
-    //             routeId,
-    //             isServerOnlyChange,
-    //             hasAction,
-    //             hasComponent,
-    //             hasErrorBoundary,
-    //             hasLoader,
-    //           },
-    //         });
-    //       }
-    //     }
-    //     return modules;
-    //   },
-    // },
+    {
+      name: "react-router/rsc/hmr/runtime",
+      enforce: "pre",
+      resolveId(id) {
+        if (id === virtual2.hmrRuntime.id) return virtual2.hmrRuntime.resolvedId;
+      },
+      async load(id) {
+        if (id !== virtual2.hmrRuntime.resolvedId) return;
+        const reactRefreshDir = import_pathe6.default.dirname(
+          require.resolve("react-refresh/package.json")
+        );
+        const reactRefreshRuntimePath = (0, import_pathe6.join)(
+          reactRefreshDir,
+          "cjs/react-refresh-runtime.development.js"
+        );
+        return [
+          "const exports = {}",
+          await (0, import_promises4.readFile)(reactRefreshRuntimePath, "utf8"),
+          await (0, import_promises4.readFile)(
+            require.resolve("./static/rsc-refresh-utils.mjs"),
+            "utf8"
+          ),
+          "export default exports"
+        ].join("\n");
+      }
+    },
+    {
+      name: "react-router/rsc/hmr/react-refresh",
+      async transform(code, id, options) {
+        if (viteCommand !== "serve") return;
+        if (id.includes("/node_modules/")) return;
+        const filepath = id.split("?")[0];
+        const extensionsRE = /\.(jsx?|tsx?|mdx?)$/;
+        if (!extensionsRE.test(filepath)) return;
+        const devRuntime = "react/jsx-dev-runtime";
+        const ssr = options?.ssr === true;
+        const isJSX = filepath.endsWith("x");
+        const useFastRefresh = !ssr && (isJSX || code.includes(devRuntime));
+        if (!useFastRefresh) return;
+        if (isVirtualClientRouteModuleId(id)) {
+          const routeId = routeIdByFile?.get(filepath);
+          return { code: addRefreshWrapper2({ routeId, code, id }) };
+        }
+        const result = await babel2.transformAsync(code, {
+          babelrc: false,
+          configFile: false,
+          filename: id,
+          sourceFileName: filepath,
+          parserOpts: {
+            sourceType: "module",
+            allowAwaitOutsideFunction: true
+          },
+          plugins: [[require("react-refresh/babel"), { skipEnvCheck: true }]],
+          sourceMaps: true
+        });
+        if (result === null) return;
+        code = result.code;
+        const refreshContentRE = /\$Refresh(?:Reg|Sig)\$\(/;
+        if (refreshContentRE.test(code)) {
+          code = addRefreshWrapper2({ code, id });
+        }
+        return { code, map: result.map };
+      }
+    },
+    {
+      name: "react-router/rsc/hmr/updates",
+      async hotUpdate({ server, file, modules }) {
+        if (this.environment.name !== "rsc") return;
+        const clientModules = server.environments.client.moduleGraph.getModulesByFile(file);
+        const vite2 = await import("vite");
+        const isServerOnlyChange = !clientModules || clientModules.size === 0 || // Handle CSS injected from server-first routes (with ?direct query
+        // string) since the client graph has a reference to the CSS
+        vite2.isCSSRequest(file) && Array.from(clientModules).some(
+          (mod) => mod.id?.includes("?direct")
+        );
+        for (const mod of getModulesWithImporters(modules)) {
+          if (!mod.file) continue;
+          const normalizedPath = import_pathe6.default.normalize(mod.file);
+          const routeId = routeIdByFile?.get(normalizedPath);
+          if (routeId !== void 0) {
+            const routeSource = await (0, import_promises4.readFile)(normalizedPath, "utf8");
+            const virtualRouteModuleCode = (await server.environments.rsc.pluginContainer.transform(
+              routeSource,
+              `${normalizedPath}?route-module`
+            )).code;
+            const { staticExports } = parseRouteExports(virtualRouteModuleCode);
+            const hasAction = staticExports.includes("action");
+            const hasComponent = staticExports.includes("default");
+            const hasErrorBoundary = staticExports.includes("ErrorBoundary");
+            const hasLoader = staticExports.includes("loader");
+            server.hot.send({
+              type: "custom",
+              event: "react-router:hmr",
+              data: {
+                routeId,
+                isServerOnlyChange,
+                hasAction,
+                hasComponent,
+                hasErrorBoundary,
+                hasLoader
+              }
+            });
+          }
+        }
+        return modules;
+      }
+    },
     {
       name: "react-router/rsc/virtual-react-router-serve-config",
       resolveId(id) {
@@ -6791,7 +6655,7 @@ var virtual2 = {
   routeConfig: create("unstable_rsc/routes"),
   routeDiscovery: create("unstable_rsc/route-discovery"),
   injectHmrRuntime: create("unstable_rsc/inject-hmr-runtime"),
-  // hmrRuntime: create("unstable_rsc/runtime"),
+  hmrRuntime: create("unstable_rsc/runtime"),
   basename: create("unstable_rsc/basename"),
   reactRouterServeConfig: create("unstable_rsc/react-router-serve-config")
 };
@@ -6808,6 +6672,65 @@ function invalidateVirtualModules2(viteDevServer) {
 function getRootDirectory(viteUserConfig) {
   return viteUserConfig.root ?? process.env.REACT_ROUTER_ROOT ?? process.cwd();
 }
+function getModulesWithImporters(modules) {
+  const visited = /* @__PURE__ */ new Set();
+  const result = /* @__PURE__ */ new Set();
+  function walk(module2) {
+    if (visited.has(module2)) return;
+    visited.add(module2);
+    result.add(module2);
+    for (const importer of module2.importers) {
+      walk(importer);
+    }
+  }
+  for (const module2 of modules) {
+    walk(module2);
+  }
+  return result;
+}
+function addRefreshWrapper2({
+  routeId,
+  code,
+  id
+}) {
+  const acceptExports = routeId !== void 0 ? CLIENT_NON_COMPONENT_EXPORTS2 : [];
+  return REACT_REFRESH_HEADER2.replaceAll("__SOURCE__", JSON.stringify(id)) + code + REACT_REFRESH_FOOTER2.replaceAll("__SOURCE__", JSON.stringify(id)).replaceAll("__ACCEPT_EXPORTS__", JSON.stringify(acceptExports)).replaceAll("__ROUTE_ID__", JSON.stringify(routeId));
+}
+var REACT_REFRESH_HEADER2 = `
+import RefreshRuntime from "${virtual2.hmrRuntime.id}";
+
+const inWebWorker = typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope;
+let prevRefreshReg;
+let prevRefreshSig;
+
+if (import.meta.hot && !inWebWorker) {
+  if (!window.__vite_plugin_react_preamble_installed__) {
+    throw new Error(
+      "React Router Vite plugin can't detect preamble. Something is wrong."
+    );
+  }
+
+  prevRefreshReg = window.$RefreshReg$;
+  prevRefreshSig = window.$RefreshSig$;
+  window.$RefreshReg$ = (type, id) => {
+    RefreshRuntime.register(type, __SOURCE__ + " " + id)
+  };
+  window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;
+}`.replaceAll("\n", "");
+var REACT_REFRESH_FOOTER2 = `
+if (import.meta.hot && !inWebWorker) {
+  window.$RefreshReg$ = prevRefreshReg;
+  window.$RefreshSig$ = prevRefreshSig;
+  RefreshRuntime.__hmr_import(import.meta.url).then((currentExports) => {
+    RefreshRuntime.registerExportsForReactRefresh(__SOURCE__, currentExports);
+    import.meta.hot.accept((nextExports) => {
+      if (!nextExports) return;
+      __ROUTE_ID__ && window.__reactRouterRouteModuleUpdates.set(__ROUTE_ID__, nextExports);
+      const invalidateMessage = RefreshRuntime.validateRefreshBoundaryAndEnqueueUpdate(currentExports, nextExports, __ACCEPT_EXPORTS__);
+      if (invalidateMessage) import.meta.hot.invalidate(invalidateMessage);
+    });
+  });
+}`;
 var getClientBuildDirectory2 = (reactRouterConfig) => import_pathe6.default.join(reactRouterConfig.buildDirectory, "client");
 function getPrerenderConcurrencyConfig2(reactRouterConfig) {
   let concurrency = 1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-router/dev",
-  "version": "0.0.0-experimental-58b44aa83",
+  "version": "0.0.0-experimental-689d76079",
   "description": "Dev tools and CLI for React Router",
   "homepage": "https://reactrouter.com",
   "bugs": {
@@ -92,7 +92,7 @@
     "tinyglobby": "^0.2.14",
     "valibot": "^1.2.0",
     "vite-node": "^3.2.2",
-    "@react-router/node": "0.0.0-experimental-58b44aa83"
+    "@react-router/node": "0.0.0-experimental-689d76079"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.5",
@@ -116,17 +116,17 @@
     "vite": "^6.3.0",
     "wireit": "0.14.9",
     "wrangler": "^4.23.0",
-    "@react-router/serve": "0.0.0-experimental-58b44aa83",
-    "react-router": "^0.0.0-experimental-58b44aa83"
+    "react-router": "^0.0.0-experimental-689d76079",
+    "@react-router/serve": "0.0.0-experimental-689d76079"
   },
   "peerDependencies": {
     "@vitejs/plugin-rsc": "~0.5.21",
     "react-server-dom-webpack": "^19.2.3",
-    "typescript": "^5.1.0",
+    "typescript": "^5.1.0 || ^6.0.0",
     "vite": "^5.1.0 || ^6.0.0 || ^7.0.0 || ^8.0.0",
     "wrangler": "^3.28.2 || ^4.0.0",
-    "@react-router/serve": "^0.0.0-experimental-58b44aa83",
-    "react-router": "^0.0.0-experimental-58b44aa83"
+    "@react-router/serve": "^0.0.0-experimental-689d76079",
+    "react-router": "^0.0.0-experimental-689d76079"
   },
   "peerDependenciesMeta": {
     "@vitejs/plugin-rsc": {