react-bun-ssr 0.1.0 → 0.2.0

package/framework/runtime/build-tools.ts

@@ -1,34 +1,66 @@
-import path from "node:path";
-import { createBunRouteAdapter } from "./bun-route-adapter";
+import path from 'node:path';
+import { createBunRouteAdapter } from './bun-route-adapter';
 import {
   ensureCleanDir,
   ensureDir,
   existsPath,
   glob,
+  removePath,
   statPath,
   writeTextIfChanged,
-} from "./io";
+} from './io';
 import type {
   BuildManifest,
   BuildRouteAsset,
   PageRouteDefinition,
   ResolvedConfig,
   RouteManifest,
-} from "./types";
-import { normalizeSlashes, stableHash, toImportPath } from "./utils";
-
-interface ClientEntryFile {
+} from './types';
+import { normalizeSlashes, stableHash, toImportPath } from './utils';
+
+const BUILD_OPTIMIZE_IMPORTS = [
+  'react-bun-ssr',
+  'react-bun-ssr/route',
+  'react',
+  'react-dom',
+  '@datadog/browser-rum-react',
+];
+
+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 [];
   }
 
-  return glob("**/*", { cwd: rootDir, absolute: true });
+  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: {
@@ -41,11 +73,13 @@ function buildClientEntrySource(options: {
 
   const imports: string[] = [];
 
-  const runtimeImport = toImportPath(generatedDir, runtimeClientFile);
+  const runtimeImport = normalizeSlashes(path.resolve(runtimeClientFile));
   const rootImport = toImportPath(generatedDir, rootModulePath);
   const routeImport = toImportPath(generatedDir, route.filePath);
 
-  imports.push(`import { hydrateRoute } from "${runtimeImport}";`);
+  imports.push(
+    `import { hydrateInitialRoute, projectClientModule, registerRouteModules } from "${runtimeImport}";`,
+  );
 
   imports.push(`import RootDefault from "${rootImport}";`);
   imports.push(`import * as RootModule from "${rootImport}";`);
@@ -58,19 +92,24 @@ function buildClientEntrySource(options: {
     const layoutFilePath = route.layoutFiles[index]!;
     const layoutImportPath = toImportPath(generatedDir, layoutFilePath);
     imports.push(`import Layout${index}Default from "${layoutImportPath}";`);
-    imports.push(`import * as Layout${index}Module from "${layoutImportPath}";`);
-    layoutModuleRefs.push(`{ ...Layout${index}Module, default: Layout${index}Default }`);
+    imports.push(
+      `import * as Layout${index}Module from "${layoutImportPath}";`,
+    );
+    layoutModuleRefs.push(
+      buildClientModuleProjectionSource(`Layout${index}Default`, `Layout${index}Module`),
+    );
   }
 
-  return `${imports.join("\n")}
+  return `${imports.join('\n')}
 
 const modules = {
-  root: { ...RootModule, default: RootDefault },
-  layouts: [${layoutModuleRefs.join(", ")}],
-  route: { ...RouteModule, default: RouteDefault },
+  root: ${buildClientModuleProjectionSource('RootDefault', 'RootModule')},
+  layouts: [${layoutModuleRefs.join(', ')}],
+  route: ${buildClientModuleProjectionSource('RouteDefault', 'RouteModule')},
 };
 
-hydrateRoute(modules);
+registerRouteModules(${JSON.stringify(route.id)}, modules);
+hydrateInitialRoute(${JSON.stringify(route.id)});
 `;
 }
 
@@ -82,10 +121,10 @@ export async function generateClientEntries(options: {
   const { config, manifest, generatedDir } = options;
   await ensureDir(generatedDir);
 
-  const runtimeClientFile = path.resolve(config.cwd, "framework/runtime/client-runtime.tsx");
+  const runtimeClientFile = path.resolve(import.meta.dir, 'client-runtime.tsx');
 
   return Promise.all(
-    manifest.pages.map(async route => {
+    manifest.pages.map(async (route) => {
       const entryName = `route__${route.id}.tsx`;
       const entryFilePath = path.join(generatedDir, entryName);
       const source = buildClientEntrySource({
@@ -97,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: {
@@ -112,14 +222,20 @@ async function mapBuildOutputsByPrefix(options: {
   publicPrefix: string;
 }): Promise<Record<string, BuildRouteAsset>> {
   const { outDir, routeIds, publicPrefix } = options;
-  const files = (await walkFiles(outDir)).map(filePath => normalizeSlashes(path.relative(outDir, filePath)));
+  const files = (await walkFiles(outDir)).map((filePath) =>
+    normalizeSlashes(path.relative(outDir, filePath)),
+  );
 
   const routeAssets: Record<string, BuildRouteAsset> = {};
 
   for (const routeId of routeIds) {
     const base = `route__${routeId}`;
-    const script = files.find(file => file.startsWith(base) && file.endsWith(".js"));
-    const css = files.filter(file => file.startsWith(base) && file.endsWith(".css"));
+    const script = files.find(
+      (file) => file.startsWith(base) && file.endsWith('.js'),
+    );
+    const css = files.filter(
+      (file) => file.startsWith(base) && file.endsWith('.css'),
+    );
 
     if (!script) {
       continue;
@@ -127,13 +243,77 @@ async function mapBuildOutputsByPrefix(options: {
 
     routeAssets[routeId] = {
       script: `${publicPrefix}${script}`,
-      css: css.map(file => `${publicPrefix}${file}`),
+      css: css.map((file) => `${publicPrefix}${file}`),
+    };
+  }
+
+  return routeAssets;
+}
+
+export function normalizeMetafilePath(filePath: string): string {
+  return normalizeSlashes(filePath).replace(/^\.\//, "");
+}
+
+function toPublicBuildPath(publicPrefix: string, filePath: string): string {
+  return `${publicPrefix}${normalizeMetafilePath(filePath)}`;
+}
+
+export function mapBuildOutputsFromMetafile(options: {
+  metafile: Bun.BuildMetafile;
+  entries: ClientEntryFile[];
+  publicPrefix: string;
+}): Record<string, BuildRouteAsset> {
+  const routeIdByEntrypoint = new Map<string, string>();
+  const routeIdByEntryName = new Map<string, string>();
+  for (const entry of options.entries) {
+    const absoluteEntrypoint = normalizeMetafilePath(path.resolve(entry.entryFilePath));
+    const relativeEntrypoint = normalizeMetafilePath(path.relative(process.cwd(), entry.entryFilePath));
+    routeIdByEntrypoint.set(absoluteEntrypoint, entry.routeId);
+    routeIdByEntrypoint.set(relativeEntrypoint, entry.routeId);
+    routeIdByEntryName.set(path.basename(entry.entryFilePath), entry.routeId);
+  }
+
+  const routeAssets: Record<string, BuildRouteAsset> = {};
+
+  for (const [outputPath, metadata] of Object.entries(options.metafile.outputs)) {
+    if (!outputPath.endsWith(".js") || !metadata.entryPoint) {
+      continue;
+    }
+
+    const normalizedEntrypoint = normalizeMetafilePath(metadata.entryPoint);
+    const absoluteEntrypoint = normalizeMetafilePath(path.resolve(process.cwd(), normalizedEntrypoint));
+    const routeId =
+      routeIdByEntrypoint.get(normalizedEntrypoint) ??
+      routeIdByEntrypoint.get(absoluteEntrypoint) ??
+      routeIdByEntryName.get(path.basename(normalizedEntrypoint));
+    if (!routeId) {
+      continue;
+    }
+
+    routeAssets[routeId] = {
+      script: toPublicBuildPath(options.publicPrefix, outputPath),
+      css: metadata.cssBundle ? [toPublicBuildPath(options.publicPrefix, metadata.cssBundle)] : [],
     };
   }
 
   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;
@@ -148,42 +328,64 @@ export async function bundleClientEntries(options: {
   }
 
   const result = await Bun.build({
-    entrypoints: entries.map(entry => entry.entryFilePath),
+    entrypoints: entries.map((entry) => entry.entryFilePath),
     outdir: outDir,
-    target: "browser",
-    format: "esm",
-    splitting: false,
-    sourcemap: dev ? "inline" : "external",
+    target: 'browser',
+    format: 'esm',
+    metafile: true,
+    optimizeImports: BUILD_OPTIMIZE_IMPORTS,
+    splitting: true,
+    sourcemap: dev ? 'inline' : 'external',
     minify: !dev,
-    naming: dev ? "[name].[ext]" : "[name]-[hash].[ext]",
+    naming: dev ? '[name].[ext]' : '[name]-[hash].[ext]',
   });
 
   if (!result.success) {
-    const messages = result.logs.map(log => log.message).join("\n");
+    const messages = result.logs.map((log) => log.message).join('\n');
     throw new Error(`Client bundle failed:\n${messages}`);
   }
 
-  return mapBuildOutputsByPrefix({
+  const routeAssetsFromMetafile = result.metafile
+    ? mapBuildOutputsFromMetafile({
+      metafile: result.metafile,
+      entries,
+      publicPrefix,
+    })
+    : {};
+
+  if (Object.keys(routeAssetsFromMetafile).length === entries.length) {
+    return routeAssetsFromMetafile;
+  }
+
+  const routeAssetsFromPrefix = await mapBuildOutputsByPrefix({
     outDir,
-    routeIds: entries.map(entry => entry.routeId),
+    routeIds: entries.map((entry) => entry.routeId),
     publicPrefix,
   });
+
+  return {
+    ...routeAssetsFromPrefix,
+    ...routeAssetsFromMetafile,
+  };
 }
 
 export async function ensureCleanDirectory(dirPath: string): Promise<void> {
   await ensureCleanDir(dirPath);
 }
 
-export async function copyDirRecursive(sourceDir: string, destinationDir: string): Promise<void> {
+export async function copyDirRecursive(
+  sourceDir: string,
+  destinationDir: string,
+): Promise<void> {
   if (!(await existsPath(sourceDir))) {
     return;
   }
 
   await ensureDir(destinationDir);
 
-  const entries = await glob("**/*", { cwd: sourceDir });
+  const entries = await glob('**/*', { cwd: sourceDir });
   await Promise.all(
-    entries.map(async entry => {
+    entries.map(async (entry) => {
       const from = path.join(sourceDir, entry);
       const to = path.join(destinationDir, entry);
       const fileStat = await statPath(from);
@@ -197,7 +399,9 @@ export async function copyDirRecursive(sourceDir: string, destinationDir: string
   );
 }
 
-export function createBuildManifest(routeAssets: Record<string, BuildRouteAsset>): BuildManifest {
+export function createBuildManifest(
+  routeAssets: Record<string, BuildRouteAsset>,
+): BuildManifest {
   return {
     version: stableHash(JSON.stringify(routeAssets)),
     generatedAt: new Date().toISOString(),
@@ -205,30 +409,49 @@ export function createBuildManifest(routeAssets: Record<string, BuildRouteAsset>
   };
 }
 
-export async function discoverFileSignature(rootDir: string): Promise<string> {
-  const files = (await walkFiles(rootDir))
-    .filter(file => !normalizeSlashes(file).includes("/node_modules/"))
-    .sort();
+export async function discoverFileSignature(rootPath: string): Promise<string> {
+  const rootStat = await statPath(rootPath);
+  if (!rootStat) {
+    return stableHash("");
+  }
 
-  const signatureBits = (await Promise.all(
-    files.map(async filePath => {
-      const fileStat = await statPath(filePath);
-      if (!fileStat?.isFile()) {
-        return null;
-      }
-      const contentHash = stableHash(await Bun.file(filePath).bytes());
-      return `${normalizeSlashes(filePath)}:${contentHash}`;
-    }),
-  )).filter((value): value is string => Boolean(value));
+  const files = (
+    rootStat.isFile()
+      ? [rootPath]
+      : await walkFiles(rootPath)
+  )
+    .filter((file) => !normalizeSlashes(file).includes('/node_modules/'))
+    .sort();
 
-  return stableHash(signatureBits.join("|"));
+  const signatureBits = (
+    await Promise.all(
+      files.map(async (filePath) => {
+        const fileStat = await statPath(filePath);
+        if (!fileStat?.isFile()) {
+          return null;
+        }
+        const contentHash = stableHash(await Bun.file(filePath).bytes());
+        return `${normalizeSlashes(filePath)}:${contentHash}`;
+      }),
+    )
+  ).filter((value): value is string => Boolean(value));
+
+  return stableHash(signatureBits.join('|'));
 }
 
-export async function buildRouteManifest(config: ResolvedConfig): Promise<RouteManifest> {
+export async function buildRouteManifest(
+  config: ResolvedConfig,
+): Promise<RouteManifest> {
   const adapter = await createBunRouteAdapter({
     routesDir: config.routesDir,
-    generatedMarkdownRootDir: path.resolve(config.cwd, ".rbssr/generated/markdown-routes"),
-    projectionRootDir: path.resolve(config.cwd, ".rbssr/generated/router-projection/build-manifest"),
+    generatedMarkdownRootDir: path.resolve(
+      config.cwd,
+      '.rbssr/generated/markdown-routes',
+    ),
+    projectionRootDir: path.resolve(
+      config.cwd,
+      '.rbssr/generated/router-projection/build-manifest',
+    ),
   });
   return adapter.manifest;
 }

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);
     },
   };
 }