but Edge puts it in some weird code editor markup:
//
// "LUNCH"
- expect(await app.getHtml()).toContain(LUNCH);
+ await page.getByText(LUNCH);
});
test("Form can hit an action", async ({ page }) => {
@@ -264,7 +264,7 @@ test.describe("useFetcher", () => {
// a but Edge puts it in some weird code editor markup:
//
// "LUNCH"
- expect(await app.getHtml()).toContain(CHEESESTEAK);
+ await page.getByText(CHEESESTEAK);
});
});
@@ -288,9 +288,7 @@ test.describe("useFetcher", () => {
await page.fill("#fetcher-input", "input value");
await app.clickElement("#fetcher-submit-json");
await page.waitForSelector(`#fetcher-idle`);
- expect(await app.getHtml()).toMatch(
- 'ACTION (application/json) input value"'
- );
+ await page.getByText('ACTION (application/json) input value"');
});
test("submit can hit an action with null json", async ({ page }) => {
@@ -299,7 +297,7 @@ test.describe("useFetcher", () => {
await app.clickElement("#fetcher-submit-json-null");
await new Promise((r) => setTimeout(r, 1000));
await page.waitForSelector(`#fetcher-idle`);
- expect(await app.getHtml()).toMatch('ACTION (application/json) null"');
+ await page.getByText('ACTION (application/json) null"');
});
test("submit can hit an action with text", async ({ page }) => {
@@ -308,9 +306,7 @@ test.describe("useFetcher", () => {
await page.fill("#fetcher-input", "input value");
await app.clickElement("#fetcher-submit-text");
await page.waitForSelector(`#fetcher-idle`);
- expect(await app.getHtml()).toMatch(
- 'ACTION (text/plain;charset=UTF-8) input value"'
- );
+ await page.getByText('ACTION (text/plain;charset=UTF-8) input value"');
});
test("submit can hit an action with empty text", async ({ page }) => {
@@ -319,7 +315,7 @@ test.describe("useFetcher", () => {
await app.clickElement("#fetcher-submit-text-empty");
await new Promise((r) => setTimeout(r, 1000));
await page.waitForSelector(`#fetcher-idle`);
- expect(await app.getHtml()).toMatch('ACTION (text/plain;charset=UTF-8) "');
+ await page.getByText('ACTION (text/plain;charset=UTF-8) "');
});
test("submit can hit an action only route", async ({ page }) => {
@@ -360,21 +356,19 @@ test.describe("useFetcher", () => {
let app = new PlaywrightFixture(appFixture, page);
await app.goto("/fetcher-echo", true);
- expect(await app.getHtml("pre")).toMatch(
- JSON.stringify(["idle/undefined"])
- );
+ await page.getByText(JSON.stringify(["idle/undefined"]));
await page.fill("#fetcher-input", "1");
await app.clickElement("#fetcher-load");
await page.waitForSelector("#fetcher-idle");
- expect(await app.getHtml("pre")).toMatch(
+ await page.getByText(
JSON.stringify(["idle/undefined", "loading/undefined", "idle/LOADER 1"])
);
await page.fill("#fetcher-input", "2");
await app.clickElement("#fetcher-load");
await page.waitForSelector("#fetcher-idle");
- expect(await app.getHtml("pre")).toMatch(
+ await page.getByText(
JSON.stringify([
"idle/undefined",
"loading/undefined",
@@ -391,14 +385,12 @@ test.describe("useFetcher", () => {
let app = new PlaywrightFixture(appFixture, page);
await app.goto("/fetcher-echo", true);
- expect(await app.getHtml("pre")).toMatch(
- JSON.stringify(["idle/undefined"])
- );
+ await page.getByText(JSON.stringify(["idle/undefined"]));
await page.fill("#fetcher-input", "1");
await app.clickElement("#fetcher-submit");
await page.waitForSelector("#fetcher-idle");
- expect(await app.getHtml("pre")).toMatch(
+ await page.getByText(
JSON.stringify([
"idle/undefined",
"submitting/undefined",
@@ -410,7 +402,7 @@ test.describe("useFetcher", () => {
await page.fill("#fetcher-input", "2");
await app.clickElement("#fetcher-submit");
await page.waitForSelector("#fetcher-idle");
- expect(await app.getHtml("pre")).toMatch(
+ await page.getByText(
JSON.stringify([
"idle/undefined",
"submitting/undefined",
diff --git a/integration/helpers/create-fixture.ts b/integration/helpers/create-fixture.ts
index 038a339a3d..f935390bd8 100644
--- a/integration/helpers/create-fixture.ts
+++ b/integration/helpers/create-fixture.ts
@@ -9,6 +9,7 @@ import getPort from "get-port";
import stripIndent from "strip-indent";
import { sync as spawnSync, spawn } from "cross-spawn";
import type { JsonObject } from "type-fest";
+import { createRequestListener } from "@mjackson/node-fetch-server";
import {
type ServerBuild,
@@ -45,7 +46,10 @@ export function json(value: JsonObject) {
return JSON.stringify(value, null, 2);
}
+const defaultTemplateName = "vite-5-template" satisfies TemplateName;
+
export async function createFixture(init: FixtureInit, mode?: ServerMode) {
+ let templateName = init.templateName ?? defaultTemplateName;
let projectDir = await createFixtureProject(init, mode);
let buildPath = url.pathToFileURL(
path.join(projectDir, "build/server/index.js")
@@ -134,8 +138,22 @@ export async function createFixture(init: FixtureInit, mode?: ServerMode) {
};
}
- let app: ServerBuild = await import(buildPath);
- let handler = createRequestHandler(app, mode || ServerMode.Production);
+ let build: ServerBuild | null = null;
+ type RequestHandler = (request: Request) => Promise;
+ let handler: RequestHandler;
+ if (templateName.includes("parcel")) {
+ let serverBuild = await import(buildPath);
+ handler = (serverBuild?.requestHandler ??
+ serverBuild?.default?.requestHandler) as RequestHandler;
+ if (!handler) {
+ throw new Error(
+ "Expected a 'requestHandler' export in Parcel server build"
+ );
+ }
+ } else {
+ build = (await import(buildPath)) as ServerBuild;
+ handler = createRequestHandler(build, mode || ServerMode.Production);
+ }
let requestDocument = async (href: string, init?: RequestInit) => {
let url = new URL(href, "test://test");
@@ -184,8 +202,10 @@ export async function createFixture(init: FixtureInit, mode?: ServerMode) {
};
return {
+ templateName,
projectDir,
- build: app,
+ build,
+ handler,
isSpaMode: init.spaMode,
prerender: init.prerender,
requestDocument,
@@ -313,7 +333,26 @@ export async function createAppFixture(fixture: Fixture, mode?: ServerMode) {
});
}
- if (!fixture.build) {
+ if (fixture.templateName.includes("parcel")) {
+ return new Promise(async (accept) => {
+ let port = await getPort();
+ let app = express();
+ app.use(express.static(path.join(fixture.projectDir, "public")));
+ app.use(
+ "/client",
+ express.static(path.join(fixture.projectDir, "build/client"))
+ );
+
+ app.all("*", createRequestListener(fixture.handler));
+
+ let server = app.listen(port);
+
+ accept({ stop: server.close.bind(server), port });
+ });
+ }
+
+ const build = fixture.build;
+ if (!build) {
return Promise.reject(
new Error("Cannot start app server without a build")
);
@@ -327,7 +366,7 @@ export async function createAppFixture(fixture: Fixture, mode?: ServerMode) {
app.all(
"*",
createExpressHandler({
- build: fixture.build,
+ build,
mode: mode || ServerMode.Production,
})
);
@@ -366,9 +405,9 @@ export async function createFixtureProject(
init: FixtureInit = {},
mode?: ServerMode
): Promise {
- let template = init.templateName ?? "vite-5-template";
- let integrationTemplateDir = path.resolve(__dirname, template);
- let projectName = `rr-${template}-${Math.random().toString(32).slice(2)}`;
+ let templateName = init.templateName ?? defaultTemplateName;
+ let integrationTemplateDir = path.resolve(__dirname, templateName);
+ let projectName = `rr-${templateName}-${Math.random().toString(32).slice(2)}`;
let projectDir = path.join(TMP_DIR, projectName);
let port = init.port ?? (await getPort());
@@ -406,12 +445,56 @@ export async function createFixtureProject(
projectDir
);
- build(projectDir, init.buildStdio, mode);
+ if (templateName.includes("parcel")) {
+ parcelBuild(projectDir, init.buildStdio, mode);
+ } else {
+ reactRouterBuild(projectDir, init.buildStdio, mode);
+ }
return projectDir;
}
-function build(projectDir: string, buildStdio?: Writable, mode?: ServerMode) {
+function parcelBuild(
+ projectDir: string,
+ buildStdio?: Writable,
+ mode?: ServerMode
+) {
+ let parcelBin = "node_modules/parcel/lib/bin.js";
+
+ let buildArgs: string[] = [parcelBin, "build", "--no-cache"];
+
+ let buildSpawn = spawnSync("node", buildArgs, {
+ cwd: projectDir,
+ env: {
+ ...process.env,
+ NODE_ENV: mode || ServerMode.Production,
+ },
+ });
+
+ // These logs are helpful for debugging. Remove comments if needed.
+ // console.log("spawning node " + buildArgs.join(" ") + ":\n");
+ // console.log(" STDOUT:");
+ // console.log(" " + buildSpawn.stdout.toString("utf-8"));
+ // console.log(" STDERR:");
+ // console.log(" " + buildSpawn.stderr.toString("utf-8"));
+
+ if (buildStdio) {
+ buildStdio.write(buildSpawn.stdout.toString("utf-8"));
+ buildStdio.write(buildSpawn.stderr.toString("utf-8"));
+ buildStdio.end();
+ }
+
+ if (buildSpawn.error || buildSpawn.status) {
+ console.error(buildSpawn.stderr.toString("utf-8"));
+ throw buildSpawn.error || new Error(`Build failed, check the output above`);
+ }
+}
+
+function reactRouterBuild(
+ projectDir: string,
+ buildStdio?: Writable,
+ mode?: ServerMode
+) {
// We have a "require" instead of a dynamic import in readConfig gated
// behind mode === ServerMode.Test to make jest happy, but that doesn't
// work for ESM configs, those MUST be dynamic imports. So we need to
diff --git a/integration/helpers/rsc-parcel-framework/.gitignore b/integration/helpers/rsc-parcel-framework/.gitignore
new file mode 100644
index 0000000000..0ad794a35c
--- /dev/null
+++ b/integration/helpers/rsc-parcel-framework/.gitignore
@@ -0,0 +1,5 @@
+.parcel-cache
+.react-router
+.react-router-parcel
+build
+node_modules
diff --git a/integration/helpers/rsc-parcel-framework/.parcelrc b/integration/helpers/rsc-parcel-framework/.parcelrc
new file mode 100644
index 0000000000..49bb729196
--- /dev/null
+++ b/integration/helpers/rsc-parcel-framework/.parcelrc
@@ -0,0 +1,3 @@
+{
+ "extends": "parcel-config-react-router-experimental"
+}
diff --git a/integration/helpers/rsc-parcel-framework/app/index.ts b/integration/helpers/rsc-parcel-framework/app/index.ts
new file mode 100644
index 0000000000..3c5c0797d5
--- /dev/null
+++ b/integration/helpers/rsc-parcel-framework/app/index.ts
@@ -0,0 +1,3 @@
+import requestHandler from "virtual:react-router/request-handler";
+
+export { requestHandler };
diff --git a/integration/helpers/rsc-parcel-framework/app/root.tsx b/integration/helpers/rsc-parcel-framework/app/root.tsx
new file mode 100644
index 0000000000..9f824e6c53
--- /dev/null
+++ b/integration/helpers/rsc-parcel-framework/app/root.tsx
@@ -0,0 +1,18 @@
+import { Links, Meta, Outlet, ScrollRestoration } from "react-router";
+
+export default function App() {
+ return (
+
+
+
+
+
+ Welcome to React Router
+
+ );
+}
diff --git a/integration/helpers/rsc-parcel-framework/package.json b/integration/helpers/rsc-parcel-framework/package.json
new file mode 100644
index 0000000000..0ea4e32178
--- /dev/null
+++ b/integration/helpers/rsc-parcel-framework/package.json
@@ -0,0 +1,44 @@
+{
+ "name": "@playground/rsc-parcel-framework",
+ "private": true,
+ "targets": {
+ "server": {
+ "source": "app/index.ts",
+ "distDir": "build",
+ "context": "react-server",
+ "scopeHoist": false,
+ "includeNodeModules": {
+ "express": false
+ }
+ }
+ },
+ "scripts": {
+ "clean": "rm -rf dist .parcel-cache .react-router .react-router-parcel",
+ "dev": "parcel --no-cache --no-autoinstall",
+ "build": "parcel build --no-cache --no-autoinstall",
+ "start": "node start.js",
+ "typecheck": "react-router typegen && pnpm build && tsc"
+ },
+ "devDependencies": {
+ "@react-router/dev": "workspace:*",
+ "@react-router/fs-routes": "workspace:*",
+ "@types/express": "^5.0.0",
+ "@types/node": "^22.13.1",
+ "@types/parcel-env": "0.0.8",
+ "@types/react-dom": "^19.0.3",
+ "@types/react": "^19.0.8",
+ "parcel": "2.15.0",
+ "parcel-config-react-router-experimental": "1.0.21",
+ "typescript": "^5.1.6"
+ },
+ "dependencies": {
+ "@mjackson/node-fetch-server": "0.6.1",
+ "@parcel/runtime-rsc": "2.15.0",
+ "express": "^4.21.2",
+ "react": "^19.0.0",
+ "react-dom": "^19.0.0",
+ "react-router": "workspace:*",
+ "react-server-dom-parcel": "^19.0.0",
+ "remix-utils": "^8.7.0"
+ }
+}
diff --git a/integration/helpers/rsc-parcel-framework/public/favicon.ico b/integration/helpers/rsc-parcel-framework/public/favicon.ico
new file mode 100644
index 0000000000..5dbdfcddcb
Binary files /dev/null and b/integration/helpers/rsc-parcel-framework/public/favicon.ico differ
diff --git a/integration/helpers/rsc-parcel-framework/start.js b/integration/helpers/rsc-parcel-framework/start.js
new file mode 100644
index 0000000000..0abc11d55a
--- /dev/null
+++ b/integration/helpers/rsc-parcel-framework/start.js
@@ -0,0 +1,19 @@
+const { createRequestListener } = require("@mjackson/node-fetch-server");
+const express = require("express");
+const reactRouterRequestHandler =
+ require("./build/server/index.js").requestHandler;
+
+const app = express();
+
+app.use(express.static("public"));
+app.use("/client", express.static("build/client"));
+
+app.get("/.well-known/appspecific/com.chrome.devtools.json", (_, res) => {
+ res.status(404);
+ res.send("Not Found");
+});
+
+app.use(createRequestListener(reactRouterRequestHandler));
+
+app.listen(3000);
+console.log("Server listening on port 3000 (http://localhost:3000)");
diff --git a/integration/helpers/rsc-parcel-framework/tsconfig.json b/integration/helpers/rsc-parcel-framework/tsconfig.json
new file mode 100644
index 0000000000..edcc15fde0
--- /dev/null
+++ b/integration/helpers/rsc-parcel-framework/tsconfig.json
@@ -0,0 +1,20 @@
+{
+ "include": [
+ "**/*.ts",
+ "**/*.tsx",
+ "./.react-router/types/**/*",
+ "./.react-router-parcel/types/**/*"
+ ],
+ "compilerOptions": {
+ "strict": true,
+ "jsx": "react-jsx",
+ "allowSyntheticDefaultImports": true,
+ "moduleResolution": "bundler",
+ "module": "esnext",
+ "isolatedModules": true,
+ "esModuleInterop": true,
+ "target": "es2022",
+ "noEmit": true,
+ "rootDirs": [".", "./.react-router/types", "./.react-router-parcel/types"]
+ }
+}
diff --git a/integration/helpers/rsc-parcel/.gitignore b/integration/helpers/rsc-parcel/.gitignore
new file mode 100644
index 0000000000..77738287f0
--- /dev/null
+++ b/integration/helpers/rsc-parcel/.gitignore
@@ -0,0 +1 @@
+dist/
\ No newline at end of file
diff --git a/integration/helpers/rsc-parcel/package.json b/integration/helpers/rsc-parcel/package.json
new file mode 100644
index 0000000000..da7c3e5e76
--- /dev/null
+++ b/integration/helpers/rsc-parcel/package.json
@@ -0,0 +1,47 @@
+{
+ "name": "@playground/rsc-parcel",
+ "private": true,
+ "source": "src/entry.ssr.tsx",
+ "server": "dist/server.js",
+ "targets": {
+ "server": {
+ "context": "react-server",
+ "includeNodeModules": {
+ "express": false
+ }
+ }
+ },
+ "scripts": {
+ "dev": "parcel --no-cache",
+ "build": "parcel build --no-cache",
+ "start": "node dist/server.js",
+ "typecheck": "tsc"
+ },
+ "devDependencies": {
+ "@parcel/packager-react-static": "2.15.0",
+ "@parcel/transformer-react-static": "2.15.0",
+ "@types/express": "^5.0.0",
+ "@types/node": "^22.13.1",
+ "@types/parcel-env": "0.0.8",
+ "@types/react-dom": "^19.0.3",
+ "@types/react": "^19.0.8",
+ "browserify-zlib": "^0.2.0",
+ "buffer": "^5.5.0||^6.0.0",
+ "events": "^3.1.0",
+ "parcel": "2.15.0",
+ "path-browserify": "^1.0.0",
+ "querystring-es3": "^0.2.1",
+ "stream-http": "^3.1.0",
+ "typescript": "^5.1.6",
+ "url": "^0.11.0"
+ },
+ "dependencies": {
+ "@mjackson/node-fetch-server": "0.6.1",
+ "@parcel/runtime-rsc": "2.15.0",
+ "express": "^4.21.2",
+ "react": "^19.1.0",
+ "react-dom": "^19.1.0",
+ "react-router": "workspace:*",
+ "react-server-dom-parcel": "^19.1.0"
+ }
+}
diff --git a/integration/helpers/rsc-parcel/public/favicon.ico b/integration/helpers/rsc-parcel/public/favicon.ico
new file mode 100644
index 0000000000..5dbdfcddcb
Binary files /dev/null and b/integration/helpers/rsc-parcel/public/favicon.ico differ
diff --git a/integration/helpers/rsc-parcel/src/entry.browser.tsx b/integration/helpers/rsc-parcel/src/entry.browser.tsx
new file mode 100644
index 0000000000..d604446534
--- /dev/null
+++ b/integration/helpers/rsc-parcel/src/entry.browser.tsx
@@ -0,0 +1,50 @@
+"use client-entry";
+
+import * as React from "react";
+import { hydrateRoot } from "react-dom/client";
+import {
+ 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";
+import {
+ createFromReadableStream,
+ encodeReply,
+ setServerCallback,
+ // @ts-expect-error
+} from "react-server-dom-parcel/client";
+
+const callServer = createCallServer({
+ decode: (body) => createFromReadableStream(body, { callServer }),
+ encodeAction: (args) => encodeReply(args),
+});
+
+setServerCallback(callServer);
+
+createFromReadableStream(getServerStream(), { assets: "manifest" }).then(
+ (payload: ServerPayload) => {
+ React.startTransition(() => {
+ hydrateRoot(
+ document,
+
+
+ );
+ });
+ }
+);
+
+if (process.env.NODE_ENV !== "production") {
+ const ogError = console.error.bind(console);
+ console.error = (...args) => {
+ if (args[1] === Symbol.for("react-router.redirect")) {
+ return;
+ }
+ ogError(...args);
+ };
+}
diff --git a/integration/helpers/rsc-parcel/src/entry.rsc.ts b/integration/helpers/rsc-parcel/src/entry.rsc.ts
new file mode 100644
index 0000000000..6e52b6a682
--- /dev/null
+++ b/integration/helpers/rsc-parcel/src/entry.rsc.ts
@@ -0,0 +1,43 @@
+"use server-entry";
+
+import {
+ decodeAction,
+ decodeReply,
+ loadServerAction,
+ renderToReadableStream,
+ // @ts-expect-error
+} from "react-server-dom-parcel/server.edge";
+import {
+ type unstable_DecodeCallServerFunction as DecodeCallServerFunction,
+ type unstable_DecodeFormActionFunction as DecodeFormActionFunction,
+ unstable_matchRSCServerRequest as matchRSCServerRequest,
+} from "react-router/rsc";
+
+import { routes } from "./routes";
+
+import "./entry.browser.tsx";
+
+const decodeCallServer: DecodeCallServerFunction = async (actionId, reply) => {
+ const args = await decodeReply(reply);
+ const action = await loadServerAction(actionId);
+ return action.bind(null, ...args);
+};
+
+const decodeFormAction: DecodeFormActionFunction = async (formData) => {
+ return await decodeAction(formData);
+};
+
+export function callServer(request: Request) {
+ return matchRSCServerRequest({
+ decodeCallServer,
+ decodeFormAction,
+ request,
+ routes,
+ generateResponse(match) {
+ return new Response(renderToReadableStream(match.payload), {
+ status: match.statusCode,
+ headers: match.headers,
+ });
+ },
+ });
+}
diff --git a/integration/helpers/rsc-parcel/src/entry.ssr.tsx b/integration/helpers/rsc-parcel/src/entry.ssr.tsx
new file mode 100644
index 0000000000..8e3a58c135
--- /dev/null
+++ b/integration/helpers/rsc-parcel/src/entry.ssr.tsx
@@ -0,0 +1,57 @@
+import { createRequestListener } from "@mjackson/node-fetch-server";
+import express from "express";
+// @ts-expect-error - no types
+import { renderToReadableStream as renderHTMLToReadableStream } from "react-dom/server.edge" assert { env: "react-client" };
+import {
+ unstable_routeRSCServerRequest as routeRSCServerRequest,
+ unstable_RSCStaticRouter as RSCStaticRouter,
+} from "react-router" assert { env: "react-client" };
+// @ts-expect-error
+import { createFromReadableStream } from "react-server-dom-parcel/client.edge" assert { env: "react-client" };
+
+import { callServer } from "./entry.rsc" assert { env: "react-server" };
+
+const app = express();
+
+app.use(express.static("public"));
+
+app.use("/client", express.static("dist/client"));
+
+app.get("/.well-known/appspecific/com.chrome.devtools.json", (req, res) => {
+ res.status(404);
+ res.end();
+});
+
+app.use(
+ createRequestListener(async (request) => {
+ return routeRSCServerRequest({
+ request,
+ callServer,
+ decode: createFromReadableStream,
+ async renderHTML(getPayload) {
+ return await renderHTMLToReadableStream(
+ Home
;
+}
diff --git a/integration/helpers/rsc-parcel/src/routes/root.tsx b/integration/helpers/rsc-parcel/src/routes/root.tsx
new file mode 100644
index 0000000000..778a4858d6
--- /dev/null
+++ b/integration/helpers/rsc-parcel/src/routes/root.tsx
@@ -0,0 +1,22 @@
+import { Links, Outlet, ScrollRestoration } from "react-router";
+
+export function Layout({ children }: { children: React.ReactNode }) {
+ return (
+
+
+
+
+ Vite (RSC)
+
+) => createFromReadableStream(body);
+
+setServerCallback(
+ createCallServer({
+ decode,
+ encodeAction: (args) => encodeReply(args),
+ })
+);
+
+createFromReadableStream(getServerStream()).then((payload) => {
+ startTransition(() => {
+ hydrateRoot(
+ document,
+
+
+ );
+ });
+});
diff --git a/integration/helpers/rsc-vite/src/entry.rsc.tsx b/integration/helpers/rsc-vite/src/entry.rsc.tsx
new file mode 100644
index 0000000000..ebd05d15de
--- /dev/null
+++ b/integration/helpers/rsc-vite/src/entry.rsc.tsx
@@ -0,0 +1,46 @@
+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";
+
+import { routes } from "./routes";
+
+const decodeCallServer: DecodeCallServerFunction = async (actionId, reply) => {
+ const args = await decodeReply(reply);
+ const action = await loadServerAction(actionId);
+ return action.bind(null, ...args);
+};
+
+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,
+ });
+ },
+ });
+}
+
+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);
+}
diff --git a/integration/helpers/rsc-vite/src/entry.ssr.tsx b/integration/helpers/rsc-vite/src/entry.ssr.tsx
new file mode 100644
index 0000000000..e7d58cad43
--- /dev/null
+++ b/integration/helpers/rsc-vite/src/entry.ssr.tsx
@@ -0,0 +1,28 @@
+import bootstrapScriptContent from "virtual:vite-rsc/bootstrap-script-content";
+import { createFromReadableStream } from "@hiogawa/vite-rsc/ssr";
+// @ts-expect-error
+import * as ReactDomServer from "react-dom/server.edge";
+import {
+ unstable_RSCStaticRouter as RSCStaticRouter,
+ unstable_routeRSCServerRequest as routeRSCServerRequest,
+} from "react-router";
+
+export default async function handler(
+ request: Request,
+ callServer: (request: Request) => Promise
+) {
+ return routeRSCServerRequest({
+ request,
+ callServer,
+ decode: (body) => createFromReadableStream(body),
+ renderHTML(getPayload) {
+ return ReactDomServer.renderToReadableStream(
+ Home
;
+}
diff --git a/integration/helpers/rsc-vite/src/routes/root.tsx b/integration/helpers/rsc-vite/src/routes/root.tsx
new file mode 100644
index 0000000000..d498b32ffa
--- /dev/null
+++ b/integration/helpers/rsc-vite/src/routes/root.tsx
@@ -0,0 +1,22 @@
+import { Links, Outlet, ScrollRestoration } from "react-router";
+
+export function Layout({ children }: { children: React.ReactNode }) {
+ return (
+
+
+
+
+ Vite (RSC)
+ {'Value:' + data.value}
+ {'Value:' + data.value}
{'Value:' + data.value}
+ {'Value:' + data.value}