@rangojs/router 0.0.0-experimental.73ab3466 → 0.0.0-experimental.73e3d61f

package/dist/vite/index.js

@@ -9,18 +9,18 @@ import fs from "node:fs";
 
 // src/vite/plugins/expose-id-utils.ts
 import path from "node:path";
-import crypto2 from "node:crypto";
+import crypto from "node:crypto";
 function normalizePath(p) {
   return p.split(path.sep).join("/");
 }
 function hashId(filePath, exportName) {
   const input = `${filePath}#${exportName}`;
-  const hash = crypto2.createHash("sha256").update(input).digest("hex");
+  const hash = crypto.createHash("sha256").update(input).digest("hex");
   return `${hash.slice(0, 8)}#${exportName}`;
 }
 function hashInlineId(filePath, lineNumber, index) {
   const input = index !== void 0 && index > 0 ? `${filePath}:${lineNumber}:${index}` : `${filePath}:${lineNumber}`;
-  return crypto2.createHash("sha256").update(input).digest("hex").slice(0, 8);
+  return crypto.createHash("sha256").update(input).digest("hex").slice(0, 8);
 }
 function buildExportMap(program) {
   const exportMap = /* @__PURE__ */ new Map();
@@ -1745,7 +1745,7 @@ import { resolve } from "node:path";
 // package.json
 var package_default = {
   name: "@rangojs/router",
-  version: "0.0.0-experimental.73ab3466",
+  version: "0.0.0-experimental.73e3d61f",
   description: "Django-inspired RSC router with composable URL patterns",
   keywords: [
     "react",
@@ -1887,7 +1887,7 @@ var package_default = {
     "test:unit:watch": "vitest"
   },
   dependencies: {
-    "@vitejs/plugin-rsc": "^0.5.14",
+    "@vitejs/plugin-rsc": "^0.5.19",
     "magic-string": "^0.30.17",
     picomatch: "^4.0.3",
     "rsc-html-stream": "^0.0.7"
@@ -2784,6 +2784,68 @@ function createVersionPlugin() {
 
 // src/vite/utils/shared-utils.ts
 import * as Vite from "vite";
+
+// src/vite/plugins/performance-tracks.ts
+import { readFile } from "node:fs/promises";
+var RSDW_PATCH_RE = /((?:var|let|const)\s+\w+\s*=\s*root\._children\s*,\s*(\w+)\s*=\s*root\._debugInfo\s*[;,])/;
+function buildPatchReplacement(match, debugInfoVar) {
+  return `${match}
+if (${debugInfoVar} && 0 === ${debugInfoVar}.length && "fulfilled" === root.status) {
+  var _resolved = "function" === typeof resolveLazy ? resolveLazy(root.value) : root.value;
+  if ("object" === typeof _resolved && null !== _resolved && isArrayImpl(_resolved._debugInfo)) {
+    ${debugInfoVar} = _resolved._debugInfo;
+  }
+}`;
+}
+function patchRsdwClientDebugInfoRecovery(code) {
+  const match = code.match(RSDW_PATCH_RE);
+  if (!match) {
+    return { code, debugInfoVar: null };
+  }
+  return {
+    code: code.replace(match[1], buildPatchReplacement(match[1], match[2])),
+    debugInfoVar: match[2]
+  };
+}
+function performanceTracksOptimizeDepsPlugin() {
+  return {
+    name: "@rangojs/router:performance-tracks-optimize-deps",
+    setup(build) {
+      build.onLoad(
+        {
+          filter: /react-server-dom-webpack-client\.browser\.(development|production)\.js$/
+        },
+        async (args) => {
+          const code = await readFile(args.path, "utf8");
+          const patched = patchRsdwClientDebugInfoRecovery(code);
+          return {
+            contents: patched.code,
+            loader: "js"
+          };
+        }
+      );
+    }
+  };
+}
+function performanceTracksPlugin() {
+  return {
+    name: "@rangojs/router:performance-tracks",
+    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;
+    }
+  };
+}
+
+// src/vite/utils/shared-utils.ts
 var versionEsbuildPlugin = {
   name: "@rangojs/router-version",
   setup(build) {
@@ -2801,7 +2863,7 @@ var versionEsbuildPlugin = {
   }
 };
 var sharedEsbuildOptions = {
-  plugins: [versionEsbuildPlugin]
+  plugins: [versionEsbuildPlugin, performanceTracksOptimizeDepsPlugin()]
 };
 function createVirtualEntriesPlugin(entries, routerPathRef) {
   const virtualModules = {};
@@ -4861,151 +4923,23 @@ ${details}`
   };
 }
 
-// src/vite/plugins/performance-tracks.ts
-import { Module } from "node:module";
-var DEBUG_ID_HEADER = "X-RSC-Debug-Id";
-var DEBUG_S2C_EVENT = "rango:perf-s2c";
-var DEBUG_C2S_EVENT = "rango:perf-c2s";
-var GLOBAL_KEY = "__RANGO_DEBUG_CHANNELS__";
-function getRegistry() {
-  return Module[GLOBAL_KEY] ??= {
-    channels: /* @__PURE__ */ new Map(),
-    sessions: /* @__PURE__ */ new Map()
-  };
-}
-var bytesToBase64 = (bytes) => Buffer.from(bytes).toString("base64");
-var base64ToBytes = (base64) => new Uint8Array(Buffer.from(base64, "base64"));
-function performanceTracksPlugin() {
-  return {
-    name: "@rangojs/router:performance-tracks",
-    // Only configureServer hook — naturally dev-only
-    configureServer(server) {
-      console.log("[perf-tracks] plugin loaded, configureServer called");
-      const hot = server.environments.client.hot;
-      const registry = getRegistry();
-      const sessions = registry.sessions;
-      const sendChunk = (debugId, chunk) => {
-        hot.send(DEBUG_S2C_EVENT, {
-          i: debugId,
-          b: bytesToBase64(chunk)
-        });
-      };
-      const cleanupIfEnded = (debugId, session) => {
-        if (session.pendingChunks || !session.ended) return;
-        sessions.delete(debugId);
-        hot.send(DEBUG_S2C_EVENT, {
-          i: debugId,
-          d: true
-        });
-      };
-      const registerDebugChannel = (debugId) => {
-        let session = sessions.get(debugId);
-        if (!session) {
-          session = { pendingChunks: [], ended: false };
-          sessions.set(debugId, session);
-        }
-        const readable = new ReadableStream({
-          start(controller) {
-            session.cmdController = controller;
-          },
-          cancel() {
-            delete session.cmdController;
-          }
-        });
-        const writable = new WritableStream({
-          write(chunk) {
-            if (session.pendingChunks) {
-              session.pendingChunks.push(chunk);
-            } else {
-              sendChunk(debugId, chunk);
-            }
-          },
-          close() {
-            session.ended = true;
-            cleanupIfEnded(debugId, session);
-          },
-          abort() {
-            session.ended = true;
-            cleanupIfEnded(debugId, session);
-          }
-        });
-        registry.channels.set(debugId, { readable, writable });
-      };
-      hot.on(DEBUG_C2S_EVENT, (raw) => {
-        const payload = raw;
-        const session = sessions.get(payload.i);
-        if (payload.d) {
-          if (session?.cmdController) {
-            try {
-              session.cmdController.close();
-            } catch {
-            }
-            delete session.cmdController;
-          }
-          return;
-        }
-        if (payload.b) {
-          if (session?.cmdController) {
-            try {
-              session.cmdController.enqueue(base64ToBytes(payload.b));
-            } catch {
-              delete session.cmdController;
-            }
-          }
-          return;
-        }
-        if (session) {
-          if (session.pendingChunks) {
-            for (const chunk of session.pendingChunks) {
-              sendChunk(payload.i, chunk);
-            }
-            delete session.pendingChunks;
-          }
-          cleanupIfEnded(payload.i, session);
-        } else {
-          sessions.set(payload.i, { ended: false });
-        }
-      });
-      server.middlewares.use((req, _res, next) => {
-        const url = req.url || "";
-        const existingId = req.headers[DEBUG_ID_HEADER.toLowerCase()];
-        const isHtml = req.headers.accept?.includes("text/html");
-        const isRsc = url.includes("_rsc_partial");
-        if (!existingId && !isHtml && !isRsc) {
-          next();
-          return;
-        }
-        const debugId = existingId || crypto.randomUUID();
-        if (!existingId) {
-          const lowerName = DEBUG_ID_HEADER.toLowerCase();
-          req.headers[lowerName] = debugId;
-          if (req.rawHeaders) {
-            req.rawHeaders.push(DEBUG_ID_HEADER, debugId);
-          }
-        }
-        registerDebugChannel(debugId);
-        console.log(
-          "[perf-tracks] middleware: channel for",
-          debugId,
-          "url:",
-          url.slice(0, 80),
-          existingId ? "(client)" : isHtml ? "(SSR)" : "(RSC partial)"
-        );
-        next();
-      });
-    }
-  };
-}
-
 // src/vite/rango.ts
 async function rango(options) {
   const resolvedOptions = options ?? { preset: "node" };
   const preset = resolvedOptions.preset ?? "node";
-  console.log("[perf-tracks] rango() called, preset:", preset);
   const showBanner = resolvedOptions.banner ?? true;
   const plugins = [];
   const rangoAliases = getPackageAliases();
-  const excludeDeps = getExcludeDeps();
+  const excludeDeps = [
+    ...getExcludeDeps(),
+    // The public browser entry re-exports the RSDW browser client.
+    // Excluding both keeps Vite from freezing the unpatched bundle into
+    // .vite/deps before our source transforms run.
+    "@vitejs/plugin-rsc/browser",
+    // Keep the browser RSDW client out of Vite's dep optimizer so our
+    // cjs-to-esm transform can patch the real file.
+    "@vitejs/plugin-rsc/vendor/react-server-dom/client.browser"
+  ];
   const routerRef = { path: void 0 };
   const prerenderEnabled = true;
   if (preset === "cloudflare") {
@@ -5101,6 +5035,7 @@ async function rango(options) {
       }
     });
     plugins.push(createVirtualEntriesPlugin(finalEntries));
+    plugins.push(performanceTracksPlugin());
     plugins.push(
       rsc({
         entries: finalEntries,
@@ -5219,12 +5154,7 @@ ${list}`);
       }
     });
     plugins.push(createVirtualEntriesPlugin(finalEntries, routerRef));
-    const perfPlugin = performanceTracksPlugin();
-    console.log(
-      "[perf-tracks] rango: plugin created, has configureServer:",
-      !!perfPlugin.configureServer
-    );
-    plugins.push(perfPlugin);
+    plugins.push(performanceTracksPlugin());
     plugins.push(
       rsc({
         entries: finalEntries

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rangojs/router",
-  "version": "0.0.0-experimental.73ab3466",
+  "version": "0.0.0-experimental.73e3d61f",
   "description": "Django-inspired RSC router with composable URL patterns",
   "keywords": [
     "react",
@@ -142,7 +142,7 @@
     "test:unit:watch": "vitest"
   },
   "dependencies": {
-    "@vitejs/plugin-rsc": "^0.5.14",
+    "@vitejs/plugin-rsc": "^0.5.19",
     "magic-string": "^0.30.17",
     "picomatch": "^4.0.3",
     "rsc-html-stream": "^0.0.7"

package/src/browser/app-version.ts

@@ -0,0 +1,14 @@
+/**
+ * Mutable app version — updated after HMR revalidation.
+ * Read by prefetch, navigation, and context code.
+ */
+
+let currentVersion: string | undefined;
+
+export function getAppVersion(): string | undefined {
+  return currentVersion;
+}
+
+export function setAppVersion(version: string | undefined): void {
+  currentVersion = version;
+}

package/src/browser/navigation-bridge.ts

@@ -4,6 +4,7 @@ import type {
   NavigateOptionsInternal,
   ResolvedSegment,
 } from "./types.js";
+import { setAppVersion } from "./app-version.js";
 import * as React from "react";
 import { startTransition } from "react";
 import {
@@ -67,8 +68,8 @@ export interface NavigationBridgeConfigWithController extends NavigationBridgeCo
 export function createNavigationBridge(
   config: NavigationBridgeConfigWithController,
 ): NavigationBridge {
-  const { store, client, eventController, onUpdate, renderSegments, version } =
-    config;
+  const { store, client, eventController, onUpdate, renderSegments } = config;
+  let version = config.version;
 
   // Create shared partial updater
   const fetchPartialUpdate = createPartialUpdater({
@@ -76,7 +77,7 @@ export function createNavigationBridge(
     client,
     onUpdate,
     renderSegments,
-    version,
+    getVersion: () => version,
   });
 
   return {
@@ -632,6 +633,12 @@ export function createNavigationBridge(
         window.removeEventListener("pageshow", handlePageShow);
       };
     },
+
+    updateVersion(newVersion: string): void {
+      version = newVersion;
+      setAppVersion(newVersion);
+      store.clearHistoryCache();
+    },
   };
 }
 

package/src/browser/navigation-client.ts

@@ -12,8 +12,6 @@ import {
   startBrowserTransaction,
 } from "./logging.js";
 import { getRangoState } from "./rango-state.js";
-import { createClientDebugChannel, DEBUG_ID_HEADER } from "./debug-channel.js";
-import { findSourceMapURL } from "../deps/browser.js";
 import {
   extractRscHeaderUrl,
   emptyResponse,
@@ -109,21 +107,53 @@ export function createNavigationClient(
         resolveStreamComplete = resolve;
       });
 
-      // Dev-only: create debug channel for React Performance Tracks
-      const debugId = (import.meta as any).hot
-        ? crypto.randomUUID()
-        : undefined;
-      const debugChannel = debugId
-        ? createClientDebugChannel(debugId)
-        : undefined;
-      if (debugId) {
-        console.log(
-          "[perf-tracks] client: debugId =",
-          debugId,
-          "channel =",
-          debugChannel ? "created" : "null (no HMR)",
-        );
-      }
+      /**
+       * Validate RSC control headers on any response (fresh, cached, or
+       * in-flight). Handles version-mismatch reloads and server redirects.
+       * Returns the response unchanged when no control header is present.
+       */
+      const validateRscHeaders = (
+        response: Response,
+        source: string,
+      ): Response | Promise<Response> => {
+        // Version mismatch — server wants a full page reload
+        const reload = extractRscHeaderUrl(response, "X-RSC-Reload");
+        if (reload === "blocked") {
+          resolveStreamComplete();
+          return emptyResponse();
+        }
+        if (reload) {
+          if (tx) {
+            browserDebugLog(tx, `version mismatch, reloading (${source})`, {
+              reloadUrl: reload.url,
+            });
+          }
+          window.location.href = reload.url;
+          // Block further processing — page is reloading
+          return new Promise<Response>(() => {});
+        }
+
+        // Server-side redirect without state: the server returned 204 with
+        // X-RSC-Redirect instead of a 3xx (which fetch would auto-follow
+        // to a URL rendering full HTML). Throw ServerRedirect so the
+        // navigation bridge catches it and re-navigates with _skipCache.
+        const redirect = extractRscHeaderUrl(response, "X-RSC-Redirect");
+        if (redirect === "blocked") {
+          resolveStreamComplete();
+          return emptyResponse();
+        }
+        if (redirect) {
+          if (tx) {
+            browserDebugLog(tx, `server redirect (${source})`, {
+              redirectUrl: redirect.url,
+            });
+          }
+          resolveStreamComplete();
+          throw new ServerRedirect(redirect.url, undefined);
+        }
+
+        return response;
+      };
 
       /** Start a fresh navigation fetch (no cache / inflight hit). */
       const doFreshFetch = (): Promise<Response> => {
@@ -142,47 +172,14 @@ export function createNavigationClient(
               "X-RSC-Router-Intercept-Source": interceptSourceUrl,
             }),
             ...(hmr && { "X-RSC-HMR": "1" }),
-            ...(debugId && { [DEBUG_ID_HEADER]: debugId }),
           },
           signal,
         }).then((response) => {
-          // Check for version mismatch - server wants us to reload
-          const reload = extractRscHeaderUrl(response, "X-RSC-Reload");
-          if (reload === "blocked") {
-            resolveStreamComplete();
-            return emptyResponse();
-          }
-          if (reload) {
-            if (tx) {
-              browserDebugLog(tx, "version mismatch, reloading", {
-                reloadUrl: reload.url,
-              });
-            }
-            window.location.href = reload.url;
-            return new Promise<Response>(() => {});
-          }
-
-          // Server-side redirect without state: the server returned 204 with
-          // X-RSC-Redirect instead of a 3xx (which fetch would auto-follow
-          // to a URL rendering full HTML). Throw ServerRedirect so the
-          // navigation bridge catches it and re-navigates with _skipCache.
-          const redirect = extractRscHeaderUrl(response, "X-RSC-Redirect");
-          if (redirect === "blocked") {
-            resolveStreamComplete();
-            return emptyResponse();
-          }
-          if (redirect) {
-            if (tx) {
-              browserDebugLog(tx, "server redirect", {
-                redirectUrl: redirect.url,
-              });
-            }
-            resolveStreamComplete();
-            throw new ServerRedirect(redirect.url, undefined);
-          }
+          const validated = validateRscHeaders(response, "fetch");
+          if (validated instanceof Promise) return validated;
 
           return teeWithCompletion(
-            response,
+            validated,
             () => {
               if (tx) browserDebugLog(tx, "stream complete");
               resolveStreamComplete();
@@ -198,11 +195,12 @@ export function createNavigationClient(
         if (tx) {
           browserDebugLog(tx, "prefetch cache hit", { key: cacheKey });
         }
-        // Cached response body is already fully buffered (arrayBuffer),
-        // so stream completion is immediate.
         responsePromise = Promise.resolve(cachedResponse).then((response) => {
+          const validated = validateRscHeaders(response, "prefetch cache");
+          if (validated instanceof Promise) return validated;
+
           return teeWithCompletion(
-            response,
+            validated,
             () => {
               if (tx) browserDebugLog(tx, "stream complete (from cache)");
               resolveStreamComplete();
@@ -222,8 +220,11 @@ export function createNavigationClient(
             return doFreshFetch();
           }
 
+          const validated = validateRscHeaders(response, "inflight prefetch");
+          if (validated instanceof Promise) return validated;
+
           return teeWithCompletion(
-            response,
+            validated,
             () => {
               if (tx) {
                 browserDebugLog(tx, "stream complete (from inflight prefetch)");
@@ -238,13 +239,8 @@ export function createNavigationClient(
       }
 
       try {
-        // Deserialize RSC payload
-        const payload = await deps.createFromFetch<RscPayload>(
-          responsePromise,
-          {
-            ...(debugChannel && { debugChannel, findSourceMapURL }),
-          },
-        );
+        const payload = await deps.createFromFetch<RscPayload>(responsePromise);
+
         if (tx) {
           browserDebugLog(tx, "response received", {
             isPartial: payload.metadata?.isPartial,

package/src/browser/partial-update.ts

@@ -39,8 +39,8 @@ export interface PartialUpdateConfig {
     segments: ResolvedSegment[],
     options?: RenderSegmentsOptions,
   ) => Promise<ReactNode> | ReactNode;
-  /** RSC version received from server (from initial payload metadata) */
-  version?: string;
+  /** RSC version getter — returns the current version (may change after HMR) */
+  getVersion?: () => string | undefined;
 }
 
 /**
@@ -104,7 +104,13 @@ export type PartialUpdater = (
 export function createPartialUpdater(
   config: PartialUpdateConfig,
 ): PartialUpdater {
-  const { store, client, onUpdate, renderSegments, version } = config;
+  const {
+    store,
+    client,
+    onUpdate,
+    renderSegments,
+    getVersion = () => undefined,
+  } = config;
 
   /**
    * Get current page's cached segments as an array
@@ -193,7 +199,7 @@ export function createPartialUpdater(
       // (action redirect sends empty segments for a fresh render).
       staleRevalidation:
         mode.type === "stale-revalidation" || segments.length === 0,
-      version,
+      version: getVersion(),
     });
     // Mark navigation as streaming (response received, now parsing RSC).
     // Called after fetchPartial so pendingUrl stays set during the network wait,

package/src/browser/react/Link.tsx

@@ -32,6 +32,7 @@ export type LinkState =
   | StateOrGetter<Record<string, unknown>>;
 
 import { prefetchDirect, prefetchQueued } from "../prefetch/fetch.js";
+import { getAppVersion } from "../app-version.js";
 import {
   observeForPrefetch,
   unobserveForPrefetch,
@@ -289,7 +290,7 @@ export const Link: ForwardRefExoticComponent<
       // prefetch — prefetchDirect bypasses the queue, and hasPrefetch
       // deduplicates if the viewport prefetch already completed.
       const segmentState = ctx.store.getSegmentState();
-      prefetchDirect(to, segmentState.currentSegmentIds, ctx.version);
+      prefetchDirect(to, segmentState.currentSegmentIds, getAppVersion());
     }
   }, [resolvedStrategy, to, isExternal, ctx]);
 
@@ -308,7 +309,7 @@ export const Link: ForwardRefExoticComponent<
     const triggerPrefetch = () => {
       if (cancelled) return;
       const segmentState = ctx.store.getSegmentState();
-      prefetchQueued(to, segmentState.currentSegmentIds, ctx.version);
+      prefetchQueued(to, segmentState.currentSegmentIds, getAppVersion());
     };
 
     // Schedule prefetch only when the app is idle (no navigation/streaming).

package/src/browser/react/NavigationProvider.tsx

@@ -134,7 +134,7 @@ export interface NavigationProviderProps {
 
   /**
    * App version from server payload (stable, immutable).
-   * Forwarded to prefetch requests for version mismatch detection.
+   * Forwarded to context for cache key building.
    */
   version?: string;
 }

package/src/browser/react/context.ts

@@ -43,8 +43,7 @@ export interface NavigationStoreContextValue {
   refresh: () => Promise<void>;
 
   /**
-   * App version from server payload (stable, immutable).
-   * Used in prefetch requests for version mismatch detection.
+   * App version from the initial server payload.
    */
   version: string | undefined;
 }

package/src/browser/react/use-router.ts

@@ -3,6 +3,7 @@
 import { useContext, useMemo } from "react";
 import { NavigationStoreContext } from "./context.js";
 import { prefetchDirect } from "../prefetch/fetch.js";
+import { getAppVersion } from "../app-version.js";
 import type { RouterInstance, RouterNavigateOptions } from "../types.js";
 
 /**
@@ -46,7 +47,7 @@ export function useRouter(): RouterInstance {
       prefetch(url: string): void {
         const segmentState = ctx.store?.getSegmentState();
         if (segmentState) {
-          prefetchDirect(url, segmentState.currentSegmentIds, ctx.version);
+          prefetchDirect(url, segmentState.currentSegmentIds, getAppVersion());
         }
       },