vite-plugin-react-server 1.1.9 → 1.1.11

package/plugin/react-client/server.ts

@@ -1,4 +1,4 @@
-import type { Logger, ViteDevServer } from "vite";
+import type { ViteDevServer } from "vite";
 import type {
   AutoDiscoveredFiles,
   RenderMetrics,
@@ -6,75 +6,16 @@ import type {
   ResolvedUserOptions,
   StreamMetrics,
 } from "../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 { MessageChannel, type Worker } from "node:worker_threads";
+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.
- *
- * @param worker - The worker thread
- * @param message - The RSC render message
- * @returns A ReadableStream that yields RSC chunks
- */
-export function handleWorkerRscStream(
-  worker: NodeWorker,
-  message: Omit<RscRenderMessage, "type" | "id">,
-  logger: Logger,
-  onMetrics?: (metrics: StreamMetrics) => void
-): ReadableStream<Uint8Array> {
-  // Create a ReadableStream from the async generator
-  return new ReadableStream<Uint8Array>({
-    async start(controller) {
-      try {
-        for await (const chunk of createWorkerStream(
-          worker,
-          message,
-          logger,
-          onMetrics
-        )) {
-          controller.enqueue(chunk);
-        }
-      } catch (error) {
-        const err =
-          error instanceof Error
-            ? error
-            : typeof error === "string"
-            ? new Error(error)
-            : typeof error === "object" && error != null
-            ? {
-                message:
-                  "message" in error ? String(error.message) : "Unknown error",
-                stack: "stack" in error ? String(error.stack) : "",
-                name: "name" in error ? String(error.name) : "Error",
-              }
-            : {
-                message: "Unknown error",
-                stack: "",
-                name: "Error",
-              };
-        logger.error(err.message, {
-          error: err,
-        });
-        controller.error(err);
-      } finally {
-        controller.close();
-      }
-    },
-  });
-}
+import { handleWorkerRscStream } from "./handleWorkerRscStream.js";
+import { getRouteFiles } from "../helpers/getRouteFiles.js";
+import type { RscWorkerInputMessage } from "../worker/types.js";
+import { Readable } from "node:stream";
+import { ReadableStream } from "node:stream/web";
 
 /**
  * Configures the worker request handler.
@@ -99,95 +40,77 @@ export async function configureWorkerRequestHandler({
     // remove these
     projectRoot: _projectRoot,
     moduleBaseURL: _moduleBaseURL,
-    moduleBasePath: _moduleBasePath,
     ...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: server.config.base,
     projectRoot: server.config.root,
   });
 
   // Start the worker
-  const currentWorker = await restartWorker(server, autoDiscoveredFiles, handlerOptions, hmrChannel);
+  let currentWorker: Worker | null = null;
+  const logger = server.config.logger;
+
+  // Handle server restarts
+  server.ws.on("restart", async () => {
+    logger.info("[react-client] Server restarting, shutting down worker...");
+    if (currentWorker) {
+      currentWorker.postMessage({
+        type: "SHUTDOWN",
+        id: "*",
+      } satisfies RscWorkerInputMessage);
+      await new Promise((resolve, reject) => {
+        currentWorker?.on("message", (message) => {
+          if (message.type === "SHUTDOWN_COMPLETE") {
+            resolve(true);
+          } else {
+            reject("Did not receive SHUTDOWN_COMPLETE");
+          }
+        });
+      });
+      currentWorker.removeAllListeners();
+      currentWorker = null;
+    }
+  });
 
   // 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();
+    if (handlerOptions.verbose) logger.info(`Received request: ${req.url}`);
 
-      // 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 (handlerOptions.verbose)
+      logger.info(`Request info: ${JSON.stringify(info)}`);
 
+    const routeFiles = await getRouteFiles(
+      info.route,
+      autoDiscoveredFiles,
+      handlerOptions
+    );
+    if (routeFiles.type === "error") {
+      logger.error(routeFiles.error.message);
+      return next();
+    }
+    const pagePath = routeFiles.page;
+    const propsPath = routeFiles.props;
+    try {
       // 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
       );
-      const startTime = performance.now();
-      const stream = handleWorkerRscStream(
-        currentWorker,
-        {
-          ...serializedUserOptions,
-          // we make the worker stream aware of the route, pagePath, propsPath
-          route,
-          pagePath: page,
-          propsPath: props,
-          // override these at all times to ensure the settings will work for the dev server
-          projectRoot: server.config.root,
-          build: serializedUserOptions.build,
-          manifest: autoDiscoveredFiles.staticManifest,
-          cssFiles: new Map(),
-          globalCss: new Map(),
-        },
-        server.config.logger,
+      const userOnMetrics =
         typeof onMetrics === "function"
-          ? (metrics) => {
+          ? (metrics: StreamMetrics) => {
               const elapsedTime = performance.now() - startTime;
               const formattedMetrics = {
-                route,
+                route: info.route,
                 htmlSize: 0,
                 rscSize: metrics.bytes,
                 processingTime: elapsedTime,
@@ -196,52 +119,94 @@ 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);
             }
-          : undefined
-      );
-      const writeStream = new WritableStream({
-        write(chunk) {
-          res.write(chunk);
-        },
-
-        close() {
-          clearTimeout(timeout);
-          res.end();
+          : () => {};
+      const startTime = performance.now();
+      if (!currentWorker) {
+        currentWorker = await restartWorker({
+          server,
+          autoDiscoveredFiles,
+          userOptions: serializedUserOptions,
+          hmrChannel,
+        });
+      }
+      const stream = handleWorkerRscStream({
+        worker: currentWorker!,
+        message: {
+          ...serializedUserOptions,
+          // we make the worker stream aware of the route, pagePath, propsPath
+          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,
+          manifest: autoDiscoveredFiles.staticManifest,
+          cssFiles: new Map(),
+          globalCss: new Map(),
         },
-        abort() {
-          clearTimeout(timeout);
-          // Restart worker on error
-          restartWorker(
-            server,
-            autoDiscoveredFiles,
-            handlerOptions,
-            hmrChannel
-          );
-          res.end();
+        logger,
+        handlers: {
+          onMetrics: userOnMetrics,
+          onHmrAccept: () => {
+            // TODO: implement
+           // console.log("onHmrAccept", routes);
+          },
+          onHmrUpdate: () => {
+            // TODO: implement
+           // console.log("onHmrUpdate", routes);
+          },
         },
+        verbose: handlerOptions.verbose,
       });
-      let timeout: NodeJS.Timeout;
 
       // Pipe the stream to the response
-      stream.pipeTo(writeStream);
+      if (res.writable) {
+        Readable.fromWeb(stream as unknown as ReadableStream).pipe(res);
+      }
       // wait for timeout
-      timeout = setTimeout(() => {
-        server.config.logger.error("RSC render timeout");
-        res.end();
-      }, 5000);
     } catch (error) {
       if (error instanceof Error) {
-        server.config.logger.error(error.message, {
+        server.config.logger.error(error.message + (error.stack ?? ""), {
           error,
         });
       }
     }
+    let timeout: NodeJS.Timeout;
+    try {
+      await new Promise((reject) => {
+        timeout = setTimeout(() => {
+          clearTimeout(timeout);
+          reject(new Error("RSC Render timeout"));
+        }, 5000);
+      });
+    } catch {
+      if (currentWorker) {
+        currentWorker.postMessage({
+          type: "SHUTDOWN",
+          id: "*",
+        } satisfies RscWorkerInputMessage);
+        await new Promise((resolve, reject) => {
+          currentWorker?.on("message", (message) => {
+            if (message.type === "SHUTDOWN_COMPLETE") {
+              resolve(true);
+            } else {
+              reject("Dit not receive SHUTDOWN_COMPLETE");
+            }
+          });
+        });
+        currentWorker.removeAllListeners();
+      }
+      server.config.logger.error("RSC render timeout.");
+      clearTimeout(timeout!);
+      res.end();
+    }
   };
   // attach handler to the server
   server.middlewares.use(handler);

package/plugin/react-server/plugin.ts

@@ -17,14 +17,13 @@ import type {
 import { type StreamPluginOptions } from "../types.js";
 import {
   resolveAutoDiscover
-} from "../config/resolveAutoDiscover.js";
+} from "../config/autoDiscover/resolveAutoDiscover.js";
 import { getCondition } from "../config/getCondition.js";
 import { configureReactServer } from "./server.js";
 import { configurePreviewServer } from "../react-static/configurePreviewServer.js";
 import { getBundleManifest } from "../helpers/getBundleManifest.js";
 
 let resolvedConfig: ResolvedConfig | null = null;
-let cwd: string;
 
 if (getCondition() !== "react-server") {
   throw new Error(
@@ -48,25 +47,27 @@ export function reactServerPlugin(options: StreamPluginOptions): VitePlugin<{
     throw resolvedOptions.error;
   }
   userOptions = resolvedOptions.userOptions;
-  cwd = process.cwd();
-  if (
-    userOptions.projectRoot != cwd &&
-    typeof userOptions.projectRoot === "string" &&
-    userOptions.projectRoot !== ""
-  ) {
-    throw new Error(
-      "[RSC] Project root is not the current working directory, please set projectRoot in your config"
-    );
-  }
+  
 
   return {
     name: "vite:react-stream-server",
     enforce: "post",
     api: {
       meta: { timing },
-    },
+    },  
     configResolved(_resolvedConfig) {
       resolvedConfig = _resolvedConfig;
+      if (
+        userOptions.projectRoot != resolvedConfig.root &&
+        typeof userOptions.projectRoot === "string" &&
+        userOptions.projectRoot !== ""
+      ) {
+        throw new Error(
+          "[RSC] Project root is not the current working directory, please set projectRoot in your config.\n" +
+            " projectRoot: " + userOptions.projectRoot + "\n" +
+            " resolvedConfig.root: " + resolvedConfig.root
+        );
+      }
       timing.configResolved = performance.now();
 
       // Verify transformer runs first, preserver runs last
@@ -132,6 +133,18 @@ export function reactServerPlugin(options: StreamPluginOptions): VitePlugin<{
 
       return resolvedConfig.userConfig;
     },
+    async writeBundle(options, bundle) {
+      if (userOptions.onEvent) {
+        userOptions.onEvent({
+          type: "build.writeBundle.server",
+          data: {
+            pages: Array.from(autoDiscoveredFiles?.urlMap.keys() ?? []),
+            options,
+            bundle,
+          },
+        });
+      }
+    },
     async buildStart() {
       if (!timing.buildStart) {
         timing.buildStart = performance.now();

package/plugin/react-server/server.ts

@@ -6,6 +6,9 @@ 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";
+import { getRouteFiles } from "../helpers/getRouteFiles.js";
+import { toError } from "../error/toError.js";
 
 export async function configureReactServer({
   server,
@@ -19,32 +22,19 @@ export async function configureReactServer({
   serverManifest: Manifest;
 }) {
   const activeStreams = new Set<ServerResponse>();
-
   const {
     Html: _UserHtmlComponent,
     onEvent,
     // remove these
     moduleBaseURL: _moduleBaseURL,
-    moduleBasePath: _moduleBasePath,
     projectRoot: _projectRoot,
     ...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,
     projectRoot: server.config.root,
   });
+
   // Handle Vite server restarts
   server.ws.on("restart", (path) => {
     server.config.logger.info(
@@ -55,33 +45,32 @@ export async function configureReactServer({
     // Close streams with restart message
     for (const res of activeStreams) {
       res.writeHead(503, {
-        "Content-Type": "text/x-component",
+        "Content-Type": "text/x-component; charset=utf-8",
         "Retry-After": "1",
       });
-      res.end(`0:E{"digest":"","name":"Error","message":"Server restarting...","stack":"","env":"Server"}`);
+      res.end(
+        `0:E{"digest":"","name":"Error","message":"Server restarting...","stack":"","env":"Server"}`
+      );
     }
     activeStreams.clear();
   });
 
   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)) {
+      const routeFiles = await getRouteFiles(
+        info.route,
+        autoDiscoveredFiles,
+        handlerOptions
+      );
+      if (routeFiles.type === "error") {
+        server.config.logger.error(routeFiles.error.message);
         return next();
       }
-      const routeFiles = autoDiscoveredFiles.urlMap.get(route)!;
       const pagePath = routeFiles.page;
       const propsPath = routeFiles.props;
 
@@ -89,7 +78,7 @@ export async function configureReactServer({
       const pageAndPropsResult = await resolvePageAndProps({
         pagePath,
         propsPath,
-        route,
+        route: info.route,
         loader: server.ssrLoadModule,
         pageExportName: handlerOptions.pageExportName ?? "default",
         propsExportName: handlerOptions.propsExportName ?? "default",
@@ -129,14 +118,16 @@ export async function configureReactServer({
         Html: React.Fragment,
         onEvent: eventHandler,
         manifest: serverManifest,
-        worker: server as any,
-        route,
+        server,
+        route: info.route,
         pagePath,
         propsPath,
         cssFiles: cssFilesResult.cssFiles ?? new Map(),
         globalCss: new Map(),
       });
       if (rscResult.type === "success") {
+        // set headers
+        res.setHeader("Content-Type", "text/x-component; charset=utf-8");
         rscResult.stream!.pipe(res);
       }
       activeStreams.add(res);
@@ -144,7 +135,21 @@ export async function configureReactServer({
         activeStreams.delete(res);
       });
     } catch (error) {
+      server.config.logger.error(toError(error).message);
       res.end();
     }
   });
+  // Listen for when the server actually starts
+  server.httpServer?.once("listening", () => {
+    const address = server.httpServer?.address();
+    if (address && typeof address !== "string") {
+      const port = address.port;
+      const host = server.config.server.host ?? "localhost";
+      const protocol = server.config.server.https ? "https" : "http";
+      handlerOptions.publicOrigin = `${protocol}://${host}:${port}`;
+      if (handlerOptions.publicOrigin !== process.env.VITE_PUBLIC_ORIGIN) {
+        process.env.VITE_PUBLIC_ORIGIN = handlerOptions.publicOrigin;
+      }
+    }
+  });
 }

package/plugin/react-static/collectHtmlWorkerContent.ts

@@ -25,6 +25,9 @@ export async function collectHtmlWorkerContent(
   rscStream: PassThrough,
   handlerOptions: CreateHandlerOptions
 ): Promise<{ stream: PassThrough; metrics: StreamMetrics }> {
+  if (!handlerOptions.worker) {
+    throw new Error("Worker is not a valid worker");
+  }
   const metrics = createStreamMetrics();
   const startTime = performance.now();
 
@@ -56,7 +59,13 @@ export async function collectHtmlWorkerContent(
 
   // Create a promise that resolves when the route is complete
   const routeComplete = new Promise<void>((resolve, reject) => {
+    if (!handlerOptions.worker) {
+      throw new Error("Worker is not a valid worker");
+    }
     const messageHandler = (msg: any) => {
+      if (!handlerOptions.worker) {
+        throw new Error("Worker is not a valid worker");
+      }
       switch (msg.type) {
         case "HTML_CHUNK":
           if (!isComplete) {
@@ -90,7 +99,10 @@ export async function collectHtmlWorkerContent(
     if (handlerOptions.onEvent) {
       const originalOnEvent = handlerOptions.onEvent;
       handlerOptions.onEvent = (event) => {
-        if (event.type === "file.write.done" && event.data.fileType === "html") {
+        if (
+          event.type === "file.write.done" &&
+          event.data.fileType === "html"
+        ) {
           metrics.bytes = event.data.content.length;
         }
         originalOnEvent(event);