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

package/plugin/config/createModuleID.ts

@@ -1,9 +1,11 @@
 import type { ResolvedUserOptions } from "../types.js";
 import { replaceExtension } from "./extMap.js";
-import { getNodeEnv } from "../getNodeEnv.js";
+import { getNodeEnv } from "./getNodeEnv.js";
 import { DEFAULT_CONFIG } from "./defaults.js";
 import type { ConfigEnv } from "vite";
-import { sep } from "node:path";
+import { sep, resolve, join } from "node:path";
+import { readFileSync, existsSync } from "node:fs";
+import { createHash } from "node:crypto";
 
 export type ModuleIDKey =
   | "modulePattern"
@@ -20,19 +22,182 @@ export type ModuleIDKey =
 export const createDefaultModuleID = (
   options: Pick<
     ResolvedUserOptions,
-    "moduleBase" | "moduleBasePath" | "autoDiscover" | "build" | "moduleBaseURL"
+    "moduleBase" | "moduleBasePath" | "autoDiscover" | "build" | "dev" | "moduleBaseURL" | "projectRoot"
   >,
   configEnv?: ConfigEnv,
   mode = getNodeEnv()
 ) => {
-  const { moduleBase, moduleBasePath, build, moduleBaseURL } = options;
+  const { moduleBase, moduleBasePath, build, moduleBaseURL, projectRoot, autoDiscover } = options;
   const assetsDir = build.assetsDir || DEFAULT_CONFIG.BUILD.assetsDir;
   const isBuild = configEnv?.command === "build";
+  // CRITICAL: In development mode, NEVER hash, even if command is "build" (optimizer)
+  const isDevelopment = mode === "development";
+  const shouldHash = isBuild && !isDevelopment;
   const isProd = mode === "production" || isBuild;
+  // CRITICAL: In development mode, NEVER remove moduleBase (src/), even if command is "build" (optimizer)
   const removeModuleBase =
-    isProd || isBuild || options.build.preserveModulesRoot;
-  return (id: string) => {
+    (isProd || isBuild) && !isDevelopment && !options.build.preserveModulesRoot;
+  
+
+  // Hash configuration
+  const hashOption = build?.hash ?? DEFAULT_CONFIG.BUILD.hash;
+  
+  // Virtual pattern for excluding virtual modules from hashing
+  const virtualPattern = autoDiscover?.virtualPattern ?? DEFAULT_CONFIG.AUTO_DISCOVER.virtualPattern;
+  
+  // Client component pattern for hashing
+  const clientPattern = /\.client\.[cm]?[jt]sx?$/;
+
+  // Clean hash API that mimics Rollup's behavior
+  const createRollupLikeHash = (content: string, hashCharacters: 'base36' | 'base64' | 'hex' = 'base36') => {
+    const hash = createHash('sha1');
+    hash.update(content);
+    const fullHash = hash.digest('hex');
+    
+    // Apply the same character set logic as Rollup
+    switch (hashCharacters) {
+      case 'base36':
+        // Convert hex to base36 (0-9, a-z)
+        return parseInt(fullHash.substring(0, 8), 16).toString(36);
+      case 'base64':
+        // Convert to base64-like format (A-Z, a-z, 0-9, -, _)
+        return Buffer.from(fullHash.substring(0, 8), 'hex').toString('base64')
+          .replace(/\+/g, '-')
+          .replace(/\//g, '_')
+          .replace(/=/g, '');
+      case 'hex':
+      default:
+        // Return hex format
+        return fullHash.substring(0, 8);
+    }
+  };
+
+  // Hash function for client components - same logic as resolveOptions.ts
+  const hash = (input: string | null, _ssr: boolean, sourceContent?: string) => {
+    if (!input) return "";
+    if (new RegExp(/\.(node|d\.ts)$/).test(input)) {
+      return input;
+    }
+    
+    // CRITICAL: Never hash node_modules files - Vite/Rollup handles those
+    if (input.includes("node_modules")) {
+      return input;
+    }
     
+    // CRITICAL: Never hash virtual modules (_virtual or matching virtualPattern) - Vite handles those
+    if (input.includes("_virtual") || (virtualPattern && virtualPattern.test(input))) {
+      return input;
+    }
+    
+    // Check if hashing is disabled
+    if (hashOption === "false") {
+      return input;
+    }
+    
+    // Only hash client components - server files should not be hashed
+    const isClientComponent = clientPattern.test(input);
+
+    if (!isClientComponent) {
+      return input;
+    }
+    
+    // Always hash the source content for consistency across builds
+    // This ensures the same hash is generated in transformer and build process
+    let contentToHash: string;
+    
+    if (sourceContent) {
+      // Use provided source content (preferred)
+      contentToHash = sourceContent;
+    } else {
+      // Try to read source file content
+      try {
+        const sourcePath = resolve(projectRoot, input);
+        if (existsSync(sourcePath)) {
+          contentToHash = readFileSync(sourcePath, 'utf-8');
+        } else {
+          // Fallback to filename
+          contentToHash = input;
+        }
+      } catch (error) {
+        // Fallback to filename
+        contentToHash = input;
+      }
+    }
+    
+    // Generate hash using Rollup-like algorithm
+    const hashCharacters = typeof hashOption === 'object' && hashOption?.format === 'hex' ? 'hex' : 'base36';
+    const contentHash = createRollupLikeHash(contentToHash, hashCharacters);
+    
+    // Apply naming logic
+    const extensionIndex = input.lastIndexOf(".");
+    if (extensionIndex !== -1) {
+      const extension = input.slice(extensionIndex);
+      const filename = input.slice(0, extensionIndex);
+      return filename + "-" + contentHash + extension;
+    } else {
+      return input + "-" + contentHash;
+    }
+  };
+  const staticClientDist = isBuild ? join(build?.outDir || "dist", build?.static || "static") : "";
+  const ssrClientDist = isBuild ? join(build?.outDir || "dist", build?.client || "client") : "";
+  const serverDist = isBuild ? join(build?.outDir || "dist", build?.server || "server") : "";
+  const buildDirs = isBuild ? [serverDist, ssrClientDist, staticClientDist] : [];
+
+  return (id: string, sourceContent?: string) => {
+    // For transformer usage (when we're in build mode and processing server components),
+    // we want to strip build directory prefixes to get relative paths
+    // This ensures the RSC stream contains paths that can be resolved by the HTML transform
+    if (shouldHash) {
+      // Strip build directory prefixes to get relative paths
+      for (const buildDir of buildDirs) {
+        if (id.startsWith(buildDir)) {
+          const result = id.slice(buildDir.length);
+          return result;
+        }
+      }
+      // Check for double path issues (like dist/client//dist/server/)
+      if (id.includes('//')) {
+        // Try to fix double path issues by finding the last occurrence of dist/
+        const lastDistIndex = id.lastIndexOf('dist/');
+        if (lastDistIndex !== -1) {
+          const result = id.slice(lastDistIndex);
+          return result;
+        }
+      }
+      
+      // For client components in build mode, transform source paths to built paths
+      const isClientComponent = clientPattern.test(id);
+      if (isClientComponent) {
+        // Transform source path to built client path
+        let transformedId = id;
+        
+        // Step 1: Remove moduleBase (typically "src/") from the beginning
+        if (removeModuleBase && transformedId.startsWith(moduleBase + sep)) {
+          transformedId = transformedId.slice(moduleBase.length + sep.length);
+        }
+        
+        // Step 2: Apply extension mapping for build
+        transformedId = replaceExtension(transformedId, {
+          build: { extensionMap: build.extensionMap },
+        });
+        
+        
+        // Step 3: Apply hashing for client components
+        transformedId = hash(transformedId, false, sourceContent);
+        
+        // Step 4: Ensure paths start with moduleBasePath
+        if (moduleBasePath && !transformedId.startsWith(moduleBasePath)) {
+          transformedId = moduleBasePath + transformedId;
+        }
+        
+        return transformedId;
+      }
+      
+      return id;
+    }
+    
+    // Normal build path transformation (existing logic)
+
     // Step 1: Handle assets directory paths - remove src from within assets path
     // Transform: assets/src/page/file.css -> assets/page/file.css
     if (id.startsWith(assetsDir + sep + moduleBase + sep)) {
@@ -55,18 +220,44 @@ export const createDefaultModuleID = (
       id = id.slice(moduleBase.length + sep.length);
     }
 
-    // Step 5: Ensure paths start with a moduleBasePath
-    if (!id.startsWith(moduleBasePath)) {
+    // Step 5: Ensure paths start with moduleBasePath (avoid double-prefix)
+    if (moduleBasePath && !id.startsWith(moduleBasePath)) {
       id = moduleBasePath + id;
     }
     
-    // Step 6: Apply extension mapping for build
-    if (isBuild) {
+    // Step 6: Apply extension mapping
+    // ALWAYS replace extensions for client components (browser can't import .tsx)
+    // For other files, only replace in build mode
+    const isClientComponent = clientPattern.test(id);
+    if (isBuild || isClientComponent) {
       id = replaceExtension(id, {
         build: { extensionMap: build.extensionMap },
       });
     }
     
+    // Step 7: Ensure CSS files are placed in the assets directory
+    if (isBuild && id.endsWith('.css') && !id.startsWith(assetsDir + sep)) {
+      id = assetsDir + sep + id;
+    }
+    
+    // Step 8: Apply hashing for client components (only in production builds, not dev)
+    if (shouldHash) {
+      id = hash(id, false, sourceContent);
+    }
+    
+    // For client components, ensure no leading slash to allow proper relative resolution
+    // (isClientComponent already defined in Step 6)
+    if (isClientComponent && moduleBasePath === '') {
+      return id; // No leading slash for client components
+    }
+    
+    // Don't add leading slash for relative paths - this causes module resolution issues
+    if (moduleBasePath === '') {
+      return id; // Return as-is without leading slash
+    }
+    
+    // id already has moduleBasePath from Step 5 — return as-is
     return id;
   };
 };
+

package/plugin/config/defaults.tsx

@@ -2,8 +2,10 @@ import { Root } from "../components/root.js";
 import { Html } from "../components/html.js";
 import { parse } from "../loader/parse.js";
 import { pluginRoot } from "../root.js";
-import { getNodeEnv } from "../getNodeEnv.js";
-
+import { getNodeEnv } from "./getNodeEnv.js";
+import { getCondition } from "./getCondition.js";
+import { createLogger } from "vite";
+const LOGGER = createLogger();
 // Directive patterns - matching the logic in findDirectiveMatches.ts
 const DIRECTIVE_PATTERNS = {
   // Client directive must be at start of file
@@ -11,49 +13,78 @@ const DIRECTIVE_PATTERNS = {
   // Server directive can be anywhere but must be properly terminated
   SERVER: /(?:"use server"|'use server')\s*(?:\n|;|$)/,
   // Generic pattern for both directives
-  ANY: /(?:"use\s+(?:client|server)"|'use\s+(?:client|server)')\s*(?:\n|;|$)/g
+  ANY: /(?:"use\s+(?:client|server)"|'use\s+(?:client|server)')\s*(?:\n|;|$)/g,
 } as const;
 
+const SERVER_ACTION_FILE = /(\.|\/)?server(\.|\/)?/;
+const CLIENT_COMPONENT_FILE = /(\.|\/)?client(\.|\/)?/;
+const IS_SERVER_ACTION_CODE = (code: string, moduleId?: string) =>
+  code.match(SERVER_ACTION_FILE) != null ||
+  (moduleId && SERVER_ACTION_FILE.test(moduleId.toLowerCase())) ||
+  false;
+const IS_CLIENT_COMPONENT_CODE = (code: string, moduleId?: string) =>
+  code.match(CLIENT_COMPONENT_FILE) != null ||
+  (moduleId && CLIENT_COMPONENT_FILE.test(moduleId.toLowerCase())) ||
+  false;
+
+// Separate functions for checking client components by code vs by name
+const IS_CLIENT_COMPONENT_BY_CODE = (code: string) =>
+  code.match(CLIENT_COMPONENT_FILE) != null || false;
+
+const IS_CLIENT_COMPONENT_BY_NAME = (moduleId: string, _transformedModuleId?: string) =>
+  CLIENT_COMPONENT_FILE.test(moduleId.toLowerCase()) || false;
 // Directive configurations
 export const DIRECTIVE_CONFIGS = {
   client: {
     functionLevel: false,
-    target: 'client' as const,
-    validate: (params: { 
-      code: string, 
-      moduleId?: string,
-      index: number,
-      match: RegExpExecArray 
+    target: "client" as const,
+    validate: (params: {
+      code: string;
+      moduleId?: string;
+      index: number;
+      match: RegExpExecArray;
     }) => {
       // Client directive must be at very start of file
       return params.index === 0;
     },
-    warning: "'use client' directive is only allowed at the top of a file"
+    warning: "'use client' directive is only allowed at the top of a file",
   },
   server: {
     functionLevel: true,
-    target: 'server' as const,
-    validate: (params: { 
-      code: string, 
-      moduleId?: string,
-      index: number,
-      match: RegExpExecArray 
+    target: "server" as const,
+    validate: (params: {
+      code: string;
+      moduleId?: string;
+      index: number;
+      match: RegExpExecArray;
     }) => {
       // Check if directive is at start of file or after newline
       const before = params.code.slice(0, params.index).trim();
-      return before === '' || before.endsWith('\n');
+      return before === "" || before.endsWith("\n");
     },
-    warning: "File-level directives must be at the top of the file, before any other code"
-  }
+    warning:
+      "File-level directives must be at the top of the file, before any other code",
+  },
 } as const;
 
 // Helper to get directive type from string
-export const getDirectiveType = (directive: string): 'client' | 'server' | undefined => {
-  if (directive.includes('client')) return 'client';
-  if (directive.includes('server')) return 'server';
+export const getDirectiveType = (
+  directive: string
+): "client" | "server" | undefined => {
+  if (directive.includes("client")) return "client";
+  if (directive.includes("server")) return "server";
   return undefined;
 };
 
+export const MODE = getNodeEnv();
+export const CONDITION = getCondition();
+export const IS_SERVER = CONDITION === "react-server";
+export const IS_CLIENT = CONDITION === "react-client";
+// Note: This should be replaced with configEnv.command === "build" in functions that receive configEnv
+// This is kept for backward compatibility but should not be used in new code
+export const IS_BUILD = process.argv.includes("build");
+export const IS_SERVE = !IS_BUILD; // dont have to check for dev since it's the default
+
 // Helper to normalize directive strings
 // const normalizeDirective = (directive: string) => directive.replace(/\s+/g, '').toLowerCase();
 
@@ -62,14 +93,10 @@ export const DEFAULT_LOADER_CONFIG = {
   serverDirective: DIRECTIVE_PATTERNS.SERVER,
   clientDirective: DIRECTIVE_PATTERNS.CLIENT,
   directivePattern: DIRECTIVE_PATTERNS.ANY,
-  isServerFunctionCode: (code: string, moduleId?: string) => 
-    code.match(DIRECTIVE_PATTERNS.SERVER) != null || 
-    (moduleId && /(\.|\/)?server(\.|\/)?/.test(moduleId.toLowerCase())) || 
-    false,
-  isClientComponentCode: (code: string, moduleId?: string) => 
-    code.match(DIRECTIVE_PATTERNS.CLIENT) != null || 
-    (moduleId && /(\.|\/)?client(\.|\/)?/.test(moduleId.toLowerCase())) || 
-    false,
+  isServerFunctionCode: IS_SERVER_ACTION_CODE,
+  isClientComponentCode: IS_CLIENT_COMPONENT_CODE,
+  isClientComponentByCode: IS_CLIENT_COMPONENT_BY_CODE,
+  isClientComponentByName: IS_CLIENT_COMPONENT_BY_NAME,
   allowedDirectives: DIRECTIVE_CONFIGS,
   importServerPath: "react-server-dom-esm/server",
   importClientPath: "react-server-dom-esm/server",
@@ -77,7 +104,11 @@ export const DEFAULT_LOADER_CONFIG = {
   registerServerReferenceName: "registerServerReference",
   getDirectiveType,
   parse: parse,
-  mode: getNodeEnv()
+  mode: MODE,
+  verbose: false,
+  logger: LOGGER,
+  moduleID: (moduleId: string, _sourceContent?: string) =>
+    typeof moduleId === "string" ? moduleId : String(moduleId),
 } as const;
 
 // Define base patterns that can be reused
@@ -87,7 +118,7 @@ export const BASE_PATTERNS = {
   CLIENT: "(?:\\.|\\/)?client(?:\\.(m|c)?(j|t)sx?)?$",
   PAGE: "(?:\\.|\\/)?(P|p)age(?:\\.(m|c)?(j|t)sx?)?$",
   PROPS: "(?:\\.|\\/)?props(?:\\.(m|c)?(j|t)sx?)?$",
-  DIRECTIVE: "^\"use (client|server)\"[\\s;]*\\n?/m",
+  DIRECTIVE: '^"use (client|server)"[\\s;]*\\n?/m',
   VENDOR: "node_modules|@",
   VIRTUAL: "@",
   DOT_FILES: "\\.",
@@ -101,12 +132,11 @@ export const BASE_PATTERNS = {
     NODE: ".node",
   },
 } as const;
-
 export const DEFAULT_CONFIG = {
   CLIENT_ASSETS_DIR: "assets",
   RSC_DIR: "rsc",
   MODULE_BASE: "src",
-  MODULE_BASE_PATH: "/",
+  MODULE_BASE_PATH: "",
   MODULE_BASE_URL: "/",
   PUBLIC_ORIGIN: "",
   PAGE: "page.tsx",
@@ -127,7 +157,8 @@ export const DEFAULT_CONFIG = {
   RSC_EXTENSION: ".rsc",
   ROOT: undefined,
   HTML: undefined,
-  ON_METRICS: ()=>{},
+  ON_METRICS: undefined,
+  ON_EVENT: undefined,
   DEV_PORT: 5173,
   PREVIEW_PORT: 4173,
   DEV_HOST: "localhost",
@@ -135,8 +166,11 @@ export const DEFAULT_CONFIG = {
   ENV_PREFIX: "VITE_",
   REACT_DIRECTIVES: new Set(["use client", "use server"]),
   RSC_TIMEOUT: 5000, // 5 seconds default timeout for RSC operations
+  HTML_TIMEOUT: 15000, // 15 seconds default timeout for HTML generation operations
   HTML_WORKER_STARTUP_TIMEOUT: 3000, // 3 seconds default timeout for HTML worker startup
   RSC_WORKER_STARTUP_TIMEOUT: 3000, // 3 seconds default timeout for RSC worker startup
+  FILE_WRITE_TIMEOUT: 10000, // 10 seconds default timeout for file write operations
+  WORKER_SHUTDOWN_TIMEOUT: 1000, // Reduced to 1 second for faster test cleanup
   COMPONENTS: {
     Html: Html,
     Root: Root,
@@ -151,7 +185,6 @@ export const DEFAULT_CONFIG = {
     assetsDir: "assets",
     hash: "hash",
     preserveModulesRoot: false,
-    preserveDirectives: false,
     rscOutputPath: "index.rsc",
     htmlOutputPath: "index.html",
     extensionMap: {
@@ -178,60 +211,80 @@ export const DEFAULT_CONFIG = {
     rscExtension: BASE_PATTERNS.EXT.RSC,
     cssModuleExtension: BASE_PATTERNS.EXT.CSS_MODULE,
     nodeExtension: BASE_PATTERNS.EXT.NODE,
+    // these defaults rely on process.argv
+    // even better is to use configEnv.command === "build"
+    // which will be done in createHandlerOptions.server.ts and createHandlerOptions.client.ts
+    useRscWorker: !IS_SERVER && IS_BUILD,
+    useHtmlWorker: IS_SERVER && IS_BUILD,
+  },
+  DEV: {
+    // these defaults rely on process.argv
+    useHtmlWorker: false, // during dev, the browser is the html-worker..
+    // if the user opts-in to creating the html-worker, the stream utilities
+    // will be able to stream html during development - the plugin never does this
+    // so we don't have to create the html-worker during dev by default
+    useRscWorker: !IS_SERVER && IS_SERVE, // during dev without server-conditions,
+    // the rsc-worker is created during dev by default
+    // this is because the rsc-worker is used to stream rsc during development
   },
   CSS: {
-    inlineCss: false,
+    inlineCss: undefined,
     purgeCss: false,
     inlineThreshold: 4096, // 4KB
     inlinePatterns: [] as RegExp[], // Always inline CSS modules
     linkPatterns: [] as RegExp[], // Always link node_modules CSS
   },
-  MODULE_BASE_EXCEPTIONS: [] as string[],
 
   AUTO_DISCOVER: {
+    clientEntry: "**/*.client.*",
+    serverEntry: "**/*.server.*",
+    cssEntry: "**/*.css",
+    jsonEntry: "**/*.json",
+    htmlEntry: "**/*.html",
     // Pattern matchers
     modulePattern: new RegExp(BASE_PATTERNS.MODULE),
     serverPattern: new RegExp(BASE_PATTERNS.SERVER),
     clientPattern: new RegExp(BASE_PATTERNS.CLIENT),
     pagePattern: new RegExp(BASE_PATTERNS.PAGE),
     propsPattern: new RegExp(BASE_PATTERNS.PROPS),
-    
+
     // File patterns
     cssPattern: new RegExp(`\\${BASE_PATTERNS.EXT.CSS}$`),
     jsonPattern: new RegExp(`\\${BASE_PATTERNS.EXT.JSON}$`),
     htmlPattern: new RegExp(`\\${BASE_PATTERNS.EXT.HTML}$`),
     rscPattern: new RegExp(`\\${BASE_PATTERNS.EXT.RSC}$`),
     nodeOnly: new RegExp(`\\${BASE_PATTERNS.EXT.NODE}$`),
-    cssModulePattern: new RegExp(`\\${BASE_PATTERNS.EXT.CSS}\\${BASE_PATTERNS.EXT.JS}$`),
+    cssModulePattern: new RegExp(
+      `\\${BASE_PATTERNS.EXT.CSS}\\${BASE_PATTERNS.EXT.JS}$`
+    ),
     vendorPattern: /^\/node_modules\//,
     virtualPattern: /^\/@\//,
     dotFiles: new RegExp(`${BASE_PATTERNS.DOT_FILES}`),
   },
   MODULE_ID: (id: string) => id,
   VERBOSE: false,
-  PANIC_THRESHOLD: 'none' as const,
+  PANIC_THRESHOLD: (MODE === "development"
+    ? "critical_errors"
+    : "all_errors") as "critical_errors" | "all_errors",
   // Centralized loader config for RSC boundaries
   RSC_LOADER: {
     development: {
-      importServerPath: "react-server-dom-esm/server.node" as string,
-      importClientPath: "react-server-dom-esm/server.node" as string,
-      registerClientReferenceName: "registerClientReference" as string,
-      registerServerReferenceName: "registerServerReference" as string
+      ...DEFAULT_LOADER_CONFIG,
+      mode: "development" as const,
     },
     test: {
-      importServerPath: "react-server-dom-esm/server.node" as string,
-      importClientPath: "react-server-dom-esm/server.node" as string,
-      registerClientReferenceName: "registerClientReference" as string,
-      registerServerReferenceName: "registerServerReference" as string
+      ...DEFAULT_LOADER_CONFIG,
+      importServerPath: "react-server-dom-esm/server.node",
+      importClientPath: "react-server-dom-esm/server.node",
+      mode: "test" as const,
     },
     production: {
-      importServerPath: "react-server-dom-esm/server" as string,
-      importClientPath: "react-server-dom-esm/server" as string,
-      registerClientReferenceName: "registerClientReference" as string,
-      registerServerReferenceName: "registerServerReference" as string
-    }
+      ...DEFAULT_LOADER_CONFIG,
+      mode: "production" as const,
+    },
   },
   REACT_LOADER_PATH: pluginRoot + "/loader/react-loader.js",
   CSS_LOADER_PATH: pluginRoot + "/loader/css-loader.js",
   ENV_LOADER_PATH: pluginRoot + "/loader/env-loader.js",
-};
+  
+};

package/plugin/config/envPrefixFromConfig.ts

@@ -0,0 +1,10 @@
+import type { ResolvedConfig } from "vite";
+import { DEFAULT_CONFIG } from "./defaults.js";
+
+export function envPrefixFromConfig(config: Pick<ResolvedConfig, "envPrefix">) {
+  return typeof config.envPrefix === "string"
+    ? config.envPrefix
+    : Array.isArray(config.envPrefix)
+    ? config.envPrefix[0]
+    : DEFAULT_CONFIG.ENV_PREFIX;
+}