vite-plugin-react-server 1.0.2 → 1.1.0

package/plugin/worker/rsc/state.ts

@@ -1,12 +1,54 @@
+import { workerData } from "node:worker_threads";
+import { createCssProps } from "../../helpers/createCssProps.js";
+import type { CssContent, ResolvedUserOptions, HmrState } from "../../types.js";
+import type { PassThrough } from "node:stream";
+import { relative } from "node:path";
+
+
+// Track active RSC streams
+export const activeStreams = new Map<string, PassThrough>();
+
+// Track CSS files
+export const cssFiles = new Map<string, CssContent>();
+
+
+export const hmrState = new Map<string, HmrState>();
+
+if(workerData) {
+  if(workerData.hmrPort) {
+    workerData.hmrPort.on('message', (msg: { type: string; path: string; routes?: string[] }) => {
+      if(msg.type === 'HMR_UPDATE') {
+        // Normalize the path relative to project root
+        const normalizedPath = relative(workerData.userOptions.projectRoot, msg.path);
+        hmrState.set(normalizedPath, { 
+          timestamp: Date.now(), 
+          invalidated: true,
+          routes: msg.routes || []
+        });
+      } else if(msg.type === 'HMR_ACCEPT') {
+        // Normalize the path relative to project root
+        const normalizedPath = relative(workerData.userOptions.projectRoot, msg.path);
+        hmrState.delete(normalizedPath);
+      }
+    });
+  }
+} else {
+  throw new Error("This module must be run with workerData");
+}
+
 // Create shared CSS registry
-export const cssFiles = new Map<string, string>();
 export const clientFiles = new Set<string>();
 export const serverActionFiles = new Set<string>();
+
 // Helper functions
 export function clearCssFiles() {
   cssFiles.clear();
 }
 
+export function getCssFiles() {
+  return cssFiles.entries();
+}
+
 export function clearClientFiles() {
   clientFiles.clear();
 }
@@ -15,8 +57,25 @@ export function clearServerActionFiles() {
   serverActionFiles.clear();
 }
 
-export function addCssFile(id: string, cssFile: string) {
+export function addCssFile(id: string, cssFile: CssContent) {
   cssFiles.set(id, cssFile);
+}
+
+
+export function addCssFileContent(id: string, code: string, userOptions: Pick<ResolvedUserOptions, "projectRoot" | "moduleBaseURL" | "moduleBasePath" | "moduleRootPath" | "css">) {
+  if(typeof code !== "string"){
+    throw new Error(`Expected css to be loaded as a string, but got ${typeof code}`);
+  }
+  const normalizeId = id.startsWith(userOptions.moduleRootPath) ? id.slice(userOptions.moduleRootPath.length) : id;
+  cssFiles.set(normalizeId, createCssProps({
+    id,
+    code,
+    projectRoot: userOptions.projectRoot,
+    moduleBaseURL: userOptions.moduleBaseURL,
+    moduleBasePath: userOptions.moduleBasePath,
+    moduleRootPath: userOptions.moduleRootPath,
+    css: userOptions.css,
+  }));
 } 
 
 export function addClientFile(url: string) {
@@ -31,4 +90,22 @@ export function clearAllFiles() {
   clearCssFiles();
   clearClientFiles();
   clearServerActionFiles();
+}
+
+// Helper to check if a module is invalidated
+export function isModuleInvalidated(path: string): boolean {
+  const state = hmrState.get(path);
+  return state?.invalidated || false;
+}
+
+// Helper to clear HMR state for a module
+export function clearHmrState(path: string): void {
+  hmrState.delete(path);
+}
+
+// Helper to get all invalidated modules
+export function getInvalidatedModules(): string[] {
+  return Array.from(hmrState.entries())
+    .filter(([_, state]) => state.invalidated)
+    .map(([path]) => path);
 } 

package/plugin/worker/sendMessage.ts

@@ -0,0 +1,49 @@
+import { cleanObject } from "../helpers/cleanObject.js";
+import type { HtmlWorkerOutputMessage, RscWorkerOutputMessage } from "./types.js";
+import { parentPort } from "node:worker_threads";
+
+export function sendMessage(msg: HtmlWorkerOutputMessage | RscWorkerOutputMessage, port = parentPort) {
+  if (!port) {
+    console.error("[Worker] No port available to send message");
+    return;
+  }
+
+  try {
+    // Handle error messages
+    if ('error' in msg) {
+      const error = msg.error;
+      const serializedError = error instanceof Error ? {
+        message: error.message,
+        stack: error.stack,
+        name: error.name,
+        cause: error.cause,
+      } : {
+        message: String(error),
+        name: 'Error',
+      };
+
+      port.postMessage({
+        ...cleanObject(msg),
+        error: serializedError,
+      });
+    } else {
+      // Handle non-error messages
+      port.postMessage(cleanObject(msg));
+    }
+  } catch (err) {
+    console.error("[Worker] Failed to send message:", err);
+    // Try to send a basic error message
+    try {
+      port.postMessage({
+        type: "ERROR",
+        error: {
+          message: err instanceof Error ? err.message : String(err),
+          name: err instanceof Error ? err.name : 'Error',
+        },
+      });
+    } catch {
+      // If we can't even send an error message, just log it
+      console.error("[Worker] Critical error - could not send error message");
+    }
+  }
+}

package/plugin/worker/types.ts

@@ -1,4 +1,9 @@
-import type { Manifest } from "vite";
+import type { RenderToPipeableStreamOptions } from "react-dom/server";
+import type {
+  CreateHandlerOptions,
+  CssContent,
+  StreamMetrics,
+} from "../types.js";
 
 // Base message types
 export interface WorkerMessage {
@@ -6,37 +11,26 @@ export interface WorkerMessage {
   id: string;
 }
 
-export interface PipeableStreamOptions {
-  bootstrapModules?: string[];
-  bootstrapScripts?: string[];
-  bootstrapScriptContent?: string;
-  signal?: AbortSignal;
+// React Server DOM ESM specific options
+export interface ReactServerDomEsmOptions {
   identifierPrefix?: string;
   namespaceURI?: string;
   nonce?: string;
+  bootstrapScriptContent?: string;
+  bootstrapScripts?: string[];
+  bootstrapModules?: string[];
   progressiveChunkSize?: number;
-  onShellReady?: () => void;
-  onAllReady?: () => void;
-  onError?: (error: unknown) => void;
-  onPostpone?: (reason: string) => void;
-  environmentName?: string;
+  temporaryReferences?: WeakMap<any, any>;
+  moduleBaseURL?: string;
   importMap?: {
     imports?: Record<string, string>;
   };
+  onError?: (error: Error, errorInfo?: any) => void;
+  onPostpone?: (reason: string) => void;
 }
 
-// Worker States
-export interface HtmlRenderState {
-  chunks: string[];
-  complete: boolean;
-  rendered: boolean;
-  outDir: string;
-  moduleRootPath: string;
-  moduleBaseURL: string;
-  htmlOutputPath: string;
-  id: string;
-  pipableStreamOptions: PipeableStreamOptions;
-}
+// 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 interface RscRenderState {
   id: string;
@@ -46,7 +40,7 @@ export interface RscRenderState {
   rscOutputPath: string;
   componentImport: string;
   propsImport: string;
-  pipableStreamOptions: PipeableStreamOptions;
+  pipeableStreamOptions: ReactServerDomEsmOptions;
 }
 
 // Common Messages
@@ -54,53 +48,262 @@ export interface ShutdownMessage extends WorkerMessage {
   type: "SHUTDOWN";
 }
 
+export interface ErrorMessage extends WorkerMessage {
+  type: "ERROR";
+  errorInfo?: any;
+  error: string | {
+    message: string;
+    stack?: string |  undefined;
+    name: string;
+    cause?: any;
+  };
+  id: string;
+}
+
+export interface ChunkProcessedMessage extends WorkerMessage {
+  type: "CHUNK_PROCESSED";
+  success: boolean;
+  sequence?: number;
+}
+
+export interface ChunkErrorMessage extends WorkerMessage {
+  type: "CHUNK_ERROR";
+  error: string;
+  sequence?: number;
+}
+
 // RSC Messages
-export interface RscRenderMessage extends WorkerMessage {
+export type RscRenderMessage = WorkerMessage & {
   type: "RSC_RENDER";
-  pageImport: string;
-  propsImport: string;
-  pageExportName: string;
-  propsExportName: string;
-  url: string;
-  outDir: string;
-  projectRoot: string;
-  moduleRootPath: string;
-  moduleBaseURL: string;
-  moduleBasePath: string;
-  moduleBase: string;
-  pipableStreamOptions: PipeableStreamOptions;
-  cssFiles: string[];
-}
+} & Omit<
+    CreateHandlerOptions,
+    | "onEvent"
+    | "onMetrics"
+    | "loader"
+    | "Html"
+    | "CssCollector"
+    | "logger"
+    | "build"
+    | "autoDiscover"
+  > & {
+    build: Omit<
+      CreateHandlerOptions["build"],
+      "entryFileNames" | "chunkFileNames" | "assetFileNames" | "pages"
+    > & {pages: string[]};
+  };
 
-export interface RscChunkMessage extends WorkerMessage {
+export type RscChunkInputMessage = WorkerMessage &{
+    type: "RSC_CHUNK";
+    chunk: Buffer;
+    sequence: number;
+  };
+
+export type RscChunkOutputMessage = WorkerMessage & {
   type: "RSC_CHUNK";
-  chunk: string;
-  moduleRootPath: string;
-  moduleBaseURL: string;
-  outDir: string;
-  rscOutputPath: string;
-  cssFiles: Array<[string, string]>;
+  id: string;
+  chunk: Buffer;
+};
+
+export interface RscEndMessage extends WorkerMessage {
+  type: "RSC_END";
+  id: string;
 }
 
-export interface RscShellReadyMessage extends WorkerMessage {
+export interface RscMetricsMessage extends WorkerMessage {
+  type: "RSC_METRICS";
+  id: string;
+  metrics: StreamMetrics;
+}
+
+export interface ShellReadyMessage extends WorkerMessage {
   type: "SHELL_READY";
 }
 
-export interface RscAllReadyMessage extends WorkerMessage {
+export interface AllReadyMessage extends WorkerMessage {
   type: "ALL_READY";
-  outputPath: string;
-  contents: string;
+  id: string;
 }
 
-export interface RscEndMessage extends WorkerMessage {
-  type: "RSC_END";
+export interface ShellErrorMessage extends WorkerMessage {
+  type: "SHELL_ERROR";
+  id: string;
+  error: {
+    message: string;
+    stack?: string | undefined;
+    name: string;
+    cause?: any;
+  };
 }
 
-export interface RscErrorMessage extends WorkerMessage {
-  type: "ERROR";
-  error: string;
+export interface CssFileMessage {
+  type: "CSS_FILE";
+  id: string;
+  content: string;
+  moduleClasses?: Record<string, string>;
+  originalClasses?: Record<string, string>;
+  usedClasses?: string[];
 }
 
+// Extend the imported CssContent type
+export type ExtendedCssContent = CssContent & {
+  usedClasses?: string[];
+};
+
+// HTML Worker Messages
+export type HtmlWorkerInputMessage =
+  | RscChunkInputMessage
+  | RscEndMessage
+  | ShutdownMessage
+  | {
+      type: "CLEANUP";
+      id: string;
+    }
+  | {
+      type: "FORCE_CLEANUP";
+      id: string;
+    }
+  | {
+      type: "INITIALIZED_REACT_LOADER";
+      id: string;
+    }
+  | {
+      type: "INITIALIZED_CSS_LOADER";
+      id: string;
+    }
+  | {
+      type: "ACKNOWLEDGE";
+      id: string;
+      error?: string;
+    }
+  | {
+      type: "HTML_COMPLETE";
+      id: string;
+      success: boolean;
+      html?: string;
+      metrics?: StreamMetrics;
+    }
+  | {
+      type: "ROUTE_READY";
+      id: string;
+      moduleRootPath: string;
+      moduleBaseURL: string;
+      projectRoot: string;
+      cssFiles:  Map<string, CssContent>;
+      pipeableStreamOptions: Omit<ReactServerDomEsmOptions, "onError" | "onPostpone">;
+    }
+
+export type HtmlWorkerOutputMessage =
+  | {
+      type: "HTML_COMPLETE";
+      id: string;
+      success: boolean;
+      html?: string;
+      chunks?: string[];
+      metrics?: StreamMetrics;
+    }
+  | ErrorMessage
+  | ShellReadyMessage
+  | ChunkProcessedMessage
+  | ChunkErrorMessage
+  | AllReadyMessage
+  | ShellErrorMessage
+  | { type: "HTML_CHUNK"; id: string; chunk: string; encoding: string }
+  | { type: "CLEANUP_COMPLETE"; id: string }
+  | { type: "SHUTDOWN_COMPLETE"; id: string }
+  | HmrAcceptMessage;
+
+export type InitializedReactLoaderMessage = {
+  type: "INITIALIZED_REACT_LOADER";
+  id: string;
+  port: MessagePort;
+}
+export type InitializedCssLoaderMessage = {
+  type: "INITIALIZED_CSS_LOADER";
+  id: string;
+  port: MessagePort;
+}
+
+export type InitializedRscWorkerLoaderMessage = {
+  type: "INITIALIZED_RSC_WORKER_LOADER";
+  id: string;
+}
+
+// HMR Messages
+export type HmrMessage = {
+  path: string;
+}
+
+export type HmrUpdateMessage = HmrMessage & {
+  type: "HMR_UPDATE";
+  routes?: string[];
+}
+
+export type HmrCleanupMessage = HmrMessage & {
+  type: "HMR_CLEANUP";
+}
+
+export type HmrAcceptMessage = HmrMessage & {
+  type: "HMR_ACCEPT";
+  routes?: string[];
+}
+
+// RSC Worker Messages
+export type RscWorkerInputMessage =
+  | RscRenderMessage
+  | CssFileMessage
+  | ShutdownMessage
+  | ChunkProcessedMessage
+  | ClientComponentMessage
+  | InitializedReactLoaderMessage
+  | InitializedCssLoaderMessage
+  | ModuleRequestMessage  
+  | InitializedRscWorkerLoaderMessage
+  | HmrUpdateMessage
+  | HmrAcceptMessage;
+
+export interface CssFileRequestMessage extends WorkerMessage {
+  type: "CSS_FILE_REQUEST";
+  id: string;
+  path: string;
+}
+
+export interface ClientComponentMessage extends WorkerMessage {
+  type: "CLIENT_COMPONENT";
+  url: string;
+  source: string;
+}
+
+export interface ModuleRequestMessage extends WorkerMessage {
+  type: "MODULE_REQUEST";
+  id: string;
+  path: string;
+}
+
+export interface ModuleResponseMessage extends WorkerMessage {
+  type: "MODULE_RESPONSE";
+  id: string;
+  module: any;
+}
+
+export interface CssProcessedMessage extends WorkerMessage {
+  type: "CSS_PROCESSED";
+  id: string;
+}
+
+export type RscWorkerOutputMessage =
+  | RscChunkOutputMessage
+  | RscEndMessage
+  | ShellReadyMessage
+  | AllReadyMessage
+  | ErrorMessage
+  | CssFileMessage
+  | CssFileRequestMessage
+  | ClientComponentMessage
+  | ModuleRequestMessage
+  | ModuleResponseMessage
+  | CssProcessedMessage
+  | RscMetricsMessage;
+
 export interface ClientReferenceMessage extends WorkerMessage {
   type: "CLIENT_REFERENCE";
   location: string;
@@ -118,55 +321,51 @@ export interface ServerReferenceMessage extends WorkerMessage {
 // HTML Messages
 export interface WorkerRscChunkMessage extends WorkerMessage {
   type: "RSC_CHUNK";
-  chunk: string;
+  chunk: ArrayBufferLike;
   moduleRootPath: string;
   moduleBaseURL: string;
-  outDir: string;
-  htmlOutputPath: string;
-  pipableStreamOptions: PipeableStreamOptions;
-  clientManifest: Manifest;
-  serverManifest: Manifest;
-}
-
-export interface ShellReadyMessage extends WorkerMessage {
-  type: "SHELL_READY";
+  pipeableStreamOptions: Omit<ReactServerDomEsmOptions, "onError" | "onPostpone">;
 }
 
-export interface AllReadyMessage extends WorkerMessage {
-  type: "ALL_READY";
-  outputPath: string;
-  html: string;
-}
+export type BuildWorkerMessage =
+  | {
+      type: "RUN_BUILD";
+      id: string;
+      options: {
+        root: string;
+        outDir: string;
+        condition: "react-client" | "react-server";
+      };
+    }
+  | {
+      type: "BUILD_RESULT";
+      id: string;
+      result:
+        | {
+            type: "success";
+            manifest: string | undefined;
+          }
+        | {
+            type: "error";
+            error: Error;
+          };
+    };
 
-export interface CssFileMessage extends WorkerMessage {
-  type: "CSS_FILE";
-  id: string;
-  cssFile: string;
-  moduleClasses?: Record<string, string>;
+export interface TransformResult {
+  code: string;
+  map?: any;
+  modules?: {
+    [key: string]: {
+      locals: Record<string, string>;
+      exports: Record<string, string>;
+    };
+  };
 }
 
-// Message Unions
-export type HtmlWorkerMessage =
-  | WorkerRscChunkMessage
-  | RscEndMessage
-  | ShutdownMessage;
-
-export type HtmlWorkerResponse =
-  | ShellReadyMessage
-  | AllReadyMessage
-  | RscErrorMessage;
-
-export type RscWorkerMessage =
-  | RscRenderMessage
-  | RscChunkMessage
-  | RscEndMessage
-  | ShutdownMessage
-  | ClientReferenceMessage
-  | ServerReferenceMessage
-  | CssFileMessage;
-
-export type RscWorkerResponse = 
-  | RscShellReadyMessage
-  | RscAllReadyMessage
-  | RscErrorMessage
-  | CssFileMessage;
+export type LoaderMessage = {
+  type: "LOADER_PORTS" | "REGISTER_LOADER";
+  ports?: Record<string, MessagePort>;
+  key?: string;
+  port?: MessagePort;
+  importMap?: string;
+};