@rangojs/router 0.0.0-experimental.32 → 0.0.0-experimental.32f9e280

package/src/browser/prefetch/cache.ts

@@ -1,16 +1,34 @@
 /**
  * Prefetch Cache
  *
- * In-memory cache storing prefetch Response objects for instant cache hits
- * on subsequent navigation. Cache key is source-dependent (includes the
- * current page URL) because the server's diff-based response depends on
- * where the user navigates from.
+ * In-memory cache storing prefetched Response objects for instant cache hits
+ * on subsequent navigation. Two key scopes are in play:
+ * - Wildcard (default): built by `buildPrefetchKey(rangoState, target)` —
+ *   shape `rangoState\0/target?...`. Shared across all source pages and
+ *   invalidated automatically when Rango state bumps (deploy or
+ *   server-action invalidation).
+ * - Source-scoped: built by `buildSourceKey(rangoState, sourceHref, target)`
+ *   — shape `rangoState\0sourceHref\0/target?...`. Embeds the Rango state
+ *   (so rotation invalidates source-scoped entries too) plus the source
+ *   href (so each originating page gets its own slot). Populated when the
+ *   server tags a response with `X-RSC-Prefetch-Scope: source` (intercept
+ *   modals etc.), OR when a Link opts in with `prefetchKey=":source"` — in
+ *   both cases so source-sensitive responses cannot bleed into navigations
+ *   from other pages.
+ *
+ * Also tracks in-flight prefetch promises. Each promise resolves to the
+ * navigation branch of a tee'd Response, allowing navigation to adopt a
+ * still-downloading prefetch without reparsing or buffering the body. A
+ * single promise can be registered under multiple alias keys (see
+ * `setInflightPromiseWithAliases`) so same-source navigations adopt via
+ * their source key while cross-source ones fall through to the wildcard
+ * alias — with consume/clear atomically removing every alias.
  *
  * Replaces the previous browser HTTP cache approach which was unreliable
  * due to response draining race conditions and browser inconsistencies.
  */
 
-import { cancelAllPrefetches } from "./queue.js";
+import { abortAllPrefetches } from "./queue.js";
 import { invalidateRangoState } from "../rango-state.js";
 
 // Default TTL: 5 minutes. Overridden by initPrefetchCache() with
@@ -21,11 +39,19 @@ let cacheTTL = 300_000;
 /**
  * Initialize the prefetch cache with the configured TTL.
  * Called once at app startup with the value from server metadata.
- * A TTL of 0 disables the in-memory cache.
+ * A TTL of 0 disables the in-memory cache and all prefetching.
  */
 export function initPrefetchCache(ttlMs: number): void {
   cacheTTL = ttlMs;
 }
+
+/**
+ * Check if the prefetch cache is disabled (TTL <= 0).
+ * When disabled, no prefetch requests should be issued.
+ */
+export function isPrefetchCacheDisabled(): boolean {
+  return cacheTTL <= 0;
+}
 const MAX_PREFETCH_CACHE_SIZE = 50;
 
 interface PrefetchCacheEntry {
@@ -36,19 +62,78 @@ interface PrefetchCacheEntry {
 const cache = new Map<string, PrefetchCacheEntry>();
 const inflight = new Set<string>();
 
+/**
+ * In-flight promise map. When a prefetch fetch is in progress, its
+ * Promise<Response | null> is stored here so navigation can await
+ * it instead of starting a duplicate request.
+ */
+const inflightPromises = new Map<string, Promise<Response | null>>();
+
+/**
+ * Alias map for in-flight promises registered under multiple keys (see
+ * dual inflight in prefetch/fetch.ts). Records each key's sibling set so
+ * that consuming or clearing any one key atomically removes every alias —
+ * guaranteeing a single consumer for the shared Response stream.
+ */
+const inflightAliases = new Map<string, string[]>();
+
 // Generation counter incremented on each clearPrefetchCache(). Fetches that
 // started before a clear carry a stale generation and must not store their
 // response (the data may be stale due to a server action invalidation).
 let generation = 0;
 
 /**
- * Build a source-dependent cache key.
- * Includes the source page href so the same target prefetched from
- * different pages gets separate entries — the server response varies
- * based on the source page context (diff-based rendering).
+ * Build a cache key by combining a scope prefix with the target URL.
+ *
+ * Low-level primitive — callers that want a specific scope should use
+ * one of:
+ * - Wildcard (source-agnostic): prefix is the Rango state value from
+ *   `getRangoState()`. Shared across all source pages. Invalidated
+ *   automatically when Rango state bumps (deploy or server-action).
+ *   Key shape: `rangoState\0/target?...`.
+ * - Source-scoped: use `buildSourceKey()`. Key shape:
+ *   `rangoState\0sourceHref\0/target?...` — embeds the Rango state so
+ *   rotation invalidates source-scoped entries alongside wildcard ones,
+ *   plus the source page href so the key is unique per originating page.
+ *   Populated either when the server tags a response with
+ *   `X-RSC-Prefetch-Scope: source` (intercept modals, etc.) or when a
+ *   Link opts in via `prefetchKey=":source"`.
+ *
+ * The `_rsc_segments` query param that travels in the target URL means
+ * clients with different mounted segment trees naturally get different
+ * keys — so segment-level diffs remain consistent across both scopes.
+ */
+export function buildPrefetchKey(prefix: string, targetUrl: URL): string {
+  return prefix + "\0" + targetUrl.pathname + targetUrl.search;
+}
+
+/**
+ * Build a source-scoped cache key. Key shape:
+ * `rangoState\0sourceHref\0/target?...`.
+ *
+ * - `rangoState` is included so state rotation invalidates source-scoped
+ *   entries alongside wildcard ones.
+ * - `sourceHref` makes the key unique per originating page.
  */
-export function buildPrefetchKey(sourceHref: string, targetUrl: URL): string {
-  return sourceHref + "\0" + targetUrl.pathname + targetUrl.search;
+export function buildSourceKey(
+  rangoState: string,
+  sourceHref: string,
+  targetUrl: URL,
+): string {
+  return buildPrefetchKey(rangoState + "\0" + sourceHref, targetUrl);
+}
+
+/**
+ * Walk an inflight key plus any sibling aliases registered via
+ * `setInflightPromiseWithAliases`, invoking `fn` for each.
+ */
+function forEachAlias(key: string, fn: (k: string) => void): void {
+  const aliases = inflightAliases.get(key);
+  if (aliases) {
+    for (const k of aliases) fn(k);
+  } else {
+    fn(key);
+  }
 }
 
 /**
@@ -70,6 +155,9 @@ export function hasPrefetch(key: string): boolean {
  * Consume a cached prefetch response. Returns null if not found or expired.
  * One-time consumption: the entry is deleted after retrieval.
  * Returns null when caching is disabled (TTL <= 0).
+ *
+ * Does NOT check in-flight prefetches — use consumeInflightPrefetch()
+ * for that (returns a Promise instead of a Response).
  */
 export function consumePrefetch(key: string): Response | null {
   if (cacheTTL <= 0) return null;
@@ -83,10 +171,39 @@ export function consumePrefetch(key: string): Response | null {
   return entry.response;
 }
 
+/**
+ * Consume an in-flight prefetch promise. Returns null if no prefetch is
+ * in-flight for this key. The returned Promise resolves to the buffered
+ * Response (or null if the fetch failed/was aborted).
+ *
+ * One-time consumption: the promise entry is removed (along with any
+ * sibling aliases registered via `setInflightPromiseWithAliases`) so a
+ * second call on any alias returns null — only one caller can adopt the
+ * shared Response stream. The `inflight` set entry is intentionally
+ * kept so that `hasPrefetch()` continues to return true while the
+ * underlying fetch is still downloading — this prevents
+ * `prefetchDirect()` or other callers from starting a duplicate request
+ * during the handoff window. The inflight flag is cleaned up naturally
+ * by `clearPrefetchInflight()` in the fetch's `.finally()`.
+ */
+export function consumeInflightPrefetch(
+  key: string,
+): Promise<Response | null> | null {
+  const promise = inflightPromises.get(key);
+  if (!promise) return null;
+  // Remove the promise under every alias so a second consumer cannot
+  // adopt the same stream and race on the body. `inflightAliases` is
+  // intentionally preserved — `clearPrefetchInflight()` in the fetch's
+  // `.finally()` still needs it to clear every inflight flag; deleting
+  // here would strand the sibling's flag forever.
+  forEachAlias(key, (k) => inflightPromises.delete(k));
+  return promise;
+}
+
 /**
  * Store a prefetch response in the in-memory cache.
- * The response body must be fully buffered (e.g. via arrayBuffer()) before
- * storing, so the cached Response is self-contained and network-independent.
+ * The response should be a clone() of the original so the caller can
+ * still consume the body. The clone's body streams independently.
  *
  * Skips storage if the generation has changed since the fetch started
  * (a server action invalidated the cache mid-flight).
@@ -128,19 +245,70 @@ export function markPrefetchInflight(key: string): void {
   inflight.add(key);
 }
 
+/**
+ * Store the in-flight Promise for a prefetch so navigation can reuse it.
+ */
+export function setInflightPromise(
+  key: string,
+  promise: Promise<Response | null>,
+): void {
+  inflightPromises.set(key, promise);
+}
+
+/**
+ * Store the same in-flight Promise under multiple keys, recording them
+ * as sibling aliases. Consuming or clearing any one alias atomically
+ * removes every entry, guaranteeing the shared Response stream has a
+ * single consumer even when navigation looks up either key.
+ */
+export function setInflightPromiseWithAliases(
+  keys: string[],
+  promise: Promise<Response | null>,
+): void {
+  for (const k of keys) {
+    inflightPromises.set(k, promise);
+    inflightAliases.set(k, keys);
+  }
+}
+
 export function clearPrefetchInflight(key: string): void {
-  inflight.delete(key);
+  forEachAlias(key, (k) => {
+    inflight.delete(k);
+    inflightPromises.delete(k);
+    inflightAliases.delete(k);
+  });
 }
 
 /**
  * Invalidate all prefetch state. Called when server actions mutate data.
  * Clears the in-memory cache, cancels in-flight prefetches, and rotates
  * the Rango state key so CDN-cached responses are also invalidated.
+ *
+ * Uses abortAllPrefetches (hard cancel) because in-flight responses
+ * may contain stale data after a mutation.
  */
 export function clearPrefetchCache(): void {
   generation++;
   inflight.clear();
+  inflightPromises.clear();
+  inflightAliases.clear();
   cache.clear();
-  cancelAllPrefetches();
+  abortAllPrefetches();
   invalidateRangoState();
 }
+
+/**
+ * Drop all in-memory prefetch state for this tab without rotating rango-state.
+ *
+ * Use for local-only invalidations (e.g. app switch in this tab) where
+ * other tabs should NOT observe a state rotation. Unlike clearPrefetchCache,
+ * does not call invalidateRangoState, so the shared X-Rango-State token
+ * stays intact and siblings in the old app keep their prefetches.
+ */
+export function clearPrefetchCacheLocal(): void {
+  generation++;
+  inflight.clear();
+  inflightPromises.clear();
+  cache.clear();
+  abortAllPrefetches();
+}

package/src/browser/prefetch/fetch.ts

@@ -6,12 +6,17 @@
  * real navigation so the server returns a proper diff. The Response is fully
  * buffered and stored in an in-memory cache for instant consumption on
  * subsequent navigation.
+ *
+ * In-flight promises are tracked in the cache so that navigation can reuse
+ * a prefetch that is still downloading instead of starting a duplicate request.
  */
 
 import {
   buildPrefetchKey,
+  buildSourceKey,
   hasPrefetch,
   markPrefetchInflight,
+  setInflightPromiseWithAliases,
   storePrefetch,
   clearPrefetchInflight,
   currentGeneration,
@@ -19,6 +24,24 @@ import {
 import { getRangoState } from "../rango-state.js";
 import { enqueuePrefetch } from "./queue.js";
 import { shouldPrefetch } from "./policy.js";
+import { debugLog } from "../logging.js";
+
+/**
+ * Check if a URL resolves to the current page (same pathname + search).
+ * Used to prevent same-page prefetching, which produces a trivial diff
+ * that would corrupt the (default wildcard) prefetch cache entry.
+ */
+function isSamePage(url: string): boolean {
+  try {
+    const target = new URL(url, window.location.origin);
+    return (
+      target.pathname + target.search ===
+      window.location.pathname + window.location.search
+    );
+  } catch {
+    return false;
+  }
+}
 
 /**
  * Build an RSC partial URL for prefetching.
@@ -30,6 +53,7 @@ function buildPrefetchUrl(
   url: string,
   segmentIds: string[],
   version?: string,
+  routerId?: string,
 ): URL | null {
   let targetUrl: URL;
   try {
@@ -47,23 +71,46 @@ function buildPrefetchUrl(
   if (version) {
     targetUrl.searchParams.set("_rsc_v", version);
   }
+  if (routerId) {
+    targetUrl.searchParams.set("_rsc_rid", routerId);
+  }
   return targetUrl;
 }
 
 /**
- * Core prefetch fetch logic. Fetches the response, fully buffers the body,
- * and stores it in the in-memory cache. Returns a Promise and accepts an
- * optional AbortSignal for cancellation by the prefetch queue.
+ * Core prefetch fetch logic. Fetches the response, tees the body, and stores
+ * one branch in the in-memory cache. The returned Promise resolves to the
+ * sibling navigation branch (or null on failure) so navigation can safely
+ * reuse an in-flight prefetch via consumeInflightPrefetch().
+ *
+ * Inflight + storage key selection:
+ *
+ * - `forceSourceScope` (Link opted in with `prefetchKey=":source"`): single
+ *   inflight registration under `sourceKey`; response stored under
+ *   `sourceKey`. No wildcard leak is possible.
+ *
+ * - Otherwise: dual inflight registration under both `wildcardKey` and
+ *   `sourceKey` so same-source navigations adopt directly via their own
+ *   source key. Storage key is chosen at response time from the
+ *   `X-RSC-Prefetch-Scope` header — `"source"` → `sourceKey` (intercept
+ *   modals etc.), anything else → `wildcardKey`. Cross-source navigations
+ *   that adopted via `wildcardKey` must bail out in `navigation-client.ts`
+ *   if the adopted response turns out to be source-scoped.
  */
 function executePrefetchFetch(
-  key: string,
+  wildcardKey: string,
+  sourceKey: string,
   fetchUrl: string,
+  forceSourceScope: boolean,
   signal?: AbortSignal,
-): Promise<void> {
+): Promise<Response | null> {
   const gen = currentGeneration();
-  markPrefetchInflight(key);
+  const inflightKeys = forceSourceScope
+    ? [sourceKey]
+    : [wildcardKey, sourceKey];
+  for (const k of inflightKeys) markPrefetchInflight(k);
 
-  return fetch(fetchUrl, {
+  const promise: Promise<Response | null> = fetch(fetchUrl, {
     priority: "low" as RequestPriority,
     signal,
     headers: {
@@ -72,64 +119,164 @@ function executePrefetchFetch(
       "X-Rango-Prefetch": "1",
     },
   })
-    .then(async (response) => {
-      if (!response.ok) return;
-      // Fully buffer the response body so the cached Response is
-      // self-contained and doesn't depend on the network connection.
-      // This eliminates the race condition where the user clicks before
-      // the response body has been fully downloaded.
-      const buffer = await response.arrayBuffer();
-      const cachedResponse = new Response(buffer, {
+    .then((response) => {
+      if (!response.ok) return null;
+      // Don't buffer with arrayBuffer() — that blocks until the entire
+      // body downloads, defeating streaming for slow loaders.
+      // Tee the body: one branch for navigation, one for cache storage.
+      const [navStream, cacheStream] = response.body!.tee();
+      const responseInit = {
         headers: response.headers,
         status: response.status,
         statusText: response.statusText,
-      });
-      storePrefetch(key, cachedResponse, gen);
-    })
-    .catch(() => {
-      // Silently ignore prefetch failures (including abort)
+      };
+      let storageKey: string;
+      if (forceSourceScope) {
+        storageKey = sourceKey;
+      } else {
+        const scope = response.headers.get("x-rsc-prefetch-scope");
+        storageKey = scope === "source" ? sourceKey : wildcardKey;
+      }
+      storePrefetch(storageKey, new Response(cacheStream, responseInit), gen);
+      return new Response(navStream, responseInit);
     })
+    .catch(() => null)
     .finally(() => {
-      clearPrefetchInflight(key);
+      clearPrefetchInflight(inflightKeys[0]!);
     });
+
+  setInflightPromiseWithAliases(inflightKeys, promise);
+  return promise;
+}
+
+/**
+ * Dedup check for prefetch entry presence.
+ *
+ * Forced `:source` must NOT dedupe against a pre-existing wildcard entry —
+ * otherwise the source slot would stay unpopulated and navigation from
+ * this source would fall through to the (potentially wrong) wildcard
+ * response, defeating the opt-out.
+ */
+function hasPrefetchHit(
+  forceSourceScope: boolean,
+  wildcardKey: string,
+  sourceKey: string,
+): boolean {
+  return forceSourceScope
+    ? hasPrefetch(sourceKey)
+    : hasPrefetch(wildcardKey) || hasPrefetch(sourceKey);
 }
 
 /**
  * Prefetch (direct): fetch with low priority and store in in-memory cache.
  * Used by hover strategy -- fires immediately without queueing.
+ *
+ * By default the wildcard key (Rango-state-keyed) is used for inflight
+ * dedup and for responses that are not source-sensitive; source-scoped
+ * storage is automatic when the server emits `X-RSC-Prefetch-Scope: source`.
+ *
+ * Pass `prefetchKey=":source"` to force source-scoped inflight + storage
+ * (e.g. when the target uses a custom `revalidate()` that reads
+ * `currentUrl` and the wildcard slot would serve the wrong diff).
  */
 export function prefetchDirect(
   url: string,
   segmentIds: string[],
   version?: string,
+  routerId?: string,
+  prefetchKey?: ":source",
 ): void {
   if (!shouldPrefetch()) return;
 
-  const targetUrl = buildPrefetchUrl(url, segmentIds, version);
+  const targetUrl = buildPrefetchUrl(url, segmentIds, version, routerId);
   if (!targetUrl) return;
-  const key = buildPrefetchKey(window.location.href, targetUrl);
-  if (hasPrefetch(key)) return;
-  executePrefetchFetch(key, targetUrl.toString());
+  const forceSourceScope = prefetchKey === ":source";
+  // Skip same-page prefetch — a same-page diff is trivial and would corrupt
+  // the wildcard cache entry used for cross-page navigation.
+  // When `:source` is forced the entry is source-scoped (single-aliased to
+  // itself), so it cannot poison any shared slot — allow it.
+  if (!forceSourceScope && isSamePage(url)) {
+    return;
+  }
+  const sourceHref = window.location.href;
+  const rangoState = getRangoState();
+  const wildcardKey = buildPrefetchKey(rangoState, targetUrl);
+  const sourceKey = buildSourceKey(rangoState, sourceHref, targetUrl);
+  if (hasPrefetchHit(forceSourceScope, wildcardKey, sourceKey)) {
+    debugLog("[prefetch] direct dedup (key already exists)", {
+      url,
+      wildcardKey,
+      sourceKey,
+      forceSourceScope,
+    });
+    return;
+  }
+  debugLog("[prefetch] direct fetch", {
+    url,
+    wildcardKey,
+    sourceKey,
+    source: sourceHref,
+    forceSourceScope,
+  });
+  executePrefetchFetch(
+    wildcardKey,
+    sourceKey,
+    targetUrl.toString(),
+    forceSourceScope,
+  );
 }
 
 /**
  * Prefetch (queued): goes through the concurrency-limited queue.
  * Used by viewport/render strategies to avoid flooding the server.
- * Returns the cache key for use in cleanup.
+ * Returns the inflight key (wildcard by default, source-scoped when
+ * `prefetchKey=":source"` is passed).
  */
 export function prefetchQueued(
   url: string,
   segmentIds: string[],
   version?: string,
+  routerId?: string,
+  prefetchKey?: ":source",
 ): string {
   if (!shouldPrefetch()) return "";
-  const targetUrl = buildPrefetchUrl(url, segmentIds, version);
+  const targetUrl = buildPrefetchUrl(url, segmentIds, version, routerId);
   if (!targetUrl) return "";
-  const key = buildPrefetchKey(window.location.href, targetUrl);
-  if (hasPrefetch(key)) return key;
+  const forceSourceScope = prefetchKey === ":source";
+  if (!forceSourceScope && isSamePage(url)) {
+    return "";
+  }
+  const sourceHref = window.location.href;
+  const rangoState = getRangoState();
+  const wildcardKey = buildPrefetchKey(rangoState, targetUrl);
+  const sourceKey = buildSourceKey(rangoState, sourceHref, targetUrl);
+  const queueKey = forceSourceScope ? sourceKey : wildcardKey;
+  if (hasPrefetchHit(forceSourceScope, wildcardKey, sourceKey)) {
+    debugLog("[prefetch] queued dedup (key already exists)", {
+      url,
+      wildcardKey,
+      sourceKey,
+      forceSourceScope,
+    });
+    return queueKey;
+  }
   const fetchUrlStr = targetUrl.toString();
-  enqueuePrefetch(key, (signal) =>
-    executePrefetchFetch(key, fetchUrlStr, signal),
-  );
-  return key;
+  enqueuePrefetch(queueKey, (signal) => {
+    // Re-check at execution time: a hover-triggered prefetchDirect may
+    // have started or completed this key while the item sat in the queue.
+    if (hasPrefetchHit(forceSourceScope, wildcardKey, sourceKey)) {
+      return Promise.resolve();
+    }
+    if (!forceSourceScope && isSamePage(url)) {
+      return Promise.resolve();
+    }
+    return executePrefetchFetch(
+      wildcardKey,
+      sourceKey,
+      fetchUrlStr,
+      forceSourceScope,
+      signal,
+    ).then(() => {});
+  });
+  return queueKey;
 }

package/src/browser/prefetch/policy.ts

@@ -5,6 +5,8 @@
  * Honors browser reduced-data preferences when available.
  */
 
+import { isPrefetchCacheDisabled } from "./cache.js";
+
 type NavigatorWithConnection = Navigator & {
   connection?: {
     saveData?: boolean;
@@ -18,6 +20,10 @@ type NavigatorWithConnection = Navigator & {
 export function shouldPrefetch(): boolean {
   if (typeof window === "undefined") return false;
 
+  // When prefetchCacheTTL is false/0, prefetching is fully disabled —
+  // no point issuing requests whose responses will be discarded.
+  if (isPrefetchCacheDisabled()) return false;
+
   const nav =
     typeof navigator !== "undefined"
       ? (navigator as NavigatorWithConnection)