react-bun-ssr 0.1.1 → 0.3.0

package/framework/runtime/client-runtime.tsx

@@ -1,4 +1,14 @@
 import { hydrateRoot, type Root } from "react-dom/client";
+import {
+  consumeTransitionChunkText,
+  createTransitionChunkParserState,
+  flushTransitionChunkText,
+  isStaleNavigationToken,
+  matchClientPageRoute,
+  sanitizePrefetchCache,
+  shouldHardNavigateForRedirectDepth,
+  shouldSkipSoftNavigation,
+} from "./client-transition-core";
 import { isDeferredToken } from "./deferred";
 import {
   addNavigationNavigateListener,
@@ -21,14 +31,12 @@ import {
 } from "./tree";
 import { isRouteErrorResponse } from "./route-errors";
 import type {
-  ClientRouteSnapshot,
   ClientRouterSnapshot,
-  Params,
   RenderPayload,
   RouteModule,
   RouteModuleBundle,
-  TransitionChunk,
   TransitionDeferredChunk,
+  TransitionDocumentChunk,
   TransitionInitialChunk,
   TransitionRedirectChunk,
 } from "./types";
@@ -52,6 +60,7 @@ interface NavigateOptions {
 interface NavigateResult {
   from: string;
   to: string;
+  nextUrl: URL;
   status: number;
   kind: "page" | "not_found" | "catch" | "error";
   redirected: boolean;
@@ -61,7 +70,7 @@ interface NavigateResult {
 interface PrefetchEntry {
   createdAt: number;
   modulePromise: Promise<void>;
-  initialPromise: Promise<TransitionInitialChunk | TransitionRedirectChunk | null>;
+  initialPromise: Promise<TransitionInitialChunk | TransitionRedirectChunk | TransitionDocumentChunk | null>;
   donePromise: Promise<void>;
 }
 
@@ -71,7 +80,7 @@ interface TransitionRequestOptions {
 }
 
 interface TransitionRequestHandle {
-  initialPromise: Promise<TransitionInitialChunk | TransitionRedirectChunk | null>;
+  initialPromise: Promise<TransitionInitialChunk | TransitionRedirectChunk | TransitionDocumentChunk | null>;
   donePromise: Promise<void>;
 }
 
@@ -120,86 +129,82 @@ interface RuntimeState {
   transitionAbortController: AbortController | null;
 }
 
+interface ClientRuntimeSingleton {
+  moduleRegistry: Map<string, RouteModuleBundle>;
+  pendingNavigationTransitions: Map<string, PendingNavigationTransition>;
+  navigationListeners: Set<(info: NavigateResult) => void>;
+  runtimeState: RuntimeState | null;
+  popstateBound: boolean;
+  navigationApiListenerBound: boolean;
+  navigationApiTransitionCounter: number;
+}
+
 declare global {
   interface Window {
     __RBSSR_DEFERRED__?: DeferredClientRuntime;
   }
 }
 
-const PREFETCH_TTL_MS = 30_000;
 const NAVIGATION_API_PENDING_TIMEOUT_MS = 1_500;
 const NAVIGATION_API_PENDING_MATCH_WINDOW_MS = 10_000;
 const ROUTE_ANNOUNCER_ID = "__rbssr-route-announcer";
-const moduleRegistry = new Map<string, RouteModuleBundle>();
-const pendingNavigationTransitions = new Map<string, PendingNavigationTransition>();
-let runtimeState: RuntimeState | null = null;
-let popstateBound = false;
-let navigationApiListenerBound = false;
-let navigationApiTransitionCounter = 0;
-
-function normalizePathname(pathname: string): string[] {
-  if (!pathname || pathname === "/") {
-    return [];
-  }
-
-  return pathname
-    .replace(/^\/+/, "")
-    .replace(/\/+$/, "")
-    .split("/")
-    .filter(Boolean)
-    .map(part => decodeURIComponent(part));
-}
-
-function matchSegments(segments: ClientRouteSnapshot["segments"], pathname: string): Params | null {
-  const pathParts = normalizePathname(pathname);
-  const params: Params = {};
+const CLIENT_RUNTIME_SINGLETON_KEY = Symbol.for("react-bun-ssr.client-runtime");
 
-  let i = 0;
-  let j = 0;
-
-  while (i < segments.length) {
-    const segment = segments[i]!;
+function getClientRuntimeSingleton(): ClientRuntimeSingleton {
+  const globalRegistry = globalThis as typeof globalThis & {
+    [CLIENT_RUNTIME_SINGLETON_KEY]?: ClientRuntimeSingleton;
+  };
+  const existing = globalRegistry[CLIENT_RUNTIME_SINGLETON_KEY];
+  if (existing) {
+    return existing;
+  }
 
-    if (segment.kind === "catchall") {
-      params[segment.value] = pathParts.slice(j).join("/");
-      return params;
-    }
+  const singleton: ClientRuntimeSingleton = {
+    moduleRegistry: new Map(),
+    pendingNavigationTransitions: new Map(),
+    navigationListeners: new Set(),
+    runtimeState: null,
+    popstateBound: false,
+    navigationApiListenerBound: false,
+    navigationApiTransitionCounter: 0,
+  };
+  globalRegistry[CLIENT_RUNTIME_SINGLETON_KEY] = singleton;
+  return singleton;
+}
 
-    const current = pathParts[j];
-    if (current === undefined) {
-      return null;
-    }
+const clientRuntimeSingleton = getClientRuntimeSingleton();
 
-    if (segment.kind === "static") {
-      if (segment.value !== current) {
-        return null;
-      }
-    } else {
-      params[segment.value] = current;
+function emitNavigation(info: NavigateResult): void {
+  for (const listener of clientRuntimeSingleton.navigationListeners) {
+    try {
+      listener(info);
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.warn("[rbssr] router navigation listener failed", error);
     }
-
-    i += 1;
-    j += 1;
-  }
-
-  if (j !== pathParts.length) {
-    return null;
   }
+}
 
-  return params;
+function pickOptionalClientModuleExport<T>(
+  moduleValue: Record<string, unknown>,
+  exportName: string,
+): T | undefined {
+  const value = moduleValue[exportName];
+  return typeof value === "function" ? (value as T) : undefined;
 }
 
-function matchPageRoute(
-  routes: ClientRouteSnapshot[],
-  pathname: string,
-): { route: ClientRouteSnapshot; params: Params } | null {
-  for (const route of routes) {
-    const params = matchSegments(route.segments, pathname);
-    if (params) {
-      return { route, params };
-    }
-  }
-  return null;
+export function projectClientModule(
+  defaultExport: RouteModule["default"],
+  moduleValue: Record<string, unknown>,
+): RouteModule {
+  return {
+    default: defaultExport,
+    Loading: pickOptionalClientModuleExport<RouteModule["Loading"]>(moduleValue, "Loading"),
+    ErrorComponent: pickOptionalClientModuleExport<RouteModule["ErrorComponent"]>(moduleValue, "ErrorComponent"),
+    CatchBoundary: pickOptionalClientModuleExport<RouteModule["CatchBoundary"]>(moduleValue, "CatchBoundary"),
+    ErrorBoundary: pickOptionalClientModuleExport<RouteModule["ErrorBoundary"]>(moduleValue, "ErrorBoundary"),
+    NotFound: pickOptionalClientModuleExport<RouteModule["NotFound"]>(moduleValue, "NotFound"),
+  };
 }
 
 function withVersionQuery(url: string, version?: number): string {
@@ -327,18 +332,18 @@ function readNavigationDestinationHref(event: NavigateEventLike): string | null
 }
 
 function clearPendingNavigationTransition(id: string): void {
-  const entry = pendingNavigationTransitions.get(id);
+  const entry = clientRuntimeSingleton.pendingNavigationTransitions.get(id);
   if (!entry) {
     return;
   }
 
   clearTimeout(entry.timeoutId);
-  pendingNavigationTransitions.delete(id);
+  clientRuntimeSingleton.pendingNavigationTransitions.delete(id);
 }
 
 function findPendingTransitionForEvent(event: NavigateEventLike): PendingNavigationTransition | null {
   if (isFrameworkNavigationInfo(event.info)) {
-    return pendingNavigationTransitions.get(event.info.id) ?? null;
+    return clientRuntimeSingleton.pendingNavigationTransitions.get(event.info.id) ?? null;
   }
 
   if (event.userInitiated) {
@@ -352,7 +357,7 @@ function findPendingTransitionForEvent(event: NavigateEventLike): PendingNavigat
 
   const now = Date.now();
   let bestMatch: PendingNavigationTransition | null = null;
-  for (const candidate of pendingNavigationTransitions.values()) {
+  for (const candidate of clientRuntimeSingleton.pendingNavigationTransitions.values()) {
     if (candidate.destinationHref !== destinationHref) {
       continue;
     }
@@ -395,20 +400,11 @@ function reviveDeferredPayload(payload: RenderPayload): RenderPayload {
 }
 
 function ensureRuntimeState(): RuntimeState {
-  if (!runtimeState) {
+  if (!clientRuntimeSingleton.runtimeState) {
     throw new Error("Client runtime is not initialized. Ensure hydrateInitialRoute() ran first.");
   }
 
-  return runtimeState;
-}
-
-function sanitizePrefetchCache(cache: Map<string, PrefetchEntry>): void {
-  const now = Date.now();
-  for (const [key, entry] of cache.entries()) {
-    if (now - entry.createdAt > PREFETCH_TTL_MS) {
-      cache.delete(key);
-    }
-  }
+  return clientRuntimeSingleton.runtimeState;
 }
 
 function createTransitionUrl(toUrl: URL): URL {
@@ -417,35 +413,17 @@ function createTransitionUrl(toUrl: URL): URL {
   return transitionUrl;
 }
 
-function splitLines(buffer: string): { lines: string[]; rest: string } {
-  const lines: string[] = [];
-  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) {
-      lines.push(line);
-    }
-    start = index + 1;
-  }
-
-  return {
-    lines,
-    rest: buffer.slice(start),
-  };
-}
-
 function startTransitionRequest(
   toUrl: URL,
   options: TransitionRequestOptions = {},
 ): TransitionRequestHandle {
-  let resolveInitial: (value: TransitionInitialChunk | TransitionRedirectChunk | null) => void = () => undefined;
+  let resolveInitial: (
+    value: TransitionInitialChunk | TransitionRedirectChunk | TransitionDocumentChunk | null,
+  ) => void = () => undefined;
   let rejectInitial: (reason?: unknown) => void = () => undefined;
-  const initialPromise = new Promise<TransitionInitialChunk | TransitionRedirectChunk | null>((resolve, reject) => {
+  const initialPromise = new Promise<
+    TransitionInitialChunk | TransitionRedirectChunk | TransitionDocumentChunk | null
+  >((resolve, reject) => {
     resolveInitial = resolve;
     rejectInitial = reject;
   });
@@ -464,8 +442,7 @@ function startTransitionRequest(
 
     const reader = response.body.getReader();
     const decoder = new TextDecoder();
-    let initialChunk: TransitionInitialChunk | TransitionRedirectChunk | null = null;
-    let textBuffer = "";
+    let parserState = createTransitionChunkParserState();
 
     while (true) {
       const { done, value } = await reader.read();
@@ -473,38 +450,35 @@ function startTransitionRequest(
         break;
       }
 
-      textBuffer += decoder.decode(value, { stream: true });
-      const { lines, rest } = splitLines(textBuffer);
-      textBuffer = rest;
+      const previousInitialChunk = parserState.initialChunk;
+      const previousDeferredCount = parserState.deferredChunks.length;
+      parserState = consumeTransitionChunkText(
+        parserState,
+        decoder.decode(value, { stream: true }),
+      );
 
-      for (const line of lines) {
-        const chunk = JSON.parse(line) as TransitionChunk;
-        if (chunk.type === "initial" || chunk.type === "redirect") {
-          if (!initialChunk) {
-            initialChunk = chunk;
-            resolveInitial(initialChunk);
-          }
-          continue;
-        }
+      if (!previousInitialChunk && parserState.initialChunk) {
+        resolveInitial(parserState.initialChunk);
+      }
 
+      for (const chunk of parserState.deferredChunks.slice(previousDeferredCount)) {
         options.onDeferredChunk?.(chunk);
       }
     }
 
-    const trailing = textBuffer.trim();
-    if (trailing.length > 0) {
-      const chunk = JSON.parse(trailing) as TransitionChunk;
-      if (chunk.type === "initial" || chunk.type === "redirect") {
-        if (!initialChunk) {
-          initialChunk = chunk;
-          resolveInitial(initialChunk);
-        }
-      } else {
-        options.onDeferredChunk?.(chunk);
-      }
+    const previousInitialChunk = parserState.initialChunk;
+    const previousDeferredCount = parserState.deferredChunks.length;
+    parserState = flushTransitionChunkText(parserState);
+
+    if (!previousInitialChunk && parserState.initialChunk) {
+      resolveInitial(parserState.initialChunk);
     }
 
-    if (!initialChunk) {
+    for (const chunk of parserState.deferredChunks.slice(previousDeferredCount)) {
+      options.onDeferredChunk?.(chunk);
+    }
+
+    if (!parserState.initialChunk) {
       resolveInitial(null);
     }
   })();
@@ -534,7 +508,7 @@ function applyDeferredChunk(chunk: TransitionDeferredChunk): void {
 }
 
 async function ensureRouteModuleLoaded(routeId: string, snapshot: ClientRouterSnapshot): Promise<void> {
-  if (moduleRegistry.has(routeId)) {
+  if (clientRuntimeSingleton.moduleRegistry.has(routeId)) {
     return;
   }
 
@@ -877,6 +851,7 @@ async function renderTransitionInitial(
   return {
     from: options.fromPath,
     to: toUrl.pathname + toUrl.search + toUrl.hash,
+    nextUrl: new URL(toUrl.toString()),
     status: chunk.status,
     kind: chunk.kind,
     redirected: options.redirected ?? false,
@@ -917,11 +892,11 @@ async function navigateToInternal(
   const currentPath = window.location.pathname + window.location.search + window.location.hash;
   const targetPath = toUrl.pathname + toUrl.search + toUrl.hash;
 
-  if (currentPath === targetPath && !options.isPopState && !options.historyManagedByNavigationApi) {
+  if (shouldSkipSoftNavigation(currentPath, targetPath, options)) {
     return null;
   }
 
-  const matched = matchPageRoute(state.routerSnapshot.pages, toUrl.pathname);
+  const matched = matchClientPageRoute(state.routerSnapshot.pages, toUrl.pathname);
   const routeId = matched?.route.id ?? null;
 
   if (state.transitionAbortController) {
@@ -942,7 +917,7 @@ async function navigateToInternal(
 
   try {
     await prefetchEntry.modulePromise;
-    if (navigationToken !== state.navigationToken) {
+    if (isStaleNavigationToken(state.navigationToken, navigationToken)) {
       return null;
     }
 
@@ -965,7 +940,7 @@ async function navigateToInternal(
     }
 
     const initialChunk = await prefetchEntry.initialPromise;
-    if (navigationToken !== state.navigationToken) {
+    if (isStaleNavigationToken(state.navigationToken, navigationToken)) {
       return null;
     }
 
@@ -973,6 +948,11 @@ async function navigateToInternal(
       throw new Error("Transition response did not include an initial payload.");
     }
 
+    if (initialChunk.type === "document") {
+      hardNavigate(new URL(initialChunk.location, window.location.origin));
+      return null;
+    }
+
     if (initialChunk.type === "redirect") {
       const redirectUrl = new URL(initialChunk.location, window.location.origin);
       if (!isInternalUrl(redirectUrl)) {
@@ -981,7 +961,7 @@ async function navigateToInternal(
       }
 
       const depth = (options.redirectDepth ?? 0) + 1;
-      if (depth > 8) {
+      if (shouldHardNavigateForRedirectDepth(depth)) {
         hardNavigate(redirectUrl);
         return null;
       }
@@ -991,6 +971,9 @@ async function navigateToInternal(
         replace: true,
         redirected: true,
         redirectDepth: depth,
+        // The intercepted navigation has already committed the source URL.
+        // The redirected target must update history explicitly.
+        historyManagedByNavigationApi: false,
       });
     }
 
@@ -1000,6 +983,7 @@ async function navigateToInternal(
       fromPath: currentPath,
     });
     options.onNavigate?.(result);
+    emitNavigation(result);
     return result;
   } catch {
     hardNavigate(toUrl);
@@ -1012,8 +996,8 @@ async function navigateToInternal(
 }
 
 function nextNavigationTransitionId(): string {
-  navigationApiTransitionCounter += 1;
-  return `rbssr-nav-${Date.now()}-${navigationApiTransitionCounter}`;
+  clientRuntimeSingleton.navigationApiTransitionCounter += 1;
+  return `rbssr-nav-${Date.now()}-${clientRuntimeSingleton.navigationApiTransitionCounter}`;
 }
 
 function settlePendingNavigationTransition(
@@ -1030,7 +1014,7 @@ function settlePendingNavigationTransition(
 }
 
 function cancelPendingNavigationTransition(id: string): void {
-  const pending = pendingNavigationTransitions.get(id);
+  const pending = clientRuntimeSingleton.pendingNavigationTransitions.get(id);
   if (!pending || pending.settled) {
     return;
   }
@@ -1066,7 +1050,7 @@ function createPendingNavigationTransition(options: {
 }): Promise<NavigateResult | null> {
   return new Promise(resolve => {
     const timeoutId = window.setTimeout(() => {
-      const pending = pendingNavigationTransitions.get(options.id);
+      const pending = clientRuntimeSingleton.pendingNavigationTransitions.get(options.id);
       if (!pending || pending.settled) {
         return;
       }
@@ -1082,7 +1066,7 @@ function createPendingNavigationTransition(options: {
       });
     }, NAVIGATION_API_PENDING_TIMEOUT_MS);
 
-    pendingNavigationTransitions.set(options.id, {
+    clientRuntimeSingleton.pendingNavigationTransitions.set(options.id, {
       id: options.id,
       destinationHref: options.toUrl.toString(),
       replace: options.replace,
@@ -1097,7 +1081,7 @@ function createPendingNavigationTransition(options: {
 }
 
 function bindNavigationApiNavigateListener(): void {
-  if (navigationApiListenerBound || typeof window === "undefined") {
+  if (clientRuntimeSingleton.navigationApiListenerBound || typeof window === "undefined") {
     return;
   }
 
@@ -1157,15 +1141,15 @@ function bindNavigationApiNavigateListener(): void {
     return;
   }
 
-  navigationApiListenerBound = true;
+  clientRuntimeSingleton.navigationApiListenerBound = true;
 }
 
 function bindPopstate(): void {
-  if (popstateBound || typeof window === "undefined") {
+  if (clientRuntimeSingleton.popstateBound || typeof window === "undefined") {
     return;
   }
 
-  popstateBound = true;
+  clientRuntimeSingleton.popstateBound = true;
   window.addEventListener("popstate", () => {
     const targetUrl = new URL(window.location.href);
     void navigateToInternal(targetUrl, {
@@ -1181,16 +1165,16 @@ export async function prefetchTo(to: string): Promise<void> {
     return;
   }
 
-  if (!runtimeState) {
+  if (!clientRuntimeSingleton.runtimeState) {
     return;
   }
-  const state = runtimeState;
+  const state = clientRuntimeSingleton.runtimeState;
   const toUrl = new URL(to, window.location.href);
   if (!isInternalUrl(toUrl)) {
     return;
   }
 
-  const matched = matchPageRoute(state.routerSnapshot.pages, toUrl.pathname);
+  const matched = matchClientPageRoute(state.routerSnapshot.pages, toUrl.pathname);
   const routeId = matched?.route.id ?? null;
   getOrCreatePrefetchEntry(toUrl, routeId, state.routerSnapshot);
 }
@@ -1209,7 +1193,7 @@ export async function navigateWithNavigationApiOrFallback(
     return null;
   }
 
-  if (!runtimeState) {
+  if (!clientRuntimeSingleton.runtimeState) {
     hardNavigate(toUrl);
     return null;
   }
@@ -1264,7 +1248,7 @@ export async function navigateTo(to: string, options: NavigateOptions = {}): Pro
     return null;
   }
 
-  if (!runtimeState) {
+  if (!clientRuntimeSingleton.runtimeState) {
     hardNavigate(toUrl);
     return null;
   }
@@ -1272,21 +1256,28 @@ export async function navigateTo(to: string, options: NavigateOptions = {}): Pro
   return navigateToInternal(toUrl, options);
 }
 
+export function subscribeToNavigation(listener: (info: NavigateResult) => void): () => void {
+  clientRuntimeSingleton.navigationListeners.add(listener);
+  return () => {
+    clientRuntimeSingleton.navigationListeners.delete(listener);
+  };
+}
+
 export function registerRouteModules(routeId: string, modules: RouteModuleBundle): void {
-  moduleRegistry.set(routeId, modules);
-  if (runtimeState) {
-    runtimeState.moduleRegistry.set(routeId, modules);
+  clientRuntimeSingleton.moduleRegistry.set(routeId, modules);
+  if (clientRuntimeSingleton.runtimeState) {
+    clientRuntimeSingleton.runtimeState.moduleRegistry.set(routeId, modules);
   }
 }
 
 export function hydrateInitialRoute(routeId: string): void {
-  if (typeof document === "undefined" || runtimeState) {
+  if (typeof document === "undefined" || clientRuntimeSingleton.runtimeState) {
     return;
   }
 
   const payload = reviveDeferredPayload(getScriptJson<RenderPayload>(RBSSR_PAYLOAD_SCRIPT_ID));
   const routerSnapshot = getScriptJson<ClientRouterSnapshot>(RBSSR_ROUTER_SCRIPT_ID);
-  const modules = moduleRegistry.get(routeId);
+  const modules = clientRuntimeSingleton.moduleRegistry.get(routeId);
   if (!modules) {
     throw new Error(`Missing module registry for initial route "${routeId}"`);
   }
@@ -1306,13 +1297,13 @@ export function hydrateInitialRoute(routeId: string): void {
   }
 
   const root = hydrateRoot(container, appTree);
-  runtimeState = {
+  clientRuntimeSingleton.runtimeState = {
     root,
     currentPayload: payload,
     currentRouteId: routeId,
     currentModules: modules,
     routerSnapshot,
-    moduleRegistry,
+    moduleRegistry: clientRuntimeSingleton.moduleRegistry,
     prefetchCache: new Map(),
     navigationToken: 0,
     transitionAbortController: null,