vite-plugin-react-server 0.3.4 → 0.3.6

package/{src → plugin}/resolvePage.ts

@@ -56,7 +56,7 @@ export async function resolvePage({
         typeof pageModule === "object" && pageModule != null
           ? keys.length
             ? "Available exports: " + keys.join(", ")
-            : "The object was defined but has no properties."
+            : "The object was defined but has no properties. \"" + JSON.stringify(pageModule) + "\""
           : "typeof pageModule =" + typeof pageModule
       }`,
       { cause: pageModule }

package/{src → plugin}/resolveProps.ts

@@ -37,11 +37,14 @@ export async function resolveProps({
   }
 
   const keys = Object.keys(propsModule);
-  const found = keys.find((v) => v === exportName || v === url || v === path);
+  let found = keys.find((v) => v === exportName || v === url || v === path);
+  if(exportName in propsModule) {
+    found = exportName;
+  }
   if (found) {
-    const value = propsModule[found];
-
+    let value = propsModule[found];
     try {
+      console.log("[resolveProps] Found:", found, value);
       // If it's a function, call it with the URL
       if (isFunction(value)) {
         const props = await value(url);
@@ -71,7 +74,7 @@ export async function resolveProps({
         };
       }
 
-      console.warn(found, "error in resolveProps", propsModule, url, path);
+      
       return {
         type: "error",
         error: new Error(
@@ -104,10 +107,16 @@ export async function resolveProps({
             : exportKeys.length
             ? exportKeys.join(", ")
             : "no keys"
-        }, this will not work. Make sure to set esModule: true in rollupOptions.output`
+        }, this will not work. Make sure to set esModule: true in rollupOptions.output. ${JSON.stringify(propsModule)}`
       ),
     };
   }
+  if (Object.keys(propsModule).includes("error")) {
+    return {
+      type: "error",
+      error: propsModule["error"],
+    };
+  }
 
   return {
     type: "error",
@@ -115,7 +124,7 @@ export async function resolveProps({
       `Could not find props export "${exportName}" in "${path}". ${
         keys.length
           ? "Available exports: " + keys.join(", ")
-          : "The object was defined but has no properties."
+          : "The object was defined but has no properties. \"" + JSON.stringify(propsModule) + "\""
       }`
     ),
   };

package/plugin/transformer/index.ts

@@ -0,0 +1 @@
+export { reactTransformPlugin } from "./plugin.js";

package/plugin/transformer/plugin.ts

@@ -0,0 +1,141 @@
+import { DEFAULT_CONFIG } from "../config/defaults.js";
+import type { StreamPluginOptions } from "../types.js";
+import { createClientComponentTransformer } from "./transformer-client-components.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
+): 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)
+
+  // 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[];
+}