react-bun-ssr 0.2.0 → 0.3.1

package/README.md

@@ -2,9 +2,9 @@
 
 `react-bun-ssr` is a Bun-native SSR React framework with file-based routing, loaders, actions, middleware, streaming, soft navigation, and first-class markdown routes.
 
-- Documentation: https://react-bun-ssr.fly.dev/docs
-- API reference: https://react-bun-ssr.fly.dev/docs/api/overview
-- Blog: https://react-bun-ssr.fly.dev/blog
+- Documentation: https://react-bun-ssr.dev/docs
+- API reference: https://react-bun-ssr.dev/docs/api/overview
+- Blog: https://react-bun-ssr.dev/blog
 - Repository: https://github.com/react-formation/react-bun-ssr
 
 ## Why react-bun-ssr?
@@ -50,16 +50,22 @@ http://127.0.0.1:3000
 
 For the full setup walkthrough, read the installation guide:
 
-- https://react-bun-ssr.fly.dev/docs/start/installation
+- https://react-bun-ssr.dev/docs/start/installation
 
 ## What `rbssr init` gives you
 
 `rbssr init` scaffolds a small Bun-first SSR app:
 
 ```text
+package.json
+tsconfig.json
+.gitignore
 app/
   root.tsx
+  root.module.css
   middleware.ts
+  public/
+    favicon.svg
   routes/
     index.tsx
     api/
@@ -67,15 +73,20 @@ app/
 rbssr.config.ts
 ```
 
+- `package.json`: Bun scripts and framework/runtime dependencies
+- `tsconfig.json`: starter TypeScript config for Bun + JSX
+- `.gitignore`: minimal app-level ignore rules
 - `app/root.tsx`: document shell and top-level layout
+- `app/root.module.css`: starter CSS Module for layout and base presentation
 - `app/middleware.ts`: global request pipeline hook
+- `app/public/favicon.svg`: starter public asset
 - `app/routes/index.tsx`: first SSR page route
 - `app/routes/api/health.ts`: first API route
 - `rbssr.config.ts`: runtime configuration entrypoint
 
 The quickest follow-up is:
 
-- https://react-bun-ssr.fly.dev/docs/start/quick-start
+- https://react-bun-ssr.dev/docs/start/quick-start
 
 ## How it works
 
@@ -85,7 +96,7 @@ Routes live under `app/routes`. Page routes, API routes, dynamic params, and mar
 
 Read more:
 
-- https://react-bun-ssr.fly.dev/docs/routing/file-based-routing
+- https://react-bun-ssr.dev/docs/routing/file-based-routing
 
 ### Request pipeline
 
@@ -93,8 +104,8 @@ For a page request, the framework resolves the matching route, runs global and n
 
 Read more:
 
-- https://react-bun-ssr.fly.dev/docs/routing/middleware
-- https://react-bun-ssr.fly.dev/docs/data/loaders
+- https://react-bun-ssr.dev/docs/routing/middleware
+- https://react-bun-ssr.dev/docs/data/loaders
 
 ### Rendering model
 
@@ -102,8 +113,8 @@ SSR is the default model. HTML responses stream, deferred loader data is support
 
 Read more:
 
-- https://react-bun-ssr.fly.dev/docs/rendering/streaming-deferred
-- https://react-bun-ssr.fly.dev/docs/routing/navigation
+- https://react-bun-ssr.dev/docs/rendering/streaming-deferred
+- https://react-bun-ssr.dev/docs/routing/navigation
 
 ### Bun-first runtime
 
@@ -111,7 +122,7 @@ Bun provides the runtime, server, bundler, markdown support, and file APIs that
 
 Read more:
 
-- https://react-bun-ssr.fly.dev/docs/api/bun-runtime-apis
+- https://react-bun-ssr.dev/docs/api/bun-runtime-apis
 
 ## Core commands
 
@@ -132,7 +143,7 @@ Repository maintenance commands:
 
 CLI reference:
 
-- https://react-bun-ssr.fly.dev/docs/tooling/cli
+- https://react-bun-ssr.dev/docs/tooling/cli
 
 ## Working on this repository
 
@@ -147,16 +158,24 @@ bun run docs:dev
 
 That starts the docs site locally using the framework itself.
 
+Dependency ownership is split intentionally:
+
+- the repo-root `package.json` is the published framework manifest
+- [`app/package.json`](/Users/react-formation/code/my-app/app/package.json) owns docs-app runtime dependencies
+
+Contributors should still use the repo-root commands; the workspace split is there to keep npm package metadata accurate, not to change the day-to-day workflow.
+
 ## Project layout
 
 - `framework/`: runtime, renderer, route handling, build tooling, and CLI internals
 - `bin/rbssr.ts`: CLI entrypoint
 - `app/`: docs site routes, layouts, middleware, blog, and styles
+- `app/package.json`: private docs-app dependency manifest
 - `app/routes/docs/**/*.md`: authored documentation pages
 - `app/routes/blog/*.md`: authored blog posts
 - `scripts/`: generators and validation scripts
-- `tests/`: unit and integration tests
-- `e2e/`: Playwright end-to-end tests
+- `tests/framework/`: framework runtime, CLI, build, unit/integration, and framework Playwright tests
+- `tests/docs-app/`: docs site, blog, analytics, and docs-app Playwright tests
 
 ## Contributing
 
@@ -184,6 +203,6 @@ fly deploy
 
 Full deployment docs:
 
-- https://react-bun-ssr.fly.dev/docs/deployment/bun-deployment
-- https://react-bun-ssr.fly.dev/docs/deployment/configuration
-- https://react-bun-ssr.fly.dev/docs/deployment/troubleshooting
+- https://react-bun-ssr.dev/docs/deployment/bun-deployment
+- https://react-bun-ssr.dev/docs/deployment/configuration
+- https://react-bun-ssr.dev/docs/deployment/troubleshooting

package/framework/cli/commands.ts

@@ -25,6 +25,21 @@ function log(message: string): void {
   console.log(`[rbssr] ${message}`);
 }
 
+async function withNodeEnv<T>(nodeEnv: "development" | "production", run: () => Promise<T>): Promise<T> {
+  const previousNodeEnv = process.env.NODE_ENV;
+  process.env.NODE_ENV = nodeEnv;
+
+  try {
+    return await run();
+  } finally {
+    if (previousNodeEnv === undefined) {
+      delete process.env.NODE_ENV;
+    } else {
+      process.env.NODE_ENV = previousNodeEnv;
+    }
+  }
+}
+
 async function getConfig(cwd: string): Promise<{ userConfig: FrameworkConfig; resolved: ResolvedConfig }> {
   const userConfig = await loadUserConfig(cwd);
   const resolved = resolveConfig(userConfig, cwd);
@@ -48,41 +63,47 @@ export async function runInit(args: string[], cwd = process.cwd()): Promise<void
 }
 
 export async function runBuild(cwd = process.cwd()): Promise<void> {
-  const { resolved } = await getConfig(cwd);
-
-  const distClientDir = path.join(resolved.distDir, "client");
-  const generatedDir = path.resolve(cwd, ".rbssr/generated/client-entries");
-
-  await Promise.all([
-    ensureCleanDirectory(resolved.distDir),
-    ensureCleanDirectory(generatedDir),
-  ]);
-
-  const routeManifest = await buildRouteManifest(resolved);
-  const entries = await generateClientEntries({
-    config: resolved,
-    manifest: routeManifest,
-    generatedDir,
-  });
+  await withNodeEnv("production", async () => {
+    const userConfig = await loadUserConfig(cwd);
+    const resolved = resolveConfig({
+      ...userConfig,
+      mode: "production",
+    }, cwd);
+
+    const distClientDir = path.join(resolved.distDir, "client");
+    const generatedDir = path.resolve(cwd, ".rbssr/generated/client-entries");
+
+    await Promise.all([
+      ensureCleanDirectory(resolved.distDir),
+      ensureCleanDirectory(generatedDir),
+    ]);
+
+    const routeManifest = await buildRouteManifest(resolved);
+    const entries = await generateClientEntries({
+      config: resolved,
+      manifest: routeManifest,
+      generatedDir,
+    });
 
-  const routeAssets = await bundleClientEntries({
-    entries,
-    outDir: distClientDir,
-    dev: false,
-    publicPrefix: "/client/",
-  });
+    const routeAssets = await bundleClientEntries({
+      entries,
+      outDir: distClientDir,
+      dev: false,
+      publicPrefix: "/client/",
+    });
 
-  await copyDirRecursive(resolved.publicDir, distClientDir);
+    await copyDirRecursive(resolved.publicDir, distClientDir);
 
-  const buildManifest = createBuildManifest(routeAssets);
-  await writeText(
-    path.join(resolved.distDir, "manifest.json"),
-    JSON.stringify(buildManifest, null, 2),
-  );
+    const buildManifest = createBuildManifest(routeAssets);
+    await writeText(
+      path.join(resolved.distDir, "manifest.json"),
+      JSON.stringify(buildManifest, null, 2),
+    );
 
-  await writeProductionServerEntrypoint({ distDir: resolved.distDir });
+    await writeProductionServerEntrypoint({ distDir: resolved.distDir });
 
-  log(`build complete: ${resolved.distDir}`);
+    log(`build complete: ${resolved.distDir}`);
+  });
 }
 
 export async function runDev(cwd = process.cwd()): Promise<void> {
@@ -121,6 +142,7 @@ export async function runDev(cwd = process.cwd()): Promise<void> {
       stderr: "inherit",
       env: {
         ...process.env,
+        NODE_ENV: "development",
         RBSSR_DEV_LAUNCHER: "1",
         RBSSR_DEV_CHILD: "1",
       },

package/framework/cli/dev-client-watch.ts

@@ -89,6 +89,13 @@ export function createDevClientWatch(options: {
   let metafilePoller: ReturnType<typeof setInterval> | undefined;
   let lastMetafileMtime = "";
 
+  const resetReadyState = (): void => {
+    const deferred = createDeferred();
+    state.readyPromise = deferred.promise;
+    state.resolveReady = deferred.resolve;
+    state.rejectReady = deferred.reject;
+  };
+
   const stopPolling = (): void => {
     if (metafilePoller) {
       clearInterval(metafilePoller);
@@ -152,10 +159,6 @@ export function createDevClientWatch(options: {
     await removePath(options.metafilePath);
 
     const previousOutputFiles = [...state.outputFiles];
-    const deferred = createDeferred();
-    state.readyPromise = deferred.promise;
-    state.resolveReady = deferred.resolve;
-    state.rejectReady = deferred.reject;
     state.buildCount = 0;
     state.outputFiles = new Set<string>();
     lastMetafileMtime = "";
@@ -195,7 +198,10 @@ export function createDevClientWatch(options: {
       stdin: "ignore",
       stdout: "inherit",
       stderr: "inherit",
-      env: process.env,
+      env: {
+        ...process.env,
+        NODE_ENV: "development",
+      },
     });
 
     void state.process.exited.then((exitCode) => {
@@ -244,6 +250,7 @@ export function createDevClientWatch(options: {
       }
 
       state.entrySetSignature = nextEntrySetSignature;
+      resetReadyState();
       await stopProcess();
       await startProcess();
       options.onLog?.("restarted Bun client watch after entry set change");

package/framework/cli/internal.ts

@@ -22,11 +22,14 @@ export function parseFlags(args: string[]): CliFlags {
 
 export function createProductionServerEntrypointSource(): string {
   return `import path from "node:path";
-import config from "../../rbssr.config.ts";
 import { startHttpServer } from "react-bun-ssr";
 
+process.env.NODE_ENV = "production";
+
 const rootDir = path.resolve(path.dirname(Bun.fileURLToPath(import.meta.url)), "../..");
 process.chdir(rootDir);
+const configModule = await import("../../rbssr.config.ts");
+const config = configModule.default;
 
 const manifestPath = path.resolve(rootDir, "dist/manifest.json");
 const manifest = await Bun.file(manifestPath).json();
@@ -53,6 +56,7 @@ export function createDevHotEntrypointSource(options: {
 
   return `import { runHotDevChild } from ${runtimeModulePath};
 
+process.env.NODE_ENV = "development";
 process.chdir(${cwd});
 await runHotDevChild({
   cwd: ${cwd},
@@ -93,8 +97,8 @@ export function createTestCommands(extraArgs: string[]): string[][] {
   }
 
   return [
-    ["bun", "test", "./tests/unit"],
-    ["bun", "test", "./tests/integration"],
+    ["bun", "test", "./tests/framework/unit", "./tests/docs-app/unit"],
+    ["bun", "test", "./tests/framework/integration", "./tests/docs-app/integration"],
     ["bun", "x", "playwright", "test"],
   ];
 }

package/framework/cli/scaffold.ts

@@ -6,6 +6,23 @@ interface ScaffoldFile {
   content: string;
 }
 
+interface FrameworkPackageManifest {
+  version?: string;
+  devDependencies?: Record<string, string>;
+}
+
+const DEFAULT_FRAMEWORK_VERSION = "0.0.0";
+const DEFAULT_TYPESCRIPT_VERSION = "^5";
+const DEFAULT_BUN_TYPES_VERSION = "latest";
+const DEFAULT_REACT_TYPES_VERSION = "^19";
+const FAVICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96">
+  <rect width="96" height="96" rx="20" fill="#111827"/>
+  <path d="M25 28h20c13.807 0 25 11.193 25 25S58.807 78 45 78H25V28Zm18 40c8.837 0 16-7.163 16-16s-7.163-16-16-16h-8v32h8Z" fill="#f9fafb"/>
+</svg>
+`;
+
+let frameworkPackageManifestPromise: Promise<FrameworkPackageManifest> | null = null;
+
 async function writeIfMissing(filePath: string, content: string, force: boolean): Promise<void> {
   if (!force && await existsPath(filePath)) {
     return;
@@ -14,8 +31,115 @@ async function writeIfMissing(filePath: string, content: string, force: boolean)
   await writeText(filePath, content);
 }
 
-function templateFiles(cwd: string): ScaffoldFile[] {
+function getFrameworkPackageManifest(): Promise<FrameworkPackageManifest> {
+  if (!frameworkPackageManifestPromise) {
+    const packageJsonPath = path.resolve(import.meta.dir, "../../package.json");
+    frameworkPackageManifestPromise = Bun.file(packageJsonPath).json() as Promise<FrameworkPackageManifest>;
+  }
+
+  return frameworkPackageManifestPromise;
+}
+
+function normalizePackageName(cwd: string): string {
+  const baseName = path.basename(path.resolve(cwd));
+  const normalized = baseName
+    .toLowerCase()
+    .replace(/[^a-z0-9._-]+/g, "-")
+    .replace(/[._-]{2,}/g, "-")
+    .replace(/^[._-]+|[._-]+$/g, "");
+
+  return normalized || "rbssr-app";
+}
+
+function createPackageJsonContent(options: {
+  cwd: string;
+  frameworkVersion: string;
+  typescriptVersion: string;
+  bunTypesVersion: string;
+  reactTypesVersion: string;
+  reactDomTypesVersion: string;
+}): string {
+  const packageJson = {
+    name: normalizePackageName(options.cwd),
+    version: "0.0.0",
+    private: true,
+    type: "module",
+    scripts: {
+      dev: "rbssr dev",
+      build: "rbssr build",
+      start: "rbssr start",
+      typecheck: "bunx tsc --noEmit",
+    },
+    dependencies: {
+      "react-bun-ssr": options.frameworkVersion,
+      react: "^19",
+      "react-dom": "^19",
+    },
+    devDependencies: {
+      "@types/react": options.reactTypesVersion,
+      "@types/react-dom": options.reactDomTypesVersion,
+      "bun-types": options.bunTypesVersion,
+      typescript: options.typescriptVersion,
+    },
+  };
+
+  return `${JSON.stringify(packageJson, null, 2)}\n`;
+}
+
+function createTsconfigContent(): string {
+  const tsconfig = {
+    compilerOptions: {
+      target: "ESNext",
+      module: "Preserve",
+      moduleResolution: "Bundler",
+      jsx: "react-jsx",
+      strict: true,
+      types: ["bun-types"],
+    },
+    include: ["app", "rbssr.config.ts"],
+  };
+
+  return `${JSON.stringify(tsconfig, null, 2)}\n`;
+}
+
+function createGitignoreContent(): string {
+  return `node_modules
+dist
+.rbssr
+.env
+.env.local
+.DS_Store
+`;
+}
+
+async function templateFiles(cwd: string): Promise<ScaffoldFile[]> {
+  const frameworkPackage = await getFrameworkPackageManifest();
+  const frameworkVersion = frameworkPackage.version ?? DEFAULT_FRAMEWORK_VERSION;
+  const typescriptVersion = frameworkPackage.devDependencies?.typescript ?? DEFAULT_TYPESCRIPT_VERSION;
+  const bunTypesVersion = frameworkPackage.devDependencies?.["bun-types"] ?? DEFAULT_BUN_TYPES_VERSION;
+  const reactTypesVersion = frameworkPackage.devDependencies?.["@types/react"] ?? DEFAULT_REACT_TYPES_VERSION;
+  const reactDomTypesVersion = frameworkPackage.devDependencies?.["@types/react-dom"] ?? DEFAULT_REACT_TYPES_VERSION;
+
   return [
+    {
+      filePath: path.join(cwd, "package.json"),
+      content: createPackageJsonContent({
+        cwd,
+        frameworkVersion,
+        typescriptVersion,
+        bunTypesVersion,
+        reactTypesVersion,
+        reactDomTypesVersion,
+      }),
+    },
+    {
+      filePath: path.join(cwd, "tsconfig.json"),
+      content: createTsconfigContent(),
+    },
+    {
+      filePath: path.join(cwd, ".gitignore"),
+      content: createGitignoreContent(),
+    },
     {
       filePath: path.join(cwd, "rbssr.config.ts"),
       content: `import { defineConfig } from "react-bun-ssr";
@@ -29,14 +153,17 @@ export default defineConfig({
     {
       filePath: path.join(cwd, "app/root.tsx"),
       content: `import { Outlet } from "react-bun-ssr/route";
+import styles from "./root.module.css";
 
 export default function RootLayout() {
   return (
-    <main className="shell">
-      <header className="top">
+    <main className={styles.shell}>
+      <header className={styles.top}>
         <h1>react-bun-ssr</h1>
       </header>
-      <Outlet />
+      <section className={styles.content}>
+        <Outlet />
+      </section>
     </main>
   );
 }
@@ -44,6 +171,53 @@ export default function RootLayout() {
 export function head() {
   return <title>react-bun-ssr app</title>;
 }
+`,
+    },
+    {
+      filePath: path.join(cwd, "app/root.module.css"),
+      content: `:global(*) {
+  box-sizing: border-box;
+}
+
+:global(html) {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
+  color: #0f172a;
+}
+
+:global(body) {
+  margin: 0;
+}
+
+.shell {
+  min-height: 100vh;
+  width: min(100%, 72rem);
+  margin: 0 auto;
+  padding: 3rem 1.5rem 4rem;
+}
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 2rem;
+}
+
+.top h1 {
+  margin: 0;
+  font-size: clamp(2rem, 5vw, 3.5rem);
+  line-height: 1;
+  letter-spacing: -0.04em;
+}
+
+.content {
+  padding: 1.5rem;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: 1.5rem;
+  background: rgba(255, 255, 255, 0.84);
+  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
+  backdrop-filter: blur(18px);
+}
 `,
     },
     {
@@ -87,11 +261,15 @@ export const middleware: Middleware = async (ctx, next) => {
 };
 `,
     },
+    {
+      filePath: path.join(cwd, "app/public/favicon.svg"),
+      content: FAVICON_SVG,
+    },
   ];
 }
 
 export async function scaffoldApp(cwd: string, options: { force: boolean }): Promise<void> {
-  for (const file of templateFiles(cwd)) {
+  for (const file of await templateFiles(cwd)) {
     await writeIfMissing(file.filePath, file.content, options.force);
   }
 }

package/framework/runtime/build-tools.ts

@@ -23,7 +23,6 @@ const BUILD_OPTIMIZE_IMPORTS = [
   'react-bun-ssr/route',
   'react',
   'react-dom',
-  '@datadog/browser-rum-react',
 ];
 
 export interface ClientEntryFile {
@@ -338,6 +337,9 @@ export async function bundleClientEntries(options: {
     sourcemap: dev ? 'inline' : 'external',
     minify: !dev,
     naming: dev ? '[name].[ext]' : '[name]-[hash].[ext]',
+    define: {
+      "process.env.NODE_ENV": JSON.stringify(dev ? "development" : "production"),
+    },
   });
 
   if (!result.success) {