vite-plugin-react-server 1.1.12 → 1.1.13

package/plugin/worker/html/createHtmlWorkerRenderState.tsx

@@ -1,15 +1,15 @@
 import type { HtmlWorkerRenderState } from "./types.js";
 import { PassThrough } from "stream";
-import { workerData } from "node:worker_threads";
-import type { AllReadyMessage, SerializeableRenderToPipeableStreamOptions } from "../types.js";
+import { workerData, parentPort } from "node:worker_threads";
+import type { 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/vendor.client.js";
+import { ReactDOMServer, ReactDOMClient } from "../../vendor/vendor.client.js";
 
+type CallServerCallback = (id: string, args: unknown[]) => Promise<unknown>;
 
 const createMetrics = (): StreamMetrics => {
   return {
@@ -47,7 +47,31 @@ export function createHtmlWorkerRenderState(
   if(!moduleRootPath.endsWith('/')) {
     moduleRootPath = moduleRootPath + '/';
   }
-  const elements = createFromNodeStream(rscStream, moduleRootPath, moduleBaseURL);
+  const elements = ReactDOMClient.createFromNodeStream(rscStream, moduleRootPath, moduleBaseURL, {
+    callServer: (async (id: string, args: unknown[]) => {
+      // Forward server action calls back to the main thread
+      sendMessage({
+        type: "SERVER_ACTION",
+        id,
+        args
+      } as HtmlWorkerOutputMessage);
+      console.log('[html-worker] callServer', id, args);
+      // Wait for response
+      return new Promise((resolve, reject) => {
+        const handler = (msg: any) => {
+          if (msg.type === "SERVER_ACTION_RESPONSE" && msg.id === id) {
+            parentPort?.removeListener("message", handler);
+            if (msg.error) {
+              reject(new Error(msg.error));
+            } else {
+              resolve(msg.result);
+            }
+          }
+        };
+        parentPort?.on("message", handler);
+      });
+    }) as CallServerCallback
+  });
   const metrics = createMetrics();
   const htmlTransform = new Transform({
     transform(chunk, encoding, callback) {
@@ -69,7 +93,7 @@ export function createHtmlWorkerRenderState(
         id,
         success: true,
         metrics: metrics,
-      });
+      } satisfies HtmlWorkerOutputMessage);
       callback();
     },
   })
@@ -80,7 +104,7 @@ export function createHtmlWorkerRenderState(
       sendMessage({
         type: "ALL_READY",
         id,
-      } satisfies AllReadyMessage);
+      } satisfies HtmlWorkerOutputMessage);
     },
     onError: (error: unknown, errorInfo: ErrorInfo) => {
       sendMessage({

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

@@ -1,26 +1,26 @@
-import { join } from "node:path";
 import { messageHandler } from "./messageHandler.js";
-import { MessageChannel, parentPort } from "node:worker_threads";
-import { pluginRoot } from "../../root.js";
-import { register } from "node:module";
+import { parentPort, workerData } from "node:worker_threads";
 import type { ReadyMessage } from "../types.js";
 
-// Create channels for each loader
-const cssLoaderChannel = new MessageChannel();
-cssLoaderChannel.port2.on("message", messageHandler);
-
-const cssLoaderPath = "file://" + join(pluginRoot, "loader/css-loader.development.js");
-register(cssLoaderPath, {
-  parentURL: pluginRoot,
-  data: { port: cssLoaderChannel.port1 },
-  transferList: [cssLoaderChannel.port1],
-});
+const verbose = workerData.verbose;
 
+function developmentMessageHandler(msg: any) {
+  if (verbose) {
+    if ("chunk" in msg) {
+      let preview = Buffer.from(msg.chunk).toString("utf-8");
+      console.log(`[html-worker:${msg.type}] ${preview}`);
+    } else {
+      console.log(`[html-worker:${msg.type}] ${JSON.stringify(msg)}`);
+    }
+  }
+  messageHandler(msg);
+}
 
 // Signal ready with environment
-parentPort?.on("message", messageHandler);
+parentPort?.on("message", developmentMessageHandler);
 parentPort?.postMessage({
   type: "READY",
+  id: "html-worker",
   env: process.env["NODE_ENV"],
   pid: process.pid,
-} satisfies ReadyMessage);
+} satisfies ReadyMessage);

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

@@ -1,28 +1,12 @@
-import { join } from "node:path";
 import { messageHandler } from "./messageHandler.js";
-import { MessageChannel, parentPort } from "node:worker_threads";
-import { pluginRoot } from "../../root.js";
-import { register } from "node:module";
+import { parentPort } from "node:worker_threads";
 import type { ReadyMessage } from "../types.js";
 
-// 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],
-});
-
-
 // Signal ready with environment
 parentPort?.on("message", messageHandler);
 parentPort?.postMessage({
   type: "READY",
+  id: "html-worker",
   env: process.env["NODE_ENV"],
   pid: process.pid,
-} satisfies ReadyMessage);
+} satisfies ReadyMessage);

package/plugin/worker/html/messageHandler.tsx

@@ -3,10 +3,9 @@ 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";
+import { toError } from "../../error/toError.js";
 
 // Track active renders
 const activeRenders = new Map<string, HtmlWorkerRenderState>();
@@ -41,7 +40,6 @@ function cleanup(id: string) {
     });
   }
 }
-
 export async function messageHandler(msg: HtmlWorkerInputMessage) {
   const { type, id } = msg;
   try {
@@ -120,7 +118,7 @@ export async function messageHandler(msg: HtmlWorkerInputMessage) {
     sendMessage({
       type: "ERROR",
       id,
-      error: error instanceof Error ? error : new Error(String(error)),
+      error: toError(error),
     });
   }
 }

package/plugin/worker/rsc/handleRender.ts

@@ -9,9 +9,12 @@ import { workerData } from "node:worker_threads";
 import { React } from "../../vendor/vendor.server.js";
 import { hmrState } from "./state.js";
 import { performance } from "node:perf_hooks";
+import type { PagePropOpt } from "../../types.js";
 
-export async function handleRender(
-  msg: RscRenderMessage,
+export async function handleRender<
+  T extends PagePropOpt = PagePropOpt
+>(
+  msg: RscRenderMessage<T>,
   handlers: StreamHandlers
 ) {
   let {
@@ -54,14 +57,14 @@ export async function handleRender(
     });
     if (pageAndPropsResult.type !== "success") {
       const { error, ...rest } = pageAndPropsResult;
-      return handlers.onError(error, rest);
+      return handlers.onError(id, error, rest);
     }
 
     const { PageComponent, pageProps } = pageAndPropsResult;
 
     const adaptedOnEvent = (event: "error" | "postpone", data: any) => {
       if (event === "error") {
-        handlers.onError(data.error, data.errorInfo);
+        handlers.onError(id, data.error, data.errorInfo);
       }
     };
 
@@ -76,8 +79,8 @@ export async function handleRender(
     const streamResult = createRscStream({
       projectRoot: projectRoot,
       Html: React.Fragment,
-      PageComponent: PageComponent,
-      CssCollector: CssCollector,
+      PageComponent,
+      CssCollector,
       pageProps,
       moduleBase,
       moduleRootPath,
@@ -93,7 +96,7 @@ export async function handleRender(
     });
 
     if (streamResult.type !== "success") {
-      handlers.onError(streamResult.error);
+      handlers.onError(id, streamResult.error);
       return;
     }
 
@@ -111,26 +114,26 @@ export async function handleRender(
       metrics.chunks++;
       metrics.bytes += chunk.length;
       metrics.duration = performance.now() - metrics.startTime;
-      handlers.onData(chunk);
+      handlers.onData(id, chunk);
     });
 
     // Handle stream end
     passThrough.on("end", () => {
       metrics.duration = performance.now() - metrics.startTime;
-      handlers.onEnd();
+      handlers.onEnd(id);
       if (activeStreams.has(id)) {
-        handlers.onMetrics(metrics);
+        handlers.onMetrics(id, metrics);
         activeStreams.delete(id);
       }
     });
 
     // Handle errors
     passThrough.on("error", (error) => {
-      handlers.onError(error as Error, { reason: `${id} stream error` });
+      handlers.onError(id, error as Error, { reason: `${id} stream error` });
       activeStreams.delete(id);
     });
   } catch (error) {
-    handlers.onError(error as Error, { reason: `${id} render error` });
+    handlers.onError(id, error as Error, { reason: `${id} render error` });
     return Promise.reject(error);
   }
 }

package/plugin/worker/rsc/messageHandler.tsx

@@ -1,138 +1,209 @@
 import { parentPort, workerData } from "node:worker_threads";
-import { activeStreams, addCssFileContent, hmrState } from "./state.js";
+import {
+  activeStreams,
+  addCssFileContent,
+  hmrState,
+  addModuleId,
+} from "./state.js";
 import { handleRender } from "./handleRender.js";
 import type {
-  HmrAcceptMessage,
   RscWorkerInputMessage,
-  RscWorkerOutputMessage,
   StreamHandlers,
 } from "../types.js";
-import { sendMessage } from "../sendMessage.js";
+import { sendRscWorkerMessage } from "../sendMessage.js";
+import { toError } from "../../error/toError.js";
 
-export async function messageHandler(
-  msg: RscWorkerInputMessage,
-  port = parentPort
-) {
-  if (!port) {
-    throw new Error("No port found");
-  }
-  const handlers: StreamHandlers = {
-    onError: (error: any, errorInfo?: any) => {
-      if (!(error instanceof Error)) {
-        error = new Error(String(error));
+// In test mode, we want errors to propagate up immediately
+const isTestEnv = process.env["VITEST"] || process.env["NODE_ENV"] === "test";
+const isDevEnv = process.env["NODE_ENV"] !== "production";
+
+const handlers: Required<StreamHandlers> = {
+  onError: (id, error, errorInfo) => {
+    sendRscWorkerMessage({
+      type: "ERROR",
+      id: id,
+      errorInfo,
+      error: toError(error),
+    });
+    sendRscWorkerMessage({
+      type: "RSC_END",
+      id: id,
+    });
+  },
+  onData: (id, data: any) => {
+    sendRscWorkerMessage({
+      type: "RSC_CHUNK",
+      id: id,
+      chunk: data,
+    });
+  },
+  onEnd: (id: string) => {
+    sendRscWorkerMessage({
+      type: "RSC_END",
+      id: id,
+    });
+  },
+  onMetrics: (id: string, metrics: any) => {
+    sendRscWorkerMessage({
+      type: "RSC_METRICS",
+      id: id,
+      metrics,
+    });
+  },
+  onHmrAccept: (id, routes) => {
+    sendRscWorkerMessage({
+      type: "HMR_ACCEPT",
+      id: id,
+      routes: routes,
+    });
+  },
+  onHmrUpdate: (id, routes) => {
+    sendRscWorkerMessage({
+      type: "HMR_UPDATE",
+      id: id,
+      routes: routes,
+    });
+  },
+  onServerModule: (id, url, source) => {
+    sendRscWorkerMessage({
+      type: "SERVER_MODULE",
+      id,
+      url,
+      source,
+    });
+  },
+  onServerActionResponse: (id, result, error) => {
+    sendRscWorkerMessage({
+      type: "SERVER_ACTION_RESPONSE",
+      id,
+      result,
+      error,
+    });
+  },
+  onServerAction: async (id, args) => {
+    try {
+      // Get the server action function from the worker data
+      const serverAction = workerData.serverActions?.[id];
+      if (!serverAction) {
+        throw new Error(`Server action ${id} not found`);
       }
-      port.postMessage({
-        type: "ERROR",
-        id: msg.id,
-        errorInfo,
-        error: {
-          message: error.message,
-          stack: error.stack,
-          name: error.name,
-          cause: error.cause,
-        },
-      } satisfies RscWorkerOutputMessage);
-      port.postMessage({
-        type: "RSC_END",
-        id: msg.id,
-      } satisfies RscWorkerOutputMessage);
-    },
-    onData: (data: any) => {
-      port.postMessage({
-        type: "RSC_CHUNK",
-        id: msg.id,
-        chunk: data,
-      } satisfies RscWorkerOutputMessage);
-    },
-    onEnd: () => {
-      port.postMessage({
-        type: "RSC_END",
-        id: msg.id,
-      } satisfies RscWorkerOutputMessage);
-    },
-    onMetrics: (metrics: any) => {
-      port.postMessage({
-        type: "RSC_METRICS",
-        id: msg.id,
-        metrics,
-      } satisfies RscWorkerOutputMessage);
-    },
-    onHmrAccept: (routes: string[]) => {
-      port.postMessage({
-        type: "HMR_ACCEPT",
-        id: (msg as HmrAcceptMessage).id,
-        routes: routes,
-      });
-    },
-    onHmrUpdate: (routes: string[]) => {
-      port.postMessage({
-        type: "HMR_UPDATE",
-        id: msg.id,
-        routes: routes,
+      // Execute the server action
+      const result = await serverAction(...args);
+      // Send the result back
+      sendRscWorkerMessage({
+        type: "SERVER_ACTION_RESPONSE",
+        id,
+        result,
       });
-    },
-  };
-  switch (msg.type) {
-    case "RSC_RENDER":
-      return await handleRender(msg, handlers);
-    case "INITIALIZED_REACT_LOADER":
-      return;
-    case "INITIALIZED_CSS_LOADER":
-      return;
-    case "INITIALIZED_ENV_LOADER":
-      return;
-    case "HMR_UPDATE":
-      // Mark the module as invalidated
-      hmrState.set(msg.id, {
-        timestamp: msg.timestamp || Date.now(),
-        invalidated: true,
-        routes: msg.routes || [],
+    } catch (error) {
+      // Send error back
+      sendRscWorkerMessage({
+        type: "SERVER_ACTION_RESPONSE",
+        id,
+        error: error instanceof Error ? error.message : String(error),
       });
-      // Notify the main thread that we've processed the update
-      handlers.onHmrUpdate(msg.routes || []);
-      return;
-    case "HMR_CLEANUP":
-      // Clear the invalidation state
-      hmrState.delete(msg.id);
-      // Notify the main thread that we've processed the cleanup
-      handlers.onHmrAccept(msg.routes || []);
-      return;
-    case "CSS_FILE":
-      if (msg.id) {
-        const cssOptions = workerData.userOptions.css || {
-          inlineThreshold: 1000,
-        };
+    }
+  },
+  onShutdown: (id: string) => {
+    // Send SHUTDOWN_COMPLETE message to signal that shutdown is complete
+    sendRscWorkerMessage({
+      type: "SHUTDOWN_COMPLETE",
+      id: id,
+    });
+  },
+};
 
-        addCssFileContent(msg.id, msg.content, {
-          projectRoot: workerData.userOptions.projectRoot || process.cwd(),
-          moduleBaseURL: workerData.userOptions.moduleBaseURL || "/",
-          moduleBasePath: workerData.userOptions.moduleBasePath || "/",
-          moduleRootPath: workerData.userOptions.moduleRootPath,
-          css: cssOptions,
+export async function messageHandler(
+  msg: RscWorkerInputMessage,
+  port = parentPort
+) {
+  try {
+    if (!port) {
+      throw new Error("No port found");
+    }
+    switch (msg.type) {
+      case "RSC_RENDER":
+        return await handleRender(msg, handlers);
+      case "SERVER_ACTION":
+        return handlers.onServerAction(msg.id, msg.args);
+      case "INITIALIZED_REACT_LOADER":
+        return;
+      case "INITIALIZED_CSS_LOADER":
+        return;
+      case "INITIALIZED_ENV_LOADER":
+        return;
+      case "HMR_UPDATE":
+        // Mark the module as invalidated
+        hmrState.set(msg.id, {
+          timestamp: msg.timestamp || Date.now(),
+          invalidated: true,
+          routes: msg.routes || [],
         });
+        // Notify the main thread that we've processed the update
+        handlers.onHmrUpdate(msg.id, msg.routes || []);
+        return;
+      case "HMR_CLEANUP":
+        // Clear the invalidation state
+        hmrState.delete(msg.id);
+        // Notify the main thread that we've processed the cleanup
+        handlers.onHmrAccept(msg.id, msg.routes || []);
+        return;
+      case "CSS_FILE":
+        if (msg.id) {
+          const cssOptions = workerData.userOptions.css || {
+            inlineThreshold: 1000,
+          };
+
+          addCssFileContent(msg.id, msg.content, {
+            projectRoot: workerData.userOptions.projectRoot || process.cwd(),
+            moduleBaseURL: workerData.userOptions.moduleBaseURL || "/",
+            moduleBasePath: workerData.userOptions.moduleBasePath || "/",
+            moduleRootPath: workerData.userOptions.moduleRootPath,
+            css: cssOptions,
+          });
+        }
+        return;
+      case "SERVER_MODULE":
+        if (msg.id && msg.url) {
+          addModuleId(msg.id, msg.url);
+        }
+        handlers.onServerModule(msg.id, msg.url, msg.source);
+        return;
+      case "SHUTDOWN": {
+        // If id is "*", clean up all render states
+        if (msg.id === "*") {
+          activeStreams.forEach((stream, renderId) => {
+            stream.end();
+            activeStreams.delete(renderId);
+          });
+          parentPort?.removeAllListeners();
+        } else {
+          activeStreams.delete(msg.id);
+        }
+        handlers.onShutdown(msg.id);
+        return;
       }
-      return;
-    case "SHUTDOWN": {
-      // If id is "*", clean up all render states
-      if (msg.id === "*") {
-        activeStreams.forEach((stream, renderId) => {
-          stream.end();
-          activeStreams.delete(renderId);
-        });
-        parentPort?.removeAllListeners();
-      } else {
-        activeStreams.delete(msg.id);
+      default: {
+        console.log("Unknown message", msg);
+        return;
       }
-      // Send SHUTDOWN_COMPLETE message to signal that shutdown is complete
-      sendMessage({
-        type: "SHUTDOWN_COMPLETE",
-        id: msg.id,
-      } satisfies RscWorkerOutputMessage);
-      return;
     }
-    default: {
-      console.log("Unknown message", msg);
-      return;
+  } catch (error) {
+    const err = toError(error);
+    if (isDevEnv) {
+      console.error(err);
+    }
+    // In dev mode, try to send error message before exiting
+    if (parentPort) {
+      port?.postMessage({
+        type: "ERROR",
+        id: "rsc-worker",
+        error: err,
+      });
+    }
+    if (!isDevEnv || isTestEnv) {
+      // In test mode or production mode, just throw the error to fail fast
+      throw err;
     }
   }
 }