test(rsc): migrate Vite fixtures to @hiogawa/vite-rsc (#13819)

chore: enable vite tests on windows

---------

Co-authored-by: Jacob Ebey <[email protected]>

Author: markdalgleish

integration/helpers/rsc-vite/.gitignore

@@ -0,0 +1,2 @@
+dist
+node_modules

integration/helpers/rsc-vite/.wrangler/deploy/config.json

@@ -1,29 +1,24 @@
 {
-  "name": "@playground/rsc-vite",
+  "name": "integration-rsc-vite",
   "private": true,
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
-    "start": "node server.js",
+    "build": "vite build --app",
+    "start": "cross-env NODE_ENV=production node server.js",
     "typecheck": "tsc"
   },
   "devDependencies": {
-    "@biomejs/biome": "^1.9.4",
-    "@cloudflare/vite-plugin": "0.1.7",
-    "@cloudflare/workers-types": "^4.20250224.0",
-    "@jacob-ebey/vite-react-server-dom": "0.0.12",
+    "@hiogawa/vite-rsc": "0.4.1",
     "@types/express": "^5.0.0",
     "@types/node": "^22.13.1",
-    "@types/react": "^19.0.8",
-    "@types/react-dom": "^19.0.3",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react": "^4.5.2",
     "typescript": "^5.1.6",
-    "vite": "^6.2.0",
-    "vite-tsconfig-paths": "^5.1.4",
-    "wrangler": "^3.111.0"
+    "vite": "^6.2.0"
   },
   "dependencies": {
-    "@jacob-ebey/react-server-dom-vite": "19.0.0-experimental.14",
     "@mjackson/node-fetch-server": "0.6.1",
     "compression": "^1.8.0",
     "express": "^4.21.2",

integration/helpers/rsc-vite/framework/references.browser.ts

@@ -3,8 +3,7 @@ import { createRequestListener } from "@mjackson/node-fetch-server";
 import compression from "compression";
 import express from "express";
 
-import ssr from "./dist/ssr/entry.ssr.js";
-import server from "./dist/server/entry.rsc.js";
+import rscRequestHandler from "./dist/rsc/index.js";
 
 const app = express();
 
@@ -16,17 +15,7 @@ app.get("/.well-known/appspecific/com.chrome.devtools.json", (req, res) => {
   res.end();
 });
 
-app.use(
-  createRequestListener((request) => {
-    return ssr.fetch(request, {
-      SERVER: {
-        fetch(request) {
-          return server.fetch(request);
-        },
-      },
-    });
-  })
-);
+app.use(createRequestListener(rscRequestHandler));
 
 const { values } = parseArgs({
   options: { p: { type: "string", default: "3000" } },

integration/helpers/rsc-vite/framework/references.rsc.ts

@@ -3,37 +3,34 @@ import { hydrateRoot } from "react-dom/client";
 import {
   createFromReadableStream,
   encodeReply,
-  // @ts-expect-error - no types
-} from "@jacob-ebey/react-server-dom-vite/client";
-// @ts-expect-error - no types yet
-import { manifest } from "virtual:react-manifest";
-
+  setServerCallback,
+} from "@hiogawa/vite-rsc/browser";
+import type { unstable_DecodeServerResponseFunction as DecodeServerResponseFunction } from "react-router";
 import {
-  type unstable_DecodeServerResponseFunction as DecodeServerResponseFunction,
-  type unstable_EncodeActionFunction as EncodeActionFunction,
   unstable_createCallServer as createCallServer,
   unstable_getServerStream as getServerStream,
   unstable_RSCHydratedRouter as RSCHydratedRouter,
 } from "react-router";
-import { type unstable_ServerPayload as ServerPayload } from "react-router/rsc";
-
-const encodeAction: EncodeActionFunction = (args: unknown[]) =>
-  encodeReply(args);
+import type { unstable_ServerPayload as ServerPayload } from "react-router/rsc";
 
-const decode: DecodeServerResponseFunction = (body) =>
-  createFromReadableStream(body, manifest, { callServer });
+const decode: DecodeServerResponseFunction = (
+  body: ReadableStream<Uint8Array>
+) => createFromReadableStream(body);
 
-const callServer = createCallServer({ decode, encodeAction });
-
-createFromReadableStream(getServerStream(), manifest, { callServer }).then(
-  (payload: ServerPayload) => {
-    startTransition(() => {
-      hydrateRoot(
-        document,
-        <StrictMode>
-          <RSCHydratedRouter decode={decode} payload={payload} />
-        </StrictMode>
-      );
-    });
-  }
+setServerCallback(
+  createCallServer({
+    decode,
+    encodeAction: (args) => encodeReply(args),
+  })
 );
+
+createFromReadableStream<ServerPayload>(getServerStream()).then((payload) => {
+  startTransition(() => {
+    hydrateRoot(
+      document,
+      <StrictMode>
+        <RSCHydratedRouter decode={decode} payload={payload as any} />
+      </StrictMode>
+    );
+  });
+});

integration/helpers/rsc-vite/framework/references.ssr.ts

@@ -1,38 +1,46 @@
-/// <reference types="@cloudflare/workers-types" />
+import {
+  decodeAction,
+  decodeReply,
+  loadServerAction,
+  renderToReadableStream,
+} from "@hiogawa/vite-rsc/rsc";
 import {
   type unstable_DecodeCallServerFunction as DecodeCallServerFunction,
+  type unstable_DecodeFormActionFunction as DecodeFormActionFunction,
   unstable_matchRSCServerRequest as matchRSCServerRequest,
 } from "react-router/rsc";
-// @ts-expect-error - no types yet
-import { manifest } from "virtual:react-manifest";
 
-import { decodeReply, renderToReadableStream } from "../framework/server";
 import { routes } from "./routes";
 
 const decodeCallServer: DecodeCallServerFunction = async (actionId, reply) => {
   const args = await decodeReply(reply);
-  const reference = manifest.resolveServerReference(actionId);
-  await reference.preload();
-  const action = reference.get() as (...args: unknown[]) => Promise<unknown>;
+  const action = await loadServerAction(actionId);
   return action.bind(null, ...args);
 };
 
-export default {
-  fetch(request, env) {
-    return matchRSCServerRequest({
-      decodeCallServer,
-      request,
-      routes,
-      generateResponse(match) {
-        if (match instanceof Response) {
-          return match;
-        }
+const decodeFormAction: DecodeFormActionFunction = async (formData) => {
+  return await decodeAction(formData);
+};
+
+export async function callServer(request: Request) {
+  return await matchRSCServerRequest({
+    decodeCallServer,
+    decodeFormAction,
+    request,
+    routes,
+    generateResponse(match) {
+      return new Response(renderToReadableStream(match.payload), {
+        status: match.statusCode,
+        headers: match.headers,
+      });
+    },
+  });
+}
 
-        return new Response(renderToReadableStream(match.payload), {
-          status: match.statusCode,
-          headers: match.headers,
-        });
-      },
-    });
-  },
-} satisfies ExportedHandler;
+export default async function handler(request: Request) {
+  const ssr = await import.meta.viteRsc.loadSsrModule<
+    // eslint-disable-next-line @typescript-eslint/consistent-type-imports
+    typeof import("./entry.ssr")
+  >("index");
+  return ssr.default(request, callServer);
+}

integration/helpers/rsc-vite/framework/server.ts

@@ -1,43 +1,28 @@
-/// <reference types="@cloudflare/workers-types" />
-
-// @ts-expect-error
-import RSD from "@jacob-ebey/react-server-dom-vite/client";
+import bootstrapScriptContent from "virtual:vite-rsc/bootstrap-script-content";
+import { createFromReadableStream } from "@hiogawa/vite-rsc/ssr";
 // @ts-expect-error
-import RDS from "react-dom/server.edge";
-// @ts-expect-error
-import { bootstrapModules, manifest } from "virtual:react-manifest";
-
+import * as ReactDomServer from "react-dom/server.edge";
 import {
-  unstable_routeRSCServerRequest as routeRSCServerRequest,
   unstable_RSCStaticRouter as RSCStaticRouter,
+  unstable_routeRSCServerRequest as routeRSCServerRequest,
 } from "react-router";
 
-type CloudflareEnv = {
-  ASSETS: Fetcher;
-  SERVER: Fetcher;
-};
-
-export default {
-  async fetch(request, { SERVER }) {
-    const callServer = async (request: Request) => await SERVER.fetch(request);
-    try {
-      return await routeRSCServerRequest({
-        request,
-        callServer,
-        decode: (body) => RSD.createFromReadableStream(body, manifest),
-        async renderHTML(getPayload) {
-          return await RDS.renderToReadableStream(
-            <RSCStaticRouter getPayload={getPayload} />,
-            {
-              bootstrapModules,
-              signal: request.signal,
-            }
-          );
-        },
-      });
-    } catch (reason) {
-      console.error(reason);
-      return new Response("Internal Server Error", { status: 500 });
-    }
-  },
-} satisfies ExportedHandler<CloudflareEnv>;
+export default async function handler(
+  request: Request,
+  callServer: (request: Request) => Promise<Response>
+) {
+  return routeRSCServerRequest({
+    request,
+    callServer,
+    decode: (body) => createFromReadableStream(body),
+    renderHTML(getPayload) {
+      return ReactDomServer.renderToReadableStream(
+        <RSCStaticRouter getPayload={getPayload} />,
+        {
+          bootstrapScriptContent,
+          signal: request.signal,
+        }
+      );
+    },
+  });
+}

integration/helpers/rsc-vite/package.json

@@ -1,3 +1,3 @@
-export default function ServerComponent() {
+export default function HomeRoute() {
   return <h2>Home</h2>;
 }

integration/helpers/rsc-vite/server.js

@@ -17,6 +17,6 @@ export function Layout({ children }: { children: React.ReactNode }) {
   );
 }
 
-export default function ServerComponent() {
+export default function RootRoute() {
   return <Outlet />;
 }

integration/helpers/rsc-vite/src/entry.browser.tsx

@@ -1,7 +1,17 @@
 {
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.node.json" },
-    { "path": "./tsconfig.client.json" }
-  ]
+  "compilerOptions": {
+    "allowImportingTsExtensions": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "skipLibCheck": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "moduleResolution": "Bundler",
+    "module": "ESNext",
+    "target": "ESNext",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "types": ["vite/client", "@hiogawa/vite-rsc/types"],
+    "jsx": "react-jsx"
+  }
 }