reroute-js 0.19.0 → 0.19.1

package/README.md

@@ -2,12 +2,62 @@
 
 Reroute is a dead-simple file-based routing framework for building full-stack React apps on top of Bun and Elysia.
 
+## 📚 Table of Contents
+
+- [✨ Features](#-features)
+- [🚀 Quick Start](#-quick-start)
+- [🔌 External Requests SSR](#-external-requests-ssr)
+- [⚡ Streaming SSR](#-streaming-ssr)
+  - [Quick Start](#quick-start-1)
+  - [How It Works](#how-it-works)
+  - [Custom Loading Skeletons](#custom-loading-skeletons)
+  - [Layout Streaming](#layout-streaming)
+  - [Default Skeletons](#default-skeletons)
+  - [Nested Suspense](#nested-suspense)
+  - [Performance](#performance)
+- [🎭 Client-Only Rendering](#-client-only-rendering)
+- [🔐 Environment Variables](#-environment-variables)
+  - [Usage](#usage)
+  - [Accessing Variables](#accessing-variables)
+  - [Environment Files](#environment-files)
+  - [Security](#security)
+  - [TypeScript Support](#typescript-support)
+- [📝 Markdown Routes](#-markdown-routes)
+  - [Installation](#installation)
+  - [Creating Markdown Routes](#creating-markdown-routes)
+  - [Creating MDX Routes with Components](#creating-mdx-routes-with-components)
+  - [Programmatic Markdown Rendering](#programmatic-markdown-rendering)
+- [🗺️ Sitemap & RSS Feed Generation](#️-sitemap--rss-feed-generation)
+  - [Sitemap Generation](#sitemap-generation)
+  - [Robots.txt Generation](#robotstxt-generation)
+  - [RSS Feed Generation](#rss-feed-generation)
+  - [LLM-Friendly Content](#llm-friendly-content)
+- [🔍 Content Search](#-content-search)
+  - [Configuration](#configuration)
+  - [Client-Side Search with Pagination](#client-side-search-with-pagination)
+  - [SSR Search with Pagination](#ssr-search-with-pagination)
+- [📑 Table of Contents](#-table-of-contents-1)
+  - [Basic Usage](#basic-usage)
+  - [Enable Anchor Scrolling](#enable-anchor-scrolling)
+- [🎨 OG Image Generation](#-og-image-generation)
+  - [Quick Start](#quick-start)
+  - [File Structure](#file-structure)
+  - [Available Props](#available-props)
+  - [Styling](#styling)
+  - [Per-Route Customization](#per-route-customization)
+  - [CLI Preview](#cli-preview)
+  - [URLs & Meta Tags](#urls--meta-tags)
+  - [Default Template](#default-template)
+- [📖 Learn More](#-learn-more)
+- [📝 License](#-license)
+
 ## ✨ Features
 
 ### 🎯 Core Framework
 - ⚡ **Built on Bun** - Lightning-fast JavaScript runtime for everything
 - 🔄 **File-Based Routing** - Automatic route generation from your file structure
 - 🎨 **Server-Side Rendering (SSR)** - SEO-friendly React rendering on the server
+- ⚡ **Streaming SSR** - Progressive rendering with React 19 for 50-70% faster TTFB
 - 🔥 **Live Reload** - Live reload in development mode with instant feedback
 - 📦 **Zero Config** - Works out of the box with sensible defaults
 
@@ -109,6 +159,9 @@ Reroute is a dead-simple file-based routing framework for building full-stack Re
 - ⚡ **Module Preloading** - Browser hints for critical resources
 - 🎯 **SSR Module Seeding** - Pre-populate modules for instant hydration
 - 📊 **Collection Inlining** - Inline collection data for zero-latency rendering
+- 🌊 **Progressive Streaming** - Shell HTML sent immediately while data loads
+- 🎭 **Automatic Suspense** - Zero-config streaming wrappers via `[skeleton].tsx` convention
+- ⚡ **React 19 Streaming** - Native `renderToReadableStream` for optimal performance
 
 ### 🎨 Styling & Theming
 - 🎨 **Tailwind CSS v4 Support** - Automatic detection and compilation with CSS-first configuration
@@ -246,6 +299,194 @@ Notes:
 - Use with existing content features (useContent); both can be seeded in the same page
 - **HTTP Status Control:** Use `set.status` to set response status codes (follows Elysia's API). Non-200 responses are not cached
 
+## ⚡ Streaming SSR
+
+Reroute supports progressive server-side rendering with React 19's streaming capabilities. Routes with async data automatically stream shell content immediately (50-70% faster TTFB), then progressively send content as it becomes ready.
+
+### Quick Start
+
+Enable streaming in your config:
+
+```typescript
+// reroute.config.ts
+import { defineConfig } from 'reroute-js/core';
+
+export default defineConfig({
+  options: {
+    app: './src/client/App',
+  },
+  streaming: {
+    enabled: true,
+  },
+});
+```
+
+Run `bun gen` and routes with `ssr.data` automatically get Suspense wrappers and streaming optimization - no code changes needed!
+
+### How It Works
+
+**Without streaming (default):**
+- Server waits for all data → sends complete HTML → user sees page
+
+**With streaming:**
+1. Server sends shell HTML immediately (layouts, navigation) - **instant TTFB**
+2. Shows loading skeleton while data fetches
+3. Streams content progressively as ready
+4. User sees something immediately, perceives faster load
+
+### Custom Loading Skeletons
+
+Create custom loading states using the `[skeleton].tsx` convention:
+
+```tsx
+// routes/blog/[slug].tsx
+export const ssr = {
+  async data({ params }) {
+    return { post: await fetchPost(params.slug) };
+  }
+};
+
+export default function BlogPost() {
+  const { post } = useData();
+  return <article>{post.title}</article>;
+}
+```
+
+```tsx
+// routes/blog/[skeleton].tsx
+export default function BlogSkeleton() {
+  return (
+    <div className="animate-pulse p-8">
+      <div className="h-8 bg-gray-200 rounded w-3/4 mb-4" />
+      <div className="space-y-3">
+        <div className="h-4 bg-gray-200 rounded" />
+        <div className="h-4 bg-gray-200 rounded" />
+      </div>
+    </div>
+  );
+}
+```
+
+The CLI automatically detects `[skeleton].tsx` files and uses them in generated Suspense boundaries.
+
+### Layout Streaming
+
+Layouts can also stream with their own data and skeletons:
+
+```tsx
+// routes/dashboard/[layout].tsx
+export const ssr = {
+  async data() {
+    return { user: await fetchUser() };
+  }
+};
+
+export default function DashboardLayout() {
+  const { user } = useLayoutData();
+  return (
+    <div>
+      <nav>Welcome, {user.name}</nav>
+      <Outlet />
+    </div>
+  );
+}
+```
+
+```tsx
+// routes/dashboard/[layout+skeleton].tsx
+export default function DashboardLayoutSkeleton() {
+  return <div className="animate-pulse">Loading dashboard...</div>;
+}
+```
+
+**Streaming order:**
+1. Shell HTML → instant
+2. Layout skeleton → while layout data loads
+3. Layout content → when ready
+4. Route skeleton → while route data loads
+5. Route content → when ready
+
+### Default Skeletons
+
+Configure app-wide default skeletons:
+
+```typescript
+// reroute.config.ts
+export default defineConfig({
+  streaming: {
+    enabled: true,
+    defaultSkeleton: './src/client/components/DefaultSkeleton',
+    defaultLayoutSkeleton: './src/client/components/LayoutSkeleton',
+  },
+});
+```
+
+**Priority order:**
+1. Custom `[skeleton].tsx` in route directory
+2. Configured `defaultSkeleton`
+3. Built-in generic skeleton
+
+For layouts:
+1. Custom `[layout+skeleton].tsx`
+2. Configured `defaultLayoutSkeleton`
+3. Falls back to `defaultSkeleton`
+4. Built-in generic skeleton
+
+### Nested Suspense
+
+Add your own Suspense boundaries for fine-grained streaming:
+
+```tsx
+// routes/feed.tsx
+import { Suspense } from 'react';
+
+export const ssr = {
+  async data() {
+    return { posts: await fetchPosts() };
+  }
+};
+
+export default function Feed() {
+  const { posts } = useData();
+  
+  return (
+    <div>
+      <h1>Feed</h1>
+      {/* Route-level Suspense added automatically by gen */}
+      {posts.map(post => (
+        <article key={post.id}>
+          <h2>{post.title}</h2>
+          {/* Component-level Suspense you can add manually */}
+          <Suspense fallback={<div>Loading comments...</div>}>
+            <Comments postId={post.id} />
+          </Suspense>
+        </article>
+      ))}
+    </div>
+  );
+}
+```
+
+Each Suspense boundary streams independently - shell renders first, then each boundary resolves progressively.
+
+### Performance
+
+Example improvements with streaming enabled:
+
+| Metric | Without Streaming | With Streaming | Improvement |
+|--------|-------------------|----------------|-------------|
+| TTFB | 400ms | 50ms | **87% faster** |
+| FCP | 600ms | 150ms | **75% faster** |
+
+### Example
+
+Check out `examples/streaming` for a comprehensive demo with:
+- Basic streaming routes
+- Custom skeletons
+- Layout streaming
+- Nested Suspense boundaries
+- Performance comparisons
+
 ## 🎭 Client-Only Rendering
 
 The `ClientOnly` component prevents hydration mismatches for browser-specific code and supports layout preservation to prevent flickering:
@@ -421,8 +662,6 @@ We strive to create the best developer experience possible.
 const greeting = "Hello, World!";
 console.log(greeting);
 ```
-
-Check out our [documentation](/docs) for more info!
 ```
 
 The route will be automatically available at `/about` with:

package/cli/bin.d.ts

@@ -1,5 +1,5 @@
 /**
- * reroute-js v0.19.0
+ * reroute-js v0.19.1
  *
  * @license MIT
  * @copyright 2025 stewones <hi@stewan.io>

package/cli/bin.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env bun
 // @bun
 /**
- * reroute-js v0.19.0
+ * reroute-js v0.19.1
  *
  * @license MIT
  * @copyright 2025 stewones <hi@stewan.io>
@@ -48,7 +48,7 @@ async function getVersionString() {
 }
 async function getVersion() {
   if (true) {
-    return "0.19.0";
+    return "0.19.1";
   }
   const possiblePaths = [
     path.join(import.meta.dir, "../../../../package.json"),
@@ -66,7 +66,7 @@ async function getVersion() {
 }
 async function getCommit() {
   if (true) {
-    return "b887fc0";
+    return "a30c30e";
   }
   return "dev";
 }
@@ -1129,7 +1129,8 @@ import { readdir as readdir3, stat as stat3 } from "node:fs/promises";
 import { pathToFileURL as pathToFileURL5 } from "node:url";
 async function importContentModuleForPath(pathname, clientDir, cwd, isWatchMode) {
   try {
-    const parts = pathname.split("/").filter(Boolean);
+    const pathOnly = pathname.split("?")[0].split("#")[0];
+    const parts = pathOnly.split("/").filter(Boolean);
     if (parts.length < 2)
       return null;
     const collection = parts[0];
@@ -1205,7 +1206,8 @@ var init_modules = () => {};
 // packages/core/src/ssr/lib/seed.ts
 async function seedSSRModuleForPath(pathname, clientDir, cwd, isWatchMode) {
   try {
-    const parts = pathname.split("/").filter(Boolean);
+    const pathOnly = pathname.split("?")[0].split("#")[0];
+    const parts = pathOnly.split("/").filter(Boolean);
     if (parts.length < 2)
       return;
     const collection = parts[0];
@@ -1761,11 +1763,11 @@ async function preloadContentModule(pathname, clientDir, cwd, isWatchMode) {
   let hydrationScript = "";
   let statusOverride;
   try {
-    const parts = pathname.split("/").filter(Boolean);
-    const pathnameOnly = parts[0]?.split("?")[0];
+    const pathOnly = pathname.split("?")[0].split("#")[0];
+    const parts = pathOnly.split("/").filter(Boolean);
     if (parts.length >= 2) {
-      const collection = pathnameOnly || parts[0];
-      const name = parts[1]?.split("?")[0];
+      const collection = parts[0];
+      const name = parts[1];
       let modulePath = "";
       let isContentCollection = false;
       try {
@@ -2100,7 +2102,8 @@ async function renderSSRDocument(options2) {
   const __byCollectionForSSR = await loadCollections(cwd, isWatchMode);
   setGlobalCollections(__byCollectionForSSR);
   const componentWithPathname = cloneElement(rootComponent, {
-    pathname
+    pathname,
+    searchParams: options2.searchParams
   });
   const appHtml = renderToString(componentWithPathname);
   const baseTemplate = await loadIndexHtml(clientDir);
@@ -3906,7 +3909,8 @@ ${combinedHead}` : ""}</head><body>`;
       await writer.write(encoder.encode(headContent));
       await writer.write(encoder.encode(rootStart));
       const componentWithPathname = cloneElement2(rootComponent, {
-        pathname
+        pathname,
+        searchParams: options2.searchParams
       });
       let streamError = null;
       const streamPromise = renderToReadableStream(componentWithPathname, {
@@ -8081,19 +8085,19 @@ function extractHeadings(content2, options2 = {}) {
   let match = headingRegex.exec(content2);
   while (match !== null) {
     const level = match[1].length;
-    if (level < minLevel || level > maxLevel)
-      continue;
-    const text = match[2].trim();
-    const slug = text.toLowerCase().replace(/[^\w\s-]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-").trim();
-    headings.push({ level, text, slug });
+    if (level >= minLevel && level <= maxLevel) {
+      const text = match[2].trim();
+      const slug = text.toLowerCase().replace(/[^\w\s-]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-").trim();
+      headings.push({ level, text, slug });
+    }
     match = headingRegex.exec(content2);
   }
   return headings;
 }
 function stripMarkdown(content2) {
   let text = content2;
-  text = text.replace(/```[\s\S]*?```/g, "");
-  text = text.replace(/`[^`]+`/g, "");
+  text = text.replace(/```(?:\w+)?\n?([\s\S]*?)```/g, "$1");
+  text = text.replace(/`([^`]+)`/g, "$1");
   text = text.replace(/<[^>]+>/g, "");
   text = text.replace(/!\[([^\]]*)\]\([^)]+\)/g, "$1");
   text = text.replace(/\[([^\]]+)\]\([^)]+\)/g, "$1");
@@ -9164,8 +9168,9 @@ async function generate(cwd, args = [], options2 = {}) {
     const stepStart = performance.now();
     const result = await fn();
     if (showPerformance) {
-      const stepTime = ((performance.now() - stepStart) / 1000).toFixed(2);
-      console.log(`[reroute/gen]   ├─ ${name}: ${stepTime}s`);
+      const elapsedMs = performance.now() - stepStart;
+      const timeStr = elapsedMs < 1000 ? `${elapsedMs.toFixed(0)}ms` : `${(elapsedMs / 1000).toFixed(2)}s`;
+      console.log(`[reroute/gen]   ├─ ${name}: ${timeStr}`);
     }
     return result;
   };
@@ -12786,7 +12791,7 @@ async function getVersionString2() {
 }
 async function getVersion2() {
   if (true) {
-    return "0.19.0";
+    return "0.19.1";
   }
   const possiblePaths = [
     path3.join(import.meta.dir, "../../../package.json"),
@@ -12803,10 +12808,10 @@ async function getVersion2() {
 }
 async function getCommit2() {
   if (true) {
-    return "b887fc0";
+    return "a30c30e";
   }
   return "dev";
 }
 main();
 
-//# debugId=62B8EC966ED29FA464756E2164756E21
+//# debugId=82FF244554ABAB6064756E2164756E21