@rangojs/router 0.0.0-experimental.2 → 0.0.0-experimental.20

package/skills/router-setup/SKILL.md

@@ -1,403 +1,434 @@
 ---
 name: router-setup
-description: Create and configure the RSC router with createRSCRouter
+description: Create and configure the RSC router with createRouter
 argument-hint: [option]
 ---
 
-# Router Setup with createRSCRouter
+# Router Setup with createRouter
 
 ## Basic Router Creation
 
 ```typescript
-import { createRSCRouter } from "rsc-router/server";
+// src/router.tsx
+import { createRouter } from "@rangojs/router";
 import { Document } from "./document";
+import { urlpatterns } from "./urls";
 
-const router = createRSCRouter({
+const router = createRouter({
   document: Document,
+  urls: urlpatterns,
 });
 
 export default router;
 ```
 
+## URL Patterns (Django-style)
+
+```typescript
+// src/urls.tsx
+import { urls } from "@rangojs/router";
+import { HomePage } from "./pages/home";
+import { AboutPage } from "./pages/about";
+import { ProductPage } from "./pages/product";
+import { RootLayout } from "./layouts/RootLayout";
+
+export const urlpatterns = urls(({ path, layout, loader, loading }) => [
+  path("/", HomePage, { name: "home" }),
+  path("/about", AboutPage, { name: "about" }),
+
+  layout(<RootLayout />, () => [
+    path("/product/:slug", ProductPage, { name: "product" }, () => [
+      loader(ProductLoader),
+      loading(<ProductSkeleton />),
+    ]),
+  ]),
+]);
+```
+
+## The urls() DSL
+
+The `urls()` function provides a callback with all available DSL functions:
+
+```typescript
+urls(
+  ({
+    path, // Define a route
+    layout, // Wrap routes in a layout
+    parallel, // Define parallel routes (slots)
+    loader, // Add data loader
+    loading, // Add loading skeleton
+    cache, // Configure caching
+    middleware, // Add middleware
+    revalidate, // Control revalidation
+    intercept, // Intercept routes for modals
+    when, // Conditional rendering
+  }) => [
+    // Route definitions here
+  ],
+);
+```
+
 ## Router Options
 
 ```typescript
 interface RSCRouterOptions<TEnv> {
+  // URL patterns from urls() function
+  urls: UrlPatterns;
+
   // Document component wrapping entire app
   document?: ComponentType<{ children: ReactNode }>;
 
-  // Enable performance metrics (console + Server-Timing header)
+  // Enable performance metrics
   debugPerformance?: boolean;
 
-  // Default error boundary fallback
+  // Default error boundary
   defaultErrorBoundary?: ReactNode | ErrorBoundaryHandler;
 
-  // Default not-found boundary (for notFound() calls)
+  // Default not-found boundary
   defaultNotFoundBoundary?: ReactNode | NotFoundBoundaryHandler;
 
-  // Component for routes with no match (404)
+  // Component for 404 routes
   notFound?: ReactNode | ((props: { pathname: string }) => ReactNode);
 
   // Error logging callback
   onError?: OnErrorCallback<TEnv>;
 
-  // Cache configuration
-  cache?:
-    | { store: SegmentCacheStore; enabled?: boolean }
-    | ((env: TEnv) => { store: SegmentCacheStore; enabled?: boolean });
-}
-```
+  // Global cache configuration
+  cache?: CacheConfig<TEnv>;
 
-## Full Configuration Example
+  // Theme configuration
+  theme?: ThemeConfig | true;
 
-```typescript
-import { createRSCRouter } from "rsc-router/server";
-import { createMemorySegmentStore } from "rsc-router/cache";
-import { Document } from "./document";
+  // SSR options (streaming policy)
+  ssr?: SSROptions<TEnv>;
 
-const cacheStore = createMemorySegmentStore();
+  // Telemetry sink for structured lifecycle events
+  telemetry?: TelemetrySink;
 
-const router = createRSCRouter<AppEnv>({
-  document: Document,
-  debugPerformance: process.env.NODE_ENV === "development",
+  // Connection warmup (default: true)
+  warmup?: boolean;
 
-  cache: {
-    store: cacheStore,
-    enabled: true,
-  },
+  // CSP nonce provider (for router.fetch)
+  nonce?: (
+    request: Request,
+    env: TEnv,
+  ) => string | true | Promise<string | true>;
 
-  defaultErrorBoundary: ({ error, reset }) => (
-    <div className="error">
-      <h2>Something went wrong</h2>
-      <p>{error.message}</p>
-      <button onClick={reset}>Try again</button>
-    </div>
-  ),
+  // RSC version string (for router.fetch)
+  version?: string;
+}
+```
 
-  defaultNotFoundBoundary: ({ notFound }) => (
-    <div className="not-found">
-      <h2>Not Found</h2>
-      <p>{notFound.message}</p>
-    </div>
-  ),
+## Using the Request Handler
 
-  notFound: ({ pathname }) => (
-    <div className="404">
-      <h1>404</h1>
-      <p>Page not found: {pathname}</p>
-    </div>
-  ),
+The router provides a `fetch` method to handle RSC requests:
 
-  onError: (error, ctx) => {
-    console.error("Router error:", error);
-    // Send to error tracking service
-  },
+```typescript
+// src/router.tsx
+import { createRouter } from "@rangojs/router";
+import { Document } from "./document";
+import { urlpatterns } from "./urls";
+
+export const router = createRouter({
+  document: Document,
+  urls: urlpatterns,
+  nonce: () => true, // Auto-generate nonce for CSP
 });
-```
 
-## Environment Types
+// src/worker.tsx (Cloudflare Workers)
+import { router } from "./router";
 
-Define your app's environment type:
+export default { fetch: router.fetch };
+```
+
+## Document Component
 
 ```typescript
-import type { RouterEnv } from "rsc-router/server";
+// src/document.tsx
+import type { ReactNode } from "react";
 
-interface AppBindings {
-  DB: D1Database;
-  KV: KVNamespace;
-  RATE_LIMITER: RateLimiter;
+export function Document({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>My App</title>
+      </head>
+      <body>
+        <div id="root">{children}</div>
+      </body>
+    </html>
+  );
 }
+```
 
-interface AppVariables {
-  user?: { id: string; name: string };
-  permissions?: string[];
-}
+## Using with Cloudflare Workers
 
-type AppEnv = RouterEnv<AppBindings, AppVariables>;
+```typescript
+// src/router.tsx
+import { createRouter } from "@rangojs/router";
+import { Document } from "./document";
+import { urlpatterns } from "./urls";
 
-const router = createRSCRouter<AppEnv>({
+export const router = createRouter<AppBindings>({
   document: Document,
+  urls: urlpatterns,
 });
+
+// src/worker.tsx
+import { router } from "./router";
+
+export default {
+  async fetch(request: Request, env: Env, ctx: ExecutionContext) {
+    return router.fetch(request, { env, ctx });
+  },
+};
 ```
 
-## Registering Routes
+### With Dynamic Cache Configuration
 
-### routes() - Register route definitions
+For per-request cache configuration (e.g., Cloudflare Workers with ExecutionContext):
 
 ```typescript
-import { homeRoutes } from "./routes/home";
-import { shopRoutes } from "./routes/shop";
-import { adminRoutes } from "./routes/admin";
+// src/router.tsx
+import { createRouter } from "@rangojs/router";
+import { CFCacheStore } from "@rangojs/router/cache";
 
-const router = createRSCRouter<AppEnv>({ document: Document })
-  // Without prefix
-  .routes(homeRoutes)
-  .map(() => import("./handlers/home"))
+export const router = createRouter<AppBindings>({
+  document: Document,
+  urls: urlpatterns,
+  // Cache config receives (env, ctx) separately
+  cache: (_env, ctx) => ({
+    store: new CFCacheStore({ ctx: ctx!, defaults: { ttl: 60 } }),
+  }),
+});
 
-  // With prefix
-  .routes("/shop", shopRoutes)
-  .map(() => import("./handlers/shop"))
+// src/worker.tsx
+import { router } from "./router";
 
-  .routes("/admin", adminRoutes)
-  .map(() => import("./handlers/admin"));
+export default {
+  async fetch(request: Request, env: Env, ctx: ExecutionContext) {
+    return router.fetch(request, { env, ctx });
+  },
+};
 ```
 
-### map() - Register handlers
+## Complete Example
 
 ```typescript
-// Async import (code splitting)
-.routes(shopRoutes)
-.map(() => import("./handlers/shop"))
-
-// Inline definition (no separate handler file)
-.routes({ index: "/", about: "/about" })
-.map(({ route }) => [
-  route("index", () => <HomePage />),
-  route("about", () => <AboutPage />),
-])
-
-// With the map helper function
-import { map } from "rsc-router/server";
-
-// handlers/shop.ts
-export default map<typeof shopRoutes>(({ route, layout, loader }) => [
-  layout(<ShopLayout />, () => [
-    route("index", ShopIndex),
-    route("products", ProductList),
+// src/urls.tsx
+import { urls } from "@rangojs/router";
+import { Outlet } from "@rangojs/router/client";
+
+// Pages
+import { HomePage } from "./pages/home";
+import { AboutPage } from "./pages/about";
+import { BlogIndexPage, BlogPostPage } from "./pages/blog";
+
+// Layouts
+import { RootLayout } from "./layouts/RootLayout";
+import { BlogLayout } from "./layouts/BlogLayout";
+
+// Loaders
+import { BlogPostLoader, BlogSidebarLoader } from "./loaders/blog";
+
+export const urlpatterns = urls(({ path, layout, parallel, loader, loading, cache }) => [
+  // Simple routes
+  path("/", HomePage, { name: "home" }),
+  path("/about", AboutPage, { name: "about" }),
+
+  // Blog with layout and loaders
+  layout(<BlogLayout />, () => [
+    // Sidebar as parallel route
+    parallel({ "@sidebar": () => <BlogSidebar /> }, () => [
+      loader(BlogSidebarLoader),
+    ]),
+
+    // Cached blog routes
+    cache({ ttl: 60 }, () => [
+      path("/blog", BlogIndexPage, { name: "blog" }),
+      path("/blog/:slug", BlogPostPage, { name: "blogPost" }, () => [
+        loader(BlogPostLoader),
+        loading(<BlogPostSkeleton />),
+      ]),
+    ]),
   ]),
 ]);
 ```
 
-## Global Middleware
+```typescript
+// src/router.tsx
+import { createRouter } from "@rangojs/router";
+import { Document } from "./document";
+import { urlpatterns } from "./urls";
 
-### use() - Add middleware
+const router = createRouter({
+  document: Document,
+  urls: urlpatterns,
 
-```typescript
-const router = createRSCRouter<AppEnv>({ document: Document })
-  // Global middleware (all routes)
-  .use(loggerMiddleware)
-  .use(corsMiddleware)
-
-  // Pattern-based middleware
-  .use("/api/*", rateLimiter)
-  .use("/admin/*", adminAuthMiddleware)
-
-  // Routes with scoped middleware
-  .routes("/shop", shopRoutes)
-  .use(shopMiddleware)  // Only applies to shop routes
-  .map(() => import("./handlers/shop"));
-```
+  defaultErrorBoundary: ({ error, reset }) => (
+    <div>
+      <h1>Something went wrong</h1>
+      <button onClick={reset}>Try again</button>
+    </div>
+  ),
 
-### Middleware patterns
+  notFound: ({ pathname }) => (
+    <div>
+      <h1>404</h1>
+      <p>Page not found: {pathname}</p>
+    </div>
+  ),
+});
 
-```typescript
-"/admin/*"           // All paths under /admin
-"/api/*/protected"   // Wildcard in middle
-"/checkout.*"        // Routes starting with /checkout
+export default router;
 ```
 
-## Type-Safe Links with href()
+## Including Sub-patterns
 
 ```typescript
-// routes/shop.ts - use dot notation for namespaced keys
-export const shopRoutes = route({
-  "shop.index": "/",
-  "shop.products": "/products",
-  "shop.product": "/products/:slug",
-  "shop.cart": "/cart",
-});
+// src/urls/shop.tsx
+import { urls } from "@rangojs/router";
 
-// router.tsx
-const router = createRSCRouter<AppEnv>({ document: Document })
-  .routes(homeRoutes)
-  .map(() => import("./handlers/home"))
-  .routes("/shop", shopRoutes)  // Keys stay unchanged, only URLs get prefixed
-  .map(() => import("./handlers/shop"));
-
-// Export for use in components
-export const href = router.href;
-
-// Usage with full autocomplete
-href("index");                                 // "/"
-href("about");                                 // "/about"
-href("shop.products");                         // "/shop/products"
-href("shop.product", { slug: "widget" });      // "/shop/products/widget"
-
-// In components
-import { href } from "./router";
-<Link to={href("shop.cart")}>Cart</Link>
-```
+export const shopPatterns = urls(({ path, layout }) => [
+  path("/", ShopIndex, { name: "index" }),
+  path("/product/:slug", ProductPage, { name: "product" }),
+]);
 
-**Note**: Route keys stay unchanged when mounted with a prefix. Only URL patterns get the prefix applied. Use dot notation (e.g., `shop.products`) for namespaced keys.
+// src/urls.tsx
+import { urls, include } from "@rangojs/router";
+import { shopPatterns } from "./urls/shop";
 
-## Route Type Registration
+export const urlpatterns = urls(({ path }) => [
+  path("/", HomePage, { name: "home" }),
+  include("/shop", shopPatterns, { name: "shop" }),
+]);
+```
 
-For global type inference:
+## Environment Types
 
 ```typescript
-// router.ts
-const _router = createRSCRouter<AppEnv>({ document: Document })
-  .routes(homeRoutes)
-  .map(() => import("./handlers/home"))
-  .routes("/shop", shopRoutes)
-  .map(() => import("./handlers/shop"));
+// Bindings passed as TEnv to createRouter<TEnv>()
+interface AppBindings {
+  DB: D1Database;
+  KV: KVNamespace;
+}
 
-// Extract route types
-type AppRoutes = typeof _router.routeMap;
+// Variables declared via module augmentation
+interface AppVariables {
+  user?: { id: string; name: string };
+}
+
+const router = createRouter<AppBindings>({
+  document: Document,
+  urls: urlpatterns,
+});
 
-// Augment global types
+// Register types globally for implicit typing
 declare global {
   namespace RSCRouter {
-    interface RegisteredRoutes extends AppRoutes {}
-    interface Env extends AppEnv {}
+    interface Env extends AppBindings {}
+    interface Vars extends AppVariables {}
   }
 }
-
-export default _router;
-export const href = _router.href;
 ```
 
-Now handlers have type-safe context without imports.
+## Connection Warmup
 
-## Cache Configuration
+Enabled by default. Keeps TCP+TLS connections alive so navigations after idle periods
+don't pay handshake costs.
 
-### Static cache
+After 60s of no user interaction, the connection is marked cold. When the user returns
+(tab becomes visible or first mouse/touch), a `HEAD ?_rsc_warmup` request re-establishes
+the TLS connection before the next navigation. The server responds with 204 No Content
+before any middleware or routing runs.
 
 ```typescript
-import { createMemorySegmentStore } from "rsc-router/cache";
-
-const cacheStore = createMemorySegmentStore();
-
-const router = createRSCRouter<AppEnv>({
+// Enabled by default
+const router = createRouter({
   document: Document,
-  cache: {
-    store: cacheStore,
-    enabled: true,
-  },
+  urls: urlpatterns,
 });
-```
 
-### Dynamic cache (per-environment)
-
-```typescript
-const router = createRSCRouter<AppEnv>({
+// Disable warmup
+const router = createRouter({
   document: Document,
-  cache: (env) => ({
-    store: env.Bindings.CACHE_KV,
-    enabled: env.Bindings.CACHE_ENABLED === "true",
-  }),
+  urls: urlpatterns,
+  warmup: false,
 });
 ```
 
-### Cloudflare KV cache
+The warmup request is relative to the current page path, so it works correctly
+with subpath deployments (reverse proxy, base path).
+
+## Telemetry
+
+The router emits structured lifecycle events through a pluggable telemetry sink.
+Zero overhead when not configured.
 
 ```typescript
-import { createCFKVSegmentStore } from "rsc-router/cache/cf";
+// Console sink for development
+import { createRouter, createConsoleSink } from "@rangojs/router";
 
-const router = createRSCRouter<AppEnv>({
+const router = createRouter({
   document: Document,
-  cache: (env) => ({
-    store: createCFKVSegmentStore(env.Bindings.CACHE_KV),
-    enabled: true,
-  }),
+  urls: urlpatterns,
+  telemetry: createConsoleSink(),
 });
 ```
 
-## Document Component
-
-The document wraps the entire app and persists during errors:
-
 ```typescript
-// document.tsx
-"use client";
-
-export function Document({ children }: { children: React.ReactNode }) {
-  return (
-    <html lang="en">
-      <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <title>My App</title>
-      </head>
-      <body>
-        {children}
-      </body>
-    </html>
-  );
-}
-```
-
-## Router Methods
-
-### match() - Full render
+// OpenTelemetry for production
+import { createRouter, createOTelSink } from "@rangojs/router";
+import { trace } from "@opentelemetry/api";
 
-```typescript
-const result = await router.match(request, env);
-// Returns full render tree with segments, loaders, metadata
+const router = createRouter({
+  document: Document,
+  urls: urlpatterns,
+  telemetry: createOTelSink(trace.getTracer("my-app")),
+});
 ```
 
-### matchPartial() - Partial navigation
-
 ```typescript
-const result = await router.matchPartial(request, env, {
-  actionId: "addToCart",
-  actionResult: { success: true },
+// Custom sink
+const router = createRouter({
+  telemetry: {
+    emit(event) {
+      // Send to any observability backend
+      myTracer.record(event);
+    },
+  },
 });
-// Only re-renders changed segments
 ```
 
-### matchError() - Error handling
+Events emitted: `request.start/end/error`, `loader.start/end/error`,
+`handler.error`, `cache.decision`, `revalidation.decision`.
 
-```typescript
-const result = await router.matchError(request, env, error);
-// Finds nearest error boundary
-```
+## SSR Streaming Policy
 
-### previewMatch() - Middleware validation
+Control whether HTML SSR responses stream progressively or wait for all content:
 
 ```typescript
-const result = await router.previewMatch(request, env);
-// Executes middleware without full segment resolution
+import { createRouter, type SSRStreamMode } from "@rangojs/router";
+
+const router = createRouter({
+  ssr: {
+    resolveStreaming: ({ request }) => {
+      const ua = request.headers.get("user-agent") ?? "";
+      // Bots that can't process streamed HTML get a fully resolved page
+      if (/Googlebot|bingbot/i.test(ua)) return "allReady";
+      return "stream";
+    },
+  },
+});
 ```
 
-## Complete Router Example
+`SSRStreamMode` is `"stream" | "allReady"`:
 
-```typescript
-// router.ts
-import { createRSCRouter } from "rsc-router/server";
-import { createMemorySegmentStore } from "rsc-router/cache";
-import { Document } from "./document";
-import { homeRoutes } from "./routes/home";
-import { shopRoutes } from "./routes/shop";
-import { adminRoutes } from "./routes/admin";
-import { loggerMiddleware, authMiddleware, adminMiddleware } from "./middleware";
+- `"stream"` (default) — flush HTML as React renders. Suspense fallbacks appear first, then resolved content streams in. Best for real users (fastest TTFB).
+- `"allReady"` — await `stream.allReady` before flushing. The full page arrives in one shot. Use for bots that cannot execute JavaScript or process chunked HTML.
 
-const cacheStore = createMemorySegmentStore();
+The resolver receives `{ request, env, url }` and may be sync or async. It only runs on HTML SSR paths — RSC partials, `__rsc` requests, and response routes are unaffected.
 
-const router = createRSCRouter<AppEnv>({
-  document: Document,
-  debugPerformance: true,
-  cache: { store: cacheStore, enabled: true },
-  defaultErrorBoundary: <DefaultError />,
-  notFound: ({ pathname }) => <NotFoundPage pathname={pathname} />,
-})
-  // Global middleware
-  .use(loggerMiddleware)
-
-  // Public routes
-  .routes(homeRoutes)
-  .map(() => import("./handlers/home"))
-
-  // Shop routes (with auth)
-  .routes("/shop", shopRoutes)
-  .use(authMiddleware)
-  .map(() => import("./handlers/shop"))
-
-  // Admin routes (with admin auth)
-  .routes("/admin", adminRoutes)
-  .use(adminMiddleware)
-  .map(() => import("./handlers/admin"));
-
-export default router;
-export const href = router.href;
-```
+When `resolveStreaming` is not configured, the default is `"stream"`.