vite-plugin-react-server 0.3.9 → 0.3.11

package/plugin/worker/html/renderPages.ts

@@ -1,10 +1,23 @@
-import { mkdirSync } from "node:fs";
+import { appendFile, mkdirSync } from "node:fs";
 import { mkdir, writeFile } from "node:fs/promises";
-import { dirname, join, resolve as resolvePath } from "node:path";
+import { dirname, join, resolve, 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 { ResolvedUserConfig, ResolvedUserOptions } from "../../types.js";
+import type {
+  HtmlWorkerMessage,
+  HtmlWorkerResponse,
+  WorkerRscChunkMessage,
+} from "../types.js";
+import type { Manifest } from "vite";
+import type {
+  EmittedFile,
+  EmittedPrebuiltChunk,
+  PluginContext,
+  ResolvedId,
+} from "rollup";
+import { createInputNormalizer } from "../../helpers/inputNormalizer.js";
 
 interface PipeableStreamOptions {
   bootstrapModules?: string[];
@@ -24,18 +37,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,96 +51,153 @@ type RenderPagesOptions = {
 };
 
 export async function renderPages(
+  pluginContext: PluginContext,
   routes: string[],
   options: RenderPagesOptions
 ) {
-  console.log("[renderPages] Starting render for routes:", routes);
+  const root =
+    pluginContext.environment.config.root ??
+    options.userConfig.root ??
+    options.pluginOptions.projectRoot ??
+    process.cwd();
+  const outDir =
+    pluginContext.environment.config.build.outDir ??
+    options.userConfig.build.outDir ??
+    options.pluginOptions.build.outDir;
+  const assetsDir =
+    pluginContext.environment.config.build.assetsDir ??
+    options.userConfig.build.assetsDir ??
+    options.pluginOptions.build.assetsDir;
 
-  const destinationRoot = resolvePath(options.userConfig.root, options.userConfig.build.outDir);
+  const isServer = outDir.endsWith(options.pluginOptions.build.server);
+  const isClient = outDir.endsWith(options.pluginOptions.build.client);
+  if (!isServer && !isClient) {
+    throw new Error("Invalid outDir directory");
+  }
+
+  const destinationRoot = isServer
+    ? resolvePath(
+        root,
+        options.pluginOptions.build.outDir,
+        options.pluginOptions.build.client
+      )
+    : join(root, 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 moduleRootPath =
+    join(
+      root,
+      options.pluginOptions.build.outDir,
+      options.pluginOptions.build.client
+    ) + "/";
+  const moduleBaseURL = `file://${root}`;
+  const htmlRoot = destinationRoot;
+  const rscRoot = destinationRoot;
   const streamStarted = new Set<string>();
   const completedRoutes = new Set<string>();
   const htmlContent = new Map<string, string>();
+  const transforms = new Map<string, Transform>();
   const writePromises = new Map<string, Promise<void>>();
+  const pipableStreamOptions = options.pipableStreamOptions ?? {};
+  pipableStreamOptions.importMap = pipableStreamOptions?.importMap ?? {};
+  pipableStreamOptions.importMap.imports =
+    pipableStreamOptions.importMap.imports ?? {};
+  if (!("react" in pipableStreamOptions.importMap.imports)) {
+    pipableStreamOptions.importMap.imports["react"] = 'https://esm.sh/react@experimental?pin=v124&dev'
+  }
+  if (!("react-dom" in pipableStreamOptions.importMap.imports)) {
+    pipableStreamOptions.importMap.imports["react-dom"] = 'https://esm.sh/react-dom@experimental?pin=v124&dev'
+  }
+  if (!("react-dom/" in pipableStreamOptions.importMap.imports)) {
+    pipableStreamOptions.importMap.imports["react-dom/"] = 'https://esm.sh/react-dom@experimental&pin=v124&dev/'
+  }
+  if (!("react-server-dom-esm/client.browser" in pipableStreamOptions.importMap.imports)) {
+    pipableStreamOptions.importMap.imports["react-server-dom-esm/client.browser"] = `/node_modules/react-server-dom-esm/esm/react-server-dom-esm-client.browser.${options.userConfig.mode}.js`
+  }
+  // Find matching client components by their source paths
+  for (const [key, serverEntry] of Object.entries(options.serverManifest)) {
+    // Skip non-client components
+    if (!key.includes(".client.")) continue;
 
-  // Create a promise that resolves when all routes are complete
-  const allRoutesComplete = new Promise<void>((resolve, reject) => {
+    // Find matching client entry by source path
+    const clientEntry = Object.entries(options.clientManifest).find(
+      ([_, entry]) => entry.src === serverEntry.src
+    );
 
+    if (!clientEntry) continue;
 
-    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);
+    const [_, entry] = clientEntry;
+    const serverPath = serverEntry.src as string;
+    const clientPath = entry.file
+
+    pipableStreamOptions.importMap.imports[serverPath] = '/' + clientPath;
+
+  }
+  for(const [key, value] of Object.entries(options.clientManifest)) {
+    if(value.isEntry) {
+      if(Array.isArray(pipableStreamOptions.bootstrapModules)) {
+        pipableStreamOptions.bootstrapModules.push('/'+value.file);
+      } else {
+        pipableStreamOptions.bootstrapModules = ['/'+value.file];
+      }
+    }
+  }
+
+  // Remove the initial empty file writes - we'll create directories as needed
+  await mkdir(htmlRoot, { recursive: true });
+  await mkdir(rscRoot, { recursive: true });
+
+  try {
+    const allRoutesComplete = new Promise<void>((resolve) => {
+      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);
+            const writePromise = writeFile(outputPath, html)
+              .then(() => {
+                completedRoutes.add(id);
+                writePromises.delete(id);
+                
+                // Only resolve when all routes are complete
+                if (completedRoutes.size === routes.length) {
+                  resolve();
+                }
+              })
+              .catch((error) => {
+                failedRoutes.set(id, error as Error);
+              });
+
+            writePromises.set(id, writePromise);
+            break;
           }
-          break;
-        }
-        case "ERROR": {
-          console.error("[renderPages] Worker error:", msg.error);
-          if (msg.id) {
+          case "ERROR": {
             failedRoutes.set(msg.id, 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,
+          clientManifest: options.clientManifest,
+          serverManifest: options.serverManifest,
+          pipableStreamOptions: options.pipableStreamOptions,
         });
 
         if (result.type !== "success") {
-          console.log("[renderPages] Handler failed:", result);
+          failedRoutes.set(route, new Error(`Handler failed for ${route}`));
           return;
         }
 
-        const htmlOutputPath = route === '/' 
-          ? resolvePath(htmlRoot, 'index.html')
-          : resolvePath(htmlRoot, route, 'index.html');
+        const htmlOutputPath = route === "/"
+          ? join(htmlRoot, "index.html")
+          : join(htmlRoot, route, "index.html");
 
-        const transform = new Transform({
+        transforms.set(route, new Transform({
           transform(chunk, _encoding, callback) {
             options.worker.postMessage({
               type: "RSC_CHUNK",
@@ -143,10 +205,26 @@ export async function renderPages(
               chunk: chunk,
               moduleRootPath: moduleRootPath,
               moduleBaseURL: moduleBaseURL,
-              htmlOutputPath,
+              htmlOutputPath: htmlOutputPath,
               outDir: options.userConfig.build.outDir,
-              pipableStreamOptions: options.pipableStreamOptions ?? {},
-            });
+              pipableStreamOptions: pipableStreamOptions,
+              clientManifest: options.clientManifest,
+              serverManifest: options.serverManifest,
+            } satisfies WorkerRscChunkMessage);
+
+            const rscOutputPath = route === "/"
+              ? join(rscRoot, "index.rsc")
+              : join(rscRoot, route, "index.rsc");
+
+            mkdirSync(dirname(rscOutputPath), { recursive: true });
+            
+            // Track RSC file write
+            const writePromise = writeFile(rscOutputPath, chunk)
+              .catch((error) => {
+                failedRoutes.set(route, error as Error);
+              });
+
+            writePromises.set(`${route}:rsc`, writePromise);
             callback(null, chunk);
           },
           flush(callback) {
@@ -155,28 +233,37 @@ export async function renderPages(
               id: route,
             });
             callback();
-          }
-        });
-          
-        result.stream.pipe(transform);
+          },
+        }));
 
+        result.stream.pipe(transforms.get(route) as Transform);
+        await new Promise<void>((resolve) => {
+          transforms.get(route)?.on("finish", resolve);
+        });
       } catch (error) {
         failedRoutes.set(route, error as Error);
       }
     });
 
-    // Wait for both the render promises and all routes to complete
-    await Promise.all([
-      Promise.all(renderPromises),
-      allRoutesComplete
-    ]);
+    // Wait for everything to complete
+    await Promise.all(renderPromises);
+    await Promise.all(writePromises.values());
+    await allRoutesComplete;
 
   } finally {
-    await options.worker.terminate();
+    for (const transform of transforms.values()) {
+      transform.destroy();
+    }
+    transforms.clear();
+    writePromises.clear();
+
+    options.worker.postMessage({
+      type: "SHUTDOWN",
+    });
   }
 
   return {
     failedRoutes,
-    completedRoutes
+    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/types.ts

@@ -1,4 +1,6 @@
-interface PipeableStreamOptions {
+import type { Manifest } from "vite";
+
+export interface PipeableStreamOptions {
   bootstrapModules?: string[];
   bootstrapScripts?: string[];
   bootstrapScriptContent?: string;
@@ -47,6 +49,8 @@ export interface WorkerRscChunkMessage {
   outDir: string;
   htmlOutputPath: string;
   pipableStreamOptions: PipeableStreamOptions;
+  clientManifest: Manifest; // Add client manifest
+  serverManifest: Manifest; // Add server manifest
 }
 
 export interface ShutdownMessage {
@@ -54,6 +58,18 @@ export interface ShutdownMessage {
   id: string;
 }
 
+export interface ShellReadyMessage {
+  type: "SHELL_READY";
+  id: string;
+}
+
+export interface AllReadyMessage {
+  type: "ALL_READY";
+  id: string;
+  outputPath: string;
+  html: string;
+}
+
 export interface RscRenderMessage {
   type: "RSC_RENDER";
   id: string;
@@ -71,7 +87,7 @@ export interface RscCompleteMessage {
   outputPath: string;
 }
 
-export interface RscErrorMessage {
+export interface WorkerErrorMessage {
   type: "ERROR";
   id: string;
   error: string;
@@ -109,6 +125,11 @@ export type HtmlWorkerMessage =
   | RscEndMessage
   | ShutdownMessage;
 
+export type HtmlWorkerResponse =
+  | ShellReadyMessage
+  | AllReadyMessage	
+  | WorkerErrorMessage
+  
 export type RscWorkerMessage =
   | RscRenderMessage
   | RscEndMessage
@@ -118,7 +139,7 @@ export type RscWorkerMessage =
 
 export type RscWorkerResponse = 
   | RscCompleteMessage
-  | RscErrorMessage
+  | WorkerErrorMessage
   | RscWroteFileMessage
   | ClientReferenceMessage
   | ServerReferenceMessage;