vite-plugin-react-server 1.0.2 → 1.1.0

package/plugin/vendor.client.ts

@@ -0,0 +1,12 @@
+import { workerData } from "node:worker_threads";
+import { createRequire } from "node:module";
+import { join } from "node:path";
+
+const projectRoot = workerData?.projectRoot || process.cwd();
+const nodeRequire = createRequire(join(projectRoot, "package.json"));
+
+// Import ReactDOM from the project's node_modules
+const ReactDOMServer = nodeRequire("react-dom/server");
+const React = nodeRequire("react");
+
+export { ReactDOMServer, React };

package/plugin/vendor.server.ts

@@ -0,0 +1,12 @@
+import { workerData } from "node:worker_threads";
+import { createRequire } from "node:module";
+import { join } from "node:path";
+
+const projectRoot = workerData?.projectRoot || process.env["npm_config_local_prefix"] || process.cwd();
+const nodeRequire = createRequire(join(projectRoot, "package.json"));
+
+// Import ReactDOM from the project's node_modules
+const ReactDOMServer = nodeRequire("react-server-dom-esm/server");
+const React = nodeRequire("react");
+
+export { ReactDOMServer, React };

package/plugin/worker/createWorker.ts

@@ -1,83 +1,188 @@
-import { Worker, type ResourceLimits } from "node:worker_threads";
+import {
+  Worker,
+  type ResourceLimits,
+  type TransferListItem
+} from "node:worker_threads";
 import { getMode, getNodePath } from "../config/getPaths.js";
 import { getCondition } from "../config/getCondition.js";
+import { join } from "node:path";
+import { pluginRoot } from "../root.js";
+import * as React from "react";
 
-type CreateWorkerOptions = {
+export type CreateWorkerOptions = {
   projectRoot?: string;
-  condition?: "react-server" | "react-client";
+  currentCondition?: "react-server" | "react-client";
   nodePath?: string;
-  nodeOptions?: string;
+  nodeOptions?: string[];
   mode?: "production" | "development";
-  reverseCondition?: boolean;
+  reverseCondition?: string;
   maxListeners?: number;
-  workerPath: string;
+  workerPath?: string;
   resourceLimits?: ResourceLimits;
   typescript?: boolean;
+  htmlChunkSize?: number; // Size of HTML chunks in bytes
+  workerData?: any;
+  transferList?: TransferListItem[];
+};
+
+type CreateWorkerSuccess = {
+  type: "success";
+  workerPath: string;
+  worker: Worker;
+};
+
+type CreateWorkerError = {
+  type: "error";
+  workerPath: string;
+  error: Error;
+};
+
+type CreateWorkerSkip = {
+  type: "skip";
+  reason: string;
+  workerPath: string;
 };
 
-export async function createWorker(options: CreateWorkerOptions) {
+export async function createWorker(
+  options: CreateWorkerOptions
+): Promise<CreateWorkerSuccess | CreateWorkerError | CreateWorkerSkip> {
   const {
     projectRoot = process.cwd(),
     nodePath = getNodePath(projectRoot),
-    condition = getCondition(),
-    reverseCondition = true,
+    currentCondition = getCondition(),
+    reverseCondition = currentCondition === "react-server"
+      ? "react-client"
+      : "react-server",
     maxListeners = 100,
     mode = getMode(),
     workerPath,
     resourceLimits = {
-      maxOldGenerationSizeMb: 512,
-      maxYoungGenerationSizeMb: 128,
+      maxOldGenerationSizeMb: 128,
+      maxYoungGenerationSizeMb: 64,
     },
+    htmlChunkSize = 8 * 1024,
+    transferList = []
   } = options;
+  let workerPathWithDefault =
+    typeof workerPath === "string" ? workerPath : undefined;
+  if (!workerPathWithDefault) {
+    if (currentCondition === "react-server") {
+      workerPathWithDefault = join(pluginRoot, `worker/rsc`);
+    } else {
+      workerPathWithDefault = join(pluginRoot, `worker/html`);
+    }
+  }
+  if (!workerPathWithDefault.startsWith("/")) {
+    workerPathWithDefault = join("./", workerPathWithDefault);
+  }
+  // Ensure worker uses the same React version
+  const workerData = {
+    ...options.workerData,
+    importMeta: {
+      env: {
+        DEV: mode === 'development' ? 'true' : 'false',
+        MODE: mode,
+        PROD: mode === 'production' ? 'true' : 'false',
+        SSR: true,
+        BASE_URL: '/',
+      },
+    },
+    reactVersion: React.version,
+  };
 
-  // Ensure consistent NODE_ENV between main thread and worker
-  const isTestEnv = process.env["VITEST"] || process.env["NODE_ENV"] === "test";
-  const nodeEnv = isTestEnv ? "development" : mode;
+  try {
 
-  const env = {
-    ...process.env,
-    NODE_ENV: nodeEnv,
-    NODE_PATH: nodePath,
-    NODE_OPTIONS: `${
-      reverseCondition
-        ? condition === "react-server"
-          ? process.env["NODE_OPTIONS"]?.includes("react-server")
-            ? process.env["NODE_OPTIONS"]?.replace("react-server", "react-client")
-            : `${process.env["NODE_OPTIONS"] ?? ''} --conditions=react-client`
-          : process.env["NODE_OPTIONS"]?.includes("react-client")
-            ? process.env["NODE_OPTIONS"]?.replace("react-client", "react-server")
-            : `${process.env["NODE_OPTIONS"] ?? ''} --conditions=react-server`
-        : process.env["NODE_OPTIONS"]
-    }`,
-  };
+    // Ensure consistent NODE_ENV between main thread and worker
+    const isTestEnv =
+      process.env["VITEST"] || process.env["NODE_ENV"] === "test";
+    const nodeEnv = isTestEnv ? "test" : mode;
+
+    const env = {
+      ...process.env,
+      BASE_URL: '/',
+      VITE_DEV: mode === 'development' ? '1' : '0',
+      VITE_MODE: mode,
+      VITE_PROD: mode === 'production' ? '1' : '0',
+      VITE_SSR: 'true',
+      VITE_BASE_URL: '/',
+      NODE_ENV: nodeEnv,
+      NODE_PATH: nodePath,
+      NODE_OPTIONS: process.env["NODE_OPTIONS"]?.includes(reverseCondition)
+        ? process.env["NODE_OPTIONS"]
+        : process.env["NODE_OPTIONS"]?.includes(currentCondition)
+        ? process.env["NODE_OPTIONS"]?.replace(
+            currentCondition,
+            reverseCondition
+          )
+        : `${
+            process.env["NODE_OPTIONS"] ?? ""
+          } --conditions ${reverseCondition}`,
+      HTML_CHUNK_SIZE: htmlChunkSize.toString(),
+    };
 
-  // Create worker with proper environment
-  const worker = new Worker(
-    workerPath.startsWith("/") ? workerPath : './' + workerPath,
-    {
+    // Create worker with proper environment and loaders
+    const worker = new Worker(workerPathWithDefault, {
       env,
       resourceLimits,
-    }
-  );
+      workerData,
+      transferList,
+    });
 
-  worker.setMaxListeners(maxListeners);
+    worker.setMaxListeners(maxListeners);
 
-  // Wait for worker to be ready
-  return await new Promise<Worker>((resolve, reject) => {
-    const timeout = setTimeout(() => {
-      reject(new Error('Worker ready timeout'));
-    }, 5000);
+    // Wait for worker to be ready
+    return await new Promise<CreateWorkerSuccess | CreateWorkerSkip>(
+      (resolve, reject) => {
+        const timeout = setTimeout(() => {
+          reject({ type: "error", error: new Error("Worker ready timeout") });
+        }, 5000);
 
-    worker.once("message", (msg) => {
-      if (msg.type === "READY" && msg.env === nodeEnv) {
-        clearTimeout(timeout);
-        resolve(worker);
-      }
-    });
+        worker.once("message", (msg) => {
+          if (msg.type === "READY") {
+            clearTimeout(timeout);
+            if(msg.env !== nodeEnv) {
+              reject({
+                type: "error",
+                error: new Error(`Worker environment mismatch: ${msg.env} !== ${nodeEnv}`),
+                workerPath: workerPathWithDefault,
+              } satisfies CreateWorkerError);
+            }
+            resolve({
+              type: "success",
+              worker,
+              workerPath: workerPathWithDefault,
+            } satisfies CreateWorkerSuccess);
+          }
+        });
 
-    worker.once("error", (error) => {
-      clearTimeout(timeout);
-      reject(error);
-    });
-  });
+        worker.once("exit", (code) => {
+          clearTimeout(timeout);
+          worker.removeAllListeners();
+          if (code === 0) {
+            resolve({
+              type: "skip",
+              reason: "Worker exited with code 0",
+              workerPath: workerPathWithDefault,
+            } satisfies CreateWorkerSkip);
+          } else {
+            reject({
+              type: "error",
+              error: new Error(`Worker exited with code ${code}`),
+              workerPath: workerPathWithDefault,
+            } satisfies CreateWorkerError);
+          }
+        });
+      }
+    );
+  } catch (error) {
+    if (error instanceof Error) {
+      return {
+        type: "error",
+        workerPath: workerPathWithDefault,
+        error: error,
+      } satisfies CreateWorkerError;
+    }
+    return error as CreateWorkerError;
+  }
 }
+

package/plugin/worker/html/createHtmlWorkerRenderState.tsx

@@ -0,0 +1,112 @@
+import type { HtmlWorkerRenderState } from "./types.js";
+import { PassThrough } from "stream";
+import { workerData } from "node:worker_threads";
+import type { AllReadyMessage, SerializeableRenderToPipeableStreamOptions } from "../types.js";
+import { type ErrorInfo } from "react";
+import { createFromNodeStream } from "react-server-dom-esm/client.node";
+import { Transform } from "node:stream";
+import type { HtmlWorkerOutputMessage } from "../types.js";
+import { join } from "node:path";
+import type { StreamMetrics } from "../../types.js";
+import { ReactDOMServer } from "../../vendor.client.js";
+
+
+const createMetrics = (): StreamMetrics => {
+  return {
+    chunks: 0,
+    bytes: 0,
+    backpressureCount: 0,
+    drainCount: 0,
+    errorCount: 0,
+    duration: 0,
+    startTime: 0,
+  };
+};
+export function createHtmlWorkerRenderState(
+  {
+    projectRoot = workerData.userOptions.projectRoot,
+    moduleRootPath = workerData.userOptions.moduleRootPath,
+    moduleBaseURL = workerData.userOptions.moduleBaseURL,
+    pipeableStreamOptions = workerData.userOptions.pipeableStreamOptions,
+    id = workerData.id,
+  }: {
+    projectRoot?: string;
+    moduleRootPath?: string;
+    moduleBaseURL?: string;
+    pipeableStreamOptions?: SerializeableRenderToPipeableStreamOptions;
+    id?: string;
+  },
+  sendMessage: (msg: HtmlWorkerOutputMessage) => void,
+  rscStream = new PassThrough()
+): HtmlWorkerRenderState {
+  if (typeof moduleRootPath !== "string") {
+    throw new Error("moduleRootPath is required");
+  } else if (!moduleRootPath.startsWith(projectRoot)) {
+    moduleRootPath = join(projectRoot, moduleRootPath);
+  }
+  const elements = createFromNodeStream(rscStream, moduleRootPath, moduleBaseURL);
+  const metrics = createMetrics();
+  const htmlTransform = new Transform({
+    transform(chunk, encoding, callback) {
+      metrics.chunks++;
+      metrics.bytes += chunk.length;
+
+      // Send HTML chunks
+      sendMessage({
+        type: "HTML_CHUNK",
+        id: id,
+        chunk: chunk,
+        encoding,
+      } satisfies HtmlWorkerOutputMessage);
+      callback();
+    },
+    flush(callback) {
+      sendMessage({
+        type: "HTML_COMPLETE",
+        id,
+        success: true,
+        metrics: metrics,
+      });
+      callback();
+    },
+  })
+  const stream = ReactDOMServer.renderToPipeableStream(elements, {
+    ...pipeableStreamOptions,
+    onAllReady: () => {
+      rscStream.end();
+      sendMessage({
+        type: "ALL_READY",
+        id,
+      } satisfies AllReadyMessage);
+    },
+    onError: (error: unknown, errorInfo: ErrorInfo) => {
+      sendMessage({
+        type: "ERROR",
+        id,
+        error: error instanceof Error ? error : new Error(String(error)),
+        errorInfo: errorInfo,
+      });
+    },
+    onShellReady: () => {
+      sendMessage({
+        type: "SHELL_READY",
+        id,
+      });
+    },
+    onShellError: (error: unknown) => {
+      sendMessage({
+        type: "SHELL_ERROR",
+        id,
+        error: error instanceof Error ? error : new Error(String(error)),
+      });
+    },
+  });
+  stream.pipe(htmlTransform);
+  return {
+    rscStream: rscStream,
+    metrics,
+    isReady: false,
+    htmlTransform: htmlTransform,
+    stream: stream,
+  };
+}

package/plugin/worker/html/html-worker.development.tsx

@@ -1,95 +1,25 @@
-// no offical types for node:module available yet (23.7.0)
-declare module "node:module" {
-  export interface ImportAttributes {
-    [key: string]: string | undefined;
-  }
-
-  export interface ResolveHookContext {
-    conditions: string[];
-    parentURL: string | undefined;
-    importAttributes: ImportAttributes;
-  }
-
-  export interface LoadHookContext {
-    conditions: string[];
-    format: ModuleFormat | null | undefined;
-    importAttributes: ImportAttributes;
-    shortCircuit?: boolean;
-  }
-
-  export interface ResolveResult {
-    url: string;
-    shortCircuit: boolean;
-  }
-
-  export interface LoadResult {
-    format: string;
-    source: string | SharedArrayBuffer | Uint8Array;
-    shortCircuit: boolean;
-  }
-
-  export interface HooksAPI {
-    resolve?: (
-      specifier: string,
-      context: ResolveHookContext,
-      nextResolve: (
-        specifier: string,
-        context: ResolveHookContext
-      ) => ResolveResult
-    ) => ResolveResult;
-
-    load?: (
-      url: string,
-      context: LoadHookContext,
-      nextLoad: (url: string, context: LoadHookContext) => LoadResult
-    ) => LoadResult;
-  }
-
-  export function registerHooks(hooks: HooksAPI): void;
-}
 import { join } from "node:path";
-import { pluginRoot } from "../../root.js";
 import { messageHandler } from "./messageHandler.js";
-import { parentPort } from "node:worker_threads";
+import { MessageChannel, parentPort } from "node:worker_threads";
+import { pluginRoot } from "../../root.js";
 import { register } from "node:module";
-import { register as registerTsx } from "tsx/esm/api";
-import { MessageChannel } from "node:worker_threads";
-
-if (!parentPort) throw new Error("This module must be run as a worker");
 
 // Create channels for each loader
-const reactLoaderChannel = new MessageChannel();
 const cssLoaderChannel = new MessageChannel();
-
-// Listen for messages from loaders
-reactLoaderChannel.port2.on("message", messageHandler);
 cssLoaderChannel.port2.on("message", messageHandler);
 
-const loaderPath = "file://" + join(pluginRoot, "loader/react-loader.js");
-const cssLoaderPath = "file://" + join(pluginRoot, "loader/css-loader.js");
-
-// Register react-loader
-register(loaderPath, {
-  parentURL: pluginRoot,
-  data: { port: reactLoaderChannel.port1 },
-  transferList: [reactLoaderChannel.port1],
-});
+const cssLoaderPath = "file://" + join(pluginRoot, "loader/css-loader.development.js");
 register(cssLoaderPath, {
   parentURL: pluginRoot,
   data: { port: cssLoaderChannel.port1 },
   transferList: [cssLoaderChannel.port1],
 });
 
-// Register loaders
-registerTsx();
+
 // Signal ready with environment
 parentPort?.on("message", messageHandler);
 parentPort?.postMessage({
   type: "READY",
   env: process.env["NODE_ENV"],
   pid: process.pid,
-});
-
-if (process.env["NODE_ENV"] !== "development") {
-  throw new Error("This module must be run in development mode");
-}
+});

package/plugin/worker/html/html-worker.production.tsx

@@ -1,7 +1,22 @@
+import { join } from "node:path";
 import { messageHandler } from "./messageHandler.js";
-import { parentPort } from "node:worker_threads";
+import { MessageChannel, parentPort } from "node:worker_threads";
+import { pluginRoot } from "../../root.js";
+import { register } from "node:module";
+
+// Create channels for each loader
+const cssLoaderChannel = new MessageChannel();
+
+cssLoaderChannel.port2.on("message", messageHandler);
+
+const cssLoaderPath = "file://" + join(pluginRoot, "loader/css-loader.production.js");
+
+register(cssLoaderPath, {
+  parentURL: pluginRoot,
+  data: { port: cssLoaderChannel.port1 },
+  transferList: [cssLoaderChannel.port1],
+});
 
-if (!parentPort) throw new Error("This module must be run as a worker");
 
 // Signal ready with environment
 parentPort?.on("message", messageHandler);
@@ -9,8 +24,4 @@ parentPort?.postMessage({
   type: "READY",
   env: process.env["NODE_ENV"],
   pid: process.pid,
-});
-
-if (process.env["NODE_ENV"] !== "production") {
-  throw new Error("This module must be run in development mode");
-}
+});

package/plugin/worker/html/messageHandler.tsx

@@ -0,0 +1,126 @@
+import { parentPort } from "node:worker_threads";
+import type {
+  HtmlWorkerInputMessage,
+  HtmlWorkerOutputMessage,
+} from "../types.js";
+// @ts-ignore
+import * as ReactDOMServer from "react-dom/server.node";
+import type { HtmlWorkerRenderState } from "./types.js";
+import { createHtmlWorkerRenderState } from "./createHtmlWorkerRenderState.js";
+
+// Track active renders
+const activeRenders = new Map<string, HtmlWorkerRenderState>();
+
+function sendMessage(msg: HtmlWorkerOutputMessage) {
+  // Send the original message
+  if ("error" in msg && msg.error instanceof Error) {
+    parentPort?.postMessage({
+      ...msg,
+      error: {
+        message: msg.error.message,
+        stack: msg.error.stack,
+        name: msg.error.name,
+        cause: msg.error.cause,
+      },
+    });
+  } else {
+    parentPort?.postMessage(msg);
+  }
+}
+
+function cleanup(id: string) {
+  const renderState = activeRenders.get(id);
+  if (renderState) {
+    renderState.rscStream.destroy();
+    renderState.htmlTransform?.destroy();
+    activeRenders.delete(id);
+
+    sendMessage({
+      type: "CLEANUP_COMPLETE",
+      id,
+    });
+  }
+}
+
+export async function messageHandler(msg: HtmlWorkerInputMessage) {
+  const { type, id } = msg;
+  try {
+    switch (type) {
+      case "ROUTE_READY": {
+        let renderState = activeRenders.get(id);
+        if (!renderState) {
+          renderState = createHtmlWorkerRenderState(msg, sendMessage);
+          
+          activeRenders.set(id, renderState);
+        } else {
+          throw new Error("Render state already exists");
+        }
+        break;
+      }
+      case "RSC_CHUNK": {
+        let renderState = activeRenders.get(id);
+        if (!renderState) {
+          throw new Error(`No render state found for id: ${id}`);
+        }
+
+        try {
+          // Write RSC chunk to the RSC stream
+          renderState.rscStream.write(msg.chunk);
+          sendMessage({
+            type: "CHUNK_PROCESSED",
+            id,
+            success: true,
+          });
+        } catch (error: any) {
+          sendMessage({
+            type: "ERROR",
+            id,
+            error: `Error writing chunk: ${error.message}`,
+          });
+          cleanup(id);
+        }
+        break;
+      }
+      case "RSC_END": {
+        const renderState = activeRenders.get(id);
+        if (!renderState) {
+          sendMessage({
+            type: "ERROR",
+            id,
+            error: "No render state found",
+          });
+          return;
+        }
+
+        // Pipe the rendered content to the HTML stream
+        break;
+      }
+      case "CLEANUP": {
+        cleanup(id);
+        break;
+      }
+      case "SHUTDOWN": {
+        // If id is "*", clean up all render states
+        if (id === "*") {
+          for (const [renderId] of activeRenders) {
+            cleanup(renderId);
+          }
+        } else {
+          cleanup(id);
+        }
+        // Send SHUTDOWN_COMPLETE message to signal that shutdown is complete
+        sendMessage({
+          type: "SHUTDOWN_COMPLETE",
+          id,
+        });
+        break;
+      }
+    }
+  } catch (error) {
+    sendMessage({
+      type: "ERROR",
+      id,
+      error: error instanceof Error ? error : new Error(String(error)),
+    });
+  }
+}

package/plugin/worker/html/types.ts

@@ -0,0 +1,19 @@
+import type { PassThrough, Transform } from "stream";
+import type { StreamMetrics } from "../../types.js";
+
+export type HtmlWorkerStreamMetrics = {
+  totalChunksReceived: number;
+  totalBytesReceived: number;
+  totalChunksProcessed: number;
+  totalBytesProcessed: number;
+};
+
+export interface HtmlWorkerRenderState {
+  rscStream: PassThrough;
+  metrics: StreamMetrics;
+  isReady: boolean;
+  htmlTransform: Transform;
+  stream: ReactDOMServer.PipeableStream;
+  abort?: () => void;
+  shellReady?: boolean;
+}