vite-plugin-react-server 1.0.2 → 1.1.0

package/plugin/config/resolveUserConfig.ts

@@ -1,25 +1,20 @@
 import type { ConfigEnv, UserConfig } from "vite";
 import type {
-  CheckFilesExistReturn,
   ResolvedUserConfig,
   ResolvedUserOptions,
+  AutoDiscoveredFiles,
 } from "../types.js";
-import { createInputNormalizer } from "../helpers/inputNormalizer.js";
-import { join } from "path";
-// @ts-ignore
-import { globSync } from "fs";
+import { join } from "node:path";
 import type { OutputOptions } from "rollup";
-import { pluginRoot } from "../root.js";
 
 let stashedUserConfig: Record<string, ResolvedUserConfig | null> = {};
 
 export type ResolveUserConfigProps = {
-  isClient?: boolean;
-  isStatic?: boolean;
+  condition: "react-client" | "react-server";
   config: UserConfig;
   configEnv: ConfigEnv;
   userOptions: ResolvedUserOptions;
-  files?: CheckFilesExistReturn;
+  autoDiscoveredFiles: Pick<AutoDiscoveredFiles, "inputs" | "staticManifest">;
 };
 
 export type ResolveUserConfigReturn =
@@ -27,151 +22,60 @@ export type ResolveUserConfigReturn =
   | { type: "error"; error: Error };
 
 export function resolveUserConfig({
-  isClient = false,
-  isStatic = false,
+  condition,
   config,
   configEnv,
   userOptions,
-  files,
+  autoDiscoveredFiles,
 }: ResolveUserConfigProps): ResolveUserConfigReturn {
-  if(isStatic) {
-    const serverConfig = stashedUserConfig[`${userOptions.build.server}-ssr`]
-    if(!serverConfig) {
-      return {
-        type: "error",
-        error: new Error("Static plugin should run after the server plugin"),
-      }
-    }
-    return {
-      type: "success",
-      userConfig: serverConfig,
-    }
-  }
-  const envDir = isStatic
-    ? userOptions.build.static
-    : isClient
-    ? userOptions.build.client
-    : userOptions.build.server;
   const ssr =
     typeof config.build?.ssr === "boolean"
       ? config.build?.ssr
-      : configEnv.isSsrBuild || (!isClient && !isStatic);
+      : Boolean(configEnv.isSsrBuild) || condition === "react-server";
+  const envDir =
+    condition === "react-client" && ssr
+      ? userOptions.build.client
+      : condition === "react-client"
+      ? userOptions.build.static
+      : userOptions.build.server;
   const envId = `${envDir}${ssr ? "-ssr" : ""}`;
+
   if (stashedUserConfig[envId]) {
-    console.log(`[RSC] Using cached config for ${envId}`);
     return {
       type: "success",
       userConfig: stashedUserConfig[envId],
     };
   }
+
   // Get existing inputs
   const root = config.root ?? userOptions.projectRoot ?? process.cwd();
-
-  const normalizer = createInputNormalizer({
-    root,
-    preserveModulesRoot: userOptions.build.preserveModulesRoot
-      ? userOptions.moduleBase
-      : undefined,
-    removeExtension: true,
-  });
-
-  const serverEntry = userOptions.serverEntry
-    ? Object.fromEntries([
-        normalizer([userOptions.serverEntry, userOptions.serverEntry]),
-      ])
-    : null;
-  const clientEntry = userOptions.clientEntry
-    ? Object.fromEntries(
-        [
-          [userOptions.clientEntry, userOptions.clientEntry],
-          ["index.html", "index.html"],
-        ].map(normalizer)
-      )
-    : { "index.html": "index.html" };
-
-  const autoDiscoveredClientFiles = (inputs: Record<string, string>) => {
-    const allFiles = globSync(`**/*.client.*`, {
-      cwd: join(root, userOptions.moduleBase),
-    });
-
-    for (const file of allFiles) {
-      const [key, value] = normalizer(join(userOptions.moduleBase, file));
-      if (!inputs[key]) {
-        inputs[key] = value;
-      } else {
-        console.warn(`[RSC] Client file already exists: ${key}`);
-      }
-    }
-    return inputs;
-  };
-  const autoDiscoveredServerFiles = (inputs: Record<string, string>) => {
-    const allFiles = globSync(`${userOptions.moduleBase}/**/*.server.*`, {
-      cwd: join(root, userOptions.moduleBase),
-    });
-    for (const file of allFiles) {
-      const [key, value] = normalizer(join(userOptions.moduleBase, file));
-      if (!inputs[key]) {
-        inputs[key] = value;
-      } else {
-        console.warn(`[RSC] Server file already exists: ${key}`);
-      }
-    }
-    return inputs;
-  };
-  const customWorkerFiles = (inputs: Record<string, string>) => {
-    const customRscWorker =  !userOptions.rscWorkerPath.startsWith(pluginRoot)
-    const customHtmlWorker =  !userOptions.htmlWorkerPath.startsWith(pluginRoot)
-    if(customRscWorker && !inputs['rsc-worker']) {
-      inputs['rsc-worker'] = userOptions.rscWorkerPath
-    }
-    if(customHtmlWorker && !inputs['html-worker']) {
-      inputs['html-worker'] = userOptions.htmlWorkerPath
-    }
-    return inputs
-  }
-  const autoDiscoveredFiles = (inputs: Record<string, string>) => {
-    if (!files) return inputs;
-
-    // Add page files without extra prefix
-    for (const [key, value] of files.pageMap) {
-      if (!inputs[key]) {
-        inputs[key] = value;
-      } else {
-        console.warn(`[RSC] Page file already exists: ${key}`);
-      }
-    }
-    // Add props files without extra prefix
-    for (const [key, value] of files.propsMap) {
-      if (!inputs[key]) {
-        inputs[key] = value;
-      } else {
-        console.warn(`[RSC] Props file already exists: ${key}`);
-      }
-    }
-    return inputs;
-  };
-
-  // Add inputs based on condition
-  let inputs = isClient
-    ? autoDiscoveredClientFiles(clientEntry)
-    : customWorkerFiles(autoDiscoveredServerFiles(autoDiscoveredFiles(serverEntry ?? {})));
-
+  const staticEntries =
+    ssr && autoDiscoveredFiles.staticManifest
+      ? Object.entries(autoDiscoveredFiles.staticManifest)
+      : [];
   const pluginOutput = {
-    preserveModules: !isClient,
     preserveModulesRoot: userOptions.build.preserveModulesRoot
       ? userOptions.moduleBase
       : undefined,
-    entryFileNames: userOptions.build.entryFile,
-    assetFileNames: userOptions.build.assetFile,
-    chunkFileNames: userOptions.build.chunkFile,
+    entryFileNames: (info) => {
+      if (ssr) {
+        const entry = staticEntries.find(([, { file }]) =>
+          file.startsWith(info.name)
+        );
+        if (entry) {
+          return entry[1].file;
+        }
+      }
+      return userOptions.build.entryFile(info, ssr);
+    },
+    assetFileNames: (i) => {
+      return userOptions.build.assetFile(i, false);
+    },
+    chunkFileNames: (i) => {
+      return userOptions.build.chunkFile(i, ssr);
+    },
     format: "esm",
     exports: "named",
-    hoistTransitiveImports: false,
-    generatedCode: {
-      constBindings: true,
-      objectShorthand: true,
-    },
-    interop: "auto",
   } satisfies OutputOptions;
 
   let newOutput = Array.isArray(config.build?.rollupOptions?.output)
@@ -180,80 +84,125 @@ export function resolveUserConfig({
       config.build?.rollupOptions?.output !== null
     ? [config.build?.rollupOptions?.output, pluginOutput]
     : pluginOutput;
-
-  if (isClient) {
+  const mode =
+    process.env["NODE_ENV"] === "development"
+      ? "development"
+      : config.mode
+      ? config.mode
+      : configEnv.mode
+      ? configEnv.mode
+      : configEnv.command === "build"
+      ? "production"
+      : "development";
+  const minify = config.build?.minify;
+  if (condition === "react-client") {
     // client plugin build options (client plugin still outputs server files)
     stashedUserConfig[envId] = {
       ...config,
       root: root,
-      mode:
-        configEnv.mode ?? configEnv.command === "build"
-          ? "production"
-          : "development",
+      mode: mode,
       resolve: {
-        external: ["react", "react-dom"],
-        alias: {},
+        ...config.resolve,
+        external: config.resolve?.external ?? [
+          "react",
+          "react-dom",
+          "react-server-dom-esm/client",
+        ],
       },
       ssr: {
-        target: "node",
-        external: ["react", "react-dom", "react-server-dom-esm/client.browser"],
+        ...config.ssr,
+        target: config.ssr?.target ?? "node",
+        optimizeDeps: {
+          ...config.ssr?.optimizeDeps,
+          include: config.ssr?.optimizeDeps?.include ?? [
+            "react",
+            "react-dom",
+            "react-server-dom-esm/client",
+          ],
+        },
         resolve: {
-          externalConditions: ["react-server"],
+          ...config.ssr?.resolve,
+          externalConditions: config.ssr?.resolve?.externalConditions ?? [
+            "react-server",
+          ],
         },
       },
       // client build options
       build: {
         ...config.build,
         emptyOutDir: config.build?.emptyOutDir ?? true,
-        outDir: join(userOptions.build.outDir, envDir),
+        outDir: config.build?.outDir ?? join(userOptions.build.outDir, envDir),
         assetsDir: config.build?.assetsDir ?? userOptions.build.assetsDir,
         copyPublicDir: config.build?.copyPublicDir ?? true,
         // modern browsers
-        target: ["esnext"],
-        minify: true,
-        ssr: ssr,
-        manifest: config.build?.manifest ?? `.vite/manifest.json`,
-        ssrManifest: config.build?.ssrManifest ?? `.vite/ssr-manifest.json`,
-        ssrEmitAssets: config.build?.ssrEmitAssets ?? true,
+        target: config.build?.target ?? ["esnext"],
+        minify: minify,
         rollupOptions: {
           ...config.build?.rollupOptions,
-          input: inputs,
+          input: autoDiscoveredFiles.inputs,
           output: newOutput,
-          preserveEntrySignatures: "exports-only",
+          preserveEntrySignatures:
+            config.build?.rollupOptions?.preserveEntrySignatures ??
+            "exports-only",
         },
+        ssr: ssr,
+        manifest: config.build?.manifest ?? `.vite/manifest.json`,
+        ssrManifest: config.build?.ssrManifest ?? `.vite/ssr-manifest.json`,
+        ssrEmitAssets: config.build?.ssrEmitAssets ?? true,
+        cssCodeSplit:
+          typeof config.build?.cssCodeSplit === "boolean"
+            ? config.build?.cssCodeSplit
+            : true,
       },
     };
   } else {
-    // server build options
-    if (configEnv.isSsrBuild === false) {
-      configEnv.isSsrBuild = true;
-    }
     stashedUserConfig[envId] = {
       ...config,
       root: root,
-      mode:
-        configEnv.mode ?? configEnv.command === "build"
-          ? "production"
-          : "development",
+      mode: mode,
       resolve: {
-        externalConditions: ["react-server"],
+        ...config.resolve,
+        externalConditions: config.resolve?.externalConditions ?? [
+          "react-server",
+        ],
+      },
+      ssr: {
+        ...config.ssr,
+        target: config.ssr?.target ?? "node",
+        resolve: {
+          ...config.ssr?.resolve,
+          externalConditions: config.ssr?.resolve?.externalConditions ?? [
+            "react-server",
+          ],
+        },
       },
       // server build options
       build: {
         ...config.build,
         emptyOutDir: config.build?.emptyOutDir ?? true,
-        outDir: join(userOptions.build.outDir, envDir),
+        outDir: config.build?.outDir ?? join(userOptions.build.outDir, envDir),
         target: config.build?.target ?? "node18",
-        minify: config.build?.minify ?? true,
+        minify: minify,
         ssr: ssr,
         manifest: config.build?.manifest ?? `.vite/manifest.json`,
         ssrManifest: config.build?.ssrManifest ?? `.vite/ssr-manifest.json`,
-        ssrEmitAssets: config.build?.ssrEmitAssets ?? true,
-        copyPublicDir: config.build?.copyPublicDir ?? isStatic,
+        ssrEmitAssets:
+          typeof config.build?.ssrEmitAssets === "boolean"
+            ? config.build?.ssrEmitAssets
+            : true,
+        copyPublicDir:
+          typeof config.build?.copyPublicDir === "boolean"
+            ? config.build?.copyPublicDir
+            : true,
         assetsDir: config.build?.assetsDir ?? userOptions.build.assetsDir,
+        // Ensure CSS files are output to static directory
+        cssCodeSplit:
+          typeof config.build?.cssCodeSplit === "boolean"
+            ? config.build?.cssCodeSplit
+            : true,
         rollupOptions: {
           ...config.build?.rollupOptions,
-          input: inputs,
+          input: autoDiscoveredFiles.inputs,
           preserveEntrySignatures:
             config.build?.rollupOptions?.preserveEntrySignatures ?? "strict",
           output: newOutput,
@@ -267,6 +216,7 @@ export function resolveUserConfig({
       error: new Error("Failed to resolve config"),
     };
   }
+
   return {
     type: "success",
     userConfig: stashedUserConfig[envId],

package/plugin/copy.ts

@@ -0,0 +1,39 @@
+import { copyFile, mkdir, readdir, stat } from "node:fs/promises";
+import { dirname, join } from "node:path";
+
+export async function copy({
+  src,
+  dest,
+  exclude,
+  include,
+}: {
+  src: string;
+  dest: string;
+  exclude: ((src: string) => boolean)[];
+  include?: ((src: string) => boolean)[];
+}) {
+  // handle file case first
+  const stats = await stat(src);
+  if (stats.isFile()) {
+    // handle exclusions
+    if (exclude && exclude.some((f) => f(src))) {
+      return;
+    } else if (!include || include.some((f) => f(src))) {
+      const dir = dirname(dest);
+      // wait 'till last moment to prevent empty directories
+      await mkdir(dir, { recursive: true });
+      await copyFile(src, dest);
+    }
+  } else if (stats.isDirectory()) {
+    const entries = await readdir(src);
+    for (const entry of entries) {
+      let newSrc = join(src, entry);
+      copy({
+        src: newSrc,
+        dest: join(dest, entry),
+        exclude: exclude,
+        include: include,
+      });
+    }
+  }
+}

package/plugin/css-collector-elements.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import type { CssCollectorProps, CssContent } from "./types.js";
+
+// Create link elements for each CSS file
+export const CssCollectorElements = ({
+  cssFiles,
+}: Pick<
+  CssCollectorProps,
+  "cssFiles"
+>) =>
+  Array.from(cssFiles?.values() ?? []).map((cssFile: CssContent) => {
+    // Emit style tag for inline CSS
+    const { as: As, id, children, precedence, type, ...rest } = cssFile;
+    if(As !== "link" && (typeof children === "string" || React.isValidElement(children))) {
+      // style tag
+      // since we can't bubble up the style tags, we need to be creative
+      return <As {...rest} type={type ?? "text/css"} key={cssFile.id}>{children}</As>;
+    }
+    // link tag
+    return <As {...rest} key={cssFile.id} precedence={precedence} />;
+  });

package/plugin/css-collector.tsx

@@ -1,62 +1,29 @@
 import React from "react";
-import { join } from "node:path";
+import type { CssCollectorProps } from "./types.js";
+import { CssCollectorElements } from "./css-collector-elements.js";
 
 /**
  * A component that emits <link> tags for CSS files during streaming.
  * The high precedence ensures they bubble up to the document head.
  */
 export function CssCollector({
-  children,
-  cssFiles,
-  moduleBaseURL,
-  route = "/",
-}: {
-  children?: React.ReactNode;
-  cssFiles: string[];
-  moduleBaseURL?: string;
-  route?: string;
-}) {
-  // Calculate depth and prefix based on route
-  const depth = route.split('/').filter(Boolean).length;
-  const prefix = depth > 0 ? '../'.repeat(depth) : './';
-  const base = typeof moduleBaseURL === 'string' && moduleBaseURL !== '' ? moduleBaseURL : prefix;
-
-  const elements = cssFiles.map((file) => {
-    // Handle pre-processed CSS content - skip in link mode
-    if (typeof file === "object" && !React.isValidElement(file)) {
-      return null;
-    }
-    // Handle string paths
-    if (typeof file === "string" && file.endsWith('.css')) {
-      // Handle different types of paths
-      let url = file;
-      if (file.startsWith('http') || file.startsWith('data:')) {
-        // Keep absolute URLs as is
-        url = file;
-      } else if (file.startsWith('/')) {
-        // Convert absolute paths to relative
-        url = base + file.slice(1);
-      } else if (!file.startsWith('./') && !file.startsWith('../')) {
-        // Add prefix to relative paths that don't start with ./ or ../
-        url = join(base, file);
-      }
-      
-      return React.createElement("link", {
-        key: file,
-        rel: "stylesheet",
-        href: url,
-        precedence: "high",
-      });
-    }
-
-    return null;
-  }).filter(Boolean);
-
-  return React.createElement(
-    React.Fragment,
-    null,
-    ...elements,
-    children
+  children = null,
+  cssFiles = new Map(),
+  as: As = React.Fragment,
+  ...props
+}: Pick<CssCollectorProps, "children" | "cssFiles" | "as">) {
+  if (As === React.Fragment) {
+    return (
+      <>
+        {children}
+        <CssCollectorElements cssFiles={cssFiles} />
+      </>
+    );
+  }
+  return (
+    <As {...props}>
+      {children}
+      <CssCollectorElements cssFiles={cssFiles} />
+    </As>
   );
 }
-

package/plugin/helpers/cleanObject.ts

@@ -0,0 +1,50 @@
+import type { SerializableRecord } from "../types.js";
+
+// Helper function to serialize RegExp objects
+function serializeRegExp(regex: RegExp): { source: string; flags: string; __isRegExp: boolean } {
+  return {
+    source: regex.source,
+    flags: regex.flags,
+    __isRegExp: true
+  };
+}
+
+export function cleanObject<T>(obj: T, knownNonSerializableFunctions: Set<string> = new Set(), currentPath: string = ''): SerializableRecord & T {
+  if (obj === null || obj === undefined) return obj as Extract<SerializableRecord, T>;
+  if (typeof obj !== 'object') return obj as Extract<SerializableRecord, T>;
+  if (obj instanceof RegExp) return serializeRegExp(obj) as unknown as Extract<SerializableRecord, T>;
+  if (Array.isArray(obj)) {
+    return obj.map((x, i) => cleanObject(x, knownNonSerializableFunctions, `${currentPath}[${i}]`)).filter(x => x !== undefined) as Extract<SerializableRecord, T>;
+  }
+  
+  const result: Record<string, any> = {};
+  for (const [key, value] of Object.entries(obj)) {
+    const fullPath = currentPath ? `${currentPath}.${key}` : key;
+    const normalizedPath = fullPath.replace(/\[\d+\]/g, '[]');
+    // Skip if it's a function or known non-serializable property
+    if (typeof value === 'function' || knownNonSerializableFunctions.has(normalizedPath) || knownNonSerializableFunctions.has(key)) {
+      continue;
+    }
+
+    // Handle nested objects
+    if (typeof value === 'object' && value !== null) {
+      // Check if the object has any functions
+      const hasFunctions = Object.entries(value).some(([k, v]) => {
+        const nestedPath = `${normalizedPath}.${k}`;
+        return typeof v === 'function' || knownNonSerializableFunctions.has(nestedPath);
+      });
+
+      if (hasFunctions) {
+        continue;
+      }
+
+      const cleaned = cleanObject(value, knownNonSerializableFunctions, `${normalizedPath}.${key}`);
+      if (cleaned !== undefined && Object.keys(cleaned).length > 0) {
+        result[key] = cleaned;
+      }
+    } else {
+      result[key] = value;
+    }
+  }
+  return (Object.keys(result).length > 0 ? result : {}) as Extract<SerializableRecord, T>;
+}