vite-plugin-react-server 1.1.12 → 1.1.13

package/plugin/types.ts

@@ -1,7 +1,6 @@
 import type { Readable } from "node:stream";
-import type { MessagePort, Worker } from "node:worker_threads";
+import type { Worker } from "node:worker_threads";
 import type React from "react";
-import type { PropsWithChildren } from "react";
 import type {
   NormalizedOutputOptions,
   OutputBundle,
@@ -66,6 +65,7 @@ export type AutoDiscoveredFiles = ResolvedBuildPages & {
   clientEntry: Record<string, string>;
   inputs: Record<string, string>;
   staticManifest: Manifest;
+  serverActions: Record<string, string>;
 };
 export type FileWriterOptions = Pick<
   CreateHandlerOptions,
@@ -118,6 +118,7 @@ export type ResolvedUserConfig = Required<
           | "ssrManifest"
           | "manifest"
           | "rollupOptions"
+          | "modulePreload"
         >
       >
     > &
@@ -151,10 +152,11 @@ export interface StreamPluginOptionsClient {
 }
 
 export type ResolvedUserOptions<
-  InlineCSS extends boolean | undefined = boolean | undefined
+  T extends PagePropOpt = PagePropOpt,
+  InlineCSS extends InlineCssOpt = InlineCssOpt
 > = Required<
   Pick<
-    StreamPluginOptions,
+    StreamPluginOptions<T, InlineCSS>,
     | "moduleBase"
     | "moduleBasePath"
     | "moduleBaseURL"
@@ -171,7 +173,7 @@ export type ResolvedUserOptions<
     | "loaderPath"
     | "clientEntry"
     | "serverEntry"
-    | "moduleBaseExceptions"
+    // | "moduleBaseExceptions"
     | "pipeableStreamOptions"
     | "onMetrics"
     | "onEvent"
@@ -187,10 +189,14 @@ export type ResolvedUserOptions<
     | string
     | ((url: string) => string)
     | ((url: string) => Promise<string>);
-  build: NonNullable<Required<StreamPluginOptions<InlineCSS>["build"]>>;
-  css: NonNullable<Required<StreamPluginOptions<InlineCSS>["css"]>>;
+  build: NonNullable<Required<StreamPluginOptions<T, InlineCSS>["build"]>>;
+  css: NonNullable<Required<StreamPluginOptions<T, InlineCSS>["css"]>> & {
+    inlineCss: InlineCSS;
+  };
   autoDiscover: {
     moduleExtension: RegExp;
+    serverDirective: RegExp;
+    clientDirective: RegExp;
     modulePattern: (path: string) => boolean;
     cssPattern: (path: string) => boolean;
     jsonPattern: (path: string) => boolean;
@@ -205,6 +211,8 @@ export type ResolvedUserOptions<
     nodeOnly: (path: string) => boolean;
     dotFiles: (path: string) => boolean;
     virtualPattern: (path: string) => boolean;
+    isServerFunction: (code: string) => boolean;
+    isClientComponent: (code: string) => boolean;
   };
 };
 
@@ -231,14 +239,70 @@ export interface RenderMetrics {
   rscSizes: Map<string, number>;
 }
 
-export interface CssCollectorOptions {
-  inlineCss?: boolean;
-  purgeCss?: boolean;
+export interface CssCollectorOptions<
+  InlineCSS extends InlineCssOpt = InlineCssOpt
+> {
+  inlineCss?: InlineCSS;
   inlineThreshold?: number;
   inlinePatterns?: RegExp[];
   linkPatterns?: RegExp[];
 }
 
+export type CssContent<InlineCSS extends InlineCssOpt = InlineCssOpt> =
+  InlineCSS extends true
+    ? StyleCssProps
+    : InlineCSS extends false
+    ? LinkCssProps
+    : InlineCSS extends undefined | boolean
+    ? StyleCssProps | LinkCssProps
+    : never;
+
+/**
+ * Boxed component type for the CssCollector
+ */
+export type CssCollectorBoxedType<
+  _T extends PagePropOpt = PagePropOpt,
+  _InlineCSS extends InlineCssOpt = InlineCssOpt,
+  _As extends AsOpt = AsOpt
+> = <
+  T extends _T = _T,
+  InlineCSS extends _InlineCSS = _InlineCSS,
+  As extends _As = _As
+>(
+  props: CssCollectorProps<T, InlineCSS, As>
+) => React.ReactElement;
+
+export type CssCollectorProps<
+  T extends PagePropOpt = PagePropOpt,
+  InlineCSS extends InlineCssOpt = InlineCssOpt,
+  As extends AsOpt = AsOpt
+> = {
+  as: As;
+  cssFiles?: Map<string, CssContent<InlineCSS>>;
+  pageProps?: T;
+  Page: PageComponentType<T>;
+  id?: string;
+} & React.ComponentPropsWithoutRef<As>;
+
+export type CssCollectorComponent = (
+  props: CssCollectorProps
+) => React.ReactElement;
+
+/**
+ * Boxed component type for the Html component
+ */
+export type HtmlBoxedType<
+  _T extends PagePropOpt = PagePropOpt,
+  _InlineCSS extends InlineCssOpt = InlineCssOpt,
+  _As extends AsOpt = "div"
+> = <
+  T extends _T = _T,
+  InlineCSS extends _InlineCSS = _InlineCSS,
+  As extends _As = _As
+>(
+  props: HtmlProps<T, InlineCSS, As> & { key?: string }
+) => React.ReactNode;
+
 export type FileWriteEvent = {
   type: "file.write";
   data: {
@@ -362,7 +426,8 @@ export type PluginEvent =
 export type PluginEventType = PluginEvent["type"];
 
 export interface StreamPluginOptions<
-  InlineCSS extends boolean | undefined = boolean | undefined
+  T extends PagePropOpt = PagePropOpt,
+  InlineCSS extends InlineCssOpt = InlineCssOpt
 > {
   projectRoot?: string; // defaults to process.cwd()
   moduleBase: string; // defaults to 'src'
@@ -375,35 +440,44 @@ export interface StreamPluginOptions<
   // Auto-discovery (zero-config)
   autoDiscover?:
     | {
+      // default: /\.(m|c)?(j|t)sx?$/
         moduleExtension?: RegExp;
+        // default: /^"use server"[\s;]*\n?/m
+        serverDirective?: RegExp;
+        // default: /^"use client"[\s;]*\n?/m
+        clientDirective?: RegExp;
         // default: /\.(m|c)?(j|t)sx?$/
-        modulePattern?: string | RegExp | ((path: string) => boolean);
+        modulePattern?: RegExpOpt;
         // default: [Pp]age.tsx
-        pagePattern?: string | RegExp | ((path: string) => boolean);
+        pagePattern?: RegExpOpt;
         // default: [Pp]rops.ts
-        propsPattern?: string | RegExp | ((path: string) => boolean);
+        propsPattern?: RegExpOpt;
         // default: "use client" and .client./\.(m|c)?(j|t)sx?$/
-        clientComponents?: string | RegExp | ((path: string) => boolean);
+        clientComponents?: RegExpOpt;
         // default: "use server" and .server./\.(m|c)?(j|t)sx?$/
-        serverFunctions?: string | RegExp | ((path: string) => boolean);
+        serverFunctions?: RegExpOpt;
         // default: /\.css$/
-        cssPattern?: string | RegExp | ((path: string) => boolean);
+        cssPattern?: RegExpOpt;
         // default: /\.json$/
-        jsonPattern?: string | RegExp | ((path: string) => boolean);
+        jsonPattern?: RegExpOpt;
         // default: /\.html$/
-        htmlPattern?: string | RegExp | ((path: string) => boolean);
+        htmlPattern?: RegExpOpt;
         // default: /\.css\.js/
-        cssModulePattern?: string | RegExp | ((path: string) => boolean);
+        cssModulePattern?: RegExpOpt;
         // default: /node_modules|(_virtual)/
-        vendorPattern?: string | RegExp | ((path: string) => boolean);
+        vendorPattern?: RegExpOpt;
         // default: /\.node\.js$/
-        nodeOnly?: string | RegExp | ((path: string) => boolean);
+        nodeOnly?: RegExpOpt;
         // default: /\.node\.js$/
-        dotFiles?: string | RegExp | ((path: string) => boolean);
+        dotFiles?: RegExpOpt;
         // default: /^\/_virtual\//
-        virtualPattern?: string | RegExp | ((path: string) => boolean);
+        virtualPattern?: RegExpOpt;
         // default: /\.rsc$/
-        rscPattern?: string | RegExp | ((path: string) => boolean);
+        rscPattern?: RegExpOpt;
+        // default serverDirective regex
+        isServerFunction?: RegExpOpt;
+        // default clientDirective regex
+        isClientComponent?: RegExpOpt;
       }
     | undefined;
   // Manual configuration
@@ -419,13 +493,11 @@ export interface StreamPluginOptions<
   loaderPath?: string;
   pageExportName?: string;
   propsExportName?: string;
-  Html?: React.FC<PropsWithChildren<HtmlProps>>;
-  CssCollector?: React.FC<
-    React.PropsWithChildren<CssCollectorProps<InlineCSS>>
-  >;
+  Html?: React.FC<HtmlProps<T, InlineCSS>>;
+  CssCollector?: CssCollectorBoxedType<T, InlineCSS>;
   build?: BuildConfig;
-  css?: CssCollectorOptions;
-  moduleBaseExceptions?: string[];
+  css?: CssCollectorOptions<InlineCSS>;
+  // moduleBaseExceptions?: string[];
   pipeableStreamOptions?: ReactServerDomEsmOptions;
   onMetrics?: (metrics: RenderMetrics) => void;
   onEvent?: (event: PluginEvent) => void;
@@ -434,8 +506,11 @@ export interface StreamPluginOptions<
   verbose?: boolean;
 }
 
-export type MultiPageHandlerOptions = Omit<
-  CreateHandlerOptions,
+export type MultiPageHandlerOptions<
+  T extends PagePropOpt = PagePropOpt,
+  InlineCSS extends InlineCssOpt = InlineCssOpt
+> = Omit<
+  CreateHandlerOptions<T, InlineCSS>,
   | "pagePath"
   | "route"
   | "cssFiles"
@@ -445,11 +520,10 @@ export type MultiPageHandlerOptions = Omit<
 >;
 
 export type CreateHandlerOptions<
-  T = unknown,
-  C extends React.ComponentType<T> = React.ComponentType<T>,
-  InlineCSS extends boolean | undefined = undefined
+  T extends PagePropOpt = PagePropOpt,
+  InlineCSS extends InlineCssOpt = InlineCssOpt
 > = Pick<
-  ResolvedUserOptions<InlineCSS>,
+  ResolvedUserOptions<T, InlineCSS>,
   | "autoDiscover"
   | "css"
   | "pageExportName"
@@ -470,16 +544,16 @@ export type CreateHandlerOptions<
   pagePath: string;
   propsPath?: string;
   pageProps?: T;
-  PageComponent?: C;
+  PageComponent?: PageComponentType<T>;
   route: string;
   manifest: Manifest;
   worker?: Worker;
   server?: ViteDevServer;
   importedCss?: Set<string>;
-  cssFiles: Map<string, CssContent>;
-  globalCss: Map<string, CssContent>;
+  cssFiles: Map<string, CssContent<InlineCSS>>;
+  globalCss: Map<string, CssContent<InlineCSS>>;
   build: Pick<
-    ResolvedUserOptions["build"],
+    ResolvedUserOptions<T, InlineCSS>["build"],
     | "outDir"
     | "pages"
     | "server"
@@ -667,24 +741,28 @@ export type ResolvedBuildPages = {
   errors: Error[];
 };
 
-// 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"; id: string }
-  | { type: "SHUTDOWN_COMPLETE" }
-  | { type: "CHUNK_PROCESSED"; id: string; success: boolean }
-  | { type: "CHUNK_ERROR"; id: string; error: string }
-  | { type: "METRICS"; metrics: StreamMetrics };
-
 // 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;
+export type InlineCssOpt = undefined | boolean;
+export type PagePropOpt = Record<string, unknown> | undefined;
+export type RegExpOpt = RegExp | string | ((path: string) => boolean);
+
+export type AsOpt = Exclude<
+  keyof React.JSX.IntrinsicElements,
+  "symbol" | "object"
+>;
+export type PageComponentType<T extends PagePropOpt = PagePropOpt> =
+  React.ComponentType<T & React.PropsWithChildren<{}>>;
+
+export type HtmlProps<
+  T extends PagePropOpt = PagePropOpt,
+  InlineCSS extends InlineCssOpt = InlineCssOpt,
+  As extends AsOpt = AsOpt
+> = {
+  pageProps?: T;
+  Page: PageComponentType<T>;
   route: string;
   url: string;
   projectRoot: string;
@@ -692,10 +770,12 @@ export type HtmlProps = {
   moduleBaseURL: string;
   moduleBasePath: string;
   moduleRootPath: string;
-  cssFiles: Map<string, CssContent>;
+  cssFiles: Map<string, CssContent<InlineCSS>>;
   manifest: Manifest;
-  CssCollector: React.FC<React.PropsWithChildren<CssCollectorProps>>;
-  globalCss: Map<string, CssContent>;
+  CssCollector: CssCollectorBoxedType<T, InlineCSS, As>;
+  globalCss: Map<string, CssContent<InlineCSS>>;
+  children?: React.ReactNode;
+  as: As;
 };
 
 export interface PageAsset {
@@ -709,16 +789,17 @@ type BaseCssProps = {
   id: string;
 };
 
-type CssProps = BaseCssProps & {
+export type LinkCssProps = BaseCssProps & {
   as: "link";
   type?: never;
-  children?: InlineCssProps extends false ? never : React.ReactNode;
+  children?: never;
   id: string;
   href: string;
   rel: "stylesheet";
   precedence?: string;
 };
-type InlineCssProps = BaseCssProps & {
+
+export type StyleCssProps = BaseCssProps & {
   as: "style";
   type: "text/css";
   children?: React.ReactNode;
@@ -727,60 +808,8 @@ type InlineCssProps = BaseCssProps & {
   href?: never;
 };
 
-export type CssContent<InlineCSS extends boolean | undefined = undefined> =
-  InlineCSS extends true
-    ? InlineCssProps
-    : InlineCSS extends false
-    ? CssProps
-    : CssProps | InlineCssProps;
-
-export interface JsContent {
-  type?: string;
-  content: string;
-  key?: string;
-  path: string;
-  id?: string;
-}
-
-export type CssCollectorProps<
-  InlineCSS extends boolean | undefined = undefined
-> = {
-  as?: React.ElementType; // defaults to react fragment
-  children?: React.ReactNode; // the children containing the css content
-  /** A map containing all the css files imported by the route and their proxy values
-   * - when inlineCss is true, will contain the `content` property
-   * - when prugeCss is true, will contain the module proxy which includes a `userClasses`
-   * @example ```tsx
-   * import styles from './styles.module.css';
-   * export const Page = () => {
-   *  return <div className={styles.userClass}>Hello World</div>
-   * }
-   * ```
-   * then the module will basically contain whatever `styles` exported here. But how does it track css class usages
-   * during streaming?
-   *
-   * const tags = Array.from(importedCss?.values() ?? []).map(cssFile => {
-   *  return <link rel="stylesheet" href={cssFile.path} />
-   * })
-   * ```
-   *
-   *
-   * */
-  cssFiles?: Map<string, CssContent<InlineCSS>>;
-} & React.HTMLAttributes<HTMLElement>;
-
-export interface InlineCssCollectorProps {
-  cssFiles: Map<string, CssContent>;
-  moduleBaseURL: string;
-  moduleRootPath: string;
-  moduleBasePath: string;
-  route?: string;
-  purgeCss?: boolean;
-  children?: React.ReactNode;
-}
-
 export type CssCollectorElementsProps<
-  InlineCSS extends boolean | undefined = undefined
+  InlineCSS extends InlineCssOpt = InlineCssOpt
 > = {
   cssFiles: Map<string, CssContent<InlineCSS>>;
 };
@@ -840,27 +869,28 @@ export type RenderPagesResult =
       >;
     };
 
-export type HandlerAssets = {
-  css: CssContent[];
+export type HandlerAssets<InlineCSS extends InlineCssOpt = InlineCssOpt> = {
+  css: CssContent<InlineCSS>[];
   js: string[];
   bootstrapModules: string[];
 };
 
-export type CreateHandlerResult =
-  | {
-      type: "success";
-      controller: AbortController;
-      stream: any;
-      assets: {
-        css: CssContent[];
-        js: string[];
-        bootstrapModules: string[];
-      };
-      route: string;
-      metrics: StreamMetrics;
-    }
-  | { type: "error"; error: Error }
-  | { type: "skip" };
+export type CreateHandlerResult<InlineCSS extends InlineCssOpt = InlineCssOpt> =
+
+    | {
+        type: "success";
+        controller: AbortController;
+        stream: any;
+        assets: {
+          css: CssContent<InlineCSS>[];
+          js: string[];
+          bootstrapModules: string[];
+        };
+        route: string;
+        metrics: StreamMetrics;
+      }
+    | { type: "error"; error: Error }
+    | { type: "skip" };
 
 export type ReactStaticEvent =
   | FileWriteEvent
@@ -874,7 +904,14 @@ export type ReactStaticEvent =
 
 // Define LoaderContext interface locally
 export interface LoaderContext {
-  data?: { port?: MessagePort };
+  format?: string;
+  importAttributes?: Record<string, string>;
+  conditions?: string[];
+  env?: {
+    targetEnvironment?: "client" | "server" | "browser";
+  };
+  url: string;
+  userOptions?: any; // Add userOptions to the context
 }
 // Add type declaration for import.meta.cssModules
 declare global {

package/plugin/utils/createCallServer.ts

@@ -1,17 +1,23 @@
 import {
   createFromFetch,
   encodeReply,
-  // @ts-ignore
 } from "react-server-dom-esm/client.browser";
 
-type ServerResponse = { returnValue: unknown };
+interface ServerActionResponse {
+  returnValue: unknown;
+  type: 'server-action-response';
+  error?: string;
+}
 
 export const createCallServer = (moduleBaseURL: string) => {
-  const callServer = async (_id: string, args: unknown[]): Promise<unknown> => {
+  const callServer = async (id: string, args: unknown[]): Promise<unknown> => {
     const response = await createFromFetch(
       fetch(moduleBaseURL, {
         method: "POST",
-        body: await encodeReply(args),
+        body: await encodeReply({
+          id,
+          args
+        }),
         headers: {
           Accept: "application/json",
           "Content-Type": "application/json",
@@ -19,8 +25,17 @@ export const createCallServer = (moduleBaseURL: string) => {
       }),
       { callServer, moduleBaseURL }
     );
-    const returnValue = (response as ServerResponse).returnValue;
-    return returnValue;
+    
+    // Check if this is a server action response
+    if (response && typeof response === 'object' && 'returnValue' in response) {
+      const serverResponse = response as ServerActionResponse;
+      if (serverResponse.error) {
+        throw new Error(serverResponse.error);
+      }
+      return serverResponse.returnValue;
+    }
+    
+    return response;
   };
   return callServer;
 };

package/plugin/utils/index.ts

@@ -1,4 +1,5 @@
 export * from "./createReactFetcher.js";
 export * from "./callServer.js";
 export * from "./urls.js";
-export * from "./env.js";
+export * from "./env.js";
+export * from "./createCallServer.js";

package/plugin/vendor/vendor.client.ts

@@ -7,6 +7,7 @@ const nodeRequire = createRequire(join(projectRoot, "package.json"));
 
 // Import ReactDOM from the project's node_modules
 const ReactDOMServer = nodeRequire("react-dom/server");
+const ReactDOMClient = nodeRequire("react-server-dom-esm/client");
 const React = nodeRequire("react");
 
-export { ReactDOMServer, React };
+export { ReactDOMServer, React, ReactDOMClient };

package/plugin/vendor/vendor.server.ts

@@ -6,7 +6,7 @@ const projectRoot = workerData?.projectRoot || process.env["npm_config_local_pre
 const nodeRequire = createRequire(join(projectRoot, "package.json"));
 
 // Import ReactDOM from the project's node_modules
-const ReactDOMServer = nodeRequire("react-server-dom-esm/server");
+const ReactDOMServer = nodeRequire("react-server-dom-esm/server.node");
 const React = nodeRequire("react");
 
 export { ReactDOMServer, React };

package/plugin/worker/createWorker.ts

@@ -12,6 +12,7 @@ import { DEFAULT_CONFIG } from "../config/defaults.js";
 import { createLogger, type Logger } from "vite";
 import type { HtmlWorkerOutputMessage } from "./types.js";
 import type { RscWorkerOutputMessage } from "./types.js";
+import { toError } from "../error/toError.js";
 
 export type CreateWorkerOptions = {
   projectRoot?: string;
@@ -73,14 +74,11 @@ export async function createWorker(
     logger = createLogger(),
     verbose = false,
   } = options;
+  const id = reverseCondition === "react-server" ? "worker/rsc" : "worker/html";
   let workerPathWithDefault =
     typeof workerPath === "string" ? workerPath : undefined;
   if (!workerPathWithDefault) {
-    if (currentCondition === "react-server") {
-      workerPathWithDefault = join(pluginRoot, `worker/rsc`);
-    } else {
-      workerPathWithDefault = join(pluginRoot, `worker/html`);
-    }
+    workerPathWithDefault = join(pluginRoot, id);
   }
   if (!workerPathWithDefault.startsWith("/")) {
     workerPathWithDefault = join("./", workerPathWithDefault);
@@ -89,6 +87,7 @@ export async function createWorker(
   const workerData = {
     ...options.workerData,
     reactVersion: React.version,
+    id: id,
   };
 
   try {
@@ -147,24 +146,25 @@ export async function createWorker(
               workerPath: workerPathWithDefault,
             } satisfies CreateWorkerSkip);
           } else {
-            const error = new Error(`Worker exited with code ${code}`);
-            logger.error(`worker exited with code ${code}`, { error });
-            reject({
-              type: "error",
-              error,
+            const error = `[create:${id}] exited with code ${code}`;
+            resolve({
+              type: "skip",
+              reason: error,
               workerPath: workerPathWithDefault,
-            } satisfies CreateWorkerError);
+            } satisfies CreateWorkerSkip);
           }
         };
-        const messageHandler = (msg: HtmlWorkerOutputMessage | RscWorkerOutputMessage) => {
-          if (verbose) logger.info(`Initial worker message ${msg.type}`);
+        const messageHandler = (
+          msg: HtmlWorkerOutputMessage | RscWorkerOutputMessage
+        ) => {
+          if (verbose) logger.info(`[create:${id}] Initial worker message ${msg.type}`);
           if (msg.type === "READY") {
-            if (verbose) logger.info(`Worker running for ${msg.env}`);
+            if (verbose) logger.info(`[create:${id}] Worker running for ${msg.env}`);
             clearTimeout(timeout);
             worker.removeListener("message", messageHandler);
             worker.removeListener("exit", exitHandler);
             if (msg.env !== nodeEnv) {
-              if (verbose) logger.info(`Worker environment mismatch.`);
+              if (verbose) logger.info(`[create:${id}] Worker environment mismatch.`);
               reject({
                 type: "error",
                 error: new Error(
@@ -179,19 +179,16 @@ export async function createWorker(
               workerPath: workerPathWithDefault,
             } satisfies CreateWorkerSuccess);
           }
-        }
+        };
         worker.once("message", messageHandler);
         worker.once("exit", exitHandler);
       }
     );
   } catch (error) {
-    if (error instanceof Error) {
-      return {
-        type: "error",
-        workerPath: workerPathWithDefault,
-        error: error,
-      } satisfies CreateWorkerError;
-    }
-    return error as CreateWorkerError;
+    return {
+      type: "error",
+      error: toError(error),
+      workerPath: workerPathWithDefault,
+    };
   }
 }