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

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))
   );
 }
 

package/src/vite/rango.ts

@@ -18,11 +18,15 @@ import {
 import { findRouterFiles } from "../build/generate-route-types.js";
 import { createVersionPlugin } from "./plugins/version-plugin.js";
 import {
-  sharedEsbuildOptions,
+  sharedRolldownOptions,
   createVirtualEntriesPlugin,
   onwarn,
   getManualChunks,
 } from "./utils/shared-utils.js";
+import {
+  resolveClientChunks,
+  type ClientChunkContext,
+} from "./utils/client-chunks.js";
 import type { RangoOptions } from "./plugin-types.js";
 import { printBanner, rangoVersion } from "./utils/banner.js";
 import { createVersionInjectorPlugin } from "./plugins/version-injector.js";
@@ -62,6 +66,23 @@ export async function rango(options?: RangoOptions): Promise<PluginOption[]> {
   const resolvedOptions: RangoOptions = options ?? { preset: "node" };
   const preset = resolvedOptions.preset ?? "node";
   const showBanner = resolvedOptions.banner ?? true;
+  // Client-chunking strategy (per-route/per-feature splitting of the browser
+  // bundle). Defaults to the built-in directory strategy (`true`) pre-1.0; pass
+  // `clientChunks: false` to opt out. Resolved once and forwarded to
+  // @vitejs/plugin-rsc in both presets. The built-in strategy only splits where it
+  // recognizes a route structure, so this default is a no-op for flat / host-split
+  // apps and never duplicates the shared runtime.
+  const clientChunksOption = resolvedOptions.clientChunks ?? true;
+  // Shared context the built-in strategy reads at build time: the production
+  // hashes of registered error/notFound fallback modules (-> app-fallback).
+  // Populated by the discovery plugin in buildStart, before the client build
+  // invokes the strategy. Only wired when the built-in strategy is active; a
+  // custom function owns its own grouping.
+  const useBuiltInClientChunks = clientChunksOption === true;
+  const clientChunkCtx: ClientChunkContext | undefined = useBuiltInClientChunks
+    ? { fallbackRefs: new Set<string>() }
+    : undefined;
+  const clientChunks = resolveClientChunks(clientChunksOption, clientChunkCtx);
   debugConfig?.("rango(%s) setup start", preset);
 
   const plugins: PluginOption[] = [];
@@ -127,10 +148,18 @@ export async function rango(options?: RangoOptions): Promise<PluginOption[]> {
           // This ensures the same Context instance is used by both browser entry and RSC proxy modules
           optimizeDeps: {
             exclude: excludeDeps,
-            esbuildOptions: sharedEsbuildOptions,
+            rolldownOptions: sharedRolldownOptions,
           },
           resolve: {
             alias: rangoAliases,
+            // Force a single React/React-DOM copy across all three RSC
+            // environments. RSC requires exactly one react/react-dom instance
+            // per environment runtime; consumer install topologies (pnpm
+            // strict layout, experimental React pins, third-party "use client"
+            // packages) can otherwise resolve duplicate copies, causing
+            // "Invalid hook call" / lost context. Child environments inherit
+            // this root dedupe, and Vite merges it with any consumer dedupe.
+            dedupe: ["react", "react-dom"],
           },
           build: {
             rollupOptions: { onwarn },
@@ -139,6 +168,14 @@ export async function rango(options?: RangoOptions): Promise<PluginOption[]> {
             client: {
               build: {
                 rollupOptions: {
+                  // FILE_NAME_CONFLICT (and any other client-build warning) is
+                  // emitted by the CLIENT environment build, which consults THIS
+                  // env's onwarn -- Vite 8's environment builds do NOT propagate
+                  // the top-level build.rollupOptions.onwarn into the client env.
+                  // Wire it here so the suppression runs where the conflicts
+                  // originate (the top-level handler is invoked 0x for these; the
+                  // client-env handler is invoked for all of them).
+                  onwarn,
                   output: {
                     manualChunks: getManualChunks,
                   },
@@ -149,7 +186,7 @@ export async function rango(options?: RangoOptions): Promise<PluginOption[]> {
               optimizeDeps: {
                 include: [nested("rsc-html-stream/client")],
                 exclude: excludeDeps,
-                esbuildOptions: sharedEsbuildOptions,
+                rolldownOptions: sharedRolldownOptions,
               },
             },
             ssr: {
@@ -157,10 +194,6 @@ export async function rango(options?: RangoOptions): Promise<PluginOption[]> {
               build: {
                 outDir: "./dist/rsc/ssr",
               },
-              resolve: {
-                // Ensure single React instance in SSR child environment
-                dedupe: ["react", "react-dom"],
-              },
               // Pre-bundle SSR entry and React for proper module linking with childEnvironments
               // All deps must be listed to avoid late discovery triggering ERR_OUTDATED_OPTIMIZED_DEP
               optimizeDeps: {
@@ -178,7 +211,7 @@ export async function rango(options?: RangoOptions): Promise<PluginOption[]> {
                   ),
                 ],
                 exclude: excludeDeps,
-                esbuildOptions: sharedEsbuildOptions,
+                rolldownOptions: sharedRolldownOptions,
               },
             },
             rsc: {
@@ -195,7 +228,7 @@ export async function rango(options?: RangoOptions): Promise<PluginOption[]> {
                   ),
                 ],
                 exclude: excludeDeps,
-                esbuildOptions: sharedEsbuildOptions,
+                rolldownOptions: sharedRolldownOptions,
               },
             },
           },
@@ -227,6 +260,7 @@ export async function rango(options?: RangoOptions): Promise<PluginOption[]> {
       rsc({
         entries: finalEntries,
         serverHandler: false,
+        clientChunks,
       }) as PluginOption,
     );
 
@@ -256,7 +290,7 @@ export async function rango(options?: RangoOptions): Promise<PluginOption[]> {
                 "  - " + (f.startsWith(root) ? f.slice(root.length + 1) : f),
             )
             .join("\n");
-          throw new Error(`[rsc-router] Multiple routers found:\n${list}`);
+          throw new Error(`[rango] Multiple routers found:\n${list}`);
         }
         // 0 found: routerRef.path stays undefined, warn at startup via discovery plugin
       },
@@ -282,18 +316,34 @@ export async function rango(options?: RangoOptions): Promise<PluginOption[]> {
         return {
           optimizeDeps: {
             exclude: excludeDeps,
-            esbuildOptions: sharedEsbuildOptions,
+            rolldownOptions: sharedRolldownOptions,
           },
           build: {
             rollupOptions: { onwarn },
           },
           resolve: {
             alias: rangoAliases,
+            // Force a single React/React-DOM copy across all three RSC
+            // environments. RSC requires exactly one react/react-dom instance
+            // per environment runtime; consumer install topologies (pnpm
+            // strict layout, experimental React pins, third-party "use client"
+            // packages) can otherwise resolve duplicate copies, causing
+            // "Invalid hook call" / lost context. Child environments inherit
+            // this root dedupe, and Vite merges it with any consumer dedupe.
+            dedupe: ["react", "react-dom"],
           },
           environments: {
             client: {
               build: {
                 rollupOptions: {
+                  // FILE_NAME_CONFLICT (and any other client-build warning) is
+                  // emitted by the CLIENT environment build, which consults THIS
+                  // env's onwarn -- Vite 8's environment builds do NOT propagate
+                  // the top-level build.rollupOptions.onwarn into the client env.
+                  // Wire it here so the suppression runs where the conflicts
+                  // originate (the top-level handler is invoked 0x for these; the
+                  // client-env handler is invoked for all of them).
+                  onwarn,
                   output: {
                     manualChunks: getManualChunks,
                   },
@@ -308,7 +358,7 @@ export async function rango(options?: RangoOptions): Promise<PluginOption[]> {
                   nested("rsc-html-stream/client"),
                 ],
                 exclude: excludeDeps,
-                esbuildOptions: sharedEsbuildOptions,
+                rolldownOptions: sharedRolldownOptions,
                 entries: [VIRTUAL_IDS.browser],
               },
             },
@@ -327,7 +377,7 @@ export async function rango(options?: RangoOptions): Promise<PluginOption[]> {
                   ),
                 ],
                 exclude: excludeDeps,
-                esbuildOptions: sharedEsbuildOptions,
+                rolldownOptions: sharedRolldownOptions,
               },
             },
             rsc: {
@@ -341,7 +391,7 @@ export async function rango(options?: RangoOptions): Promise<PluginOption[]> {
                     "@vitejs/plugin-rsc/vendor/react-server-dom/server.edge",
                   ),
                 ],
-                esbuildOptions: sharedEsbuildOptions,
+                rolldownOptions: sharedRolldownOptions,
               },
             },
           },
@@ -366,7 +416,7 @@ export async function rango(options?: RangoOptions): Promise<PluginOption[]> {
         if (rscMinimalCount > 1 && !hasWarnedDuplicate) {
           hasWarnedDuplicate = true;
           console.warn(
-            "[rsc-router] Duplicate @vitejs/plugin-rsc detected. " +
+            "[rango] Duplicate @vitejs/plugin-rsc detected. " +
               "Remove rsc() from your vite config — rango() includes it automatically.",
           );
         }
@@ -382,6 +432,7 @@ export async function rango(options?: RangoOptions): Promise<PluginOption[]> {
     plugins.push(
       rsc({
         entries: finalEntries,
+        clientChunks,
       }) as PluginOption,
     );
 
@@ -484,6 +535,7 @@ export async function rango(options?: RangoOptions): Promise<PluginOption[]> {
       enableBuildPrerender: prerenderEnabled,
       buildEnv: options?.buildEnv,
       preset,
+      clientChunkCtx,
     }),
   );