vite-plugin-react-server 0.3.18 → 0.3.19

package/plugin/worker/html/messageHandler.ts

@@ -7,7 +7,6 @@ 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>();
@@ -29,7 +28,7 @@ export const messageHandler = async (message: HtmlWorkerMessage) => {
             moduleRootPath,
             moduleBaseURL,
             outDir: '',
-            htmlOutputPath: htmlOutputPath ?? join(process.cwd(), 'index.html'),
+            htmlOutputPath: htmlOutputPath,
             pipableStreamOptions: pipableStreamOptions,
           });
         } else {
@@ -88,6 +87,13 @@ export const messageHandler = async (message: HtmlWorkerMessage) => {
             reactElements as React.ReactNode,
             {
               ...render.pipableStreamOptions,
+              // Calculate relative paths based on route depth
+              bootstrapModules: render.pipableStreamOptions?.bootstrapModules?.map(path => {
+                if (!path) return path;
+                const depth = id.split('/').filter(Boolean).length ;
+                const prefix = depth > 0 ? '../'.repeat(depth) : '/';
+                return path.startsWith('/') ? prefix + path.slice(1) : prefix + path;
+              }),
               onShellReady() {
                 parentPort?.postMessage({ type: "SHELL_READY", id });
               }

package/plugin/worker/html/plugin.ts

@@ -3,12 +3,12 @@ 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 { pluginRoot } from "../../root.js";
 import { resolveOptions } from "../../config/resolveOptions.js";
 
 let userOptions: ResolvedUserOptions;
 export function reactHtmlWorkerPlugin(options: StreamPluginOptions): Plugin {
-  const resolvedUserOptions = resolveOptions(options);
+  const resolvedUserOptions = resolveOptions(options, false);
   if(resolvedUserOptions.type === 'error') {
     throw resolvedUserOptions.error
   }
@@ -17,7 +17,6 @@ export function reactHtmlWorkerPlugin(options: StreamPluginOptions): Plugin {
     name: "vite:react-html-worker",
     config(config) {
       const root = config.root ?? process.cwd();
-      const pluginRoot = getPluginRoot();
       const htmlWorkerPath = typeof options.htmlWorkerPath === 'string' 
         ? resolve(root, options.htmlWorkerPath) 
         : resolve(pluginRoot, DEFAULT_CONFIG.HTML_WORKER_PATH);

package/plugin/worker/html/renderPages.ts

@@ -1,20 +1,17 @@
-import { mkdirSync } from "node:fs";
 import { mkdir, writeFile } from "node:fs/promises";
-import { dirname, join, resolve as resolvePath } from "node:path";
+import { dirname, join } from "node:path";
 import { Transform } from "node:stream";
 import type { Worker } from "node:worker_threads";
-import { createHandler } from "../../react-server/createHandler.js";
-import type { CheckFilesExistReturn, ResolvedUserConfig, ResolvedUserOptions } from "../../types.js";
+import { createHandler } from "../../helpers/createHandler.js";
 import type {
-  HtmlWorkerResponse,
-  WorkerRscChunkMessage,
-} from "../types.js";
-import type { Manifest } from "vite";
-import type {
-  PluginContext,
-} from "rollup";
+  CheckFilesExistReturn,
+  PageData,
+  ResolvedUserConfig,
+  ResolvedUserOptions,
+} from "../../types.js";
+import type { HtmlWorkerResponse } from "../types.js";
+import type { Manifest, IndexHtmlTransformHook } from "vite";
 import React from "react";
-import { collectManifestCss } from "../../collect-css-manifest.js";
 
 interface PipeableStreamOptions {
   bootstrapModules?: string[];
@@ -42,48 +39,82 @@ type RenderPagesOptions = {
   pipableStreamOptions?: PipeableStreamOptions;
   loader: (id: string) => Promise<Record<string, any>>;
   onCssFile?: (url: string, parentUrl: string) => void;
+  onClientJSFile?: (url: string, parentUrl: string) => void;
+  onPage?: (pageData: PageData) => Promise<void>;
   clientCss?: string[];
   moduleBasePath: string;
   moduleBaseURL: string;
+  transformIndexHtml: IndexHtmlTransformHook;
+  outDir: string;
+  htmlOutputPath: string;
 };
 
 export async function renderPages(
-  pluginContext: PluginContext,
   routes: string[],
   files: CheckFilesExistReturn,
-  options: RenderPagesOptions,
+  options: RenderPagesOptions
 ) {
-  const root = pluginContext.environment.config.root;
-  const outDir = pluginContext.environment.config.build.outDir;
   const failedRoutes = new Map<string, Error>();
   const completedRoutes = new Set<string>();
-  const writePromises = new Map<string, Promise<void>>();
   const clientCss = options.clientCss ?? [];
+  const partialPageData = new Map<string, Partial<PageData>>();
+  
+  const mergeAndSendPageData = async (route: string, resolve: () => void) => {
+    const partial = partialPageData.get(route);
+    if (!partial?.html || !partial.rsc) {
+      return; // Wait for both parts
+    }
+
+    const pageData: PageData = {
+      route,
+      html: partial.html,
+      rsc: partial.rsc,
+    };
+
+    // Write RSC file
+    console.log('route', route)
+    // Write HTML file
+    let routeHtmlPath = route === '/' ? options.htmlOutputPath : options.htmlOutputPath.replace('index.html', join(route, 'index.html'));
+    if(routeHtmlPath.startsWith('/')) {
+      routeHtmlPath = routeHtmlPath.slice(1);
+    }
+    const routeRscPath = routeHtmlPath.slice(0, -5) + '.rsc';
+    await mkdir(dirname(routeHtmlPath), { recursive: true });
+    await writeFile(routeRscPath, partial.rsc.content);    
+    await writeFile(routeHtmlPath, partial.html.raw);
+
+    await options.onPage?.(pageData);
+    completedRoutes.add(route);
+    if (completedRoutes.size === routes.length) {
+      resolve();
+    }
+  };
+
   try {
     // Set up worker message handling
     const allRoutesComplete = new Promise<void>((resolve, reject) => {
-      options.worker.on("message", (msg: HtmlWorkerResponse) => {
+      options.worker.on("message", async (msg: HtmlWorkerResponse) => {
         switch (msg.type) {
           case "ALL_READY": {
-            const { id, html, outputPath } = msg;
-            mkdirSync(dirname(outputPath), { recursive: true });
-            
-            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);
-              });
+            const { id, html } = msg;
+            try {
+              const partial = partialPageData.get(id) || { route: id };
+
+              partial.html = {
+                raw: html,
+                transformed: "", // Will be set by main thread transform
+                assets: [],
+              };
+              partialPageData.set(id, partial);
+              await mergeAndSendPageData(id, resolve);
+            } catch (error) {
+              failedRoutes.set(id, error as Error);
+              reject(error);
+            }
             break;
           }
           case "ERROR": {
-            console.error('Worker error for route:', msg.id, msg.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;
@@ -92,124 +123,130 @@ export async function renderPages(
       });
     });
 
-    const newCssFiles = collectManifestCss(
-      options.clientManifest,
-      options.moduleBasePath,
-      'index.html',
-      (url, parentUrl)=>{
-        options?.onCssFile?.(url, parentUrl);
-        if(!clientCss.includes(url)){
-          clientCss.push(url);
-        }
-      },
-      join(root, options.pluginOptions.build.outDir, options.pluginOptions.build.client)
-    );
-
     // Process routes sequentially
     for (const route of routes) {
       const routeFiles = files.urlMap.get(route);
       if (!routeFiles) {
-        console.error('No files found for route:', route);
+        console.error("No files found for route:", route);
         failedRoutes.set(route, new Error(`No files found for ${route}`));
         continue;
       }
 
-      collectManifestCss(
-        options.serverManifest,
-        options.moduleBasePath,
-        routeFiles.page,
-        (url, parentUrl)=>{
-          options.onCssFile?.(url, parentUrl);
-          if(!clientCss.includes(url)){
-            clientCss.push(url);
-          }
+      if (options.pipableStreamOptions?.importMap?.imports) {
+        for (let [, value] of Object.entries(
+          options.pipableStreamOptions?.importMap?.imports
+        )) {
+          options.onClientJSFile?.(value, route);
         }
-      );
+      }
+
       // 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,
-        cssFiles: Array.from(newCssFiles.values()).concat(clientCss),
-        pipableStreamOptions: {
-          ...options.pipableStreamOptions,
-          importMap: {
-            imports: {
-              ...options.pipableStreamOptions?.importMap?.imports,
-            }
-          }
+      const rscResult = await createHandler({
+        url: route,
+        urlMap: files.urlMap,
+        pluginOptions: {
+          ...options.pluginOptions,
+          Html: React.Fragment, // Use Fragment for pure RSC output
+        },
+        streamOptions: {
+          loader: options.loader,
+          clientManifest: options.clientManifest,
+          serverManifest: options.serverManifest,
+          cssFiles: clientCss,
+          moduleBasePath: '',
+          moduleBaseURL: '',
+          pipableStreamOptions: {
+            ...options.pipableStreamOptions,
+            importMap: {
+              imports: {
+                ...options.pipableStreamOptions?.importMap?.imports,
+              },
+            },
+          },
         },
       });
 
       // Create handler for HTML output
-      const htmlResult = await createHandler(route, options.pluginOptions, {
-        loader: options.loader,
-        clientManifest: options.clientManifest,
-        serverManifest: options.serverManifest,
-        cssFiles: clientCss,
-        pipableStreamOptions: {
-          ...options.pipableStreamOptions,
-          importMap: {
-            imports: {
-              ...options.pipableStreamOptions?.importMap?.imports
-            }
-          }
+      const htmlResult = await createHandler({
+        url: route,
+        urlMap: files.urlMap,
+        pluginOptions: options.pluginOptions,
+        streamOptions: {
+          loader: options.loader,
+          clientManifest: options.clientManifest,
+          serverManifest: options.serverManifest,
+          cssFiles: clientCss,
+          moduleBasePath: '',
+          moduleBaseURL: '',
+          pipableStreamOptions: {
+            ...options.pipableStreamOptions,
+            importMap: {
+              imports: {
+                ...options.pipableStreamOptions?.importMap?.imports,
+              },
+            },
+          },
         },
       });
 
       if (rscResult.type !== "success" || htmlResult.type !== "success") {
-        console.error('Handler failed for route:', route);
+        if (rscResult.type !== "success") {
+          if (rscResult.type !== "skip") {
+            console.error("Handler failed for route:", route, rscResult.error);
+          }
+        }
+        if (htmlResult.type !== "success") {
+          if (htmlResult.type !== "skip") {
+            console.error("Handler failed for route:", route, htmlResult.error);
+          }
+        }
         failedRoutes.set(route, new Error(`Handler failed for ${route}`));
         continue;
       }
 
       // Process both streams
       await Promise.all([
-        // Save RSC stream to .rsc file in client directory
+        // Handle RSC stream
         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);
+                if (chunk) {
+                  chunks.push(Buffer.from(chunk));
+                  callback(null, chunk);
+                }
               } catch (error) {
                 callback(error as Error);
               }
             },
-            flush(callback) {
+            async 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);
-                  });
+                const rscContent = Buffer.concat(chunks).toString("utf-8");
+
+                // Update partial page data with raw RSC content
+                const partial = partialPageData.get(route) || { route };
+                partial.rsc = {
+                  modules: [], // Will be parsed by the client
+                  content: rscContent,
+                };
+                partialPageData.set(route, partial);
+                await mergeAndSendPageData(route, resolve);
+
+                callback();
+                resolve();
               } catch (error) {
                 callback(error as Error);
                 reject(error);
               }
-            }
+            },
           });
 
           rscResult.stream.pipe(rscTransform);
         }),
 
         // Send HTML stream to worker
-        new Promise<void>((resolve, reject) => {
+        new Promise<void>((resolve) => {
           const htmlTransform = new Transform({
             transform(chunk, _encoding, callback) {
               try {
@@ -217,9 +254,9 @@ export async function renderPages(
                   type: "RSC_CHUNK",
                   id: route,
                   chunk: chunk.toString(),
-                  moduleRootPath: join(root, options.pluginOptions.build.outDir, options.pluginOptions.build.client),
+                  moduleRootPath: options.moduleBasePath,
                   moduleBaseURL: options.moduleBaseURL,
-                  htmlOutputPath: join(options.pluginOptions.build.outDir, options.pluginOptions.build.client, route, 'index.html'),
+                  htmlOutputPath: options.htmlOutputPath,
                   pipableStreamOptions: options.pipableStreamOptions,
                 });
                 callback(null, chunk);
@@ -234,18 +271,17 @@ export async function renderPages(
               });
               callback();
               resolve();
-            }
+            },
           });
 
           htmlResult.stream.pipe(htmlTransform);
-        })
+        }),
       ]);
     }
 
     await allRoutesComplete;
-
   } catch (error) {
-    console.error('Render error:', error);
+    console.error("Render error:", error);
     throw error;
   }
 

package/plugin/worker/rsc/README.md

@@ -0,0 +1,58 @@
+# RSC Worker
+
+The RSC worker is used by the client plugin to handle React Server Components when the main thread is running without the `react-server` condition. It provides the server-condition capabilities that the client plugin needs but can't access directly.
+
+## Purpose
+
+The RSC worker serves several key functions:
+
+1. **Server Condition Access**: Enables RSC processing in a client-focused environment
+2. **Message-Based Communication**: Handles RSC streaming through a message passing interface
+
+## Implementation Details
+
+The worker comes in two variants:
+
+- `rsc-worker.development.ts`: Full implementation with detailed logging and error handling
+- `rsc-worker.production.ts`: Optimized implementation for production builds
+
+## Extending the Worker
+
+Users can create their own RSC workers for application-level use. This allows for:
+
+1. Custom RSC processing logic
+2. Application-specific message handling
+3. Specialized worker architectures
+
+Example of creating a custom RSC worker:
+
+```typescript
+import { messageHandler } from 'vite-plugin-react-server/worker/rsc/messageHandler'
+import type { RscWorkerMessage } from 'vite-plugin-react-server/worker/types'
+
+// Create your custom message handler
+const customMessageHandler = async (msg: RscWorkerMessage) => {
+  // Add your custom logic here
+  return messageHandler(msg)
+}
+
+// Initialize your worker
+if (typeof WorkerGlobalScope !== 'undefined') {
+  parentPort.on('message', customMessageHandler)
+}
+```
+
+## Future Possibilities
+
+The RSC worker architecture is designed to be extensible. Future enhancements could include:
+
+- Custom streaming strategies
+- Advanced caching mechanisms
+- Specialized RSC processing pipelines
+- Integration with other build tools
+
+## Notes
+
+- The worker must be initialized with appropriate Node conditions
+- Message handling must account for streaming data
+- Consider memory usage when processing large RSC payloads