@rangojs/router 0.0.0-experimental.10

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

@@ -0,0 +1,188 @@
+"use client";
+
+import { useContext, useState, useEffect, useRef } from "react";
+import { NavigationStoreContext } from "./context.js";
+
+/**
+ * Segments state returned by useSegments hook
+ */
+export interface SegmentsState {
+  /** URL path segments (e.g., /shop/products/123 → ["shop", "products", "123"]) */
+  path: readonly string[];
+  /** Matched segment IDs in order (layouts and routes only, e.g., ["L0", "L0L1", "L0L1R0"]) */
+  segmentIds: readonly string[];
+  /** Current URL location */
+  location: URL;
+}
+
+/**
+ * SSR module-level state.
+ * Populated by initSegmentsSync before React renders.
+ * Used by useState initializer during SSR.
+ */
+let ssrSegmentOrder: string[] = [];
+let ssrPathname: 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
+ */
+export function initSegmentsSync(matched?: string[], pathname?: string): void {
+  ssrSegmentOrder = filterSegmentOrder(matched ?? []);
+  ssrPathname = pathname ?? "/";
+}
+
+/**
+ * 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"]
+ */
+function parsePathname(pathname: string): string[] {
+  return pathname.split("/").filter(Boolean);
+}
+
+/**
+ * Build segments state from event controller
+ */
+function buildSegmentsState(
+  location: URL,
+  segmentOrder: string[]
+): SegmentsState {
+  return {
+    path: parsePathname(location.pathname),
+    segmentIds: segmentOrder,
+    location,
+  };
+}
+
+/**
+ * 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
+ *
+ * Provides information about the current URL path and matched route segments.
+ * Uses the event controller for reactive state management.
+ *
+ * @example
+ * ```tsx
+ * // Get full segments state
+ * const { path, segmentIds, location } = useSegments();
+ *
+ * // Use selector for specific values (better performance)
+ * const path = useSegments(s => s.path);
+ * const isShopRoute = useSegments(s => s.path[0] === "shop");
+ * ```
+ */
+export function useSegments(): SegmentsState;
+export function useSegments<T>(selector: (state: SegmentsState) => T): T;
+export function useSegments<T>(
+  selector?: (state: SegmentsState) => T
+): T | SegmentsState {
+  const ctx = useContext(NavigationStoreContext);
+
+  // Build initial state from SSR module state or event controller
+  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;
+    }
+    // On client with context, use event controller state
+    const navState = ctx.eventController.getState();
+    const handleState = ctx.eventController.getHandleState();
+    const segmentsState = buildSegmentsState(
+      navState.location as URL,
+      handleState.segmentOrder
+    );
+    return selector ? selector(segmentsState) : segmentsState;
+  });
+
+  const prevState = useRef(state);
+
+  // Subscribe to both navigation state and handle state changes
+  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;
+
+      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);
+
+    return () => {
+      unsubscribeNav();
+      unsubscribeHandles();
+    };
+  }, [selector]);
+
+  return state as T | SegmentsState;
+}

package/src/browser/request-controller.ts

@@ -0,0 +1,164 @@
+import type { RequestController, DisposableAbortController } from "./types.js";
+
+// Polyfill Symbol.dispose for Safari and older browsers
+if (typeof Symbol.dispose === "undefined") {
+  (Symbol as any).dispose = Symbol("Symbol.dispose");
+}
+
+/**
+ * Create a request controller for managing concurrent abort controllers
+ *
+ * This utility helps manage concurrent navigation requests by providing
+ * a way to abort all pending requests when a new navigation starts.
+ *
+ * @returns RequestController instance
+ *
+ * @example
+ * ```typescript
+ * const controller = createRequestController();
+ *
+ * // Start a new request
+ * const abortController = controller.create();
+ * fetch(url, { signal: abortController.signal });
+ *
+ * // Abort all pending requests (e.g., when starting new navigation)
+ * controller.abortAll();
+ *
+ * // Clean up completed request
+ * controller.remove(abortController);
+ * ```
+ */
+export function createRequestController(): RequestController {
+  // Navigation controllers - aborted on new navigation
+  // Using WeakRef to allow GC if controller is no longer referenced elsewhere
+  const controllers: WeakRef<AbortController>[] = [];
+  // Action controllers - NOT aborted by navigation, only by errors
+  const actionControllers: WeakRef<AbortController>[] = [];
+
+  /**
+   * Remove stale (garbage collected) refs from an array
+   */
+  function pruneStaleRefs(refs: WeakRef<AbortController>[]): void {
+    for (let i = refs.length - 1; i >= 0; i--) {
+      if (!refs[i].deref()) {
+        refs.splice(i, 1);
+      }
+    }
+  }
+
+  return {
+    /**
+     * Create a new abort controller and track it for navigation
+     *
+     * @returns A new AbortController
+     */
+    create(): AbortController {
+      const controller = new AbortController();
+      controllers.push(new WeakRef(controller));
+      console.log(
+        `[Browser] Created abort controller, total: ${controllers.length}`,
+      );
+      return controller;
+    },
+
+    /**
+     * Create a disposable abort controller for navigation use with `using` keyword
+     *
+     * The controller will be automatically removed from tracking when
+     * it goes out of scope, regardless of how the scope is exited.
+     *
+     * @returns A DisposableAbortController
+     *
+     * @example
+     * ```typescript
+     * async function handleNavigation() {
+     *   requestController.abortAll();
+     *   using { controller } = requestController.createDisposable();
+     *   // ... use controller.signal ...
+     *   // controller is automatically removed on scope exit
+     * }
+     * ```
+     */
+    createDisposable(): DisposableAbortController {
+      const controller = this.create();
+      return {
+        controller,
+        [Symbol.dispose]: () => {
+          this.remove(controller);
+        },
+      };
+    },
+
+    /**
+     * Create a disposable abort controller for actions
+     *
+     * Action controllers are NOT aborted by navigation - they complete
+     * independently. Only aborted by abortAllActions() on error.
+     *
+     * @returns A DisposableAbortController
+     */
+    createActionDisposable(): DisposableAbortController {
+      const controller = new AbortController();
+      const ref = new WeakRef(controller);
+      actionControllers.push(ref);
+      console.log(
+        `[Browser] Created action controller, total: ${actionControllers.length}`,
+      );
+      return {
+        controller,
+        [Symbol.dispose]: () => {
+          const index = actionControllers.indexOf(ref);
+          if (index !== -1) {
+            actionControllers.splice(index, 1);
+            console.log(
+              `[Browser] Removed action controller, remaining: ${actionControllers.length}`,
+            );
+          }
+        },
+      };
+    },
+
+    /**
+     * Abort all navigation controllers (NOT actions)
+     *
+     * Called when starting new navigation. Actions continue
+     * to complete in the background.
+     */
+    abortAll(): void {
+      controllers.forEach((ref) => ref.deref()?.abort());
+      controllers.length = 0;
+      console.log(`[Browser] Aborted all navigation controllers`);
+    },
+
+    /**
+     * Abort all action controllers
+     *
+     * Called when an action error occurs - prevents other actions
+     * from completing and overwriting the error UI.
+     */
+    abortAllActions(): void {
+      actionControllers.forEach((ref) => ref.deref()?.abort());
+      actionControllers.length = 0;
+      console.log(`[Browser] Aborted all action controllers`);
+    },
+
+    /**
+     * Remove a specific controller from tracking
+     *
+     * Call this when a request completes successfully.
+     *
+     * @param controller - The controller to remove
+     */
+    remove(controller: AbortController): void {
+      // Prune any stale refs while searching
+      pruneStaleRefs(controllers);
+      const index = controllers.findIndex((ref) => ref.deref() === controller);
+      if (index !== -1) {
+        controllers.splice(index, 1);
+        console.log(
+          `[Browser] Removed abort controller, remaining: ${controllers.length}`,
+        );
+      }
+    },
+  };
+}

package/src/browser/rsc-router.tsx

@@ -0,0 +1,352 @@
+import React from "react";
+import {
+  renderSegments as baseRenderSegments,
+  type RenderSegmentsOptions,
+} from "../segment-system.js";
+import {
+  createNavigationStore,
+  generateHistoryKey,
+} from "./navigation-store.js";
+import { createEventController } from "./event-controller.js";
+import { createNavigationClient } from "./navigation-client.js";
+import { createServerActionBridge } from "./server-action-bridge.js";
+import { createNavigationBridge } from "./navigation-bridge.js";
+import { NavigationProvider, initHandleDataSync, initSegmentsSync } from "./react/index.js";
+import { initThemeConfigSync } from "../theme/theme-context.js";
+import type {
+  RscPayload,
+  RscBrowserDependencies,
+  ResolvedSegment,
+  NavigationStore,
+  NavigationBridge,
+} from "./types.js";
+import type { EventController } from "./event-controller.js";
+import type { ResolvedThemeConfig, Theme } from "../theme/types.js";
+
+// Vite HMR types are provided by vite/client
+
+/**
+ * Options for initializing the browser app
+ */
+export interface InitBrowserAppOptions {
+  /**
+   * RSC stream containing the initial payload (from rsc-html-stream/client)
+   */
+  rscStream: ReadableStream<Uint8Array>;
+
+  /**
+   * RSC browser dependencies from @vitejs/plugin-rsc/browser
+   */
+  deps: RscBrowserDependencies;
+
+  /**
+   * Optional store configuration
+   */
+  storeOptions?: {
+    /**
+     * Maximum number of history entries to cache
+     * @default 10
+     */
+    cacheSize?: number;
+  };
+
+  /**
+   * Enable global link interception for SPA navigation.
+   * When enabled, clicks on same-origin anchor elements are intercepted
+   * and handled via client-side navigation instead of full page loads.
+   *
+   * Links rendered with the Link component handle their own navigation
+   * regardless of this setting.
+   *
+   * Set to false to disable global interception and rely solely on
+   * Link components for SPA navigation.
+   *
+   * @default true
+   */
+  linkInterception?: boolean;
+
+  /**
+   * Theme configuration from router.
+   * When provided, enables theme support via useTheme hook.
+   * Pass router.themeConfig here to enable theme features.
+   *
+   * @example
+   * ```tsx
+   * import { router } from "./router.js";
+   *
+   * await initBrowserApp({
+   *   rscStream,
+   *   deps: rscBrowser,
+   *   themeConfig: router.themeConfig,
+   *   initialTheme: document.documentElement.className.includes("dark") ? "dark" : "light",
+   * });
+   * ```
+   */
+  themeConfig?: ResolvedThemeConfig | null;
+
+  /**
+   * Initial theme from server (typically read from cookie).
+   * Only used when themeConfig is provided.
+   */
+  initialTheme?: Theme;
+
+}
+
+/**
+ * Result from initializing the browser app
+ */
+export interface BrowserAppContext {
+  store: NavigationStore;
+  eventController: EventController;
+  bridge: NavigationBridge;
+  initialPayload: RscPayload;
+  initialTree: React.ReactNode | Promise<React.ReactNode>;
+  /** Theme configuration (null if theme not enabled) */
+  themeConfig?: ResolvedThemeConfig | null;
+  /** Initial theme from server */
+  initialTheme?: Theme;
+  /** Whether connection warmup is enabled */
+  warmupEnabled?: boolean;
+}
+
+// Module-level state for the initialized app
+let browserAppContext: BrowserAppContext | null = null;
+
+/**
+ * Initialize the browser app. Must be called before rendering RSCRouter.
+ *
+ * This function:
+ * - Loads the initial RSC payload from the stream
+ * - Creates the navigation store and event controller
+ * - Sets up action and navigation bridges
+ * - Configures HMR support
+ */
+export async function initBrowserApp(
+  options: InitBrowserAppOptions
+): Promise<BrowserAppContext> {
+  const { rscStream, deps, storeOptions, linkInterception = true, themeConfig, initialTheme } = options;
+
+  // Load initial payload from SSR-injected __FLIGHT_DATA__
+  const initialPayload =
+    await deps.createFromReadableStream<RscPayload>(rscStream);
+
+  // Extract themeConfig and initialTheme from payload if not explicitly provided
+  // This allows virtual entries to work without importing the router
+  const effectiveThemeConfig = themeConfig ?? initialPayload.metadata?.themeConfig ?? null;
+  const effectiveInitialTheme = initialTheme ?? initialPayload.metadata?.initialTheme;
+
+  // Get initial segments and compute history key from current URL
+  const initialSegments = (initialPayload.metadata?.segments ??
+    []) as ResolvedSegment[];
+  const initialHistoryKey = generateHistoryKey(window.location.href);
+
+  // Create navigation store with history-based caching
+  const store = createNavigationStore({
+    initialLocation: window.location,
+    initialSegmentIds: initialSegments.map((s) => s.id),
+    initialHistoryKey,
+    initialSegments,
+    ...(storeOptions?.cacheSize && { cacheSize: storeOptions.cacheSize }),
+  });
+
+  // Create event controller for reactive state management
+  const eventController = createEventController({
+    initialLocation: new URL(window.location.href),
+  });
+
+  // Initialize segments state BEFORE hydration to avoid mismatch
+  initSegmentsSync(initialPayload.metadata?.matched, initialPayload.metadata?.pathname);
+
+  // Initialize theme config for MetaTags (must match SSR state)
+  initThemeConfigSync(effectiveThemeConfig);
+
+  // Initialize event controller with segment order (even without handles)
+  eventController.setHandleData({}, initialPayload.metadata?.matched);
+
+  // Initialize handle data from initial payload BEFORE hydration
+  // This ensures useHandle returns correct data during hydration to avoid mismatch
+  // The handles property is an async generator that yields on each push
+  if (initialPayload.metadata?.handles) {
+    const handlesGenerator = initialPayload.metadata.handles;
+    let lastHandleData: Record<string, Record<string, unknown[]>> = {};
+    for await (const handleData of handlesGenerator) {
+      lastHandleData = handleData;
+    }
+    // Initialize both event controller AND module-level SSR state for hydration compatibility
+    eventController.setHandleData(lastHandleData, initialPayload.metadata?.matched);
+    initHandleDataSync(lastHandleData, initialPayload.metadata?.matched);
+
+    // Update the initial cache entry with the processed handleData
+    // The cache entry was created by createNavigationStore but without handleData
+    store.updateCacheHandleData(initialHistoryKey, lastHandleData);
+  }
+
+
+  // Create composable utilities
+  const client = createNavigationClient(deps);
+
+  // Extract rootLayout and version from metadata for browser-side re-renders
+  const rootLayout = initialPayload.metadata?.rootLayout;
+  const version = initialPayload.metadata?.version;
+
+  // Create a bound renderSegments that includes rootLayout
+  const renderSegments = (
+    segments: ResolvedSegment[],
+    options?: RenderSegmentsOptions
+  ) => baseRenderSegments(segments, { ...options, rootLayout });
+
+  // Setup server action bridge
+  const actionBridge = createServerActionBridge({
+    store,
+    eventController,
+    client,
+    deps,
+    onUpdate: (update) => store.emitUpdate(update),
+    renderSegments,
+    version,
+  });
+  actionBridge.register();
+
+  // Setup navigation bridge
+  const navigationBridge = createNavigationBridge({
+    store,
+    eventController,
+    client,
+    onUpdate: (update) => store.emitUpdate(update),
+    renderSegments,
+    version,
+  });
+
+  // Optionally enable global link interception
+  if (linkInterception) {
+    navigationBridge.registerLinkInterception();
+  }
+
+  // Build initial tree with rootLayout
+  const initialTree = renderSegments(initialPayload.metadata!.segments);
+
+  // Setup HMR
+  if (import.meta.hot) {
+    import.meta.hot.on("rsc:update", async () => {
+      console.log("[RSCRouter] HMR: Server update, refetching RSC");
+
+      const handle = eventController.startNavigation(window.location.href, {
+        replace: true,
+      });
+      const streamingToken = handle.startStreaming();
+
+      try {
+        const { payload, streamComplete } = await client.fetchPartial({
+          targetUrl: window.location.href,
+          segmentIds: [],
+          previousUrl: store.getSegmentState().currentUrl,
+          hmr: true,
+        });
+
+        if (payload.metadata?.isPartial) {
+          const segments = payload.metadata.segments || [];
+          const matched = payload.metadata.matched || [];
+
+          store.setSegmentIds(matched);
+          store.setCurrentUrl(window.location.href);
+
+          const historyKey = generateHistoryKey(window.location.href);
+          store.setHistoryKey(historyKey);
+          const currentHandleData = eventController.getHandleState().data;
+          store.cacheSegmentsForHistory(historyKey, segments, currentHandleData);
+
+          store.emitUpdate({
+            root: renderSegments(segments),
+            metadata: payload.metadata,
+          });
+        }
+
+        await streamComplete;
+      } finally {
+        streamingToken.end();
+      }
+      handle.complete(new URL(window.location.href));
+      console.log("[RSCRouter] HMR: RSC stream complete");
+    });
+  }
+
+  // Store context for RSCRouter component
+  const context: BrowserAppContext = {
+    store,
+    eventController,
+    bridge: navigationBridge,
+    initialPayload,
+    initialTree,
+    themeConfig: effectiveThemeConfig,
+    initialTheme: effectiveInitialTheme,
+    warmupEnabled: initialPayload.metadata?.warmupEnabled ?? true,
+  };
+  browserAppContext = context;
+
+  return context;
+}
+
+/**
+ * Get the browser app context. Throws if initBrowserApp hasn't been called.
+ */
+export function getBrowserAppContext(): BrowserAppContext {
+  if (!browserAppContext) {
+    throw new Error(
+      "RSCRouter: initBrowserApp() must be called before rendering RSCRouter"
+    );
+  }
+  return browserAppContext;
+}
+
+/**
+ * Reset the browser app context (for testing)
+ */
+export function resetBrowserAppContext(): void {
+  browserAppContext = null;
+}
+
+/**
+ * Props for the RSCRouter component
+ */
+export interface RSCRouterProps {}
+
+/**
+ * RSCRouter component - renders the RSC router with all internal wiring.
+ *
+ * Must be called after initBrowserApp() has completed.
+ *
+ * @example
+ * ```tsx
+ * import { initBrowserApp, RSCRouter } from "rsc-router/browser";
+ * import { rscStream } from "rsc-html-stream/client";
+ * import * as rscBrowser from "@vitejs/plugin-rsc/browser";
+ *
+ * async function main() {
+ *   await initBrowserApp({ rscStream, deps: rscBrowser });
+ *
+ *   hydrateRoot(
+ *     document,
+ *     <React.StrictMode>
+ *       <RSCRouter />
+ *     </React.StrictMode>
+ *   );
+ * }
+ * main();
+ * ```
+ */
+export function RSCRouter(_props: RSCRouterProps): React.ReactElement {
+  const { store, eventController, bridge, initialPayload, initialTree, themeConfig, initialTheme, warmupEnabled } =
+    getBrowserAppContext();
+
+  return (
+    <NavigationProvider
+      store={store}
+      eventController={eventController}
+      initialPayload={{ ...initialPayload, root: initialTree }}
+      bridge={bridge}
+      themeConfig={themeConfig}
+      initialTheme={initialTheme}
+      warmupEnabled={warmupEnabled}
+    />
+  );
+}