@rangojs/router 0.0.0-experimental.ea6d5eec → 0.0.0-experimental.ea9f40f2

package/src/testing/run-transition-when.ts

@@ -0,0 +1,164 @@
+/**
+ * runTransitionWhen — unit-test a transition({ when }) predicate in isolation.
+ *
+ * Runs the SAME two server functions the router uses — applyViewTransitionDefault
+ * (strips the `when` function from the serialized config and records the
+ * predicate on the request context) and gateTransitions (assembles the
+ * TransitionWhenContext and evaluates the predicate post-handler). So the
+ * predicate sees exactly the navigation/action metadata it would at runtime
+ * (currentUrl/currentParams/fromRouteName, nextUrl/nextParams/toRouteName,
+ * actionId/actionUrl/actionResult/formData/method, get/env), and `kept` reflects
+ * whether the transition would apply this request. The result also exposes the
+ * assembled `whenContext` so tests can assert the exact fields without reaching
+ * into private request-context state.
+ *
+ * This is the public way to exercise a transition gate: the full
+ * match -> render pipeline that wires these together only runs under real RSC
+ * rendering (which the Flight primitives do not drive), so without this primitive
+ * a consumer could not test their predicate through @rangojs/router/testing.
+ *
+ * Synchronous: a transition predicate returns a boolean and the gate has no I/O.
+ */
+
+import {
+  runWithRequestContext,
+  type RequestContext,
+} from "../server/request-context.js";
+import { applyViewTransitionDefault } from "../router/segment-resolution/view-transition-default.js";
+import { gateTransitions } from "../rsc/transition-gate.js";
+import { createTestRequestContext, type VarsInit } from "./internal/context.js";
+import type {
+  ResolvedSegment,
+  TransitionConfig,
+  TransitionWhenContext,
+} from "../types/segments.js";
+import type { OnErrorCallback } from "../types/error-types.js";
+
+const toURL = (v: string | URL, base: URL): URL =>
+  typeof v === "string" ? new URL(v, base.origin) : v;
+
+/**
+ * Options for runTransitionWhen. All navigation/action fields are optional and
+ * default to "absent", matching what the gate sees for an initial full load with
+ * no action: omit `currentUrl`/`currentParams`/`fromRouteName` to model the
+ * navigation source being unavailable, and omit the `action*` fields to model a
+ * plain (non-action) navigation.
+ */
+export interface RunTransitionWhenOptions<TEnv = any> {
+  /** The navigation TARGET request (drives `nextUrl`): a Request or URL/path string. Defaults to `http://localhost/`. */
+  request?: Request | string;
+  /** Route params for the target (`nextParams`). */
+  params?: Record<string, string>;
+  /** Target route name (`toRouteName`). */
+  toRouteName?: string;
+  /** Environment bindings surfaced as `env` (and `ctx.env`). */
+  env?: TEnv;
+  /** Variables a handler/middleware would have set this request, readable via the predicate's `get()`. */
+  vars?: VarsInit;
+  /** Navigation SOURCE url (`currentUrl`): a URL or path string. */
+  currentUrl?: string | URL;
+  /** Source route params (`currentParams`). */
+  currentParams?: Record<string, string>;
+  /** Source route name (`fromRouteName`). */
+  fromRouteName?: string;
+  /** Id of the action that triggered a revalidation (`actionId`). */
+  actionId?: string;
+  /** Url the action was submitted from (`actionUrl`). */
+  actionUrl?: string | URL;
+  /** The action's return value (`actionResult`). */
+  actionResult?: unknown;
+  /** FormData from a form action (`formData`). */
+  formData?: FormData;
+  /** Receives an error thrown by the predicate (the gate reports to `router.onError`, phase `"rendering"`). */
+  onError?: OnErrorCallback;
+}
+
+/**
+ * Result of runTransitionWhen.
+ */
+export interface RunTransitionWhenResult<TEnv = any> {
+  /** True if the transition would apply this request (predicate returned non-false, or there is no `when`). */
+  kept: boolean;
+  /** Convenience inverse of `kept`. */
+  dropped: boolean;
+  /**
+   * The production-assembled predicate context. Undefined when the config has
+   * no `when` predicate.
+   */
+  whenContext?: TransitionWhenContext<Record<string, string>, TEnv>;
+  /** The underlying RequestContext, for additional assertions (`ctx.get(...)`, etc.). */
+  ctx: RequestContext<TEnv>;
+}
+
+export function runTransitionWhen<TEnv = any>(
+  config: TransitionConfig,
+  opts: RunTransitionWhenOptions<TEnv> = {},
+): RunTransitionWhenResult<TEnv> {
+  const { ctx } = createTestRequestContext<TEnv>({
+    env: opts.env,
+    request: opts.request,
+    vars: opts.vars,
+    params: opts.params,
+  });
+  const reqCtx = ctx as unknown as RequestContext<TEnv>;
+
+  // Target route name (the public field the gate reads for `toRouteName`).
+  if (opts.toRouteName !== undefined)
+    reqCtx.routeName = opts.toRouteName as RequestContext<TEnv>["routeName"];
+  // Source (match-time) data the gate reads for currentUrl/currentParams/fromRouteName.
+  if (opts.currentUrl !== undefined)
+    reqCtx._gateCurrentUrl = toURL(opts.currentUrl, reqCtx.url);
+  if (opts.currentParams !== undefined)
+    reqCtx._gateCurrentParams = opts.currentParams;
+  if (opts.fromRouteName !== undefined)
+    reqCtx._prevRouteKey = opts.fromRouteName;
+  // Action data the gate reads at the action-bearing call sites.
+  if (opts.actionId !== undefined) reqCtx._gateActionId = opts.actionId;
+  if (opts.actionUrl !== undefined)
+    reqCtx._gateActionUrl = toURL(opts.actionUrl, reqCtx.url);
+  if (opts.actionResult !== undefined)
+    reqCtx._gateActionResult = opts.actionResult;
+  if (opts.formData !== undefined) reqCtx._gateFormData = opts.formData;
+
+  let whenContext:
+    | TransitionWhenContext<Record<string, string>, TEnv>
+    | undefined;
+  const when = config.when;
+  const configForGate: TransitionConfig = when
+    ? {
+        ...config,
+        when: (c) => {
+          whenContext = c as TransitionWhenContext<
+            Record<string, string>,
+            TEnv
+          >;
+          return when(c);
+        },
+      }
+    : config;
+
+  return runWithRequestContext(reqCtx, () => {
+    // The real resolution-time collection + post-handler gate, so the predicate
+    // sees the production-assembled TransitionWhenContext.
+    const serialized = applyViewTransitionDefault(
+      configForGate,
+      undefined,
+      "tx-when-seg",
+    );
+    const segment = {
+      id: "tx-when-seg",
+      namespace: "r",
+      type: "route",
+      index: 0,
+      component: null,
+      transition: serialized,
+    } as ResolvedSegment;
+    gateTransitions(
+      [segment],
+      reqCtx as Parameters<typeof gateTransitions>[1],
+      opts.onError,
+    );
+    const kept = segment.transition !== undefined;
+    return { kept, dropped: !kept, whenContext, ctx: reqCtx };
+  });
+}

package/src/testing/vitest-stubs/cloudflare-email.ts

@@ -0,0 +1,9 @@
+// Stub for the `cloudflare:email` runtime virtual, shipped for Cloudflare
+// consumers (enable via `rangoTestAliases({ preset: "cloudflare" })`).
+export class EmailMessage {
+  constructor(
+    public from: string,
+    public to: string,
+    public raw: unknown,
+  ) {}
+}

package/src/testing/vitest-stubs/cloudflare-workers.ts

@@ -0,0 +1,21 @@
+// Stub for the `cloudflare:workers` runtime virtual, shipped for Cloudflare
+// consumers (enable via `rangoTestAliases({ preset: "cloudflare" })`). A CF app's
+// route tree commonly imports `cloudflare:workers` (e.g. `import { env } from
+// "cloudflare:workers"`), which does not resolve in a bare Vitest process.
+export const env: Record<string, unknown> = {};
+
+export class DurableObject<Env = unknown> {
+  constructor(
+    public ctx: unknown,
+    public env: Env,
+  ) {}
+}
+
+export class WorkerEntrypoint<Env = unknown> {
+  constructor(
+    public ctx: unknown,
+    public env: Env,
+  ) {}
+}
+
+export class RpcTarget {}

package/src/testing/vitest-stubs/plugin-rsc.ts

@@ -0,0 +1,16 @@
+// Stub for `@vitejs/plugin-rsc/rsc`, shipped so consumers do not have to write a
+// per-file `vi.mock(...)`. Importing a router internal transitively pulls this
+// module, whose real top-level body imports Vite virtuals that do not resolve in
+// plain node. The unit/integration primitives (dispatch/runLoader/runMiddleware)
+// never render RSC, so empty fns suffice.
+export const createFromReadableStream = (): never => {
+  throw new Error("plugin-rsc stub: createFromReadableStream not available");
+};
+export const renderToReadableStream = (): never => {
+  throw new Error("plugin-rsc stub: renderToReadableStream not available");
+};
+export const loadServerAction = (): undefined => undefined;
+export const decodeReply = (): undefined => undefined;
+export const decodeAction = (): undefined => undefined;
+export const decodeFormState = (): undefined => undefined;
+export const createTemporaryReferenceSet = (): Record<string, never> => ({});

package/src/testing/vitest-stubs/version.ts

@@ -0,0 +1,5 @@
+// Stub for the build-only `@rangojs/router:version` virtual module, shipped so
+// consumers do not have to author it. The rango Vite plugin injects this at
+// build time; in a bare Vitest process it must be aliased to a stub. Empty
+// string keeps generated URLs free of a version path segment.
+export const VERSION = "";

package/src/testing/vitest.ts

@@ -0,0 +1,305 @@
+/**
+ * @rangojs/router/testing/vitest
+ *
+ * Vitest setup helper for the UNIT + INTEGRATION + DOM test project of a
+ * @rangojs/router consumer app. It returns the `resolve.alias` entries that make
+ * a real app's router / loaders / middleware importable in a bare Vitest process.
+ *
+ * Why this is needed (the documented "vi.mock(plugin-rsc) + import router"
+ * recipe is not sufficient for a real app):
+ *
+ * - `@rangojs/router` resolves to SERVER-ONLY STUBS outside the `react-server`
+ *   condition — `urls()`, `createRouter()`, `cookies()`, `getRequestContext()`
+ *   throw "only available in a react-server environment". Importing the app's own
+ *   router/loaders/middleware then fails immediately. Vitest does NOT apply the
+ *   `react-server` condition to bare-package exports resolution, and enabling it
+ *   globally flips React to its server build (no `createContext`), crashing the
+ *   router's client-boundary imports. The surgical fix is to alias ONLY the bare
+ *   `@rangojs/router` specifier to its react-server entry (real impls) while
+ *   leaving React as the client build — which is exactly what this helper does.
+ * - The build-only `@rangojs/router:version` virtual and `@vitejs/plugin-rsc/rsc`
+ *   (whose real body imports unresolvable Vite virtuals) are stubbed.
+ * - Cloudflare apps additionally import the `cloudflare:workers` /
+ *   `cloudflare:email` runtime virtuals; pass `{ preset: "cloudflare" }` to stub them.
+ *
+ * Usage (recommended one-call form — see {@link rangoTestConfig}):
+ *
+ * ```ts
+ * // vitest.config.ts
+ * import { defineConfig } from "vitest/config";
+ * import { rangoTestConfig } from "@rangojs/router/testing/vitest";
+ *
+ * export default defineConfig({
+ *   test: {
+ *     globals: true,
+ *     include: ["test/**\/*.test.{ts,tsx}"],
+ *     environment: "node",
+ *     ...rangoTestConfig({ preset: "cloudflare" }),
+ *   },
+ * });
+ * ```
+ *
+ * `rangoTestConfig` bundles the resolve aliases ({@link rangoTestAliases}) with
+ * the `server.deps.inline` contract ({@link rangoInlineDeps}) an installed
+ * consumer needs — @rangojs/router ships as TS source, and without `deps.inline`
+ * Vitest hands those `.ts` files to Node, which on Node >= 23 throws
+ * `ERR_UNSUPPORTED_NODE_MODULES_TYPE_STRIPPING`. Use the lower-level
+ * `rangoTestAliases` directly only if you wire `deps.inline` yourself.
+ *
+ * Notes:
+ * - The Flight project (real RSC rendering via `@rangojs/router/testing/flight`)
+ *   uses the `react-server` condition AND needs this same alias whenever a
+ *   rendered handler/component imports a server API (`getRequestContext`,
+ *   `cookies`) from the bare `@rangojs/router` — without it that import resolves
+ *   to the throwing out-of-react-server stub (`resolve.conditions` alone is not
+ *   reliably applied to bare-package export resolution). The alias points at
+ *   `index.rsc.ts` (the real react-server build) and leaves React itself
+ *   untouched, so it does NOT crash the server React build. The router's OWN
+ *   Flight tests omit it only because they import via RELATIVE paths, not the
+ *   bare specifier; a consumer importing the bare specifier must include it. See
+ *   the testing skill (`skills/testing/setup.md`, shipped in the package) for
+ *   the complete Flight config.
+ * - `renderRoute` (`@rangojs/router/testing/dom`) tests run in this same project
+ *   under a DOM environment (`happy-dom`/`jsdom`); the alias does not affect them.
+ * - A router using `Prerender()` / `createLoader()` / `Static()` now CONSTRUCTS in
+ *   a bare test: each assigns a process-stable runtime fallback `$$id` ONLY under
+ *   a test runner (`process.env.VITEST`), so `createRouter().routes(...)` builds
+ *   without the "missing `$$id`" throw (for `dispatch` / `assertGeneratedRoutesMatch`).
+ *   Outside a test runner (a real build) a missing id still THROWS — so an
+ *   unsupported handler shape the plugin skipped (e.g. `export let`) fails loud
+ *   rather than getting a silent synthetic id. (The plugin always injects for
+ *   supported `export const` shapes, and the static manifest keys on that id.)
+ * - Importing your app's whole router *file* can still fail for app-specific
+ *   reasons (page modules pulling their own deps, or plugin `virtual:` modules
+ *   that need the rango plugin) — build whole-router `dispatch`/drift checks from
+ *   a focused include, or use e2e.
+ */
+
+import { fileURLToPath } from "node:url";
+
+/** A single Vite/Vitest resolve alias entry. Structurally a Vite `Alias`. */
+export interface TestAlias {
+  find: string | RegExp;
+  replacement: string;
+}
+
+/** Options for {@link rangoTestAliases}. */
+export interface RangoTestAliasOptions {
+  /**
+   * Deployment preset, matching `rango({ preset })` in the Vite plugin. With
+   * `"cloudflare"` the helper additionally stubs the Cloudflare Workers runtime
+   * virtuals (`cloudflare:workers` / `cloudflare:email`) a CF app's route tree
+   * imports. A string (not a boolean) so more presets can be added without an
+   * API change. Default: `"node"`.
+   */
+  preset?: "node" | "cloudflare";
+}
+
+/**
+ * Resolve a path relative to this module. Anchored at the PACKAGE ROOT
+ * (`../../` from both `src/testing/vitest.ts` and the shipped
+ * `dist/testing/vitest.js` — each is two levels below the root), so the alias
+ * targets always point at the `src/*.ts` files Vite transpiles at test time,
+ * regardless of whether this helper is loaded as source (in-repo) or as the
+ * compiled `dist` entry (an installed consumer).
+ */
+function here(relativeFromRoot: string): string {
+  return fileURLToPath(new URL(`../../${relativeFromRoot}`, import.meta.url));
+}
+
+/**
+ * Build the `resolve.alias` entries a consumer's node/DOM Vitest project needs to
+ * import a real @rangojs/router app's router/loaders/middleware. Spread into a
+ * Vitest config: `resolve: { alias: rangoTestAliases(...) }` (concat your own
+ * aliases as needed).
+ */
+export function rangoTestAliases(
+  opts: RangoTestAliasOptions = {},
+): TestAlias[] {
+  const aliases: TestAlias[] = [
+    // Real impls (index.rsc.ts) for the bare specifier ONLY — exact regex so
+    // subpaths (/testing, /client, /cache, ...) are untouched. React stays the
+    // client build, so createContext and "use client" modules work.
+    { find: /^@rangojs\/router$/, replacement: here("src/index.rsc.ts") },
+    {
+      find: "@rangojs/router:version",
+      replacement: here("src/testing/vitest-stubs/version.ts"),
+    },
+    {
+      find: /^@vitejs\/plugin-rsc\/rsc$/,
+      replacement: here("src/testing/vitest-stubs/plugin-rsc.ts"),
+    },
+  ];
+
+  if (opts.preset === "cloudflare") {
+    aliases.push(
+      {
+        find: "cloudflare:workers",
+        replacement: here("src/testing/vitest-stubs/cloudflare-workers.ts"),
+      },
+      {
+        find: "cloudflare:email",
+        replacement: here("src/testing/vitest-stubs/cloudflare-email.ts"),
+      },
+    );
+  }
+
+  return aliases;
+}
+
+/**
+ * Vitest `server.deps.inline` patterns that force Vite (not Node) to transpile
+ * @rangojs/router's TypeScript source under test.
+ *
+ * REQUIRED for an installed (node_modules) consumer: @rangojs/router ships as TS
+ * source, and Vitest externalizes node_modules by default — so without this Node
+ * loads the `.ts` files directly and, on Node >= 23, throws
+ * `ERR_UNSUPPORTED_NODE_MODULES_TYPE_STRIPPING`. In this monorepo it is a no-op
+ * (the workspace symlink resolves to a realpath outside node_modules, which Vite
+ * already transpiles), which is precisely why an in-repo dogfood never surfaces
+ * the need and the contract has to be shipped explicitly.
+ */
+export const rangoInlineDeps: RegExp[] = [/@rangojs[/\\]router/];
+
+/** The Vitest `test`-block fragment {@link rangoTestConfig} returns. */
+export interface RangoTestConfig {
+  alias: TestAlias[];
+  server: { deps: { inline: RegExp[] } };
+}
+
+/**
+ * The complete Vitest `test`-block fragment a consumer needs: the resolve
+ * aliases ({@link rangoTestAliases}) AND the `server.deps.inline` contract
+ * ({@link rangoInlineDeps}). Spread it into your `test` block so both land in
+ * one place and a consumer cannot forget the `deps.inline` half (omitting it
+ * loads rango's TS source through Node and breaks on Node >= 23):
+ *
+ * ```ts
+ * // vitest.config.ts
+ * import { defineConfig } from "vitest/config";
+ * import { rangoTestConfig } from "@rangojs/router/testing/vitest";
+ *
+ * export default defineConfig({
+ *   test: {
+ *     globals: true,
+ *     include: ["test/**\/*.test.{ts,tsx}"],
+ *     environment: "node",
+ *     ...rangoTestConfig({ preset: "cloudflare" }),
+ *   },
+ * });
+ * ```
+ */
+export function rangoTestConfig(
+  opts: RangoTestAliasOptions = {},
+): RangoTestConfig {
+  return {
+    alias: rangoTestAliases(opts),
+    // fresh copy so the shared rangoInlineDeps const is never aliased into (or
+    // mutated through) a consumer's resolved config
+    server: { deps: { inline: [...rangoInlineDeps] } },
+  };
+}
+
+/** A minimal Vite plugin shape (avoids a hard dependency on Vite's types). */
+interface FlightTransformPlugin {
+  name: string;
+  transform(
+    code: string,
+    id: string,
+  ): Promise<{ code: string; map: unknown } | undefined>;
+}
+
+/**
+ * A Vite plugin for the FLIGHT (react-server) Vitest project that applies the
+ * `"use client"` transform to a consumer's client modules — the same transform a
+ * real build applies. With it, `renderServerTree` (`@rangojs/router/testing/flight`)
+ * resolves client islands AUTOMATICALLY from the server tree's own imports: no
+ * `clientComponents` to pass, no filename convention. Without it, a `"use client"`
+ * module is imported as a plain (unmarked) function and would render server-side,
+ * so you must list islands via `renderServerTree(..., { clientComponents })`.
+ *
+ * Add it to your react-server Vitest project. This is the COMPLETE config — the
+ * alias, `server.deps.inline`, and `NODE_ENV` are load-bearing, not optional (see
+ * the inline notes). The testing skill (`skills/testing/setup.md`, shipped in the
+ * package) has the annotated walkthrough.
+ *
+ * ```ts
+ * // vitest.rsc.config.ts
+ * import { defineConfig } from "vitest/config";
+ * import {
+ *   rangoUseClientTransform,
+ *   rangoTestAliases,
+ *   rangoInlineDeps,
+ * } from "@rangojs/router/testing/vitest";
+ *
+ * // Flight serialization needs React's production build; the dev build's jsxDEV
+ * // crashes / yields unstable snapshots.
+ * process.env.NODE_ENV = "production";
+ *
+ * export default defineConfig({
+ *   plugins: [rangoUseClientTransform()],
+ *   resolve: {
+ *     conditions: ["react-server"],
+ *     // Bare `@rangojs/router` -> its react-server build, so a handler/component
+ *     // reading getRequestContext()/cookies() resolves the real impl, not the
+ *     // throwing stub. Pass { preset: "cloudflare" } for a CF app.
+ *     alias: rangoTestAliases(),
+ *   },
+ *   test: {
+ *     include: ["test/**\/*.rsc-test.{ts,tsx}"],
+ *     pool: "forks",
+ *     execArgv: ["--conditions=react-server"],
+ *     // Required for an INSTALLED consumer on Node >= 23 (rango ships TS source).
+ *     server: { deps: { inline: rangoInlineDeps } },
+ *   },
+ * });
+ * ```
+ *
+ * Each `"use client"` module's exports are replaced with client references keyed
+ * by the module's absolute path (the boundary id), the export name becoming the
+ * boundary name. Modules without the directive (server components) are untouched,
+ * so `renderToFlightString` of pure leaf trees is unaffected.
+ */
+export function rangoUseClientTransform(): FlightTransformPlugin {
+  return {
+    name: "rango:testing-use-client",
+    async transform(code, id) {
+      if (id.includes("/node_modules/")) return undefined;
+      // Fast path: only parse modules that mention the directive.
+      if (!code.includes("use client")) return undefined;
+      const { parseAstAsync } = await import("vite");
+      const { hasDirective, transformDirectiveProxyExport } =
+        await import("@vitejs/plugin-rsc/transforms");
+      // vite's parser and the transforms ship structurally-compatible but
+      // distinctly-typed ASTs (oxc vs estree); cast through the transform's own
+      // parameter type, exactly as plugin-rsc does at runtime.
+      type TransformAst = Parameters<typeof transformDirectiveProxyExport>[0];
+      let ast: TransformAst;
+      try {
+        ast = (await parseAstAsync(code)) as unknown as TransformAst;
+      } catch {
+        return undefined;
+      }
+      if (!hasDirective(ast.body, "use client")) return undefined;
+      const result = transformDirectiveProxyExport(ast, {
+        directive: "use client",
+        code,
+        runtime: (name: string) =>
+          `$$RangoRSD.registerClientReference(` +
+          `() => { throw new Error("client reference " + ${JSON.stringify(name)} + " is not callable on the server"); }, ` +
+          `${JSON.stringify(id)}, ${JSON.stringify(name)})`,
+      });
+      if (!result) return undefined;
+      const { output } = result;
+      // The vendored server serializer is the one renderToFlightString uses;
+      // resolvable here under the react-server condition.
+      output.prepend(
+        `import * as $$RangoRSD from "@vitejs/plugin-rsc/vendor/react-server-dom/server.edge";\n`,
+      );
+      return {
+        code: output.toString(),
+        map: output.generateMap({ hires: true }),
+      };
+    },
+  };
+}