@rangojs/router 0.0.0-experimental.10

package/package.json

@@ -0,0 +1,171 @@
+{
+  "name": "@rangojs/router",
+  "version": "0.0.0-experimental.10",
+  "type": "module",
+  "description": "Django-inspired RSC router with composable URL patterns",
+  "author": "Ivo Todorov",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ivogt/vite-rsc.git",
+    "directory": "packages/rangojs-router"
+  },
+  "homepage": "https://github.com/ivogt/vite-rsc#readme",
+  "bugs": {
+    "url": "https://github.com/ivogt/vite-rsc/issues"
+  },
+  "publishConfig": {
+    "access": "public",
+    "tag": "experimental"
+  },
+  "keywords": [
+    "react",
+    "rsc",
+    "react-server-components",
+    "router",
+    "vite"
+  ],
+  "exports": {
+    ".": {
+      "react-server": "./src/index.rsc.ts",
+      "types": "./src/index.rsc.ts",
+      "default": "./src/index.ts"
+    },
+    "./server": {
+      "types": "./src/server.ts",
+      "import": "./src/server.ts"
+    },
+    "./client": {
+      "react-server": "./src/client.rsc.tsx",
+      "types": "./src/client.tsx",
+      "default": "./src/client.tsx"
+    },
+    "./browser": {
+      "types": "./src/browser/index.ts",
+      "default": "./src/browser/index.ts"
+    },
+    "./ssr": {
+      "types": "./src/ssr/index.tsx",
+      "default": "./src/ssr/index.tsx"
+    },
+    "./rsc": {
+      "react-server": "./src/rsc/index.ts",
+      "types": "./src/rsc/index.ts",
+      "default": "./src/rsc/index.ts"
+    },
+    "./vite": {
+      "types": "./src/vite/index.ts",
+      "import": "./dist/vite/index.js"
+    },
+    "./types": {
+      "types": "./src/vite/version.d.ts"
+    },
+    "./__internal": {
+      "types": "./src/__internal.ts",
+      "default": "./src/__internal.ts"
+    },
+    "./internal/deps/browser": {
+      "types": "./src/deps/browser.ts",
+      "default": "./src/deps/browser.ts"
+    },
+    "./internal/deps/ssr": {
+      "types": "./src/deps/ssr.ts",
+      "default": "./src/deps/ssr.ts"
+    },
+    "./internal/deps/rsc": {
+      "react-server": "./src/deps/rsc.ts",
+      "types": "./src/deps/rsc.ts",
+      "default": "./src/deps/rsc.ts"
+    },
+    "./internal/deps/html-stream-client": {
+      "types": "./src/deps/html-stream-client.ts",
+      "default": "./src/deps/html-stream-client.ts"
+    },
+    "./internal/deps/html-stream-server": {
+      "types": "./src/deps/html-stream-server.ts",
+      "default": "./src/deps/html-stream-server.ts"
+    },
+    "./internal/rsc-handler": {
+      "react-server": "./src/rsc/handler.ts",
+      "types": "./src/rsc/handler.ts",
+      "default": "./src/rsc/handler.ts"
+    },
+    "./cache": {
+      "react-server": "./src/cache/index.ts",
+      "types": "./src/cache/index.ts",
+      "default": "./src/cache/index.ts"
+    },
+    "./theme": {
+      "types": "./src/theme/index.ts",
+      "default": "./src/theme/index.ts"
+    },
+    "./build": {
+      "types": "./src/build/index.ts",
+      "import": "./src/build/index.ts"
+    },
+    "./host": {
+      "react-server": "./src/host/index.ts",
+      "types": "./src/host/index.ts",
+      "default": "./src/host/index.ts"
+    },
+    "./host/testing": {
+      "types": "./src/host/testing.ts",
+      "default": "./src/host/testing.ts"
+    }
+  },
+  "files": [
+    "src",
+    "!src/**/__tests__",
+    "!src/**/__mocks__",
+    "!src/**/*.test.ts",
+    "!src/**/*.test.tsx",
+    "dist",
+    "skills",
+    "CLAUDE.md",
+    "README.md"
+  ],
+  "bin": {
+    "rango": "./dist/bin/rango.js"
+  },
+  "peerDependencies": {
+    "@cloudflare/vite-plugin": "^1.21.0",
+    "@vitejs/plugin-rsc": "^0.5.14",
+    "react": "^18.0.0 || ^19.0.0",
+    "vite": "^7.3.0"
+  },
+  "peerDependenciesMeta": {
+    "@cloudflare/vite-plugin": {
+      "optional": true
+    },
+    "vite": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@vitejs/plugin-rsc": "^0.5.14",
+    "magic-string": "^0.30.17",
+    "picomatch": "^4.0.3",
+    "rsc-html-stream": "^0.0.7"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.49.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "esbuild": "^0.27.0",
+    "jiti": "^2.6.1",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "tinyexec": "^0.3.2",
+    "typescript": "^5.3.0",
+    "vitest": "^4.0.0"
+  },
+  "scripts": {
+    "build": "pnpm dlx esbuild src/vite/index.ts --bundle --format=esm --outfile=dist/vite/index.js --platform=node --packages=external && pnpm dlx esbuild src/bin/rango.ts --bundle --format=esm --outfile=dist/bin/rango.js --platform=node --packages=external --banner:js='#!/usr/bin/env node'",
+    "typecheck": "tsc --noEmit",
+    "test": "playwright test",
+    "test:ui": "playwright test --ui",
+    "test:unit": "vitest run",
+    "test:unit:watch": "vitest"
+  }
+}

package/skills/caching/SKILL.md

@@ -0,0 +1,191 @@
+---
+name: caching
+description: Configure segment caching with memory or Cloudflare KV stores in @rangojs/router
+argument-hint: [setup]
+---
+
+# Caching
+
+@rangojs/router supports segment-level caching with stale-while-revalidate (SWR) for optimal performance.
+
+## Route-Level Caching with cache()
+
+Use the `cache()` DSL function to cache routes:
+
+```typescript
+import { urls } from "@rangojs/router";
+
+export const urlpatterns = urls(({ path, cache }) => [
+  // Cache these routes for 60 seconds, SWR for 5 minutes
+  cache({ ttl: 60, swr: 300 }, () => [
+    path("/blog", BlogIndex, { name: "blog" }),
+    path("/blog/:slug", BlogPost, { name: "blogPost" }),
+  ]),
+
+  // Uncached routes
+  path("/account", AccountPage, { name: "account" }),
+]);
+```
+
+## Cache Options
+
+```typescript
+cache({
+  ttl: 60,      // Time-to-live in seconds (default: 60)
+  swr: 300,     // Stale-while-revalidate window (default: 300)
+}, () => [
+  // Cached routes
+])
+```
+
+## Loader-Level Caching
+
+Cache individual loaders:
+
+```typescript
+path("/product/:slug", ProductPage, { name: "product" }, () => [
+  // Cache this loader's results
+  loader(ProductLoader, () => [
+    cache({ ttl: 300 }),
+  ]),
+
+  // This loader is not cached
+  loader(CartLoader),
+])
+```
+
+## Global Cache Configuration
+
+Configure a cache store in the router:
+
+```typescript
+import { createRouter } from "@rangojs/router";
+import { MemorySegmentCacheStore } from "@rangojs/router/rsc";
+
+const store = new MemorySegmentCacheStore({
+  defaults: { ttl: 60, swr: 300 },
+});
+
+const router = createRouter({
+  document: Document,
+  urls: urlpatterns,
+  cache: {
+    store,
+    enabled: true,
+  },
+});
+```
+
+## Cache Stores
+
+### Memory Store
+
+For single-instance deployments:
+
+```typescript
+import { MemorySegmentCacheStore } from "@rangojs/router/rsc";
+
+const store = new MemorySegmentCacheStore({
+  defaults: { ttl: 60, swr: 300 },
+  maxSize: 1000,  // Max entries
+});
+```
+
+### Cloudflare KV Store
+
+For distributed caching on Cloudflare Workers:
+
+```typescript
+import { CFCacheStore } from "@rangojs/router/cache/cf";
+
+const router = createRouter({
+  document: Document,
+  urls: urlpatterns,
+  cache: (env) => ({
+    store: new CFCacheStore({
+      kv: env.Bindings.CACHE_KV,
+      waitUntil: (fn) => env.ctx.waitUntil(fn),
+    }),
+    enabled: true,
+  }),
+});
+```
+
+## Nested Cache Boundaries
+
+Override cache settings for specific sections:
+
+```typescript
+// Global cache
+cache({ ttl: 300 }, () => [
+  path("/blog", BlogIndex, { name: "blog" }),
+
+  // Override: shorter TTL for dynamic content
+  cache({ ttl: 30 }, () => [
+    path("/blog/:slug", BlogPost, { name: "blogPost" }),
+  ]),
+])
+```
+
+## Custom Cache Store
+
+Create a dedicated store for specific routes:
+
+```typescript
+const checkoutCache = new MemorySegmentCacheStore({
+  defaults: { ttl: 10 },
+});
+
+// In urls
+cache({ store: checkoutCache }, () => [
+  path("/checkout", CheckoutPage, { name: "checkout" }),
+])
+```
+
+## Complete Example
+
+```typescript
+import { urls } from "@rangojs/router";
+import { MemorySegmentCacheStore } from "@rangojs/router/rsc";
+
+// Custom store for checkout (short TTL)
+const checkoutCache = new MemorySegmentCacheStore({
+  defaults: { ttl: 10 },
+});
+
+export const urlpatterns = urls(({ path, layout, cache, loader, revalidate }) => [
+  // Public routes with aggressive caching
+  cache({ ttl: 300, swr: 600 }, () => [
+    path("/", HomePage, { name: "home" }),
+    path("/about", AboutPage, { name: "about" }),
+  ]),
+
+  // Blog routes with moderate caching
+  cache({ ttl: 60, swr: 300 }, () => [
+    layout(<BlogLayout />, () => [
+      path("/blog", BlogIndex, { name: "blog" }),
+      path("/blog/:slug", BlogPost, { name: "blogPost" }, () => [
+        loader(BlogPostLoader, () => [cache()]),  // Use boundary cache settings
+      ]),
+    ]),
+  ]),
+
+  // Shop routes with per-loader caching
+  layout(<ShopLayout />, () => [
+    path("/shop/product/:slug", ProductPage, { name: "product" }, () => [
+      loader(ProductLoader, () => [cache({ ttl: 120 })]),
+      loader(CartLoader, () => [
+        revalidate(({ actionId }) => actionId?.includes("Cart") ?? false),
+      ]),
+    ]),
+  ]),
+
+  // Checkout with custom cache store
+  cache({ store: checkoutCache }, () => [
+    path("/checkout", CheckoutPage, { name: "checkout" }),
+  ]),
+
+  // No cache for account pages
+  path("/account", AccountPage, { name: "account" }),
+]);
+```

package/skills/debug-manifest/SKILL.md

@@ -0,0 +1,108 @@
+---
+name: debug-manifest
+description: Debug and inspect route manifest structure
+argument-hint:
+---
+
+# Debug Manifest
+
+Inspect the route manifest to verify parent relationships, shortCodes, and route structure.
+
+## Quick Access
+
+In development, visit:
+```
+http://localhost:PORT/__debug_manifest
+```
+
+Returns formatted JSON with all routes and layouts.
+
+## Programmatic Access
+
+```typescript
+import { router } from "./router.js";
+
+// Only in development
+if (process.env.NODE_ENV !== "production") {
+  const manifest = await router.debugManifest();
+  console.log(JSON.stringify(manifest, null, 2));
+}
+```
+
+## Manifest Structure
+
+```json
+{
+  "routes": {
+    "home.index": {
+      "id": "debug.M0.$root.$route.0.home.index",
+      "shortCode": "M0L0R0",
+      "type": "route",
+      "parentShortCode": "M0L0",
+      "pattern": "/",
+      "hasLoader": false,
+      "hasMiddleware": false,
+      "hasErrorBoundary": false,
+      "parallelCount": 0,
+      "interceptCount": 0
+    }
+  },
+  "layouts": {
+    "debug.M0.$root": {
+      "id": "debug.M0.$root",
+      "shortCode": "M0L0",
+      "type": "layout",
+      "parentShortCode": null
+    }
+  },
+  "totalRoutes": 45,
+  "totalLayouts": 18
+}
+```
+
+## ShortCode Format
+
+| Prefix | Meaning |
+|--------|---------|
+| **M** | Mount index (multiple `.routes()` calls) |
+| **L** | Layout |
+| **C** | Cache boundary |
+| **R** | Route |
+| **P** | Parallel slot |
+
+Example: `M0L0L1C0R0` = Mount 0 → Root Layout → Nested Layout → Cache → Route
+
+## Debugging Checklist
+
+1. **Routes have parents**: `parentShortCode` should NOT be `null` (except root layout)
+2. **Correct hierarchy**: ShortCode should reflect nesting (e.g., `M0L0R0` not `M0R0`)
+3. **Loaders attached**: Check `hasLoader: true` for routes with data requirements
+4. **Intercepts registered**: `interceptCount > 0` for modal/overlay patterns
+
+## Comparing Manifests
+
+```typescript
+import {
+  serializeManifest,
+  compareManifests,
+  formatManifestDiff
+} from "@rangojs/router/__internal";
+
+const oldManifest = await router.debugManifest();
+// ... make changes ...
+const newManifest = await router.debugManifest();
+
+const diff = compareManifests(oldManifest, newManifest);
+console.log(formatManifestDiff(diff));
+```
+
+## Common Issues
+
+### Routes have `parentShortCode: null`
+Routes should have a layout parent. Check that `urls()` handler is being wrapped in root layout.
+
+### Missing layouts in hierarchy
+Verify `layout()` calls wrap child routes correctly.
+
+### Wrong mount index
+Multiple `.routes()` calls create separate mounts (M0, M1, etc.). Use `include()` to share context.

package/skills/document-cache/SKILL.md

@@ -0,0 +1,180 @@
+---
+name: document-cache
+description: Cache full HTTP responses at the edge with Cache-Control headers
+argument-hint: [setup]
+---
+
+# Document Cache
+
+Caches complete HTTP responses (HTML/RSC) at the edge based on Cache-Control headers. Routes opt-in by setting `s-maxage`.
+
+## Setup
+
+Configure document cache in router:
+
+```typescript
+import { createRouter } from "@rangojs/router";
+import { CFCacheStore } from "@rangojs/router/cache/cf";
+import { urlpatterns } from "./urls";
+
+const router = createRouter<AppEnv>({
+  document: Document,
+  urls: urlpatterns,
+  documentCache: (env) => ({
+    store: new CFCacheStore({ ctx: env.ctx }),
+    skipPaths: ["/api", "/admin"],
+    debug: process.env.NODE_ENV === "development",
+  }),
+});
+
+export default router;
+```
+
+## Route Opt-In with cache()
+
+Routes opt-in to document caching using the `cache()` DSL with `documentCache` option:
+
+```typescript
+import { urls } from "@rangojs/router";
+
+export const urlpatterns = urls(({ path, cache }) => [
+  // Cache full page for 5 min, serve stale for 1 hour
+  cache({ documentCache: { sMaxAge: 300, swr: 3600 } }, () => [
+    path("/blog", BlogIndex, { name: "blog" }),
+  ]),
+
+  // Long cache for individual posts
+  cache({ documentCache: { sMaxAge: 3600, swr: 86400 } }, () => [
+    path("/blog/:slug", BlogPost, { name: "blogPost" }),
+  ]),
+
+  // No cache for dashboard (no documentCache option)
+  path("/dashboard", Dashboard, { name: "dashboard" }),
+]);
+```
+
+## Document Cache Options
+
+```typescript
+createRouter({
+  // ...
+  documentCache: (env) => ({
+    // Cache store (required)
+    store: new CFCacheStore({ ctx: env.ctx }),
+
+    // Skip specific paths
+    skipPaths: ["/api", "/admin"],
+
+    // Custom cache key
+    keyGenerator: (url) => url.pathname,
+
+    // Conditional caching
+    isEnabled: (ctx) => !ctx.request.headers.has("x-preview"),
+
+    // Debug logging
+    debug: true,
+  }),
+});
+```
+
+## How It Works
+
+```
+Request → Check Cache
+           ↓
+    ┌──────┴──────┐
+    │             │
+  HIT           MISS
+    │             │
+    ↓             ↓
+  Fresh?      Run handler
+    │             │
+   Yes → Return   Has documentCache?
+    │             │
+   No (stale)    Yes → Cache + Return
+    │             │
+    ↓            No → Return (no cache)
+  Return stale,
+  revalidate in
+  background (SWR)
+```
+
+## Cache Status Header
+
+Response includes `x-document-cache-status`:
+- `HIT` - Fresh cache hit
+- `STALE` - Served stale, revalidating in background
+- `MISS` - Cache miss, response was generated fresh
+
+## Cache Key Generation
+
+Default keys differentiate:
+- HTML requests: `{pathname}:html`
+- RSC partials: `{pathname}:{segmentHash}:rsc`
+
+Segment hash ensures different cached responses for navigations from different source pages (with different layouts).
+
+## What Gets Cached
+
+- Full HTML responses (document requests)
+- RSC payloads (client navigation)
+- Only 200 OK responses with documentCache enabled
+
+## What's NOT Cached
+
+- Server actions (`_rsc_action`)
+- Loader requests (`_rsc_loader`)
+- Routes without `documentCache` option
+- Non-200 responses
+
+## Complete Example
+
+```typescript
+// router.tsx
+import { createRouter } from "@rangojs/router";
+import { CFCacheStore } from "@rangojs/router/cache/cf";
+import { urlpatterns } from "./urls";
+
+const router = createRouter<AppEnv>({
+  document: Document,
+  urls: urlpatterns,
+  documentCache: (env) => ({
+    store: new CFCacheStore({ ctx: env.ctx }),
+    skipPaths: ["/api"],
+    debug: process.env.NODE_ENV === "development",
+  }),
+});
+
+export default router;
+
+// urls.tsx
+import { urls } from "@rangojs/router";
+
+export const urlpatterns = urls(({ path, layout, cache, loader }) => [
+  // Blog with document caching
+  cache({ documentCache: { sMaxAge: 300, swr: 3600 } }, () => [
+    layout(<BlogLayout />, () => [
+      path("/blog", BlogIndex, { name: "blog" }),
+      path("/blog/:slug", BlogPost, { name: "blogPost" }, () => [
+        loader(BlogPostLoader),
+      ]),
+    ]),
+  ]),
+
+  // Dashboard - no document cache (dynamic content)
+  layout(<DashboardLayout />, () => [
+    path("/dashboard", Dashboard, { name: "dashboard" }),
+  ]),
+]);
+```
+
+## Document Cache vs Segment Cache
+
+| Feature | Document Cache | Segment Cache |
+|---------|---------------|---------------|
+| Granularity | Full response | Individual segments |
+| Opt-in | `documentCache` in cache() | `cache({ ttl, swr })` |
+| Use case | Static pages | Dynamic compositions |
+| Key includes | URL + segment hash | Route params |
+
+Use document cache for mostly-static pages. Use segment cache when different parts of a page have different cache requirements.