@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.
- package/README.md +76 -18
- package/dist/bin/rango.js +130 -47
- package/dist/vite/index.js +719 -240
- package/package.json +3 -3
- package/skills/cache-guide/SKILL.md +32 -0
- package/skills/caching/SKILL.md +8 -0
- package/skills/handler-use/SKILL.md +362 -0
- package/skills/intercept/SKILL.md +20 -0
- package/skills/layout/SKILL.md +22 -0
- package/skills/links/SKILL.md +3 -1
- package/skills/loader/SKILL.md +53 -43
- package/skills/middleware/SKILL.md +34 -3
- package/skills/migrate-nextjs/SKILL.md +560 -0
- package/skills/migrate-react-router/SKILL.md +764 -0
- package/skills/parallel/SKILL.md +185 -0
- package/skills/prerender/SKILL.md +110 -68
- package/skills/rango/SKILL.md +24 -22
- package/skills/route/SKILL.md +55 -0
- package/skills/router-setup/SKILL.md +87 -2
- package/skills/typesafety/SKILL.md +10 -0
- package/src/__internal.ts +1 -1
- package/src/browser/app-version.ts +14 -0
- package/src/browser/event-controller.ts +5 -0
- package/src/browser/navigation-bridge.ts +37 -5
- package/src/browser/navigation-client.ts +107 -75
- package/src/browser/navigation-store.ts +43 -8
- package/src/browser/partial-update.ts +51 -6
- package/src/browser/prefetch/cache.ts +22 -12
- package/src/browser/prefetch/fetch.ts +81 -20
- package/src/browser/prefetch/queue.ts +61 -29
- package/src/browser/prefetch/resource-ready.ts +77 -0
- package/src/browser/react/Link.tsx +67 -8
- package/src/browser/react/NavigationProvider.tsx +13 -4
- package/src/browser/react/context.ts +7 -2
- package/src/browser/react/use-handle.ts +9 -58
- package/src/browser/react/use-navigation.ts +11 -10
- package/src/browser/react/use-router.ts +21 -8
- package/src/browser/rsc-router.tsx +45 -3
- package/src/browser/scroll-restoration.ts +10 -8
- package/src/browser/segment-reconciler.ts +36 -9
- package/src/browser/server-action-bridge.ts +8 -6
- package/src/browser/types.ts +27 -5
- package/src/build/generate-manifest.ts +6 -6
- package/src/build/generate-route-types.ts +3 -0
- package/src/build/route-trie.ts +50 -24
- package/src/build/route-types/include-resolution.ts +8 -1
- package/src/build/route-types/router-processing.ts +211 -72
- package/src/build/route-types/scan-filter.ts +8 -1
- package/src/cache/cache-runtime.ts +15 -11
- package/src/cache/cache-scope.ts +46 -5
- package/src/cache/document-cache.ts +17 -7
- package/src/cache/taint.ts +55 -0
- package/src/client.tsx +84 -230
- package/src/context-var.ts +72 -2
- package/src/debug.ts +2 -2
- package/src/handle.ts +40 -0
- package/src/index.rsc.ts +3 -1
- package/src/index.ts +46 -6
- package/src/prerender/store.ts +5 -4
- package/src/prerender.ts +138 -77
- package/src/reverse.ts +25 -1
- package/src/route-definition/dsl-helpers.ts +224 -37
- package/src/route-definition/helpers-types.ts +67 -19
- package/src/route-definition/index.ts +3 -0
- package/src/route-definition/redirect.ts +9 -1
- package/src/route-definition/resolve-handler-use.ts +149 -0
- package/src/route-types.ts +18 -0
- package/src/router/content-negotiation.ts +100 -1
- package/src/router/handler-context.ts +82 -23
- package/src/router/intercept-resolution.ts +9 -4
- package/src/router/lazy-includes.ts +7 -6
- package/src/router/loader-resolution.ts +156 -21
- package/src/router/logging.ts +1 -1
- package/src/router/manifest.ts +28 -15
- package/src/router/match-api.ts +124 -189
- package/src/router/match-middleware/background-revalidation.ts +30 -2
- package/src/router/match-middleware/cache-lookup.ts +94 -17
- package/src/router/match-middleware/cache-store.ts +53 -10
- package/src/router/match-middleware/intercept-resolution.ts +9 -7
- package/src/router/match-middleware/segment-resolution.ts +60 -5
- package/src/router/match-result.ts +104 -10
- package/src/router/metrics.ts +6 -1
- package/src/router/middleware-types.ts +6 -8
- package/src/router/middleware.ts +2 -5
- package/src/router/navigation-snapshot.ts +182 -0
- package/src/router/prerender-match.ts +110 -10
- package/src/router/preview-match.ts +30 -102
- package/src/router/request-classification.ts +310 -0
- package/src/router/route-snapshot.ts +245 -0
- package/src/router/router-context.ts +1 -0
- package/src/router/router-interfaces.ts +36 -4
- package/src/router/router-options.ts +37 -11
- package/src/router/segment-resolution/fresh.ts +198 -20
- package/src/router/segment-resolution/helpers.ts +29 -24
- package/src/router/segment-resolution/loader-cache.ts +1 -0
- package/src/router/segment-resolution/revalidation.ts +433 -296
- package/src/router/types.ts +1 -0
- package/src/router.ts +55 -6
- package/src/rsc/handler.ts +472 -372
- package/src/rsc/loader-fetch.ts +23 -3
- package/src/rsc/manifest-init.ts +5 -1
- package/src/rsc/progressive-enhancement.ts +14 -2
- package/src/rsc/rsc-rendering.ts +10 -1
- package/src/rsc/server-action.ts +8 -0
- package/src/rsc/ssr-setup.ts +2 -2
- package/src/rsc/types.ts +9 -1
- package/src/segment-content-promise.ts +67 -0
- package/src/segment-loader-promise.ts +122 -0
- package/src/segment-system.tsx +109 -23
- package/src/server/context.ts +166 -17
- package/src/server/handle-store.ts +19 -0
- package/src/server/loader-registry.ts +9 -8
- package/src/server/request-context.ts +175 -15
- package/src/ssr/index.tsx +4 -0
- package/src/static-handler.ts +18 -6
- package/src/types/cache-types.ts +4 -4
- package/src/types/handler-context.ts +137 -33
- package/src/types/loader-types.ts +36 -9
- package/src/types/route-entry.ts +12 -1
- package/src/types/segments.ts +2 -0
- package/src/urls/include-helper.ts +24 -14
- package/src/urls/path-helper-types.ts +39 -6
- package/src/urls/path-helper.ts +48 -13
- package/src/urls/pattern-types.ts +12 -0
- package/src/urls/response-types.ts +16 -6
- package/src/use-loader.tsx +77 -5
- package/src/vite/discovery/bundle-postprocess.ts +30 -33
- package/src/vite/discovery/discover-routers.ts +5 -1
- package/src/vite/discovery/prerender-collection.ts +128 -74
- package/src/vite/discovery/state.ts +13 -4
- package/src/vite/index.ts +4 -0
- package/src/vite/plugin-types.ts +60 -5
- package/src/vite/plugins/expose-id-utils.ts +12 -0
- package/src/vite/plugins/expose-ids/handler-transform.ts +30 -0
- package/src/vite/plugins/expose-internal-ids.ts +257 -40
- package/src/vite/plugins/performance-tracks.ts +88 -0
- package/src/vite/plugins/refresh-cmd.ts +88 -26
- package/src/vite/rango.ts +19 -2
- package/src/vite/router-discovery.ts +178 -37
- package/src/vite/utils/banner.ts +3 -3
- package/src/vite/utils/prerender-utils.ts +37 -5
- 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 = [
|
|
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([
|
|
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
|
-
|
|
591
|
-
|
|
592
|
-
|
|
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 {
|
|
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
|
|
43
|
-
|
|
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 {
|
|
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
|
-
|
|
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
|
|
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
|
|
10
|
-
*
|
|
11
|
-
*
|
|
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
|
|
65
|
-
*
|
|
66
|
-
*
|
|
67
|
-
*
|
|
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(
|
|
70
|
-
|
|
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
|
|
134
|
-
*
|
|
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,
|
|
59
|
-
*
|
|
60
|
-
*
|
|
61
|
-
* in-flight
|
|
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(
|
|
102
|
+
.then((response) => {
|
|
81
103
|
if (!response.ok) return null;
|
|
82
|
-
//
|
|
83
|
-
//
|
|
84
|
-
//
|
|
85
|
-
|
|
86
|
-
const
|
|
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,
|
|
93
|
-
return
|
|
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
|
-
|
|
118
|
-
|
|
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
|
-
|
|
136
|
-
|
|
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
|
|
9
|
-
*
|
|
10
|
-
*
|
|
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
|
-
|
|
17
|
+
import { wait, waitForIdle, waitForViewportImages } from "./resource-ready.js";
|
|
18
18
|
|
|
19
|
-
const
|
|
20
|
-
|
|
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
|
-
|
|
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
|
-
|
|
41
|
-
|
|
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
|
|
54
|
-
* Coalesces multiple drain requests into a single
|
|
55
|
-
* batch completion doesn't schedule redundant
|
|
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
|
-
|
|
62
|
-
|
|
63
|
-
|
|
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
|
|
78
|
-
*
|
|
79
|
-
* Deduplicates by key — items already queued or executing
|
|
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
|
|
97
|
-
* navigation
|
|
98
|
-
*
|
|
99
|
-
*
|
|
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
|
-
|
|
118
|
-
|
|
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
|
+
}
|