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

package/plugin/loader/react-loader.ts

@@ -1,6 +1,257 @@
-import { getCondition } from "../config/getCondition.js"
+import type {
+  ResolvedUserOptions,
+  SerializedResolvedConfig,
+  SerializedUserOptions,
+} from "../types.js";
+import type { ModuleInfo } from "rollup";
+import { MessagePort } from "node:worker_threads";
+import type {
+  InitializedReactLoaderMessage,
+  ServerModuleMessage,
+} from "../worker/rsc/types.js";
+import { fileURLToPath } from "node:url";
+import { join } from "node:path";
+import { hydrateUserOptions } from "../helpers/hydrateUserOptions.js";
+import { DEFAULT_LOADER_CONFIG } from "../config/defaults.js";
+import type { LoadHook, ResolveHook } from "node:module";
+import type { RawSourceMap } from "source-map";
+import { createTransformer } from "./createTransformer.js";
+import { getNodeEnv } from "../getNodeEnv.js";
 
-const condition  = getCondition('')
-const loader = await import(`react-loader.${condition}.ts`);
+export type LoaderOptions = {
+  id: string;
+  resolveDependencies?: boolean;
+  format?: string;
+  conditions?: string[];
+  importAssertions?: Record<string, unknown>;
+  importAttributes?: Record<string, unknown>;
+  source: string;
+};
 
-export const { load, resolve, transformModuleIfNeeded } = loader;
+export type LoaderFunction = (options: LoaderOptions) => Promise<ModuleInfo>;
+
+let initialized = false;
+let userOptions: ResolvedUserOptions;
+let loaderPort: MessagePort | undefined;
+let isServerFunction:
+  | RegExpMatchArray
+  | RegExp
+  | ((source: string, url: string) => boolean)
+  | null = DEFAULT_LOADER_CONFIG.isServerFunctionCode;
+
+let isClientComponent:
+  | RegExpMatchArray
+  | RegExp
+  | ((source: string, url: string) => boolean)
+  | null = DEFAULT_LOADER_CONFIG.isClientComponentCode;
+
+let transformer: (
+  source: string,
+  moduleId: string
+) => Promise<{ code: string; map: RawSourceMap | null }>;
+
+export function initialize(
+  data: {
+    id: string;
+    port: MessagePort;
+    userOptions: SerializedUserOptions | null;
+    resolvedConfig: SerializedResolvedConfig | null;
+  } = {
+    id: "react-loader",
+    port: new MessagePort(),
+    userOptions: null,
+    resolvedConfig: null,
+  }
+) {
+  if (userOptions?.verbose) {
+    console.log("[react-loader] Initializing with options:", data.id);
+  }
+  loaderPort = data.port;
+  if (data.userOptions) {
+    // when user options are provided, use the user options using the hydrateUserOptions function
+    const resolvedUserOptions = hydrateUserOptions(data.userOptions);
+    if (resolvedUserOptions.type === "error") {
+      throw new Error(resolvedUserOptions.error.message);
+    }
+
+    // Use the hydrated user options directly (includes recreated functions)
+    userOptions = resolvedUserOptions.userOptions;
+
+    isServerFunction = userOptions.loader.isServerFunctionCode;
+    isClientComponent = userOptions.loader.isClientComponentCode;
+    transformer = createTransformer({
+      options: userOptions,
+    });
+  } else {
+    // when no user options are provided, use the default loader config
+    transformer = createTransformer({
+      options: {
+        loader: {
+          ...DEFAULT_LOADER_CONFIG,
+          mode: getNodeEnv(),
+        },
+        verbose: false,
+        panicThreshold: "none",
+      },
+    });
+  }
+  if (!initialized && loaderPort) {
+    loaderPort.postMessage({
+      type: "INITIALIZED_REACT_LOADER",
+      id: data.id,
+    } satisfies InitializedReactLoaderMessage);
+  }
+  initialized = true;
+}
+
+export const load: LoadHook = async (url, context, nextLoad) => {
+  if (!initialized) {
+    initialize(context as never);
+  }
+  if (userOptions?.verbose) {
+    console.log("[react-loader] Attempting to load:", url);
+    console.log("[react-loader] Context:", {
+      format: context.format,
+      conditions: context.conditions,
+    });
+  }
+
+  const { format } = context;
+  if (format === "module" || format === "module-typescript") {
+    if (userOptions?.verbose) {
+      console.log("[react-loader] Loading module:", url);
+    }
+    const result = await nextLoad(url, context);
+    if (userOptions?.verbose) {
+      console.log("[react-loader] Next load result:", {
+        format: result.format,
+        shortCircuit: result.shortCircuit,
+        source: typeof result.source,
+      });
+    }
+
+    const source =
+      typeof result.source === "string"
+        ? result.source
+        : result.source instanceof Uint8Array
+        ? new TextDecoder().decode(result.source)
+        : String(result.source);
+
+    // Check for file-level server directive first
+    const hasFileLevelServerDirective =
+      source.startsWith('"use server"') || source.startsWith("'use server'");
+    const hasFileLevelClientDirective =
+      source.startsWith('"use client"') || source.startsWith("'use client'");
+
+    const isServer =
+      hasFileLevelServerDirective ||
+      (typeof isServerFunction === "function"
+        ? isServerFunction(source, url)
+        : false);
+
+    const isClient =
+      hasFileLevelClientDirective ||
+      (typeof isClientComponent === "function"
+        ? isClientComponent(source, url)
+        : false);
+
+    if (userOptions?.verbose) {
+      let startPreviewIndex = 0;
+      let startLine = 0;
+      let lines = source.split("\n");
+      while (
+        lines[startLine].trim() === "" || lines[startLine].trim() === "\r" ||
+        // comment lines
+        lines[startLine].trim().startsWith("//")
+        || lines[startLine].trim().startsWith("/**")
+        || lines[startLine].trim().startsWith("*")
+      ) {
+        startPreviewIndex += lines[startLine].length;
+        startLine++;
+      }
+      console.log("[react-loader] Module analysis:", {
+        url,
+        isServer,
+        isClient,
+        hasFileLevelServerDirective,
+        hasFileLevelClientDirective,
+        sourceLength: source.length,
+        sourcePreview: source.slice(startPreviewIndex, startPreviewIndex + 100) + "...",
+      });
+    }
+
+    if (!isServer && !isClient) {
+      if (userOptions?.verbose) {
+        console.log(
+          "[react-loader] Skipping non-server/non-client module:",
+          url
+        );
+      }
+      return result;
+    }
+
+    // Handle file URLs
+    const filePath = url.startsWith("file://") ? fileURLToPath(url) : url;
+    if (userOptions?.verbose) {
+      console.log("[react-loader] File path:", filePath);
+    }
+
+    // Normalize the URL using the same logic as plugin.server.ts
+    let moduleID = filePath;
+    let finalID = filePath;
+    if (userOptions?.normalizer) {
+      const [, value] = userOptions.normalizer(filePath);
+      moduleID = join(userOptions.moduleBasePath, value);
+      finalID = userOptions.moduleID?.(moduleID) || moduleID;
+      if (userOptions?.verbose) {
+        console.log("[react-loader] Normalized IDs:", { moduleID, finalID });
+      }
+    }
+
+    const { code: transformed, map } = await transformer(source, finalID);
+
+    if (userOptions?.verbose) {
+      console.log("[react-loader] Transformation result:", {
+        originalLength: source.length,
+        transformedLength: transformed.length,
+        wasTransformed: source !== transformed,
+        hasSourceMap: !!map,
+      });
+    }
+
+    if (loaderPort) {
+      if (userOptions?.verbose) {
+        console.log("[react-loader] Sending SERVER_MODULE message");
+      }
+      loaderPort.postMessage({
+        type: "SERVER_MODULE",
+        id: finalID,
+        url: filePath,
+        source: transformed,
+      } satisfies ServerModuleMessage);
+    }
+
+    return {
+      ...result,
+      source: transformed,
+      map,
+    };
+  }
+
+  if (userOptions?.verbose) {
+    console.log("[react-loader] Skipping non-module format:", format);
+  }
+  return nextLoad(url, context);
+};
+
+export const resolve: ResolveHook = async (specifier, context, nextResolve) => {
+  if (userOptions?.verbose) {
+    console.log("[react-loader] Resolving:", specifier);
+    console.log("[react-loader] Resolve context:", context);
+  }
+  const result = await nextResolve(specifier, context);
+  if (userOptions?.verbose) {
+    console.log("[react-loader] Resolve result:", result);
+  }
+  return result;
+};

package/plugin/loader/removeDirectives.ts

@@ -0,0 +1,14 @@
+import { removeRanges } from "./removeRanges.js";
+
+export function removeDirectives(source: string, directiveRanges: Array<{ start: number; end: number }>): string {
+  // Sort ranges by start position
+  const sortedRanges = directiveRanges.toSorted((a, b) => a.start - b.start);
+
+  // Remove ranges from source
+  if (sortedRanges.length === 0) {
+    return source;
+  }
+
+  // Remove directives from source using the provided ranges
+  return removeRanges(source, sortedRanges);
+}

package/plugin/loader/removeRanges.ts

@@ -0,0 +1,21 @@
+
+export function removeRanges(
+    source: string,
+    ranges: { start: number; end: number }[]
+  ): string {
+    if (!ranges.length) {
+      return source;
+    }
+  
+    // Sort ranges by start position
+    ranges.sort((a, b) => a.start - b.start);
+  
+    // Remove ranges from end to start to avoid position shifts
+    let result = source;
+    for (let i = ranges.length - 1; i >= 0; i--) {
+      const { start, end } = ranges[i];
+      result = result.slice(0, start) + result.slice(end);
+    }
+  
+    return result;
+  }

package/plugin/loader/sourceMap.ts

@@ -1,118 +1,208 @@
-import { createMappingsSerializer } from "../source-map/createMappingsSerializer.js";
-import type { SourceMap } from "../types/sourceMap.js";
-import { basename } from "path";
+import type { RawSourceMap } from "source-map";
 
 /**
- * Creates a basic source map for a module
+ * Source map handling utilities
  */
-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: []
-  };
+interface RangeToRemove {
+  start: number;
+  end: number;
+  lineShift: number;
 }
 
 /**
- * Extends an existing source map with new lines
+ * Creates a source map for the given source code
  */
-export function extendSourceMap(sourceMap: SourceMap, newLines: number, originalSource: string): SourceMap {
+export function createSourceMap(
+  code: string,
+  originalSource: string,
+  moduleId: string,
+  rangesToRemove: RangeToRemove[] = []
+): RawSourceMap {
+  // Split code into lines for line-by-line mapping
+  const codeLines = code.split("\n");
+  const originalLines = originalSource.split("\n");
+
+  // Track current positions in both original and transformed code
+  let currentColumn = 0;
+  let sourceLine = 0;
+  let sourceColumn = 0;
+  const lastSourceIndex = 0;
+  const lastNameIndex = -1;
+
+  // Generate mappings line by line
+  const mappings: string[] = [];
   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);
+
+  // First, create a mapping for each line in the original source
+  for (let i = 0; i < originalLines.length; i++) {
+    const mapping = createMapping(
+      i + 1, // generated line
+      0, // generated column
+      0, // source index
+      i + 1, // original line
+      0, // original column
+      -1 // name index
+    );
+    mappings.push(mapping);
   }
 
+  // Then, create mappings for the transformed code
+  for (let i = 0; i < codeLines.length; i++) {
+    // Check if this line contains any ranges to remove
+    const lineRanges = rangesToRemove.filter((range) => {
+      const rangeStartLine = originalSource.slice(0, range.start).split("\n").length - 1;
+      const rangeEndLine = originalSource.slice(0, range.end).split("\n").length - 1;
+      return rangeStartLine <= sourceLine && rangeEndLine >= sourceLine;
+    });
+
+    if (lineRanges.length > 0) {
+      // For lines with directives, map to the original line including the directive
+      // but skip the directive range in the generated code
+      const mapping = createMapping(
+        i + 1, // generated line
+        currentColumn, // generated column
+        lastSourceIndex, // source index
+        sourceLine + 1 + (lineRanges[0].lineShift || 0), // original line with shift
+        sourceColumn, // original column
+        lastNameIndex // name index
+      );
+      mappings.push(mapping);
+
+      // Skip the directive range in the generated code
+      const directiveRange = lineRanges[0];
+      const directiveLength = directiveRange.end - directiveRange.start;
+      currentColumn += directiveLength;
+    } else {
+      // For regular lines, map to the original line
+      const mapping = createMapping(
+        i + 1, // generated line
+        currentColumn, // generated column
+        lastSourceIndex, // source index
+        sourceLine + 1, // original line
+        sourceColumn, // original column
+        lastNameIndex // name index
+      );
+      mappings.push(mapping);
+    }
+
+    // Update positions
+    currentColumn = 0;
+    sourceLine++;
+    sourceColumn = 0;
+  }
+
+  // Join mappings with semicolons, ensuring empty lines are preserved
+  const mappingsString = mappings.join(";");
+
   return {
-    ...sourceMap,
     version: 3,
-    sourcesContent: [originalSource],
-    mappings
+    file: moduleId,
+    sources: [moduleId],
+    names: [],
+    mappings: mappingsString,
+    sourceRoot: "",
+    sourcesContent: [originalSource], // Keep the original source with directives
   };
 }
 
 /**
- * Adds a source map as a base64 data URL to the source code
+ * Creates a function that generates VLQ mappings for source maps
  */
-export function addSourceMapToSource(source: string, sourceMap: SourceMap): string {
-  // Convert version to number for serialization
-  const serializedMap = {
-    ...sourceMap,
-    version: Number(sourceMap.version)
+function createMappingsSerializer() {
+  return function createMapping(
+    _generatedLine: number,
+    generatedColumn: number,
+    sourceIndex: number,
+    originalLine: number,
+    originalColumn: number,
+    nameIndex: number
+  ): string {
+    const values = [
+      generatedColumn,
+      sourceIndex,
+      originalLine,
+      originalColumn,
+      nameIndex,
+    ];
+    return encodeVLQ(values);
   };
-  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
+ * Encodes a series of integers into a VLQ string
  */
-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;
-      }
+function encodeVLQ(values: number[]): string {
+  const VLQ_BASE_SHIFT = 5;
+  const VLQ_BASE = 1 << VLQ_BASE_SHIFT;
+  const VLQ_BASE_MASK = VLQ_BASE - 1;
+  const VLQ_CONTINUATION_BIT = VLQ_BASE;
+
+  let result = "";
+
+  for (let i = 0; i < values.length; i++) {
+    let value = values[i];
+
+    // Handle negative values
+    if (value < 0) {
+      value = (-value << 1) | 1;
+    } else {
+      value = value << 1;
     }
+
+    // Encode the value
+    do {
+      let digit = value & VLQ_BASE_MASK;
+      value >>>= VLQ_BASE_SHIFT;
+
+      if (value !== 0) {
+        digit |= VLQ_CONTINUATION_BIT;
+      }
+
+      result += encodeBase64Digit(digit);
+    } while (value !== 0);
   }
 
-  return { url: sourceMappingURL, start: sourceMappingStart, end: sourceMappingEnd, lines: sourceMappingLines };
+  return result;
 }
 
 /**
- * Strips source map URL comment from source code
+ * Encodes a single digit into base64
  */
-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);
+function encodeBase64Digit(digit: number): string {
+  const BASE64_CHARS =
+    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
+  return BASE64_CHARS[digit];
 }
 
 /**
- * Creates a source map with the given parameters
+ * Strips the source map URL from the source string
  */
-export function createSourceMap(id: string, code: string, mappings: string): SourceMap {
-  return {
-    version: 3,
-    file: basename(id),
-    sources: [id],
-    sourcesContent: [code],
-    names: [],
-    mappings,
-    sourceRoot: "",
-  };
-} 
+export function stripSourceMap(source: string): string {
+  return source.replace(
+    /\/\/# sourceMappingURL=data:application\/json;charset=utf-8;base64,[A-Za-z0-9+/=]+$/m,
+    ""
+  );
+}
+
+/**
+ * Adds a source map URL to the source string
+ */
+export function addSourceMap(source: string, map: RawSourceMap): string {
+  const sourceMapString = JSON.stringify(map);
+  const sourceMapBase64 = Buffer.from(sourceMapString).toString("base64");
+  return `${source}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,${sourceMapBase64}`;
+}
+
+/**
+ * Parses a source map URL from a source string
+ */
+export function parseSourceMapUrl(source: string): string | null {
+  const match = source.match(
+    /\/\/# sourceMappingURL=data:application\/json;charset=utf-8;base64,([A-Za-z0-9+/=]+)$/m
+  );
+  if (!match) {
+    return null;
+  }
+  return match[1];
+}

package/plugin/loader/transformClientModule.ts

@@ -0,0 +1,64 @@
+import type { ParseResult } from "./directives/types.js";   
+import type { ResolvedUserOptions } from "../types.js";
+import { createSourceMap } from "./sourceMap.js";
+import type { TransformResult } from "./types.js";
+import { getNodeEnv } from "../getNodeEnv.js";
+import { DEFAULT_CONFIG } from "../config/defaults.js";
+
+/**
+ * Transforms a client module by:
+ * 1. Removing all original code including imports and directives
+ * 2. Registering client components with registerClientReference
+ */
+export async function transformClientModule(
+  source: string,
+  moduleId: string,
+  parseResult: ParseResult,
+  loader: Pick<
+    ResolvedUserOptions["loader"],
+    "registerClientReferenceName" | "importClientPath"
+  > = DEFAULT_CONFIG.RSC_LOADER[getNodeEnv()],
+  verbose = false
+): Promise<TransformResult> {
+  if (!loader) {
+    loader = DEFAULT_CONFIG.RSC_LOADER[getNodeEnv()];
+  }
+  if (parseResult.type !== "success") {
+    return { code: "", map: null };
+  }
+
+  if (verbose) {
+    console.log(
+      `[transformClientModule] Transforming client module: ${moduleId}`
+    );
+    console.log("Found exports:", parseResult.exports);
+  }
+
+  // Register all exports as client references
+  const registrations = [];
+  for (const exp of parseResult.exports.exports.values()) {
+    if (exp.type === "function" || exp.type === "class") {
+      if (verbose) {
+        console.log("Found export info:", exp, "for localName:", exp.localName);
+      }
+      registrations.push(
+        `export const ${exp.exportName} = ${loader.registerClientReferenceName}(function() { throw new Error("Attempted to call ${exp.exportName}() on the client"); }, "${moduleId}", "${exp.exportName}");`
+      );
+    }
+  }
+
+  const finalCode = `
+    import { ${loader.registerClientReferenceName} } from "${
+    loader.importClientPath
+  }";
+    ${registrations.join("\n")}
+  `;
+
+  // Create source map
+  const map = createSourceMap(finalCode, source, moduleId);
+
+  return {
+    code: finalCode,
+    map,
+  };
+}