vite-plugin-react-server 1.1.19 → 1.2.0-alpha.0

package/plugin/react-server/handleServerAction.ts

@@ -1,196 +1,192 @@
 import type { ViteDevServer } from "vite";
 import type {
-  InlineCssOpt,
-  PagePropOpt,
-  ResolvedUserOptions,
+  CreateHandlerOptions,
 } from "../types.js";
-import { logError, toError } from "../error/toError.js";
-import { join } from "path";
+import { logError, toError } from "../error/index.js";
+import { join } from "node:path";
 import { ReactDOMServer } from "../vendor/vendor.server.js";
 import type { IncomingMessage, ServerResponse } from "http";
 
-export async function handleServerAction<
-  T extends PagePropOpt = PagePropOpt,
-  InlineCss extends InlineCssOpt = InlineCssOpt
->(
+export type HandleServerActionFn = (
   req: IncomingMessage,
   res: ServerResponse,
   server: ViteDevServer,
-  handlerOptions: ResolvedUserOptions<T, InlineCss>
-) {
-  let id = req.url?.split("?")[0] ?? "";
-  try {
-    if (handlerOptions.verbose) {
-      server.config.logger.info(
-        `[react-server] Handling server action request at ${req.url}`
-      );
-    }
+  handlerOptions: Pick<
+    CreateHandlerOptions,
+    "verbose" | "moduleBasePath" | "projectRoot" | "loader"
+  >
+) => Promise<void>;
 
-    // Parse the request body
-    let args: unknown[];
+export const handleServerAction: HandleServerActionFn =
+  async function _handleServerAction(req, res, server, handlerOptions) {
+    let id = req.url?.split("?")[0] ?? "";
     try {
-      const chunks: Buffer[] = [];
-      for await (const chunk of req) {
-        chunks.push(chunk);
-      }
-      const body = Buffer.concat(chunks).toString();
       if (handlerOptions.verbose) {
-        server.config.logger.info(`[react-server] Request body: ${body}`);
+        server.config.logger.info(
+          `[react-server] Handling server action request at ${req.url}`
+        );
       }
 
-      const parsed = JSON.parse(body);
-      if (Array.isArray(parsed)) {
-        // Format 1: Direct args array
-        args = parsed;
-        // Get the action ID from the request URL
+      // Parse the request body
+      let args: unknown[];
+      try {
+        const chunks: Buffer[] = [];
+        for await (const chunk of req) {
+          chunks.push(chunk);
+        }
+        const body = Buffer.concat(chunks).toString();
         if (handlerOptions.verbose) {
-          server.config.logger.info(
-            `[react-server] Using action ID from URL: ${id}`
-          );
+          server.config.logger.info(`[react-server] Request body: ${body}`);
         }
-      } 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");
-      }
-    } catch (error: unknown) {
-      throw new Error(`Failed to parse server action request`, {
-        cause: toError(error),
-      });
-    }
 
-    if (!id) {
-      throw new Error("Server action ID is required");
-    }
+        const parsed = JSON.parse(body);
+        if (Array.isArray(parsed)) {
+          // Format 1: Direct args array
+          args = parsed;
+          // Get the action ID from the request URL
+          if (handlerOptions.verbose) {
+            server.config.logger.info(
+              `[react-server] Using action ID from URL: ${id}`
+            );
+          }
+        } 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");
+        }
+      } catch (error: unknown) {
+        throw new Error(`Failed to parse server action request`, {
+          cause: error,
+        });
+      }
 
-    if (handlerOptions.verbose) {
-      server.config.logger.info(
-        `[react-server] Server action request for ${id} with args: ${JSON.stringify(
-          args
-        )}`
-      );
-    }
+      if (!id) {
+        throw new Error("Server action ID is required");
+      }
 
-    // Parse the server action ID to get the file path and export name
-    const [filePath, exportName] = id.split("#");
-    if (!filePath || !exportName) {
-      throw new Error(
-        `Invalid server action ID format: ${id}. Expected format: "path/to/file.ts#exportName"`
-      );
-    }
+      if (handlerOptions.verbose) {
+        server.config.logger.info(
+          `[react-server] Server action request for ${id} with args: ${JSON.stringify(
+            args
+          )}`
+        );
+      }
 
-    // Convert the server action ID to a file path
-    const actionPath = filePath.startsWith("/") ? filePath.slice(1) : filePath;
-    const fullPath = join(handlerOptions.projectRoot, actionPath);
-    if (handlerOptions.verbose) {
-      server.config.logger.info(
-        `[react-server] Resolved file path: id=${id}, actionPath=${actionPath}, projectRoot=${handlerOptions.projectRoot}, filePath=${fullPath}, exportName=${exportName}`
-      );
-    }
+      // Parse the server action ID to get the file path and export name
+      const [filePath, exportName] = id.split("#");
+      if (!filePath || !exportName) {
+        throw new Error(
+          `Invalid server action ID format: ${id}. Expected format: "path/to/file.ts#exportName"`
+        );
+      }
 
-    // Load the server action module
-    if (handlerOptions.verbose) {
-      server.config.logger.info(`[react-server] Loading module: ${fullPath}`);
-    }
-    const module = await server.ssrLoadModule(fullPath);
-    if (handlerOptions.verbose) {
-      server.config.logger.info(
-        `[react-server] Looking for action: ${exportName} in module with exports: ${Object.keys(
-          module
-        ).join(", ")}`
-      );
-    }
-    const action = module[exportName];
+      // Convert the server action ID to a file path
+      const actionPath = filePath.startsWith("/")
+        ? filePath.slice(1)
+        : filePath;
+      const fullPath = join(handlerOptions.projectRoot, actionPath);
+      if (handlerOptions.verbose) {
+        server.config.logger.info(
+          `[react-server] Resolved file path: id=${id}, actionPath=${actionPath}, projectRoot=${handlerOptions.projectRoot}, filePath=${fullPath}, exportName=${exportName}`
+        );
+      }
 
-    if (typeof action !== "function") {
+      // Load the server action module
+      if (handlerOptions.verbose) {
+        server.config.logger.info(`[react-server] Loading module: ${fullPath}`);
+      }
+      const module = await server.ssrLoadModule(fullPath);
       if (handlerOptions.verbose) {
-        server.config.logger.error(
-          `[react-server] Action not found: ${exportName} in module with exports: ${Object.keys(
+        server.config.logger.info(
+          `[react-server] Looking for action: ${exportName} in module with exports: ${Object.keys(
             module
           ).join(", ")}`
         );
       }
-      throw new Error(`Server action not found: ${id}`);
-    }
+      const action = module[exportName];
 
-    // Execute the server action
-    if (handlerOptions.verbose) {
-      server.config.logger.info(
-        `[react-server] Executing action with args: ${JSON.stringify(args)}`
-      );
-    }
-    const result = await action(...args);
-    if (handlerOptions.verbose) {
-      server.config.logger.info(
-        `[react-server] Action completed successfully with result: ${JSON.stringify(
-          result
-        )}`
-      );
-    }
+      if (typeof action !== "function") {
+        if (handlerOptions.verbose) {
+          server.config.logger.error(
+            `[react-server] Action not found: ${exportName} in module with exports: ${Object.keys(
+              module
+            ).join(", ")}`
+          );
+        }
+        throw new Error(`Server action not found: ${id}`);
+      }
+
+      // Execute the server action
+      if (handlerOptions.verbose) {
+        server.config.logger.info(
+          `[react-server] Executing action with args: ${JSON.stringify(args)}`
+        );
+      }
+      const result = await action(...args);
+      if (handlerOptions.verbose) {
+        server.config.logger.info(
+          `[react-server] Action completed successfully with result: ${JSON.stringify(
+            result
+          )}`
+        );
+      }
 
-    // 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
+      // Send the response using RSC streaming
+      res.setHeader("Content-Type", "text/x-component; charset=utf-8");
+      res.setHeader("Transfer-Encoding", "chunked");
+      res.setHeader("Connection", "keep-alive");
 
-    const { pipe } = ReactDOMServer.renderToPipeableStream(
-      {
-        type: "server-action-response",
-        returnValue: result,
-        id
-      },
-      handlerOptions.moduleBasePath,
-      {
-        onError(error: Error) {
-          logError(error, server.config.logger);
-          res.statusCode = 500;
-          res.end();
+      const { pipe } = ReactDOMServer.renderToPipeableStream(
+        {
+          type: "server-action-response",
+          returnValue: result,
+          id,
         },
-        onAllReady() {
-          // Update content length after streaming is complete
-          const contentLength = res.getHeader("Content-Length");
-          if (contentLength) {
-            res.setHeader("Content-Length", contentLength);
-          }
+        handlerOptions.moduleBasePath,
+        {
+          onError(error: Error) {
+            logError(error, server.config.logger);
+            res.statusCode = 500;
+            res.end();
+          },
+          onAllReady() {
+            // No need to update content length for chunked encoding
+          },
         }
-      }
-    );
+      );
 
-    pipe(res);
-  } catch (error) {
-    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
+      pipe(res);
+    } catch (error) {
+      const err = toError(error);
+      logError(err, server.config.logger);
+      res.statusCode = 500;
+      res.setHeader("Content-Type", "text/x-component; charset=utf-8");
+      res.setHeader("Transfer-Encoding", "chunked");
+      res.setHeader("Connection", "keep-alive");
 
-    const { pipe } = ReactDOMServer.renderToPipeableStream(
-      {
-        type: "server-action-response",
-        returnValue: null,
-        error: {
-          digest: err.message || "",
-          name: err.name || "Error",
+      const { pipe } = ReactDOMServer.renderToPipeableStream(
+        {
+          type: "server-action-response",
+          returnValue: {
+            success: false,
+            error: err.message,
+          },
+          id,
         },
-        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);
-          }
+        handlerOptions.moduleBasePath,
+        {
+          onError(error: Error) {
+            logError(error, server.config.logger);
+            res.statusCode = 500;
+            res.end();
+          },
+          onAllReady() {
+            // No need to update content length for chunked encoding
+          },
         }
-      }
-    );
-    pipe(res);
-  }
-}
+      );
+      pipe(res);
+    }
+  };

package/plugin/react-server/plugin.ts

@@ -4,54 +4,42 @@ import {
   type UserConfig,
   type ViteDevServer,
   type Manifest,
-  type Plugin as VitePlugin,
 } from "vite";
 import { resolveOptions } from "../config/resolveOptions.js";
 import { resolveUserConfig } from "../config/resolveUserConfig.js";
 import type {
   AutoDiscoveredFiles,
   BuildTiming,
+  ReactStreamPluginFn,
   ReactStreamPluginMeta,
-  ResolvedUserOptions,
-  PagePropOpt,
-  InlineCssOpt,
 } from "../types.js";
-import { type StreamPluginOptions } from "../types.js";
 import {
   resolveAutoDiscover
 } from "../config/autoDiscover/resolveAutoDiscover.js";
-import { getCondition } from "../config/getCondition.js";
 import { configureReactServer } from "./configureReactServer.js";
 import { configurePreviewServer } from "../react-static/configurePreviewServer.js";
 import { getBundleManifest } from "../helpers/getBundleManifest.js";
+import { createDefaultModuleID } from "../config/createModuleID.js";
 
 let resolvedConfig: ResolvedConfig | null = null;
 
-if (getCondition() !== "react-server") {
-  throw new Error(
-    "Condition mismatch, should be react-server but got " +
-      process.env["NODE_OPTIONS"]
-  );
-}
-export function reactServerPlugin<
-  T extends PagePropOpt = PagePropOpt,
-  InlineCSS extends InlineCssOpt = InlineCssOpt
->(options: StreamPluginOptions<T, InlineCSS>): VitePlugin<{
+export type ReactServerPluginFn = ReactStreamPluginFn<{
   meta: ReactStreamPluginMeta;
-}> {
+}>
+
+export const reactServerPlugin:ReactServerPluginFn = function _reactServerPlugin(options) {
   const timing: BuildTiming = {
     start: performance.now(),
   };
 
   let autoDiscoveredFiles: AutoDiscoveredFiles;
-  let userOptions: ResolvedUserOptions<T, InlineCSS>;
   let serverManifest: Manifest = {};
 
   const resolvedOptions = resolveOptions(options);
   if (resolvedOptions.type === "error") {
     throw resolvedOptions.error;
   }
-  userOptions = resolvedOptions.userOptions;
+  const userOptions = resolvedOptions.userOptions;
   
 
   return {
@@ -78,17 +66,17 @@ export function reactServerPlugin<
       // Verify transformer runs first, preserver runs last
       const plugins = resolvedConfig.plugins;
       const transformerIndex = plugins.findIndex(
-        (p) => p.name === "vite:react-server-transform"
+        (p) => p.name.includes("vite-plugin-react-server:transform")
       );
       const preserverIndex = plugins.findIndex(
-        (p) => p.name === "vite-plugin-react-server:preserve-directives"
+        (p) => p.name.includes("vite-plugin-react-server:preserve-directives")
       );
 
       if (transformerIndex === -1) {
         throw new Error("Transformer plugin not installed");
       }
       if (preserverIndex < transformerIndex) {
-        throw new Error(
+        console.warn(
           "Transformer plugin isn't installed or isn't running before preserver"
         );
       }
@@ -109,6 +97,11 @@ export function reactServerPlugin<
       });
     },
     async config(config, configEnv): Promise<UserConfig> {
+      // Create the proper moduleID function now that we have ConfigEnv
+      if (typeof userOptions.moduleID !== "function") {
+        userOptions.moduleID = createDefaultModuleID(userOptions, configEnv, userOptions.loader.mode);
+      }
+
       const autoDiscoverResult = await resolveAutoDiscover({
         config,
         configEnv,
@@ -164,19 +157,19 @@ export function reactServerPlugin<
         normalizer: userOptions.normalizer,
       });
     },
-    async handleHotUpdate({ file, server, read, timestamp, ...ctx }) {
+    async handleHotUpdate({ file, server, timestamp, ...ctx }) {
       try {
         // Invalidate the module in Vite's cache for both client and SSR
         if (server.moduleGraph) {
           const mod = server.moduleGraph.getModuleById(file);
           if (mod) {
             // Invalidate the parent module which will handle both client and SSR
-            server.moduleGraph.invalidateModule(mod, undefined, undefined, true);
+            server.moduleGraph.invalidateModule(mod, undefined, timestamp, true);
             
             // Force a reload of the module
             const newMod = await server.moduleGraph.ensureEntryFromUrl(file, false);
             if (newMod) {
-              server.moduleGraph.invalidateModule(newMod, undefined, undefined, true);
+              server.moduleGraph.invalidateModule(newMod, undefined, timestamp, true);
             }
           }
         }