@timber-js/app 0.2.0-alpha.7 → 0.2.0-alpha.71

package/src/client/router.ts

@@ -6,13 +6,19 @@ import type { SegmentInfo } from './segment-cache';
 import { HistoryStack } from './history';
 import type { HeadElement } from './head';
 import { setCurrentParams } from './use-params.js';
-import { setNavigationState } from './navigation-context.js';
 import {
-  SegmentElementCache,
-  cacheSegmentElements,
-  mergeSegmentTree,
-} from './segment-merger.js';
-import { fetchRscPayload, RedirectError } from './rsc-fetch.js';
+  setNavigationState,
+  getNavigationState,
+  type NavigationState,
+} from './navigation-context.js';
+import { SegmentElementCache, cacheSegmentElements, mergeSegmentTree } from './segment-merger.js';
+import {
+  fetchRscPayload,
+  RedirectError,
+  ServerErrorResponse,
+  VersionSkewError,
+} from './rsc-fetch.js';
+import { setHardNavigating } from './navigation-root.js';
 import type { FetchResult } from './rsc-fetch.js';
 
 // ─── Types ───────────────────────────────────────────────────────
@@ -22,6 +28,19 @@ export interface NavigationOptions {
   scroll?: boolean;
   /** Use replaceState instead of pushState (replaces current history entry) */
   replace?: boolean;
+  /**
+   * @internal AbortSignal from the Navigation API's NavigateEvent.
+   * When provided, the signal is linked to the router's per-navigation
+   * AbortController so in-flight RSC fetches are cancelled when a new
+   * navigation starts.
+   */
+  _signal?: AbortSignal;
+  /**
+   * @internal Skip pushState/replaceState — the Navigation API has already
+   * updated the URL via event.intercept(). Used for external navigations
+   * intercepted by the navigate event handler.
+   */
+  _skipHistory?: boolean;
 }
 
 /**
@@ -35,8 +54,12 @@ export type RscDecoder = (fetchPromise: Promise<Response>) => unknown;
  * Function that renders a decoded RSC element tree into the DOM.
  * In production: reactRoot.render(element).
  * In tests: a no-op or mock.
+ *
+ * Receives the current NavigationState explicitly — no temporal
+ * coupling with setNavigationState/getNavigationState. The renderer
+ * wraps the element in NavigationProvider with this state.
  */
-export type RootRenderer = (element: unknown) => void;
+export type RootRenderer = (element: unknown, navState: NavigationState) => void;
 
 /**
  * Platform dependencies injected for testability. In production these
@@ -68,14 +91,54 @@ export interface RouterDeps {
    *
    * The `perform` callback receives a `wrapPayload` function to wrap the
    * decoded RSC payload with NavigationProvider + NuqsAdapter before
-   * TransitionRoot sets it as the new element.
+   * NavigationRoot sets it as the new element. The `wrapPayload` function
+   * receives the NavigationState explicitly — no temporal coupling with
+   * getNavigationState().
    *
    * If not provided (tests), the router falls back to renderRoot.
    */
   navigateTransition?: (
     pendingUrl: string,
-    perform: (wrapPayload: (payload: unknown) => unknown) => Promise<unknown>
+    perform: (
+      wrapPayload: (payload: unknown, navState: NavigationState) => unknown
+    ) => Promise<unknown>
   ) => Promise<void>;
+
+  /**
+   * Whether the Navigation API is active and handling traversals.
+   * When true, the popstate handler is a no-op — the Navigation API's
+   * navigate event covers back/forward button presses.
+   */
+  navigationApiActive?: boolean;
+
+  /**
+   * Called around pushState/replaceState to set a flag that prevents
+   * the Navigation API's navigate listener from double-handling
+   * router-initiated navigations.
+   */
+  setRouterNavigating?: (value: boolean) => void;
+
+  /**
+   * Save scroll position via the Navigation API's per-entry state.
+   * When provided, used instead of history.replaceState for scroll storage.
+   */
+  saveNavigationEntryScroll?: (scrollY: number) => void;
+
+  /**
+   * Signal that a router-initiated navigation has completed. Resolves the
+   * deferred promise that ties the browser's native loading state to the
+   * navigation lifecycle. Called in the finally block of navigate/refresh,
+   * aligned with when the TopLoader's pendingUrl clears.
+   */
+  completeRouterNavigation?: () => void;
+
+  /**
+   * Initiate a navigation via the Navigation API (`navigation.navigate()`).
+   * Fires the navigate event BEFORE committing the URL, allowing Chrome
+   * to show its native loading indicator. Falls back to pushState when
+   * unavailable.
+   */
+  navigationNavigate?: (url: string, replace: boolean) => void;
 }
 
 export interface RouterInstance {
@@ -84,7 +147,7 @@ export interface RouterInstance {
   /** Full re-render of the current URL — no state tree sent */
   refresh(): Promise<void>;
   /** Handle a popstate event (back/forward button). scrollY is read from history.state. */
-  handlePopState(url: string, scrollY?: number): Promise<void>;
+  handlePopState(url: string, scrollY?: number, externalSignal?: AbortSignal): Promise<void>;
   /** Whether a navigation is currently in flight */
   isPending(): boolean;
   /** The URL currently being navigated to, or null if idle */
@@ -134,24 +197,73 @@ function isAbortError(error: unknown): boolean {
  * Create a router instance. In production, called once at app hydration
  * with real browser APIs. In tests, called with mock dependencies.
  */
+/**
+ * Router navigation phase — discriminated union replacing scattered
+ * `pending` + `pendingUrl` boolean flags.
+ *
+ * - `idle`: No navigation in flight. The committed params/pathname
+ *   are current.
+ * - `navigating`: A fetch or render is in progress. `targetUrl` is
+ *   the destination being navigated to.
+ */
+export type RouterPhase = { phase: 'idle' } | { phase: 'navigating'; targetUrl: string };
+
 export function createRouter(deps: RouterDeps): RouterInstance {
   const segmentCache = new SegmentCache();
   const prefetchCache = new PrefetchCache();
   const historyStack = new HistoryStack();
   const segmentElementCache = new SegmentElementCache();
 
-  let pending = false;
-  let pendingUrl: string | null = null;
+  let routerPhase: RouterPhase = { phase: 'idle' };
   const pendingListeners = new Set<(pending: boolean) => void>();
 
+  // AbortController for the current in-flight navigation.
+  // When a new navigation starts, the previous controller is aborted,
+  // cancelling any in-progress RSC fetch. This provides automatic
+  // cancellation of stale fetches regardless of Navigation API support.
+  let currentNavAbort: AbortController | null = null;
+
+  /**
+   * Create a new AbortController for a navigation, aborting any
+   * previous in-flight navigation. Optionally links to an external
+   * signal (e.g., from the Navigation API's NavigateEvent.signal).
+   */
+  function createNavAbort(externalSignal?: AbortSignal): AbortController {
+    // Abort previous navigation's fetch
+    currentNavAbort?.abort();
+    const controller = new AbortController();
+    currentNavAbort = controller;
+
+    // If an external signal is provided (e.g., Navigation API),
+    // forward its abort to our controller.
+    if (externalSignal) {
+      if (externalSignal.aborted) {
+        controller.abort();
+      } else {
+        externalSignal.addEventListener('abort', () => controller.abort(), { once: true });
+      }
+    }
+
+    return controller;
+  }
+
   function setPending(value: boolean, url?: string): void {
-    const newPendingUrl = value && url ? url : null;
-    if (pending === value && pendingUrl === newPendingUrl) return;
-    pending = value;
-    pendingUrl = newPendingUrl;
+    const next: RouterPhase =
+      value && url ? { phase: 'navigating', targetUrl: url } : { phase: 'idle' };
+    // Skip no-op updates
+    if (
+      routerPhase.phase === next.phase &&
+      (routerPhase.phase === 'idle' ||
+        (routerPhase.phase === 'navigating' &&
+          next.phase === 'navigating' &&
+          routerPhase.targetUrl === next.targetUrl))
+    ) {
+      return;
+    }
+    routerPhase = next;
     // Notify external store listeners (non-React consumers).
     // React-facing pending state is handled by useOptimistic in
-    // TransitionRoot via navigateTransition — not this function.
+    // NavigationRoot via navigateTransition — not this function.
     for (const listener of pendingListeners) {
       listener(value);
     }
@@ -167,9 +279,9 @@ export function createRouter(deps: RouterDeps): RouterInstance {
   }
 
   /** Render a decoded RSC payload into the DOM if a renderer is available. */
-  function renderPayload(payload: unknown): void {
+  function renderPayload(payload: unknown, navState: NavigationState): void {
     if (deps.renderRoot) {
-      deps.renderRoot(payload);
+      deps.renderRoot(payload, navState);
     }
   }
 
@@ -198,32 +310,34 @@ export function createRouter(deps: RouterDeps): RouterInstance {
   /**
    * Update navigation state (params + pathname) for the next render.
    *
-   * Sets both the module-level fallback (for tests and SSR) and the
-   * navigation context state (read by renderRoot to wrap the element
-   * in NavigationProvider). The context update is atomic with the tree
-   * render — both are passed to reactRoot.render() in the same call.
+   * Sets the module-level fallback (for tests and SSR) and the
+   * globalThis bridge, then returns the NavigationState so callers
+   * can pass it explicitly to renderRoot/wrapPayload — eliminating
+   * temporal coupling with getNavigationState().
    */
   function updateNavigationState(
     params: Record<string, string | string[]> | null | undefined,
     url: string
-  ): void {
+  ): NavigationState {
     const resolvedParams = params ?? {};
     // Module-level fallback for tests (no NavigationProvider) and SSR
     setCurrentParams(resolvedParams);
-    // Navigation context — read by renderRoot to wrap the RSC element
+    // globalThis bridge — kept for backward compat
     const pathname = url.startsWith('http') ? new URL(url).pathname : url.split('?')[0] || '/';
-    setNavigationState({ params: resolvedParams, pathname });
+    const navState: NavigationState = { params: resolvedParams, pathname };
+    setNavigationState(navState);
+    return navState;
   }
 
   /**
    * Render a payload via navigateTransition (production) or renderRoot (tests).
-   * The perform callback should fetch data, update state, and return the payload.
-   * In production, the entire callback runs inside a React transition with
-   * useOptimistic for the pending URL. In tests, the payload is rendered directly.
+   * The perform callback should fetch data, update state, and return the
+   * FetchResult plus the NavigationState (so it can be passed explicitly
+   * to wrapPayload/renderRoot without temporal coupling).
    */
   async function renderViaTransition(
     url: string,
-    perform: () => Promise<FetchResult>
+    perform: () => Promise<FetchResult & { navState: NavigationState }>
   ): Promise<HeadElement[] | null> {
     if (deps.navigateTransition) {
       let headElements: HeadElement[] | null = null;
@@ -239,7 +353,9 @@ export function createRouter(deps: RouterDeps): RouterInstance {
           headElements: result.headElements,
           params: result.params,
         });
-        return wrapPayload(merged);
+        // Pass navState explicitly — wrapPayload wraps element in
+        // NavigationProvider with this state, no getNavigationState() needed.
+        return wrapPayload(merged, result.navState);
       });
       return headElements;
     }
@@ -253,7 +369,7 @@ export function createRouter(deps: RouterDeps): RouterInstance {
       headElements: result.headElements,
       params: result.params,
     });
-    renderPayload(merged);
+    renderPayload(merged, result.navState);
     return result.headElements;
   }
 
@@ -273,14 +389,25 @@ export function createRouter(deps: RouterDeps): RouterInstance {
     }
   }
 
+  /**
+   * Schedule scroll restoration after the next paint and fire the
+   * scroll-restored event. Used by navigate, popstate, and refresh.
+   */
+  function restoreScrollAfterPaint(scrollY: number): void {
+    afterPaint(() => {
+      deps.scrollTo(0, scrollY);
+      window.dispatchEvent(new Event('timber:scroll-restored'));
+    });
+  }
+
   /**
    * Core navigation logic shared between the transition and fallback paths.
    * Fetches the RSC payload, updates all state, and returns the result.
    */
   async function performNavigationFetch(
     url: string,
-    options: { replace: boolean }
-  ): Promise<FetchResult> {
+    options: { replace: boolean; signal?: AbortSignal; skipHistory?: boolean }
+  ): Promise<FetchResult & { navState: NavigationState }> {
     // Check prefetch cache first. PrefetchResult has optional segmentInfo/params
     // fields — normalize to null for FetchResult compatibility.
     const prefetched = prefetchCache.consume(url);
@@ -302,14 +429,21 @@ export function createRouter(deps: RouterDeps): RouterInstance {
       const currentUrl = rawCurrentUrl.startsWith('http')
         ? new URL(rawCurrentUrl).pathname
         : new URL(rawCurrentUrl, 'http://localhost').pathname;
-      result = await fetchRscPayload(url, deps, stateTree, currentUrl);
+      result = await fetchRscPayload(url, deps, stateTree, currentUrl, options.signal);
     }
 
-    // Update the browser history — replace mode overwrites the current entry
-    if (options.replace) {
-      deps.replaceState({ timber: true, scrollY: 0 }, '', url);
-    } else {
-      deps.pushState({ timber: true, scrollY: 0 }, '', url);
+    // Update the browser history — skip when the Navigation API has already
+    // updated the URL via event.intercept() (external navigations).
+    if (!options.skipHistory) {
+      // Set the router-navigating flag so the Navigation API's navigate
+      // listener doesn't double-intercept this pushState/replaceState.
+      deps.setRouterNavigating?.(true);
+      if (options.replace) {
+        deps.replaceState({ timber: true, scrollY: 0 }, '', url);
+      } else {
+        deps.pushState({ timber: true, scrollY: 0 }, '', url);
+      }
+      deps.setRouterNavigating?.(false);
     }
 
     // NOTE: History push is deferred — the merged payload (after segment
@@ -320,29 +454,57 @@ export function createRouter(deps: RouterDeps): RouterInstance {
     // Update the segment cache with the new route's segment tree.
     updateSegmentCache(result.segmentInfo);
 
-    // Update navigation state (params + pathname) before rendering.
-    updateNavigationState(result.params, url);
+    // Update navigation state and capture it for explicit passing.
+    const navState = updateNavigationState(result.params, url);
 
-    return result;
+    return { ...result, navState };
   }
 
   async function navigate(url: string, options: NavigationOptions = {}): Promise<void> {
     const scroll = options.scroll !== false;
     const replace = options.replace === true;
+    const externalSignal = options._signal as AbortSignal | undefined;
+    const skipHistory = options._skipHistory === true;
+
+    // Create an abort controller for this navigation. Links to the external
+    // signal (Navigation API's event.signal) when provided.
+    const navAbort = createNavAbort(externalSignal);
 
     // Capture the departing page's scroll position for scroll={false} preservation.
     const currentScrollY = deps.getScrollY();
 
-    // Save the departing page's scroll position in history.state before
-    // pushing a new entry. This ensures back/forward navigation can restore
-    // the correct scroll position from the browser's per-entry state.
-    deps.replaceState({ timber: true, scrollY: currentScrollY }, '', deps.getCurrentUrl());
+    // Save the departing page's scroll position — use Navigation API entry
+    // state when available, otherwise fall back to history.state.
+    if (deps.saveNavigationEntryScroll) {
+      deps.saveNavigationEntryScroll(currentScrollY);
+    } else {
+      deps.replaceState({ timber: true, scrollY: currentScrollY }, '', deps.getCurrentUrl());
+    }
+
+    // When Navigation API is active, initiate the navigation via
+    // navigation.navigate() BEFORE the fetch. Unlike history.pushState()
+    // which commits the URL synchronously (so Chrome sees it as "done"),
+    // navigation.navigate() fires the navigate event before committing.
+    // Our handler intercepts with a deferred promise, and Chrome shows
+    // its native loading indicator until completeRouterNavigation()
+    // resolves it in the finally block (same time as TopLoader clears).
+    let effectiveSkipHistory = skipHistory;
+    if (!skipHistory && deps.navigationNavigate) {
+      deps.setRouterNavigating?.(true);
+      deps.navigationNavigate(url, replace);
+      deps.setRouterNavigating?.(false);
+      effectiveSkipHistory = true;
+    }
 
     setPending(true, url);
 
     try {
       const headElements = await renderViaTransition(url, () =>
-        performNavigationFetch(url, { replace })
+        performNavigationFetch(url, {
+          replace,
+          signal: navAbort.signal,
+          skipHistory: effectiveSkipHistory,
+        })
       );
 
       // Update document.title and <meta> tags with the new page's metadata
@@ -354,51 +516,105 @@ export function createRouter(deps: RouterDeps): RouterInstance {
       // Scroll-to-top on forward navigation, or restore captured position
       // for scroll={false}. React's render() on the document root can reset
       // scroll during DOM reconciliation, so all scroll must be actively managed.
-      afterPaint(() => {
-        if (scroll) {
-          deps.scrollTo(0, 0);
-        } else {
-          deps.scrollTo(0, currentScrollY);
-        }
-        window.dispatchEvent(new Event('timber:scroll-restored'));
-      });
+      restoreScrollAfterPaint(scroll ? 0 : currentScrollY);
     } catch (error) {
+      // Version skew — server has been redeployed. Trigger full page reload
+      // so the browser fetches the new bundle. See TIM-446.
+      // Set hard-navigating flag to prevent Navigation API interception
+      // and React from rendering during page teardown. See TIM-626.
+      if (error instanceof VersionSkewError) {
+        setHardNavigating(true);
+        // Import triggerStaleReload dynamically to avoid circular deps
+        // and keep the reload logic centralized with its loop guard.
+        const { triggerStaleReload } = await import('./stale-reload.js');
+        triggerStaleReload();
+        // Return a never-resolving promise — page is reloading.
+        return new Promise(() => {}) as never;
+      }
       // Server-side redirect during RSC fetch → soft router navigation.
+      // The redirect navigate will push/replace its own URL.
       if (error instanceof RedirectError) {
         setPending(false);
+        deps.completeRouterNavigation?.();
         await navigate(error.redirectUrl, { replace: true });
         return;
       }
+      // Server 5xx error — hard-navigate so the server renders the
+      // error page as HTML. See design/10-error-handling.md
+      // §"Error Page Rendering for Client Navigation".
+      //
+      // Set hard-navigating flag BEFORE setting window.location.href:
+      // 1. Prevents Navigation API from intercepting → infinite loop
+      // 2. Causes NavigationRoot to throw unresolvedThenable → prevents
+      //    React from rendering children during page teardown (avoids
+      //    "Rendered more hooks" crashes). See TIM-626.
+      if (error instanceof ServerErrorResponse) {
+        setHardNavigating(true);
+        window.location.href = error.url;
+        return new Promise(() => {}) as never;
+      }
       // Abort errors are not application errors — swallow silently.
       if (isAbortError(error)) return;
       throw error;
     } finally {
+      // Clear the abort controller so we don't abort a completed navigation
+      // when the next one starts. In dev mode, the RSC body stream stays
+      // open after data arrives (React's Flight client waits for debug rows).
+      // Aborting a "completed" navigation kills the open stream reader →
+      // "BodyStreamBuffer was aborted". By clearing the controller here,
+      // createNavAbort() becomes a no-op for completed navigations.
+      if (currentNavAbort === navAbort) {
+        currentNavAbort = null;
+      }
       setPending(false);
+      // Resolve the Navigation API deferred — clears the browser's native
+      // loading state (tab spinner) at the same time as the TopLoader.
+      deps.completeRouterNavigation?.();
     }
   }
 
   async function refresh(): Promise<void> {
     const currentUrl = deps.getCurrentUrl();
+    const navAbort = createNavAbort();
 
     setPending(true, currentUrl);
 
     try {
       const headElements = await renderViaTransition(currentUrl, async () => {
         // No state tree sent — server renders the complete RSC payload
-        const result = await fetchRscPayload(currentUrl, deps);
+        const result = await fetchRscPayload(
+          currentUrl,
+          deps,
+          undefined,
+          undefined,
+          navAbort.signal
+        );
         // History push handled by renderViaTransition (stores merged payload)
         updateSegmentCache(result.segmentInfo);
-        updateNavigationState(result.params, currentUrl);
-        return result;
+        const navState = updateNavigationState(result.params, currentUrl);
+        return { ...result, navState };
       });
 
       applyHead(headElements);
+    } catch (error) {
+      // Stale transition (superseded by a newer navigation) or aborted
+      // fetch — silently ignore. See TIM-629.
+      if (isAbortError(error)) return;
+      throw error;
     } finally {
+      if (currentNavAbort === navAbort) {
+        currentNavAbort = null;
+      }
       setPending(false);
+      deps.completeRouterNavigation?.();
     }
   }
 
-  async function handlePopState(url: string, scrollY: number = 0): Promise<void> {
+  async function handlePopState(
+    url: string,
+    scrollY: number = 0,
+    externalSignal?: AbortSignal
+  ): Promise<void> {
     // Scroll position is read from history.state by the caller (browser-entry.ts)
     // and passed in. This is more reliable than tracking scroll per-URL in memory
     // because the browser maintains per-entry state even with duplicate URLs.
@@ -406,35 +622,40 @@ export function createRouter(deps: RouterDeps): RouterInstance {
 
     if (entry && entry.payload !== null) {
       // Replay cached payload — no server roundtrip
-      updateNavigationState(entry.params, url);
-      renderPayload(entry.payload);
+      const navState = updateNavigationState(entry.params, url);
+      renderPayload(entry.payload, navState);
       applyHead(entry.headElements);
-      afterPaint(() => {
-        deps.scrollTo(0, scrollY);
-        window.dispatchEvent(new Event('timber:scroll-restored'));
-      });
+      restoreScrollAfterPaint(scrollY);
     } else {
       // No cached payload — fetch from server.
       // This happens when navigating back to the initial SSR'd page
       // (its payload is null since it was rendered via SSR, not RSC fetch)
       // or when the entry doesn't exist at all.
+      const navAbort = createNavAbort(externalSignal);
       setPending(true, url);
       try {
         const headElements = await renderViaTransition(url, async () => {
-          const stateTree = segmentCache.serializeStateTree(segmentElementCache.getMergeablePaths());
-          const result = await fetchRscPayload(url, deps, stateTree);
+          const stateTree = segmentCache.serializeStateTree(
+            segmentElementCache.getMergeablePaths()
+          );
+          const result = await fetchRscPayload(url, deps, stateTree, undefined, navAbort.signal);
           updateSegmentCache(result.segmentInfo);
-          updateNavigationState(result.params, url);
+          const navState = updateNavigationState(result.params, url);
           // History push handled by renderViaTransition (stores merged payload)
-          return result;
+          return { ...result, navState };
         });
 
         applyHead(headElements);
-        afterPaint(() => {
-          deps.scrollTo(0, scrollY);
-          window.dispatchEvent(new Event('timber:scroll-restored'));
-        });
+        restoreScrollAfterPaint(scrollY);
+      } catch (error) {
+        // Stale transition (superseded by a newer navigation) or aborted
+        // fetch — silently ignore. See TIM-629.
+        if (isAbortError(error)) return;
+        throw error;
       } finally {
+        if (currentNavAbort === navAbort) {
+          currentNavAbort = null;
+        }
         setPending(false);
       }
     }
@@ -465,8 +686,8 @@ export function createRouter(deps: RouterDeps): RouterInstance {
     navigate,
     refresh,
     handlePopState,
-    isPending: () => pending,
-    getPendingUrl: () => pendingUrl,
+    isPending: () => routerPhase.phase === 'navigating',
+    getPendingUrl: () => (routerPhase.phase === 'navigating' ? routerPhase.targetUrl : null),
     onPendingChange(listener) {
       pendingListeners.add(listener);
       return () => pendingListeners.delete(listener);
@@ -483,7 +704,11 @@ export function createRouter(deps: RouterDeps): RouterInstance {
         payload: merged,
         headElements,
       });
-      renderPayload(merged);
+      // Revalidation doesn't change params/pathname — preserve current state.
+      // DO NOT call updateNavigationState(null, ...) here: that normalizes
+      // params to {}, clearing dynamic route params on every action response.
+      const navState = getNavigationState();
+      renderPayload(merged, navState);
       applyHead(headElements);
     },
     initSegmentCache: (segments: SegmentInfo[]) => updateSegmentCache(segments),