vite-plugin-react-server 1.1.12 → 1.1.13

package/plugin/helpers/sourceMap.ts

@@ -0,0 +1,182 @@
+import { basename } from "path";
+import type { SourceMap } from "../types/sourceMap.js";
+
+// VLQ encoding helpers
+const VLQ_SHIFT = 5;
+const VLQ_CONTINUATION_BIT = 1 << VLQ_SHIFT;
+const VLQ_VALUE_MASK = VLQ_CONTINUATION_BIT - 1;
+const BASE64_CHARS =
+  "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
+
+export function encodeVLQ(numbers: number[]): string {
+  return numbers
+    .map((num) => {
+      // Convert to VLQ
+      const vlq = num < 0 ? (-num << 1) | 1 : num << 1;
+
+      let result = "";
+      let value = vlq;
+
+      do {
+        let digit = value & VLQ_VALUE_MASK;
+        value >>>= VLQ_SHIFT;
+        if (value > 0) {
+          digit |= VLQ_CONTINUATION_BIT;
+        }
+        result += BASE64_CHARS[digit];
+      } while (value > 0);
+
+      return result;
+    })
+    .join("");
+}
+
+export function decodeVLQ(str: string): number[] {
+  const numbers: number[] = [];
+  let value = 0;
+  let shift = 0;
+  let index = 0;
+
+  while (index < str.length && !/[,;]/.test(str[index])) {
+    const digit = BASE64_CHARS.indexOf(str[index]);
+    if (digit === -1) break;
+
+    value += (digit & VLQ_VALUE_MASK) << shift;
+
+    if ((digit & VLQ_CONTINUATION_BIT) === 0) {
+      const negate = value & 1;
+      value >>>= 1;
+      numbers.push(negate ? -value : value);
+      value = shift = 0;
+    } else {
+      shift += VLQ_SHIFT;
+    }
+
+    index++;
+  }
+
+  return numbers;
+}
+
+export function readMappings(
+  mappings: string,
+  callback: (
+    generatedLine: number,
+    generatedColumn: number,
+    sourceIndex: number,
+    originalLine: number,
+    originalColumn: number,
+    nameIndex: number
+  ) => void
+) {
+  let line = 1;
+  let column = 0;
+  let sourceIndex = 0;
+  let originalLine = 1;
+  let originalColumn = 0;
+  let nameIndex = 0;
+
+  const segments = mappings.split(";");
+  for (let i = 0; i < segments.length; i++) {
+    const segment = segments[i];
+    if (segment === "") {
+      line++;
+      column = 0;
+      continue;
+    }
+
+    const parts = segment.split(",");
+    for (let j = 0; j < parts.length; j++) {
+      const part = parts[j];
+      if (part === "") continue;
+
+      const numbers = decodeVLQ(part);
+      column += numbers[0];
+      if (numbers.length > 1) {
+        sourceIndex += numbers[1];
+        originalLine += numbers[2];
+        originalColumn += numbers[3];
+        if (numbers.length > 4) {
+          nameIndex += numbers[4];
+        }
+      }
+
+      callback(
+        line,
+        column,
+        sourceIndex,
+        originalLine,
+        originalColumn,
+        nameIndex
+      );
+    }
+  }
+}
+
+export function createMappingsSerializer() {
+  let previousGeneratedLine = 1;
+  let previousGeneratedColumn = 0;
+  let previousOriginalFile = 0;
+  let previousOriginalLine = 0;
+  let previousOriginalColumn = 0;
+  let previousNameIndex = 0;
+
+  return function (
+    generatedLine: number,
+    generatedColumn: number,
+    originalFile: number,
+    originalLine: number,
+    originalColumn: number,
+    nameIndex: number
+  ): string {
+    // Reset column when moving to a new line
+    if (generatedLine > previousGeneratedLine) {
+      previousGeneratedColumn = 0;
+      let lines = "";
+      for (let i = previousGeneratedLine; i < generatedLine; i++) {
+        lines += ";";
+      }
+      previousGeneratedLine = generatedLine;
+      if (lines) return lines;
+    }
+
+    // Calculate deltas
+    const segment = [
+      generatedColumn - previousGeneratedColumn,
+      originalFile - previousOriginalFile,
+      originalLine - previousOriginalLine,
+      originalColumn - previousOriginalColumn,
+    ];
+
+    if (nameIndex >= 0) {
+      segment.push(nameIndex - previousNameIndex);
+    }
+
+    // Update previous values
+    previousGeneratedColumn = generatedColumn;
+    previousOriginalFile = originalFile;
+    previousOriginalLine = originalLine;
+    previousOriginalColumn = originalColumn;
+    previousNameIndex = nameIndex;
+
+    return encodeVLQ(segment) + ",";
+  };
+}
+
+export function createSourceMap(originalSource: string): SourceMap {
+  return {
+    version: 3,
+    file: basename(originalSource),
+    sources: [originalSource],
+    sourcesContent: [originalSource],
+    names: [],
+    mappings: "AAAA;", // Simple line mapping
+    sourceRoot: "",
+  };
+}
+
+export function updateSourceMap(sourceMap: SourceMap, originalSource: string) {
+  // Update the source map with the transformed source
+  sourceMap.sourcesContent = [originalSource];
+  sourceMap.mappings = "AAAA;"; // Simple line mapping
+}

package/plugin/loader/createBuildLoader.ts

@@ -1,14 +1,22 @@
 import { join } from "node:path";
-import type { ResolvedUserConfig, ResolvedUserOptions } from "../../server.js";
+import type {
+  InlineCssOpt,
+  PagePropOpt,
+  ResolvedUserConfig,
+  ResolvedUserOptions,
+} from "../../server.js";
 import type { Manifest } from "vite";
 import { getModuleRef } from "../helpers/moduleRefs.js";
-import { readFile } from "node:fs/promises";
 import type { OutputBundle } from "rollup";
 import { temporaryReferences } from "./temporaryReferences.js";
+import { toError } from "../error/toError.js";
 
-export interface BuildLoaderOptions {
+export interface BuildLoaderOptions<
+  T extends PagePropOpt = PagePropOpt,
+  InlineCSS extends InlineCssOpt = InlineCssOpt
+> {
   userConfig: ResolvedUserConfig;
-  userOptions: ResolvedUserOptions;
+  userOptions: ResolvedUserOptions<T, InlineCSS>;
   serverManifest: Manifest;
   clientManifest: Manifest;
   staticManifest: Manifest;
@@ -18,42 +26,33 @@ export interface BuildLoaderOptions {
  * Creates a loader function for handling module resolution during build.
  *
  * The loader handles the following strategy:
- *  - Just load any file from any manifest we can find in the order of client, server, static
- *  - Ideally the buildLoader is only used form loading pages, props and inline css modules
- *  -
- *
- * During build:
- * - We use the manifest information to get module exports
- * - The manifest contains the transformed modules with their exports
- * - We store the module in temporaryReferences for later use
- *
- * @param options.root - The project root directory
- * @param options.pluginContext - The Rollup plugin context
- * @param options.userConfig - Resolved user configuration
- * @param options.userOptions - Resolved user options
- * @param options.serverManifest - Vite server manifest
- * @param options.clientManifest - Vite client manifest
- * @param options.options - Additional options including temporaryReferences
- *
- * @returns A loader function that resolves module paths to their exports
+ *  - For client components: Use client manifest and client.browser.js
+ *  - For server components: Use server manifest and server.js
+ *  - For static assets: Use static manifest
  */
-export async function createBuildLoader(
+export async function createBuildLoader<
+  T extends PagePropOpt = PagePropOpt,
+  InlineCSS extends InlineCssOpt = InlineCssOpt
+>(
   {
     userOptions,
     serverManifest,
     clientManifest,
     staticManifest,
-  }: BuildLoaderOptions,
+  }: BuildLoaderOptions<T, InlineCSS>,
   bundle: OutputBundle
 ) {
   const manifestKeys = Object.keys(serverManifest);
   if (!manifestKeys.length) {
     throw new Error("Server manifest is empty");
   }
+
   return async function buildLoader(id: string) {
     const [withoutQuery, query] = id.split("?", 2);
-    const [, normalizedValue] = userOptions.normalizer(withoutQuery);
+    const [normalizedKey, normalizedValue] =
+      userOptions.normalizer(withoutQuery);
     const moduleRef = getModuleRef(id);
+
     // Check if we have a temporary reference (cached module)
     if (temporaryReferences?.has(moduleRef)) {
       const mod = temporaryReferences.get(moduleRef);
@@ -67,107 +66,128 @@ export async function createBuildLoader(
     try {
       // For inline modules, handle them directly
       if (query === "inline") {
-        // Then check server manifest
+        const startsWithMarker = normalizedKey.split("-")[0];
         const serverChunk =
           bundle[serverManifest[normalizedValue]?.file] ??
           bundle[staticManifest[normalizedValue]?.file] ??
           bundle[clientManifest[normalizedValue]?.file] ??
-          bundle[withoutQuery];
+          bundle[withoutQuery] ??
+          bundle[normalizedValue] ??
+          Object.entries(bundle).find(
+            ([, value]) => value.name === normalizedValue
+          )?.[1] ??
+          Object.entries(bundle).find(([_key]) =>
+            _key.startsWith(startsWithMarker)
+          )?.[1];
+
         if (serverChunk) {
           if (serverChunk.type === "asset") {
+            // For CSS files, ensure we're in the React Server environment
+            if (userOptions.autoDiscover.jsonPattern(normalizedValue)) {
+              const jsonContent = serverChunk.source;
+              if (typeof jsonContent === "string") {
+                return { default: JSON.parse(jsonContent) };
+              }
+            } else if (userOptions.autoDiscover.cssPattern(normalizedValue)) {
+              const cssContent = serverChunk.source;
+              if (typeof cssContent === "string") {
+                return { default: cssContent };
+              }
+            }
             return { default: serverChunk.source };
           } else if ("code" in serverChunk) {
             return { default: serverChunk.code };
-          } else {
-            console.warn("Could not find inline module for: " + normalizedValue);
           }
         }
-
-        // If not found in either manifest, try reading the file directly
-        const module = {
-          default: await readFile(
-            join(
-              userOptions.projectRoot,
-              userOptions.build.outDir,
-              userOptions.build.static,
-              normalizedValue
-            ),
-            "utf-8"
-          ),
-        };
-        temporaryReferences?.set(moduleRef, module);
-        return module;
-      }
-      const clientEntry = clientManifest[normalizedValue];
-      if (clientEntry) {
-        const module = await import(
-          join(
-            userOptions.projectRoot,
-            userOptions.build.outDir,
-            userOptions.build.client,
-            clientEntry.file
-          )
-        );
-        console.warn(
-          "client module used in buildLoader, consider making this available in the server manifest",
-          module
-        );
-        temporaryReferences?.set(moduleRef, module);
-        return module;
+        console.warn("Could not find inline module for: " + normalizedValue);
+        return null;
       }
-      const bundleEntry = bundle[withoutQuery];
-      if (bundleEntry) {
-        // Load the module
-        const module = await import(
-          join(
-            userOptions.projectRoot,
-            userOptions.build.outDir,
-            userOptions.build.server,
-            bundleEntry.fileName
-          )
-        );
-        temporaryReferences?.set(moduleRef, module);
+
+      // Determine if this is a client component
+      const isClientComponent =
+        userOptions.autoDiscover.clientComponents(normalizedValue);
+      const isServerAction =
+        userOptions.autoDiscover.serverFunctions(normalizedValue);
+      const isPage = userOptions.autoDiscover.pagePattern(normalizedValue);
+      const isProps = userOptions.autoDiscover.propsPattern(normalizedValue);
+
+      // For client components, use client manifest
+      if (isClientComponent) {
+        const clientEntry = clientManifest[normalizedValue];
+        if (clientEntry) {
+          try {
+            const module = await import(
+              join(
+                userOptions.projectRoot,
+                userOptions.build.outDir,
+                userOptions.build.client,
+                clientEntry.file
+              )
+            );
+            temporaryReferences?.set(moduleRef, module);
+            return module;
+          } catch (error) {
+            const err = toError(error);
+            console.warn("Error loading client module:", err);
+            temporaryReferences?.delete(moduleRef);
+            throw err;
+          }
+        }
       }
-      // Try to resolve the module using Vite's resolution
-      const serverEntry = serverManifest[normalizedValue];
-      if (serverEntry) {
-        // Load the module
-        const module = await import(
-          join(
-            userOptions.projectRoot,
-            userOptions.build.outDir,
-            userOptions.build.server,
-            serverEntry.file
-          )
-        );
-        temporaryReferences?.set(moduleRef, module);
-        return module;
+
+      // For server components and actions, use server manifest
+      if (isServerAction || isPage || isProps) {
+        const serverEntry = serverManifest[normalizedValue];
+        if (serverEntry) {
+          try {
+            const module = await import(
+              join(
+                userOptions.projectRoot,
+                userOptions.build.outDir,
+                userOptions.build.server,
+                serverEntry.file
+              )
+            );
+            temporaryReferences?.set(moduleRef, module);
+            return module;
+          } catch (error) {
+            const err = toError(error);
+            console.warn("Error loading server module:", err);
+            temporaryReferences?.delete(moduleRef);
+            throw err;
+          }
+        }
       }
-      // try static manifest
+
+      // For static assets, use static manifest
       const staticEntry = staticManifest[normalizedValue];
       if (staticEntry) {
-        const module = await import(
-          join(
-            userOptions.projectRoot,
-            userOptions.build.outDir,
-            userOptions.build.static,
-            staticEntry.file
-          )
-        );
-        console.warn(
-          "static module used in buildLoader, consider making this available in the server manifest",
-          module
-        );
-        temporaryReferences?.set(moduleRef, module);
-        return module;
+        try {
+          const module = await import(
+            join(
+              userOptions.projectRoot,
+              userOptions.build.outDir,
+              userOptions.build.static,
+              staticEntry.file
+            )
+          );
+          temporaryReferences?.set(moduleRef, module);
+          return module;
+        } catch (error) {
+          const err = toError(error);
+          console.warn("Error loading static module:", err);
+          temporaryReferences?.delete(moduleRef);
+          throw err;
+        }
       }
-      throw new Error(`Module ${normalizedValue} not found`);
+
+      throw new Error(`Module ${normalizedValue} not found during build`);
     } catch (error) {
       const emptyExports = {
         error: error instanceof Error ? error : new Error(String(error)),
         id: id,
       };
-      temporaryReferences?.set(moduleRef, emptyExports);
+      temporaryReferences?.delete(moduleRef);
       return emptyExports;
     }
   };

package/plugin/loader/createDefaultLoader.ts

@@ -0,0 +1,62 @@
+import { readFileSync } from "fs";
+import * as esbuild from "esbuild";
+import type { LoaderContext } from "../types.js";
+
+export interface LoaderResult {
+  source: string;
+  map: any | null;
+}
+
+export interface Loader {
+  (id: string, context?: LoaderContext, nextLoad?: any): LoaderResult;
+}
+
+/**
+ * Creates a default loader function that either uses provided source or reads from file
+ */
+export function createDefaultLoader(source?: string): Loader {
+  if (typeof source === "string") {
+    return function load(id: string): LoaderResult {
+      // Use esbuild to transform the code
+      const result = esbuild.transformSync(source, {
+        loader: "tsx",
+        format: "esm",
+        target: "esnext",
+        sourcemap: true,
+        sourcefile: id,
+      });
+      return {
+        source: result.code,
+        map: result.map ? JSON.parse(result.map) : null,
+      };
+    };
+  }
+  return function load(
+    id: string,
+    context?: LoaderContext,
+    nextLoad?: any
+  ): LoaderResult {
+    if (!nextLoad) {
+      nextLoad = (id: string) => {
+        const source = readFileSync(id, "utf-8");
+        // Use esbuild to transform the code
+        const result = esbuild.transformSync(source, {
+          loader: "tsx",
+          format: "esm",
+          target: "esnext",
+          sourcemap: true,
+          sourcefile: id,
+        });
+        return {
+          source: result.code,
+          map: result.map ? JSON.parse(result.map) : null,
+        };
+      };
+    }
+    const result = nextLoad(id, context);
+    return {
+      ...result,
+      map: "map" in result ? result.map : null,
+    };
+  };
+}

package/plugin/loader/css-loader.development.ts

@@ -7,6 +7,7 @@ import type { ResolvedConfig } from "vite";
 import { readFile } from "node:fs/promises";
 import { join } from "node:path";
 import { env } from "../utils/env.js";
+import type { InitializedCssLoaderMessage } from "../worker/types.js";
 
 /**
  * Global port for communication between the main thread and the CSS loader.
@@ -31,10 +32,10 @@ let resolvedConfig: ResolvedConfig | undefined;
  * @param data - Configuration data for the CSS loader
  * @param data.port - The message port for communication
  */
-export async function initialize(data: { port: MessagePort, resolvedConfig: SerializedUserConfig }) {
+export async function initialize(data: { id: string, port: MessagePort, resolvedConfig: SerializedUserConfig }) {
   loaderPort = data.port;
   resolvedConfig = data.resolvedConfig;
-  data.port.postMessage({ type: "INITIALIZED_CSS_LOADER" });
+  data.port.postMessage({ type: "INITIALIZED_CSS_LOADER", id: data.id } satisfies InitializedCssLoaderMessage);
 }
 
 /**