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

package/plugin/loader/createTransformer.ts

@@ -0,0 +1,110 @@
+import { transformModule } from "./transformModule.js";
+import { isReactServerCondition } from "../config/getCondition.js";
+import { analyzeModule } from "./directives/analyzeModule.js";
+import { findDirectiveMatches } from "./directives/findDirectiveMatches.js";
+import type { DirectiveMatch } from "./directives/types.js";
+import type { TransformerFactory, TransformResult } from "./types.js";
+import { DEFAULT_LOADER_CONFIG } from "../config/defaults.js";
+import { getNodeEnv } from "../getNodeEnv.js";
+
+/**
+ * Creates a transformer that handles React Server Components (RSC) boundaries.
+ */
+export const createTransformer: TransformerFactory = ({
+  options,
+  forceServerFunction = undefined,
+  forceClientComponent = undefined,
+  isServerEnvironment = isReactServerCondition(),
+}) => {
+  return async (source: string, moduleId: string): Promise<TransformResult> => {
+    if (options.verbose) {
+      console.log(`[createTransformer] Loading: ${moduleId}`);
+    }
+
+    // Fast-path: skip parsing and transformation if no directives are present
+    const matches = findDirectiveMatches(source);
+    const hasServerDirective = matches.matches.some(
+      (m: DirectiveMatch) => m.type === "server"
+    );
+    const hasClientDirective = matches.matches.some(
+      (m: DirectiveMatch) => m.type === "client"
+    );
+
+    if (hasClientDirective === false && hasServerDirective === false) {
+      return { code: source, map: null };
+    }
+    const loader = options.loader ?? DEFAULT_LOADER_CONFIG;
+    // Use analyzeModule to get the full parse result, passing the custom parseFn
+    const parseResult = await analyzeModule(source, {
+      ...options,
+      loader: loader,
+    });
+    if (
+      parseResult.directiveInfo &&
+      parseResult.directiveInfo.warnings.length > 0
+    ) {
+      const isProduction = getNodeEnv() === "production";
+
+      // Handle directive errors (can be downgraded to warnings based on panicThreshold)
+      for (const warning of parseResult.directiveInfo.warnings) {
+        const shouldDowngradeToWarning = !isProduction && options.panicThreshold === 'none';
+          
+        if (shouldDowngradeToWarning) {
+          // Downgrade error to warning in development when panicThreshold is 'none'
+          const [start, end] = warning.range;
+          const lines = source.split('\n');
+          const startLine = source.slice(0, start).split('\n').length;
+          
+          console.warn(`Warning: ${warning.message}`);
+          
+          // Show document preview with line numbers
+          const contextLines = 2; // Show 2 lines before and after
+          const minLine = Math.max(1, startLine - contextLines);
+          const maxLine = Math.min(lines.length, startLine + contextLines);
+          
+          console.warn('');
+          for (let i = minLine; i <= maxLine; i++) {
+            const lineNum = i.toString().padStart(3, ' ');
+            const isErrorLine = i === startLine;
+            const prefix = isErrorLine ? '>' : ' ';
+            const line = lines[i - 1] || '';
+            
+            if (isErrorLine) {
+              console.warn(`${prefix} ${lineNum} | ${line}`);
+              // Show pointer to the directive
+              const lineStart = source.lastIndexOf('\n', start - 1) + 1;
+              const columnPos = Math.max(0, start - lineStart);
+              const directiveLength = Math.max(1, end - start);
+              const pointer = ' '.repeat(7 + columnPos) + '^'.repeat(directiveLength);
+              console.warn(`  ${pointer}`);
+            } else {
+              console.warn(`  ${lineNum} | ${line}`);
+            }
+          }
+          console.warn('');
+
+          if (options.verbose) {
+            console.warn(`  range: [${start}, ${end}]`);
+          }
+        } else {
+          // Treat as error (default behavior) - panic and stop compilation
+          throw new Error(warning.message);
+        }
+      }
+    }
+    if (parseResult.type !== "success") {
+      return { code: source, map: null };
+    }
+
+    // Transform the module
+    return await transformModule(source, moduleId, parseResult, {
+      forceServerFunction: forceServerFunction ?? hasServerDirective,
+      forceClientComponent: forceClientComponent ?? hasClientDirective,
+      isServerEnvironment,
+      loader: options.loader,
+      directiveWarnings: parseResult.directiveInfo.warnings,
+      verbose: options.verbose || false,
+      panicThreshold: options.panicThreshold || 'none',
+    });
+  };
+};

package/plugin/loader/css-loader.ts

@@ -0,0 +1,206 @@
+import { type MessagePort } from "node:worker_threads";
+import type { LoadHook, ResolveHook, ModuleFormat } from "node:module";
+import type {
+  ResolvedUserOptions,
+  SerializedResolvedConfig,
+  SerializedUserOptions,
+} from "../types.js";
+import { fileURLToPath } from "node:url";
+import { preprocessCSS, resolveConfig } from "vite";
+import { readFile } from "node:fs/promises";
+import { env } from "../utils/env.js";
+import type {
+  CssFileMessage,
+  InitializedCssLoaderMessage,
+} from "../worker/rsc/types.js";
+import { hydrateUserOptions } from "../helpers/hydrateUserOptions.js";
+import { toError } from "../error/toError.js";
+import { sendMessage } from "../worker/sendMessage.js";
+import type { ErrorMessage } from "../worker/types.js";
+
+/**
+ * Global port for communication between the main thread and the CSS loader.
+ * This port is used to send CSS file requests and receive responses.
+ */
+export let loaderPort: MessagePort | undefined;
+
+let resolvedConfig: SerializedResolvedConfig | null;
+let userOptions: ResolvedUserOptions | undefined;
+
+/**
+ * Initializes the CSS loader with the necessary communication channels.
+ * Sets up message handlers for CSS file requests and responses.
+ *
+ * @param data - Configuration data for the CSS loader
+ * @param data.port - The message port for communication
+ */
+export async function initialize(data: {
+  id: string;
+  port: MessagePort;
+  resolvedConfig: SerializedResolvedConfig;
+  userOptions: SerializedUserOptions;
+}) {
+  loaderPort = data.port;
+  resolvedConfig = data.resolvedConfig;
+  const resolvedUserOptions = hydrateUserOptions(data.userOptions);
+  if (resolvedUserOptions.type === "error") {
+    if (loaderPort) {
+      sendMessage(
+        {
+          type: "ERROR",
+          id: "css-loader",
+          error: resolvedUserOptions.error,
+        } satisfies ErrorMessage,
+        loaderPort
+      );
+    }
+    throw resolvedUserOptions.error;
+  }
+
+  // Use the hydrated user options directly (includes recreated functions)
+  userOptions = resolvedUserOptions.userOptions;
+
+  if (loaderPort) {
+    sendMessage(
+      {
+        type: "INITIALIZED_CSS_LOADER",
+        id: data.id,
+      } satisfies InitializedCssLoaderMessage,
+      loaderPort
+    );
+  }
+}
+
+/**
+ * Processes a CSS file request.
+ * Sends a request to the main thread and waits for the processed CSS.
+ *
+ * @param filePath - The file system path of the CSS file
+ * @param config - The Vite config
+ * @returns A promise that resolves to the processed CSS content
+ */
+async function processCssFile(
+  filePath: string,
+  inline: boolean
+): Promise<{ format: ModuleFormat; source: string; shortCircuit: boolean }> {
+  try {
+    // Convert file URL to path if needed
+    const path = filePath.startsWith("file://")
+      ? fileURLToPath(filePath)
+      : filePath;
+
+    // Process CSS using Vite's preprocessCSS
+    const source = await readFile(path, "utf-8");
+    let moduleID = path;
+    if (userOptions?.normalizer) {
+      const [, value] = userOptions.normalizer(path);
+      moduleID = userOptions.moduleID?.(value || path) || path;
+    }
+    // Try to process CSS with preprocessCSS, fall back to raw CSS if config is incomplete
+    let processed: { code: string; modules?: any };
+    try {
+      // Create a minimal config with environments that preprocessCSS expects
+      const viteConfig = await resolveConfig(
+        {
+          ...resolvedConfig,
+          env: env,
+          // do-not re-resolve the config file as it would import the plugin again which we do not need.
+          configFile: false,
+        },
+        "serve"
+      );
+
+      processed = await preprocessCSS(source, path, viteConfig);
+    } catch (error) {
+      // If preprocessCSS fails, fall back to raw CSS
+      if (loaderPort) {
+        sendMessage(
+          {
+            type: "ERROR",
+            id: moduleID,
+            error: toError(error),
+          } satisfies ErrorMessage,
+          loaderPort
+        );
+      }
+      processed = { code: source, modules: {} };
+    }
+
+    // If we're processing CSS for a specific page, notify the message handler
+    if (loaderPort) {
+      sendMessage(
+        {
+          type: "CSS_FILE",
+          id: moduleID,
+          content: processed.code,
+        } satisfies CssFileMessage,
+        loaderPort
+      );
+    }
+
+    // Return a module that can be used by React components
+    if (inline) {
+      return {
+        format: "module",
+        source: processed.code,
+        shortCircuit: true,
+      };
+    }
+    return {
+      format: "module",
+      source: `export default ${JSON.stringify(processed.modules || {})};`,
+      shortCircuit: true,
+    };
+  } catch (error) {
+    const err = toError(error);
+    if (loaderPort) {
+      sendMessage(
+        {
+          type: "ERROR",
+          id: "css-loader",
+          error: err,
+        } satisfies ErrorMessage,
+        loaderPort
+      );
+    }
+    throw err;
+  }
+}
+
+/**
+ * Vite's load hook implementation for CSS files.
+ * Handles CSS file loading requests and returns a placeholder module.
+ * The actual CSS content is processed in the main thread.
+ *
+ * @param url - The URL of the module to load
+ * @param context - The load hook context
+ * @param defaultLoad - The default load function
+ * @returns A promise that resolves to the module content
+ */
+export const load: LoadHook = async (url, context, defaultLoad) => {
+  const [name, query] = url.split("?");
+  if (name.endsWith(".css")) {
+    let isInline = query?.startsWith("inline") || query?.includes("&inline");
+    if (isInline && query.includes('inline=')) {
+      // handle = true/false
+      const match = query.match(/inline=(1|true|0|false)/)?.[1];
+      isInline = match === '1' || match === 'true';
+    }
+    return processCssFile(url, isInline);
+  }
+
+  return defaultLoad(url, context);
+};
+
+/**
+ * Vite's resolve hook implementation.
+ * Handles module resolution during development.
+ *
+ * @param specifier - The module specifier to resolve
+ * @param context - The resolve hook context
+ * @param defaultResolve - The default resolve function
+ * @returns A promise that resolves to the resolved module
+ */
+export const resolve: ResolveHook = (specifier, context, defaultResolve) => {
+  return defaultResolve(specifier, context);
+};

package/plugin/loader/directives/addLocalExportedNames.ts

@@ -0,0 +1,78 @@
+import type { ExportInfo } from "./types.js";
+import type {
+  Identifier,
+  ClassDeclaration,
+  ObjectPattern,
+  ArrayPattern,
+  Property,
+  AssignmentPattern,
+  RestElement,
+  ParenthesizedExpression,
+  Expression,
+  AssignmentProperty,
+} from "acorn";
+
+// Helper: recursively collect exportable names from patterns and classes
+export function addLocalExportedNames(
+  exports: ExportInfo[],
+  node:
+    | Identifier
+    | ClassDeclaration
+    | ObjectPattern
+    | ArrayPattern
+    | Property
+    | AssignmentPattern
+    | RestElement
+    | ParenthesizedExpression
+    | Expression
+    | AssignmentProperty,
+  parentRange: [number, number]
+) {
+  if (!node) return;
+  switch (node.type) {
+    case "Identifier":
+      exports.push({
+        localName: node.name,
+        exportName: node.name,
+        type: null,
+        range: parentRange,
+      });
+      break;
+    case "ClassDeclaration":
+      if (node.id) {
+        exports.push({
+          localName: node.id.name,
+          exportName: node.id.name,
+          type: "class",
+          range: parentRange,
+        });
+      }
+      break;
+    case "ObjectPattern":
+      for (const prop of node.properties) {
+        if(prop.type === "RestElement") {
+          addLocalExportedNames(exports, prop.argument, parentRange);
+        } else {
+          addLocalExportedNames(exports, prop.value, parentRange);
+        }
+      }
+      break;
+    case "ArrayPattern":
+      for (const element of node.elements) {
+        if (element) addLocalExportedNames(exports, element, parentRange);
+      }
+      break;
+    case "Property":
+      addLocalExportedNames(exports, node.value, parentRange);
+      break;
+    case "AssignmentPattern":
+      addLocalExportedNames(exports, node.left, parentRange);
+      break;
+    case "RestElement":
+      addLocalExportedNames(exports, node.argument, parentRange);
+      break;
+    case "ParenthesizedExpression":
+      addLocalExportedNames(exports, node.expression, parentRange);
+      break;
+  }
+}

package/plugin/loader/directives/analyzeDirectives.ts

@@ -0,0 +1,298 @@
+import { findDirectiveMatches } from "./findDirectiveMatches.js";
+import { isFunctionNode } from "./typeGuards.js";
+import { getFunctionBody } from "./getFunctionBody.js";
+import { getFunctionName } from "./getFunctionName.js";
+import { getExportedName } from "./getExportedName.js";
+import { processFunctionNode } from "./processFunctionNode.js";
+import { isDirectiveAtStart, getDirectiveValue, matchOverlapsDirective } from "./utils.js";
+import type { DirectiveInfo, DirectiveMatch, DirectiveMatches } from "./types.js";
+import type { Node, Program } from "acorn";
+import type { DirectiveOptions } from "../../types.js";
+
+/**
+ * Analyzes directives in the given source and AST, returning directiveInfo.
+ */
+export function analyzeDirectives(
+  ast: Program, 
+  source: string,
+  matches?: DirectiveMatches,
+): DirectiveInfo;
+export function analyzeDirectives(
+  ast: Program, 
+  source: string,
+  options?: DirectiveOptions,
+): DirectiveInfo;
+export function analyzeDirectives(
+  ast: Program, 
+  source: string,
+  optionsOrMatches?: DirectiveMatches | DirectiveOptions,
+): DirectiveInfo {
+  const hasOptions  = optionsOrMatches != null && typeof optionsOrMatches === 'object';
+  const directiveMatches = hasOptions && 'matches' in optionsOrMatches
+    ? optionsOrMatches
+    : findDirectiveMatches(source);
+
+  const directiveInfo: DirectiveInfo = {
+    fileLevel: null,
+    functionLevel: [],
+    warnings: []
+  };
+
+  // Find file-level directives by checking AST
+  let foundNonDirective = false;
+  let firstDirective: DirectiveMatch | null = null;
+  let verbose = hasOptions && 'verbose' in optionsOrMatches && optionsOrMatches.verbose;
+  for (const node of ast.body) {
+    // Debug logging
+    if (verbose) {
+      console.log('[analyzeDirectives] Processing node:', {
+        type: node.type,
+        start: node.start,
+        end: node.end,
+        directive: 'directive' in node ? node.directive : undefined,
+        beforeNode: node.start! > 0 ? JSON.stringify(source.slice(0, node.start!)) : 'none',
+        foundNonDirective
+      });
+    }
+
+    // Only check for directives in expression statements
+    if (node.type === "ExpressionStatement") {
+      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) {
+        const getDirectiveType = optionsOrMatches != null && 'loader' in optionsOrMatches ? optionsOrMatches.loader?.getDirectiveType : undefined;
+        const type = getDirectiveType?.(directive) ?? 
+          (directive === "use server" ? "server" : "client");
+        if (!firstDirective) {
+          firstDirective = { type, range: [node.start!, node.end!] };
+          if (verbose) {
+            console.log('[analyzeDirectives] Found first directive:', directive, 'at range:', [node.start!, node.end!]);
+          }
+        } else {
+          directiveInfo.warnings.push({
+            message: "Cannot have both 'use client' and 'use server' directives in the same file",
+            range: [0, 0],
+            type: "server"
+          });
+        }
+      } else {
+        // This expression statement is not a directive, so mark as non-directive
+        // if we haven't found the first directive yet
+        if (!firstDirective) {
+          foundNonDirective = true;
+          if (optionsOrMatches != null && 'verbose' in optionsOrMatches && optionsOrMatches?.verbose) {
+            console.log('[analyzeDirectives] Found non-directive expression before first directive, setting foundNonDirective=true');
+          }
+        }
+      }
+    } else if (node.type !== "ImportDeclaration" && node.type !== "ExportNamedDeclaration" && node.type !== "ExportDefaultDeclaration") {
+      // Only mark actual code (not imports/exports) as non-directive
+      // if we haven't found the first directive yet
+      if (!firstDirective) {
+        foundNonDirective = true;
+        if (verbose) {
+          console.log('[analyzeDirectives] Found non-directive node before first directive:', node.type, 'setting foundNonDirective=true');
+        }
+      }
+    }
+
+    // Check if this node is after any comments or non-whitespace content
+    // Only matters if we haven't found the first directive yet
+    if (!firstDirective && node.start! > 0) {
+      const beforeNode = source.slice(0, node.start!).trim();
+      if (beforeNode.length > 0) {
+        foundNonDirective = true;
+        if (verbose) {
+          console.log('[analyzeDirectives] Found content before first directive:', JSON.stringify(beforeNode), 'setting foundNonDirective=true');
+        }
+      }
+    }
+  }
+
+  // Set the first directive as file-level if found
+  if (firstDirective) {
+    directiveInfo.fileLevel = firstDirective;
+    
+    // Check if there was content (including comments) before the directive
+    if (!foundNonDirective && firstDirective.range[0] > 0) {
+      const beforeDirective = source.slice(0, firstDirective.range[0]).trim();
+      if (beforeDirective.length > 0) {
+        foundNonDirective = true;
+        if (verbose) {
+          console.log('[analyzeDirectives] Found content before directive:', JSON.stringify(beforeDirective), 'setting foundNonDirective=true for directive');
+        }
+      }
+    }
+    
+    if (foundNonDirective) {
+      directiveInfo.warnings.push({
+        message: "File-level directives must be at the top of the file, before any other code",
+        range: [firstDirective.range[0], firstDirective.range[1]],
+        type: firstDirective.type
+      });
+    }
+  }
+
+  // Process function-level directives
+  const functionLevelMatches = directiveMatches.matches.filter((match: DirectiveMatch) => {
+    // Skip if this match is already used as a file-level directive
+    if (directiveInfo.fileLevel && 
+        match.range[0] === directiveInfo.fileLevel.range[0] && 
+        match.range[1] === directiveInfo.fileLevel.range[1]) {
+      return false;
+    }
+    return true;
+  });
+
+  const processedFunctions = new Set<string>();
+
+  // First pass: collect all function nodes with their directives
+  const functionNodes: Array<{node: Node, match: DirectiveMatch, context: string}> = [];
+  
+  // Track context during traversal
+  function traverseWithContext(node: Node, context: { inFunction: boolean, inClass: boolean }) {
+    if (isFunctionNode(node)) {
+      const body = getFunctionBody(node);
+      if (body) {
+        // Check if directive is at the start of the function body
+        for (const match of functionLevelMatches) {
+          const directiveValue = getDirectiveValue(match.type);
+          
+          if (isDirectiveAtStart(node, directiveValue)) {
+            // Check if the match range corresponds to this specific directive position
+            const directiveNode = body.body[0];
+            const directiveStart = directiveNode.start!;
+            const directiveEnd = directiveNode.end!;
+            
+            // Match based on position - the match should overlap with the directive node
+            const matchOverlaps = matchOverlapsDirective(match.range, directiveStart, directiveEnd);
+            
+            if (matchOverlaps) {
+              const functionName = getFunctionName(node) || "anonymous";
+              
+              // Check for invalid contexts based on traversal context
+              if (context.inFunction) {
+                const nameDesc = functionName === "anonymous" ? "" : ` '${functionName}'`;
+                directiveInfo.warnings.push({
+                  message: `Function${nameDesc} with '${directiveValue}' directive cannot be nested inside another function. Directives are only allowed in top-level functions.`,
+                  range: match.range,
+                  type: match.type
+                });
+                return; // Skip this function entirely
+              }
+              
+              if (context.inClass) {
+                const nameDesc = functionName === "anonymous" ? "" : ` '${functionName}'`;
+                directiveInfo.warnings.push({
+                  message: `Class method${nameDesc} with '${directiveValue}' directive is not supported. Directives are only allowed in top-level functions.`,
+                  range: match.range,
+                  type: match.type
+                });
+                return; // Skip this function entirely
+              }
+
+              // Only allow server directives in function-level contexts
+              if (match.type === "server") {
+                functionNodes.push({ node, match, context: context.inFunction ? "nested" : context.inClass ? "class" : "top-level" });
+              } else {
+                // Generate warning for client directives in functions
+                directiveInfo.warnings.push({
+                  message: "Function-level 'use client' isn't allowed",
+                  range: match.range,
+                  type: "client"
+                });
+              }
+              break;
+            }
+          }
+        }
+      }
+      
+      // Continue traversal with updated context (now inside a function)
+      traverseChildren(node, { inFunction: true, inClass: context.inClass });
+    } else if (node.type === "ClassDeclaration" || node.type === "ClassExpression") {
+      // Continue traversal with updated context (now inside a class)
+      traverseChildren(node, { inFunction: context.inFunction, inClass: true });
+    } else if (node.type === "MethodDefinition") {
+      // Method definitions are inside classes
+      traverseChildren(node, { inFunction: context.inFunction, inClass: true });
+    } else {
+      // Continue with same context
+      traverseChildren(node, context);
+    }
+  }
+  
+  function traverseChildren(node: Node, context: { inFunction: boolean, inClass: boolean }) {
+    const nodeWithChildren = node as any;
+    for (const key in nodeWithChildren) {
+      if (key === 'parent' || key === 'start' || key === 'end' || key === 'loc' || key === 'range') {
+        continue;
+      }
+      
+      const value = nodeWithChildren[key];
+      if (value && typeof value === 'object') {
+        if (Array.isArray(value)) {
+          for (const child of value) {
+            if (child && typeof child === 'object' && child.type) {
+              traverseWithContext(child, context);
+            }
+          }
+        } else if (value.type) {
+          traverseWithContext(value, context);
+        }
+      }
+    }
+  }
+  
+  // Start traversal at top level (not in function or class)
+  traverseWithContext(ast, { inFunction: false, inClass: false });
+
+  // Second pass: process functions in order
+  for (const { node, match } of functionNodes) {
+    const name = getFunctionName(node) || "anonymous";
+    const exportName = getExportedName(node);
+    const functionKey = `${name}-${exportName || ''}-${match.range[0]}`;
+
+    // Skip if we've already processed this function
+    if (processedFunctions.has(functionKey)) continue;
+    processedFunctions.add(functionKey);
+
+    processFunctionNode(node, name, exportName, match, directiveInfo);
+  }
+
+  // Add warnings for mixed server/client directives
+  if (directiveInfo.fileLevel && directiveInfo.functionLevel.length > 0) {
+    for (const func of directiveInfo.functionLevel) {
+      if (directiveInfo.fileLevel.type !== func.type) {
+        directiveInfo.warnings.push({
+          message: `Cannot have both 'use ${directiveInfo.fileLevel.type}' and 'use ${func.type}' directives in the same file`,
+          range: func.range,
+          type: "server"
+        });
+      } else if (func.type !== "server") {
+        directiveInfo.warnings.push({
+          message: `Function-level directives should be 'use server', but got 'use ${func.type}'`,
+          range: func.range,
+          type: "client"
+        });
+      } else {
+        directiveInfo.warnings.push({
+          message: `'use server' is already defined at the top of the file, this directive should be removed.`,
+          range: func.range,
+          type: "server"
+        });
+      }
+    }
+  }
+
+  return directiveInfo;
+}