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

package/plugin/helpers/requestInfo.ts

@@ -3,6 +3,7 @@ import type { CreateHandlerOptions } from "../types.js";
 import { type Connect } from "vite";
 import { MIME_TYPES } from "../config/mimeTypes.js";
 import { requestToRoute } from "./requestToRoute.js";
+import { routeToURL } from "../utils/routeToURL.js";
 
 /**
  * # Request info
@@ -38,6 +39,7 @@ export function requestInfo(
   if (!route) {
     return {
       route: "/",
+      url: routeToURL("/", handlerOptions.moduleBaseURL, handlerOptions.build.rscOutputPath),
       ext: "",
     };
   }
@@ -82,11 +84,14 @@ export function requestInfo(
     ) || !!req.headers["content-type"]?.includes("multipart/form-data");
 
   // Server action detection
+  const hasRscActionHeader = !!req.headers["x-rsc-action"];
   const hasServerActionHeaders =
     req.method === "POST" &&
-    (req.headers["sec-fetch-dest"] === "empty" ||
-      req.headers["sec-fetch-dest"] === "") &&
-    req.headers["sec-fetch-mode"] === "cors";
+    (hasRscActionHeader || (
+      (req.headers["sec-fetch-dest"] === "empty" ||
+        req.headers["sec-fetch-dest"] === "") &&
+      req.headers["sec-fetch-mode"] === "cors"
+    ));
   const isServerActionRequest = hasServerActionHeaders;
 
   const isFormActionRequest =
@@ -198,6 +203,7 @@ export function requestInfo(
   }
   return {
     route,
+    url: routeToURL(route, handlerOptions.moduleBaseURL, handlerOptions.build.rscOutputPath),
     ext,
     isHtmlRequest,
     isRscRequest,

package/plugin/helpers/resolveComponents.client.ts

@@ -0,0 +1,183 @@
+import type { Worker } from "node:worker_threads";
+import type {
+  ResolveComponentsMessage,
+  ComponentsResolvedMessage,
+} from "../worker/rsc/types.js";
+import { createModuleResolutionMetrics } from "../metrics/createModuleResolutionMetrics.js";
+import { performance } from "node:perf_hooks";
+
+export interface ResolveComponentsOptions {
+  route: string;
+  pagePath?: string;
+  propsPath?: string;
+  rootPath?: string;
+  htmlPath?: string;
+  pageExportName?: string;
+  propsExportName?: string;
+  rootExportName?: string;
+  htmlExportName?: string;
+  worker?: Worker;
+  rscWorker?: Worker;
+  onMetrics?: (metrics: any) => void;
+  logger?: any;
+  verbose?: boolean;
+}
+
+export interface ResolvedComponents {
+  resolutionTime: number;
+}
+
+/**
+ * Resolves components using the RSC worker for client-side rendering
+ *
+ * This function:
+ * 1. Sends a RESOLVE_COMPONENTS message to the RSC worker
+ * 2. RSC worker resolves components using built paths from manifest
+ * 3. Returns resolved components with proper built paths
+ * 4. Tracks resolution metrics
+ *
+ * This separates component resolution from RSC generation, making the
+ * subsequent RSC render completely synchronous.
+ */
+export async function resolveComponents(
+  options: ResolveComponentsOptions
+): Promise<ResolvedComponents> {
+  const {
+    route,
+    pagePath,
+    propsPath,
+    rootPath,
+    htmlPath,
+    pageExportName,
+    propsExportName,
+    rootExportName,
+    htmlExportName,
+    rscWorker,
+    worker: workerProp,
+    onMetrics,
+    logger,
+    verbose,
+  } = options;
+
+  const worker = rscWorker ?? workerProp;
+
+  if (!worker) {
+    throw new Error(
+      "RSC Worker is required for client-side component resolution"
+    );
+  }
+
+  const resolutionStartTime = performance.now();
+
+  if (verbose) {
+    logger?.info(
+      `[resolveComponents.client] Resolving components for route: ${route}`
+    );
+    logger?.info(`[resolveComponents.client] pagePath: ${pagePath}`);
+    logger?.info(`[resolveComponents.client] propsPath: ${propsPath}`);
+    logger?.info(`[resolveComponents.client] rootPath: ${rootPath}`);
+    logger?.info(`[resolveComponents.client] htmlPath: ${htmlPath}`);
+  }
+
+  // Send RESOLVE_COMPONENTS message to RSC worker
+  const resolveMessage: ResolveComponentsMessage = {
+    type: "RESOLVE_COMPONENTS",
+    id: `${route}-resolve-${Date.now()}`,
+    route,
+    streamType: "rsc",
+    rscVariant: "rsc-full", // We'll determine this based on htmlPath later
+    pagePath,
+    propsPath,
+    rootPath,
+    htmlPath,
+    pageExportName,
+    propsExportName,
+    rootExportName,
+    htmlExportName,
+  };
+
+  try {
+    // Send message to worker and wait for response
+    await new Promise<ComponentsResolvedMessage>((resolve, reject) => {
+      const timeout = setTimeout(() => {
+        reject(new Error(`Component resolution timeout for route: ${route}`));
+      }, 3000); // 3 second timeout
+
+      const messageHandler = (message: any) => {
+        if (
+          message.type === "COMPONENTS_RESOLVED" &&
+          message.id === resolveMessage.id
+        ) {
+          clearTimeout(timeout);
+          worker.off("message", messageHandler);
+          resolve(message);
+        } else if (
+          message.type === "ERROR" &&
+          message.id === resolveMessage.id
+        ) {
+          clearTimeout(timeout);
+          worker.off("message", messageHandler);
+          reject(
+            new Error(
+              `Component resolution failed: ${
+                message.error?.message || "Unknown error"
+              }`
+            )
+          );
+        }
+      };
+
+      worker.on("message", messageHandler);
+      worker.postMessage(resolveMessage);
+    });
+
+    const resolutionTime = performance.now() - resolutionStartTime;
+
+    if (verbose) {
+      logger?.info(
+        `[resolveComponents.client] Components resolved for route: ${route} in ${resolutionTime.toFixed(
+          2
+        )}ms`
+      );
+    }
+
+    // Emit resolution metrics
+    if (onMetrics) {
+      const moduleResolutionMetric = createModuleResolutionMetrics({
+        route,
+        workerType: "rsc",
+        resolutionTime,
+        fromMainThread: false,
+        fromRscWorker: true,
+        fromHtmlWorker: false,
+        description: `Component resolution for route ${route} on RSC worker`,
+      });
+      onMetrics(moduleResolutionMetric);
+    }
+
+    return {
+      resolutionTime,
+    };
+  } catch (error) {
+    const resolutionTime = performance.now() - resolutionStartTime;
+    logger?.error(
+      `[resolveComponents.client] Failed to resolve components for route ${route}: ${error}`
+    );
+
+    // Emit error metrics
+    if (onMetrics) {
+      const moduleResolutionMetric = createModuleResolutionMetrics({
+        route,
+        workerType: "rsc",
+        resolutionTime,
+        fromMainThread: false,
+        fromRscWorker: true,
+        fromHtmlWorker: false,
+        description: `Component resolution failed for route ${route} on RSC worker`,
+      });
+      onMetrics(moduleResolutionMetric);
+    }
+
+    throw error;
+  }
+}

package/plugin/helpers/resolveModuleFromManifest.ts

@@ -0,0 +1,99 @@
+import { resolve } from "node:path";
+import type { Logger } from "vite";
+import type { InputNormalizer } from "../types.js";
+
+/**
+ * Shared utility for resolving module paths from manifests.
+ * 
+ * This handles the common pattern of:
+ * 1. Normalizing the moduleId using the normalizer (if provided)
+ * 2. Looking up a source path in a manifest to get the built file path
+ * 3. Handling different manifest key formats (with/without moduleBase prefix)
+ * 4. Resolving the full file path for loading
+ * 
+ * Used by both:
+ * - RSC worker loader (createRscWorkerLoader)
+ * - Build loader (createBuildLoader.server)
+ */
+export function resolveModuleFromManifest({
+  moduleId,
+  normalizer,
+  manifest,
+  moduleBase,
+  preserveModulesRoot,
+  projectRoot,
+  buildOutDir,
+  buildServerDir,
+  verbose = false,
+  logger,
+}: {
+  moduleId: string;
+  normalizer?: InputNormalizer;
+  manifest: Record<string, { file: string } | undefined>;
+  moduleBase: string;
+  preserveModulesRoot?: boolean;
+  projectRoot: string;
+  buildOutDir: string;
+  buildServerDir: string;
+  verbose?: boolean;
+  logger?: Logger;
+}): {
+  manifestEntry: { file: string } | undefined;
+  resolvedPath: string | null;
+  builtModuleId: string;
+} {
+  // Normalize the moduleId using the normalizer (same logic as buildLoader)
+  let normalizedKey = moduleId;
+  let normalizedValue = moduleId;
+  if (normalizer) {
+    [normalizedKey, normalizedValue] = normalizer(moduleId);
+  }
+  // Try to find manifest entry using normalized keys
+  let manifestEntry = manifest[normalizedValue] ?? manifest[normalizedKey];
+
+  // If not found and preserveModulesRoot is false, try with the moduleBase prefix removed
+  if (
+    !manifestEntry &&
+    preserveModulesRoot === false &&
+    normalizedValue.startsWith(moduleBase + "/")
+  ) {
+    const withoutModuleBase = normalizedValue.replace(
+      moduleBase + "/",
+      ""
+    );
+    manifestEntry = manifest[withoutModuleBase];
+    
+    if (verbose && manifestEntry) {
+      logger?.info(
+        `[resolveModuleFromManifest] Found entry after removing moduleBase: ${withoutModuleBase} -> ${manifestEntry.file}`
+      );
+    }
+  }
+
+  // If we found a manifest entry, use its file path
+  let builtModuleId = moduleId;
+  if (manifestEntry && manifestEntry.file) {
+    builtModuleId = manifestEntry.file;
+    if (verbose) {
+      logger?.info(
+        `[resolveModuleFromManifest] Resolved ${moduleId} -> ${builtModuleId} via manifest`
+      );
+    }
+  } else if (verbose) {
+    logger?.warn(
+      `[resolveModuleFromManifest] No manifest entry found for ${moduleId} (tried keys: ${normalizedValue}, ${normalizedKey}), using moduleId directly`
+    );
+  }
+
+  // Construct the full resolved path
+  const resolvedPath = manifestEntry
+    ? resolve(projectRoot, buildOutDir, buildServerDir, manifestEntry.file)
+    : null;
+
+  return {
+    manifestEntry,
+    resolvedPath,
+    builtModuleId,
+  };
+}
+

package/plugin/helpers/resolvePageAndProps.ts

@@ -9,98 +9,285 @@ import { resolvePage } from "./resolvePage.js";
 import { resolveProps } from "./resolveProps.js";
 import { routeToURL } from "../utils/routeToURL.js";
 
-type ResolvePageAndPropsResult<T extends PagePropOpt = PagePropOpt> =
-  | {
-      type: "success";
-      error?: never;
-      PageComponent: PageComponentType<T>;
-      pageProps: T;
-    }
-  | {
-      type: "error";
-      error: Error;
-      PageComponent?: never;
-      pageProps?: never;
-    }
-  | {
-      type: "skip";
-      error?: never;
-      PageComponent?: never;
-      pageProps?: never;
-    };
-
-export type ResolvePageAndPropsFn = <T extends PagePropOpt = PagePropOpt>(
-  options: Pick<
-    CreateHandlerOptions,
-    | "pagePath"
-    | "pageExportName"
-    | "propsPath"
-    | "propsExportName"
-    | "route"
-    | "loader"
-    | "moduleBaseURL"
-    | "build"
-  >
-) => Promise<ResolvePageAndPropsResult<T>>;
-
+/**
+ * Resolves the page and props for a given route, works in combination with resolveComponents
+ * The special thing it does is that if the props is already in the page module, it will fallback to that.
+ * @param handlerOptions - The handler options.
+ * @returns The resolved page and props.
+ */
 export const resolvePageAndProps: ResolvePageAndPropsFn =
   async function _resolvePageAndProps(handlerOptions) {
     try {
-      const url = routeToURL(handlerOptions.route, handlerOptions.moduleBaseURL, handlerOptions.build.rscOutputPath);
- 
-      // Load the page component
+      if (handlerOptions.verbose) {
+        handlerOptions.logger?.info(
+          `[resolvePageAndProps] Starting resolution for route: ${handlerOptions.route}`
+        );
+      }
+
+      const url =
+        handlerOptions.url ??
+        routeToURL(
+          handlerOptions.route ?? "",
+          handlerOptions.moduleBaseURL ?? "/",
+          handlerOptions?.build?.rscOutputPath ??
+            DEFAULT_CONFIG.BUILD.rscOutputPath
+        );
+
+      if (handlerOptions.verbose) {
+        handlerOptions.logger?.info(
+          `[resolvePageAndProps] URL resolved: ${url}. Starting page resolution`
+        );
+      }
+
       const resolvePagePromise = resolvePage({
         id: handlerOptions.pagePath,
-        exportName: handlerOptions.pageExportName ?? DEFAULT_CONFIG.PAGE_EXPORT_NAME,
+        exportName:
+          handlerOptions.pageExportName ?? DEFAULT_CONFIG.PAGE_EXPORT_NAME,
         loader: handlerOptions.loader,
       });
-      const resolvePropsPromise = resolveProps({  
+
+      if (handlerOptions.verbose) {
+        handlerOptions.logger?.info(
+          `[resolvePageAndProps] Starting props resolution`
+        );
+      }
+
+      const resolvePropsPromise = resolveProps({
         url,
         id: handlerOptions.propsPath || handlerOptions.pagePath,
-        exportName: handlerOptions.propsExportName ?? DEFAULT_CONFIG.PROPS_EXPORT_NAME,
-        loader: async () => {
+        exportName:
+          handlerOptions.propsExportName ?? DEFAULT_CONFIG.PROPS_EXPORT_NAME,
+        loader: async (idWithExport?: string) => {
+          if (handlerOptions.verbose) {
+            handlerOptions.logger?.info(
+              `[resolvePageAndProps] Props loader called with: ${idWithExport}`
+            );
+          }
+          
+          // Parse the id to extract the path and export name if using # syntax
+          let propsId = handlerOptions.propsPath || handlerOptions.pagePath;
+          let propsExportName = handlerOptions.propsExportName ?? DEFAULT_CONFIG.PROPS_EXPORT_NAME;
+          
+          if (idWithExport && idWithExport.includes('#')) {
+            const [id, exportName] = idWithExport.split('#');
+            propsId = id;
+            if (exportName) {
+              propsExportName = exportName;
+            }
+          }
+          
           const resolvePageResult = await resolvePagePromise;
           if (resolvePageResult.type === "error") {
-            throw resolvePageResult.error;
+            if (handlerOptions.verbose) {
+              handlerOptions.logger?.error("resolveProps", {
+                error: resolvePageResult.error,
+              });
+            }
+            if (resolvePageResult.error != null) {
+              throw resolvePageResult.error;
+            }
+            throw new Error("Failed to resolve page in props loader");
           }
           if (
             resolvePageResult.type === "success" &&
-            handlerOptions.propsExportName in resolvePageResult.module
+            propsExportName in resolvePageResult.module
           ) {
+            if (handlerOptions.verbose) {
+              handlerOptions.logger?.info(
+                `[resolvePageAndProps] Props found in page module`
+              );
+            }
             // return the module
-            return resolvePageResult.module
+            return resolvePageResult.module;
+          }
+          if (propsId && propsId !== handlerOptions.pagePath) {
+            // Separate props file
+            if (handlerOptions.verbose) {
+              handlerOptions.logger?.info(
+                `[resolvePageAndProps] Loading props from separate file: ${propsId}`
+              );
+            }
+            const result = await handlerOptions.loader(propsId);
+            return result;
+          } else if (propsId === handlerOptions.pagePath) {
+            // Props might be in the page module
+            if (handlerOptions.verbose) {
+              handlerOptions.logger?.info(
+                `[resolvePageAndProps] Checking page module for props: ${propsId}`
+              );
+            }
+            if (resolvePageResult.type === "success") {
+              const pageModule = resolvePageResult.module;
+              if (propsExportName in pageModule) {
+                if (handlerOptions.verbose) {
+                  handlerOptions.logger?.info(
+                    `[resolvePageAndProps] Props found in page module`
+                  );
+                }
+                return pageModule;
+              }
+            }
+            // Try loading the page module directly
+            const result = await handlerOptions.loader(propsId);
+            return result;
           }
-          if (handlerOptions.propsPath) {
-            return handlerOptions.loader(handlerOptions.propsPath);
+          if (handlerOptions.verbose) {
+            handlerOptions.logger?.info(
+              `[resolvePageAndProps] Using default props with URL`
+            );
           }
           return {
-            [handlerOptions.propsExportName]: { url: url },
+            [propsExportName]: { url: url },
           };
         },
       });
+
+      if (handlerOptions.verbose) {
+        handlerOptions.logger?.info(
+          `[resolvePageAndProps] Waiting for both promises to resolve`
+        );
+      }
+
       const [resolvePageResult, resolvePropsResult] = await Promise.all([
         resolvePagePromise,
         resolvePropsPromise,
       ]);
+
+      if (handlerOptions.verbose) {
+        handlerOptions.logger?.info(
+          `[resolvePageAndProps] Both promises resolved`
+        );
+      }
+
       if (resolvePageResult.type != "success") {
+        if (handlerOptions.verbose) {
+          handlerOptions.logger?.error(
+            `[resolvePageAndProps] Page resolution failed: ${resolvePageResult.type}`
+          );
+        }
         return resolvePageResult;
       }
       if (resolvePropsResult.type != "success") {
+        if (handlerOptions.verbose) {
+          handlerOptions.logger?.error(
+            `[resolvePageAndProps] Props resolution failed: ${resolvePropsResult.type}`
+          );
+        }
         return resolvePropsResult;
       }
+
+      if (handlerOptions.verbose) {
+        handlerOptions.logger?.info(
+          `[resolvePageAndProps] Both page and props resolved successfully`
+        );
+      }
+
+      let pageProps = resolvePropsResult.module?.[
+        handlerOptions.propsExportName as keyof typeof resolvePropsResult.module
+      ] as any;
+
+      if (handlerOptions.verbose) {
+        handlerOptions.logger?.info(
+          `[resolvePageAndProps] Raw pageProps type: ${typeof pageProps}, isFunction: ${typeof pageProps === "function"}`
+        );
+      }
+
+      // If props is a function, call it with the URL
+      if (typeof pageProps === "function") {
+        if (handlerOptions.verbose) {
+          handlerOptions.logger?.info(
+            `[resolvePageAndProps] Props is a function, calling with url: ${url}`
+          );
+        }
+        try {
+          pageProps = pageProps(url);
+          // Await if it returns a Promise
+          if (pageProps instanceof Promise) {
+            pageProps = await pageProps;
+          }
+        } catch (error) {
+          if (handlerOptions.verbose) {
+            handlerOptions.logger?.error(
+              `[resolvePageAndProps] Error calling props function: ${error}`
+            );
+          }
+          pageProps = {};
+        }
+      }
+
+      if (handlerOptions.verbose) {
+        handlerOptions.logger?.info(
+          `[resolvePageAndProps] Extracted pageProps: ${JSON.stringify(Object.keys(pageProps || {}).length, null, 2)} keys`
+        );
+        handlerOptions.logger?.info(
+          `[resolvePageAndProps] resolvePropsResult.module keys: ${Object.keys(resolvePropsResult.module || {}).join(", ")}`
+        );
+      }
+
       return {
         type: "success" as const,
         PageComponent: resolvePageResult.module[
           handlerOptions.pageExportName
         ] as never,
-        pageProps: resolvePropsResult.module?.[
-          handlerOptions.propsExportName as keyof typeof resolvePropsResult.module
-        ] as never,
+        pageProps: pageProps ?? {}, // Ensure pageProps is always an object, not undefined
       };
     } catch (error) {
+      if (handlerOptions.verbose) {
+        handlerOptions.logger?.error(
+          `[resolvePageAndProps] Error in resolvePageAndProps: ${error}`
+        );
+      }
       return {
         type: "error" as const,
         error: toError(error),
       };
     }
   };
+
+type ResolvePageAndPropsResult<T extends PagePropOpt = PagePropOpt> =
+  | {
+      type: "success";
+      error?: never;
+      PageComponent: PageComponentType<T>;
+      pageProps: T;
+    }
+  | {
+      type: "error";
+      error: Error;
+      PageComponent?: never;
+      pageProps?: never;
+    }
+  | {
+      type: "skip";
+      error?: never;
+      PageComponent?: never;
+      pageProps?: never;
+    };
+
+export type ResolvePageAndPropsFn = <T extends PagePropOpt = PagePropOpt>(
+  options: Pick<
+    CreateHandlerOptions,
+    | "pagePath"
+    | "pageExportName"
+    | "propsPath"
+    | "propsExportName"
+    | "loader"
+    | "verbose"
+    | "logger"
+  > & {
+    moduleBaseURL?: string;
+    route?: string;
+    url?: string;
+    build?: {
+      rscOutputPath: string;
+      outDir?: never;
+      server?: never;
+      client?: never;
+      static?: never;
+      pages?: never;
+      pageExportName?: never;
+      propsExportName?: never;
+      rootExportName?: never;
+    };
+  }
+) => Promise<ResolvePageAndPropsResult<T>>;

package/plugin/helpers/resolveRenderUrl.ts

@@ -0,0 +1,26 @@
+import { DEFAULT_CONFIG } from "../config/index.js";
+import type { ResolvedUserOptions } from "../types.js";
+import { routeToURL } from "../utils/routeToURL.js";
+import type { RscRenderMessage } from "../worker/rsc/types.js";
+
+/**
+ * Resolves the URL for the render operation, either from message or computed from route
+ * 
+ * @param message - The RSC render message containing route information
+ * @param userOptions - User options containing module base URL and build configuration
+ * @returns The resolved URL for the render operation
+ */
+export function resolveRenderUrl(
+  message: RscRenderMessage,
+  userOptions: ResolvedUserOptions
+): string {
+  const options = message.options || {};
+  return (
+    options.url ??
+    routeToURL(
+      options.route,
+      userOptions.moduleBaseURL,
+      userOptions.build?.rscOutputPath ?? DEFAULT_CONFIG.BUILD.rscOutputPath
+    )
+  );
+}