vite-plugin-react-server 1.2.0-alpha.1 → 1.2.1

package/plugin/helpers/createPatternMatcher.ts

@@ -0,0 +1,100 @@
+import type { RegExpOpt, DeserializedRegExp } from "../types.js";
+import { interpolatePattern } from "../config/interpolatePattern.js";
+import { parsePattern } from "../config/parsePattern.js";
+
+/**
+ * Unified pattern matcher that consolidates pattern resolution logic
+ * used across resolveDirectiveMatcher and resolvePatternWithValues.
+ * 
+ * This helper reduces code duplication and provides consistent pattern matching
+ * behavior across the codebase.
+ */
+
+export interface PatternMatcherOptions {
+  /** Values for string interpolation */
+  values?: Record<string, string>;
+  /** Whether to handle deserialized RegExp objects */
+  handleDeserialized?: boolean;
+  /** Default fallback function when no pattern matches */
+  fallback?: (input: string, moduleId?: string) => boolean;
+  /** Whether to throw error on invalid patterns (vs using fallback) */
+  throwOnInvalid?: boolean;
+}
+
+/**
+ * Creates a pattern matcher function from various pattern types.
+ * Consolidates logic from resolveDirectiveMatcher and resolvePatternWithValues.
+ */
+export function createPatternMatcher(
+  pattern?: RegExpOpt,
+  defaultPattern?: RegExpOpt | ((input: string, moduleId?: string) => boolean),
+  options: PatternMatcherOptions = {}
+): (input: string, moduleId?: string) => boolean {
+  const {
+    values = {},
+    handleDeserialized = false,
+    fallback = () => false,
+    throwOnInvalid = false
+  } = options;
+
+  // Try primary pattern first
+  const primaryMatcher = resolvePattern(pattern, values, handleDeserialized);
+  if (primaryMatcher) {
+    return primaryMatcher;
+  }
+
+  // Try default pattern
+  const defaultMatcher = resolvePattern(defaultPattern, values, handleDeserialized);
+  if (defaultMatcher) {
+    return defaultMatcher;
+  }
+
+  // Handle invalid patterns
+  if (throwOnInvalid) {
+    throw new Error("No valid pattern provided");
+  }
+
+  return fallback;
+}
+
+/**
+ * Internal helper to resolve a single pattern to a matcher function
+ */
+function resolvePattern(
+  pattern: RegExpOpt | ((input: string, moduleId?: string) => boolean) | undefined,
+  values: Record<string, string>,
+  handleDeserialized: boolean
+): ((input: string, moduleId?: string) => boolean) | null {
+  // Function patterns
+  if (typeof pattern === "function") {
+    return pattern;
+  }
+
+  // RegExp patterns
+  if (pattern instanceof RegExp) {
+    return (input: string) => pattern.test(input);
+  }
+
+  // String patterns (with optional interpolation)
+  if (typeof pattern === "string") {
+    const interpolatedPattern = Object.keys(values).length > 0 
+      ? interpolatePattern(pattern, values) 
+      : pattern;
+    const regex = parsePattern(interpolatedPattern);
+    return (input: string) => regex.test(input);
+  }
+
+  // Deserialized RegExp patterns (for worker communication)
+  if (
+    handleDeserialized &&
+    typeof pattern === "object" &&
+    pattern != null &&
+    "__isRegExp" in pattern
+  ) {
+    const deserialized = pattern as DeserializedRegExp;
+    const regex = new RegExp(deserialized.source, deserialized.flags);
+    return (input: string) => regex.test(input);
+  }
+
+  return null;
+}

package/plugin/helpers/createRscRenderHelpers.ts

@@ -0,0 +1,77 @@
+import type { CreateHandlerOptions } from "../types.js";
+import type { RscRenderContext } from "../stream/renderRscStream.types.js";
+import { createElementWithReact } from "./createElementWithReact.js";
+import { React } from "../vendor/vendor.server.js";
+import { createHeadlessReusePageComponent } from "./headlessStreamReuseHandler.js";
+
+/**
+ * Pure function for creating React element
+ * This is environment-agnostic and can be used in both client and server
+ */
+export function createReactElement(
+  options: CreateHandlerOptions,
+  context: RscRenderContext,
+) {
+  // Determine if this is a headless stream by checking if htmlPath is empty
+  // This is more reliable than checking the ID
+  const isHeadless = options.htmlPath === "";
+
+  // Handle headless stream reuse for full streams
+  let finalOptions = options;
+  if (!isHeadless && context.reuseHeadlessStreamId) {
+    const reusePageComponent = createHeadlessReusePageComponent({
+      reuseHeadlessStreamId: context.reuseHeadlessStreamId,
+      headlessStreamElements: context.headlessStreamElements || new Map<string, any>(),
+      headlessStreamErrors: context.headlessStreamErrors || new Map<string, any>(),
+      route: context.route,
+      verbose: context.verbose,
+      logger: context.logger,
+    });
+    
+    if (reusePageComponent !== undefined) {
+      finalOptions = {
+        ...options,
+        PageComponent: reusePageComponent,
+      };
+    }
+  }
+
+  return createElementWithReact(React, {
+    ...finalOptions,
+    Html: isHeadless ? React.Fragment : finalOptions.HtmlComponent,
+    as: isHeadless ? React.Fragment : "div",
+  });
+}
+
+/**
+ * Pure function for storing headless stream data
+ */
+export function storeHeadlessStreamData(
+  context: RscRenderContext,
+  finalOptions: CreateHandlerOptions
+): void {
+  // Determine if this is a headless stream by checking if htmlPath is empty
+  const isHeadless = finalOptions.htmlPath === "";
+
+  if (
+    context.headlessStreamElements &&
+    isHeadless &&
+    !context.headlessStreamErrors?.has(context.route)
+  ) {
+    // Store the rendered elements for reuse
+    const element = createElementWithReact(React, {
+      ...finalOptions,
+      Html: React.Fragment,
+      as: React.Fragment,
+    });
+    context.headlessStreamElements.set(context.id, {
+      elements: element,
+      errored: false,
+    });
+  }
+}
+
+export const createRscRenderHelpers = {
+  createReactElement,
+  storeHeadlessStreamData,
+};

package/plugin/helpers/createSafePageComponent.ts

@@ -0,0 +1,64 @@
+import { React } from "../vendor/vendor.server.js";
+
+/**
+ * Creates a safe Page component that doesn't throw errors.
+ * Used when headless streams have errors to prevent errors from reaching the HTML worker.
+ * 
+ * @param errorMessage - Optional error message to display
+ * @returns A safe React component that renders a div with error content
+ */
+export function createSafePageComponent(errorMessage: string = "Error occurred during rendering") {
+  return () => React.createElement("div", { id: "root" }, errorMessage);
+}
+
+/**
+ * Creates a fallback Page component using React.Fragment.
+ * Used by RSC worker for consistent fallback behavior.
+ * 
+ * @returns React.Fragment as a safe fallback
+ */
+export function createFallbackPageComponent() {
+  return React.Fragment;
+}
+
+/**
+ * Determines if a Page component should be replaced with a safe fallback.
+ * 
+ * @param hasHeadlessError - Whether the headless stream had errors
+ * @param isHeadless - Whether this is a headless stream
+ * @returns true if a safe fallback should be used
+ */
+export function shouldUseSafePageComponent(
+  hasHeadlessError: boolean,
+  isHeadless: boolean
+): boolean {
+  // For headless streams, never use fallback (let them error naturally)
+  if (isHeadless) {
+    return false;
+  }
+  
+  // For full streams, use fallback if headless stream had errors
+  return hasHeadlessError;
+}
+
+/**
+ * Creates the appropriate Page component based on error state.
+ * 
+ * @param originalPageComponent - The original Page component
+ * @param hasHeadlessError - Whether the headless stream had errors
+ * @param isHeadless - Whether this is a headless stream
+ * @param useReactFragment - Whether to use React.Fragment (RSC worker style) or div (server style)
+ * @returns The appropriate Page component to use
+ */
+export function createPageComponentWithErrorHandling(
+  originalPageComponent: any,
+  hasHeadlessError: boolean,
+  isHeadless: boolean,
+  useReactFragment: boolean = false
+) {
+  if (shouldUseSafePageComponent(hasHeadlessError, isHeadless)) {
+    return useReactFragment ? createFallbackPageComponent() : createSafePageComponent();
+  }
+  
+  return originalPageComponent;
+}

package/plugin/helpers/createSerializableHandlerOptions.ts

@@ -0,0 +1,183 @@
+import type { CreateHandlerOptions, PanicThreshold } from "../types.js";
+import { cleanObject } from "./cleanObject.js";
+import { processForSerialization } from "./serializeUserOptions.js";
+
+/**
+ * Serializable handler options that can be safely passed to workers
+ * 
+ * This extracts only the serializable parts of CreateHandlerOptions,
+ * excluding functions, React components, and other non-serializable data.
+ * 
+ * WHAT'S INCLUDED:
+ * - All primitive values (strings, numbers, booleans)
+ * - Configuration objects (build, userOptions, etc.)
+ * - File paths and URLs
+ * - CSS data (cssFiles, globalCss)
+ * 
+ * WHAT'S EXCLUDED:
+ * - React components (PageComponent, RootComponent, HtmlComponent)
+ * - Functions (loader, normalizer, onEvent, onMetrics)
+ * - Logger instances
+ * - Module IDs and autoDiscover functions
+ */
+export interface SerializableHandlerOptions {
+  // Core identification
+  id?: string;
+  route: string;
+  url: string;
+  
+  // File paths
+  pagePath: string;
+  propsPath?: string;
+  rootPath?: string;
+  htmlPath?: string;
+  
+  // Export names
+  pageExportName: string;
+  propsExportName: string;
+  rootExportName: string;
+  htmlExportName: string;
+  
+  // Module configuration
+  projectRoot: string;
+  moduleRootPath: string;
+  moduleBaseURL: string;
+  moduleBasePath: string;
+  moduleBase?: string;
+  publicOrigin: string;
+  
+  // Build configuration
+  build: CreateHandlerOptions["build"];
+  dev: CreateHandlerOptions["dev"];
+  
+  // CSS configuration
+  css: CreateHandlerOptions["css"];
+  
+  // Auto-discovery configuration
+  autoDiscover?: CreateHandlerOptions["autoDiscover"]
+  
+  // CSS data
+  cssFiles?: Map<string, any>;
+  globalCss?: Map<string, any>;
+  
+  // Page props (must be serializable)
+  pageProps: any;
+  
+  // Panic threshold
+  panicThreshold: PanicThreshold;
+  
+  // Timeouts
+  htmlTimeout?: number;
+  
+  // Stream options
+  clientPipeableStreamOptions?: Omit<NonNullable<CreateHandlerOptions["clientPipeableStreamOptions"]>, `on${string}` | 'filterStackFrame'>;
+  serverPipeableStreamOptions?: Omit<NonNullable<CreateHandlerOptions["serverPipeableStreamOptions"]>, `on${string}`>;
+}
+
+/**
+ * Creates serializable handler options from full CreateHandlerOptions
+ * 
+ * This function strips out non-serializable parts (React components, functions)
+ * and returns only the data that can be safely passed to workers.
+ * 
+ * @param options - Full CreateHandlerOptions object
+ * @returns Serializable options for worker communication
+ */
+export function createSerializableHandlerOptions(
+  options: Partial<CreateHandlerOptions>
+): SerializableHandlerOptions {
+  const {
+    // Extract serializable parts
+    id,
+    route,
+    url,
+    pagePath,
+    propsPath,
+    rootPath,
+    htmlPath,
+    pageExportName,
+    propsExportName,
+    rootExportName,
+    htmlExportName,
+    projectRoot,
+    moduleRootPath,
+    moduleBaseURL,
+    moduleBasePath,
+    moduleBase,
+    build,
+    cssFiles,
+    globalCss,
+    pageProps,
+    css,
+    autoDiscover,
+    clientPipeableStreamOptions,
+    serverPipeableStreamOptions,
+    ...rest
+  } = options;
+
+
+  const result: any = {
+    route: route || "",
+    url: url || "",
+  };
+
+  // Only include properties if they exist
+  if (typeof id === 'string') result.id = id;
+  if (typeof pagePath === 'string') result.pagePath = pagePath;
+  if (typeof propsPath === 'string') result.propsPath = propsPath;
+  if (typeof rootPath === 'string') result.rootPath = rootPath;
+  if (typeof htmlPath === 'string') result.htmlPath = htmlPath;
+  if (typeof pageExportName === 'string') result.pageExportName = pageExportName;
+  if (typeof propsExportName === 'string') result.propsExportName = propsExportName;
+  if (typeof rootExportName === 'string') result.rootExportName = rootExportName;
+  if (typeof htmlExportName === 'string') result.htmlExportName = htmlExportName;
+  if (typeof projectRoot === 'string') result.projectRoot = projectRoot;
+  if (typeof moduleRootPath === 'string') result.moduleRootPath = moduleRootPath;
+  if (typeof moduleBaseURL === 'string') result.moduleBaseURL = moduleBaseURL;
+  if (typeof moduleBasePath === 'string') result.moduleBasePath = moduleBasePath;
+  if (typeof moduleBase === 'string') result.moduleBase = moduleBase;
+  if (build != null) {
+    // Clean the build object to remove functions that can't be cloned
+    const cleanedBuild = cleanObject(build, new Set([
+      "entryFile",
+      "chunkFile", 
+      "assetFile"
+    ]));
+    result.build = processForSerialization(cleanedBuild);
+  }
+
+  // Clean the entire options object to remove other non-serializable functions
+  const cleanedOptions = cleanObject(rest, new Set([
+    "normalizer",
+    "loader",
+    "onEvent",
+    "onMetrics"
+  ]));
+  const processedRest = processForSerialization(cleanedOptions);
+  if (css != null) result.css = css;
+  if (autoDiscover != null) {
+    // Clean the autoDiscover object to remove functions that can't be cloned
+    const cleanedAutoDiscover = cleanObject(autoDiscover);
+    result.autoDiscover = processForSerialization(cleanedAutoDiscover);
+  }
+  if (cssFiles != null) result.cssFiles = cssFiles;
+  if (globalCss != null) result.globalCss = globalCss;
+  if (pageProps != null) result.pageProps = pageProps;
+  if (clientPipeableStreamOptions != null) {
+    // Use the existing helper to clean the object - this will handle all non-function properties
+    const cleanedClientOptions = cleanObject(clientPipeableStreamOptions);
+    result.clientPipeableStreamOptions = processForSerialization(cleanedClientOptions);
+  }
+  if (serverPipeableStreamOptions != null) {
+    // Use the existing helper to clean the object - this will handle all non-function properties
+    const cleanedServerOptions = cleanObject(serverPipeableStreamOptions);
+    result.serverPipeableStreamOptions = processForSerialization(cleanedServerOptions);
+    
+      }
+
+  // Include any other serializable properties using existing helper
+  return {
+    ...result,
+    ...processedRest,
+  };
+}

package/plugin/helpers/createSharedLoader.ts

@@ -0,0 +1,207 @@
+import { join, isAbsolute } from "node:path";
+import { pathToFileURL } from "node:url";
+import type { Logger } from "vite";
+import type { InputNormalizer } from "../types.js";
+import { resolveVirtualAndNodeModules } from "./resolveVirtualAndNodeModules.js";
+import { resolveModuleFromManifest } from "./resolveModuleFromManifest.js";
+
+/**
+ * Shared loader utility that both RSC worker loader and build loader can use.
+ * 
+ * This handles the common pattern:
+ * 1. Parse id to get moduleId and exportName
+ * 2. Handle virtual modules and node_modules (via resolveVirtualAndNodeModules)
+ * 3. Try manifest-based resolution (build mode)
+ * 4. Import the module
+ * 5. Validate exports
+ * 
+ * If the result is already a module object (not a Promise), it's returned directly.
+ * This allows loaders to reuse already-loaded modules.
+ * 
+ * @param options - Loader configuration options
+ * @returns The resolved module (already a module object, not a Promise)
+ */
+export async function createSharedLoader({
+  moduleId,
+  exportName,
+  verbose = false,
+  logger,
+  // Virtual module handling
+  resolveVirtual = true,
+  // Manifest resolution
+  manifest,
+  normalizer,
+  moduleBase,
+  preserveModulesRoot,
+  projectRoot,
+  buildOutDir,
+  buildServerDir,
+  // Direct import options
+  isBuildMode = false,
+  isServeMode = false,
+  effectiveProjectRoot,
+  build,
+}: {
+  moduleId: string;
+  exportName?: string;
+  verbose?: boolean;
+  logger?: Logger;
+  // Virtual module handling
+  resolveVirtual?: boolean;
+  // Manifest resolution
+  manifest?: Record<string, { file: string } | undefined>;
+  normalizer?: InputNormalizer;
+  moduleBase?: string;
+  preserveModulesRoot?: boolean;
+  projectRoot?: string;
+  buildOutDir?: string;
+  buildServerDir?: string;
+  // Direct import options
+  isBuildMode?: boolean;
+  isServeMode?: boolean;
+  effectiveProjectRoot?: string;
+  build?: {
+    server?: string;
+    client?: string;
+    static?: string;
+    outDir?: string;
+  };
+}): Promise<Record<string, any>> {
+  // Step 1: Handle virtual modules and node_modules first (if enabled)
+  if (resolveVirtual) {
+    const virtualOrNodeModule = await resolveVirtualAndNodeModules(
+      moduleId,
+      exportName,
+      verbose,
+      logger
+    );
+    if (virtualOrNodeModule !== null) {
+      // resolveVirtualAndNodeModules returns a module object directly (not a Promise)
+      // If it's already a module object, return it directly
+      return virtualOrNodeModule;
+    }
+  }
+
+  // Step 2: Try manifest-based resolution (build mode)
+  let resolvedModuleID = moduleId;
+  if (isBuildMode && manifest && normalizer && moduleBase && projectRoot && buildOutDir && buildServerDir) {
+    const manifestResolution = resolveModuleFromManifest({
+      moduleId,
+      normalizer,
+      manifest,
+      moduleBase,
+      preserveModulesRoot,
+      projectRoot,
+      buildOutDir,
+      buildServerDir,
+      verbose,
+      logger,
+    });
+
+    if (manifestResolution.manifestEntry && manifestResolution.resolvedPath) {
+      // Found in manifest - use the resolved path (it's already a full absolute path)
+      resolvedModuleID = manifestResolution.resolvedPath;
+      if (verbose) {
+        logger?.info(
+          `[createSharedLoader] Build mode: resolved via manifest to: ${resolvedModuleID}`
+        );
+      }
+    } else {
+      // Not in manifest - use the builtModuleId from resolution
+      resolvedModuleID = manifestResolution.builtModuleId;
+      if (verbose) {
+        logger?.info(
+          `[createSharedLoader] Build mode: not in manifest, using builtModuleId: ${resolvedModuleID}`
+        );
+      }
+      
+      // Check if we need to prefix with build directory
+      // A source path starts with moduleBase (e.g., "src/"), a built path doesn't
+      // Also check if it's already an absolute path or starts with file://
+      const isSourcePath = moduleId.startsWith(moduleBase + "/") || 
+                          moduleId.startsWith("./" + moduleBase + "/") ||
+                          (isAbsolute(moduleId) && moduleId.includes(moduleBase));
+      
+      // If it's not a source path and not already absolute, prefix with server build directory
+      if (!isSourcePath && !isAbsolute(resolvedModuleID) && effectiveProjectRoot && build) {
+        const serverBuildPath = join(
+          effectiveProjectRoot,
+          build.outDir || "dist",
+          build.server || "server"
+        );
+        resolvedModuleID = join(serverBuildPath, resolvedModuleID);
+        if (verbose) {
+          logger?.info(
+            `[createSharedLoader] Build mode: prefixing with ${serverBuildPath}: ${resolvedModuleID}`
+          );
+        }
+      }
+    }
+  } else if (isServeMode) {
+    // Dev mode: load directly from source files, no build path prefixing
+    if (verbose) {
+      logger?.info(
+        `[createSharedLoader] Dev mode: loading directly from source`
+      );
+    }
+  } else if (isBuildMode && effectiveProjectRoot && build) {
+    // Build mode fallback: prefix with server build directory even without manifest/normalizer
+    if (!isAbsolute(resolvedModuleID)) {
+      const serverBuildPath = join(
+        effectiveProjectRoot,
+        build.outDir || "dist",
+        build.server || "server"
+      );
+      resolvedModuleID = join(serverBuildPath, resolvedModuleID);
+      if (verbose) {
+        logger?.info(
+          `[createSharedLoader] Build mode fallback: prefixing with ${serverBuildPath}: ${resolvedModuleID}`
+        );
+      }
+    }
+  }
+
+  // Step 3: Construct the full path and import
+  const fullPath = isAbsolute(resolvedModuleID) 
+    ? resolvedModuleID 
+    : effectiveProjectRoot 
+      ? join(effectiveProjectRoot, resolvedModuleID)
+      : resolvedModuleID;
+
+  if (verbose) {
+    logger?.info(`[createSharedLoader] Importing from: ${fullPath}`);
+  }
+
+  // Step 4: Import the module
+  const fileUrl = isAbsolute(fullPath) ? pathToFileURL(fullPath).href : fullPath;
+  const result = await import(fileUrl);
+
+  // Step 5: Validate exports
+  if (result == null) {
+    throw new Error(`Module "${moduleId}" does not have any exports`);
+  }
+
+  if (!Object.keys(result).length && exportName?.length) {
+    throw new Error(
+      `Module "${moduleId}" is a module, but does not have any exports so it can't find ${exportName}`
+    );
+  }
+
+  if (exportName && !(exportName in result)) {
+    throw new Error(
+      `Module "${moduleId}" exists, but does not export "${exportName}"`
+    );
+  }
+
+  if (verbose) {
+    logger?.info(
+      `[createSharedLoader] Module loaded successfully, exports: ${Object.keys(
+        result
+      ).join(", ")}`
+    );
+  }
+
+  // Import always returns a module object (not a Promise), so return it directly
+  return result;
+}
+