@rangojs/router 0.0.0-experimental.ea6d5eec → 0.0.0-experimental.ede38110

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 (142) hide show
  1. package/README.md +76 -18
  2. package/dist/bin/rango.js +130 -47
  3. package/dist/vite/index.js +719 -240
  4. package/package.json +3 -3
  5. package/skills/cache-guide/SKILL.md +32 -0
  6. package/skills/caching/SKILL.md +8 -0
  7. package/skills/handler-use/SKILL.md +362 -0
  8. package/skills/intercept/SKILL.md +20 -0
  9. package/skills/layout/SKILL.md +22 -0
  10. package/skills/links/SKILL.md +3 -1
  11. package/skills/loader/SKILL.md +53 -43
  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 +764 -0
  15. package/skills/parallel/SKILL.md +185 -0
  16. package/skills/prerender/SKILL.md +110 -68
  17. package/skills/rango/SKILL.md +24 -22
  18. package/skills/route/SKILL.md +55 -0
  19. package/skills/router-setup/SKILL.md +87 -2
  20. package/skills/typesafety/SKILL.md +10 -0
  21. package/src/__internal.ts +1 -1
  22. package/src/browser/app-version.ts +14 -0
  23. package/src/browser/event-controller.ts +5 -0
  24. package/src/browser/navigation-bridge.ts +37 -5
  25. package/src/browser/navigation-client.ts +107 -75
  26. package/src/browser/navigation-store.ts +43 -8
  27. package/src/browser/partial-update.ts +51 -6
  28. package/src/browser/prefetch/cache.ts +22 -12
  29. package/src/browser/prefetch/fetch.ts +81 -20
  30. package/src/browser/prefetch/queue.ts +61 -29
  31. package/src/browser/prefetch/resource-ready.ts +77 -0
  32. package/src/browser/react/Link.tsx +67 -8
  33. package/src/browser/react/NavigationProvider.tsx +13 -4
  34. package/src/browser/react/context.ts +7 -2
  35. package/src/browser/react/use-handle.ts +9 -58
  36. package/src/browser/react/use-navigation.ts +11 -10
  37. package/src/browser/react/use-router.ts +21 -8
  38. package/src/browser/rsc-router.tsx +45 -3
  39. package/src/browser/scroll-restoration.ts +10 -8
  40. package/src/browser/segment-reconciler.ts +36 -9
  41. package/src/browser/server-action-bridge.ts +8 -6
  42. package/src/browser/types.ts +27 -5
  43. package/src/build/generate-manifest.ts +6 -6
  44. package/src/build/generate-route-types.ts +3 -0
  45. package/src/build/route-trie.ts +50 -24
  46. package/src/build/route-types/include-resolution.ts +8 -1
  47. package/src/build/route-types/router-processing.ts +211 -72
  48. package/src/build/route-types/scan-filter.ts +8 -1
  49. package/src/cache/cache-runtime.ts +15 -11
  50. package/src/cache/cache-scope.ts +46 -5
  51. package/src/cache/document-cache.ts +17 -7
  52. package/src/cache/taint.ts +55 -0
  53. package/src/client.tsx +84 -230
  54. package/src/context-var.ts +72 -2
  55. package/src/debug.ts +2 -2
  56. package/src/handle.ts +40 -0
  57. package/src/index.rsc.ts +3 -1
  58. package/src/index.ts +46 -6
  59. package/src/prerender/store.ts +5 -4
  60. package/src/prerender.ts +138 -77
  61. package/src/reverse.ts +25 -1
  62. package/src/route-definition/dsl-helpers.ts +224 -37
  63. package/src/route-definition/helpers-types.ts +67 -19
  64. package/src/route-definition/index.ts +3 -0
  65. package/src/route-definition/redirect.ts +9 -1
  66. package/src/route-definition/resolve-handler-use.ts +149 -0
  67. package/src/route-types.ts +18 -0
  68. package/src/router/content-negotiation.ts +100 -1
  69. package/src/router/handler-context.ts +82 -23
  70. package/src/router/intercept-resolution.ts +9 -4
  71. package/src/router/lazy-includes.ts +7 -6
  72. package/src/router/loader-resolution.ts +156 -21
  73. package/src/router/logging.ts +1 -1
  74. package/src/router/manifest.ts +28 -15
  75. package/src/router/match-api.ts +124 -189
  76. package/src/router/match-middleware/background-revalidation.ts +30 -2
  77. package/src/router/match-middleware/cache-lookup.ts +94 -17
  78. package/src/router/match-middleware/cache-store.ts +53 -10
  79. package/src/router/match-middleware/intercept-resolution.ts +9 -7
  80. package/src/router/match-middleware/segment-resolution.ts +60 -5
  81. package/src/router/match-result.ts +104 -10
  82. package/src/router/metrics.ts +6 -1
  83. package/src/router/middleware-types.ts +6 -8
  84. package/src/router/middleware.ts +2 -5
  85. package/src/router/navigation-snapshot.ts +182 -0
  86. package/src/router/prerender-match.ts +110 -10
  87. package/src/router/preview-match.ts +30 -102
  88. package/src/router/request-classification.ts +310 -0
  89. package/src/router/route-snapshot.ts +245 -0
  90. package/src/router/router-context.ts +1 -0
  91. package/src/router/router-interfaces.ts +36 -4
  92. package/src/router/router-options.ts +37 -11
  93. package/src/router/segment-resolution/fresh.ts +198 -20
  94. package/src/router/segment-resolution/helpers.ts +29 -24
  95. package/src/router/segment-resolution/loader-cache.ts +1 -0
  96. package/src/router/segment-resolution/revalidation.ts +433 -296
  97. package/src/router/types.ts +1 -0
  98. package/src/router.ts +55 -6
  99. package/src/rsc/handler.ts +472 -372
  100. package/src/rsc/loader-fetch.ts +23 -3
  101. package/src/rsc/manifest-init.ts +5 -1
  102. package/src/rsc/progressive-enhancement.ts +14 -2
  103. package/src/rsc/rsc-rendering.ts +10 -1
  104. package/src/rsc/server-action.ts +8 -0
  105. package/src/rsc/ssr-setup.ts +2 -2
  106. package/src/rsc/types.ts +9 -1
  107. package/src/segment-content-promise.ts +67 -0
  108. package/src/segment-loader-promise.ts +122 -0
  109. package/src/segment-system.tsx +109 -23
  110. package/src/server/context.ts +166 -17
  111. package/src/server/handle-store.ts +19 -0
  112. package/src/server/loader-registry.ts +9 -8
  113. package/src/server/request-context.ts +175 -15
  114. package/src/ssr/index.tsx +4 -0
  115. package/src/static-handler.ts +18 -6
  116. package/src/types/cache-types.ts +4 -4
  117. package/src/types/handler-context.ts +137 -33
  118. package/src/types/loader-types.ts +36 -9
  119. package/src/types/route-entry.ts +12 -1
  120. package/src/types/segments.ts +2 -0
  121. package/src/urls/include-helper.ts +24 -14
  122. package/src/urls/path-helper-types.ts +39 -6
  123. package/src/urls/path-helper.ts +48 -13
  124. package/src/urls/pattern-types.ts +12 -0
  125. package/src/urls/response-types.ts +16 -6
  126. package/src/use-loader.tsx +77 -5
  127. package/src/vite/discovery/bundle-postprocess.ts +30 -33
  128. package/src/vite/discovery/discover-routers.ts +5 -1
  129. package/src/vite/discovery/prerender-collection.ts +128 -74
  130. package/src/vite/discovery/state.ts +13 -4
  131. package/src/vite/index.ts +4 -0
  132. package/src/vite/plugin-types.ts +60 -5
  133. package/src/vite/plugins/expose-id-utils.ts +12 -0
  134. package/src/vite/plugins/expose-ids/handler-transform.ts +30 -0
  135. package/src/vite/plugins/expose-internal-ids.ts +257 -40
  136. package/src/vite/plugins/performance-tracks.ts +88 -0
  137. package/src/vite/plugins/refresh-cmd.ts +88 -26
  138. package/src/vite/rango.ts +19 -2
  139. package/src/vite/router-discovery.ts +178 -37
  140. package/src/vite/utils/banner.ts +3 -3
  141. package/src/vite/utils/prerender-utils.ts +37 -5
  142. package/src/vite/utils/shared-utils.ts +3 -2
@@ -28,9 +28,15 @@ const DEFAULT_ACTION_STATE: TrackedActionState = {
28
28
  // Maximum number of history entries to cache (URLs visited)
29
29
  const HISTORY_CACHE_SIZE = 20;
30
30
 
31
- // Cache entry: [url-key, segments, stale, handleData?]
31
+ // Cache entry: [url-key, segments, stale, handleData?, routerId?]
32
32
  // stale=true means the data may be outdated and should be revalidated on access
33
- type HistoryCacheEntry = [string, ResolvedSegment[], boolean, HandleData?];
33
+ type HistoryCacheEntry = [
34
+ string,
35
+ ResolvedSegment[],
36
+ boolean,
37
+ HandleData?,
38
+ string?,
39
+ ];
34
40
 
35
41
  /**
36
42
  * Shallow clone handleData to avoid reference sharing between cache entries.
@@ -258,6 +264,11 @@ export function createNavigationStore(
258
264
  // Used to maintain intercept context during action revalidation
259
265
  let interceptSourceUrl: string | null = null;
260
266
 
267
+ // Router identity - tracks which router is currently active.
268
+ // When this changes on a partial response, the client forces a full
269
+ // tree replacement instead of reconciling with stale segments.
270
+ let currentRouterId: string | undefined;
271
+
261
272
  // Action state tracking (for useAction hook)
262
273
  // Maps action function ID to its tracked state
263
274
  const actionStates = new Map<string, TrackedActionState>();
@@ -571,10 +582,17 @@ export function createNavigationStore(
571
582
  segments,
572
583
  false,
573
584
  clonedHandleData,
585
+ currentRouterId,
574
586
  ];
575
587
  } else {
576
588
  // Add new entry at the end (not stale)
577
- historyCache.push([historyKey, segments, false, clonedHandleData]);
589
+ historyCache.push([
590
+ historyKey,
591
+ segments,
592
+ false,
593
+ clonedHandleData,
594
+ currentRouterId,
595
+ ]);
578
596
  // Remove oldest entries if over limit
579
597
  while (historyCache.length > cacheSize) {
580
598
  historyCache.shift();
@@ -586,14 +604,22 @@ export function createNavigationStore(
586
604
  * Get cached segments for a history entry
587
605
  * Returns { segments, stale, handleData } or undefined if not cached
588
606
  */
589
- getCachedSegments(
590
- historyKey: string,
591
- ):
592
- | { segments: ResolvedSegment[]; stale: boolean; handleData?: HandleData }
607
+ getCachedSegments(historyKey: string):
608
+ | {
609
+ segments: ResolvedSegment[];
610
+ stale: boolean;
611
+ handleData?: HandleData;
612
+ routerId?: string;
613
+ }
593
614
  | undefined {
594
615
  const entry = historyCache.find(([key]) => key === historyKey);
595
616
  if (!entry) return undefined;
596
- return { segments: entry[1], stale: entry[2], handleData: entry[3] };
617
+ return {
618
+ segments: entry[1],
619
+ stale: entry[2],
620
+ handleData: entry[3],
621
+ routerId: entry[4],
622
+ };
597
623
  },
598
624
 
599
625
  /**
@@ -621,6 +647,7 @@ export function createNavigationStore(
621
647
  entry[1],
622
648
  entry[2],
623
649
  clonedHandleData,
650
+ entry[4], // preserve routerId
624
651
  ];
625
652
  }
626
653
  },
@@ -687,6 +714,14 @@ export function createNavigationStore(
687
714
  interceptSourceUrl = url;
688
715
  },
689
716
 
717
+ getRouterId(): string | undefined {
718
+ return currentRouterId;
719
+ },
720
+
721
+ setRouterId(id: string): void {
722
+ currentRouterId = id;
723
+ },
724
+
690
725
  // ========================================================================
691
726
  // UI Update Notifications
692
727
  // ========================================================================
@@ -39,8 +39,8 @@ export interface PartialUpdateConfig {
39
39
  segments: ResolvedSegment[],
40
40
  options?: RenderSegmentsOptions,
41
41
  ) => Promise<ReactNode> | ReactNode;
42
- /** RSC version received from server (from initial payload metadata) */
43
- version?: string;
42
+ /** RSC version getter returns the current version (may change after HMR) */
43
+ getVersion?: () => string | undefined;
44
44
  }
45
45
 
46
46
  /**
@@ -104,7 +104,13 @@ export type PartialUpdater = (
104
104
  export function createPartialUpdater(
105
105
  config: PartialUpdateConfig,
106
106
  ): PartialUpdater {
107
- const { store, client, onUpdate, renderSegments, version } = config;
107
+ const {
108
+ store,
109
+ client,
110
+ onUpdate,
111
+ renderSegments,
112
+ getVersion = () => undefined,
113
+ } = config;
108
114
 
109
115
  /**
110
116
  * Get current page's cached segments as an array
@@ -161,9 +167,16 @@ export function createPartialUpdater(
161
167
  segments = segmentIds ?? segmentState.currentSegmentIds;
162
168
  }
163
169
 
164
- // For intercept revalidation, use the intercept source URL as previousUrl
170
+ // For intercept revalidation, use the intercept source URL as previousUrl.
171
+ // For leave-intercept, tx.currentUrl captures window.location.href at tx
172
+ // creation, which on popstate is already the destination URL and would
173
+ // tell the server "from == to". segmentState.currentUrl still points at
174
+ // the URL the cached segments render (the intercept URL), which is the
175
+ // correct "from" for the server's diff computation.
165
176
  const previousUrl =
166
- interceptSourceUrl || tx.currentUrl || segmentState.currentUrl;
177
+ mode.type === "leave-intercept"
178
+ ? segmentState.currentUrl || tx.currentUrl
179
+ : interceptSourceUrl || tx.currentUrl || segmentState.currentUrl;
167
180
 
168
181
  debugLog(`\n[Browser] >>> NAVIGATION`);
169
182
  debugLog(`[Browser] From: ${previousUrl}`);
@@ -182,6 +195,11 @@ export function createPartialUpdater(
182
195
  targetCache && targetCache.length > 0
183
196
  ? targetCache
184
197
  : getCurrentCachedSegments();
198
+ const cachedSegsSource =
199
+ targetCache && targetCache.length > 0 ? "history-cache" : "current-page";
200
+ debugLog(
201
+ `[Browser] cachedSegs source: ${cachedSegsSource} (${cachedSegs.length} segments: ${cachedSegs.map((s) => s.id).join(", ")})`,
202
+ );
185
203
 
186
204
  // Fetch partial payload (no abort signal - RSC doesn't support it well)
187
205
  let fetchResult: Awaited<ReturnType<NavigationClient["fetchPartial"]>>;
@@ -193,7 +211,8 @@ export function createPartialUpdater(
193
211
  // (action redirect sends empty segments for a fresh render).
194
212
  staleRevalidation:
195
213
  mode.type === "stale-revalidation" || segments.length === 0,
196
- version,
214
+ version: getVersion(),
215
+ routerId: store.getRouterId?.(),
197
216
  });
198
217
  // Mark navigation as streaming (response received, now parsing RSC).
199
218
  // Called after fetchPartial so pendingUrl stays set during the network wait,
@@ -206,6 +225,21 @@ export function createPartialUpdater(
206
225
  streamingToken.end();
207
226
  });
208
227
 
228
+ // Detect app switch: if routerId changed, the navigation crossed into
229
+ // a different router (e.g., via host router path mount). Downgrade
230
+ // partial to full so the entire tree is replaced without reconciliation
231
+ // against stale segments from the previous app.
232
+ if (payload.metadata?.routerId) {
233
+ const prevRouterId = store.getRouterId?.();
234
+ if (prevRouterId && prevRouterId !== payload.metadata.routerId) {
235
+ debugLog(
236
+ `[Browser] App switch detected (${prevRouterId} → ${payload.metadata.routerId}), forcing full update`,
237
+ );
238
+ payload.metadata.isPartial = false;
239
+ }
240
+ store.setRouterId?.(payload.metadata.routerId);
241
+ }
242
+
209
243
  // Handle server-side redirect with state
210
244
  if (payload.metadata?.redirect) {
211
245
  if (signal?.aborted) {
@@ -259,6 +293,17 @@ export function createPartialUpdater(
259
293
  existingSegments,
260
294
  );
261
295
 
296
+ // tx.commit() cached the source page's handleData because
297
+ // eventController hasn't been updated yet. Overwrite with the
298
+ // correct cached handleData to prevent cache corruption on
299
+ // subsequent navigations to this same URL.
300
+ if (mode.targetCacheHandleData) {
301
+ store.updateCacheHandleData(
302
+ store.getHistoryKey(),
303
+ mode.targetCacheHandleData,
304
+ );
305
+ }
306
+
262
307
  // Include cachedHandleData in metadata so NavigationProvider can restore
263
308
  // breadcrumbs and other handle data from cache.
264
309
  // Remove `handles` from metadata to prevent NavigationProvider from
@@ -1,14 +1,14 @@
1
1
  /**
2
2
  * Prefetch Cache
3
3
  *
4
- * In-memory cache storing prefetch Response objects for instant cache hits
4
+ * In-memory cache storing prefetched Response objects for instant cache hits
5
5
  * on subsequent navigation. Cache key is source-dependent (includes the
6
6
  * current page URL) because the server's diff-based response depends on
7
7
  * where the user navigates from.
8
8
  *
9
- * Also tracks in-flight prefetch promises so navigation can reuse a
10
- * prefetch that is still downloading rather than starting a duplicate
11
- * request. See consumeInflightPrefetch().
9
+ * Also tracks in-flight prefetch promises. Each promise resolves to the
10
+ * navigation branch of a tee'd Response, allowing navigation to adopt a
11
+ * still-downloading prefetch without reparsing or buffering the body.
12
12
  *
13
13
  * Replaces the previous browser HTTP cache approach which was unreliable
14
14
  * due to response draining race conditions and browser inconsistencies.
@@ -61,13 +61,23 @@ const inflightPromises = new Map<string, Promise<Response | null>>();
61
61
  let generation = 0;
62
62
 
63
63
  /**
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).
64
+ * Build a cache key for prefetched responses.
65
+ *
66
+ * By default the key includes the source page href so the same target
67
+ * prefetched from different pages gets separate entries (the server's
68
+ * diff response depends on the source page context).
69
+ *
70
+ * When `prefetchKey` is provided, the source portion is replaced with
71
+ * a `*` sentinel so all custom-keyed entries share one cache slot per
72
+ * target — enabling source-agnostic cache reuse.
68
73
  */
69
- export function buildPrefetchKey(sourceHref: string, targetUrl: URL): string {
70
- return sourceHref + "\0" + targetUrl.pathname + targetUrl.search;
74
+ export function buildPrefetchKey(
75
+ sourceHref: string,
76
+ targetUrl: URL,
77
+ prefetchKey?: string | ((from: string) => string),
78
+ ): string {
79
+ const source = prefetchKey != null ? "*" : sourceHref;
80
+ return source + "\0" + targetUrl.pathname + targetUrl.search;
71
81
  }
72
82
 
73
83
  /**
@@ -130,8 +140,8 @@ export function consumeInflightPrefetch(
130
140
 
131
141
  /**
132
142
  * Store a prefetch response in the in-memory cache.
133
- * The response body must be fully buffered (e.g. via arrayBuffer()) before
134
- * storing, so the cached Response is self-contained and network-independent.
143
+ * The response should be a clone() of the original so the caller can
144
+ * still consume the body. The clone's body streams independently.
135
145
  *
136
146
  * Skips storage if the generation has changed since the fetch started
137
147
  * (a server action invalidated the cache mid-flight).
@@ -23,6 +23,24 @@ import {
23
23
  import { getRangoState } from "../rango-state.js";
24
24
  import { enqueuePrefetch } from "./queue.js";
25
25
  import { shouldPrefetch } from "./policy.js";
26
+ import { debugLog } from "../logging.js";
27
+
28
+ /**
29
+ * Check if a URL resolves to the current page (same pathname + search).
30
+ * Used to prevent same-page prefetching with prefetchKey, which would
31
+ * produce a trivial diff that corrupts the wildcard cache.
32
+ */
33
+ function isSamePage(url: string): boolean {
34
+ try {
35
+ const target = new URL(url, window.location.origin);
36
+ return (
37
+ target.pathname + target.search ===
38
+ window.location.pathname + window.location.search
39
+ );
40
+ } catch {
41
+ return false;
42
+ }
43
+ }
26
44
 
27
45
  /**
28
46
  * Build an RSC partial URL for prefetching.
@@ -34,6 +52,7 @@ function buildPrefetchUrl(
34
52
  url: string,
35
53
  segmentIds: string[],
36
54
  version?: string,
55
+ routerId?: string,
37
56
  ): URL | null {
38
57
  let targetUrl: URL;
39
58
  try {
@@ -51,14 +70,17 @@ function buildPrefetchUrl(
51
70
  if (version) {
52
71
  targetUrl.searchParams.set("_rsc_v", version);
53
72
  }
73
+ if (routerId) {
74
+ targetUrl.searchParams.set("_rsc_rid", routerId);
75
+ }
54
76
  return targetUrl;
55
77
  }
56
78
 
57
79
  /**
58
- * Core prefetch fetch logic. Fetches the response, fully buffers the body,
59
- * and stores it in the in-memory cache. The returned Promise resolves to
60
- * the buffered Response (or null on failure) so navigation can reuse
61
- * in-flight prefetches via consumeInflightPrefetch().
80
+ * Core prefetch fetch logic. Fetches the response, tees the body, and stores
81
+ * one branch in the in-memory cache. The returned Promise resolves to the
82
+ * sibling navigation branch (or null on failure) so navigation can safely
83
+ * reuse an in-flight prefetch via consumeInflightPrefetch().
62
84
  */
63
85
  function executePrefetchFetch(
64
86
  key: string,
@@ -77,20 +99,19 @@ function executePrefetchFetch(
77
99
  "X-Rango-Prefetch": "1",
78
100
  },
79
101
  })
80
- .then(async (response) => {
102
+ .then((response) => {
81
103
  if (!response.ok) return null;
82
- // Fully buffer the response body so the cached Response is
83
- // self-contained and doesn't depend on the network connection.
84
- // This eliminates the race condition where the user clicks before
85
- // the response body has been fully downloaded.
86
- const buffer = await response.arrayBuffer();
87
- const cachedResponse = new Response(buffer, {
104
+ // Don't buffer with arrayBuffer() that blocks until the entire
105
+ // body downloads, defeating streaming for slow loaders.
106
+ // Tee the body: one branch for navigation, one for cache storage.
107
+ const [navStream, cacheStream] = response.body!.tee();
108
+ const responseInit = {
88
109
  headers: response.headers,
89
110
  status: response.status,
90
111
  statusText: response.statusText,
91
- });
92
- storePrefetch(key, cachedResponse.clone(), gen);
93
- return cachedResponse;
112
+ };
113
+ storePrefetch(key, new Response(cacheStream, responseInit), gen);
114
+ return new Response(navStream, responseInit);
94
115
  })
95
116
  .catch(() => null)
96
117
  .finally(() => {
@@ -109,13 +130,33 @@ export function prefetchDirect(
109
130
  url: string,
110
131
  segmentIds: string[],
111
132
  version?: string,
133
+ routerId?: string,
134
+ prefetchKey?: string | ((from: string) => string),
112
135
  ): void {
113
136
  if (!shouldPrefetch()) return;
114
137
 
115
- const targetUrl = buildPrefetchUrl(url, segmentIds, version);
138
+ const targetUrl = buildPrefetchUrl(url, segmentIds, version, routerId);
116
139
  if (!targetUrl) return;
117
- const key = buildPrefetchKey(window.location.href, targetUrl);
118
- if (hasPrefetch(key)) return;
140
+ // Skip same-page prefetch with prefetchKey — a same-page diff is trivial
141
+ // and would corrupt the wildcard cache entry for cross-page navigation.
142
+ if (prefetchKey != null && isSamePage(url)) {
143
+ return;
144
+ }
145
+ const key = buildPrefetchKey(window.location.href, targetUrl, prefetchKey);
146
+ if (hasPrefetch(key)) {
147
+ debugLog("[prefetch] direct dedup (key already exists)", {
148
+ url,
149
+ key,
150
+ prefetchKey: prefetchKey != null ? String(prefetchKey) : undefined,
151
+ });
152
+ return;
153
+ }
154
+ debugLog("[prefetch] direct fetch", {
155
+ url,
156
+ key,
157
+ source: window.location.href,
158
+ prefetchKey: prefetchKey != null ? String(prefetchKey) : undefined,
159
+ });
119
160
  executePrefetchFetch(key, targetUrl.toString());
120
161
  }
121
162
 
@@ -128,17 +169,37 @@ export function prefetchQueued(
128
169
  url: string,
129
170
  segmentIds: string[],
130
171
  version?: string,
172
+ routerId?: string,
173
+ prefetchKey?: string | ((from: string) => string),
131
174
  ): string {
132
175
  if (!shouldPrefetch()) return "";
133
- const targetUrl = buildPrefetchUrl(url, segmentIds, version);
176
+ const targetUrl = buildPrefetchUrl(url, segmentIds, version, routerId);
134
177
  if (!targetUrl) return "";
135
- const key = buildPrefetchKey(window.location.href, targetUrl);
136
- if (hasPrefetch(key)) return key;
178
+ // Skip same-page prefetch with prefetchKey — a same-page diff is trivial
179
+ // and would corrupt the wildcard cache entry for cross-page navigation.
180
+ if (prefetchKey != null && isSamePage(url)) {
181
+ return "";
182
+ }
183
+ const key = buildPrefetchKey(window.location.href, targetUrl, prefetchKey);
184
+ if (hasPrefetch(key)) {
185
+ debugLog("[prefetch] queued dedup (key already exists)", {
186
+ url,
187
+ key,
188
+ prefetchKey: prefetchKey != null ? String(prefetchKey) : undefined,
189
+ });
190
+ return key;
191
+ }
137
192
  const fetchUrlStr = targetUrl.toString();
138
193
  enqueuePrefetch(key, (signal) => {
139
194
  // Re-check at execution time: a hover-triggered prefetchDirect may
140
195
  // have started or completed this key while the item sat in the queue.
141
196
  if (hasPrefetch(key)) return Promise.resolve();
197
+ // By execution time, the user may have navigated to the target page.
198
+ // A same-page prefetch produces a trivial diff that would overwrite
199
+ // the useful cross-page entry in the wildcard cache.
200
+ if (prefetchKey != null && isSamePage(url)) {
201
+ return Promise.resolve();
202
+ }
142
203
  return executePrefetchFetch(key, fetchUrlStr, signal).then(() => {});
143
204
  });
144
205
  return key;
@@ -5,21 +5,19 @@
5
5
  * Hover prefetches bypass this queue — they fire directly for immediate response
6
6
  * to user intent.
7
7
  *
8
- * Draining is deferred to the next animation frame so prefetch network activity
9
- * never blocks paint. This applies to both the initial batch and subsequent
10
- * batches every drain cycle yields to the browser first.
8
+ * Draining waits for an idle main-thread moment and for viewport images to
9
+ * finish loading, so prefetch fetch() calls never compete with critical
10
+ * resources for the browser's connection pool.
11
11
  *
12
12
  * When a navigation starts, queued prefetches are cancelled but executing ones
13
13
  * are left running. Navigation can reuse their in-flight responses via the
14
14
  * prefetch cache's inflight promise map, avoiding duplicate requests.
15
15
  */
16
16
 
17
- const MAX_CONCURRENT = 2;
17
+ import { wait, waitForIdle, waitForViewportImages } from "./resource-ready.js";
18
18
 
19
- const deferToNextPaint: (fn: () => void) => void =
20
- typeof requestAnimationFrame === "function"
21
- ? requestAnimationFrame
22
- : (fn) => setTimeout(fn, 0);
19
+ const MAX_CONCURRENT = 2;
20
+ const IMAGE_WAIT_TIMEOUT = 2000;
23
21
 
24
22
  let active = 0;
25
23
  const queue: Array<{
@@ -28,8 +26,9 @@ const queue: Array<{
28
26
  }> = [];
29
27
  const queued = new Set<string>();
30
28
  const executing = new Set<string>();
31
- let abortController: AbortController | null = null;
29
+ const abortControllers = new Map<string, AbortController>();
32
30
  let drainScheduled = false;
31
+ let drainGeneration = 0;
33
32
 
34
33
  function startExecution(
35
34
  key: string,
@@ -37,8 +36,10 @@ function startExecution(
37
36
  ): void {
38
37
  active++;
39
38
  executing.add(key);
40
- abortController ??= new AbortController();
41
- execute(abortController.signal).finally(() => {
39
+ const ac = new AbortController();
40
+ abortControllers.set(key, ac);
41
+ execute(ac.signal).finally(() => {
42
+ abortControllers.delete(key);
42
43
  // Only decrement if this key wasn't already cleared by cancelAllPrefetches.
43
44
  // Without this guard, cancelled tasks' .finally() would underflow active
44
45
  // below zero, breaking the MAX_CONCURRENT guarantee.
@@ -50,18 +51,32 @@ function startExecution(
50
51
  }
51
52
 
52
53
  /**
53
- * Schedule a drain on the next animation frame.
54
- * Coalesces multiple drain requests into a single rAF callback so
55
- * batch completion doesn't schedule redundant frames.
54
+ * Schedule a drain after the browser is idle and viewport images are loaded.
55
+ * Coalesces multiple drain requests into a single deferred callback so
56
+ * batch completion doesn't schedule redundant waits.
57
+ *
58
+ * The two-step wait ensures prefetch fetch() calls don't compete with
59
+ * images for the browser's connection pool:
60
+ * 1. waitForIdle — yield until the main thread has a quiet moment
61
+ * 2. waitForViewportImages OR 2s timeout — yield until visible images
62
+ * finish loading, but don't let slow/broken images block indefinitely
56
63
  */
57
64
  function scheduleDrain(): void {
58
65
  if (drainScheduled) return;
59
66
  if (active >= MAX_CONCURRENT || queue.length === 0) return;
60
67
  drainScheduled = true;
61
- deferToNextPaint(() => {
62
- drainScheduled = false;
63
- drain();
64
- });
68
+ const gen = drainGeneration;
69
+ waitForIdle()
70
+ .then(() =>
71
+ Promise.race([waitForViewportImages(), wait(IMAGE_WAIT_TIMEOUT)]),
72
+ )
73
+ .then(() => {
74
+ drainScheduled = false;
75
+ // Stale drain: a cancel/abort happened while we were waiting.
76
+ // A fresh scheduleDrain will be called by whatever enqueues next.
77
+ if (gen !== drainGeneration) return;
78
+ if (queue.length > 0) drain();
79
+ });
65
80
  }
66
81
 
67
82
  function drain(): void {
@@ -74,9 +89,10 @@ function drain(): void {
74
89
 
75
90
  /**
76
91
  * Enqueue a prefetch for concurrency-limited execution.
77
- * Execution is always deferred to the next animation frame to avoid
78
- * blocking paint, even when below the concurrency limit.
79
- * Deduplicates by key — items already queued or executing are skipped.
92
+ * Execution is deferred until the browser is idle and viewport images
93
+ * have finished loading, so prefetches never compete with critical
94
+ * resources. Deduplicates by key — items already queued or executing
95
+ * are skipped.
80
96
  *
81
97
  * The executor receives an AbortSignal that is aborted when
82
98
  * cancelAllPrefetches() is called (e.g. on navigation start).
@@ -93,19 +109,32 @@ export function enqueuePrefetch(
93
109
  }
94
110
 
95
111
  /**
96
- * Cancel queued prefetches. Executing prefetches are left running so
97
- * navigation can reuse their in-flight responses (checked via
98
- * consumeInflightPrefetch in the prefetch cache). With MAX_CONCURRENT=2
99
- * and priority: "low", in-flight prefetches don't meaningfully compete
100
- * with navigation fetches under HTTP/2 multiplexing.
112
+ * Cancel queued prefetches and abort in-flight ones that don't match
113
+ * the current navigation target. If `keepUrl` is provided, the
114
+ * executing prefetch whose key contains that URL is kept alive so
115
+ * navigation can reuse its response via consumeInflightPrefetch.
101
116
  *
102
117
  * Called when a navigation starts via the NavigationProvider's
103
118
  * event controller subscription.
104
119
  */
105
- export function cancelAllPrefetches(): void {
120
+ export function cancelAllPrefetches(keepUrl?: string | null): void {
106
121
  queue.length = 0;
107
122
  queued.clear();
108
123
  drainScheduled = false;
124
+ drainGeneration++;
125
+
126
+ // 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.
129
+ for (const [key, ac] of abortControllers) {
130
+ const target = key.split("\0")[1];
131
+ if (keepUrl && target && keepUrl.startsWith(target)) continue;
132
+ ac.abort();
133
+ abortControllers.delete(key);
134
+ if (executing.delete(key)) {
135
+ active--;
136
+ }
137
+ }
109
138
  }
110
139
 
111
140
  /**
@@ -114,8 +143,10 @@ export function cancelAllPrefetches(): void {
114
143
  * in-flight responses would be stale.
115
144
  */
116
145
  export function abortAllPrefetches(): void {
117
- abortController?.abort();
118
- abortController = null;
146
+ for (const ac of abortControllers.values()) {
147
+ ac.abort();
148
+ }
149
+ abortControllers.clear();
119
150
 
120
151
  queue.length = 0;
121
152
  queued.clear();
@@ -125,4 +156,5 @@ export function abortAllPrefetches(): void {
125
156
  executing.clear();
126
157
  active = 0;
127
158
  drainScheduled = false;
159
+ drainGeneration++;
128
160
  }
@@ -0,0 +1,77 @@
1
+ /**
2
+ * Resource Readiness
3
+ *
4
+ * Utilities to defer speculative prefetches until critical resources
5
+ * (viewport images) have finished loading. Prevents prefetch fetch()
6
+ * calls from competing with images for the browser's connection pool.
7
+ */
8
+
9
+ /**
10
+ * Resolve when all in-viewport images have finished loading.
11
+ * Returns immediately if no images are pending.
12
+ *
13
+ * Only checks images that exist at call time — does not observe
14
+ * dynamically added images. For SPA navigations where new images
15
+ * appear after render, call this after the navigation settles.
16
+ */
17
+ export function waitForViewportImages(): Promise<void> {
18
+ if (typeof document === "undefined") return Promise.resolve();
19
+
20
+ const pending = Array.from(document.querySelectorAll("img")).filter((img) => {
21
+ if (img.complete) return false;
22
+ const rect = img.getBoundingClientRect();
23
+ return (
24
+ rect.bottom > 0 &&
25
+ rect.right > 0 &&
26
+ rect.top < window.innerHeight &&
27
+ rect.left < window.innerWidth
28
+ );
29
+ });
30
+
31
+ if (pending.length === 0) return Promise.resolve();
32
+
33
+ return new Promise((resolve) => {
34
+ const settled = new Set<HTMLImageElement>();
35
+
36
+ const settle = (img: HTMLImageElement) => {
37
+ if (settled.has(img)) return;
38
+ settled.add(img);
39
+ if (settled.size >= pending.length) resolve();
40
+ };
41
+
42
+ for (const img of pending) {
43
+ img.addEventListener("load", () => settle(img), { once: true });
44
+ img.addEventListener("error", () => settle(img), { once: true });
45
+ // Re-check: image may have completed between the initial filter
46
+ // and listener attachment. settle() is idempotent per image, so
47
+ // a queued load event firing afterward is harmless.
48
+ if (img.complete) settle(img);
49
+ }
50
+ });
51
+ }
52
+
53
+ /**
54
+ * Resolve after the given number of milliseconds.
55
+ */
56
+ export function wait(ms: number): Promise<void> {
57
+ return new Promise((resolve) => setTimeout(resolve, ms));
58
+ }
59
+
60
+ /**
61
+ * Resolve when the browser has an idle main-thread moment.
62
+ * Uses requestIdleCallback where available, falls back to setTimeout.
63
+ *
64
+ * This is a scheduling hint, not an asset-loaded detector — combine
65
+ * with waitForViewportImages() for full resource readiness.
66
+ */
67
+ export function waitForIdle(timeout = 200): Promise<void> {
68
+ if (typeof window !== "undefined" && "requestIdleCallback" in window) {
69
+ return new Promise((resolve) => {
70
+ window.requestIdleCallback(() => resolve(), { timeout });
71
+ });
72
+ }
73
+
74
+ return new Promise((resolve) => {
75
+ setTimeout(resolve, 0);
76
+ });
77
+ }