vite-plugin-react-server 1.1.19 → 1.2.0-alpha.0

package/plugin/worker/rsc/rsc-worker.development.ts

@@ -2,14 +2,18 @@ import { parentPort, MessageChannel, workerData } from "node:worker_threads";
 import { messageHandler } from "./messageHandler.js";
 import { register } from "node:module";
 import { register as registerTsx } from "tsx/esm/api";
-import { join } from "node:path";
+import { resolve } from "node:path";
 import { pluginRoot } from "../../root.js";
+import type { HmrAcceptMessage, ReadyMessage } from "../types.js";
 import type {
-  HmrAcceptMessage,
+  CssFileMessage,
   HmrUpdateMessage,
-  ReadyMessage,
-} from "../types.js";
+  InitializedEnvLoaderMessage,
+  InitializedReactLoaderMessage,
+  RscWorkerInputMessage,
+} from "./types.js";
 import { toError } from "../../error/toError.js";
+import { DEFAULT_CONFIG } from "../../config/defaults.js";
 
 // Initialize worker
 if (!parentPort) {
@@ -21,11 +25,10 @@ const isTestEnv = process.env["VITEST"] || process.env["NODE_ENV"] === "test";
 const isDevEnv = process.env["NODE_ENV"] !== "production";
 const verbose = workerData.verbose;
 
-const developmentMessageHandler = (msg: any) => {
+const developmentMessageHandler = (msg: RscWorkerInputMessage) => {
   if (verbose) {
-    if ("chunk" in msg) {
-      let preview = Buffer.from(msg.chunk).toString("utf-8");
-      console.log(`[rsc-worker:${msg.type}] ${preview}`);
+    if (msg.type === "RSC_RENDER") {
+      console.log(`[rsc-worker:${msg.type}] Render ${msg.pagePath}}`);
     } else {
       console.log(`[rsc-worker:${msg.type}] ${JSON.stringify(msg)}`);
     }
@@ -33,21 +36,25 @@ const developmentMessageHandler = (msg: any) => {
   messageHandler(msg);
 };
 
-const developmentCssLoaderMessageHandler = (msg: any) => {
+const developmentCssLoaderMessageHandler = (msg: CssFileMessage) => {
   if (verbose) {
     console.log(`[css-loader:${msg.type}] ${JSON.stringify(msg)}`);
   }
   messageHandler(msg);
 };
 
-const developmentEnvLoaderMessageHandler = (msg: any) => {
+const developmentEnvLoaderMessageHandler = (
+  msg: InitializedEnvLoaderMessage
+) => {
   if (verbose) {
     console.log(`[env-loader:${msg.type}] ${JSON.stringify(msg)}`);
   }
   messageHandler(msg);
 };
 
-const developmentReactLoaderMessageHandler = (msg: any) => {
+const developmentReactLoaderMessageHandler = (
+  msg: InitializedReactLoaderMessage
+) => {
   if (verbose) {
     console.log(`[react-loader:${msg.type}] ${JSON.stringify(msg)}`);
   }
@@ -62,15 +69,68 @@ try {
 
   // Set up message handlers before transferring ports
   reactLoaderChannel.port2.on("message", developmentReactLoaderMessageHandler);
+  reactLoaderChannel.port2.on("messageerror", (error: Error) => {
+    console.error("[rsc-worker] React loader message serialization failed:", error);
+    if (parentPort) {
+      parentPort.postMessage({
+        type: "ERROR",
+        id: "react-loader",
+        error: {
+          message: "Message serialization failed in react loader",
+          name: "MessageError",
+          stack: undefined,
+        },
+      });
+    }
+  });
+  
   cssLoaderChannel.port2.on("message", developmentCssLoaderMessageHandler);
+  cssLoaderChannel.port2.on("messageerror", (error: Error) => {
+    console.error("[rsc-worker] CSS loader message serialization failed:", error);
+    if (parentPort) {
+      parentPort.postMessage({
+        type: "ERROR",
+        id: "css-loader",
+        error: {
+          message: "Message serialization failed in CSS loader",
+          name: "MessageError",
+          stack: undefined,
+        },
+      });
+    }
+  });
+  
   envLoaderChannel.port2.on("message", developmentEnvLoaderMessageHandler);
+  envLoaderChannel.port2.on("messageerror", (error: Error) => {
+    console.error("[rsc-worker] Env loader message serialization failed:", error);
+    if (parentPort) {
+      parentPort.postMessage({
+        type: "ERROR",
+        id: "env-loader",
+        error: {
+          message: "Message serialization failed in env loader",
+          name: "MessageError",
+          stack: undefined,
+        },
+      });
+    }
+  });
 
   const reactLoaderPath =
-    "file://" + join(pluginRoot, "loader/react-loader.server.js");
+    "file://" +
+    (workerData.userOptions.reactLoaderPath
+      ? resolve(workerData.resolvedConfig.root, workerData.userOptions.reactLoaderPath)
+      : resolve(workerData.resolvedConfig.root, DEFAULT_CONFIG.REACT_LOADER_PATH));
   const cssLoaderPath =
-    "file://" + join(pluginRoot, "loader/css-loader.development.js");
+    "file://" +
+    (workerData.userOptions.cssLoaderPath
+      ? resolve(workerData.resolvedConfig.root, workerData.userOptions.cssLoaderPath)
+      : resolve(workerData.resolvedConfig.root, DEFAULT_CONFIG.CSS_LOADER_PATH));
   const envLoaderPath =
-    "file://" + join(pluginRoot, "loader/env-loader.development.js");
+    "file://" +
+    (workerData.userOptions.envLoaderPath
+      ? resolve(workerData.resolvedConfig.root, workerData.userOptions.envLoaderPath)
+      : resolve(workerData.resolvedConfig.root, DEFAULT_CONFIG.ENV_LOADER_PATH));
 
   register(cssLoaderPath, {
     parentURL: pluginRoot,
@@ -93,6 +153,7 @@ try {
       id: "react-loader",
       port: reactLoaderChannel.port1,
       userOptions: workerData.userOptions,
+      resolvedConfig: workerData.resolvedConfig,
     },
     transferList: [reactLoaderChannel.port1],
   });
@@ -104,12 +165,17 @@ try {
       id: "env-loader",
       port: envLoaderChannel.port1,
       resolvedConfig: workerData.resolvedConfig,
+      userOptions: workerData.userOptions,
     },
     transferList: [envLoaderChannel.port1],
   });
 
   // Set up message handling
   parentPort!.on("message", developmentMessageHandler);
+  parentPort!.on("messageerror", (error: Error) => {
+    console.error("[rsc-worker] Parent port message serialization failed:", error);
+    // Can't send via parentPort since that's what failed, so just log
+  });
 
   const { hmrPort } = workerData;
   if (hmrPort) {
@@ -117,7 +183,7 @@ try {
     hmrPort.start();
 
     // Listen for HMR messages
-    hmrPort.on("message", (message: any) => {
+    hmrPort.on("message", (message: RscWorkerInputMessage) => {
       if (message.type === "HMR_UPDATE") {
         // Invalidate the module in the worker
         parentPort!.postMessage({
@@ -134,6 +200,22 @@ try {
         } satisfies HmrAcceptMessage);
       }
     });
+    
+    // Handle HMR port message errors
+    hmrPort.on("messageerror", (error: Error) => {
+      console.error("[rsc-worker] HMR port message serialization failed:", error);
+      if (parentPort) {
+        parentPort.postMessage({
+          type: "ERROR",
+          id: "hmr-port",
+          error: {
+            message: "Message serialization failed in HMR port",
+            name: "MessageError",
+            stack: undefined,
+          },
+        });
+      }
+    });
   }
 
   // Notify parent that we're ready
@@ -147,16 +229,21 @@ try {
   if (process.env["NODE_ENV"] === "production") {
     throw new Error("This module should not run in production mode.");
   }
-} catch (error) {
+} catch (error: unknown) {
   if (isDevEnv) {
     console.error(error);
   }
   // In dev mode, try to send error message before exiting
   if (parentPort) {
+    const err = toError(error);
     parentPort?.postMessage({
       type: "ERROR",
       id: "rsc-worker",
-      error: toError(error),
+      error: {
+        message: err.message,
+        stack: err.stack,
+        name: err.name,
+      },
     });
   }
   if (!isDevEnv || isTestEnv) {

package/plugin/worker/rsc/sendRscWorkerMessage.ts

@@ -0,0 +1,7 @@
+import type { RscWorkerOutputMessage } from "./types.js";
+import { sendMessage } from "../sendMessage.js";
+
+export const sendRscWorkerMessage = sendMessage as (
+    msg: RscWorkerOutputMessage,
+    port?: MessagePort
+  ) => void;

package/plugin/worker/rsc/state.ts

@@ -90,7 +90,7 @@ export function clearHmrState(path: string): void {
 // Helper to get all invalidated modules
 export function getInvalidatedModules(): string[] {
   return Array.from(hmrState.entries())
-    .filter(([_, state]) => state.invalidated)
+    .filter(([, state]) => state.invalidated)
     .map(([path]) => path);
 }
 

package/plugin/worker/rsc/types.ts

@@ -0,0 +1,185 @@
+import type { RenderToPipeableStreamOptions } from "react-dom/server";
+import type {
+  CreateHandlerOptions,
+  ResolvedUserOptions,
+  StreamMetrics,
+} from "../../types.js";
+import type {
+  WorkerMessage,
+  ReactServerDomEsmOptions,
+  ErrorMessage,
+  ShellReadyMessage,
+  AllReadyMessage,
+  ShutdownCompleteMessage,
+  HmrAcceptMessage,
+  ReadyMessage,
+  ServerActionMessage,
+  ServerActionResponseMessage,
+  CleanupCompleteMessage,
+  ShutdownMessage,
+} from "../types.js";
+
+// Combined options type that includes both React DOM and React Server DOM ESM options
+export type SerializeableRenderToPipeableStreamOptions = Omit<
+  RenderToPipeableStreamOptions,
+  "onShellReady" | "onShellError" | "onAllReady" | "onError" | "onPostpone"
+>;
+
+export type RscRenderState = {
+  id: string;
+  outDir: string;
+  moduleRootPath: string;
+  moduleBaseURL: string;
+  rscOutputPath: string;
+  componentImport: string;
+  propsImport: string;
+  pipeableStreamOptions: ReactServerDomEsmOptions;
+};
+
+// RSC-specific messages
+export type RscChunkOutputMessage = WorkerMessage & {
+  type: "RSC_CHUNK";
+  id: string;
+  chunk: Uint8Array;
+  sequence?: number;
+};
+
+export type RscEndMessage = {
+  type: "RSC_END";
+  id: string;
+} & WorkerMessage;
+
+export type RscMetricsMessage = {
+  type: "RSC_METRICS";
+  id: string;
+  metrics: StreamMetrics;
+} & WorkerMessage;
+
+export type CssFileMessage = {
+  type: "CSS_FILE";
+  id: string;
+  content: string;
+  moduleClasses?: Record<string, string>;
+  originalClasses?: Record<string, string>;
+  usedClasses?: string[];
+};
+
+export type RscWorkerOutputMessage =
+  | RscChunkOutputMessage
+  | RscEndMessage
+  | ShellReadyMessage
+  | AllReadyMessage
+  | ErrorMessage
+  | CssFileMessage
+  | RscMetricsMessage
+  | HmrAcceptMessage
+  | ReadyMessage
+  | ServerActionMessage
+  | ServerActionResponseMessage
+  | ShutdownCompleteMessage
+  | CleanupCompleteMessage
+  | ServerModuleMessage
+  | HmrUpdateMessage
+  | HmrCleanupMessage;
+
+export type RscRenderOpt = WorkerMessage & {
+  type: "RSC_RENDER";
+} & Omit<
+  CreateHandlerOptions<ResolvedUserOptions>,
+  | "onEvent"
+  | "onMetrics"
+  | "loader"
+  | "logger"
+  | "build"
+  | "autoDiscover"
+  | "normalizer"
+  | "moduleID"
+  | "HtmlComponent"
+  | "RootComponent"
+  | "PageComponent"
+> & {
+  build: Omit<
+    CreateHandlerOptions<ResolvedUserOptions>["build"],
+    "entryFileNames" | "chunkFileNames" | "assetFileNames" | "pages"
+  > & { pages: string[] };
+};
+
+export type RscRenderMessage<
+  Opt extends RscRenderOpt = RscRenderOpt
+> = Opt;
+
+export type ChunkProcessedMessage = {
+  type: "CHUNK_PROCESSED";
+  success: boolean;
+  sequence?: number;
+} & WorkerMessage;
+
+export type ClientComponentMessage = {
+  type: "CLIENT_COMPONENT";
+  url: string;
+  source: string;
+} & WorkerMessage;
+
+export type InitializedReactLoaderMessage = {
+  type: "INITIALIZED_REACT_LOADER";
+  id: string;
+} & WorkerMessage;
+
+export type InitializedCssLoaderMessage = {
+  type: "INITIALIZED_CSS_LOADER";
+  id: string;
+} & WorkerMessage;
+
+export type ModuleRequestMessage = {
+  type: "MODULE_REQUEST";
+  id: string;
+  path: string;
+} & WorkerMessage;
+
+export type InitializedRscWorkerLoaderMessage = {
+  type: "INITIALIZED_RSC_WORKER_LOADER";
+  id: string;
+} & WorkerMessage;
+
+export type InitializedEnvLoaderMessage = {
+  type: "INITIALIZED_ENV_LOADER";
+  id: string;
+  env: Record<string, string>;
+} & WorkerMessage;
+
+export type HmrUpdateMessage = {
+  type: "HMR_UPDATE";
+  routes?: string[];
+  timestamp?: number;
+} & WorkerMessage;
+
+export type HmrCleanupMessage = {
+  type: "HMR_CLEANUP";
+  routes?: string[];
+  timestamp?: number;
+} & WorkerMessage;
+
+export type ServerModuleMessage = {
+  type: "SERVER_MODULE";
+  url: string;
+  source: string;
+} & WorkerMessage;
+
+export type RscWorkerInputMessage =
+  | RscRenderMessage
+  | CssFileMessage
+  | ShutdownMessage
+  | ChunkProcessedMessage
+  | ClientComponentMessage
+  | InitializedReactLoaderMessage
+  | InitializedCssLoaderMessage
+  | ModuleRequestMessage
+  | InitializedRscWorkerLoaderMessage
+  | InitializedEnvLoaderMessage
+  | HmrUpdateMessage
+  | HmrAcceptMessage
+  | HmrCleanupMessage
+  | CleanupCompleteMessage
+  | ServerActionMessage
+  | ServerActionResponseMessage
+  | ServerModuleMessage;

package/plugin/worker/rsc/userOptions.ts

@@ -1,7 +1,6 @@
-import { resolveOptions } from "../../config/index.js";
-import { hydrateUserOptions } from "../../helpers/index.js";
+import { hydrateUserOptions } from "../../helpers/hydrateUserOptions.js";
 import { workerData } from "node:worker_threads";
-const userOptionsResult = resolveOptions(hydrateUserOptions(workerData.userOptions));
+const userOptionsResult = hydrateUserOptions(workerData?.userOptions)
 if(userOptionsResult.type === "error") {
   throw userOptionsResult.error;
 }

package/plugin/worker/sendMessage.ts

@@ -1,12 +1,13 @@
 import { cleanObject } from "../helpers/cleanObject.js";
 import type {
-  HtmlWorkerOutputMessage,
+  RscWorkerInputMessage,
   RscWorkerOutputMessage,
-} from "./types.js";
+} from "./rsc/types.js";
+import type { HtmlWorkerInputMessage, HtmlWorkerOutputMessage } from "./html/types.js";
 import { parentPort } from "node:worker_threads";
 
 export function sendMessage(
-  msg: HtmlWorkerOutputMessage | RscWorkerOutputMessage,
+  msg: HtmlWorkerOutputMessage | RscWorkerOutputMessage | HtmlWorkerInputMessage | RscWorkerInputMessage,
   port = parentPort
 ) {
   if (!port) {
@@ -26,6 +27,13 @@ export function sendMessage(
               name: error.name,
               cause: error.cause,
             }
+          : (typeof error === "object" && error !== null && "message" in error && "name" in error)
+          ? {
+              message: typeof error.message === "string" ? error.message : String(error.message),
+              stack: typeof error.stack === "string" ? error.stack : undefined,
+              name: typeof error.name === "string" ? error.name : "Error",
+              cause: "cause" in error ? error.cause : undefined,
+            }
           : {
               message: String(error),
               name: "Error",
@@ -43,11 +51,21 @@ export function sendMessage(
     console.error("[Worker] Failed to send message:", err);
     // Try to send a basic error message
     try {
+      // Create a proper error with captured stack trace for better debugging
+      const sendError = new Error(
+        err instanceof Error ? err.message : String(err)
+      );
+      sendError.name = err instanceof Error ? err.name : "MessageSendError";
+      
+      // Capture stack trace excluding this function
+      Error.captureStackTrace(sendError, sendMessage);
+      
       port.postMessage({
         type: "ERROR",
         error: {
-          message: err instanceof Error ? err.message : String(err),
-          name: err instanceof Error ? err.name : "Error",
+          message: sendError.message,
+          name: sendError.name,
+          stack: sendError.stack,
         },
       });
     } catch {
@@ -56,12 +74,3 @@ export function sendMessage(
     }
   }
 }
-
-export const sendRscWorkerMessage = sendMessage as (
-  msg: RscWorkerOutputMessage,
-  port?: MessagePort
-) => void;
-export const sendHtmlWorkerMessage = sendMessage as (
-  msg: HtmlWorkerOutputMessage,
-  port?: MessagePort
-) => void;