vite-plugin-react-server 0.3.10 → 0.3.12

package/plugin/transformer/plugin.ts

@@ -1,9 +1,11 @@
-import { DEFAULT_CONFIG } from "../config/defaults.js";
+import { resolveOptions } from "../config/resolveOptions.js";
 import type { StreamPluginOptions } from "../types.js";
-import { createClientComponentTransformer } from "./transformer-client-components.js";
-import { createServerActionTransformer } from "./transformer-server-actions.js";
-
-
+import { type Plugin } from "vite";
+import { transformModuleIfNeeded } from "../loader/react-loader.js";
+import { DEFAULT_CONFIG } from "../config/defaults.js";
+import { createInputNormalizer } from "../helpers/inputNormalizer.js";
+import { tryManifest } from "../helpers/tryManifest.js";
+import { join } from "node:path";
 /**
  * Plugin for transforming React Client Components.
  *
@@ -29,113 +31,77 @@ import { createServerActionTransformer } from "./transformer-server-actions.js";
  * ```
  */
 
-export function reactTransformPlugin(
-  options?: StreamPluginOptions
-): import("vite").Plugin {
-  if (process.env["NODE_OPTIONS"]?.match(/--conditions[= ]react-server/)) {
-    console.log("react-server");
-  } else {
-    console.log(process.env["NODE_OPTIONS"]);
-    throw new Error(
-      'react-server condition not found, set NODE_OPTIONS="--conditions react-server"'
-    );
-  }
-  const projectRoot = options?.projectRoot || process.cwd();
-  // const includeClient = options?.autoDiscover?.clientComponents || DEFAULT_CONFIG.AUTO_DISCOVER.clientComponents;
-  // const includeServerFunctions = options?.autoDiscover?.serverFunctions || DEFAULT_CONFIG.AUTO_DISCOVER.serverFunctions;
-  let transformClientComponent: any;
-  let transformServerAction: any;
-  // get the file we are imported from (parent)
+export function reactTransformPlugin(options: StreamPluginOptions): Plugin {
+  const resolvedOptions = resolveOptions(options);
+  let isDev = false;
+  if (resolvedOptions.type === "error") throw resolvedOptions.error;
+  const normalizer = createInputNormalizer({
+    root: resolvedOptions.userOptions.projectRoot,
+    preserveModulesRoot: undefined,
+    removeExtension: false,
+  });
 
-  // Track client components
-  const clientComponents = new Set<string>();
+  // Get the client manifest
+  const clientManifestResult = tryManifest({
+    root: resolvedOptions.userOptions.projectRoot,
+    outDir: join(
+      resolvedOptions.userOptions.build.outDir,
+      resolvedOptions.userOptions.build.client
+    ),
+    ssrManifest: false,
+  });
 
   return {
-    name: "vite:react-stream-transformer",
-    enforce: "post",
-
-    configResolved(config) {
-      transformClientComponent = createClientComponentTransformer({
-        moduleId:
-          options?.moduleId ||
-          DEFAULT_CONFIG.MODULE_ID({
-            projectRoot: projectRoot,
-            output: {
-              dir: config.build?.outDir ?? DEFAULT_CONFIG.BUILD.server,
-            },
-            isProduction: config.isProduction,
-          }),
-      }).transform;
-      transformServerAction = createServerActionTransformer({
-        moduleId:
-          options?.moduleId ||
-          DEFAULT_CONFIG.MODULE_ID({
-            projectRoot: projectRoot,
-            output: {
-              dir: config.build?.outDir ?? DEFAULT_CONFIG.BUILD.server,
-            },
-            isProduction: config.isProduction,
-          }),
-      }).transform;
+    name: "vite:react-transform",
+    enforce: "pre", // Run before Vite's transforms
+    config(config, configEnv) {
+      isDev = configEnv.mode === "development" && configEnv.command === "serve";
     },
-
-    config(config) {
-      // Get existing inputs
-      const existingInput = config.build?.rollupOptions?.input || {};
-      const currentInputs =
-        typeof existingInput === "string"
-          ? { default: existingInput }
-          : existingInput;
-
-      // Add client components
-      const entries = Array.from(clientComponents).reduce(
-        (acc, path) => ({
-          ...acc,
-          [path.replace(DEFAULT_CONFIG.FILE_REGEX, "")]: path,
-        }),
-        {}
+    async transform(code, id, options) {
+      const ssr = options?.ssr ?? false;
+      if (!ssr) return null;
+      if (!id.match(DEFAULT_CONFIG.FILE_REGEX)) return null;
+      if (!code.match('"use client"'))
+        return null;
+      const [key, value] = normalizer(id);
+      const transformed = await transformModuleIfNeeded(
+        code,
+        id,
+        // Pass null for nextLoad since we don't need module loading in the plugin
+        null
       );
+      if (!transformed) return null;
+      if (isDev) {
+        return {
+          code: transformed,
+          map: null,
+        };
+      }
+      const moduleIdIndex = transformed.indexOf(value);
+      if (moduleIdIndex === -1) {
+        console.warn(
+          `[vite-plugin-react-server] Could not find module id in transformed code. Ignoring.`,
+          {
+            code,
+            id,
+            transformed,
+          }
+        );
+        return null
+      }
+      if (clientManifestResult.type === "error") {
+        throw clientManifestResult.error;
+      }
+      const clientPath = clientManifestResult.manifest[key]?.file;
 
+      if (!clientPath) {
+        console.warn(`[vite-plugin-react-server] Could not find client path for ${value}. Ignoring.`)
+        return null
+      }
       return {
-        build: {
-          rollupOptions: {
-            input: {
-              ...currentInputs,
-              ...entries,
-            },
-          },
-        },
+        code: transformed.replace(key, join(resolvedOptions.userOptions.build.client, clientPath)),
+        map: null,
       };
     },
-
-    buildStart() {
-      // Reset client components at start of each build
-      clientComponents.clear();
-    },
-
-    async transform(code: string, id: string, options?: { ssr?: boolean }) {
-      // Check for directives
-      const hasClientDirective = code.match(/^["']use client["'];?/);
-      if (!hasClientDirective) {
-        const hasServerDirective = code.match(/^["']use server["'];?/);
-        if (!hasServerDirective) {
-          return null;
-        }
-        return transformServerAction.bind(this)(code, id, options);
-      }
-
-      // Track client component and transform
-      clientComponents.add(id);
-      console.log("[TransformerPlugin] Found client component:", id);
-      return transformClientComponent.bind(this)(code, id, options);
-    },
-
-    // Log final client components list
-    buildEnd() {
-      console.log(
-        "[TransformerPlugin] Final client components:",
-        Array.from(clientComponents)
-      );
-    },
   };
 }

package/plugin/transformer/types.ts

@@ -12,4 +12,8 @@ export interface TransformerOptions {
    * Optional validation function for module IDs
    */
   validateModuleId?: (moduleId: string) => boolean;
+  /**
+   * The directory to use for the module IDs
+   */
+  moduleBase: string;
 }

package/plugin/types/global.d.ts

@@ -0,0 +1,8 @@
+import type { EventEmitter } from 'node:events';
+
+declare global {
+  var __RSC_CSS_FILES__: Set<string>;
+  var __RSC_CSS_EVENTS__: EventEmitter;
+}
+
+export {}; 

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,30 @@ 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>;
+  urlMap: Map<string, {props: string, page: string}>;
+  errors: 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/utils/logger.ts

@@ -0,0 +1,52 @@
+import { createLogger as createViteLogger, type LogLevel } from 'vite';
+
+
+const isPrimitive = (value: any) => {
+  return typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean' || typeof value === 'symbol';
+}
+
+const buildMessage = (prefix: string, msg: string, ...args: any[]) => {
+  let buildMsg = `[${prefix}] ${msg}`
+  for(const arg of args) {
+    if(isPrimitive(arg)) {
+      buildMsg += `\n[${prefix}] ${String(arg)}`;
+    } else if(arg instanceof Error) {
+      buildMsg += `\n[${prefix}] ${arg.name}`
+      buildMsg += `\n[${prefix}] ${arg.message}`
+      buildMsg += `\n[${prefix}] ${arg.stack}`
+      buildMsg += `\n[${prefix}] ${arg.cause}`
+    } else {
+      buildMsg += `\n[${prefix}] ${JSON.stringify(arg)}`;
+    }
+  }
+  return buildMsg;
+}
+
+export const createLogger = (process.env['NODE_ENV'] === 'development') ? (prefix: string, logLevel: LogLevel = 'info') => {
+  const logger = createViteLogger(logLevel, {
+    allowClearScreen: true
+  });
+  return {
+    clear: () => logger.clearScreen('info'),
+    info: (msg: string, ...args: any[]) => {
+      console.log(buildMessage(prefix, msg, ...args))
+    },
+    warn: (msg: string, ...args: any[]) => {
+      console.warn(buildMessage(prefix, msg, ...args))
+    },
+    error: (msg: string, ...args: any[]) => {
+      console.error(buildMessage(prefix, msg, ...args))
+    },
+    debug: (msg: string, ...args: any[]) => {
+      console.debug(buildMessage(prefix, msg, ...args))
+    }
+  };
+} : () => {
+  return {
+    clear: () => {},
+    info: () => {},
+    warn: () => {},
+    error: () => {},
+    debug: () => {},
+  };
+};

package/plugin/worker/createWorker.ts

@@ -12,6 +12,7 @@ type CreateWorkerOptions = {
   maxListeners?: number;
   workerPath: string;
   resourceLimits?: ResourceLimits;
+  typescript?: boolean;
 };
 
 export async function createWorker(options: CreateWorkerOptions) {
@@ -26,59 +27,57 @@ export async function createWorker(options: CreateWorkerOptions) {
     resourceLimits = {
       maxOldGenerationSizeMb: 512,
       maxYoungGenerationSizeMb: 128,
-    }
+    },
   } = options;
 
   // Ensure consistent NODE_ENV between main thread and worker
-  const isTestEnv = process.env['VITEST'] || process.env['NODE_ENV'] === 'test';
-  const nodeEnv = isTestEnv ? 'development' : mode;
+  const isTestEnv = process.env["VITEST"] || process.env["NODE_ENV"] === "test";
+  const nodeEnv = isTestEnv ? "development" : mode;
 
   const env = {
     ...process.env,
     NODE_ENV: nodeEnv,
     NODE_PATH: nodePath,
-    // Clear any inherited conditions for worker
-    NODE_OPTIONS: reverseCondition ? 
-      (condition === 'react-server' ? '--conditions=react-client' : '--conditions=react-server') 
-      : process.env['NODE_OPTIONS']
+    NODE_OPTIONS: `${
+      reverseCondition
+        ? condition === "react-server"
+          ? process.env["NODE_OPTIONS"]?.includes("react-server")
+            ? process.env["NODE_OPTIONS"]?.replace("react-server", "react-client")
+            : `${process.env["NODE_OPTIONS"] ?? ''} --conditions=react-client`
+          : process.env["NODE_OPTIONS"]?.includes("react-client")
+            ? process.env["NODE_OPTIONS"]?.replace("react-client", "react-server")
+            : `${process.env["NODE_OPTIONS"] ?? ''} --conditions=react-server`
+        : process.env["NODE_OPTIONS"]
+    }`,
   };
-  const maxRetries = 3;
-  for (let tries = 0; tries < maxRetries; tries++) {
-    try {
-      const worker = new Worker(workerPath.startsWith('/') ? workerPath : join(projectRoot, workerPath), {
-        env,
-        // Increase resource limits for stream handling
-        resourceLimits: resourceLimits
-      });
-
-      worker.setMaxListeners(maxListeners);
 
-      // Wait for worker to be ready and verify environment
-      const ready = await Promise.race([
-        new Promise((_, reject) => {
-          setTimeout(() => reject(new Error(`Worker startup timeout: ${workerPath}`)), 5000);
-        }),
-        new Promise((resolve, reject) => {
-          worker.once('message', (msg) => {
-            if (msg.type === 'READY') {
-              if(msg.env === nodeEnv) {
-                resolve(true);
-              } else {
-                reject(new Error(`Worker environment mismatch: expected ${nodeEnv}, got ${msg.env}`));
-              }
-            } else if (msg.type === 'ERROR') {
-              reject(new Error(msg.error));
-            }
-          });
-          worker.once('error', reject);
-        })
-      ]);
-      
-      if (ready) return worker;
-    } catch (error) {
-      console.warn(`Worker startup attempt ${tries + 1} failed:`, error);
-      if (tries === maxRetries - 1) throw error;
+  // Create worker with proper environment
+  const worker = new Worker(
+    workerPath.startsWith("/") ? workerPath : join(projectRoot, workerPath),
+    {
+      env,
+      resourceLimits,
     }
-  }
-  throw new Error('Failed to start worker after retries');
+  );
+
+  worker.setMaxListeners(maxListeners);
+
+  // Wait for worker to be ready
+  return await new Promise<Worker>((resolve, reject) => {
+    const timeout = setTimeout(() => {
+      reject(new Error('Worker ready timeout'));
+    }, 5000);
+
+    worker.once("message", (msg) => {
+      if (msg.type === "READY" && msg.env === nodeEnv) {
+        clearTimeout(timeout);
+        resolve(worker);
+      }
+    });
+
+    worker.once("error", (error) => {
+      clearTimeout(timeout);
+      reject(error);
+    });
+  });
 }

package/plugin/worker/html/html-worker.production.tsx

@@ -1,8 +1,13 @@
 import { messageHandler } from "./messageHandler.js";
 import { parentPort } from "node:worker_threads";
 
+let ready = false;
 if (!parentPort) throw new Error("This module must be run as a worker");
-parentPort?.on("message", messageHandler);
 
 // Signal ready with environment
-parentPort?.postMessage({ type: "READY", env: process.env["NODE_ENV"] });
+parentPort?.on("message", messageHandler);
+parentPort?.postMessage({ 
+    type: "READY", 
+    env: process.env["NODE_ENV"],
+    pid: process.pid 
+});