vite-plugin-react-server 0.3.10 → 0.3.12

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,
-        }
+        },
       };
     },
   };

package/plugin/worker/rsc/rsc-worker.development.ts

@@ -0,0 +1,107 @@
+// 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 { parentPort, MessageChannel } from "node:worker_threads";
+import { messageHandler } from "./messageHandler.js";
+import { createLogger } from "../../utils/logger.js";
+import { 
+  registerHooks,
+  register,
+  type ResolveHookContext,
+} from 'node:module';
+import { register as registerTsx } from "tsx/esm/api";
+import { join } from 'node:path';
+import { getPluginRoot } from "../../config/getPaths.js";
+
+const ports = new MessageChannel();
+// Initialize worker
+if (!parentPort) {
+  throw new Error("This module must be run as a worker");
+}
+
+// Create channels for each loader
+const reactLoaderChannel = new MessageChannel();
+const cssLoaderChannel = new MessageChannel();
+
+// Listen for messages from loaders
+reactLoaderChannel.port2.on('message', (msg) => {
+  messageHandler(msg);
+});
+
+cssLoaderChannel.port2.on('message', (msg) => {
+  messageHandler(msg);
+});
+
+const loaderPath = 'file://' + join(getPluginRoot(), 'loader/react-loader.js');
+const cssLoaderPath = 'file://' + join(getPluginRoot(), 'loader/css-loader.js');
+console.log('[worker] Full loader path:', loaderPath);
+
+// Register react-loader
+register(loaderPath, {
+  parentURL: getPluginRoot(),
+  data: { port: reactLoaderChannel.port1 },
+  transferList: [reactLoaderChannel.port1]
+});
+register(cssLoaderPath, {
+  parentURL: getPluginRoot(),
+  data: { port: cssLoaderChannel.port1 },
+  transferList: [cssLoaderChannel.port1]
+});
+
+// Register loaders
+registerTsx();
+
+// Set up message handling
+parentPort.on("message", (message) => {
+  messageHandler(message);
+});
+
+// Signal ready
+parentPort.postMessage({ type: "READY", env: "development" });
+
+
+

package/plugin/worker/rsc/rsc-worker.production.ts

@@ -0,0 +1,13 @@
+import { parentPort } from "node:worker_threads";
+import { messageHandler } from "./messageHandler.js";
+
+
+if (!parentPort) {
+  throw new Error("This module must be run as a worker");
+}
+
+// Handle incoming messages
+parentPort.on("message", messageHandler);
+
+// Signal ready
+parentPort.postMessage({ type: "READY", env: "production" });

package/plugin/worker/rsc/rsc-worker.tsx

@@ -1,128 +1,5 @@
-import { createWriteStream } from "node:fs";
-import { mkdir } from "node:fs/promises";
-import { dirname } from "node:path";
-import type { Writable } from "node:stream";
-import { parentPort } from "node:worker_threads";
-import {
-  registerClientReference,
-  registerServerReference
-  // @ts-ignore
-} from "react-server-dom-esm/server.node";
-
-import type { 
-  RscRenderState, 
-  RscWorkerMessage,
-  RscWorkerResponse 
-} from "../types.js";
-import { createRscStream } from "./createRscStream.js";
-
-if (!parentPort) {
-  throw new Error("This module must be run as a worker");
-}
-
-// Track active renders
-const activeRenders = new Map<string, RscRenderState>();
-const activeStreams = new Map<string, ReturnType<typeof createRscStream>>();
-const activeWrites = new Map<string, Writable>();
-
-async function shutdown() {
-  console.log("[RSC Worker] Shutting down forcefully");
-  for (const stream of activeStreams.values()) {
-    stream.abort();
-  }
-  for (const writeStream of activeWrites.values()) {
-    writeStream.destroy();
-  }
-  process.exit(0);
-}
-
-function sendMessage(message: RscWorkerResponse) {
-  parentPort?.postMessage(message);
-}
-
-// Handle incoming messages
-parentPort.on("message", async (message: RscWorkerMessage) => {
-  if (message.type === "SHUTDOWN") {
-    await shutdown();
-    return;
-  }
-
-  try {
-    switch (message.type) {
-      case "RSC_RENDER": {
-        const { id, pageImport, propsImport, outDir, moduleRootPath, moduleBaseURL, pipableStreamOptions } = message;
-        
-        // Skip if already rendered
-        if (activeRenders.has(id)) return;
-
-        // Create render state
-        const renderState: RscRenderState = {
-          id,
-          outDir,
-          moduleRootPath,
-          moduleBaseURL,
-          rscOutputPath: `${outDir}/${id}.rsc`,
-          componentImport: pageImport,
-          propsImport,
-          pipableStreamOptions
-        };
-
-        // Ensure output directory exists
-        await mkdir(dirname(renderState.rscOutputPath), { recursive: true });
-        const writeStream = createWriteStream(renderState.rscOutputPath);
-
-        // Create stream
-        const stream = createRscStream(renderState, writeStream, parentPort);
-
-        // Track active streams
-        activeRenders.set(id, renderState);
-        activeStreams.set(id, stream);
-        activeWrites.set(id, writeStream);
-        break;
-      }
-
-      case "RSC_END": {
-        const { id } = message;
-        activeRenders.delete(id);
-        activeStreams.delete(id);
-        activeWrites.delete(id);
-        break;
-      }
-
-      case "CLIENT_REFERENCE": {
-        const { id, location, key } = message;
-        const ref = registerClientReference(id, location, key);
-        sendMessage({
-          type: "CLIENT_REFERENCE",
-          id,
-          location,
-          key,
-          ref
-        });
-        break;
-      }
-
-      case "SERVER_REFERENCE": {
-        const { id, location, key } = message;
-        const ref = registerServerReference(id, location, key);
-        sendMessage({
-          type: "SERVER_REFERENCE",
-          id,
-          location,
-          key,
-          ref
-        });
-        break;
-      }
-    }
-  } catch (error) {
-    sendMessage({
-      type: "ERROR",
-      id: message.type === "RSC_RENDER" ? message.id : "",
-      error: error instanceof Error ? error.message : String(error)
-    });
-  }
-});
-
-// Signal ready
-parentPort.postMessage({ type: "READY" });
+await(
+  process.env["NODE_ENV"] === "production"
+    ? import("./rsc-worker.production.js")
+    : import("./rsc-worker.development.js")
+);

package/plugin/worker/rsc/state.ts

@@ -0,0 +1,37 @@
+import { createLogger } from "../../utils/logger.js";
+
+
+// Create shared CSS registry
+export const cssFiles = new Map<string, string>();
+export const clientFiles = new Set<string>();
+export const serverActionFiles = new Set<string>();
+// Helper functions
+export function clearCssFiles() {
+  cssFiles.clear();
+}
+
+export function clearClientFiles() {
+  clientFiles.clear();
+}
+
+export function clearServerActionFiles() {
+  serverActionFiles.clear();
+}
+
+export function addCssFile(id: string, cssFile: string) {
+  cssFiles.set(id, cssFile);
+} 
+
+export function addClientFile(url: string) {
+  clientFiles.add(url);
+}
+
+export function addServerActionFile(url: string) {
+  serverActionFiles.add(url);
+}
+
+export function clearAllFiles() {
+  clearCssFiles();
+  clearClientFiles();
+  clearServerActionFiles();
+}