vite-plugin-react-server 0.3.11 → 0.3.12

package/plugin/worker/html/renderPages.ts

@@ -1,23 +1,20 @@
-import { appendFile, mkdirSync } from "node:fs";
+import { mkdirSync } from "node:fs";
 import { mkdir, writeFile } from "node:fs/promises";
-import { dirname, join, resolve, resolve as resolvePath } from "node:path";
+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, ResolvedUserOptions } from "../../types.js";
+import type { CheckFilesExistReturn, 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";
+import React from "react";
+import { collectManifestCss } from "../../collect-css-manifest.js";
 
 interface PipeableStreamOptions {
   bootstrapModules?: string[];
@@ -53,217 +50,187 @@ type RenderPagesOptions = {
 export async function renderPages(
   pluginContext: PluginContext,
   routes: string[],
+  files: CheckFilesExistReturn,
   options: RenderPagesOptions
 ) {
-  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 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 root = pluginContext.environment.config.root;
+  const outDir = pluginContext.environment.config.build.outDir;
   const failedRoutes = new Map<string, Error>();
-  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;
-
-    // Find matching client entry by source path
-    const clientEntry = Object.entries(options.clientManifest).find(
-      ([_, entry]) => entry.src === serverEntry.src
-    );
-
-    if (!clientEntry) continue;
-
-    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) => {
+    // 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 });
             
-            const writePromise = writeFile(outputPath, html)
+            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) => {
+                console.error('Write error for route:', id, error);
                 failedRoutes.set(id, error as Error);
+                reject(error);
               });
-
-            writePromises.set(id, writePromise);
             break;
           }
           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;
           }
         }
       });
     });
 
-    const renderPromises = routes.map(async (route) => {
-      try {
-        const result = await createHandler(route, options.pluginOptions, {
-          loader: options.loader,
-          clientManifest: options.clientManifest,
-          serverManifest: options.serverManifest,
-          pipableStreamOptions: options.pipableStreamOptions,
-        });
-
-        if (result.type !== "success") {
-          failedRoutes.set(route, new Error(`Handler failed for ${route}`));
-          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 === "/"
-          ? join(htmlRoot, "index.html")
-          : join(htmlRoot, route, "index.html");
+      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()))
+            }
+          }
+        },
+      });
 
-        transforms.set(route, new Transform({
-          transform(chunk, _encoding, callback) {
-            options.worker.postMessage({
-              type: "RSC_CHUNK",
-              id: route,
-              chunk: chunk,
-              moduleRootPath: moduleRootPath,
-              moduleBaseURL: moduleBaseURL,
-              htmlOutputPath: htmlOutputPath,
-              outDir: options.userConfig.build.outDir,
-              pipableStreamOptions: pipableStreamOptions,
-              clientManifest: options.clientManifest,
-              serverManifest: options.serverManifest,
-            } satisfies WorkerRscChunkMessage);
+      // 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()))
+            }
+          }
+        },
+      });
 
-            const rscOutputPath = route === "/"
-              ? join(rscRoot, "index.rsc")
-              : join(rscRoot, route, "index.rsc");
+      if (rscResult.type !== "success" || htmlResult.type !== "success") {
+        console.error('Handler failed for route:', route);
+        failedRoutes.set(route, new Error(`Handler failed for ${route}`));
+        continue;
+      }
 
-            mkdirSync(dirname(rscOutputPath), { recursive: true });
-            
-            // Track RSC file write
-            const writePromise = writeFile(rscOutputPath, chunk)
-              .catch((error) => {
-                failedRoutes.set(route, error as Error);
+      // 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();
+            }
+          });
+
+          htmlResult.stream.pipe(htmlTransform);
+        })
+      ]);
+    }
 
-            writePromises.set(`${route}:rsc`, writePromise);
-            callback(null, chunk);
-          },
-          flush(callback) {
-            options.worker.postMessage({
-              type: "RSC_END",
-              id: route,
-            });
-            callback();
-          },
-        }));
-
-        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 everything to complete
-    await Promise.all(renderPromises);
-    await Promise.all(writePromises.values());
     await allRoutesComplete;
 
-  } finally {
-    for (const transform of transforms.values()) {
-      transform.destroy();
-    }
-    transforms.clear();
-    writePromises.clear();
-
-    options.worker.postMessage({
-      type: "SHUTDOWN",
-    });
+  } catch (error) {
+    console.error('Render error:', error);
+    throw error;
   }
 
-  return {
-    failedRoutes,
-    completedRoutes,
-  };
+  return { failedRoutes, completedRoutes };
 }

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;

package/plugin/worker/rsc/messageHandler.tsx

@@ -0,0 +1,143 @@
+import { createWriteStream } from "node:fs";
+import { mkdir } from "node:fs/promises";
+import { dirname, join } from "node:path";
+import { parentPort } from "node:worker_threads";
+import { PassThrough } from "node:stream";
+import {
+  renderToPipeableStream,
+  // @ts-ignore
+} from "react-server-dom-esm/server.node";
+import type {
+  RscChunkMessage,
+  RscEndMessage,
+  RscWorkerMessage,
+} from "../types.js";
+import { createLogger } from "../../utils/logger.js";
+import {
+  cssFiles,
+  clientFiles,
+  serverActionFiles,
+  addCssFile,
+  clearCssFiles,
+} from "./state.js";
+import type { WriteStream } from "node:fs";
+import React from "react";
+
+const log = createLogger("rsc-worker");
+
+// CSS collector component
+function CssCollector({
+  children,
+  cssFiles,
+}: {
+  children: React.ReactNode;
+  cssFiles: Map<string, string>;
+}) {
+  return (
+    <>
+      {Array.from(cssFiles.entries()).map(([id, css]) => {
+        return (
+          <style key={id} data-source={id}>
+            {css}
+          </style>
+        );
+      })}
+      {children}
+    </>
+  );
+}
+
+export async function messageHandler(message: RscWorkerMessage) {
+
+  if (message.type === "RSC_RENDER") {
+    const {
+      id,
+      pageImport,
+      propsImport,
+      pageExportName,
+      propsExportName,
+      url,
+      outDir,
+      projectRoot,
+      moduleBaseURL,
+      moduleBasePath,
+      pipableStreamOptions,
+    } = message;
+
+    try {
+      // Load modules which will trigger CSS loading
+      const [Component, propsModule] = await Promise.all([
+        import(join(projectRoot, pageImport)),
+        import(join(projectRoot, propsImport)),
+      ]);
+
+      const propsAtExport = propsModule[propsExportName];
+      const props = await Promise.resolve(
+        typeof propsAtExport === "function" ? propsAtExport(url) : propsAtExport
+      );
+
+      const PageComponent = Component[pageExportName];
+      // Now render with collected CSS
+      const stream = renderToPipeableStream(
+        <CssCollector cssFiles={cssFiles}>
+          <PageComponent {...props} />
+        </CssCollector>,
+        moduleBaseURL,
+        {
+          onError: (error: Error) => {
+            log.error(`Stream error at ${id}:`, error);
+            parentPort?.postMessage({
+              type: "ERROR",
+              id,
+              error: error instanceof Error ? error.message : String(error),
+            });
+          },
+          onPostpone: log?.info ?? console.info,
+          environmentName: "Server",
+          importMap: {
+            imports: {
+              ...pipableStreamOptions?.importMap?.imports,
+              "/": moduleBasePath,
+            },
+          },
+          ...pipableStreamOptions,
+        }
+      );
+
+      // Listen for data and end events
+      const passThrough = new PassThrough();
+
+      stream.pipe(passThrough);
+
+      passThrough.on("data", (chunk) => {
+        // Send to parent
+        parentPort?.postMessage({
+          type: "RSC_CHUNK",
+          id,
+          chunk: chunk.toString(),
+          moduleRootPath: moduleBasePath,
+          moduleBaseURL,
+          outDir,
+          rscOutputPath: `${outDir}/${id}.rsc`,
+          cssFiles: Array.from(cssFiles.entries()),
+        } satisfies RscChunkMessage);
+      });
+
+      passThrough.on("end", () => {
+        parentPort?.postMessage({
+          type: "RSC_END",
+          id,
+        } satisfies RscEndMessage);
+      });
+    } catch (error) {
+      console.trace(error);
+      parentPort?.postMessage({
+        type: "ERROR",
+        id,
+        error: error instanceof Error ? error.message : String(error),
+      });
+    }
+  } else if (message.type === "CSS_FILE") {
+    addCssFile(message.id, message.cssFile);
+  }
+}

package/plugin/worker/rsc/plugin.ts

@@ -1,6 +1,6 @@
 import type { Plugin } from "vite";
 import { resolve } from "path";
-import type { ModuleFormat } from 'rollup';
+import type { ModuleFormat } from "rollup";
 import type { StreamPluginOptions } from "../../types.js";
 import { DEFAULT_CONFIG } from "../../config/defaults.js";
 import { getPluginRoot } from "../../config/getPaths.js";
@@ -11,72 +11,73 @@ export function reactRscWorkerPlugin(options: StreamPluginOptions): Plugin {
     config(config) {
       const root = config.root ?? process.cwd();
       const pluginRoot = getPluginRoot();
-      const rscWorkerPath = typeof options.rscWorkerPath === 'string' 
-        ? resolve(root, options.rscWorkerPath) 
-        : resolve(pluginRoot, DEFAULT_CONFIG.RSC_WORKER_PATH);
-      
-      const format: ModuleFormat = 'esm';
+      const rscWorkerPath =
+        typeof options.rscWorkerPath === "string"
+          ? resolve(root, options.rscWorkerPath)
+          : resolve(pluginRoot, DEFAULT_CONFIG.RSC_WORKER_PATH);
+
+      const format: ModuleFormat = "esm";
 
       // Single worker output for server build
       const workerConfig = {
         input: {
-          'rsc-worker': rscWorkerPath,
+          "rsc-worker": rscWorkerPath,
         },
         output: {
           format,
-          dir: options.build?.server ?? 'dist/server', // Output to server directory
-          entryFileNames: '[name].js',
+          dir: options.build?.server ?? "dist/server", // Output to server directory
+          entryFileNames: "[name].js",
           preserveModules: true,
           manualChunks: {
-            'rsc-worker': [rscWorkerPath]
+            "rsc-worker": [rscWorkerPath],
           },
           resolve: {
-            conditions: ['react-server'],
-          }
-        }
+            conditions: ["react-server"],
+          },
+        },
       };
 
       return {
         build: {
           rollupOptions: {
-            preserveEntrySignatures: 'strict',
+            preserveEntrySignatures: "strict",
             input: {
               ...workerConfig.input,
-              ...(typeof config.build?.rollupOptions?.input === 'object' 
-                ? config.build?.rollupOptions?.input 
+              ...(typeof config.build?.rollupOptions?.input === "object"
+                ? config.build?.rollupOptions?.input
                 : {}),
             },
             external: [
-              'vite',
-              'rollup',
-              'react',
-              'react-dom',
-              'react-dom/server',
-              'react-server-dom-esm',
-              'react-server-dom-esm/client.node',
-              'react-server-dom-esm/server.node',
-              'react-server-dom-esm/node-loader',
-              'source-map',
-              'acorn-loose',
-              'webpack-sources',
-              'stream',
-              'util',
-              'crypto',
-              'async_hooks',
-              'fs',
-              'path',
-              'worker_threads',
+              "vite",
+              "rollup",
+              "react",
+              "react-dom",
+              "react-dom/server",
+              "react-server-dom-esm",
+              "react-server-dom-esm/client.node",
+              "react-server-dom-esm/server.node",
+              "react-server-dom-esm/node-loader",
+              "source-map",
+              "acorn-loose",
+              "webpack-sources",
+              "stream",
+              "util",
+              "crypto",
+              "async_hooks",
+              "fs",
+              "path",
+              "worker_threads",
               // if we use node: paths in our code, it should always be catched by below rule.
               /^node:.*/,
             ],
             output: {
               ...workerConfig.output,
-            }
+            },
           },
           manifest: true, // Ensure manifest is generated
           minify: false,
           sourcemap: true,
-        }
+        },
       };
     },
   };