@rangojs/router 0.0.0-experimental.32 → 0.0.0-experimental.3232cd17

package/src/vite/plugins/vercel-output.ts

@@ -0,0 +1,258 @@
+/**
+ * Vercel Build Output (Build Output API v3) emitter for `preset: "vercel"`.
+ *
+ * After the full app build, restructures dist/ into .vercel/output:
+ *
+ *   .vercel/output/
+ *     config.json                       routing: static first, else the function
+ *     static/                           dist/client (browser assets, served at /)
+ *     functions/<name>.func/
+ *       .vc-config.json                 Node serverless, response streaming
+ *       index.mjs                       bundled launcher (srvx + @vercel/functions)
+ *       rsc/                            dist/rsc (self-contained RSC server bundle)
+ *       ssr/                            dist/ssr (rsc imports ../ssr/index.js)
+ *
+ * A prebuilt .vercel/output gets no `npm install`, so everything the function
+ * imports must physically live inside the .func directory. This relies on two
+ * things the vercel preset arranges (each is a failure only a real deploy — or
+ * the isolated smoke test — catches, since a local in-place run is masked by the
+ * app's own package.json + node_modules up the tree):
+ *
+ *   1. The rsc/ssr builds are fully bundled (`resolve.noExternal`, set in
+ *      rango.ts for this preset). The node default externalizes node_modules
+ *      deps, which works under `vite preview` but leaves bare imports
+ *      (@vercel/functions, react-dom/server.edge, ...) that have no node_modules
+ *      to resolve against on Vercel.
+ *   2. A `package.json` with `"type": "module"` is written into the .func dir.
+ *      The rsc/ssr bundles are ESM but use a `.js` extension; without a
+ *      type:module in scope the deployed (isolated) function loads them as
+ *      CommonJS and fails on the first `import`.
+ *
+ * The launcher is bundled with srvx (the Web->Node streaming bridge, a
+ * @rangojs/router dependency) and @vercel/functions (resolved from the app)
+ * inlined, keeping the RSC bundle a runtime-relative external.
+ *
+ * Timing: this runs in the `buildApp` hook (order "post"), which fires once
+ * after every environment has built, so dist/{client,rsc,ssr} all exist.
+ * closeBundle is unusable here — it fires per environment, and twice for ssr
+ * (the server-reference scan and the real build), so it would run before
+ * dist/client exists. rango's own prerender/static emitters hardcode dist/rsc,
+ * so we build to dist/ and restructure here rather than retargeting outDir.
+ */
+
+import type { Plugin } from "vite";
+import { rm, mkdir, cp, writeFile } from "node:fs/promises";
+import { existsSync } from "node:fs";
+import { resolve, join } from "node:path";
+import { createRequire } from "node:module";
+import { pathToFileURL } from "node:url";
+import type { RangoVercelOptions } from "../plugin-types.js";
+
+// Minimal structural types for the esbuild API we use, resolved dynamically from
+// the app so @rangojs/router does not depend on esbuild's type package.
+interface EsbuildPluginBuild {
+  onResolve(
+    options: { filter: RegExp },
+    callback: () => { path: string; external: boolean },
+  ): void;
+}
+type EsbuildBuild = (options: Record<string, unknown>) => Promise<unknown>;
+interface EsbuildModule {
+  build?: EsbuildBuild;
+  default?: { build?: EsbuildBuild };
+}
+
+const LAUNCHER_SOURCE = `import { toNodeHandler } from "srvx/node";
+import { waitUntil } from "@vercel/functions";
+import rscHandler from "./rsc/index.js";
+
+// The Vercel Node launcher invokes a Node (req, res) handler, not a Web fetch
+// handler. srvx's toNodeHandler bridges the Rango Web fetch handler and pipes
+// the streamed Response to the Node response (set supportsResponseStreaming).
+const onVercel = Boolean(process.env.VERCEL);
+
+const fetchHandler = (request) =>
+  rscHandler(request, {
+    env: process.env,
+    // Forward Vercel's waitUntil so cache writes / revalidation run off the
+    // response path. Omitted off-platform so those writes settle inline.
+    ctx: onVercel ? { waitUntil } : undefined,
+  });
+
+export default toNodeHandler(fetchHandler);
+`;
+
+async function assemble(
+  root: string,
+  options: RangoVercelOptions,
+): Promise<void> {
+  const dist = join(root, "dist");
+  for (const dir of ["client", "rsc", "ssr"]) {
+    if (!existsSync(join(dist, dir))) {
+      throw new Error(
+        `[rango] preset "vercel": missing dist/${dir}. Run the production build first.`,
+      );
+    }
+  }
+
+  const vercel = options.vercel ?? {};
+  const functionName = vercel.functionName ?? "index";
+  const out = join(root, ".vercel", "output");
+  const funcDir = join(out, "functions", `${functionName}.func`);
+
+  await rm(out, { recursive: true, force: true });
+  await mkdir(funcDir, { recursive: true });
+
+  // 1. Static client assets -> served from the CDN at the root.
+  await cp(join(dist, "client"), join(out, "static"), { recursive: true });
+
+  // 2. Server bundle into the function. Preserve the rsc -> ../ssr/index.js
+  //    relative import by mirroring the dist/{rsc,ssr} layout inside the func.
+  await cp(join(dist, "rsc"), join(funcDir, "rsc"), { recursive: true });
+  await cp(join(dist, "ssr"), join(funcDir, "ssr"), { recursive: true });
+
+  // Prerender/static payload manifests (present only when routes are prerendered).
+  if (existsSync(join(dist, "static"))) {
+    await cp(join(dist, "static"), join(funcDir, "static"), {
+      recursive: true,
+    });
+  }
+
+  // 3. Bundle the Node launcher. srvx (a @rangojs/router dependency) is aliased
+  //    to its resolved path; @vercel/functions resolves from the app; the RSC
+  //    server bundle stays a runtime-relative external.
+  const rangoRequire = createRequire(import.meta.url);
+  let srvxNodePath: string;
+  try {
+    srvxNodePath = rangoRequire.resolve("srvx/node");
+  } catch {
+    throw new Error(
+      '[rango] preset "vercel" requires "srvx" (a dependency of @rangojs/router). Reinstall dependencies.',
+    );
+  }
+
+  // esbuild ships with Vite; resolve it from the app so we never add it as a
+  // @rangojs/router dependency. Minimal structural types avoid coupling to
+  // esbuild's type package at compile time.
+  const appRequire = createRequire(join(root, "package.json"));
+  let esbuildModule: EsbuildModule;
+  try {
+    esbuildModule = (await import(
+      pathToFileURL(appRequire.resolve("esbuild")).href
+    )) as EsbuildModule;
+  } catch {
+    throw new Error(
+      '[rango] preset "vercel" requires "esbuild" to bundle the function launcher. It ships with Vite; reinstall dependencies.',
+    );
+  }
+  const esbuildBuild = esbuildModule.build ?? esbuildModule.default?.build;
+  if (typeof esbuildBuild !== "function") {
+    throw new Error('[rango] preset "vercel": could not load esbuild.build.');
+  }
+
+  try {
+    await esbuildBuild({
+      stdin: {
+        contents: LAUNCHER_SOURCE,
+        resolveDir: root,
+        sourcefile: "func-entry.mjs",
+        loader: "js",
+      },
+      outfile: join(funcDir, "index.mjs"),
+      bundle: true,
+      format: "esm",
+      platform: "node",
+      target: "node18",
+      alias: { "srvx/node": srvxNodePath },
+      plugins: [
+        {
+          name: "external-rsc-entry",
+          setup(b: EsbuildPluginBuild) {
+            b.onResolve({ filter: /^\.\/rsc\/index\.js$/ }, () => ({
+              path: "./rsc/index.js",
+              external: true,
+            }));
+          },
+        },
+      ],
+    });
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    if (/@vercel\/functions/.test(message)) {
+      throw new Error(
+        '[rango] preset "vercel": could not resolve "@vercel/functions". Add it to your app dependencies (it also backs VercelCacheStore).\n' +
+          message,
+      );
+    }
+    throw error;
+  }
+
+  // 3b. Mark the function as ESM. The rsc/ssr bundles are .js ESM files with no
+  //     package.json in scope on the deployed function (it is isolated at
+  //     /var/task), so Node would load them as CommonJS and fail on `import`.
+  //     Locally this is masked because the func inherits the app's
+  //     "type": "module" up the tree; the deployed func has nothing above it.
+  await writeFile(
+    join(funcDir, "package.json"),
+    JSON.stringify({ type: "module" }, null, 2) + "\n",
+  );
+
+  // 4. Function config: Node serverless with response streaming.
+  const vcConfig: Record<string, unknown> = {
+    runtime: vercel.runtime ?? "nodejs22.x",
+    handler: "index.mjs",
+    launcherType: "Nodejs",
+    shouldAddHelpers: false,
+    supportsResponseStreaming: true,
+    maxDuration: vercel.maxDuration ?? 30,
+  };
+  if (vercel.memory != null) vcConfig.memory = vercel.memory;
+  if (vercel.regions != null) vcConfig.regions = vercel.regions;
+  await writeFile(
+    join(funcDir, ".vc-config.json"),
+    JSON.stringify(vcConfig, null, 2) + "\n",
+  );
+
+  // 5. Routing: filesystem (static/) first, then everything to the function.
+  await writeFile(
+    join(out, "config.json"),
+    JSON.stringify(
+      {
+        version: 3,
+        routes: [
+          { handle: "filesystem" },
+          { src: "/(.*)", dest: `/${functionName}` },
+        ],
+      },
+      null,
+      2,
+    ) + "\n",
+  );
+
+  console.log(
+    `[rango] assembled .vercel/output (function: ${functionName}.func)`,
+  );
+}
+
+export function createVercelOutputPlugin(options: RangoVercelOptions): Plugin {
+  let root = process.cwd();
+  let isBuild = false;
+  return {
+    name: "@rangojs/router:vercel-output",
+    configResolved(config) {
+      root = resolve(config.root);
+      isBuild = config.command === "build";
+    },
+    // buildApp runs once after the whole multi-environment build (rsc, client,
+    // ssr), so dist/ is complete here. closeBundle is unusable for this: it
+    // fires per environment, and twice for ssr (the server-reference scan and
+    // the real build), so it would run before dist/client exists.
+    buildApp: {
+      order: "post",
+      async handler() {
+        if (!isBuild) return;
+        await assemble(root, options);
+      },
+    },
+  };
+}

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);
       }
@@ -39,7 +29,6 @@ export function createVersionInjectorPlugin(
 
     transform(code, id) {
       if (!resolvedEntryPath) return null;
-      // Only transform the RSC entry file
       const normalizedId = Vite.normalizePath(id);
       const normalizedEntry = Vite.normalizePath(resolvedEntryPath);
 
@@ -47,16 +36,11 @@ 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";`);
-      }
+      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 +54,21 @@ export function createVersionInjectorPlugin(
         );
       }
 
-      if (prepend.length === 0 && newCode === code) return null;
-
-      newCode = prepend.join("\n") + (prepend.length > 0 ? "\n" : "") + newCode;
+      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,11 +133,13 @@ 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;
   const bumpVersion = (reason: string) => {
-    currentVersion = Date.now().toString(16);
-    console.log(`[rsc-router] ${reason}, version updated: ${currentVersion}`);
+    currentVersion = Date.now().toString(16) + String(++versionCounter);
+    console.log(`[rango] ${reason}, version updated: ${currentVersion}`);
 
     const rscEnv = server?.environments?.rsc;
     const versionMod = rscEnv?.moduleGraph?.getModuleById(
@@ -154,6 +156,9 @@ export function createVersionPlugin(): Plugin {
 
     configResolved(config) {
       isDev = config.command === "serve";
+      resolvedCacheDir = config.cacheDir
+        ? String(config.cacheDir).replace(/\\/g, "/")
+        : undefined;
     },
 
     configureServer(devServer) {
@@ -200,17 +205,22 @@ export function createVersionPlugin(): Plugin {
       return null;
     },
 
-    // Track RSC module changes and update version
     async hotUpdate(ctx) {
       if (!isDev) return;
 
-      // Check if this is an RSC environment update (not client/ssr)
-      // RSC modules affect server-rendered content and cached payloads
-      // In Vite 6, environment is accessed via `this.environment`
       const isRscModule = this.environment?.name === "rsc";
 
       if (!isRscModule) return;
 
+      if (isViteDepCachePath(ctx.file, resolvedCacheDir)) return;
+
+      if (
+        ctx.modules.length === 1 &&
+        ctx.modules[0].id === "\0" + VIRTUAL_IDS.version
+      ) {
+        return;
+      }
+
       if (isCodeModule(ctx.file)) {
         const filePath = normalizeModuleId(ctx.file);
         const previousSignature = clientModuleSignatures.get(filePath);
@@ -218,9 +228,6 @@ export function createVersionPlugin(): Plugin {
           const source = await ctx.read();
           const nextSignature = getClientModuleSignature(source);
           if (nextSignature) {
-            // "use client" file — compare export signatures.
-            // client-component-hmr may have cleared ctx.modules, so we
-            // cannot rely on ctx.modules.length for these files.
             clientModuleSignatures.set(filePath, nextSignature);
             if (
               previousSignature &&
@@ -231,20 +238,11 @@ export function createVersionPlugin(): Plugin {
           } else {
             clientModuleSignatures.delete(filePath);
             if (!previousSignature) {
-              // Not and never was "use client" — use module graph check.
-              // ctx.modules is reliable for pure server files (only
-              // client-component-hmr clears it for "use client" modules).
               if (ctx.modules.length === 0) return;
             }
-            // Was "use client" but directive removed — boundary changed,
-            // bump below.
           }
-        } catch {
-          // Fail open: if we can't read or parse the update, invalidate.
-        }
+        } catch {}
       } else {
-        // Non-code file (json, css, etc.) — only bump if it's actually
-        // referenced by the RSC module graph.
         if (ctx.modules.length === 0) return;
       }
 
@@ -252,3 +250,26 @@ export function createVersionPlugin(): Plugin {
     },
   };
 }
+
+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;
+    }
+  }
+
+  return (
+    /\/node_modules\/\.vite[^/]*\//.test(normalized) ||
+    normalized.includes("/.vite-isolated/")
+  );
+}

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

@@ -1,8 +1,3 @@
-/**
- * Default virtual entry file contents for rsc-router.
- * These are used when users don't provide their own entry files.
- */
-
 export const VIRTUAL_ENTRY_BROWSER: string = `
 import {
   createFromReadableStream,
@@ -14,7 +9,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 +24,7 @@ async function initializeApp() {
 
   hydrateRoot(
     document,
-    createElement(StrictMode, null, createElement(RSCRouter))
+    createElement(StrictMode, null, createElement(Rango))
   );
 }
 
@@ -51,9 +46,6 @@ export const renderHTML = createSSRHandler({
 });
 `.trim();
 
-/**
- * Generate the RSC entry content with the specified router path
- */
 export function getVirtualEntryRSC(routerPath: string): string {
   return `
 import {
@@ -104,9 +96,6 @@ export default function handler(request, env) {
 `.trim();
 }
 
-/**
- * Virtual module IDs
- */
 export const VIRTUAL_IDS = {
   browser: "virtual:rsc-router/entry.browser.js",
   ssr: "virtual:rsc-router/entry.ssr.js",
@@ -114,10 +103,6 @@ export const VIRTUAL_IDS = {
   version: "@rangojs/router:version",
 } as const;
 
-/**
- * Virtual module content for version.
- * Exports VERSION - a timestamp that changes on server restart (dev) or at build time (production).
- */
 export function getVirtualVersionContent(version: string): string {
   return `export const VERSION = ${JSON.stringify(version)};`;
 }