vite-plugin-react-server 0.3.19 → 1.0.0

package/plugin/config/resolveUserConfig.ts

@@ -9,6 +9,10 @@ import { join } from "path";
 // @ts-ignore
 import { globSync } from "fs";
 import type { OutputOptions } from "rollup";
+import { pluginRoot } from "../root.js";
+
+let stashedUserConfig: Record<string, ResolvedUserConfig | null> = {};
+
 export type ResolveUserConfigProps = {
   isClient?: boolean;
   isStatic?: boolean;
@@ -30,204 +34,241 @@ export function resolveUserConfig({
   userOptions,
   files,
 }: ResolveUserConfigProps): ResolveUserConfigReturn {
-  try {
-    // Get existing inputs
-    const root = config.root ?? userOptions.projectRoot ?? process.cwd();
+  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);
+  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 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 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),
-      });
+  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}`);
-        }
+    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 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 autoDiscoveredFiles = (inputs: Record<string, string>) => {
-      if (!files) return inputs;
+    }
+    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 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}`);
-        }
+    }
+    // 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;
-    };
+    }
+    return inputs;
+  };
 
-    // Add inputs based on condition
-    let inputs = isClient
-      ? autoDiscoveredClientFiles(clientEntry)
-      : autoDiscoveredServerFiles(autoDiscoveredFiles(serverEntry ?? {}));
+  // Add inputs based on condition
+  let inputs = isClient
+    ? autoDiscoveredClientFiles(clientEntry)
+    : customWorkerFiles(autoDiscoveredServerFiles(autoDiscoveredFiles(serverEntry ?? {})));
 
-    const envDir = isStatic ? userOptions.build.static : isClient
-      ? userOptions.build.client
-      : userOptions.build.server;
+  const pluginOutput = {
+    preserveModules: !isClient,
+    preserveModulesRoot: userOptions.build.preserveModulesRoot
+      ? userOptions.moduleBase
+      : undefined,
+    entryFileNames: userOptions.build.entryFile,
+    assetFileNames: userOptions.build.assetFile,
+    chunkFileNames: userOptions.build.chunkFile,
+    format: "esm",
+    exports: "named",
+    hoistTransitiveImports: false,
+    generatedCode: {
+      constBindings: true,
+      objectShorthand: true,
+    },
+    interop: "auto",
+  } satisfies OutputOptions;
 
-    const pluginOutput = {
-      preserveModules: !isClient,
-      preserveModulesRoot: userOptions.build.preserveModulesRoot
-        ? userOptions.moduleBase
-        : undefined,
-      entryFileNames: userOptions.build.entryFile,
-      assetFileNames: userOptions.build.assetFile,
-      chunkFileNames: userOptions.build.chunkFile,
-      format: "esm",
-      exports: "named",
-      hoistTransitiveImports: false,
-      generatedCode: {
-        constBindings: true,
-        objectShorthand: true,
-      },
-      interop: "auto",
-    } satisfies OutputOptions;
-    
-    let newOutput = Array.isArray(config.build?.rollupOptions?.output)
-      ? [...config.build?.rollupOptions?.output, pluginOutput]
-      : typeof config.build?.rollupOptions?.output === "object" &&
-        config.build?.rollupOptions?.output !== null
-      ? [config.build?.rollupOptions?.output, pluginOutput]
-      : pluginOutput;
+  let newOutput = Array.isArray(config.build?.rollupOptions?.output)
+    ? [...config.build?.rollupOptions?.output, pluginOutput]
+    : typeof config.build?.rollupOptions?.output === "object" &&
+      config.build?.rollupOptions?.output !== null
+    ? [config.build?.rollupOptions?.output, pluginOutput]
+    : pluginOutput;
 
-    if (isClient) {
-      // client plugin build options (client plugin still outputs server files)
-      return {
-        type: "success",
-        userConfig: {
-          ...config,
-          root: root,
-          mode: configEnv.mode ?? configEnv.command === "build" ? "production" : "development",
-          resolve: {
-            external: ["react", "react-dom"],
-            alias: {},
-          },
-          ssr: {
-            target: "node",
-            external: [
-              "react",
-              "react-dom",
-              "react-server-dom-esm/client.browser",
-            ],
-            resolve: {
-              externalConditions: ["react-server"],
-            },
-          },
-          // client build options
-          build: {
-            ...config.build,
-            emptyOutDir: config.build?.emptyOutDir ?? true,
-            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: typeof config.build?.ssr === "boolean" ? config.build?.ssr : configEnv.isSsrBuild ?? false,
-            manifest: config.build?.manifest ?? `.vite/manifest.json`,
-            ssrManifest: config.build?.ssrManifest ?? `.vite/ssr-manifest.json`,
-            ssrEmitAssets: config.build?.ssrEmitAssets ?? true,
-            rollupOptions: {
-              ...config.build?.rollupOptions,
-              input: inputs,
-              output: newOutput,
-              preserveEntrySignatures: "exports-only",
-            },
-          },
-        },
-      };
-    }
-    // server build options
-    if(configEnv.isSsrBuild === false) {
-      configEnv.isSsrBuild = true
-    }
-    return {
-      type: "success",
-      userConfig: {
-        ...config,
-        root: root,
-        mode: configEnv.mode ?? configEnv.command === "build" ? "production" : "development",
+  if (isClient) {
+    // client plugin build options (client plugin still outputs server files)
+    stashedUserConfig[envId] = {
+      ...config,
+      root: root,
+      mode:
+        configEnv.mode ?? configEnv.command === "build"
+          ? "production"
+          : "development",
+      resolve: {
+        external: ["react", "react-dom"],
+        alias: {},
+      },
+      ssr: {
+        target: "node",
+        external: ["react", "react-dom", "react-server-dom-esm/client.browser"],
         resolve: {
           externalConditions: ["react-server"],
         },
-        // server build options
-        build: {
-          ...config.build,
-          emptyOutDir: config.build?.emptyOutDir ?? true,
-          outDir: join(userOptions.build.outDir, envDir),
-          target: config.build?.target ?? "node18",
-          minify: config.build?.minify ?? true,
-          ssr: typeof config.build?.ssr === "boolean" ? config.build?.ssr : configEnv.isSsrBuild ?? true,
-          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,
-          assetsDir: config.build?.assetsDir ?? userOptions.build.assetsDir,
-          rollupOptions: {
-            ...config.build?.rollupOptions,
-            input: inputs,
-            preserveEntrySignatures: config.build?.rollupOptions?.preserveEntrySignatures ?? "strict",
-            output: newOutput,
-          },
+      },
+      // client build options
+      build: {
+        ...config.build,
+        emptyOutDir: config.build?.emptyOutDir ?? true,
+        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,
+        rollupOptions: {
+          ...config.build?.rollupOptions,
+          input: inputs,
+          output: newOutput,
+          preserveEntrySignatures: "exports-only",
+        },
+      },
+    };
+  } else {
+    // server build options
+    if (configEnv.isSsrBuild === false) {
+      configEnv.isSsrBuild = true;
+    }
+    stashedUserConfig[envId] = {
+      ...config,
+      root: root,
+      mode:
+        configEnv.mode ?? configEnv.command === "build"
+          ? "production"
+          : "development",
+      resolve: {
+        externalConditions: ["react-server"],
+      },
+      // server build options
+      build: {
+        ...config.build,
+        emptyOutDir: config.build?.emptyOutDir ?? true,
+        outDir: join(userOptions.build.outDir, envDir),
+        target: config.build?.target ?? "node18",
+        minify: config.build?.minify ?? true,
+        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,
+        assetsDir: config.build?.assetsDir ?? userOptions.build.assetsDir,
+        rollupOptions: {
+          ...config.build?.rollupOptions,
+          input: inputs,
+          preserveEntrySignatures:
+            config.build?.rollupOptions?.preserveEntrySignatures ?? "strict",
+          output: newOutput,
         },
       },
     };
-  } catch (error) {
+  }
+  if (!stashedUserConfig[envId]) {
     return {
       type: "error",
-      error:
-        error instanceof Error ? error : new Error("Failed to resolve config"),
+      error: new Error("Failed to resolve config"),
     };
   }
+  return {
+    type: "success",
+    userConfig: stashedUserConfig[envId],
+  };
 }

package/plugin/css-collector-inline.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { join } from "node:path";
+import type {  InlineCssCollectorProps } from "./types.js";
+import { readFileSync } from "node:fs";
+
+interface CssContent {
+  type?: string;
+  content: string;
+  key?: string;
+  path: string;
+}
+
+/**
+ * A component that inlines pre-transformed CSS content.
+ * Expects cssFiles to be an array of CssContent objects with the content already loaded.
+ */
+export function InlineCssCollector({
+  children,
+  cssFiles,
+  moduleRootPath,
+}: InlineCssCollectorProps) {
+  return React.createElement(
+    React.Fragment,
+    null,
+    cssFiles.map((file, index) => {
+      if (typeof file === "string") {
+        let filePath = file as string;
+        if(process.env["NODE_ENV"] === "development") {
+          return React.createElement("link", {
+            key: file,
+            rel: "stylesheet",
+            href: filePath,
+          });
+        }
+        return React.createElement(
+          "style",
+          {
+            key: file,
+            type: "text/css",
+          },
+          readFileSync(join(moduleRootPath, filePath), "utf-8")
+        );
+      }
+
+      const { type, content, key, path } = file as CssContent;
+      return React.createElement(
+        "style",
+        {
+          key: key ?? path ?? index,
+          type: type ?? "text/css",
+          ...(process.env["NODE_ENV"] === "development" && {
+            "data-vite-dev-id": join(moduleRootPath, path),
+          }),
+        },
+        content
+      );
+    }),
+    children
+  );
+}

package/plugin/css-collector.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { join } from "node:path";
+
+/**
+ * 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
+  );
+}
+