vite-plugin-react-server 1.1.19 → 1.2.0-alpha.0

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 { resolve } from "node:path";
 import type { ResolvedUserOptions } from "../types.js";
 import { createLogger, type Connect, type Logger } from "vite";
 import { MIME_TYPES } from "../config/mimeTypes.js";
+import { requestToRoute } from "./requestToRoute.js";
 
 /**
  * # Request info
@@ -17,22 +18,47 @@ export function requestInfo(
   req: Connect.IncomingMessage,
   userOptions: Pick<
     ResolvedUserOptions,
-    "normalizer" | "build" | "autoDiscover" | "verbose"
+    | "normalizer"
+    | "build"
+    | "autoDiscover"
+    | "verbose"
+    | "moduleBasePath"
+    | "moduleBaseURL"
+    | "verbose"
   >,
   hostDir: string,
   logger: Logger = createLogger()
 ) {
-  const [, value] = userOptions.normalizer(req.url);
+  const route = requestToRoute(req, {
+    moduleBasePath: userOptions.moduleBasePath,
+    moduleBaseURL: userOptions.moduleBaseURL,
+    build: userOptions.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] = userOptions.normalizer(route);
+  if (userOptions.verbose) {
+    console.log("requestInfo:", { value, hostDir, reqUrl: req.url, route });
+  }
+  
   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 = userOptions.autoDiscover.vendorPattern.test(value);
+  const isVirtual = userOptions.autoDiscover.virtualPattern.test(value);
+  const isJS = userOptions.autoDiscover.modulePattern.test(value);
+  const isHtml = userOptions.autoDiscover.htmlPattern.test(value);
+  const isCss = userOptions.autoDiscover.cssPattern.test(value);
+  const isJson = userOptions.autoDiscover.jsonPattern.test(value);
+  const isRsc = userOptions.autoDiscover.rscPattern.test(value);
   const hasJsHeader =
     req.headers["sec-fetch-dest"] === "script" ||
     req.headers["accept"]?.includes("*/*") ||
@@ -46,7 +72,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 +81,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 +115,41 @@ 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, userOptions.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, userOptions.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 +157,33 @@ 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 (isFormActionRequest) {
-      logger.info(`[react-dev-server] (form-action) ${routeWithLeadingSlash}`);
+      logger.info(`[react-dev-server] (form-action) ${route}`);
     } else if (isServerActionRequest) {
       logger.info(
-        `[react-dev-server] (server-action) ${routeWithLeadingSlash}`
+        `[react-dev-server] (server-action) ${route}`
       );
     } else if (isHtmlRequest) {
-      logger.info(`[react-dev-server] (html) ${routeWithLeadingSlash}`);
+      logger.info(`[react-dev-server] (html) ${route}`);
     } else if (isRscRequest) {
-      logger.info(`[react-dev-server] (rsc) ${routeWithLeadingSlash}`);
+      logger.info(`[react-dev-server] (rsc) ${route}`);
     } else if (isCssRequest) {
-      logger.info(`[react-dev-server] (css) ${routeWithLeadingSlash}`);
+      logger.info(`[react-dev-server] (css) ${route}`);
     } else if (isJsRequest) {
-      logger.info(`[react-dev-server] (js) ${routeWithLeadingSlash}`);
+      logger.info(`[react-dev-server] (js) ${route}`);
     } else if (isJsonRequest) {
-      logger.info(`[react-dev-server] (json) ${routeWithLeadingSlash}`);
+      logger.info(`[react-dev-server] (json) ${route}`);
     } else {
-      logger.info(`[react-dev-server] (other) ${routeWithLeadingSlash}`);
+      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;
 }

package/plugin/helpers/resolveComponent.ts

@@ -0,0 +1,173 @@
+import { toError } from "../error/toError.js";
+import type { GenericModuleLoader, HtmlComponentType, RootComponentType } from "../types.js";
+
+export type ComponentName = "Root" | "Html";
+
+type ResolveComponentResult<T = unknown> =
+  | {
+      type: "success";
+      component: T;
+      error?: never;
+    }
+  | { type: "error"; error: Error; component?: never }
+  | { type: "skip"; error?: never; component?: never };
+
+type ResolveComponentOptions = {
+  componentPath: string;
+  exportName: string;
+  loader: GenericModuleLoader;
+};
+
+/**
+ * Resolves a component (Root or Html) from a string path.
+ * 
+ * This function handles:
+ * - String paths: "src/Root.tsx"
+ * - Fragment syntax: "src/components.tsx#MyRoot"
+ * - Export name resolution
+ * 
+ * @param options.componentPath - The path to the component file
+ * @param options.exportName - The name of the export to resolve (e.g. 'Root', 'Html')
+ * @param options.loader - The loader function to use for loading the module
+ * 
+ * @returns A result object containing the resolved component or error
+ */
+export async function resolveComponent<T = RootComponentType | HtmlComponentType>(
+  options: ResolveComponentOptions
+): Promise<ResolveComponentResult<T>> {
+  const { componentPath, exportName, loader } = options;
+  
+  try {
+    // Handle fragment syntax (e.g., "src/components.tsx#MyRoot")
+    let modulePath = componentPath;
+    let moduleExportName = exportName;
+    
+    if (componentPath.includes('#')) {
+      const [path, fragmentExport] = componentPath.split('#');
+      modulePath = path;
+      moduleExportName = fragmentExport;
+    }
+
+    // Load the module
+    const module = await loader(`${modulePath}#${moduleExportName}`);
+    
+    if (module == null) {
+      return {
+        type: "error",
+        error: new Error(`Module ${modulePath} not found`),
+      };
+    }
+
+    if (module instanceof Error) {
+      return {
+        type: "error",
+        error: module,
+      };
+    }
+
+    // Get the component from the module
+    const component = module[moduleExportName];
+    
+    if (!(moduleExportName in module)) {
+      if ("error" in module) {
+        return {
+          type: "error",
+          error: toError(module["error"]),
+        };
+      }
+      return {
+        type: "error",
+        error: new Error(`Export "${moduleExportName}" not found in module ${modulePath}.`),
+      };
+    }
+
+    if (!component) {
+      return {
+        type: "error",
+        error: new Error(
+          `Export "${moduleExportName}" is null or undefined in module ${modulePath}.`
+        ),
+      };
+    }
+
+    if (component instanceof Error) {
+      return {
+        type: "error",
+        error: component,
+      };
+    }
+
+    return {
+      type: "success",
+      component: component as T,
+    };
+  } catch (error) {
+    return {
+      type: "error",
+      error: error instanceof Error ? error : new Error(String(error)),
+    };
+  }
+}
+
+/**
+ * Resolves Root and Html components from user options.
+ * 
+ * This function checks if Root/Html are strings and resolves them to components.
+ * If they're already components, it returns them as-is.
+ * 
+ * @param options - Object containing Root, Html, and resolution options
+ * @returns Resolved components or original values if not strings
+ */
+export async function resolveComponentOptions(options: {
+  Root: RootComponentType | string;
+  Html: HtmlComponentType | string; 
+  rootExportName: string;
+  htmlExportName: string;
+  loader: GenericModuleLoader;
+}): Promise<{
+  Root: RootComponentType;
+  Html: HtmlComponentType;
+  errors: Error[];
+}> {
+  const errors: Error[] = [];
+  let resolvedRoot = options.Root;
+  let resolvedHtml = options.Html;
+
+  // Resolve Root if it's a string
+  if (typeof options.Root === "string") {
+    const rootResult = await resolveComponent<RootComponentType>({
+      componentPath: options.Root,
+      exportName: options.rootExportName,
+      loader: options.loader,
+    });
+    
+    if (rootResult.type === "success") {
+      resolvedRoot = rootResult.component;
+    } else if (rootResult.type === "error") {
+      errors.push(rootResult.error);
+      // Keep original value as fallback
+    }
+  }
+
+  // Resolve Html if it's a string
+  if (typeof options.Html === "string") {
+    const htmlResult = await resolveComponent<HtmlComponentType>({
+      componentPath: options.Html,
+      exportName: options.htmlExportName,
+      loader: options.loader,
+    });
+    
+    if (htmlResult.type === "success") {
+      resolvedHtml = htmlResult.component;
+    } else if (htmlResult.type === "error") {
+      errors.push(htmlResult.error);
+      // Keep original value as fallback
+    }
+  }
+
+  return {
+    Root: resolvedRoot as RootComponentType,
+    Html: resolvedHtml as HtmlComponentType,
+    errors,
+  };
+}