@rangojs/router 0.0.0-experimental.14 → 0.0.0-experimental.140

package/src/vite/utils/client-chunks.ts

@@ -0,0 +1,184 @@
+import type { ClientChunkMeta, ClientChunks } from "../plugin-types.js";
+import { createRangoDebugger, NS } from "../debug.js";
+import { hashRefKey } from "../plugins/client-ref-hashing.js";
+
+/** The callback shape @vitejs/plugin-rsc's `clientChunks` option accepts. */
+export type RscClientChunksFn = (meta: ClientChunkMeta) => string | undefined;
+
+/**
+ * Build-time context the discovery pass populates and the built-in strategy
+ * reads. It refines how the catch-all (no route-root marker) modules are grouped
+ * without touching marker splits or the shared runtime:
+ *
+ * - `fallbackRefs`: production hashes of the `"use client"` modules a consumer
+ *   registered as `errorBoundary`/`notFoundBoundary` fallbacks. Pulled into a
+ *   dedicated `app-fallback` chunk so the error UI is not co-bundled with the
+ *   very route code it exists to catch failures for (resilience), and so the
+ *   chunk it would otherwise sit in gets named after a real module rather than
+ *   the boundary. Populated by reading each fallback element's client-reference
+ *   `$$id` during discovery (see discover-routers).
+ */
+export interface ClientChunkContext {
+  fallbackRefs: Set<string>;
+}
+
+/**
+ * Opt-in observability for the built-in strategy. The route-root marker list is
+ * intentionally finite (see {@link ROUTE_ROOT_DIRS}); a consumer whose layout
+ * has no recognized marker (e.g. `src/parts/<feature>/…`) silently inherits the
+ * default grouping (no per-route split). That silence is the only real downside
+ * of a convention-based default, so we make the decision observable: run a build
+ * with `DEBUG=rango:chunks` to see, per client module, which route group it was
+ * assigned to or why it fell back to the shared grouping. Zero cost when off
+ * (the debugger is `undefined` unless the namespace is enabled). For full control
+ * over any layout, pass a `clientChunks` function instead of relying on the
+ * convention — that is the supported configurability path, not widening the list.
+ */
+const debugChunks = createRangoDebugger(NS.chunks);
+
+/**
+ * Modules that must stay on the default (shared) grouping regardless of strategy:
+ * React, the router client runtime, and anything in node_modules. Splitting these
+ * out per route would fragment the shared baseline and regress cache reuse — they
+ * are loaded on every route, so they belong in shared chunks.
+ *
+ * The Rango runtime is matched by package root only: `@rangojs/router` (the
+ * installed/aliased name) and the workspace `packages/(rangojs-router|rsc-router)/(src|dist)/`.
+ * The `(src|dist)` anchor matches the package's own source/build output but NOT
+ * consumer apps that merely live under a `packages/rangojs-router/` ancestor (the
+ * in-repo e2e apps), so their app components remain splittable. We deliberately do
+ * NOT match a bare `/src/browser/`: that is a consumer-owned path (a consumer's own
+ * `src/browser/Foo.tsx` must still split).
+ *
+ * We test BOTH `meta.id` (absolute) and `meta.normalizedId`. `normalizedId` is the
+ * project-root-relative form plugin-rsc derives (e.g. `../../src/browser/react/Link.tsx`
+ * for the in-repo runtime), which the package-root patterns miss; the absolute `id`
+ * always contains the package's real location, so it reliably catches the runtime.
+ */
+function isSharedRuntime(meta: ClientChunkMeta): boolean {
+  return [meta.id, meta.normalizedId].some(
+    (path) =>
+      path.includes("/node_modules/") ||
+      /\/@rangojs\/router\//.test(path) ||
+      /\/packages\/(rangojs-router|rsc-router)\/(src|dist)\//.test(path),
+  );
+}
+
+/** Sanitize a raw group name into a filesystem/Rollup-safe chunk name fragment. */
+function sanitizeGroup(name: string): string {
+  return name.replace(/[^a-zA-Z0-9_-]+/g, "_").replace(/^_+|_+$/g, "") || "app";
+}
+
+/**
+ * Directory names that conventionally hold one sub-directory per route/feature.
+ * When a `"use client"` module lives under one of these, the built-in strategy
+ * keys the chunk on the segment IMMEDIATELY AFTER the marker (the route id),
+ * rather than the module's immediate parent directory. This is what keeps
+ * `routes/foo/components/Button.tsx` and `routes/bar/components/Button.tsx` in
+ * `app-foo` / `app-bar` instead of colliding in a single `app-components`.
+ *
+ * Route identity lives in the path PREFIX; the immediate parent (a suffix) is
+ * only a reliable proxy for the un-nested `routes/<route>/Widget.tsx` layout.
+ */
+const ROUTE_ROOT_DIRS = new Set([
+  "routes",
+  "route",
+  "pages",
+  "page",
+  "app",
+  "features",
+  "feature",
+  "views",
+  "view",
+  "handlers",
+  "urls",
+  "modules",
+  "screens",
+  "sections",
+]);
+
+/**
+ * Built-in strategy used when `clientChunks: true` (also the default). Splits app
+ * client components by route/feature identity ONLY where it can recognize a route
+ * structure; everywhere else it inherits the default grouping (returns undefined).
+ * This conservatism is what makes it safe as a default:
+ *
+ * - A recognized route structure (`routes/<id>/…`, `app/<id>/…`, `handlers/<id>/…`
+ *   etc.) splits into a per-route chunk `app-<id>`, at any nesting depth.
+ * - A flat `src/components/Button.tsx`, or host sub-apps already split by a dynamic
+ *   `import()` boundary (each app's `serverChunk` differs), get `undefined` and so
+ *   keep `@vitejs/plugin-rsc`'s default `serverChunk` grouping — i.e. NO change
+ *   versus not enabling the option. Returning a parent-dir name here would instead
+ *   merge unrelated modules (e.g. every host app's `components/Layout.tsx` into one
+ *   `app-components`), re-introducing cross-app leakage.
+ *
+ * Resolution order:
+ * 1. Shared runtime (React / router / node_modules) -> `undefined` (never split).
+ * 2. A registered error/notFound fallback (`ctx.fallbackRefs`) -> `app-fallback`,
+ *    regardless of location, so the error UI is decoupled from the happy path.
+ * 3. A {@link ROUTE_ROOT_DIRS} marker with a directory after it -> key on that
+ *    next segment (the route id), robust to any nesting depth.
+ * 4. Otherwise `undefined` (inherit the default `serverChunk` grouping).
+ */
+export function directoryClientChunks(
+  meta: ClientChunkMeta,
+  ctx?: ClientChunkContext,
+): string | undefined {
+  if (isSharedRuntime(meta)) {
+    // React / router runtime / node_modules: always shared, expected, uninteresting.
+    return undefined;
+  }
+  // Registered error/notFound fallbacks -> a dedicated chunk. The error UI must
+  // not co-bundle with the code it catches failures for, and removing it lets the
+  // chunk it would otherwise anchor be named after a real module, not the boundary.
+  if (
+    ctx?.fallbackRefs.size &&
+    ctx.fallbackRefs.has(hashRefKey(meta.normalizedId))
+  ) {
+    debugChunks?.("fallback %s -> app-fallback", meta.normalizedId);
+    return "app-fallback";
+  }
+  const segments = meta.normalizedId.split("/").filter(Boolean);
+  const dirCount = segments.length - 1; // exclude the filename
+  if (dirCount >= 1) {
+    // Route-root marker -> the segment after it is the route id. First marker
+    // wins, so a top-level route owns its whole subtree. The `< dirCount - 1`
+    // bound guarantees the segment after the marker is a directory, not the file.
+    for (let i = 0; i < dirCount - 1; i++) {
+      if (ROUTE_ROOT_DIRS.has(segments[i].toLowerCase())) {
+        const group = `app-${sanitizeGroup(segments[i + 1])}`;
+        debugChunks?.("split %s -> %s", meta.normalizedId, group);
+        return group;
+      }
+    }
+  }
+  // No recognized route structure -> inherit the default serverChunk grouping.
+  // This is the actionable "silent" case: app code that did NOT split by route.
+  // Surface it (under DEBUG=rango:chunks) so a consumer can see their layout
+  // missed the convention and either colocate under a marker dir or pass a fn.
+  debugChunks?.(
+    "shared %s (no route-root marker; inherits default grouping)",
+    meta.normalizedId,
+  );
+  return undefined;
+}
+
+/**
+ * Resolve a Rango `clientChunks` option into a @vitejs/plugin-rsc `clientChunks`
+ * callback, or `undefined` to leave plugin-rsc on its default (serverChunk)
+ * grouping.
+ *
+ * - `false` / `undefined` -> `undefined` (no override).
+ * - `true`               -> the built-in {@link directoryClientChunks} strategy,
+ *   bound to the discovery-populated {@link ClientChunkContext} (fallback chunk).
+ * - function             -> the user's function, used verbatim (full control; the
+ *   fallback refinement does not apply — the consumer owns the grouping).
+ */
+export function resolveClientChunks(
+  option: ClientChunks | undefined,
+  ctx?: ClientChunkContext,
+): RscClientChunksFn | undefined {
+  if (!option) return undefined;
+  if (option === true) return (meta) => directoryClientChunks(meta, ctx);
+  return option;
+}

package/src/vite/utils/directive-prologue.ts

@@ -0,0 +1,40 @@
+import { parseAst } from "vite";
+
+/**
+ * Detect a leading `"use client"` (or `'use client'`) directive in a module's
+ * directive prologue, tolerating leading comments/whitespace before it.
+ *
+ * A bare `source.trimStart().startsWith` check only strips whitespace, so a
+ * license banner / `// @ts-nocheck` before the directive would be missed. This
+ * walks the leading ExpressionStatement string-literal directives via the AST
+ * (a leading comment is not a `program.body` node), the single source of truth
+ * shared by both the rango plugin's HMR client-module sniff and the version
+ * plugin's getClientModuleSignature — so the two can never drift on what counts
+ * as a client module.
+ *
+ * Returns false when the source cannot be parsed (a syntactically broken file is
+ * not treated as a client module).
+ */
+export function hasUseClientDirective(source: string): boolean {
+  let program: { body?: any[] };
+  try {
+    program = parseAst(source, { lang: "tsx" }) as { body?: any[] };
+  } catch {
+    return false;
+  }
+  for (const node of program.body ?? []) {
+    if (
+      node?.type === "ExpressionStatement" &&
+      node.expression?.type === "Literal" &&
+      typeof node.expression.value === "string"
+    ) {
+      if (node.expression.value === "use client") return true;
+      // Another leading string-literal directive (e.g. "use strict"): keep
+      // scanning the prologue.
+      continue;
+    }
+    // First non-directive statement ends the prologue.
+    break;
+  }
+  return false;
+}

package/src/vite/utils/forward-user-plugins.ts

@@ -0,0 +1,171 @@
+import type { Plugin, ResolvedConfig, UserConfig } from "vite";
+
+/**
+ * Whether a user plugin must NOT be forwarded into the discovery temp server.
+ *
+ * Framework-owned plugins are matched precisely -- by exact name or a
+ * namespaced prefix -- rather than by a loose substring/word prefix, so an
+ * unrelated user resolver named e.g. `rsc-paths` or `cloudflare-kv-alias` is
+ * still forwarded (it would otherwise reproduce issue #500).
+ *
+ * - `vite:*`               Vite core + official plugins (incl.
+ *                          @vitejs/plugin-react's `vite:react-*`). The temp
+ *                          server already provides its own core; forwarding
+ *                          these would duplicate or conflict with it.
+ * - `rsc` / `rsc:*`        @vitejs/plugin-rsc. createTempRscServer instantiates
+ *                          its own rsc() plugin; forwarding would duplicate it.
+ *                          Matched exactly (`rsc`) or by the `rsc:` namespace --
+ *                          NOT every `rsc`-prefixed name.
+ * - `@rangojs/router*`     Our own plugins. The discovery plugin spawns the
+ *                          temp server, so forwarding would recurse infinitely.
+ * - `@cloudflare/vite-plugin*` / @cloudflare/vite-plugin (emits the scoped
+ *   `vite-plugin-cloudflare*`  `@cloudflare/vite-plugin` and unscoped
+ *                          `vite-plugin-cloudflare` / `vite-plugin-cloudflare:*`).
+ *                          Forwarding re-inits workerd, defeating the Node temp
+ *                          server. Matched specifically so a scoped user resolver
+ *                          like `@cloudflare/kv-alias` is still forwarded.
+ */
+function isDenied(name: string): boolean {
+  return (
+    name.startsWith("vite:") ||
+    name === "rsc" ||
+    name.startsWith("rsc:") ||
+    name.startsWith("@rangojs/router") ||
+    name.startsWith("@cloudflare/vite-plugin") ||
+    name.startsWith("vite-plugin-cloudflare")
+  );
+}
+
+/**
+ * A plugin participates in resolution if it exposes `resolveId` or `load`.
+ * Plugins that only transform, configure the server, or hook into the build
+ * lifecycle do not affect how bare specifiers resolve, so we skip them to keep
+ * the forwarded surface minimal.
+ */
+function hasResolutionHooks(p: Plugin): boolean {
+  return Boolean((p as any).resolveId || (p as any).load);
+}
+
+/**
+ * Strip a resolved plugin instance down to its resolution hooks plus the
+ * gating fields that decide whether/where it runs.
+ *
+ * We reuse the SAME instance objects captured from `config.plugins`. By the
+ * time `configResolved` fires on the discovery plugin, every plugin's own
+ * `config`/`configResolved` has already run on the main server, so any state
+ * a `resolveId` hook depends on (e.g. vite-tsconfig-paths' compiled path
+ * matcher, held in closure) is already populated. Forwarding only the
+ * resolution hooks therefore preserves correct resolution while avoiding a
+ * second `buildStart`/`configureServer`/`config` lifecycle in the temp server.
+ *
+ * `enforce` and `applyToEnvironment` are preserved so ordering and per-environment
+ * gating match the real pipeline.
+ *
+ * `apply` is intentionally dropped. Vite filters plugins by `apply` against the
+ * command during config resolution, so the `config.plugins` we read here is
+ * already command-filtered by the main server (build: `apply: "build"` +
+ * unconditional; dev: `apply: "serve"` + unconditional). The discovery temp
+ * server is always created with `createServer` (`command === "serve"`), so a
+ * forwarded `apply: "build"` plugin would be filtered straight back out -- even
+ * during a production build, where build-only resolvers are exactly what
+ * static/prerender rendering needs. Since the source list is already correct for
+ * the current command, the forwarded copy must carry no `apply` gate.
+ */
+function stripToResolutionHooks(p: Plugin): Plugin {
+  const stripped: Plugin = { name: p.name };
+  if ((p as any).enforce) (stripped as any).enforce = (p as any).enforce;
+  if ((p as any).applyToEnvironment)
+    (stripped as any).applyToEnvironment = (p as any).applyToEnvironment;
+  if ((p as any).resolveId) (stripped as any).resolveId = (p as any).resolveId;
+  if ((p as any).load) (stripped as any).load = (p as any).load;
+  return stripped;
+}
+
+/**
+ * Pick the user's resolution plugins from the resolved plugin list, denylist
+ * framework-owned plugins, keep only those with resolution hooks, and strip
+ * each to its resolution surface. Returns plugin objects safe to drop into the
+ * discovery temp server's `plugins` array.
+ */
+export function selectForwardableResolvePlugins(
+  plugins: readonly Plugin[] | undefined,
+): Plugin[] {
+  if (!plugins) return [];
+  const forwarded: Plugin[] = [];
+  for (const p of plugins) {
+    const name = p?.name;
+    if (!name || isDenied(name)) continue;
+    if (!hasResolutionHooks(p)) continue;
+    forwarded.push(stripToResolutionHooks(p));
+  }
+  return forwarded;
+}
+
+/**
+ * The resolution-relevant slice of the user's resolved config that is plain
+ * data (no plugin re-execution): everything under `resolve` that influences
+ * how specifiers map to files, plus `define` and `oxc` so transforms and
+ * compile-time constants match request time.
+ */
+export interface ForwardedRunnerConfig {
+  resolve: UserConfig["resolve"];
+  define: UserConfig["define"];
+  oxc: UserConfig["oxc"];
+}
+
+/**
+ * Extract the data-only config slice to mirror into the discovery temp server.
+ * `alias` is included here so callers no longer need to thread it separately.
+ *
+ * `tsconfigPaths` is forwarded so Vite 8's native tsconfig `paths` resolution
+ * (a top-level `resolve` flag, off by default) reaches the temp server. The
+ * server is created with `configFile: false` and an explicit, allowlisted
+ * resolve slice, so a flag that is not copied here is simply absent during
+ * discovery — which would make path-aliased imports fail at prerender/static
+ * time the same way unforwarded resolveId plugins did (issue #500).
+ *
+ * `oxc` keeps the user's options but always pins the RSC-required JSX runtime
+ * (automatic, react), since the temp server compiles the handler graph as
+ * React server components regardless of the user's app-level JSX config. Vite 8
+ * replaced the deprecated `esbuild` transform option with `oxc`, so we read and
+ * forward `oxc` exclusively — no `esbuild` field is touched.
+ */
+export function pickForwardedRunnerConfig(
+  config: ResolvedConfig,
+): ForwardedRunnerConfig {
+  const r = config.resolve ?? ({} as ResolvedConfig["resolve"]);
+  const resolve: NonNullable<UserConfig["resolve"]> = {};
+  if (r.alias !== undefined) resolve.alias = r.alias as any;
+  if (r.dedupe !== undefined) resolve.dedupe = r.dedupe;
+  if (r.conditions !== undefined) resolve.conditions = r.conditions;
+  if (r.mainFields !== undefined) resolve.mainFields = r.mainFields;
+  if (r.extensions !== undefined) resolve.extensions = r.extensions;
+  if (r.preserveSymlinks !== undefined)
+    resolve.preserveSymlinks = r.preserveSymlinks;
+  if (r.tsconfigPaths !== undefined) resolve.tsconfigPaths = r.tsconfigPaths;
+
+  // Pin the RSC JSX runtime on top of the user's oxc options. The user's
+  // jsx sub-options (e.g. `development`) are preserved when present; only
+  // `runtime`/`importSource` are forced to the values the RSC compile needs.
+  const userOxc = config.oxc;
+  const userJsx =
+    userOxc &&
+    typeof userOxc === "object" &&
+    typeof userOxc.jsx === "object" &&
+    userOxc.jsx !== null
+      ? userOxc.jsx
+      : {};
+  const oxc: UserConfig["oxc"] =
+    userOxc && typeof userOxc === "object"
+      ? {
+          ...userOxc,
+          jsx: { ...userJsx, runtime: "automatic", importSource: "react" },
+        }
+      : { jsx: { runtime: "automatic", importSource: "react" } };
+
+  return {
+    resolve,
+    define: config.define,
+    oxc,
+  };
+}

package/src/vite/utils/manifest-utils.ts

@@ -0,0 +1,15 @@
+export {
+  flattenLeafEntries,
+  buildRouteToStaticPrefix,
+} from "../../build/prefix-tree-utils.js";
+
+/**
+ * Wrap a value as `JSON.parse('...')` instead of a JS object literal.
+ * V8's JSON parser is significantly faster than its full JS parser for large
+ * objects, so this improves startup time for big route manifests.
+ */
+export function jsonParseExpression(value: unknown): string {
+  const json = JSON.stringify(value);
+  const escaped = json.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
+  return `JSON.parse('${escaped}')`;
+}

package/src/vite/utils/package-resolution.ts

@@ -0,0 +1,89 @@
+import { existsSync } from "node:fs";
+import { createRequire } from "node:module";
+import { resolve } from "node:path";
+import packageJson from "../../../package.json";
+
+const require = createRequire(import.meta.url);
+
+/**
+ * The canonical name used in virtual entries (without scope)
+ */
+const VIRTUAL_PACKAGE_NAME = "@rangojs/router";
+
+export function getPublishedPackageName(): string {
+  return packageJson.name;
+}
+
+export function isInstalledFromNpm(): boolean {
+  const packageName = getPublishedPackageName();
+  // Check if the scoped package exists in node_modules
+  return existsSync(resolve(process.cwd(), "node_modules", packageName));
+}
+
+export function isWorkspaceDevelopment(): boolean {
+  return !isInstalledFromNpm();
+}
+
+const SOURCE_EXPORT_SUBPATHS = Object.keys(packageJson.exports)
+  .filter((key) => {
+    const entry = (
+      packageJson.exports as Record<string, Record<string, string>>
+    )[key];
+    // Include if any non-types condition points to TypeScript source
+    return Object.entries(entry).some(
+      ([condition, path]) =>
+        condition !== "types" &&
+        typeof path === "string" &&
+        /\.tsx?$/.test(path),
+    );
+  })
+  .map((key) => key.replace(/^\./, ""));
+
+export function getExcludeDeps(): string[] {
+  const packageName = getPublishedPackageName();
+  const excludes: string[] = [];
+
+  for (const subpath of SOURCE_EXPORT_SUBPATHS) {
+    // Add scoped package paths
+    excludes.push(`${packageName}${subpath}`);
+    // Add virtual/aliased paths (before alias resolution)
+    if (packageName !== VIRTUAL_PACKAGE_NAME) {
+      excludes.push(`${VIRTUAL_PACKAGE_NAME}${subpath}`);
+    }
+  }
+
+  return excludes;
+}
+
+const ALIAS_SUBPATHS = SOURCE_EXPORT_SUBPATHS;
+
+export function getPackageAliases(): Record<string, string> {
+  if (isWorkspaceDevelopment()) {
+    return {};
+  }
+
+  const packageName = getPublishedPackageName();
+  const aliases: Record<string, string> = {};
+
+  for (const subpath of ALIAS_SUBPATHS) {
+    aliases[`${VIRTUAL_PACKAGE_NAME}${subpath}`] = `${packageName}${subpath}`;
+  }
+
+  return aliases;
+}
+
+export function getVendorAliases(): Record<string, string> {
+  const specs = [
+    "@vitejs/plugin-rsc/vendor/react-server-dom/client.edge",
+    "@vitejs/plugin-rsc/vendor/react-server-dom/server.edge",
+  ];
+  const aliases: Record<string, string> = {};
+  for (const spec of specs) {
+    try {
+      aliases[spec] = require.resolve(spec);
+    } catch {
+      // Non-fatal; Vite will warn if it cannot resolve the spec
+    }
+  }
+  return aliases;
+}