@rangojs/router 0.0.0-experimental.d7eeaa75 → 0.0.0-experimental.dacec167

package/src/vite/plugins/performance-tracks.ts

@@ -14,6 +14,9 @@
 
 import type { Plugin } from "vite";
 import { readFile } from "node:fs/promises";
+import { createRangoDebugger, createCounter, NS } from "../debug.js";
+
+const debug = createRangoDebugger(NS.transform);
 
 const RSDW_PATCH_RE =
   /((?:var|let|const)\s+\w+\s*=\s*root\._children\s*,\s*(\w+)\s*=\s*root\._debugInfo\s*[;,])/;
@@ -45,44 +48,45 @@ export function patchRsdwClientDebugInfoRecovery(code: string): {
 
 export function performanceTracksOptimizeDepsPlugin(): {
   name: string;
-  setup(build: any): void;
+  load(id: string): Promise<{ code: string } | null>;
 } {
+  const RSDW_CLIENT_RE =
+    /react-server-dom-webpack-client\.browser\.(development|production)\.js$/;
   return {
     name: "@rangojs/router:performance-tracks-optimize-deps",
-    setup(build: any): void {
-      build.onLoad(
-        {
-          filter:
-            /react-server-dom-webpack-client\.browser\.(development|production)\.js$/,
-        },
-        async (args: { path: string }) => {
-          const code = await readFile(args.path, "utf8");
-          const patched = patchRsdwClientDebugInfoRecovery(code);
-          return {
-            contents: patched.code,
-            loader: "js",
-          };
-        },
-      );
+    // Vite 8 optimizes deps with Rolldown (Rollup-style plugin pipeline), so the
+    // pre-bundled RSDW client is patched via load() rather than esbuild's onLoad.
+    // Returning code overrides Rolldown's default filesystem read for the module.
+    async load(id: string): Promise<{ code: string } | null> {
+      const cleanId = id.split("?")[0] ?? id;
+      if (!RSDW_CLIENT_RE.test(cleanId)) return null;
+      const code = await readFile(cleanId, "utf8");
+      const patched = patchRsdwClientDebugInfoRecovery(code);
+      return { code: patched.code };
     },
   };
 }
 
 export function performanceTracksPlugin(): Plugin {
+  const counter = createCounter(debug, "performance-tracks");
   return {
     name: "@rangojs/router:performance-tracks",
 
+    buildEnd() {
+      counter?.flush();
+    },
+
     transform(code, id) {
       if (!id.includes("react-server-dom") || !id.includes("client")) return;
-      const patched = patchRsdwClientDebugInfoRecovery(code);
-      if (!patched.debugInfoVar) return;
-      if (process.env.INTERNAL_RANGO_DEBUG)
-        console.log(
-          "[perf-tracks] patched RSDW client (var:",
-          patched.debugInfoVar,
-          ")",
-        );
-      return patched.code;
+      const start = counter ? performance.now() : 0;
+      try {
+        const patched = patchRsdwClientDebugInfoRecovery(code);
+        if (!patched.debugInfoVar) return;
+        debug?.("patched RSDW client (var: %s)", patched.debugInfoVar);
+        return patched.code;
+      } finally {
+        counter?.record(id, performance.now() - start);
+      }
     },
   };
 }

package/src/vite/plugins/use-cache-transform.ts

@@ -20,6 +20,9 @@ import type { Plugin } from "vite";
 import path from "node:path";
 import MagicString from "magic-string";
 import { normalizePath, hashId } from "./expose-id-utils.js";
+import { createRangoDebugger, createCounter, NS } from "../debug.js";
+
+const debug = createRangoDebugger(NS.transform);
 
 const CACHE_RUNTIME_IMPORT = "@rangojs/router/cache-runtime";
 
@@ -27,11 +30,19 @@ const CACHE_RUNTIME_IMPORT = "@rangojs/router/cache-runtime";
 // and should not be wrapped (children can't be cache-keyed).
 const LAYOUT_TEMPLATE_PATTERN = /\/(layout|template)\.(tsx?|jsx?)$/;
 
+/**
+ * Grammar for a valid function-level directive: `use cache` optionally followed
+ * by `: <profile-name>`. The single source of truth for both the transform and
+ * the near-miss validator below.
+ */
+export const USE_CACHE_DIRECTIVE_RE: RegExp = /^use cache(:\s*[\w-]+)?$/;
+
 export function useCacheTransform(): Plugin {
   let projectRoot = "";
   let isBuild = false;
   let rscTransforms: typeof import("@vitejs/plugin-rsc/transforms") | null =
     null;
+  const counter = createCounter(debug, "use-cache");
 
   return {
     name: "@rangojs/router:use-cache",
@@ -42,6 +53,10 @@ export function useCacheTransform(): Plugin {
       isBuild = config.command === "build";
     },
 
+    buildEnd() {
+      counter?.flush();
+    },
+
     async transform(code, id) {
       // Only process in RSC environment
       if (this.environment?.name !== "rsc") return;
@@ -55,63 +70,68 @@ export function useCacheTransform(): Plugin {
       // Only JS/TS files
       if (!/\.(tsx?|jsx?|mjs)$/.test(id)) return;
 
-      // Lazy-load transform helpers
-      if (!rscTransforms) {
+      const start = counter ? performance.now() : 0;
+      try {
+        // Lazy-load transform helpers
+        if (!rscTransforms) {
+          try {
+            rscTransforms = await import("@vitejs/plugin-rsc/transforms");
+          } catch {
+            return;
+          }
+        }
+
+        const {
+          hasDirective,
+          transformWrapExport,
+          transformHoistInlineDirective,
+        } = rscTransforms;
+
+        // Parse AST
+        let ast: any;
         try {
-          rscTransforms = await import("@vitejs/plugin-rsc/transforms");
+          const { parseAst } = await import("vite");
+          ast = parseAst(code, { lang: "tsx" });
         } catch {
           return;
         }
-      }
-
-      const {
-        hasDirective,
-        transformWrapExport,
-        transformHoistInlineDirective,
-      } = rscTransforms;
 
-      // Parse AST
-      let ast: any;
-      try {
-        const { parseAst } = await import("vite");
-        ast = parseAst(code);
-      } catch {
-        return;
-      }
-
-      const filePath = normalizePath(path.relative(projectRoot, id));
-      const isLayoutOrTemplate = LAYOUT_TEMPLATE_PATTERN.test(id);
+        const filePath = normalizePath(path.relative(projectRoot, id));
+        const isLayoutOrTemplate = LAYOUT_TEMPLATE_PATTERN.test(id);
+
+        // Check for file-level "use cache"
+        if (hasDirective(ast.body, "use cache")) {
+          return transformFileLevelUseCache(
+            code,
+            ast,
+            filePath,
+            id,
+            isBuild,
+            isLayoutOrTemplate,
+            transformWrapExport,
+          );
+        }
 
-      // Check for file-level "use cache"
-      if (hasDirective(ast.body, "use cache")) {
-        return transformFileLevelUseCache(
+        // Check for function-level "use cache" / "use cache: profileName"
+        // (only if there's no file-level directive but code still contains the string)
+        const functionResult = transformFunctionLevelUseCache(
           code,
           ast,
           filePath,
           id,
           isBuild,
-          isLayoutOrTemplate,
-          transformWrapExport,
+          transformHoistInlineDirective,
         );
-      }
 
-      // Check for function-level "use cache" / "use cache: profileName"
-      // (only if there's no file-level directive but code still contains the string)
-      const functionResult = transformFunctionLevelUseCache(
-        code,
-        ast,
-        filePath,
-        id,
-        isBuild,
-        transformHoistInlineDirective,
-      );
-
-      // Always check for near-miss directives, even when valid directives
-      // exist. A file may contain both valid and invalid "use cache" directives
-      // in different functions — the invalid ones should still warn.
-      warnOnNearMissDirectives(ast, id, this.warn.bind(this));
+        // Check for near-miss directives on the function-level path. The
+        // file-level branch above returns earlier (it wraps every export
+        // regardless), so this runs only when there is no file-level directive.
+        warnOnNearMissDirectives(ast, id, this.warn.bind(this));
 
-      if (functionResult) return functionResult;
+        if (functionResult) return functionResult;
+      } finally {
+        counter?.record(id, performance.now() - start);
+      }
     },
   };
 }
@@ -206,7 +226,7 @@ function transformFunctionLevelUseCache(
 ) {
   try {
     const { output, names } = transformHoistInlineDirective(code, ast, {
-      directive: /^use cache(:\s*[\w-]+)?$/,
+      directive: USE_CACHE_DIRECTIVE_RE,
       runtime: (
         value: string,
         name: string,
@@ -260,11 +280,6 @@ function findFileLevelDirective(
   return null;
 }
 
-/**
- * The valid directive regex (must stay in sync with transformFunctionLevelUseCache).
- */
-const VALID_DIRECTIVE_RE = /^use cache(:\s*[\w-]+)?$/;
-
 /**
  * Regex for near-miss: starts with "use cache:" but has invalid tokens.
  */
@@ -294,7 +309,7 @@ function warnOnNearMissDirectives(
       if (
         value.startsWith("use cache") &&
         NEAR_MISS_RE.test(value) &&
-        !VALID_DIRECTIVE_RE.test(value)
+        !USE_CACHE_DIRECTIVE_RE.test(value)
       ) {
         const profilePart = value.slice("use cache:".length).trim();
         warn(

package/src/vite/plugins/version-injector.ts

@@ -1,6 +1,7 @@
 import type { Plugin } from "vite";
 import { resolve } from "node:path";
 import * as Vite from "vite";
+import { resolveRscEntryFromConfig } from "../utils/shared-utils.js";
 
 /**
  * Plugin that auto-injects VERSION and routes-manifest into custom entry.rsc files.
@@ -20,18 +21,7 @@ export function createVersionInjectorPlugin(
 
     configResolved(config) {
       let entryPath = rscEntryPath;
-      // Cloudflare preset: read entry from resolved environment config.
-      // The @cloudflare/vite-plugin reads wrangler config (toml/json/jsonc)
-      // and sets optimizeDeps.entries on the RSC environment.
-      if (!entryPath) {
-        const rscEnvConfig = (config.environments as any)?.["rsc"];
-        const entries = rscEnvConfig?.optimizeDeps?.entries;
-        if (typeof entries === "string") {
-          entryPath = entries;
-        } else if (Array.isArray(entries) && entries.length > 0) {
-          entryPath = entries[0];
-        }
-      }
+      if (!entryPath) entryPath = resolveRscEntryFromConfig(config);
       if (entryPath) {
         resolvedEntryPath = resolve(config.root, entryPath);
       }
@@ -47,16 +37,26 @@ export function createVersionInjectorPlugin(
         return null;
       }
 
-      // Prepend imports at the top of the file. ES imports are hoisted
-      // by the module system, so source position is irrelevant.
-      const prepend: string[] = [];
-      let newCode = code;
-
-      if (!code.includes("virtual:rsc-router/routes-manifest")) {
-        prepend.push(`import "virtual:rsc-router/routes-manifest";`);
-      }
+      // Always prepend `import "virtual:rsc-router/routes-manifest"` as the
+      // first side-effect import. The manifest virtual module's `load()` hook
+      // awaits `s.discoveryDone` so that, by the time the rest of the entry
+      // including any module-level `router.reverse()` calls under `./router.js`
+      // evaluates, runtime discovery has rewritten `router.named-routes.gen.ts`
+      // with the full route table.
+      //
+      // ES module evaluation order matters here: while imports are *parsed*
+      // hoisted, side-effect imports are evaluated in source order in the
+      // dependency graph. A user-authored `import "virtual:rsc-router/..."`
+      // placed after `import "./router.js"` runs too late: the manifest
+      // gate fires after router.tsx has already crashed on a stale gen file.
+      // We always prepend; ESM dedups any user-written duplicate, so module
+      // initialization still runs once.
+      const prepend: string[] = [
+        `import "virtual:rsc-router/routes-manifest";`,
+      ];
 
       // Auto-inject VERSION if file uses createRSCHandler without version
+      let newCode = code;
       const needsVersion =
         code.includes("createRSCHandler") &&
         !code.includes("@rangojs/router:version") &&
@@ -70,9 +70,25 @@ export function createVersionInjectorPlugin(
         );
       }
 
-      if (prepend.length === 0 && newCode === code) return null;
-
-      newCode = prepend.join("\n") + (prepend.length > 0 ? "\n" : "") + newCode;
+      // Insert after any leading `/// <reference ... />` triple-slash
+      // directives (and surrounding blank lines). TypeScript requires those
+      // directives to precede all other code; putting our imports above
+      // them silently demotes the directives to plain comments.
+      const lines = newCode.split("\n");
+      let insertAt = 0;
+      while (insertAt < lines.length) {
+        const trimmed = lines[insertAt]!.trim();
+        if (trimmed === "" || /^\/\/\/\s*<reference\b/.test(trimmed)) {
+          insertAt++;
+        } else {
+          break;
+        }
+      }
+      newCode = [
+        ...lines.slice(0, insertAt),
+        ...prepend,
+        ...lines.slice(insertAt),
+      ].join("\n");
 
       return {
         code: newCode,

package/src/vite/plugins/version-plugin.ts

@@ -18,7 +18,7 @@ function getClientModuleSignature(
 ): ClientModuleSignature | undefined {
   let program: any;
   try {
-    program = parseAst(source, { jsx: true });
+    program = parseAst(source, { lang: "tsx" });
   } catch {
     return undefined;
   }
@@ -133,6 +133,7 @@ export function createVersionPlugin(): Plugin {
   let currentVersion = buildVersion;
   let isDev = false;
   let server: any = null;
+  let resolvedCacheDir: string | undefined;
   const clientModuleSignatures = new Map<string, ClientModuleSignature>();
 
   let versionCounter = 0;
@@ -140,7 +141,7 @@ export function createVersionPlugin(): Plugin {
     // Use timestamp + counter to guarantee uniqueness even when multiple
     // bumps happen within the same millisecond (e.g. cascading HMR events).
     currentVersion = Date.now().toString(16) + String(++versionCounter);
-    console.log(`[rsc-router] ${reason}, version updated: ${currentVersion}`);
+    console.log(`[rango] ${reason}, version updated: ${currentVersion}`);
 
     const rscEnv = server?.environments?.rsc;
     const versionMod = rscEnv?.moduleGraph?.getModuleById(
@@ -157,6 +158,12 @@ export function createVersionPlugin(): Plugin {
 
     configResolved(config) {
       isDev = config.command === "serve";
+      // Capture the resolved cacheDir so we can ignore optimizer-output
+      // writes inside it. Vite resolves cacheDir against the project root,
+      // so this is a stable absolute path for the lifetime of the server.
+      resolvedCacheDir = config.cacheDir
+        ? String(config.cacheDir).replace(/\\/g, "/")
+        : undefined;
     },
 
     configureServer(devServer) {
@@ -214,6 +221,14 @@ export function createVersionPlugin(): Plugin {
 
       if (!isRscModule) return;
 
+      // Skip Vite's own pre-bundled dep cache writes. The optimizer rewrites
+      // files inside the configured `cacheDir` on every discovery cycle
+      // (and when other dev servers under the same cwd populate their own
+      // isolated cache dirs). These are not user-source changes, so bumping
+      // the app version on them produces spurious version mismatches that
+      // surface as forced reloads on in-flight actions.
+      if (isViteDepCachePath(ctx.file, resolvedCacheDir)) return;
+
       // Skip re-bumping when the version virtual module itself is invalidated
       // (our own bumpVersion() invalidates it, which re-triggers hotUpdate).
       if (
@@ -264,3 +279,45 @@ export function createVersionPlugin(): Plugin {
     },
   };
 }
+
+/**
+ * Match Vite's pre-bundled dep cache directories. These paths are rewritten
+ * by the dep optimizer (and by isolated test fixtures sharing the same cwd),
+ * not by user source changes, so they should not bump the app version (which
+ * would force a client reload mid-request).
+ *
+ * Two checks:
+ * 1. Anything inside the resolved `cacheDir` (precise — covers custom paths
+ *    like the `RANGO_E2E_VITE_CACHE_DIR` overrides in the test fixtures).
+ * 2. Heuristic match for any `node_modules/.vite*` directory or a
+ *    `.vite-isolated/` segment anywhere in the path. This catches the
+ *    *other* dev servers in the same cwd whose cacheDir we cannot read
+ *    (we only see config of the server we're attached to).
+ */
+export function isViteDepCachePath(
+  filePath: string | undefined,
+  cacheDir?: string,
+): boolean {
+  if (!filePath) return false;
+  const normalized = filePath.replace(/\\/g, "/");
+
+  if (cacheDir) {
+    const normalizedCacheDir = cacheDir.replace(/\\/g, "/").replace(/\/+$/, "");
+    if (
+      normalized === normalizedCacheDir ||
+      normalized.startsWith(normalizedCacheDir + "/")
+    ) {
+      return true;
+    }
+  }
+
+  // Vite/optimizer convention: cache dirs always sit directly under
+  // `node_modules/` and start with `.vite` (e.g. `.vite`, `.vite-temp`,
+  // `.vite_rango_generate`, `.vite-e2e-test-app`). The `/.vite-isolated/`
+  // segment covers the test-fixture pattern that places the cache outside
+  // node_modules.
+  return (
+    /\/node_modules\/\.vite[^/]*\//.test(normalized) ||
+    normalized.includes("/.vite-isolated/")
+  );
+}

package/src/vite/plugins/virtual-entries.ts

@@ -14,7 +14,7 @@ import {
 import { createElement, StrictMode } from "react";
 import { hydrateRoot } from "react-dom/client";
 import { rscStream } from "@rangojs/router/internal/deps/html-stream-client";
-import { initBrowserApp, RSCRouter } from "@rangojs/router/browser";
+import { initBrowserApp, Rango } from "@rangojs/router/browser";
 
 async function initializeApp() {
   const deps = {
@@ -29,7 +29,7 @@ async function initializeApp() {
 
   hydrateRoot(
     document,
-    createElement(StrictMode, null, createElement(RSCRouter))
+    createElement(StrictMode, null, createElement(Rango))
   );
 }