@rangojs/router 0.0.0-experimental.eb0645d3 → 0.0.0-experimental.f1468e3c

package/src/route-content-wrapper.tsx

@@ -1,10 +1,9 @@
 "use client";
 import type { ReactNode } from "react";
-import { Suspense, use, useId } from "react";
-import { invariant } from "./errors";
+import { Suspense, use } from "react";
 import { OutletProvider } from "./outlet-provider.js";
 import type { ResolvedSegment } from "./types.js";
-import { isLoaderDataResult } from "./types.js";
+import { decodeLoaderResults } from "./decode-loader-results.js";
 
 /**
  * Stable async wrapper component for route content
@@ -22,14 +21,12 @@ export function RouteContentWrapper({
   fallback,
   segmentId,
 }: {
-  content: Promise<ReactNode>;
+  // Normally a pending promise (use() suspends -> fallback). forceAwait paths
+  // pass an already-resolved node so Suspender renders it without suspending.
+  content: Promise<ReactNode> | ReactNode;
   fallback?: ReactNode;
   segmentId?: string;
 }): ReactNode {
-  if (!content) {
-    // Already resolved
-    return content as ReactNode;
-  }
   return (
     <Suspense
       fallback={fallback ?? null}
@@ -40,57 +37,20 @@ export function RouteContentWrapper({
   );
 }
 
-export function RouteContentWrapperCallback<T>({
-  resolve,
-  fallback,
-  children,
-}: {
-  resolve: Promise<T> | T;
-  fallback?: ReactNode;
-  children: (data: T) => ReactNode;
-}): ReactNode {
-  const id = useId();
-  invariant(children, "RouteContentWrapperCallback requires children");
-  invariant(
-    typeof children === "function",
-    "RouteContentWrapperCallback requires children to be a function",
-  );
-  invariant(
-    resolve !== undefined,
-    "RouteContentWrapperCallback requires resolve",
-  );
-  return (
-    <Suspense
-      fallback={fallback ?? null}
-      key={"route-content-suspense-callback-" + id}
-    >
-      <SuspenderCallback resolve={resolve} key={id}>
-        {children}
-      </SuspenderCallback>
-    </Suspense>
-  );
-}
-
 const Suspender = ({
   content,
 }: {
   content: Promise<ReactNode> | ReactNode;
 }): ReactNode => {
-  invariant(content instanceof Promise, "Suspender expects a Promise content");
-
-  return use(content);
-};
-
-const SuspenderCallback = <T,>({
-  resolve,
-  children,
-}: {
-  resolve: Promise<T> | T;
-  children: (data: T) => ReactNode;
-}): ReactNode => {
-  return resolve instanceof Promise
-    ? children(use(resolve))
-    : children(resolve);
+  // Normally content is a pending promise -> use() suspends and the wrapping
+  // Suspense shows the loading() fallback. forceAwait paths (popstate,
+  // stale-revalidation, fully-prefetched nav) instead pass the ALREADY-RESOLVED
+  // node so first render does not suspend for a microtask and flash the loading()
+  // fallback on a NORMAL (non-transition) commit. The wrapper tree
+  // (RouteContentWrapper > Suspense > Suspender) is identical either way, so this
+  // preserves tree structure (see docs/tree-structure.md) — only whether use()
+  // suspends differs, exactly like LoaderResolver's resolved-data branch.
+  return content instanceof Promise ? use(content) : content;
 };
 
 /**
@@ -159,28 +119,10 @@ function LoaderResolver({
       ? use(loaderDataPromise)
       : loaderDataPromise;
 
-  // Build loaderData record from resolved values
-  const loaderData: Record<string, any> = {};
-  let loaderErrorFallback: ReactNode = null;
-
-  loaderIds.forEach((id, i) => {
-    const result = resolvedData[i];
-
-    if (isLoaderDataResult(result)) {
-      if (result.ok) {
-        loaderData[id] = result.data;
-      } else {
-        if (result.fallback) {
-          loaderErrorFallback = result.fallback;
-        } else {
-          throw new Error(result.error.message);
-        }
-      }
-    } else {
-      // Legacy format - direct data
-      loaderData[id] = result;
-    }
-  });
+  const { loaderData, errorFallback } = decodeLoaderResults(
+    resolvedData,
+    loaderIds,
+  );
 
   return (
     <OutletProvider
@@ -190,7 +132,7 @@ function LoaderResolver({
       parallel={parallel}
       loaderData={Object.keys(loaderData).length > 0 ? loaderData : undefined}
     >
-      {loaderErrorFallback ?? children}
+      {errorFallback ?? children}
     </OutletProvider>
   );
 }