[WIP] Rendering API React framework implementation

.gitattributes

@@ -47,6 +47,7 @@ examples/**/* linguist-documentation
 
 vendor/*.c linguist-vendored
 vendor/brotli/** linguist-vendored
+packages/bun-framework-react/vendor/** linguist-vendored -diff -merge
 
 test/js/node/test/fixtures linguist-vendored
 test/js/node/test/common linguist-vendored

cmake/Sources.json

@@ -27,6 +27,10 @@
     "paths": ["src/bake/*.ts", "src/bake/*/*.{ts,css}"],
     "exclude": ["src/bake/generated.ts"]
   },
+  {
+    "output": "BunFrameworkReactSources.txt",
+    "paths": ["packages/bun-framework-react/*.{ts,tsx,js,jsx}", "packages/bun-framework-react/src/**/*.{ts,tsx,js,jsx}"]
+  },
   {
     "output": "BindgenSources.txt",
     "paths": ["src/**/*.bind.ts"]

package.json

@@ -23,7 +23,8 @@
   },
   "resolutions": {
     "bun-types": "workspace:packages/bun-types",
-    "@types/bun": "workspace:packages/@types/bun"
+    "@types/bun": "workspace:packages/@types/bun",
+    "@types/node": "24.3.1"
   },
   "scripts": {
     "build": "bun --silent run build:debug",

packages/bun-framework-react/.gitignore

@@ -0,0 +1 @@
+bun-framework-react*.tgz

packages/bun-framework-react/README.md

@@ -0,0 +1,10 @@
+<img src="https://bun.com/logo.png" height="36" />
+
+# `bun-framework-react`
+
+An implementation of the Bun Rendering API for React, with RSC (React Server Components)
+
+1. `bun add bun-framework-react --dev`
+2. Make a `pages/index.tsx` file, with a page component defualt export
+3. Run `bun --app`
+4. Open [localhost:3000](https://localhost:3000) 🎉

packages/bun-framework-react/client.tsx

@@ -0,0 +1,64 @@
+import { onServerSideReload } from "bun:app/client";
+import { hydrateRoot } from "react-dom/client";
+import { initialRscPayloadThen } from "./src/client/app.ts";
+import { router } from "./src/client/constants.ts";
+import { Root } from "./src/client/root.tsx";
+
+hydrateRoot(document, <Root />, {
+  onUncaughtError(e) {
+    console.error(e);
+  },
+});
+
+const firstPageId = Date.now();
+{
+  history.replaceState(firstPageId, "", location.href);
+  initialRscPayloadThen(result => {
+    if (router.hasNavigatedSinceDOMContentLoaded()) return;
+
+    // Collect the list of CSS files that were added from SSR
+    const links = document.querySelectorAll<HTMLLinkElement>("link[data-bake-ssr]");
+    router.css.clear();
+
+    for (let i = 0; i < links.length; i++) {
+      const link = links[i];
+      if (!link) continue;
+      const href = new URL(link.href).pathname;
+      router.css.push(href);
+
+      // Hack: cannot add this to `cssFiles` because React owns the element, and
+      // it will be removed when any navigation is performed.
+    }
+
+    router.setCachedPage(firstPageId, {
+      css: [...router.css.getList()],
+      element: result,
+    });
+  });
+
+  if (document.startViewTransition !== undefined) {
+    // View transitions are used by navigations to ensure that the page rerender
+    // all happens in one operation. Additionally, developers may animate
+    // different elements. The default fade animation is disabled so that the
+    // out-of-the-box experience feels like there are no view transitions.
+    // This is done client-side because a React error will unmount all elements.
+    const sheet = new CSSStyleSheet();
+    document.adoptedStyleSheets.push(sheet);
+    sheet.replaceSync(":where(*)::view-transition-group(root){animation:none}");
+  }
+}
+
+window.addEventListener("popstate", async event => {
+  const state = typeof event.state === "number" ? event.state : undefined;
+  await router.navigate(location.href, state);
+});
+
+if (import.meta.env.DEV) {
+  // Frameworks can call `onServerSideReload` to hook into server-side hot
+  // module reloading.
+  onServerSideReload(async () => {
+    const newId = Date.now();
+    history.replaceState(newId, "", location.href);
+    await router.navigate(location.href, newId);
+  });
+}

packages/bun-framework-react/index.ts

@@ -0,0 +1,35 @@
+import type { Framework } from "bun:app";
+
+function resolve(specifier: string) {
+  return Bun.fileURLToPath(import.meta.resolve(specifier));
+}
+
+const framework: Framework = {
+  serverComponents: {
+    separateSSRGraph: true,
+    serverRuntimeImportSource: resolve("./vendor/react-server-dom-bun/server.node.js"),
+  },
+  reactFastRefresh: {
+    importSource: resolve("react-refresh/runtime"),
+  },
+  fileSystemRouterTypes: [
+    {
+      root: "pages",
+      clientEntryPoint: resolve("./client.tsx"),
+      serverEntryPoint: resolve("./server.tsx"),
+      extensions: [".tsx", ".jsx"],
+      style: "nextjs-pages",
+      layouts: true,
+      ignoreUnderscores: true,
+      prefix: "/",
+      ignoreDirs: ["node_modules", ".git"],
+    },
+  ],
+  // bundlerOptions: {
+  //   ssr: {
+  //     conditions: ["react-server"],
+  //   },
+  // },
+};
+
+export default framework;

packages/bun-framework-react/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "bun-framework-react",
+  "version": "0.0.0-canary.10",
+  "devDependencies": {
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9"
+  },
+  "exports": {
+    ".": "./index.ts",
+    "./package.json": "./package.json",
+    "./ssr.tsx": "./ssr.tsx",
+    "./server.tsx": "./server.tsx",
+    "./client.tsx": "./client.tsx",
+    "./*": "./src/components/*.tsx"
+  },
+  "description": "React framework integration with RSC, for the Bun Rendering API",
+  "files": [
+    "./vendor",
+    "./src",
+    "./*.ts",
+    "./*.tsx",
+    "./README.md"
+  ],
+  "keywords": [
+    "bun",
+    "react",
+    "framework",
+    "bake"
+  ],
+  "type": "module",
+  "dependencies": {
+    "react": "0.0.0-experimental-a757cb76-20251002",
+    "react-dom": "0.0.0-experimental-a757cb76-20251002",
+    "react-refresh": "0.0.0-experimental-a757cb76-20251002"
+  }
+}

src/bake/bun-framework-react/server.tsx → packages/bun-framework-react/server.tsx

@@ -1,23 +1,24 @@
-import type { Bake } from "bun";
 import { renderToHtml, renderToStaticHtml } from "bun-framework-react/ssr.tsx" with { bunBakeGraph: "ssr" };
-import { serverManifest } from "bun:bake/server";
+import * as Bake from "bun:app";
+import { serverManifest } from "bun:app/server";
 import type { AsyncLocalStorage } from "node:async_hooks";
 import { PassThrough } from "node:stream";
-import { renderToPipeableStream } from "react-server-dom-bun/server.node.unbundled.js";
-import type { RequestContext } from "../hmr-runtime-server";
+import type { RequestContext } from "../../src/bake/hmr-runtime-server.ts";
+import { renderToPipeableStream } from "./vendor/react-server-dom-bun/server.node.unbundled.js";
 
-function assertReactComponent(Component: any) {
+function assertReactComponent(Component: unknown): asserts Component is React.JSXElementConstructor<unknown> {
   if (typeof Component !== "function") {
     console.log("Expected a React component", Component, typeof Component);
     throw new Error("Expected a React component");
   }
 }
 
-// This function converts the route information into a React component tree.
-function getPage(meta: Bake.RouteMetadata & { request?: Request }, styles: readonly string[]) {
+function getPage(meta: Bake.RouteMetadata & { request?: Request | undefined }, styles: readonly string[]) {
   let route = component(meta.pageModule, meta.params, meta.request);
+
   for (const layout of meta.layouts) {
-    const Layout = layout.default;
+    const Layout = layout.default as typeof layout.default & { displayName?: string };
+    Layout.displayName ??= "Layout";
     if (import.meta.env.DEV) assertReactComponent(Layout);
     route = <Layout params={meta.params}>{route}</Layout>;
   }
@@ -26,7 +27,6 @@ function getPage(meta: Bake.RouteMetadata & { request?: Request }, styles: reado
     <html lang="en">
       <head>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <title>Bun + React Server Components</title>
         {styles.map(url => (
           // `data-bake-ssr` is used on the client-side to construct the styles array.
           <link key={url} rel="stylesheet" href={url} data-bake-ssr />
@@ -37,8 +37,12 @@ function getPage(meta: Bake.RouteMetadata & { request?: Request }, styles: reado
   );
 }
 
-function component(mod: any, params: Record<string, string> | null, request?: Request) {
+function component(mod: any, params: Record<string, string | string[]> | null, request?: Request) {
+  if (!mod || !mod.default) {
+    throw new Error("Pages must have a default export that is a React component");
+  }
   const Page = mod.default;
+
   let props = {};
   if (import.meta.env.DEV) assertReactComponent(Page);
 
@@ -51,7 +55,6 @@ function component(mod: any, params: Record<string, string> | null, request?: Re
     props = method();
   }
 
-  // Pass request prop if mode is 'ssr'
   if (mod.mode === "ssr" && request) {
     props.request = request;
   }
@@ -76,7 +79,7 @@ export async function render(
   const skipSSR = request.headers.get("Accept")?.includes("text/x-component");
 
   // Check if the page module has a streaming export, default to false
-  const streaming = meta.pageModule.streaming ?? false;
+  const streaming = meta.pageModule?.streaming ?? false;
 
   // Do not render <link> tags if the request is skipping SSR.
   const page = getPage(meta, skipSSR ? [] : meta.styles);
@@ -104,7 +107,6 @@ export async function render(
 
       // Mark as aborted and call the abort function
       signal.aborted = err;
-      // @ts-expect-error
       signal.abort(err);
       rscPayload.destroy(err);
     },
@@ -236,5 +238,5 @@ export const contentTypeToStaticFile = {
 export interface MiniAbortSignal {
   aborted: Error | undefined;
   /** Caller must set `aborted` to true before calling. */
-  abort: () => void;
+  abort: (reason?: any) => void;
 }