vite-plugin-react-server 0.3.10 → 0.3.12

package/plugin/worker/html/messageHandler.ts

@@ -1,30 +1,38 @@
 import { PassThrough } from "node:stream";
 import { parentPort } from "node:worker_threads";
 import type { HtmlRenderState, HtmlWorkerMessage } from "../types.js";
-import ReactDOMServer from "react-dom/server";
+import * as ReactDOMServer from "react-dom/server";
 import React from "react";
 import {
   createFromNodeStream,
   // @ts-ignore
 } from "react-server-dom-esm/client.node";
+import { join } from "path";
 
 // 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, ...rest } = message;
+        const { id, chunk, moduleRootPath, moduleBaseURL, htmlOutputPath, pipableStreamOptions } = message;
+        
         const render = activeRenders.get(id);
-
         if (!render) {
           activeRenders.set(id, {
             chunks: [chunk],
             id,
             complete: false,
             rendered: false,
-            ...rest,
+            moduleRootPath,
+            moduleBaseURL,
+            outDir: '',
+            htmlOutputPath: htmlOutputPath ?? join(process.cwd(), 'index.html'),
+            pipableStreamOptions: pipableStreamOptions,
           });
         } else {
           render.chunks = [...render.chunks, chunk];
@@ -39,6 +47,9 @@ export const messageHandler = async (message: HtmlWorkerMessage) => {
           throw new Error(`No render state found for ${id}`);
         }
 
+        // Mark this render as complete
+        render.complete = true;
+
         // Create a PassThrough stream to handle the chunks
         const rscStream = new PassThrough();
 
@@ -47,18 +58,18 @@ export const messageHandler = async (message: HtmlWorkerMessage) => {
           rscStream.write(chunk);
         }
         rscStream.end();
-
+          
         // Create React elements from stream
-        const reactElements = createFromNodeStream(
+        const reactElements = await createFromNodeStream(
           rscStream,
           render.moduleRootPath,
-          render.moduleBaseURL
+          'localhost'
         );
 
         // Create a promise that resolves when HTML is complete
         const htmlPromise = new Promise<string>((resolve) => {
-          let html = "";
           const collectStream = new PassThrough();
+          let html = '';
 
           collectStream.on("data", (chunk) => {
             html += chunk.toString();
@@ -66,8 +77,14 @@ export const messageHandler = async (message: HtmlWorkerMessage) => {
 
           collectStream.on("end", () => {
             resolve(html);
+            render.rendered = true;
+            parentPort?.postMessage({
+              type: "ALL_READY",
+              id,
+              html,
+              outputPath: render.htmlOutputPath,
+            });
           });
-
           // Render to pipeable stream
           const stream = ReactDOMServer.renderToPipeableStream(
             reactElements as React.ReactNode,
@@ -75,24 +92,7 @@ export const messageHandler = async (message: HtmlWorkerMessage) => {
               ...render.pipableStreamOptions,
               onShellReady() {
                 parentPort?.postMessage({ type: "SHELL_READY", id });
-              },
-              async onAllReady() {
-                const finalHtml = await htmlPromise;
-                parentPort?.postMessage({
-                  type: "HTML_READY",
-                  id,
-                  html: finalHtml,
-                  outputPath: render.htmlOutputPath,
-                });
-                parentPort?.postMessage({ type: "ALL_READY", id });
-              },
-              onError(error) {
-                parentPort?.postMessage({
-                  type: "ERROR",
-                  id,
-                  error: error instanceof Error ? error.message : String(error),
-                });
-              },
+              }
             }
           );
 
@@ -100,17 +100,24 @@ export const messageHandler = async (message: HtmlWorkerMessage) => {
           stream.pipe(collectStream);
         });
 
+        htmlPromises.set(id, htmlPromise);
+
+        // Clean up resources
+        rscStream.destroy();
+        activeRenders.delete(id);
+        htmlContent.delete(id);
+        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;
   }
 };

package/plugin/worker/html/plugin.ts

@@ -1,12 +1,18 @@
-import type { Plugin } from "vite";
-import { resolve } from "path";
-import type { ModuleFormat } from 'rollup';
-import type { StreamPluginOptions } from "../../types.js";
+import type { Plugin, UserConfig } from "vite";
+import { join, resolve } from "path";
+import type { ModuleFormat, RollupOptions } from 'rollup';
+import type { ResolvedUserOptions, StreamPluginOptions } from "../../types.js";
 import { DEFAULT_CONFIG } from "../../config/defaults.js";
 import { getPluginRoot } from "../../config/getPaths.js";
+import { resolveOptions } from "../../config/resolveOptions.js";
 
-
+let userOptions: ResolvedUserOptions;
 export function reactHtmlWorkerPlugin(options: StreamPluginOptions): Plugin {
+  const resolvedUserOptions = resolveOptions(options);
+  if(resolvedUserOptions.type === 'error') {
+    throw resolvedUserOptions.error
+  }
+  userOptions = resolvedUserOptions.userOptions;
   return {
     name: "vite:react-html-worker",
     config(config) {
@@ -25,18 +31,16 @@ export function reactHtmlWorkerPlugin(options: StreamPluginOptions): Plugin {
         },
         output: {
           format,
-          dir: options.build?.server ?? 'dist/server', // Output to server directory
+          dir: join(userOptions.build.outDir, userOptions.build.server),
           entryFileNames: '[name].js',
           preserveModules: true,
+          preserveModulesRoot: userOptions.build.preserveModulesRoot === true ? userOptions.moduleBase : undefined,
           // Add manifest entry
           manualChunks: {
             'html-worker': [htmlWorkerPath]
-          },
-          resolve: {
-            conditions: ['react-server'],
           }
         }
-      };
+      } satisfies RollupOptions;
 
       return {
         build: {
@@ -79,7 +83,7 @@ export function reactHtmlWorkerPlugin(options: StreamPluginOptions): Plugin {
           minify: false,
           sourcemap: true,
         }
-      };
+      } satisfies UserConfig;
     },
     // Add this to ensure entry is in manifest
     generateBundle(_, bundle) {

package/plugin/worker/html/renderPages.ts

@@ -4,7 +4,17 @@ import { dirname, join, resolve as resolvePath } from "node:path";
 import { Transform } from "node:stream";
 import type { Worker } from "node:worker_threads";
 import { createHandler } from "../../react-server/createHandler.js";
-import type { ResolvedUserConfig, StreamPluginOptions } from "../../types.js";
+import type { CheckFilesExistReturn, ResolvedUserConfig, ResolvedUserOptions } from "../../types.js";
+import type {
+  HtmlWorkerResponse,
+  WorkerRscChunkMessage,
+} from "../types.js";
+import type { Manifest } from "vite";
+import type {
+  PluginContext,
+} from "rollup";
+import React from "react";
+import { collectManifestCss } from "../../collect-css-manifest.js";
 
 interface PipeableStreamOptions {
   bootstrapModules?: string[];
@@ -24,18 +34,10 @@ interface PipeableStreamOptions {
 }
 
 type RenderPagesOptions = {
-  pluginOptions: Required<
-    Pick<
-      StreamPluginOptions,
-      "moduleBase" | "moduleBasePath" | "moduleBaseURL" | "projectRoot"
-    >
-  > &
-    Pick<
-      StreamPluginOptions,
-      "Page" | "props" | "build" | "Html" | "pageExportName" | "propsExportName"
-    >;
+  pluginOptions: ResolvedUserOptions;
   userConfig: ResolvedUserConfig;
-  manifest: Record<string, { file: string }>;
+  clientManifest: Manifest;
+  serverManifest: Manifest;
   worker: Worker;
   pipableStreamOptions?: PipeableStreamOptions;
   loader: (id: string) => Promise<Record<string, any>>;
@@ -46,137 +48,189 @@ type RenderPagesOptions = {
 };
 
 export async function renderPages(
+  pluginContext: PluginContext,
   routes: string[],
+  files: CheckFilesExistReturn,
   options: RenderPagesOptions
 ) {
-  console.log("[renderPages] Starting render for routes:", routes);
-
-  const destinationRoot = resolvePath(options.userConfig.root, options.userConfig.build.outDir);
+  const root = pluginContext.environment.config.root;
+  const outDir = pluginContext.environment.config.build.outDir;
   const failedRoutes = new Map<string, Error>();
-  const moduleRootPath = join(destinationRoot, options.moduleBasePath);
-  const moduleBaseURL = options.moduleBaseURL;
-  const htmlRoot = join(
-    options.userConfig.root,
-    options.userConfig.build.outDir
-  );
-  const streamStarted = new Set<string>();
   const completedRoutes = new Set<string>();
-  const htmlContent = new Map<string, string>();
   const writePromises = new Map<string, Promise<void>>();
 
-  // Create a promise that resolves when all routes are complete
-  const allRoutesComplete = new Promise<void>((resolve, reject) => {
-
-
-    options.worker.on("message", function messageHandler(msg: any) {
-      switch (msg.type) {
-        case "SHELL_READY": {
-          streamStarted.add(msg.id);
-          break;
-        }
-        case "HTML_READY": {
-          htmlContent.set(msg.id, msg.html);
-          break;
-        }
-        case "ALL_READY": {
-          completedRoutes.add(msg.id);
-          
-          if (completedRoutes.size === routes.length) {
-            options.worker.removeListener("message", messageHandler);
+  try {
+    // Set up worker message handling
+    const allRoutesComplete = new Promise<void>((resolve, reject) => {
+      options.worker.on("message", (msg: HtmlWorkerResponse) => {
+        switch (msg.type) {
+          case "ALL_READY": {
+            const { id, html, outputPath } = msg;
+            mkdirSync(dirname(outputPath), { recursive: true });
             
-            // Write all HTML files
-            for (const [route, html] of htmlContent) {
-              const outputPath = route === '/' 
-                ? join(htmlRoot, 'index.html')
-                : join(htmlRoot, route, 'index.html');
-              mkdirSync(dirname(outputPath), { recursive: true });
-              const writePromise = writeFile(outputPath, html)
-                .catch(error => {
-                  failedRoutes.set(route, error as Error);
-                });
-              writePromises.set(route, writePromise);
-            }
-
-            // Wait for all files to be written
-            Promise.all(writePromises.values())
-              .then(() => resolve())
-              .catch(reject);
+            writeFile(outputPath, html)
+              .then(() => {
+                completedRoutes.add(id);
+                if (completedRoutes.size === routes.length) {
+                  resolve();
+                }
+              })
+              .catch((error) => {
+                console.error('Write error for route:', id, error);
+                failedRoutes.set(id, error as Error);
+                reject(error);
+              });
+            break;
           }
-          break;
-        }
-        case "ERROR": {
-          console.error("[renderPages] Worker error:", msg.error);
-          if (msg.id) {
+          case "ERROR": {
+            console.error('Worker error for route:', msg.id, msg.error);
             failedRoutes.set(msg.id, new Error(msg.error));
+            reject(new Error(msg.error));
+            break;
           }
-          break;
         }
-      }
+      });
     });
-  });
 
-  try {
-    await mkdir(htmlRoot, { recursive: true });
-
-    const renderPromises = routes.map(async (route) => {
-      
-      try {
-        const result = await createHandler(route, options.pluginOptions, {
-          loader: options.loader,
-          manifest: options.manifest,
-        });
-
-        if (result.type !== "success") {
-          console.log("[renderPages] Handler failed:", result);
-          return;
-        }
+    // Process routes sequentially
+    for (const route of routes) {
+      const routeFiles = files.urlMap.get(route);
+      if (!routeFiles) {
+        console.error('No files found for route:', route);
+        failedRoutes.set(route, new Error(`No files found for ${route}`));
+        continue;
+      }
 
-        const htmlOutputPath = route === '/' 
-          ? resolvePath(htmlRoot, 'index.html')
-          : resolvePath(htmlRoot, route, 'index.html');
-
-        const transform = new Transform({
-          transform(chunk, _encoding, callback) {
-            options.worker.postMessage({
-              type: "RSC_CHUNK",
-              id: route,
-              chunk: chunk,
-              moduleRootPath: moduleRootPath,
-              moduleBaseURL: moduleBaseURL,
-              htmlOutputPath,
-              outDir: options.userConfig.build.outDir,
-              pipableStreamOptions: options.pipableStreamOptions ?? {},
-            });
-            callback(null, chunk);
-          },
-          flush(callback) {
-            options.worker.postMessage({
-              type: "RSC_END",
-              id: route,
-            });
-            callback();
+      const cssFiles = collectManifestCss(
+        options.serverManifest,
+        options.moduleBasePath,
+        routeFiles.page,
+        options.onCssFile
+      );
+
+      // Create handler for pure RSC output
+      const rscResult = await createHandler(route, {
+        ...options.pluginOptions,
+        Html: React.Fragment // Use Fragment for pure RSC output
+      }, {
+        loader: options.loader,
+        clientManifest: options.clientManifest,
+        serverManifest: options.serverManifest,
+        pipableStreamOptions: {
+          ...options.pipableStreamOptions,
+          importMap: {
+            imports: {
+              ...options.pipableStreamOptions?.importMap?.imports,
+              ...Object.fromEntries(Array.from(cssFiles.entries()))
+            }
           }
-        });
-          
-        result.stream.pipe(transform);
+        },
+      });
+
+      // Create handler for HTML output
+      const htmlResult = await createHandler(route, options.pluginOptions, {
+        loader: options.loader,
+        clientManifest: options.clientManifest,
+        serverManifest: options.serverManifest,
+        pipableStreamOptions: {
+          ...options.pipableStreamOptions,
+          importMap: {
+            imports: {
+              ...options.pipableStreamOptions?.importMap?.imports,
+              ...Object.fromEntries(Array.from(cssFiles.entries()))
+            }
+          }
+        },
+      });
 
-      } catch (error) {
-        failedRoutes.set(route, error as Error);
+      if (rscResult.type !== "success" || htmlResult.type !== "success") {
+        console.error('Handler failed for route:', route);
+        failedRoutes.set(route, new Error(`Handler failed for ${route}`));
+        continue;
       }
-    });
 
-    // Wait for both the render promises and all routes to complete
-    await Promise.all([
-      Promise.all(renderPromises),
-      allRoutesComplete
-    ]);
+      // Process both streams
+      await Promise.all([
+        // Save RSC stream to .rsc file in client directory
+        new Promise<void>((resolve, reject) => {
+          const chunks: Buffer[] = [];
+          const rscTransform = new Transform({
+            transform(chunk, _encoding, callback) {
+              try {
+                chunks.push(Buffer.from(chunk));
+                callback(null, chunk);
+              } catch (error) {
+                callback(error as Error);
+              }
+            },
+            flush(callback) {
+              try {
+                const rscPath = join(options.pluginOptions.build.outDir, options.pluginOptions.build.client, route, 'index.rsc');
+                
+                // Ensure directory exists
+                mkdirSync(dirname(rscPath), { recursive: true });
+                
+                // Write complete file
+                writeFile(rscPath, Buffer.concat(chunks))
+                  .then(() => {
+                    callback();
+                    resolve();
+                  })
+                  .catch(error => {
+                    console.error('RSC write error:', error);
+                    callback(error as Error);
+                    reject(error);
+                  });
+              } catch (error) {
+                callback(error as Error);
+                reject(error);
+              }
+            }
+          });
+
+          rscResult.stream.pipe(rscTransform);
+        }),
+
+        // Send HTML stream to worker
+        new Promise<void>((resolve, reject) => {
+          const htmlTransform = new Transform({
+            transform(chunk, _encoding, callback) {
+              try {
+                options.worker.postMessage({
+                  type: "RSC_CHUNK",
+                  id: route,
+                  chunk: chunk.toString(),
+                  moduleRootPath: join(root, options.pluginOptions.build.outDir),
+                  moduleBaseURL: options.moduleBaseURL,
+                  htmlOutputPath: join(options.pluginOptions.build.outDir, options.pluginOptions.build.client, route, 'index.html'),
+                  pipableStreamOptions: options.pipableStreamOptions,
+                });
+                callback(null, chunk);
+              } catch (error) {
+                callback(error as Error);
+              }
+            },
+            flush(callback) {
+              options.worker.postMessage({
+                type: "RSC_END",
+                id: route,
+              });
+              callback();
+              resolve();
+            }
+          });
 
-  } finally {
-    await options.worker.terminate();
+          htmlResult.stream.pipe(htmlTransform);
+        })
+      ]);
+    }
+
+    await allRoutesComplete;
+
+  } catch (error) {
+    console.error('Render error:', error);
+    throw error;
   }
 
-  return {
-    failedRoutes,
-    completedRoutes
-  };
+  return { failedRoutes, completedRoutes };
 }

package/plugin/worker/loader.ts

@@ -1,16 +1,7 @@
+
 /**
- * Extension point for custom module loading in the worker thread.
- * This file can be overridden via the plugin options:
- *
- * ```ts
- * reactStreamPlugin({
- *   loaderPath: './my-custom-loader.ts'
- * })
- * ```
- *
- * The default loader provides basic module loading functionality.
- * Override this if you need custom module resolution or transformation.
+ * Not used currently
  */
-export function load(id: string) {
-  return import(id);
+export async function load(id: string) {
+  return await import(id);
 }

package/plugin/worker/plugin.ts

@@ -4,7 +4,16 @@ import { reactHtmlWorkerPlugin } from "./html/plugin.js"
 import { reactRscWorkerPlugin } from "./rsc/plugin.js"
 
 /**
- * This plugin can be used to create your own worker paths. By default, prebuild workers are used.
+ * This plugin can be used to create your own worker paths. This build should be separated from the main build.
+ * 
+ * 
+ * ```ts
+ * @example
+ *export reactWorkerPluginConfig = {
+ *  htmlWorkerPath: './workers/html.tsx',
+ *  rscWorkerPath: './workers/rsc.tsx',
+ * }
+ * ```
  * 
  * @param options
  * @returns

package/plugin/worker/rsc/index.ts

@@ -1,14 +1,5 @@
-export { reactRscWorkerPlugin } from "./plugin.js";
-
-// Dynamic import based on NODE_ENV
-export const worker = await (
-  process.env['NODE_ENV'] === 'production' 
-  ? import('./production.js') 
-  : import('./development.js')
+await(
+  process.env["NODE_ENV"] === "production"
+    ? import("./rsc-worker.production.js")
+    : import("./rsc-worker.development.js")
 );
-
-// Re-export worker functions
-export const {
-  createRscStream,
-  createWorker
-} = worker;