vite-plugin-react-server 0.3.9 → 0.3.11

package/plugin/types.ts

@@ -1,40 +1,57 @@
-import type { ComponentType } from 'react';
-import type { 
+import type { ComponentType } from "react";
+import type { RenderToPipeableStreamOptions } from "react-dom/server";
+import type { PreRenderedChunk } from "rollup";
+import type { PreRenderedAsset } from "rollup";
+import type {
   UserConfig,
   BuildOptions,
   InlineConfig,
   AliasOptions,
   Connect,
-} from 'vite';
+  ResolveOptions,
+} from "vite";
+import type { PipeableStreamOptions } from "./worker/types.js";
 
 // Input can be a string path, React component, tuple, or array
-export type NormalizerInput = string | ComponentType<any> | [string, string] | string[];
+export type NormalizerInput = unknown;
 
 export type InputNormalizer = (input: NormalizerInput) => [string, string];
 
-export type InputNormalizerWorker = (input: NormalizerInput) => Promise<[string, string]>;
+export type InputNormalizerWorker = (
+  input: NormalizerInput
+) => Promise<[string, string]>;
 
-export type ResolvedUserConfig = Required<Pick<UserConfig, "root" | "mode" | "build">> &
-  Omit<UserConfig, "root" | "mode" | "build"> & {
-    build: NonNullable<Required<Pick<BuildOptions, 
-      "target" | 
-      "outDir" | 
-      "assetsDir" | 
-      "ssr" | 
-      "ssrEmitAssets" | 
-      "ssrManifest" | 
-      "manifest" | 
-      "rollupOptions"
-    >>> &
-    Omit<BuildOptions, 
-      "target" | 
-      "outDir" | 
-      "assetsDir" | 
-      "ssr" | 
-      "ssrEmitAssets" | 
-      "ssrManifest" | 
-      "manifest"
-    > 
+export type ResolvedUserConfig = Required<
+  Pick<UserConfig, "root" | "mode" | "build" | "resolve">
+> &
+  Omit<UserConfig, "root" | "mode" | "build" | "resolve"> & {
+    resolve: {alias:AliasOptions} & ResolveOptions;
+  } & {
+    build: NonNullable<
+      Required<
+        Pick<
+          BuildOptions,
+          | "target"
+          | "outDir"
+          | "assetsDir"
+          | "ssr"
+          | "ssrEmitAssets"
+          | "ssrManifest"
+          | "manifest"
+          | "rollupOptions"
+        >
+      >
+    > &
+      Omit<
+        BuildOptions,
+        | "target"
+        | "outDir"
+        | "assetsDir"
+        | "ssr"
+        | "ssrEmitAssets"
+        | "ssrManifest"
+        | "manifest"
+      >;
   };
 
 // Client plugin options
@@ -65,46 +82,75 @@ export type ResolvedUserOptions = Required<
     | "propsExportName"
     | "collectCss"
     | "collectAssets"
-    | "assetsDir"
     | "htmlWorkerPath"
     | "rscWorkerPath"
     | "loaderPath"
     | "clientEntry"
     | "serverEntry"
     | "moduleBaseExceptions"
+    | "pipableStreamOptions"
+    | "moduleId"
   >
 > & {
   build: NonNullable<Required<StreamPluginOptions["build"]>>;
-  autoDiscover: NonNullable<Required<StreamPluginOptions["autoDiscover"]>>;
+  autoDiscover: {
+    modulePattern: (path: string) => boolean;
+    cssPattern: (path: string) => boolean;
+    jsonPattern: (path: string) => boolean;
+    clientComponents: (path: string) => boolean;
+    propsPattern: (path: string) => boolean;
+    pagePattern: (path: string) => boolean;
+    serverFunctions: (path: string) => boolean;
+    cssModulePattern: (path: string) => boolean;
+    vendorPattern: (path: string) => boolean;
+  };
 };
 
-export type createBuildConfigFn<C extends "react-client" | "react-server"> = (input: {
-  condition: C;
-  userOptions: ResolvedUserOptions;
-  userConfig: ResolvedUserConfig;
-  mode: "production" | "development" | "test";
-  inputNormalizer: C extends "react-server" ? InputNormalizerWorker : InputNormalizerWorker;
-}) => C extends "react-server" ? Promise<InlineConfig> : Promise<InlineConfig>;
+export type createBuildConfigFn<C extends "react-client" | "react-server"> =
+  (input: {
+    condition: C;
+    userOptions: ResolvedUserOptions;
+    userConfig: ResolvedUserConfig;
+    mode: "production" | "development" | "test";
+    inputNormalizer: C extends "react-server"
+      ? InputNormalizerWorker
+      : InputNormalizerWorker;
+  }) => C extends "react-server"
+    ? Promise<InlineConfig>
+    : Promise<InlineConfig>;
 
 export interface StreamPluginOptions {
   projectRoot?: string;
-  assetsDir?: string;
   moduleBase: string;
   moduleBasePath?: string;
   moduleBaseURL?: string;
   clientEntry?: string;
   serverEntry?: string;
   // Auto-discovery (zero-config)
-  autoDiscover?: {
-    // default: [Pp]age.tsx
-    pagePattern?: RegExp;
-    // default: [Pp]rops.ts
-    propsPattern?: RegExp;
-    // default: "use client" and .client./\.(m|c)?(j|t)sx?$/
-    clientComponents?: RegExp;
-    // default: "use server" and .server./\.(m|c)?(j|t)sx?$/
-    serverFunctions?: RegExp;
-  } | undefined;
+  autoDiscover?:
+    | {
+        // default: /\.(m|c)?(j|t)sx?$/
+        modulePattern?: string | RegExp | ((path: string) => boolean);
+        // default: [Pp]age.tsx
+        pagePattern?: string | RegExp | ((path: string) => boolean);
+        // default: [Pp]rops.ts
+        propsPattern?: string | RegExp | ((path: string) => boolean);
+        // default: "use client" and .client./\.(m|c)?(j|t)sx?$/
+        clientComponents?: string | RegExp | ((path: string) => boolean);
+        // default: "use server" and .server./\.(m|c)?(j|t)sx?$/
+        serverFunctions?: string | RegExp | ((path: string) => boolean);
+        // default: /\.css$/
+        cssPattern?: string | RegExp | ((path: string) => boolean);
+        // default: /\.json$/
+        jsonPattern?: string | RegExp | ((path: string) => boolean);
+        // default: /\.html$/
+        htmlPattern?: string | RegExp | ((path: string) => boolean);
+        // default: /\.css\.js/
+        cssModulePattern?: string | RegExp | ((path: string) => boolean);
+        // default: /node_modules|(_virtual)/
+        vendorPattern?: string | RegExp | ((path: string) => boolean);
+      }
+    | undefined;
   // Manual configuration
   Page: string | ((url: string) => string);
   props?: undefined | string | ((url: string) => string);
@@ -125,17 +171,19 @@ export interface StreamPluginOptions {
   collectAssets?: boolean;
   build?: BuildConfig;
   moduleBaseExceptions?: string[];
-  moduleId?: (id: string) => string;
+  pipableStreamOptions?: PipeableStreamOptions;
+  moduleId?: (id: string, ssr: boolean) => string;
 }
 
 export interface CreateHandlerOptions<T = any> {
   loader: (id: string) => Promise<T>;
-  manifest?: import("vite").Manifest;
+  clientManifest?: import("vite").Manifest;
+  serverManifest?: import("vite").Manifest;
   moduleGraph?: import("vite").ModuleGraph;
   cssFiles?: string[];
   onCssFile?: (path: string) => void;
   logger?: import("vite").Logger;
-  pipableStreamOptions?: any;
+  pipableStreamOptions?: PipeableStreamOptions;
 }
 
 export type ModuleLoader = (
@@ -172,7 +220,7 @@ export interface RscStreamOptions {
   htmlProps: any;
   route: string;
   url: string;
-  pipableStreamOptions?: any;
+  pipableStreamOptions?: PipeableStreamOptions;
   moduleBasePath: string;
 }
 
@@ -198,9 +246,17 @@ export interface BuildOutput {
 
 export interface BuildConfig {
   pages: string[] | (() => Promise<string[]> | string[]);
+  assetsDir?: string;
   client?: string; // Output directory for client files
   server?: string; // Output directory for server files
   static?: string; // Output directory for static environment - works in both
+  api?: string; // Output directory for API files
+  outDir?: string;
+  hash?: string;
+  preserveModulesRoot?: boolean;
+  entryFile?: (n: PreRenderedChunk) => string;
+  chunkFile?: (n: PreRenderedChunk) => string;
+  assetFile?: (n: PreRenderedAsset) => string;
 }
 
 export interface RscResolver {
@@ -276,30 +332,28 @@ export interface BuildTiming {
   total?: number;
 }
 
-
 export type CheckFilesExistReturn = {
-  propsMap: Map<string,string>,
-  propsSet: Set<string>
-  pageMap: Map<string,string>,
-  pageSet: Set<string>
-}
+  propsMap: Map<string, string>;
+  propsSet: Set<string>;
+  pageMap: Map<string, string>;
+  pageSet: Set<string>;
+};
 
 // Add strict type checking for worker messages
-export type WorkerMessage = 
-  | { type: 'READY' }
-  | { type: 'ERROR'; error: string | Error }
-  | { type: 'RSC_CHUNK'; id: string; chunk: Buffer }
-  | { type: 'RSC_END'; id: string }
-  | { type: 'SHUTDOWN' };
+export type WorkerMessage =
+  | { type: "READY" }
+  | { type: "ERROR"; error: string | Error }
+  | { type: "RSC_CHUNK"; id: string; chunk: Buffer }
+  | { type: "RSC_END"; id: string }
+  | { type: "SHUTDOWN" };
 
 // Add branded types for safety
 export type ModuleId = string & { readonly __brand: unique symbol };
 export type PagePath = string & { readonly __brand: unique symbol };
 
-
 export type HtmlProps = {
   pageProps: any;
   route: string;
   url: string;
   cssFiles: string[];
-}
+};

package/plugin/worker/html/messageHandler.ts

@@ -1,30 +1,49 @@
 import { PassThrough } from "node:stream";
 import { parentPort } from "node:worker_threads";
 import type { HtmlRenderState, HtmlWorkerMessage } from "../types.js";
-import ReactDOMServer from "react-dom/server";
+import * as ReactDOMServer from "react-dom/server";
 import React from "react";
 import {
   createFromNodeStream,
   // @ts-ignore
 } from "react-server-dom-esm/client.node";
+import { join } from "path";
+import { readFileSync } from "node:fs";
+import { existsSync } from "node:fs";
 
 // Track active renders and streams
 const activeRenders = new Map<string, HtmlRenderState>();
+const htmlContent = new Map<string, string>();
+const htmlPromises = new Map<string, Promise<string>>();
 
 export const messageHandler = async (message: HtmlWorkerMessage) => {
   try {
     switch (message.type) {
       case "RSC_CHUNK": {
-        const { id, chunk, ...rest } = message;
-        const render = activeRenders.get(id);
+        const { 
+          id, 
+          chunk, 
+          moduleRootPath, 
+          moduleBaseURL,
+          outDir,
+          pipableStreamOptions,
+          clientManifest = {},
+          serverManifest = {},
+          htmlOutputPath,
+        } = message;
 
+        const render = activeRenders.get(id);
         if (!render) {
           activeRenders.set(id, {
             chunks: [chunk],
             id,
             complete: false,
             rendered: false,
-            ...rest,
+            moduleRootPath,
+            moduleBaseURL,
+            outDir,
+            htmlOutputPath: htmlOutputPath ?? join(outDir, 'index.html'),
+            pipableStreamOptions: pipableStreamOptions,
           });
         } else {
           render.chunks = [...render.chunks, chunk];
@@ -39,6 +58,9 @@ export const messageHandler = async (message: HtmlWorkerMessage) => {
           throw new Error(`No render state found for ${id}`);
         }
 
+        // Mark this render as complete
+        render.complete = true;
+
         // Create a PassThrough stream to handle the chunks
         const rscStream = new PassThrough();
 
@@ -47,18 +69,18 @@ export const messageHandler = async (message: HtmlWorkerMessage) => {
           rscStream.write(chunk);
         }
         rscStream.end();
-
+          
         // Create React elements from stream
-        const reactElements = createFromNodeStream(
+        const reactElements = await createFromNodeStream(
           rscStream,
           render.moduleRootPath,
-          render.moduleBaseURL
+          'localhost'
         );
 
         // Create a promise that resolves when HTML is complete
         const htmlPromise = new Promise<string>((resolve) => {
-          let html = "";
           const collectStream = new PassThrough();
+          let html = '';
 
           collectStream.on("data", (chunk) => {
             html += chunk.toString();
@@ -66,8 +88,14 @@ export const messageHandler = async (message: HtmlWorkerMessage) => {
 
           collectStream.on("end", () => {
             resolve(html);
+            render.rendered = true;
+            parentPort?.postMessage({
+              type: "ALL_READY",
+              id,
+              html,
+              outputPath: render.htmlOutputPath,
+            });
           });
-
           // Render to pipeable stream
           const stream = ReactDOMServer.renderToPipeableStream(
             reactElements as React.ReactNode,
@@ -75,24 +103,7 @@ export const messageHandler = async (message: HtmlWorkerMessage) => {
               ...render.pipableStreamOptions,
               onShellReady() {
                 parentPort?.postMessage({ type: "SHELL_READY", id });
-              },
-              async onAllReady() {
-                const finalHtml = await htmlPromise;
-                parentPort?.postMessage({
-                  type: "HTML_READY",
-                  id,
-                  html: finalHtml,
-                  outputPath: render.htmlOutputPath,
-                });
-                parentPort?.postMessage({ type: "ALL_READY", id });
-              },
-              onError(error) {
-                parentPort?.postMessage({
-                  type: "ERROR",
-                  id,
-                  error: error instanceof Error ? error.message : String(error),
-                });
-              },
+              }
             }
           );
 
@@ -100,16 +111,20 @@ export const messageHandler = async (message: HtmlWorkerMessage) => {
           stream.pipe(collectStream);
         });
 
+        htmlPromises.set(id, htmlPromise);
+
+        // Clean up resources
+        rscStream.destroy();
+        activeRenders.delete(id);
+        htmlContent.delete(id);
+        htmlPromises.delete(id);
         break;
       }
     }
   } catch (error) {
     parentPort?.postMessage({
       type: "ERROR",
-      id:
-        message.type === "RSC_CHUNK" || message.type === "RSC_END"
-          ? message.id
-          : "",
+      id: message.type === "RSC_CHUNK" || message.type === "RSC_END" ? message.id : "",
       error: error instanceof Error ? error.message : String(error),
     });
   }

package/plugin/worker/html/plugin.ts

@@ -1,12 +1,18 @@
-import type { Plugin } from "vite";
-import { resolve } from "path";
-import type { ModuleFormat } from 'rollup';
-import type { StreamPluginOptions } from "../../types.js";
+import type { Plugin, UserConfig } from "vite";
+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 { resolveOptions } from "../../config/resolveOptions.js";
 
-
+let userOptions: ResolvedUserOptions;
 export function reactHtmlWorkerPlugin(options: StreamPluginOptions): Plugin {
+  const resolvedUserOptions = resolveOptions(options);
+  if(resolvedUserOptions.type === 'error') {
+    throw resolvedUserOptions.error
+  }
+  userOptions = resolvedUserOptions.userOptions;
   return {
     name: "vite:react-html-worker",
     config(config) {
@@ -25,18 +31,16 @@ export function reactHtmlWorkerPlugin(options: StreamPluginOptions): Plugin {
         },
         output: {
           format,
-          dir: options.build?.server ?? 'dist/server', // Output to server directory
+          dir: join(userOptions.build.outDir, userOptions.build.server),
           entryFileNames: '[name].js',
           preserveModules: true,
+          preserveModulesRoot: userOptions.build.preserveModulesRoot === true ? userOptions.moduleBase : undefined,
           // Add manifest entry
           manualChunks: {
             'html-worker': [htmlWorkerPath]
-          },
-          resolve: {
-            conditions: ['react-server'],
           }
         }
-      };
+      } satisfies RollupOptions;
 
       return {
         build: {
@@ -79,7 +83,7 @@ export function reactHtmlWorkerPlugin(options: StreamPluginOptions): Plugin {
           minify: false,
           sourcemap: true,
         }
-      };
+      } satisfies UserConfig;
     },
     // Add this to ensure entry is in manifest
     generateBundle(_, bundle) {