vite-plugin-react-server 0.3.11 → 0.3.14

package/plugin/react-server/plugin.ts

@@ -29,9 +29,10 @@ import { type StreamPluginOptions } from "../types.js";
 import { createWorker } from "../worker/createWorker.js";
 import { renderPages } from "../worker/html/renderPages.js";
 import { createHandler } from "./createHandler.js";
-import { mkdir, writeFile } from "node:fs/promises";
+import { mkdir, readFile, writeFile } from "node:fs/promises";
 import { getBundleManifest } from "../helpers/getBundleManifest.js";
 import type { ServerResponse } from "node:http";
+import { collectManifestCss } from "../collect-css-manifest.js";
 
 let resolvedConfig: ResolvedConfig | null = null;
 let serverManifestPath: string | null = null;
@@ -39,6 +40,7 @@ let clientManifestPath: string | null = null;
 let outpuptBundle: any;
 let outputOptions: any;
 let loader: ((id: string) => Promise<Record<string, any>>) | null = null;
+let worker: Worker;
 export function reactServerPlugin(
   options: StreamPluginOptions
 ): import("vite").Plugin<{
@@ -51,7 +53,6 @@ export function reactServerPlugin(
 
   let files: CheckFilesExistReturn;
   // let env: Awaited<ReturnType<typeof getEnv>>;
-  let worker: Worker;
   let cssModules = new Set<string>();
   let clientComponents = new Map<string, string>();
   // let define: Record<string, string>;
@@ -145,9 +146,7 @@ export function reactServerPlugin(
         );
       }
     },
-    async configurePreviewServer(server) {
-      
-    },
+    async configurePreviewServer(server) {},
     async configureServer(server: ViteDevServer) {
       if (typeof loader !== "function") {
         loader = server.ssrLoadModule;
@@ -209,7 +208,7 @@ export function reactServerPlugin(
               projectRoot: root,
             },
             {
-              cssFiles: Array.from(cssModules),
+              cssFiles: [],
               logger: createLogger(),
               loader,
               moduleGraph: server.moduleGraph,
@@ -260,7 +259,6 @@ export function reactServerPlugin(
       }
 
       userConfig = resolvedConfig.userConfig;
-
       return resolvedConfig.userConfig;
     },
     async buildStart() {
@@ -305,18 +303,35 @@ export function reactServerPlugin(
           nodeOptions: "--conditions=react-client",
         });
 
-        // Use both manifests directly
+        // Create the loader
         if (typeof loader !== "function") {
           if (!Object.keys(serverManifest).length) {
-            serverManifest = getBundleManifest(this, outpuptBundle, undefined);
+            console.warn(
+              "[vite-plugin-react-server] No server manifest found, the plugin will try to use the plugin context - it may differ from vite's manifest."
+            );
+            serverManifest = getBundleManifest({
+              pluginContext: this,
+              bundle: outpuptBundle,
+              moduleBase: userOptions.moduleBase,
+              preserveModulesRoot: userOptions.build.preserveModulesRoot,
+            });
             if (!Object.keys(serverManifest).length) {
+              console.warn(
+                "[vite-plugin-react-server] That didn't work, retrying to read manifest."
+              );
               const resolvedServerManifest = tryManifest({
                 root: root,
-                outDir: join(userOptions.build.outDir, userOptions.build.server),
+                outDir: join(
+                  userOptions.build.outDir,
+                  userOptions.build.server
+                ),
                 ssrManifest: false,
               });
               if (resolvedServerManifest.type === "error") {
                 // dont build the static files without a server manifest
+                console.error(
+                  "[vite-plugin-react-server] Failed to read manifest, aborting build."
+                );
                 return;
               }
               serverManifest = resolvedServerManifest.manifest;
@@ -335,30 +350,73 @@ export function reactServerPlugin(
         if (resolvedPages.type === "error") {
           throw resolvedPages.error;
         }
+
+        const onCssFile = async (path: string, parentUrl: string) => {
+          if (buildCssFiles && path.endsWith(".css")) {
+            buildCssFiles.add(path);
+            if (parentUrl.endsWith(userOptions.build.client)) {
+              // copy the file to the client build dir
+              const serverPath = join(
+                userOptions.build.outDir,
+                userOptions.build.server,
+                path
+              );
+              await writeFile(
+                serverPath,
+                await readFile(
+                  join(
+                    root,
+                    userOptions.build.outDir,
+                    userOptions.build.client,
+                    path
+                  )
+                )
+              );
+            } else {
+              // copy the file to the client build dir, assume it's in server build dir
+              const clientPath = join(
+                userOptions.build.outDir,
+                userOptions.build.client,
+                path
+              );
+              await mkdir(dirname(clientPath), { recursive: true });
+              await writeFile(
+                clientPath,
+                await readFile(
+                  join(
+                    root,
+                    userOptions.build.outDir,
+                    userOptions.build.server,
+                    path
+                  )
+                )
+              );
+            }
+          }
+        };
+
         const { failedRoutes, completedRoutes } = await renderPages(
           this,
           resolvedPages.pages,
+          files,
           {
-            pipableStreamOptions: {},
+            pipableStreamOptions: {
+              bootstrapModules: clientManifest["index.html"]?.file
+                ? [clientManifest["index.html"].file]
+                : [],
+            },
             moduleBasePath: "",
             moduleBaseURL: "",
-            clientCss:
-              Object.values(clientManifest)
-                .flatMap((entry) => entry.css)
-                .filter((css) => typeof css === "string")
-                .map((css) => "/" + css) ?? [],
+            clientCss: clientManifest["index.html"]?.css
+              ? clientManifest["index.html"].css
+              : [],
             userConfig,
             pluginOptions: userOptions,
             worker: worker,
             clientManifest: clientManifest,
             serverManifest: serverManifest,
             loader,
-            onCssFile: (path: string) => {
-              console.log("[vite-plugin-react-server] onCssFile", path);
-              if (buildCssFiles && path.endsWith(".css")) {
-                buildCssFiles.add(path);
-              }
-            },
+            onCssFile: onCssFile,
           }
         );
 
@@ -421,7 +479,6 @@ export function reactServerPlugin(
 
         // Ensure worker is terminated
         if (worker) {
-          console.log("[vite-plugin-react-server] Terminating worker...");
           await worker.terminate();
           worker = null as any;
         }
@@ -451,8 +508,12 @@ export function reactServerPlugin(
       outpuptBundle = bundle;
       outputOptions = options;
       // Create manifest entries for each chunk
-      serverManifest = getBundleManifest(this, bundle, undefined);
-      console.log("[vite:plugin-react-server] Server manifest", serverManifest);
+      serverManifest = getBundleManifest({
+        pluginContext: this,
+        bundle,
+        moduleBase: userOptions.moduleBase,
+        preserveModulesRoot: userOptions.build.preserveModulesRoot,
+      });
       if (serverManifestPath) {
         await mkdir(dirname(serverManifestPath), { recursive: true });
         await writeFile(
@@ -461,15 +522,5 @@ export function reactServerPlugin(
         );
       }
     },
-    async renderChunk(code: string, chunk, options) {
-      if (chunk.fileName.includes("html-worker")) {
-        const workerPath = resolve(root, chunk.fileName);
-        worker = await createWorker({
-          projectRoot: userOptions.projectRoot,
-          workerPath,
-        });
-      }
-      return null;
-    },
   };
 }

package/plugin/transformer/plugin.ts

@@ -1,20 +1,11 @@
 import { resolveOptions } from "../config/resolveOptions.js";
-import type {
-  ResolvedUserConfig,
-  ResolvedUserOptions,
-  StreamPluginOptions,
-} from "../types.js";
-import { createClientComponentTransformer } from "./transformer-client-components.js";
-import { createModuleIdGenerator } from "../config/createModuleIdGenerator.js";
-import { type ConfigEnv, type Plugin, type ResolvedConfig } from "vite";
+import type { StreamPluginOptions } from "../types.js";
+import { type Plugin } from "vite";
+import { transformModuleIfNeeded } from "../loader/react-loader.js";
+import { DEFAULT_CONFIG } from "../config/defaults.js";
 import { createInputNormalizer } from "../helpers/inputNormalizer.js";
-import { resolveUserConfig } from "../config/resolveUserConfig.js";
-
-let userOptions: ResolvedUserOptions;
-let userConfig: ResolvedUserConfig;
-let resolvedConfig: ResolvedConfig;
-let resolvedConfigEnv: ConfigEnv;
-
+import { tryManifest } from "../helpers/tryManifest.js";
+import { join } from "node:path";
 /**
  * Plugin for transforming React Client Components.
  *
@@ -41,76 +32,76 @@ let resolvedConfigEnv: ConfigEnv;
  */
 
 export function reactTransformPlugin(options: StreamPluginOptions): Plugin {
-  const resolvedUserOptions = resolveOptions(options);
-  if (resolvedUserOptions.type === "error") {
-    throw resolvedUserOptions.error;
-  }
-  userOptions = resolvedUserOptions.userOptions;
+  const resolvedOptions = resolveOptions(options);
+  let isDev = false;
+  if (resolvedOptions.type === "error") throw resolvedOptions.error;
+  const normalizer = createInputNormalizer({
+    root: resolvedOptions.userOptions.projectRoot,
+    preserveModulesRoot: undefined,
+    removeExtension: false,
+  });
 
-  let manifest: Record<string, { file: string }> = {};
-  const pendingEmits = new Map<string, { referenceId: string }>();
+  // Get the client manifest
+  const clientManifestResult = tryManifest({
+    root: resolvedOptions.userOptions.projectRoot,
+    outDir: join(
+      resolvedOptions.userOptions.build.outDir,
+      resolvedOptions.userOptions.build.client
+    ),
+    ssrManifest: false,
+  });
 
   return {
     name: "vite:react-transform",
-    enforce: "post",
-
+    enforce: "pre", // Run before Vite's transforms
     config(config, configEnv) {
-      const resolvedUserConfig = resolveUserConfig({
-        isClient: false,
-        config,
-        configEnv,
-        userOptions,
-      });
-      if (resolvedUserConfig.type === "error") {
-        throw resolvedUserConfig.error;
-      }
-      userConfig = resolvedUserConfig.userConfig;
-      resolvedConfigEnv = configEnv;
+      isDev = configEnv.mode === "development" && configEnv.command === "serve";
     },
-    configResolved(config) {
-      resolvedConfig = config;
-    },
-
-    transform(code: string, id: string, opt: { ssr?: boolean } = {}) {
-      const hasClientDirective = code.match(/^["']use client["'];?/);
-      if (!hasClientDirective) return null;
-
-      const moduleInfo = this.getModuleInfo(id);
-      if (!moduleInfo) return null;
-
-      // In dev mode, just transform the code without emitting
-      if (resolvedConfigEnv.command === 'serve') {
-        const transformer = createClientComponentTransformer(userOptions, userConfig, resolvedConfigEnv);
-        return transformer.transform!.bind(this)(code, id, opt);
+    async transform(code, id, options) {
+      const ssr = options?.ssr ?? false;
+      if (!ssr) return null;
+      if (!id.match(DEFAULT_CONFIG.FILE_REGEX)) return null;
+      if (!code.match('"use client"'))
+        return null;
+      const [key, value] = normalizer(id);
+      const transformed = await transformModuleIfNeeded(
+        code,
+        id,
+        // Pass null for nextLoad since we don't need module loading in the plugin
+        null
+      );
+      if (!transformed) return null;
+      if (isDev) {
+        return {
+          code: transformed,
+          map: null,
+        };
       }
+      const moduleIdIndex = transformed.indexOf(value);
+      if (moduleIdIndex === -1) {
+        console.warn(
+          `[vite-plugin-react-server] Could not find module id in transformed code. Ignoring.`,
+          {
+            code,
+            id,
+            transformed,
+          }
+        );
+        return null
+      }
+      if (clientManifestResult.type === "error") {
+        throw clientManifestResult.error;
+      }
+      const clientPath = clientManifestResult.manifest[key]?.file;
 
-      // Production build logic...
-      const normalizer = createInputNormalizer({
-        root: resolvedConfig.root,
-        preserveModulesRoot: undefined,
-      });
-      const [normalizedId, normalizedPath] = normalizer(id);
-
-      // Add to manifest immediately with a temporary path
-      manifest[normalizedId] = { file: normalizedPath };
-      
-      const referenceId = this.emitFile({
-        type: "chunk",
-        id: normalizedPath,
-        name: normalizedId,
-      });
-      pendingEmits.set(normalizedId, { referenceId });
-
-      const transformer = createClientComponentTransformer(userOptions, userConfig, resolvedConfigEnv);
-      return transformer.transform!.bind(this)(code, id, opt);
-    },
-
-    renderDynamicImport() {
-      // Update manifest with real file names
-      for (const [normalizedId, { referenceId }] of pendingEmits) {
-        const fileName = this.getFileName(referenceId);
-        manifest[normalizedId] = { file: fileName };
+      if (!clientPath) {
+        console.warn(`[vite-plugin-react-server] Could not find client path for ${value}. Ignoring.`)
+        return null
       }
+      return {
+        code: transformed.replace(key, clientPath),
+        map: null,
+      };
     },
   };
 }

package/plugin/types/global.d.ts

@@ -0,0 +1,8 @@
+import type { EventEmitter } from 'node:events';
+
+declare global {
+  var __RSC_CSS_FILES__: Set<string>;
+  var __RSC_CSS_EVENTS__: EventEmitter;
+}
+
+export {}; 

package/plugin/types.ts

@@ -181,7 +181,7 @@ export interface CreateHandlerOptions<T = any> {
   serverManifest?: import("vite").Manifest;
   moduleGraph?: import("vite").ModuleGraph;
   cssFiles?: string[];
-  onCssFile?: (path: string) => void;
+  onCssFile?: (path: string, parentUrl: string) => void;
   logger?: import("vite").Logger;
   pipableStreamOptions?: PipeableStreamOptions;
 }
@@ -337,6 +337,8 @@ export type CheckFilesExistReturn = {
   propsSet: Set<string>;
   pageMap: Map<string, string>;
   pageSet: Set<string>;
+  urlMap: Map<string, {props: string, page: string}>;
+  errors: string[];
 };
 
 // Add strict type checking for worker messages

package/plugin/utils/logger.ts

@@ -0,0 +1,52 @@
+import { createLogger as createViteLogger, type LogLevel } from 'vite';
+
+
+const isPrimitive = (value: any) => {
+  return typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean' || typeof value === 'symbol';
+}
+
+const buildMessage = (prefix: string, msg: string, ...args: any[]) => {
+  let buildMsg = `[${prefix}] ${msg}`
+  for(const arg of args) {
+    if(isPrimitive(arg)) {
+      buildMsg += `\n[${prefix}] ${String(arg)}`;
+    } else if(arg instanceof Error) {
+      buildMsg += `\n[${prefix}] ${arg.name}`
+      buildMsg += `\n[${prefix}] ${arg.message}`
+      buildMsg += `\n[${prefix}] ${arg.stack}`
+      buildMsg += `\n[${prefix}] ${arg.cause}`
+    } else {
+      buildMsg += `\n[${prefix}] ${JSON.stringify(arg)}`;
+    }
+  }
+  return buildMsg;
+}
+
+export const createLogger = (process.env['NODE_ENV'] === 'development') ? (prefix: string, logLevel: LogLevel = 'info') => {
+  const logger = createViteLogger(logLevel, {
+    allowClearScreen: true
+  });
+  return {
+    clear: () => logger.clearScreen('info'),
+    info: (msg: string, ...args: any[]) => {
+      console.log(buildMessage(prefix, msg, ...args))
+    },
+    warn: (msg: string, ...args: any[]) => {
+      console.warn(buildMessage(prefix, msg, ...args))
+    },
+    error: (msg: string, ...args: any[]) => {
+      console.error(buildMessage(prefix, msg, ...args))
+    },
+    debug: (msg: string, ...args: any[]) => {
+      console.debug(buildMessage(prefix, msg, ...args))
+    }
+  };
+} : () => {
+  return {
+    clear: () => {},
+    info: () => {},
+    warn: () => {},
+    error: () => {},
+    debug: () => {},
+  };
+};

package/plugin/worker/createWorker.ts

@@ -12,6 +12,7 @@ type CreateWorkerOptions = {
   maxListeners?: number;
   workerPath: string;
   resourceLimits?: ResourceLimits;
+  typescript?: boolean;
 };
 
 export async function createWorker(options: CreateWorkerOptions) {
@@ -26,59 +27,57 @@ export async function createWorker(options: CreateWorkerOptions) {
     resourceLimits = {
       maxOldGenerationSizeMb: 512,
       maxYoungGenerationSizeMb: 128,
-    }
+    },
   } = options;
 
   // Ensure consistent NODE_ENV between main thread and worker
-  const isTestEnv = process.env['VITEST'] || process.env['NODE_ENV'] === 'test';
-  const nodeEnv = isTestEnv ? 'development' : mode;
+  const isTestEnv = process.env["VITEST"] || process.env["NODE_ENV"] === "test";
+  const nodeEnv = isTestEnv ? "development" : mode;
 
   const env = {
     ...process.env,
     NODE_ENV: nodeEnv,
     NODE_PATH: nodePath,
-    // Clear any inherited conditions for worker
-    NODE_OPTIONS: reverseCondition ? 
-      (condition === 'react-server' ? '--conditions=react-client' : '--conditions=react-server') 
-      : process.env['NODE_OPTIONS']
+    NODE_OPTIONS: `${
+      reverseCondition
+        ? condition === "react-server"
+          ? process.env["NODE_OPTIONS"]?.includes("react-server")
+            ? process.env["NODE_OPTIONS"]?.replace("react-server", "react-client")
+            : `${process.env["NODE_OPTIONS"] ?? ''} --conditions=react-client`
+          : process.env["NODE_OPTIONS"]?.includes("react-client")
+            ? process.env["NODE_OPTIONS"]?.replace("react-client", "react-server")
+            : `${process.env["NODE_OPTIONS"] ?? ''} --conditions=react-server`
+        : process.env["NODE_OPTIONS"]
+    }`,
   };
-  const maxRetries = 3;
-  for (let tries = 0; tries < maxRetries; tries++) {
-    try {
-      const worker = new Worker(workerPath.startsWith('/') ? workerPath : join(projectRoot, workerPath), {
-        env,
-        // Increase resource limits for stream handling
-        resourceLimits: resourceLimits
-      });
-
-      worker.setMaxListeners(maxListeners);
 
-      // Wait for worker to be ready and verify environment
-      const ready = await Promise.race([
-        new Promise((_, reject) => {
-          setTimeout(() => reject(new Error(`Worker startup timeout: ${workerPath}`)), 5000);
-        }),
-        new Promise((resolve, reject) => {
-          worker.once('message', (msg) => {
-            if (msg.type === 'READY') {
-              if(msg.env === nodeEnv) {
-                resolve(true);
-              } else {
-                reject(new Error(`Worker environment mismatch: expected ${nodeEnv}, got ${msg.env}`));
-              }
-            } else if (msg.type === 'ERROR') {
-              reject(new Error(msg.error));
-            }
-          });
-          worker.once('error', reject);
-        })
-      ]);
-      
-      if (ready) return worker;
-    } catch (error) {
-      console.warn(`Worker startup attempt ${tries + 1} failed:`, error);
-      if (tries === maxRetries - 1) throw error;
+  // Create worker with proper environment
+  const worker = new Worker(
+    workerPath.startsWith("/") ? workerPath : join(projectRoot, workerPath),
+    {
+      env,
+      resourceLimits,
     }
-  }
-  throw new Error('Failed to start worker after retries');
+  );
+
+  worker.setMaxListeners(maxListeners);
+
+  // Wait for worker to be ready
+  return await new Promise<Worker>((resolve, reject) => {
+    const timeout = setTimeout(() => {
+      reject(new Error('Worker ready timeout'));
+    }, 5000);
+
+    worker.once("message", (msg) => {
+      if (msg.type === "READY" && msg.env === nodeEnv) {
+        clearTimeout(timeout);
+        resolve(worker);
+      }
+    });
+
+    worker.once("error", (error) => {
+      clearTimeout(timeout);
+      reject(error);
+    });
+  });
 }

package/plugin/worker/html/html-worker.production.tsx

@@ -1,8 +1,13 @@
 import { messageHandler } from "./messageHandler.js";
 import { parentPort } from "node:worker_threads";
 
+let ready = false;
 if (!parentPort) throw new Error("This module must be run as a worker");
-parentPort?.on("message", messageHandler);
 
 // Signal ready with environment
-parentPort?.postMessage({ type: "READY", env: process.env["NODE_ENV"] });
+parentPort?.on("message", messageHandler);
+parentPort?.postMessage({ 
+    type: "READY", 
+    env: process.env["NODE_ENV"],
+    pid: process.pid 
+});

package/plugin/worker/html/messageHandler.ts

@@ -8,30 +8,19 @@ import {
   // @ts-ignore
 } from "react-server-dom-esm/client.node";
 import { join } from "path";
-import { readFileSync } from "node:fs";
-import { existsSync } from "node:fs";
 
 // Track active renders and streams
 const activeRenders = new Map<string, HtmlRenderState>();
 const htmlContent = new Map<string, string>();
 const htmlPromises = new Map<string, Promise<string>>();
 
+
 export const messageHandler = async (message: HtmlWorkerMessage) => {
   try {
     switch (message.type) {
       case "RSC_CHUNK": {
-        const { 
-          id, 
-          chunk, 
-          moduleRootPath, 
-          moduleBaseURL,
-          outDir,
-          pipableStreamOptions,
-          clientManifest = {},
-          serverManifest = {},
-          htmlOutputPath,
-        } = message;
-
+        const { id, chunk, moduleRootPath, moduleBaseURL, htmlOutputPath, pipableStreamOptions } = message;
+        
         const render = activeRenders.get(id);
         if (!render) {
           activeRenders.set(id, {
@@ -41,8 +30,8 @@ export const messageHandler = async (message: HtmlWorkerMessage) => {
             rendered: false,
             moduleRootPath,
             moduleBaseURL,
-            outDir,
-            htmlOutputPath: htmlOutputPath ?? join(outDir, 'index.html'),
+            outDir: '',
+            htmlOutputPath: htmlOutputPath ?? join(process.cwd(), 'index.html'),
             pipableStreamOptions: pipableStreamOptions,
           });
         } else {
@@ -120,12 +109,15 @@ export const messageHandler = async (message: HtmlWorkerMessage) => {
         htmlPromises.delete(id);
         break;
       }
+
+      case "SHUTDOWN": {
+        console.log('Received shutdown signal');
+        parentPort?.close();
+        break;
+      }
     }
   } catch (error) {
-    parentPort?.postMessage({
-      type: "ERROR",
-      id: message.type === "RSC_CHUNK" || message.type === "RSC_END" ? message.id : "",
-      error: error instanceof Error ? error.message : String(error),
-    });
+    console.error('Error in messageHandler:', error);
+    throw error;
   }
 };