@timber-js/app 0.2.0-alpha.66 → 0.2.0-alpha.68

package/src/client/router.ts

@@ -27,6 +27,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;
 }
 
 /**
@@ -89,6 +102,42 @@ export interface RouterDeps {
       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 {
@@ -97,7 +146,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 */
@@ -167,6 +216,36 @@ export function createRouter(deps: RouterDeps): RouterInstance {
   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 next: RouterPhase =
       value && url ? { phase: 'navigating', targetUrl: url } : { phase: 'idle' };
@@ -326,7 +405,7 @@ export function createRouter(deps: RouterDeps): RouterInstance {
    */
   async function performNavigationFetch(
     url: string,
-    options: { replace: boolean }
+    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.
@@ -349,14 +428,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
@@ -376,20 +462,48 @@ export function createRouter(deps: RouterDeps): RouterInstance {
   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
@@ -414,8 +528,10 @@ export function createRouter(deps: RouterDeps): RouterInstance {
         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;
       }
@@ -431,18 +547,28 @@ export function createRouter(deps: RouterDeps): RouterInstance {
       throw error;
     } finally {
       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);
         const navState = updateNavigationState(result.params, currentUrl);
@@ -452,10 +578,15 @@ export function createRouter(deps: RouterDeps): RouterInstance {
       applyHead(headElements);
     } finally {
       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.
@@ -472,13 +603,14 @@ export function createRouter(deps: RouterDeps): RouterInstance {
       // 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 result = await fetchRscPayload(url, deps, stateTree, undefined, navAbort.signal);
           updateSegmentCache(result.segmentInfo);
           const navState = updateNavigationState(result.params, url);
           // History push handled by renderViaTransition (stores merged payload)

package/src/client/rsc-fetch.ts

@@ -249,7 +249,8 @@ export async function fetchRscPayload(
   url: string,
   deps: RouterDeps,
   stateTree?: { segments: string[] },
-  currentUrl?: string
+  currentUrl?: string,
+  signal?: AbortSignal
 ): Promise<FetchResult> {
   const rscUrl = appendRscParam(url);
   const headers = buildRscHeaders(stateTree, currentUrl);
@@ -260,7 +261,7 @@ export async function fetchRscPayload(
     //
     // Intercept the response to read X-Timber-Head before createFromFetch
     // consumes the body. Reading headers does NOT consume the body stream.
-    const fetchPromise = deps.fetch(rscUrl, { headers, redirect: 'manual' });
+    const fetchPromise = deps.fetch(rscUrl, { headers, redirect: 'manual', signal });
     let headElements: HeadElement[] | null = null;
     let segmentInfo: SegmentInfo[] | null = null;
     let params: Record<string, string | string[]> | null = null;
@@ -303,7 +304,7 @@ export async function fetchRscPayload(
     return { payload, headElements, segmentInfo, params, skippedSegments };
   }
   // Test/fallback path: return raw text
-  const response = await deps.fetch(rscUrl, { headers, redirect: 'manual' });
+  const response = await deps.fetch(rscUrl, { headers, redirect: 'manual', signal });
   // Check for redirect in test path too
   if (response.status >= 300 && response.status < 400) {
     const location = response.headers.get('Location');

package/src/client/top-loader.tsx

@@ -28,7 +28,7 @@
 'use client';
 
 import { useState, createElement } from 'react';
-import { usePendingNavigationUrl } from './navigation-context.js';
+import { usePendingNavigationUrl, hasNativeNavigationTransition } from './navigation-context.js';
 
 // ─── Types ───────────────────────────────────────────────────────
 
@@ -112,7 +112,15 @@ function ensureKeyframes(): void {
  */
 export function TopLoader({ config }: { config?: TopLoaderConfig }): React.ReactElement | null {
   const pendingUrl = usePendingNavigationUrl();
-  const isPending = pendingUrl !== null;
+  // Navigation is pending when either:
+  // 1. Our React-based pending URL is set (standard path), OR
+  // 2. The Navigation API has an active transition (external navigations
+  //    intercepted by the navigate event that haven't completed yet).
+  // In practice these are almost always in sync — the Navigation API
+  // transition is active while our pendingUrl is set. This check ensures
+  // the top-loader also shows for external navigations caught by the
+  // Navigation API before our React state updates.
+  const isPending = pendingUrl !== null || hasNativeNavigationTransition();
 
   const color = config?.color ?? DEFAULT_COLOR;
   const height = config?.height ?? DEFAULT_HEIGHT;