vite-plugin-react-server 1.0.2 → 1.1.0

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

@@ -0,0 +1,157 @@
+import { type MessagePort } from "node:worker_threads";
+import type { LoadHookContext } from "node:module";
+import type { LoaderContext, SerializedUserConfig } 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";
+
+/**
+ * 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;
+
+/**
+ * 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;
+// Get environment variables
+const env = import.meta?.env || {
+  BASE_URL: '/',
+  DEV: true,
+  MODE: 'development',
+  PROD: false,
+  SSR: true
+};
+
+/**
+ * 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: { port: MessagePort, resolvedConfig: SerializedUserConfig }) {
+  loaderPort = data.port;
+  resolvedConfig = data.resolvedConfig;
+  data.port.postMessage({ type: "INITIALIZED_CSS_LOADER" });
+}
+
+/**
+ * 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.
+ * 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,
+  config: ResolvedConfig,
+  inline: boolean
+): Promise<{ format: string; 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");
+    const processed = await preprocessCSS(source, path, {
+      ...config,
+      env: env
+    });
+
+    // If we're processing CSS for a specific page, notify the message handler
+    if (loaderPort) {
+      loaderPort.postMessage({
+        type: "CSS_FILE",
+        id: currentPage ? join(path, "?page=" + currentPage) : path,
+        path: path,
+        content: processed.code,
+        modules: processed.modules || {},
+        inline,
+      });
+    }
+
+    // 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) {
+    console.error(`[css-loader] Error processing CSS file: ${error}`);
+    throw error;
+  }
+}
+
+/**
+ * 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 async function load(
+  url: string,
+  context: LoadHookContext & LoaderContext & { resolvedConfig: SerializedUserConfig },
+  defaultLoad: any
+) {
+  const [name, query] = url.split("?");
+  if (name.endsWith(".css")) {
+    return processCssFile(url, resolvedConfig as ResolvedConfig, query === "inline");
+  }
+
+  return defaultLoad(url, context, defaultLoad);
+}
+
+/**
+ * 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 function resolve(specifier: string, context: any, defaultResolve: any) {
+  return defaultResolve(specifier, context, defaultResolve);
+}

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

@@ -0,0 +1,86 @@
+import type { MessagePort } from "node:worker_threads";
+import type { LoadHookContext } from "node:module";
+import type { LoaderContext } from "../types.js";
+import { fileURLToPath } from "node:url";
+import { readFile } from "node:fs/promises";
+
+/**
+ * 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 stashedCssFiles = new Map();
+
+/**
+ * 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
+ * @param data.server - The Vite dev server instance
+ */
+export async function initialize(data: { port: MessagePort }) {
+  loaderPort = data.port;
+  data.port.postMessage({ type: "INITIALIZED_CSS_LOADER" });
+}
+
+/**
+ * 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
+): Promise<{ format: string; source: string; shortCircuit: boolean }> {
+  try {
+    // Convert file URL to path if needed
+    const path = filePath.startsWith("file://")
+      ? fileURLToPath(filePath)
+      : filePath;
+    if (stashedCssFiles.has(filePath)) {
+      return {
+        format: "module",
+        source: stashedCssFiles.get(filePath),
+        shortCircuit: true,
+      };
+    }
+    // Process CSS using Vite's preprocessCSS
+    const source = await readFile(path, "utf-8");
+    stashedCssFiles.set(path, source);
+    return {
+      format: "module",
+      source: source,
+      shortCircuit: true,
+    };
+  } catch (error) {
+    throw error;
+  }
+}
+
+/**
+ * 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 async function load(
+  url: string,
+  context: LoadHookContext & LoaderContext,
+  defaultLoad: any
+) {
+  // Handle CSS files
+  const [name] = url.split("?");
+  if (name.endsWith(".css")) {
+    return processCssFile(url);
+  }
+
+  return defaultLoad(url, context, defaultLoad);
+}

package/plugin/loader/index.ts

@@ -0,0 +1 @@
+export { reactLoaderPlugin } from "./plugin.js";

package/plugin/loader/plugin.ts

@@ -0,0 +1,33 @@
+import { resolveOptions } from "../config/resolveOptions.js";
+import type {
+  StreamPluginOptions,
+} from "../types.js";
+import type { Plugin } from "vite";
+
+/**
+ * Plugin for loading various front-end react files like css-loader, react-loader, etc.
+ *
+ * Core responsibilities:
+ * 1. Use the load hook to use the appropriate loader for the file type
+ * 2. When used, we can assume that such files work the same as when used as node loader
+ *
+ * @example
+ * ```ts
+ * export default defineConfig({
+ *   plugins: [
+ *     reactLoaderPlugin({
+ *       projectRoot: process.cwd(),
+ *     })
+ *   ]
+ * });
+ * ```
+ */
+
+export function reactLoaderPlugin(options: StreamPluginOptions): Plugin {
+  const resolvedOptionsResult = resolveOptions(options);
+  if (resolvedOptionsResult.type === "error") throw resolvedOptionsResult.error;
+
+  return {
+    name: "vite:react-loader",
+  };
+}

package/plugin/loader/react-loader.ts

@@ -8,7 +8,9 @@ import {
   type LoadHookContext,
   type ResolveHookContext,
 } from "node:module";
+import { workerData } from "node:worker_threads";
 import type { MessagePort } from "node:worker_threads";
+import type { LoaderContext } from "../types.js";
 
 let stashedGetSource: any = null;
 let stashedResolve: any = null;
@@ -19,13 +21,20 @@ setSourceMapsSupport(true, {
   generatedCode: true, // Enable for generated code
 });
 
-// Add type for our context with port
-interface LoaderContext {
-  data?: { port: MessagePort };
-}
+// Get environment variables from workerData or import.meta
+const env = workerData?.importMeta?.env ||
+  import.meta?.env || {
+    BASE_URL: "/",
+    DEV: false,
+    MODE: "production",
+    PROD: true,
+    SSR: true,
+  };
 
 // Store port globally for use in load hook
-let loaderPort: MessagePort | undefined;
+export let loaderPort: MessagePort | undefined;
+// during development, we actually just want to be explicit about the .node extension
+let isDev = process.env["NODE_ENV"] === "development";
 
 export async function getSource(
   url: string,
@@ -353,9 +362,13 @@ function transformServerModule(
       }
     }
 
-    newSrc += "\n\n;";
-    newSrc +=
-      'import {registerServerReference} from "react-server-dom-esm/server";\n';
+    newSrc = "";
+    newSrc += `import ReactDOMServerESM from "react-server-dom-esm/server${
+      isDev ? ".node" : ""
+    }";\n`;
+    // include stack trace where module is imported from
+    newSrc += `if(ReactDOMServerESM instanceof Error){ throw ReactDOMServerESM; }`;
+    newSrc += `export const registerServerReference = ReactDOMServerESM.registerServerReference;\n`;
 
     if (mappings) {
       mappings += ";;";
@@ -564,14 +577,16 @@ async function transformClientModule(
   const names: any[] = [];
   await parseExportNamesInto(body, names, url, loader);
 
-
   if (names.length === 0) {
-    console.log("[react-loader] No exports found in:", url);
-    return "";
+    return null;
   }
 
-  let newSrc =
-    'import {registerClientReference} from "react-server-dom-esm/server";\n';
+  let newSrc = `import ReactDOMServerESM from "react-server-dom-esm/server${
+    isDev ? ".node" : ""
+  }";\n`;
+  // check if the module is poisoned
+  newSrc += `if(ReactDOMServerESM instanceof Error){ throw new Error(ReactDOMServerESM); }`;
+  newSrc += `export const registerClientReference = ReactDOMServerESM.registerClientReference;\n`;
 
   for (let i = 0; i < names.length; i++) {
     const name = names[i];
@@ -685,13 +700,7 @@ export async function transformModuleIfNeeded(
 
     if (node.directive === "use client") {
       useClient = true;
-      if (port) {
-        port.postMessage({
-          type: "CLIENT_COMPONENT",
-          url,
-          source,
-        });
-      }
+
       break;
     }
     if (node.directive === "use server") {
@@ -699,14 +708,19 @@ export async function transformModuleIfNeeded(
       break;
     }
   }
+  if (useClient && useServer) {
+    throw new Error(
+      "Cannot use both use client and use server directives in the same module"
+    );
+  }
+  if (!useClient && !useServer) {
+    return source;
+  }
 
   if (useClient) {
     return transformClientModule(program, url, undefined, loader);
-  } else if (useServer) {
-    return transformServerModule(source, program, url, undefined, loader, port);
   }
-
-  return source;
+  return transformServerModule(source, program, url, undefined, loader, port);
 }
 
 function readMappings(
@@ -881,7 +895,7 @@ function decodeVLQ(str: string): number[] {
 // Initialize hook
 export async function initialize(data: { port: MessagePort }) {
   loaderPort = data.port; // Store port
-  data.port.postMessage({ type: "INITIALIZED" });
+  data.port.postMessage({ type: "INITIALIZED_REACT_LOADER" });
   data.port.unref();
 }
 
@@ -900,17 +914,62 @@ export async function load(
   context: LoadHookContext & LoaderContext,
   nextLoad: any
 ) {
-  const result = await nextLoad(url, context);
-  if (result.format === "module") {
-    const newSrc = await transformModuleIfNeeded(
-      result.source,
-      url,
-      nextLoad,
-      loaderPort ?? undefined
+  const result = await nextLoad(url, {
+    ...context,
+    env: env,
+  });
+
+  // If not a module, return as is
+  if (result.format !== "module") {
+    return result;
+  }
+
+  // Convert source to string if it's a Buffer or Uint8Array
+  let sourceStr: string;
+  if (typeof result.source === "string") {
+    sourceStr = result.source;
+  } else if (
+    result.source instanceof Uint8Array ||
+    Buffer.isBuffer(result.source)
+  ) {
+    sourceStr = result.source.toString("utf-8");
+  } else {
+    console.warn(
+      `[react-loader] Unexpected source type: ${typeof result.source}`
+    );
+    return result;
+  }
+
+  // Transform the module if needed
+  const transformResult = await transformModuleIfNeeded(
+    sourceStr,
+    url,
+    nextLoad,
+    loaderPort ?? undefined
+  );
+
+  // Handle different return types from transformModuleIfNeeded
+  if (transformResult === null) {
+    return result;
+  } else if (typeof transformResult === "string") {
+    return { ...result, source: transformResult };
+  } else if (typeof transformResult === "object") {
+    // Type assertion for object with code and map properties
+    const typedResult = transformResult as { code: string; map?: any };
+    if (!("code" in typedResult)) {
+      throw new Error("Failed to transform module");
+    }
+    return {
+      ...result,
+      source: typedResult.code,
+      map: typedResult.map || result.map,
+    };
+  } else {
+    console.warn(
+      `[react-loader] Unexpected transform result type: ${typeof transformResult}`
     );
-    return { ...result, source: newSrc };
+    return result;
   }
-  return result;
 }
 
 // Transform hook
@@ -924,18 +983,27 @@ export async function transformSource(
     context,
     defaultTransformSource
   );
-
   if (context.format === "module") {
-    const transformedSource = transformed.source;
-    if (typeof transformedSource !== "string") {
-      throw new Error("Expected source to have been transformed to a string.");
+    // Convert transformedSource to string if it's a Buffer or Uint8Array
+    let transformedSourceStr: string;
+    if (typeof transformed.source === "string") {
+      transformedSourceStr = transformed.source;
+    } else if (
+      transformed.source instanceof Uint8Array ||
+      Buffer.isBuffer(transformed.source)
+    ) {
+      transformedSourceStr = transformed.source.toString("utf-8");
+    } else {
+      console.warn(
+        `[react-loader] Unexpected transformed source type: ${typeof transformed.source}`
+      );
+      return transformed;
     }
 
     const newSrc = await transformModuleIfNeeded(
-      transformedSource,
+      transformedSourceStr,
       context.url,
-      (url: string) =>
-        loadClientImport(url, defaultTransformSource),
+      (url: string) => loadClientImport(url, defaultTransformSource),
       context.data?.port!
     );
     return { source: newSrc };

package/plugin/loader/temporaryReferences.ts

@@ -0,0 +1,3 @@
+import { createTemporaryReferenceSet } from "react-server-dom-esm/server.node";
+
+export const temporaryReferences = createTemporaryReferenceSet();

package/plugin/moduleRefs.ts

@@ -0,0 +1,11 @@
+// Create a shared map to store module references
+export const moduleRefs = new Map<string, { id: string }>();
+
+export function getModuleRef(id: string): { id: string } {
+  let moduleRef = moduleRefs.get(id);
+  if (!moduleRef) {
+    moduleRef = { id };
+    moduleRefs.set(id, moduleRef);
+  }
+  return moduleRef;
+} 

package/plugin/plugin.client.ts

@@ -0,0 +1,12 @@
+import { reactPreservePlugin } from "./preserver/plugin.js";   
+import { reactTransformPlugin } from "./transformer/plugin.client.js";
+import type { StreamPluginOptions } from "../types.js";
+import { reactClientPlugin } from "./react-client/plugin.js";
+
+export function vitePluginReactServer(options = {} as StreamPluginOptions): import("vite").Plugin[] {
+    return [
+      reactClientPlugin(options),
+      reactTransformPlugin(options),
+      reactPreservePlugin(options),
+    ];
+  } 

package/plugin/plugin.server.ts

@@ -0,0 +1,25 @@
+import { reactPreservePlugin } from "./preserver/plugin.js";
+import { reactStaticPlugin } from "./react-static/plugin.js";
+import { reactTransformPlugin } from "./transformer/plugin.server.js";
+import type { StreamPluginOptions } from "./types.js";
+import { reactServerPlugin } from "./react-server/plugin.js";
+
+
+export function vitePluginReactServer(
+  options = {} as StreamPluginOptions
+): import("vite").Plugin[] {
+  if(!options.build?.pages || (Array.isArray(options.build.pages) && options.build.pages.length === 0)) {
+    // in this case we do not need the static plugin at all
+    return [
+      reactTransformPlugin(options),
+      reactServerPlugin(options),
+      reactPreservePlugin(options),
+    ];
+  }
+  return [
+    reactTransformPlugin(options),
+    reactServerPlugin(options),
+    reactStaticPlugin(options),
+    reactPreservePlugin(options),
+  ];
+}

package/plugin/plugin.ts

@@ -1,9 +1,5 @@
-import { assertServerCondition } from "./assertServerCondition.js";
-export { reactServerPlugin } from "./react-server/plugin.js";
-export { reactClientPlugin } from "./react-client/plugin.js";
-export { reactTransformPlugin } from "./transformer/plugin.js";
-export { reactPreservePlugin } from "./preserver/plugin.js";
-export { vitePluginReactServer } from "./react-server/index.js";
-// the main plugin is version is the server version, if you want the client version, use the `vite-plugin-react-server/client` import
-// this is because the workflow assumes main thread = react server condition
-assertServerCondition(process);
+import { getCondition } from './config/getCondition.js';
+
+const condition = getCondition().slice(6); // remove react-
+
+export const { vitePluginReactServer } = await import(`./plugin.${condition}.js`);

package/plugin/preserver/plugin.ts

@@ -47,7 +47,7 @@ export function reactPreservePlugin(_options: StreamPluginOptions): import("vite
       order: "post", // Ensure this runs last in transform phase
       handler(code: string, id: string) {
         // Skip node_modules and vite files
-        if (id.includes("node_modules") || id.includes("vite/dist") || !id.match(DEFAULT_CONFIG.FILE_REGEX)) {
+        if (id.includes("node_modules") || id.includes("vite/dist") || !id.match(DEFAULT_CONFIG.MODULE_EXTENSION)) {
           return null;
         }
 

package/plugin/react-client/index.ts

@@ -1,12 +1 @@
-import { reactPreservePlugin } from "../plugin.js";
-import { reactTransformPlugin } from "../transformer/plugin.js";
-import type { StreamPluginOptions } from "../types.js";
-import { reactClientPlugin } from "./plugin.js";
-
-export function vitePluginReactClient(options = {} as StreamPluginOptions): import("vite").Plugin[] {
-    return [
-      reactClientPlugin(options),
-      reactTransformPlugin(options),
-      reactPreservePlugin(options),
-    ];
-  } 
+export { reactClientPlugin } from "./plugin.js";