feat: RSC Router APIs

.gitignore

@@ -27,6 +27,7 @@ node_modules/
 
 .wireit
 .eslintcache
+.parcel-cache
 .tmp
 tsup.config.bundled_*.mjs
 build.utils.d.ts

integration/helpers/rsc-parcel/.gitignore

@@ -0,0 +1 @@
+dist/

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"
+  }
+}

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

@@ -0,0 +1,40 @@
+"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,
+        <React.StrictMode>
+          <RSCHydratedRouter
+            decode={createFromReadableStream}
+            // @ts-expect-error
+            payload={payload}
+          />
+        </React.StrictMode>
+      );
+    });
+  }
+);

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,
+      });
+    },
+  });
+}

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(
+          <RSCStaticRouter getPayload={getPayload} />,
+          {
+            bootstrapScriptContent: (
+              callServer as unknown as { bootstrapScript: string }
+            ).bootstrapScript,
+          }
+        );
+      },
+    });
+  })
+);
+
+const port = parseInt(process.env.RR_PORT || "3000", 10);
+const server = app.listen(port, () => {
+  console.log(`Server started on http://localhost:${port}`);
+});
+
+// Restart the server when it changes.
+if (module.hot) {
+  module.hot.dispose(() => {
+    server.close();
+  });
+
+  module.hot.accept();
+}

integration/helpers/rsc-parcel/src/routes.ts

@@ -0,0 +1,16 @@
+import type { unstable_ServerRouteObject as ServerRouteObject } from "react-router/rsc";
+
+export const routes = [
+  {
+    id: "root",
+    path: "",
+    lazy: () => import("./routes/root"),
+    children: [
+      {
+        id: "home",
+        index: true,
+        lazy: () => import("./routes/home"),
+      },
+    ],
+  },
+] satisfies ServerRouteObject[];

integration/helpers/rsc-parcel/src/routes/home.tsx

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

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 (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>Vite (RSC)</title>
+        <Links />
+      </head>
+      <body>
+        {children}
+        <ScrollRestoration />
+      </body>
+    </html>
+  );
+}
+
+export default function ServerComponent() {
+  return <Outlet />;
+}

integration/helpers/rsc-parcel/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "jsx": "react-jsx",
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "bundler",
+    "module": "esnext",
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "target": "es2022",
+    "noEmit": true
+  }
+}

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

@@ -0,0 +1 @@
+{"configPath":"../../dist/ssr/wrangler.json","auxiliaryWorkers":[{"configPath":"../../dist/server/wrangler.json"}]}

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

@@ -0,0 +1,16 @@
+import {
+  createServerReference as createServerReferenceImp,
+  createFromReadableStream,
+  encodeReply,
+  // @ts-expect-error - no types yet
+} from "@jacob-ebey/react-server-dom-vite/client";
+import { unstable_createCallServer as createCallServer } from "react-router";
+
+export const callServer = createCallServer({
+  decode: (body) => createFromReadableStream(body, { callServer }),
+  encodeAction: (args) => encodeReply(args),
+});
+
+export function createServerReference(imp: unknown, id: string, name: string) {
+  return createServerReferenceImp(`${id}#${name}`, callServer);
+}

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

@@ -0,0 +1,5 @@
+// @ts-expect-error - no types yet
+import RSD from "@jacob-ebey/react-server-dom-vite/server";
+
+export const registerServerReference = RSD.registerServerReference;
+export const registerClientReference = RSD.registerClientReference;

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

@@ -0,0 +1,4 @@
+// @ts-expect-error - no types yet
+import RSD from "@jacob-ebey/react-server-dom-vite/client";
+
+export const createServerReference = RSD.createServerReference;

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

@@ -0,0 +1,19 @@
+import * as stream from "node:stream";
+// @ts-expect-error - no types yet
+import RSD from "@jacob-ebey/react-server-dom-vite/server";
+// @ts-expect-error - no types yet
+import { manifest } from "virtual:react-manifest";
+
+export function renderToReadableStream(payload: any) {
+  const { pipe } = RSD.renderToPipeableStream(payload, manifest);
+  return stream.Readable.toWeb(
+    pipe(new stream.PassThrough())
+  ) as ReadableStream<Uint8Array>;
+}
+
+export function decodeReply(
+  reply: FormData | string,
+  options?: any
+): unknown[] {
+  return RSD.decodeReply(reply, manifest, options);
+}

integration/helpers/rsc-vite/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@playground/rsc-vite",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "start": "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",
+    "@types/express": "^5.0.0",
+    "@types/node": "^22.13.1",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "typescript": "^5.1.6",
+    "vite": "^6.2.0",
+    "vite-tsconfig-paths": "^5.1.4",
+    "wrangler": "^3.111.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",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router": "workspace:*"
+  }
+}

integration/helpers/rsc-vite/server.js

@@ -0,0 +1,39 @@
+import { parseArgs } from "node:util";
+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";
+
+const app = express();
+
+app.use(compression());
+app.use(express.static("dist/client"));
+
+app.get("/.well-known/appspecific/com.chrome.devtools.json", (req, res) => {
+  res.status(404);
+  res.end();
+});
+
+app.use(
+  createRequestListener((request) => {
+    return ssr.fetch(request, {
+      SERVER: {
+        fetch(request) {
+          return server.fetch(request);
+        },
+      },
+    });
+  })
+);
+
+const { values } = parseArgs({
+  options: { p: { type: "string", default: "3000" } },
+  allowPositionals: true,
+});
+
+const port = parseInt(values.p, 10);
+app.listen(port, () => {
+  console.log(`Server started on http://localhost:${port}`);
+});