@rangojs/router 0.0.0-experimental.dfdb0387 → 0.0.0-experimental.e16b7c00

package/src/browser/prefetch/fetch.ts

@@ -13,9 +13,10 @@
 
 import {
   buildPrefetchKey,
+  buildSourceKey,
   hasPrefetch,
   markPrefetchInflight,
-  setInflightPromise,
+  setInflightPromiseWithAliases,
   storePrefetch,
   clearPrefetchInflight,
   currentGeneration,
@@ -25,6 +26,23 @@ 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.
  * Includes _rsc_segments so the server can diff against currently mounted
@@ -64,14 +82,33 @@ function buildPrefetchUrl(
  * 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<Response | null> {
   const gen = currentGeneration();
-  markPrefetchInflight(key);
+  const inflightKeys = forceSourceScope
+    ? [sourceKey]
+    : [wildcardKey, sourceKey];
+  for (const k of inflightKeys) markPrefetchInflight(k);
 
   const promise: Promise<Response | null> = fetch(fetchUrl, {
     priority: "low" as RequestPriority,
@@ -93,98 +130,153 @@ function executePrefetchFetch(
         status: response.status,
         statusText: response.statusText,
       };
-      storePrefetch(key, new Response(cacheStream, responseInit), gen);
+      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]!);
     });
 
-  setInflightPromise(key, promise);
+  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?: string | ((from: string) => string),
+  prefetchKey?: ":source",
 ): void {
   if (!shouldPrefetch()) return;
 
   const targetUrl = buildPrefetchUrl(url, segmentIds, version, routerId);
   if (!targetUrl) return;
-  // Skip same-page prefetch with prefetchKey — a same-page diff is trivial
-  // and would corrupt the wildcard cache entry for cross-page navigation.
-  if (prefetchKey != null && targetUrl.pathname === window.location.pathname) {
+  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 key = buildPrefetchKey(window.location.href, targetUrl, prefetchKey);
-  if (hasPrefetch(key)) {
+  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,
-      key,
-      prefetchKey: prefetchKey != null ? String(prefetchKey) : undefined,
+      wildcardKey,
+      sourceKey,
+      forceSourceScope,
     });
     return;
   }
   debugLog("[prefetch] direct fetch", {
     url,
-    key,
-    source: window.location.href,
-    prefetchKey: prefetchKey != null ? String(prefetchKey) : undefined,
+    wildcardKey,
+    sourceKey,
+    source: sourceHref,
+    forceSourceScope,
   });
-  executePrefetchFetch(key, targetUrl.toString());
+  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?: string | ((from: string) => string),
+  prefetchKey?: ":source",
 ): string {
   if (!shouldPrefetch()) return "";
   const targetUrl = buildPrefetchUrl(url, segmentIds, version, routerId);
   if (!targetUrl) return "";
-  // Skip same-page prefetch with prefetchKey — a same-page diff is trivial
-  // and would corrupt the wildcard cache entry for cross-page navigation.
-  if (prefetchKey != null && targetUrl.pathname === window.location.pathname) {
+  const forceSourceScope = prefetchKey === ":source";
+  if (!forceSourceScope && isSamePage(url)) {
     return "";
   }
-  const key = buildPrefetchKey(window.location.href, targetUrl, prefetchKey);
-  if (hasPrefetch(key)) {
+  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,
-      key,
-      prefetchKey: prefetchKey != null ? String(prefetchKey) : undefined,
+      wildcardKey,
+      sourceKey,
+      forceSourceScope,
     });
-    return key;
+    return queueKey;
   }
   const fetchUrlStr = targetUrl.toString();
-  const targetPathname = targetUrl.pathname;
-  enqueuePrefetch(key, (signal) => {
+  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 (hasPrefetch(key)) return Promise.resolve();
-    // By execution time, the user may have navigated to the target page.
-    // A same-page prefetch produces a trivial diff that would overwrite
-    // the useful cross-page entry in the wildcard cache.
-    if (prefetchKey != null && targetPathname === window.location.pathname) {
+    if (hasPrefetchHit(forceSourceScope, wildcardKey, sourceKey)) {
+      return Promise.resolve();
+    }
+    if (!forceSourceScope && isSamePage(url)) {
       return Promise.resolve();
     }
-    return executePrefetchFetch(key, fetchUrlStr, signal).then(() => {});
+    return executePrefetchFetch(
+      wildcardKey,
+      sourceKey,
+      fetchUrlStr,
+      forceSourceScope,
+      signal,
+    ).then(() => {});
   });
-  return key;
+  return queueKey;
 }

package/src/browser/prefetch/queue.ts

@@ -108,10 +108,29 @@ export function enqueuePrefetch(
   scheduleDrain();
 }
 
+/**
+ * Normalize a URL-like string for keep-alive matching: parse against a
+ * placeholder origin and strip internal `_rsc_*` query params. Returns
+ * `pathname + search` so comparisons ignore hash and the internal params
+ * that prefetch appends to targets (`_rsc_partial`, `_rsc_segments`,
+ * `_rsc_v`, `_rsc_rid`, `_rsc_stale`).
+ */
+function normalizeForMatch(urlish: string): string {
+  try {
+    const u = new URL(urlish, "http://placeholder");
+    for (const k of [...u.searchParams.keys()]) {
+      if (k.startsWith("_rsc_")) u.searchParams.delete(k);
+    }
+    return u.pathname + u.search;
+  } catch {
+    return urlish;
+  }
+}
+
 /**
  * Cancel queued prefetches and abort in-flight ones that don't match
  * the current navigation target. If `keepUrl` is provided, the
- * executing prefetch whose key contains that URL is kept alive so
+ * executing prefetch whose key targets that URL is kept alive so
  * navigation can reuse its response via consumeInflightPrefetch.
  *
  * Called when a navigation starts via the NavigationProvider's
@@ -124,11 +143,23 @@ export function cancelAllPrefetches(keepUrl?: string | null): void {
   drainGeneration++;
 
   // Abort in-flight prefetches that aren't for the navigation target.
-  // Keys use format "sourceHref\0targetPathname+search" — match the
-  // target portion (after \0) against keepUrl.
+  // Key shapes (see prefetch/cache.ts buildPrefetchKey):
+  //   wildcard:      "rangoState\0/target?..."
+  //   source-scoped: "rangoState\0sourceHref\0/target?..."
+  // The target portion is always the final \0-delimited segment and
+  // includes internal `_rsc_*` params (from buildPrefetchUrl); keepUrl
+  // comes from NavigationProvider's pendingUrl which is the bare
+  // navigation target. Normalize both sides before comparing.
+  const normalizedKeep = keepUrl ? normalizeForMatch(keepUrl) : null;
   for (const [key, ac] of abortControllers) {
-    const target = key.split("\0")[1];
-    if (keepUrl && target && keepUrl.startsWith(target)) continue;
+    const lastNul = key.lastIndexOf("\0");
+    const target = lastNul >= 0 ? key.substring(lastNul + 1) : "";
+    if (
+      normalizedKeep &&
+      target &&
+      normalizeForMatch(target) === normalizedKeep
+    )
+      continue;
     ac.abort();
     abortControllers.delete(key);
     if (executing.delete(key)) {

package/src/browser/rango-state.ts

@@ -6,21 +6,37 @@
  * navigation requests. The server responds with `Vary: X-Rango-State`,
  * so the browser HTTP cache keys responses by (URL, X-Rango-State value).
  *
- * Format: `{buildVersion}:{invalidationTimestamp}`
+ * Value format: `{buildVersion}:{invalidationTimestamp}`
  * - Build version changes on deploy, busting all cached prefetches.
  * - Timestamp changes on server action invalidation.
  *
- * localStorage is cross-tab and survives page refresh, so:
- * - One tab's prefetch warms the cache for all tabs.
- * - Invalidation in one tab is picked up by other tabs on next fetch.
+ * Storage key is namespaced per routerId (`rango-state:{routerId}`) so
+ * tabs in different apps on the same origin do not collide. Two tabs in
+ * the same app share a key → one tab's invalidation is picked up by the
+ * other via the `storage` event. A smooth cross-app transition in this
+ * tab rebinds to the target app's key; other tabs still in the old app
+ * keep their own key intact.
+ *
+ * If no routerId is supplied, falls back to a single legacy key for
+ * backward compatibility (single-app deployments unaffected).
  */
 
-const STORAGE_KEY = "rango-state";
+const LEGACY_STORAGE_KEY = "rango-state";
+
+function buildStorageKey(routerId: string | undefined): string {
+  return routerId ? `${LEGACY_STORAGE_KEY}:${routerId}` : LEGACY_STORAGE_KEY;
+}
 
 // Module-level cache avoids hitting localStorage on every getRangoState() call.
 // Initialized from localStorage on first access or by initRangoState().
 let cachedState: string | null = null;
 
+// The localStorage key this tab is currently bound to. Rebinds on
+// initRangoState (document boot) and setRangoStateLocal (smooth app
+// switch). The storage listener filters cross-tab events by this key so
+// events from tabs in a different app are ignored.
+let currentStorageKey: string = LEGACY_STORAGE_KEY;
+
 // Cross-tab sync: the `storage` event fires in OTHER tabs when one tab writes
 // to localStorage, keeping cachedState fresh without polling.
 let storageListenerAttached = false;
@@ -28,7 +44,10 @@ let storageListenerAttached = false;
 function attachStorageListener(): void {
   if (storageListenerAttached || typeof window === "undefined") return;
   window.addEventListener("storage", (e) => {
-    if (e.key !== STORAGE_KEY) return;
+    // Only react to events for this tab's current app namespace. Events
+    // under other routerId-scoped keys belong to other apps and must not
+    // clobber this tab's state.
+    if (e.key !== currentStorageKey) return;
     cachedState = e.newValue;
   });
   storageListenerAttached = true;
@@ -37,16 +56,22 @@ function attachStorageListener(): void {
 /**
  * Initialize the Rango state key in localStorage.
  * Called once at app startup with the build version from the server.
- * If localStorage already has a key with matching version prefix, keeps it
- * (preserves invalidation state across refresh). Otherwise writes a new key.
+ * The routerId scopes the storage key to this app; in multi-app setups
+ * each app owns its own `rango-state:{routerId}` key and cannot observe
+ * invalidations from sibling apps on the same origin.
+ *
+ * If localStorage already has a matching-version entry under the key,
+ * keeps it (preserves invalidation state across refresh). Otherwise
+ * writes a new value.
  */
-export function initRangoState(version: string): void {
+export function initRangoState(version: string, routerId?: string): void {
+  currentStorageKey = buildStorageKey(routerId);
   if (typeof window === "undefined") return;
 
   attachStorageListener();
 
   try {
-    const existing = localStorage.getItem(STORAGE_KEY);
+    const existing = localStorage.getItem(currentStorageKey);
     if (existing) {
       const colonIdx = existing.indexOf(":");
       if (colonIdx > 0) {
@@ -59,7 +84,7 @@ export function initRangoState(version: string): void {
     }
     // New version or first load
     const newState = `${version}:${Date.now()}`;
-    localStorage.setItem(STORAGE_KEY, newState);
+    localStorage.setItem(currentStorageKey, newState);
     cachedState = newState;
   } catch {
     // localStorage may be unavailable (private browsing in some browsers)
@@ -77,7 +102,7 @@ export function getRangoState(): string {
   if (typeof window === "undefined") return "0:0";
 
   try {
-    const stored = localStorage.getItem(STORAGE_KEY);
+    const stored = localStorage.getItem(currentStorageKey);
     if (stored) {
       cachedState = stored;
       return stored;
@@ -89,6 +114,21 @@ export function getRangoState(): string {
   return "0:0";
 }
 
+/**
+ * Update the in-memory rango-state to a new version WITHOUT writing
+ * localStorage. Intended for smooth cross-app transitions in this tab only:
+ * subsequent requests from this tab send the new token, but other tabs
+ * still in the previous app do not observe a storage event. Rebinds this
+ * tab's storage key to the target app's namespace (`rango-state:{routerId}`)
+ * so subsequent storage events only reflect the new app. On the next hard
+ * reload, initRangoState reconciles localStorage from the server's
+ * authoritative version.
+ */
+export function setRangoStateLocal(version: string, routerId?: string): void {
+  currentStorageKey = buildStorageKey(routerId);
+  cachedState = `${version}:${Date.now()}`;
+}
+
 /**
  * Invalidate the Rango state key. Called when server actions mutate data.
  * Updates the timestamp portion while keeping the version prefix.
@@ -105,7 +145,7 @@ export function invalidateRangoState(): void {
   if (typeof window === "undefined") return;
 
   try {
-    localStorage.setItem(STORAGE_KEY, newState);
+    localStorage.setItem(currentStorageKey, newState);
   } catch {
     // Silently handle localStorage errors
   }

package/src/browser/react/Link.tsx

@@ -98,25 +98,30 @@ export interface LinkProps extends Omit<
    */
   prefetch?: PrefetchStrategy;
   /**
-   * Custom prefetch cache key for source-agnostic cache reuse.
-   * When set, prefetch responses are cached independently of the current
-   * page URL, so navigating to the same target from different source pages
-   * reuses the cached prefetch.
+   * Opt-in override for the prefetch cache scope.
    *
-   * - String: static group name (e.g., `"pages"`)
-   * - Function: receives current URL (`window.location.href`), returns a
-   *   normalized source key
+   * The default cache is source-agnostic: one shared entry per target,
+   * keyed on Rango state + target URL. This is correct for routes whose
+   * response shape doesn't depend on where the user navigates from.
+   *
+   * Set `":source"` when this Link's response would legitimately differ
+   * based on the source page — typically when the target route (or one
+   * of its layouts) uses a custom `revalidate()` handler that reads
+   * `currentUrl` / `currentParams`, and the wildcard entry would
+   * therefore serve the wrong diff to a navigation from a different
+   * source.
+   *
+   * Intercept responses are auto-scoped to the source via a server-side
+   * tag, so `":source"` is only needed for custom revalidation logic.
    *
    * @example
    * ```tsx
-   * // Static group — all "pages" links share one cache entry per target
-   * <Link to="/page/3" prefetch="hover" prefetchKey="pages" />
-   *
-   * // Normalize — strip trailing page number from source URL
-   * <Link to="/page/3" prefetch="hover" prefetchKey={(from) => from.replace(/\/\d+$/, '')} />
+   * // Route uses a `revalidate()` that branches on currentUrl — opt in
+   * // so prefetches don't bleed across source pages.
+   * <Link to="/dashboard" prefetch="hover" prefetchKey=":source" />
    * ```
    */
-  prefetchKey?: string | ((from: string) => string);
+  prefetchKey?: ":source";
   /**
    * State to pass to history.pushState/replaceState.
    * Accessible via useLocationState() hook.