@rangojs/router 0.0.0-experimental.b02a2fec → 0.0.0-experimental.b30bbf02

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.
Files changed (112) hide show
  1. package/README.md +112 -17
  2. package/dist/vite/index.js +1338 -462
  3. package/dist/vite/plugins/cloudflare-protocol-loader-hook.mjs +76 -0
  4. package/package.json +7 -5
  5. package/skills/breadcrumbs/SKILL.md +3 -1
  6. package/skills/handler-use/SKILL.md +362 -0
  7. package/skills/hooks/SKILL.md +33 -20
  8. package/skills/intercept/SKILL.md +20 -0
  9. package/skills/layout/SKILL.md +22 -0
  10. package/skills/links/SKILL.md +90 -16
  11. package/skills/loader/SKILL.md +70 -3
  12. package/skills/middleware/SKILL.md +34 -3
  13. package/skills/migrate-nextjs/SKILL.md +562 -0
  14. package/skills/migrate-react-router/SKILL.md +769 -0
  15. package/skills/parallel/SKILL.md +66 -0
  16. package/skills/rango/SKILL.md +25 -22
  17. package/skills/response-routes/SKILL.md +8 -0
  18. package/skills/route/SKILL.md +24 -0
  19. package/skills/server-actions/SKILL.md +739 -0
  20. package/skills/streams-and-websockets/SKILL.md +283 -0
  21. package/skills/typesafety/SKILL.md +3 -1
  22. package/src/browser/app-shell.ts +52 -0
  23. package/src/browser/event-controller.ts +44 -4
  24. package/src/browser/navigation-bridge.ts +71 -5
  25. package/src/browser/navigation-client.ts +64 -13
  26. package/src/browser/navigation-store.ts +25 -1
  27. package/src/browser/partial-update.ts +34 -3
  28. package/src/browser/prefetch/cache.ts +129 -21
  29. package/src/browser/prefetch/fetch.ts +148 -16
  30. package/src/browser/prefetch/queue.ts +36 -5
  31. package/src/browser/rango-state.ts +53 -13
  32. package/src/browser/react/Link.tsx +30 -2
  33. package/src/browser/react/NavigationProvider.tsx +70 -18
  34. package/src/browser/react/filter-segment-order.ts +51 -7
  35. package/src/browser/react/use-navigation.ts +22 -2
  36. package/src/browser/react/use-params.ts +11 -1
  37. package/src/browser/react/use-router.ts +8 -1
  38. package/src/browser/react/use-segments.ts +11 -8
  39. package/src/browser/rsc-router.tsx +34 -6
  40. package/src/browser/segment-reconciler.ts +36 -14
  41. package/src/browser/types.ts +19 -0
  42. package/src/build/route-trie.ts +50 -24
  43. package/src/cache/cf/cf-cache-store.ts +5 -7
  44. package/src/client.tsx +82 -174
  45. package/src/index.rsc.ts +3 -0
  46. package/src/index.ts +40 -9
  47. package/src/outlet-context.ts +1 -1
  48. package/src/response-utils.ts +28 -0
  49. package/src/reverse.ts +7 -3
  50. package/src/route-definition/dsl-helpers.ts +175 -23
  51. package/src/route-definition/helpers-types.ts +63 -14
  52. package/src/route-definition/resolve-handler-use.ts +6 -0
  53. package/src/route-types.ts +7 -0
  54. package/src/router/handler-context.ts +24 -4
  55. package/src/router/lazy-includes.ts +6 -6
  56. package/src/router/loader-resolution.ts +3 -0
  57. package/src/router/manifest.ts +22 -13
  58. package/src/router/match-api.ts +4 -3
  59. package/src/router/match-handlers.ts +1 -0
  60. package/src/router/match-result.ts +21 -2
  61. package/src/router/middleware-types.ts +2 -22
  62. package/src/router/middleware.ts +54 -7
  63. package/src/router/pattern-matching.ts +87 -17
  64. package/src/router/revalidation.ts +15 -1
  65. package/src/router/segment-resolution/fresh.ts +8 -0
  66. package/src/router/segment-resolution/revalidation.ts +128 -100
  67. package/src/router/trie-matching.ts +18 -13
  68. package/src/router/url-params.ts +49 -0
  69. package/src/router.ts +1 -2
  70. package/src/rsc/handler.ts +8 -4
  71. package/src/rsc/helpers.ts +69 -41
  72. package/src/rsc/progressive-enhancement.ts +4 -0
  73. package/src/rsc/response-route-handler.ts +14 -1
  74. package/src/rsc/rsc-rendering.ts +10 -0
  75. package/src/rsc/server-action.ts +4 -0
  76. package/src/rsc/types.ts +6 -0
  77. package/src/segment-content-promise.ts +67 -0
  78. package/src/segment-loader-promise.ts +122 -0
  79. package/src/segment-system.tsx +11 -61
  80. package/src/server/context.ts +26 -3
  81. package/src/server/request-context.ts +10 -42
  82. package/src/ssr/index.tsx +5 -1
  83. package/src/types/handler-context.ts +12 -39
  84. package/src/types/loader-types.ts +5 -6
  85. package/src/types/request-scope.ts +126 -0
  86. package/src/types/route-entry.ts +11 -0
  87. package/src/types/segments.ts +17 -1
  88. package/src/urls/include-helper.ts +24 -14
  89. package/src/urls/path-helper-types.ts +30 -4
  90. package/src/urls/response-types.ts +2 -10
  91. package/src/vite/debug.ts +184 -0
  92. package/src/vite/discovery/discover-routers.ts +31 -3
  93. package/src/vite/discovery/gate-state.ts +171 -0
  94. package/src/vite/discovery/prerender-collection.ts +48 -1
  95. package/src/vite/discovery/self-gen-tracking.ts +27 -1
  96. package/src/vite/plugins/cjs-to-esm.ts +5 -0
  97. package/src/vite/plugins/client-ref-dedup.ts +16 -0
  98. package/src/vite/plugins/client-ref-hashing.ts +16 -4
  99. package/src/vite/plugins/cloudflare-protocol-loader-hook.d.mts +23 -0
  100. package/src/vite/plugins/cloudflare-protocol-loader-hook.mjs +76 -0
  101. package/src/vite/plugins/cloudflare-protocol-stub.ts +214 -0
  102. package/src/vite/plugins/expose-action-id.ts +52 -28
  103. package/src/vite/plugins/expose-ids/router-transform.ts +20 -3
  104. package/src/vite/plugins/expose-internal-ids.ts +516 -486
  105. package/src/vite/plugins/performance-tracks.ts +17 -9
  106. package/src/vite/plugins/use-cache-transform.ts +56 -43
  107. package/src/vite/plugins/version-injector.ts +37 -11
  108. package/src/vite/rango.ts +49 -14
  109. package/src/vite/router-discovery.ts +558 -53
  110. package/src/vite/utils/banner.ts +1 -1
  111. package/src/vite/utils/package-resolution.ts +41 -1
  112. package/src/vite/utils/prerender-utils.ts +20 -6
@@ -206,6 +206,65 @@ parallel(
206
206
  )
207
207
  ```
208
208
 
209
+ ## Composable Slots via `handler.use`
210
+
211
+ Slot handlers can carry their own loader, loading, error/notFound boundaries, revalidation, and transition defaults via `.use`. The mount site then declares **just the slot names** — no per-call data wiring.
212
+
213
+ ```typescript
214
+ const CartSummary: Handler = async (ctx) => {
215
+ const cart = await ctx.use(CartLoader);
216
+ return <CartSummaryView cart={cart} />;
217
+ };
218
+ CartSummary.use = () => [
219
+ loader(CartLoader),
220
+ loading(<CartSkeleton />),
221
+ revalidate(revalidateCartData),
222
+ ];
223
+
224
+ // Same slot, no copy-pasted plumbing across layouts.
225
+ layout(<DashboardLayout />, () => [
226
+ parallel({ "@cart": CartSummary }),
227
+ path("/dashboard", DashboardIndex, { name: "dashboard.index" }),
228
+ ]);
229
+
230
+ layout(<AccountLayout />, () => [
231
+ parallel({ "@cart": CartSummary }),
232
+ path("/account", AccountIndex, { name: "account.index" }),
233
+ ]);
234
+ ```
235
+
236
+ A slot's `loading()` (whether from `handler.use` or explicit) makes that slot an independent streaming unit, exactly as in the **Streaming Behavior** section above.
237
+
238
+ 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
+
240
+ ### Two scopes for explicit `use`: shared (broadcast) and slot-local
241
+
242
+ `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.)
243
+
244
+ For single-assignment items like `loading()`, broadcasting overwrites every slot's `handler.use` default. Pass a **slot descriptor** `{ handler, use }` instead — items in the descriptor's `use` apply only to that slot:
245
+
246
+ ```typescript
247
+ // @cart gets a custom skeleton; @notifs keeps its handler.use default.
248
+ parallel({
249
+ "@cart": {
250
+ handler: Cart,
251
+ use: () => [loading(<CustomCartSkeleton />)],
252
+ },
253
+ "@notifs": Notifs,
254
+ });
255
+
256
+ // Opt one slot out of streaming while siblings still stream the broadcast.
257
+ parallel(
258
+ {
259
+ "@cart": { handler: Cart, use: () => [loading(false)] },
260
+ "@notifs": Notifs,
261
+ },
262
+ () => [loading(<BroadcastSkeleton />)],
263
+ );
264
+ ```
265
+
266
+ Per-slot merge order is **handler.use → shared use → slot-local use**. Slot-local is the narrowest scope, so it wins for last-write-wins items. See [skills/handler-use § `loading()` is a single-assignment item — scope it correctly](../handler-use/SKILL.md#loading-is-a-single-assignment-item--scope-it-correctly) for the full reasoning.
267
+
209
268
  ## Slot Override Semantics
210
269
 
211
270
  When multiple `parallel()` calls define the same slot name, **the last
@@ -288,6 +347,13 @@ Revalidating only the parallel does not re-run outer handlers/layouts.
288
347
  If the slot reads `ctx.get()` data established above it, opt the outer
289
348
  segment into revalidation as well.
290
349
 
350
+ A `revalidate()` callback may return a hard `boolean`, a soft
351
+ `{ defaultShouldRevalidate }` object, or nothing (`void` / `null` /
352
+ `undefined`) to defer to the next revalidator. See
353
+ [loader/SKILL.md#revalidate-return-shapes](../loader/SKILL.md#revalidate-return-shapes)
354
+ for the full contract — it's the same across `loader()`, `path()`,
355
+ `layout()`, `parallel()`, and `intercept()`.
356
+
291
357
  ### Revalidation Contracts for Parallel Dependencies
292
358
 
293
359
  Prefer named revalidation contracts shared by both the upstream producer and
@@ -10,28 +10,31 @@ Django-inspired RSC router with composable URL patterns, type-safe href, and ser
10
10
 
11
11
  ## Skills
12
12
 
13
- | Skill | Description |
14
- | ------------------ | -------------------------------------------------------------------------- |
15
- | `/router-setup` | Create and configure the RSC router |
16
- | `/route` | Define routes with `urls()` and `path()` |
17
- | `/layout` | Layouts that wrap child routes |
18
- | `/loader` | Data loaders with `createLoader()` |
19
- | `/middleware` | Request processing and authentication |
20
- | `/intercept` | Modal/slide-over patterns for soft navigation |
21
- | `/parallel` | Multi-column layouts and sidebars |
22
- | `/caching` | Segment caching with memory or KV stores |
23
- | `/use-cache` | Function-level caching with `"use cache"` directive |
24
- | `/cache-guide` | When to use `cache()` vs `"use cache"` — differences and decision guide |
25
- | `/document-cache` | Edge caching with Cache-Control headers |
26
- | `/theme` | Light/dark mode with FOUC prevention |
27
- | `/links` | URL generation: ctx.reverse, href, useHref, useMount, scopedReverse |
28
- | `/hooks` | Client-side React hooks |
29
- | `/typesafety` | Type-safe routes, params, href, and environment |
30
- | `/host-router` | Multi-app host routing with domain/subdomain patterns |
31
- | `/tailwind` | Set up Tailwind CSS v4 with `?url` imports |
32
- | `/response-routes` | JSON/text/HTML/XML/stream endpoints with `path.json()`, `path.text()` |
33
- | `/mime-routes` | Content negotiation same URL, different response types via Accept header |
34
- | `/fonts` | Load web fonts with preload hints |
13
+ | Skill | Description |
14
+ | ----------------------- | -------------------------------------------------------------------------- |
15
+ | `/router-setup` | Create and configure the RSC router |
16
+ | `/route` | Define routes with `urls()` and `path()` |
17
+ | `/layout` | Layouts that wrap child routes |
18
+ | `/loader` | Data loaders with `createLoader()` |
19
+ | `/server-actions` | Mutations with `"use server"`, useActionState, validation, revalidation |
20
+ | `/middleware` | Request processing and authentication |
21
+ | `/intercept` | Modal/slide-over patterns for soft navigation |
22
+ | `/parallel` | Multi-column layouts and sidebars |
23
+ | `/caching` | Segment caching with memory or KV stores |
24
+ | `/use-cache` | Function-level caching with `"use cache"` directive |
25
+ | `/cache-guide` | When to use `cache()` vs `"use cache"` — differences and decision guide |
26
+ | `/document-cache` | Edge caching with Cache-Control headers |
27
+ | `/theme` | Light/dark mode with FOUC prevention |
28
+ | `/links` | URL generation: ctx.reverse, href, useHref, useMount, scopedReverse |
29
+ | `/hooks` | Client-side React hooks |
30
+ | `/typesafety` | Type-safe routes, params, href, and environment |
31
+ | `/host-router` | Multi-app host routing with domain/subdomain patterns |
32
+ | `/tailwind` | Set up Tailwind CSS v4 with `?url` imports |
33
+ | `/response-routes` | JSON/text/HTML/XML/stream endpoints with `path.json()`, `path.text()` |
34
+ | `/mime-routes` | Content negotiation same URL, different response types via Accept header |
35
+ | `/fonts` | Load web fonts with preload hints |
36
+ | `/migrate-nextjs` | Migrate a Next.js App Router project to Rango |
37
+ | `/migrate-react-router` | Migrate a React Router / Remix project to Rango |
35
38
 
36
39
  ## Quick Start
37
40
 
@@ -400,6 +400,14 @@ path(
400
400
  Multiple response types can share the same URL pattern. See `/mime-routes` for the
401
401
  full content negotiation API (Accept header matching, Vary: Accept, multi-variant routes).
402
402
 
403
+ ## Long-Lived Responses (SSE / WebSocket)
404
+
405
+ For Server-Sent Events (`path.stream`) and WebSocket upgrades (`path.any`
406
+ returning a 101 / `webSocket` Response), see `/streams-and-websockets`.
407
+ Upgrade responses flow through without reconstruction; `Vary` and
408
+ `Server-Timing` are skipped, and stub headers are applied in place on a
409
+ best-effort basis.
410
+
403
411
  ## How It Works
404
412
 
405
413
  1. `path.json()` tags the route at the trie level with a MIME type
@@ -383,6 +383,30 @@ urls(({ path, layout }) => [
383
383
  ])
384
384
  ```
385
385
 
386
+ ## Handler-attached `.use`
387
+
388
+ Page handlers can carry their own loader, middleware, error boundaries, parallels, and other defaults via a `.use` callback — so the page is self-contained and reusable across mount sites without re-wiring the same items.
389
+
390
+ ```typescript
391
+ const ProductPage: Handler<"/product/:slug"> = async (ctx) => {
392
+ const product = await ctx.use(ProductLoader);
393
+ return <ProductView product={product} />;
394
+ };
395
+ ProductPage.use = () => [
396
+ loader(ProductLoader),
397
+ loading(<ProductSkeleton />),
398
+ middleware(async (ctx, next) => {
399
+ await next();
400
+ ctx.header("Cache-Control", "private, max-age=60");
401
+ }),
402
+ ];
403
+
404
+ // Mount site has no per-page wiring — defaults travel with the handler.
405
+ path("/product/:slug", ProductPage, { name: "product" });
406
+ ```
407
+
408
+ Explicit `use()` at the mount site merges with `handler.use` (handler defaults first, explicit second). See [skills/handler-use](../handler-use/SKILL.md) for the merge order, allowed item types per mount site, and override semantics.
409
+
386
410
  ## Complete Example
387
411
 
388
412
  ```typescript