vite-plugin-react-server 1.3.6 → 1.4.1

package/plugin/react-static/renderPagesBatched.ts

@@ -10,6 +10,8 @@ import type { RenderPagesFn, RenderPageFn, RenderPagesHandlerOptions } from "./t
 import { handleError } from "../error/handleError.js";
 import { fileWriter } from "./fileWriter.js";
 import type { Manifest } from "vite";
+import { createRenderMetrics } from "../metrics/createRenderMetrics.js";
+import { createStreamMetrics } from "../metrics/createStreamMetrics.js";
 
 const DEFAULT_BATCH_SIZE = 8;
 
@@ -23,13 +25,15 @@ function resolvePathWithManifest(path: string, manifest: Manifest): string {
 
 /**
  * Renders a single route completely, consuming all yields from renderPage
- * and writing the RSC and HTML files
+ * and writing the RSC and HTML files. Collects metrics and handles events
+ * identically to the sequential renderPages.
  */
 async function renderSingleRoute(
   route: string,
   handlerOptions: RenderPagesHandlerOptions,
   renderPage: RenderPageFn,
   manifest: Manifest,
+  failedRoutes: Map<string, unknown>,
 ): Promise<{ route: string; results: RenderPageResult[]; error?: Error }> {
   const { autoDiscoveredFiles, cssFilesByPage, ...options } = handlerOptions;
   const { page, props, root, html } = autoDiscoveredFiles.urlMap?.get(route) || {};
@@ -44,6 +48,131 @@ async function renderSingleRoute(
     const resolvedRootPath = root ? resolvePathWithManifest(root, manifest) : undefined;
     const resolvedHtmlPath = html ? resolvePathWithManifest(html, manifest) : undefined;
 
+    // Store results for metrics tracking
+    const routeResults = new Map<string, RenderPageResult>();
+
+    // Create onEvent wrapper that handles route.error and metrics collection
+    // This mirrors the sequential renderPages behavior exactly
+    const wrapperOnEvent = (event: any) => {
+      // Call the original onEvent first
+      if (options.onEvent) {
+        options.onEvent(event);
+      }
+
+      // Handle route.error events
+      if (event.type === "route.error") {
+        const detectedPanicError = handleError({
+          error: event.data.error,
+          logger: options.logger,
+          panicThreshold: event.data.panicThreshold,
+          context: `route.error (${event.data.route})`,
+        });
+        
+        if (detectedPanicError != null) {
+          options.logger?.error(
+            `[renderPagesBatched] Panic error for route ${event.data.route}: ${event.data.error.message}`
+          );
+          failedRoutes.set(event.data.route, event.data.error);
+        } else {
+          options.logger?.warn(
+            `[renderPagesBatched] Non-panic error for route ${event.data.route}: ${event.data.error.message}`
+          );
+        }
+      }
+
+      // Handle metrics collection on file.write.done
+      if (event.type === "file.write.done" && event.data.route === route) {
+        const routeResult = routeResults.get(route);
+        if (routeResult && routeResult.type === "success") {
+          if (event.data.fileType === "html") {
+            const endTime = performance.now();
+            const htmlMetrics = createRenderMetrics({
+              route: route,
+              type: routeResult.metrics.html.type,
+              fromMainThread: routeResult.metrics.html.fromMainThread,
+              fromRscWorker: routeResult.metrics.html.fromRscWorker,
+              fromHtmlWorker: routeResult.metrics.html.fromHtmlWorker,
+              fileSize: event.data.content.length,
+              chunks: event.data.chunks || 0,
+              processingTime: endTime - routeResult.metrics.html.streamMetrics.startTime,
+              chunkRate: (event.data.chunks || 0) / ((endTime - routeResult.metrics.html.streamMetrics.startTime) / 1000),
+              fileName: event.data.fileName,
+              outputPath: event.data.path,
+              baseDir: event.data.baseDir,
+              routePath: event.data.routePath,
+              streamMetrics: createStreamMetrics({
+                ...routeResult.metrics.html.streamMetrics,
+                chunks: event.data.chunks || 0,
+                bytes: event.data.content.length,
+                duration: endTime - routeResult.metrics.html.streamMetrics.startTime,
+                endTime: endTime,
+              }),
+            });
+
+            if (options.onMetrics) {
+              options.onMetrics(htmlMetrics);
+            }
+
+            // Also emit RSC Full metrics if available
+            if (routeResult.metrics?.rscFull) {
+              const rscFullEndTime = performance.now();
+              const rscFullMetrics = createRenderMetrics({
+                route: route,
+                type: routeResult.metrics.rscFull.type,
+                fromMainThread: routeResult.metrics.rscFull.fromMainThread,
+                fromRscWorker: routeResult.metrics.rscFull.fromRscWorker,
+                fromHtmlWorker: routeResult.metrics.rscFull.fromHtmlWorker,
+                processingTime: rscFullEndTime - routeResult.metrics.rscFull.streamMetrics.startTime,
+                chunks: routeResult.metrics.rscFull.streamMetrics.chunks,
+                chunkRate: routeResult.metrics.rscFull.streamMetrics.chunks / ((rscFullEndTime - routeResult.metrics.rscFull.streamMetrics.startTime) / 1000),
+                fileName: event.data.fileName,
+                outputPath: event.data.path,
+                baseDir: event.data.baseDir,
+                routePath: event.data.routePath,
+                streamMetrics: createStreamMetrics({
+                  ...routeResult.metrics.rscFull.streamMetrics,
+                  duration: rscFullEndTime - routeResult.metrics.rscFull.streamMetrics.startTime,
+                  endTime: rscFullEndTime,
+                }),
+              });
+
+              if (options.onMetrics) {
+                options.onMetrics(rscFullMetrics);
+              }
+            }
+          } else if (event.data.fileType === "rsc") {
+            const rscEndTime = performance.now();
+            const rscMetrics = createRenderMetrics({
+              route: route,
+              type: routeResult.metrics.rscHeadless.type,
+              fromMainThread: routeResult.metrics.rscHeadless.fromMainThread,
+              fromRscWorker: routeResult.metrics.rscHeadless.fromRscWorker,
+              fromHtmlWorker: routeResult.metrics.rscHeadless.fromHtmlWorker,
+              fileSize: event.data.content.length,
+              chunks: event.data.chunks || 0,
+              processingTime: rscEndTime - routeResult.metrics.rscHeadless.streamMetrics.startTime,
+              chunkRate: (event.data.chunks || 0) / ((rscEndTime - routeResult.metrics.rscHeadless.streamMetrics.startTime) / 1000),
+              fileName: event.data.fileName,
+              outputPath: event.data.path,
+              baseDir: event.data.baseDir,
+              routePath: event.data.routePath,
+              streamMetrics: createStreamMetrics({
+                ...routeResult.metrics.rscHeadless.streamMetrics,
+                chunks: event.data.chunks || 0,
+                bytes: event.data.content.length,
+                duration: rscEndTime - routeResult.metrics.rscHeadless.streamMetrics.startTime,
+                endTime: rscEndTime,
+              }),
+            });
+
+            if (options.onMetrics) {
+              options.onMetrics(rscMetrics);
+            }
+          }
+        }
+      }
+    };
+
     const routeHandlerOptions = {
       ...options,
       manifest,
@@ -55,6 +184,7 @@ async function renderSingleRoute(
       cssFiles: cssFilesByPage?.get(route) ?? new Map(),
       globalCss: options.globalCss ?? new Map(),
       id: `${route}-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
+      onEvent: wrapperOnEvent,
     };
 
     const pageRenderer = renderPage(routeHandlerOptions);
@@ -65,24 +195,25 @@ async function renderSingleRoute(
     for await (const result of pageRenderer) {
       results.push(result);
       
-      // Track error results
       if (result.type === "error" && result.error) {
         routeError = result.error instanceof Error ? result.error : new Error(String(result.error));
       }
       
-      // Write files for success and skip results
-      if ((result.type === "success" || result.type === "skip") && result.html && result.rsc) {
+      if (result.type === "success" || result.type === "skip") {
+        // Store result for metrics tracking (wrapperOnEvent needs this)
+        routeResults.set(route, result);
+
         const rscWritePromise = fileWriter(
           result.rsc as any,
           "rsc",
-          { ...options, route, logger: options.logger },
+          { ...options, route, onEvent: wrapperOnEvent, logger: options.logger },
           options.signal
         );
 
         const htmlWritePromise = fileWriter(
           result.html as any,
           "html",
-          { ...options, route, logger: options.logger },
+          { ...options, route, onEvent: wrapperOnEvent, logger: options.logger },
           options.signal
         );
 
@@ -90,7 +221,6 @@ async function renderSingleRoute(
       }
     }
 
-    // Return error if any result was an error
     if (routeError) {
       return { route, results, error: routeError };
     }
@@ -173,7 +303,7 @@ export const renderPagesBatched: RenderPagesFn = (
 
       // Render all pages in this batch concurrently
       const batchPromises = batch.map(route => 
-        renderSingleRoute(route, handlerOptions, renderPage, manifest)
+        renderSingleRoute(route, handlerOptions, renderPage, manifest, failedRoutes)
       );
 
       const batchResults = await Promise.all(batchPromises);
@@ -191,13 +321,22 @@ export const renderPagesBatched: RenderPagesFn = (
           if (panicError != null) {
             failedRoutes.set(route, error);
             options.logger?.error(`[renderPagesBatched] Panic error for route ${route}: ${error.message}`);
+            const errorResult: RenderPagesResult = {
+              type: "error",
+              error,
+              route,
+              failedRoutes,
+              completedRoutes,
+              results,
+            };
+            yield errorResult;
+            return errorResult;
           } else {
             options.logger?.warn(`[renderPagesBatched] Non-panic error for route ${route}: ${error.message}`);
           }
         } else {
           completedRoutes.add(route);
           
-          // Yield each result from this page
           for (const result of pageResults) {
             if (result.type === "success" || result.type === "skip") {
               results.set(route, result);
@@ -220,36 +359,6 @@ export const renderPagesBatched: RenderPagesFn = (
       }
     }
 
-    // Check if we should panic based on failed routes
-    if (failedRoutes.size > 0) {
-      const firstError = Array.from(failedRoutes.values())[0];
-      const panicError = handleError({
-        error: firstError,
-        logger: options.logger,
-        panicThreshold: options.panicThreshold,
-        context: `renderPagesBatched final check`,
-      });
-
-      if (panicError != null) {
-        if (options.verbose) {
-          options.logger?.error(
-            `[renderPagesBatched] Build failed due to panic threshold: ${failedRoutes.size} routes failed`
-          );
-        }
-        // Yield error before returning
-        const errorResult: RenderPagesResult = {
-          type: "error",
-          error: panicError,
-          route: "",
-          failedRoutes,
-          completedRoutes,
-          results,
-        };
-        yield errorResult;
-        return errorResult;
-      }
-    }
-
     // Final success result
     const finalResult: RenderPagesResult = {
       type: "success",

package/plugin/react-static/types.ts

@@ -133,6 +133,7 @@ export type RenderPagesHandlerOptions = Omit<
   cssFilesByPage: Map<string, Map<string, CssContent>>;
   serverPipeableStreamOptions: any;
   staticManifest?: Manifest; // Static manifest for consistent module IDs
+  batchSize?: number; // Concurrency for parallel rendering
 };
 
 export type RenderPagesFn = (

package/plugin/types.ts

@@ -1102,6 +1102,21 @@ export type BuildConfig = {
   rscExtension?: string;
   cssModuleExtension?: string;
   nodeExtension?: string;
+  /**
+   * Controls how pages are rendered during static generation.
+   *
+   * - `"parallel"` (default): Renders pages in concurrent batches for faster builds.
+   *   Use `batchSize` to control concurrency (default: 8).
+   * - `"sequential"`: Renders pages one at a time. Slower but uses less memory
+   *   and produces deterministic output order.
+   */
+  renderMode?: "parallel" | "sequential";
+  /**
+   * Number of pages to render concurrently when `renderMode` is `"parallel"`.
+   * Higher values use more memory but build faster.
+   * @default 8
+   */
+  batchSize?: number;
 };
 
 export type DevConfig = {

package/plugin/vendor/register-vendor.ts

@@ -35,7 +35,7 @@ register("data:text/javascript," + encodeURIComponent(`
     "react-server-dom-esm/client.node":    join(ossDir, "client.node.js"),
     "react-server-dom-esm/server":         join(ossDir, "esm", "react-server-dom-esm-server.node.js"),
     "react-server-dom-esm/server.node":    join(ossDir, "esm", "react-server-dom-esm-server.node.js"),
-    "react-server-dom-esm/static":         join(ossDir, "static.js"),
+    "react-server-dom-esm/static":         join(ossDir, "static.node.js"),
     "react-server-dom-esm/static.node":    join(ossDir, "static.node.js"),
   };
 

package/plugin/vendor/vendor-alias.ts

@@ -1,7 +1,7 @@
 import type { Plugin } from "vite";
 import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
-import { existsSync } from "node:fs";
+import { existsSync, lstatSync, readlinkSync, symlinkSync, unlinkSync } from "node:fs";
 
 // Find package root by walking up from current file until we find oss-experimental/
 // Works from both plugin/vendor/ (source) and dist/plugin/vendor/ (built)
@@ -23,12 +23,13 @@ const ossDir = join(pkgRoot, "oss-experimental");
  * install `react-server-dom-esm` separately or use patch-package.
  *
  * Browser client entries use true ESM files for Rollup tree-shaking.
- * Server/static entries are marked external during builds — they're CJS
- * modules loaded at runtime via createRequire in vendor.*.ts files.
+ * Server/static entries are CJS and must be loadable via native Node import()
+ * (not eval'd as ESM by Vite's module runner, which lacks require()).
+ *
+ * In dev mode, we ensure the vendored package is reachable from node_modules
+ * so Vite's module runner can externalize and natively import() CJS entries.
  */
 export function vitePluginVendorAlias(): Plugin {
-  let isBuild = false;
-
   return {
     name: "vite-plugin-react-server:vendor-alias",
     enforce: "pre",
@@ -36,17 +37,16 @@ export function vitePluginVendorAlias(): Plugin {
     config(_config, env) {
       const pkg = join(ossDir, "react-server-dom-esm");
       const isProd = env.mode === "production";
-      
-      // Only alias browser client to ESM for Rollup tree-shaking.
-      // Server/static are handled by resolveId with external:true.
+
       return {
         resolve: {
           alias: [
-            { 
-              find: "react-server-dom-esm/client.browser", 
-              replacement: join(pkg, "esm", isProd 
-                ? "react-server-dom-esm-client.browser.production.js" 
-                : "react-server-dom-esm-client.browser.development.js") 
+            // Browser client → ESM for Rollup tree-shaking
+            {
+              find: "react-server-dom-esm/client.browser",
+              replacement: join(pkg, "esm", isProd
+                ? "react-server-dom-esm-client.browser.production.js"
+                : "react-server-dom-esm-client.browser.development.js")
             },
           ],
         },
@@ -54,42 +54,67 @@ export function vitePluginVendorAlias(): Plugin {
     },
 
     configResolved(config) {
-      isBuild = config.command === "build";
+      // Allow serving vendored files when the plugin is linked or in a monorepo.
+      // Must be done in configResolved to append to the resolved allow list
+      // (setting in config hook can override Vite's defaults).
+      if (config.command === "serve" && config.server?.fs?.allow) {
+        if (!config.server.fs.allow.includes(pkgRoot)) {
+          config.server.fs.allow.push(pkgRoot);
+        }
+      }
+
+      // Ensure vendored package is reachable via Node resolution in ALL Vite
+      // contexts (dev server, vitest, SSR workers, custom scripts).
+      // Vite's module runner resolves bare imports via Node — not plugin hooks —
+      // so the package must be in node_modules for CJS entries to work.
+      ensureVendoredPackageLinked(config.root);
     },
 
     resolveId(source) {
-      // Only handle react-server-dom-esm specifiers (not already aliased paths)
-      if (!source.startsWith("react-server-dom-esm")) {
-        return;
-      }
-
-      // Skip client.browser — handled by config alias above
-      if (source === "react-server-dom-esm/client.browser") {
-        return;
-      }
+      if (!source.startsWith("react-server-dom-esm")) return;
+      if (source === "react-server-dom-esm/client.browser") return;
 
-      // For server/static entries during build: mark external with resolved path.
-      // At runtime, vendor.*.ts uses createRequire to load from this path.
-      if (isBuild && isServerEntry(source)) {
-        const resolved = resolveVendored(source);
-        return { id: resolved, external: true };
+      // Server/static entries: mark external so the runner/bundler uses native
+      // import() rather than eval(). The resolved path points into the vendored
+      // copy (reachable via symlink in dev, directly in build).
+      if (isServerEntry(source)) {
+        return { id: resolveVendored(source), external: true };
       }
 
-      // For all other entries (client.node, client, index), resolve to vendored path
       return resolveVendored(source);
     },
   };
 }
 
+/**
+ * Ensure `node_modules/react-server-dom-esm` links to the vendored copy.
+ * Only creates a symlink if no real install exists. Safe to call multiple times.
+ */
+function ensureVendoredPackageLinked(root?: string): void {
+  const pkg = join(ossDir, "react-server-dom-esm");
+  const target = join(root ?? process.cwd(), "node_modules", "react-server-dom-esm");
+  try {
+    const stat = (() => { try { return lstatSync(target); } catch { return null; } })();
+    if (stat?.isSymbolicLink()) {
+      // Update symlink if it points elsewhere
+      if (readlinkSync(target) !== pkg) {
+        unlinkSync(target);
+        symlinkSync(pkg, target, "junction");
+      }
+    } else if (!stat) {
+      // No existing file — create symlink
+      symlinkSync(pkg, target, "junction");
+    }
+    // If a real directory/file exists (user installed it), leave it alone
+  } catch {
+    // Non-fatal: symlink creation can fail on some systems
+  }
+}
+
 function isServerEntry(source: string): boolean {
-  return (
-    source.includes("/server") ||
-    source.includes("/static")
-  );
+  return source.includes("/server") || source.includes("/static");
 }
 
-// Explicit subpath → file mapping. Server entries always resolve to .node
-// variants to bypass the react-server condition guard in server.js.
 const subpathMap: Record<string, string> = {
   "react-server-dom-esm":                "index.js",
   "react-server-dom-esm/client":         "client.js",
@@ -103,10 +128,7 @@ const subpathMap: Record<string, string> = {
 
 function resolveVendored(source: string): string {
   const file = subpathMap[source];
-  if (file) {
-    return join(ossDir, "react-server-dom-esm", file);
-  }
-  // Fallback for unknown subpaths
+  if (file) return join(ossDir, "react-server-dom-esm", file);
   const subpath = source.replace("react-server-dom-esm", "");
   return join(ossDir, "react-server-dom-esm", subpath || "index.js");
 }

package/plugin/vendor/vendor.server.ts

@@ -14,10 +14,10 @@ function findPkgRoot(): string {
 }
 const ossDir = join(findPkgRoot(), "oss-experimental");
 
-// Load react-server-dom-esm/server.node directly from vendored copy
-// Use server.node.js (not server.js which is a react-server condition guard)
+// Load react-server-dom-esm/server from vendored copy
+// The vendored package.json exports map defaults to server.node.js
 const vendorRequire = createRequire(join(ossDir, "react-server-dom-esm", "package.json"));
-const ReactDOMServer = vendorRequire(join(ossDir, "react-server-dom-esm", "server.node.js")) as typeof import("react-server-dom-esm/server.node");
+const ReactDOMServer = vendorRequire("react-server-dom-esm/server") as typeof import("react-server-dom-esm/server.node");
 
 // React still comes from the consumer's project
 const projectRoot = process.env["npm_config_local_prefix"] || process.cwd();

package/plugin/vendor/vendor.static.ts

@@ -14,9 +14,10 @@ function findPkgRoot(): string {
 }
 const ossDir = join(findPkgRoot(), "oss-experimental");
 
-// Load react-server-dom-esm/static.node directly from vendored copy
+// Load react-server-dom-esm/static from vendored copy
+// The vendored package.json exports map defaults to static.node.js
 const vendorRequire = createRequire(join(ossDir, "react-server-dom-esm", "package.json"));
-const ReactDOMServer = vendorRequire(join(ossDir, "react-server-dom-esm", "static.node.js")) as typeof import("react-server-dom-esm/static.node");
+const ReactDOMServer = vendorRequire("react-server-dom-esm/static") as typeof import("react-server-dom-esm/static.node");
 
 // React still comes from the consumer's project
 const projectRoot = process.env["npm_config_local_prefix"] || process.cwd();