vite-plugin-react-server 1.1.7 → 1.1.9

package/plugin/react-static/collectRscContent.ts

@@ -28,7 +28,7 @@ export async function collectRscContent(
   handlerOptions: CreateHandlerOptions
 ): Promise<{ stream: PassThrough; metrics: StreamMetrics }> {
   const metrics = createStreamMetrics();
-  const startTime = performance.now()
+  const startTime = performance.now();
 
   const outputPath = join(
     handlerOptions.build.outDir,
@@ -49,7 +49,7 @@ export async function collectRscContent(
       callback(null, chunk);
     },
     flush(callback) {
-      metrics.duration = Date.now() - startTime;
+      metrics.duration = performance.now() - startTime;
       callback();
     }
   });

package/plugin/react-static/configurePreviewServer.ts

@@ -16,12 +16,15 @@ export async function configurePreviewServer({
   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")
       return next();
     }
-    const [, value] = userOptions.normalizer(req.url);
+    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")) {
+    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);
@@ -35,7 +38,7 @@ export async function configurePreviewServer({
       }
     } 
     const isRsc = userOptions.autoDiscover.rscPattern(value)
-    if (isRsc || req.headers.accept?.includes("text/x-component")) {
+    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);
@@ -48,14 +51,34 @@ export async function configurePreviewServer({
         // File doesn't exist, continue to next middleware
       }
     }
-    const ext = value.slice(value.lastIndexOf("."));
+    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
+      }
+    }
+    // Handle static files including CSS
     if (ext) {
       const filePath = join(staticHostDir, value);
       try {
         const stats = await stat(filePath);
         if (stats.isFile()) {
-          const contentType = MIME_TYPES[ext] || "application/octet-stream";
-          res.setHeader("Content-Type", `${contentType}; charset=utf-8`);
+          // 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");
+          }
           await pipeline(createReadStream(filePath), res);
           return;
         }

package/plugin/react-static/fileWriter.ts

@@ -43,7 +43,11 @@ export async function fileWriter(
   );
 
   // Ensure directory exists
-  await mkdir(join(options.build.outDir, options.build.static, options.route), { recursive: true });
+  try {
+    await mkdir(join(options.build.outDir, options.build.static, options.route), { recursive: true });
+  } catch (error) {
+    console.error(`Error creating directory: ${error}`);
+  }
 
   // Create write stream
   const writeStream = createWriteStream(outputPath);

package/plugin/react-static/plugin.ts

@@ -48,6 +48,7 @@ import {
 import { collectManifestCss } from "../helpers/collectManifestCss.js";
 import { createCssProps } from "../helpers/createCssProps.js";
 import { tryManifest } from "../helpers/tryManifest.js";
+import { performance } from "node:perf_hooks";
 
 if (getCondition() !== "react-server") {
   throw new Error(
@@ -138,7 +139,6 @@ export function reactStaticPlugin(options: StreamPluginOptions): VitePlugin<{
       timing.renderStart = Date.now();
     },
 
-
     async writeBundle(options, bundle) {
       try {
         const bundleManifest = getBundleManifest<false>({
@@ -159,10 +159,7 @@ export function reactStaticPlugin(options: StreamPluginOptions): VitePlugin<{
 
         const clientManifestResult = await tryManifest({
           root: userOptions.projectRoot,
-          outDir: join(
-            userOptions.build.outDir,
-            userOptions.build.client
-          ),
+          outDir: join(userOptions.build.outDir, userOptions.build.client),
           ssrManifest: false,
         });
         if (clientManifestResult.type === "error") {
@@ -195,15 +192,29 @@ export function reactStaticPlugin(options: StreamPluginOptions): VitePlugin<{
         // Collect CSS files for each page and its props
         for (const [url, { page, props }] of autoDiscoveredFiles?.urlMap ??
           []) {
+          const transformedServerManifest = Object.fromEntries(
+            Object.entries(serverManifest).map(([key, value]) => {
+              if (!value.css?.length) {
+                return [key, value];
+              }
+              return [
+                key,
+                {
+                  ...value,
+                  css:
+                    autoDiscoveredFiles?.staticManifest[key]?.css ?? value.css,
+                },
+              ];
+            })
+          );
           const cssInputs = collectManifestCss(
-            serverManifest,
+            transformedServerManifest,
             props ? [page, props] : page,
             userOptions
           );
 
           // Create a map for this page's CSS files
           const pageCssMap: Map<string, CssContent> = new Map();
-
           // Add global styles if they exist
           if (Object.keys(globalCssInputs).length > 0) {
             for (const [, value] of Object.entries(globalCssInputs)) {
@@ -219,11 +230,7 @@ export function reactStaticPlugin(options: StreamPluginOptions): VitePlugin<{
                   createCssProps({
                     id: value,
                     code: cssContent,
-                    css: userOptions.css,
-                    moduleBaseURL: userOptions.moduleBaseURL,
-                    moduleBasePath: userOptions.moduleBasePath,
-                    moduleRootPath: userOptions.moduleRootPath,
-                    projectRoot: userOptions.projectRoot,
+                    userOptions: userOptions,
                   })
                 );
               }
@@ -232,25 +239,28 @@ export function reactStaticPlugin(options: StreamPluginOptions): VitePlugin<{
 
           // Add page-specific styles
           for (const [, value] of Object.entries(cssInputs)) {
-            const { default: cssContent } = await buildLoader(
-              value + "?inline"
-            );
-            if (typeof cssContent !== "string") {
-              continue;
-            }
-            if (cssContent) {
-              pageCssMap.set(
-                value,
-                createCssProps({
-                  id: value,
-                  code: cssContent,
-                  css: userOptions.css,
-                  moduleBaseURL: userOptions.moduleBaseURL,
-                  moduleBasePath: userOptions.moduleBasePath,
-                  moduleRootPath: userOptions.moduleRootPath,
-                  projectRoot: userOptions.projectRoot,
-                })
+            try {
+              const { default: cssContent } = await buildLoader(
+                value + "?inline"
               );
+              if (typeof cssContent !== "string") {
+                continue;
+              }
+              if (cssContent) {
+                // Ensure the CSS file path is properly resolved
+                const cssPath = value.startsWith("/") ? value.slice(1) : value;
+                pageCssMap.set(
+                  cssPath,
+                  createCssProps({
+                    id: cssPath,
+                    code: cssContent,
+                    userOptions: userOptions,
+                  })
+                );
+              }
+            } catch (error) {
+              console.warn(`Failed to process CSS file ${value}:`, error);
+              continue;
             }
           }
           cssFilesByPage.set(url, pageCssMap);
@@ -269,17 +279,19 @@ export function reactStaticPlugin(options: StreamPluginOptions): VitePlugin<{
         }
         const staticManifest = autoDiscoveredFiles?.staticManifest ?? {};
         const indexHtml = staticManifest?.["index.html"]?.file;
+        const safeParseURL = (() => {
+          try {
+            return new URL(join(userOptions.moduleBasePath, indexHtml), userOptions.moduleBaseURL).href;
+          } catch (error) {
+            return userOptions.moduleBaseURL + join(userOptions.moduleBasePath, indexHtml);
+          }
+        })();
         const pipeableStreamOptions = {
           ...userOptions.pipeableStreamOptions,
           bootstrapModules: [
-            ...(indexHtml
+            ...(safeParseURL
               ? [
-                  userOptions.moduleBaseURL !== ""
-                    ? new URL(
-                        join(userOptions.moduleBasePath, indexHtml),
-                        userOptions.moduleBaseURL
-                      ).href
-                    : join(userOptions.moduleBasePath, indexHtml),
+                  safeParseURL,
                 ]
               : []),
             ...(userOptions.pipeableStreamOptions?.bootstrapModules ?? []),
@@ -292,12 +304,20 @@ export function reactStaticPlugin(options: StreamPluginOptions): VitePlugin<{
         );
         // Create worker
         if (!worker) {
-          const viteEnvPrefix = typeof resolvedConfig.envPrefix === 'string' ? resolvedConfig.envPrefix : Array.isArray(resolvedConfig.envPrefix) ? resolvedConfig.envPrefix[0] : 'VITE_'
+          const viteEnvPrefix =
+            typeof resolvedConfig.envPrefix === "string"
+              ? resolvedConfig.envPrefix
+              : Array.isArray(resolvedConfig.envPrefix)
+              ? resolvedConfig.envPrefix[0]
+              : "VITE_";
+          const routeCount = autoDiscoveredFiles?.urlMap.size ?? 0;
+          const maxListeners = routeCount + 1;
           const workerResult = await createWorker({
             projectRoot: userOptions.projectRoot,
             workerPath: userOptions.htmlWorkerPath,
             currentCondition: "react-server",
             reverseCondition: "react-client",
+            maxListeners: maxListeners,
             envPrefix: viteEnvPrefix,
             workerData: {
               resolvedConfig: serializeResolvedConfig(resolvedConfig),

package/plugin/types.ts

@@ -1,25 +1,25 @@
+import { Readable } from "node:stream";
+import type { MessagePort } from "node:worker_threads";
+import type React from "react";
+import type { PropsWithChildren } from "react";
 import type {
   NormalizedOutputOptions,
   OutputBundle,
+  PreRenderedAsset,
   PreRenderedChunk,
 } from "rollup";
-import type { PreRenderedAsset } from "rollup";
+import type { PassThrough, Transform } from "stream";
 import type {
-  UserConfig,
-  BuildOptions,
-  InlineConfig,
   AliasOptions,
+  BuildOptions,
   Connect,
-  ResolveOptions,
-  Manifest,
+  InlineConfig,
   Logger,
+  Manifest,
+  ResolveOptions,
+  UserConfig,
 } from "vite";
 import type { ReactServerDomEsmOptions } from "./worker/types.js";
-import type React from "react";
-import type { PassThrough, Transform } from "stream";
-import type { MessagePort } from "node:worker_threads";
-import type { PropsWithChildren } from "react";
-import { Readable } from "node:stream";
 
 export type OnEvent = (event: PluginEvent) => void;
 

package/plugin/utils/callServer.ts

@@ -0,0 +1,25 @@
+// @ts-nocheck
+import { createFromFetch, encodeReply } from "react-server-dom-esm/client.browser";
+
+type ServerResponse = { returnValue: unknown };
+
+  export const callServer = async (
+    id: string,
+    args: unknown[]
+  ): Promise<unknown> => {
+    let baseURL = import.meta.env.BASE_URL
+    const response = await createFromFetch(
+      fetch(baseURL, {
+        method: "POST",
+        body: await encodeReply(args),
+        headers: {
+          Accept: "application/json",
+          "Content-Type": "application/json",
+        },
+      }),
+      { callServer, moduleBaseURL: baseURL }
+    );
+    const returnValue = (response as ServerResponse).returnValue;
+    return returnValue;
+  };
+  

package/plugin/utils/createReactFetcher.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+// @ts-ignore
+import { createFromFetch } from "react-server-dom-esm/client.browser";
+import { callServer } from "./callServer.js";
+import { pageURL } from "./pageURL.js";
+
+export function createReactFetcher({
+  url = pageURL().pathname,
+  moduleBaseURL = new URL(import.meta.env.BASE_URL, window.location.href).href,
+  headers = {
+    Accept: "text/x-component",
+  },
+}: {
+  url?: string;
+  moduleBaseURL?: string;
+  headers?: HeadersInit;
+} = {}): Promise<ReactNode> {
+  if(moduleBaseURL.endsWith("/")) {
+    moduleBaseURL = moduleBaseURL.slice(0, -1)
+  }
+  console.log("createReactFetcher", {url, moduleBaseURL})
+  return createFromFetch(
+    fetch(url, {
+      headers: headers,
+    }),
+    {
+      callServer: callServer,
+      moduleBaseURL:moduleBaseURL,
+    }
+  ) as Promise<ReactNode>;
+}

package/plugin/utils/index.ts

@@ -0,0 +1,3 @@
+export * from "./createReactFetcher.js";
+export * from "./callServer.js";
+export * from "./pageURL.js";

package/plugin/utils/pageURL.ts

@@ -0,0 +1,28 @@
+export const pageURL = () => {
+  const pathname = window.location.pathname;
+  const baseUrl = import.meta.env.BASE_URL;
+  
+  // Remove base URL from pathname if it exists
+  const relativePath = pathname.startsWith(baseUrl) 
+    ? pathname.slice(baseUrl.length) 
+    : pathname;
+
+  // Handle root path and index.html
+  if (relativePath === '/' || relativePath === '' || relativePath === '/index.html' || relativePath === 'index.html') {
+    return new URL('/index.rsc', window.location.origin);
+  }
+
+  // Get the path without extension and remove any trailing index
+  const pathWithoutExt = relativePath
+    .replace(/\.(html|rsc)$/, '')
+    .replace(/\/index$/, '');
+  
+  // Construct the RSC path
+  const rscPath = pathWithoutExt === '' ? '/index.rsc' : `${pathWithoutExt}/index.rsc`;
+  
+  // Ensure no double slashes and ensure leading slash
+  const cleanPath = ('/' + rscPath.replace(/\/+/g, '/')).replace(/\/+/g, '/');
+  
+  console.log("cleanPath", {cleanPath, rscPath, pathWithoutExt, relativePath, baseUrl, pathname})
+  return new URL(cleanPath, window.location.origin);
+};

package/plugin/worker/rsc/handleRender.ts

@@ -1,9 +1,3 @@
-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";
@@ -11,43 +5,20 @@ 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 { workerData } from "node:worker_threads";
 import { React } from "../../vendor.server.js";
 import { hmrState } from "./state.js";
-
+import { performance } from "node:perf_hooks";
 
 export async function handleRender(
   msg: RscRenderMessage,
-  port = parentPort,
-  _reactLoaderPort: MessagePort,
-  _cssLoaderPort: MessagePort
+  handlers: {
+    onError: (error: any, errorInfo?: any) => void;
+    onData: (data: any) => void;
+    onEnd: () => void;
+    onMetrics: (metrics: any) => void;
+  }
 ) {
-  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,
@@ -73,30 +44,30 @@ export async function handleRender(
       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()}`);
+      loader: (id: string) => {
+        try {
+          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));
+        } catch (error) {
+          return Promise.reject(error);
         }
-        return import(join(projectRoot, id));
       },
     });
-
     if (pageAndPropsResult.type !== "success") {
-      if (pageAndPropsResult.type === "error") {
-        postError(pageAndPropsResult.error);
-      }
-      return;
+      const { error, ...rest } = pageAndPropsResult;
+      return handlers.onError(error, rest);
     }
 
     const { PageComponent, pageProps } = pageAndPropsResult;
 
     const adaptedOnEvent = (event: "error" | "postpone", data: any) => {
       if (event === "error") {
-        postError(data.error, data.errorInfo);
+        handlers.onError(data.error, data.errorInfo);
       }
     };
 
@@ -128,7 +99,7 @@ export async function handleRender(
     });
 
     if (streamResult.type !== "success") {
-      postError(streamResult.error);
+      handlers.onError(streamResult.error);
       return;
     }
 
@@ -143,38 +114,29 @@ export async function handleRender(
 
     // Handle data chunks
     passThrough.on("data", (chunk) => {
-      port?.postMessage({
-        type: "RSC_CHUNK",
-        id,
-        chunk,
-      } satisfies RscChunkOutputMessage);
+      metrics.chunks++;
+      metrics.bytes += chunk.length;
+      metrics.duration = performance.now() - metrics.startTime;
+      handlers.onData(chunk);
     });
 
     // Handle stream end
     passThrough.on("end", () => {
-      port?.postMessage({
-        type: "RSC_END",
-        id,
-      } satisfies RscEndMessage);
+      metrics.duration = performance.now() - metrics.startTime;
+      handlers.onEnd();
       if (activeStreams.has(id)) {
-        port?.postMessage({
-          type: "RSC_METRICS",
-          id,
-          metrics,
-        } satisfies RscMetricsMessage);
+        handlers.onMetrics(metrics);
         activeStreams.delete(id);
       }
     });
 
     // Handle errors
     passThrough.on("error", (error) => {
-      postError(error as Error);
+      handlers.onError(error as Error, { reason: `${id} stream error` });
       activeStreams.delete(id);
     });
   } catch (error) {
-    if (process.env["DEV"]) {
-      console.error(`[Stream ${id}] Error:`, error);
-    }
-    postError(error as Error);
+    handlers.onError(error as Error, { reason: `${id} render error` });
+    return Promise.reject(error);
   }
 }

package/plugin/worker/rsc/messageHandler.tsx

@@ -1,19 +1,60 @@
-import { parentPort, workerData, type MessagePort } from "node:worker_threads";
+import { parentPort, workerData } from "node:worker_threads";
 import { addCssFileContent, hmrState } from "./state.js";
 import { handleRender } from "./handleRender.js";
+import type { RscWorkerOutputMessage } from "../types.js";
 
-export function messageHandler(
+export async function messageHandler(
   msg: any,
   port = parentPort,
-  reactLoaderPort: MessagePort,
-  cssLoaderPort: MessagePort
 ) {
   if (!port) {
     throw new Error("No port found");
   }
+  const handlers = {
+    onError: (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);
+      port.postMessage({
+        type: "RSC_END",
+        id: msg.id,
+      } satisfies RscWorkerOutputMessage);
+    },
+    onData: (data: any) => {
+      port.postMessage({
+        type: "RSC_CHUNK",
+        id: msg.id,
+        chunk: data,
+      } satisfies RscWorkerOutputMessage);
+    },
+    onEnd: () => {
+      port.postMessage({
+        type: "RSC_END",
+        id: msg.id,
+      } satisfies RscWorkerOutputMessage);
+    },
+    onMetrics: (metrics: any) => {
+      port.postMessage({
+        type: "RSC_METRICS",
+        id: msg.id,
+        metrics,
+      } satisfies RscWorkerOutputMessage);
+    },
+  };
   switch (msg.type) {
     case "RSC_RENDER":
-      return handleRender(msg, port, reactLoaderPort, cssLoaderPort);
+      return await handleRender(msg, handlers);
     case "INITIALIZED_REACT_LOADER":
       return;
     case "INITIALIZED_CSS_LOADER":
@@ -46,7 +87,7 @@ export function messageHandler(
         const cssOptions = workerData.userOptions.css || {
           inlineThreshold: 1000,
         };
-        
+
         addCssFileContent(msg.id, msg.content, {
           projectRoot: workerData.userOptions.projectRoot || process.cwd(),
           moduleBaseURL: workerData.userOptions.moduleBaseURL || "",
@@ -57,6 +98,7 @@ export function messageHandler(
       }
       return;
     default: {
+      console.log("messageHandler", { msg: msg.type });
       return;
     }
   }

package/plugin/worker/rsc/state.ts

@@ -70,11 +70,7 @@ export function addCssFileContent(id: string, code: string, userOptions: Pick<Re
   cssFiles.set(normalizeId, createCssProps({
     id,
     code,
-    projectRoot: userOptions.projectRoot,
-    moduleBaseURL: userOptions.moduleBaseURL,
-    moduleBasePath: userOptions.moduleBasePath,
-    moduleRootPath: userOptions.moduleRootPath,
-    css: userOptions.css,
+    userOptions
   }));
 }