@rangojs/router 0.0.0-experimental.21 → 0.0.0-experimental.21efdd86

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rangojs/router",
-  "version": "0.0.0-experimental.21",
+  "version": "0.0.0-experimental.21efdd86",
   "description": "Django-inspired RSC router with composable URL patterns",
   "keywords": [
     "react",
@@ -132,8 +132,17 @@
     "access": "public",
     "tag": "experimental"
   },
+  "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' && chmod +x dist/bin/rango.js",
+    "prepublishOnly": "pnpm build",
+    "typecheck": "tsc --noEmit",
+    "test": "playwright test",
+    "test:ui": "playwright test --ui",
+    "test:unit": "vitest run",
+    "test:unit:watch": "vitest"
+  },
   "dependencies": {
-    "@vitejs/plugin-rsc": "^0.5.14",
+    "@vitejs/plugin-rsc": "^0.5.19",
     "magic-string": "^0.30.17",
     "picomatch": "^4.0.3",
     "rsc-html-stream": "^0.0.7"
@@ -141,12 +150,12 @@
   "devDependencies": {
     "@playwright/test": "^1.49.1",
     "@types/node": "^24.10.1",
-    "@types/react": "^19.2.7",
-    "@types/react-dom": "^19.2.3",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
     "esbuild": "^0.27.0",
     "jiti": "^2.6.1",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
+    "react": "catalog:",
+    "react-dom": "catalog:",
     "tinyexec": "^0.3.2",
     "typescript": "^5.3.0",
     "vitest": "^4.0.0"
@@ -164,13 +173,5 @@
     "vite": {
       "optional": true
     }
-  },
-  "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' && chmod +x dist/bin/rango.js",
-    "typecheck": "tsc --noEmit",
-    "test": "playwright test",
-    "test:ui": "playwright test --ui",
-    "test:unit": "vitest run",
-    "test:unit:watch": "vitest"
   }
-}
+}

package/skills/breadcrumbs/SKILL.md

@@ -0,0 +1,250 @@
+---
+name: breadcrumbs
+description: Built-in Breadcrumbs handle for accumulating breadcrumb navigation across route segments
+argument-hint: [setup]
+---
+
+# Breadcrumbs
+
+Built-in handle for accumulating breadcrumb items across route segments.
+Each layout/route pushes items via `ctx.use(Breadcrumbs)`, and they are
+collected in parent-to-child order with automatic deduplication by `href`.
+
+## BreadcrumbItem Type
+
+```typescript
+interface BreadcrumbItem {
+  label: string; // Display text
+  href: string; // URL the breadcrumb links to
+  content?: ReactNode | Promise<ReactNode>; // Optional extra content (sync or async)
+}
+```
+
+## Pushing Breadcrumbs (Server)
+
+Import `Breadcrumbs` from `@rangojs/router` in RSC/server context:
+
+```typescript
+import { urls, Breadcrumbs } from "@rangojs/router";
+import { Outlet } from "@rangojs/router/client";
+
+export const urlpatterns = urls(({ path, layout }) => [
+  // Root layout pushes "Home"
+  layout((ctx) => {
+    const breadcrumb = ctx.use(Breadcrumbs);
+    breadcrumb({ label: "Home", href: "/" });
+    return <RootLayout />;
+  }, () => [
+    path("/", HomePage, { name: "home" }),
+
+    // Nested layout pushes "Blog"
+    layout((ctx) => {
+      const breadcrumb = ctx.use(Breadcrumbs);
+      breadcrumb({ label: "Blog", href: "/blog" });
+      return <BlogLayout />;
+    }, () => [
+      path("/blog", BlogIndex, { name: "blog.index" }),
+
+      // Route handler pushes post title
+      path("/blog/:slug", (ctx) => {
+        const breadcrumb = ctx.use(Breadcrumbs);
+        breadcrumb({ label: ctx.params.slug, href: `/blog/${ctx.params.slug}` });
+        return <BlogPost slug={ctx.params.slug} />;
+      }, { name: "blog.post" }),
+    ]),
+  ]),
+]);
+```
+
+On `/blog/my-post`, breadcrumbs accumulate: `Home > Blog > my-post`.
+
+## Async Content
+
+The `content` field supports `Promise<ReactNode>` for streaming:
+
+```typescript
+path("/product/:id", async (ctx) => {
+  const breadcrumb = ctx.use(Breadcrumbs);
+  const productPromise = fetchProduct(ctx.params.id);
+
+  breadcrumb({
+    label: "Product",
+    href: `/product/${ctx.params.id}`,
+    content: productPromise.then((p) => <span>({p.category})</span>),
+  });
+
+  const product = await productPromise;
+  return <ProductPage product={product} />;
+}, { name: "product" })
+```
+
+Async content is a `Promise<ReactNode>`. Resolve it in your component
+with React's `use()` hook wrapped in `<Suspense>`.
+
+## Consuming Breadcrumbs (Client)
+
+Use `useHandle(Breadcrumbs)` in a client component to read the accumulated items:
+
+```tsx
+"use client";
+import { useHandle, Breadcrumbs, Link } from "@rangojs/router/client";
+
+function BreadcrumbNav() {
+  const breadcrumbs = useHandle(Breadcrumbs);
+
+  if (!breadcrumbs.length) return null;
+
+  return (
+    <nav aria-label="Breadcrumb">
+      <ol>
+        {breadcrumbs.map((crumb, i) => (
+          <li key={crumb.href}>
+            {i === breadcrumbs.length - 1 ? (
+              <span aria-current="page">{crumb.label}</span>
+            ) : (
+              <Link to={crumb.href}>{crumb.label}</Link>
+            )}
+          </li>
+        ))}
+      </ol>
+    </nav>
+  );
+}
+```
+
+### With Selector
+
+Re-render only when the selected value changes:
+
+```tsx
+// Only the last breadcrumb
+const current = useHandle(Breadcrumbs, (data) => data.at(-1));
+
+// Breadcrumb count
+const count = useHandle(Breadcrumbs, (data) => data.length);
+```
+
+## Deduplication
+
+The built-in collect function deduplicates by `href`. If multiple segments
+push the same `href`, the last one wins. This prevents duplicates when
+navigating between sibling routes that share a common breadcrumb.
+
+## Passing as Props
+
+Breadcrumbs handle can be passed from server to client components:
+
+```tsx
+// Server component
+path("/dashboard", (ctx) => {
+  const breadcrumb = ctx.use(Breadcrumbs);
+  breadcrumb({ label: "Dashboard", href: "/dashboard" });
+  return <DashboardNav handle={Breadcrumbs} />;
+});
+
+// Client component
+("use client");
+import { useHandle, type Breadcrumbs } from "@rangojs/router/client";
+
+function DashboardNav({ handle }: { handle: typeof Breadcrumbs }) {
+  const crumbs = useHandle(handle);
+  return (
+    <nav>
+      {crumbs.map((c) => (
+        <a href={c.href}>{c.label}</a>
+      ))}
+    </nav>
+  );
+}
+```
+
+## Complete Example
+
+```typescript
+// urls.tsx
+import { urls, Breadcrumbs, Meta } from "@rangojs/router";
+import { Outlet, MetaTags } from "@rangojs/router/client";
+import { BreadcrumbNav } from "./components/BreadcrumbNav";
+
+function RootLayout() {
+  return (
+    <html lang="en">
+      <head><MetaTags /></head>
+      <body>
+        <BreadcrumbNav />
+        <main><Outlet /></main>
+      </body>
+    </html>
+  );
+}
+
+export const urlpatterns = urls(({ path, layout }) => [
+  layout((ctx) => {
+    ctx.use(Breadcrumbs)({ label: "Home", href: "/" });
+    ctx.use(Meta)({ title: "My App" });
+    return <RootLayout />;
+  }, () => [
+    path("/", () => <h1>Welcome</h1>, { name: "home" }),
+
+    layout((ctx) => {
+      ctx.use(Breadcrumbs)({ label: "Shop", href: "/shop" });
+      return <Outlet />;
+    }, () => [
+      path("/shop", () => <h1>Shop</h1>, { name: "shop" }),
+      path("/shop/:slug", (ctx) => {
+        ctx.use(Breadcrumbs)({
+          label: ctx.params.slug,
+          href: `/shop/${ctx.params.slug}`,
+        });
+        return <h1>Product: {ctx.params.slug}</h1>;
+      }, { name: "shop.product" }),
+    ]),
+  ]),
+]);
+```
+
+Navigating to `/shop/widget` produces: `Home / Shop / widget`
+
+## Custom Handles
+
+Create your own handle with `createHandle()`:
+
+```typescript
+import { createHandle } from "@rangojs/router";
+
+// Default: flatten into array
+export const PageTitle = createHandle<string, string>(
+  (segments) => segments.flat().at(-1) ?? "Default Title",
+);
+
+// No collect function: default flattens into T[]
+export const Warnings = createHandle<string>();
+```
+
+The Vite `exposeInternalIds` plugin auto-injects a stable `$$id` based on
+file path and export name. No manual naming required for project-local code.
+
+### Handles in 3rd-party packages
+
+The `exposeInternalIds` plugin skips `node_modules/`, so handles defined in
+published packages won't get auto-injected IDs. Pass a manual tag as the
+second argument to `createHandle()`:
+
+```typescript
+import { createHandle } from "@rangojs/router";
+
+// With a collect function (reducer): collect is first arg, tag is second
+export const Breadcrumbs = createHandle<BreadcrumbItem, BreadcrumbItem[]>(
+  collectBreadcrumbs,
+  "__my_package_breadcrumbs__",
+);
+
+// Without a collect function: pass undefined, then the tag
+export const Warnings = createHandle<string>(
+  undefined,
+  "__my_package_warnings__",
+);
+```
+
+The tag must be globally unique and stable across builds. Without it,
+`createHandle` throws in development mode.

package/skills/cache-guide/SKILL.md

@@ -162,6 +162,38 @@ middleware(async (ctx, next) => {
 });
 ```
 
+## Context Variable Cache Safety
+
+Context variables created with `createVar()` are cacheable by default and can
+be read freely inside `cache()` and `"use cache"` scopes. Non-cacheable vars
+throw at read time to prevent request-specific data from being captured.
+
+There are two ways to mark a value as non-cacheable:
+
+```typescript
+// Var-level policy — inherently request-specific data
+const Session = createVar<SessionData>({ cache: false });
+
+// Write-level escalation — this specific write is non-cacheable
+ctx.set(Theme, derivedTheme, { cache: false });
+```
+
+"Least cacheable wins": if either the var definition or the `ctx.set()` call
+specifies `cache: false`, the value is non-cacheable.
+
+**Behavior inside cache scopes:**
+
+| Operation                           | Inside `cache()` / `"use cache"` |
+| ----------------------------------- | -------------------------------- |
+| `ctx.get(cacheableVar)`             | Allowed                          |
+| `ctx.get(nonCacheableVar)`          | Throws                           |
+| `ctx.set(var, value)` (cacheable)   | Allowed                          |
+| `ctx.header()`, `ctx.cookie()`, etc | Throws (response side effects)   |
+
+Write is dumb — `ctx.set()` stores the cache metadata but does not enforce.
+Enforcement happens at read time (`ctx.get()`), where ALS detects the cache
+scope and rejects non-cacheable reads.
+
 ## Loaders Are Always Fresh
 
 Loaders are **never cached** by route-level `cache()`. Even on a full cache hit

package/skills/caching/SKILL.md

@@ -89,7 +89,7 @@ Configure a cache store in the router:
 
 ```typescript
 import { createRouter } from "@rangojs/router";
-import { MemorySegmentCacheStore } from "@rangojs/router/rsc";
+import { MemorySegmentCacheStore } from "@rangojs/router/cache";
 
 const store = new MemorySegmentCacheStore({
   defaults: { ttl: 60, swr: 300 },
@@ -112,7 +112,7 @@ const router = createRouter({
 For single-instance deployments:
 
 ```typescript
-import { MemorySegmentCacheStore } from "@rangojs/router/rsc";
+import { MemorySegmentCacheStore } from "@rangojs/router/cache";
 
 const store = new MemorySegmentCacheStore({
   defaults: { ttl: 60, swr: 300 },
@@ -120,26 +120,67 @@ const store = new MemorySegmentCacheStore({
 });
 ```
 
-### Cloudflare KV Store
+### Cloudflare Edge Cache Store
 
-For distributed caching on Cloudflare Workers:
+For distributed caching on Cloudflare Workers using the Cache API:
 
 ```typescript
-import { CFCacheStore } from "@rangojs/router/cache/cf";
+import { CFCacheStore } from "@rangojs/router/cache";
 
 const router = createRouter<AppBindings>({
   document: Document,
   urls: urlpatterns,
   cache: (env, ctx) => ({
     store: new CFCacheStore({
-      kv: env.CACHE_KV,
-      waitUntil: (fn) => ctx!.waitUntil(fn),
+      ctx,
+      defaults: { ttl: 60, swr: 300 },
     }),
     enabled: true,
   }),
 });
 ```
 
+### With KV L2 Persistence
+
+Add a KV namespace for global cross-colo persistence. On Cache API miss, KV is
+checked and hits are promoted back to L1. Writes go to both layers.
+
+```typescript
+import { CFCacheStore } from "@rangojs/router/cache";
+
+const router = createRouter<AppBindings>({
+  document: Document,
+  urls: urlpatterns,
+  cache: (env, ctx) => ({
+    store: new CFCacheStore({
+      ctx,
+      kv: env.CACHE_KV, // optional KV namespace binding
+      defaults: { ttl: 60, swr: 300 },
+    }),
+    enabled: true,
+  }),
+});
+```
+
+**How the two layers work:**
+
+| Scenario     | L1 (Cache API) | L2 (KV) | Result                        |
+| ------------ | -------------- | ------- | ----------------------------- |
+| Hot request  | HIT            | —       | Serve from L1 (fast)          |
+| Cold colo    | MISS           | HIT     | Serve from KV, promote to L1  |
+| First render | MISS           | MISS    | Render, write to both L1 + KV |
+
+KV entries require `expirationTtl >= 60s`. Short-lived entries (< 60s total TTL)
+are only cached in L1.
+
+## Context Variables Inside Cache Boundaries
+
+Context variables (`createVar`) are cacheable by default and can be read and
+written inside `cache()` scopes. Variables marked with `{ cache: false }` (at
+the var level or write level) throw when read inside a cache scope. Response
+side effects (`ctx.header()`, `ctx.cookie()`) always throw inside cache
+boundaries. See `/cache-guide` for the full cache safety table.
+
 ## Nested Cache Boundaries
 
 Override cache settings for specific sections:
@@ -175,7 +216,7 @@ cache({ store: checkoutCache }, () => [
 
 ```typescript
 import { urls } from "@rangojs/router";
-import { MemorySegmentCacheStore } from "@rangojs/router/rsc";
+import { MemorySegmentCacheStore } from "@rangojs/router/cache";
 
 // Custom store for checkout (short TTL)
 const checkoutCache = new MemorySegmentCacheStore({

package/skills/document-cache/SKILL.md

@@ -14,7 +14,7 @@ Configure document cache in router:
 
 ```typescript
 import { createRouter } from "@rangojs/router";
-import { CFCacheStore } from "@rangojs/router/cache/cf";
+import { CFCacheStore } from "@rangojs/router/cache";
 import { urlpatterns } from "./urls";
 
 const router = createRouter<AppBindings>({
@@ -134,7 +134,7 @@ Segment hash ensures different cached responses for navigations from different s
 ```typescript
 // router.tsx
 import { createRouter } from "@rangojs/router";
-import { CFCacheStore } from "@rangojs/router/cache/cf";
+import { CFCacheStore } from "@rangojs/router/cache";
 import { urlpatterns } from "./urls";
 
 const router = createRouter<AppBindings>({

package/skills/hooks/SKILL.md

@@ -6,7 +6,8 @@ argument-hint: [hook-name]
 
 # Client-Side React Hooks
 
-All hooks are imported from `@rangojs/router` or `@rangojs/router/client`.
+Import the hooks and components in this skill from `@rangojs/router/client`.
+The root `@rangojs/router` entrypoint is for server/RSC APIs and shared types.
 
 ## Navigation Hooks
 
@@ -57,13 +58,33 @@ function NavigationControls() {
 }
 ```
 
+#### Skipping revalidation
+
+Pass `revalidate: false` to skip the RSC server fetch for same-pathname navigations (search param or hash changes). The URL updates and all hooks re-render, but server components stay as-is.
+
+```tsx
+// Update search params without server round-trip
+router.push("/products?color=blue", { revalidate: false });
+router.replace("/products?page=3", { revalidate: false });
+```
+
+If the pathname changes, `revalidate: false` is silently ignored and a full navigation occurs. This also works on `<Link>`:
+
+```tsx
+<Link to="/products?color=blue" revalidate={false}>
+  Blue
+</Link>
+```
+
+Plain `<a>` tags can opt in via `data-revalidate="false"`.
+
 ### useSegments()
 
 Access current URL path and matched route segments:
 
 ```tsx
 "use client";
-import { useSegments } from "@rangojs/router";
+import { useSegments } from "@rangojs/router/client";
 
 function Breadcrumbs() {
   const { path, segmentIds, location } = useSegments();
@@ -107,7 +128,7 @@ Access loader data (strict - data guaranteed):
 
 ```tsx
 "use client";
-import { useLoader } from "@rangojs/router";
+import { useLoader } from "@rangojs/router/client";
 import { ProductLoader } from "../loaders/product";
 
 function ProductPrice() {
@@ -143,7 +164,7 @@ Access loader with on-demand fetching (flexible):
 
 ```tsx
 "use client";
-import { useFetchLoader } from "@rangojs/router";
+import { useFetchLoader } from "@rangojs/router/client";
 import { SearchLoader } from "../loaders/search";
 
 function SearchResults() {
@@ -197,7 +218,7 @@ server, JSON bodies are available via `ctx.body` and FormData bodies via `ctx.fo
 
 ```tsx
 "use client";
-import { useFetchLoader } from "@rangojs/router";
+import { useFetchLoader } from "@rangojs/router/client";
 import { FileUploadLoader } from "../loaders/upload";
 
 function FileUploader() {
@@ -238,22 +259,6 @@ export const FileUploadLoader = createLoader(async (ctx) => {
 }, true); // true = fetchable (can be called from the client via load())
 ```
 
-### useLoaderData()
-
-Get all loader data in current context:
-
-```tsx
-"use client";
-import { useLoaderData } from "@rangojs/router";
-
-function DebugPanel() {
-  const allData = useLoaderData();
-  // Record<string, any> - Map of loader ID to data
-
-  return <pre>{JSON.stringify(allData, null, 2)}</pre>;
-}
-```
-
 ## Handle Hooks
 
 ### useHandle()
@@ -262,8 +267,7 @@ Access accumulated handle data from route segments:
 
 ```tsx
 "use client";
-import { useHandle } from "@rangojs/router";
-import { Breadcrumbs } from "../handles/breadcrumbs";
+import { useHandle, Breadcrumbs } from "@rangojs/router/client";
 
 function BreadcrumbNav() {
   const crumbs = useHandle(Breadcrumbs);
@@ -297,8 +301,7 @@ path("/dashboard", (ctx) => {
 
 // Client component — typeof infers the full Handle<T> type
 ("use client");
-import { useHandle } from "@rangojs/router/client";
-import type { Breadcrumbs } from "../handles";
+import { useHandle, type Breadcrumbs } from "@rangojs/router/client";
 
 function DashboardNav({ handle }: { handle: typeof Breadcrumbs }) {
   const crumbs = useHandle(handle);
@@ -324,7 +327,7 @@ Track state of server action invocations:
 
 ```tsx
 "use client";
-import { useAction } from "@rangojs/router";
+import { useAction } from "@rangojs/router/client";
 import { addToCart } from "../actions/cart";
 
 function AddToCartButton({ productId }: { productId: string }) {
@@ -359,7 +362,7 @@ Read type-safe state from history:
 
 ```tsx
 "use client";
-import { useLocationState, createLocationState } from "@rangojs/router";
+import { useLocationState, createLocationState } from "@rangojs/router/client";
 
 // Define typed state (all export patterns supported)
 // Keys are auto-injected by the Vite plugin -- no manual key needed.
@@ -509,7 +512,7 @@ Manually control client-side navigation cache:
 
 ```tsx
 "use client";
-import { useClientCache } from "@rangojs/router";
+import { useClientCache } from "@rangojs/router/client";
 
 function SaveButton() {
   const { clear } = useClientCache();
@@ -537,7 +540,7 @@ function SaveButton() {
 Render child content in layouts:
 
 ```tsx
-import { Outlet, ParallelOutlet } from "@rangojs/router";
+import { Outlet, ParallelOutlet } from "@rangojs/router/client";
 
 function DashboardLayout({ children }: { children?: React.ReactNode }) {
   return (
@@ -558,7 +561,7 @@ Access outlet content programmatically:
 
 ```tsx
 "use client";
-import { useOutlet } from "@rangojs/router";
+import { useOutlet } from "@rangojs/router/client";
 
 function ConditionalLayout() {
   const outlet = useOutlet();
@@ -695,7 +698,6 @@ See `/links` for full URL generation guide including server-side `ctx.reverse`.
 | `useLinkStatus()`    | Link pending state                | { pending }                                     |
 | `useLoader()`        | Loader data (strict)              | data, isLoading, error                          |
 | `useFetchLoader()`   | Loader with on-demand fetch       | data, load, isLoading                           |
-| `useLoaderData()`    | All loader data                   | Record<string, any>                             |
 | `useHandle()`        | Accumulated handle data           | T (handle type)                                 |
 | `useAction()`        | Server action state               | state, error, result                            |
 | `useLocationState()` | History state (persists or flash) | T \| undefined                                  |