support switching from server-first to client route

Author: markdalgleish

integration/vite-hmr-hdr-rsc-test.ts

@@ -379,5 +379,51 @@ test.describe("Vite HMR & HDR (RSC)", () => {
     );
     await expect(input).toHaveValue("stateful");
     expect(page.errors).toEqual([]);
+
+    // switch from server-first to client route
+    await edit("app/routes/hmr/route.tsx", (contents) =>
+      contents
+        .replace(
+          "export function ServerComponent",
+          "export default function ClientComponent",
+        )
+        .replace("HMR updated: 3", "Client Route HMR: 0"),
+    );
+    await page.waitForLoadState("networkidle");
+    await expect(hmrStatus).toHaveText("Client Route HMR: 0");
+    // state is not preserved when switching from server to client route
+    await expect(input).toHaveValue("");
+    await input.type("client stateful");
+    expect(page.errors).toEqual([]);
+    await edit("app/routes/hmr/route.tsx", (contents) =>
+      contents.replace("Client Route HMR: 0", "Client Route HMR: 1"),
+    );
+    await page.waitForLoadState("networkidle");
+    await expect(hmrStatus).toHaveText("Client Route HMR: 1");
+    await expect(input).toHaveValue("client stateful");
+    expect(page.errors).toEqual([]);
+
+    // switch from client route back to server-first route
+    await edit("app/routes/hmr/route.tsx", (contents) =>
+      contents
+        .replace(
+          "export default function ClientComponent",
+          "export function ServerComponent",
+        )
+        .replace("Client Route HMR: 1", "Server Route HMR: 0"),
+    );
+    await page.waitForLoadState("networkidle");
+    await expect(hmrStatus).toHaveText("Server Route HMR: 0");
+    // State is not preserved when switching from client to server route
+    await expect(input).toHaveValue("");
+    await input.type("server stateful");
+    expect(page.errors).toEqual([]);
+    await edit("app/routes/hmr/route.tsx", (contents) =>
+      contents.replace("Server Route HMR: 0", "Server Route HMR: 1"),
+    );
+    await page.waitForLoadState("networkidle");
+    await expect(hmrStatus).toHaveText("Server Route HMR: 1");
+    await expect(input).toHaveValue("server stateful");
+    expect(page.errors).toEqual([]);
   });
 });

packages/react-router-dev/vite/rsc/plugin.ts

@@ -158,7 +158,7 @@ export function reactRouterRSCVitePlugin(): Vite.PluginOption[] {
     {
       name: "react-router/rsc/virtual-route-modules",
       transform(code, id) {
-        return transformVirtualRouteModules({ code, id });
+        return transformVirtualRouteModules({ code, id, viteCommand });
       },
     },
     {

packages/react-router-dev/vite/rsc/virtual-route-modules.ts

@@ -1,3 +1,4 @@
+import type { ConfigEnv } from "vite";
 import * as babel from "../babel";
 import { parse as esModuleLexer } from "es-module-lexer";
 import { removeExports } from "../remove-exports";
@@ -44,38 +45,45 @@ function isClientRouteExport(name: string): name is ClientRouteExport {
   return CLIENT_ROUTE_EXPORTS_SET.has(name as ClientRouteExport);
 }
 
+type ViteCommand = ConfigEnv["command"];
+
 export function transformVirtualRouteModules({
   id,
   code,
+  viteCommand,
 }: {
   id: string;
   code: string;
+  viteCommand: ViteCommand;
 }) {
   if (!id.includes("route-module")) {
     return;
   }
 
   if (isVirtualRouteModuleId(id)) {
-    return createVirtualRouteModuleCode({ id, code });
+    return createVirtualRouteModuleCode({ id, code, viteCommand });
   }
 
   if (isVirtualServerRouteModuleId(id)) {
     return createVirtualServerRouteModuleCode({ id, code });
   }
 
   if (isVirtualClientRouteModuleId(id)) {
-    return createVirtualClientRouteModuleCode({ id, code });
+    return createVirtualClientRouteModuleCode({ id, code, viteCommand });
   }
 }
 
 async function createVirtualRouteModuleCode({
   id,
   code: routeSource,
+  viteCommand,
 }: {
   id: string;
   code: string;
+  viteCommand: ViteCommand;
 }) {
-  const { staticExports, isServerFirstRoute } = parseRouteExports(routeSource);
+  const { staticExports, isServerFirstRoute, hasClientExports } =
+    parseRouteExports(routeSource);
 
   const clientModuleId = getVirtualClientModuleId(id);
   const serverModuleId = getVirtualServerModuleId(id);
@@ -91,6 +99,9 @@ async function createVirtualRouteModuleCode({
         code += `export { ${staticExport} } from "${serverModuleId}";\n`;
       }
     }
+    if (viteCommand === "serve" && !hasClientExports) {
+      code += `export { __ensureClientRouteModuleForHmr } from "${clientModuleId}";\n`;
+    }
   } else {
     for (const staticExport of staticExports) {
       if (isClientRouteExport(staticExport)) {
@@ -142,11 +153,14 @@ function createVirtualServerRouteModuleCode({
 function createVirtualClientRouteModuleCode({
   id,
   code: routeSource,
+  viteCommand,
 }: {
   id: string;
   code: string;
+  viteCommand: ViteCommand;
 }) {
-  const { staticExports, isServerFirstRoute } = parseRouteExports(routeSource);
+  const { staticExports, isServerFirstRoute, hasClientExports } =
+    parseRouteExports(routeSource);
   const exportsToRemove = isServerFirstRoute
     ? [...SERVER_ONLY_ROUTE_EXPORTS, ...COMPONENT_EXPORTS]
     : SERVER_ONLY_ROUTE_EXPORTS;
@@ -168,17 +182,25 @@ function createVirtualClientRouteModuleCode({
     generatorResult.code += `}\n`;
   }
 
+  if (viteCommand === "serve" && isServerFirstRoute && !hasClientExports) {
+    generatorResult.code += `\nexport const __ensureClientRouteModuleForHmr = true;`;
+  }
+
   return generatorResult;
 }
 
 export function parseRouteExports(code: string) {
   const [, exportSpecifiers] = esModuleLexer(code);
   const staticExports = exportSpecifiers.map(({ n: name }) => name);
+  const isServerFirstRoute = staticExports.some(
+    (staticExport) => staticExport === "ServerComponent",
+  );
   return {
     staticExports,
-    isServerFirstRoute: staticExports.some(
-      (staticExport) => staticExport === "ServerComponent",
-    ),
+    isServerFirstRoute,
+    hasClientExports: isServerFirstRoute
+      ? staticExports.some(isClientNonComponentExport)
+      : staticExports.some(isClientRouteExport),
   };
 }
 

packages/react-router/lib/rsc/server.rsc.ts

@@ -1110,6 +1110,14 @@ async function getRSCRouteMatch(
     pathname: match.pathname,
     pathnameBase: match.pathnameBase,
     shouldRevalidate: (match.route as any).shouldRevalidate,
+    // Add an unused client-only export (if present) so HMR can support
+    // switching from server-first to client-only routes during development
+    ...((match.route as any).__ensureClientRouteModuleForHmr
+      ? {
+          __ensureClientRouteModuleForHmr: (match.route as any)
+            .__ensureClientRouteModuleForHmr,
+        }
+      : {}),
   };
 }