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

package/src/segment-system.tsx

@@ -1,53 +1,62 @@
+import * as React from "react";
 import { createElement, type ReactNode, type ComponentType } from "react";
 import { OutletProvider } from "./client.js";
-import { HrefProvider } from "./browser/react/use-href.js";
-import type {
-  ResolvedSegment,
-  LoaderDataResult,
-  RootLayoutProps,
-} from "./types.js";
-import { isLoaderDataResult } from "./types.js";
+import { MountContextProvider } from "./browser/react/mount-context.js";
+import type { ResolvedSegment, RootLayoutProps } from "./types.js";
+import { decodeLoaderResults } from "./decode-loader-results.js";
 import { invariant } from "./errors.js";
 import {
   RouteContentWrapper,
   LoaderBoundary,
 } from "./route-content-wrapper.js";
 import { RootErrorBoundary } from "./root-error-boundary.js";
+import { getMemoizedContentPromise } from "./segment-content-promise.js";
+import { getMemoizedLoaderPromise } from "./segment-loader-promise.js";
 
-/**
- * Resolve loader data from raw results, unwrapping LoaderDataResult wrappers
- */
-function resolveLoaderData(
-  resolvedData: any[],
-  loaderIds: string[],
-): { loaderData: Record<string, any>; errorFallback: ReactNode } {
-  const loaderData: Record<string, any> = {};
-  let errorFallback: ReactNode = null;
-
-  for (let i = 0; i < loaderIds.length; i++) {
-    const id = loaderIds[i];
-    const result = resolvedData[i];
-
-    if (!isLoaderDataResult(result)) {
-      // Legacy format - direct data
-      loaderData[id] = result;
+// ViewTransition is only available in React experimental.
+// Access via namespace import to avoid compile-time errors on stable React.
+const ReactViewTransition: any =
+  "ViewTransition" in React ? (React as any).ViewTransition : null;
+
+function restoreParallelLoaderMarkers(
+  segments: ResolvedSegment[],
+): ResolvedSegment[] {
+  const parallelLoadingByNamespace = new Map<string, ReactNode>();
+  let nextSegments: ResolvedSegment[] | null = null;
+
+  for (let i = 0; i < segments.length; i++) {
+    const segment = segments[i];
+
+    if (segment.type === "parallel") {
+      if (
+        segment.namespace &&
+        segment.loading !== undefined &&
+        segment.loading !== null &&
+        segment.loading !== false
+      ) {
+        parallelLoadingByNamespace.set(segment.namespace, segment.loading);
+      }
       continue;
     }
 
-    if (result.ok) {
-      loaderData[id] = result.data;
+    if (segment.type !== "loader" || segment.parallelLoading !== undefined) {
       continue;
     }
 
-    // Error case
-    if (result.fallback) {
-      errorFallback = result.fallback;
-    } else {
-      throw new Error(result.error.message);
+    const parallelLoading = segment.namespace
+      ? parallelLoadingByNamespace.get(segment.namespace)
+      : undefined;
+    if (parallelLoading === undefined) {
+      continue;
+    }
+
+    if (!nextSegments) {
+      nextSegments = segments.slice();
     }
+    nextSegments[i] = { ...segment, parallelLoading };
   }
 
-  return { loaderData, errorFallback };
+  return nextSegments ?? segments;
 }
 
 /**
@@ -84,18 +93,50 @@ export interface RenderSegmentsOptions {
    * preventing the app shell from unmounting during errors (avoids FOUC).
    */
   rootLayout?: ComponentType<RootLayoutProps>;
+}
 
-  /**
-   * Route map for useHref() during SSR.
-   * Maps route names to URL patterns.
-   */
-  routeMap?: Record<string, string>;
+function createViewTransitionBoundary(
+  transition: NonNullable<ResolvedSegment["transition"]>,
+  children: ReactNode,
+): ReactNode {
+  // `viewTransition` is a router-specific flag (boundary opt-out), not a React
+  // <ViewTransition> prop — strip it so it never reaches React.
+  const { viewTransition: _viewTransition, ...vtProps } = transition;
+  return createElement(ReactViewTransition, {
+    ...vtProps,
+    children,
+  });
+}
 
-  /**
-   * Current matched route name for useHref() during SSR.
-   * Used for local name resolution.
-   */
-  routeName?: string;
+function wrapDefaultOutletContent(
+  content: ReactNode,
+  transition: NonNullable<ResolvedSegment["transition"]>,
+): ReactNode {
+  if (!React.isValidElement(content)) {
+    return createViewTransitionBoundary(transition, content);
+  }
+
+  const props = content.props as any;
+
+  if (content.type === MountContextProvider) {
+    return React.cloneElement(content, {
+      children: wrapDefaultOutletContent(props.children, transition),
+    } as any);
+  }
+
+  if (content.type === OutletProvider && props.segment?.type === "layout") {
+    return React.cloneElement(content, {
+      content: wrapDefaultOutletContent(props.content, transition),
+    } as any);
+  }
+
+  if (content.type === LoaderBoundary && props.segment?.type === "layout") {
+    return React.cloneElement(content, {
+      outletContent: wrapDefaultOutletContent(props.outletContent, transition),
+    } as any);
+  }
+
+  return createViewTransitionBoundary(transition, content);
 }
 
 /**
@@ -146,10 +187,13 @@ export async function renderSegments(
     interceptSegments,
     forceAwait,
     rootLayout: RootLayout,
-    routeMap,
-    routeName,
   } = options || {};
+
   const temporalLazyRefs: Promise<any>[] = [];
+  const normalizedSegments = restoreParallelLoaderMarkers(segments);
+  const normalizedInterceptSegments = interceptSegments
+    ? restoreParallelLoaderMarkers(interceptSegments)
+    : undefined;
 
   /**
    * Registers promises from lazy/async components for awaiting.
@@ -174,7 +218,26 @@ export async function renderSegments(
     );
   }
   // Separate segments by type, passing intercept segments for explicit injection
-  const tree = segmentTreeWalk(segments, interceptSegments);
+  const tree = segmentTreeWalk(normalizedSegments, normalizedInterceptSegments);
+
+  // A route is "in a transition scope" when its own segment OR any layout in
+  // its matched chain declares transition(). Both transition() forms land here:
+  // the per-route item form sets transition on the route entry, and the block
+  // wrapper form sets it on a transparent ancestor layout (dsl-helpers.ts). When
+  // in scope, the route and its route-owned layouts use param-agnostic keys so a
+  // same-route navigation reconciles (holds content) instead of remounting. The
+  // value is a static property of the route's position in the tree, so it is the
+  // same on every render of that route (SSR, navigation, action) — the keys
+  // never drift. Cross-route navigation still remounts: different routes have
+  // different segment ids regardless of transition scope.
+  const inTransitionScope = normalizedSegments.some(
+    (s) =>
+      s.transition != null &&
+      (s.type === "layout" ||
+        s.type === "route" ||
+        s.type === "error" ||
+        s.type === "notFound"),
+  );
   // Render content segments as siblings
   let content: ReactNode = null;
   for (const node of tree) {
@@ -187,17 +250,31 @@ export async function renderSegments(
     );
     const { component, id, params, loading } = node.segment;
 
-    // Only include params in key for segments that belong to the route
-    // - Routes: always include params (they render param-specific content)
-    // - Error/notFound segments: always include params (they replace failed route content)
-    // - Route's layouts (orphans): include params (children of parameterized route)
-    // - Parent chain layouts: exclude params (shared across routes, param-agnostic)
-    // This prevents unnecessary unmounting when params change
+    // Param-agnostic keys are opt-in via the transition() DSL (see
+    // inTransitionScope above). A route (and its route-owned layouts) inside a
+    // transition scope drops the param from its key, so navigating between two
+    // param values of the SAME route (e.g. /product/1 -> /product/2) reconciles
+    // the route subtree instead of remounting it. Combined with the
+    // startTransition wrap that shouldStartViewTransition already applies to
+    // transition routes (browser/partial-update.ts), the previous content stays
+    // on screen while the new loaders resolve (stale-while-revalidate) instead
+    // of flashing the loading skeleton. This works on stable React; experimental
+    // React adds the animated <ViewTransition> cross-fade on top.
+    //
+    // Outside a transition scope the key stays param-bearing and the route
+    // remounts on param change (the default: a fresh skeleton and fresh
+    // component state).
+    //
+    // error/notFound always keep param-bearing keys: createErrorSegment reuses
+    // the boundary layout's shortCode as the error segment id (router/
+    // error-handling.ts), so a param-agnostic error key could collide with that
+    // layout's key within the same render.
     const includeParams =
-      node.segment.type === "route" ||
       node.segment.type === "error" ||
       node.segment.type === "notFound" ||
-      (node.segment.type === "layout" && node.segment.belongsToRoute);
+      ((node.segment.type === "route" ||
+        (node.segment.type === "layout" && node.segment.belongsToRoute)) &&
+        !inTransitionScope);
 
     const paramStr =
       includeParams && params && Object.keys(params).length > 0
@@ -221,40 +298,67 @@ export async function renderSegments(
     if (isAction && component instanceof Promise) {
       resolvedComponent = await component;
     }
+
     let nodeContent: ReactNode =
-      loading || loading === null || resolvedComponent instanceof Promise
+      loading !== null && loading !== undefined && loading !== false
         ? createElement(RouteContentWrapper, {
             key: `suspense-loading-${id}`,
-            content:
-              resolvedComponent instanceof Promise
-                ? resolvedComponent
-                : Promise.resolve(resolvedComponent),
+            content: getMemoizedContentPromise(resolvedComponent),
             fallback: loading,
+            segmentId: id,
           })
         : registerLazyRef(resolvedComponent);
 
-    // Common props for OutletProvider
-    const outletContent: ReactNode =
+    // Wrap with <ViewTransition> if transition config exists (React experimental only).
+    // An empty config ({}) creates a bare <ViewTransition> boundary that participates
+    // in transitions without adding custom animation classes. Named element-level
+    // <ViewTransition> components inside (with name/share props) morph independently
+    // from the parent's default cross-fade.
+    //
+    // For layouts, wrap the outlet content (what `<Outlet />` renders) rather
+    // than the layout component itself. Parallel slots like `<ParallelOutlet
+    // name="@modal" />` read from a separate context channel and end up as
+    // siblings of the VT in the rendered tree, so modal mounts don't trigger a
+    // subtree update on the layout-level VT — which would otherwise make
+    // React's commit walker fire `document.startViewTransition` and apply
+    // view-transition-names to the underlying main subtree (cover/title/etc.).
+    //
+    // `transition.viewTransition === false` opts out of the router-owned
+    // boundary only. Driving (the startTransition wrap in browser/partial-update.ts
+    // and the param-agnostic key/hold below) keys off transition *presence*, not
+    // this flag, so a boundary-less transition still holds content and lets
+    // consumer-placed <ViewTransition> elements animate. The global
+    // createRouter({ viewTransition }) default is resolved into this field
+    // during segment resolution (only `false` is stamped; unset/"auto" is left
+    // as-is and means "wrap"), so this gate needs no router-option threading.
+    let outletContent: ReactNode =
       node.segment.type === "layout" ? content : null;
 
+    const transition = node.segment.transition;
+
+    if (
+      ReactViewTransition &&
+      transition &&
+      transition.viewTransition !== false
+    ) {
+      if (node.segment.type === "layout") {
+        outletContent = wrapDefaultOutletContent(outletContent, transition);
+      } else {
+        nodeContent = createViewTransitionBoundary(transition, nodeContent);
+      }
+    }
+
     // Prepare loader data if there are loaders
     const loaderIds = loaderEntries.map((loader) => loader.loaderId!);
-    const loaderDataPromise =
-      loaderEntries.length > 0
-        ? Promise.all(
-            loaderEntries.map((loader) =>
-              loader.loaderData instanceof Promise
-                ? loader.loaderData
-                : Promise.resolve(loader.loaderData),
-            ),
-          )
-        : Promise.resolve([]);
 
     // Use LoaderBoundary when loading is defined to maintain consistent tree structure
     // This ensures cached segments (which may not have loader segments) have the same
     // tree structure as fresh segments, preventing React remounts
     // If forceAwait or isAction is set, pre-resolve promises so LoaderBoundary won't suspend
-    if (loading !== undefined) {
+    if (loading !== undefined && loading !== null) {
+      // Aggregate built here only — the loaderless and no-loading branches don't
+      // read it (the latter builds its own per-parallel promises).
+      const loaderDataPromise = getMemoizedLoaderPromise(loaderEntries);
       content = createElement(LoaderBoundary, {
         key: `loader-boundary-${key}`,
         loaderDataPromise:
@@ -267,11 +371,7 @@ export async function renderSegments(
         parallel: node.parallel,
         children: nodeContent,
       });
-      continue;
-    }
-
-    // No loading skeleton defined - use OutletProvider directly
-    if (loaderEntries.length === 0) {
+    } else if (loaderEntries.length === 0) {
       // No loaders, no loading - simple OutletProvider
       content = createElement(OutletProvider, {
         key,
@@ -280,24 +380,89 @@ export async function renderSegments(
         parallel: node.parallel,
         children: nodeContent,
       });
-      continue;
-    }
+    } else {
+      // Has loaders but no loading skeleton.
+      // Split: parallel-owned loaders stream (their parallel has loading()),
+      // layout-owned loaders are awaited (they gate the layout content).
+      const layoutLoaders = loaderEntries.filter((l) => !l.parallelLoading);
+      const parallelOwnedLoaders = loaderEntries.filter(
+        (l) => !!l.parallelLoading,
+      );
+
+      // Await only layout-owned loaders
+      const layoutLoaderIds = layoutLoaders.map((l) => l.loaderId!);
+      const layoutLoaderDataPromise =
+        layoutLoaders.length > 0
+          ? Promise.all(
+              layoutLoaders.map((l) =>
+                l.loaderData instanceof Promise
+                  ? l.loaderData
+                  : Promise.resolve(l.loaderData),
+              ),
+            )
+          : Promise.resolve([]);
+      const resolvedData = await layoutLoaderDataPromise;
+      const { loaderData, errorFallback } = decodeLoaderResults(
+        resolvedData,
+        layoutLoaderIds,
+      );
+
+      // Parallel-owned loaders: attach to their owning parallel segment
+      // as loaderDataPromise so ParallelOutlet wraps in LoaderBoundary
+      if (parallelOwnedLoaders.length > 0) {
+        const loadersByParallelNamespace = new Map<string, ResolvedSegment[]>();
+
+        for (const loader of parallelOwnedLoaders) {
+          if (!loader.namespace) {
+            continue;
+          }
+          const existing = loadersByParallelNamespace.get(loader.namespace);
+          if (existing) {
+            existing.push(loader);
+          } else {
+            loadersByParallelNamespace.set(loader.namespace, [loader]);
+          }
+        }
 
-    // Has loaders but no loading skeleton - await loaders and render directly
-    const resolvedData = await loaderDataPromise;
-    const { loaderData, errorFallback } = resolveLoaderData(
-      resolvedData,
-      loaderIds,
-    );
+        for (const p of node.parallel) {
+          if (!p.loading || !p.namespace) {
+            continue;
+          }
+
+          const ownedLoaders = loadersByParallelNamespace.get(p.namespace);
+          if (!ownedLoaders || ownedLoaders.length === 0) {
+            continue;
+          }
+
+          p.loaderIds = ownedLoaders.map((l) => l.loaderId!);
+          const aggregated = getMemoizedLoaderPromise(ownedLoaders);
+          p.loaderDataPromise =
+            (forceAwait || isAction) && aggregated instanceof Promise
+              ? await aggregated
+              : aggregated;
+        }
+      }
 
-    content = createElement(OutletProvider, {
-      key,
-      content: outletContent,
-      segment: node.segment,
-      parallel: node.parallel,
-      loaderData: Object.keys(loaderData).length > 0 ? loaderData : undefined,
-      children: errorFallback ?? nodeContent,
-    });
+      content = createElement(OutletProvider, {
+        key,
+        content: outletContent,
+        segment: node.segment,
+        parallel: node.parallel,
+        loaderData: Object.keys(loaderData).length > 0 ? loaderData : undefined,
+        children: errorFallback ?? nodeContent,
+      });
+    }
+
+    // Wrap with MountContextProvider for include() scoped components.
+    // Must use MountContextProvider (a proper "use client" export) instead of
+    // MountContext.Provider directly, because .Provider is a property on the
+    // context object and resolves to undefined through RSC client reference proxies.
+    if (node.segment.mountPath) {
+      content = createElement(MountContextProvider, {
+        value: node.segment.mountPath,
+        children: content,
+      });
+    }
   }
 
   // Always wrap with root error boundary to prevent white screens
@@ -305,7 +470,9 @@ export async function renderSegments(
   const errorBoundaryWrapped = createElement(RootErrorBoundary, {
     children: content,
   });
-  await Promise.allSettled(temporalLazyRefs);
+  if (typeof window === "object") {
+    await Promise.allSettled(temporalLazyRefs);
+  }
 
   // Build the final result, optionally wrapped with root layout
   let result: ReactNode = errorBoundaryWrapped;
@@ -318,16 +485,6 @@ export async function renderSegments(
     });
   }
 
-  // Wrap with HrefProvider for useHref() to work during SSR
-  // This provides route info to client components during server rendering
-  if (routeMap) {
-    result = createElement(HrefProvider, {
-      routeMap,
-      routeName,
-      children: result,
-    });
-  }
-
   return result;
 }
 
@@ -421,20 +578,13 @@ function* segmentTreeWalk(
     }
   }
 
-  // Sort segments by ID to ensure consistent root-to-leaf ordering
-  // regardless of the order they arrive in the input array (which can differ
-  // between document requests and actions)
-  // Shorter IDs come first (closer to root), same length sorted lexicographically
-  nonParallels.sort((a, b) => {
-    if (a.id.length !== b.id.length) {
-      return a.id.length - b.id.length;
-    }
-    return a.id.localeCompare(b.id);
-  });
-
-  // Iterate bottom-to-top using reverse() to process leaf segments first
+  // Segments arrive in root-to-leaf order from the server (resolveSegment
+  // and resolveSegmentWithRevalidation push segments in this order).
+  // All consumers (reconcileSegments, cache) preserve this order.
+  // No sorting needed — iterate bottom-to-top to process leaf segments first.
   // This processes route/leaf layouts first, then parent layouts
   // Note: We reverse the array to iterate from end to start (bottom-to-top)
+
   for (let i = nonParallels.length - 1; i >= 0; i--) {
     const segment = nonParallels[i];