feat: track previousNextUrl for intercepted App Router entries

Author: NathanDrake2406

packages/vinext/src/global.d.ts

@@ -93,6 +93,7 @@ declare global {
           redirectDepth?: number,
           navigationKind?: "navigate" | "traverse" | "refresh",
           historyUpdateMode?: "push" | "replace",
+          previousNextUrlOverride?: string | null,
         ) => Promise<void>)
       | undefined;
 

packages/vinext/src/server/app-browser-entry.ts

@@ -26,12 +26,12 @@ import {
   commitClientNavigationState,
   consumePrefetchResponse,
   createClientNavigationRenderSnapshot,
+  getCurrentNextUrl,
   getCurrentInterceptionContext,
   getClientNavigationRenderContext,
   getPrefetchCache,
   getPrefetchedUrls,
   pushHistoryStateWithoutNotify,
-  readHistoryStateInterceptionContext,
   replaceClientParamsWithoutNotify,
   replaceHistoryStateWithoutNotify,
   restoreRscResponse,
@@ -40,7 +40,6 @@ import {
   setMountedSlotsHeader,
   setNavigationContext,
   toRscUrl,
-  VINEXT_INTERCEPTION_CONTEXT_HISTORY_STATE_KEY,
   type CachedRscResponse,
   type ClientNavigationRenderSnapshot,
 } from "../shims/navigation.js";
@@ -60,8 +59,11 @@ import {
   type AppWireElements,
 } from "./app-elements.js";
 import {
+  createHistoryStateWithPreviousNextUrl,
   createPendingNavigationCommit,
+  readHistoryStatePreviousNextUrl,
   resolveAndClassifyNavigationCommit,
+  resolveInterceptionContextFromPreviousNextUrl,
   resolvePendingNavigationCommitDisposition,
   routerReducer,
   type AppRouterAction,
@@ -98,9 +100,6 @@ type VisitedResponseCacheEntry = {
 const MAX_VISITED_RESPONSE_CACHE_SIZE = 50;
 const VISITED_RESPONSE_CACHE_TTL = 5 * 60_000;
 const MAX_TRAVERSAL_CACHE_TTL = 30 * 60_000;
-type HistoryStateRecord = {
-  [key: string]: unknown;
-};
 
 // These are plain module-level variables, unlike ClientNavigationState in
 // navigation.ts which uses Symbol.for to survive multiple Vite module instances.
@@ -208,15 +207,15 @@ function createNavigationCommitEffect(
   href: string,
   historyUpdateMode: HistoryUpdateMode | undefined,
   params: Record<string, string | string[]>,
-  interceptionContext: string | null,
+  previousNextUrl: string | null,
 ): () => void {
   return () => {
     const targetHref = new URL(href, window.location.origin).href;
     stageClientParams(params);
     const preserveExistingState = historyUpdateMode === "replace";
-    const historyState = createHistoryStateWithInterceptionContext(
+    const historyState = createHistoryStateWithPreviousNextUrl(
       preserveExistingState ? window.history.state : null,
-      interceptionContext,
+      previousNextUrl,
     );
 
     if (historyUpdateMode === "replace" && window.location.href !== targetHref) {
@@ -300,41 +299,49 @@ function storeVisitedResponseSnapshot(
   });
 }
 
-function cloneHistoryState(state: unknown): HistoryStateRecord {
-  if (!state || typeof state !== "object") {
-    return {};
-  }
-
-  const nextState: HistoryStateRecord = {};
-  for (const [key, value] of Object.entries(state)) {
-    nextState[key] = value;
-  }
-  return nextState;
-}
-
-function createHistoryStateWithInterceptionContext(
-  state: unknown,
-  interceptionContext: string | null,
-): HistoryStateRecord | null {
-  const nextState = cloneHistoryState(state);
+type NavigationRequestState = {
+  interceptionContext: string | null;
+  previousNextUrl: string | null;
+};
 
-  if (interceptionContext === null) {
-    delete nextState[VINEXT_INTERCEPTION_CONTEXT_HISTORY_STATE_KEY];
-  } else {
-    nextState[VINEXT_INTERCEPTION_CONTEXT_HISTORY_STATE_KEY] = interceptionContext;
+function getRequestState(
+  navigationKind: NavigationKind,
+  previousNextUrlOverride?: string | null,
+): NavigationRequestState {
+  if (previousNextUrlOverride !== undefined) {
+    return {
+      interceptionContext: resolveInterceptionContextFromPreviousNextUrl(
+        previousNextUrlOverride,
+        __basePath,
+      ),
+      previousNextUrl: previousNextUrlOverride,
+    };
   }
 
-  return Object.keys(nextState).length > 0 ? nextState : null;
-}
-
-function getRequestInterceptionContext(navigationKind: NavigationKind): string | null {
   switch (navigationKind) {
     case "navigate":
-      return getCurrentInterceptionContext();
-    case "traverse":
-      return readHistoryStateInterceptionContext(window.history.state);
+      return {
+        interceptionContext: getCurrentInterceptionContext(),
+        previousNextUrl: getCurrentNextUrl(),
+      };
+    case "traverse": {
+      const previousNextUrl = readHistoryStatePreviousNextUrl(window.history.state);
+      return {
+        interceptionContext: resolveInterceptionContextFromPreviousNextUrl(
+          previousNextUrl,
+          __basePath,
+        ),
+        previousNextUrl,
+      };
+    }
     case "refresh":
-      return null;
+      return {
+        interceptionContext: resolveInterceptionContextFromPreviousNextUrl(
+          getBrowserRouterState().previousNextUrl,
+          __basePath,
+        ),
+        previousNextUrl: getBrowserRouterState().previousNextUrl,
+      };
     default: {
       const _exhaustive: never = navigationKind;
       throw new Error("[vinext] Unknown navigation kind: " + String(_exhaustive));
@@ -434,6 +441,7 @@ async function commitSameUrlNavigatePayload(
       pending.action.renderId,
       "navigate",
       pending.interceptionContext,
+      pending.previousNextUrl,
       pending.routeId,
       pending.rootLayoutTreePath,
       false,
@@ -467,6 +475,7 @@ function BrowserRoot({
     elements: resolvedElements,
     interceptionContext: initialMetadata.interceptionContext,
     navigationSnapshot: initialNavigationSnapshot,
+    previousNextUrl: null,
     renderId: 0,
     rootLayoutTreePath: initialMetadata.rootLayoutTreePath,
     routeId: initialMetadata.routeId,
@@ -510,14 +519,11 @@ function BrowserRoot({
     }
 
     replaceHistoryStateWithoutNotify(
-      createHistoryStateWithInterceptionContext(
-        window.history.state,
-        treeState.interceptionContext,
-      ),
+      createHistoryStateWithPreviousNextUrl(window.history.state, treeState.previousNextUrl),
       "",
       window.location.href,
     );
-  }, [treeState.interceptionContext, treeState.renderId]);
+  }, [treeState.previousNextUrl, treeState.renderId]);
 
   const committedTree = createElement(
     NavigationCommitSignal,
@@ -547,6 +553,7 @@ function dispatchBrowserTree(
   renderId: number,
   actionType: "navigate" | "replace" | "traverse",
   interceptionContext: string | null,
+  previousNextUrl: string | null,
   routeId: string,
   rootLayoutTreePath: string | null,
   useTransitionMode: boolean,
@@ -558,6 +565,7 @@ function dispatchBrowserTree(
       elements,
       interceptionContext,
       navigationSnapshot,
+      previousNextUrl,
       renderId,
       rootLayoutTreePath,
       routeId,
@@ -578,6 +586,7 @@ async function renderNavigationPayload(
   navId: number,
   historyUpdateMode: HistoryUpdateMode | undefined,
   params: Record<string, string | string[]>,
+  previousNextUrl: string | null,
   useTransition = true,
   actionType: "navigate" | "replace" | "traverse" = "navigate",
 ): Promise<void> {
@@ -593,6 +602,7 @@ async function renderNavigationPayload(
       currentState,
       nextElements: payload,
       navigationSnapshot,
+      previousNextUrl,
       renderId,
       type: actionType,
     });
@@ -619,12 +629,7 @@ async function renderNavigationPayload(
 
     queuePrePaintNavigationEffect(
       renderId,
-      createNavigationCommitEffect(
-        targetHref,
-        historyUpdateMode,
-        params,
-        pending.interceptionContext,
-      ),
+      createNavigationCommitEffect(targetHref, historyUpdateMode, params, pending.previousNextUrl),
     );
     activateNavigationSnapshot();
     snapshotActivated = true;
@@ -634,6 +639,7 @@ async function renderNavigationPayload(
       renderId,
       actionType,
       pending.interceptionContext,
+      pending.previousNextUrl,
       pending.routeId,
       pending.rootLayoutTreePath,
       useTransition,
@@ -813,6 +819,11 @@ async function main(): Promise<void> {
     window.location.href,
     latestClientParams,
   );
+  replaceHistoryStateWithoutNotify(
+    createHistoryStateWithPreviousNextUrl(window.history.state, null),
+    "",
+    window.location.href,
+  );
 
   window.__VINEXT_RSC_ROOT__ = hydrateRoot(
     document,
@@ -829,6 +840,7 @@ async function main(): Promise<void> {
     redirectDepth = 0,
     navigationKind: NavigationKind = "navigate",
     historyUpdateMode?: HistoryUpdateMode,
+    previousNextUrlOverride?: string | null,
   ): Promise<void> {
     if (redirectDepth > 10) {
       console.error(
@@ -845,7 +857,9 @@ async function main(): Promise<void> {
     try {
       const url = new URL(href, window.location.origin);
       const rscUrl = toRscUrl(url.pathname + url.search);
-      const requestInterceptionContext = getRequestInterceptionContext(navigationKind);
+      const requestState = getRequestState(navigationKind, previousNextUrlOverride);
+      const requestInterceptionContext = requestState.interceptionContext;
+      const requestPreviousNextUrl = requestState.previousNextUrl;
       // Use startTransition for same-route navigations (searchParam changes)
       // so React keeps the old UI visible during the transition. For cross-route
       // navigations (different pathname), use synchronous updates — React's
@@ -895,6 +909,7 @@ async function main(): Promise<void> {
             navId,
             historyUpdateMode,
             cachedParams,
+            requestPreviousNextUrl,
             isSameRoute,
             toActionType(navigationKind),
           );
@@ -942,7 +957,7 @@ async function main(): Promise<void> {
       if (finalUrl.pathname !== requestedUrl.pathname) {
         const destinationPath = finalUrl.pathname.replace(/\.rsc$/, "") + finalUrl.search;
         replaceHistoryStateWithoutNotify(
-          createHistoryStateWithInterceptionContext(null, requestInterceptionContext),
+          createHistoryStateWithPreviousNextUrl(null, requestPreviousNextUrl),
           "",
           destinationPath,
         );
@@ -956,7 +971,13 @@ async function main(): Promise<void> {
         // The URL has already been updated via replaceHistoryStateWithoutNotify above,
         // so the recursive navigation should NOT push/replace again. Pass undefined
         // for historyUpdateMode to make the commit effect a no-op for history updates.
-        return navigate(destinationPath, redirectDepth + 1, navigationKind, undefined);
+        return navigate(
+          destinationPath,
+          redirectDepth + 1,
+          navigationKind,
+          undefined,
+          requestPreviousNextUrl,
+        );
       }
 
       let navParams: Record<string, string | string[]> = {};
@@ -993,6 +1014,7 @@ async function main(): Promise<void> {
           navId,
           historyUpdateMode,
           navParams,
+          requestPreviousNextUrl,
           isSameRoute,
           toActionType(navigationKind),
         );
@@ -1088,6 +1110,7 @@ async function main(): Promise<void> {
           pending.action.renderId,
           "replace",
           pending.interceptionContext,
+          pending.previousNextUrl,
           pending.routeId,
           pending.rootLayoutTreePath,
           false,