@rangojs/router 0.0.0-experimental.f2d1a2f1 → 0.0.0-experimental.f4a8e8de

package/src/router/content-negotiation.ts

@@ -7,6 +7,7 @@
  */
 
 import type { EntryData } from "../server/context.js";
+import type { NegotiateVariant } from "../build/route-trie.js";
 import type { CollectedMiddleware } from "./middleware-types.js";
 import { collectRouteMiddleware } from "./middleware.js";
 import { loadManifest } from "./manifest.js";
@@ -14,7 +15,6 @@ import { traverseBack } from "./pattern-matching.js";
 import type { RouteMatchResult } from "./pattern-matching.js";
 import type { RouteSnapshot } from "./route-snapshot.js";
 
-// Response type -> MIME type used for Accept header matching
 export const RESPONSE_TYPE_MIME: Record<string, string> = {
   json: "application/json",
   text: "text/plain",
@@ -23,7 +23,6 @@ export const RESPONSE_TYPE_MIME: Record<string, string> = {
   md: "text/markdown",
 };
 
-// Reverse lookup: MIME type -> response type tag (e.g. "text/html" -> "html")
 export const MIME_RESPONSE_TYPE: Record<string, string> = Object.fromEntries(
   Object.entries(RESPONSE_TYPE_MIME).map(([tag, mime]) => [mime, tag]),
 );
@@ -71,44 +70,77 @@ export function parseAcceptTypes(accept: string): AcceptEntry[] {
     }
     entries.push({ mime, q, order: i });
   }
-  // Sort: highest q first, then lowest client order first (stable)
   entries.sort((a, b) => b.q - a.q || a.order - b.order);
   return entries;
 }
 
-// Sentinel response type for RSC routes in negotiation candidates
 export const RSC_RESPONSE_TYPE = "__rsc__";
 
+/** RSC wire-format MIME type; explicit-opt-in flight transport. */
+export const RSC_WIRE_MIME = "text/x-component";
+
+/**
+ * The two representations an RSC route serves, in canonical-first order:
+ * text/html (the document) and text/x-component (the flight wire format).
+ * Both register as negotiation candidates in pickNegotiateVariant; without
+ * the wire-format entry, an explicit Accept: text/x-component fell through
+ * to the definition-order fallback — a JSON-first route answered a
+ * wire-format request with JSON. Which representation an RSC win actually
+ * renders is decided by prefersFlightRepresentation below, from the same
+ * Accept header (wired in via isRscRequest, rsc/ssr-setup.ts).
+ */
+const RSC_MIMES: readonly string[] = ["text/html", RSC_WIRE_MIME];
+
+/**
+ * Rank the RSC route's two representations against a parsed Accept list:
+ * true when the flight wire format outranks the HTML document. Wildcard
+ * entries count for the HTML side — they express "anything", and the
+ * canonical representation of anything is the document. Co-located with
+ * RSC_MIMES so the candidate registration and the representation choice
+ * cannot drift.
+ */
+export function prefersFlightRepresentation(
+  acceptEntries: AcceptEntry[],
+): boolean {
+  for (const entry of acceptEntries) {
+    if (entry.q === 0) continue;
+    if (entry.mime === RSC_WIRE_MIME) return true;
+    if (
+      entry.mime === "text/html" ||
+      entry.mime === "text/*" ||
+      entry.mime === "*/*"
+    ) {
+      return false;
+    }
+  }
+  return false;
+}
+
 /**
  * Pick the best negotiate variant by walking the client's sorted Accept list.
  * For each accepted MIME type (in q-value/order priority), check if any
  * candidate serves that type. Wildcards match the first candidate.
  * Falls back to the first candidate if nothing matches.
  */
-export function pickNegotiateVariant(
-  acceptEntries: AcceptEntry[],
-  candidates: Array<{ routeKey: string; responseType: string }>,
-): { routeKey: string; responseType: string } {
-  // Build a MIME -> candidate lookup for O(1) matching
-  const byCandidateMime = new Map<
-    string,
-    { routeKey: string; responseType: string }
-  >();
+export function pickNegotiateVariant<
+  T extends { routeKey: string; responseType: string },
+>(acceptEntries: AcceptEntry[], candidates: T[]): T {
+  const byCandidateMime = new Map<string, T>();
   for (const c of candidates) {
-    const mime =
+    const mimes =
       c.responseType === RSC_RESPONSE_TYPE
-        ? "text/html"
-        : RESPONSE_TYPE_MIME[c.responseType];
-    if (mime && !byCandidateMime.has(mime)) {
-      byCandidateMime.set(mime, c);
+        ? RSC_MIMES
+        : [RESPONSE_TYPE_MIME[c.responseType]];
+    for (const mime of mimes) {
+      if (mime && !byCandidateMime.has(mime)) {
+        byCandidateMime.set(mime, c);
+      }
     }
   }
 
   for (const entry of acceptEntries) {
     if (entry.q === 0) continue;
-    // Wildcard matches first candidate
     if (entry.mime === "*/*") return candidates[0]!;
-    // Type wildcard (e.g. "text/*") -- match first candidate with that type
     if (entry.mime.endsWith("/*")) {
       const typePrefix = entry.mime.slice(0, entry.mime.indexOf("/"));
       for (const [mime, candidate] of byCandidateMime) {
@@ -119,10 +151,52 @@ export function pickNegotiateVariant(
     const match = byCandidateMime.get(entry.mime);
     if (match) return match;
   }
-  // No match -- use first candidate as default
   return candidates[0]!;
 }
 
+/**
+ * Re-key params from the primary leaf's names to a winning variant's names.
+ *
+ * The trie match builds `params` positionally under the primary leaf's pa, so
+ * `/widgets/:id` matched as the primary yields `{ id }` even when the winning
+ * `/widgets/:file` response variant expects `{ file }`. Both share the same trie
+ * terminal, so they bind the same number of positional named params; we zip the
+ * variant's pa against the named values in insertion order (which is the
+ * primary's pa order). The wildcard key (`*`) is positional-independent and left
+ * untouched.
+ *
+ * Mutates `params` in place. No-op when `variantPa` is absent, when names already
+ * match (the common case), or when the positional count diverges (defensive:
+ * never corrupt params by zipping mismatched lengths).
+ */
+export function rekeyParamsForVariant(
+  params: Record<string, string>,
+  variantPa: string[] | undefined,
+): void {
+  if (!variantPa || variantPa.length === 0) return;
+
+  const namedKeys: string[] = [];
+  for (const key in params) {
+    if (key !== "*") namedKeys.push(key);
+  }
+  if (namedKeys.length !== variantPa.length) return;
+
+  let identical = true;
+  for (let i = 0; i < variantPa.length; i++) {
+    if (namedKeys[i] !== variantPa[i]) {
+      identical = false;
+      break;
+    }
+  }
+  if (identical) return;
+
+  const values = namedKeys.map((k) => params[k]!);
+  for (const key of namedKeys) delete params[key];
+  for (let i = 0; i < variantPa.length; i++) {
+    params[variantPa[i]!] = values[i]!;
+  }
+}
+
 /**
  * Result of content negotiation for a route with negotiate variants.
  */
@@ -135,8 +209,8 @@ export interface NegotiationResult {
   manifestEntry: EntryData;
   /** Route middleware for the winning variant */
   routeMiddleware: CollectedMiddleware[];
-  /** Always true — negotiation occurred */
-  negotiated: true;
+  /** True when negotiation selected a variant; false for a plain response route. */
+  negotiated: boolean;
 }
 
 /**
@@ -155,14 +229,28 @@ export async function negotiateRoute(
 ): Promise<NegotiationResult | null> {
   const { matched, manifestEntry, routeMiddleware, responseType } = snapshot;
   if (!matched.negotiateVariants || matched.negotiateVariants.length === 0) {
+    // No variants: a plain response route still yields a result (negotiated:false)
+    // so callers don't re-derive it; RSC routes (no responseType/handler) -> null.
+    const handler =
+      manifestEntry.type === "route" ? manifestEntry.handler : undefined;
+    if (responseType && handler) {
+      return {
+        responseType,
+        handler: handler as Function,
+        manifestEntry,
+        routeMiddleware,
+        negotiated: false,
+      };
+    }
     return null;
   }
 
   const acceptEntries = parseAcceptTypes(request.headers.get("accept") || "");
 
-  // Build candidate list preserving definition order.
-  const variants = matched.negotiateVariants;
-  let candidates: Array<{ routeKey: string; responseType: string }>;
+  // Variants carry the variant's own pa (positional param names); the synthetic
+  // primary/RSC candidates have none (their params are already keyed correctly).
+  const variants = matched.negotiateVariants as NegotiateVariant[];
+  let candidates: NegotiateVariant[];
   if (responseType) {
     candidates = [...variants, { routeKey: matched.routeKey, responseType }];
   } else {
@@ -177,12 +265,10 @@ export async function negotiateRoute(
 
   const variant = pickNegotiateVariant(acceptEntries, candidates);
 
-  // RSC won negotiation
   if (variant.responseType === RSC_RESPONSE_TYPE) {
     return null;
   }
 
-  // Primary response-type won — use existing manifest entry and middleware
   if (responseType && variant.routeKey === matched.routeKey) {
     return {
       responseType,
@@ -192,8 +278,12 @@ export async function negotiateRoute(
       negotiated: true,
     };
   }
-
-  // Different variant won — load its manifest entry
+  // The trie extracted params under the PRIMARY leaf's pa, but the winning
+  // variant's handler is keyed by the variant's own param names. Re-key in place
+  // so plan.route.params (and the variant middleware collected just below) see
+  // the variant's names. No-op when the variant has no pa or shares the primary's
+  // names (the common case).
+  rekeyParamsForVariant(matched.params, variant.pa);
   const negotiateEntry = await loadManifest(
     matched.entry,
     variant.routeKey,

package/src/router/error-handling.ts

@@ -1,11 +1,11 @@
 /**
  * Router Error Handling Utilities
  *
- * Error boundary and not-found boundary handling for RSC Router.
+ * Error boundary and not-found boundary handling for Rango.
  * Also includes the shared invokeOnError utility for error callback invocation.
  */
 
-import type { ReactNode } from "react";
+import { createElement, type ReactNode } from "react";
 import type { EntryData } from "../server/context";
 import type {
   ResolvedSegment,
@@ -117,16 +117,10 @@ export function findNearestErrorBoundary(
   let current: EntryData | null = entry;
 
   while (current) {
-    // Check if this entry has error boundaries defined
     if (current.errorBoundary && current.errorBoundary.length > 0) {
-      // Return the last error boundary (most recently defined takes precedence)
       return current.errorBoundary[current.errorBoundary.length - 1];
     }
 
-    // Check orphan layouts for error boundaries
-    // Orphan layouts are siblings that render alongside the main route chain
-    // They can define error boundaries that catch errors from routes in the same route group
-    // Check from first to last (first sibling takes precedence as the "outer" wrapper)
     if (current.layout && current.layout.length > 0) {
       for (const orphan of current.layout) {
         if (orphan.errorBoundary && orphan.errorBoundary.length > 0) {
@@ -153,11 +147,21 @@ export function findNearestNotFoundBoundary(
   let current: EntryData | null = entry;
 
   while (current) {
-    // Check if this entry has notFound boundaries defined
     if (current.notFoundBoundary && current.notFoundBoundary.length > 0) {
-      // Return the last notFound boundary (most recently defined takes precedence)
       return current.notFoundBoundary[current.notFoundBoundary.length - 1];
     }
+
+    // Check orphan layouts mirroring findNearestErrorBoundary: notFoundBoundary
+    // attaches identically (onto parent.notFoundBoundary), and an orphan layout
+    // (parent=null) is reachable only via this scan. First sibling is "outer".
+    if (current.layout && current.layout.length > 0) {
+      for (const orphan of current.layout) {
+        if (orphan.notFoundBoundary && orphan.notFoundBoundary.length > 0) {
+          return orphan.notFoundBoundary[orphan.notFoundBoundary.length - 1];
+        }
+      }
+    }
+
     current = current.parent;
   }
 
@@ -165,6 +169,37 @@ export function findNearestNotFoundBoundary(
   return defaultNotFoundBoundary || null;
 }
 
+/**
+ * Normalize an error's cause into a Flight-serializable shape.
+ * ErrorInfo.cause crosses the RSC serialization boundary (via
+ * LoaderDataResult.error + error-segment fallback props); a non-serializable
+ * cause (function, class instance, circular object) would make Flight
+ * serialization throw and mask the original loader error.
+ */
+function normalizeCause(cause: unknown): unknown {
+  if (cause == null) return undefined;
+  const t = typeof cause;
+  if (t === "string" || t === "number" || t === "boolean") return cause;
+  // The whole body is guarded: even `instanceof`/clone can run user code (a
+  // Proxy trap, a throwing getter), and this helper must never throw —
+  // throwing here would mask the original loader error it exists to protect.
+  try {
+    if (cause instanceof Error) {
+      return { name: cause.name, message: cause.message, stack: cause.stack };
+    }
+    // Prefer preserving a serializable object/array intact (Flight uses
+    // structured-clone-like semantics); fall back to a string when the value
+    // is circular, host-bound, or otherwise non-serializable.
+    return structuredClone(cause);
+  } catch {
+    try {
+      return String(cause);
+    } catch {
+      return "[unstringifiable cause]";
+    }
+  }
+}
+
 /**
  * Create ErrorInfo from an error object
  * Sanitizes error details in production
@@ -182,7 +217,7 @@ export function createErrorInfo(
       name: error.name,
       code: (error as any).code,
       stack: isDev ? error.stack : undefined,
-      cause: isDev ? error.cause : undefined,
+      cause: isDev ? normalizeCause(error.cause) : undefined,
       segmentId,
       segmentType,
     };
@@ -207,22 +242,17 @@ export function createErrorSegment(
   entry: EntryData,
   params: Record<string, string>,
 ): ResolvedSegment {
-  // Determine the component to render
   let component: ReactNode;
 
   if (typeof fallback === "function") {
-    // ErrorBoundaryHandler - call with error info
     const props: ErrorBoundaryFallbackProps = {
       error: errorInfo,
     };
     component = fallback(props);
   } else {
-    // Static ReactNode fallback
     component = fallback;
   }
 
-  // Error segment uses the same ID as the layout that has the error boundary
-  // The error boundary content replaces the layout's outlet content
   return {
     id: entry.shortCode,
     namespace: entry.id,
@@ -251,6 +281,69 @@ export function createNotFoundInfo(
   };
 }
 
+/** Router-level `createRouter({ notFound })` option shape. */
+export type NotFoundComponentOption =
+  | ReactNode
+  | ((props: { pathname: string }) => ReactNode);
+
+/**
+ * Pick the effective notFound fallback: nearest `notFoundBoundary`, else the
+ * router-level `notFound` option, else a plain default.
+ *
+ * The router option is resolved ONLY when no nearer boundary won — it may be a
+ * user render function doing arbitrary work, so computing it eagerly (as three
+ * earlier copies of this policy did) burned a full render on every 404 that a
+ * boundary was going to handle anyway.
+ *
+ * Every 404 origin routes through here — segment resolution
+ * (`segment-resolution/helpers.ts`), loader-thrown `notFound()`
+ * (`loader-resolution.ts`), and the unmatched-route path (`rsc/handler.ts`) —
+ * so the default text and the boundary-wins precedence cannot drift apart.
+ */
+export function resolveNotFoundFallback(
+  boundary: ReactNode | NotFoundBoundaryHandler | null | undefined,
+  notFoundComponent: NotFoundComponentOption | undefined,
+  pathname: string | undefined,
+): ReactNode | NotFoundBoundaryHandler {
+  if (boundary !== null && boundary !== undefined) return boundary;
+  return resolveDefaultNotFound(notFoundComponent, pathname);
+}
+
+/**
+ * The router-level default alone: `createRouter({ notFound })` rendered, or the
+ * plain fallback node. Separate from {@link resolveNotFoundFallback} for the
+ * unmatched-route path, which has no entry chain and therefore no boundary to
+ * consult — it gets a `ReactNode` back rather than a possible handler.
+ */
+export function resolveDefaultNotFound(
+  notFoundComponent: NotFoundComponentOption | undefined,
+  pathname: string | undefined,
+): ReactNode {
+  if (typeof notFoundComponent === "function") {
+    return notFoundComponent({ pathname: pathname ?? "" });
+  }
+  return notFoundComponent ?? createElement("h1", null, "Not Found");
+}
+
+/**
+ * Invoke a notFound fallback that may be a boundary handler or a plain node.
+ *
+ * Callers that cannot propagate a throw (the loader envelope) wrap this in
+ * their own try/catch; it deliberately does not swallow, so a throwing boundary
+ * still surfaces where that is the correct behavior.
+ */
+export function renderNotFoundFallback(
+  fallback: ReactNode | NotFoundBoundaryHandler,
+  notFoundInfo: NotFoundInfo,
+): ReactNode {
+  if (typeof fallback === "function") {
+    return fallback({
+      notFound: notFoundInfo,
+    } satisfies NotFoundBoundaryFallbackProps);
+  }
+  return fallback;
+}
+
 /**
  * Create a notFound segment with the fallback component
  * Renders the fallback with not found info
@@ -261,19 +354,7 @@ export function createNotFoundSegment(
   entry: EntryData,
   params: Record<string, string>,
 ): ResolvedSegment {
-  // Determine the component to render
-  let component: ReactNode;
-
-  if (typeof fallback === "function") {
-    // NotFoundBoundaryHandler - call with props
-    const props: NotFoundBoundaryFallbackProps = {
-      notFound: notFoundInfo,
-    };
-    component = fallback(props);
-  } else {
-    // Static ReactNode fallback
-    component = fallback;
-  }
+  const component: ReactNode = renderNotFoundFallback(fallback, notFoundInfo);
 
   return {
     id: `${entry.shortCode}.notFound`,