vite-plugin-react-server 1.0.2 → 1.1.0

package/plugin/resolveProps.ts

@@ -1,131 +1,175 @@
-type ResolvePropsOptions = {
-  propsModule: Record<string, any>;
-  path: string;
-  exportName: string;
+
+type ResolvePropsOptions<N extends string> = {
+  id: string;
   url: string;
+  exportName: N;
+  loader: (id: string) => Promise<any>;
 };
 
-type ResolvePropsResult =
-  | { type: "success"; key: string; props: any }
+type ResolvePropsResult<T, N extends string> =
+  | { type: "success"; key: string; props: T; module?:  { [key in N]: T } }
   | { type: "error"; error: Error }
   | { type: "skip" };
 
-function isFunction(value: any) {
-  return typeof value === "function";
-}
-
-export async function resolveProps({
-  propsModule,
-  path,
-  exportName,
+/**
+ * Resolves props from a module, handling both real and virtual modules.
+ *
+ * During development (ssrLoadModule):
+ * - Real modules have exports available directly on the module object
+ * - Virtual modules have exports stored in temporaryReferences
+ *
+ * During build (createBuildLoader):
+ * - Transformed modules (with ast/code) have exports as direct properties
+ * - The exports array contains just the names of those exports
+ * - We store the module in temporaryReferences for later use
+ * - We access exports directly from the module object
+ *
+ * Props can be:
+ * 1. A function that takes a URL and returns props
+ * 2. A direct object of props
+ * 3. A renamed export (where the actual export name differs from the expected name)
+ *
+ * @param options.propsModule - The module object from ssrLoadModule or createBuildLoader
+ * @param options.path - The normalized path to the module
+ * @param options.url - The URL route this page handles
+ * @param options.exportName - The name of the export to resolve (e.g. 'props')
+ * @param options.temporaryReferences - WeakMap used to store and retrieve virtual module references
+ *
+ * @returns A result object containing:
+ *   - type: "success" | "error" | "skip"
+ *   - key: The export name if successful
+ *   - props: The resolved props if successful
+ *   - error: Error message if failed
+ */
+export const resolveProps = async <T, N extends string>({
+  id,
   url,
-}: ResolvePropsOptions): Promise<ResolvePropsResult> {
-  if (!propsModule) {
+  exportName,
+  loader,
+}: ResolvePropsOptions<N>): Promise<ResolvePropsResult<T, N>> => {
+  // Check if this is a stashed page that needs special handling
+  const propsLoadResult = await (async (): Promise<
+    | { type: "success"; key: string; module: { [key in N]: T } }
+    | { type: "error"; error: Error; module?: never }
+  > => {
+    try {
+      return {
+        type: "success",
+        key: id,
+        module: await loader(id),
+      };
+    } catch (error) {
+      return {
+        type: "error",
+        error: error instanceof Error ? error : new Error(String(error)),
+      };
+    }
+  })();
+
+  if (propsLoadResult.type !== "success") {
+    return propsLoadResult;
+  }
+  const { module } = propsLoadResult;
+  const props = module[exportName as N];
+  // handle different props use-cases
+  if (module instanceof Error) {
     return {
       type: "error",
-      error: new Error(`propsModule is ${typeof propsModule}`),
+      error: module,
     };
-  }
-
-  if (typeof propsModule !== "object") {
+  } else if (!(exportName in module)) {
+    return {
+      type: "success",
+      key: exportName,
+      props: { url, ...module } as T,
+      module,
+    };
+  } else if (!props) {
+    return {
+      type: "success",
+      key: exportName,
+      props: { url } as T,
+      module: module as { [key in N]: T },
+    };
+  } else if (props instanceof Error) {
     return {
       type: "error",
-      error: new Error(
-        `propsModule must be an object, got ${typeof propsModule}`
-      ),
+      error: props,
     };
-  }
-
-  const keys = Object.keys(propsModule);
-  let found = keys.find((v) => v === exportName || v === url || v === path);
-  if(exportName in propsModule) {
-    found = exportName;
-  }
-  if (found) {
-    let value = propsModule[found];
+  } else if (typeof props === "function") {
+    // Handle both class constructors and regular functions
     try {
-      // If it's a function, call it with the URL
-      if (isFunction(value)) {
-        const props = await value(url);
-        return {
-          type: "success",
-          key: found,
-          props,
-        };
+      let propsResult;
+      if (props.prototype && props.prototype.constructor) {
+        // Class constructor case
+        propsResult = new (props as new (url: string) => T)(url);
+      } else {
+        // Regular function case
+        propsResult = props(url);
       }
-
-      // If it's a promise, await it
-      if (value && typeof value.then === "function") {
-        const props = await value;
-        return {
-          type: "success",
-          key: found,
-          props,
-        };
-      }
-
-      // If it's a plain object, use it directly
-      if (typeof value === "object" && value !== null) {
-        return {
-          type: "success",
-          key: found,
-          props: value,
-        };
-      }
-
       
+      return {
+        type: "success",
+        key: exportName,
+        props: propsResult instanceof Promise ? await propsResult : propsResult,
+        module: module as { [key in N]: T },
+      };
+    } catch (error) {
       return {
         type: "error",
-        error: new Error(
-          `Expected props export "${exportName}" in "${path}" to be a function, promise, or object that resolves to props, instead got typeof ${typeof value}.`
-        ),
+        error: error instanceof Error ? error : new Error(String(error)),
+      };
+    }
+  } else if (props instanceof Promise) {
+    // object case
+    try {
+      return {
+        type: "success",
+        key: exportName,
+        props: await props,
+        module: propsLoadResult.module,
       };
     } catch (error) {
-      console.trace(error);
-      console.warn(found, "error in resolveProps", propsModule, url, path);
       return {
         type: "error",
-        error: error as Error,
+        error: error instanceof Error ? error : new Error(String(error)),
+      };
+    }
+  } else if (Array.isArray(props)) {
+    // array case
+    try {
+      return {
+        type: "success",
+        key: exportName,
+        props: Object.fromEntries(
+          props.map((prop) => (typeof prop === "string" ? [prop, prop] : prop))
+        ) as T,
+        module: propsLoadResult.module,
+      };
+    } catch (error) {
+      return {
+        type: "error",
+        error: error instanceof Error ? error : new Error(String(error)),
+      };
+    }
+  } else if (typeof props === "string") {
+    try {
+      return {
+        type: "success",
+        key: exportName,
+        props: JSON.parse(props),
+      };
+    } catch (error) {
+      return {
+        type: "error",
+        error: error instanceof Error ? error : new Error(String(error)),
       };
     }
   }
-  const commonjs = keys.find((v) => v === "exports");
-
-  if (!!commonjs) {
-    const exportKeys = (commonjs as unknown as { exports: any })["exports"]
-      ? Object.keys((commonjs as unknown as { exports: any })["exports"])
-      : [];
-    const foundCommonJS = exportKeys.find(
-      (v) => v === exportName || v === url || v === path
-    );
-    return {
-      type: "error",
-      error: new Error(
-        `Expected props export "${exportName}" in "${path}", but instead got "exports" with ${
-          !!foundCommonJS
-            ? foundCommonJS.toString()
-            : exportKeys.length
-            ? exportKeys.join(", ")
-            : "no keys"
-        }, 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",
-    error: new Error(
-      `Could not find props export "${exportName}" in "${path}". ${
-        keys.length
-          ? "Available exports: " + keys.join(", ")
-          : "The object was defined but has no properties. \"" + JSON.stringify(propsModule) + "\""
-      }`
-    ),
+    type: "success",
+    key: exportName,
+    props: props,
+    module: module as { [key in N]: T },
   };
-}
+};

package/plugin/root.ts

@@ -1,4 +1,4 @@
 import { dirname } from "node:path";
 import { fileURLToPath } from "node:url";
 export const pluginRoot = dirname(fileURLToPath(import.meta.url));
-
+export const isLinked = !import.meta.url.startsWith(process.cwd());

package/plugin/transformer/index.ts

@@ -1 +1,2 @@
-export { reactTransformPlugin } from "./plugin.js";
+export { reactTransformPlugin as reactTransformPluginServer } from "./plugin.server.js";
+export { reactTransformPlugin as reactTransformPluginClient } from "./plugin.client.js";

package/plugin/transformer/plugin.client.ts

@@ -0,0 +1,109 @@
+import { resolveOptions } from "../config/resolveOptions.js";
+import type { ResolvedUserOptions, StreamPluginOptions } from "../types.js";
+import { type Manifest, type Plugin } from "vite";
+import { transformModuleIfNeeded } from "../loader/react-loader.js";
+import { join } from "node:path";
+import { tryManifest } from "../helpers/tryManifest.js";
+
+/**
+ * Plugin for transforming server actions for the client build.
+ *
+ * Core responsibilities:
+ * 1. Transforms "use server" directives
+ * 2. Transforms server actions for the client build
+ * 3. Uses react-loader's transformModuleIfNeeded to create a server action reference
+ *
+ * When a component is marked with "use server", it:
+ * - Gets transformed into a server action
+ * - Maintains module ID for RSC boundaries
+ * - Preserves class/function behavior
+ *
+ * @example
+ * ```ts
+ * export default defineConfig({
+ *   plugins: [
+ *     viteReactClientTransformPlugin({
+ *       projectRoot: process.cwd(),
+ *     })
+ *   ]
+ * });
+ * ```
+ */
+let isBuild = true;
+
+export function reactTransformPlugin(options: StreamPluginOptions): Plugin {
+  let userOptions: ResolvedUserOptions;
+  const resolvedOptionsResult = resolveOptions(options);
+  if (resolvedOptionsResult.type === "error") throw resolvedOptionsResult.error;
+  userOptions = resolvedOptionsResult.userOptions;
+  let staticManifest: Manifest;
+  return {
+    name: "vite:react-server-action-transform",
+    enforce: "pre",
+    async config(_, configEnv) {
+      isBuild = configEnv.command !== "serve";
+      if (!configEnv.isSsrBuild) {
+        staticManifest = {};
+      } else {
+        const staticManifestResult = await tryManifest({
+          root: userOptions.projectRoot,
+          ssrManifest: false,
+          outDir: join(userOptions.build.outDir, userOptions.build.static),
+        });
+        if (staticManifestResult.type === "error") {
+          staticManifest = {};
+        } else {
+          staticManifest = staticManifestResult.manifest;
+        }
+      }
+    },
+    async transform(code, id, options) {
+      const ssr = options?.ssr;
+      const isServer = code.match('"use server"') !== null;
+      const isClient = code.match('"use client"') !== null;
+      if (!ssr) return null;
+      if (!isServer && !isClient) return null;
+      if (isServer && isClient) {
+        throw new Error(
+          "Server and client components cannot be used in the same file"
+        );
+      }
+      if (isClient) {
+        return null;
+      }
+      if (isServer && isBuild) {
+        const [key] = userOptions.normalizer(id);
+        id = "/" + key + ".js";
+      }
+      const transformed = await transformModuleIfNeeded(code, id, null);
+      if (!transformed) return null;
+      return {
+        code: transformed,
+        id: id,
+        map: null,
+      };
+    },
+    renderChunk(code, chunk, _options) {
+      // Only process client components
+      if (!chunk.fileName.includes(".client")) return null;
+
+      // Get the original file name without extension
+      const originalName = chunk.fileName.replace(".js", "");
+
+      // Find matching entry in static manifest
+      const manifestEntry = Object.entries(staticManifest).find(([_, info]) =>
+        info.file.startsWith(originalName)
+      );
+
+      if (manifestEntry) {
+        // Use the static manifest's file name
+        return {
+          code,
+          fileName: manifestEntry[1].file,
+        };
+      }
+
+      return null;
+    },
+  };
+}

package/plugin/transformer/plugin.server.ts

@@ -0,0 +1,98 @@
+import { resolveOptions } from "../config/resolveOptions.js";
+import type { ResolvedUserOptions, StreamPluginOptions } from "../types.js";
+import type { Manifest, Plugin } from "vite";
+import { transformModuleIfNeeded } from "../loader/react-loader.js";
+import { tryManifest } from "../helpers/tryManifest.js";
+import { join } from "node:path";
+/**
+ * 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(),
+ *     })
+ *   ]
+ * });
+ * ```
+ */
+let isBuild = true;
+
+export function reactTransformPlugin(options: StreamPluginOptions): Plugin {
+  let userOptions: ResolvedUserOptions;
+  const resolvedOptionsResult = resolveOptions(options);
+  if (resolvedOptionsResult.type === "error") throw resolvedOptionsResult.error;
+  userOptions = resolvedOptionsResult.userOptions;
+
+  let staticManifest: Manifest;
+
+  return {
+    name: "vite:react-server-transform",
+    enforce: "pre", // Run before Vite's transforms
+    async config(_, configEnv) {
+      isBuild = configEnv.command !== "serve";
+      const staticManifestResult = await tryManifest({
+        root: userOptions.projectRoot,
+        ssrManifest: false,
+        outDir: join(userOptions.build.outDir, userOptions.build.static),
+      });
+      if (staticManifestResult.type === "error") {
+        console.error(staticManifestResult.error);
+        throw staticManifestResult.error;
+      }
+      staticManifest = staticManifestResult.manifest;
+    },
+    async transform(code, id, options) {
+      const ssr = options?.ssr;
+      if (!ssr) return null;
+      if (!userOptions.autoDiscover.modulePattern(id)) return null;
+      if (!code.match('"use client"')) return null;
+
+      if (isBuild) {
+        const [key, value] = userOptions.normalizer(id);
+        if (staticManifest) {
+          if (value in staticManifest) {
+            id = '/' + staticManifest[value].file;
+          } else {
+            const hash = this.emitFile({
+              id,
+              type: "chunk",
+              fileName: key + ".js",
+              name: value,
+            });
+            // get fileName from hash
+
+            const fileName = this.getFileName(hash);
+            id = '/' + fileName;
+          }
+        } else {
+          throw new Error(`Client manifest not found.`);
+        }
+      }
+      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;
+      return {
+        code: transformed,
+        id: id,
+        map: null,
+      };
+    },
+  };
+}

package/plugin/transformer/plugin.ts

@@ -1,116 +1,3 @@
-import { resolveOptions } from "../config/resolveOptions.js";
-import type { InputNormalizer, ResolvedUserOptions, StreamPluginOptions } from "../types.js";
-import { type Manifest, 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.
- *
- * 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(),
- *     })
- *   ]
- * });
- * ```
- */
+import { getCondition } from '../config/getCondition.js';
 
-export function reactTransformPlugin(options: StreamPluginOptions): Plugin {
-  let normalizer: InputNormalizer;
-  let clientManifest: Manifest;
-  let isDev:boolean;
-  let userOptions: ResolvedUserOptions
-  return {
-    name: "vite:react-transform",
-    enforce: "pre", // Run before Vite's transforms
-    config(config, configEnv) {
-      const resolvedOptionsResult = resolveOptions(
-        options,
-        config.build?.outDir?.startsWith(
-          join(options.build?.outDir ?? DEFAULT_CONFIG.BUILD.outDir, options.build?.client ?? DEFAULT_CONFIG.BUILD.client)
-        ) ?? false
-      );
-      isDev = configEnv.mode === "development" && configEnv.command === "serve"
-      if (resolvedOptionsResult.type === "error") throw resolvedOptionsResult.error;
-      userOptions = resolvedOptionsResult.userOptions;
-      normalizer = createInputNormalizer({
-        root: resolvedOptionsResult.userOptions.projectRoot,
-        preserveModulesRoot: undefined,
-        removeExtension: false,
-      });
-
-    },
-    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;
-      
-      // Get the client manifest
-      const clientManifestResult = tryManifest({
-        root: userOptions.projectRoot,
-        outDir: join(
-          userOptions.build.outDir,
-          userOptions.build.client
-        ),
-        ssrManifest: false,
-      });
-      if (clientManifestResult.type === "error") throw clientManifestResult.error;
-      clientManifest = clientManifestResult.manifest;
-      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;
-      }
-      const clientPath = clientManifest[key]?.file;
-
-      if (!clientPath) {
-        console.warn(
-          `[vite-plugin-react-server] Could not find client path for ${value}. Ignoring.`
-        );
-        return null;
-      }
-      return {
-        code: transformed.replace(key, clientPath),
-        map: null,
-      };
-    },
-  };
-}
+export const { reactTransformPlugin } = await import(`./plugin.${getCondition('')}.js`);

package/plugin/transformer/upgradeCssModuleCode.ts

@@ -0,0 +1,42 @@
+/**
+ * Upgrades CSS module code to track class usage.
+ * 
+ * This function modifies the CSS module exports to track which classes are actually used.
+ * It adds a proxy around the exports that records class usage in a global Set.
+ * 
+ * @param code The original CSS module code from Vite
+ * @returns The upgraded CSS module code with tracking
+ */
+export function upgradeCssModuleCode(code: string): string {
+  // Check if this is a CSS module export
+  if (code.includes('export default')) {
+    // Add tracking code to the CSS module exports
+    return code.replace(
+      /export default ({[\s\S]*?})/,
+      (_match: string, exports: string) => {
+        return `
+          const originalExports = ${exports};
+          const trackedExports = {};
+          
+          // Create a proxy to track class usage
+          Object.keys(originalExports).forEach(key => {
+            Object.defineProperty(trackedExports, key, {
+              get: function() {
+                // Track that this class was used
+                if (typeof window !== 'undefined') {
+                  window.__cssModuleClassesUsed = window.__cssModuleClassesUsed || new Set();
+                  window.__cssModuleClassesUsed.add(key);
+                }
+                return originalExports[key];
+              }
+            });
+          });
+          
+          export default trackedExports;
+        `;
+      }
+    );
+  }
+  
+  return code;
+} 

package/plugin/types/css-tracking.ts

@@ -0,0 +1,5 @@
+export interface CssTracking {
+  trackCssClass: (className: string) => void;
+  getUsedCssClasses: () => Set<string>;
+  clearUsedCssClasses: () => void;
+}