@rangojs/router 0.0.0-experimental.13 → 0.0.0-experimental.135c6902

package/src/router/lazy-includes.ts

@@ -0,0 +1,237 @@
+import { registerRouteMap } from "../route-map-builder.js";
+import { extractStaticPrefix } from "./pattern-matching.js";
+import {
+  EntryData,
+  RSCRouterContext,
+  runWithPrefixes,
+  getIsolatedLazyParent,
+} from "../server/context";
+import type { UrlPatterns } from "../urls.js";
+import type { AllUseItems, IncludeItem } from "../route-types.js";
+import type { ResolvedRouteMap, RouteEntry, TrailingSlashMode } from "../types";
+
+export interface LazyEvalDeps<TEnv = any> {
+  routesEntries: RouteEntry<TEnv>[];
+  mergedRouteMap: Record<string, string>;
+  nextMountIndex: () => number;
+  getPrecomputedByPrefix: () => Map<string, Record<string, string>> | null;
+  routerId?: string;
+}
+
+// Detect lazy includes in handler result and create placeholder entries
+// Lazy includes are IncludeItem with lazy: true and _lazyContext
+// Moved to outer scope so it can be reused by evaluateLazyEntry for nested includes
+export function findLazyIncludes<TEnv = any>(
+  items: AllUseItems[],
+): Array<{
+  prefix: string;
+  patterns: UrlPatterns<TEnv>;
+  context: {
+    urlPrefix: string;
+    namePrefix: string | undefined;
+    parent: unknown;
+    rootScoped?: boolean;
+  };
+}> {
+  const lazyItems: Array<{
+    prefix: string;
+    patterns: UrlPatterns<TEnv>;
+    context: {
+      urlPrefix: string;
+      namePrefix: string | undefined;
+      parent: unknown;
+      rootScoped?: boolean;
+    };
+  }> = [];
+
+  for (const item of items) {
+    if (!item) continue;
+    if (item.type === "include") {
+      const includeItem = item as IncludeItem;
+      if (includeItem.lazy === true && includeItem._lazyContext) {
+        lazyItems.push({
+          prefix: includeItem.prefix,
+          patterns: includeItem.patterns as UrlPatterns<TEnv>,
+          context: includeItem._lazyContext,
+        });
+      }
+    }
+    // Recursively check nested items (in layouts, etc.)
+    if ((item as any).uses && Array.isArray((item as any).uses)) {
+      lazyItems.push(...findLazyIncludes((item as any).uses));
+    }
+  }
+
+  return lazyItems;
+}
+
+/**
+ * Evaluate a lazy entry's patterns and populate its routes
+ * This runs the lazy patterns handler and updates the entry in-place
+ * Also detects nested lazy includes and registers them as new entries
+ */
+export function evaluateLazyEntry<TEnv = any>(
+  entry: RouteEntry<TEnv>,
+  deps: LazyEvalDeps<TEnv>,
+): void {
+  if (!entry.lazy || entry.lazyEvaluated || !entry.lazyPatterns) {
+    return;
+  }
+
+  // Check for pre-computed routes from build-time data.
+  // Only leaf nodes (no nested includes) are precomputed, so entries with
+  // nested lazy includes fall through to the handler below.
+  // When multiple entries share the same staticPrefix (e.g., several
+  // include("/", ...) calls), the precomputed data merges all their routes
+  // into one entry. Assigning that merged set to the first matching entry
+  // causes findMatch to pick the wrong handler for routes belonging to a
+  // different include. Skip the shortcut when the prefix is shared.
+  const currentPrecomputed = deps.getPrecomputedByPrefix();
+  if (currentPrecomputed) {
+    const routes = currentPrecomputed.get(entry.staticPrefix);
+    if (routes) {
+      const prefixIsShared =
+        deps.routesEntries.filter((e) => e.staticPrefix === entry.staticPrefix)
+          .length > 1;
+      if (!prefixIsShared) {
+        entry.lazyEvaluated = true;
+        entry.routes = routes as ResolvedRouteMap<any>;
+        for (const [name, pattern] of Object.entries(routes)) {
+          deps.mergedRouteMap[name] = pattern;
+        }
+        registerRouteMap(deps.mergedRouteMap);
+        return;
+      }
+    }
+  }
+
+  // Mark as evaluated immediately to prevent concurrent evaluation.
+  // JS is single-threaded but handlers.handler() could theoretically yield,
+  // and the while-loop in findMatch retries after evaluation.
+  entry.lazyEvaluated = true;
+
+  const lazyPatterns = entry.lazyPatterns as UrlPatterns<TEnv>;
+  const lazyContext = entry.lazyContext;
+
+  // Create a new context for evaluating the lazy patterns
+  const manifest = new Map<string, EntryData>();
+  const patterns = new Map<string, string>();
+  const patternsByPrefix = new Map<string, Map<string, string>>();
+  const trailingSlashMap = new Map<string, TrailingSlashMode>();
+
+  // Capture the handler result to detect nested lazy includes
+  let handlerResult: AllUseItems[] = [];
+
+  // Merge captured counters from include() to maintain consistent
+  // shortCode indices with sibling entries from pattern extraction
+  const lazyCounters: Record<string, number> = {};
+  if (lazyContext && (lazyContext as any).counters) {
+    const captured = (lazyContext as any).counters as Record<string, number>;
+    for (const [key, value] of Object.entries(captured)) {
+      lazyCounters[key] = value;
+    }
+  }
+
+  RSCRouterContext.run(
+    {
+      manifest,
+      patterns,
+      patternsByPrefix,
+      trailingSlash: trailingSlashMap,
+      namespace: "lazy",
+      parent: getIsolatedLazyParent(lazyContext?.parent as EntryData | null),
+      counters: lazyCounters,
+      cacheProfiles: (lazyContext as any)?.cacheProfiles,
+      rootScoped: (lazyContext as any)?.rootScoped,
+    },
+    () => {
+      // Run the lazy patterns handler with the original context prefixes
+      // The prefix comes from the IncludeItem stored in lazyPatterns
+      const includePrefix = (entry as any)._lazyPrefix || "";
+      const fullPrefix = (lazyContext?.urlPrefix || "") + includePrefix;
+
+      if (fullPrefix || lazyContext?.namePrefix) {
+        runWithPrefixes(fullPrefix, lazyContext?.namePrefix, () => {
+          handlerResult = lazyPatterns.handler() as AllUseItems[];
+        });
+      } else {
+        handlerResult = lazyPatterns.handler() as AllUseItems[];
+      }
+    },
+  );
+
+  // Populate the entry's routes from the patterns
+  const routesObject: Record<string, string> = {};
+  for (const [name, pattern] of patterns.entries()) {
+    routesObject[name] = pattern;
+    // Also add to merged route map for reverse() support
+    const existingPattern = deps.mergedRouteMap[name];
+    if (existingPattern !== undefined && existingPattern !== pattern) {
+      console.warn(
+        `[@rangojs/router] Route name conflict: "${name}" already maps to "${existingPattern}", ` +
+          `overwriting with "${pattern}" (from lazy include). Use unique route names to avoid this.`,
+      );
+    }
+    deps.mergedRouteMap[name] = pattern;
+  }
+
+  // Update the entry in-place
+  entry.routes = routesObject as ResolvedRouteMap<any>;
+
+  // Note: Do NOT clear lazyPatterns/lazyContext here.
+  // loadManifest() needs them on every request to re-run the handler
+  // in the correct AsyncLocalStorage context (Store.manifest).
+
+  // Update trailing slash config if available
+  if (trailingSlashMap.size > 0) {
+    entry.trailingSlash = Object.fromEntries(trailingSlashMap);
+  }
+
+  // Detect nested lazy includes and register them as new entries
+  const nestedLazyIncludes = findLazyIncludes(handlerResult);
+  for (const lazyInclude of nestedLazyIncludes) {
+    // Compute the full URL prefix (combining parent prefix if any)
+    const fullPrefix = lazyInclude.context.urlPrefix
+      ? lazyInclude.context.urlPrefix + lazyInclude.prefix
+      : lazyInclude.prefix;
+
+    const nestedEntry: RouteEntry<TEnv> & { _lazyPrefix?: string } = {
+      prefix: "",
+      staticPrefix: extractStaticPrefix(fullPrefix),
+      routes: {} as ResolvedRouteMap<any>, // Empty until first match
+      trailingSlash: entry.trailingSlash,
+      handler: (lazyInclude.patterns as UrlPatterns<TEnv>).handler,
+      mountIndex: deps.nextMountIndex(),
+      routerId: deps.routerId,
+      // Lazy evaluation fields
+      lazy: true,
+      lazyPatterns: lazyInclude.patterns,
+      lazyContext: lazyInclude.context,
+      lazyEvaluated: false,
+      // Store the include prefix for evaluation
+      _lazyPrefix: lazyInclude.prefix,
+    };
+    // Insert nested lazy entry before any entry whose staticPrefix is a
+    // prefix of (but shorter than) this lazy entry's staticPrefix.
+    // This ensures more specific lazy includes are matched before
+    // less specific eager entries (e.g., "/href/nested" before "/href/:id").
+    const nestedPrefix = nestedEntry.staticPrefix;
+    let insertIndex = deps.routesEntries.length;
+    if (nestedPrefix) {
+      for (let i = 0; i < deps.routesEntries.length; i++) {
+        const existing = deps.routesEntries[i]!;
+        if (
+          nestedPrefix.startsWith(existing.staticPrefix) &&
+          nestedPrefix.length > existing.staticPrefix.length
+        ) {
+          insertIndex = i;
+          break;
+        }
+      }
+    }
+    deps.routesEntries.splice(insertIndex, 0, nestedEntry);
+  }
+
+  // Re-register route map for runtime reverse() usage
+  registerRouteMap(deps.mergedRouteMap);
+}

package/src/router/loader-resolution.ts

@@ -22,7 +22,7 @@ import type { LoaderRevalidationResult, ActionContext } from "./types";
 import { isHandle, type Handle } from "../handle.js";
 import type { HandleStore } from "../server/handle-store.js";
 import { getFetchableLoader } from "../server/fetchable-loader-store.js";
-import { getRequestContext } from "../server/request-context.js";
+import { _getRequestContext } from "../server/request-context.js";
 import { debugLog } from "./logging.js";
 
 /**
@@ -36,7 +36,7 @@ export type LoaderErrorCallback = (
     segmentId: string;
     loaderName: string;
     handledByBoundary: boolean;
-  }
+  },
 ) => void;
 
 /**
@@ -55,14 +55,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";
@@ -73,7 +73,7 @@ export function wrapLoaderWithErrorHandling<T>(
         __loaderResult: true,
         ok: true,
         data,
-      })
+      }),
     )
     .catch((error): LoaderDataResult<T> => {
       // Find nearest error boundary
@@ -127,61 +127,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);
@@ -190,46 +232,102 @@ 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;
     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,
       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;
+  }
+
+  return useLoader;
+}
+
+/**
+ * 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.
+ *
+ * Includes cycle detection: tracks dependency edges between loaders and
+ * throws on circular dependencies to prevent deadlocks.
+ */
+export function setupLoaderAccess<TEnv>(
+  ctx: HandlerContext<any, TEnv>,
+  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>) => {
+    if (isHandle(item)) {
+      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);
+      };
+    }
+
+    return useLoader(item as LoaderDefinition<any, any>, null);
   }) as typeof ctx.use;
 }
 
@@ -237,20 +335,17 @@ export function setupLoaderAccess<TEnv>(
  * 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 {
-  // Get HandleStore from request context
-  const getHandleStore = (): HandleStore | undefined => {
-    return getRequestContext()?._handleStore;
-  };
+export function setupBuildUse<TEnv>(ctx: HandlerContext<any, TEnv>): void {
+  // Eagerly capture the HandleStore (same ALS protection as setupLoaderAccess).
+  const handleStoreRef = _getRequestContext()?._handleStore;
 
   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 = getHandleStore();
-      const segmentId = (ctx as InternalHandlerContext)._currentSegmentId;
+      const store = handleStoreRef;
+      const segmentId = (ctx as InternalHandlerContext<any, TEnv>)
+        ._currentSegmentId;
 
       if (!segmentId) {
         throw new Error(
@@ -259,12 +354,15 @@ export function setupBuildUse<TEnv>(
         );
       }
 
-      return (dataOrFn: unknown | Promise<unknown> | (() => Promise<unknown>)) => {
+      return (
+        dataOrFn: unknown | Promise<unknown> | (() => Promise<unknown>),
+      ) => {
         if (!store) return;
 
-        const valueOrPromise = typeof dataOrFn === "function"
-          ? (dataOrFn as () => Promise<unknown>)()
-          : dataOrFn;
+        const valueOrPromise =
+          typeof dataOrFn === "function"
+            ? (dataOrFn as () => Promise<unknown>)()
+            : dataOrFn;
 
         store.push(handle.$$id, segmentId, valueOrPromise);
       };
@@ -282,76 +380,24 @@ export function setupBuildUse<TEnv>(
 /**
  * Set up ctx.use() for proactive caching (silent mode).
  * Handles are silently ignored (no push to HandleStore).
- * Loaders work normally but with fresh memoization.
+ * 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>>
+  loaderPromises: Map<string, Promise<any>>,
 ): void {
+  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
-      };
-    }
-
-    // Loader case: same as setupLoaderAccess
-    const loader = item as LoaderDefinition<any, any>;
-
-    // Return cached promise if already started
-    if (loaderPromises.has(loader.$$id)) {
-      return loaderPromises.get(loader.$$id);
-    }
-
-    // Get loader function
-    let loaderFn = loader.fn;
-    if (!loaderFn) {
-      const fetchable = getFetchableLoader(loader.$$id);
-      if (fetchable) {
-        loaderFn = fetchable.fn;
-      }
+      // Silent mode - return a no-op so handle data is not pushed during caching
+      return (_dataOrFn: unknown) => {};
     }
 
-    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.`
-      );
-    }
-
-    // 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,
-    };
-
-    // Start loader execution with tracking
-    const doneLoader = track(`loader:${loader.$$id}`);
-    const promise = Promise.resolve(
-      loaderFn(loaderCtx as LoaderContext<any, TEnv>)
-    ).finally(() => {
-      doneLoader();
-    });
-
-    loaderPromises.set(loader.$$id, promise);
-    return promise;
+    return useLoader(item as LoaderDefinition<any, any>, null);
   }) as typeof ctx.use;
 }
 
@@ -367,7 +413,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();