react-bun-ssr 0.1.1 → 0.2.0

package/framework/runtime/build-tools.ts

@@ -5,6 +5,7 @@ import {
   ensureDir,
   existsPath,
   glob,
+  removePath,
   statPath,
   writeTextIfChanged,
 } from './io';
@@ -25,12 +26,20 @@ const BUILD_OPTIMIZE_IMPORTS = [
   '@datadog/browser-rum-react',
 ];
 
-interface ClientEntryFile {
+export interface ClientEntryFile {
   routeId: string;
   entryFilePath: string;
   route: PageRouteDefinition;
 }
 
+export interface ClientEntrySyncResult {
+  entries: ClientEntryFile[];
+  addedEntryPaths: string[];
+  changedEntryPaths: string[];
+  removedEntryPaths: string[];
+  entrySetChanged: boolean;
+}
+
 async function walkFiles(rootDir: string): Promise<string[]> {
   if (!(await existsPath(rootDir))) {
     return [];
@@ -39,6 +48,21 @@ async function walkFiles(rootDir: string): Promise<string[]> {
   return glob('**/*', { cwd: rootDir, absolute: true });
 }
 
+function buildClientModuleProjectionSource(defaultRef: string, moduleRef: string): string {
+  return `projectClientModule(${defaultRef}, ${moduleRef})`;
+}
+
+function toClientEntryFile(options: {
+  route: PageRouteDefinition;
+  entryFilePath: string;
+}): ClientEntryFile {
+  return {
+    routeId: options.route.id,
+    entryFilePath: options.entryFilePath,
+    route: options.route,
+  };
+}
+
 function buildClientEntrySource(options: {
   generatedDir: string;
   route: PageRouteDefinition;
@@ -54,7 +78,7 @@ function buildClientEntrySource(options: {
   const routeImport = toImportPath(generatedDir, route.filePath);
 
   imports.push(
-    `import { hydrateInitialRoute, registerRouteModules } from "${runtimeImport}";`,
+    `import { hydrateInitialRoute, projectClientModule, registerRouteModules } from "${runtimeImport}";`,
   );
 
   imports.push(`import RootDefault from "${rootImport}";`);
@@ -72,16 +96,16 @@ function buildClientEntrySource(options: {
       `import * as Layout${index}Module from "${layoutImportPath}";`,
     );
     layoutModuleRefs.push(
-      `{ ...Layout${index}Module, default: Layout${index}Default }`,
+      buildClientModuleProjectionSource(`Layout${index}Default`, `Layout${index}Module`),
     );
   }
 
   return `${imports.join('\n')}
 
 const modules = {
-  root: { ...RootModule, default: RootDefault },
+  root: ${buildClientModuleProjectionSource('RootDefault', 'RootModule')},
   layouts: [${layoutModuleRefs.join(', ')}],
-  route: { ...RouteModule, default: RouteDefault },
+  route: ${buildClientModuleProjectionSource('RouteDefault', 'RouteModule')},
 };
 
 registerRouteModules(${JSON.stringify(route.id)}, modules);
@@ -112,13 +136,84 @@ export async function generateClientEntries(options: {
 
       await writeTextIfChanged(entryFilePath, source);
 
-      return {
-        routeId: route.id,
+      return toClientEntryFile({
+        route,
         entryFilePath,
+      });
+    }),
+  );
+}
+
+export async function syncClientEntries(options: {
+  config: ResolvedConfig;
+  manifest: RouteManifest;
+  generatedDir: string;
+}): Promise<ClientEntrySyncResult> {
+  const { config, manifest, generatedDir } = options;
+  await ensureDir(generatedDir);
+
+  const runtimeClientFile = path.resolve(import.meta.dir, 'client-runtime.tsx');
+  const desiredEntries = new Map<string, { route: PageRouteDefinition; entryFilePath: string }>();
+  for (const route of manifest.pages) {
+    const entryFilePath = path.join(generatedDir, `route__${route.id}.tsx`);
+    desiredEntries.set(entryFilePath, {
+      route,
+      entryFilePath,
+    });
+  }
+
+  const existingEntryPaths = new Set(
+    (await glob('route__*.tsx', {
+      cwd: generatedDir,
+      absolute: true,
+    }))
+      .map((filePath) => path.resolve(filePath)),
+  );
+
+  const addedEntryPaths: string[] = [];
+  const changedEntryPaths: string[] = [];
+  const removedEntryPaths: string[] = [];
+
+  await Promise.all(
+    [...desiredEntries.values()].map(async ({ route, entryFilePath }) => {
+      const source = buildClientEntrySource({
+        generatedDir,
         route,
-      };
+        rootModulePath: config.rootModule,
+        runtimeClientFile,
+      });
+      const existed = existingEntryPaths.has(entryFilePath);
+      const changed = await writeTextIfChanged(entryFilePath, source);
+      if (!existed) {
+        addedEntryPaths.push(entryFilePath);
+      } else if (changed) {
+        changedEntryPaths.push(entryFilePath);
+      }
+      existingEntryPaths.delete(entryFilePath);
+    }),
+  );
+
+  await Promise.all(
+    [...existingEntryPaths].map(async (entryFilePath) => {
+      removedEntryPaths.push(entryFilePath);
+      await removePath(entryFilePath);
     }),
   );
+
+  const entries = manifest.pages.map((route) => {
+    return toClientEntryFile({
+      route,
+      entryFilePath: path.join(generatedDir, `route__${route.id}.tsx`),
+    });
+  });
+
+  return {
+    entries,
+    addedEntryPaths: addedEntryPaths.sort(),
+    changedEntryPaths: changedEntryPaths.sort(),
+    removedEntryPaths: removedEntryPaths.sort(),
+    entrySetChanged: addedEntryPaths.length > 0 || removedEntryPaths.length > 0,
+  };
 }
 
 async function mapBuildOutputsByPrefix(options: {
@@ -155,7 +250,7 @@ async function mapBuildOutputsByPrefix(options: {
   return routeAssets;
 }
 
-function normalizeMetafilePath(filePath: string): string {
+export function normalizeMetafilePath(filePath: string): string {
   return normalizeSlashes(filePath).replace(/^\.\//, "");
 }
 
@@ -163,7 +258,7 @@ function toPublicBuildPath(publicPrefix: string, filePath: string): string {
   return `${publicPrefix}${normalizeMetafilePath(filePath)}`;
 }
 
-function mapBuildOutputsFromMetafile(options: {
+export function mapBuildOutputsFromMetafile(options: {
   metafile: Bun.BuildMetafile;
   entries: ClientEntryFile[];
   publicPrefix: string;
@@ -204,6 +299,21 @@ function mapBuildOutputsFromMetafile(options: {
   return routeAssets;
 }
 
+export function listBuildOutputFiles(metafile: Bun.BuildMetafile): string[] {
+  return Object.keys(metafile.outputs)
+    .map(normalizeMetafilePath)
+    .sort();
+}
+
+export function createClientEntrySetSignature(entries: ClientEntryFile[]): string {
+  return stableHash(
+    entries
+      .map((entry) => normalizeSlashes(path.resolve(entry.entryFilePath)))
+      .sort()
+      .join('|'),
+  );
+}
+
 export async function bundleClientEntries(options: {
   entries: ClientEntryFile[];
   outDir: string;
@@ -299,8 +409,17 @@ export function createBuildManifest(
   };
 }
 
-export async function discoverFileSignature(rootDir: string): Promise<string> {
-  const files = (await walkFiles(rootDir))
+export async function discoverFileSignature(rootPath: string): Promise<string> {
+  const rootStat = await statPath(rootPath);
+  if (!rootStat) {
+    return stableHash("");
+  }
+
+  const files = (
+    rootStat.isFile()
+      ? [rootPath]
+      : await walkFiles(rootPath)
+  )
     .filter((file) => !normalizeSlashes(file).includes('/node_modules/'))
     .sort();
 

package/framework/runtime/bun-route-adapter.ts

@@ -1,5 +1,6 @@
 import path from "node:path";
-import { ensureCleanDir, ensureDir, writeTextIfChanged } from "./io";
+import { ensureDir, glob, removePath, writeTextIfChanged } from "./io";
+import { matchRouteBySegments } from "./matcher";
 import { scanRoutes } from "./route-scanner";
 import type {
   ApiRouteDefinition,
@@ -116,17 +117,30 @@ async function writeProjectionRoutes<T extends PageRouteDefinition | ApiRouteDef
     }),
   );
 
+  const expectedPaths = new Set(writes.map(({ projectedFilePath }) => path.resolve(projectedFilePath)));
+  const existingPaths = new Set(await glob(`**/*${extension}`, {
+    cwd: outDir,
+    absolute: true,
+  }));
+
+  await Promise.all(
+    [...existingPaths]
+      .filter((projectedFilePath) => !expectedPaths.has(path.resolve(projectedFilePath)))
+      .map((projectedFilePath) => removePath(projectedFilePath)),
+  );
+
   return byProjectedFilePath;
 }
 
 function toRouteMatch<T extends PageRouteDefinition | ApiRouteDefinition>(
+  orderedRoutes: T[],
   routeByProjectedPath: Map<string, T>,
   pathname: string,
   router: Bun.FileSystemRouter,
 ): RouteMatch<T> | null {
   const matched = router.match(pathname);
   if (!matched) {
-    return null;
+    return matchRouteBySegments(orderedRoutes, pathname);
   }
 
   const matchedSource = normalizeRouteKey(
@@ -136,7 +150,7 @@ function toRouteMatch<T extends PageRouteDefinition | ApiRouteDefinition>(
   );
   const route = routeByProjectedPath.get(matchedSource);
   if (!route) {
-    return null;
+    return matchRouteBySegments(orderedRoutes, pathname);
   }
 
   return {
@@ -153,8 +167,7 @@ export async function createBunRouteAdapter(options: {
   const manifest = await scanRoutes(options.routesDir, {
     generatedMarkdownRootDir: options.generatedMarkdownRootDir,
   });
-
-  await ensureCleanDir(options.projectionRootDir);
+  await ensureDir(options.projectionRootDir);
 
   const pagesProjectionDir = path.join(options.projectionRootDir, "pages");
   const apiProjectionDir = path.join(options.projectionRootDir, "api");
@@ -191,10 +204,10 @@ export async function createBunRouteAdapter(options: {
   return {
     manifest,
     matchPage(pathname) {
-      return toRouteMatch(pageRouteByProjectedPath, pathname, pageRouter);
+      return toRouteMatch(manifest.pages, pageRouteByProjectedPath, pathname, pageRouter);
     },
     matchApi(pathname) {
-      return toRouteMatch(apiRouteByProjectedPath, pathname, apiRouter);
+      return toRouteMatch(manifest.api, apiRouteByProjectedPath, pathname, apiRouter);
     },
   };
 }

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";
@@ -61,7 +69,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 +79,7 @@ interface TransitionRequestOptions {
 }
 
 interface TransitionRequestHandle {
-  initialPromise: Promise<TransitionInitialChunk | TransitionRedirectChunk | null>;
+  initialPromise: Promise<TransitionInitialChunk | TransitionRedirectChunk | TransitionDocumentChunk | null>;
   donePromise: Promise<void>;
 }
 
@@ -126,7 +134,6 @@ declare global {
   }
 }
 
-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";
@@ -137,69 +144,26 @@ 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 pickOptionalClientModuleExport<T>(
+  moduleValue: Record<string, unknown>,
+  exportName: string,
+): T | undefined {
+  const value = moduleValue[exportName];
+  return typeof value === "function" ? (value as T) : undefined;
 }
 
-function matchSegments(segments: ClientRouteSnapshot["segments"], pathname: string): Params | null {
-  const pathParts = normalizePathname(pathname);
-  const params: Params = {};
-
-  let i = 0;
-  let j = 0;
-
-  while (i < segments.length) {
-    const segment = segments[i]!;
-
-    if (segment.kind === "catchall") {
-      params[segment.value] = pathParts.slice(j).join("/");
-      return params;
-    }
-
-    const current = pathParts[j];
-    if (current === undefined) {
-      return null;
-    }
-
-    if (segment.kind === "static") {
-      if (segment.value !== current) {
-        return null;
-      }
-    } else {
-      params[segment.value] = current;
-    }
-
-    i += 1;
-    j += 1;
-  }
-
-  if (j !== pathParts.length) {
-    return null;
-  }
-
-  return params;
-}
-
-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 {
@@ -402,50 +366,23 @@ function ensureRuntimeState(): RuntimeState {
   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);
-    }
-  }
-}
-
 function createTransitionUrl(toUrl: URL): URL {
   const transitionUrl = new URL("/__rbssr/transition", window.location.origin);
   transitionUrl.searchParams.set("to", toUrl.pathname + toUrl.search + toUrl.hash);
   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 +401,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 +409,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);
     }
   })();
@@ -917,11 +850,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 +875,7 @@ async function navigateToInternal(
 
   try {
     await prefetchEntry.modulePromise;
-    if (navigationToken !== state.navigationToken) {
+    if (isStaleNavigationToken(state.navigationToken, navigationToken)) {
       return null;
     }
 
@@ -965,7 +898,7 @@ async function navigateToInternal(
     }
 
     const initialChunk = await prefetchEntry.initialPromise;
-    if (navigationToken !== state.navigationToken) {
+    if (isStaleNavigationToken(state.navigationToken, navigationToken)) {
       return null;
     }
 
@@ -973,6 +906,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 +919,7 @@ async function navigateToInternal(
       }
 
       const depth = (options.redirectDepth ?? 0) + 1;
-      if (depth > 8) {
+      if (shouldHardNavigateForRedirectDepth(depth)) {
         hardNavigate(redirectUrl);
         return null;
       }
@@ -991,6 +929,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,
       });
     }
 
@@ -1190,7 +1131,7 @@ export async function prefetchTo(to: string): Promise<void> {
     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);
 }