@rangojs/router 0.0.0-experimental.7 → 0.0.0-experimental.73ab3466

package/src/router/loader-resolution.ts

@@ -7,6 +7,7 @@
 import type { ReactNode } from "react";
 import { track } from "../server/context";
 import type { EntryData } from "../server/context";
+import { contextGet } from "../context-var.js";
 import type {
   ResolvedSegment,
   HandlerContext,
@@ -21,8 +22,9 @@ import type {
 import type { LoaderRevalidationResult, ActionContext } from "./types";
 import { isHandle, type Handle } from "../handle.js";
 import type { HandleStore } from "../server/handle-store.js";
-import { getFetchableLoader } from "../loader.rsc.js";
-import { getRequestContext } from "../server/request-context.js";
+import { getFetchableLoader } from "../server/fetchable-loader-store.js";
+import { _getRequestContext } from "../server/request-context.js";
+import { debugLog } from "./logging.js";
 
 /**
  * Internal callback signature for loader error notifications.
@@ -35,7 +37,7 @@ export type LoaderErrorCallback = (
     segmentId: string;
     loaderName: string;
     handledByBoundary: boolean;
-  }
+  },
 ) => void;
 
 /**
@@ -54,14 +56,14 @@ export function wrapLoaderWithErrorHandling<T>(
   segmentId: string,
   pathname: string,
   findNearestErrorBoundary: (
-    entry: EntryData | null
+    entry: EntryData | null,
   ) => ReactNode | ErrorBoundaryHandler | null,
   createErrorInfo: (
     error: unknown,
     segmentId: string,
-    segmentType: ErrorInfo["segmentType"]
+    segmentType: ErrorInfo["segmentType"],
   ) => ErrorInfo,
-  onError?: LoaderErrorCallback
+  onError?: LoaderErrorCallback,
 ): Promise<LoaderDataResult<T>> {
   // Extract loader name from segmentId (format: "M1L0D0.loaderName")
   const loaderName = segmentId.split(".").pop() || "unknown";
@@ -72,7 +74,7 @@ export function wrapLoaderWithErrorHandling<T>(
         __loaderResult: true,
         ok: true,
         data,
-      })
+      }),
     )
     .catch((error): LoaderDataResult<T> => {
       // Find nearest error boundary
@@ -111,10 +113,10 @@ export function wrapLoaderWithErrorHandling<T>(
         renderedFallback = fallback;
       }
 
-      console.log(
-        `[Router] Loader error wrapped with boundary fallback in ${segmentId}:`,
-        errorInfo.message
-      );
+      debugLog("loader", "loader error wrapped with boundary fallback", {
+        segmentId,
+        message: errorInfo.message,
+      });
 
       return {
         __loaderResult: true,
@@ -126,61 +128,103 @@ export function wrapLoaderWithErrorHandling<T>(
 }
 
 /**
- * Set up the use() method on handler context to access loaders and handles.
- *
- * For loaders: Lazily runs loaders, memoizes results per request.
- * For handles: Returns a push function bound to the current segment.
+ * Detect cycles in the loader dependency graph using DFS from a given node.
+ * Returns the cycle path (array of loader IDs forming the cycle) if one exists,
+ * or null if no cycle is found.
  */
-export function setupLoaderAccess<TEnv>(
-  ctx: HandlerContext<any, TEnv>,
-  loaderPromises: Map<string, Promise<any>>
-): void {
-  // Get HandleStore from request context
-  const getHandleStore = (): HandleStore | undefined => {
-    return getRequestContext()?._handleStore;
-  };
+function detectLoaderCycle(
+  from: string,
+  to: string,
+  dependsOn: Map<string, Set<string>>,
+): string[] | null {
+  // If `to` can reach `from` via the dependency graph, adding the edge
+  // from -> to creates a cycle. We search from `to` looking for `from`.
+  const visited = new Set<string>();
+  const path: string[] = [from, to];
+
+  function dfs(current: string): string[] | null {
+    if (current === from) {
+      // Found a cycle: return the path leading back to `from`
+      return path;
+    }
+    if (visited.has(current)) return null;
+    visited.add(current);
 
-  // The use() function handles both loaders and handles
-  ctx.use = ((item: LoaderDefinition<any, any> | Handle<any, any>) => {
-    // Handle case: return a push function
-    if (isHandle(item)) {
-      const handle = item;
-      const store = getHandleStore();
-      const segmentId = (ctx as InternalHandlerContext)._currentSegmentId;
+    const deps = dependsOn.get(current);
+    if (!deps) return null;
 
-      if (!segmentId) {
-        throw new Error(
-          `Handle "${handle.$$id}" used outside of handler context. ` +
-            `Handles must be used within route/layout handlers.`
-        );
-      }
+    for (const dep of deps) {
+      path.push(dep);
+      const cycle = dfs(dep);
+      if (cycle) return cycle;
+      path.pop();
+    }
+    return null;
+  }
 
-      // Return a push function bound to this handle and segment
-      // Accepts: value, Promise, or async callback (executed immediately)
-      // Promises are pushed directly - RSC will serialize and stream them
-      return (dataOrFn: unknown | Promise<unknown> | (() => Promise<unknown>)) => {
-        if (!store) return;
+  return dfs(to);
+}
 
-        // If it's a function, call it immediately to get the promise
-        const valueOrPromise = typeof dataOrFn === "function"
-          ? (dataOrFn as () => Promise<unknown>)()
-          : dataOrFn;
+/**
+ * Creates a memoizing loader executor with cycle detection.
+ * Shared by setupLoaderAccess and setupLoaderAccessSilent; only the handle
+ * branch differs between the two, so only the loader logic is extracted here.
+ *
+ * Returns a useLoader(loader, callerLoaderId) function that:
+ * - Tracks dependency edges between loaders for cycle detection
+ * - Throws immediately (synchronously inside an async fn) on circular deps
+ * - Memoizes each loader's promise so it runs at most once per request
+ */
+function createLoaderExecutor<TEnv>(
+  ctx: HandlerContext<any, TEnv>,
+  loaderPromises: Map<string, Promise<any>>,
+): (
+  loader: LoaderDefinition<any, any>,
+  callerLoaderId: string | null,
+) => Promise<any> {
+  // Capture RequestContext eagerly for cookie access (ALS protection on Cloudflare)
+  const reqCtxRef = _getRequestContext();
+
+  // Dependency graph: loaderId -> set of loader IDs it directly depends on.
+  const dependsOn = new Map<string, Set<string>>();
+
+  // Loaders whose promises have not yet settled.
+  // A dependency on a pending loader that closes a cycle means deadlock.
+  const pendingLoaders = new Set<string>();
+
+  function useLoader(
+    loader: LoaderDefinition<any, any>,
+    callerLoaderId: string | null,
+  ): Promise<any> {
+    // Record the dependency edge and check for cycles before running
+    if (callerLoaderId !== null) {
+      let deps = dependsOn.get(callerLoaderId);
+      if (!deps) {
+        deps = new Set();
+        dependsOn.set(callerLoaderId, deps);
+      }
 
-        // Push directly - promises will be serialized by RSC and streamed
-        store.push(handle.$$id, segmentId, valueOrPromise);
-      };
-    }
+      // Only relevant when the target is still pending (would deadlock)
+      if (pendingLoaders.has(loader.$$id)) {
+        const cycle = detectLoaderCycle(callerLoaderId, loader.$$id, dependsOn);
+        if (cycle) {
+          throw new Error(
+            `Circular loader dependency detected: ${cycle.join(" -> ")}. ` +
+              `Loaders cannot depend on each other in a cycle. ` +
+              `Refactor to break the circular dependency.`,
+          );
+        }
+      }
 
-    // Loader case: existing behavior
-    const loader = item as LoaderDefinition<any, any>;
+      deps.add(loader.$$id);
+    }
 
     // Return cached promise if already started
     if (loaderPromises.has(loader.$$id)) {
-      return loaderPromises.get(loader.$$id);
+      return loaderPromises.get(loader.$$id)!;
     }
 
     // Get loader function - either from loader object or fetchable registry
-    // Fetchable loaders store fn in registry (not on object) to avoid client bundling issues
     let loaderFn = loader.fn;
     if (!loaderFn) {
       const fetchable = getFetchableLoader(loader.$$id);
@@ -189,122 +233,177 @@ export function setupLoaderAccess<TEnv>(
       }
     }
 
-    // Ensure loader has a function
     if (!loaderFn) {
       throw new Error(
-        `Loader "${loader.$$id}" has no function. This usually means the loader was defined without "use server" and the function was not included in the build.`
+        `Loader "${loader.$$id}" has no function. This usually means the loader was defined without "use server" and the function was not included in the build.`,
       );
     }
 
-    // Create loader context with recursive use() support
+    pendingLoaders.add(loader.$$id);
+
+    const currentLoaderId = loader.$$id;
+    // Loader functions are always fresh (never cached), so they get an
+    // unguarded get that bypasses non-cacheable read guards. This applies
+    // to ALL loaders — DSL and handler-called — because the loader
+    // function itself always re-executes. Also handles nested deps
+    // (loaderA → use(loaderB)) since all share this unguarded get.
     const loaderCtx: LoaderContext<Record<string, string | undefined>, TEnv> = {
       params: ctx.params,
+      routeParams: (ctx.params ?? {}) as Record<string, string>,
       request: ctx.request,
       searchParams: ctx.searchParams,
+      search: (ctx as any).search,
       pathname: ctx.pathname,
       url: ctx.url,
       env: ctx.env,
       var: ctx.var,
-      get: ctx.get,
+      get: ((keyOrVar: any) => contextGet(ctx.var, keyOrVar)) as typeof ctx.get,
       use: <TDep, TDepParams = any>(
-        dep: LoaderDefinition<TDep, TDepParams>
+        dep: LoaderDefinition<TDep, TDepParams>,
       ): Promise<TDep> => {
-        // Recursive call - will start dep loader if not already started
-        return ctx.use(dep);
+        return useLoader(dep, currentLoaderId);
       },
-      // Default to GET for loaders called through route handlers
       method: "GET",
       body: undefined,
+      reverse: ctx.reverse as LoaderContext["reverse"],
     };
 
-    // Start loader execution with tracking
-    const doneLoader = track(`loader:${loader.$$id}`);
+    const doneLoader = track(`loader:${loader.$$id}`, 2);
     const promise = Promise.resolve(
-      loaderFn(loaderCtx as LoaderContext<any, TEnv>)
+      loaderFn(loaderCtx as LoaderContext<any, TEnv>),
     ).finally(() => {
+      pendingLoaders.delete(loader.$$id);
       doneLoader();
     });
 
-    // Memoize for subsequent calls
     loaderPromises.set(loader.$$id, promise);
-
     return promise;
-  }) as typeof ctx.use;
+  }
+
+  return useLoader;
 }
 
 /**
- * Set up ctx.use() for proactive caching (silent mode).
- * Handles are silently ignored (no push to HandleStore).
- * Loaders work normally but with fresh memoization.
+ * Set up the use() method on handler context to access loaders and handles.
  *
- * This prevents duplicate handle data (breadcrumbs, meta) from being
- * pushed to the response stream during background proactive caching.
+ * For loaders: Lazily runs loaders, memoizes results per request.
+ * For handles: Returns a push function bound to the current segment.
+ *
+ * Includes cycle detection: tracks dependency edges between loaders and
+ * throws on circular dependencies to prevent deadlocks.
  */
-export function setupLoaderAccessSilent<TEnv>(
+export function setupLoaderAccess<TEnv>(
   ctx: HandlerContext<any, TEnv>,
-  loaderPromises: Map<string, Promise<any>>
+  loaderPromises: Map<string, Promise<any>>,
 ): void {
+  // Eagerly capture the HandleStore at setup time (before pipeline async ops).
+  // In workerd/Cloudflare, dynamic imports and fetch() in the match pipeline
+  // can disrupt AsyncLocalStorage, causing getRequestContext() to return
+  // undefined when handlers later call ctx.use(handle). Capturing early
+  // ensures the store reference survives ALS disruption.
+  const handleStoreRef = _getRequestContext()?._handleStore;
+
+  const useLoader = createLoaderExecutor(ctx, loaderPromises);
+
   ctx.use = ((item: LoaderDefinition<any, any> | Handle<any, any>) => {
-    // Handle case: return a no-op push function
     if (isHandle(item)) {
-      // Silent mode - return a function that does nothing
-      return (_dataOrFn: unknown) => {
-        // Intentionally empty - don't push handle data during proactive caching
+      const handle = item;
+      const store = handleStoreRef;
+      const segmentId = (ctx as InternalHandlerContext<any, TEnv>)
+        ._currentSegmentId;
+
+      if (!segmentId) {
+        throw new Error(
+          `Handle "${handle.$$id}" used outside of handler context. ` +
+            `Handles must be used within route/layout handlers.`,
+        );
+      }
+
+      return (
+        dataOrFn: unknown | Promise<unknown> | (() => Promise<unknown>),
+      ) => {
+        if (!store) return;
+
+        const valueOrPromise =
+          typeof dataOrFn === "function"
+            ? (dataOrFn as () => Promise<unknown>)()
+            : dataOrFn;
+
+        store.push(handle.$$id, segmentId, valueOrPromise);
       };
     }
 
-    // Loader case: same as setupLoaderAccess
-    const loader = item as LoaderDefinition<any, any>;
+    return useLoader(item as LoaderDefinition<any, any>, null);
+  }) as typeof ctx.use;
+}
+
+/**
+ * Set up ctx.use() for pre-rendering (build-time).
+ * Handles push to HandleStore; loaders throw with a clear error.
+ */
+export function setupBuildUse<TEnv>(ctx: HandlerContext<any, TEnv>): void {
+  // Eagerly capture the HandleStore (same ALS protection as setupLoaderAccess).
+  const handleStoreRef = _getRequestContext()?._handleStore;
 
-    // Return cached promise if already started
-    if (loaderPromises.has(loader.$$id)) {
-      return loaderPromises.get(loader.$$id);
-    }
+  ctx.use = ((item: LoaderDefinition<any, any> | Handle<any, any>) => {
+    // Handle case: return a push function bound to the current segment
+    if (isHandle(item)) {
+      const handle = item;
+      const store = handleStoreRef;
+      const segmentId = (ctx as InternalHandlerContext<any, TEnv>)
+        ._currentSegmentId;
 
-    // Get loader function
-    let loaderFn = loader.fn;
-    if (!loaderFn) {
-      const fetchable = getFetchableLoader(loader.$$id);
-      if (fetchable) {
-        loaderFn = fetchable.fn;
+      if (!segmentId) {
+        throw new Error(
+          `Handle "${handle.$$id}" used outside of handler context. ` +
+            `Handles must be used within route/layout handlers.`,
+        );
       }
-    }
 
-    if (!loaderFn) {
-      throw new Error(
-        `Loader "${loader.$$id}" has no function. This usually means the loader was defined without "use server" and the function was not included in the build.`
-      );
+      return (
+        dataOrFn: unknown | Promise<unknown> | (() => Promise<unknown>),
+      ) => {
+        if (!store) return;
+
+        const valueOrPromise =
+          typeof dataOrFn === "function"
+            ? (dataOrFn as () => Promise<unknown>)()
+            : dataOrFn;
+
+        store.push(handle.$$id, segmentId, valueOrPromise);
+      };
     }
 
-    // Create loader context with recursive use() support
-    const loaderCtx: LoaderContext<Record<string, string | undefined>, TEnv> = {
-      params: ctx.params,
-      request: ctx.request,
-      searchParams: ctx.searchParams,
-      pathname: ctx.pathname,
-      url: ctx.url,
-      env: ctx.env,
-      var: ctx.var,
-      get: ctx.get,
-      use: <TDep, TDepParams = any>(
-        dep: LoaderDefinition<TDep, TDepParams>
-      ): Promise<TDep> => {
-        return ctx.use(dep);
-      },
-      method: "GET",
-      body: undefined,
-    };
+    // Loader case: not available during pre-rendering
+    throw new Error(
+      "Loaders are not available during pre-rendering. " +
+        "Use them on parent layouts with cache() for request-time data, " +
+        "or use a passthrough prerender handler.",
+    );
+  }) as typeof ctx.use;
+}
 
-    // Start loader execution with tracking
-    const doneLoader = track(`loader:${loader.$$id}`);
-    const promise = Promise.resolve(
-      loaderFn(loaderCtx as LoaderContext<any, TEnv>)
-    ).finally(() => {
-      doneLoader();
-    });
+/**
+ * Set up ctx.use() for proactive caching (silent mode).
+ * Handles are silently ignored (no push to HandleStore).
+ * Loaders work normally but with fresh memoization and cycle detection.
+ *
+ * This prevents duplicate handle data (breadcrumbs, meta) from being
+ * pushed to the response stream during background proactive caching.
+ */
+export function setupLoaderAccessSilent<TEnv>(
+  ctx: HandlerContext<any, TEnv>,
+  loaderPromises: Map<string, Promise<any>>,
+): void {
+  const useLoader = createLoaderExecutor(ctx, loaderPromises);
 
-    loaderPromises.set(loader.$$id, promise);
-    return promise;
+  ctx.use = ((item: LoaderDefinition<any, any> | Handle<any, any>) => {
+    if (isHandle(item)) {
+      // Silent mode - return a no-op so handle data is not pushed during caching
+      return (_dataOrFn: unknown) => {};
+    }
+
+    return useLoader(item as LoaderDefinition<any, any>, null);
   }) as typeof ctx.use;
 }
 
@@ -320,7 +419,7 @@ export function setupLoaderAccessSilent<TEnv>(
 export async function revalidate<T>(
   shouldRevalidate: () => Promise<boolean>,
   onRevalidate: () => Promise<T>,
-  onSkip: () => T
+  onSkip: () => T,
 ): Promise<T> {
   const needsRevalidation = await shouldRevalidate();
   return needsRevalidation ? await onRevalidate() : onSkip();