vite-plugin-react-server 1.0.2 → 1.1.0

package/plugin/worker/registerLoaders.ts

@@ -0,0 +1,54 @@
+import { register } from "node:module";
+import { pathToFileURL } from "node:url";
+import type { MessagePort } from "node:worker_threads";
+import { readFileSync } from "node:fs";
+
+export type LoaderRegistration = {
+  key: string;
+  path: string;
+  port: MessagePort;
+  importMap?: string;
+};
+
+export function registerLoaders(loaders: LoaderRegistration[]) {
+  for (const {  path, port, importMap } of loaders) {
+    const loaderURL = pathToFileURL(path);
+    
+    // If import map is provided, register it first
+    if (importMap) {
+      try {
+        const importMapContent = readFileSync(importMap, 'utf-8');
+        const { imports } = JSON.parse(importMapContent);
+        
+        register(loaderURL, {
+          parentURL: import.meta.url,
+          data: { 
+            port,
+            resolve: (specifier: string, context: any, nextResolve: any) => {
+              if (Object.hasOwn(imports, specifier)) {
+                return nextResolve(imports[specifier], context);
+              }
+              return nextResolve(specifier, context);
+            }
+          },
+          transferList: [port]
+        });
+      } catch (error) {
+        console.error(`Failed to load import map from ${importMap}:`, error);
+        // Fallback to basic registration if import map fails
+        register(loaderURL, {
+          parentURL: import.meta.url,
+          data: { port },
+          transferList: [port]
+        });
+      }
+    } else {
+      // Basic registration without import map
+      register(loaderURL, {
+        parentURL: import.meta.url,
+        data: { port },
+        transferList: [port]
+      });
+    }
+  }
+} 

package/plugin/worker/rsc/handleRender.ts

@@ -0,0 +1,180 @@
+import type {
+  RscChunkOutputMessage,
+  RscEndMessage,
+  RscMetricsMessage,
+  RscWorkerOutputMessage,
+} from "../types.js";
+import { resolvePageAndProps } from "../../helpers/resolvePageAndProps.js";
+import type { RscRenderMessage } from "../types.js";
+import { activeStreams, cssFiles } from "./state.js";
+import { createRscStream } from "../../helpers/createRscStream.js";
+import { CssCollector } from "../../css-collector.js";
+import { PassThrough } from "node:stream";
+import { join } from "node:path";
+import { parentPort, workerData, type MessagePort } from "node:worker_threads";
+import { React } from "../../vendor.server.js";
+import { hmrState } from "./state.js";
+
+
+export async function handleRender(
+  msg: RscRenderMessage,
+  port = parentPort,
+  _reactLoaderPort: MessagePort,
+  _cssLoaderPort: MessagePort
+) {
+  const postError = process.env["DEV"]
+    ? (error: any, errorInfo?: any) => {
+        if (!(error instanceof Error)) {
+          error = new Error(String(error));
+        }
+        port?.postMessage({
+          type: "ERROR",
+          id: msg.id,
+          errorInfo,
+          error: {
+            message: error.message,
+            stack: error.stack,
+            name: error.name,
+            cause: error.cause,
+          },
+        } satisfies RscWorkerOutputMessage);
+      }
+    : (error: Error, errorInfo?: any) => {
+        port?.postMessage({
+          type: "ERROR",
+          id: msg.id,
+          errorInfo,
+          error: error.message,
+        } satisfies RscWorkerOutputMessage);
+      };
+
+  let {
+    id = workerData.id,
+    route = workerData.route,
+    pagePath = workerData.pagePath,
+    propsPath = workerData.propsPath,
+    pageExportName = workerData.userOptions.pageExportName,
+    propsExportName = workerData.userOptions.propsExportName,
+    projectRoot = workerData.userOptions.projectRoot,
+    moduleRootPath = workerData.userOptions.moduleRootPath,
+    moduleBaseURL = workerData.userOptions.moduleBaseURL,
+    moduleBasePath = workerData.userOptions.moduleBasePath,
+    moduleBase = workerData.userOptions.moduleBase,
+    pipeableStreamOptions = workerData.userOptions.pipeableStreamOptions,
+    cssFiles: messageCssFiles,
+    globalCss = workerData.globalCss,
+  } = msg;
+
+  try {
+    // Load modules
+    const pageAndPropsResult = await resolvePageAndProps({
+      pagePath,
+      propsPath,
+      pageExportName,
+      propsExportName,
+      route,
+      loader: async (id: string) => {
+        // Check if module is invalidated
+        if (hmrState.get(id)?.invalidated) {
+          // Clear the HMR state for this module
+          hmrState.delete(id);
+          // Force a reload by using a unique query parameter
+          return import(join(projectRoot, id) + `?t=${Date.now()}`);
+        }
+        return import(join(projectRoot, id));
+      },
+    });
+
+    if (pageAndPropsResult.type !== "success") {
+      if (pageAndPropsResult.type === "error") {
+        postError(pageAndPropsResult.error);
+      }
+      return;
+    }
+
+    const { PageComponent, pageProps } = pageAndPropsResult;
+
+    const adaptedOnEvent = (event: "error" | "postpone", data: any) => {
+      if (event === "error") {
+        postError(data.error, data.errorInfo);
+      }
+    };
+
+    if (messageCssFiles && messageCssFiles.size > 0) {
+      // if any css is added to the message, add it to the cssFiles map
+      for (const [id, cssContent] of messageCssFiles.entries()) {
+        cssFiles.set(id, cssContent);
+      }
+    }
+
+    // Create stream
+    const streamResult = createRscStream({
+      projectRoot: projectRoot,
+      Html: React.Fragment,
+      PageComponent: PageComponent,
+      CssCollector: CssCollector,
+      pageProps,
+      moduleBase,
+      moduleRootPath,
+      moduleBasePath,
+      moduleBaseURL,
+      manifest: {},
+      route,
+      // this is a stateful object, which at this point we assume contains all the css files
+      cssFiles,
+      globalCss,
+      onEvent: adaptedOnEvent,
+      pipeableStreamOptions: pipeableStreamOptions,
+    });
+
+    if (streamResult.type !== "success") {
+      postError(streamResult.error);
+      return;
+    }
+
+    const { stream, metrics } = streamResult;
+
+    // Create pass-through stream
+    const passThrough = new PassThrough();
+    activeStreams.set(id, passThrough);
+
+    // Pipe stream to pass-through
+    stream.pipe(passThrough);
+
+    // Handle data chunks
+    passThrough.on("data", (chunk) => {
+      port?.postMessage({
+        type: "RSC_CHUNK",
+        id,
+        chunk,
+      } satisfies RscChunkOutputMessage);
+    });
+
+    // Handle stream end
+    passThrough.on("end", () => {
+      port?.postMessage({
+        type: "RSC_END",
+        id,
+      } satisfies RscEndMessage);
+      if (activeStreams.has(id)) {
+        port?.postMessage({
+          type: "RSC_METRICS",
+          id,
+          metrics,
+        } satisfies RscMetricsMessage);
+        activeStreams.delete(id);
+      }
+    });
+
+    // Handle errors
+    passThrough.on("error", (error) => {
+      postError(error as Error);
+      activeStreams.delete(id);
+    });
+  } catch (error) {
+    if (process.env["DEV"]) {
+      console.error(`[Stream ${id}] Error:`, error);
+    }
+    postError(error as Error);
+  }
+}

package/plugin/worker/rsc/messageHandler.tsx

@@ -1,137 +1,63 @@
-import { join } from "node:path";
-import { PassThrough } from "node:stream";
-import { parentPort } from "node:worker_threads";
-import React from "react";
-import type {
-  RscChunkMessage,
-  RscEndMessage,
-  RscWorkerMessage,
-} from "../types.js";
-import { addCssFile, cssFiles } from "./state.js";
-import { InlineCssCollector } from "../../css-collector-inline.js";
-import { createRscStream } from "../../helpers/createRscStream.js";
-import { createLogger } from "vite";
-
-export async function messageHandler(message: RscWorkerMessage) {
-  switch (message.type) {
+import { parentPort, workerData, type MessagePort } from "node:worker_threads";
+import { addCssFileContent, hmrState } from "./state.js";
+import { handleRender } from "./handleRender.js";
+
+export function messageHandler(
+  msg: any,
+  port = parentPort,
+  reactLoaderPort: MessagePort,
+  cssLoaderPort: MessagePort
+) {
+  if (!port) {
+    throw new Error("No port found");
+  }
+  switch (msg.type) {
     case "RSC_RENDER":
-      const {
-        id,
-        pageImport,
-        propsImport,
-        pageExportName,
-        propsExportName,
-        url,
-        outDir,
-        projectRoot,
-        moduleRootPath,
-        moduleBaseURL,
-        moduleBasePath,
-        moduleBase,
-        pipableStreamOptions,
-      } = message;
-
-      try {
-        // Load modules which will trigger CSS loading
-        const [Component, propsModule] = await Promise.all([
-          import(join(projectRoot, pageImport)),
-          import(join(projectRoot, propsImport)),
-        ]);
-
-        const propsAtExport = propsModule[propsExportName];
-        const props = await Promise.resolve(
-          typeof propsAtExport === "function"
-            ? propsAtExport(url)
-            : propsAtExport
-        );
-
-        const PageComponent = Component[pageExportName];
-
-        // Create stream using the helper
-        const stream = createRscStream({
-          Html: React.Fragment,
-          Page: PageComponent,
-          CssCollector: InlineCssCollector,
-          loader: (id: string) => import(id).then((m) => m.default),
-          props,
-          moduleBase,
-          moduleRootPath,
-          moduleBasePath,
-          moduleBaseURL,
-          logger: createLogger(),
-          inlineCss: true,
-          cssFiles: Array.from(cssFiles.values()).map((css) => ({
-            type: "text/css",
-            content: css,
-            path: css,
-          })),
-          route: url,
-          url: typeof moduleBaseURL === "string" && moduleBaseURL !== "" ? new URL(url, moduleBaseURL).toString() : url,
-          root: projectRoot,
-          pipableStreamOptions: {
-            ...pipableStreamOptions,
-            onError: (error: unknown) => {
-              if (typeof pipableStreamOptions.onError === "function") {
-                pipableStreamOptions.onError(error);
-              }
-              parentPort?.postMessage({
-                type: "ERROR",
-                id,
-                error: error instanceof Error ? error.message : String(error),
-              });
-            },
-            onPostpone: (reason: string) => {
-              if (typeof pipableStreamOptions.onPostpone === "function") {
-                pipableStreamOptions.onPostpone(reason);
-              }
-              parentPort?.postMessage({
-                type: "POSTPONE",
-                id,
-                reason,
-              });
-            },
-          },
-        });
-
-        if (!stream) {
-          throw new Error("Failed to create stream");
-        }
-
-        // Listen for data and end events
-        const passThrough = new PassThrough();
-        stream.pipe(passThrough);
-
-        passThrough.on("data", (chunk) => {
-          // Send to parent
-          parentPort?.postMessage({
-            type: "RSC_CHUNK",
-            id,
-            chunk: chunk.toString(),
-            moduleRootPath: moduleBasePath,
-            moduleBaseURL,
-            outDir,
-            rscOutputPath: `${outDir}/${id}.rsc`,
-            cssFiles: Array.from(cssFiles.entries()),
-          } satisfies RscChunkMessage);
-        });
-
-        passThrough.on("end", () => {
-          parentPort?.postMessage({
-            type: "RSC_END",
-            id,
-          } satisfies RscEndMessage);
-        });
-      } catch (error) {
-        console.trace(error);
-        parentPort?.postMessage({
-          type: "ERROR",
-          id,
-          error: error instanceof Error ? error.message : String(error),
+      return handleRender(msg, port, reactLoaderPort, cssLoaderPort);
+    case "INITIALIZED_REACT_LOADER":
+      return;
+    case "INITIALIZED_CSS_LOADER":
+      return;
+    case "HMR_UPDATE":
+      // Mark the module as invalidated
+      hmrState.set(msg.path, {
+        timestamp: msg.timestamp || Date.now(),
+        invalidated: true,
+        routes: msg.routes || [],
+      });
+      // Notify the main thread that we've processed the update
+      port.postMessage({
+        type: "HMR_ACCEPT",
+        path: msg.path,
+        routes: msg.routes,
+      });
+      return;
+    case "HMR_CLEANUP":
+      // Clear the invalidation state
+      hmrState.delete(msg.path);
+      // Notify the main thread that we've processed the cleanup
+      port.postMessage({
+        type: "HMR_ACCEPT",
+        path: msg.path,
+      });
+      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,
         });
       }
-      break;
-    case "CSS_FILE":
-      addCssFile(message.id, message.cssFile);
-      break;
+      return;
+    default: {
+      return;
+    }
   }
 }

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

@@ -1,97 +1,83 @@
-// 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 { parentPort, MessageChannel } from "node:worker_threads";
+import { parentPort, MessageChannel, workerData } from "node:worker_threads";
 import { messageHandler } from "./messageHandler.js";
-import { 
-  register,
-} from 'node:module';
+import { register } from "node:module";
 import { register as registerTsx } from "tsx/esm/api";
-import { join } from 'node:path';
+import { join } from "node:path";
 import { pluginRoot } from "../../root.js";
+import { deserializeRegExp } from "../../helpers/serializeUserOptions.js";
 
 // Initialize worker
 if (!parentPort) {
   throw new Error("This module must be run as a worker");
 }
 
+// Deserialize workerData to restore RegExp objects
+if (workerData) {
+  workerData.userOptions = deserializeRegExp(workerData.userOptions);
+}
+
 // 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);
+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');
+const loaderPath = "file://" + join(pluginRoot, "loader/react-loader.js");
+const cssLoaderPath =
+  "file://" + join(pluginRoot, "loader/css-loader.development.js");
 
 // Register react-loader
 register(loaderPath, {
   parentURL: pluginRoot,
   data: { port: reactLoaderChannel.port1 },
-  transferList: [reactLoaderChannel.port1]
+  transferList: [reactLoaderChannel.port1],
 });
 register(cssLoaderPath, {
   parentURL: pluginRoot,
-  data: { port: cssLoaderChannel.port1 },
-  transferList: [cssLoaderChannel.port1]
+  data: { port: cssLoaderChannel.port1, resolvedConfig: workerData.resolvedConfig },
+  transferList: [cssLoaderChannel.port1],
 });
 
 // Register loaders
 registerTsx();
 
 // Set up message handling
-parentPort.on("message", messageHandler);
+parentPort!.on("message", messageHandler);
+
+const { hmrPort } = workerData;
+if (hmrPort) {
+  // Start the message port
+  hmrPort.start();
+
+  // Listen for file changes
+  hmrPort.on("message", (message: any) => {
+    if (message.type === "HMR_UPDATE") {
+      // Invalidate the module in the worker
+      parentPort!.postMessage({
+        type: "HMR_UPDATE",
+        path: message.path,
+      });
+    }
+  });
+
+  // Listen for HMR updates
+  hmrPort.on("message", (message: any) => {
+    // Handle the update
+    parentPort!.postMessage({
+      type: "HMR_ACCEPT",
+      path: message.path,
+    });
+  });
+}
 
-// Signal ready
-parentPort.postMessage({ type: "READY", env: process.env["NODE_ENV"] });
+// Notify parent that we're ready
+parentPort!.postMessage({
+  type: "READY",
+  env: process.env["NODE_ENV"],
+});
 
 if (process.env["NODE_ENV"] !== "development") {
   throw new Error("This module must be run in development mode");
 }
-

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

@@ -1,7 +1,11 @@
+// Check environment before any imports
+if (process.env["NODE_ENV"] !== "production") {
+  process.exit(1);
+}
+
 import { parentPort } from "node:worker_threads";
 import { messageHandler } from "./messageHandler.js";
 
-
 if (!parentPort) {
   throw new Error("This module must be run as a worker");
 }
@@ -11,7 +15,3 @@ parentPort.on("message", messageHandler);
 
 // Signal ready
 parentPort.postMessage({ type: "READY", env: process.env["NODE_ENV"] });
-
-if (process.env["NODE_ENV"] !== "production") {
-  throw new Error("This module must be run in production mode");
-}