vite-plugin-react-server 1.1.12 → 1.1.13

package/plugin/loader/sourceMap.ts

@@ -0,0 +1,118 @@
+import type { SourceMap } from "../types/sourceMap.js";
+import createMappingsSerializer from 'webpack-sources/lib/helpers/createMappingsSerializer.js';
+import { basename } from "path";
+
+/**
+ * Creates a basic source map for a module
+ */
+export function createBasicSourceMap(url: string, source: string): SourceMap {
+  const createMapping = createMappingsSerializer();
+  let mappings = '';
+  let lineCount = 1;
+  let idx = -1;
+
+  // Map each line with VLQ encoding
+  while ((idx = source.indexOf('\n', idx + 1)) !== -1) {
+    createMapping(lineCount, 0, 0, lineCount, 0, -1);
+    lineCount++;
+  }
+  // Add final line
+  createMapping(lineCount, 0, 0, lineCount, 0, -1);
+
+  return {
+    version: 3,
+    file: basename(url),
+    sources: [url],
+    sourcesContent: [source],
+    mappings,
+    sourceRoot: '',
+    names: []
+  };
+}
+
+/**
+ * Extends an existing source map with new lines
+ */
+export function extendSourceMap(sourceMap: SourceMap, newLines: number, originalSource: string): SourceMap {
+  const createMapping = createMappingsSerializer();
+  let mappings = sourceMap.mappings || '';
+  let lineCount = originalSource.split('\n').length;
+  
+  // Add padding for new lines
+  for (let i = 0; i < newLines; i++) {
+    createMapping(lineCount + i, 0, 0, lineCount + i, 0, -1);
+  }
+
+  return {
+    ...sourceMap,
+    version: 3,
+    sourcesContent: [originalSource],
+    mappings
+  };
+}
+
+/**
+ * Adds a source map as a base64 data URL to the source code
+ */
+export function addSourceMapToSource(source: string, sourceMap: SourceMap): string {
+  // Convert version to number for serialization
+  const serializedMap = {
+    ...sourceMap,
+    version: Number(sourceMap.version)
+  };
+  return source + '\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,' + 
+    Buffer.from(JSON.stringify(serializedMap)).toString('base64');
+}
+
+/**
+ * Detects and extracts source map URL from source code
+ */
+export function detectSourceMapURL(source: string): { url: string | null; start: number; end: number; lines: number } {
+  let sourceMappingURL: string | null = null;
+  let sourceMappingStart = 0;
+  let sourceMappingEnd = 0;
+  let sourceMappingLines = 0;
+
+  const lines = source.split('\n');
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    if (line.includes('# sourceMappingURL=') || line.includes('@ sourceMappingURL=')) {
+      const match = line.match(/(?:#|@) sourceMappingURL=(.+)/);
+      if (match) {
+        sourceMappingURL = match[1];
+        sourceMappingStart = source.indexOf(line);
+        sourceMappingEnd = sourceMappingStart + line.length;
+        sourceMappingLines = 1;
+      }
+    }
+  }
+
+  return { url: sourceMappingURL, start: sourceMappingStart, end: sourceMappingEnd, lines: sourceMappingLines };
+}
+
+/**
+ * Strips source map URL comment from source code
+ */
+export function stripSourceMapURL(source: string, sourceMapInfo: { start: number; end: number; lines: number }): string {
+  if (sourceMapInfo.start === 0 && sourceMapInfo.end === 0) {
+    return source;
+  }
+  return source.slice(0, sourceMapInfo.start) + 
+    '\n'.repeat(sourceMapInfo.lines) + 
+    source.slice(sourceMapInfo.end);
+}
+
+/**
+ * Creates a source map with the given parameters
+ */
+export function createSourceMap(id: string, code: string, mappings: string): SourceMap {
+  return {
+    version: 3,
+    file: basename(id),
+    sources: [id],
+    sourcesContent: [code],
+    names: [],
+    mappings,
+    sourceRoot: "",
+  };
+} 

package/plugin/loader/transformModuleIfNeeded.ts

@@ -0,0 +1,33 @@
+import { getCondition } from "../config/getCondition.js";
+import { transformModuleWithPreservedFunctions } from "./transformModuleWithPreservedFunctions.js";
+import { parse } from "./parse.js";
+import { DEFAULT_CONFIG } from "../config/defaults.js";
+
+export function transformModuleIfNeeded(
+  source: string,
+  moduleId: string,
+  isServerFunction: boolean | RegExpMatchArray | null = DEFAULT_CONFIG.AUTO_DISCOVER.isServerFunction(source),
+  isClientComponent: boolean | RegExpMatchArray | null = DEFAULT_CONFIG.AUTO_DISCOVER.isClientComponent(source),
+  isServerEnvironment = getCondition() === "react-server"
+) {
+  // Parse source and handle source maps
+  const ast = parse(source);  
+
+  // Handle environment-specific cases
+  if (
+    (isServerEnvironment && !isServerFunction && !isClientComponent) ||
+    (!isServerEnvironment && isClientComponent)
+  ) {
+    return source
+  }
+
+  const result = transformModuleWithPreservedFunctions(
+    source,
+    moduleId,
+    ast,
+    isServerFunction,
+    isClientComponent
+  );
+
+  return result
+}

package/plugin/loader/transformModuleWithPreservedFunctions.ts

@@ -0,0 +1,119 @@
+/**
+ * # RSC Boundary Handling
+ *
+ * This file provides the core transformation logic for React Server Components (RSC) boundaries.
+ *
+ * - **Server Loader**: Always strips implementation for client modules, exports error-throwing references.
+ * - **Client Loader**: Always strips implementation for server modules, exports error-throwing references.
+ * - **Browser**: Only client modules are passed through as-is.
+ *
+ * All transformations are handled by `transformModuleWithPreservedFunctions` for consistency.
+ *
+ * ## Error Behavior
+ *
+ * - If a client component is imported on the server, the export is a function that throws a clear error.
+ * - If a server action is imported on the client, the export is a function that throws a clear error.
+ *
+ * This ensures that implementation details are never leaked across boundaries and errors are easy to debug.
+ */
+import { handleExports } from "./handleExports.js";
+import type { Program } from "./types.js";
+
+export interface TransformOptions {
+  id: string;
+  exportNames: string[];
+  beforeExports: string;
+  afterExports: string;
+  isServerModule?: boolean;
+  isClientModule?: boolean;
+  program?: Program;
+}
+
+/**
+ * Creates a client reference error message
+ */
+function createClientReferenceError(name: string): string {
+  return `Attempted to call ${name}() from the server but ${name} is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.`;
+}
+
+/**
+ * Transforms a module for RSC boundaries.
+ * - Server modules: exports are wrapped with server references while preserving functionality.
+ * - Client modules: exports are replaced with client references or errors, depending on environment.
+ * - Only the correct references are exported; implementation is never leaked across boundaries.
+ *
+ * @param source - The original module source code.
+ * @param moduleId - The module's unique identifier.
+ * @param url - The module's URL.
+ * @param program - The parsed AST.
+ * @param map - The source map for the source code.
+ * @param isServerFunction - Whether the module is a server function.
+ * @param isClientComponent - Whether the module is a client component.
+ * @returns The transformed source code.
+ */
+export function transformModuleWithPreservedFunctions(
+  source: string,
+  moduleId: string,
+  program: Program,
+  isServerFunction: boolean | RegExpMatchArray | null,
+  isClientComponent: boolean | RegExpMatchArray | null,
+): string {
+
+  // Get export names and create module ID literal
+  const { exportNames, exports } = handleExports(source, 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";'];
+    const registrations: string[] = [];
+
+    // Register each export
+    for (const name of exportNames) {
+      const exportInfo = exports.get(name);
+      if (exportInfo) {
+        // For default exports, use the localName if available
+        const exportName = name === "default" && exportInfo.localName ? exportInfo.localName : name;
+        // Register all exports in server modules
+        registrations.push(
+          `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");
+
+    return finalSource;
+  }
+
+  // For client modules in server environment, register client references
+  if (isClientComponent) {
+    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}");
+}, ${moduleIdLiteral}, "default");`);
+      } else {
+        declarations.push(`export const ${name} = registerClientReference(function() {
+  throw new Error("${errorMessage}");
+}, ${moduleIdLiteral}, ${JSON.stringify(name)});`);
+      }
+    }
+
+    // Create new source with declarations
+    const newSource = [...imports, ...declarations].join("\n\n");
+
+    return newSource;
+  }
+
+  // For other cases, return original source
+  return source;
+}

package/plugin/loader/types.ts

@@ -0,0 +1,10 @@
+import type { Program as AcornProgram, Statement } 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[];
+}

package/plugin/plugin.client.ts

@@ -1,14 +1,21 @@
-import { reactPreservePlugin } from "./preserver/plugin.js";   
-import { reactTransformPlugin } from "./transformer/plugin.client.js";
-import type { StreamPluginOptions } from "../types.js";
+import { reactPreservePlugin } from "./preserver/plugin.js";
+import type {
+  StreamPluginOptions,
+  InlineCssOpt,
+  PagePropOpt,
+} 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(options = {} as StreamPluginOptions): import("vite").Plugin[] {
-    return [
-      envPlugin(),
-      reactClientPlugin(options),
-      reactTransformPlugin(options),
-      reactPreservePlugin(options),
-    ];
-  } 
+export function vitePluginReactServer<
+  T extends PagePropOpt = PagePropOpt,
+  InlineCSS extends InlineCssOpt = InlineCssOpt
+>(options = {} as StreamPluginOptions<T, InlineCSS>): import("vite").Plugin[] {
+  return [
+    envPlugin(),
+    //reactTransformPlugin(options),
+    reactClientPlugin(options),
+    reactPreservePlugin(options),
+  ];
+}

package/plugin/plugin.server.ts

@@ -1,13 +1,16 @@
 import { reactPreservePlugin } from "./preserver/plugin.js";
 import { reactStaticPlugin } from "./react-static/plugin.js";
 import { reactTransformPlugin } from "./transformer/plugin.server.js";
-import type { StreamPluginOptions } from "./types.js";
+import type { StreamPluginOptions, PagePropOpt, InlineCssOpt } from "./types.js";
 import { reactServerPlugin } from "./react-server/plugin.js";
 import { envPlugin } from "./env/plugin.js";
 
 
-export function vitePluginReactServer(
-  options = {} as StreamPluginOptions
+export function vitePluginReactServer<
+  T extends PagePropOpt = PagePropOpt,
+  InlineCSS extends InlineCssOpt = InlineCssOpt
+>(
+  options = {} as StreamPluginOptions<T, InlineCSS>
 ): import("vite").Plugin[] {
   if(!options.build?.pages || (Array.isArray(options.build.pages) && options.build.pages.length === 0)) {
     // in this case we do not need the static plugin at all

package/plugin/preserver/plugin.ts

@@ -1,7 +1,12 @@
 import type { Node } from "estree";
-import type { StreamPluginOptions } from "../types.js";
+import type {
+  InlineCssOpt,
+  PagePropOpt,
+  StreamPluginOptions,
+} from "../types.js";
 import { DEFAULT_CONFIG } from "../config/defaults.js";
 import { basename } from "path";
+import { resolveAutoDiscoverMatcher } from "../config/resolveAutoDiscoverMatcher.js";
 
 const REACT_DIRECTIVES = new Set(["use client", "use server"]);
 
@@ -17,10 +22,13 @@ function createSourceMap(id: string, code: string, mappings: string) {
   };
 }
 
-function removeRanges(code: string, ranges: Array<{ start: number; end: number }>) {
+function removeRanges(
+  code: string,
+  ranges: Array<{ start: number; end: number }>
+) {
   // Sort ranges in reverse order to not affect positions
   ranges.sort((a, b) => b.start - a.start);
-  
+
   let result = code;
   for (const range of ranges) {
     result = result.slice(0, range.start) + result.slice(range.end);
@@ -31,14 +39,20 @@ function removeRanges(code: string, ranges: Array<{ start: number; end: number }
 function countLines(str: string): number {
   let count = 1;
   for (let i = 0; i < str.length; i++) {
-    if (str[i] === '\n') count++;
+    if (str[i] === "\n") count++;
   }
   return count;
 }
 
-export function reactPreservePlugin(_options: StreamPluginOptions): import("vite").Plugin {
+export function reactPreservePlugin<
+  T extends PagePropOpt = PagePropOpt,
+  InlineCSS extends InlineCssOpt = InlineCssOpt
+>(options: StreamPluginOptions<T, InlineCSS>): import("vite").Plugin {
   const meta: Record<string, Set<string>> = {};
-
+  // saves us from transforming all the options
+  const moduleExtension = resolveAutoDiscoverMatcher(options.autoDiscover?.moduleExtension, DEFAULT_CONFIG.AUTO_DISCOVER.moduleExtension);
+  const vendorPattern = resolveAutoDiscoverMatcher(options.autoDiscover?.vendorPattern, DEFAULT_CONFIG.AUTO_DISCOVER.vendorPattern);
+  const virtualPattern = resolveAutoDiscoverMatcher(options.autoDiscover?.virtualPattern, DEFAULT_CONFIG.AUTO_DISCOVER.virtualPattern);
   return {
     name: "vite-plugin-react-server:preserve-directives",
     enforce: "post",
@@ -47,7 +61,11 @@ export function reactPreservePlugin(_options: StreamPluginOptions): import("vite
       order: "post", // Ensure this runs last in transform phase
       handler(code: string, id: string) {
         // Skip node_modules and vite files
-        if (id.includes("node_modules") || id.includes("vite/dist") || !id.match(DEFAULT_CONFIG.MODULE_EXTENSION)) {
+        if (
+          vendorPattern(id) ||
+          virtualPattern(id) ||
+          !moduleExtension(id)
+        ) {
           return null;
         }
 
@@ -91,14 +109,16 @@ export function reactPreservePlugin(_options: StreamPluginOptions): import("vite
           if (directive && "start" in node && "end" in node) {
             meta[id] ||= new Set<string>();
             meta[id].add(directive);
-            rangesToRemove.push({ 
-              start: node.start as number, 
-              end: node.end as number 
+            rangesToRemove.push({
+              start: node.start as number,
+              end: node.end as number,
             });
             hasChanged = true;
-            
+
             // Add mapping for each line removed
-            const removedLines = code.slice(node.start as number, node.end as number).split('\n').length - 1;
+            const removedLines =
+              code.slice(node.start as number, node.end as number).split("\n")
+                .length - 1;
             for (let i = 0; i < removedLines; i++) {
               mappings += ";AACA";
               lineCount++;
@@ -134,10 +154,11 @@ export function reactPreservePlugin(_options: StreamPluginOptions): import("vite
       }
 
       if (chunkDirectives.size) {
-        const directivesCode = Array.from(chunkDirectives)
-          .map((d) => `"${d}";`)
-          .join("\n") + "\n";
-        
+        const directivesCode =
+          Array.from(chunkDirectives)
+            .map((d) => `"${d}";`)
+            .join("\n") + "\n";
+
         const newCode = directivesCode + code;
 
         // Create source map for the prepended directives
@@ -155,4 +176,3 @@ export function reactPreservePlugin(_options: StreamPluginOptions): import("vite
     },
   };
 }
-

package/plugin/react-client/{server.ts → configureWorkerRequestHandler.ts}

@@ -1,6 +1,8 @@
 import type { ViteDevServer } from "vite";
 import type {
   AutoDiscoveredFiles,
+  InlineCssOpt,
+  PagePropOpt,
   RenderMetrics,
   RequestHandler,
   ResolvedUserOptions,
@@ -15,7 +17,7 @@ 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";
+import type { ReadableStream } from "node:stream/web";
 
 /**
  * Configures the worker request handler.
@@ -23,7 +25,10 @@ import { ReadableStream } from "node:stream/web";
  * @param autoDiscoveredFiles - The auto discovered files
  * @param userOptions - The user options
  */
-export async function configureWorkerRequestHandler({
+export async function configureWorkerRequestHandler<
+  T extends PagePropOpt = PagePropOpt,
+  InlineCSS extends InlineCssOpt = InlineCssOpt
+>({
   server,
   autoDiscoveredFiles,
   userOptions: _userOptions,
@@ -32,7 +37,7 @@ export async function configureWorkerRequestHandler({
 }: {
   server: ViteDevServer;
   autoDiscoveredFiles: AutoDiscoveredFiles;
-  userOptions: ResolvedUserOptions;
+  userOptions: ResolvedUserOptions<T, InlineCSS>;
   hmrChannel: MessageChannel;
   onMetrics?: (metrics: RenderMetrics) => void;
 }) {
@@ -77,12 +82,12 @@ export async function configureWorkerRequestHandler({
   // Create the request handler
   const handler: RequestHandler = async (req, res, next) => {
     if (!req.url) return next();
-    if (handlerOptions.verbose) logger.info(`Received request: ${req.url}`);
 
-    const info = requestInfo(req, handlerOptions, "");
-    if (!info.isRscRequest) return next();
-    if (handlerOptions.verbose)
-      logger.info(`Request info: ${JSON.stringify(info)}`);
+    const info = requestInfo(req, handlerOptions, "", server.config.logger);
+
+    if (!info.isRscRequest) {
+      return next();
+    }
 
     const routeFiles = await getRouteFiles(
       info.route,
@@ -101,7 +106,7 @@ export async function configureWorkerRequestHandler({
       res.setHeader("Transfer-Encoding", "chunked");
       res.setHeader("Connection", "keep-alive");
 
-      const serializedUserOptions = serializedOptions(
+      const serializedUserOptions = serializedOptions<T, InlineCSS>(
         handlerOptions,
         autoDiscoveredFiles
       );
@@ -140,6 +145,8 @@ export async function configureWorkerRequestHandler({
         worker: currentWorker!,
         message: {
           ...serializedUserOptions,
+          id: info.route,
+          type: "RSC_RENDER",
           // we make the worker stream aware of the route, pagePath, propsPath
           route: info.route,
           pagePath: pagePath,
@@ -153,14 +160,17 @@ export async function configureWorkerRequestHandler({
         },
         logger,
         handlers: {
-          onMetrics: userOnMetrics,
+          onMetrics: (id, metrics) => {
+            metrics.route = id;
+            userOnMetrics(metrics);
+          },
           onHmrAccept: () => {
             // TODO: implement
-           // console.log("onHmrAccept", routes);
+            // console.log("onHmrAccept", routes);
           },
           onHmrUpdate: () => {
             // TODO: implement
-           // console.log("onHmrUpdate", routes);
+            // console.log("onHmrUpdate", routes);
           },
         },
         verbose: handlerOptions.verbose,

package/plugin/react-client/createMessageHandlers.ts

@@ -11,39 +11,47 @@ type MessageHandlerContext = {
 export function createMessageHandler({
   handlers,
   logger,
-  verbose = false
+  verbose = false,
 }: MessageHandlerContext) {
   return (message: RscWorkerOutputMessage | undefined) => {
     if (!message) {
-      logger.warn("[react-client] Received undefined message from worker");
+      logger.warn("Received undefined message");
       return;
     }
-    if(verbose) logger.info('new message '+message.type)
+
     switch (message.type) {
       case "READY":
         if(verbose) logger.info("[react-client] Worker is ready");
         break;
+      case "ERROR":
+        handlers.onError(message.id, message.error, message.errorInfo);
+        break;
       case "RSC_CHUNK":
-        handlers.onData(message.chunk);
+        handlers.onData(message.id, message.chunk);
         break;
       case "RSC_END":
-        handlers.onEnd();
-        break;
-      case "ERROR":
-        handlers.onError(message.error, message.errorInfo);
+        handlers.onEnd(message.id);
         break;
       case "RSC_METRICS":
-        handlers.onMetrics(message.metrics);
+        handlers.onMetrics(message.id, message.metrics);
         break;
       case "HMR_ACCEPT":
-        handlers.onHmrAccept(message.routes ?? []);
+        handlers.onHmrAccept(message.id, message.routes);
         break;
       case "HMR_UPDATE":
-        handlers.onHmrUpdate(message.routes ?? []);
+        handlers.onHmrUpdate(message.id, message.routes);
         break;
-      default:
-        logger.warn(`Unknown worker output message type: ${message.type}`);
+      case "SERVER_ACTION":
+        handlers.onServerAction?.(message.id, message.args);
+        break;
+      case "SERVER_ACTION_RESPONSE":
+        handlers.onServerActionResponse?.(message.id, message.result, message.error);
         break;
+      case "SERVER_MODULE":
+        handlers.onServerModule?.(message.id, message.url, message.source);
+        break;
+      default:
+        logger.warn(`Unknown worker output message type: ${(message as { type: string }).type}`);
     }
   };
 }