@rangojs/router 0.0.0-experimental.259 → 0.0.0-experimental.26

package/src/browser/react/use-handle.ts

@@ -12,26 +12,7 @@ import type { Handle } from "../../handle.js";
 import { getCollectFn } from "../../handle.js";
 import type { HandleData } from "../types.js";
 import { NavigationStoreContext } from "./context.js";
-
-/**
- * SSR module-level state.
- * Populated by initHandleDataSync before React renders.
- * Used by useState initializer during SSR.
- */
-let ssrHandleData: HandleData = {};
-let ssrSegmentOrder: string[] = [];
-
-/**
- * Filter segment IDs to only include routes and layouts.
- * Excludes parallels (contain .@) and loaders (contain D followed by digit).
- */
-function filterSegmentOrder(matched: string[]): string[] {
-  return matched.filter((id) => {
-    if (id.includes(".@")) return false;
-    if (/D\d+\./.test(id)) return false;
-    return true;
-  });
-}
+import { shallowEqual } from "./shallow-equal.js";
 
 /**
  * Resolve the collect function for a handle.
@@ -86,45 +67,6 @@ function collectHandle<T, A>(
   return collect(segmentArrays);
 }
 
-/**
- * Shallow equality check for selector results.
- */
-function shallowEqual<T>(a: T, b: T): boolean {
-  if (Object.is(a, b)) return true;
-  if (
-    typeof a !== "object" ||
-    a === null ||
-    typeof b !== "object" ||
-    b === null
-  ) {
-    return false;
-  }
-  const keysA = Object.keys(a);
-  const keysB = Object.keys(b);
-  if (keysA.length !== keysB.length) return false;
-  for (const key of keysA) {
-    if (
-      !Object.hasOwn(b, key) ||
-      !Object.is((a as any)[key], (b as any)[key])
-    ) {
-      return false;
-    }
-  }
-  return true;
-}
-
-/**
- * Initialize handle data synchronously for SSR.
- * Called before rendering to populate state for useState initializer.
- *
- * @param data - Handle data from RSC payload
- * @param matched - Segment order for reduction
- */
-export function initHandleDataSync(data: HandleData, matched?: string[]): void {
-  ssrHandleData = data;
-  ssrSegmentOrder = filterSegmentOrder(matched ?? []);
-}
-
 /**
  * Hook to access collected handle data.
  *
@@ -154,11 +96,10 @@ export function useHandle<T, A, S>(
 ): A | S {
   const ctx = useContext(NavigationStoreContext);
 
-  // Initial state from SSR module state or event controller
+  // Initial state from context event controller, or empty fallback without provider.
   const [value, setValue] = useState<A | S>(() => {
-    // During SSR, use module-level state
-    if (typeof document === "undefined" || !ctx) {
-      const collected = collectHandle(handle, ssrHandleData, ssrSegmentOrder);
+    if (!ctx) {
+      const collected = collectHandle(handle, {}, []);
       return selector ? selector(collected) : collected;
     }
 
@@ -173,7 +114,7 @@ export function useHandle<T, A, S>(
   const prevValueRef = useRef(value);
   prevValueRef.current = value;
 
-  // Memoize selector ref
+  // Ref keeps the latest selector without re-subscribing on every render.
   const selectorRef = useRef(selector);
   selectorRef.current = selector;
 
@@ -181,6 +122,22 @@ export function useHandle<T, A, S>(
   useEffect(() => {
     if (!ctx) return;
 
+    // Sync current state for the (possibly new) handle so that switching
+    // handles on an idle page doesn't leave stale data from the old handle.
+    const currentHandleState = ctx.eventController.getHandleState();
+    const currentCollected = collectHandle(
+      handle,
+      currentHandleState.data,
+      currentHandleState.segmentOrder,
+    );
+    const currentValue = selectorRef.current
+      ? selectorRef.current(currentCollected)
+      : currentCollected;
+    if (!shallowEqual(currentValue, prevValueRef.current)) {
+      prevValueRef.current = currentValue;
+      setValue(currentValue);
+    }
+
     return ctx.eventController.subscribeToHandles(() => {
       const state = ctx.eventController.getHandleState();
       const isAction =

package/src/browser/react/use-navigation.ts

@@ -9,36 +9,10 @@ import {
   useRef,
 } from "react";
 import { NavigationStoreContext } from "./context.js";
+import { shallowEqual } from "./shallow-equal.js";
 import type { PublicNavigationState } from "../types.js";
 import type { DerivedNavigationState } from "../event-controller.js";
 
-/**
- * Shallow equality check for selector results
- */
-function shallowEqual<T>(a: T, b: T): boolean {
-  if (Object.is(a, b)) return true;
-  if (
-    typeof a !== "object" ||
-    a === null ||
-    typeof b !== "object" ||
-    b === null
-  ) {
-    return false;
-  }
-  const keysA = Object.keys(a);
-  const keysB = Object.keys(b);
-  if (keysA.length !== keysB.length) return false;
-  for (const key of keysA) {
-    if (
-      !Object.hasOwn(b, key) ||
-      !Object.is((a as any)[key], (b as any)[key])
-    ) {
-      return false;
-    }
-  }
-  return true;
-}
-
 /**
  * Convert derived state to public version (strips inflightActions)
  */
@@ -69,9 +43,7 @@ export function useNavigation<T>(
   const ctx = useContext(NavigationStoreContext);
 
   if (!ctx) {
-    throw new Error(
-      "useNavigation must be used within NavigationStoreContext.Provider",
-    );
+    throw new Error("useNavigation must be used within NavigationProvider");
   }
 
   // Base state for useOptimistic
@@ -84,8 +56,11 @@ export function useNavigation<T>(
   // useOptimistic allows immediate updates during transitions/actions
   const [value, setOptimisticValue] = useOptimistic(baseValue);
 
-  // Store selector in a ref to avoid re-subscribing when an inline
-  // function is passed (its identity changes every render).
+  // Store selector in a ref so the subscription callback always uses the
+  // latest selector without re-subscribing on every render (inline functions
+  // have a new identity each render). This is event-driven by design: the
+  // value updates when the store emits, not when the selector changes.
+  // Between events there is nothing new to select from.
   const selectorRef = useRef(selector);
   selectorRef.current = selector;
 

package/src/browser/react/use-params.ts

@@ -2,37 +2,7 @@
 
 import { useContext, useState, useEffect, useRef } from "react";
 import { NavigationStoreContext } from "./context.js";
-import { getSsrParams } from "./use-segments.js";
-
-/**
- * Shallow equality check for selector results
- */
-function shallowEqual<T>(a: T, b: T): boolean {
-  if (Object.is(a, b)) return true;
-  if (
-    typeof a !== "object" ||
-    a === null ||
-    typeof b !== "object" ||
-    b === null
-  ) {
-    return false;
-  }
-  const keysA = Object.keys(a);
-  const keysB = Object.keys(b);
-  if (keysA.length !== keysB.length) return false;
-  for (const key of keysA) {
-    if (
-      !Object.hasOwn(b, key) ||
-      !Object.is(
-        (a as Record<string, unknown>)[key],
-        (b as Record<string, unknown>)[key],
-      )
-    ) {
-      return false;
-    }
-  }
-  return true;
-}
+import { shallowEqual } from "./shallow-equal.js";
 
 /**
  * Hook to access the current route params.
@@ -60,15 +30,16 @@ export function useParams<T>(
   const ctx = useContext(NavigationStoreContext);
 
   const [value, setValue] = useState<T | Record<string, string>>(() => {
-    if (typeof document === "undefined" || !ctx) {
-      const ssrParams = getSsrParams();
-      return selector ? selector(ssrParams) : ssrParams;
+    if (!ctx) {
+      return selector ? selector({}) : {};
     }
     const params = ctx.eventController.getParams();
     return selector ? selector(params) : params;
   });
 
   const prevValue = useRef(value);
+  // Ref keeps the latest selector without re-subscribing. Event-driven by
+  // design: value updates on store events, not on selector identity change.
   const selectorRef = useRef(selector);
   selectorRef.current = selector;
 

package/src/browser/react/use-pathname.ts

@@ -2,7 +2,6 @@
 
 import { useContext, useState, useEffect, useRef } from "react";
 import { NavigationStoreContext } from "./context.js";
-import { getSsrPathname } from "./use-segments.js";
 
 /**
  * Hook to access the current pathname.
@@ -20,8 +19,8 @@ export function usePathname(): string {
   const ctx = useContext(NavigationStoreContext);
 
   const [pathname, setPathname] = useState<string>(() => {
-    if (typeof document === "undefined" || !ctx) {
-      return getSsrPathname();
+    if (!ctx) {
+      return "/";
     }
     return (ctx.eventController.getState().location as URL).pathname;
   });

package/src/browser/react/use-router.ts

@@ -2,7 +2,7 @@
 
 import { useContext, useMemo } from "react";
 import { NavigationStoreContext } from "./context.js";
-import { prefetchUrl } from "./prefetch.js";
+import { prefetchDirect } from "../prefetch/fetch.js";
 import type { RouterInstance, RouterNavigateOptions } from "../types.js";
 
 /**
@@ -25,9 +25,7 @@ export function useRouter(): RouterInstance {
   const ctx = useContext(NavigationStoreContext);
 
   if (!ctx) {
-    throw new Error(
-      "useRouter must be used within NavigationStoreContext.Provider",
-    );
+    throw new Error("useRouter must be used within NavigationProvider");
   }
 
   // Stable reference: ctx is itself stable (NavigationProvider memoizes with [])
@@ -46,10 +44,9 @@ export function useRouter(): RouterInstance {
       },
 
       prefetch(url: string): void {
-        // Guard for SSR where store is null
         const segmentState = ctx.store?.getSegmentState();
         if (segmentState) {
-          prefetchUrl(url, segmentState.currentSegmentIds);
+          prefetchDirect(url, segmentState.currentSegmentIds, ctx.version);
         }
       },
 

package/src/browser/react/use-search-params.ts

@@ -41,7 +41,8 @@ export function useSearchParams(): ReadonlyURLSearchParams {
       const nextSearch = location.searchParams.toString();
       if (nextSearch !== prevSearch.current) {
         prevSearch.current = nextSearch;
-        setSearchParams(location.searchParams);
+        // Create a snapshot so callers cannot mutate the source URLSearchParams
+        setSearchParams(new URLSearchParams(nextSearch));
       }
     };
 

package/src/browser/react/use-segments.ts

@@ -2,6 +2,7 @@
 
 import { useContext, useState, useEffect, useRef } from "react";
 import { NavigationStoreContext } from "./context.js";
+import { shallowEqual } from "./shallow-equal.js";
 
 /**
  * Segments state returned by useSegments hook
@@ -15,86 +16,6 @@ export interface SegmentsState {
   location: URL;
 }
 
-/**
- * SSR module-level state.
- * Populated by initSegmentsSync before React renders.
- * Used by useState initializer during SSR.
- */
-let ssrSegmentOrder: string[] = [];
-let ssrPathname: string = "/";
-let ssrParams: Record<string, string> = {};
-
-/**
- * Filter segment IDs to only include routes and layouts.
- * Excludes parallels (contain .@) and loaders (contain D followed by digit).
- */
-function filterSegmentOrder(matched: string[]): string[] {
-  return matched.filter((id) => {
-    if (id.includes(".@")) return false;
-    if (/D\d+\./.test(id)) return false;
-    return true;
-  });
-}
-
-/**
- * Initialize segments data synchronously for SSR.
- * Called before rendering to populate state for useState initializer.
- *
- * @param matched - Segment order from RSC metadata
- * @param pathname - Current pathname
- * @param params - Merged route params
- */
-export function initSegmentsSync(
-  matched?: string[],
-  pathname?: string,
-  params?: Record<string, string>,
-): void {
-  ssrSegmentOrder = filterSegmentOrder(matched ?? []);
-  ssrPathname = pathname ?? "/";
-  ssrParams = params ?? {};
-}
-
-/**
- * Get SSR params for use-params hook initialization.
- */
-export function getSsrParams(): Record<string, string> {
-  return ssrParams;
-}
-
-/**
- * Get SSR pathname for use-pathname hook initialization.
- */
-export function getSsrPathname(): string {
-  return ssrPathname;
-}
-
-/**
- * Shallow equality check for selector results
- */
-function shallowEqual<T>(a: T, b: T): boolean {
-  if (Object.is(a, b)) return true;
-  if (
-    typeof a !== "object" ||
-    a === null ||
-    typeof b !== "object" ||
-    b === null
-  ) {
-    return false;
-  }
-  const keysA = Object.keys(a);
-  const keysB = Object.keys(b);
-  if (keysA.length !== keysB.length) return false;
-  for (const key of keysA) {
-    if (
-      !Object.hasOwn(b, key) ||
-      !Object.is((a as any)[key], (b as any)[key])
-    ) {
-      return false;
-    }
-  }
-  return true;
-}
-
 /**
  * Parse pathname into path segments
  * /shop/products/123 → ["shop", "products", "123"]
@@ -117,18 +38,6 @@ function buildSegmentsState(
   };
 }
 
-/**
- * Build SSR state from module-level variables
- */
-function buildSsrState(): SegmentsState {
-  const location = new URL(ssrPathname, "http://localhost");
-  return {
-    path: parsePathname(ssrPathname),
-    segmentIds: ssrSegmentOrder,
-    location,
-  };
-}
-
 /**
  * Hook to access current route segments with optional selector for performance
  *
@@ -152,50 +61,99 @@ export function useSegments<T>(
 ): T | SegmentsState {
   const ctx = useContext(NavigationStoreContext);
 
-  // Build initial state from SSR module state or event controller
+  // Build initial state from event controller when context exists.
+  // Inlined rather than calling recompute() because the segmentsCache ref
+  // is not yet initialized during the useState initializer.
   const [state, setState] = useState<T | SegmentsState>(() => {
-    // During SSR or when no context, use module-level SSR state
-    if (typeof document === "undefined" || !ctx) {
-      const ssrState = buildSsrState();
-      return selector ? selector(ssrState) : ssrState;
+    if (!ctx) {
+      const fallbackLocation = new URL("/", "http://localhost");
+      const fallbackState = buildSegmentsState(fallbackLocation, []);
+      return selector ? selector(fallbackState) : fallbackState;
     }
-    // On client with context, use event controller state
-    const navState = ctx.eventController.getState();
+    const location = ctx.eventController.getLocation();
     const handleState = ctx.eventController.getHandleState();
     const segmentsState = buildSegmentsState(
-      navState.location as URL,
+      location as URL,
       handleState.segmentOrder,
     );
     return selector ? selector(segmentsState) : segmentsState;
   });
 
   const prevState = useRef(state);
+  const selectorRef = useRef(selector);
+  selectorRef.current = selector;
+
+  // Track selector identity to detect when the selector function changes.
+  // Only then do we eagerly recompute during render to avoid staleness.
+  // Without this guard, no-selector mode causes infinite re-renders because
+  // buildSegmentsState creates fresh arrays that fail Object.is checks.
+  const prevSelectorIdentity = useRef(selector);
+
+  // Cache SegmentsState to stabilize nested references (path, segmentIds
+  // arrays) so selectors returning composite values don't cause spurious
+  // render-time setState calls.
+  const segmentsCache = useRef<{
+    location: URL;
+    segmentOrder: string[];
+    state: SegmentsState;
+  } | null>(null);
+
+  // Recompute selected value from current store state and apply selector.
+  // Shared by the render-time eager check and the subscription callback.
+  function recompute(
+    sel: ((state: SegmentsState) => T) | undefined,
+  ): T | SegmentsState {
+    const location = ctx!.eventController.getLocation();
+    const handleState = ctx!.eventController.getHandleState();
+
+    // Reuse cached state when inputs haven't changed by reference,
+    // keeping array/object references stable for composite selectors.
+    const cache = segmentsCache.current;
+    let segmentsState: SegmentsState;
+    if (
+      cache &&
+      cache.location === location &&
+      cache.segmentOrder === handleState.segmentOrder
+    ) {
+      segmentsState = cache.state;
+    } else {
+      segmentsState = buildSegmentsState(
+        location as URL,
+        handleState.segmentOrder,
+      );
+      segmentsCache.current = {
+        location: location as URL,
+        segmentOrder: handleState.segmentOrder,
+        state: segmentsState,
+      };
+    }
+    return sel ? sel(segmentsState) : segmentsState;
+  }
+
+  if (ctx && selector !== prevSelectorIdentity.current) {
+    prevSelectorIdentity.current = selector;
+    const nextSelected = recompute(selector);
+    if (!shallowEqual(nextSelected, prevState.current)) {
+      prevState.current = nextSelected;
+      setState(nextSelected);
+    }
+  }
 
-  // Subscribe to both navigation state and handle state changes
+  // Subscribe to store changes. The eager block above handles selector
+  // changes and SSR drift, so no initial updateState() call is needed.
   useEffect(() => {
     if (!ctx) {
       return;
     }
 
     const updateState = () => {
-      const navState = ctx.eventController.getState();
-      const handleState = ctx.eventController.getHandleState();
-      const segmentsState = buildSegmentsState(
-        navState.location as URL,
-        handleState.segmentOrder,
-      );
-      const nextSelected = selector ? selector(segmentsState) : segmentsState;
-
+      const nextSelected = recompute(selectorRef.current);
       if (!shallowEqual(nextSelected, prevState.current)) {
         prevState.current = nextSelected;
         setState(nextSelected);
       }
     };
 
-    // Initial update in case SSR state differs from client state
-    updateState();
-
-    // Subscribe to both state sources
     const unsubscribeNav = ctx.eventController.subscribe(updateState);
     const unsubscribeHandles =
       ctx.eventController.subscribeToHandles(updateState);
@@ -204,7 +162,10 @@ export function useSegments<T>(
       unsubscribeNav();
       unsubscribeHandles();
     };
-  }, [selector]);
+    // Stable subscription: selector changes are handled via selectorRef,
+    // state comparison uses prevState ref. No re-subscribe needed.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   return state as T | SegmentsState;
 }

package/src/browser/response-adapter.ts

@@ -0,0 +1,73 @@
+import { validateRedirectOrigin } from "./validate-redirect-origin.js";
+
+type HeaderResult = { url: string } | "blocked" | null;
+
+/**
+ * Extract and validate an RSC response header URL (X-RSC-Reload, X-RSC-Redirect).
+ * Returns { url } if valid, "blocked" if present but invalid origin, null if absent.
+ */
+export function extractRscHeaderUrl(
+  response: Response,
+  header: string,
+): HeaderResult {
+  const raw = response.headers.get(header);
+  if (!raw) return null;
+  const url = validateRedirectOrigin(raw, window.location.origin);
+  return url ? { url } : "blocked";
+}
+
+/**
+ * Empty 200 response that won't choke Flight parsing.
+ * Used when a header URL is blocked by origin validation.
+ */
+export function emptyResponse(): Response {
+  return new Response(null, { status: 200 });
+}
+
+/**
+ * Tee a response body for RSC parsing and stream completion tracking.
+ * Returns a new Response with one branch; the other is consumed to detect
+ * end-of-stream, calling onComplete when done.
+ *
+ * If the response has no body, onComplete fires synchronously.
+ * If signal is provided, an abort cancels the tracking reader.
+ */
+export function teeWithCompletion(
+  response: Response,
+  onComplete: () => void,
+  signal?: AbortSignal,
+): Response {
+  if (!response.body) {
+    onComplete();
+    return response;
+  }
+
+  const [rscStream, trackingStream] = response.body.tee();
+
+  (async () => {
+    const reader = trackingStream.getReader();
+    const onAbort = signal ? reader.cancel.bind(reader) : undefined;
+    if (onAbort) signal!.addEventListener("abort", onAbort, { once: true });
+    try {
+      while (true) {
+        const { done } = await reader.read();
+        if (done) break;
+      }
+    } finally {
+      if (onAbort) signal!.removeEventListener("abort", onAbort);
+      reader.releaseLock();
+      onComplete();
+    }
+  })().catch((error) => {
+    if (!signal?.aborted) {
+      console.error("[Browser] Error reading tracking stream:", error);
+    }
+    onComplete();
+  });
+
+  return new Response(rscStream, {
+    headers: response.headers,
+    status: response.status,
+    statusText: response.statusText,
+  });
+}