vite-plugin-react-server 0.3.18 → 1.0.0

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

@@ -1,8 +1,95 @@
+// no offical types for node:module available yet (23.7.0)
+declare module "node:module" {
+  export interface ImportAttributes {
+    [key: string]: string | undefined;
+  }
+
+  export interface ResolveHookContext {
+    conditions: string[];
+    parentURL: string | undefined;
+    importAttributes: ImportAttributes;
+  }
+
+  export interface LoadHookContext {
+    conditions: string[];
+    format: ModuleFormat | null | undefined;
+    importAttributes: ImportAttributes;
+    shortCircuit?: boolean;
+  }
+
+  export interface ResolveResult {
+    url: string;
+    shortCircuit: boolean;
+  }
+
+  export interface LoadResult {
+    format: string;
+    source: string | SharedArrayBuffer | Uint8Array;
+    shortCircuit: boolean;
+  }
+
+  export interface HooksAPI {
+    resolve?: (
+      specifier: string,
+      context: ResolveHookContext,
+      nextResolve: (
+        specifier: string,
+        context: ResolveHookContext
+      ) => ResolveResult
+    ) => ResolveResult;
+
+    load?: (
+      url: string,
+      context: LoadHookContext,
+      nextLoad: (url: string, context: LoadHookContext) => LoadResult
+    ) => LoadResult;
+  }
+
+  export function registerHooks(hooks: HooksAPI): void;
+}
+import { join } from "node:path";
+import { pluginRoot } from "../../root.js";
 import { messageHandler } from "./messageHandler.js";
 import { parentPort } from "node:worker_threads";
+import { register } from "node:module";
+import { register as registerTsx } from "tsx/esm/api";
+import { MessageChannel } from "node:worker_threads";
 
 if (!parentPort) throw new Error("This module must be run as a worker");
-parentPort?.on("message", messageHandler);
 
+// Create channels for each loader
+const reactLoaderChannel = new MessageChannel();
+const cssLoaderChannel = new MessageChannel();
+
+// Listen for messages from loaders
+reactLoaderChannel.port2.on("message", messageHandler);
+cssLoaderChannel.port2.on("message", messageHandler);
+
+const loaderPath = "file://" + join(pluginRoot, "loader/react-loader.js");
+const cssLoaderPath = "file://" + join(pluginRoot, "loader/css-loader.js");
+
+// Register react-loader
+register(loaderPath, {
+  parentURL: pluginRoot,
+  data: { port: reactLoaderChannel.port1 },
+  transferList: [reactLoaderChannel.port1],
+});
+register(cssLoaderPath, {
+  parentURL: pluginRoot,
+  data: { port: cssLoaderChannel.port1 },
+  transferList: [cssLoaderChannel.port1],
+});
+
+// Register loaders
+registerTsx();
 // 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,
+});
+
+if (process.env["NODE_ENV"] !== "development") {
+  throw new Error("This module must be run in development mode");
+}

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

@@ -1,18 +1,16 @@
 import { messageHandler } from "./messageHandler.js";
 import { parentPort } from "node:worker_threads";
-import { Window } from 'happy-dom';
-const window = new Window({ url: 'https://localhost:8080' });
-const document = window.document;
-globalThis.window = window as any;
-globalThis.document = document as any;
 
-let ready = false;
 if (!parentPort) throw new Error("This module must be run as a worker");
 
 // Signal ready with environment
 parentPort?.on("message", messageHandler);
-parentPort?.postMessage({ 
-    type: "READY", 
-    env: process.env["NODE_ENV"],
-    pid: process.pid 
+parentPort?.postMessage({
+  type: "READY",
+  env: process.env["NODE_ENV"],
+  pid: process.pid,
 });
+
+if (process.env["NODE_ENV"] !== "production") {
+  throw new Error("This module must be run in development mode");
+}

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 {
@@ -61,7 +60,7 @@ export const messageHandler = async (message: HtmlWorkerMessage) => {
         const reactElements = await createFromNodeStream(
           rscStream,
           render.moduleRootPath,
-          'localhost'
+          render.moduleBaseURL
         );
 
         // Create a promise that resolves when HTML is complete
@@ -88,6 +87,16 @@ 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;
+                if(render.moduleBaseURL && render.moduleBaseURL !== '') {
+                  return new URL(path, render.moduleBaseURL).toString();
+                }
+                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/renderPages.ts

@@ -1,89 +1,116 @@
-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,
+  CreateHandlerOptions,
+  PageData,
+} from "../../types.js";
+import type { HtmlWorkerResponse } from "../types.js";
+import { type Manifest, type IndexHtmlTransformHook, createLogger } from "vite";
 import React from "react";
-import { collectManifestCss } from "../../collect-css-manifest.js";
-
-interface PipeableStreamOptions {
-  bootstrapModules?: string[];
-  bootstrapScripts?: string[];
-  bootstrapScriptContent?: string;
-  signal?: AbortSignal;
-  identifierPrefix?: string;
-  namespaceURI?: string;
-  nonce?: string;
-  progressiveChunkSize?: number;
-  onShellReady?: () => void;
-  onAllReady?: () => void;
-  onError?: (error: unknown) => void;
-  importMap?: {
-    imports?: Record<string, string>;
-  };
-}
+import { collectManifestClientFiles } from "../../collect-manifest-client-files.js";
 
-type RenderPagesOptions = {
-  pluginOptions: ResolvedUserOptions;
-  userConfig: ResolvedUserConfig;
+type RenderPagesOptions<T = any> = Omit<CreateHandlerOptions<T>, "url" | "route" | "getCss" | "propsPath" | "pagePath"> & {
   clientManifest: Manifest;
   serverManifest: Manifest;
   worker: Worker;
-  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;
+  server?: any;
+  bundle?: any;
+  chunk?: any;
+  originalUrl?: string;
 };
 
-export async function renderPages(
-  pluginContext: PluginContext,
+export async function renderPages<T = any>(
   routes: string[],
   files: CheckFilesExistReturn,
-  options: RenderPagesOptions,
+  options: RenderPagesOptions<T>
 ) {
-  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 moduleRootPath =
+    options.moduleBasePath !== "" &&
+    !options.moduleRootPath.endsWith(options.moduleBasePath)
+      ? join(options.moduleRootPath, options.moduleBasePath)
+      : options.moduleRootPath;
+  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 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:
+                  typeof options.transformIndexHtml === "function"
+                    ? String(await options.transformIndexHtml(id, {
+                        path: id,
+                        filename: join(id, "index.html"),
+                      }) || "")
+                    : "", // 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 +119,138 @@ 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);
         }
-      );
+      }
+      const getCss = async (id: string) => {
+        const cssFiles = collectManifestClientFiles({
+          manifest: options.serverManifest,
+          root: options.root,
+          pagePath: id,
+        }).cssFiles;
+        return cssFiles;
+      }
+      const pagePath = files.urlMap.get(route)?.page;
+      const propsPath = files.urlMap.get(route)?.props;
+      if(!pagePath){
+        throw new Error(`No page path found for ${route}`);
+      }
       // Create handler for pure RSC output
-      const rscResult = await createHandler(route, {
-        ...options.pluginOptions,
-        Html: React.Fragment // Use Fragment for pure RSC output
-      }, {
+      const rscResult = await createHandler({
+        root: options.root,
+        url: route,
+        route: route,
+        getCss: getCss,
         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,
-            }
-          }
-        },
+        cssFiles: clientCss,
+        moduleBase: options.moduleBase,
+        moduleBasePath: options.moduleBasePath,
+        moduleRootPath: moduleRootPath,
+        moduleBaseURL: options.moduleBaseURL,
+        pipableStreamOptions: options.pipableStreamOptions ?? {},
+        inlineCss: options.inlineCss,
+        Html: React.Fragment,
+        CssCollector: options.CssCollector,
+        pagePath: pagePath,
+        propsPath: propsPath,
+        pageExportName: options.pageExportName,
+        propsExportName: options.propsExportName,
+        logger: createLogger(),
       });
-
       // Create handler for HTML output
-      const htmlResult = await createHandler(route, options.pluginOptions, {
+      const htmlResult = await createHandler({
+        root: options.root,
+        url: route,
+        route: route,
+        getCss: getCss,
         loader: options.loader,
-        clientManifest: options.clientManifest,
-        serverManifest: options.serverManifest,
         cssFiles: clientCss,
-        pipableStreamOptions: {
-          ...options.pipableStreamOptions,
-          importMap: {
-            imports: {
-              ...options.pipableStreamOptions?.importMap?.imports
-            }
-          }
-        },
+        moduleBase: options.moduleBase,
+        moduleBasePath: options.moduleBasePath,
+        moduleRootPath: moduleRootPath,
+        moduleBaseURL: options.moduleBaseURL,
+        pipableStreamOptions: options.pipableStreamOptions,
+        inlineCss: options.inlineCss,
+        Html: options.Html,
+        CssCollector: options.CssCollector,
+        pagePath: pagePath,
+        propsPath: propsPath,
+        pageExportName: options.pageExportName,
+        propsExportName: options.propsExportName,
+        logger: createLogger(),
       });
 
       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 +258,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: moduleRootPath,
                   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 +275,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