@rangojs/router 0.0.0-experimental.8123bb7e → 0.0.0-experimental.82

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 (129) hide show
  1. package/README.md +76 -18
  2. package/dist/bin/rango.js +130 -47
  3. package/dist/vite/index.js +829 -380
  4. package/dist/vite/index.js.bak +5448 -0
  5. package/dist/vite/plugins/cloudflare-protocol-loader-hook.mjs +76 -0
  6. package/package.json +4 -4
  7. package/skills/handler-use/SKILL.md +362 -0
  8. package/skills/hooks/SKILL.md +24 -18
  9. package/skills/intercept/SKILL.md +20 -0
  10. package/skills/layout/SKILL.md +22 -0
  11. package/skills/links/SKILL.md +3 -1
  12. package/skills/middleware/SKILL.md +34 -3
  13. package/skills/migrate-nextjs/SKILL.md +560 -0
  14. package/skills/migrate-react-router/SKILL.md +765 -0
  15. package/skills/parallel/SKILL.md +59 -0
  16. package/skills/prerender/SKILL.md +110 -68
  17. package/skills/rango/SKILL.md +24 -22
  18. package/skills/route/SKILL.md +24 -0
  19. package/skills/router-setup/SKILL.md +35 -0
  20. package/src/__internal.ts +1 -1
  21. package/src/browser/app-version.ts +14 -0
  22. package/src/browser/navigation-bridge.ts +37 -5
  23. package/src/browser/navigation-client.ts +128 -77
  24. package/src/browser/navigation-store.ts +43 -8
  25. package/src/browser/partial-update.ts +41 -7
  26. package/src/browser/prefetch/cache.ts +113 -21
  27. package/src/browser/prefetch/fetch.ts +156 -18
  28. package/src/browser/prefetch/queue.ts +36 -5
  29. package/src/browser/react/Link.tsx +72 -8
  30. package/src/browser/react/NavigationProvider.tsx +14 -3
  31. package/src/browser/react/context.ts +7 -2
  32. package/src/browser/react/use-handle.ts +9 -58
  33. package/src/browser/react/use-navigation.ts +22 -2
  34. package/src/browser/react/use-params.ts +11 -1
  35. package/src/browser/react/use-router.ts +21 -8
  36. package/src/browser/rsc-router.tsx +26 -3
  37. package/src/browser/scroll-restoration.ts +10 -8
  38. package/src/browser/segment-reconciler.ts +36 -14
  39. package/src/browser/server-action-bridge.ts +8 -18
  40. package/src/browser/types.ts +20 -5
  41. package/src/build/generate-manifest.ts +6 -6
  42. package/src/build/generate-route-types.ts +3 -0
  43. package/src/build/route-trie.ts +50 -24
  44. package/src/build/route-types/include-resolution.ts +8 -1
  45. package/src/build/route-types/router-processing.ts +211 -72
  46. package/src/build/route-types/scan-filter.ts +8 -1
  47. package/src/client.tsx +84 -230
  48. package/src/deps/browser.ts +0 -1
  49. package/src/handle.ts +40 -0
  50. package/src/index.rsc.ts +3 -1
  51. package/src/index.ts +46 -6
  52. package/src/prerender/store.ts +5 -4
  53. package/src/prerender.ts +138 -77
  54. package/src/reverse.ts +25 -1
  55. package/src/route-definition/dsl-helpers.ts +194 -32
  56. package/src/route-definition/helpers-types.ts +61 -14
  57. package/src/route-definition/index.ts +3 -0
  58. package/src/route-definition/redirect.ts +9 -1
  59. package/src/route-definition/resolve-handler-use.ts +149 -0
  60. package/src/route-types.ts +18 -0
  61. package/src/router/content-negotiation.ts +100 -1
  62. package/src/router/handler-context.ts +51 -15
  63. package/src/router/intercept-resolution.ts +9 -4
  64. package/src/router/lazy-includes.ts +5 -5
  65. package/src/router/loader-resolution.ts +150 -21
  66. package/src/router/manifest.ts +22 -13
  67. package/src/router/match-api.ts +124 -189
  68. package/src/router/match-middleware/cache-lookup.ts +28 -8
  69. package/src/router/match-middleware/segment-resolution.ts +53 -0
  70. package/src/router/match-result.ts +82 -4
  71. package/src/router/middleware-types.ts +0 -6
  72. package/src/router/middleware.ts +0 -3
  73. package/src/router/navigation-snapshot.ts +182 -0
  74. package/src/router/prerender-match.ts +110 -10
  75. package/src/router/preview-match.ts +30 -102
  76. package/src/router/request-classification.ts +310 -0
  77. package/src/router/route-snapshot.ts +245 -0
  78. package/src/router/router-interfaces.ts +36 -4
  79. package/src/router/router-options.ts +37 -11
  80. package/src/router/segment-resolution/fresh.ts +70 -5
  81. package/src/router/segment-resolution/revalidation.ts +87 -9
  82. package/src/router.ts +53 -5
  83. package/src/rsc/handler.ts +472 -397
  84. package/src/rsc/loader-fetch.ts +18 -3
  85. package/src/rsc/manifest-init.ts +5 -1
  86. package/src/rsc/progressive-enhancement.ts +14 -3
  87. package/src/rsc/rsc-rendering.ts +15 -2
  88. package/src/rsc/server-action.ts +10 -2
  89. package/src/rsc/ssr-setup.ts +2 -2
  90. package/src/rsc/types.ts +6 -4
  91. package/src/segment-content-promise.ts +67 -0
  92. package/src/segment-loader-promise.ts +122 -0
  93. package/src/segment-system.tsx +11 -61
  94. package/src/server/context.ts +65 -5
  95. package/src/server/handle-store.ts +19 -0
  96. package/src/server/loader-registry.ts +9 -8
  97. package/src/server/request-context.ts +132 -13
  98. package/src/ssr/index.tsx +3 -0
  99. package/src/static-handler.ts +18 -6
  100. package/src/types/cache-types.ts +4 -4
  101. package/src/types/handler-context.ts +17 -11
  102. package/src/types/loader-types.ts +32 -5
  103. package/src/types/route-entry.ts +12 -1
  104. package/src/types/segments.ts +1 -1
  105. package/src/urls/include-helper.ts +24 -14
  106. package/src/urls/path-helper-types.ts +39 -6
  107. package/src/urls/path-helper.ts +47 -12
  108. package/src/urls/pattern-types.ts +12 -0
  109. package/src/urls/response-types.ts +16 -6
  110. package/src/use-loader.tsx +77 -5
  111. package/src/vite/discovery/bundle-postprocess.ts +30 -33
  112. package/src/vite/discovery/discover-routers.ts +5 -1
  113. package/src/vite/discovery/prerender-collection.ts +128 -74
  114. package/src/vite/discovery/state.ts +13 -4
  115. package/src/vite/index.ts +4 -0
  116. package/src/vite/plugin-types.ts +60 -5
  117. package/src/vite/plugins/cloudflare-protocol-loader-hook.d.mts +23 -0
  118. package/src/vite/plugins/cloudflare-protocol-loader-hook.mjs +76 -0
  119. package/src/vite/plugins/cloudflare-protocol-stub.ts +214 -0
  120. package/src/vite/plugins/expose-id-utils.ts +12 -0
  121. package/src/vite/plugins/expose-ids/handler-transform.ts +30 -0
  122. package/src/vite/plugins/expose-internal-ids.ts +257 -40
  123. package/src/vite/plugins/performance-tracks.ts +64 -211
  124. package/src/vite/plugins/refresh-cmd.ts +88 -26
  125. package/src/vite/rango.ts +17 -11
  126. package/src/vite/router-discovery.ts +237 -37
  127. package/src/vite/utils/prerender-utils.ts +37 -5
  128. package/src/vite/utils/shared-utils.ts +3 -2
  129. package/src/browser/debug-channel.ts +0 -93
@@ -2,13 +2,27 @@
2
2
  * Prefetch Cache
3
3
  *
4
4
  * In-memory cache storing prefetched Response objects for instant cache hits
5
- * on subsequent navigation. Cache key is source-dependent (includes the
6
- * current page URL) because the server's diff-based response depends on
7
- * where the user navigates from.
5
+ * on subsequent navigation. Two key scopes are in play:
6
+ * - Wildcard (default): built by `buildPrefetchKey(rangoState, target)`
7
+ * shape `rangoState\0/target?...`. Shared across all source pages and
8
+ * invalidated automatically when Rango state bumps (deploy or
9
+ * server-action invalidation).
10
+ * - Source-scoped: built by `buildSourceKey(rangoState, sourceHref, target)`
11
+ * — shape `rangoState\0sourceHref\0/target?...`. Embeds the Rango state
12
+ * (so rotation invalidates source-scoped entries too) plus the source
13
+ * href (so each originating page gets its own slot). Populated when the
14
+ * server tags a response with `X-RSC-Prefetch-Scope: source` (intercept
15
+ * modals etc.), OR when a Link opts in with `prefetchKey=":source"` — in
16
+ * both cases so source-sensitive responses cannot bleed into navigations
17
+ * from other pages.
8
18
  *
9
19
  * Also tracks in-flight prefetch promises. Each promise resolves to the
10
20
  * navigation branch of a tee'd Response, allowing navigation to adopt a
11
- * still-downloading prefetch without reparsing or buffering the body.
21
+ * still-downloading prefetch without reparsing or buffering the body. A
22
+ * single promise can be registered under multiple alias keys (see
23
+ * `setInflightPromiseWithAliases`) so same-source navigations adopt via
24
+ * their source key while cross-source ones fall through to the wildcard
25
+ * alias — with consume/clear atomically removing every alias.
12
26
  *
13
27
  * Replaces the previous browser HTTP cache approach which was unreliable
14
28
  * due to response draining race conditions and browser inconsistencies.
@@ -55,19 +69,71 @@ const inflight = new Set<string>();
55
69
  */
56
70
  const inflightPromises = new Map<string, Promise<Response | null>>();
57
71
 
72
+ /**
73
+ * Alias map for in-flight promises registered under multiple keys (see
74
+ * dual inflight in prefetch/fetch.ts). Records each key's sibling set so
75
+ * that consuming or clearing any one key atomically removes every alias —
76
+ * guaranteeing a single consumer for the shared Response stream.
77
+ */
78
+ const inflightAliases = new Map<string, string[]>();
79
+
58
80
  // Generation counter incremented on each clearPrefetchCache(). Fetches that
59
81
  // started before a clear carry a stale generation and must not store their
60
82
  // response (the data may be stale due to a server action invalidation).
61
83
  let generation = 0;
62
84
 
63
85
  /**
64
- * Build a source-dependent cache key.
65
- * Includes the source page href so the same target prefetched from
66
- * different pages gets separate entries the server response varies
67
- * based on the source page context (diff-based rendering).
86
+ * Build a cache key by combining a scope prefix with the target URL.
87
+ *
88
+ * Low-level primitive callers that want a specific scope should use
89
+ * one of:
90
+ * - Wildcard (source-agnostic): prefix is the Rango state value from
91
+ * `getRangoState()`. Shared across all source pages. Invalidated
92
+ * automatically when Rango state bumps (deploy or server-action).
93
+ * Key shape: `rangoState\0/target?...`.
94
+ * - Source-scoped: use `buildSourceKey()`. Key shape:
95
+ * `rangoState\0sourceHref\0/target?...` — embeds the Rango state so
96
+ * rotation invalidates source-scoped entries alongside wildcard ones,
97
+ * plus the source page href so the key is unique per originating page.
98
+ * Populated either when the server tags a response with
99
+ * `X-RSC-Prefetch-Scope: source` (intercept modals, etc.) or when a
100
+ * Link opts in via `prefetchKey=":source"`.
101
+ *
102
+ * The `_rsc_segments` query param that travels in the target URL means
103
+ * clients with different mounted segment trees naturally get different
104
+ * keys — so segment-level diffs remain consistent across both scopes.
105
+ */
106
+ export function buildPrefetchKey(prefix: string, targetUrl: URL): string {
107
+ return prefix + "\0" + targetUrl.pathname + targetUrl.search;
108
+ }
109
+
110
+ /**
111
+ * Build a source-scoped cache key. Key shape:
112
+ * `rangoState\0sourceHref\0/target?...`.
113
+ *
114
+ * - `rangoState` is included so state rotation invalidates source-scoped
115
+ * entries alongside wildcard ones.
116
+ * - `sourceHref` makes the key unique per originating page.
117
+ */
118
+ export function buildSourceKey(
119
+ rangoState: string,
120
+ sourceHref: string,
121
+ targetUrl: URL,
122
+ ): string {
123
+ return buildPrefetchKey(rangoState + "\0" + sourceHref, targetUrl);
124
+ }
125
+
126
+ /**
127
+ * Walk an inflight key plus any sibling aliases registered via
128
+ * `setInflightPromiseWithAliases`, invoking `fn` for each.
68
129
  */
69
- export function buildPrefetchKey(sourceHref: string, targetUrl: URL): string {
70
- return sourceHref + "\0" + targetUrl.pathname + targetUrl.search;
130
+ function forEachAlias(key: string, fn: (k: string) => void): void {
131
+ const aliases = inflightAliases.get(key);
132
+ if (aliases) {
133
+ for (const k of aliases) fn(k);
134
+ } else {
135
+ fn(key);
136
+ }
71
137
  }
72
138
 
73
139
  /**
@@ -110,21 +176,27 @@ export function consumePrefetch(key: string): Response | null {
110
176
  * in-flight for this key. The returned Promise resolves to the buffered
111
177
  * Response (or null if the fetch failed/was aborted).
112
178
  *
113
- * One-time consumption: the promise entry is removed so a second call
114
- * returns null. The `inflight` set entry is intentionally kept so that
115
- * hasPrefetch() continues to return true while the underlying fetch is
116
- * still downloading this prevents prefetchDirect() or other callers
117
- * from starting a duplicate request during the handoff window. The
118
- * inflight flag is cleaned up naturally by clearPrefetchInflight() in
119
- * the fetch's .finally().
179
+ * One-time consumption: the promise entry is removed (along with any
180
+ * sibling aliases registered via `setInflightPromiseWithAliases`) so a
181
+ * second call on any alias returns null only one caller can adopt the
182
+ * shared Response stream. The `inflight` set entry is intentionally
183
+ * kept so that `hasPrefetch()` continues to return true while the
184
+ * underlying fetch is still downloading this prevents
185
+ * `prefetchDirect()` or other callers from starting a duplicate request
186
+ * during the handoff window. The inflight flag is cleaned up naturally
187
+ * by `clearPrefetchInflight()` in the fetch's `.finally()`.
120
188
  */
121
189
  export function consumeInflightPrefetch(
122
190
  key: string,
123
191
  ): Promise<Response | null> | null {
124
192
  const promise = inflightPromises.get(key);
125
193
  if (!promise) return null;
126
- // Remove the promise (one-time consumption) but keep the inflight flag.
127
- inflightPromises.delete(key);
194
+ // Remove the promise under every alias so a second consumer cannot
195
+ // adopt the same stream and race on the body. `inflightAliases` is
196
+ // intentionally preserved — `clearPrefetchInflight()` in the fetch's
197
+ // `.finally()` still needs it to clear every inflight flag; deleting
198
+ // here would strand the sibling's flag forever.
199
+ forEachAlias(key, (k) => inflightPromises.delete(k));
128
200
  return promise;
129
201
  }
130
202
 
@@ -183,9 +255,28 @@ export function setInflightPromise(
183
255
  inflightPromises.set(key, promise);
184
256
  }
185
257
 
258
+ /**
259
+ * Store the same in-flight Promise under multiple keys, recording them
260
+ * as sibling aliases. Consuming or clearing any one alias atomically
261
+ * removes every entry, guaranteeing the shared Response stream has a
262
+ * single consumer even when navigation looks up either key.
263
+ */
264
+ export function setInflightPromiseWithAliases(
265
+ keys: string[],
266
+ promise: Promise<Response | null>,
267
+ ): void {
268
+ for (const k of keys) {
269
+ inflightPromises.set(k, promise);
270
+ inflightAliases.set(k, keys);
271
+ }
272
+ }
273
+
186
274
  export function clearPrefetchInflight(key: string): void {
187
- inflight.delete(key);
188
- inflightPromises.delete(key);
275
+ forEachAlias(key, (k) => {
276
+ inflight.delete(k);
277
+ inflightPromises.delete(k);
278
+ inflightAliases.delete(k);
279
+ });
189
280
  }
190
281
 
191
282
  /**
@@ -200,6 +291,7 @@ export function clearPrefetchCache(): void {
200
291
  generation++;
201
292
  inflight.clear();
202
293
  inflightPromises.clear();
294
+ inflightAliases.clear();
203
295
  cache.clear();
204
296
  abortAllPrefetches();
205
297
  invalidateRangoState();
@@ -13,9 +13,10 @@
13
13
 
14
14
  import {
15
15
  buildPrefetchKey,
16
+ buildSourceKey,
16
17
  hasPrefetch,
17
18
  markPrefetchInflight,
18
- setInflightPromise,
19
+ setInflightPromiseWithAliases,
19
20
  storePrefetch,
20
21
  clearPrefetchInflight,
21
22
  currentGeneration,
@@ -23,6 +24,24 @@ import {
23
24
  import { getRangoState } from "../rango-state.js";
24
25
  import { enqueuePrefetch } from "./queue.js";
25
26
  import { shouldPrefetch } from "./policy.js";
27
+ import { debugLog } from "../logging.js";
28
+
29
+ /**
30
+ * Check if a URL resolves to the current page (same pathname + search).
31
+ * Used to prevent same-page prefetching, which produces a trivial diff
32
+ * that would corrupt the (default wildcard) prefetch cache entry.
33
+ */
34
+ function isSamePage(url: string): boolean {
35
+ try {
36
+ const target = new URL(url, window.location.origin);
37
+ return (
38
+ target.pathname + target.search ===
39
+ window.location.pathname + window.location.search
40
+ );
41
+ } catch {
42
+ return false;
43
+ }
44
+ }
26
45
 
27
46
  /**
28
47
  * Build an RSC partial URL for prefetching.
@@ -34,6 +53,7 @@ function buildPrefetchUrl(
34
53
  url: string,
35
54
  segmentIds: string[],
36
55
  version?: string,
56
+ routerId?: string,
37
57
  ): URL | null {
38
58
  let targetUrl: URL;
39
59
  try {
@@ -51,6 +71,9 @@ function buildPrefetchUrl(
51
71
  if (version) {
52
72
  targetUrl.searchParams.set("_rsc_v", version);
53
73
  }
74
+ if (routerId) {
75
+ targetUrl.searchParams.set("_rsc_rid", routerId);
76
+ }
54
77
  return targetUrl;
55
78
  }
56
79
 
@@ -59,14 +82,33 @@ function buildPrefetchUrl(
59
82
  * one branch in the in-memory cache. The returned Promise resolves to the
60
83
  * sibling navigation branch (or null on failure) so navigation can safely
61
84
  * reuse an in-flight prefetch via consumeInflightPrefetch().
85
+ *
86
+ * Inflight + storage key selection:
87
+ *
88
+ * - `forceSourceScope` (Link opted in with `prefetchKey=":source"`): single
89
+ * inflight registration under `sourceKey`; response stored under
90
+ * `sourceKey`. No wildcard leak is possible.
91
+ *
92
+ * - Otherwise: dual inflight registration under both `wildcardKey` and
93
+ * `sourceKey` so same-source navigations adopt directly via their own
94
+ * source key. Storage key is chosen at response time from the
95
+ * `X-RSC-Prefetch-Scope` header — `"source"` → `sourceKey` (intercept
96
+ * modals etc.), anything else → `wildcardKey`. Cross-source navigations
97
+ * that adopted via `wildcardKey` must bail out in `navigation-client.ts`
98
+ * if the adopted response turns out to be source-scoped.
62
99
  */
63
100
  function executePrefetchFetch(
64
- key: string,
101
+ wildcardKey: string,
102
+ sourceKey: string,
65
103
  fetchUrl: string,
104
+ forceSourceScope: boolean,
66
105
  signal?: AbortSignal,
67
106
  ): Promise<Response | null> {
68
107
  const gen = currentGeneration();
69
- markPrefetchInflight(key);
108
+ const inflightKeys = forceSourceScope
109
+ ? [sourceKey]
110
+ : [wildcardKey, sourceKey];
111
+ for (const k of inflightKeys) markPrefetchInflight(k);
70
112
 
71
113
  const promise: Promise<Response | null> = fetch(fetchUrl, {
72
114
  priority: "low" as RequestPriority,
@@ -88,57 +130,153 @@ function executePrefetchFetch(
88
130
  status: response.status,
89
131
  statusText: response.statusText,
90
132
  };
91
- storePrefetch(key, new Response(cacheStream, responseInit), gen);
133
+ let storageKey: string;
134
+ if (forceSourceScope) {
135
+ storageKey = sourceKey;
136
+ } else {
137
+ const scope = response.headers.get("x-rsc-prefetch-scope");
138
+ storageKey = scope === "source" ? sourceKey : wildcardKey;
139
+ }
140
+ storePrefetch(storageKey, new Response(cacheStream, responseInit), gen);
92
141
  return new Response(navStream, responseInit);
93
142
  })
94
143
  .catch(() => null)
95
144
  .finally(() => {
96
- clearPrefetchInflight(key);
145
+ clearPrefetchInflight(inflightKeys[0]!);
97
146
  });
98
147
 
99
- setInflightPromise(key, promise);
148
+ setInflightPromiseWithAliases(inflightKeys, promise);
100
149
  return promise;
101
150
  }
102
151
 
152
+ /**
153
+ * Dedup check for prefetch entry presence.
154
+ *
155
+ * Forced `:source` must NOT dedupe against a pre-existing wildcard entry —
156
+ * otherwise the source slot would stay unpopulated and navigation from
157
+ * this source would fall through to the (potentially wrong) wildcard
158
+ * response, defeating the opt-out.
159
+ */
160
+ function hasPrefetchHit(
161
+ forceSourceScope: boolean,
162
+ wildcardKey: string,
163
+ sourceKey: string,
164
+ ): boolean {
165
+ return forceSourceScope
166
+ ? hasPrefetch(sourceKey)
167
+ : hasPrefetch(wildcardKey) || hasPrefetch(sourceKey);
168
+ }
169
+
103
170
  /**
104
171
  * Prefetch (direct): fetch with low priority and store in in-memory cache.
105
172
  * Used by hover strategy -- fires immediately without queueing.
173
+ *
174
+ * By default the wildcard key (Rango-state-keyed) is used for inflight
175
+ * dedup and for responses that are not source-sensitive; source-scoped
176
+ * storage is automatic when the server emits `X-RSC-Prefetch-Scope: source`.
177
+ *
178
+ * Pass `prefetchKey=":source"` to force source-scoped inflight + storage
179
+ * (e.g. when the target uses a custom `revalidate()` that reads
180
+ * `currentUrl` and the wildcard slot would serve the wrong diff).
106
181
  */
107
182
  export function prefetchDirect(
108
183
  url: string,
109
184
  segmentIds: string[],
110
185
  version?: string,
186
+ routerId?: string,
187
+ prefetchKey?: ":source",
111
188
  ): void {
112
189
  if (!shouldPrefetch()) return;
113
190
 
114
- const targetUrl = buildPrefetchUrl(url, segmentIds, version);
191
+ const targetUrl = buildPrefetchUrl(url, segmentIds, version, routerId);
115
192
  if (!targetUrl) return;
116
- const key = buildPrefetchKey(window.location.href, targetUrl);
117
- if (hasPrefetch(key)) return;
118
- executePrefetchFetch(key, targetUrl.toString());
193
+ const forceSourceScope = prefetchKey === ":source";
194
+ // Skip same-page prefetch — a same-page diff is trivial and would corrupt
195
+ // the wildcard cache entry used for cross-page navigation.
196
+ // When `:source` is forced the entry is source-scoped (single-aliased to
197
+ // itself), so it cannot poison any shared slot — allow it.
198
+ if (!forceSourceScope && isSamePage(url)) {
199
+ return;
200
+ }
201
+ const sourceHref = window.location.href;
202
+ const rangoState = getRangoState();
203
+ const wildcardKey = buildPrefetchKey(rangoState, targetUrl);
204
+ const sourceKey = buildSourceKey(rangoState, sourceHref, targetUrl);
205
+ if (hasPrefetchHit(forceSourceScope, wildcardKey, sourceKey)) {
206
+ debugLog("[prefetch] direct dedup (key already exists)", {
207
+ url,
208
+ wildcardKey,
209
+ sourceKey,
210
+ forceSourceScope,
211
+ });
212
+ return;
213
+ }
214
+ debugLog("[prefetch] direct fetch", {
215
+ url,
216
+ wildcardKey,
217
+ sourceKey,
218
+ source: sourceHref,
219
+ forceSourceScope,
220
+ });
221
+ executePrefetchFetch(
222
+ wildcardKey,
223
+ sourceKey,
224
+ targetUrl.toString(),
225
+ forceSourceScope,
226
+ );
119
227
  }
120
228
 
121
229
  /**
122
230
  * Prefetch (queued): goes through the concurrency-limited queue.
123
231
  * Used by viewport/render strategies to avoid flooding the server.
124
- * Returns the cache key for use in cleanup.
232
+ * Returns the inflight key (wildcard by default, source-scoped when
233
+ * `prefetchKey=":source"` is passed).
125
234
  */
126
235
  export function prefetchQueued(
127
236
  url: string,
128
237
  segmentIds: string[],
129
238
  version?: string,
239
+ routerId?: string,
240
+ prefetchKey?: ":source",
130
241
  ): string {
131
242
  if (!shouldPrefetch()) return "";
132
- const targetUrl = buildPrefetchUrl(url, segmentIds, version);
243
+ const targetUrl = buildPrefetchUrl(url, segmentIds, version, routerId);
133
244
  if (!targetUrl) return "";
134
- const key = buildPrefetchKey(window.location.href, targetUrl);
135
- if (hasPrefetch(key)) return key;
245
+ const forceSourceScope = prefetchKey === ":source";
246
+ if (!forceSourceScope && isSamePage(url)) {
247
+ return "";
248
+ }
249
+ const sourceHref = window.location.href;
250
+ const rangoState = getRangoState();
251
+ const wildcardKey = buildPrefetchKey(rangoState, targetUrl);
252
+ const sourceKey = buildSourceKey(rangoState, sourceHref, targetUrl);
253
+ const queueKey = forceSourceScope ? sourceKey : wildcardKey;
254
+ if (hasPrefetchHit(forceSourceScope, wildcardKey, sourceKey)) {
255
+ debugLog("[prefetch] queued dedup (key already exists)", {
256
+ url,
257
+ wildcardKey,
258
+ sourceKey,
259
+ forceSourceScope,
260
+ });
261
+ return queueKey;
262
+ }
136
263
  const fetchUrlStr = targetUrl.toString();
137
- enqueuePrefetch(key, (signal) => {
264
+ enqueuePrefetch(queueKey, (signal) => {
138
265
  // Re-check at execution time: a hover-triggered prefetchDirect may
139
266
  // have started or completed this key while the item sat in the queue.
140
- if (hasPrefetch(key)) return Promise.resolve();
141
- return executePrefetchFetch(key, fetchUrlStr, signal).then(() => {});
267
+ if (hasPrefetchHit(forceSourceScope, wildcardKey, sourceKey)) {
268
+ return Promise.resolve();
269
+ }
270
+ if (!forceSourceScope && isSamePage(url)) {
271
+ return Promise.resolve();
272
+ }
273
+ return executePrefetchFetch(
274
+ wildcardKey,
275
+ sourceKey,
276
+ fetchUrlStr,
277
+ forceSourceScope,
278
+ signal,
279
+ ).then(() => {});
142
280
  });
143
- return key;
281
+ return queueKey;
144
282
  }
@@ -108,10 +108,29 @@ export function enqueuePrefetch(
108
108
  scheduleDrain();
109
109
  }
110
110
 
111
+ /**
112
+ * Normalize a URL-like string for keep-alive matching: parse against a
113
+ * placeholder origin and strip internal `_rsc_*` query params. Returns
114
+ * `pathname + search` so comparisons ignore hash and the internal params
115
+ * that prefetch appends to targets (`_rsc_partial`, `_rsc_segments`,
116
+ * `_rsc_v`, `_rsc_rid`, `_rsc_stale`).
117
+ */
118
+ function normalizeForMatch(urlish: string): string {
119
+ try {
120
+ const u = new URL(urlish, "http://placeholder");
121
+ for (const k of [...u.searchParams.keys()]) {
122
+ if (k.startsWith("_rsc_")) u.searchParams.delete(k);
123
+ }
124
+ return u.pathname + u.search;
125
+ } catch {
126
+ return urlish;
127
+ }
128
+ }
129
+
111
130
  /**
112
131
  * Cancel queued prefetches and abort in-flight ones that don't match
113
132
  * the current navigation target. If `keepUrl` is provided, the
114
- * executing prefetch whose key contains that URL is kept alive so
133
+ * executing prefetch whose key targets that URL is kept alive so
115
134
  * navigation can reuse its response via consumeInflightPrefetch.
116
135
  *
117
136
  * Called when a navigation starts via the NavigationProvider's
@@ -124,11 +143,23 @@ export function cancelAllPrefetches(keepUrl?: string | null): void {
124
143
  drainGeneration++;
125
144
 
126
145
  // Abort in-flight prefetches that aren't for the navigation target.
127
- // Keys use format "sourceHref\0targetPathname+search" — match the
128
- // target portion (after \0) against keepUrl.
146
+ // Key shapes (see prefetch/cache.ts buildPrefetchKey):
147
+ // wildcard: "rangoState\0/target?..."
148
+ // source-scoped: "rangoState\0sourceHref\0/target?..."
149
+ // The target portion is always the final \0-delimited segment and
150
+ // includes internal `_rsc_*` params (from buildPrefetchUrl); keepUrl
151
+ // comes from NavigationProvider's pendingUrl which is the bare
152
+ // navigation target. Normalize both sides before comparing.
153
+ const normalizedKeep = keepUrl ? normalizeForMatch(keepUrl) : null;
129
154
  for (const [key, ac] of abortControllers) {
130
- const target = key.split("\0")[1];
131
- if (keepUrl && target && keepUrl.startsWith(target)) continue;
155
+ const lastNul = key.lastIndexOf("\0");
156
+ const target = lastNul >= 0 ? key.substring(lastNul + 1) : "";
157
+ if (
158
+ normalizedKeep &&
159
+ target &&
160
+ normalizeForMatch(target) === normalizedKeep
161
+ )
162
+ continue;
132
163
  ac.abort();
133
164
  abortControllers.delete(key);
134
165
  if (executing.delete(key)) {
@@ -5,6 +5,7 @@ import React, {
5
5
  useCallback,
6
6
  useContext,
7
7
  useEffect,
8
+ useMemo,
8
9
  useRef,
9
10
  type ForwardRefExoticComponent,
10
11
  type RefAttributes,
@@ -32,6 +33,7 @@ export type LinkState =
32
33
  | StateOrGetter<Record<string, unknown>>;
33
34
 
34
35
  import { prefetchDirect, prefetchQueued } from "../prefetch/fetch.js";
36
+ import { getAppVersion } from "../app-version.js";
35
37
  import {
36
38
  observeForPrefetch,
37
39
  unobserveForPrefetch,
@@ -95,6 +97,31 @@ export interface LinkProps extends Omit<
95
97
  * @default "none"
96
98
  */
97
99
  prefetch?: PrefetchStrategy;
100
+ /**
101
+ * Opt-in override for the prefetch cache scope.
102
+ *
103
+ * The default cache is source-agnostic: one shared entry per target,
104
+ * keyed on Rango state + target URL. This is correct for routes whose
105
+ * response shape doesn't depend on where the user navigates from.
106
+ *
107
+ * Set `":source"` when this Link's response would legitimately differ
108
+ * based on the source page — typically when the target route (or one
109
+ * of its layouts) uses a custom `revalidate()` handler that reads
110
+ * `currentUrl` / `currentParams`, and the wildcard entry would
111
+ * therefore serve the wrong diff to a navigation from a different
112
+ * source.
113
+ *
114
+ * Intercept responses are auto-scoped to the source via a server-side
115
+ * tag, so `":source"` is only needed for custom revalidation logic.
116
+ *
117
+ * @example
118
+ * ```tsx
119
+ * // Route uses a `revalidate()` that branches on currentUrl — opt in
120
+ * // so prefetches don't bleed across source pages.
121
+ * <Link to="/dashboard" prefetch="hover" prefetchKey=":source" />
122
+ * ```
123
+ */
124
+ prefetchKey?: ":source";
98
125
  /**
99
126
  * State to pass to history.pushState/replaceState.
100
127
  * Accessible via useLocationState() hook.
@@ -182,6 +209,7 @@ export const Link: ForwardRefExoticComponent<
182
209
  reloadDocument = false,
183
210
  revalidate,
184
211
  prefetch = "none",
212
+ prefetchKey,
185
213
  state,
186
214
  children,
187
215
  onClick,
@@ -192,6 +220,16 @@ export const Link: ForwardRefExoticComponent<
192
220
  const ctx = useContext(NavigationStoreContext);
193
221
  const isExternal = isExternalUrl(to);
194
222
 
223
+ // Auto-prefix with basename for app-local paths.
224
+ // Skip if external, already prefixed, or not a root-relative path.
225
+ const resolvedTo = useMemo(() => {
226
+ if (isExternal) return to;
227
+ const bn = ctx?.basename;
228
+ if (!bn || !to.startsWith("/") || to.startsWith(bn + "/") || to === bn)
229
+ return to;
230
+ return to === "/" ? bn : bn + to;
231
+ }, [to, isExternal, ctx?.basename]);
232
+
195
233
  // Resolve adaptive: viewport on touch devices, hover on pointer devices
196
234
  const resolvedStrategy =
197
235
  prefetch === "adaptive" ? (isTouchDevice ? "viewport" : "hover") : prefetch;
@@ -273,9 +311,23 @@ export const Link: ForwardRefExoticComponent<
273
311
  resolvedState = currentState;
274
312
  }
275
313
 
276
- ctx.navigate(to, { replace, scroll, state: resolvedState, revalidate });
314
+ ctx.navigate(resolvedTo, {
315
+ replace,
316
+ scroll,
317
+ state: resolvedState,
318
+ revalidate,
319
+ });
277
320
  },
278
- [to, isExternal, reloadDocument, replace, scroll, revalidate, ctx, onClick],
321
+ [
322
+ resolvedTo,
323
+ isExternal,
324
+ reloadDocument,
325
+ replace,
326
+ scroll,
327
+ revalidate,
328
+ ctx,
329
+ onClick,
330
+ ],
279
331
  );
280
332
 
281
333
  const handleMouseEnter = useCallback(() => {
@@ -289,9 +341,15 @@ export const Link: ForwardRefExoticComponent<
289
341
  // prefetch — prefetchDirect bypasses the queue, and hasPrefetch
290
342
  // deduplicates if the viewport prefetch already completed.
291
343
  const segmentState = ctx.store.getSegmentState();
292
- prefetchDirect(to, segmentState.currentSegmentIds, ctx.version);
344
+ prefetchDirect(
345
+ resolvedTo,
346
+ segmentState.currentSegmentIds,
347
+ getAppVersion(),
348
+ ctx.store.getRouterId?.(),
349
+ prefetchKey,
350
+ );
293
351
  }
294
- }, [resolvedStrategy, to, isExternal, ctx]);
352
+ }, [resolvedStrategy, resolvedTo, isExternal, ctx, prefetchKey]);
295
353
 
296
354
  // Viewport/render prefetch: waits for idle before starting,
297
355
  // uses concurrency-limited queue to avoid flooding.
@@ -308,7 +366,13 @@ export const Link: ForwardRefExoticComponent<
308
366
  const triggerPrefetch = () => {
309
367
  if (cancelled) return;
310
368
  const segmentState = ctx.store.getSegmentState();
311
- prefetchQueued(to, segmentState.currentSegmentIds, ctx.version);
369
+ prefetchQueued(
370
+ resolvedTo,
371
+ segmentState.currentSegmentIds,
372
+ getAppVersion(),
373
+ ctx.store.getRouterId?.(),
374
+ prefetchKey,
375
+ );
312
376
  };
313
377
 
314
378
  // Schedule prefetch only when the app is idle (no navigation/streaming).
@@ -347,12 +411,12 @@ export const Link: ForwardRefExoticComponent<
347
411
  unobserveForPrefetch(observedElement);
348
412
  }
349
413
  };
350
- }, [resolvedStrategy, to, isExternal, ctx]);
414
+ }, [resolvedStrategy, resolvedTo, isExternal, ctx, prefetchKey]);
351
415
 
352
416
  return (
353
417
  <a
354
418
  ref={setRef}
355
- href={to}
419
+ href={resolvedTo}
356
420
  onClick={handleClick}
357
421
  onMouseEnter={handleMouseEnter}
358
422
  data-link-component
@@ -362,7 +426,7 @@ export const Link: ForwardRefExoticComponent<
362
426
  data-revalidate={revalidate === false ? "false" : undefined}
363
427
  {...props}
364
428
  >
365
- <LinkContext.Provider value={to}>{children}</LinkContext.Provider>
429
+ <LinkContext.Provider value={resolvedTo}>{children}</LinkContext.Provider>
366
430
  </a>
367
431
  );
368
432
  });