@rangojs/router 0.0.0-experimental.45 → 0.0.0-experimental.46

package/src/router/segment-resolution/revalidation.ts

@@ -10,7 +10,11 @@ import type { ReactNode } from "react";
 import { invariant } from "../../errors";
 import { revalidate } from "../loader-resolution.js";
 import { evaluateRevalidation } from "../revalidation.js";
-import type { EntryData } from "../../server/context";
+import {
+  getParallelEntries,
+  getParallelSlotEntries,
+  type EntryData,
+} from "../../server/context";
 import type {
   HandlerContext,
   InternalHandlerContext,
@@ -259,8 +263,11 @@ export async function resolveLoadersOnlyWithRevalidation<TEnv>(
   const allLoaderSegments: ResolvedSegment[] = [];
   const allMatchedIds: string[] = [];
 
-  for (const entry of entries) {
-    const belongsToRoute = entry.type === "route";
+  async function collectEntryLoaders(
+    entry: EntryData,
+    belongsToRoute: boolean,
+    shortCodeOverride?: string,
+  ): Promise<void> {
     const { segments, matchedIds } = await resolveLoadersWithRevalidation(
       entry,
       context,
@@ -273,11 +280,27 @@ export async function resolveLoadersOnlyWithRevalidation<TEnv>(
       routeKey,
       deps,
       actionContext,
-      undefined, // shortCodeOverride
+      shortCodeOverride,
       stale,
     );
     allLoaderSegments.push(...segments);
     allMatchedIds.push(...matchedIds);
+
+    const seenParallelEntryIds = new Set<string>();
+    for (const parallelEntry of getParallelEntries(entry.parallel)) {
+      if (seenParallelEntryIds.has(parallelEntry.id)) continue;
+      seenParallelEntryIds.add(parallelEntry.id);
+      await collectEntryLoaders(parallelEntry, belongsToRoute, entry.shortCode);
+    }
+
+    const childBelongsToRoute = belongsToRoute || entry.type === "route";
+    for (const layoutEntry of entry.layout) {
+      await collectEntryLoaders(layoutEntry, childBelongsToRoute);
+    }
+  }
+
+  for (const entry of entries) {
+    await collectEntryLoaders(entry, entry.type === "route");
   }
 
   return { segments: allLoaderSegments, matchedIds: allMatchedIds };
@@ -301,22 +324,20 @@ export function buildEntryRevalidateMap(
     map.set(entry.shortCode, { entry, revalidate: entry.revalidate });
 
     if (entry.type !== "parallel") {
-      for (const parallelEntry of entry.parallel) {
-        if (parallelEntry.type === "parallel") {
-          const slots = Object.keys(parallelEntry.handler) as `@${string}`[];
-          for (const slot of slots) {
-            const parallelId = `${parallelEntry.shortCode}.${slot}`;
-            map.set(parallelId, {
-              entry: parallelEntry,
-              revalidate: parallelEntry.revalidate,
-            });
-          }
-        }
+      for (const { slot, entry: parallelEntry } of getParallelSlotEntries(
+        entry.parallel,
+      )) {
+        const parallelParentShortCode = parentShortCode ?? entry.shortCode;
+        const parallelId = `${parallelParentShortCode}.${slot}`;
+        map.set(parallelId, {
+          entry: parallelEntry,
+          revalidate: parallelEntry.revalidate,
+        });
       }
     }
 
     for (const layoutEntry of entry.layout) {
-      processEntry(layoutEntry);
+      processEntry(layoutEntry, entry.shortCode);
     }
   }
 
@@ -348,7 +369,10 @@ export async function resolveParallelSegmentsWithRevalidation<TEnv>(
   const segments: ResolvedSegment[] = [];
   const matchedIds: string[] = [];
 
-  for (const parallelEntry of entry.parallel) {
+  const resolvedParallelEntries = new Set<string>();
+  for (const { slot, entry: parallelEntry } of getParallelSlotEntries(
+    entry.parallel,
+  )) {
     invariant(
       parallelEntry.type === "parallel",
       `Expected parallel entry, got: ${parallelEntry.type}`,
@@ -359,141 +383,61 @@ export async function resolveParallelSegmentsWithRevalidation<TEnv>(
       | ((ctx: HandlerContext<any, TEnv>) => ReactNode | Promise<ReactNode>)
       | ReactNode
     >;
+    // In production, static handler bodies are evicted and the slot value
+    // may be undefined. The static store holds the pre-rendered component.
+    // We defer the handler check until after tryStaticSlot.
+    const handler = slots[slot];
+
+    const parallelId = `${entry.shortCode}.${slot}`;
+
+    const isFullRefetch = clientSegmentIds.size === 0;
+    const isNewParent = !clientSegmentIds.has(entry.shortCode);
+    if (
+      isFullRefetch ||
+      clientSegmentIds.has(parallelId) ||
+      belongsToRoute ||
+      isNewParent
+    ) {
+      matchedIds.push(parallelId);
+    }
 
-    for (const [slot, handler] of Object.entries(slots)) {
-      const parallelId = `${entry.shortCode}.${slot}`;
-
-      const isFullRefetch = clientSegmentIds.size === 0;
-      // When the parent layout is new (not in client's segment set),
-      // all its parallel children must be resolved and tracked.
-      // Without this, navigating to a new layout with parallels
-      // (e.g., BlogLayout with @sidebar) from a different route
-      // would silently drop those parallel segments.
-      const isNewParent = !clientSegmentIds.has(entry.shortCode);
-      if (
-        isFullRefetch ||
-        clientSegmentIds.has(parallelId) ||
-        belongsToRoute ||
-        isNewParent
-      ) {
-        matchedIds.push(parallelId);
-      }
-
-      const shouldResolve = await (async () => {
-        if (isFullRefetch) {
-          if (isTraceActive()) {
-            pushRevalidationTraceEntry({
-              segmentId: parallelId,
-              segmentType: "parallel",
-              belongsToRoute,
-              source: "parallel",
-              defaultShouldRevalidate: true,
-              finalShouldRevalidate: true,
-              reason: "full-refetch",
-            });
-          }
-          return true;
-        }
-        if (!clientSegmentIds.has(parallelId)) {
-          const result = belongsToRoute || isNewParent;
-          if (isTraceActive()) {
-            pushRevalidationTraceEntry({
-              segmentId: parallelId,
-              segmentType: "parallel",
-              belongsToRoute,
-              source: "parallel",
-              defaultShouldRevalidate: result,
-              finalShouldRevalidate: result,
-              reason: result ? "new-segment" : "skip-parent-chain",
-            });
-          }
-          return result;
+    const shouldResolve = await (async () => {
+      if (isFullRefetch) {
+        if (isTraceActive()) {
+          pushRevalidationTraceEntry({
+            segmentId: parallelId,
+            segmentType: "parallel",
+            belongsToRoute,
+            source: "parallel",
+            defaultShouldRevalidate: true,
+            finalShouldRevalidate: true,
+            reason: "full-refetch",
+          });
         }
-
-        const dummySegment: ResolvedSegment = {
-          id: parallelId,
-          namespace: parallelEntry.id,
-          type: "parallel",
-          index: 0,
-          component: null as any,
-          params,
-          slot,
-          belongsToRoute,
-          parallelName: `${parallelEntry.id}.${slot}`,
-          ...(parallelEntry.mountPath
-            ? { mountPath: parallelEntry.mountPath }
-            : {}),
-        };
-
-        return await evaluateRevalidation({
-          segment: dummySegment,
-          prevParams,
-          getPrevSegment: null,
-          request,
-          prevUrl,
-          nextUrl,
-          revalidations: parallelEntry.revalidate.map((fn, i) => ({
-            name: `revalidate${i}`,
-            fn,
-          })),
-          routeKey,
-          context,
-          actionContext,
-          stale,
-          traceSource: "parallel",
-        });
-      })();
-      emitRevalidationDecision(
-        parallelId,
-        context.pathname,
-        routeKey,
-        shouldResolve,
-      );
-
-      let component: ReactNode | undefined;
-      if (shouldResolve) {
-        component = await tryStaticSlot(parallelEntry, slot, parallelId);
+        return true;
       }
-      if (component === undefined) {
-        const hasLoadingFallback =
-          parallelEntry.loading !== undefined &&
-          parallelEntry.loading !== false;
-        if (!shouldResolve) {
-          component = null;
-        } else if (hasLoadingFallback) {
-          const result =
-            typeof handler === "function" ? handler(context) : handler;
-          if (result instanceof Promise) {
-            const tracked = deps.trackHandler(result, {
-              segmentId: parallelId,
-              segmentType: "parallel",
-            });
-            observeStreamedHandler(
-              tracked,
-              parallelId,
-              "parallel",
-              context.pathname,
-              routeKey,
-              params,
-            );
-            component = tracked as ReactNode;
-          } else {
-            component = result as ReactNode;
-          }
-        } else {
-          component =
-            typeof handler === "function" ? await handler(context) : handler;
+      if (!clientSegmentIds.has(parallelId)) {
+        const result = belongsToRoute || isNewParent;
+        if (isTraceActive()) {
+          pushRevalidationTraceEntry({
+            segmentId: parallelId,
+            segmentType: "parallel",
+            belongsToRoute,
+            source: "parallel",
+            defaultShouldRevalidate: result,
+            finalShouldRevalidate: result,
+            reason: result ? "new-segment" : "skip-parent-chain",
+          });
         }
+        return result;
       }
 
-      segments.push({
+      const dummySegment: ResolvedSegment = {
         id: parallelId,
         namespace: parallelEntry.id,
         type: "parallel",
         index: 0,
-        component,
-        loading: parallelEntry.loading === false ? null : parallelEntry.loading,
-        transition: parallelEntry.transition,
+        component: null as any,
         params,
         slot,
         belongsToRoute,
@@ -501,28 +445,111 @@ export async function resolveParallelSegmentsWithRevalidation<TEnv>(
         ...(parallelEntry.mountPath
           ? { mountPath: parallelEntry.mountPath }
           : {}),
-      });
-    }
+      };
 
-    if (!parallelEntry.loading) {
-      const loaderResult = await resolveLoadersWithRevalidation(
-        parallelEntry,
-        context,
-        belongsToRoute,
-        clientSegmentIds,
+      return await evaluateRevalidation({
+        segment: dummySegment,
         prevParams,
+        getPrevSegment: null,
         request,
         prevUrl,
         nextUrl,
+        revalidations: parallelEntry.revalidate.map((fn, i) => ({
+          name: `revalidate${i}`,
+          fn,
+        })),
         routeKey,
-        deps,
+        context,
         actionContext,
-        entry.shortCode,
         stale,
-      );
-      segments.push(...loaderResult.segments);
-      matchedIds.push(...loaderResult.matchedIds);
+        traceSource: "parallel",
+      });
+    })();
+    emitRevalidationDecision(
+      parallelId,
+      context.pathname,
+      routeKey,
+      shouldResolve,
+    );
+
+    let component: ReactNode | undefined;
+    if (shouldResolve) {
+      component = await tryStaticSlot(parallelEntry, slot, parallelId);
+    }
+    if (component === undefined) {
+      const hasLoadingFallback =
+        parallelEntry.loading !== undefined && parallelEntry.loading !== false;
+      if (!shouldResolve) {
+        component = null;
+      } else if (handler === undefined) {
+        // Handler evicted (production static slot) but static lookup missed.
+        // Nothing to render — use null so the client keeps its cached version.
+        component = null;
+      } else if (hasLoadingFallback) {
+        const result =
+          typeof handler === "function" ? handler(context) : handler;
+        if (result instanceof Promise) {
+          const tracked = deps.trackHandler(result, {
+            segmentId: parallelId,
+            segmentType: "parallel",
+          });
+          observeStreamedHandler(
+            tracked,
+            parallelId,
+            "parallel",
+            context.pathname,
+            routeKey,
+            params,
+          );
+          component = tracked as ReactNode;
+        } else {
+          component = result as ReactNode;
+        }
+      } else {
+        component =
+          typeof handler === "function" ? await handler(context) : handler;
+      }
     }
+
+    segments.push({
+      id: parallelId,
+      namespace: parallelEntry.id,
+      type: "parallel",
+      index: 0,
+      component,
+      loading: parallelEntry.loading === false ? null : parallelEntry.loading,
+      transition: parallelEntry.transition,
+      params,
+      slot,
+      belongsToRoute,
+      parallelName: `${parallelEntry.id}.${slot}`,
+      ...(parallelEntry.mountPath
+        ? { mountPath: parallelEntry.mountPath }
+        : {}),
+    });
+
+    if (resolvedParallelEntries.has(parallelEntry.id)) {
+      continue;
+    }
+
+    const loaderResult = await resolveLoadersWithRevalidation(
+      parallelEntry,
+      context,
+      belongsToRoute,
+      clientSegmentIds,
+      prevParams,
+      request,
+      prevUrl,
+      nextUrl,
+      routeKey,
+      deps,
+      actionContext,
+      entry.shortCode,
+      stale,
+    );
+    segments.push(...loaderResult.segments);
+    matchedIds.push(...loaderResult.matchedIds);
+    resolvedParallelEntries.add(parallelEntry.id);
   }
 
   return { segments, matchedIds };
@@ -997,143 +1024,72 @@ export async function resolveOrphanLayoutWithRevalidation<TEnv>(
     ...(orphan.mountPath ? { mountPath: orphan.mountPath } : {}),
   });
 
-  for (const parallelEntry of orphan.parallel) {
+  const resolvedParallelEntries = new Set<string>();
+  for (const { slot, entry: parallelEntry } of getParallelSlotEntries(
+    orphan.parallel,
+  )) {
     invariant(
       parallelEntry.type === "parallel",
       `Expected parallel entry, got: ${parallelEntry.type}`,
     );
 
-    const loaderResult = await resolveLoadersWithRevalidation(
-      parallelEntry,
-      context,
-      belongsToRoute,
-      clientSegmentIds,
-      prevParams,
-      request,
-      prevUrl,
-      nextUrl,
-      routeKey,
-      deps,
-      actionContext,
-      undefined,
-      stale,
-    );
-    segments.push(...loaderResult.segments);
-    matchedIds.push(...loaderResult.matchedIds);
+    if (!resolvedParallelEntries.has(parallelEntry.id)) {
+      const loaderResult = await resolveLoadersWithRevalidation(
+        parallelEntry,
+        context,
+        belongsToRoute,
+        clientSegmentIds,
+        prevParams,
+        request,
+        prevUrl,
+        nextUrl,
+        routeKey,
+        deps,
+        actionContext,
+        undefined,
+        stale,
+      );
+      segments.push(...loaderResult.segments);
+      matchedIds.push(...loaderResult.matchedIds);
+      resolvedParallelEntries.add(parallelEntry.id);
+    }
 
     const slots = parallelEntry.handler as Record<
       `@${string}`,
       | ((ctx: HandlerContext<any, TEnv>) => ReactNode | Promise<ReactNode>)
       | ReactNode
     >;
+    // Handler may be undefined in production after static handler eviction.
+    const handler = slots[slot];
 
-    for (const [slot, handler] of Object.entries(slots)) {
-      // Use orphan.shortCode (the parent layout) to match the SSR path
-      // (resolveParallelEntry receives parentShortCode = orphan.shortCode).
-      // Using parallelEntry.shortCode would generate IDs the client doesn't know about.
-      const parallelId = `${orphan.shortCode}.${slot}`;
-      matchedIds.push(parallelId);
-
-      const shouldResolve = await (async () => {
-        if (!clientSegmentIds.has(parallelId)) {
-          if (isTraceActive()) {
-            pushRevalidationTraceEntry({
-              segmentId: parallelId,
-              segmentType: "parallel",
-              belongsToRoute,
-              source: "parallel",
-              defaultShouldRevalidate: true,
-              finalShouldRevalidate: true,
-              reason: "new-segment",
-            });
-          }
-          return true;
-        }
-
-        const dummySegment: ResolvedSegment = {
-          id: parallelId,
-          namespace: parallelEntry.id,
-          type: "parallel",
-          index: 0,
-          component: null as any,
-          params,
-          slot,
-          belongsToRoute,
-          parallelName: `${parallelEntry.id}.${slot}`,
-          ...(parallelEntry.mountPath
-            ? { mountPath: parallelEntry.mountPath }
-            : {}),
-        };
-
-        return await evaluateRevalidation({
-          segment: dummySegment,
-          prevParams,
-          getPrevSegment: null,
-          request,
-          prevUrl,
-          nextUrl,
-          revalidations: parallelEntry.revalidate.map((fn, i) => ({
-            name: `revalidate${i}`,
-            fn,
-          })),
-          routeKey,
-          context,
-          actionContext,
-          stale,
-          traceSource: "parallel",
-        });
-      })();
-      emitRevalidationDecision(
-        parallelId,
-        context.pathname,
-        routeKey,
-        shouldResolve,
-      );
+    // Use orphan.shortCode (the parent layout) to match the SSR path
+    // (resolveParallelEntry receives parentShortCode = orphan.shortCode).
+    // Using parallelEntry.shortCode would generate IDs the client doesn't know about.
+    const parallelId = `${orphan.shortCode}.${slot}`;
+    matchedIds.push(parallelId);
 
-      let component: ReactNode | undefined;
-      if (shouldResolve) {
-        component = await tryStaticSlot(parallelEntry, slot, parallelId);
-      }
-      if (component === undefined) {
-        const hasLoadingFallback =
-          parallelEntry.loading !== undefined &&
-          parallelEntry.loading !== false;
-        if (!shouldResolve) {
-          component = null;
-        } else if (hasLoadingFallback) {
-          const result =
-            typeof handler === "function" ? handler(context) : handler;
-          if (result instanceof Promise) {
-            const tracked = deps.trackHandler(result, {
-              segmentId: parallelId,
-              segmentType: "parallel",
-            });
-            observeStreamedHandler(
-              tracked,
-              parallelId,
-              "parallel",
-              context.pathname,
-              routeKey,
-              params,
-            );
-            component = tracked as ReactNode;
-          } else {
-            component = result as ReactNode;
-          }
-        } else {
-          component =
-            typeof handler === "function" ? await handler(context) : handler;
+    const shouldResolve = await (async () => {
+      if (!clientSegmentIds.has(parallelId)) {
+        if (isTraceActive()) {
+          pushRevalidationTraceEntry({
+            segmentId: parallelId,
+            segmentType: "parallel",
+            belongsToRoute,
+            source: "parallel",
+            defaultShouldRevalidate: true,
+            finalShouldRevalidate: true,
+            reason: "new-segment",
+          });
         }
+        return true;
       }
 
-      segments.push({
+      const dummySegment: ResolvedSegment = {
         id: parallelId,
         namespace: parallelEntry.id,
         type: "parallel",
         index: 0,
-        component,
-        loading: parallelEntry.loading === false ? null : parallelEntry.loading,
-        transition: parallelEntry.transition,
+        component: null as any,
         params,
         slot,
         belongsToRoute,
@@ -1141,8 +1097,87 @@ export async function resolveOrphanLayoutWithRevalidation<TEnv>(
         ...(parallelEntry.mountPath
           ? { mountPath: parallelEntry.mountPath }
           : {}),
+      };
+
+      return await evaluateRevalidation({
+        segment: dummySegment,
+        prevParams,
+        getPrevSegment: null,
+        request,
+        prevUrl,
+        nextUrl,
+        revalidations: parallelEntry.revalidate.map((fn, i) => ({
+          name: `revalidate${i}`,
+          fn,
+        })),
+        routeKey,
+        context,
+        actionContext,
+        stale,
+        traceSource: "parallel",
       });
+    })();
+    emitRevalidationDecision(
+      parallelId,
+      context.pathname,
+      routeKey,
+      shouldResolve,
+    );
+
+    let component: ReactNode | undefined;
+    if (shouldResolve) {
+      component = await tryStaticSlot(parallelEntry, slot, parallelId);
     }
+    if (component === undefined) {
+      const hasLoadingFallback =
+        parallelEntry.loading !== undefined && parallelEntry.loading !== false;
+      if (!shouldResolve) {
+        component = null;
+      } else if (handler === undefined) {
+        // Handler evicted (production static slot) but static lookup missed.
+        component = null;
+      } else if (hasLoadingFallback) {
+        const result =
+          typeof handler === "function" ? handler(context) : handler;
+        if (result instanceof Promise) {
+          const tracked = deps.trackHandler(result, {
+            segmentId: parallelId,
+            segmentType: "parallel",
+          });
+          observeStreamedHandler(
+            tracked,
+            parallelId,
+            "parallel",
+            context.pathname,
+            routeKey,
+            params,
+          );
+          component = tracked as ReactNode;
+        } else {
+          component = result as ReactNode;
+        }
+      } else {
+        component =
+          typeof handler === "function" ? await handler(context) : handler;
+      }
+    }
+
+    segments.push({
+      id: parallelId,
+      namespace: parallelEntry.id,
+      type: "parallel",
+      index: 0,
+      component,
+      loading: parallelEntry.loading === false ? null : parallelEntry.loading,
+      transition: parallelEntry.transition,
+      params,
+      slot,
+      belongsToRoute,
+      parallelName: `${parallelEntry.id}.${slot}`,
+      ...(parallelEntry.mountPath
+        ? { mountPath: parallelEntry.mountPath }
+        : {}),
+    });
   }
 
   return { segments, matchedIds };

package/src/router.ts

@@ -690,7 +690,7 @@ export function createRouter<TEnv = any>(
         errorBoundary: [],
         notFoundBoundary: [],
         layout: [],
-        parallel: [],
+        parallel: {},
         intercept: [],
         loader: [],
       };