vite-plugin-react-server 0.3.3 → 0.3.5

package/plugin/worker/html/messageHandler.ts

@@ -0,0 +1,116 @@
+import { PassThrough } from "node:stream";
+import { parentPort } from "node:worker_threads";
+import type { HtmlRenderState, HtmlWorkerMessage } from "../types.js";
+import ReactDOMServer from "react-dom/server";
+import React from "react";
+import {
+  createFromNodeStream,
+  // @ts-ignore
+} from "react-server-dom-esm/client.node";
+
+// Track active renders and streams
+const activeRenders = new Map<string, HtmlRenderState>();
+
+export const messageHandler = async (message: HtmlWorkerMessage) => {
+  try {
+    switch (message.type) {
+      case "RSC_CHUNK": {
+        const { id, chunk, ...rest } = message;
+        const render = activeRenders.get(id);
+
+        if (!render) {
+          activeRenders.set(id, {
+            chunks: [chunk],
+            id,
+            complete: false,
+            rendered: false,
+            ...rest,
+          });
+        } else {
+          render.chunks = [...render.chunks, chunk];
+        }
+        break;
+      }
+
+      case "RSC_END": {
+        const { id } = message;
+        const render = activeRenders.get(id);
+        if (!render) {
+          throw new Error(`No render state found for ${id}`);
+        }
+
+        // Create a PassThrough stream to handle the chunks
+        const rscStream = new PassThrough();
+
+        // Write all chunks to the stream
+        for (const chunk of render.chunks) {
+          rscStream.write(chunk);
+        }
+        rscStream.end();
+
+        // Create React elements from stream
+        const reactElements = createFromNodeStream(
+          rscStream,
+          render.moduleRootPath,
+          render.moduleBaseURL
+        );
+
+        // Create a promise that resolves when HTML is complete
+        const htmlPromise = new Promise<string>((resolve) => {
+          let html = "";
+          const collectStream = new PassThrough();
+
+          collectStream.on("data", (chunk) => {
+            html += chunk.toString();
+          });
+
+          collectStream.on("end", () => {
+            resolve(html);
+          });
+
+          // Render to pipeable stream
+          const stream = ReactDOMServer.renderToPipeableStream(
+            reactElements as React.ReactNode,
+            {
+              ...render.pipableStreamOptions,
+              onShellReady() {
+                parentPort?.postMessage({ type: "SHELL_READY", id });
+              },
+              async onAllReady() {
+                const finalHtml = await htmlPromise;
+                parentPort?.postMessage({
+                  type: "HTML_READY",
+                  id,
+                  html: finalHtml,
+                  outputPath: render.htmlOutputPath,
+                });
+                parentPort?.postMessage({ type: "ALL_READY", id });
+              },
+              onError(error) {
+                parentPort?.postMessage({
+                  type: "ERROR",
+                  id,
+                  error: error instanceof Error ? error.message : String(error),
+                });
+              },
+            }
+          );
+
+          // Pipe to collection stream
+          stream.pipe(collectStream);
+        });
+
+        break;
+      }
+    }
+  } catch (error) {
+    parentPort?.postMessage({
+      type: "ERROR",
+      id:
+        message.type === "RSC_CHUNK" || message.type === "RSC_END"
+          ? message.id
+          : "",
+      error: error instanceof Error ? error.message : String(error),
+    });
+  }
+};

package/plugin/worker/html/plugin.ts

@@ -0,0 +1,97 @@
+import type { Plugin } from "vite";
+import { resolve } from "path";
+import type { ModuleFormat } from 'rollup';
+import type { StreamPluginOptions } from "../../types.js";
+import { DEFAULT_CONFIG } from "../../config/defaults.js";
+import { getPluginRoot } from "../../config/getPaths.js";
+
+
+export function reactHtmlWorkerPlugin(options: StreamPluginOptions): Plugin {
+  return {
+    name: "vite:react-html-worker",
+    config(config) {
+      const root = config.root ?? process.cwd();
+      const pluginRoot = getPluginRoot();
+      const htmlWorkerPath = typeof options.htmlWorkerPath === 'string' 
+        ? resolve(root, options.htmlWorkerPath) 
+        : resolve(pluginRoot, DEFAULT_CONFIG.HTML_WORKER_PATH);
+      
+      const format: ModuleFormat = 'esm';
+
+      // Single worker output for server build
+      const workerConfig = {
+        input: {
+          'html-worker': htmlWorkerPath,
+        },
+        output: {
+          format,
+          dir: options.build?.server ?? 'dist/server', // Output to server directory
+          entryFileNames: '[name].js',
+          preserveModules: true,
+          // Add manifest entry
+          manualChunks: {
+            'html-worker': [htmlWorkerPath]
+          },
+          resolve: {
+            conditions: ['react-server'],
+          }
+        }
+      };
+
+      return {
+        build: {
+          rollupOptions: {
+            preserveEntrySignatures: 'strict',
+            input: {
+              ...workerConfig.input,
+              ...(typeof config.build?.rollupOptions?.input === 'object' 
+                ? config.build?.rollupOptions?.input 
+                : {}),
+            },
+            external: [
+              'vite',
+              'rollup',
+              'react',
+              'react-dom',
+              'react-dom/server',
+              'react-server-dom-esm',
+              'react-server-dom-esm/client.node',
+              'react-server-dom-esm/server.node',
+              'react-server-dom-esm/node-loader',
+              'source-map',
+              'acorn-loose',
+              'webpack-sources',
+              'stream',
+              'util',
+              'crypto',
+              'async_hooks',
+              'fs',
+              'path',
+              'worker_threads',
+              // if we use node: paths in our code, it should always be catched by below rule.
+              /^node:.*/,
+            ],
+            output: {
+              ...workerConfig.output,
+            }
+          },
+          manifest: true, // Ensure manifest is generated
+          minify: false,
+          sourcemap: true,
+        }
+      };
+    },
+    // Add this to ensure entry is in manifest
+    generateBundle(_, bundle) {
+      const workerEntry = bundle['html-worker.js'];
+      if (workerEntry) {
+        Object.defineProperty(workerEntry, 'isEntry', {
+          value: true,
+          writable: false,
+          enumerable: true,
+          configurable: false
+        });
+      }
+    }
+  };
+}

package/plugin/worker/html/renderPages.ts

@@ -0,0 +1,187 @@
+import { join, resolve as resolvePath } from "node:path";
+import { Transform } from "node:stream";
+import type { Worker } from "node:worker_threads";
+import { createHandler } from "../../react-server/createHandler.js";
+import type { ResolvedUserConfig, StreamPluginOptions } from "../../types.js";
+import { mkdir, writeFile } from "node:fs/promises";
+
+interface PipeableStreamOptions {
+  bootstrapModules?: string[];
+  bootstrapScripts?: string[];
+  bootstrapScriptContent?: string;
+  signal?: AbortSignal;
+  identifierPrefix?: string;
+  namespaceURI?: string;
+  nonce?: string;
+  progressiveChunkSize?: number;
+  onShellReady?: () => void;
+  onAllReady?: () => void;
+  onError?: (error: unknown) => void;
+  importMap?: {
+    imports?: Record<string, string>;
+  };
+}
+
+type RenderPagesOptions = {
+  pluginOptions: Required<
+    Pick<
+      StreamPluginOptions,
+      "moduleBase" | "moduleBasePath" | "moduleBaseURL" | "projectRoot"
+    >
+  > &
+    Pick<
+      StreamPluginOptions,
+      "Page" | "props" | "build" | "Html" | "pageExportName" | "propsExportName"
+    >;
+  userConfig: ResolvedUserConfig;
+  manifest: Record<string, { file: string }>;
+  worker: Worker;
+  pipableStreamOptions?: PipeableStreamOptions;
+  loader: (id: string) => Promise<Record<string, any>>;
+  onCssFile?: (path: string) => void;
+  clientCss?: string[];
+  moduleBasePath: string;
+  moduleBaseURL: string;
+};
+
+export async function renderPages(
+  routes: string[],
+  options: RenderPagesOptions
+) {
+  console.log("[renderPages] Starting render for routes:", routes);
+
+  const destinationRoot = resolvePath(options.userConfig.root, options.userConfig.build.outDir);
+  const failedRoutes = new Map<string, Error>();
+  const moduleRootPath = join(destinationRoot, options.moduleBasePath);
+  const moduleBaseURL = options.moduleBaseURL;
+  const htmlRoot = join(
+    options.userConfig.root,
+    options.pluginOptions.build?.client ?? options.userConfig.build.outDir.replace('server', 'client')
+  );
+  console.log("[renderPages] HTML root:", htmlRoot);
+
+  const streamStarted = new Set<string>();
+  const completedRoutes = new Set<string>();
+  const htmlContent = new Map<string, string>();
+  const writePromises = new Map<string, Promise<void>>();
+
+  // Create a promise that resolves when all routes are complete
+  const allRoutesComplete = new Promise<void>((resolve, reject) => {
+    const timeout = setTimeout(() => {
+      reject(new Error(`Render timeout - Started: ${streamStarted.size}, Completed: ${completedRoutes.size}`));
+    }, 5000);
+
+    options.worker.on("message", function messageHandler(msg: any) {
+      switch (msg.type) {
+        case "SHELL_READY": {
+          streamStarted.add(msg.id);
+          break;
+        }
+        case "HTML_READY": {
+          htmlContent.set(msg.id, msg.html);
+          break;
+        }
+        case "ALL_READY": {
+          completedRoutes.add(msg.id);
+          
+          if (completedRoutes.size === routes.length) {
+            options.worker.removeListener("message", messageHandler);
+            clearTimeout(timeout);
+            
+            // Write all HTML files
+            for (const [route, html] of htmlContent) {
+              const outputPath = route === '/' 
+                ? join(htmlRoot, 'index.html')
+                : join(htmlRoot, route, 'index.html');
+              
+              const writePromise = writeFile(outputPath, html)
+                .catch(error => {
+                  failedRoutes.set(route, error as Error);
+                });
+              writePromises.set(route, writePromise);
+            }
+
+            // Wait for all files to be written
+            Promise.all(writePromises.values())
+              .then(() => resolve())
+              .catch(reject);
+          }
+          break;
+        }
+        case "ERROR": {
+          console.error("[renderPages] Worker error:", msg.error);
+          if (msg.id) {
+            failedRoutes.set(msg.id, new Error(msg.error));
+          }
+          break;
+        }
+      }
+    });
+  });
+
+  try {
+    await mkdir(htmlRoot, { recursive: true });
+
+    const renderPromises = routes.map(async (route) => {
+      console.log("[renderPages] Processing route:", route);
+      
+      try {
+        const result = await createHandler(route, options.pluginOptions, {
+          loader: options.loader,
+          manifest: options.manifest,
+        });
+
+        if (result.type !== "success") {
+          console.log("[renderPages] Handler failed:", result);
+          return;
+        }
+
+        const htmlOutputPath = route === '/' 
+          ? resolvePath(htmlRoot, 'index.html')
+          : resolvePath(htmlRoot, route, 'index.html');
+
+        const transform = new Transform({
+          transform(chunk, _encoding, callback) {
+            options.worker.postMessage({
+              type: "RSC_CHUNK",
+              id: route,
+              chunk: chunk,
+              moduleRootPath: moduleRootPath,
+              moduleBaseURL: moduleBaseURL,
+              htmlOutputPath,
+              outDir: options.userConfig.build.outDir,
+              pipableStreamOptions: options.pipableStreamOptions ?? {},
+            });
+            callback(null, chunk);
+          },
+          flush(callback) {
+            options.worker.postMessage({
+              type: "RSC_END",
+              id: route,
+            });
+            callback();
+          }
+        });
+          
+        result.stream.pipe(transform);
+
+      } catch (error) {
+        failedRoutes.set(route, error as Error);
+      }
+    });
+
+    // Wait for both the render promises and all routes to complete
+    await Promise.all([
+      Promise.all(renderPromises),
+      allRoutesComplete
+    ]);
+
+  } finally {
+    await options.worker.terminate();
+  }
+
+  return {
+    failedRoutes,
+    completedRoutes
+  };
+}

package/plugin/worker/plugin.ts

@@ -0,0 +1,17 @@
+import type { StreamPluginOptions } from "../types.js"
+import type { Plugin } from "vite"
+import { reactHtmlWorkerPlugin } from "./html/plugin.js"
+import { reactRscWorkerPlugin } from "./rsc/plugin.js"
+
+/**
+ * This plugin can be used to create your own worker paths. By default, prebuild workers are used.
+ * 
+ * @param options
+ * @returns
+ */
+export function reactWorkerPlugin(options: StreamPluginOptions): Plugin[] {
+  return [
+    reactHtmlWorkerPlugin(options),
+    reactRscWorkerPlugin(options)
+  ]
+}

package/plugin/worker/rsc/createRscStream.ts

@@ -0,0 +1,42 @@
+import { renderToPipeableStream 
+  // @ts-ignore
+} from "react-server-dom-esm/server.node";
+import type { Writable } from "node:stream";
+import type { MessagePort } from "node:worker_threads";
+import type { RscRenderState } from "../types.js";
+
+export function createRscStream(
+  renderState: RscRenderState,
+  writeStream: Writable,
+  parentPort: MessagePort | null
+) {
+  console.log("[createRscStream] Creating stream for:", renderState.id);
+
+  const stream = renderToPipeableStream(renderState.componentImport, {
+    onShellReady() {
+      console.log("[createRscStream] onShellReady called for:", renderState.id);
+      stream.pipe(writeStream);
+    },
+    onAllReady() {
+      console.log("[createRscStream] onAllReady called for:", renderState.id);
+      writeStream.on("finish", () => {
+        parentPort?.postMessage({
+          type: "WROTE_FILE",
+          id: renderState.id,
+          outputPath: renderState.rscOutputPath
+        });
+      });
+    },
+    onError(error: unknown) {
+      console.error("[createRscStream] Render error:", error);
+      parentPort?.postMessage({
+        type: "ERROR",
+        error: error instanceof Error ? error.message : String(error),
+        id: renderState.id
+      });
+      stream.abort();
+    }
+  });
+
+  return stream;
+}

package/plugin/worker/rsc/development.ts

@@ -0,0 +1,6 @@
+import { createRscStream as devCreateRscStream } from './createRscStream.js';
+import { createWorker as devCreateWorker } from '../createWorker.js';
+
+// Development-specific implementations
+export const createRscStream = devCreateRscStream;
+export const createWorker = devCreateWorker; 

package/plugin/worker/rsc/index.ts

@@ -0,0 +1,14 @@
+export { reactRscWorkerPlugin } from "./plugin.js";
+
+// Dynamic import based on NODE_ENV
+export const worker = await (
+  process.env['NODE_ENV'] === 'production' 
+  ? import('./production.js') 
+  : import('./development.js')
+);
+
+// Re-export worker functions
+export const {
+  createRscStream,
+  createWorker
+} = worker;

package/plugin/worker/rsc/plugin.ts

@@ -0,0 +1,83 @@
+import type { Plugin } from "vite";
+import { resolve } from "path";
+import type { ModuleFormat } from 'rollup';
+import type { StreamPluginOptions } from "../../types.js";
+import { DEFAULT_CONFIG } from "../../config/defaults.js";
+import { getPluginRoot } from "../../config/getPaths.js";
+
+export function reactRscWorkerPlugin(options: StreamPluginOptions): Plugin {
+  return {
+    name: "vite:react-rsc-worker",
+    config(config) {
+      const root = config.root ?? process.cwd();
+      const pluginRoot = getPluginRoot();
+      const rscWorkerPath = typeof options.rscWorkerPath === 'string' 
+        ? resolve(root, options.rscWorkerPath) 
+        : resolve(pluginRoot, DEFAULT_CONFIG.RSC_WORKER_PATH);
+      
+      const format: ModuleFormat = 'esm';
+
+      // Single worker output for server build
+      const workerConfig = {
+        input: {
+          'rsc-worker': rscWorkerPath,
+        },
+        output: {
+          format,
+          dir: options.build?.server ?? 'dist/server', // Output to server directory
+          entryFileNames: '[name].js',
+          preserveModules: true,
+          manualChunks: {
+            'rsc-worker': [rscWorkerPath]
+          },
+          resolve: {
+            conditions: ['react-server'],
+          }
+        }
+      };
+
+      return {
+        build: {
+          rollupOptions: {
+            preserveEntrySignatures: 'strict',
+            input: {
+              ...workerConfig.input,
+              ...(typeof config.build?.rollupOptions?.input === 'object' 
+                ? config.build?.rollupOptions?.input 
+                : {}),
+            },
+            external: [
+              'vite',
+              'rollup',
+              'react',
+              'react-dom',
+              'react-dom/server',
+              'react-server-dom-esm',
+              'react-server-dom-esm/client.node',
+              'react-server-dom-esm/server.node',
+              'react-server-dom-esm/node-loader',
+              'source-map',
+              'acorn-loose',
+              'webpack-sources',
+              'stream',
+              'util',
+              'crypto',
+              'async_hooks',
+              'fs',
+              'path',
+              'worker_threads',
+              // if we use node: paths in our code, it should always be catched by below rule.
+              /^node:.*/,
+            ],
+            output: {
+              ...workerConfig.output,
+            }
+          },
+          manifest: true, // Ensure manifest is generated
+          minify: false,
+          sourcemap: true,
+        }
+      };
+    },
+  };
+}

package/plugin/worker/rsc/production.ts

@@ -0,0 +1,6 @@
+import { createRscStream as prodCreateRscStream } from './createRscStream.js';
+import { createWorker as prodCreateWorker } from '../createWorker.js';
+
+// Production-specific optimizations could go here
+export const createRscStream = prodCreateRscStream;
+export const createWorker = prodCreateWorker; 

package/plugin/worker/rsc/rsc-worker.tsx

@@ -0,0 +1,128 @@
+import { createWriteStream } from "node:fs";
+import { mkdir } from "node:fs/promises";
+import { dirname } from "node:path";
+import type { Writable } from "node:stream";
+import { parentPort } from "node:worker_threads";
+import {
+  registerClientReference,
+  registerServerReference
+  // @ts-ignore
+} from "react-server-dom-esm/server.node";
+
+import type { 
+  RscRenderState, 
+  RscWorkerMessage,
+  RscWorkerResponse 
+} from "../types.js";
+import { createRscStream } from "./createRscStream.js";
+
+if (!parentPort) {
+  throw new Error("This module must be run as a worker");
+}
+
+// Track active renders
+const activeRenders = new Map<string, RscRenderState>();
+const activeStreams = new Map<string, ReturnType<typeof createRscStream>>();
+const activeWrites = new Map<string, Writable>();
+
+async function shutdown() {
+  console.log("[RSC Worker] Shutting down forcefully");
+  for (const stream of activeStreams.values()) {
+    stream.abort();
+  }
+  for (const writeStream of activeWrites.values()) {
+    writeStream.destroy();
+  }
+  process.exit(0);
+}
+
+function sendMessage(message: RscWorkerResponse) {
+  parentPort?.postMessage(message);
+}
+
+// Handle incoming messages
+parentPort.on("message", async (message: RscWorkerMessage) => {
+  if (message.type === "SHUTDOWN") {
+    await shutdown();
+    return;
+  }
+
+  try {
+    switch (message.type) {
+      case "RSC_RENDER": {
+        const { id, pageImport, propsImport, outDir, moduleRootPath, moduleBaseURL, pipableStreamOptions } = message;
+        
+        // Skip if already rendered
+        if (activeRenders.has(id)) return;
+
+        // Create render state
+        const renderState: RscRenderState = {
+          id,
+          outDir,
+          moduleRootPath,
+          moduleBaseURL,
+          rscOutputPath: `${outDir}/${id}.rsc`,
+          componentImport: pageImport,
+          propsImport,
+          pipableStreamOptions
+        };
+
+        // Ensure output directory exists
+        await mkdir(dirname(renderState.rscOutputPath), { recursive: true });
+        const writeStream = createWriteStream(renderState.rscOutputPath);
+
+        // Create stream
+        const stream = createRscStream(renderState, writeStream, parentPort);
+
+        // Track active streams
+        activeRenders.set(id, renderState);
+        activeStreams.set(id, stream);
+        activeWrites.set(id, writeStream);
+        break;
+      }
+
+      case "RSC_END": {
+        const { id } = message;
+        activeRenders.delete(id);
+        activeStreams.delete(id);
+        activeWrites.delete(id);
+        break;
+      }
+
+      case "CLIENT_REFERENCE": {
+        const { id, location, key } = message;
+        const ref = registerClientReference(id, location, key);
+        sendMessage({
+          type: "CLIENT_REFERENCE",
+          id,
+          location,
+          key,
+          ref
+        });
+        break;
+      }
+
+      case "SERVER_REFERENCE": {
+        const { id, location, key } = message;
+        const ref = registerServerReference(id, location, key);
+        sendMessage({
+          type: "SERVER_REFERENCE",
+          id,
+          location,
+          key,
+          ref
+        });
+        break;
+      }
+    }
+  } catch (error) {
+    sendMessage({
+      type: "ERROR",
+      id: message.type === "RSC_RENDER" ? message.id : "",
+      error: error instanceof Error ? error.message : String(error)
+    });
+  }
+});
+
+// Signal ready
+parentPort.postMessage({ type: "READY" });