@rangojs/router 0.0.0-experimental.8 → 0.0.0-experimental.80daa23e

package/src/loader.rsc.ts

@@ -5,9 +5,9 @@
  * Only used in react-server context via export conditions.
  *
  * For non-fetchable loaders: returns a loader definition with fn included
- * For fetchable loaders: stores fn in registry and returns a serializable loader with action
+ * For fetchable loaders: stores fn in registry and returns a serializable loader
  *
- * The $$id is injected by the Vite exposeLoaderId plugin as a hidden parameter.
+ * The $$id is injected by the Vite exposeInternalIds plugin as a hidden parameter.
  * Users don't need to pass any name - IDs are auto-generated from file path.
  */
 
@@ -17,204 +17,80 @@ import type {
   LoaderFn,
 } from "./types.js";
 import type { MiddlewareFn } from "./router/middleware.js";
-import { getRequestContext } from "./server/request-context.js";
+import {
+  registerFetchableLoader,
+  getFetchableLoader,
+} from "./server/fetchable-loader-store.js";
+import { missingInjectedIdError } from "./missing-id-error.js";
+import { isUnderTestRunner } from "./runtime-env.js";
 
-// Internal registry for fetchable loaders (server-side only)
-// Maps loader $$id to its function and middleware
-//
-// WHY TWO REGISTRIES?
-// This registry (fetchableLoaderRegistry) is populated immediately when createLoader() runs.
-// The other registry in loader-registry.ts (loaderRegistry) is a cache used by the RSC handler
-// for GET-based fetching. The RSC handler calls getFetchableLoader() from here to populate
-// its cache. This separation allows:
-// 1. Server actions to look up loaders directly without going through lazy loading
-// 2. The RSC handler to use lazy loading for production builds
-// 3. Both to share the same source of truth (this registry)
-const fetchableLoaderRegistry = new Map<
-  string,
-  { fn: LoaderFn<any, any, any>; middleware: MiddlewareFn[] }
->();
+export { getFetchableLoader };
 
-/**
- * Register a fetchable loader's function internally
- * Called during module initialization with the $$id
- */
-function registerFetchableLoader(
-  id: string,
-  fn: LoaderFn<any, any, any>,
-  middleware: MiddlewareFn[]
-): void {
-  fetchableLoaderRegistry.set(id, { fn, middleware });
-}
-
-/**
- * Get a fetchable loader's function from the internal registry by $$id
- *
- * This is used internally by:
- * - Server actions (loaderAction) to execute loader functions
- * - loader-registry.ts to populate the main registry for GET-based fetching
- *
- * Loaders are registered here when createLoader() is called with fetchable: true.
- * The $$id is injected by the Vite exposeLoaderId plugin.
- *
- * @param id - The loader's $$id (auto-generated from file path + export name)
- * @returns The loader function and middleware, or undefined if not found
- *
- * @internal This is primarily for internal use by the router infrastructure
- */
-export function getFetchableLoader(
-  id: string
-): { fn: LoaderFn<any, any, any>; middleware: MiddlewareFn[] } | undefined {
-  return fetchableLoaderRegistry.get(id);
-}
+// Runtime-fallback counter for bare unit tests (no Vite plugin); process-stable.
+let runtimeLoaderIdCounter = 0;
 
 // Overload 1: With function only (not fetchable)
 export function createLoader<T>(
-  fn: LoaderFn<T, Record<string, string | undefined>, any>
+  fn: LoaderFn<T, Record<string, string | undefined>, any>,
 ): LoaderDefinition<Awaited<T>, Record<string, string | undefined>>;
 
 // Overload 2: Fetchable with `true` (no middleware)
 export function createLoader<T>(
   fn: LoaderFn<T, Record<string, string | undefined>, any>,
-  fetchable: true
+  fetchable: true,
 ): LoaderDefinition<Awaited<T>, Record<string, string | undefined>>;
 
 // Overload 3: Fetchable with middleware options
 export function createLoader<T>(
   fn: LoaderFn<T, Record<string, string | undefined>, any>,
-  options: FetchableLoaderOptions
+  options: FetchableLoaderOptions,
 ): LoaderDefinition<Awaited<T>, Record<string, string | undefined>>;
 
 // Implementation - the $$id parameter is injected by Vite plugin, not user-provided
 export function createLoader<T>(
   fn: LoaderFn<T, Record<string, string | undefined>, any>,
   fetchable?: true | FetchableLoaderOptions,
-  // Hidden parameter injected by Vite exposeLoaderId plugin
-  __injectedId?: string
+  // Hidden parameter injected by Vite exposeInternalIds plugin
+  __injectedId?: string,
 ): LoaderDefinition<Awaited<T>, Record<string, string | undefined>> {
-  // The $$id will be set on the returned object by Vite plugin
-  // For fetchable loaders, __injectedId is also passed as a parameter
-  const loaderId = __injectedId || "";
-
-  // Serializes to just { __brand, $$id } when passed as a prop to client components.
-  // RSC Flight protocol calls toJSON when serializing objects.
-  const toJSON = () => ({ __brand: "loader" as const, $$id: loaderId });
+  let loaderId = __injectedId || "";
+
+  // Under test runner, fall back to synthetic id (recovers fn from registry by $$id).
+  // Otherwise (dev or prod), missing id means unsupported shape — fail loud.
+  if (!loaderId) {
+    if (isUnderTestRunner()) {
+      loaderId = `__rango_runtime_loader_${runtimeLoaderIdCounter++}`;
+    } else if (process.env.NODE_ENV !== "production") {
+      throw missingInjectedIdError("Loader", "createLoader");
+    } else {
+      throw new Error(
+        "[rango] Loader is missing $$id — the build plugin did not inject one. " +
+          "Export it as `export const X = createLoader(...)`.",
+      );
+    }
+  }
 
-  // If not fetchable, return a simple stub with fn included
+  // If not fetchable, store fn in registry (for SSR ctx.use() resolution)
+  // but mark fetchable=false so the _rsc_loader endpoint rejects it.
   if (fetchable === undefined) {
+    if (fn && loaderId) {
+      registerFetchableLoader(loaderId, fn, [], false);
+    }
     return {
       __brand: "loader",
       $$id: loaderId,
-      fn: fn as LoaderFn<Awaited<T>, Record<string, string | undefined>, any>,
-      toJSON,
     };
   }
 
-  // Fetchable loader - store fn in registry and return a serializable object
+  // Fetchable loader - store fn in registry and return a serializable object.
   const middleware: MiddlewareFn[] =
     fetchable === true ? [] : fetchable?.middleware || [];
-
-  // Register the function in the internal registry by $$id (server-side only)
-  // The server action will look it up by $$id when executed
   if (fn && loaderId) {
-    registerFetchableLoader(loaderId, fn, middleware);
+    registerFetchableLoader(loaderId, fn, middleware, true);
   }
 
-  // Create server action for form-based fetching
-  // This action is serializable and can be passed to client components
-  // The loaderId is captured in closure (it's a primitive string)
-  //
-  // IMPORTANT: The signature must be (prevState, formData) for useActionState compatibility.
-  // When used with useActionState, React passes the previous state as the first argument.
-  // The prevState is ignored here since loaders are stateless data fetchers.
-  async function loaderAction(
-    _prevState: Awaited<T> | null,
-    formData: FormData
-  ): Promise<Awaited<T>> {
-    "use server";
-
-    // Look up the loader from registry by $$id
-    const registered = fetchableLoaderRegistry.get(loaderId);
-    if (!registered) {
-      throw new Error(`Loader "${loaderId}" not found in registry`);
-    }
-
-    // Get request context (env, request, url, variables) from the RSC handler
-    // This is set by runWithRequestContext in rsc/index.ts when executing actions
-    const requestCtx = getRequestContext();
-
-    // Convert FormData to params object
-    const params: Record<string, string> = {};
-    formData.forEach((value, key) => {
-      if (typeof value === "string") {
-        params[key] = value;
-      }
-    });
-
-    // Use real request/url from context, or fall back to synthetic for edge cases
-    const actionUrl = requestCtx?.url ?? new URL("http://localhost/");
-    const actionRequest = requestCtx?.request ?? new Request(actionUrl, { method: "POST" });
-    const env = requestCtx?.env ?? {};
-
-    // Merge variables from request context (app-level middleware) with loader-specific variables
-    // requestCtx.var is the shared variables object from the handler
-    const variables: Record<string, any> = { ...requestCtx?.var };
-
-    // Execute middleware for auth checks, headers, cookies
-    // Headers/cookies set on ctx.res will be merged into the final response
-    if (registered.middleware.length > 0 && requestCtx?.res) {
-      const { executeServerActionMiddleware } = await import(
-        "./router/middleware.js"
-      );
-      await executeServerActionMiddleware(
-        registered.middleware,
-        actionRequest,
-        env,
-        params,
-        variables,
-        requestCtx.res
-      );
-    }
-
-    // Build context using createHandlerContext for consistency with route handlers
-    // Variables are now accessed from request context via getRequestContext()
-    const { createHandlerContext } = await import("./router/handler-context.js");
-    const baseCtx = createHandlerContext(
-      params,
-      actionRequest,
-      actionUrl.searchParams,
-      actionUrl.pathname,
-      actionUrl,
-      env
-    );
-
-    // Extend with server action specific properties
-    const ctx: any = {
-      ...baseCtx,
-      method: "POST",
-      formData,
-    };
-
-    // Execute and return result
-    return registered.fn(ctx);
-  }
-
-  // For fetchable loaders, include action in toJSON so it survives RSC serialization.
-  // loaderAction has "use server" so RSC Flight serializes it as a server action reference.
-  // Without this, passing a loader as a prop to a client component would lose the action,
-  // breaking useActionState() which needs loader.action for progressive enhancement.
-  const fetchableToJSON = () => ({
-    __brand: "loader" as const,
-    $$id: loaderId,
-    action: loaderAction,
-  });
-
-  // Return a loader object with action for form-based fetching
-  // The exposeLoaderId plugin will set $$id on this object
   return {
     __brand: "loader",
     $$id: loaderId,
-    action: loaderAction,
-    toJSON: fetchableToJSON,
   };
 }

package/src/loader.ts

@@ -1,11 +1,16 @@
 /**
- * rsc-router/loader (client version)
+ * @rangojs/router/loader (client version)
  *
  * Client-only stub for createLoader. Returns a minimal loader definition
- * that can be passed to hooks like useLoader. The actual loader function
- * is not included - it only exists on the server.
+ * ({ __brand, $$id }) that can be passed to hooks like useLoader.
+ * The actual loader function is not included -- it only exists on the server.
  *
- * The $$id is injected by the Vite exposeLoaderId plugin.
+ * For export-only loader files, the Vite plugin replaces the entire file with
+ * object literals (bypassing this function). Those stubs only contain
+ * { __brand, $$id }.
+ * This function only runs when loaders are in mixed files (not export-only).
+ *
+ * The $$id is injected by the Vite exposeInternalIds plugin.
  */
 
 import type {
@@ -13,35 +18,48 @@ import type {
   LoaderDefinition,
   LoaderFn,
 } from "./types.js";
+import { missingInjectedIdError } from "./missing-id-error.js";
+import { isUnderTestRunner } from "./runtime-env.js";
 
 // Overload 1: With function only (not fetchable)
 export function createLoader<T>(
-  fn: LoaderFn<T, Record<string, string | undefined>, any>
+  fn: LoaderFn<T, Record<string, string | undefined>, any>,
 ): LoaderDefinition<Awaited<T>, Record<string, string | undefined>>;
 
 // Overload 2: Fetchable with `true` (no middleware)
 export function createLoader<T>(
   fn: LoaderFn<T, Record<string, string | undefined>, any>,
-  fetchable: true
+  fetchable: true,
 ): LoaderDefinition<Awaited<T>, Record<string, string | undefined>>;
 
 // Overload 3: Fetchable with middleware options
 export function createLoader<T>(
   fn: LoaderFn<T, Record<string, string | undefined>, any>,
-  options: FetchableLoaderOptions
+  options: FetchableLoaderOptions,
 ): LoaderDefinition<Awaited<T>, Record<string, string | undefined>>;
 
-// Implementation - client stub that just returns the loader definition
-// The $$id parameter is injected by Vite plugin, not user-provided
+// Implementation - client stub ($$id injected by Vite plugin, not user-provided)
 export function createLoader<T>(
   _fn: LoaderFn<T, Record<string, string | undefined>, any>,
   _fetchable?: true | FetchableLoaderOptions,
-  __injectedId?: string
+  __injectedId?: string,
 ): LoaderDefinition<Awaited<T>, Record<string, string | undefined>> {
-  // Client only needs the $$id for identification
-  // The actual loader function is only used on the server
+  const loaderId = __injectedId || "";
+
+  // Under test runner, no id needed (loaderId stays ""; loader.rsc.ts provides fallback).
+  // Otherwise, missing id means unsupported shape — fail loud to avoid wrong key.
+  if (!loaderId && !isUnderTestRunner()) {
+    if (process.env.NODE_ENV !== "production") {
+      throw missingInjectedIdError("Loader", "createLoader");
+    }
+    throw new Error(
+      "[rango] Loader is missing $$id — the build plugin did not inject one. " +
+        "Export it as `export const X = createLoader(...)`.",
+    );
+  }
+
   return {
     __brand: "loader",
-    $$id: __injectedId || "",
+    $$id: loaderId,
   };
 }

package/src/missing-id-error.ts

@@ -0,0 +1,68 @@
+// Builds the error thrown when a create*() call (createLoader / createHandle)
+// reaches runtime without an injected $$id. The exposeInternalIds Vite transform
+// injects $$id only for an EXPORTED const declaration, so a non-exported const,
+// an `export let/var`, or an inline create*() call gets none. Previously this
+// failed with a terse message and no source location; this helper adds the
+// offending call site (best-effort, from the stack) and actionable guidance.
+//
+// The "<Kind> is missing $$id" prefix is preserved so existing tests and any
+// log scrapers keep matching. Dev-only: the call sites guard on
+// process.env.NODE_ENV === "development", so production builds fold the branch
+// away and tree-shake this module out.
+
+// create*() implementation files to skip when locating the user's call site.
+const SELF_FILES = new Set([
+  "missing-id-error",
+  "loader",
+  "loader.rsc",
+  "handle",
+]);
+
+/**
+ * Best-effort "path:line:column" of the user's create*() call, parsed from the
+ * current stack. Skips @rangojs/router internals and node_modules. Returns
+ * undefined if nothing usable is found (stack parsing is inherently fragile).
+ */
+function findUserCallSite(): string | undefined {
+  try {
+    const stack = new Error().stack;
+    if (!stack) return undefined;
+    for (const frame of stack.split("\n").slice(1)) {
+      const m = frame.match(
+        /(?:\(|@|\s)(?:file:\/\/)?((?:\/|[A-Za-z]:[\\/])[^()\s]+?\.(?:ts|tsx|js|jsx|mts|cts)):(\d+):(\d+)\)?/,
+      );
+      if (!m) continue;
+      const path = m[1];
+      if (path.includes("node_modules") || path.includes("@rangojs/router")) {
+        continue;
+      }
+      const base = path
+        .split(/[\\/]/)
+        .pop()!
+        .replace(/\.(?:ts|tsx|js|jsx|mts|cts)$/, "");
+      if (SELF_FILES.has(base)) continue;
+      return `${path}:${m[2]}:${m[3]}`;
+    }
+  } catch {
+    // best-effort only
+  }
+  return undefined;
+}
+
+export function missingInjectedIdError(
+  kind: "Loader" | "Handle",
+  fnName: "createLoader" | "createHandle",
+): Error {
+  const site = findUserCallSite();
+  const at = site ? ` (created at ${site})` : "";
+  return new Error(
+    `[rango] ${kind} is missing $$id${at}.\n` +
+      `The @rangojs/router:expose-internal-ids Vite transform injects ${fnName}()'s ` +
+      `stable $$id from an EXPORTED const declaration only:\n` +
+      `  export const X = ${fnName}(...)\n` +
+      `  const X = ${fnName}(...); export { X }\n` +
+      `A non-exported const, an \`export let/var\`, or an inline ${fnName}(...) ` +
+      `call gets no $$id — export it as \`export const\`. (A matching ` +
+      `"Unsupported ${fnName} shape" warning names the exact file:line.)`,
+  );
+}

package/src/outlet-context.ts

@@ -1,11 +1,31 @@
-import { Context, createContext, type ReactNode } from "react";
+import { type Context, createContext, type ReactNode } from "react";
 import type { ResolvedSegment } from "./types";
 
 export interface OutletContextValue {
   content: ReactNode;
+  /** Unresolved client-route work owned by descendants of this outlet. */
+  pending?: boolean;
   parallel?: ResolvedSegment[];
   segment?: ResolvedSegment;
   loaderData?: Record<string, any>;
+  /**
+   * SPIKE (streaming useLoader): per-loader UNDECODED results keyed by loader
+   * $$id. A value may be a pending Promise (loader still streaming) or an
+   * already-settled result entry. useLoader `use()`es a pending value at the
+   * read site — implicit suspension to the nearest consumer Suspense boundary —
+   * and decodes via decodeLoaderEntry. Populated instead of `loaderData` on
+   * streaming lanes (plain navs, document SSR); forceAwait/action lanes keep
+   * the resolved `loaderData` record.
+   */
+  loaderStreams?: Record<string, unknown>;
+  /**
+   * Loader $$ids on this segment that the document render awaited before
+   * first flush (loader(Def, { ssr: false })). Dev-diagnostic input only:
+   * useLoader uses it to warn when a read still suspends during SSR on a
+   * render that awaited flagged loaders (ssr-suspension-warning.ts). Absent
+   * on capture renders and lanes without flagged loaders.
+   */
+  awaitedLoaderIds?: readonly string[];
   parent?: OutletContextValue | null;
   /** Loading component for Suspense fallback (from segment's loading() definition) */
   loading?: ReactNode;

package/src/outlet-provider.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { useContext, useMemo, type ReactNode } from "react";
+import { OutletContext, type OutletContextValue } from "./outlet-context.js";
+import type { ResolvedSegment } from "./types.js";
+
+/**
+ * Outlet content provider — stores parent context for useLoader chain walking.
+ */
+export function OutletProvider({
+  content,
+  parallel,
+  segment,
+  loaderData,
+  loaderStreams,
+  awaitedLoaderIds,
+  pending = false,
+  children,
+}: {
+  content: ReactNode;
+  parallel?: ResolvedSegment[];
+  segment?: ResolvedSegment;
+  loaderData?: Record<string, any>;
+  loaderStreams?: Record<string, unknown>;
+  awaitedLoaderIds?: readonly string[];
+  pending?: boolean;
+  children: ReactNode;
+}): ReactNode {
+  // Get parent context to enable walking up the chain for loader lookups
+  const parentContext = useContext(OutletContext);
+
+  const value = useMemo(
+    () => ({
+      content,
+      parallel,
+      segment,
+      loaderData,
+      loaderStreams,
+      awaitedLoaderIds,
+      pending,
+      parent: parentContext,
+      loading: segment?.loading,
+    }),
+    [
+      content,
+      parallel,
+      segment,
+      loaderData,
+      loaderStreams,
+      awaitedLoaderIds,
+      pending,
+      parentContext,
+    ],
+  );
+
+  return (
+    <OutletContext.Provider value={value}>{children}</OutletContext.Provider>
+  );
+}