vite-plugin-react-server 1.1.18 → 1.1.19

package/plugin/loader/types.ts

@@ -1,10 +1,18 @@
-import type { Program as AcornProgram, Statement } from "acorn";
+import type { Program as AcornProgram, Statement, Node as AcornNode } from "acorn";
 
 // Directive is a special type in Acorn that extends ExpressionStatement
 export type Directive = Statement & {
   directive: string;
 };
 
-export interface Program extends AcornProgram {
-  exports?: string[];
-}
+export type Node = AcornNode;
+
+export interface ExportInfo {
+  name: string;
+  localName?: string;
+  type: "function" | "variable" | "class" | "unknown";
+  isServerAction?: boolean;
+  node?: Node;
+}
+
+export type Program = AcornProgram;

package/plugin/react-client/configureWorkerRequestHandler.ts

@@ -18,8 +18,7 @@ import { getRouteFiles } from "../helpers/getRouteFiles.js";
 import type { RscWorkerInputMessage } from "../worker/types.js";
 import { Readable } from "node:stream";
 import type { ReadableStream } from "node:stream/web";
-import { PassThrough } from "node:stream";
-import { logError, toError } from "../error/toError.js";
+import { handleWorkerServerAction } from "./handleWorkerServerAction.js";
 
 /**
  * Configures the worker request handler.
@@ -95,93 +94,18 @@ export async function configureWorkerRequestHandler<
 
     // Handle server action requests
     if (info.isServerActionRequest) {
-      try {
-        // Read request body
-        const chunks: Buffer[] = [];
-        for await (const chunk of req) {
-          chunks.push(chunk);
-        }
-        const body = Buffer.concat(chunks).toString();
-        const parsed = JSON.parse(body);
-
-        // Get action ID and args from the request body
-        let id: string;
-        let args: unknown[];
-        if (Array.isArray(parsed)) {
-          // Format 1: Direct args array
-          args = parsed;
-          id = req.url?.split("?")[0] ?? "";
-        } else if (parsed && typeof parsed === "object" && "id" in parsed) {
-          // Format 2: Object with id and args
-          id = parsed.id;
-          args = parsed.args ?? [];
-        } else {
-          throw new Error("Invalid server action request format");
-        }
-
-        // Set up response headers for streaming
-        res.setHeader("Content-Type", "text/x-component; charset=utf-8");
-        res.setHeader("Transfer-Encoding", "chunked");
-        res.setHeader("Connection", "keep-alive");
-
-        if (!currentWorker) {
-          currentWorker = await restartWorker({
-            server,
-            autoDiscoveredFiles,
-            userOptions: serializedUserOptions,
-            hmrChannel,
-          });
-        }
-
-        // Send server action request to worker
-        currentWorker!.postMessage({
-          type: "SERVER_ACTION",
-          id,
-          args,
-        } satisfies RscWorkerInputMessage);
-
-        // Create a pass-through stream for the response
-        const passThrough = new PassThrough();
-        passThrough.pipe(res);
-
-        // Handle worker messages
-        const messageHandler = (message: any) => {
-          if (message.type === "RSC_CHUNK") {
-            passThrough.write(message.chunk);
-          } else if (message.type === "RSC_END") {
-            passThrough.end();
-            currentWorker!.removeListener("message", messageHandler);
-          } else if (message.type === "ERROR") {
-            passThrough.end();
-            currentWorker!.removeListener("message", messageHandler);
-            logError(message.error, server.config.logger);
-          }
-        };
-
-        currentWorker!.on("message", messageHandler);
-
-        // Handle errors
-        passThrough.on("error", (error) => {
-          logError(error, server.config.logger);
-          res.end();
+      if (!currentWorker) {
+        currentWorker = await restartWorker({
+          server,
+          autoDiscoveredFiles,
+          userOptions: serializedUserOptions,
+          hmrChannel,
         });
-
-        return;
-      } catch (error) {
-        const err = toError(error);
-        logError(err, server.config.logger);
-        res.statusCode = 500;
-        res.end(
-          JSON.stringify({
-            type: "server-action-response",
-            returnValue: {
-              success: false,
-              error: err.message,
-            },
-          })
-        );
-        return;
       }
+      if (!currentWorker) {
+        throw new Error("Failed to start worker");
+      }
+      return handleWorkerServerAction(req, res, currentWorker, server.config.logger);
     }
 
     // Handle RSC requests

package/plugin/react-client/handleWorkerServerAction.ts

@@ -0,0 +1,74 @@
+import type { ViteDevServer } from "vite";
+import type { Worker } from "node:worker_threads";
+import type { RscWorkerInputMessage } from "../worker/types.js";
+import { logError } from "../error/toError.js";
+import {
+  parseServerActionRequest,
+  setupServerActionHeaders,
+  createServerActionStream,
+  handleServerActionError
+} from "../helpers/handleServerAction.js";
+
+/**
+ * Handles server action requests in the worker scenario.
+ * 
+ * @param req - The incoming request
+ * @param res - The response object
+ * @param worker - The worker thread
+ * @param logger - The Vite logger
+ */
+export async function handleWorkerServerAction(
+  req: any,
+  res: any,
+  worker: Worker,
+  logger: ViteDevServer["config"]["logger"]
+) {
+  try {
+    // Read request body
+    const chunks: Buffer[] = [];
+    for await (const chunk of req) {
+      chunks.push(chunk);
+    }
+    const body = Buffer.concat(chunks).toString();
+
+    // Parse the server action request
+    const { id, args } = parseServerActionRequest(body, req.url);
+
+    // Set up response headers
+    setupServerActionHeaders(res);
+
+    // Send server action request to worker
+    worker.postMessage({
+      type: "SERVER_ACTION",
+      id,
+      args,
+    } satisfies RscWorkerInputMessage);
+
+    // Create a pass-through stream for the response
+    const passThrough = createServerActionStream(res);
+
+    // Handle worker messages
+    const messageHandler = (message: any) => {
+      if (message.type === "RSC_CHUNK") {
+        passThrough.write(message.chunk);
+      } else if (message.type === "RSC_END") {
+        passThrough.end();
+        worker.removeListener("message", messageHandler);
+      } else if (message.type === "ERROR") {
+        passThrough.end();
+        worker.removeListener("message", messageHandler);
+        logError(message.error, logger);
+      }
+    };
+
+    worker.on("message", messageHandler);
+
+    // Handle errors
+    passThrough.on("error", (error) => {
+      logError(error, logger);
+      res.end();
+    });
+  } catch (error) {
+    handleServerActionError(error, res, logger);
+  }
+} 

package/plugin/react-server/configureReactServer.ts

@@ -45,7 +45,7 @@ export async function configureReactServer<
     Html: React.Fragment,
     onEvent: createEventHandler(onEvent),
     css: handlerUserOptions.css
-  };
+  } as ResolvedUserOptions<T, InlineCSS>;
 
   // Set environment-specific configuration
   const define = {

package/plugin/react-server/handleServerAction.ts

@@ -10,14 +10,15 @@ import { ReactDOMServer } from "../vendor/vendor.server.js";
 import type { IncomingMessage, ServerResponse } from "http";
 
 export async function handleServerAction<
-  T extends PagePropOpt,
-  InlineCss extends InlineCssOpt
+  T extends PagePropOpt = PagePropOpt,
+  InlineCss extends InlineCssOpt = InlineCssOpt
 >(
   req: IncomingMessage,
   res: ServerResponse,
   server: ViteDevServer,
   handlerOptions: ResolvedUserOptions<T, InlineCss>
 ) {
+  let id = req.url?.split("?")[0] ?? "";
   try {
     if (handlerOptions.verbose) {
       server.config.logger.info(
@@ -25,10 +26,7 @@ export async function handleServerAction<
       );
     }
 
-    // Parse the request body - handle both formats:
-    // 1. Direct args array: ["arg1", "arg2"]
-    // 2. Object with id and args: { id: "path/to/action", args: ["arg1", "arg2"] }
-    let id: string;
+    // Parse the request body
     let args: unknown[];
     try {
       const chunks: Buffer[] = [];
@@ -45,7 +43,6 @@ export async function handleServerAction<
         // Format 1: Direct args array
         args = parsed;
         // Get the action ID from the request URL
-        id = req.url?.split("?")[0] ?? "";
         if (handlerOptions.verbose) {
           server.config.logger.info(
             `[react-server] Using action ID from URL: ${id}`
@@ -59,9 +56,8 @@ export async function handleServerAction<
         throw new Error("Invalid server action request format");
       }
     } catch (error: unknown) {
-      const err = toError(error);
       throw new Error(`Failed to parse server action request`, {
-        cause: err,
+        cause: toError(error),
       });
     }
 
@@ -134,13 +130,15 @@ export async function handleServerAction<
       );
     }
 
-    // Send the response
+    // Send the response using RSC streaming
     res.setHeader("Content-Type", "text/x-component; charset=utf-8");
+    res.setHeader("Content-Length", "0"); // Will be updated after streaming
 
     const { pipe } = ReactDOMServer.renderToPipeableStream(
       {
         type: "server-action-response",
-        returnValue: result
+        returnValue: result,
+        id
       },
       handlerOptions.moduleBasePath,
       {
@@ -149,11 +147,50 @@ export async function handleServerAction<
           res.statusCode = 500;
           res.end();
         },
+        onAllReady() {
+          // Update content length after streaming is complete
+          const contentLength = res.getHeader("Content-Length");
+          if (contentLength) {
+            res.setHeader("Content-Length", contentLength);
+          }
+        }
       }
     );
 
     pipe(res);
   } catch (error) {
-    logError(error, server.config.logger);
+    const err = toError(error);
+    logError(err, server.config.logger);
+    res.statusCode = 500;
+    res.setHeader("Content-Type", "text/x-component; charset=utf-8");
+    res.setHeader("Content-Length", "0"); // Will be updated after streaming
+
+    const { pipe } = ReactDOMServer.renderToPipeableStream(
+      {
+        type: "server-action-response",
+        returnValue: null,
+        error: {
+          digest: err.message || "",
+          name: err.name || "Error",
+        },
+        id
+      },
+      handlerOptions.moduleBasePath,
+      {
+        onError(error: Error) {
+          logError(error, server.config.logger);
+          res.statusCode = 500;
+          res.end();
+        },
+        onAllReady() {
+          // Update content length after streaming is complete
+          const contentLength = res.getHeader("Content-Length");
+          if (contentLength) {
+            res.setHeader("Content-Length", contentLength);
+          }
+        }
+      }
+    );
+    pipe(res);
   }
 }

package/plugin/react-server/plugin.ts

@@ -171,12 +171,12 @@ export function reactServerPlugin<
           const mod = server.moduleGraph.getModuleById(file);
           if (mod) {
             // Invalidate the parent module which will handle both client and SSR
-            server.moduleGraph.invalidateModule(mod);
+            server.moduleGraph.invalidateModule(mod, undefined, undefined, true);
             
             // Force a reload of the module
             const newMod = await server.moduleGraph.ensureEntryFromUrl(file, false);
             if (newMod) {
-              server.moduleGraph.invalidateModule(newMod);
+              server.moduleGraph.invalidateModule(newMod, undefined, undefined, true);
             }
           }
         }

package/plugin/react-static/plugin.ts

@@ -195,10 +195,18 @@ export function reactStaticPlugin<
         const cssFilesByPage = new Map();
 
         // First collect global styles from index.html
-        const globalCssInputs = collectManifestCss(
+        const indexHtmlCssInputs = collectManifestCss(
           autoDiscoveredFiles?.staticManifest ?? {},
-          "index.html"
+          userOptions.clientEntry ?? "index.html"
         );
+        const clientEntryCssInputs = collectManifestCss(
+          autoDiscoveredFiles?.staticManifest ?? {},
+          userOptions.clientEntry
+        );
+        const globalCssInputs = {
+          ...indexHtmlCssInputs,
+          ...clientEntryCssInputs,
+        };
 
         const globalCss: Map<string, CssContent<InlineCSS>> = new Map();
         // Collect CSS files for each page and its props

package/plugin/types.ts

@@ -1,6 +1,7 @@
 import type { Readable } from "node:stream";
 import type { Worker } from "node:worker_threads";
 import type React from "react";
+import type { ExoticComponent, FragmentProps } from "react";
 import type {
   NormalizedOutputOptions,
   OutputBundle,
@@ -19,8 +20,6 @@ import type {
   ViteDevServer,
 } from "vite";
 import type { ReactServerDomEsmOptions } from "./worker/types.js";
-import type { FragmentProps } from "react";
-import type { ExoticComponent } from "react";
 
 export type OnEvent = (event: PluginEvent) => void;
 
@@ -446,7 +445,8 @@ export type PluginEventType = PluginEvent["type"];
 
 export interface StreamPluginOptions<
   T extends PagePropOpt = PagePropOpt,
-  InlineCSS extends InlineCssOpt = InlineCssOpt
+  InlineCSS extends InlineCssOpt = InlineCssOpt,
+  As extends AsOpt = AsOpt
 > {
   projectRoot?: string; // defaults to process.cwd()
   moduleBase: string; // defaults to 'src'
@@ -504,9 +504,9 @@ export interface StreamPluginOptions<
         // default: /\.rsc$/
         rscPattern?: RegExpOpt;
         // default serverDirective regex
-        isServerFunction?: RegExpOpt;
+        isServerFunctionCode?: (code: string, moduleId?: string) => boolean;
         // default clientDirective regex
-        isClientComponent?: RegExpOpt;
+        isClientComponentCode?: (code: string, moduleId?: string) => boolean;
       }
     | undefined;
   // Manual configuration
@@ -522,7 +522,7 @@ export interface StreamPluginOptions<
   loaderPath?: string;
   pageExportName?: string;
   propsExportName?: string;
-  Html?: React.FC<HtmlProps<T, InlineCSS>>;
+  Html?: React.FC<HtmlProps<T, InlineCSS, As>> | typeof React.Fragment;
   CssCollector?: CssCollectorBoxedType<T, InlineCSS>;
   build?: BuildConfig;
   css?: CssCollectorOptions<InlineCSS>;
@@ -805,7 +805,6 @@ export type HtmlProps<
   manifest: Manifest;
   CssCollector: CssCollectorBoxedType<T, InlineCSS, As>;
   globalCss: Map<string, CssContent<InlineCSS>>;
-  children?: React.ReactNode;
   as: As;
 };
 

package/plugin/vendor/types.ts

@@ -0,0 +1 @@
+// 

package/plugin/worker/rsc/handleRender.ts

@@ -46,8 +46,6 @@ export async function handleRender<
           if (hmrState.get(id)?.invalidated) {
             // Clear the HMR state for this module
             hmrState.delete(id);
-            // Force a reload by using a unique query parameter
-            console.log("LOADING", id);
             return import(join(projectRoot, id) + `?t=${Date.now()}`);
           }
           return import(join(projectRoot, id));

package/plugin/worker/rsc/handlers.ts

@@ -67,7 +67,7 @@ export const handlers: Required<StreamHandlers> = {
     const stream = ReactDOMServer.renderToPipeableStream(
       {
         type: "server-action-response",
-        returnValue: result,
+        returnValue: result
       },
       userOptions.moduleBasePath,
       {
@@ -137,7 +137,7 @@ export const handlers: Required<StreamHandlers> = {
       const stream = ReactDOMServer.renderToPipeableStream(
         {
           type: "server-action-response",
-          returnValue: result,
+          returnValue: result
         },
         userOptions.moduleBasePath,
         {
@@ -182,7 +182,7 @@ export const handlers: Required<StreamHandlers> = {
       const stream = ReactDOMServer.renderToPipeableStream(
         {
           type: "server-action-response",
-          returnValue: { success: false, error: errorMessage },
+          returnValue: { success: false, error: errorMessage }
         },
         userOptions.moduleBasePath,
         {