vite-plugin-react-server 1.1.8 → 1.1.10

package/plugin/react-client/createWorkerStream.ts

@@ -1,7 +1,10 @@
 import type { Logger } from "vite";
-import type { RscRenderMessage, RscWorkerOutputMessage } from "../worker/types.js";
-import type { StreamMetrics } from "../../types.js";
-import { Worker } from "node:worker_threads";
+import type { RscWorkerOutputMessage, RscRenderMessage } from "../worker/types.js";
+import type { StreamMetrics } from "../types.js";
+import type { Worker as NodeWorker } from "node:worker_threads";
+import type { StreamHandlers } from "../worker/types.js";
+import { createMessageHandler } from "./createMessageHandlers.js";
+
 /**
  * Creates an async generator that yields RSC chunks from the worker.
  * Handles both module requests and RSC streaming.
@@ -13,95 +16,85 @@ import { Worker } from "node:worker_threads";
  * @returns An async generator that yields RSC chunks
  */
 export async function* createWorkerStream(
-    worker: Worker,
-    message: Omit<RscRenderMessage, "type" | "id">,
-    logger: Logger,
-    onMetrics?: (metrics: StreamMetrics) => void
-  ): AsyncGenerator<Uint8Array, void, unknown> {
-    let messageHandler: (message: RscWorkerOutputMessage) => void;
-    let cleanup: () => void = () => {};
-    let onError = (error: any) => {
-      let err;
-      if (typeof error === "string") {
-        err = new Error(error);
-      } else if (typeof error === "object" && error != null) {
-        const stackTrace = "stack" in error ? String(error.stack) : "";
-        const msg = "message" in error ? String(error.message) : "";
-        err = {
-          message: msg,
-          stack: stackTrace,
-        }
-      } else {
-        err = new Error("Failed to load page content");
+  worker: NodeWorker,
+  message: Omit<RscRenderMessage, "type" | "id">,
+  logger: Logger,
+  onMetrics?: (metrics: StreamMetrics) => void
+): AsyncGenerator<Uint8Array> {
+  let messageHandler: ((message: RscWorkerOutputMessage | undefined) => void) | null = null;
+  let currentResolve: ((chunk: Uint8Array) => void) | null = null;
+  const handlers: StreamHandlers = {
+    onError: (error: any, errorInfo?: any) => {
+      logger.error(error.message + error.stack, {
+        error,
+      });
+      if (errorInfo) {
+        logger.error(errorInfo.componentStack);
+      }
+    },
+    onData: (chunk: Uint8Array) => {
+      currentResolve?.(chunk);
+    },
+    onEnd: () => {
+      currentResolve?.(new Uint8Array());
+      if (messageHandler) {
+        worker.removeListener("message", messageHandler);
+        messageHandler = null;
       }
-      // Format the error using the worker's error details
-      return new TextEncoder().encode(`0:E{"digest":"","name":"Error","message":"${
-        err.message
-      }","stack":${JSON.stringify(err.stack)},"env":"Server"}`);
-    };
-    // First yield: wait for initial message and handle module requests
+    },
+    onMetrics: (metrics: StreamMetrics) => {
+      onMetrics?.(metrics);
+    },
+  };
+
+  try {
+    // Remove any existing message handler before starting
+    if (messageHandler) {
+      worker.removeListener("message", messageHandler);
+      messageHandler = null;
+    }
+
+    worker.postMessage({
+      ...message,
+      type: "RSC_RENDER",
+      id: Math.random().toString(36).slice(2),
+    });
+
     yield await new Promise<Uint8Array>((resolve) => {
-      messageHandler = (message: RscWorkerOutputMessage) => {
-        switch (message.type) {
-          case "RSC_CHUNK":
-            resolve(message.chunk);
-            break;
-          case "RSC_END":
-            resolve(new Uint8Array());
-            break;
-          case "ERROR":
-            const errorResponse = onError(message.error);
-            resolve(errorResponse);
-            break;
-          default:
-            logger.warn(`Unknown initial message type: ${message.type}`);
-            resolve(new Uint8Array());
-            break;
-        }
-      };
-  
-      cleanup = () => {
-        worker.off("message", messageHandler);
-      };
-  
-      worker.on("message", messageHandler);
-  
-      // Send the render message to start the RSC stream
-      worker.postMessage({
-        type: "RSC_RENDER",
-        id: message.route,
-        ...message,
+      currentResolve = resolve;
+      messageHandler = createMessageHandler({
+        handlers,
+        logger,
       });
+      worker.on("message", messageHandler);
     });
-  
-    // Subsequent yields: handle RSC chunks until stream ends
+
     while (true) {
       const chunk = await new Promise<Uint8Array>((resolve) => {
-        messageHandler = (message: RscWorkerOutputMessage) => {
-          switch (message.type) {
-            case "RSC_END":
-              cleanup();
-              resolve(new Uint8Array());
-              return;
-            case "RSC_CHUNK":
-              resolve(message.chunk);
-              return;
-            case "RSC_METRICS":
-              onMetrics?.(message.metrics);
-              break;
-            case "ERROR":
-              cleanup();
-              const errorResponse = onError(message.error);
-              resolve(errorResponse);
-              return;
-          }
-        };
-        worker.once("message", messageHandler);
+        currentResolve = resolve;
+        // Create new message handler for each iteration
+        if (messageHandler) {
+          worker.removeListener("message", messageHandler);
+        }
+        messageHandler = createMessageHandler({
+          handlers,
+          logger,
+        });
+        worker.on("message", messageHandler);
       });
-  
+
       if (chunk.length === 0) {
         break;
       }
+
       yield chunk;
     }
-  }
+  } finally {
+    // Clean up message handler in finally block
+    if (messageHandler) {
+      worker.removeListener("message", messageHandler);
+      messageHandler = null;
+    }
+    handlers.onEnd();
+  }
+}

package/plugin/react-client/plugin.ts

@@ -65,7 +65,6 @@ export function reactClientPlugin(options: StreamPluginOptions): Plugin {
       userConfig = resolvedConfig.userConfig;
       return userConfig;
     },
-
     async configurePreviewServer(server) {
       await configurePreviewServer({
         server,
@@ -82,9 +81,7 @@ export function reactClientPlugin(options: StreamPluginOptions): Plugin {
         autoDiscoveredFiles,
         userOptions,
         hmrChannel,
-        onMetrics: userOptions.onMetrics ? (metrics) => {
-          userOptions.onMetrics?.(metrics);
-        } : undefined,
+        onMetrics: userOptions.onMetrics,
       });
     },
 

package/plugin/react-client/restartWorker.ts

@@ -22,8 +22,8 @@ export async function restartWorker(
     try {
       // Terminate the current worker if it exists
       if (currentWorker) {
-        currentWorker.terminate();
-        currentWorker = null;
+        currentWorker.removeAllListeners();
+        return currentWorker;
       }
       const routeCount = autoDiscoveredFiles.urlMap.size;
       const hmrBuffer = 20; // Buffer for HMR and other operations

package/plugin/react-client/server.ts

@@ -6,21 +6,15 @@ import type {
   ResolvedUserOptions,
   StreamMetrics,
 } from "../types.js";
-import type {
-  RscRenderMessage,
-} from "../worker/types.js";
+import type { RscRenderMessage } from "../worker/types.js";
 import type { Worker as NodeWorker } from "node:worker_threads";
 import { MessageChannel } from "node:worker_threads";
-import {
-  serializedOptions,
-} from "../helpers/serializeUserOptions.js";
-import { getRouteFiles } from "../helpers/getRouteFiles.js";
-import { requestToRoute } from "../helpers/requestToRoute.js";
+import { serializedOptions } from "../helpers/serializeUserOptions.js";
+import { requestInfo } from "../helpers/requestInfo.js";
 import { performance } from "node:perf_hooks";
 import { createWorkerStream } from "./createWorkerStream.js";
 import { restartWorker } from "./restartWorker.js";
 
-
 /**
  * Handles the RSC stream from the worker.
  * Creates a ReadableStream that pipes RSC chunks to the response.
@@ -103,65 +97,45 @@ export async function configureWorkerRequestHandler({
     ...handlerUserOptions
   } = _userOptions;
   const handlerOptions = Object.assign({}, handlerUserOptions, {
-    moduleBaseURL:
-      typeof server.config.server.host === "string"
-        ? `${server.config.server.https ? "https" : "http"}://${
-            server.config.server.host
-          }:${server.config.server.port}`
-        : _moduleBaseURL,
-    moduleBasePath:
-      server.config.base === "/"
-        ? ""
-        : server.config.base.endsWith("/")
-        ? server.config.base.slice(0, -1)
-        : server.config.base,
+    moduleBaseURL: server.config.base,
+    moduleBasePath: _moduleBasePath,
     projectRoot: server.config.root,
   });
 
   // Start the worker
-  const currentWorker = await restartWorker(server, autoDiscoveredFiles, handlerOptions, hmrChannel);
+  const currentWorker = await restartWorker(
+    server,
+    autoDiscoveredFiles,
+    handlerOptions,
+    hmrChannel
+  );
 
   // Create the request handler
   const handler: RequestHandler = async (req, res, next) => {
-    if (!req.url || req.headers.accept !== "text/x-component") return next();
-    try {
-      if (!currentWorker) {
-        server.config.logger.error("[react-client] No worker available");
-        return next();
-      }
+    if (!req.url) return next();
 
-      // Get the route from the request
-      let route = requestToRoute(req, {
-        moduleBasePath: handlerOptions.moduleBasePath,
-        build: handlerOptions.build,
-      });
-      if (!route) {
-        return next();
-      }
-      // in the case of the no build.pages and a async Page and or props userOption, we need to await those
-      // if they are already autoDiscovered then the promise will resolve immediately
-      const routeFiles = await getRouteFiles(
-        route,
-        autoDiscoveredFiles,
-        handlerOptions
-      );
-      if (routeFiles.type === "error") {
-        server.config.logger.error(
-          `[react-client] Error fetching route files for ${route}`,
-          {
-            error: routeFiles.error,
-            timestamp: true,
-            environment: "server",
-          }
-        );
-        return next();
-      }
-      const { page, props } = routeFiles;
+    const info = requestInfo(req, handlerOptions, "");
+    if (!info.isRscRequest) return next();
+
+    if (!currentWorker) {
+      server.config.logger.warn("[react-client] No worker available");
+      return next();
+    }
+
+    if (!autoDiscoveredFiles.urlMap.has(info.route)) {
+      server.config.logger.warn(`[react-client] No route found for route: ${info.route}`);
+      return next();
+    }
+    try {
+      const routeFiles = autoDiscoveredFiles.urlMap.get(info.route)!;
+      const pagePath = routeFiles.page;
+      const propsPath = routeFiles.props;
 
       // Set up response headers for streaming
-      res.setHeader("Content-Type", "text/x-component; charset=utf-8");
+      res.setHeader("Content-Type", info.contentType);
       res.setHeader("Transfer-Encoding", "chunked");
       res.setHeader("Connection", "keep-alive");
+
       const serializedUserOptions = serializedOptions(
         handlerOptions,
         autoDiscoveredFiles
@@ -172,9 +146,9 @@ export async function configureWorkerRequestHandler({
         {
           ...serializedUserOptions,
           // we make the worker stream aware of the route, pagePath, propsPath
-          route,
-          pagePath: page,
-          propsPath: props,
+          route: info.route,
+          pagePath: pagePath,
+          propsPath: propsPath,
           // override these at all times to ensure the settings will work for the dev server
           projectRoot: server.config.root,
           build: serializedUserOptions.build,
@@ -187,7 +161,7 @@ export async function configureWorkerRequestHandler({
           ? (metrics) => {
               const elapsedTime = performance.now() - startTime;
               const formattedMetrics = {
-                route,
+                route: info.route,
                 htmlSize: 0,
                 rscSize: metrics.bytes,
                 processingTime: elapsedTime,
@@ -196,10 +170,10 @@ export async function configureWorkerRequestHandler({
                 memoryUsage: process.memoryUsage(),
                 streamMetrics: {
                   ...metrics,
-                  duration: elapsedTime
+                  duration: elapsedTime,
                 },
                 htmlSizes: new Map(),
-                rscSizes: new Map([[route, metrics.bytes]]),
+                rscSizes: new Map([[info.route, metrics.bytes]]),
               } satisfies RenderMetrics;
               onMetrics(formattedMetrics);
             }

package/plugin/react-server/server.ts

@@ -6,6 +6,7 @@ import { collectViteModuleGraphCss } from "../helpers/collectViteModuleGraphCss.
 import { resolvePageAndProps } from "../helpers/resolvePageAndProps.js";
 import { createHandler } from "../helpers/createHandler.js";
 import React from "react";
+import { requestInfo } from "../helpers/requestInfo.js";
 
 export async function configureReactServer({
   server,
@@ -31,18 +32,8 @@ export async function configureReactServer({
   } = _userOptions;
 
   const handlerOptions = Object.assign({}, handlerUserOptions, {
-    moduleBaseURL:
-      typeof server.config.server.host === "string"
-        ? `${server.config.server.https ? "https" : "http"}://${
-            server.config.server.host
-          }:${server.config.server.port}`
-        : _moduleBaseURL,
-    moduleBasePath:
-      server.config.base === "/"
-        ? ""
-        : server.config.base.endsWith("/")
-        ? server.config.base.slice(0, -1)
-        : server.config.base,
+    moduleBaseURL: server.config.base,
+    moduleBasePath: _moduleBasePath,
     projectRoot: server.config.root,
   });
   // Handle Vite server restarts
@@ -64,32 +55,28 @@ export async function configureReactServer({
   });
 
   server.middlewares.use(async (req, res, next) => {
+    if(!req.url) {
+      return next();
+    }
+    const info = requestInfo(req, handlerOptions, "");
+    if (!info.isRscRequest) return next();
     try {
-      if (req.headers.accept !== "text/x-component") return next();
-      let route = req.url?.replace("/" + handlerOptions.build.rscOutputPath, "");
-      if(handlerOptions.moduleBasePath !== '' && !route?.startsWith(handlerOptions.moduleBasePath)) {
-        next();
-      } else if(route && handlerOptions.moduleBasePath.length) {
-        route  = route.slice(handlerOptions.moduleBasePath.length);
-      }
-      if (!route || route === "") {
-        route = "/";
-      }
-      if(!route.startsWith("/")) {
-        route = "/" + route;
-      }
-      if (!autoDiscoveredFiles.urlMap.has(route)) {
+      if (!autoDiscoveredFiles.urlMap.has(info.route)) {
         return next();
       }
-      const routeFiles = autoDiscoveredFiles.urlMap.get(route)!;
+      const routeFiles = autoDiscoveredFiles.urlMap.get(info.route)!;
       const pagePath = routeFiles.page;
       const propsPath = routeFiles.props;
-
+      const port = server.config.server.port ?? 5173;
+      const host = server.config.server.host ?? 'localhost';
+      const protocol = server.config.server.https ? 'https' : 'http'; 
+      process.env['VITE_BASE_URL'] = `${server.config.base}${server.config.base.endsWith('/') ? '' : '/'}`;
+      process.env['VITE_PUBLIC_ORIGIN'] = `${protocol}://${host}:${port}`;
       // first load the page and props
       const pageAndPropsResult = await resolvePageAndProps({
         pagePath,
         propsPath,
-        route,
+        route: info.route,
         loader: server.ssrLoadModule,
         pageExportName: handlerOptions.pageExportName ?? "default",
         propsExportName: handlerOptions.propsExportName ?? "default",
@@ -130,7 +117,7 @@ export async function configureReactServer({
         onEvent: eventHandler,
         manifest: serverManifest,
         worker: server as any,
-        route,
+        route: info.route,
         pagePath,
         propsPath,
         cssFiles: cssFilesResult.cssFiles ?? new Map(),

package/plugin/react-static/configurePreviewServer.ts

@@ -1,10 +1,14 @@
 import type { PreviewServer } from "vite";
-import { MIME_TYPES } from "../config/mimeTypes.js";
 import type { ResolvedUserOptions } from "../types.js";
 import { join } from "node:path";
 import { createReadStream } from "node:fs";
 import { stat } from "node:fs/promises";
 import { pipeline } from "node:stream/promises";
+import { requestInfo } from "../helpers/requestInfo.js";
+
+interface StreamError extends Error {
+  code?: string;
+}
 
 export async function configurePreviewServer({
   server,
@@ -13,77 +17,86 @@ export async function configurePreviewServer({
   server: PreviewServer;
   userOptions: ResolvedUserOptions;
 }) {
-  const staticHostDir = join(userOptions.projectRoot, userOptions.build.outDir, userOptions.build.static);
+  const staticHostDir = join(
+    userOptions.projectRoot,
+    userOptions.build.outDir,
+    userOptions.build.static
+  );
   server.middlewares.use(async (req, res, next) => {
-    if(!req.url) {
-      console.log("no url")
+    if (!req.url) {
       return next();
     }
-    const [withoutQuery] = req.url.split("?");
-    const [, value] = userOptions.normalizer(withoutQuery);
-    const ext = value.slice(value.lastIndexOf("."));
-    // handle index.html
-    const isHtml = userOptions.autoDiscover.htmlPattern(value)
-    if (isHtml || (req.headers.accept?.includes("text/html"))) {
-      const indexHtml = isHtml ? join(staticHostDir, value) : join(staticHostDir, value, userOptions.build.htmlOutputPath);
-      try {
-        const stats = await stat(indexHtml);
-        if (stats.isFile()) {
-          res.setHeader("Content-Type", "text/html; charset=utf-8");
-          await pipeline(createReadStream(indexHtml), res);
-          return;
-        }
-      } catch {
-        // File doesn't exist, continue to next middleware
-      }
-    } 
-    const isRsc = userOptions.autoDiscover.rscPattern(value)
-    if (isRsc || (req.headers.accept?.includes("text/x-component"))) {
-      const rsc = isRsc ? join(staticHostDir, value) : join(staticHostDir, value, userOptions.build.rscOutputPath);
-      try {
-        const stats = await stat(rsc);
-        if (stats.isFile()) {
-          res.setHeader("Content-Type", "text/x-component; charset=utf-8");
-          await pipeline(createReadStream(rsc), res);
-          return;
-        }
-      } catch {
-        // File doesn't exist, continue to next middleware
-      }
-    }
-    const isCss = userOptions.autoDiscover.cssPattern(value)
-    if (isCss || (req.headers.accept?.includes("text/css") && (ext === ""))) {
-      const css = isCss ? join(staticHostDir, value) : join(staticHostDir, value);
-      try {
-        const stats = await stat(css);
-        if (stats.isFile()) {
-          res.setHeader("Content-Type", "text/css; charset=utf-8");
-          await pipeline(createReadStream(css), res);
-          return;
-        }
-      } catch {
-        // File doesn't exist, continue to next middleware
-      }
-    }
+    const { contentType, filePath } = requestInfo(req, userOptions, staticHostDir);
+    
     // Handle static files including CSS
-    if (ext) {
-      const filePath = join(staticHostDir, value);
+    if (filePath) {
       try {
         const stats = await stat(filePath);
         if (stats.isFile()) {
-          // Set proper MIME type based on file extension
-          const contentType = MIME_TYPES[ext];
-          // Ensure CSS files are served with the correct MIME type
-          if (contentType) {
-            res.setHeader("Content-Type", `${contentType}; charset=utf-8`);
-          } else {
-            res.setHeader("Content-Type", "application/octet-stream");
+          res.setHeader("Content-Type", contentType);
+          
+          // Create abort controller for the stream
+          const controller = new AbortController();
+          const { signal } = controller;
+
+          // Check if response is still writable before streaming
+          if (!res.writable) {
+            res.statusCode = 499;
+            res.end("Client closed request");
+            return;
+          }
+
+          try {
+            const readStream = createReadStream(filePath);
+            readStream.on('error', () => {
+              if (!res.writable) {
+                controller.abort();
+              }
+            });
+            await pipeline(readStream, res, { signal });
+          } catch (error) {
+            const streamError = error as StreamError;
+            // Handle different error cases
+            if (streamError.code === 'ERR_STREAM_PREMATURE_CLOSE' || 
+                streamError.name === 'AbortError') {
+              // Client closed the connection
+              if (res.writable) {
+                res.statusCode = 499;
+                res.end("Client closed request");
+              }
+            } else if (streamError.code === 'ENOENT') {
+              // File not found
+              res.statusCode = 404;
+              server.config.logger.error(`File not found: ${filePath}. ${streamError.message}`, {
+                error: streamError,
+              });
+              res.end("File not found");
+            } else {
+              // Server error
+              server.config.logger.error(`Error loading file: ${filePath}. ${streamError.message}`, {
+                error: streamError,
+              });
+              res.statusCode = 500;
+              res.end("Internal server error");
+            }
+            return;
           }
-          await pipeline(createReadStream(filePath), res);
           return;
         }
-      } catch {
-        // File doesn't exist, continue to next middleware
+      } catch (error) {
+        const err = error as Error;
+        // Handle file system errors
+        if ((err as NodeJS.ErrnoException).code === 'ENOENT') {
+          res.statusCode = 404;
+          res.end("File not found");
+        } else {
+          server.config.logger.error(`Error loading file: ${filePath}.`, {
+            error: err,
+          });
+          res.statusCode = 500;
+          res.end("Internal server error");
+        }
+        return;
       }
     }
     next();