vite-plugin-react-server 1.1.7 → 1.1.8

package/plugin/config/resolveUserConfig.ts

@@ -5,7 +5,7 @@ import type {
   AutoDiscoveredFiles,
 } from "../types.js";
 import { join } from "node:path";
-import type { OutputOptions } from "rollup";
+import type { OutputOptions, PreRenderedAsset, PreRenderedChunk } from "rollup";
 
 let stashedUserConfig: Record<string, ResolvedUserConfig | null> = {};
 
@@ -49,30 +49,49 @@ export function resolveUserConfig({
 
   // Get existing inputs
   const root = config.root ?? userOptions.projectRoot ?? process.cwd();
-  const staticEntries =
-    ssr && autoDiscoveredFiles.staticManifest
-      ? Object.entries(autoDiscoveredFiles.staticManifest)
-      : [];
+
+  const handleSsrName = <T extends PreRenderedChunk | PreRenderedAsset>(
+    info: T,
+    input: string | null,
+    fallback: (info: T, ssr: boolean) => string,
+    ssr: boolean
+  ) => {
+    if (!ssr || !input) {
+      return fallback(info, false);
+    }
+    const [, value] = userOptions.normalizer(
+      input
+    );
+    const entry = autoDiscoveredFiles.staticManifest[value];
+    if(entry?.name && info.type === 'asset' && userOptions.autoDiscover.cssPattern(value)) {
+      const withoutExt = entry.name?.split('.')[0]
+      const found = entry.css?.find(css => css.startsWith(withoutExt as string))
+      if(found) {
+        return found
+      } else {
+        return entry.file
+      }
+    }
+    if (entry) {
+      return entry.file
+    }
+    return fallback(info, true);
+  };
   const pluginOutput = {
     preserveModulesRoot: userOptions.build.preserveModulesRoot
       ? userOptions.moduleBase
       : undefined,
     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);
+      const input = info.facadeModuleId
+      return handleSsrName(info,  input, userOptions.build.entryFile, ssr);
     },
     assetFileNames: (i) => {
-      return userOptions.build.assetFile(i, false);
+      const input = i.originalFileNames[0]
+      return handleSsrName(i, input, userOptions.build.assetFile, ssr);
     },
     chunkFileNames: (i) => {
-      return userOptions.build.chunkFile(i, ssr);
+      const input = i.facadeModuleId 
+      return handleSsrName(i, input, userOptions.build.chunkFile, ssr);
     },
     format: "esm",
     exports: "named",
@@ -84,6 +103,7 @@ export function resolveUserConfig({
       config.build?.rollupOptions?.output !== null
     ? [config.build?.rollupOptions?.output, pluginOutput]
     : pluginOutput;
+  const vitePrefix = config.envPrefix ?? "VITE_";
   const mode =
     process.env["NODE_ENV"] === "development"
       ? "development"
@@ -97,11 +117,12 @@ export function resolveUserConfig({
   const minify = config.build?.minify;
   if (condition === "react-client") {
     // client plugin build options (client plugin still outputs server files)
-    stashedUserConfig[envId] = {
+    const clientConfig = {
       ...config,
       root: root,
       mode: mode,
       base: userOptions.moduleBasePath,
+      envPrefix: vitePrefix,
       resolve: {
         ...config.resolve,
         external: config.resolve?.external ?? [
@@ -134,7 +155,7 @@ export function resolveUserConfig({
         emptyOutDir: config.build?.emptyOutDir ?? true,
         outDir: config.build?.outDir ?? join(userOptions.build.outDir, envDir),
         assetsDir: config.build?.assetsDir ?? userOptions.build.assetsDir,
-        copyPublicDir: config.build?.copyPublicDir ?? true,
+        copyPublicDir: typeof config.build?.copyPublicDir === "boolean" ? config.build?.copyPublicDir : !ssr,
         // modern browsers
         target: config.build?.target ?? ["esnext"],
         minify: minify,
@@ -155,13 +176,19 @@ export function resolveUserConfig({
             ? config.build?.cssCodeSplit
             : true,
       },
+    } satisfies ResolvedUserConfig;
+    stashedUserConfig[envId] = clientConfig;
+    return {
+      type: "success",
+      userConfig: clientConfig,
     };
   } else {
-    stashedUserConfig[envId] = {
+    const serverConfig = {
       ...config,
       root: root,
       mode: mode,
       base: userOptions.moduleBasePath,
+      envPrefix: vitePrefix,
       resolve: {
         ...config.resolve,
         externalConditions: config.resolve?.externalConditions ?? [
@@ -170,11 +197,11 @@ export function resolveUserConfig({
       },
       define: {
         ...config.define,
-        "process.env.VITE_SSR": `"1"`,
-        "process.env.VITE_DEV": `"${mode === "development" ? "1" : "0"}"`,
-        "process.env.VITE_PROD": `"${mode === "production" ? "1" : "0"}"`,
-        "process.env.VITE_MODE": `"${mode}"`,
-        "process.env.VITE_BASE_URL": `"${
+        [`process.env.${vitePrefix}SSR`]: `"1"`,
+        [`process.env.${vitePrefix}DEV`]: `"${mode === "development" ? "1" : "0"}"`,
+        [`process.env.${vitePrefix}PROD`]: `"${mode === "production" ? "1" : "0"}"`,
+        [`process.env.${vitePrefix}MODE`]: `"${mode}"`,
+        [`process.env.${vitePrefix}BASE_URL`]: `"${
           userOptions.moduleBasePath === "" ||
           userOptions.moduleBasePath === "/"
             ? "/"
@@ -186,7 +213,14 @@ export function resolveUserConfig({
       ssr: {
         ...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: {
           ...config.ssr?.resolve,
           externalConditions: config.ssr?.resolve?.externalConditions ?? [
@@ -211,7 +245,7 @@ export function resolveUserConfig({
         copyPublicDir:
           typeof config.build?.copyPublicDir === "boolean"
             ? config.build?.copyPublicDir
-            : true,
+            : false,
         assetsDir: config.build?.assetsDir ?? userOptions.build.assetsDir,
         // Ensure CSS files are output to static directory
         cssCodeSplit:
@@ -226,17 +260,11 @@ export function resolveUserConfig({
           output: newOutput,
         },
       },
-    };
-  }
-  if (!stashedUserConfig[envId]) {
+    } satisfies ResolvedUserConfig;
+    stashedUserConfig[envId] = serverConfig;
     return {
-      type: "error",
-      error: new Error("Failed to resolve config"),
+      type: "success",
+      userConfig: serverConfig,
     };
   }
-
-  return {
-    type: "success",
-    userConfig: stashedUserConfig[envId],
-  };
 }

package/plugin/helpers/collectBundleManifestCss.ts

@@ -1,160 +1 @@
-import type { CreateHandlerOptions, CssContent } from "../types.js";
-import { createCssProps } from "./createCssProps.js";
-import { join } from "node:path";
-import { readFile } from "node:fs/promises";
-
-type CssCollectionOptions = Pick<
-  CreateHandlerOptions<unknown, React.ComponentType<unknown>>,
-  | "projectRoot"
-  | "build"
-  | "moduleBaseURL"
-  | "moduleBasePath"
-  | "moduleRootPath"
-  | "css"
-  | "cssFiles"
-  | "manifest"
->
-
-/**
- * Recursively collects CSS files from a bundle manifest
- */
-async function collectCssFromModule(
-  moduleKey: string,
-  manifest: Record<string, any>,
-  cssMap: Map<string, CssContent>,
-  options: CssCollectionOptions
-): Promise<void> {
-  const mod = manifest[moduleKey];
-  if (!mod) return;
-
-  // Handle CSS imports
-  if (mod.imports) {
-    for (const importPath of mod.imports) {
-      if (importPath === moduleKey) continue;
-      if (importPath) {
-        const cssEntry = manifest[importPath];
-        // Handle CSS array
-        if (Array.isArray(cssEntry.css)) {
-          for (const cssFile of cssEntry.css) {
-            if (cssMap.has(cssFile)) continue;
-            const file = join(
-              options.projectRoot,
-              options.build.outDir,
-              options.build.static,
-              cssFile
-            );
-            const code =
-              "source" in cssEntry && typeof cssEntry.source === "string"
-                ? cssEntry.source
-                : await readFile(file, "utf-8");
-            cssMap.set(
-              importPath,
-              createCssProps({
-                id: cssFile,
-                css: options.css,
-                code,
-                moduleBaseURL: options.moduleBaseURL,
-                moduleBasePath: options.moduleBasePath,
-                moduleRootPath: options.moduleRootPath,
-                projectRoot: options.projectRoot,
-              })
-            );
-          }
-        }
-      }
-      // Recursively process non-CSS imports
-      await collectCssFromModule(importPath, manifest, cssMap, options);
-    }
-  }
-
-  // Handle direct CSS files
-  if (mod.css) {
-    for (const cssFile of mod.css) {
-      if (cssMap.has(cssFile)) {
-        continue
-      }
-      try {
-        const file = join(
-          options.projectRoot,
-          options.build.outDir,
-          options.build.server,
-          cssFile
-        );
-        const code =
-          "code" in manifest[cssFile] &&
-          typeof manifest[cssFile].code === "string"
-            ? manifest[cssFile].code
-            : await readFile(file, "utf-8");
-        cssMap.set(
-          moduleKey,
-          createCssProps({
-            id: cssFile,
-            css: options.css,
-            code,
-            moduleBaseURL: options.moduleBaseURL,
-            moduleBasePath: options.moduleBasePath,
-            moduleRootPath: options.moduleRootPath,
-            projectRoot: options.projectRoot,
-          })
-        );
-      } catch {
-        continue;
-      }
-    }
-  }
-}
-
-/**
- * Collects CSS files from a bundle manifest using async generators
- */
-export async function collectBundleManifestCss(
-  pages: string[] | string,  
-  options: CssCollectionOptions,
-  _bundleManifest: Record<string, any>
-): Promise<Map<string, CssContent>> {
-  const cssMap = new Map<string, CssContent>();
-  if (options.cssFiles) {
-    for (const [key, value] of options.cssFiles.entries()) {
-      if (typeof value !== "string") {
-        cssMap.set(key, value);
-        continue;
-      }
-      const file = join(
-        options.projectRoot,
-        options.build.outDir,
-        options.build.server,
-        value
-      );
-      const code =
-        options.manifest != null &&
-        value in options.manifest &&
-        "code" in options.manifest[value] &&
-        typeof options.manifest[value].code === "string"
-          ? options.manifest[value].code
-          : await readFile(file, "utf-8");
-      cssMap.set(
-        file,
-        createCssProps({
-          id: file,
-          code: code,
-          css: options.css,
-          moduleBaseURL: options.moduleBaseURL,
-          moduleBasePath: options.moduleBasePath,
-          moduleRootPath: options.moduleRootPath,
-          projectRoot: options.projectRoot,
-        })
-      );
-    }
-  }
-
-  // Process page and props modules
-  if (typeof pages === "string") {
-    await collectCssFromModule(pages, options.manifest, cssMap, options);
-  } else if (Array.isArray(pages)) {
-    for (const _id of pages) {
-      await collectCssFromModule(_id, options.manifest, cssMap, options);
-    }
-  }
-
-  return cssMap;
-}
+// deprecated

package/plugin/helpers/collectViteModuleGraphCss.ts

@@ -32,29 +32,33 @@ export async function collectViteModuleGraphCss<
   InlineCSS extends boolean | undefined = undefined
 >({
   moduleGraph,
-  pagePath,
   onCss,
-  loader,
   parentUrl,
-  moduleBaseURL,
-  moduleBasePath,
-  moduleRootPath,
-  projectRoot,
-  css,
-}: Pick<
-  CreateHandlerOptions<InlineCSS>,
-  | "pagePath"
-  | "moduleBaseURL"
-  | "moduleBasePath"
-  | "moduleRootPath"
-  | "projectRoot"
-  | "css"
-  | "loader"
-> & {
+  handlerOptions,
+}: {
   moduleGraph: ModuleGraph | EnvironmentModuleGraph;
   onCss?: (cssContent: CssContent, parentUrl: string) => void;
   parentUrl?: string;
+  handlerOptions: Pick<
+    CreateHandlerOptions<InlineCSS>,
+    | "pagePath"
+    | "moduleBaseURL"
+    | "moduleBasePath"
+    | "moduleRootPath"
+    | "projectRoot"
+    | "css"
+    | "loader"
+  >;
 }): Promise<CollectViteModuleGraphCssResult> {
+  const {
+    pagePath,
+    moduleBaseURL,
+    moduleBasePath,
+    moduleRootPath,
+    projectRoot,
+    css,
+    loader,
+  } = handlerOptions;
   if (!pagePath) return { type: "skip" };
 
   const cssFiles = new Map<string, CssContent>();
@@ -86,7 +90,7 @@ export async function collectViteModuleGraphCss<
     // Processing module
     if (mod.id.endsWith(".css")) {
       const string = await loader(mod.id + "?inline").then(
-        (m) => m?.['default'] ?? ""
+        (m) => m?.["default"] ?? ""
       );
       if (typeof string !== "string") {
         throw new Error(`CSS module ${mod.id}?inline did not return a string`);
@@ -96,11 +100,13 @@ export async function collectViteModuleGraphCss<
       const cssContent = createCssProps({
         id: mod?.url,
         code: string,
-        moduleBaseURL: moduleBaseURL,
-        moduleBasePath: moduleBasePath,
-        moduleRootPath: moduleRootPath,
-        projectRoot: projectRoot,
-        css: css,
+        userOptions: {
+          moduleBaseURL: moduleBaseURL,
+          moduleBasePath: moduleBasePath,
+          moduleRootPath: moduleRootPath,
+          projectRoot: projectRoot,
+          css: css,
+        },
       });
       cssFiles.set(mod?.url, cssContent);
       onCss?.(cssContent, parentUrl ?? pagePath);
@@ -119,14 +125,10 @@ export async function collectViteModuleGraphCss<
           ) {
             await walkModule(importedMod);
           } else {
-            throw new Error(
-              `Imported module has no id`
-            );
+            throw new Error(`Imported module has no id`);
           }
         } else {
-          throw new Error(
-            `Imported module is not an object`
-          );
+          throw new Error(`Imported module is not an object`);
         }
       }
     }

package/plugin/helpers/createCssProps.tsx

@@ -23,19 +23,22 @@ import { deserializeRegExp } from "./serializeUserOptions.js";
  */
 export const createCssProps = ({
   id,
-  css,
   code,
-  projectRoot,
-  moduleBaseURL,
-  moduleBasePath,
-  moduleRootPath,
+  userOptions,
 }: {
   id: string;
   code: string;
-} & Pick<
-  ResolvedUserOptions,
-  "css" | "moduleBaseURL" | "moduleBasePath" | "moduleRootPath" | "projectRoot"
->): CssContent => {
+  userOptions: Pick<
+    ResolvedUserOptions,
+    | "css"
+    | "moduleBaseURL"
+    | "moduleBasePath"
+    | "moduleRootPath"
+    | "projectRoot"
+  >;
+}): CssContent => {
+  const { css, moduleBaseURL, moduleBasePath, moduleRootPath, projectRoot } =
+    userOptions;
   // If we don't have a bundle entry, create a linked CSS file
   let inline = typeof code === "string" && code.length > css.inlineThreshold;
   // Normalize the ID to be relative to src/
@@ -73,13 +76,21 @@ export const createCssProps = ({
         : {}),
     } as CssContent<true>;
   }
-
+  const safeParseURL = (() => {
+    try {
+      return new URL(join(moduleBasePath, normalizedId), moduleBaseURL).href;
+    } catch (error) {
+      // if the url is not valid, we return the moduleBaseURL + the normalizedId
+      // dont make it a argument of join or it will mangle something like http:// into http:/
+      return moduleBaseURL + join(moduleBasePath, normalizedId);
+    }
+  })();
   // Default case
   return {
     id: normalizedId,
     as: "link",
     rel: "stylesheet",
-    href: join(moduleBaseURL, moduleBasePath, normalizedId),
+    href: safeParseURL,
     precedence: "high",
   } as CssContent<false>;
 };

package/plugin/helpers/createRscStream.tsx

@@ -1,6 +1,6 @@
 import { React, ReactDOMServer } from "../vendor.server.js";
 import type { CreateHandlerOptions, StreamMetrics } from "../types.js";
-import { join } from "node:path";
+import { performance } from "node:perf_hooks";
 export function createRscStream<
   T,
   C extends React.ComponentType<T>,
@@ -42,53 +42,50 @@ export function createRscStream<
 }):
   | { type: "success"; stream: any; metrics: StreamMetrics }
   | { type: "error"; error: Error; metrics: StreamMetrics } {
-  const startTime = performance.now()
-  const htmlIsFragment = Html == React.Fragment;
-  const url =
-    moduleBaseURL !== "" ? new URL(join(route, moduleBasePath), moduleBaseURL).toString() : route;
   let errorCount = 0;
   let streamError: Error | null = null;
-
-  if (!PageComponent) {
-    return {
-      type: "error",
-      error: new Error("PageComponent is required"),
-      metrics: {
-        chunks: 0,
-        bytes: 0,
-        backpressureCount: 0,
-        drainCount: 0,
-        errorCount: 0,
-        duration: 0,
-        startTime: 0,
-      },
-    };
-  }
-  const elements = htmlIsFragment ? (
-    <CssCollector
-      cssFiles={cssFiles}
-    >
-      <PageComponent {...(pageProps as any)} />
-    </CssCollector>
-  ) : (
-    <Html
-      moduleBase={moduleBase}
-      moduleBaseURL={moduleBaseURL}
-      moduleBasePath={moduleBasePath}
-      moduleRootPath={moduleRootPath}
-      projectRoot={projectRoot}
-      url={url}
-      route={route}
-      pageProps={pageProps}
-      cssFiles={cssFiles}
-      globalCss={globalCss}
-      CssCollector={CssCollector}
-      manifest={manifest}
-    >
-      <PageComponent {...(pageProps as any)} />
-    </Html>
-  );
+  const startTime = performance.now();
   try {
+    const htmlIsFragment = Html == React.Fragment;
+    const url = route.startsWith(moduleBaseURL) ? route : moduleBaseURL + route;
+
+    if (!PageComponent) {
+      return {
+        type: "error",
+        error: new Error("PageComponent is required"),
+        metrics: {
+          chunks: 0,
+          bytes: 0,
+          backpressureCount: 0,
+          drainCount: 0,
+          errorCount: 0,
+          duration: 0,
+          startTime: 0,
+        },
+      };
+    }
+    const elements = htmlIsFragment ? (
+      <CssCollector cssFiles={cssFiles}>
+        <PageComponent {...(pageProps as any)} />
+      </CssCollector>
+    ) : (
+      <Html
+        moduleBase={moduleBase}
+        moduleBaseURL={moduleBaseURL}
+        moduleBasePath={moduleBasePath}
+        moduleRootPath={moduleRootPath}
+        projectRoot={projectRoot}
+        url={url}
+        route={route}
+        pageProps={pageProps}
+        cssFiles={cssFiles}
+        globalCss={globalCss}
+        CssCollector={CssCollector}
+        manifest={manifest}
+      >
+        <PageComponent {...(pageProps as any)} />
+      </Html>
+    );
     const stream = ReactDOMServer.renderToPipeableStream(
       elements,
       moduleBasePath,
@@ -105,7 +102,6 @@ export function createRscStream<
         },
       }
     );
-
     // If we have a stream error, return it immediately
     if (streamError) {
       return {

package/plugin/helpers/formatMetrics.ts

@@ -0,0 +1,37 @@
+import type { RenderMetrics } from "../types.js";
+
+export function formatMetrics(metrics: RenderMetrics): string {
+  const {
+    route,
+    rscSize,
+    chunks,
+    chunkRate,
+    processingTime,
+    memoryUsage,
+    streamMetrics,
+  } = metrics;
+
+  // Format memory usage in MB
+  const formatMemory = (bytes: number) => `${(bytes / 1024 / 1024).toFixed(2)}MB`;
+
+  return `
+Route: ${route}
+Size: ${(rscSize / 1024).toFixed(2)}KB
+Chunks: ${chunks} (${chunkRate.toFixed(2)} chunks/s)
+Processing Time: ${processingTime.toFixed(2)}ms
+Memory:
+  RSS: ${formatMemory(memoryUsage.rss)}
+  Heap Total: ${formatMemory(memoryUsage.heapTotal)}
+  Heap Used: ${formatMemory(memoryUsage.heapUsed)}
+  External: ${formatMemory(memoryUsage.external)}
+Stream:
+  Duration: ${streamMetrics.duration.toFixed(2)}ms
+  Backpressure: ${streamMetrics.backpressureCount}
+  Drain: ${streamMetrics.drainCount}
+  Errors: ${streamMetrics.errorCount}
+`.trim();
+}
+
+export function logMetrics(metrics: RenderMetrics) {
+  console.log(formatMetrics(metrics));
+} 

package/plugin/helpers/tryManifest.ts

@@ -11,8 +11,6 @@ type TryManifestOptions<SSR extends boolean = false> = {
   manifestPath?: string | undefined;
 };
 
-const stashedManifests: Map<string, any> = new Map();
-
 export async function tryManifest<SSR extends boolean>(
   options: TryManifestOptions<SSR>
 ): Promise<
@@ -26,12 +24,6 @@ export async function tryManifest<SSR extends boolean>(
       error: Error;
       manifest?: never;
     }> {
-  if (stashedManifests.has(options.outDir)) {
-    return {
-      type: "success",
-      manifest: stashedManifests.get(options.outDir),
-    };
-  }
   const localSsrManifestPath = !options.ssrManifest ? undefined : options.manifestPath ? options.manifestPath : join('.vite', 'ssr-manifest.json');
   const localManifestPath = options.ssrManifest ? undefined : options.manifestPath ? options.manifestPath : join('.vite', 'manifest.json');
   const manifestPath = resolve(
@@ -41,7 +33,6 @@ export async function tryManifest<SSR extends boolean>(
   );
   try {
     const result = JSON.parse(await readFile(manifestPath, "utf-8"));
-    stashedManifests.set(options.outDir, result);
     return {
       type: "success",
       manifest: result,

package/plugin/html.tsx

@@ -10,7 +10,7 @@ export const Html = ({
 }: React.PropsWithChildren<HtmlProps>) => (
   <html>
     <head>
-      {moduleBasePath !== "" && <base href={moduleBasePath} />}
+      {moduleBasePath !== ""}
       <CssCollectorElements cssFiles={globalCss} />
     </head>
     <body>

package/plugin/loader/createBuildLoader.ts

@@ -78,6 +78,8 @@ export async function createBuildLoader(
             return { default: serverChunk.source };
           } else if ("code" in serverChunk) {
             return { default: serverChunk.code };
+          } else {
+            console.warn("Could not find inline module for: " + normalizedValue);
           }
         }