vite-plugin-react-server 0.3.3 → 0.3.5

package/plugin/transformer/plugin.ts

@@ -0,0 +1,131 @@
+import type { Plugin } from "vite";
+import { DEFAULT_CONFIG } from "../config/defaults.js";
+import { createClientComponentTransformer } from "./transformer-client-components.js";
+import type { StreamPluginOptions } from "../types.js";
+import { createServerActionTransformer } from "./transformer-server-actions.js";
+
+
+/**
+ * Plugin for transforming React Client Components.
+ *
+ * Core responsibilities:
+ * 1. Detects "use client" directives
+ * 2. Transforms client components for RSC boundaries
+ * 3. Adds client reference metadata for RSC
+ *
+ * When a component is marked with "use client", it:
+ * - Gets transformed into a client reference
+ * - Maintains module ID for RSC boundaries
+ * - Preserves class/function behavior
+ *
+ * @example
+ * ```ts
+ * export default defineConfig({
+ *   plugins: [
+ *     viteReactClientTransformPlugin({
+ *       projectRoot: process.cwd(),
+ *     })
+ *   ]
+ * });
+ * ```
+ */
+
+export function reactTransformPlugin(
+  options?: StreamPluginOptions
+): 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)
+
+  // Track client components
+  const clientComponents = new Set<string>();
+
+  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;
+    },
+
+    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
+      }), {});
+
+      return {
+        build: {
+          rollupOptions: {
+            input: {
+              ...currentInputs,
+              ...entries
+            }
+          }
+        }
+      };
+    },
+
+    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/transformer-client-components.ts

@@ -0,0 +1,94 @@
+import type { Plugin as RollupPlugin } from "rollup";
+import type { TransformerOptions } from "./types.js";
+
+export function createClientComponentTransformer({
+  moduleId: userModuleId,
+}: TransformerOptions): RollupPlugin {
+  let moduleIdFn = userModuleId;
+
+  return {
+    name: "vite-plugin-react-server:client-components-transformer",
+
+    async transform(code: string, id: string, options?: { ssr?: boolean }) {
+      try {
+        // Skip node_modules and vite internal files
+        if (id.includes('node_modules') || id.includes('vite/dist')) {
+          return null;
+        }
+
+        // Check if this is a client component from metadata or directive
+        const info = this?.getModuleInfo(id);
+        const hasDirective = code.match(/^["']use client["'];?/);
+        const isClientComponent = hasDirective || info?.meta?.['directives']?.includes('use client');
+
+        if (!isClientComponent) {
+          return null;  // Not a client component, skip
+        }
+
+        let transformedCode = code;
+        const moduleId = moduleIdFn!(id, options?.ssr ?? false);
+
+        // Find all named exports
+        const exportMatches = Array.from(
+          code.matchAll(/export\s+(?:const|let|var|function|class)\s+(\w+)/g)
+        );
+
+        if (!exportMatches.length) {
+          return null;
+        }
+
+        // Transform each export
+        for (const [fullMatch, exportName] of exportMatches) {
+          if (!exportName) continue;
+
+          const isClass = fullMatch.includes("class");
+
+          // Remove export keyword
+          transformedCode = transformedCode.replace(
+            fullMatch,
+            fullMatch.replace("export ", "")
+          );
+
+          transformedCode += `
+const ${exportName}Ref = Object.defineProperties(
+  ${isClass 
+    ? `class extends ${exportName} {
+        constructor(...args) { super(...args); }
+      }`
+    : `function(...args) { return ${exportName}.apply(null, args); }`
+  },
+  {
+    $$typeof: { value: Symbol.for("react.client.reference") },
+    $$id: { value: ${JSON.stringify(moduleId + "#" + exportName)} },
+    $$filepath: { value: ${JSON.stringify(id)} }
+  }
+);
+export { ${exportName}Ref as ${exportName} };`;
+        }
+
+        return { code: transformedCode, map: null };
+      } catch (error) {
+        console.error(`[RSC] Error transforming client component: ${id}`, error);
+        throw error;
+      }
+    },
+  };
+}
+
+/**
+ * transformedCode += `
+const ${exportName}Ref = Object.defineProperties(
+  ${
+    isClass
+      ? `class extends ${exportName} {
+          constructor(...args) { super(...args); }
+        }`
+      : `function(...args) { return ${exportName}.apply(null, args); }`
+  },
+  {
+    $$typeof: { value: Symbol.for("react.client.reference") },
+    $$id: { value: ${JSON.stringify(moduleId + "#" + exportName)} }
+  }
+);
+export { ${exportName}Ref as ${exportName} };`;
+ */

package/{src/transformer/transformer.ts → plugin/transformer/transformer-server-actions.ts}

@@ -1,19 +1,19 @@
 import { SourceMapGenerator } from "source-map";
 import type { TransformerOptions } from "./types.js";
 
-export function createRscTransformer(options: TransformerOptions) {
+export function createServerActionTransformer(options: TransformerOptions) {
   return {
-    name: "vite:react-stream-transformer",
+    name: "vite-plugin-react-server:server-actions-transformer",
     enforce: "post" as const,
 
     async transform(
       code: string,
       path: string,
-      { ssr }: { inMap: null | string; ssr: boolean }
+      { ssr }: { ssr: boolean } = { ssr: false }
     ) {
       try {
         let transformedCode = code;
-        const directiveMatch = code.match(/^["']use client["'];?/);
+        const directiveMatch = code.match(/^["']use server["'];?/);
         const moduleId = options.moduleId(path, ssr);
 
         // Log the path transformation
@@ -28,14 +28,18 @@ export function createRscTransformer(options: TransformerOptions) {
         );
 
         if (!exportMatches.length) {
-          console.warn(`[RSC] No exports found in client component: ${path}`);
+          console.warn(
+            `[RSC] No exports found in server action module: ${path}`
+          );
           return null;
         }
 
         // Transform each export
         for (const [fullMatch, exportName] of exportMatches) {
           if (!exportName) {
-            console.warn(`[RSC] Invalid export in client component: ${path}`);
+            console.warn(
+              `[RSC] Invalid export in server action module: ${path}`
+            );
             continue;
           }
 
@@ -48,7 +52,9 @@ export function createRscTransformer(options: TransformerOptions) {
           );
 
           if (!directiveMatch || directiveMatch.index !== 0) {
-            // Server component
+            // Server action
+          } else {
+            // Client component
             transformedCode += `
 const ${exportName}Ref = Object.defineProperties(
   ${
@@ -66,26 +72,7 @@ const ${exportName}Ref = Object.defineProperties(
   }
 );
 export { ${exportName}Ref as ${exportName} };
-`;
-          } else {
-            // Client component
-            transformedCode += `
-const ${exportName}Ref = Object.defineProperties(
-  ${
-    isClass
-      ? `class extends ${exportName} {
-          constructor(...args) { super(...args); }
-        }`
-      : `function(...args) { return ${exportName}.apply(null, args); }`
-  },
-  {
-    $$typeof: { value: Symbol.for("react.client.reference") },
-    $$id: { value: ${JSON.stringify(moduleId + "#" + exportName)} },
-    $$filepath: { value: ${JSON.stringify(path)} }
-  }
-);
-export { ${exportName}Ref as ${exportName} };
-`;
+            `;
           }
         }
 

package/{src → plugin}/types.ts

@@ -1,14 +1,43 @@
-import type {
-  AliasOptions,
+import type { ComponentType } from 'react';
+import type { 
+  UserConfig,
   BuildOptions,
+  InlineConfig,
+  AliasOptions,
   Connect,
-  Logger,
-  Manifest,
-  ModuleGraph,
-  UserConfig,
-  ViteDevServer,
-} from "vite";
+} from 'vite';
+
+// Input can be a string path, React component, tuple, or array
+export type NormalizerInput = string | ComponentType<any> | [string, string] | string[];
+
+export type InputNormalizer = (input: NormalizerInput) => [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"
+    > 
+  };
 
+// Client plugin options
 export interface StreamPluginOptionsClient {
   outDir?: string;
   build?: BuildConfig;
@@ -37,11 +66,11 @@ export type ResolvedUserOptions = Required<
     | "collectCss"
     | "collectAssets"
     | "assetsDir"
-    | "workerPath"
+    | "htmlWorkerPath"
+    | "rscWorkerPath"
     | "loaderPath"
     | "clientEntry"
-    | "serverOutDir"
-    | "clientOutDir"
+    | "serverEntry"
     | "moduleBaseExceptions"
   >
 > & {
@@ -49,36 +78,44 @@ export type ResolvedUserOptions = Required<
   autoDiscover: NonNullable<Required<StreamPluginOptions["autoDiscover"]>>;
 };
 
-export type ResolvedUserConfig = Required<Pick<UserConfig, "root" | "mode">> &
-  Omit<UserConfig, "root" | "mode" | "build"> & {
-  build: Required<Pick<BuildOptions, "target" | "outDir" | "assetsDir" | "ssr" | "ssrEmitAssets" | "ssrManifest" | "manifest">> &
-    Partial<Omit<BuildOptions, "target" | "outDir" | "assetsDir" | "ssr" | "ssrEmitAssets" | "ssrManifest" | "manifest">>;
-};
+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;
+  moduleBase: string;
   moduleBasePath?: string;
   moduleBaseURL?: string;
   clientEntry?: string;
-  serverOutDir?: string;
-  clientOutDir?: string;
+  serverEntry?: string;
   // Auto-discovery (zero-config)
   autoDiscover?: {
-    pagePattern?: string;
-    propsPattern?: string;
-  };
+    // 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;
   // Manual configuration
   Page: string | ((url: string) => string);
   props?: undefined | string | ((url: string) => string);
   // Escape hatches
-  workerPath?: string;
+  htmlWorkerPath?: string;
+  rscWorkerPath?: string;
   loaderPath?: string;
   pageExportName?: string;
   propsExportName?: string;
   Html?: React.FC<{
-    manifest: Manifest;
+    manifest: import("vite").Manifest;
     pageProps: any;
     route: string;
     url: string;
@@ -88,15 +125,16 @@ export interface StreamPluginOptions {
   collectAssets?: boolean;
   build?: BuildConfig;
   moduleBaseExceptions?: string[];
+  moduleId?: (id: string) => string;
 }
 
 export interface CreateHandlerOptions<T = any> {
   loader: (id: string) => Promise<T>;
-  manifest?: Manifest;
-  moduleGraph?: ModuleGraph;
+  manifest?: import("vite").Manifest;
+  moduleGraph?: import("vite").ModuleGraph;
   cssFiles?: string[];
   onCssFile?: (path: string) => void;
-  logger?: Logger;
+  logger?: import("vite").Logger;
   pipableStreamOptions?: any;
 }
 
@@ -107,7 +145,7 @@ export type ModuleLoader = (
 ) => Promise<Record<string, any>>;
 
 export interface BaseProps {
-  manifest: Manifest;
+  manifest: import("vite").Manifest;
   children?: React.ReactNode;
   assets?: {
     css?: string[];
@@ -129,8 +167,9 @@ export interface RscStreamOptions {
   Page: React.ComponentType;
   props: any;
   Html: any;
-  logger?: Console | Logger;
+  logger?: Console | import("vite").Logger;
   cssFiles?: string[];
+  htmlProps: any;
   route: string;
   url: string;
   pipableStreamOptions?: any;
@@ -161,6 +200,7 @@ export interface BuildConfig {
   pages: string[] | (() => Promise<string[]> | 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
 }
 
 export interface RscResolver {
@@ -174,32 +214,6 @@ export interface RscResolver {
   }>;
 }
 
-export interface Options {
-  include?: RegExp;
-  projectRoot?: string;
-  moduleBase: string;
-  // can be inferred from moduleBase, will add / to moduleBase by default (if not already present)
-  moduleBasePath?: string;
-  Html?: React.ComponentType<React.PropsWithChildren<{ manifest: Manifest }>>;
-  Page: string | ((url: string) => string);
-  props?: string | ((url: string) => string);
-  pageExportName?: string;
-  propsExportName?: string;
-  collectCss?: boolean;
-  collectAssets?: boolean;
-  emitCss?: boolean;
-  moduleLoader?: (server: ViteDevServer) => ModuleLoader;
-  build?: BuildConfig;
-  outDir?: string; // defaults to 'dist'
-  /**
-   * Configure static asset copying
-   * - true: Copy all assets
-   * - false: Don't copy assets
-   * - Function: Custom filter for which files to copy
-   */
-  copyAssets?: boolean | ((file: string) => boolean);
-}
-
 export type RequestHandler = Connect.NextHandleFunction;
 
 export interface SsrStreamOptions {
@@ -261,3 +275,31 @@ export interface BuildTiming {
   renderEnd?: number;
   total?: number;
 }
+
+
+export type CheckFilesExistReturn = {
+  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' };
+
+// 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/createWorker.ts

@@ -0,0 +1,84 @@
+import { Worker, type ResourceLimits } from "node:worker_threads";
+import { getMode, getNodePath } from "../config/getPaths.js";
+import { getCondition } from "../config/getCondition.js";
+
+type CreateWorkerOptions = {
+  projectRoot?: string;
+  condition?: "react-server" | "react-client";
+  nodePath?: string;
+  nodeOptions?: string;
+  mode?: "production" | "development";
+  reverseCondition?: boolean;
+  maxListeners?: number;
+  workerPath: string;
+  resourceLimits?: ResourceLimits;
+};
+
+export async function createWorker(options: CreateWorkerOptions) {
+  const {
+    projectRoot = process.cwd(),
+    nodePath = getNodePath(projectRoot),
+    condition = getCondition(),
+    reverseCondition = true,
+    maxListeners = 100,
+    mode = getMode(),
+    workerPath,
+    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 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']
+  };
+  const maxRetries = 3;
+  for (let tries = 0; tries < maxRetries; tries++) {
+    try {
+      const worker = new Worker(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;
+    }
+  }
+  throw new Error('Failed to start worker after retries');
+}

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

@@ -0,0 +1,8 @@
+import { messageHandler } from "./messageHandler.js";
+import { parentPort } from "node:worker_threads";
+
+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"] });

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

@@ -0,0 +1,8 @@
+import { messageHandler } from "./messageHandler.js";
+import { parentPort } from "node:worker_threads";
+
+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"] });

package/plugin/worker/html/html-worker.ts

@@ -0,0 +1,5 @@
+await (
+    process.env['NODE_ENV'] === 'production' 
+      ? import('./html-worker.production.js') 
+      : import('./html-worker.development.js')
+  );

package/plugin/worker/html/index.ts

@@ -0,0 +1,5 @@
+await (
+  process.env['NODE_ENV'] === 'production' 
+    ? import('./html-worker.production.js') 
+    : import('./html-worker.development.js')
+);