@rangojs/router 0.0.0-experimental.fad716ff → 0.0.0-experimental.fb4fdc18

package/skills/streams-and-websockets/SKILL.md

@@ -0,0 +1,283 @@
+---
+name: streams-and-websockets
+description: Long-lived Response handlers — Server-Sent Events (SSE) via path.stream and WebSocket upgrades via path.any on Cloudflare Workers, including middleware interaction and runtime caveats.
+argument-hint: "[sse | websocket | agents]"
+---
+
+# Streams and WebSockets
+
+Response routes can return long-lived responses — SSE streams and WebSocket
+upgrades. Both require a `Response` that the router must forward through the
+middleware chain without reconstruction.
+
+## When each fits
+
+| Shape       | Tag             | Status | Body                            | Runtime                          |
+| ----------- | --------------- | ------ | ------------------------------- | -------------------------------- |
+| Server-Sent | `path.stream()` | 200    | `ReadableStream` (event-stream) | any runtime (Node, workerd, bun) |
+| WebSocket   | `path.any()`    | 101    | `null` + `webSocket` property   | Cloudflare Workers (workerd)     |
+
+- **SSE** is a regular 200 response with `content-type: text/event-stream`
+  and a `ReadableStream` body. Works everywhere, flows through middleware
+  normally.
+- **WebSocket upgrades** produce a status-101 response with a non-standard
+  `webSocket` property (Cloudflare). The router detects these and forwards
+  them without reconstruction; `Vary` and `Server-Timing` are skipped, and
+  stub headers are merged in place on a best-effort basis.
+
+## Server-Sent Events (SSE)
+
+Use `path.stream()` (or `path.any()` if you need full control) to return a
+`ReadableStream`. Each chunk is an `event-stream` frame:
+
+```typescript
+import { urls } from "@rangojs/router";
+
+export const urlpatterns = urls(({ path }) => [
+  path.stream(
+    "/events/ticks",
+    (ctx) => {
+      const encoder = new TextEncoder();
+
+      const stream = new ReadableStream({
+        async start(controller) {
+          let count = 0;
+          const interval = setInterval(() => {
+            controller.enqueue(
+              encoder.encode(`event: tick\ndata: ${++count}\n\n`),
+            );
+          }, 1000);
+
+          // Honor client disconnect — signal comes from ctx.request.signal
+          ctx.request.signal.addEventListener("abort", () => {
+            clearInterval(interval);
+            controller.close();
+          });
+        },
+      });
+
+      return new Response(stream, {
+        headers: {
+          "content-type": "text/event-stream",
+          "cache-control": "no-store",
+          // Disable proxy buffering on Nginx/Traefik deployments
+          "x-accel-buffering": "no",
+        },
+      });
+    },
+    { name: "ticks" },
+  ),
+]);
+```
+
+### Client
+
+```typescript
+"use client";
+const source = new EventSource("/events/ticks");
+source.addEventListener("tick", (e) => console.log("tick", e.data));
+```
+
+### SSE caveats
+
+- **Never wrap SSE routes in `cache()`** — a cached `ReadableStream` is read
+  once and would replay an empty body on the next hit. `path.stream` is
+  already excluded from response-route caching, but don't layer a custom
+  cache() middleware on top.
+- **Middleware is fine.** Global/route middleware rewraps the SSE `Response`
+  as `new Response(response.body, { status, headers })` to merge stub headers.
+  The `ReadableStream` body is passed by reference, not consumed, so the
+  client sees the stream unchanged. (WebSocket upgrades are the exception —
+  those bypass rewrap entirely; see below.)
+- **Honor `ctx.request.signal`.** Without wiring abort to your source
+  (timer, DB cursor, upstream fetch), the stream leaks when the client
+  disconnects.
+- **Disable Nginx/CDN buffering** via `x-accel-buffering: no` and ensure
+  no intermediate proxy rebuffers. On Cloudflare Workers this is a non-issue.
+
+## WebSockets (Cloudflare Workers)
+
+WebSocket upgrades on workerd produce a response with `status: 101` and a
+non-standard `webSocket` property. The router detects this shape and forwards
+the `Response` without reconstruction — the 101 status and the `webSocket`
+property are preserved. `Vary` and `Server-Timing` writes are skipped, and
+stub-header merging (cookies/custom headers set via `ctx.header()` or
+`cookies().set()`) is best-effort: the router attempts to apply them in
+place, but silently skips any write rejected by a runtime that exposes
+immutable upgrade headers.
+
+### Minimal upgrade handler
+
+```typescript
+import { urls } from "@rangojs/router";
+
+export const urlpatterns = urls(({ path }) => [
+  path.any(
+    "/ws",
+    (ctx) => {
+      // Manual WebSocketPair on workerd
+      const upgrade = ctx.request.headers.get("upgrade");
+      if (upgrade !== "websocket") {
+        return new Response("expected upgrade: websocket", { status: 426 });
+      }
+
+      const { 0: client, 1: server } = new WebSocketPair();
+      server.accept();
+      server.addEventListener("message", (e) => {
+        server.send(`echo: ${e.data}`);
+      });
+
+      return new Response(null, {
+        status: 101,
+        webSocket: client,
+      } as ResponseInit);
+    },
+    { name: "ws" },
+  ),
+]);
+```
+
+### Durable Object pattern
+
+Route into a Durable Object that owns the connection:
+
+```typescript
+export const urlpatterns = urls(({ path }) => [
+  path.any(
+    "/rooms/:roomId",
+    async (ctx) => {
+      const id = ctx.env.ROOMS.idFromName(ctx.params.roomId);
+      const stub = ctx.env.ROOMS.get(id);
+      // The DO's fetch handler calls handleWebSocketUpgrade(request)
+      // and returns the 101 Response. We forward it unchanged.
+      return stub.fetch(ctx.request);
+    },
+    { name: "room" },
+  ),
+]);
+```
+
+### Using the `agents` library
+
+`routeAgentRequest` from `agents` returns a 101 `Response` targeted at a
+Durable Object. Return it directly from `path.any()`:
+
+```typescript
+import { routeAgentRequest } from "agents";
+import { urls } from "@rangojs/router";
+
+export const urlpatterns = urls(({ path }) => [
+  path.any("/agents/*", async (ctx) => {
+    const response = await routeAgentRequest(ctx.request, ctx.env);
+    if (!response) {
+      return new Response("not found", { status: 404 });
+    }
+    return response;
+  }),
+]);
+```
+
+## Middleware interaction
+
+### Forwarded, not reconstructed
+
+When a middleware is matched for the upgrade URL, the middleware still runs
+**before** `next()` — but the Response from `next()` is forwarded as-is
+rather than re-wrapped. This preserves:
+
+- The 101 status (which would otherwise throw `RangeError: Responses may
+only be constructed with status codes in the range 200 to 599, inclusive`
+  on standards-compliant runtimes).
+- The Cloudflare `webSocket` property (which would otherwise be silently
+  dropped by `new Response(body, ...)` on workerd).
+
+```typescript
+// This works — logger runs, but the 101 flows through unchanged.
+router.use(async (ctx, next) => {
+  console.log("ws request", ctx.url.pathname);
+  return next();
+});
+```
+
+### Don't try to set cookies on an upgrade
+
+Stub cookie/header writes made before `await next()` are applied to the
+upgrade response on a best-effort basis — the router attempts an in-place
+merge and skips any write rejected by runtimes that expose immutable 101
+headers. Either way, a browser completing a WS handshake never reads them.
+Do not rely on this for auth or state propagation: set cookies via a prior
+HTTP request instead (e.g. during login), then read them at upgrade time
+via `ctx.request.headers.get("cookie")`.
+
+```typescript
+// Avoid: this cookie may not land on the upgrade response, and the client
+// never reads it during the handshake regardless.
+router.use(async (ctx, next) => {
+  cookies().set("last-ws-at", Date.now().toString());
+  return next();
+});
+
+// Prefer: authenticate by reading a cookie set on a prior HTTP request.
+path.any("/ws", (ctx) => {
+  const session = parseCookie(ctx.request.headers.get("cookie"))?.session;
+  if (!verify(session)) return new Response("unauthorized", { status: 401 });
+  // ...upgrade
+});
+```
+
+### Short-circuit before upgrade
+
+Middleware can return a non-101 Response to deny the upgrade outright:
+
+```typescript
+router.use(async (ctx, next) => {
+  if (!isAllowed(ctx.request)) {
+    return new Response("forbidden", { status: 403 });
+  }
+  return next();
+});
+```
+
+## Caching
+
+- **SSE** — do not combine with `cache()` (streams can't be replayed).
+- **WebSocket** — `cache()` is inert because only `status === 200` is cacheable.
+
+## Runtime caveats
+
+| Runtime                                | SSE | WebSocket upgrade (101)                              |
+| -------------------------------------- | --- | ---------------------------------------------------- |
+| Cloudflare Workers (workerd)           | OK  | OK (native `WebSocketPair`, DO, `agents`)            |
+| Node (undici fetch)                    | OK  | N/A — Node's HTTP server must upgrade                |
+| Bun                                    | OK  | Bun's native `upgrade()` — not a Response-based path |
+| Dev (Vite + `@cloudflare/vite-plugin`) | OK  | OK via workerd emulation                             |
+
+When running in pure Node without workerd, a `status: 101` Response cannot
+even be constructed (`new Response(null, { status: 101 })` throws). For
+tests, fabricate upgrade-style responses by overriding `.status` on a real
+Response instance:
+
+```typescript
+const upgrade = new Response(null, { status: 200 });
+Object.defineProperty(upgrade, "status", { value: 101, configurable: true });
+// optional: attach a webSocket stub
+Object.defineProperty(upgrade, "webSocket", {
+  value: { stub: "ws" },
+  configurable: true,
+  enumerable: true,
+});
+```
+
+## Testing
+
+- Unit tests: `isWebSocketUpgradeResponse` and `executeMiddleware` passthrough
+  cases live in `src/rsc/__tests__/helpers.test.ts` and
+  `src/router/middleware.test.ts`.
+- E2E: cover both dev and production modes against a workerd target. SSE
+  can be tested on any runtime; WS upgrades need workerd (use
+  `@cloudflare/vite-plugin` or `wrangler dev`).
+
+## See also
+
+- `response-routes` — the parent skill for `path.json/text/html/stream/any`.
+- `middleware` — how global and route-level middleware compose with handlers.

package/skills/typesafety/SKILL.md

@@ -287,6 +287,12 @@ type SP = RouteSearchParams<"search">;
 type P = RouteParams<"blogPost">;
 // { slug: string }
 
+// Optional URL params (`:slug?`) resolve to `string | undefined`
+// because absent segments are omitted from `ctx.params` at runtime.
+type C = RouteParams<"checkout">;
+// { step?: string }
+// → ctx.params.step is `string | undefined`; use `?? "default"` to coalesce.
+
 // Use in component props
 interface SearchResultsProps {
   params: RouteSearchParams<"search">;
@@ -462,9 +468,11 @@ export const ProductLoader = createLoader(async (ctx) => {
 });
 
 // Built-in Breadcrumbs — or any custom handle created with createHandle()
+```
 
+```tsx
 // Client component — typeof infers all generics
-("use client");
+"use client";
 import { useLoader, useHandle, type Breadcrumbs } from "@rangojs/router/client";
 import type { ProductLoader } from "../loaders";
 

package/src/browser/app-shell.ts

@@ -0,0 +1,52 @@
+import type { ComponentType, ReactNode } from "react";
+
+/**
+ * App-shell metadata: the set of per-router fields that describe the
+ * "envelope" around the current app's segment tree. These fields are set
+ * from the initial RSC payload and must be replaced atomically when the
+ * client navigates into a different router (app switch).
+ *
+ * Intentionally NOT part of the shell (all document-lifetime):
+ * - themeConfig / initialTheme: ThemeProvider is mounted above the segment
+ *   tree and must not remount on smooth transitions.
+ * - warmupEnabled: attached to the NavigationProvider's lifetime effect;
+ *   toggling it mid-session would tear down and restart idle listeners.
+ *   Also not serialized on every full-render path (e.g. the not-found
+ *   fallback), so carrying it here would be unreliable.
+ * - prefetchCacheTTL: the not-found full-render payload does not serialize
+ *   it, so a cross-app nav into a 404 would silently erase the setting.
+ *   Mutable shell fields must be serialized on EVERY full-render path,
+ *   otherwise absent fields are indistinguishable from "new app has no
+ *   value" and the old app's value is dropped.
+ *
+ * A new document navigation (hard reload) applies these fields from the
+ * target app's initial payload.
+ */
+export interface AppShell {
+  /** Router identity. Used to namespace per-app client state (e.g. the
+   *  rango-state localStorage key) so sibling apps on the same origin
+   *  cannot observe each other's cache invalidations. */
+  routerId?: string;
+  rootLayout?: ComponentType<{ children: ReactNode }>;
+  basename?: string;
+  version?: string;
+}
+
+/**
+ * Mutable container for the active app shell. Read-through via `get()` so
+ * closures capture the ref, not the shell, and pick up updates at call time.
+ */
+export interface AppShellRef {
+  get(): AppShell;
+  update(next: AppShell): void;
+}
+
+export function createAppShellRef(initial: AppShell): AppShellRef {
+  let current = initial;
+  return {
+    get: () => current,
+    update: (next) => {
+      current = next;
+    },
+  };
+}

package/src/browser/event-controller.ts

@@ -113,11 +113,24 @@ export type ActionStateListener = (state: TrackedActionState) => void;
 export type HandleListener = () => void;
 
 /**
- * Internal handle state stored in controller
+ * Internal handle state stored in controller.
+ *
+ * Two segment lists are exposed because they serve different consumers:
+ *
+ * - `segmentOrder` drives handle collection (collectHandleData). Includes
+ *   parallel slot ids and reorders them after their parent so later-wins
+ *   collect functions (e.g. Meta) get the right precedence.
+ * - `routeSegmentIds` is the layouts-and-routes-only list documented by
+ *   `useSegments().segmentIds`. Parallels and loader sub-ids are stripped;
+ *   raw matched order is preserved.
+ *
+ * Both are derived from the same `matched` input on each setHandleData call
+ * so they stay in sync.
  */
 export interface HandleState {
   data: HandleData;
   segmentOrder: string[];
+  routeSegmentIds: string[];
 }
 
 /**
@@ -202,6 +215,14 @@ export interface EventController {
     data: HandleData,
     matched?: string[],
     isPartial?: boolean,
+    /**
+     * Segment ids that were re-resolved on the server this request (the
+     * partial response's `diff`). On a partial update, any existing bucket
+     * keyed under one of these ids that has no incoming entry is treated as
+     * stale and cleared. Without this, a parallel slot that revalidates but
+     * pushes nothing leaves its previous bucket in place forever.
+     */
+    resolvedIds?: string[],
   ): void;
   getHandleState(): HandleState;
 
@@ -300,6 +321,7 @@ export function createEventController(
   // Handle data from RSC payload
   let handleData: HandleData = {};
   let handleSegmentOrder: string[] = [];
+  let routeSegmentIds: string[] = [];
 
   // Merged route params from current match
   let routeParams: Record<string, string> = {};
@@ -744,8 +766,15 @@ export function createEventController(
     data: HandleData,
     matched?: string[],
     isPartial?: boolean,
+    resolvedIds?: string[],
   ): void {
-    const newSegmentOrder = filterSegmentOrder(matched ?? []);
+    const rawMatched = matched ?? [];
+    const newSegmentOrder = filterSegmentOrder(rawMatched);
+    // Separate list for useSegments(): "layouts and routes only" — strip
+    // parallels (".@") and loader sub-ids (D digit) without reordering.
+    const newRouteSegmentIds = rawMatched.filter(
+      (id) => !id.includes(".@") && !/D\d+\./.test(id),
+    );
 
     if (isPartial && newSegmentOrder.length > 0) {
       // Partial update: merge new data with existing
@@ -757,10 +786,19 @@ export function createEventController(
           handleData[handleName][segmentId] = data[handleName][segmentId];
         }
       }
-      // Clean up data from segments no longer in the matched list
+      const resolvedIdSet =
+        resolvedIds && resolvedIds.length > 0 ? new Set(resolvedIds) : null;
+      // Cleanup pass:
+      //   a) segment dropped from the match list — delete its bucket.
+      //   b) segment was re-resolved this request but pushed nothing for
+      //      this handle — its previous bucket is stale.
+      // (a) is the existing behavior; (b) requires resolvedIds.
       for (const handleName of Object.keys(handleData)) {
         for (const segmentId of Object.keys(handleData[handleName])) {
-          if (!newSegmentOrder.includes(segmentId)) {
+          const droppedFromMatch = !newSegmentOrder.includes(segmentId);
+          const reresolvedWithoutPush =
+            resolvedIdSet?.has(segmentId) && !data[handleName]?.[segmentId];
+          if (droppedFromMatch || reresolvedWithoutPush) {
             delete handleData[handleName][segmentId];
           }
         }
@@ -770,6 +808,7 @@ export function createEventController(
       handleData = data;
     }
     handleSegmentOrder = newSegmentOrder;
+    routeSegmentIds = newRouteSegmentIds;
 
     notifyHandles();
   }
@@ -778,6 +817,7 @@ export function createEventController(
     return {
       data: handleData,
       segmentOrder: handleSegmentOrder,
+      routeSegmentIds,
     };
   }
 

package/src/browser/navigation-bridge.ts

@@ -5,6 +5,8 @@ import type {
   ResolvedSegment,
 } from "./types.js";
 import { setAppVersion } from "./app-version.js";
+import { setRangoStateLocal } from "./rango-state.js";
+import type { AppShell, AppShellRef } from "./app-shell.js";
 import * as React from "react";
 import { startTransition } from "react";
 import {
@@ -48,8 +50,13 @@ export { createNavigationTransaction };
  */
 export interface NavigationBridgeConfigWithController extends NavigationBridgeConfig {
   eventController: EventController;
-  /** RSC version from initial payload metadata */
+  /** RSC version from initial payload metadata (fallback when appShellRef is not provided) */
   version?: string;
+  /**
+   * Live app-shell ref. When supplied, the bridge reads version/basename
+   * from this ref so cross-app navigations propagate correctly.
+   */
+  appShellRef?: AppShellRef;
 }
 
 /**
@@ -68,9 +75,46 @@ export interface NavigationBridgeConfigWithController extends NavigationBridgeCo
 export function createNavigationBridge(
   config: NavigationBridgeConfigWithController,
 ): NavigationBridge {
-  const { store, client, eventController, onUpdate, renderSegments } = config;
+  const {
+    store,
+    client,
+    eventController,
+    onUpdate,
+    renderSegments,
+    appShellRef,
+  } = config;
   let version = config.version;
 
+  /**
+   * Replace the active app-shell snapshot atomically. Called by the partial
+   * updater when a response's routerId indicates the navigation crossed
+   * into a different app. Runs the local-only side-effects tied to
+   * app-shell fields (app version, rango-state namespace) so the new app
+   * owns them after the swap. Theme, warmup, and prefetch TTL are
+   * document-lifetime and are NOT touched here.
+   */
+  function applyAppShell(next: AppShell): void {
+    if (appShellRef) {
+      appShellRef.update(next);
+    }
+    if (next.version !== undefined) {
+      version = next.version;
+      setAppVersion(next.version);
+      // Use the local-only setter — initRangoState writes the shared
+      // localStorage key and fires a storage event in other tabs still in
+      // the old app. setRangoStateLocal only mutates this tab's in-memory
+      // cache and rebinds it to the target app's routerId-scoped key,
+      // preserving the "local-only, no broadcast/rotation" contract for
+      // smooth app-switch transitions.
+      setRangoStateLocal(next.version, next.routerId);
+    }
+    // Cross-app: prior cache entries belong to a different app's segments.
+    // Drop them locally only — do NOT broadcast invalidation or rotate the
+    // shared X-Rango-State token, since other tabs still in the old app are
+    // unaffected by this tab's transition.
+    store.clearHistoryCacheLocal();
+  }
+
   // Create shared partial updater
   const fetchPartialUpdate = createPartialUpdater({
     store,
@@ -78,6 +122,7 @@ export function createNavigationBridge(
     onUpdate,
     renderSegments,
     getVersion: () => version,
+    applyAppShell,
   });
 
   return {
@@ -261,18 +306,24 @@ export function createNavigationBridge(
       // 2. routes that CAN be intercepted - we don't know if this navigation will intercept
       // 3. when leaving intercept - we need fresh non-intercept segments from server
       // 4. redirect-with-state - force re-render so hooks read fresh state
+      // 5. stale cache - server action invalidated it, need fresh data with loading state
       const hasUsableCache =
         cachedSegments &&
         cachedSegments.length > 0 &&
         !isInterceptOnlyCache(cachedSegments) &&
         !hasInterceptCache &&
         !isLeavingIntercept &&
+        !cached?.stale &&
         !options?._skipCache;
 
+      // Forward navigations always await fetchPartialUpdate before rendering,
+      // so useNavigation should always report "loading". skipLoadingState is
+      // only used for popstate background revalidation (line ~526) where
+      // cached content renders instantly without a network wait.
       const tx = createNavigationTransaction(store, eventController, url, {
         ...options,
         state: resolvedState,
-        skipLoadingState: hasUsableCache,
+        skipLoadingState: false,
       });
 
       // REVALIDATE: Fetch fresh data from server
@@ -412,6 +463,15 @@ export function createNavigationBridge(
         eventController.abortAllActions();
       }
 
+      // Popstate that exits an intercept to a non-intercept destination. The
+      // fallback fetch path below needs `leave-intercept` mode so it filters
+      // the cached @modal segment from the request and forces a re-render —
+      // otherwise a cache-miss popstate whose server response has an empty
+      // diff hits the "no changes" branch in partial-update and the modal
+      // stays on screen.
+      const isLeavingIntercept =
+        !isIntercept && currentInterceptSource !== null;
+
       // Compute history key from URL (with intercept suffix if applicable)
       const historyKey = generateHistoryKey(url, { intercept: isIntercept });
 
@@ -481,7 +541,14 @@ export function createNavigationBridge(
             },
             scroll: { restore: true, isStreaming },
           };
-          const hasTransition = cachedSegments.some((s) => s.transition);
+          // Intercept-driven popstate (entering OR leaving an intercept) only
+          // mutates the parallel slot; the main outlet shows the same content.
+          // Skip startViewTransition in those cases — same rationale as the
+          // intercept guard in partial-update.ts's hasTransition computation.
+          const hasTransition =
+            !isIntercept &&
+            !isLeavingIntercept &&
+            cachedSegments.some((s) => s.transition);
           if (hasTransition) {
             startTransition(() => {
               if (addTransitionType) {
@@ -562,7 +629,11 @@ export function createNavigationBridge(
             intercept: isIntercept,
             interceptSourceUrl,
           }),
-          isIntercept ? { type: "navigate", interceptSourceUrl } : undefined,
+          isIntercept
+            ? { type: "navigate", interceptSourceUrl }
+            : isLeavingIntercept
+              ? { type: "leave-intercept" }
+              : undefined,
         );
         // Restore scroll position after fetch completes
         handleNavigationEnd({ restore: true, isStreaming });
@@ -645,6 +716,10 @@ export function createNavigationBridge(
       setAppVersion(newVersion);
       store.clearHistoryCache();
     },
+
+    updateAppShell(next: AppShell): void {
+      applyAppShell(next);
+    },
   };
 }