react-bun-ssr 0.1.0 → 0.2.0

package/framework/runtime/client-transition-core.ts

@@ -0,0 +1,159 @@
+import { matchRouteBySegments } from "./matcher";
+import type {
+  ClientRouteSnapshot,
+  Params,
+  TransitionChunk,
+  TransitionDeferredChunk,
+  TransitionDocumentChunk,
+  TransitionInitialChunk,
+  TransitionRedirectChunk,
+} from "./types";
+
+export const PREFETCH_TTL_MS = 30_000;
+export const MAX_REDIRECT_DEPTH = 8;
+
+export interface TransitionChunkParserState {
+  buffer: string;
+  initialChunk: TransitionInitialChunk | TransitionRedirectChunk | TransitionDocumentChunk | null;
+  deferredChunks: TransitionDeferredChunk[];
+}
+
+export interface TransitionNavigationOptions {
+  historyManagedByNavigationApi?: boolean;
+  isPopState?: boolean;
+}
+
+export function createTransitionChunkParserState(): TransitionChunkParserState {
+  return {
+    buffer: "",
+    initialChunk: null,
+    deferredChunks: [],
+  };
+}
+
+export function matchClientPageRoute(
+  routes: ClientRouteSnapshot[],
+  pathname: string,
+): { route: ClientRouteSnapshot; params: Params } | null {
+  return matchRouteBySegments(routes, pathname);
+}
+
+function applyParsedTransitionChunk(
+  state: TransitionChunkParserState,
+  chunk: TransitionChunk,
+): TransitionChunkParserState {
+  if (chunk.type === "initial" || chunk.type === "redirect" || chunk.type === "document") {
+    if (state.initialChunk) {
+      return state;
+    }
+
+    return {
+      ...state,
+      initialChunk: chunk,
+    };
+  }
+
+  return {
+    ...state,
+    deferredChunks: [...state.deferredChunks, chunk],
+  };
+}
+
+export function consumeTransitionChunkText(
+  state: TransitionChunkParserState,
+  text: string,
+): TransitionChunkParserState {
+  let buffer = state.buffer + text;
+  let nextState = {
+    ...state,
+    buffer: "",
+  };
+
+  let start = 0;
+  for (let index = 0; index < buffer.length; index += 1) {
+    if (buffer[index] !== "\n") {
+      continue;
+    }
+
+    const line = buffer.slice(start, index).trim();
+    if (line.length > 0) {
+      nextState = applyParsedTransitionChunk(
+        nextState,
+        JSON.parse(line) as TransitionChunk,
+      );
+    }
+    start = index + 1;
+  }
+
+  buffer = buffer.slice(start);
+  return {
+    ...nextState,
+    buffer,
+  };
+}
+
+export function flushTransitionChunkText(
+  state: TransitionChunkParserState,
+): TransitionChunkParserState {
+  const trailing = state.buffer.trim();
+  if (trailing.length === 0) {
+    return {
+      ...state,
+      buffer: "",
+    };
+  }
+
+  return {
+    ...applyParsedTransitionChunk(
+      {
+        ...state,
+        buffer: "",
+      },
+      JSON.parse(trailing) as TransitionChunk,
+    ),
+    buffer: "",
+  };
+}
+
+export function sanitizePrefetchCache<T extends { createdAt: number }>(
+  cache: Map<string, T>,
+  options: {
+    now?: number;
+    ttlMs?: number;
+  } = {},
+): void {
+  const now = options.now ?? Date.now();
+  const ttlMs = options.ttlMs ?? PREFETCH_TTL_MS;
+
+  for (const [key, entry] of cache.entries()) {
+    if (now - entry.createdAt > ttlMs) {
+      cache.delete(key);
+    }
+  }
+}
+
+export function shouldSkipSoftNavigation(
+  currentPath: string,
+  targetPath: string,
+  options: TransitionNavigationOptions,
+): boolean {
+  return (
+    currentPath === targetPath
+    && !options.isPopState
+    && !options.historyManagedByNavigationApi
+  );
+}
+
+export function shouldHardNavigateForRedirectDepth(
+  depth: number,
+  maxDepth = MAX_REDIRECT_DEPTH,
+): boolean {
+  return depth > maxDepth;
+}
+
+export function isStaleNavigationToken(
+  activeToken: number,
+  candidateToken: number,
+): boolean {
+  return activeToken !== candidateToken;
+}

package/framework/runtime/config.ts

@@ -101,6 +101,8 @@ export function resolveConfig(config: FrameworkConfig = {}, cwd = process.cwd())
   const rootModule = path.resolve(appDir, config.rootModule ?? "root.tsx");
   const middlewareFile = path.resolve(appDir, config.middlewareFile ?? "middleware.ts");
   const distDir = path.resolve(cwd, config.distDir ?? "dist");
+  const mode = config.mode ?? (process.env.NODE_ENV === "production" ? "production" : "development");
+  const serverBytecode = config.serverBytecode ?? mode === "production";
   const headerRules = toHeaderRules(config);
 
   return {
@@ -113,7 +115,8 @@ export function resolveConfig(config: FrameworkConfig = {}, cwd = process.cwd())
     distDir,
     host: config.host ?? "0.0.0.0",
     port: config.port ?? 3000,
-    mode: config.mode ?? (process.env.NODE_ENV === "production" ? "production" : "development"),
+    mode,
+    serverBytecode,
     headerRules,
   };
 }

package/framework/runtime/index.ts

@@ -16,9 +16,15 @@ export type {
   RedirectResult,
   ResponseHeaderRule,
   RequestContext,
+  RouteCatchContext,
+  RouteErrorContext,
+  RouteErrorResponse,
   RouteModule,
 } from "./types";
 
 export { createServer, startHttpServer } from "./server";
 export { defer, json, redirect, defineConfig } 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/io.ts

@@ -122,7 +122,7 @@ export async function listEntries(dirPath: string): Promise<FileEntry[]> {
 }
 
 export async function makeTempDir(prefix: string): Promise<string> {
-  const dirPath = path.join("/tmp", `${prefix}-${crypto.randomUUID()}`);
+  const dirPath = path.join("/tmp", `${prefix}-${Bun.randomUUIDv7()}`);
   await ensureDir(dirPath);
   return dirPath;
 }

package/framework/runtime/link.tsx

@@ -0,0 +1,205 @@
+import type {
+  AnchorHTMLAttributes,
+  FocusEvent,
+  MouseEvent,
+  TouchEvent,
+} from "react";
+
+interface NavigateInfo {
+  from: string;
+  to: string;
+  status: number;
+  kind: "page" | "not_found" | "catch" | "error";
+  redirected: boolean;
+  prefetched: boolean;
+}
+
+export interface LinkProps
+  extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
+  to: string;
+  replace?: boolean;
+  scroll?: boolean;
+  prefetch?: "intent" | "none";
+  onNavigate?: (info: NavigateInfo) => void;
+}
+
+function shouldHandleNavigation(event: MouseEvent<HTMLAnchorElement>): boolean {
+  if (event.defaultPrevented) {
+    return false;
+  }
+
+  if (event.button !== 0) {
+    return false;
+  }
+
+  if (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey) {
+    return false;
+  }
+
+  return true;
+}
+
+function toAbsoluteHref(to: string): string {
+  if (typeof window === "undefined") {
+    return to;
+  }
+  return new URL(to, window.location.href).toString();
+}
+
+function isInternalHref(href: string): boolean {
+  if (typeof window === "undefined") {
+    return false;
+  }
+
+  try {
+    const url = new URL(href, window.location.href);
+    return url.origin === window.location.origin;
+  } catch {
+    return false;
+  }
+}
+
+function isSameDocumentHashNavigation(href: string): boolean {
+  if (typeof window === "undefined") {
+    return false;
+  }
+
+  try {
+    const target = new URL(href, window.location.href);
+    return (
+      target.origin === window.location.origin
+      && target.pathname === window.location.pathname
+      && target.search === window.location.search
+      && target.hash.length > 0
+    );
+  } catch {
+    return false;
+  }
+}
+
+async function prefetch(href: string): Promise<void> {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  const runtime = await import("./client-runtime");
+  await runtime.prefetchTo(href);
+}
+
+async function navigate(href: string, options: {
+  replace?: boolean;
+  scroll?: boolean;
+  onNavigate?: (info: NavigateInfo) => void;
+}): Promise<void> {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  const runtime = await import("./client-runtime");
+  await runtime.navigateWithNavigationApiOrFallback(href, {
+    replace: options.replace,
+    scroll: options.scroll,
+    onNavigate: options.onNavigate,
+  });
+}
+
+export function Link(props: LinkProps) {
+  const {
+    to,
+    replace = false,
+    scroll = true,
+    prefetch: prefetchMode = "intent",
+    onNavigate,
+    onMouseEnter,
+    onTouchStart,
+    onFocus,
+    onClick,
+    target,
+    rel,
+    download,
+    ...rest
+  } = props;
+
+  const href = to;
+  const resolvedHref = toAbsoluteHref(to);
+
+  const maybePrefetch = (): void => {
+    if (prefetchMode !== "intent") {
+      return;
+    }
+
+    if (!isInternalHref(resolvedHref)) {
+      return;
+    }
+
+    void prefetch(resolvedHref);
+  };
+
+  const handleMouseEnter = (event: MouseEvent<HTMLAnchorElement>): void => {
+    onMouseEnter?.(event);
+    if (event.defaultPrevented) {
+      return;
+    }
+    maybePrefetch();
+  };
+
+  const handleTouchStart = (event: TouchEvent<HTMLAnchorElement>): void => {
+    onTouchStart?.(event);
+    if (event.defaultPrevented) {
+      return;
+    }
+    maybePrefetch();
+  };
+
+  const handleFocus = (event: FocusEvent<HTMLAnchorElement>): void => {
+    onFocus?.(event);
+    if (event.defaultPrevented) {
+      return;
+    }
+    maybePrefetch();
+  };
+
+  const handleClick = (event: MouseEvent<HTMLAnchorElement>): void => {
+    onClick?.(event);
+    if (!shouldHandleNavigation(event)) {
+      return;
+    }
+
+    if (download !== undefined) {
+      return;
+    }
+
+    if (target && target !== "_self") {
+      return;
+    }
+
+    if (!isInternalHref(resolvedHref)) {
+      return;
+    }
+
+    if (isSameDocumentHashNavigation(resolvedHref)) {
+      return;
+    }
+
+    event.preventDefault();
+    void navigate(resolvedHref, {
+      replace,
+      scroll,
+      onNavigate,
+    });
+  };
+
+  return (
+    <a
+      {...rest}
+      href={href}
+      target={target}
+      rel={rel}
+      download={download}
+      onClick={handleClick}
+      onMouseEnter={handleMouseEnter}
+      onTouchStart={handleTouchStart}
+      onFocus={handleFocus}
+    />
+  );
+}

package/framework/runtime/markdown-headings.ts

@@ -0,0 +1,54 @@
+export interface MarkdownHeadingEntry {
+  text: string;
+  id: string;
+  depth: number;
+}
+
+function decodeHtml(value: string): string {
+  return value
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;/g, "'")
+    .replace(/&amp;/g, '&');
+}
+
+function plainTextFromHtml(value: string): string {
+  return decodeHtml(value.replace(/<[^>]+>/g, ' ').replace(/\s+/g, ' ').trim());
+}
+
+function slugifyHeading(value: string): string {
+  const slug = value
+    .toLowerCase()
+    .normalize('NFKD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '');
+
+  return slug || 'section';
+}
+
+export function addHeadingIds(html: string): string {
+  const seen = new Map<string, number>();
+
+  return html.replace(/<h([1-6])(\b[^>]*)>([\s\S]*?)<\/h\1>/g, (match, depth, attrs, inner) => {
+    const existingId = /\sid="([^"]+)"/.exec(attrs)?.[1];
+    if (existingId) {
+      return match;
+    }
+
+    const base = slugifyHeading(plainTextFromHtml(inner));
+    const count = seen.get(base) ?? 0;
+    seen.set(base, count + 1);
+    const id = count === 0 ? base : `${base}-${count + 1}`;
+    return `<h${depth}${attrs} id="${Bun.escapeHTML(id)}">${inner}</h${depth}>`;
+  });
+}
+
+export function extractHeadingEntriesFromHtml(html: string): MarkdownHeadingEntry[] {
+  return Array.from(html.matchAll(/<h([1-6])\b[^>]*id="([^"]+)"[^>]*>([\s\S]*?)<\/h\1>/g)).map(match => ({
+    depth: Number(match[1]),
+    id: match[2] ?? '',
+    text: plainTextFromHtml(match[3] ?? ''),
+  }));
+}

package/framework/runtime/markdown-routes.ts

@@ -1,10 +1,10 @@
 import path from "node:path";
+import { addHeadingIds } from "./markdown-headings";
 import { existsPath, readText, writeTextIfChanged } from "./io";
 import { normalizeSlashes, stableHash, trimFileExtension } from "./utils";
 
 const compiledMarkdownCache = new Map<string, { sourceHash: string; outputPath: string }>();
-const REQUIRED_FRONTMATTER_FIELDS = ["title", "description", "section", "order"] as const;
-const MARKDOWN_WRAPPER_VERSION = "2";
+const MARKDOWN_WRAPPER_VERSION = "3";
 
 interface ParsedFrontmatter {
   title?: string;
@@ -22,15 +22,6 @@ function decodeHtml(value: string): string {
     .replace(/&amp;/g, "&");
 }
 
-function escapeHtml(value: string): string {
-  return value
-    .replace(/&/g, "&amp;")
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;")
-    .replace(/\"/g, "&quot;")
-    .replace(/'/g, "&#39;");
-}
-
 function highlightWithRegex(
   source: string,
   regex: RegExp,
@@ -45,16 +36,16 @@ function highlightWithRegex(
     const index = match.index;
 
     if (index > cursor) {
-      html += escapeHtml(source.slice(cursor, index));
+      html += Bun.escapeHTML(source.slice(cursor, index));
     }
 
-    html += `<span class="token ${classify(value)}">${escapeHtml(value)}</span>`;
+    html += `<span class="token ${classify(value)}">${Bun.escapeHTML(value)}</span>`;
     cursor = index + value.length;
     match = regex.exec(source);
   }
 
   if (cursor < source.length) {
-    html += escapeHtml(source.slice(cursor));
+    html += Bun.escapeHTML(source.slice(cursor));
   }
 
   return html;
@@ -96,7 +87,7 @@ function highlightCode(source: string, language: string): string {
     });
   }
 
-  return escapeHtml(source);
+  return Bun.escapeHTML(source);
 }
 
 function applySyntaxHighlight(html: string): string {
@@ -105,7 +96,7 @@ function applySyntaxHighlight(html: string): string {
     (_match, language: string, rawCode: string) => {
       const code = decodeHtml(rawCode);
       const highlighted = highlightCode(code, language);
-      return `<pre><code class="language-${escapeHtml(language)}">${highlighted}</code></pre>`;
+      return `<pre><code class="language-${Bun.escapeHTML(language)}">${highlighted}</code></pre>`;
     },
   );
 }
@@ -121,24 +112,11 @@ function resolveGeneratedRoot(routesDir: string, generatedMarkdownRootDir?: stri
     return path.resolve(appRoutesMatch[1]!, ".rbssr", "generated", "markdown-routes");
   }
 
-  const snapshotRoutesMatch = normalizedRoutesDir.match(
-    /^(.*)\/\.rbssr\/dev\/server-snapshots\/v\d+\/routes$/,
-  );
-  if (snapshotRoutesMatch) {
-    return path.resolve(snapshotRoutesMatch[1]!, ".rbssr", "generated", "markdown-routes");
-  }
-
   return path.resolve(routesDir, "..", ".rbssr", "generated", "markdown-routes");
 }
 
 function toRouteGroupKey(routesDir: string): string {
-  const normalized = normalizeSlashes(path.resolve(routesDir));
-  const canonical = normalized.replace(
-    /\/\.rbssr\/dev\/server-snapshots\/v\d+\/routes$/,
-    "/.rbssr/dev/server-snapshots/routes",
-  );
-
-  return stableHash(`${MARKDOWN_WRAPPER_VERSION}\0${canonical}`);
+  return stableHash(`${MARKDOWN_WRAPPER_VERSION}\0${normalizeSlashes(path.resolve(routesDir))}`);
 }
 
 function parseFrontmatter(raw: string): {
@@ -172,15 +150,6 @@ function parseFrontmatter(raw: string): {
     values.set(key, value);
   }
 
-  for (const key of REQUIRED_FRONTMATTER_FIELDS) {
-    if (!values.has(key)) {
-      return {
-        frontmatter: { tags: [] },
-        markdown: raw,
-      };
-    }
-  }
-
   const tags = (values.get("tags") ?? "")
     .split(",")
     .map(value => value.trim())
@@ -304,7 +273,7 @@ export async function compileMarkdownRouteModule(options: {
   }
 
   const parsed = parseFrontmatter(markdownSource);
-  const highlightedHtml = applySyntaxHighlight(Bun.markdown.html(parsed.markdown));
+  const highlightedHtml = applySyntaxHighlight(addHeadingIds(Bun.markdown.html(parsed.markdown)));
   const html = parsed.frontmatter.title ? stripLeadingH1(highlightedHtml) : highlightedHtml;
   await writeFileIfChanged(
     outputPath,

package/framework/runtime/matcher.ts

@@ -60,10 +60,10 @@ function matchSegments(segments: RouteSegment[], pathname: string): Params | nul
   return params;
 }
 
-export function matchPageRoute(
-  routes: PageRouteDefinition[],
+export function matchRouteBySegments<T extends { segments: RouteSegment[] }>(
+  routes: T[],
   pathname: string,
-): RouteMatch<PageRouteDefinition> | null {
+): { route: T; params: Params } | null {
   for (const route of routes) {
     const params = matchSegments(route.segments, pathname);
     if (params) {
@@ -74,16 +74,16 @@ export function matchPageRoute(
   return null;
 }
 
+export function matchPageRoute(
+  routes: PageRouteDefinition[],
+  pathname: string,
+): RouteMatch<PageRouteDefinition> | null {
+  return matchRouteBySegments(routes, pathname);
+}
+
 export function matchApiRoute(
   routes: ApiRouteDefinition[],
   pathname: string,
 ): RouteMatch<ApiRouteDefinition> | null {
-  for (const route of routes) {
-    const params = matchSegments(route.segments, pathname);
-    if (params) {
-      return { route, params };
-    }
-  }
-
-  return null;
+  return matchRouteBySegments(routes, pathname);
 }