@rangojs/router 0.0.0-experimental.2 → 0.0.0-experimental.204030a9

package/src/browser/react/NavigationProvider.tsx

@@ -3,8 +3,10 @@
 import React, {
   useState,
   useEffect,
+  useLayoutEffect,
   useCallback,
   useMemo,
+  useRef,
   use,
   type ReactNode,
 } from "react";
@@ -14,7 +16,7 @@ import {
 } from "./context.js";
 import type {
   NavigationStore,
-  RscPayload,
+  NavigationUpdate,
   NavigateOptions,
   NavigationBridge,
 } from "../types.js";
@@ -22,8 +24,11 @@ import type { EventController } from "../event-controller.js";
 import { RootErrorBoundary } from "../../root-error-boundary.js";
 import type { HandleData } from "../types.js";
 import { ThemeProvider } from "../../theme/ThemeProvider.js";
+import { NonceContext } from "./nonce-context.js";
 import type { ResolvedThemeConfig, Theme } from "../../theme/types.js";
-import { HrefContext, type HrefContextValue } from "./use-href.js";
+import { cancelAllPrefetches } from "../prefetch/queue.js";
+import { handleNavigationEnd } from "../scroll-restoration.js";
+import { createAppShellRef, type AppShellRef } from "../app-shell.js";
 
 /**
  * Process handles from an async generator, updating the event controller
@@ -42,10 +47,22 @@ async function processHandles(
     store: NavigationStore;
     matched?: string[];
     isPartial?: boolean;
+    /** Server's `resolvedIds`: every segment re-resolved this request,
+     *  including null-component ones excluded from `diff`/`segments`.
+     *  Drives cleanup of stale handle buckets when a re-resolved segment
+     *  pushed nothing. */
+    resolvedIds?: string[];
     historyKey: string;
-  }
+  },
 ): Promise<void> {
-  const { eventController, store, matched, isPartial, historyKey } = opts;
+  const {
+    eventController,
+    store,
+    matched,
+    isPartial,
+    resolvedIds,
+    historyKey,
+  } = opts;
 
   let yieldCount = 0;
   for await (const handleData of handlesGenerator) {
@@ -54,13 +71,13 @@ async function processHandles(
     // the current route's breadcrumbs (e.g., quick popstate after clicking a link).
     if (historyKey !== store.getHistoryKey()) {
       console.log(
-        "[NavigationProvider] Stopping handle processing - user navigated away"
+        "[NavigationProvider] Stopping handle processing - user navigated away",
       );
       return;
     }
 
     yieldCount++;
-    eventController.setHandleData(handleData, matched, isPartial);
+    eventController.setHandleData(handleData, matched, isPartial, resolvedIds);
   }
 
   // Check again before final updates
@@ -68,12 +85,11 @@ async function processHandles(
     return;
   }
 
-  // For partial updates where the generator yielded nothing (cached handlers),
-  // we still need to update the segment order to clean up stale handle data.
-  // This happens when navigating away from a route - the handlers for the new
-  // route might not push any breadcrumbs, but we still need to remove the old ones.
+  // For partial updates where the generator yielded nothing (every
+  // re-resolved handler pushed nothing), still call setHandleData so the
+  // cleanup pass can clear out stale buckets for those segments.
   if (yieldCount === 0 && matched) {
-    eventController.setHandleData({}, matched, true);
+    eventController.setHandleData({}, matched, true, resolvedIds);
   }
 
   // After handles processing completes, update the cache's handleData.
@@ -101,9 +117,9 @@ export interface NavigationProviderProps {
   eventController: EventController;
 
   /**
-   * Initial RSC payload from server
+   * Initial rendered tree + metadata from server payload
    */
-  initialPayload: RscPayload;
+  initialPayload: NavigationUpdate;
 
   /**
    * Navigation bridge for handling navigation
@@ -121,6 +137,31 @@ export interface NavigationProviderProps {
    * Only used when themeConfig is provided
    */
   initialTheme?: Theme;
+
+  /**
+   * Whether connection warmup is enabled.
+   * When true, keeps TLS alive by sending HEAD requests after idle periods.
+   */
+  warmupEnabled?: boolean;
+
+  /**
+   * App version from server payload.
+   * Used only as a fallback when `appShellRef` is not supplied.
+   */
+  version?: string;
+
+  /**
+   * URL prefix for all routes (from createRouter({ basename })).
+   * Used only as a fallback when `appShellRef` is not supplied.
+   */
+  basename?: string;
+
+  /**
+   * Live app-shell ref. When provided, the context's `basename` and `version`
+   * properties become live getters that track app-switch updates without
+   * invalidating the memoized context value.
+   */
+  appShellRef?: AppShellRef;
 }
 
 /**
@@ -151,6 +192,10 @@ export function NavigationProvider({
   bridge,
   themeConfig,
   initialTheme,
+  warmupEnabled,
+  version,
+  basename,
+  appShellRef,
 }: NavigationProviderProps): ReactNode {
   // Track current payload for rendering (this triggers re-renders)
   const [payload, setPayload] = useState(initialPayload);
@@ -162,7 +207,7 @@ export function NavigationProvider({
     async (url: string, options?: NavigateOptions): Promise<void> => {
       await bridge.navigate(url, options);
     },
-    []
+    [],
   );
 
   /**
@@ -172,25 +217,178 @@ export function NavigationProvider({
     await bridge.refresh();
   }, []);
 
-  // Context value is stable (store, eventController, navigate, refresh never change)
-  const contextValue = useMemo<NavigationStoreContextValue>(
-    () => ({
+  // basename/version are always read through a shell ref so the context value
+  // has a single shape: a supplied appShellRef stays live (app-switch updates
+  // it), the standalone fallback is a frozen ref over the mount-time props.
+  const fallbackShellRef = useRef<AppShellRef | null>(null);
+  if (!fallbackShellRef.current) {
+    fallbackShellRef.current = createAppShellRef({ basename, version });
+  }
+  const shellRef = appShellRef ?? fallbackShellRef.current;
+
+  const contextValue = useMemo<NavigationStoreContextValue>(() => {
+    const value = {
       store,
       eventController,
       navigate,
       refresh,
-    }),
-    []
-  );
+    } as NavigationStoreContextValue;
+    Object.defineProperty(value, "basename", {
+      configurable: true,
+      enumerable: true,
+      get: () => shellRef.get().basename,
+    });
+    Object.defineProperty(value, "version", {
+      configurable: true,
+      enumerable: true,
+      get: () => shellRef.get().version,
+    });
+    return value;
+  }, []);
+
+  // Connection warmup: keep TLS alive after idle periods.
+  // After 60s of no user interaction, marks connection as "cold".
+  // On next interaction or visibility change, sends a HEAD request to warm TLS
+  // before the user actually clicks a link.
+  useEffect(() => {
+    if (!warmupEnabled) return;
+
+    const IDLE_TIMEOUT = 60_000;
+    const DEBOUNCE_DELAY = 150;
+
+    let idleTimer: ReturnType<typeof setTimeout> | undefined;
+    let debounceTimer: ReturnType<typeof setTimeout> | undefined;
+    let isCold = false;
+    let warmupListenersAttached = false;
+
+    function sendWarmup() {
+      isCold = false;
+      fetch("/?_rsc_warmup", { method: "HEAD" }).catch(() => {});
+    }
+
+    function triggerWarmup() {
+      if (!isCold) return;
+      clearTimeout(debounceTimer);
+      debounceTimer = setTimeout(() => {
+        sendWarmup();
+        detachWarmupListeners();
+        resetIdleTimer();
+      }, DEBOUNCE_DELAY);
+    }
+
+    function onVisibilityChange() {
+      if (document.visibilityState === "visible" && isCold) {
+        triggerWarmup();
+      }
+    }
+
+    function attachWarmupListeners() {
+      if (warmupListenersAttached) return;
+      warmupListenersAttached = true;
+      document.addEventListener("visibilitychange", onVisibilityChange);
+      document.addEventListener("mousemove", triggerWarmup, { once: true });
+      document.addEventListener("touchstart", triggerWarmup, { once: true });
+    }
+
+    function detachWarmupListeners() {
+      warmupListenersAttached = false;
+      document.removeEventListener("visibilitychange", onVisibilityChange);
+      document.removeEventListener("mousemove", triggerWarmup);
+      document.removeEventListener("touchstart", triggerWarmup);
+    }
+
+    function markCold() {
+      isCold = true;
+      attachWarmupListeners();
+    }
+
+    function resetIdleTimer() {
+      clearTimeout(idleTimer);
+      isCold = false;
+      idleTimer = setTimeout(markCold, IDLE_TIMEOUT);
+    }
+
+    // Activity events that reset the idle timer
+    const activityEvents = [
+      "mousemove",
+      "keydown",
+      "touchstart",
+      "scroll",
+    ] as const;
+    const activityOptions: AddEventListenerOptions = { passive: true };
+
+    for (const event of activityEvents) {
+      document.addEventListener(event, resetIdleTimer, activityOptions);
+    }
+
+    resetIdleTimer();
+
+    return () => {
+      clearTimeout(idleTimer);
+      clearTimeout(debounceTimer);
+      detachWarmupListeners();
+      for (const event of activityEvents) {
+        document.removeEventListener(event, resetIdleTimer);
+      }
+    };
+  }, [warmupEnabled]);
+
+  // Cancel non-matching prefetches when navigation starts.
+  // Frees connections so the navigation fetch isn't competing with
+  // speculative prefetches. The prefetch matching the navigation target
+  // is kept alive so it can be reused via consumeInflightPrefetch.
+  useEffect(() => {
+    let wasIdle = true;
+    const unsub = eventController.subscribe(() => {
+      const state = eventController.getState();
+      const isIdle = state.state === "idle" && !state.isStreaming;
+      if (wasIdle && !isIdle) {
+        cancelAllPrefetches(state.pendingUrl);
+      }
+      wasIdle = isIdle;
+    });
+    return unsub;
+  }, [eventController]);
+
+  // Pending scroll action to apply after React commits
+  const pendingScrollRef = useRef<NavigationUpdate["scroll"]>(undefined);
+
+  // Apply scroll after React commits the new content to the DOM
+  useLayoutEffect(() => {
+    const scrollAction = pendingScrollRef.current;
+    if (!scrollAction) return;
+    pendingScrollRef.current = undefined;
+
+    if (scrollAction.enabled === false) return;
+
+    handleNavigationEnd({
+      restore: scrollAction.restore,
+      scroll: scrollAction.enabled,
+      isStreaming: scrollAction.isStreaming,
+    });
+  });
 
   // Subscribe to UI updates (for re-rendering the tree)
   useEffect(() => {
     const unsubscribe = store.onUpdate((update) => {
+      // Capture scroll intent — it will be applied in useLayoutEffect
+      // after React commits this state update to the DOM.
+      // Always assign (even undefined) to clear stale scroll from prior navigations,
+      // so server actions or error updates don't accidentally replay old scroll.
+      pendingScrollRef.current = update.scroll;
+
       setPayload({
         root: update.root,
         metadata: update.metadata,
       });
 
+      // Update route params. Only reset when the server actually sends a params
+      // map — an absent `params` field means "no change" (e.g., legacy action
+      // responses that omitted params). Explicit `{}` still clears correctly.
+      if (update.metadata.params !== undefined) {
+        eventController.setParams(update.metadata.params);
+      }
+
       // Update handle data progressively as it streams in
       if (update.metadata.handles) {
         // Capture historyKey now - by the time async processing completes,
@@ -202,24 +400,20 @@ export function NavigationProvider({
           store,
           matched: update.metadata.matched,
           isPartial: update.metadata.isPartial,
+          resolvedIds: update.metadata.resolvedIds,
           historyKey,
         }).catch((err) =>
-          console.error("[NavigationProvider] Error consuming handles:", err)
-        );
-      } else if (update.metadata.cachedHandleData) {
-        // For back/forward navigation from cache, restore the cached handleData
-        // This restores breadcrumbs to the exact state they were when the page was cached
-        eventController.setHandleData(
-          update.metadata.cachedHandleData,
-          update.metadata.matched,
-          false // full replace - restore entire cached state
+          console.error("[NavigationProvider] Error consuming handles:", err),
         );
       } else if (update.metadata.matched) {
-        // For cached navigations without handleData, update segmentOrder to clean up stale data
+        // cachedHandleData present -> full restore (back/forward); absent ->
+        // partial cleanup of segments no longer matched.
+        const cached = update.metadata.cachedHandleData;
         eventController.setHandleData(
-          {}, // Empty data - all existing data not in matched will be cleaned up
+          cached ?? {},
           update.metadata.matched,
-          true // partial update - will clean up segments not in matched
+          cached === undefined,
+          cached === undefined ? update.metadata.resolvedIds : undefined,
         );
       }
     });
@@ -241,7 +435,11 @@ export function NavigationProvider({
   // Build the content tree
   let content = <RootErrorBoundary>{root}</RootErrorBoundary>;
 
-  // Wrap with ThemeProvider when theme is enabled
+  // Wrap with ThemeProvider when theme is enabled. The ThemeProvider is
+  // document-lifetime: its config comes from the initial load and does NOT
+  // swap on cross-app transitions, because the ThemeProvider sits above the
+  // segment tree and a smooth (no-reload) app switch cannot safely remount
+  // it. A new theme config only takes effect on a full document load.
   if (themeConfig) {
     content = (
       <ThemeProvider config={themeConfig} initialTheme={initialTheme}>
@@ -250,22 +448,12 @@ export function NavigationProvider({
     );
   }
 
-  // Build href context value from metadata (routeMap and routeName)
-  // This enables useHref() to resolve local route names with the current prefix
-  const hrefContextValue = useMemo<HrefContextValue | null>(() => {
-    const { routeMap, routeName } = payload.metadata || {};
-    if (!routeMap) return null;
-    return { routeMap, routeName };
-  }, [payload.metadata?.routeMap, payload.metadata?.routeName]);
-
-  // Wrap with HrefContext when routeMap is available
-  if (hrefContextValue) {
-    content = (
-      <HrefContext.Provider value={hrefContextValue}>
-        {content}
-      </HrefContext.Provider>
-    );
-  }
+  // Match SSR tree shape: NonceContext.Provider is always present so
+  // hydration sees the same component tree. Value is undefined on the
+  // client — CSP nonces are a server-side HTML concern.
+  content = (
+    <NonceContext.Provider value={undefined}>{content}</NonceContext.Provider>
+  );
 
   return (
     <NavigationStoreContext.Provider value={contextValue}>

package/src/browser/react/context.ts

@@ -41,6 +41,17 @@ export interface NavigationStoreContextValue {
    * @returns Promise that resolves when refresh is complete
    */
   refresh: () => Promise<void>;
+
+  /**
+   * App version from the initial server payload.
+   */
+  version: string | undefined;
+
+  /**
+   * URL prefix for all routes (from createRouter({ basename })).
+   * Used by Link and useRouter() to auto-prefix app-local paths.
+   */
+  basename: string | undefined;
 }
 
 /**

package/src/browser/react/filter-segment-order.ts

@@ -0,0 +1,55 @@
+/**
+ * Build the handle-collection segment order from a raw `matched` list.
+ *
+ * Two responsibilities:
+ *
+ * 1. Drop loader sub-ids ("D" followed by a digit, e.g. "M0L0D1.user") —
+ *    loaders never push handles.
+ *
+ * 2. Place each parallel slot id (contains ".@") immediately after its
+ *    parent layout/route id. Raw segment-resolution emission order does NOT
+ *    guarantee this: route-mounted parallels are resolved/pushed BEFORE the
+ *    route handler's segment is appended (see fresh.ts:resolveSegment for
+ *    routes, and revalidation.ts ~915-919), so matched can read
+ *    `[..., R0.@panel, R0]`. collectHandleData consumes segmentOrder verbatim
+ *    with later-wins semantics, so without normalization the route handler's
+ *    Meta would override the slot's more-specific Meta — backwards.
+ *
+ * Slot-id format is `<parentShortCode>.@<slotName>`; `parentShortCode` never
+ * contains ".@", so splitting at the first ".@" reliably yields the parent.
+ */
+export function filterSegmentOrder(matched: string[]): string[] {
+  const slotsByParent = new Map<string, string[]>();
+  const nonSlots: string[] = [];
+  const nonSlotSet = new Set<string>();
+
+  for (const id of matched) {
+    if (/D\d+\./.test(id)) continue;
+    const slotIdx = id.indexOf(".@");
+    if (slotIdx >= 0) {
+      const parent = id.slice(0, slotIdx);
+      const list = slotsByParent.get(parent);
+      if (list) {
+        list.push(id);
+      } else {
+        slotsByParent.set(parent, [id]);
+      }
+    } else {
+      nonSlots.push(id);
+      nonSlotSet.add(id);
+    }
+  }
+
+  const result: string[] = [];
+  for (const id of nonSlots) {
+    result.push(id);
+    const slots = slotsByParent.get(id);
+    if (slots) result.push(...slots);
+  }
+  // Defensive: any slot whose parent is missing from the filtered list still
+  // gets included rather than silently dropped. Shouldn't happen in practice.
+  for (const [parent, slots] of slotsByParent) {
+    if (!nonSlotSet.has(parent)) result.push(...slots);
+  }
+  return result;
+}

package/src/browser/react/index.ts

@@ -1,20 +1,27 @@
 // React exports for browser navigation
 
 // Hook with Zustand-style selectors
-export {
-  useNavigation,
-  type NavigationMethods,
-  type NavigationValue,
-} from "./use-navigation.js";
+export { useNavigation } from "./use-navigation.js";
+
+// Router actions hook (stable reference, no re-renders)
+export { useRouter } from "./use-router.js";
+
+// URL hooks
+export { usePathname } from "./use-pathname.js";
+export { useSearchParams } from "./use-search-params.js";
+export { useParams } from "./use-params.js";
 
 // Action state tracking hook
 export { useAction, type TrackedActionState } from "./use-action.js";
 
 // Segments state hook
-export { useSegments, initSegmentsSync, type SegmentsState } from "./use-segments.js";
+export { useSegments, type SegmentsState } from "./use-segments.js";
 
 // Handle data hook
-export { useHandle, initHandleDataSync } from "./use-handle.js";
+export { useHandle } from "./use-handle.js";
+
+// Mount-aware reverse hook
+export { useReverse } from "./use-reverse.js";
 
 // Client cache controls hook
 export {
@@ -35,11 +42,7 @@ export {
 } from "./context.js";
 
 // Link component
-export {
-  Link,
-  type LinkProps,
-  type PrefetchStrategy,
-} from "./Link.js";
+export { Link, type LinkProps, type PrefetchStrategy } from "./Link.js";
 
 // Link status hook
 export { useLinkStatus, type LinkStatus } from "./use-link-status.js";