vite-plugin-react-server 1.1.20 → 1.2.0-alpha.1

package/plugin/helpers/inputNormalizer.ts

@@ -4,7 +4,7 @@ import type {
   InputNormalizer,
   NormalizerInput,
 } from "../types.js";
-import path, { join, sep } from "path";
+import path, { join, relative, resolve, sep } from "path";
 import { DEFAULT_CONFIG } from "../config/defaults.js";
 
 let stashedNormalizer: InputNormalizer | null = null;
@@ -72,15 +72,17 @@ const resolveRootOption = (
 
 const createKeyNormalizer =
   ({
-    root: normalizedRoot,
+    root,
     preserveModulesRoot,
     handleExtension,
     moduleBasePath,
+    moduleBaseURL,
   }: {
     root: string;
     preserveModulesRoot: string | undefined;
     handleExtension: (path: string) => string;
     moduleBasePath: string | undefined;
+    moduleBaseURL: string | undefined;
   }) =>
   (key: string) => {
     if (key.includes("?")) {
@@ -93,10 +95,18 @@ const createKeyNormalizer =
 
     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);
+    // Only treat as file system path if it actually contains the root path
+    // URL paths like "/" should not be resolved relative to file system root
+    if(moduleId.startsWith("/") && moduleId.startsWith(root)) {
+      moduleId = relative(root, moduleId);
+    } else if (moduleId.startsWith(".")) {
+      moduleId = relative(root, resolve(root, moduleId));
+    } else if (moduleId.startsWith("/")) {
+      // This is a URL path like "/" or "/about", remove leading slash for consistency
+      moduleId = moduleId.slice(1);
+    } 
+    if(moduleBaseURL && moduleBaseURL !== "/" && moduleBaseURL !== "" && moduleId.startsWith(moduleBaseURL)) {
+      moduleId = moduleId.slice(moduleBaseURL.length);
     }
     if (
       typeof moduleBasePath === "string" &&
@@ -114,10 +124,7 @@ const createKeyNormalizer =
     }
 
     moduleId = handleExtension(moduleId);
-    while (moduleId.startsWith("/") || moduleId.startsWith(".")) {
-      moduleId = moduleId.slice(1);
-    }
-    while (moduleId.endsWith("/")) {
+    while (moduleId.endsWith("/") || moduleId.startsWith(".")) {
       moduleId = moduleId.slice(0, -1);
     }
     if (typeof preserveModulesRoot === "string" && preserveModulesRoot !== "") {
@@ -135,10 +142,12 @@ const createPathNormalizer =
     root,
     preserveModulesRoot,
     moduleBasePath,
+    moduleBaseURL,
   }: {
     root: string;
     preserveModulesRoot: string | undefined;
     moduleBasePath: string | undefined;
+    moduleBaseURL: string | undefined;
   }) =>
   (path: string) => {
     if (typeof path !== "string") {
@@ -148,8 +157,20 @@ const createPathNormalizer =
       path = path.split("?")[0];
     }
     let normalPath = normalizePath(path);
-    if (normalPath.startsWith(root)) {
-      normalPath = normalPath.slice(root.length);
+    
+    // Only treat as file system path if it actually contains the root path
+    // URL paths like "/" should not be resolved relative to file system root
+    if(normalPath.startsWith("/") && normalPath.startsWith(root)) {
+      normalPath = relative(root, normalPath);
+    } else if (normalPath.startsWith(".")) {
+      normalPath = relative(root, normalPath);
+    } else if (normalPath.startsWith("/")) {
+      // This is a URL path like "/" or "/about", remove leading slash for consistency
+      normalPath = normalPath.slice(1);
+    }
+    
+    if(moduleBaseURL && moduleBaseURL !== "/" && moduleBaseURL !== "" && normalPath.startsWith(moduleBaseURL)) {
+      normalPath = normalPath.slice(moduleBaseURL.length);
     }
     if (
       typeof moduleBasePath === "string" &&
@@ -185,8 +206,9 @@ const createPathNormalizer =
 export function createInputNormalizer({
   root,
   moduleBasePath = DEFAULT_CONFIG.MODULE_BASE_PATH,
+  moduleBaseURL = DEFAULT_CONFIG.MODULE_BASE_URL,
   preserveModulesRoot = undefined,
-  removeExtension = DEFAULT_CONFIG.AUTO_DISCOVER.moduleExtension,
+  removeExtension = DEFAULT_CONFIG.AUTO_DISCOVER.modulePattern,
 }: CreateInputNormalizerProps): InputNormalizer {
   if (stashedNormalizer) {
     return stashedNormalizer;
@@ -198,11 +220,13 @@ export function createInputNormalizer({
     preserveModulesRoot: preserveModulesRoot,
     handleExtension,
     moduleBasePath,
+    moduleBaseURL,
   });
   const normalizeEntryPath = createPathNormalizer({
     root: root,
     preserveModulesRoot: relativeRoot,
     moduleBasePath,
+    moduleBaseURL,
   });
   function normalizeInput(id: NormalizerInput): [string, string] {
     // Normalize both paths to use POSIX separators
@@ -241,21 +265,17 @@ export function createInputNormalizer({
 
   stashedNormalizer = (input: NormalizerInput): [string, string] => {
     const [key, path] = normalizeInput(input);
-    let normalizedPath = path.startsWith(moduleBasePath)
-      ? path.slice(moduleBasePath.length)
-      : path;
-    normalizedPath = normalizedPath.startsWith("/")
-      ? normalizedPath.slice(1)
-      : normalizedPath;
+    
+    
     const virtualPrefix = key.match(/^\0+/) ?? "";
     // If key has virtual prefix, ensure path has it too
     const finalPath = virtualPrefix
-      ? virtualPrefix.length && normalizedPath.startsWith(virtualPrefix[0])
-        ? normalizedPath
+      ? virtualPrefix.length && path.startsWith(virtualPrefix[0])
+        ? path
         : virtualPrefix.length
-        ? virtualPrefix[0] + normalizedPath
-        : normalizedPath
-      : normalizedPath;
+        ? virtualPrefix[0] + path
+        : path
+      : path;
     return [key, finalPath];
   };
   return stashedNormalizer;

package/plugin/helpers/metrics.ts

@@ -1,64 +1,4 @@
-import { Transform } from "node:stream";
-import type { StreamMetrics, RenderMetrics } from "../types.js";
-import type { PipeableStream } from "react-dom/server";
-
-export function createStreamMetrics(): StreamMetrics {
-  return {
-    chunks: 0,
-    bytes: 0,
-    backpressureCount: 0,
-    drainCount: 0,
-    errorCount: 0,
-    duration: 0,
-    startTime: performance.now()
-  };
-}
-
-export function createRenderMetrics(route: string): RenderMetrics {
-  return {
-    route,
-    htmlSize: 0,
-    rscSize: 0,
-    processingTime: 0,
-    chunks: 0,
-    chunkRate: 0,
-    memoryUsage: process.memoryUsage(),
-    streamMetrics: createStreamMetrics(),
-    htmlSizes: new Map(),
-    rscSizes: new Map(),
-  };
-}
-
-/**
- * Creates a transform stream that collects metrics from the input stream
- * @param stream The stream to collect metrics from
- * @returns A promise that resolves with the metrics when the stream ends
- */
-export function collectStreamMetrics(stream: PipeableStream | NodeJS.ReadableStream): Promise<StreamMetrics> {
-  const metrics = createStreamMetrics();
-  const startTime = performance.now()
-
-  return new Promise<StreamMetrics>((resolve, reject) => {
-    const transform = new Transform({
-      transform(chunk, _encoding, callback) {
-        metrics.chunks++;
-        metrics.bytes += chunk.length;
-        callback(null, chunk);
-      },
-      flush(callback) {
-        metrics.duration = Date.now() - startTime;
-        callback();
-      }
-    });
-
-    stream.pipe(transform);
-
-    transform.on("error", (error) => {
-      reject(error);
-    });
-
-    transform.on("end", () => {
-      resolve(metrics);
-    });
-  });
-} 
+export { createStreamMetrics } from "../metrics/createStreamMetrics.js";
+export { createRenderMetrics } from "../metrics/createRenderMetrics.js";
+export { collectStreamMetrics } from "../metrics/collectStreamMetrics.js";
+export type { StreamMetrics, RenderMetrics } from "../metrics/types.js";

package/plugin/helpers/moduleResolver.ts

@@ -1,9 +1,54 @@
-let stashedResolve: any = null;
+import type { ResolveHookContext } from "node:module";
 
-export function setStashedResolve(resolve: any) {
+type ResolveFunction = (
+  specifier: string,
+  context: ResolveHookContext,
+  nextResolve?: ResolveFunction
+) => Promise<{ url: string; shortCircuit: boolean }>;
+
+type GetSourceHookContext = {
+  format: string;
+  url: string;
+};
+
+type GetSourceFunction = (
+  url: string,
+  context: GetSourceHookContext,
+  defaultGetSource: GetSourceFunction
+) => Promise<{ source: string | ArrayBuffer | SharedArrayBuffer | Uint8Array }>;
+
+let stashedResolve: ResolveFunction | null = null;
+let stashedGetSource: GetSourceFunction | null = null;
+
+export function setStashedResolve(resolve: ResolveFunction) {
   stashedResolve = resolve;
 }
 
+export function setStashedGetSource(getSource: GetSourceFunction) {
+  stashedGetSource = getSource;
+}
+
+export async function resolve(specifier: string, context: ResolveHookContext, defaultResolve: ResolveFunction) {
+  // We stash this in case we end up needing to resolve export * statements later.
+  stashedResolve = defaultResolve;
+  
+  // Add react-server condition if not present
+  if (!context.conditions.includes('react-server')) {
+    context = {
+      ...context,
+      conditions: [...context.conditions, 'react-server']
+    };
+  }
+  
+  return await defaultResolve(specifier, context, defaultResolve);
+}
+
+export async function getSource(url: string, context: GetSourceHookContext, defaultGetSource: GetSourceFunction) {
+  // We stash this in case we end up needing to resolve export * statements later.
+  stashedGetSource = defaultGetSource;
+  return defaultGetSource(url, context, defaultGetSource);
+}
+
 export async function resolveClientImport(specifier: string, parentURL: string) {
   const conditions = ["node", "import"];
 
@@ -13,24 +58,34 @@ export async function resolveClientImport(specifier: string, parentURL: string)
     );
   }
 
-  try {
-    const result = await stashedResolve(
-      specifier,
-      {
-        conditions,
-        parentURL,
-      },
-      stashedResolve
-    );
+  const result = await stashedResolve(
+    specifier,
+    {
+      conditions,
+      parentURL,
+      importAttributes: {}
+    },
+    stashedResolve
+  );
 
-    if (!result) {
-      console.warn(`Failed to resolve import: ${specifier}`);
-      return null;
-    }
+  return result.url;
+}
 
-    return result;
-  } catch (error) {
-    console.error(`Error resolving import ${specifier}:`, error);
-    return null;
+export async function loadClientSource(url: string) {
+  if (stashedGetSource === null) {
+    throw new Error(
+      "Expected getSource to have been called before loadClientSource"
+    );
   }
+
+  const result = await stashedGetSource(
+    url,
+    {
+      format: "module",
+      url
+    },
+    stashedGetSource
+  );
+
+  return result.source;
 } 

package/plugin/helpers/requestInfo.ts

@@ -1,7 +1,8 @@
-import { join, resolve } from "node:path";
-import type { ResolvedUserOptions } from "../types.js";
-import { createLogger, type Connect, type Logger } from "vite";
+import { resolve } from "node:path";
+import type { CreateHandlerOptions } from "../types.js";
+import { type Connect } from "vite";
 import { MIME_TYPES } from "../config/mimeTypes.js";
+import { requestToRoute } from "./requestToRoute.js";
 
 /**
  * # Request info
@@ -9,30 +10,63 @@ import { MIME_TYPES } from "../config/mimeTypes.js";
  * Does the initial work to check if the request is for html, rsc, json, js, css, server-action, or something else not handled by this plugin.
  *
  * @param req
- * @param userOptions
+ * @param handlerOptions
  * @param hostDir
  * @returns
  */
 export function requestInfo(
   req: Connect.IncomingMessage,
-  userOptions: Pick<
-    ResolvedUserOptions,
-    "normalizer" | "build" | "autoDiscover" | "verbose"
+  handlerOptions: Pick<
+    CreateHandlerOptions,
+    | "normalizer"
+    | "build"
+    | "autoDiscover"
+    | "verbose"
+    | "moduleBasePath"
+    | "moduleBaseURL"
+    | "verbose"
+    | "logger"
   >,
   hostDir: string,
-  logger: Logger = createLogger()
 ) {
-  const [, value] = userOptions.normalizer(req.url);
+  const route = requestToRoute(req, {
+    moduleBasePath: handlerOptions.moduleBasePath,
+    moduleBaseURL: handlerOptions.moduleBaseURL,
+    build: handlerOptions.build,
+  });
+
+  if (!route) {
+    return {
+      route: "/",
+      ext: "",
+    };
+  }
+
+  // Use the cleaned route for normalization, not the raw req.url
+  // This ensures base URL is properly stripped before normalization
+  const [, value] = handlerOptions.normalizer(route);
+  if (handlerOptions.verbose) {
+    if (value && value !== "") {
+      handlerOptions.logger.info(`[requestInfo] Value: \"${value}\"`);
+    }
+    if (hostDir && hostDir !== "") {
+      handlerOptions.logger.info(`[requestInfo] Host Dir: \"${hostDir}\"`);
+    }
+    if (req.url && req.url !== "") {
+      handlerOptions.logger.info(`[requestInfo] Request URL: \"${req.url}\"`);
+    }
+  }
+
   const dotIndex = value.lastIndexOf(".");
   const ext = dotIndex === -1 ? "" : value.slice(dotIndex);
   // handle index.html
-  const isVendor = userOptions.autoDiscover.vendorPattern(value);
-  const isVirtual = userOptions.autoDiscover.virtualPattern(value);
-  const isJS = userOptions.autoDiscover.modulePattern(value);
-  const isHtml = userOptions.autoDiscover.htmlPattern(value);
-  const isCss = userOptions.autoDiscover.cssPattern(value);
-  const isJson = userOptions.autoDiscover.jsonPattern(value);
-  const isRsc = userOptions.autoDiscover.rscPattern(value);
+  const isVendor = handlerOptions.autoDiscover.vendorPattern.test(value);
+  const isVirtual = handlerOptions.autoDiscover.virtualPattern.test(value);
+  const isJS = handlerOptions.autoDiscover.modulePattern.test(value);
+  const isHtml = handlerOptions.autoDiscover.htmlPattern.test(value);
+  const isCss = handlerOptions.autoDiscover.cssPattern.test(value);
+  const isJson = handlerOptions.autoDiscover.jsonPattern.test(value);
+  const isRsc = handlerOptions.autoDiscover.rscPattern.test(value);
   const hasJsHeader =
     req.headers["sec-fetch-dest"] === "script" ||
     req.headers["accept"]?.includes("*/*") ||
@@ -46,7 +80,7 @@ export function requestInfo(
     req.headers["content-type"]?.includes(
       "application/x-www-form-urlencoded"
     ) || !!req.headers["content-type"]?.includes("multipart/form-data");
-  
+
   // Server action detection
   const hasServerActionHeaders =
     req.method === "POST" &&
@@ -55,18 +89,23 @@ export function requestInfo(
     req.headers["sec-fetch-mode"] === "cors";
   const isServerActionRequest = hasServerActionHeaders;
 
-  const isFormActionRequest = !isServerActionRequest && (
-    req.method === "POST" ||
-    (isFormContentType &&
-      req.headers["sec-fetch-dest"] === "document" &&
-      req.headers["sec-fetch-mode"] === "navigate")
-  );
+  const isFormActionRequest =
+    !isServerActionRequest &&
+    (req.method === "POST" ||
+      (isFormContentType &&
+        req.headers["sec-fetch-dest"] === "document" &&
+        req.headers["sec-fetch-mode"] === "navigate"));
 
   const isJsRequest =
-    !isFormActionRequest && !isJson && !isHtml && !isCss && !isRsc && (isJS || hasJsHeader);
+    !isFormActionRequest &&
+    !isJson &&
+    !isHtml &&
+    !isCss &&
+    !isRsc &&
+    (isJS || hasJsHeader);
   const isJsonRequest = isJson || (hasJsonHeader && !isJsRequest);
   // Form action detection
-  
+
   const isHtmlRequest =
     isHtml ||
     hasHtmlHeader ||
@@ -84,36 +123,49 @@ export function requestInfo(
     !isJsonRequest &&
     (isCss || hasCssHeader);
 
-  let filePath = join(hostDir, value);
+  // Use the normalized value for file path construction
+  // The normalizer should have already stripped base URLs properly
+  const routeForFilePath = value;
+
+  let filePath = resolve(hostDir, routeForFilePath);
   let contentType;
   if (isServerActionRequest) {
     // For server actions, we'll get the actual file path from the request body
     // The route is just a placeholder
-    filePath = value;
+    filePath = resolve(hostDir, routeForFilePath);
     contentType = "application/json; charset=utf-8";
   } else if (isHtmlRequest) {
     if (!isHtml) {
-      filePath = join(hostDir, value, userOptions.build.htmlOutputPath);
+      filePath = resolve(
+        hostDir,
+        routeForFilePath,
+        handlerOptions.build.htmlOutputPath
+      );
     }
     contentType = "text/html; charset=utf-8";
   } else if (isRscRequest) {
     if (!isRsc) {
-      filePath = join(hostDir, value, userOptions.build.rscOutputPath);
+      // Value doesn't end with .rsc, append the rsc output path
+      filePath = resolve(
+        hostDir,
+        routeForFilePath,
+        handlerOptions.build.rscOutputPath
+      );
     }
     contentType = "text/x-component; charset=utf-8";
   } else if (isCssRequest) {
     if (!isCss) {
-      filePath = join(hostDir, value + ".css");
+      filePath = resolve(hostDir, routeForFilePath + ".css");
     }
     contentType = "text/css; charset=utf-8";
   } else if (isJsRequest) {
     if (!isJS) {
-      filePath = resolve(hostDir, value + ".js");
+      filePath = resolve(hostDir, routeForFilePath + ".js");
     }
     contentType = "application/javascript; charset=utf-8";
   } else if (isJsonRequest) {
     if (!isJson) {
-      filePath = join(hostDir, value + ".json");
+      filePath = resolve(hostDir, routeForFilePath + ".json");
     }
     contentType = "application/json; charset=utf-8";
   } else {
@@ -121,49 +173,31 @@ export function requestInfo(
     if (mimeType) {
       contentType = mimeType + "; charset=utf-8";
     } else {
-      contentType = "application/octet-stream";
+      contentType = "application/octet-stream; charset=utf-8";
     }
   }
-  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
-    ? "/"
-    : routeWithoutTrailingSlash.startsWith("/")
-    ? routeWithoutTrailingSlash
-    : `/${routeWithoutTrailingSlash}`;
-
-  if (userOptions.verbose) {
+  if (handlerOptions.verbose) {
     if (isFormActionRequest) {
-      logger.info(`[react-dev-server] (form-action) ${routeWithLeadingSlash}`);
+      handlerOptions.logger.info(`[react-dev-server] (form-action) ${route}`);
     } else if (isServerActionRequest) {
-      logger.info(
-        `[react-dev-server] (server-action) ${routeWithLeadingSlash}`
-      );
+      handlerOptions.logger.info(`[react-dev-server] (server-action) ${route}`);
     } else if (isHtmlRequest) {
-      logger.info(`[react-dev-server] (html) ${routeWithLeadingSlash}`);
+      handlerOptions.logger.info(`[react-dev-server] (html) ${route}`);
     } else if (isRscRequest) {
-      logger.info(`[react-dev-server] (rsc) ${routeWithLeadingSlash}`);
+      handlerOptions.logger.info(`[react-dev-server] (rsc) ${route}`);
     } else if (isCssRequest) {
-      logger.info(`[react-dev-server] (css) ${routeWithLeadingSlash}`);
+      handlerOptions.logger.info(`[react-dev-server] (css) ${route}`);
     } else if (isJsRequest) {
-      logger.info(`[react-dev-server] (js) ${routeWithLeadingSlash}`);
+      handlerOptions.logger.info(`[react-dev-server] (js) ${route}`);
     } else if (isJsonRequest) {
-      logger.info(`[react-dev-server] (json) ${routeWithLeadingSlash}`);
+      handlerOptions.logger.info(`[react-dev-server] (json) ${route}`);
     } else {
-      logger.info(`[react-dev-server] (other) ${routeWithLeadingSlash}`);
+      handlerOptions.logger.info(`[react-dev-server] (other) ${route}`);
     }
   }
   return {
-    route: routeWithLeadingSlash,
+    route,
     ext,
     isHtmlRequest,
     isRscRequest,

package/plugin/helpers/requestToRoute.ts

@@ -1,23 +1,49 @@
 import type { CreateHandlerOptions } from "../types.js";
 
 export function requestToRoute(
-  req: {url?: string},
-  handlerOptions: Pick<CreateHandlerOptions, "moduleBasePath" | "build">
+  req: { url?: string },
+  handlerOptions: Pick<
+    CreateHandlerOptions,
+    "moduleBasePath" | "moduleBaseURL" | "build"
+  >
 ) {
-  let route = req.url?.replace("/" + handlerOptions.build.rscOutputPath, "");
+  let route = req.url
+    ?.replace(
+      handlerOptions.moduleBaseURL + handlerOptions.build.rscOutputPath,
+      ""
+    )
+    .replace(
+      handlerOptions.moduleBaseURL + handlerOptions.build.htmlOutputPath,
+      ""
+    )
+    .replace(/^\/index$/, "/");
   if (typeof route !== "string") {
     return route;
   }
-  if (
-    route.startsWith(handlerOptions.moduleBasePath)
-  ) {
-    route = route.slice(handlerOptions.moduleBasePath.length);
+  
+  // Strip moduleBaseURL from the beginning of the route
+  if (route.startsWith(handlerOptions.moduleBaseURL)) {
+    route = route.slice(handlerOptions.moduleBaseURL.length);
   }
-  if (!route || route === "") {
-    route = "/";
+  if(route.endsWith(handlerOptions.build.rscOutputPath)) {
+    route = route.slice(0, -handlerOptions.build.rscOutputPath.length);
   }
-  if (!route.startsWith("/")) {
-    route = "/" + route;
+  
+  if (route.startsWith(handlerOptions.moduleBasePath)) {
+    route = route.slice(handlerOptions.moduleBasePath.length);
   }
-  return route;
+
+  const routeWithoutTrailingSlash =
+    route === "" || route === "/"
+      ? "/"
+      : route.endsWith("/")
+      ? route.slice(0, -1)
+      : route;
+
+  const routeWithLeadingSlash = !routeWithoutTrailingSlash
+    ? "/"
+    : routeWithoutTrailingSlash.startsWith("/")
+    ? routeWithoutTrailingSlash
+    : `/${routeWithoutTrailingSlash}`;
+  return routeWithLeadingSlash;
 }