@rangojs/router 0.0.0-experimental.97 → 0.0.0-experimental.98914650

package/src/segment-system.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
 import { createElement, type ReactNode, type ComponentType } from "react";
-import { OutletProvider } from "./client.js";
+import { OutletProvider } from "./outlet-provider.js";
 import { MountContextProvider } from "./browser/react/mount-context.js";
 import type { ResolvedSegment, RootLayoutProps } from "./types.js";
-import { isLoaderDataResult } from "./types.js";
+import { decodeLoaderResults } from "./decode-loader-results.js";
 import { invariant } from "./errors.js";
 import {
   RouteContentWrapper,
@@ -11,13 +11,25 @@ import {
 } 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";
+import {
+  buildLoaderPromise,
+  getMemoizedLoaderPromise,
+} from "./segment-loader-promise.js";
 
 // 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;
 
+// A loading skeleton is renderable only when it is a real ReactNode value.
+// `false` is treated as "not renderable" here. This is the three-term gate;
+// the distinct two-term gate at the LoaderBoundary site deliberately treats
+// `false` as "create a boundary without a RouteContentWrapper"
+// (tree-structure.md), so it must NOT use this helper.
+function isRenderableLoading(loading: ReactNode): boolean {
+  return loading !== undefined && loading !== null && loading !== false;
+}
+
 function restoreParallelLoaderMarkers(
   segments: ResolvedSegment[],
 ): ResolvedSegment[] {
@@ -28,12 +40,7 @@ function restoreParallelLoaderMarkers(
     const segment = segments[i];
 
     if (segment.type === "parallel") {
-      if (
-        segment.namespace &&
-        segment.loading !== undefined &&
-        segment.loading !== null &&
-        segment.loading !== false
-      ) {
+      if (segment.namespace && isRenderableLoading(segment.loading)) {
         parallelLoadingByNamespace.set(segment.namespace, segment.loading);
       }
       continue;
@@ -59,42 +66,6 @@ function restoreParallelLoaderMarkers(
   return nextSegments ?? segments;
 }
 
-/**
- * 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;
-      continue;
-    }
-
-    if (result.ok) {
-      loaderData[id] = result.data;
-      continue;
-    }
-
-    // Error case
-    if (result.fallback) {
-      errorFallback = result.fallback;
-    } else {
-      throw new Error(result.error.message);
-    }
-  }
-
-  return { loaderData, errorFallback };
-}
-
 /**
  * Options for renderSegments
  */
@@ -131,11 +102,61 @@ export interface RenderSegmentsOptions {
   rootLayout?: ComponentType<RootLayoutProps>;
 }
 
+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,
+  });
+}
+
+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);
+}
+
 /**
  * Render segments into a React tree with proper layout nesting
  *
- * Layouts nest using OutletProvider, while route + parallel + error + notFound segments
- * render as siblings in a Fragment.
+ * Layouts nest using OutletProvider; a layout receives the inner content via
+ * its `<Outlet />`. Parallel segments do NOT render as inline Fragment siblings
+ * — they flow through OutletContext.parallel and are resolved where a layout
+ * places `<ParallelOutlet name="@sidebar" />` (or `<Outlet name="@sidebar" />`).
+ *
+ * The result is always wrapped in RootErrorBoundary so unhandled errors never
+ * blank the screen. When `options.rootLayout` is provided it wraps the error
+ * boundary at the OUTERMOST level (so the app shell survives errors).
  *
  * Error segments are treated like route segments - they render their fallback
  * component in place of the failed segment. When an error occurs in a handler,
@@ -147,27 +168,30 @@ export interface RenderSegmentsOptions {
  * notFoundBoundary's fallback component.
  *
  * @param segments - Array of resolved segments to render
- * @returns ReactNode representing the component tree
+ * @returns Promise resolving to the ReactNode tree (the function is async)
  *
  * @example
  * ```typescript
  * const segments = [
- *   { id: 'L0.0', type: 'layout', component: <RootLayout /> },
- *   { id: 'L1.0', type: 'layout', component: <BlogLayout /> },
- *   { id: 'R2.0', type: 'route', component: <BlogPost /> },
- *   { id: 'P3.0', type: 'parallel', component: <Sidebar />, slot: '@sidebar' }
+ *   { id: 'L0.0', type: 'layout', component: <BlogLayout /> },
+ *   { id: 'L0R1', type: 'route', component: <BlogPost /> },
+ *   { id: 'L0R1.@sidebar', type: 'parallel', component: <Sidebar />, slot: '@sidebar' }
  * ];
  *
- * const tree = renderSegments(segments);
- * // Results in:
- * // <OutletProvider><RootLayout>
- * //   <OutletProvider><BlogLayout>
- * //     <><BlogPost /><Sidebar /></>
- * //   </BlogLayout></OutletProvider>
- * // </RootLayout></OutletProvider>
+ * // BlogLayout renders <Outlet /> for the route and
+ * // <ParallelOutlet name="@sidebar" /> for the parallel slot.
+ * const tree = await renderSegments(segments, { rootLayout: RootLayout });
+ * // Results in (outermost first):
+ * // <RootLayout>
+ * //   <RootErrorBoundary>
+ * //     <OutletProvider segment={BlogLayout} parallel={[Sidebar]}>
+ * //       <BlogPost />
+ * //     </OutletProvider>
+ * //   </RootErrorBoundary>
+ * // </RootLayout>
  *
  * // For server actions, pass isAction to await components:
- * const tree = renderSegments(segments, { isAction: true });
+ * const tree = await renderSegments(segments, { isAction: true });
  * ```
  */
 export async function renderSegments(
@@ -211,6 +235,25 @@ export async function renderSegments(
   }
   // Separate segments by type, passing intercept segments for explicit injection
   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) {
@@ -223,17 +266,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
@@ -242,57 +299,70 @@ export async function renderSegments(
             .map(([k, v]) => `${k}=${v}`)
             .join(",")
         : "";
-    const key = `${paramStr ? `${id}-${paramStr}` : id}`;
+    const key = paramStr ? `${id}-${paramStr}` : id;
 
-    // Get loader entries for this node
     const loaderEntries = node.loaders.filter(
       (loader) => loader.loaderId && loader.loaderData !== undefined,
     );
 
-    // Determine the component content (with or without Suspense wrapper)
-    // Wrap when loading skeleton defined OR component is Promise (needs Suspense)
-    // During actions, await component Promise to prevent Suspense from triggering
-    // This keeps existing content visible instead of showing loading skeleton
     let resolvedComponent = component;
     if (isAction && component instanceof Promise) {
       resolvedComponent = await component;
     }
 
-    let nodeContent: ReactNode =
-      loading !== null && loading !== undefined && loading !== false
-        ? createElement(RouteContentWrapper, {
-            key: `suspense-loading-${id}`,
-            content: getMemoizedContentPromise(resolvedComponent),
-            fallback: loading,
-            segmentId: id,
-          })
-        : registerLazyRef(resolvedComponent);
+    let nodeContent: ReactNode = isRenderableLoading(loading)
+      ? createElement(RouteContentWrapper, {
+          key: `suspense-loading-${id}`,
+          content: getMemoizedContentPromise(resolvedComponent),
+          fallback: loading,
+          segmentId: id,
+        })
+      : registerLazyRef(resolvedComponent);
 
     // 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.
-    if (ReactViewTransition && node.segment.transition) {
-      nodeContent = createElement(ReactViewTransition, {
-        ...node.segment.transition,
-        children: nodeContent,
-      });
-    }
-
-    // Common props for OutletProvider
-    const outletContent: ReactNode =
+    //
+    // 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 = getMemoizedLoaderPromise(loaderEntries);
 
-    // 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 && loading !== null) {
+      const loaderDataPromise = getMemoizedLoaderPromise(loaderEntries);
       content = createElement(LoaderBoundary, {
         key: `loader-boundary-${key}`,
         loaderDataPromise:
@@ -306,7 +376,6 @@ export async function renderSegments(
         children: nodeContent,
       });
     } else if (loaderEntries.length === 0) {
-      // No loaders, no loading - simple OutletProvider
       content = createElement(OutletProvider, {
         key,
         content: outletContent,
@@ -315,34 +384,18 @@ export async function renderSegments(
         children: nodeContent,
       });
     } 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 } = resolveLoaderData(
+      const resolvedData = await buildLoaderPromise(layoutLoaders);
+      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[]>();
 
@@ -399,8 +452,6 @@ export async function renderSegments(
     }
   }
 
-  // Always wrap with root error boundary to prevent white screens
-  // This catches any unhandled errors that bubble up from the segment tree
   const errorBoundaryWrapped = createElement(RootErrorBoundary, {
     children: content,
   });
@@ -408,11 +459,8 @@ export async function renderSegments(
     await Promise.allSettled(temporalLazyRefs);
   }
 
-  // Build the final result, optionally wrapped with root layout
   let result: ReactNode = errorBoundaryWrapped;
 
-  // If rootLayout is provided, wrap the error boundary with it
-  // This ensures the app shell stays mounted even during errors (prevents FOUC)
   if (RootLayout) {
     result = createElement(RootLayout, {
       children: errorBoundaryWrapped,
@@ -450,6 +498,28 @@ export async function renderSegments(
  * @param segments - Main segments from the route tree
  * @param interceptSegments - Optional intercept segments to inject
  */
+// Loader segment ids have the grammar `${parentId}D${index}.${loaderId}`.
+// parentId is the parent shortCode (M/L/P/R/C + digits, never "D") for normal
+// loaders, or `${shortCode}.${slotName}` for intercept-slot loaders, where the
+// slot name is user-controlled (`@${string}`) and may contain an uppercase "D"
+// (e.g. "@Detail"). Strip from the first `D<index>.` separator so the slot name
+// is preserved; splitting on a bare "D" mis-cut "@Detail" to "@" and silently
+// dropped the loader's data.
+function loaderParentId(loaderSegmentId: string): string {
+  return loaderSegmentId.replace(/D\d+\..*$/, "");
+}
+
+// Append a value to the array stored under `key`, creating the array on first
+// use. Single Map lookup (vs the has/get!().push double-lookup idiom).
+function pushToGroup<K, V>(map: Map<K, V[]>, key: K, value: V): void {
+  const arr = map.get(key);
+  if (arr) {
+    arr.push(value);
+  } else {
+    map.set(key, [value]);
+  }
+}
+
 function* segmentTreeWalk(
   segments: ResolvedSegment[],
   interceptSegments?: ResolvedSegment[],
@@ -470,19 +540,12 @@ function* segmentTreeWalk(
       // Extract parent ID from parallel ID
       // Example: "L0R1L0.@sidebar" → "L0R1L0"
       const parentId = segment.id.split(".")[0];
-      if (!parallelsByParent.has(parentId)) {
-        parallelsByParent.set(parentId, []);
-      }
-      parallelsByParent.get(parentId)!.push(segment);
+      pushToGroup(parallelsByParent, parentId, segment);
     } else if (segment.type === "loader") {
       // Extract parent ID from loader ID
-      // Example: "L0D0.cart" → "L0"
-      // Loader ID format: {parentShortCode}D{index}.{loaderId}
-      const parentId = segment.id.split("D")[0];
-      if (!loadersByParent.has(parentId)) {
-        loadersByParent.set(parentId, []);
-      }
-      loadersByParent.get(parentId)!.push(segment);
+      // Example: "L0D0.cart" → "L0"; "L0.@DetailD0.x" → "L0.@Detail"
+      const parentId = loaderParentId(segment.id);
+      pushToGroup(loadersByParent, parentId, segment);
     } else {
       // Layout, route, error, and notFound segments are all rendered in the tree
       // Error/notFound segments replace the failed segment with fallback UI
@@ -497,17 +560,11 @@ function* segmentTreeWalk(
       if (intercept.type === "parallel" && intercept.slot) {
         // Extract parent ID from intercept ID (e.g., "M4L0L0L2.@modal" → "M4L0L0L2")
         const parentId = intercept.id.split(".")[0];
-        if (!parallelsByParent.has(parentId)) {
-          parallelsByParent.set(parentId, []);
-        }
-        parallelsByParent.get(parentId)!.push(intercept);
+        pushToGroup(parallelsByParent, parentId, intercept);
       } else if (intercept.type === "loader") {
-        // Intercept loaders - extract parent from loader ID
-        const parentId = intercept.id.split("D")[0];
-        if (!loadersByParent.has(parentId)) {
-          loadersByParent.set(parentId, []);
-        }
-        loadersByParent.get(parentId)!.push(intercept);
+        // Intercept loaders - extract parent from loader ID (slot name preserved)
+        const parentId = loaderParentId(intercept.id);
+        pushToGroup(loadersByParent, parentId, intercept);
       }
     }
   }