vite-plugin-react-server 1.1.13 → 1.1.14

package/plugin/loader/transformModuleWithPreservedFunctions.ts

@@ -18,6 +18,7 @@
  */
 import { handleExports } from "./handleExports.js";
 import type { Program } from "./types.js";
+import createMappingsSerializer from "webpack-sources/lib/helpers/createMappingsSerializer.js";
 
 export interface TransformOptions {
   id: string;
@@ -56,16 +57,53 @@ export function transformModuleWithPreservedFunctions(
   moduleId: string,
   program: Program,
   isServerFunction: boolean | RegExpMatchArray | null,
-  isClientComponent: boolean | RegExpMatchArray | null,
+  isClientComponent: boolean | RegExpMatchArray | null
 ): string {
+  // Find and remove directives using AST
+  let sourceWithoutDirective = source;
+  let directiveEnd = 0;
+  
+  // Only look at top-level directives
+  for (const node of program.body) {
+    if (node.type !== "ExpressionStatement") {
+      break;
+    }
+
+    let directive: string | null = null;
+    if ("directive" in node && typeof node.directive === "string") {
+      directive = node.directive;
+    } else if (
+      node.expression.type === "Literal" &&
+      typeof node.expression.value === "string" &&
+      (node.expression.value === "use server" || node.expression.value === "use client")
+    ) {
+      directive = node.expression.value;
+    }
+
+    if (directive && "start" in node && "end" in node) {
+      directiveEnd = node.end;
+    }
+  }
+
+  // Remove the directive and any whitespace after it
+  if (directiveEnd > 0) {
+    sourceWithoutDirective = source.slice(directiveEnd).trim();
+  }
 
   // Get export names and create module ID literal
-  const { exportNames, exports } = handleExports(source, program, isServerFunction, isClientComponent);
+  const { exportNames, exports } = handleExports(
+    sourceWithoutDirective,
+    program,
+    isServerFunction,
+    isClientComponent
+  );
   const moduleIdLiteral = JSON.stringify(moduleId);
 
   // For server modules in server environment, register server references
-  if (isServerFunction) {
-    const imports = ['import { registerServerReference } from "react-server-dom-esm/server.node";'];
+  if (Boolean(isServerFunction)) {
+    const imports = [
+      'import { registerServerReference } from "react-server-dom-esm/server.node";',
+    ];
     const registrations: string[] = [];
 
     // Register each export
@@ -73,47 +111,116 @@ export function transformModuleWithPreservedFunctions(
       const exportInfo = exports.get(name);
       if (exportInfo) {
         // For default exports, use the localName if available
-        const exportName = name === "default" && exportInfo.localName ? exportInfo.localName : name;
+        const exportName =
+          name === "default" && exportInfo.localName
+            ? exportInfo.localName
+            : name;
         // Register all exports in server modules
         registrations.push(
-          `registerServerReference(${exportName}, ${moduleIdLiteral}, ${JSON.stringify(name)});`
+          `registerServerReference(${exportName}, ${moduleIdLiteral}, ${JSON.stringify(
+            name
+          )});`
         );
       }
     }
 
     // Create new source with registrations
     // First, add the imports at the top
-    const newSource = [...imports, source].join("\n\n");
-    // Then, add the registrations at the end
-    const finalSource = newSource + "\n\n" + registrations.join("\n");
+    const newSource = [...imports, sourceWithoutDirective, ...registrations].join("\n\n");
 
-    return finalSource;
-  }
+    // Handle source maps
+    let mappings = "";
+    const createMapping = createMappingsSerializer();
+    let generatedLine = 1;
+
+    // Map the import line to the first line of the original source
+    createMapping(generatedLine, 0, 0, 0, 0, -1);
+    generatedLine++;
+
+    // Map the registration lines to the first line of the original source
+    for (let i = 0; i < registrations.length; i++) {
+      createMapping(generatedLine, 0, 0, 1, 0, -1);
+      generatedLine++;
+    }
 
-  // For client modules in server environment, register client references
-  if (isClientComponent) {
-    const imports = ['import { registerClientReference } from "react-server-dom-esm/server.node";'];
+    // Map the original source lines, skipping the directive line
+    const sourceLines = source.split("\n");
+    for (let i = 0; i < sourceLines.length; i++) {
+      createMapping(generatedLine, 0, 0, i + 1, 0, -1); // +1 because we skip directive line
+      generatedLine++;
+    }
+
+    // Add source map to the output with original source content
+    const sourceMap = {
+      version: 3,
+      file: moduleId,
+      sources: [moduleId],
+      sourcesContent: [newSource], // Use transformed source content
+      mappings,
+      sourceRoot: "",
+      names: [],
+    };
+
+    return (
+      newSource +
+      "\n//# sourceMappingURL=data:application/json;charset=utf-8;base64," +
+      Buffer.from(JSON.stringify(sourceMap)).toString("base64")
+    );
+    // end of server module
+  }
+  if (!!isClientComponent) {
+    // For client modules in server environment, register client references
+    const imports = [
+      'import { registerClientReference } from "react-server-dom-esm/server.node";',
+    ];
     const declarations: string[] = [];
 
     for (const name of exportNames) {
       const errorMessage = createClientReferenceError(name);
       if (name === "default") {
         declarations.push(`export default registerClientReference(function() {
-  throw new Error("${errorMessage}");
+throw new Error("${errorMessage}");
 }, ${moduleIdLiteral}, "default");`);
       } else {
         declarations.push(`export const ${name} = registerClientReference(function() {
-  throw new Error("${errorMessage}");
+throw new Error("${errorMessage}");
 }, ${moduleIdLiteral}, ${JSON.stringify(name)});`);
       }
     }
-
     // Create new source with declarations
     const newSource = [...imports, ...declarations].join("\n\n");
 
-    return newSource;
-  }
+    // Handle source maps for client modules
+    let mappings = "";
+    const createMapping = createMappingsSerializer();
+    let generatedLine = 1;
 
-  // For other cases, return original source
-  return source;
+    // Map the import line to the first line of the original source
+    createMapping(generatedLine, 0, 0, 0, 0, -1);
+    generatedLine++;
+
+    // Map the declaration lines to the first line of the original source
+    for (let i = 0; i < declarations.length; i++) {
+      createMapping(generatedLine, 0, 0, 1, 0, -1);
+      generatedLine++;
+    }
+
+    // Add source map to the output with original source content
+    const sourceMap = {
+      version: 3,
+      file: moduleId,
+      sources: [moduleId],
+      sourcesContent: [newSource], // Use transformed source content
+      mappings,
+      sourceRoot: "",
+      names: [],
+    };
+
+    return (
+      newSource +
+      "\n//# sourceMappingURL=data:application/json;charset=utf-8;base64," +
+      Buffer.from(JSON.stringify(sourceMap)).toString("base64")
+    );
+  }
+  throw new Error("Invalid module type");
 }

package/plugin/plugin.client.ts

@@ -6,7 +6,6 @@ import type {
 } from "../types.js";
 import { reactClientPlugin } from "./react-client/plugin.js";
 import { envPlugin } from "./env/plugin.js";
-//import { reactTransformPlugin } from "./transformer/plugin.client.js";
 
 export function vitePluginReactServer<
   T extends PagePropOpt = PagePropOpt,
@@ -14,7 +13,6 @@ export function vitePluginReactServer<
 >(options = {} as StreamPluginOptions<T, InlineCSS>): import("vite").Plugin[] {
   return [
     envPlugin(),
-    //reactTransformPlugin(options),
     reactClientPlugin(options),
     reactPreservePlugin(options),
   ];

package/plugin/react-client/configureWorkerRequestHandler.ts

@@ -18,6 +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";
 
 /**
  * Configures the worker request handler.
@@ -51,6 +52,9 @@ export async function configureWorkerRequestHandler<
     moduleBaseURL: server.config.base,
     moduleBasePath: server.config.base,
     projectRoot: server.config.root,
+    moduleID: (id: string) => {
+      return id
+    }
   });
 
   // Start the worker
@@ -85,6 +89,109 @@ export async function configureWorkerRequestHandler<
 
     const info = requestInfo(req, handlerOptions, "", server.config.logger);
 
+    // Serialize user options for worker
+    const serializedUserOptions = serializedOptions<T, InlineCSS>(
+      handlerOptions,
+      autoDiscoveredFiles
+    );
+
+    // 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);
+            server.config.logger.error(message.error.message + (message.error.stack ?? ""), {
+              error: message.error,
+            });
+          }
+        };
+
+        currentWorker!.on("message", messageHandler);
+
+        // Handle errors
+        passThrough.on("error", (error) => {
+          server.config.logger.error(error.message + (error.stack ?? ""), {
+            error,
+          });
+          res.end();
+        });
+
+        return;
+      } catch (error) {
+        if (error instanceof Error) {
+          server.config.logger.error(error.message + (error.stack ?? ""), {
+            error,
+          });
+        }
+        res.statusCode = 500;
+        res.end(JSON.stringify({
+          type: "server-action-response",
+          returnValue: {
+            success: false,
+            error: error instanceof Error ? error.message : String(error)
+          }
+        }));
+        return;
+      }
+    }
+
+    // Handle RSC requests
     if (!info.isRscRequest) {
       return next();
     }
@@ -106,10 +213,6 @@ export async function configureWorkerRequestHandler<
       res.setHeader("Transfer-Encoding", "chunked");
       res.setHeader("Connection", "keep-alive");
 
-      const serializedUserOptions = serializedOptions<T, InlineCSS>(
-        handlerOptions,
-        autoDiscoveredFiles
-      );
       const userOnMetrics =
         typeof onMetrics === "function"
           ? (metrics: StreamMetrics) => {

package/plugin/react-client/createMessageHandlers.ts

@@ -50,6 +50,9 @@ export function createMessageHandler({
       case "SERVER_MODULE":
         handlers.onServerModule?.(message.id, message.url, message.source);
         break;
+      case "CSS_FILE":
+        handlers.onCssFile?.(message.id, message.content);
+        break;
       default:
         logger.warn(`Unknown worker output message type: ${(message as { type: string }).type}`);
     }

package/plugin/react-client/createWorkerStream.ts

@@ -32,6 +32,7 @@ export async function* createWorkerStream({
     onEnd,
     onServerAction,
     onServerActionResponse,
+    onCssFile,
   },
   verbose = false,
 }: {
@@ -48,6 +49,7 @@ export async function* createWorkerStream({
         | "onEnd"
         | "onServerAction"
         | "onServerActionResponse"
+        | "onCssFile"
       >
     >;
   verbose?: boolean;
@@ -114,6 +116,12 @@ export async function* createWorkerStream({
         onHmrUpdate(id, routes);
       }
     },
+    onCssFile: (id: string, code: string) => {
+      if (verbose) logger.info(`[react-client] received css file ${id}`);
+      if (typeof onCssFile === "function") {
+        onCssFile(id, code);
+      }
+    },
     onServerAction: (id: string, args: unknown[]) => {
       if (verbose) logger.info(`[react-client] received server action ${id}`);
       if (typeof onServerAction === "function") {
@@ -124,7 +132,13 @@ export async function* createWorkerStream({
       if (verbose)
         logger.info(`[react-client] received server action response ${id}`);
       if (typeof onServerActionResponse === "function") {
-        onServerActionResponse(id, result, error);
+        const response = {
+          type: "server-action-response",
+          returnValue: error 
+            ? { success: false, error }
+            : result
+        };
+        onServerActionResponse(id, response);
       }
     },
   };

package/plugin/react-client/handleWorkerRscStream.ts

@@ -37,12 +37,21 @@ export function handleWorkerRscStream({
           handlers: {
             ...handlers,
             onServerAction: (id: string, args: unknown[]) => {
-              if (verbose) logger.info(`[react-client] Received server action ${id}`);
+              if (verbose) logger.info(`[react-client] Forwarding server action ${id} to worker`);
               handlers.onServerAction?.(id, args);
             },
             onServerActionResponse: (id: string, result?: unknown, error?: string) => {
-              if (verbose) logger.info(`[react-client] Received server action response ${id}`);
-              handlers.onServerActionResponse?.(id, result, error);
+              if (verbose) logger.info(`[react-client] Forwarding server action response ${id} from worker`);
+              if (typeof handlers.onServerActionResponse === "function") {
+                // Ensure consistent response format
+                const response = {
+                  type: "server-action-response",
+                  returnValue: error 
+                    ? { success: false, error }
+                    : result  // Direct result, no success/data wrapper
+                };
+                handlers.onServerActionResponse(id, response);
+              }
             }
           },
           verbose

package/plugin/react-client/restartWorker.ts

@@ -62,6 +62,7 @@ export async function restartWorker({
           hmrPort: workerHmrChannel.port2,
           resolvedConfig: serializedDevServerConfig(server.config),
           userOptions: serializedOptions(userOptions, autoDiscoveredFiles),
+          serverActions: autoDiscoveredFiles.serverActions,
         },
         transferList: [workerHmrChannel.port2],
       });

package/plugin/react-server/configureReactServer.ts

@@ -35,13 +35,12 @@ export async function configureReactServer<
     Html: _UserHtmlComponent,
     onEvent,
     // remove these
-    moduleBaseURL: _moduleBaseURL,
-    projectRoot: _projectRoot,
     ...handlerUserOptions
   } = _userOptions;
   const handlerOptions = {
     ...handlerUserOptions,
     moduleBaseURL: server.config.base,
+    moduleBasePath: server.config.base,
     projectRoot: server.config.root,
     Html: React.Fragment,
     onEvent: createEventHandler(onEvent),

package/plugin/react-server/handleServerAction.ts

@@ -140,7 +140,7 @@ export async function handleServerAction<
     const { pipe } = ReactDOMServer.renderToPipeableStream(
       {
         type: "server-action-response",
-        returnValue: result,
+        returnValue: result
       },
       handlerOptions.moduleBasePath,
       {
@@ -155,23 +155,5 @@ export async function handleServerAction<
     pipe(res);
   } catch (error) {
     logError(error, server.config.logger);
-    res.statusCode = 500;
-    res.setHeader("Content-Type", "text/x-component; charset=utf-8");
-
-    const { pipe } = ReactDOMServer.renderToPipeableStream(
-      {
-        type: "server-action-response",
-        error: toError(error).message,
-      },
-      handlerOptions.moduleBasePath,
-      {
-        onError(error: Error) {
-          logError(error, server.config.logger);
-          res.end();
-        },
-      }
-    );
-
-    pipe(res);
   }
 }

package/plugin/react-static/plugin.ts

@@ -24,7 +24,7 @@ import {
 } from "vite";
 import { resolveOptions } from "../config/resolveOptions.js";
 import { resolveUserConfig } from "../config/resolveUserConfig.js";
-import { createBuildLoader } from "../loader/createBuildLoader.js";
+import { createBuildLoader } from "./createBuildLoader.js";
 import type {
   BuildTiming,
   ReactStreamPluginMeta,
@@ -204,8 +204,7 @@ export function reactStaticPlugin<
         // First collect global styles from index.html
         const globalCssInputs = collectManifestCss(
           autoDiscoveredFiles?.staticManifest ?? {},
-          "index.html",
-          userOptions
+          "index.html"
         );
 
         const globalCss: Map<string, CssContent<InlineCSS>> = new Map();
@@ -229,8 +228,7 @@ export function reactStaticPlugin<
           );
           const cssInputs = collectManifestCss(
             transformedServerManifest,
-            props ? [page, props] : page,
-            userOptions
+            props ? [page, props] : page
           );
 
           // Create a map for this page's CSS files
@@ -247,16 +245,16 @@ export function reactStaticPlugin<
                     userOptions.projectRoot,
                     userOptions.build.outDir,
                     userOptions.build.static,
-                    key + ".css"
+                    key
                   ),
                   "utf-8"
                 ) ?? ""
               }
               if (cssContent) {
                 globalCss.set(
-                  value,
+                  key,
                   createCssProps<T, InlineCSS>({
-                    id: value,
+                    id: key,
                     code: cssContent,
                     userOptions: userOptions,
                   })
@@ -266,7 +264,7 @@ export function reactStaticPlugin<
           }
 
           // Add page-specific styles
-          for (const [, value] of Object.entries(cssInputs)) {
+          for (const [key, value] of Object.entries(cssInputs)) {
             try {
               const { default: cssContent } = await buildLoader(
                 value + "?inline"
@@ -276,11 +274,10 @@ export function reactStaticPlugin<
               }
               if (cssContent) {
                 // Ensure the CSS file path is properly resolved
-                const cssPath = value.startsWith("/") ? value.slice(1) : value;
                 pageCssMap.set(
-                  cssPath,
+                  key,
                   createCssProps({
-                    id: cssPath,
+                    id: key,
                     code: cssContent,
                     userOptions: userOptions,
                   })

package/plugin/transformer/plugin.server.ts

@@ -128,8 +128,8 @@ export function reactTransformPlugin<
       const transformed = transformModuleIfNeeded(
         code,
         finalID,
-        userOptions.autoDiscover.isServerFunction(code),
-        userOptions.autoDiscover.isClientComponent(code),
+        userOptions.autoDiscover.isServerFunctionCode(code),
+        userOptions.autoDiscover.isClientComponentCode(code),
         true
       );
       if (userOptions.verbose)

package/plugin/types.ts

@@ -138,6 +138,12 @@ export type SerializedUserConfig = Extract<
   ResolvedUserConfig,
   SerializableRecord
 >;
+
+export type SerializedUserOptions = Extract<
+  ResolvedUserOptions,
+  SerializableRecord
+>;
+
 // Client plugin options
 export interface StreamPluginOptionsClient {
   outDir?: string;
@@ -197,6 +203,11 @@ export type ResolvedUserOptions<
     moduleExtension: RegExp;
     serverDirective: RegExp;
     clientDirective: RegExp;
+    cssExtension: string;
+    jsonExtension: string;
+    htmlExtension: string;
+    rscExtension: string;
+    jsExtension: string;
     modulePattern: (path: string) => boolean;
     cssPattern: (path: string) => boolean;
     jsonPattern: (path: string) => boolean;
@@ -211,8 +222,8 @@ export type ResolvedUserOptions<
     nodeOnly: (path: string) => boolean;
     dotFiles: (path: string) => boolean;
     virtualPattern: (path: string) => boolean;
-    isServerFunction: (code: string) => boolean;
-    isClientComponent: (code: string) => boolean;
+    isServerFunctionCode: (code: string) => boolean;
+    isClientComponentCode: (code: string) => boolean;
   };
 };
 
@@ -446,6 +457,16 @@ export interface StreamPluginOptions<
         serverDirective?: RegExp;
         // default: /^"use client"[\s;]*\n?/m
         clientDirective?: RegExp;
+        // css extension
+        cssExtension?: string;
+        // json extension
+        jsonExtension?: string;
+        // html extension
+        htmlExtension?: string;
+        // rsc extension
+        rscExtension?: string;
+        // .js extension
+        jsExtension?: string;
         // default: /\.(m|c)?(j|t)sx?$/
         modulePattern?: RegExpOpt;
         // default: [Pp]age.tsx
@@ -538,6 +559,8 @@ export type CreateHandlerOptions<
   | "onEvent"
   | "onMetrics"
   | "projectRoot"
+  | "normalizer"
+  | "moduleID"  
 > & {
   logger: Logger;
   loader: ModuleLoader;

package/plugin/worker/rsc/handleRender.ts

@@ -47,6 +47,7 @@ export async function handleRender<
             // 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));