Add RSC Framework Mode HMR/HDR support (#14100)

Author: markdalgleish

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

@@ -3,15 +3,27 @@ import path from "node:path";
 import type { Page, PlaywrightWorkerOptions } from "@playwright/test";
 import { expect } from "@playwright/test";
 
-import type { Files } from "./helpers/vite.js";
+import type { Files, TemplateName } from "./helpers/vite.js";
 import {
   test,
   createEditor,
   EXPRESS_SERVER,
   viteConfig,
   viteMajorTemplates,
+  reactRouterConfig,
 } from "./helpers/vite.js";
 
+const templates = [
+  ...viteMajorTemplates,
+  {
+    templateName: "rsc-vite-framework",
+    templateDisplayName: "RSC Framework Mode",
+  },
+] as const satisfies ReadonlyArray<{
+  templateName: TemplateName;
+  templateDisplayName: string;
+}>;
+
 const indexRoute = `
   // imports
   import { useState, useEffect } from "react";
@@ -40,28 +52,36 @@ const indexRoute = `
 `;
 
 test.describe("Vite HMR & HDR", () => {
-  viteMajorTemplates.forEach(({ templateName, templateDisplayName }) => {
+  templates.forEach(({ templateName, templateDisplayName }) => {
     test.describe(templateDisplayName, () => {
       test("vite dev", async ({ page, browserName, dev }) => {
         let files: Files = async ({ port }) => ({
-          "vite.config.js": await viteConfig.basic({ port }),
+          "vite.config.js": await viteConfig.basic({ port, templateName }),
+          "react-router.config.ts": reactRouterConfig({
+            viteEnvironmentApi: templateName.includes("rsc"),
+          }),
           "app/routes/_index.tsx": indexRoute,
         });
         let { cwd, port } = await dev(files, templateName);
-        await workflow({ page, browserName, cwd, port });
+        await workflow({ templateName, page, browserName, cwd, port });
       });
 
       test("express", async ({ page, browserName, customDev }) => {
+        test.skip(templateName.includes("rsc"), "RSC is not supported");
         let files: Files = async ({ port }) => ({
-          "vite.config.js": await viteConfig.basic({ port }),
+          "vite.config.js": await viteConfig.basic({ port, templateName }),
+          "react-router.config.ts": reactRouterConfig({
+            viteEnvironmentApi: templateName.includes("rsc"),
+          }),
           "server.mjs": EXPRESS_SERVER({ port }),
           "app/routes/_index.tsx": indexRoute,
         });
         let { cwd, port } = await customDev(files, templateName);
-        await workflow({ page, browserName, cwd, port });
+        await workflow({ templateName, page, browserName, cwd, port });
       });
 
       test("mdx", async ({ page, dev }) => {
+        test.skip(templateName.includes("rsc"), "RSC is not supported");
         let files: Files = async ({ port }) => ({
           "vite.config.ts": `
             import { defineConfig } from "vite";
@@ -120,11 +140,13 @@ test.describe("Vite HMR & HDR", () => {
 });
 
 async function workflow({
+  templateName,
   page,
   browserName,
   cwd,
   port,
 }: {
+  templateName: TemplateName;
   page: Page;
   browserName: PlaywrightWorkerOptions["browserName"];
   cwd: string;
@@ -145,7 +167,12 @@ async function workflow({
 
   // setup: browser state
   let hmrStatus = page.locator("#index [data-hmr]");
-  await expect(page).toHaveTitle("HMR updated title: 0");
+
+  // RSC doesn't support meta export?
+  if (!templateName.includes("rsc")) {
+    await expect(page).toHaveTitle("HMR updated title: 0");
+  }
+
   await expect(hmrStatus).toHaveText("HMR updated: 0");
   let input = page.locator("#index input");
   await expect(input).toBeVisible();
@@ -159,7 +186,12 @@ async function workflow({
       .replace("HMR updated: 0", "HMR updated: 1"),
   );
   await page.waitForLoadState("networkidle");
-  await expect(page).toHaveTitle("HMR updated title: 1");
+
+  // RSC doesn't support meta export?
+  if (!templateName.includes("rsc")) {
+    await expect(page).toHaveTitle("HMR updated title: 1");
+  }
+
   await expect(hmrStatus).toHaveText("HMR updated: 1");
   await expect(input).toHaveValue("stateful");
   expect(page.errors).toEqual([]);

integration/vite-hmr-hdr-test.ts

@@ -1,3 +1,5 @@
+import "virtual:react-router/unstable_rsc/inject-hmr-runtime";
+
 import { startTransition, StrictMode } from "react";
 import { hydrateRoot } from "react-dom/client";
 import {

packages/react-router-dev/config/default-rsc-entries/entry.client.tsx

@@ -78,7 +78,6 @@
     "@babel/types": "^7.27.7",
     "@npmcli/package-json": "^4.0.1",
     "@react-router/node": "workspace:*",
-    "@vitejs/plugin-react": "^4.5.2",
     "@vitejs/plugin-rsc": "0.4.11",
     "arg": "^5.0.1",
     "babel-dead-code-elimination": "^1.0.6",

packages/react-router-dev/package.json

@@ -16,7 +16,11 @@ const entry = [
   "vite/cloudflare.ts",
 ];
 
-const external = ["./static/refresh-utils.mjs", /\.json$/];
+const external = [
+  "./static/refresh-utils.mjs",
+  "./static/rsc-refresh-utils.mjs",
+  /\.json$/,
+];
 
 export default defineConfig([
   {
@@ -39,6 +43,16 @@ export default defineConfig([
             "dist/static/refresh-utils.mjs",
           );
 
+          await fsp.mkdir("dist/static", { recursive: true });
+          await fsp.copyFile(
+            "vite/static/refresh-utils.mjs",
+            "dist/static/refresh-utils.mjs",
+          );
+          await fsp.copyFile(
+            "vite/static/rsc-refresh-utils.mjs",
+            "dist/static/rsc-refresh-utils.mjs",
+          );
+
           await fsp.mkdir("dist/config/defaults", { recursive: true });
           const files = await fsp.readdir("config/defaults");
           for (const file of files) {