vite-plugin-react-server 1.1.13 → 1.1.14

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

@@ -1,13 +1,14 @@
 import { type MessagePort } from "node:worker_threads";
 import type { LoadHookContext } from "node:module";
-import type { LoaderContext, SerializedUserConfig } from "../types.js";
+import type { LoaderContext, ResolvedUserOptions, SerializedUserConfig, SerializedUserOptions } from "../types.js";
 import { fileURLToPath } from "node:url";
 import { preprocessCSS } from "vite";
 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";
+import { resolveOptions } from "../config/resolveOptions.js";
+import { hydrateUserOptions } from "../helpers/index.js";
 
 /**
  * Global port for communication between the main thread and the CSS loader.
@@ -15,15 +16,8 @@ import type { InitializedCssLoaderMessage } from "../worker/types.js";
  */
 export let loaderPort: MessagePort | undefined;
 
-/**
- * Tracks CSS files used by each page.
- * Maps page URLs to sets of CSS file paths that are used by that page.
- */
-const cssFilesByPage = new Map<string, Set<string>>();
-
-let currentPage: string | null = null;
 let resolvedConfig: ResolvedConfig | undefined;
-
+let userOptions: ResolvedUserOptions | undefined; 
 
 /**
  * Initializes the CSS loader with the necessary communication channels.
@@ -32,31 +26,18 @@ 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: { id: string, port: MessagePort, resolvedConfig: SerializedUserConfig }) {
+export async function initialize(data: { id: string, port: MessagePort, resolvedConfig: SerializedUserConfig, userOptions: SerializedUserOptions }) {
   loaderPort = data.port;
   resolvedConfig = data.resolvedConfig;
+  const resolvedUserOptions = resolveOptions(hydrateUserOptions(data.userOptions));
+  if(resolvedUserOptions.type === "error") {
+    throw new Error(resolvedUserOptions.error.message);
+  }
+  userOptions = resolvedUserOptions.userOptions;
   data.port.postMessage({ type: "INITIALIZED_CSS_LOADER", id: data.id } satisfies InitializedCssLoaderMessage);
 }
 
-/**
- * Sets the current page being processed.
- * Used to track which CSS files are associated with which pages.
- *
- * @param page - The URL of the current page, or null if no page is active
- */
-export function setCurrentPage(page: string | null) {
-  currentPage = page;
-}
 
-/**
- * Retrieves all CSS files associated with a specific page.
- *
- * @param page - The URL of the page
- * @returns An array of CSS file paths used by the page
- */
-export function getCssFilesForPage(page: string): string[] {
-  return Array.from(cssFilesByPage.get(page) || []);
-}
 
 /**
  * Processes a CSS file request.
@@ -79,6 +60,11 @@ async function processCssFile(
 
     // Process CSS using Vite's preprocessCSS
     const source = await readFile(path, "utf-8");
+    let moduleID = path;
+    if(userOptions?.normalizer) {
+      let [,value] = userOptions.normalizer(path);
+      moduleID = userOptions.moduleID(value || path);
+    }
     const processed = await preprocessCSS(source, path, {
       ...config,
       env: env
@@ -88,11 +74,8 @@ async function processCssFile(
     if (loaderPort) {
       loaderPort.postMessage({
         type: "CSS_FILE",
-        id: currentPage ? join(path, "?page=" + currentPage) : path,
-        path: path,
-        content: processed.code,
-        modules: processed.modules || {},
-        inline,
+        id: moduleID,
+        content: processed.code
       });
     }
 

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

@@ -18,11 +18,10 @@ let stashedCssFiles = new Map();
  *
  * @param data - Configuration data for the CSS loader
  * @param data.port - The message port for communication
- * @param data.server - The Vite dev server instance
  */
-export async function initialize(data: { port: MessagePort }) {
+export async function initialize(data: { id: string, port: MessagePort }) {
   loaderPort = data.port;
-  data.port.postMessage({ type: "INITIALIZED_CSS_LOADER" });
+  data.port.postMessage({ type: "INITIALIZED_CSS_LOADER", id: data.id });
 }
 
 /**
@@ -30,7 +29,6 @@ export async function initialize(data: { port: MessagePort }) {
  * 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(

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

@@ -2,15 +2,24 @@ import type { LoadHookContext } from "node:module";
 import type { LoaderContext } from "../types.js";
 import type { MessagePort } from "node:worker_threads";
 import type { ResolvedConfig } from "vite";
+import type { RscWorkerInputMessage } from "../worker/types.js";
 
 export let loaderPort: MessagePort | undefined;
 let resolvedConfig: ResolvedConfig | undefined;
 
 // Initialize hook
-export async function initialize(data: { port: MessagePort, resolvedConfig: ResolvedConfig }) {
+export async function initialize(data: {
+  id: string;
+  port: MessagePort;
+  resolvedConfig: ResolvedConfig;
+}) {
   loaderPort = data.port;
   resolvedConfig = data.resolvedConfig;
-  data.port.postMessage({ type: "INITIALIZED_ENV_LOADER" });
+  data.port.postMessage({
+    type: "INITIALIZED_ENV_LOADER",
+    id: data.id,
+    env: {},
+  } satisfies RscWorkerInputMessage);
 }
 
 // Load hook
@@ -27,7 +36,7 @@ export async function load(
   }
 
   // Skip node internals and hidden files
-  if (url.startsWith('node:') || url.includes('/.')) {
+  if (url.startsWith("node:") || url.includes("/.")) {
     return result;
   }
 
@@ -35,10 +44,15 @@ export async function load(
   let sourceStr: string;
   if (typeof result.source === "string") {
     sourceStr = result.source;
-  } else if (result.source instanceof Uint8Array || Buffer.isBuffer(result.source)) {
+  } else if (
+    result.source instanceof Uint8Array ||
+    Buffer.isBuffer(result.source)
+  ) {
     sourceStr = result.source.toString("utf-8");
   } else {
-    console.warn(`[env-loader] Unexpected source type: ${typeof result.source}`);
+    console.warn(
+      `[env-loader] Unexpected source type: ${typeof result.source}`
+    );
     return result;
   }
 
@@ -47,29 +61,34 @@ export async function load(
 
   // Create the env object with Vite's default environment variables
   const envObject = {
-    MODE: resolvedConfig?.mode || 'development',
-    BASE_URL: resolvedConfig?.base || '/',
+    MODE: resolvedConfig?.mode || "development",
+    BASE_URL: resolvedConfig?.base || "/",
     PROD: resolvedConfig?.isProduction ? true : false,
     DEV: resolvedConfig?.isProduction ? false : true,
     SSR: true,
     ...Object.fromEntries(
       Object.entries(define)
-        .filter(([key]) => key.startsWith('import.meta.env.'))
-        .map(([key, value]) => [key.replace('import.meta.env.', ''), JSON.parse(value as string)])
-    )
+        .filter(([key]) => key.startsWith("import.meta.env."))
+        .map(([key, value]) => [
+          key.replace("import.meta.env.", ""),
+          JSON.parse(value as string),
+        ])
+    ),
   };
 
   // Replace environment variable references in the source
   let newSource = sourceStr;
-  
+
   // Check if we need to handle import.meta.env
-  if (newSource.includes('import.meta.env')) {
-    newSource = `Object.defineProperty(import.meta, "env", { value: ${JSON.stringify(envObject)}, writable: false, configurable: false });\n${newSource}`;
+  if (newSource.includes("import.meta.env")) {
+    newSource = `Object.defineProperty(import.meta, "env", { value: ${JSON.stringify(
+      envObject
+    )}, writable: false, configurable: false });\n${newSource}`;
   }
 
   return {
     ...result,
-    source: newSource
+    source: newSource,
   };
 }
 
@@ -79,6 +98,10 @@ export async function transformSource(
   context: any,
   defaultTransformSource: any
 ) {
-  const transformed = await defaultTransformSource(source, context, defaultTransformSource);
+  const transformed = await defaultTransformSource(
+    source,
+    context,
+    defaultTransformSource
+  );
   return transformed;
 }

package/plugin/loader/handleExports.ts

@@ -37,6 +37,7 @@ export function handleExports(
       before?: string[];
       after?: string[];
       isAsync?: boolean;
+      isServerAction?: boolean;
     }
   >;
 } {
@@ -53,6 +54,7 @@ export function handleExports(
       before?: string[];
       after?: string[];
       isAsync?: boolean;
+      isServerAction?: boolean;
     }
   >();
 
@@ -71,7 +73,28 @@ export function handleExports(
     }
 
     if (node.type === "ImportDeclaration") {
+      const importSource = node.source.value as string;
+      const isServerImport = importSource.includes(".server.");
       imports.push(source.slice(node.start, node.end));
+
+      // If this is a server import, mark all imported functions as server actions
+      if (isServerImport) {
+        for (const spec of node.specifiers) {
+          if (spec.type === "ImportSpecifier") {
+            const localName = spec.local.type === "Identifier" ? spec.local.name : "";
+            const importedName = spec.imported.type === "Identifier" ? spec.imported.name : "";
+            if (localName && importedName) {
+              exports.set(localName, {
+                type: "function",
+                localName,
+                isServerAction: true,
+                before: [...currentBefore],
+              });
+              exportNames.push(localName);
+            }
+          }
+        }
+      }
     } else if (node.type === "ExportAllDeclaration") {
       // For export * from './other', just add the * export
       exports.set("*", {
@@ -95,11 +118,12 @@ export function handleExports(
           exports.set(name, {
             type: "function",
             declaration: source.slice(node.declaration.start, node.declaration.end),
-            before: [...currentBefore], // Copy the current before array
+            before: [...currentBefore],
             isAsync: node.declaration.async,
+            isServerAction: isServerFunction === true,
           });
           exportNames.push(name);
-          currentBefore = []; // Reset for next export
+          currentBefore = [];
         } else if (
           node.declaration.type === "ClassDeclaration" &&
           node.declaration.id
@@ -108,22 +132,19 @@ export function handleExports(
           exports.set(name, {
             type: "class",
             declaration: source.slice(node.declaration.start, node.declaration.end),
-            before: [...currentBefore], // Copy the current before array
+            before: [...currentBefore],
           });
           exportNames.push(name);
-          currentBefore = []; // Reset for next export
+          currentBefore = [];
         } else if (node.declaration.type === "VariableDeclaration") {
           for (const decl of node.declaration.declarations) {
             if (decl.id && decl.id.type === "Identifier") {
               const name = decl.id.name;
-              // Check if the declaration is a function expression or arrow function
               const init = decl.init;
               const isFunction = init && (
                 init.type === "FunctionExpression" ||
                 init.type === "ArrowFunctionExpression"
               );
-              // For function expressions and arrow functions, we want to mark them as async
-              // if they are explicitly marked as async
               const isAsync = isFunction && (
                 (init.type === "FunctionExpression" && init.async === true) ||
                 (init.type === "ArrowFunctionExpression" && init.async === true)
@@ -131,11 +152,12 @@ export function handleExports(
               exports.set(name, {
                 type: isFunction ? "function" : "variable",
                 declaration: source.slice(decl.start, decl.end),
-                before: [...currentBefore], // Copy the current before array
-                isAsync: isAsync || false
+                before: [...currentBefore],
+                isAsync: isAsync || false,
+                isServerAction: isFunction  != null && isServerFunction === true,
               });
               exportNames.push(name);
-              currentBefore = []; // Reset for next export
+              currentBefore = [];
             }
           }
         }
@@ -159,7 +181,8 @@ export function handleExports(
                   localName,
                   declaration: source.slice(functionDecl.start, functionDecl.end),
                   before: [...currentBefore],
-                  isAsync: functionDecl.async
+                  isAsync: functionDecl.async,
+                  isServerAction: isServerFunction === true,
                 });
                 exportNames.push(exportedName);
               } else {
@@ -189,7 +212,8 @@ export function handleExports(
                       localName,
                       declaration: source.slice(decl.start, decl.end),
                       before: [...currentBefore],
-                      isAsync
+                      isAsync,
+                      isServerAction: isServerFunction === true,
                     });
                     exportNames.push(exportedName);
                   }
@@ -205,7 +229,6 @@ export function handleExports(
             }
           }
         }
-        currentBefore = []; // Reset for next export
       }
     } else if (node.type === "ExportDefaultDeclaration") {
       if (node.declaration && node.declaration.type === "FunctionDeclaration" && node.declaration.id) {

package/plugin/loader/react-loader.server.ts

@@ -1,12 +1,19 @@
-import type { LoaderContext, ResolvedUserOptions } from "../types.js";
+import type {
+  LoaderContext,
+  ResolvedUserOptions,
+  SerializedUserOptions,
+} from "../types.js";
 import type { ModuleInfo } from "rollup";
 import { transformModuleIfNeeded } from "./transformModuleIfNeeded.js";
 import type { MessagePort } from "node:worker_threads";
-import type { InitializedReactLoaderMessage, ServerModuleMessage } from "../worker/types.js";
-import { hydrateUserOptions } from "../helpers/index.js";
-import { resolveOptions } from "../config/index.js";
+import type {
+  InitializedReactLoaderMessage,
+  ServerModuleMessage,
+} from "../worker/types.js";
 import { fileURLToPath } from "node:url";
 import { join } from "node:path";
+import { resolveOptions } from "../config/resolveOptions.js";
+import { hydrateUserOptions } from "../helpers/index.js";
 
 export interface LoaderOptions {
   id: string;
@@ -22,27 +29,82 @@ export type LoaderFunction = (options: LoaderOptions) => Promise<ModuleInfo>;
 
 let userOptions: ResolvedUserOptions | undefined;
 let loaderPort: MessagePort | undefined;
-export async function initialize(data: { id: string, port: MessagePort, userOptions: any }) {
-  const userOptionsResult = resolveOptions(hydrateUserOptions(data.userOptions));
-  loaderPort = data.port;
-  loaderPort.postMessage({ type: "INITIALIZED_REACT_LOADER", id: data.id } satisfies InitializedReactLoaderMessage);
-  if(userOptionsResult.type === "error") {
-    throw userOptionsResult.error
+export async function initialize(data: {
+  id: string;
+  port: MessagePort;
+  userOptions: SerializedUserOptions;
+}) {
+  if (userOptions?.verbose) {
+    console.log("[react-loader] Initializing with options:", data.id);
   }
-  userOptions = userOptionsResult.userOptions;
+  const resolvedUserOptions = resolveOptions(
+    hydrateUserOptions(data.userOptions)
+  );
+  if (resolvedUserOptions.type === "error") {
+    throw new Error(resolvedUserOptions.error.message);
+  }
+  userOptions = resolvedUserOptions.userOptions;
+  loaderPort = data.port;
+  loaderPort.postMessage({
+    type: "INITIALIZED_REACT_LOADER",
+    id: data.id,
+  } satisfies InitializedReactLoaderMessage);
 }
 
 export async function load(url: string, context: LoaderContext, nextLoad: any) {
-  const { format } = context;
+  if (userOptions?.verbose) {
+    console.log("[react-loader] Attempting to load:", url);
+    console.log("[react-loader] Context:", {
+      format: context.format,
+      conditions: context.conditions,
+    });
+  }
 
-  if (format === "module") {
+  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);
-    const source = typeof result.source === 'string' ? result.source : 
-                  result.source instanceof Uint8Array ? new TextDecoder().decode(result.source) :
-                  String(result.source);
+    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);
+
+    const isServer = userOptions?.autoDiscover?.isServerFunctionCode(source);
+    const isClient = userOptions?.autoDiscover?.isClientComponentCode(source);
+    if (userOptions?.verbose) {
+      console.log("[react-loader] Module analysis:", {
+        url,
+        isServer,
+        isClient,
+        sourceLength: source.length,
+        sourcePreview: source.slice(0, 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;
@@ -51,27 +113,30 @@ export async function load(url: string, context: LoaderContext, nextLoad: any) {
       const [, value] = userOptions.normalizer(filePath);
       moduleID = join(userOptions.moduleBasePath, value);
       finalID = userOptions.moduleID(moduleID);
-    }
-    if (userOptions?.verbose) {
-      console.log("[react-loader] moduleID:", moduleID);
-      console.log("[react-loader] finalID:", finalID);
+      if (userOptions?.verbose) {
+        console.log("[react-loader] Normalized IDs:", { moduleID, finalID });
+      }
     }
 
     const transformed = transformModuleIfNeeded(
       source,
       finalID,
-      userOptions?.autoDiscover?.isServerFunction(source),
-      userOptions?.autoDiscover?.isClientComponent(source),
-      true, // isServerEnvironment
+      isServer,
+      isClient,
+      true // isServerEnvironment
     );
 
     if (userOptions?.verbose) {
-      console.log("[react-loader] Transformed source:", transformed);
+      console.log("[react-loader] Transformation result:", {
+      originalLength: source.length,
+      transformedLength: transformed.length,
+        wasTransformed: source !== transformed,
+      });
     }
 
     if (loaderPort) {
       if (userOptions?.verbose) {
-        console.log("[react-loader] Sending SERVER_MODULE message:", { id: finalID, url: filePath });
+        console.log("[react-loader] Sending SERVER_MODULE message");
       }
       loaderPort.postMessage({
         type: "SERVER_MODULE",
@@ -82,19 +147,24 @@ export async function load(url: string, context: LoaderContext, nextLoad: any) {
     }
 
     // If we have a source map, update it to point to the transformed source
-    const map = result.map ? {
-      ...result.map,
-      sourcesContent: [transformed],
-      mappings: result.map.mappings
-    } : null;
+    const map = result.map
+      ? {
+          ...result.map,
+          sourcesContent: [transformed],
+          mappings: result.map.mappings,
+        }
+      : null;
 
     return {
       ...result,
       source: transformed,
-      map
+      map,
     };
   }
 
+  if (userOptions?.verbose) {
+    console.log("[react-loader] Skipping non-module format:", format);
+  }
   return nextLoad(url, context);
 }
 
@@ -103,5 +173,13 @@ export async function resolve(
   context: any,
   nextResolve: any
 ) {
-  return nextResolve(specifier, context);
+  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/transformModuleIfNeeded.ts

@@ -6,8 +6,8 @@ import { DEFAULT_CONFIG } from "../config/defaults.js";
 export function transformModuleIfNeeded(
   source: string,
   moduleId: string,
-  isServerFunction: boolean | RegExpMatchArray | null = DEFAULT_CONFIG.AUTO_DISCOVER.isServerFunction(source),
-  isClientComponent: boolean | RegExpMatchArray | null = DEFAULT_CONFIG.AUTO_DISCOVER.isClientComponent(source),
+  isServerFunction: boolean | RegExpMatchArray | null = DEFAULT_CONFIG.AUTO_DISCOVER.isServerFunctionCode(source, moduleId),
+  isClientComponent: boolean | RegExpMatchArray | null = DEFAULT_CONFIG.AUTO_DISCOVER.isClientComponentCode(source),
   isServerEnvironment = getCondition() === "react-server"
 ) {
   // Parse source and handle source maps