@rangojs/router 0.0.0-experimental.79 → 0.0.0-experimental.7d061845
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +120 -25
- package/dist/bin/rango.js +147 -57
- package/dist/testing/vitest.js +82 -0
- package/dist/vite/index.js +2138 -841
- package/dist/vite/plugins/cloudflare-protocol-loader-hook.mjs +76 -0
- package/package.json +68 -21
- package/skills/breadcrumbs/SKILL.md +3 -1
- package/skills/bundle-analysis/SKILL.md +159 -0
- package/skills/cache-guide/SKILL.md +220 -30
- package/skills/caching/SKILL.md +116 -8
- package/skills/composability/SKILL.md +27 -2
- package/skills/document-cache/SKILL.md +78 -55
- package/skills/handler-use/SKILL.md +3 -1
- package/skills/hooks/SKILL.md +229 -20
- package/skills/host-router/SKILL.md +45 -20
- package/skills/i18n/SKILL.md +276 -0
- package/skills/intercept/SKILL.md +26 -4
- package/skills/layout/SKILL.md +6 -7
- package/skills/links/SKILL.md +247 -17
- package/skills/loader/SKILL.md +219 -9
- package/skills/middleware/SKILL.md +15 -9
- package/skills/migrate-nextjs/SKILL.md +4 -2
- package/skills/migrate-react-router/SKILL.md +5 -0
- package/skills/mime-routes/SKILL.md +27 -0
- package/skills/observability/SKILL.md +137 -0
- package/skills/parallel/SKILL.md +12 -6
- package/skills/prerender/SKILL.md +14 -33
- package/skills/rango/SKILL.md +242 -24
- package/skills/react-compiler/SKILL.md +168 -0
- package/skills/response-routes/SKILL.md +66 -9
- package/skills/route/SKILL.md +33 -4
- package/skills/router-setup/SKILL.md +3 -3
- package/skills/server-actions/SKILL.md +751 -0
- package/skills/streams-and-websockets/SKILL.md +283 -0
- package/skills/testing/SKILL.md +816 -0
- package/skills/typesafety/SKILL.md +319 -27
- package/skills/use-cache/SKILL.md +34 -5
- package/skills/view-transitions/SKILL.md +294 -0
- package/src/__augment-tests__/augment.ts +81 -0
- package/src/__augment-tests__/augmented.check.ts +117 -0
- package/src/browser/action-coordinator.ts +53 -36
- package/src/browser/app-shell.ts +52 -0
- package/src/browser/event-controller.ts +86 -70
- package/src/browser/history-state.ts +21 -0
- package/src/browser/index.ts +3 -3
- package/src/browser/navigation-bridge.ts +65 -9
- package/src/browser/navigation-client.ts +45 -25
- package/src/browser/navigation-store.ts +32 -9
- package/src/browser/navigation-transaction.ts +10 -28
- package/src/browser/partial-update.ts +52 -26
- package/src/browser/prefetch/cache.ts +124 -26
- package/src/browser/prefetch/fetch.ts +114 -38
- package/src/browser/prefetch/queue.ts +36 -5
- package/src/browser/rango-state.ts +53 -13
- package/src/browser/react/Link.tsx +18 -13
- package/src/browser/react/NavigationProvider.tsx +72 -31
- package/src/browser/react/filter-segment-order.ts +51 -7
- package/src/browser/react/index.ts +3 -0
- package/src/browser/react/location-state-shared.ts +175 -4
- package/src/browser/react/location-state.ts +39 -13
- package/src/browser/react/use-handle.ts +17 -9
- package/src/browser/react/use-navigation.ts +22 -2
- package/src/browser/react/use-params.ts +20 -8
- package/src/browser/react/use-reverse.ts +106 -0
- package/src/browser/react/use-router.ts +22 -2
- package/src/browser/react/use-segments.ts +11 -8
- package/src/browser/response-adapter.ts +25 -0
- package/src/browser/rsc-router.tsx +64 -22
- package/src/browser/scroll-restoration.ts +22 -14
- package/src/browser/segment-structure-assert.ts +2 -2
- package/src/browser/server-action-bridge.ts +23 -30
- package/src/browser/types.ts +21 -0
- package/src/build/collect-fallback-refs.ts +107 -0
- package/src/build/generate-manifest.ts +60 -35
- package/src/build/generate-route-types.ts +2 -0
- package/src/build/index.ts +2 -0
- package/src/build/route-trie.ts +2 -1
- package/src/build/route-types/codegen.ts +4 -4
- package/src/build/route-types/include-resolution.ts +1 -1
- package/src/build/route-types/per-module-writer.ts +7 -4
- package/src/build/route-types/router-processing.ts +55 -14
- package/src/build/route-types/scan-filter.ts +1 -1
- package/src/build/route-types/source-scan.ts +118 -0
- package/src/build/runtime-discovery.ts +9 -20
- package/src/cache/cache-scope.ts +28 -42
- package/src/cache/cf/cf-cache-store.ts +54 -13
- package/src/client.rsc.tsx +3 -0
- package/src/client.tsx +10 -8
- package/src/context-var.ts +5 -5
- package/src/decode-loader-results.ts +36 -0
- package/src/errors.ts +30 -1
- package/src/handle.ts +26 -13
- package/src/host/index.ts +2 -2
- package/src/host/router.ts +129 -57
- package/src/host/types.ts +31 -2
- package/src/host/utils.ts +1 -1
- package/src/href-client.ts +140 -20
- package/src/index.rsc.ts +9 -4
- package/src/index.ts +16 -6
- package/src/loader-store.ts +500 -0
- package/src/loader.rsc.ts +21 -6
- package/src/loader.ts +3 -10
- package/src/missing-id-error.ts +68 -0
- package/src/outlet-context.ts +1 -1
- package/src/prerender.ts +4 -4
- package/src/response-utils.ts +37 -0
- package/src/reverse.ts +65 -39
- package/src/route-content-wrapper.tsx +6 -28
- package/src/route-definition/dsl-helpers.ts +253 -265
- package/src/route-definition/helper-factories.ts +29 -139
- package/src/route-definition/helpers-types.ts +43 -15
- package/src/route-definition/resolve-handler-use.ts +6 -0
- package/src/route-definition/use-item-types.ts +32 -0
- package/src/route-types.ts +19 -41
- package/src/router/basename.ts +14 -0
- package/src/router/content-negotiation.ts +15 -2
- package/src/router/error-handling.ts +1 -1
- package/src/router/handler-context.ts +21 -41
- package/src/router/intercept-resolution.ts +4 -18
- package/src/router/lazy-includes.ts +3 -3
- package/src/router/loader-resolution.ts +19 -2
- package/src/router/match-api.ts +4 -3
- package/src/router/match-handlers.ts +63 -20
- package/src/router/match-middleware/cache-lookup.ts +44 -91
- package/src/router/match-middleware/cache-store.ts +3 -2
- package/src/router/match-result.ts +53 -32
- package/src/router/metrics.ts +1 -1
- package/src/router/middleware-types.ts +15 -26
- package/src/router/middleware.ts +99 -84
- package/src/router/pattern-matching.ts +101 -17
- package/src/router/prerender-match.ts +1 -1
- package/src/router/preview-match.ts +3 -1
- package/src/router/request-classification.ts +4 -28
- package/src/router/revalidation.ts +58 -2
- package/src/router/router-interfaces.ts +45 -28
- package/src/router/router-options.ts +40 -1
- package/src/router/router-registry.ts +2 -5
- package/src/router/segment-resolution/fresh.ts +27 -6
- package/src/router/segment-resolution/revalidation.ts +147 -106
- package/src/router/segment-resolution/view-transition-default.ts +36 -0
- package/src/router/substitute-pattern-params.ts +56 -0
- package/src/router/telemetry.ts +99 -0
- package/src/router/trie-matching.ts +18 -13
- package/src/router/types.ts +8 -0
- package/src/router/url-params.ts +49 -0
- package/src/router.ts +38 -23
- package/src/rsc/handler-context.ts +2 -2
- package/src/rsc/handler.ts +28 -69
- package/src/rsc/helpers.ts +91 -43
- package/src/rsc/index.ts +1 -1
- package/src/rsc/origin-guard.ts +28 -10
- package/src/rsc/progressive-enhancement.ts +4 -0
- package/src/rsc/response-route-handler.ts +46 -53
- package/src/rsc/rsc-rendering.ts +35 -51
- package/src/rsc/runtime-warnings.ts +9 -10
- package/src/rsc/server-action.ts +17 -37
- package/src/rsc/ssr-setup.ts +16 -0
- package/src/rsc/types.ts +8 -2
- package/src/search-params.ts +4 -4
- package/src/segment-system.tsx +122 -56
- package/src/serialize.ts +243 -0
- package/src/server/context.ts +118 -51
- package/src/server/cookie-store.ts +28 -4
- package/src/server/request-context.ts +20 -42
- package/src/ssr/index.tsx +5 -1
- package/src/static-handler.ts +1 -1
- package/src/testing/cache-status.ts +166 -0
- package/src/testing/collect-handle.ts +63 -0
- package/src/testing/dispatch.ts +440 -0
- package/src/testing/dom.entry.ts +22 -0
- package/src/testing/e2e/fixture.ts +154 -0
- package/src/testing/e2e/index.ts +149 -0
- package/src/testing/e2e/matchers.ts +51 -0
- package/src/testing/e2e/page-helpers.ts +272 -0
- package/src/testing/e2e/parity.ts +306 -0
- package/src/testing/e2e/server.ts +183 -0
- package/src/testing/flight-matchers.ts +104 -0
- package/src/testing/flight-runtime.d.ts +57 -0
- package/src/testing/flight-tree.ts +332 -0
- package/src/testing/flight.entry.ts +46 -0
- package/src/testing/flight.ts +224 -0
- package/src/testing/generated-routes.ts +223 -0
- package/src/testing/index.ts +106 -0
- package/src/testing/internal/context.ts +304 -0
- package/src/testing/internal/flight-client-globals.ts +30 -0
- package/src/testing/internal/seed-vars.ts +42 -0
- package/src/testing/render-handler.ts +267 -0
- package/src/testing/render-route.tsx +565 -0
- package/src/testing/run-loader.ts +341 -0
- package/src/testing/run-middleware.ts +188 -0
- package/src/testing/vitest-stubs/cloudflare-email.ts +9 -0
- package/src/testing/vitest-stubs/cloudflare-workers.ts +21 -0
- package/src/testing/vitest-stubs/plugin-rsc.ts +16 -0
- package/src/testing/vitest-stubs/version.ts +5 -0
- package/src/testing/vitest.ts +270 -0
- package/src/types/global-namespace.ts +39 -26
- package/src/types/handler-context.ts +68 -50
- package/src/types/index.ts +1 -0
- package/src/types/loader-types.ts +5 -6
- package/src/types/request-scope.ts +126 -0
- package/src/types/segments.ts +35 -1
- package/src/urls/include-helper.ts +10 -53
- package/src/urls/index.ts +0 -3
- package/src/urls/path-helper-types.ts +11 -3
- package/src/urls/path-helper.ts +17 -52
- package/src/urls/pattern-types.ts +36 -19
- package/src/urls/response-types.ts +22 -29
- package/src/urls/type-extraction.ts +26 -116
- package/src/urls/urls-function.ts +1 -5
- package/src/use-loader.tsx +413 -42
- package/src/vite/debug.ts +185 -0
- package/src/vite/discovery/bundle-postprocess.ts +6 -6
- package/src/vite/discovery/discover-routers.ts +101 -51
- package/src/vite/discovery/discovery-errors.ts +194 -0
- package/src/vite/discovery/gate-state.ts +171 -0
- package/src/vite/discovery/prerender-collection.ts +67 -26
- package/src/vite/discovery/route-types-writer.ts +40 -84
- package/src/vite/discovery/self-gen-tracking.ts +27 -1
- package/src/vite/discovery/state.ts +33 -0
- package/src/vite/discovery/virtual-module-codegen.ts +13 -23
- package/src/vite/index.ts +2 -0
- package/src/vite/plugin-types.ts +67 -0
- package/src/vite/plugins/cjs-to-esm.ts +8 -7
- package/src/vite/plugins/client-ref-dedup.ts +16 -0
- package/src/vite/plugins/client-ref-hashing.ts +28 -5
- package/src/vite/plugins/cloudflare-protocol-loader-hook.d.mts +23 -0
- package/src/vite/plugins/cloudflare-protocol-loader-hook.mjs +76 -0
- package/src/vite/plugins/cloudflare-protocol-stub.ts +214 -0
- package/src/vite/plugins/expose-action-id.ts +54 -30
- package/src/vite/plugins/expose-id-utils.ts +12 -8
- package/src/vite/plugins/expose-ids/export-analysis.ts +100 -20
- package/src/vite/plugins/expose-ids/handler-transform.ts +8 -61
- package/src/vite/plugins/expose-ids/loader-transform.ts +3 -5
- package/src/vite/plugins/expose-ids/router-transform.ts +20 -3
- package/src/vite/plugins/expose-internal-ids.ts +496 -486
- package/src/vite/plugins/performance-tracks.ts +29 -25
- package/src/vite/plugins/use-cache-transform.ts +65 -50
- package/src/vite/plugins/version-injector.ts +39 -23
- package/src/vite/plugins/version-plugin.ts +59 -2
- package/src/vite/plugins/virtual-entries.ts +2 -2
- package/src/vite/rango.ts +116 -29
- package/src/vite/router-discovery.ts +750 -100
- package/src/vite/utils/ast-handler-extract.ts +15 -15
- package/src/vite/utils/banner.ts +1 -1
- package/src/vite/utils/bundle-analysis.ts +4 -2
- package/src/vite/utils/client-chunks.ts +190 -0
- package/src/vite/utils/forward-user-plugins.ts +193 -0
- package/src/vite/utils/manifest-utils.ts +21 -5
- package/src/vite/utils/package-resolution.ts +41 -1
- package/src/vite/utils/prerender-utils.ts +5 -4
- package/src/vite/utils/shared-utils.ts +107 -26
- package/src/browser/action-response-classifier.ts +0 -99
|
@@ -10,9 +10,6 @@ Middleware runs before/after route handlers using the onion model.
|
|
|
10
10
|
|
|
11
11
|
## Execution Model
|
|
12
12
|
|
|
13
|
-
Canonical semantics reference:
|
|
14
|
-
[docs/execution-model.md](../../docs/internal/execution-model.md)
|
|
15
|
-
|
|
16
13
|
There are two levels of middleware with different execution scopes:
|
|
17
14
|
|
|
18
15
|
### Global middleware (`router.use()`)
|
|
@@ -32,17 +29,26 @@ When the router has a `basename`, pattern-scoped `.use()` patterns are automatic
|
|
|
32
29
|
|
|
33
30
|
Registered inside `urls()` callback. Wraps **rendering only** -- it does NOT wrap server action execution. Actions run before route middleware, so when route middleware executes during post-action revalidation, it can observe state that the action set (cookies, context variables, headers).
|
|
34
31
|
|
|
32
|
+
> **Implication for auth:** route middleware cannot guard server actions. Use `router.use("/admin/*", requireAuth)` (global, scoped) for action protection, or check inside the action body. See `/server-actions` for action-side auth patterns.
|
|
33
|
+
|
|
35
34
|
```
|
|
36
35
|
Request flow (with action):
|
|
37
|
-
global mw -> action executes -> route mw ->
|
|
36
|
+
global mw -> action executes -> route mw -> render pass
|
|
38
37
|
|
|
39
38
|
Request flow (no action):
|
|
40
|
-
global mw -> route mw ->
|
|
39
|
+
global mw -> route mw -> render pass
|
|
41
40
|
|
|
42
41
|
Progressive enhancement (no-JS form POST):
|
|
43
42
|
global mw -> action executes -> route mw -> full page re-render
|
|
44
43
|
```
|
|
45
44
|
|
|
45
|
+
The **render pass** resolves handler, layouts, parallels, and loaders together —
|
|
46
|
+
it is not a handler-then-loaders sequence. Handler-first ordering is guaranteed
|
|
47
|
+
only between a route handler and its child/orphan layouts and parallels (so
|
|
48
|
+
`ctx.set` is visible); loaders run **concurrently** and stream their results, so
|
|
49
|
+
their latency overlaps rendering rather than blocking it. See `/loader` →
|
|
50
|
+
"Parallel and streaming".
|
|
51
|
+
|
|
46
52
|
The contract is: **route middleware wraps rendering regardless of transport** (JS-enabled RSC stream or no-JS HTML). During PE re-render, route middleware observes action-set state (cookies, context variables) the same way it does during JS-enabled post-action revalidation.
|
|
47
53
|
|
|
48
54
|
Revalidation is still partial. Route middleware wraps the render pass that
|
|
@@ -62,7 +68,7 @@ and consumer segments, even when middleware is present in the chain.
|
|
|
62
68
|
|
|
63
69
|
```typescript
|
|
64
70
|
export const revalidateCartData = ({ actionId }) =>
|
|
65
|
-
actionId?.includes("src/actions/cart.ts#")
|
|
71
|
+
actionId?.includes("src/actions/cart.ts#") || undefined;
|
|
66
72
|
|
|
67
73
|
layout(CartLayout, () => [
|
|
68
74
|
middleware(cartRenderMiddleware),
|
|
@@ -190,7 +196,7 @@ export const myMiddleware: Middleware = async (ctx, next) => {
|
|
|
190
196
|
ctx.env.DB; // D1Database
|
|
191
197
|
ctx.env.KV; // KVNamespace
|
|
192
198
|
|
|
193
|
-
// Set variables for downstream handlers (typed via
|
|
199
|
+
// Set variables for downstream handlers (typed via Rango.Vars)
|
|
194
200
|
ctx.set("user", { id: "123", name: "John" });
|
|
195
201
|
|
|
196
202
|
// Continue to next middleware/handler
|
|
@@ -231,8 +237,8 @@ const Dashboard: Handler<"dashboard"> = (ctx) => {
|
|
|
231
237
|
```
|
|
232
238
|
|
|
233
239
|
This works alongside `ctx.get("key")` / `ctx.set("key", value)` (global typing
|
|
234
|
-
via
|
|
235
|
-
data; use
|
|
240
|
+
via Rango.Vars augmentation). Use `createVar` for route-local or feature-scoped
|
|
241
|
+
data; use Rango.Vars for app-wide middleware state.
|
|
236
242
|
|
|
237
243
|
## Redirect with State in Middleware
|
|
238
244
|
|
|
@@ -225,7 +225,7 @@ Loaders are Rango's live data layer. Use them when you need:
|
|
|
225
225
|
|
|
226
226
|
- **Client-side data refresh** — `useLoader()` in client components for reactive data
|
|
227
227
|
- **Per-loader caching** — opt in with `loader(MyLoader, () => [cache({ ttl: 60 })])`; loaders stay live by default
|
|
228
|
-
- **Revalidation control** — `revalidate()` targets specific loaders after actions
|
|
228
|
+
- **Revalidation control** — `revalidate()` targets specific segments and loaders after actions
|
|
229
229
|
- **Loading skeletons** — `loading()` shows a Suspense fallback while loaders resolve
|
|
230
230
|
|
|
231
231
|
```typescript
|
|
@@ -302,7 +302,7 @@ re-rendering. This is about the segment tree, not cache invalidation:
|
|
|
302
302
|
```typescript
|
|
303
303
|
// Re-run this layout when a blog action fires
|
|
304
304
|
layout(BlogLayout, () => [
|
|
305
|
-
revalidate(({ actionId }) => actionId?.includes("updateBlog")
|
|
305
|
+
revalidate(({ actionId }) => actionId?.includes("updateBlog") || undefined),
|
|
306
306
|
path("/blog/:slug", BlogPost, { name: "blogPost" }),
|
|
307
307
|
]);
|
|
308
308
|
|
|
@@ -463,6 +463,8 @@ Server actions work the same way — `"use server"` directive, `useActionState`,
|
|
|
463
463
|
|
|
464
464
|
Key difference: in Rango, route middleware does NOT wrap action execution. Actions only see global middleware context. Use `getRequestContext()` in actions to access `ctx.set()`/`ctx.get()`.
|
|
465
465
|
|
|
466
|
+
Next.js's `revalidatePath()` / `revalidateTag()` have no direct equivalent — Rango partially re-renders matched route segments (path/layout/parallel/intercept) and re-resolves their loaders, and you scope re-runs by attaching a `revalidate(({ actionId }) => ...)` rule to any segment or loader registration. See `/server-actions` for the full pattern (validation, error handling, file uploads) and `/loader` for revalidation rule semantics.
|
|
467
|
+
|
|
466
468
|
## 8. Metadata / Head
|
|
467
469
|
|
|
468
470
|
Rango uses the `Meta` handle + `<MetaTags />` client component:
|
|
@@ -483,6 +483,10 @@ Since Rango uses RSC server actions, all React action patterns work:
|
|
|
483
483
|
`useActionState`, `useOptimistic`, `useTransition`, `startTransition`,
|
|
484
484
|
and plain `<form action={serverAction}>`. No framework-specific hook needed.
|
|
485
485
|
|
|
486
|
+
For the full guide — defining actions, validation with Zod, error handling,
|
|
487
|
+
revalidation rules, file uploads, and progressive enhancement — see
|
|
488
|
+
`/server-actions`.
|
|
489
|
+
|
|
486
490
|
### clientLoader / clientAction (framework mode)
|
|
487
491
|
|
|
488
492
|
RR7 framework mode's `clientLoader` and `clientAction` run in the browser.
|
|
@@ -635,6 +639,7 @@ layout(<ShopLayout />, () => [
|
|
|
635
639
|
| `useLocation().pathname` | `usePathname()` from `@rangojs/router/client` |
|
|
636
640
|
| `useSearchParams()` | `useSearchParams()` from `@rangojs/router/client` |
|
|
637
641
|
| `useParams()` | `useParams()` from `@rangojs/router/client` (or `ctx.params` in server handlers) |
|
|
642
|
+
| `useParams<T>()` | `useParams<T>()` — same generic annotation pattern |
|
|
638
643
|
| `<NavLink>` | `<Link>` with `usePathname()` for active state |
|
|
639
644
|
|
|
640
645
|
### useNavigate → useRouter
|
|
@@ -108,6 +108,33 @@ path.text("/api/data", () => "plain text version", { name: "dataText" }),
|
|
|
108
108
|
Without an RSC primary, there is no `text/html` candidate — the Accept header
|
|
109
109
|
picks among the response-type candidates directly.
|
|
110
110
|
|
|
111
|
+
## Type Safety For Negotiated Paths
|
|
112
|
+
|
|
113
|
+
`router.named-routes.gen.ts` validates route names, params, search, `href()`, and
|
|
114
|
+
the `Rango.Path` type, but it does not carry response payload metadata. For MIME or
|
|
115
|
+
response payload types, use one of these surfaces:
|
|
116
|
+
|
|
117
|
+
- `RouteResponse<typeof patterns, "routeName">` for a specific response variant
|
|
118
|
+
by route name. This is the clearest option when several MIME variants share
|
|
119
|
+
one URL pattern.
|
|
120
|
+
- `Rango.PathResponse<"/products/:id">` (ambient, no import) for global lookup by URL pattern or concrete path after the app
|
|
121
|
+
registers `typeof router.routeMap`:
|
|
122
|
+
|
|
123
|
+
```typescript
|
|
124
|
+
// router.tsx
|
|
125
|
+
export const router = createRouter({ document: Document }).routes(urlpatterns);
|
|
126
|
+
|
|
127
|
+
declare global {
|
|
128
|
+
namespace Rango {
|
|
129
|
+
interface RegisteredRoutes extends typeof router.routeMap {}
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
`RegisteredRoutes` is what exposes the richer routeMap entries containing
|
|
135
|
+
response payload metadata. Without it, URL-pattern response lookup has paths but
|
|
136
|
+
no payloads, so response types resolve to `ResponseEnvelope<never>`.
|
|
137
|
+
|
|
111
138
|
## How It Works
|
|
112
139
|
|
|
113
140
|
1. **Build time**: `buildRouteTrie()` calls `mergeLeaves()` when multiple routes share a pattern.
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: observability
|
|
3
|
+
description: Debug Rango request performance with debugPerformance, Server-Timing, structured telemetry, and tracing
|
|
4
|
+
argument-hint:
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# Observability
|
|
8
|
+
|
|
9
|
+
Use this when you need to understand request latency, cache decisions,
|
|
10
|
+
revalidation behavior, loader overlap, or production traces.
|
|
11
|
+
|
|
12
|
+
Rango exposes two complementary observability surfaces:
|
|
13
|
+
|
|
14
|
+
1. **Performance timeline** (`debugPerformance`) — per-request waterfall for
|
|
15
|
+
local or targeted debugging. It prints to the console and emits
|
|
16
|
+
`Server-Timing`.
|
|
17
|
+
2. **Structured telemetry** (`telemetry`) — lifecycle events sent to a pluggable
|
|
18
|
+
sink for production monitoring, OpenTelemetry, or custom metrics.
|
|
19
|
+
|
|
20
|
+
The essentials are below. The exported `TelemetryEvent` union type
|
|
21
|
+
(`import type { TelemetryEvent } from "@rangojs/router"`) is the full event
|
|
22
|
+
contract — every event kind and its fields are typed there.
|
|
23
|
+
|
|
24
|
+
## Performance timeline
|
|
25
|
+
|
|
26
|
+
Enable globally while debugging:
|
|
27
|
+
|
|
28
|
+
```typescript
|
|
29
|
+
import { createRouter } from "@rangojs/router";
|
|
30
|
+
|
|
31
|
+
const router = createRouter({
|
|
32
|
+
document: Document,
|
|
33
|
+
urls: urlpatterns,
|
|
34
|
+
debugPerformance: true,
|
|
35
|
+
});
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
Or enable for selected requests from middleware:
|
|
39
|
+
|
|
40
|
+
```typescript
|
|
41
|
+
middleware(async (ctx, next) => {
|
|
42
|
+
if (ctx.url.searchParams.has("debug")) {
|
|
43
|
+
ctx.debugPerformance();
|
|
44
|
+
}
|
|
45
|
+
await next();
|
|
46
|
+
});
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
Call `ctx.debugPerformance()` before `await next()`. The request then prints a
|
|
50
|
+
shared-axis waterfall and adds a `Server-Timing` header.
|
|
51
|
+
|
|
52
|
+
Read the timeline as intervals:
|
|
53
|
+
|
|
54
|
+
- `handler:total` is the whole router request.
|
|
55
|
+
- `render:total` / `ssr-render-html` show the render pass.
|
|
56
|
+
- `loader:*` rows should overlap render work. If a loader starts only after the
|
|
57
|
+
render bar, it is serialized latency.
|
|
58
|
+
- Cache, route matching, middleware pre/post, RSC serialization, and SSR phases
|
|
59
|
+
appear as separate spans, so the slow phase is visible without guessing.
|
|
60
|
+
|
|
61
|
+
## Structured telemetry
|
|
62
|
+
|
|
63
|
+
Use telemetry when you want durable production events rather than a one-request
|
|
64
|
+
debug waterfall.
|
|
65
|
+
|
|
66
|
+
```typescript
|
|
67
|
+
import { createRouter, createConsoleSink } from "@rangojs/router";
|
|
68
|
+
|
|
69
|
+
const router = createRouter({
|
|
70
|
+
document: Document,
|
|
71
|
+
urls: urlpatterns,
|
|
72
|
+
telemetry: createConsoleSink(),
|
|
73
|
+
});
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
For OpenTelemetry:
|
|
77
|
+
|
|
78
|
+
```typescript
|
|
79
|
+
import { createRouter, createOTelSink } from "@rangojs/router";
|
|
80
|
+
import { trace } from "@opentelemetry/api";
|
|
81
|
+
|
|
82
|
+
const router = createRouter({
|
|
83
|
+
document: Document,
|
|
84
|
+
urls: urlpatterns,
|
|
85
|
+
telemetry: createOTelSink(trace.getTracer("my-app")),
|
|
86
|
+
});
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
Custom sinks implement `emit(event)`:
|
|
90
|
+
|
|
91
|
+
```typescript
|
|
92
|
+
import { createRouter } from "@rangojs/router";
|
|
93
|
+
|
|
94
|
+
const router = createRouter({
|
|
95
|
+
document: Document,
|
|
96
|
+
urls: urlpatterns,
|
|
97
|
+
telemetry: {
|
|
98
|
+
emit(event) {
|
|
99
|
+
myMetrics.record(event);
|
|
100
|
+
},
|
|
101
|
+
},
|
|
102
|
+
});
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
Events include `request.start/end/error`, `loader.start/end/error`,
|
|
106
|
+
`handler.error`, `cache.decision`, and `revalidation.decision`.
|
|
107
|
+
|
|
108
|
+
## Debugging revalidation and stale data
|
|
109
|
+
|
|
110
|
+
When stale UI or unexpected partial renders are the question, use all three
|
|
111
|
+
layers together:
|
|
112
|
+
|
|
113
|
+
```typescript
|
|
114
|
+
import { createConsoleSink, createRouter } from "@rangojs/router";
|
|
115
|
+
|
|
116
|
+
const router = createRouter({
|
|
117
|
+
document: Document,
|
|
118
|
+
urls: urlpatterns,
|
|
119
|
+
debugPerformance: true,
|
|
120
|
+
telemetry: createConsoleSink(),
|
|
121
|
+
});
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
Then inspect:
|
|
125
|
+
|
|
126
|
+
- `revalidation.decision` telemetry to see which segment re-ran or skipped.
|
|
127
|
+
- cache spans / `cache.decision` events to see hit, miss, stale, and background
|
|
128
|
+
revalidation behavior.
|
|
129
|
+
- loader spans to confirm live loaders overlap the render rather than blocking
|
|
130
|
+
first paint.
|
|
131
|
+
- the `Server-Timing` header to compare local logs with browser-network timing.
|
|
132
|
+
|
|
133
|
+
## Zero-overhead defaults
|
|
134
|
+
|
|
135
|
+
`debugPerformance` is off by default, and `telemetry` emits nothing unless a sink
|
|
136
|
+
is configured. Per-request `ctx.debugPerformance()` lets you turn on the
|
|
137
|
+
waterfall only for the route, user, or query param you are investigating.
|
package/skills/parallel/SKILL.md
CHANGED
|
@@ -8,9 +8,6 @@ argument-hint: [@slot-name]
|
|
|
8
8
|
|
|
9
9
|
Parallel routes render multiple components simultaneously in named slots.
|
|
10
10
|
|
|
11
|
-
Canonical semantics reference:
|
|
12
|
-
[docs/execution-model.md](../../docs/internal/execution-model.md)
|
|
13
|
-
|
|
14
11
|
## Basic Parallel Routes
|
|
15
12
|
|
|
16
13
|
```typescript
|
|
@@ -237,6 +234,8 @@ A slot's `loading()` (whether from `handler.use` or explicit) makes that slot an
|
|
|
237
234
|
|
|
238
235
|
The `parallel` mount site has the narrowest allow-list for `handler.use` items — slots cannot bring their own middleware or layout, only `revalidate`, `loader`, `loading`, `errorBoundary`, `notFoundBoundary`, and `transition`. See [skills/handler-use](../handler-use/SKILL.md) for the full table and merge rules.
|
|
239
236
|
|
|
237
|
+
`transition` is allowed in the slot allow-list, but slot-level rendering does **not** currently apply a `<ViewTransition>` wrapper — only the layout/route wraps take effect at render time. For a modal-only morph today, use an element-level React `<ViewTransition>` inside the slot's component. The reverse direction is the useful guarantee: a layout-level `transition()` fires when the layout's default outlet content changes but **not** when a `<ParallelOutlet />` mounts new content (modal opens are not subtree updates of the layout VT). See [skills/view-transitions](../view-transitions/SKILL.md) for the wrap rules and the intercept caveat.
|
|
238
|
+
|
|
240
239
|
### Two scopes for explicit `use`: shared (broadcast) and slot-local
|
|
241
240
|
|
|
242
241
|
`parallel({...slots}, () => [...use])` runs the shared `use()` callback **once per slot** ([dsl-helpers.ts](../../src/route-definition/dsl-helpers.ts)) — items in that callback land on every slot's entry. That's the right behavior for the items the parallel allow-list permits and that accumulate (`loader`, `revalidate`, `errorBoundary`, `notFoundBoundary`, `transition`). (Slots cannot bring `middleware` or `layout` — see the allowed-types note above.)
|
|
@@ -338,7 +337,7 @@ parallel(
|
|
|
338
337
|
() => [
|
|
339
338
|
loader(CartLoader),
|
|
340
339
|
// Revalidate when cart actions occur
|
|
341
|
-
revalidate(({ actionId }) => actionId?.includes("Cart")
|
|
340
|
+
revalidate(({ actionId }) => actionId?.includes("Cart") || undefined),
|
|
342
341
|
]
|
|
343
342
|
)
|
|
344
343
|
```
|
|
@@ -347,6 +346,13 @@ Revalidating only the parallel does not re-run outer handlers/layouts.
|
|
|
347
346
|
If the slot reads `ctx.get()` data established above it, opt the outer
|
|
348
347
|
segment into revalidation as well.
|
|
349
348
|
|
|
349
|
+
A `revalidate()` callback may return a hard `boolean`, a soft
|
|
350
|
+
`{ defaultShouldRevalidate }` object, or nothing (`void` / `null` /
|
|
351
|
+
`undefined`) to defer to the next revalidator. See
|
|
352
|
+
[loader/SKILL.md#revalidate-return-shapes](../loader/SKILL.md#revalidate-return-shapes)
|
|
353
|
+
for the full contract — it's the same across `loader()`, `path()`,
|
|
354
|
+
`layout()`, `parallel()`, and `intercept()`.
|
|
355
|
+
|
|
350
356
|
### Revalidation Contracts for Parallel Dependencies
|
|
351
357
|
|
|
352
358
|
Prefer named revalidation contracts shared by both the upstream producer and
|
|
@@ -355,7 +361,7 @@ the parallel consumer:
|
|
|
355
361
|
```typescript
|
|
356
362
|
// revalidation-contracts.ts
|
|
357
363
|
export const revalidateCartData = ({ actionId }) =>
|
|
358
|
-
actionId?.includes("src/actions/cart.ts#")
|
|
364
|
+
actionId?.includes("src/actions/cart.ts#") || undefined;
|
|
359
365
|
|
|
360
366
|
layout(CartLayout, () => [
|
|
361
367
|
revalidate(revalidateCartData), // producer reruns
|
|
@@ -473,7 +479,7 @@ export const shopPatterns = urls(({
|
|
|
473
479
|
() => [
|
|
474
480
|
loader(CartLoader),
|
|
475
481
|
loading(<CartSkeleton />),
|
|
476
|
-
revalidate(({ actionId }) => actionId?.includes("Cart")
|
|
482
|
+
revalidate(({ actionId }) => actionId?.includes("Cart") || undefined),
|
|
477
483
|
]
|
|
478
484
|
),
|
|
479
485
|
|
|
@@ -11,9 +11,6 @@ deserialization path, same segment system. The worker handles every request --
|
|
|
11
11
|
there are NO static .html or .rsc files served from assets. The worker reads
|
|
12
12
|
pre-computed Flight payloads instead of executing handler code.
|
|
13
13
|
|
|
14
|
-
Canonical semantics reference:
|
|
15
|
-
[docs/execution-model.md](../../docs/internal/execution-model.md)
|
|
16
|
-
|
|
17
14
|
## API: Prerender
|
|
18
15
|
|
|
19
16
|
### Static Route (no params)
|
|
@@ -361,16 +358,16 @@ Both error types propagate to the router's `onError` callback with phase
|
|
|
361
358
|
The build produces per-URL timing logs:
|
|
362
359
|
|
|
363
360
|
```
|
|
364
|
-
[
|
|
365
|
-
[
|
|
366
|
-
[
|
|
367
|
-
[
|
|
368
|
-
[
|
|
369
|
-
|
|
370
|
-
[
|
|
371
|
-
[
|
|
372
|
-
[
|
|
373
|
-
[
|
|
361
|
+
[rango] Pre-rendering 12 URL(s) (concurrency: 4)...
|
|
362
|
+
[rango] OK /articles/hello (42ms)
|
|
363
|
+
[rango] PASS /articles/remote-only (5ms) - live fallback
|
|
364
|
+
[rango] SKIP /articles/draft-post (3ms) - Article is a draft
|
|
365
|
+
[rango] Pre-render complete: 11 done, 1 skipped (1204ms total)
|
|
366
|
+
|
|
367
|
+
[rango] Rendering 3 static handler(s)...
|
|
368
|
+
[rango] OK DocsLayout (28ms)
|
|
369
|
+
[rango] SKIP TocSidebar (1ms) - Not ready
|
|
370
|
+
[rango] Static render complete: 2 done, 1 skipped (120ms total)
|
|
374
371
|
```
|
|
375
372
|
|
|
376
373
|
A `FAIL` line is logged per-URL when a handler throws a non-Skip error. The
|
|
@@ -466,9 +463,9 @@ export const Product = Passthrough(ProductDef, async (ctx) => {
|
|
|
466
463
|
Passthrough entries are logged distinctly:
|
|
467
464
|
|
|
468
465
|
```
|
|
469
|
-
[
|
|
470
|
-
[
|
|
471
|
-
[
|
|
466
|
+
[rango] OK /blog/a (42ms)
|
|
467
|
+
[rango] PASS /blog/b (3ms) - live fallback
|
|
468
|
+
[rango] OK /blog/c (38ms)
|
|
472
469
|
```
|
|
473
470
|
|
|
474
471
|
## Edge Cases and Constraints
|
|
@@ -640,16 +637,7 @@ At runtime, the cache-lookup middleware uses these flags:
|
|
|
640
637
|
|
|
641
638
|
## Contributor Checklist
|
|
642
639
|
|
|
643
|
-
Before changing prerender behavior,
|
|
644
|
-
|
|
645
|
-
### Docs to re-read
|
|
646
|
-
|
|
647
|
-
- [Prerender API design](../../docs/prerender-api-design.md) -- canonical
|
|
648
|
-
architecture: build-time flow, runtime flow, storage, Passthrough, intercept
|
|
649
|
-
- [Execution model](../../docs/internal/execution-model.md) -- handler-first
|
|
650
|
-
ordering, middleware scope, context visibility rules
|
|
651
|
-
- [Semantic change checklist](../../docs/internal/semantic-change-checklist.md)
|
|
652
|
-
-- gate for any change to execution semantics
|
|
640
|
+
Before changing prerender behavior, run these tests.
|
|
653
641
|
|
|
654
642
|
### Tests to run
|
|
655
643
|
|
|
@@ -676,10 +664,3 @@ pnpm --filter @rangojs/router exec playwright test handler-first
|
|
|
676
664
|
dev/build-only and do not need a production counterpart.
|
|
677
665
|
- Behavioral assertions (rendered content, loader freshness, Passthrough
|
|
678
666
|
fallback, intercept variant selection) must work in the production build.
|
|
679
|
-
|
|
680
|
-
## Maintenance References
|
|
681
|
-
|
|
682
|
-
- [Stability next steps plan](../../docs/internal/stability-next-steps-plan.md)
|
|
683
|
-
-- completed parity and cleanup pass (reference for decisions made)
|
|
684
|
-
- [Test quality baseline](../../docs/internal/test-quality-baseline.md) --
|
|
685
|
-
measured test inventory, sleep debt, production coverage gaps
|