vite-plugin-react-server 0.3.9 → 0.3.11

package/plugin/transformer/plugin.ts

@@ -1,8 +1,19 @@
-import { DEFAULT_CONFIG } from "../config/defaults.js";
-import type { StreamPluginOptions } from "../types.js";
+import { resolveOptions } from "../config/resolveOptions.js";
+import type {
+  ResolvedUserConfig,
+  ResolvedUserOptions,
+  StreamPluginOptions,
+} from "../types.js";
 import { createClientComponentTransformer } from "./transformer-client-components.js";
-import { createServerActionTransformer } from "./transformer-server-actions.js";
+import { createModuleIdGenerator } from "../config/createModuleIdGenerator.js";
+import { type ConfigEnv, type Plugin, type ResolvedConfig } from "vite";
+import { createInputNormalizer } from "../helpers/inputNormalizer.js";
+import { resolveUserConfig } from "../config/resolveUserConfig.js";
 
+let userOptions: ResolvedUserOptions;
+let userConfig: ResolvedUserConfig;
+let resolvedConfig: ResolvedConfig;
+let resolvedConfigEnv: ConfigEnv;
 
 /**
  * Plugin for transforming React Client Components.
@@ -29,113 +40,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"'
-    );
+export function reactTransformPlugin(options: StreamPluginOptions): Plugin {
+  const resolvedUserOptions = resolveOptions(options);
+  if (resolvedUserOptions.type === "error") {
+    throw resolvedUserOptions.error;
   }
-  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)
+  userOptions = resolvedUserOptions.userOptions;
 
-  // Track client components
-  const clientComponents = new Set<string>();
+  let manifest: Record<string, { file: string }> = {};
+  const pendingEmits = new Map<string, { referenceId: string }>();
 
   return {
-    name: "vite:react-stream-transformer",
+    name: "vite:react-transform",
     enforce: "post",
 
+    config(config, configEnv) {
+      const resolvedUserConfig = resolveUserConfig({
+        isClient: false,
+        config,
+        configEnv,
+        userOptions,
+      });
+      if (resolvedUserConfig.type === "error") {
+        throw resolvedUserConfig.error;
+      }
+      userConfig = resolvedUserConfig.userConfig;
+      resolvedConfigEnv = configEnv;
+    },
     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;
+      resolvedConfig = config;
     },
 
-    config(config) {
-      // Get existing inputs
-      const existingInput = config.build?.rollupOptions?.input || {};
-      const currentInputs =
-        typeof existingInput === "string"
-          ? { default: existingInput }
-          : existingInput;
+    transform(code: string, id: string, opt: { ssr?: boolean } = {}) {
+      const hasClientDirective = code.match(/^["']use client["'];?/);
+      if (!hasClientDirective) return null;
 
-      // Add client components
-      const entries = Array.from(clientComponents).reduce(
-        (acc, path) => ({
-          ...acc,
-          [path.replace(DEFAULT_CONFIG.FILE_REGEX, "")]: path,
-        }),
-        {}
-      );
+      const moduleInfo = this.getModuleInfo(id);
+      if (!moduleInfo) return null;
 
-      return {
-        build: {
-          rollupOptions: {
-            input: {
-              ...currentInputs,
-              ...entries,
-            },
-          },
-        },
-      };
-    },
+      // In dev mode, just transform the code without emitting
+      if (resolvedConfigEnv.command === 'serve') {
+        const transformer = createClientComponentTransformer(userOptions, userConfig, resolvedConfigEnv);
+        return transformer.transform!.bind(this)(code, id, opt);
+      }
 
-    buildStart() {
-      // Reset client components at start of each build
-      clientComponents.clear();
-    },
+      // Production build logic...
+      const normalizer = createInputNormalizer({
+        root: resolvedConfig.root,
+        preserveModulesRoot: undefined,
+      });
+      const [normalizedId, normalizedPath] = normalizer(id);
 
-    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);
-      }
+      // Add to manifest immediately with a temporary path
+      manifest[normalizedId] = { file: normalizedPath };
+      
+      const referenceId = this.emitFile({
+        type: "chunk",
+        id: normalizedPath,
+        name: normalizedId,
+      });
+      pendingEmits.set(normalizedId, { referenceId });
 
-      // Track client component and transform
-      clientComponents.add(id);
-      console.log("[TransformerPlugin] Found client component:", id);
-      return transformClientComponent.bind(this)(code, id, options);
+      const transformer = createClientComponentTransformer(userOptions, userConfig, resolvedConfigEnv);
+      return transformer.transform!.bind(this)(code, id, opt);
     },
 
-    // Log final client components list
-    buildEnd() {
-      console.log(
-        "[TransformerPlugin] Final client components:",
-        Array.from(clientComponents)
-      );
+    renderDynamicImport() {
+      // Update manifest with real file names
+      for (const [normalizedId, { referenceId }] of pendingEmits) {
+        const fileName = this.getFileName(referenceId);
+        manifest[normalizedId] = { file: fileName };
+      }
     },
   };
 }

package/plugin/transformer/transformer-client-components.ts

@@ -1,33 +1,90 @@
-import type { Plugin as RollupPlugin } from "rollup";
+import type { PluginContext } from "rollup";
 import type { TransformerOptions } from "./types.js";
+import { DEFAULT_CONFIG } from "../config/defaults.js";
+import { createInputNormalizer } from "../helpers/inputNormalizer.js";
+import type { ResolvedUserConfig, ResolvedUserOptions } from "../types.js";
+import type { ConfigEnv } from "vite";
+import { join } from "path";
+import { tryManifest } from "../helpers/tryManifest.js";
 
-export function createClientComponentTransformer({
-  moduleId: userModuleId,
-}: TransformerOptions): RollupPlugin {
-  let moduleIdFn = userModuleId;
+export function createClientComponentTransformer(
+  {
+    moduleBase = DEFAULT_CONFIG.MODULE_BASE,
+    projectRoot,
+    moduleId,
+    build,
+  }: ResolvedUserOptions,
+  config: ResolvedUserConfig,
+  configEnv: ConfigEnv
+) {
+  let moduleIdFn = moduleId;
+  const normalizer = createInputNormalizer({
+    root: projectRoot,
+    preserveModulesRoot: moduleBase,
+    removeExtension: true,
+  });
+  const isClient = config.build.outDir?.endsWith(build.client);
+  const isServer = config.build.outDir?.endsWith(build.server);
+  const references = isServer
+    ? tryManifest({
+        root: projectRoot,
+        outDir: join(build.outDir, build.client),
+        ssrManifest: false,
+      }).manifest
+    : null;
 
   return {
     name: "vite-plugin-react-server:client-components-transformer",
 
-    async transform(code: string, id: string, options?: { ssr?: boolean }) {
+    async transform(
+      this: PluginContext,
+      code: string,
+      id: string,
+      options?: { ssr?: boolean }
+    ) {
       try {
         // Skip node_modules and vite internal files
-        if (id.includes('node_modules') || id.includes('vite/dist')) {
+        if (id.includes("node_modules") || id.includes("vite/dist")) {
           return null;
         }
 
         // Check if this is a client component from metadata or directive
+        let rest = id.split("/");
+        let fileName = rest.pop() as string;
+        let dir = rest.join("/");
+        if (dir.startsWith(projectRoot)) {
+          dir = dir.replace(projectRoot, "");
+        }
+        const index = dir.indexOf(moduleBase);
+        if (index !== -1) {
+          if (configEnv.command === "build") {
+            if (isServer) {
+              dir = join(build.assetsDir, dir.slice(index + moduleBase.length));
+            } else {
+              dir = new URL(
+                dir,
+                `file://${config?.server?.host ?? "localhost"}:${
+                  config?.server?.port ?? configEnv.isPreview ? 4173 : 5173
+                }`
+              ).pathname;
+            }
+          } else if (configEnv.command === "serve") {
+            dir = "";
+          }
+        }
+        if (!fileName) fileName = id;
         const info = this?.getModuleInfo(id);
         const hasDirective = code.match(/^["']use client["'];?/);
-        const isClientComponent = hasDirective || info?.meta?.['directives']?.includes('use client');
+        const isClientComponent =
+          hasDirective || info?.meta?.["directives"]?.includes("use client");
 
         if (!isClientComponent) {
-          return null;  // Not a client component, skip
+          return null; // Not a client component, skip
         }
 
         let transformedCode = code;
-        const moduleId = moduleIdFn!(id, options?.ssr ?? false);
-
+        const moduleId = moduleIdFn!(id, configEnv.isSsrBuild ?? false);
+        const [key, value] = normalizer([moduleId, id]);
         // Find all named exports
         const exportMatches = Array.from(
           code.matchAll(/export\s+(?:const|let|var|function|class)\s+(\w+)/g)
@@ -40,39 +97,56 @@ export function createClientComponentTransformer({
         // Transform each export
         for (const [fullMatch, exportName] of exportMatches) {
           if (!exportName) continue;
-
+          console.log("exportName", dir, fileName, exportName);
           const isClass = fullMatch.includes("class");
-
           // Remove export keyword
           transformedCode = transformedCode.replace(
             fullMatch,
             fullMatch.replace("export ", "")
           );
+          let path = `import.meta.url`;
+          // path from moduleBase to value
+          const { manifest, error } = tryManifest({
+            root: projectRoot,
+            outDir: join(build.outDir, build.client),
+            ssrManifest: false,
+          });
+          if (error) {
+            console.error(`[RSC] Error getting manifest: ${error}`);
+            continue;
+          }
+          const fileFromManifest = manifest[join(moduleBase, value)]?.file;
+          if (fileFromManifest) {
+            path = JSON.stringify(fileFromManifest);
+          } else {
+            console.error(`[RSC] File not found in manifest: ${value}`);
+            continue;
+          }
 
-          transformedCode += `
-const ${exportName}Ref = Object.defineProperties(
-  ${isClass 
-    ? `class extends ${exportName} {
+          transformedCode += `const ${exportName}Ref = Object.defineProperties(${
+            isClass
+              ? `class extends ${exportName} {
         constructor(...args) { super(...args); }
       }`
-    : `function(...args) { return ${exportName}.apply(null, 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)} }
+    $$id: { value: \`\${${path}}${"#" + exportName}\` }
   }
 );
 export { ${exportName}Ref as ${exportName} };`;
         }
-
         return { code: transformedCode, map: null };
       } catch (error) {
-        console.error(`[RSC] Error transforming client component: ${id}`, error);
+        console.error(
+          `[RSC] Error transforming client component: ${id}`,
+          error
+        );
         throw error;
       }
     },
-  };
+  } as const;
 }
 
 /**

package/plugin/transformer/transformer-server-actions.ts

@@ -1,20 +1,35 @@
 import { SourceMapGenerator } from "source-map";
 import type { TransformerOptions } from "./types.js";
+import { DEFAULT_CONFIG } from "../config/defaults.js";
+import type { ResolvedUserOptions, ResolvedUserConfig } from "../types.js";
+import type { ConfigEnv } from "vite";
+import { createInputNormalizer } from "../helpers/inputNormalizer.js";
 
-export function createServerActionTransformer(options: TransformerOptions) {
+export function createServerActionTransformer({
+  moduleBase = DEFAULT_CONFIG.MODULE_BASE,
+  projectRoot,
+  moduleId,
+}: ResolvedUserOptions, config: ResolvedUserConfig, configEnv: ConfigEnv) {
+  let moduleIdFn = moduleId;
+  const normalizer = createInputNormalizer({
+    root: projectRoot,
+    preserveModulesRoot: moduleBase,
+    removeExtension: DEFAULT_CONFIG.FILE_REGEX,
+  });
   return {
     name: "vite-plugin-react-server:server-actions-transformer",
-    enforce: "post" as const,
 
     async transform(
       code: string,
       path: string,
-      { ssr }: { ssr: boolean } = { ssr: false }
-    ) {
+        { ssr }: { ssr: boolean } = { ssr: false }
+      ) {
       try {
         let transformedCode = code;
         const directiveMatch = code.match(/^["']use server["'];?/);
-        const moduleId = options.moduleId(path, ssr);
+        const moduleId = moduleIdFn(path, ssr);
+        const [key,value] = normalizer(moduleId);
+
 
         // Log the path transformation
         console.log("[RSC Transform] Module path transformation:", {
@@ -66,8 +81,8 @@ const ${exportName}Ref = Object.defineProperties(
   },
   {
     $$typeof: { value: Symbol.for("react.server.reference") },
-    $$id: { value: ${JSON.stringify(moduleId + "#" + exportName)} },
-    $$filepath: { value: ${JSON.stringify(path)} },
+    $$src: { value: ${JSON.stringify(value)} },
+    $$id: { value: import.meta.url.slice(import.meta.url.indexOf("/${key}")}) + ${JSON.stringify("#" + exportName)} },
     $$async: { value: true }
   }
 );

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;
 }