vite-plugin-react-server 1.1.8 → 1.1.10

package/plugin/config/resolveUserConfig.ts

@@ -6,6 +6,7 @@ import type {
 } from "../types.js";
 import { join } from "node:path";
 import type { OutputOptions, PreRenderedAsset, PreRenderedChunk } from "rollup";
+import { DEFAULT_CONFIG } from "./defaults.js";
 
 let stashedUserConfig: Record<string, ResolvedUserConfig | null> = {};
 
@@ -59,21 +60,25 @@ export function resolveUserConfig({
     if (!ssr || !input) {
       return fallback(info, false);
     }
-    const [, value] = userOptions.normalizer(
-      input
-    );
+    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
+    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
+        return entry.file;
       }
     }
     if (entry) {
-      return entry.file
+      return entry.file;
     }
     return fallback(info, true);
   };
@@ -82,15 +87,15 @@ export function resolveUserConfig({
       ? userOptions.moduleBase
       : undefined,
     entryFileNames: (info) => {
-      const input = info.facadeModuleId
-      return handleSsrName(info,  input, userOptions.build.entryFile, ssr);
+      const input = info.facadeModuleId;
+      return handleSsrName(info, input, userOptions.build.entryFile, ssr);
     },
     assetFileNames: (i) => {
-      const input = i.originalFileNames[0]
+      const input = i.originalFileNames[0];
       return handleSsrName(i, input, userOptions.build.assetFile, ssr);
     },
     chunkFileNames: (i) => {
-      const input = i.facadeModuleId 
+      const input = i.facadeModuleId;
       return handleSsrName(i, input, userOptions.build.chunkFile, ssr);
     },
     format: "esm",
@@ -103,7 +108,7 @@ export function resolveUserConfig({
       config.build?.rollupOptions?.output !== null
     ? [config.build?.rollupOptions?.output, pluginOutput]
     : pluginOutput;
-  const vitePrefix = config.envPrefix ?? "VITE_";
+  const vitePrefix = config.envPrefix ?? DEFAULT_CONFIG.ENV_PREFIX;
   const mode =
     process.env["NODE_ENV"] === "development"
       ? "development"
@@ -115,13 +120,55 @@ export function resolveUserConfig({
       ? "production"
       : "development";
   const minify = config.build?.minify;
+
+  const srrConfig = {
+    ...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 ?? [
+        "react-server",
+      ],
+    },
+  };
+  let publicOrigin = userOptions.publicOrigin;
+  if (configEnv.command === "serve" && !configEnv.isPreview) {
+    publicOrigin = `http${config.server?.https ? "s" : ""}://${
+      typeof config.server?.host === "string"
+        ? config.server?.host
+        : "localhost"
+    }:${typeof config.server?.port === "number" ? config.server?.port : 5173}`;
+  }
+  const define = {
+    ...config.define,
+    [`import.meta.env.PUBLIC_ORIGIN`]: `"${publicOrigin}"`,
+    [`process.env.${vitePrefix}SSR`]: `true`,
+    [`process.env.${vitePrefix}DEV`]: `${
+      mode === "development" ? "true" : "false"
+    }`,
+    [`process.env.${vitePrefix}PROD`]: `${
+      mode === "production" ? "true" : "false"
+    }`,
+    [`process.env.${vitePrefix}MODE`]: `"${mode}"`,
+    [`process.env.${vitePrefix}BASE_URL`]: `"${userOptions.moduleBaseURL}"`,
+    [`process.env.${vitePrefix}PUBLIC_ORIGIN`]: `"${publicOrigin}"`,
+  }
+
   if (condition === "react-client") {
     // client plugin build options (client plugin still outputs server files)
     const clientConfig = {
       ...config,
       root: root,
       mode: mode,
-      base: userOptions.moduleBasePath,
+      base: userOptions.moduleBaseURL,
       envPrefix: vitePrefix,
       resolve: {
         ...config.resolve,
@@ -131,31 +178,18 @@ export function resolveUserConfig({
           "react-server-dom-esm/client",
         ],
       },
-      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 ?? [
-            "react-server",
-          ],
-        },
-      },
+      define: define,
+      ssr: srrConfig,
       // client build options
       build: {
         ...config.build,
         emptyOutDir: config.build?.emptyOutDir ?? true,
         outDir: config.build?.outDir ?? join(userOptions.build.outDir, envDir),
         assetsDir: config.build?.assetsDir ?? userOptions.build.assetsDir,
-        copyPublicDir: typeof config.build?.copyPublicDir === "boolean" ? config.build?.copyPublicDir : !ssr,
+        copyPublicDir:
+          typeof config.build?.copyPublicDir === "boolean"
+            ? config.build?.copyPublicDir
+            : !ssr,
         // modern browsers
         target: config.build?.target ?? ["esnext"],
         minify: minify,
@@ -187,7 +221,7 @@ export function resolveUserConfig({
       ...config,
       root: root,
       mode: mode,
-      base: userOptions.moduleBasePath,
+      base: userOptions.moduleBaseURL,
       envPrefix: vitePrefix,
       resolve: {
         ...config.resolve,
@@ -195,39 +229,8 @@ export function resolveUserConfig({
           "react-server",
         ],
       },
-      define: {
-        ...config.define,
-        [`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 === "/"
-            ? "/"
-            : !userOptions.moduleBasePath.endsWith("/")
-            ? userOptions.moduleBasePath + "/"
-            : userOptions.moduleBasePath
-        }"`,
-      },
-      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 ?? [
-            "react-server",
-          ],
-        },
-      },
+      define: define,
+      ssr: srrConfig,
       // server build options
       build: {
         ...config.build,
@@ -245,7 +248,7 @@ export function resolveUserConfig({
         copyPublicDir:
           typeof config.build?.copyPublicDir === "boolean"
             ? config.build?.copyPublicDir
-            : false,
+            : !ssr,
         assetsDir: config.build?.assetsDir ?? userOptions.build.assetsDir,
         // Ensure CSS files are output to static directory
         cssCodeSplit:

package/plugin/helpers/createCssProps.tsx

@@ -76,14 +76,22 @@ export const createCssProps = ({
         : {}),
     } as CssContent<true>;
   }
+  const joined = normalizedId.startsWith(moduleBasePath) ? normalizedId : join(moduleBasePath, normalizedId);
+  const moduleBaseHasTrailingSlash = moduleBaseURL.endsWith("/");
+  const joinedHasLeadingSlash = joined.startsWith("/");
   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);
+    if(joined.startsWith(moduleBaseHasTrailingSlash ? moduleBaseURL.slice(0, -1) : moduleBaseURL)) {
+      return joined;
     }
+    try {
+      if (moduleBaseURL.includes("//")) {
+        // relative to moduleBaseURL
+        return new URL(joinedHasLeadingSlash ? joined.slice(1) : joined, 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 + (!moduleBaseHasTrailingSlash && !joinedHasLeadingSlash ? "/" : "") + (moduleBaseHasTrailingSlash ? joined.slice(1) : joined);
   })();
   // Default case
   return {

package/plugin/helpers/inputNormalizer.ts

@@ -1,6 +1,6 @@
 import { normalizePath } from "vite";
 import type { InputNormalizer, NormalizerInput } from "../types.js";
-import path, { join } from "path";
+import path, { join, sep } from "path";
 import { DEFAULT_CONFIG } from "../config/defaults.js";
 
 let stashedNormalizer: InputNormalizer | null = null;
@@ -9,6 +9,7 @@ type CreateInputNormalizerProps = {
   root: string;
   preserveModulesRoot?: string | undefined;
   removeExtension?: boolean | RegExp | string | ((path: string) => boolean);
+  moduleBasePath?: string | undefined;
 };
 
 const resolveExtensionOptions = (
@@ -55,7 +56,10 @@ const resolveRootOption = (
       return normalizedPreserveModulesRoot.slice(root.length + 1);
     }
     return "";
-  } else if (typeof preserveModulesRoot === "string" && typeof root !== "string") {
+  } else if (
+    typeof preserveModulesRoot === "string" &&
+    typeof root !== "string"
+  ) {
     return normalizePath(preserveModulesRoot);
   }
   return "";
@@ -65,23 +69,43 @@ const createKeyNormalizer =
     root: normalizedRoot,
     preserveModulesRoot,
     handleExtension,
+    moduleBasePath,
   }: {
     root: string;
     preserveModulesRoot: string | undefined;
     handleExtension: (path: string) => string;
+    moduleBasePath: string | undefined;
   }) =>
   (key: string) => {
+    if (key.includes("?")) {
+      key = key.split("?")[0];
+    }
+
     // Handle virtual modules first
-    const virtualPrefix = key.match(/^\0+/)?.[0] || '';
-    const actualKey = key.slice(virtualPrefix.length);
-    
+    const virtualPrefix = key.match(/^\0+/) ?? "";
+    const actualKey = virtualPrefix ? key.slice(virtualPrefix[0].length) : key;
+
     let moduleId = normalizePath(actualKey);
-    
+
     // Normalize root path to handle both absolute and relative paths
     const normalizedRootPath = normalizePath(normalizedRoot);
     if (moduleId.startsWith(normalizedRootPath)) {
       moduleId = moduleId.slice(normalizedRootPath.length);
     }
+    if (
+      typeof moduleBasePath === "string" &&
+      moduleBasePath !== "" &&
+      moduleBasePath !== "/"
+    ) {
+      moduleId = moduleId.startsWith(
+        moduleBasePath.endsWith(sep) ? moduleBasePath : moduleBasePath + sep
+      )
+        ? moduleId.slice(
+            moduleBasePath.length +
+              (moduleBasePath.endsWith(sep) ? 0 : sep.length)
+          )
+        : moduleId;
+    }
 
     moduleId = handleExtension(moduleId);
     while (moduleId.startsWith("/") || moduleId.startsWith(".")) {
@@ -95,7 +119,7 @@ const createKeyNormalizer =
         ? moduleId.slice(preserveModulesRoot.length + path.sep.length)
         : moduleId;
     }
-    
+
     // Add virtual prefix back
     return virtualPrefix + moduleId;
   };
@@ -104,18 +128,37 @@ const createPathNormalizer =
   ({
     root,
     preserveModulesRoot,
+    moduleBasePath,
   }: {
     root: string;
     preserveModulesRoot: string | undefined;
+    moduleBasePath: string | undefined;
   }) =>
   (path: string) => {
     if (typeof path !== "string") {
       throw new Error(`Invalid path: ${JSON.stringify(path)}`);
     }
+    if (path.includes("?")) {
+      path = path.split("?")[0];
+    }
     let normalPath = normalizePath(path);
-    if(normalPath.startsWith(root)) {
+    if (normalPath.startsWith(root)) {
       normalPath = normalPath.slice(root.length);
     }
+    if (
+      typeof moduleBasePath === "string" &&
+      moduleBasePath !== "" &&
+      moduleBasePath !== "/"
+    ) {
+      normalPath = normalPath.startsWith(
+        moduleBasePath.endsWith(sep) ? moduleBasePath : moduleBasePath + sep
+      )
+        ? normalPath.slice(
+            moduleBasePath.length +
+              (moduleBasePath.endsWith(sep) ? 0 : sep.length)
+          )
+        : normalPath;
+    }
     if (typeof preserveModulesRoot === "string" && preserveModulesRoot !== "") {
       normalPath = normalPath.startsWith(preserveModulesRoot)
         ? normalPath.slice(preserveModulesRoot.length)
@@ -135,10 +178,11 @@ const createPathNormalizer =
  */
 export function createInputNormalizer({
   root,
+  moduleBasePath,
   preserveModulesRoot = undefined,
   removeExtension = DEFAULT_CONFIG.MODULE_EXTENSION,
 }: CreateInputNormalizerProps): InputNormalizer {
-  if(stashedNormalizer) {
+  if (stashedNormalizer) {
     return stashedNormalizer;
   }
   const relativeRoot = resolveRootOption(root, preserveModulesRoot);
@@ -147,10 +191,12 @@ export function createInputNormalizer({
     root: root,
     preserveModulesRoot: preserveModulesRoot,
     handleExtension,
+    moduleBasePath,
   });
   const normalizeEntryPath = createPathNormalizer({
     root: root,
     preserveModulesRoot: relativeRoot,
+    moduleBasePath,
   });
   function normalizeInput(id: NormalizerInput): [string, string] {
     // Normalize both paths to use POSIX separators
@@ -185,19 +231,22 @@ export function createInputNormalizer({
       return normalized;
     }
     throw new Error(`Invalid input type: ${typeof id}`);
-  };
+  }
 
   stashedNormalizer = (input: NormalizerInput): [string, string] => {
     const [key, path] = normalizeInput(input);
     // Apply the same normalization to both key and path
-    const normalizedPath = path.startsWith('/') ? path.slice(1) : path;
-    const virtualPrefix = key.match(/^\0+/)?.[0] || '';
-    
+    const normalizedPath = path.startsWith("/") ? path.slice(1) : path;
+    const virtualPrefix = key.match(/^\0+/) ?? "";
     // If key has virtual prefix, ensure path has it too
-    const finalPath = virtualPrefix ? 
-      (normalizedPath.startsWith(virtualPrefix) ? normalizedPath : virtualPrefix + normalizedPath) : 
-      normalizedPath;
-    
+    const finalPath = virtualPrefix
+      ? virtualPrefix.length && normalizedPath.startsWith(virtualPrefix[0])
+        ? normalizedPath
+        : virtualPrefix.length
+        ? virtualPrefix[0] + normalizedPath
+        : normalizedPath
+      : normalizedPath;
+
     return [key, finalPath];
   };
   return stashedNormalizer;

package/plugin/helpers/requestInfo.ts

@@ -0,0 +1,81 @@
+import { join } from "node:path";
+import type { ResolvedUserOptions } from "../types.js";
+import type { Connect } from "vite";
+import { MIME_TYPES } from "../config/mimeTypes.js";
+
+export function requestInfo(
+  req: Connect.IncomingMessage,
+  userOptions: Pick<ResolvedUserOptions, "normalizer" | "build" | "autoDiscover">,
+  hostDir: string
+) {
+  const [, value] = userOptions.normalizer(req.url);
+  const dotIndex = value.lastIndexOf(".");
+  const ext = dotIndex === -1 ? "" : value.slice(dotIndex);
+  // handle index.html
+  const isHtml = userOptions.autoDiscover.htmlPattern(value);
+  const hasHtmlHeader = req.headers.accept?.includes("text/html");
+  const isRsc = userOptions.autoDiscover.rscPattern(value);
+  const hasRscHeader = req.headers.accept?.includes("text/x-component");
+  const isFolder = !ext;
+  const isHtmlRequest =
+    isHtml || hasHtmlHeader || (isFolder && !hasRscHeader && !isRsc);
+  const isRscRequest = !isHtmlRequest && (isRsc || hasRscHeader);
+  const isCss = userOptions.autoDiscover.cssPattern(value);
+  const isCssRequest =
+    !isHtmlRequest &&
+    !isRscRequest &&
+    (isCss || req.headers.accept?.includes("text/css"));
+  let filePath = join(hostDir, value);
+  let contentType;
+  if (isHtmlRequest) {
+    if (!isHtml) {
+      filePath = join(hostDir, value, userOptions.build.htmlOutputPath);
+    }
+    contentType = "text/html; charset=utf-8";
+  } else if (isRscRequest) {
+    if (!isRsc) {
+      filePath = join(hostDir, value, userOptions.build.rscOutputPath);
+    }
+    contentType = "text/x-component; charset=utf-8";
+  } else if (isCssRequest) {
+    if (!isCss) {
+      filePath = join(hostDir, value);
+    }
+    contentType = "text/css; charset=utf-8";
+  } else {
+    const mimeType = MIME_TYPES[ext];
+    if (mimeType) {
+      contentType = mimeType;
+    } else {
+      contentType = "application/octet-stream";
+    }
+  }
+  const route = value
+    .replace(userOptions.build.rscOutputPath, "")
+    .replace(userOptions.build.htmlOutputPath, "");
+    
+  const routeWithoutTrailingSlash =
+    route === "" || route === "/"
+      ? "/"
+      : route.endsWith("/")
+      ? route.slice(0, -1)
+      : route;
+  const routeWithLeadingSlash =
+    routeWithoutTrailingSlash.startsWith("/")
+      ? routeWithoutTrailingSlash
+      : `/${routeWithoutTrailingSlash}`;
+
+  return {
+    route: routeWithLeadingSlash,
+    ext,
+    isHtmlRequest,
+    isRscRequest,
+    isCssRequest,
+    isCss,
+    isHtml,
+    isRsc,
+    isFolder,
+    contentType,
+    filePath,
+  };
+}

package/plugin/loader/css-loader.development.ts

@@ -6,6 +6,7 @@ import { preprocessCSS } from "vite";
 import type { ResolvedConfig } from "vite";
 import { readFile } from "node:fs/promises";
 import { join } from "node:path";
+import { env } from "../utils/env.js";
 
 /**
  * Global port for communication between the main thread and the CSS loader.
@@ -21,14 +22,7 @@ const cssFilesByPage = new Map<string, Set<string>>();
 
 let currentPage: string | null = null;
 let resolvedConfig: ResolvedConfig | undefined;
-// Get environment variables
-const env = import.meta?.env || {
-  BASE_URL: '/',
-  DEV: true,
-  MODE: 'development',
-  PROD: false,
-  SSR: true
-};
+
 
 /**
  * Initializes the CSS loader with the necessary communication channels.

package/plugin/loader/react-loader.ts

@@ -8,9 +8,9 @@ import {
   type LoadHookContext,
   type ResolveHookContext,
 } from "node:module";
-import { workerData } from "node:worker_threads";
 import type { MessagePort } from "node:worker_threads";
 import type { LoaderContext } from "../types.js";
+import { env } from '../utils/env.js';
 
 let stashedGetSource: any = null;
 let stashedResolve: any = null;
@@ -21,15 +21,6 @@ setSourceMapsSupport(true, {
   generatedCode: true, // Enable for generated code
 });
 
-// Get environment variables from workerData or import.meta
-const env = workerData?.importMeta?.env ||
-  import.meta?.env || {
-    BASE_URL: "/",
-    DEV: false,
-    MODE: "production",
-    PROD: true,
-    SSR: true,
-  };
 
 // Store port globally for use in load hook
 export let loaderPort: MessagePort | undefined;

package/plugin/metrics/formatMetrics.ts

@@ -12,7 +12,8 @@ export function formatMetrics(metrics: RenderMetrics): string {
   } = metrics;
 
   // Format memory usage in MB
-  const formatMemory = (bytes: number) => `${(bytes / 1024 / 1024).toFixed(2)}MB`;
+  const formatMemory = (bytes: number) =>
+    `${(bytes / 1024 / 1024).toFixed(2)}MB`;
 
   return `
 Route: ${route}
@@ -32,6 +33,30 @@ Stream:
 `.trim();
 }
 
-export function logMetrics(metrics: RenderMetrics) {
-  console.log(formatMetrics(metrics));
-} 
+export function metricWatcher({
+  maxTime = 200,
+  warnOnly = false,
+  warn = console.warn,
+  info = console.info,
+}: {
+  maxTime?: number;
+  warnOnly?: boolean;
+  warn?: (...args: any[]) => void;
+  info?: (...args: any[]) => void;
+}) {
+  return (metrics: RenderMetrics) => {
+    if (metrics.processingTime > maxTime) {
+      warn(`It took over ${maxTime}ms to render ${metrics.route}`);
+      warn(formatMetrics(metrics));
+    } else if (!warnOnly) {
+      const rounded = Math.round(metrics.processingTime);
+      if (rounded === 0) {
+        // smaller unit of time
+        const rounded = Math.round(metrics.processingTime * 1000);
+        info(`${metrics.route} (${rounded}μs)`);
+      } else {
+        info(`${metrics.route} (${rounded}ms)`);
+      }
+    }
+  };
+}

package/plugin/preserver/plugin.ts

@@ -155,3 +155,4 @@ export function reactPreservePlugin(_options: StreamPluginOptions): import("vite
     },
   };
 }
+

package/plugin/react-client/createMessageHandlers.ts

@@ -0,0 +1,37 @@
+import type { RscWorkerOutputMessage } from "../worker/types.js";
+import type { Logger } from "vite";
+import type { StreamHandlers } from "../worker/types.js";
+
+type MessageHandlerContext = {
+  handlers: StreamHandlers;
+  logger: Logger;
+};
+
+export function createMessageHandler({
+  handlers,
+  logger,
+}: MessageHandlerContext) {
+  return (message: RscWorkerOutputMessage | undefined) => {
+    if (!message) {
+      logger.warn("[react-client] Received undefined message from worker");
+      return;
+    }
+    switch (message.type) {
+      case "RSC_CHUNK":
+        handlers.onData(message.chunk);
+        break;
+      case "RSC_END":
+        handlers.onEnd();
+        break;
+      case "ERROR":
+        handlers.onError(message.error, message.errorInfo);
+        break;
+      case "RSC_METRICS":
+        handlers.onMetrics(message.metrics);
+        break;
+      default:
+        logger.warn(`Unknown message type: ${message.type}`);
+        break;
+    }
+  };
+}