@rangojs/router 0.0.0-experimental.10

package/src/router/match-pipelines.ts

@@ -0,0 +1,214 @@
+/**
+ * Match Pipelines
+ *
+ * Composes async generator middleware into pipelines for route matching.
+ * The pipeline transforms navigation requests into resolved UI segments.
+ *
+ * PIPELINE ARCHITECTURE OVERVIEW
+ * ==============================
+ *
+ * The router uses a pipeline of async generator middleware to process requests.
+ * Each middleware can:
+ *   1. Produce segments (yield)
+ *   2. Transform segments from upstream
+ *   3. Observe segments without modifying them
+ *   4. Trigger side effects (caching, background revalidation)
+ *
+ * REQUEST FLOW DIAGRAM
+ * ====================
+ *
+ *   Navigation Request
+ *         |
+ *         v
+ *   +------------------+
+ *   | Create Context   |  MatchContext: routes, params, client state
+ *   +------------------+
+ *         |
+ *         v
+ *   +------------------+
+ *   | Select Pipeline  |  Full (document) vs Partial (navigation)
+ *   +------------------+
+ *         |
+ *         v
+ *   ==================== PIPELINE EXECUTION ====================
+ *   |                                                          |
+ *   |  empty() ─────> [1] ─────> [2] ─────> [3] ─────> [4] ───>|───> segments
+ *   |    |            |          |          |          |       |
+ *   |    |    cache   |  segment |intercept | cache   | bg     |
+ *   |    |   lookup   | resolve  | resolve  | store   | reval  |
+ *   |                                                          |
+ *   ============================================================
+ *         |
+ *         v
+ *   +------------------+
+ *   | Collect Result   |  Filter segments, build MatchResult
+ *   +------------------+
+ *         |
+ *         v
+ *   RSC Stream Response
+ *
+ *
+ * MIDDLEWARE EXECUTION ORDER
+ * ==========================
+ *
+ * Middleware compose in reverse order (rightmost = innermost, runs first):
+ *
+ *   compose(A, B, C)(source)  =>  source -> C -> B -> A -> output
+ *
+ * For the partial match pipeline:
+ *
+ *   compose(
+ *     withBackgroundRevalidation,  // [5] Outermost - triggers SWR
+ *     withCacheStore,              // [4] Stores segments in cache
+ *     withInterceptResolution,     // [3] Resolves intercept segments
+ *     withSegmentResolution,       // [2] Resolves on cache miss
+ *     withCacheLookup              // [1] Innermost - checks cache first
+ *   )
+ *
+ * Execution flow for cache MISS:
+ *
+ *   empty() yields nothing
+ *     -> [1] cache-lookup: no cache, passes through
+ *     -> [2] segment-resolution: resolves segments, yields them
+ *     -> [3] intercept-resolution: resolves intercepts, yields them
+ *     -> [4] cache-store: observes all, stores in cache
+ *     -> [5] bg-revalidation: no-op (wasn't stale)
+ *     -> output: all segments
+ *
+ * Execution flow for cache HIT (stale):
+ *
+ *   empty() yields nothing
+ *     -> [1] cache-lookup: HIT! yields cached segments + fresh loaders
+ *     -> [2] segment-resolution: sees cacheHit=true, skips
+ *     -> [3] intercept-resolution: extracts intercepts from cache
+ *     -> [4] cache-store: sees cacheHit=true, skips
+ *     -> [5] bg-revalidation: triggers waitUntil() to revalidate
+ *     -> output: cached segments + fresh loader data
+ *
+ *
+ * TWO PIPELINE VARIANTS
+ * =====================
+ *
+ * 1. createMatchPipeline (Full Match)
+ *    - Used for document requests (initial page load)
+ *    - No revalidation logic (no previous state to compare)
+ *    - Simpler segment resolution
+ *
+ * 2. createMatchPartialPipeline (Partial Match)
+ *    - Used for client-side navigation
+ *    - Includes revalidation for SWR
+ *    - Compares with previous params/URL
+ *    - Supports intercepts (soft navigation modals)
+ */
+import type { ResolvedSegment } from "../types.js";
+import type { MatchContext, MatchPipelineState } from "./match-context.js";
+import type { GeneratorMiddleware } from "./match-middleware/index.js";
+import {
+  withBackgroundRevalidation,
+  withCacheLookup,
+  withCacheStore,
+  withInterceptResolution,
+  withSegmentResolution,
+} from "./match-middleware/index.js";
+
+/**
+ * Compose multiple async generator middleware into a single middleware
+ *
+ * Middleware are applied in reverse order (rightmost runs first, innermost).
+ * For the pipeline:
+ *   compose(A, B, C)(source)
+ *
+ * The flow is: source -> C -> B -> A -> output
+ * Where C is the innermost (runs first on input) and A is outermost (runs last).
+ */
+export function compose<T>(
+  ...middleware: GeneratorMiddleware<T>[]
+): GeneratorMiddleware<T> {
+  if (middleware.length === 0) {
+    return (source) => source;
+  }
+  if (middleware.length === 1) {
+    return middleware[0];
+  }
+  return (source) => {
+    // Apply middleware in reverse order (rightmost first)
+    return middleware.reduceRight((prev, fn) => fn(prev), source);
+  };
+}
+
+/**
+ * Create an empty async generator (source for pipeline)
+ */
+export async function* empty<T>(): AsyncGenerator<T> {
+  // Yields nothing - used as the initial source for the pipeline
+}
+
+/**
+ * Create the match partial pipeline
+ *
+ * Pipeline order (innermost to outermost):
+ * 1. cache-lookup    - Check cache first, yield cached segments if hit
+ * 2. segment-resolution - Resolve segments if cache miss
+ * 3. intercept-resolution - Resolve intercept segments
+ * 4. cache-store     - Store segments in cache
+ * 5. background-revalidation - Trigger SWR if cache was stale
+ *
+ * Data flow:
+ * - empty() produces no segments
+ * - cache-lookup either yields cached segments OR passes through to segment-resolution
+ * - segment-resolution resolves fresh segments on cache miss
+ * - intercept-resolution adds intercept segments
+ * - cache-store observes and caches segments
+ * - background-revalidation triggers SWR revalidation if needed
+ */
+export function createMatchPartialPipeline<TEnv>(
+  ctx: MatchContext<TEnv>,
+  state: MatchPipelineState
+): AsyncGenerator<ResolvedSegment> {
+  // Build the middleware chain
+  const pipeline = compose<ResolvedSegment>(
+    // Outermost - observes segments and triggers background revalidation
+    withBackgroundRevalidation(ctx, state),
+    // Observes and stores segments in cache
+    withCacheStore(ctx, state),
+    // Adds intercept segments after main segments
+    withInterceptResolution(ctx, state),
+    // Resolves segments on cache miss
+    withSegmentResolution(ctx, state),
+    // Innermost - checks cache first
+    withCacheLookup(ctx, state)
+  );
+
+  // Start with empty source - cache lookup or segment resolution will produce segments
+  return pipeline(empty());
+}
+
+/**
+ * Create the full match pipeline (simpler, no revalidation)
+ *
+ * Used for document requests (initial page load) where we don't need
+ * revalidation logic since there's no previous state to compare against.
+ */
+export function createMatchPipeline<TEnv>(
+  ctx: MatchContext<TEnv>,
+  state: MatchPipelineState
+): AsyncGenerator<ResolvedSegment> {
+  // For full match, we only need:
+  // 1. Cache lookup
+  // 2. Segment resolution (without revalidation)
+  // 3. Intercept resolution
+  // 4. Cache store
+
+  // Note: Full match uses different resolution logic (resolveAllSegments instead of
+  // resolveAllSegmentsWithRevalidation). This will be handled by the segment resolution
+  // middleware checking ctx.isFullMatch or similar flag.
+
+  const pipeline = compose<ResolvedSegment>(
+    withCacheStore(ctx, state),
+    withInterceptResolution(ctx, state),
+    withSegmentResolution(ctx, state),
+    withCacheLookup(ctx, state)
+  );
+
+  return pipeline(empty());
+}

package/src/router/match-result.ts

@@ -0,0 +1,213 @@
+/**
+ * Match Result Collection
+ *
+ * Collects segments from the pipeline and builds the final MatchResult.
+ * This is the final stage of the match pipeline.
+ *
+ * COLLECTION FLOW
+ * ===============
+ *
+ *   Pipeline Generator
+ *         |
+ *         v
+ *   +---------------------------+
+ *   | collectSegments()        |  Drain async generator
+ *   | for await...push         |
+ *   +---------------------------+
+ *         |
+ *         v
+ *   +---------------------------+
+ *   | buildMatchResult()       |  Transform to MatchResult
+ *   +---------------------------+
+ *         |
+ *         |
+ *   +-----+-----+
+ *   |           |
+ * Full       Partial
+ * Match      Match
+ *   |           |
+ *   v           v
+ * All segs   Filter:
+ * rendered   - null components out
+ *            - keep loaders
+ *            - handle intercepts
+ *   |           |
+ *   +-----------+
+ *         |
+ *         v
+ *   MatchResult {
+ *     segments,    // Segments to render
+ *     matched,     // All segment IDs
+ *     diff,        // Changed segment IDs
+ *     params,      // Route params
+ *     slots,       // Intercept slot data
+ *     serverTiming // Performance metrics
+ *   }
+ *
+ *
+ * FULL VS PARTIAL MATCH
+ * =====================
+ *
+ * Full Match (document request):
+ *   - All segments are rendered
+ *   - allIds = all segment IDs
+ *   - No filtering needed
+ *
+ * Partial Match (navigation):
+ *   - Filter out null components (client already has them)
+ *   - BUT keep loader segments (they carry data)
+ *   - Handle intercepts specially (preserve client page + add modal)
+ *
+ *
+ * SEGMENT FILTERING RULES
+ * =======================
+ *
+ * For partial match, segments are filtered:
+ *
+ *   Keep if:
+ *     - component !== null (needs rendering)
+ *     - type === "loader" (carries data even with null component)
+ *
+ *   Skip if:
+ *     - component === null AND type !== "loader"
+ *     - (Client already has this segment's UI)
+ *
+ *
+ * INTERCEPT HANDLING
+ * ==================
+ *
+ * When intercepting (modal over current page):
+ *
+ *   allIds = client segments + intercept segments
+ *
+ * This tells the client:
+ *   1. Keep your current segments
+ *   2. Add these intercept segments to the modal slot
+ *
+ * The page stays visible, modal renders on top.
+ *
+ *
+ * MATCHRESULT STRUCTURE
+ * =====================
+ *
+ * {
+ *   segments: ResolvedSegment[]  // Segments to serialize and render
+ *   matched: string[]            // All segment IDs for this route
+ *   diff: string[]               // Which segments changed (for client diffing)
+ *   params: Record<string,string> // Route parameters
+ *   slots?: Record<string, {...}> // Named slot data for intercepts
+ *   serverTiming?: string         // Server-Timing header value
+ *   routeMiddleware?: [...]       // Route middleware results
+ * }
+ *
+ * The client uses this to:
+ *   1. Render segments[] to the UI tree
+ *   2. Update internal state with matched[]
+ *   3. Diff against previous state with diff[]
+ *   4. Render slot content if slots present
+ */
+import type { MatchResult, ResolvedSegment } from "../types.js";
+import type { MatchContext, MatchPipelineState } from "./match-context.js";
+import { generateServerTiming, logMetrics } from "./metrics.js";
+
+/**
+ * Collect all segments from an async generator
+ */
+export async function collectSegments(
+  generator: AsyncGenerator<ResolvedSegment>
+): Promise<ResolvedSegment[]> {
+  const segments: ResolvedSegment[] = [];
+  for await (const segment of generator) {
+    segments.push(segment);
+  }
+  return segments;
+}
+
+/**
+ * Build the final MatchResult from collected segments and context
+ */
+export function buildMatchResult<TEnv>(
+  allSegments: ResolvedSegment[],
+  ctx: MatchContext<TEnv>,
+  state: MatchPipelineState
+): MatchResult {
+  const logPrefix = ctx.isFullMatch ? "[Router.match]" : "[Router.matchPartial]";
+
+  let allIds: string[];
+  let segmentsToRender: ResolvedSegment[];
+
+  if (ctx.isFullMatch) {
+    // Full match (document request) - all segments are rendered
+    allIds = allSegments.map((s) => s.id);
+    segmentsToRender = allSegments;
+  } else {
+    // Partial match (navigation) - filter and handle intercepts
+    // When intercepting, tell browser to keep its current segments + add modal
+    // This prevents the browser from discarding the current page content
+    // If client sent empty segments (HMR recovery), use segment IDs from allSegments
+    allIds = ctx.interceptResult
+      ? ctx.clientSegmentIds.length > 0
+        ? [...ctx.clientSegmentIds, ...state.interceptSegments.map((s) => s.id)]
+        : allSegments.map((s) => s.id) // Use actual segments, not matchedIds
+      : [...state.matchedIds, ...state.interceptSegments.map((s) => s.id)];
+
+    // Filter out segments with null components (client already has them)
+    // BUT always include loader segments - they carry data even with null component
+    segmentsToRender = allSegments.filter(
+      (s) => s.component !== null || s.type === "loader"
+    );
+  }
+
+  if (process.env.NODE_ENV === "development") {
+    console.log(
+      `${logPrefix} All segments:`,
+      allSegments
+        .map((s) => `${s.id}(${s.type}, component=${s.component !== null})`)
+        .join(", ")
+    );
+    console.log(
+      `${logPrefix} Segments to render:`,
+      segmentsToRender.map((s) => s.id).join(", ")
+    );
+  }
+
+  // Output metrics if enabled
+  let serverTiming: string | undefined;
+  if (ctx.metricsStore) {
+    logMetrics(ctx.request.method, ctx.pathname, ctx.metricsStore);
+    serverTiming = generateServerTiming(ctx.metricsStore);
+  }
+
+  return {
+    segments: segmentsToRender,
+    matched: allIds,
+    diff: segmentsToRender.map((s) => s.id),
+    params: ctx.matched.params,
+    routeName: ctx.routeKey,
+    serverTiming,
+    slots: Object.keys(state.slots).length > 0 ? state.slots : undefined,
+    routeMiddleware:
+      ctx.routeMiddleware.length > 0 ? ctx.routeMiddleware : undefined,
+  };
+}
+
+/**
+ * Collect segments from pipeline and build MatchResult
+ *
+ * This is the main entry point for building the final result after
+ * the pipeline has processed all segments.
+ */
+export async function collectMatchResult<TEnv>(
+  pipeline: AsyncGenerator<ResolvedSegment>,
+  ctx: MatchContext<TEnv>,
+  state: MatchPipelineState
+): Promise<MatchResult> {
+  const allSegments = await collectSegments(pipeline);
+
+  // Update state with collected segments if not already set
+  if (state.segments.length === 0) {
+    state.segments = allSegments;
+  }
+
+  return buildMatchResult(allSegments, ctx, state);
+}

package/src/router/metrics.ts

@@ -0,0 +1,62 @@
+/**
+ * Router Metrics Utilities
+ *
+ * Performance metrics collection and reporting for RSC Router.
+ */
+
+import type { MetricsStore } from "../server/context";
+
+/**
+ * Create a metrics store for the request if debugPerformance is enabled
+ */
+export function createMetricsStore(
+  debugPerformance: boolean
+): MetricsStore | undefined {
+  if (!debugPerformance) return undefined;
+  return {
+    enabled: true,
+    requestStart: performance.now(),
+    metrics: [],
+  };
+}
+
+/**
+ * Log metrics to console in a formatted way
+ */
+export function logMetrics(
+  method: string,
+  pathname: string,
+  metricsStore: MetricsStore
+): void {
+  const total = performance.now() - metricsStore.requestStart;
+
+  // Find max label length for alignment
+  const maxLabelLen = Math.max(
+    ...metricsStore.metrics.map((m) => m.label.length),
+    20
+  );
+
+  console.log(`[RSC Perf] ${method} ${pathname} (${total.toFixed(1)}ms)`);
+
+  for (const m of metricsStore.metrics) {
+    const paddedLabel = m.label.padEnd(maxLabelLen);
+    console.log(`  ${paddedLabel} ${m.duration.toFixed(1)}ms`);
+  }
+}
+
+/**
+ * Generate Server-Timing header value from metrics
+ * Format: metric-name;dur=X.XX
+ */
+export function generateServerTiming(metricsStore: MetricsStore): string {
+  return metricsStore.metrics
+    .map((m) => {
+      // Convert label to valid Server-Timing name (alphanumeric and hyphens)
+      const name = m.label
+        .replace(/:/g, "-")
+        .replace(/[^a-zA-Z0-9-]/g, "")
+        .toLowerCase();
+      return `${name};dur=${m.duration.toFixed(2)}`;
+    })
+    .join(", ");
+}