react-bun-ssr 0.1.0 → 0.1.1

package/framework/runtime/render.tsx

@@ -4,54 +4,33 @@ import {
   isValidElement,
   Suspense,
   use,
-  type ComponentType,
   type ReactElement,
   type ReactNode,
 } from "react";
 import { renderToReadableStream, renderToStaticMarkup, renderToString } from "react-dom/server";
 import type { DeferredSettleEntry } from "./deferred";
 import type {
+  ClientRouterSnapshot,
   HydrationDocumentAssets,
   RenderPayload,
   RouteModule,
   RouteModuleBundle,
 } from "./types";
 import { safeJsonSerialize } from "./utils";
-import { createRouteTree } from "./tree";
-
-function resolveErrorBoundary(modules: RouteModuleBundle): ComponentType<{ error: unknown }> | null {
-  if (modules.route.ErrorBoundary) {
-    return modules.route.ErrorBoundary;
-  }
-
-  for (let index = modules.layouts.length - 1; index >= 0; index -= 1) {
-    const candidate = modules.layouts[index]!.ErrorBoundary;
-    if (candidate) {
-      return candidate;
-    }
-  }
-
-  return modules.root.ErrorBoundary ?? null;
-}
-
-function resolveNotFoundBoundary(modules: RouteModuleBundle): ComponentType | null {
-  if (modules.route.NotFound) {
-    return modules.route.NotFound;
-  }
-
-  for (let index = modules.layouts.length - 1; index >= 0; index -= 1) {
-    const candidate = modules.layouts[index]!.NotFound;
-    if (candidate) {
-      return candidate;
-    }
-  }
-
-  return modules.root.NotFound ?? null;
-}
+import {
+  RBSSR_HEAD_MARKER_END_ATTR,
+  RBSSR_HEAD_MARKER_START_ATTR,
+  RBSSR_PAYLOAD_SCRIPT_ID,
+  RBSSR_ROUTER_SCRIPT_ID,
+} from "./runtime-constants";
+import {
+  createErrorAppTree,
+  createNotFoundAppTree,
+  createPageAppTree,
+} from "./tree";
 
 export function renderPageApp(modules: RouteModuleBundle, payload: RenderPayload): string {
-  const Leaf = modules.route.default;
-  return renderToString(createRouteTree(modules, <Leaf />, payload));
+  return renderToString(createPageAppTree(modules, payload));
 }
 
 export function renderErrorApp(
@@ -68,49 +47,6 @@ export function renderNotFoundApp(modules: RouteModuleBundle, payload: RenderPay
   return tree ? renderToString(tree) : null;
 }
 
-export function createPageAppTree(modules: RouteModuleBundle, payload: RenderPayload): ReactElement {
-  const Leaf = modules.route.default;
-  return createRouteTree(modules, <Leaf />, payload);
-}
-
-export function createErrorAppTree(
-  modules: RouteModuleBundle,
-  payload: RenderPayload,
-  error: unknown,
-): ReactElement | null {
-  const Boundary = resolveErrorBoundary(modules);
-  if (!Boundary) {
-    return null;
-  }
-
-  const boundaryPayload: RenderPayload = {
-    ...payload,
-    error: {
-      message: error instanceof Error ? error.message : String(error),
-    },
-  };
-
-  return createRouteTree(modules, <Boundary error={error} />, boundaryPayload);
-}
-
-export function createNotFoundAppTree(modules: RouteModuleBundle, payload: RenderPayload): ReactElement | null {
-  const Boundary = resolveNotFoundBoundary(modules);
-  if (!Boundary) {
-    return null;
-  }
-
-  return createRouteTree(modules, <Boundary />, payload);
-}
-
-function escapeHtml(value: string): string {
-  return value
-    .replace(/&/g, "&amp;")
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;")
-    .replace(/\"/g, "&quot;")
-    .replace(/'/g, "&#39;");
-}
-
 function toTitleText(children: ReactNode): string {
   return Children.toArray(children)
     .map(child => {
@@ -214,6 +150,20 @@ function withVersionQuery(url: string, version?: number): string {
   return `${url}${separator}v=${version}`;
 }
 
+function createVersionedCssHrefs(assets: HydrationDocumentAssets): string[] {
+  return assets.css.map(href => withVersionQuery(href, assets.devVersion));
+}
+
+export function createManagedHeadMarkup(options: {
+  headMarkup: string;
+  assets: HydrationDocumentAssets;
+}): string {
+  const cssLinks = createVersionedCssHrefs(options.assets)
+    .map(href => `<link rel="stylesheet" href="${Bun.escapeHTML(href)}"/>`)
+    .join("");
+  return `${options.headMarkup}${cssLinks}`;
+}
+
 function toDeferredScript(entry: DeferredSettleEntry): ReactElement {
   return (
     <Suspense fallback={null} key={entry.id}>
@@ -236,13 +186,13 @@ function HtmlDocument(options: {
   appTree: ReactElement;
   payload: RenderPayload;
   assets: HydrationDocumentAssets;
-  headElements: ReactNode[];
+  managedHeadElements: ReactNode[];
+  routerSnapshot: ClientRouterSnapshot;
   deferredSettleEntries: DeferredSettleEntry[];
 }): ReactElement {
-  const { appTree, payload, assets, headElements, deferredSettleEntries } = options;
+  const { appTree, payload, assets, managedHeadElements, deferredSettleEntries } = options;
   const versionedScript = assets.script ? withVersionQuery(assets.script, assets.devVersion) : undefined;
-  const cssLinks = assets.css.map((href, index) => {
-    const versionedHref = withVersionQuery(href, assets.devVersion);
+  const cssLinks = createVersionedCssHrefs(assets).map((versionedHref, index) => {
     return <link key={`css:${index}:${versionedHref}`} rel="stylesheet" href={versionedHref} />;
   });
 
@@ -251,8 +201,10 @@ function HtmlDocument(options: {
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        {headElements}
+        <meta {...{ [RBSSR_HEAD_MARKER_START_ATTR]: "1" }} />
+        {managedHeadElements}
         {cssLinks}
+        <meta {...{ [RBSSR_HEAD_MARKER_END_ATTR]: "1" }} />
       </head>
       <body>
         <div id="rbssr-root">{appTree}</div>
@@ -262,10 +214,15 @@ function HtmlDocument(options: {
           }}
         />
         <script
-          id="__RBSSR_PAYLOAD__"
+          id={RBSSR_PAYLOAD_SCRIPT_ID}
           type="application/json"
           dangerouslySetInnerHTML={{ __html: safeJsonSerialize(payload) }}
         />
+        <script
+          id={RBSSR_ROUTER_SCRIPT_ID}
+          type="application/json"
+          dangerouslySetInnerHTML={{ __html: safeJsonSerialize(options.routerSnapshot) }}
+        />
         {versionedScript ? <script type="module" src={versionedScript} /> : null}
         {typeof assets.devVersion === "number" ? (
           <script
@@ -315,6 +272,7 @@ export async function renderDocumentStream(options: {
   payload: RenderPayload;
   assets: HydrationDocumentAssets;
   headElements: ReactNode[];
+  routerSnapshot: ClientRouterSnapshot;
   deferredSettleEntries?: DeferredSettleEntry[];
 }): Promise<ReadableStream<Uint8Array>> {
   const stream = await renderToReadableStream(
@@ -322,7 +280,8 @@ export async function renderDocumentStream(options: {
       appTree={options.appTree}
       payload={options.payload}
       assets={options.assets}
-      headElements={options.headElements}
+      managedHeadElements={options.headElements}
+      routerSnapshot={options.routerSnapshot}
       deferredSettleEntries={options.deferredSettleEntries ?? []}
     />,
   );
@@ -335,16 +294,19 @@ export function renderDocument(options: {
   payload: RenderPayload;
   assets: HydrationDocumentAssets;
   headMarkup: string;
+  routerSnapshot: ClientRouterSnapshot;
 }): string {
-  const { appMarkup, payload, assets, headMarkup } = options;
+  const { appMarkup, payload, assets, headMarkup, routerSnapshot } = options;
   const versionedScript = assets.script ? withVersionQuery(assets.script, assets.devVersion) : undefined;
-  const cssLinks = assets.css
-    .map(href => `<link rel="stylesheet" href="${escapeHtml(withVersionQuery(href, assets.devVersion))}"/>`)
-    .join("\n");
+  const managedHeadMarkup = createManagedHeadMarkup({
+    headMarkup,
+    assets,
+  });
 
-  const payloadScript = `<script id="__RBSSR_PAYLOAD__" type="application/json">${safeJsonSerialize(payload)}</script>`;
+  const payloadScript = `<script id="${RBSSR_PAYLOAD_SCRIPT_ID}" type="application/json">${safeJsonSerialize(payload)}</script>`;
+  const routerScript = `<script id="${RBSSR_ROUTER_SCRIPT_ID}" type="application/json">${safeJsonSerialize(routerSnapshot)}</script>`;
   const entryScript = versionedScript
-    ? `<script type="module" src="${escapeHtml(versionedScript)}"></script>`
+    ? `<script type="module" src="${Bun.escapeHTML(versionedScript)}"></script>`
     : "";
   const devScript = typeof assets.devVersion === "number"
     ? `<script>${buildDevReloadClientScript(assets.devVersion)}</script>`
@@ -356,13 +318,15 @@ export function renderDocument(options: {
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    ${headMarkup}
-    ${cssLinks}
+    <meta ${RBSSR_HEAD_MARKER_START_ATTR}="1" />
+    ${managedHeadMarkup}
+    <meta ${RBSSR_HEAD_MARKER_END_ATTR}="1" />
   </head>
   <body>
     <div id="rbssr-root">${appMarkup}</div>
     ${deferredBootstrapScript}
     ${payloadScript}
+    ${routerScript}
     ${entryScript}
     ${devScript}
   </body>

package/framework/runtime/route-api.ts

@@ -11,7 +11,13 @@ export type {
   Params,
   RedirectResult,
   RequestContext,
+  RouteCatchContext,
+  RouteErrorContext,
+  RouteErrorResponse,
 } from "./types";
 
 export { defer, json, redirect } from "./helpers";
+export { isRouteErrorResponse, notFound, routeError } from "./route-errors";
+export { Link, type LinkProps } from "./link";
+export { useRouter, type Router, type RouterNavigateOptions } from "./router";
 export { Outlet, useLoaderData, useParams, useRequestUrl, useRouteError } from "./tree";

package/framework/runtime/route-errors.ts

@@ -0,0 +1,166 @@
+import type { RouteErrorResponse } from "./types";
+
+const ROUTE_ERROR_SYMBOL = Symbol.for("rbssr.route_error");
+const REDIRECT_MIN = 300;
+const REDIRECT_MAX = 399;
+
+interface InternalRouteError {
+  [ROUTE_ERROR_SYMBOL]: true;
+  response: RouteErrorResponse;
+}
+
+function isRedirectStatus(status: number): boolean {
+  return status >= REDIRECT_MIN && status <= REDIRECT_MAX;
+}
+
+function normalizeStatus(status: number): number {
+  if (!Number.isFinite(status) || status < 100 || status > 599) {
+    throw new Error("routeError(status, ...) requires an HTTP status between 100 and 599.");
+  }
+  return Math.trunc(status);
+}
+
+function defaultStatusText(status: number): string {
+  try {
+    return new Response(null, { status }).statusText || "Error";
+  } catch {
+    return "Error";
+  }
+}
+
+function headersToRecord(headersInit?: HeadersInit): Record<string, string> | undefined {
+  if (!headersInit) {
+    return undefined;
+  }
+  const headers = new Headers(headersInit);
+  const record: Record<string, string> = {};
+  let count = 0;
+  headers.forEach((value, key) => {
+    record[key] = value;
+    count += 1;
+  });
+  return count > 0 ? record : undefined;
+}
+
+export function createRouteErrorResponse(
+  status: number,
+  data?: unknown,
+  init: {
+    statusText?: string;
+    headers?: HeadersInit;
+  } = {},
+): RouteErrorResponse {
+  const normalizedStatus = normalizeStatus(status);
+  return {
+    type: "route_error",
+    status: normalizedStatus,
+    statusText: init.statusText ?? defaultStatusText(normalizedStatus),
+    data,
+    headers: headersToRecord(init.headers),
+  };
+}
+
+function isInternalRouteError(value: unknown): value is InternalRouteError {
+  return Boolean(
+    value
+      && typeof value === "object"
+      && (value as Partial<InternalRouteError>)[ROUTE_ERROR_SYMBOL] === true
+      && isRouteErrorResponse((value as Partial<InternalRouteError>).response),
+  );
+}
+
+export function routeError(
+  status: number,
+  data?: unknown,
+  init: {
+    statusText?: string;
+    headers?: HeadersInit;
+  } = {},
+): never {
+  const response = createRouteErrorResponse(status, data, init);
+  throw {
+    [ROUTE_ERROR_SYMBOL]: true,
+    response,
+  } satisfies InternalRouteError;
+}
+
+export function notFound(data?: unknown): never {
+  return routeError(404, data, { statusText: "Not Found" });
+}
+
+export function isRouteErrorResponse(value: unknown): value is RouteErrorResponse {
+  if (!value || typeof value !== "object") {
+    return false;
+  }
+
+  const candidate = value as Partial<RouteErrorResponse>;
+  return (
+    candidate.type === "route_error"
+    && typeof candidate.status === "number"
+    && Number.isFinite(candidate.status)
+    && typeof candidate.statusText === "string"
+  );
+}
+
+export function toRouteErrorResponse(value: unknown): RouteErrorResponse | null {
+  if (isInternalRouteError(value)) {
+    return value.response;
+  }
+
+  if (isRouteErrorResponse(value)) {
+    return value;
+  }
+
+  if (value instanceof Response) {
+    if (isRedirectStatus(value.status)) {
+      return null;
+    }
+
+    return createRouteErrorResponse(value.status, undefined, {
+      statusText: value.statusText,
+      headers: value.headers,
+    });
+  }
+
+  return null;
+}
+
+export function sanitizeRouteErrorResponse(
+  routeErrorResponse: RouteErrorResponse,
+  production: boolean,
+): RouteErrorResponse {
+  if (!production || routeErrorResponse.status < 500) {
+    return routeErrorResponse;
+  }
+
+  return {
+    ...routeErrorResponse,
+    statusText: "Internal Server Error",
+    data: undefined,
+  };
+}
+
+export function toRouteErrorHttpResponse(routeErrorResponse: RouteErrorResponse): Response {
+  const headers = new Headers(routeErrorResponse.headers);
+  const init = {
+    status: routeErrorResponse.status,
+    statusText: routeErrorResponse.statusText,
+    headers,
+  };
+
+  if (routeErrorResponse.data === undefined || routeErrorResponse.data === null) {
+    return new Response(null, init);
+  }
+
+  if (typeof routeErrorResponse.data === "string") {
+    if (!headers.has("content-type")) {
+      headers.set("content-type", "text/plain; charset=utf-8");
+    }
+    return new Response(routeErrorResponse.data, init);
+  }
+
+  if (!headers.has("content-type")) {
+    headers.set("content-type", "application/json; charset=utf-8");
+  }
+  return new Response(JSON.stringify(routeErrorResponse.data), init);
+}

package/framework/runtime/router.ts

@@ -0,0 +1,80 @@
+import { useMemo } from "react";
+import { goBack, goForward, reloadPage } from "./navigation-api";
+
+export interface RouterNavigateOptions {
+  scroll?: boolean;
+}
+
+export interface Router {
+  push(href: string, options?: RouterNavigateOptions): void;
+  replace(href: string, options?: RouterNavigateOptions): void;
+  prefetch(href: string): void;
+  back(): void;
+  forward(): void;
+  refresh(): void;
+}
+
+function toAbsoluteHref(href: string): string {
+  if (typeof window === "undefined") {
+    return href;
+  }
+  return new URL(href, window.location.href).toString();
+}
+
+const SERVER_ROUTER: Router = {
+  push: () => undefined,
+  replace: () => undefined,
+  prefetch: () => undefined,
+  back: () => undefined,
+  forward: () => undefined,
+  refresh: () => undefined,
+};
+
+function createClientRouter(): Router {
+  return {
+    push: (href, options) => {
+      const absoluteHref = toAbsoluteHref(href);
+      void import("./client-runtime")
+        .then(runtime => runtime.navigateWithNavigationApiOrFallback(absoluteHref, {
+          replace: false,
+          scroll: options?.scroll,
+        }))
+        .catch(() => {
+          window.location.assign(absoluteHref);
+        });
+    },
+    replace: (href, options) => {
+      const absoluteHref = toAbsoluteHref(href);
+      void import("./client-runtime")
+        .then(runtime => runtime.navigateWithNavigationApiOrFallback(absoluteHref, {
+          replace: true,
+          scroll: options?.scroll,
+        }))
+        .catch(() => {
+          window.location.replace(absoluteHref);
+        });
+    },
+    prefetch: href => {
+      const absoluteHref = toAbsoluteHref(href);
+      void import("./client-runtime")
+        .then(runtime => runtime.prefetchTo(absoluteHref))
+        .catch(() => undefined);
+    },
+    back: () => {
+      goBack();
+    },
+    forward: () => {
+      goForward();
+    },
+    refresh: () => {
+      reloadPage();
+    },
+  };
+}
+
+export function useRouter(): Router {
+  return useMemo(
+    () => (typeof window === "undefined" ? SERVER_ROUTER : createClientRouter()),
+    [],
+  );
+}

package/framework/runtime/runtime-constants.ts

@@ -0,0 +1,4 @@
+export const RBSSR_PAYLOAD_SCRIPT_ID = "__RBSSR_PAYLOAD__";
+export const RBSSR_ROUTER_SCRIPT_ID = "__RBSSR_ROUTER__";
+export const RBSSR_HEAD_MARKER_START_ATTR = "data-rbssr-head-start";
+export const RBSSR_HEAD_MARKER_END_ATTR = "data-rbssr-head-end";