vite-plugin-react-server 1.1.12 → 1.1.14

package/plugin/config/resolveUserConfig.ts

@@ -3,6 +3,8 @@ import type {
   ResolvedUserConfig,
   ResolvedUserOptions,
   AutoDiscoveredFiles,
+  PagePropOpt,
+  InlineCssOpt,
 } from "../types.js";
 import { join } from "node:path";
 import type { OutputOptions, PreRenderedAsset, PreRenderedChunk } from "rollup";
@@ -10,11 +12,14 @@ import { DEFAULT_CONFIG } from "./defaults.js";
 
 let stashedUserConfig: Record<string, ResolvedUserConfig | null> = {};
 
-export type ResolveUserConfigProps = {
+export type ResolveUserConfigProps<
+  T extends PagePropOpt = PagePropOpt,
+  InlineCSS extends InlineCssOpt = InlineCssOpt
+> = {
   condition: "react-client" | "react-server";
   config: UserConfig;
   configEnv: ConfigEnv;
-  userOptions: ResolvedUserOptions;
+  userOptions: ResolvedUserOptions<T, InlineCSS>;
   autoDiscoveredFiles: Pick<AutoDiscoveredFiles, "inputs" | "staticManifest">;
 };
 
@@ -22,13 +27,16 @@ export type ResolveUserConfigReturn =
   | { type: "success"; userConfig: ResolvedUserConfig }
   | { type: "error"; error: Error };
 
-export function resolveUserConfig({
+export function resolveUserConfig<
+  T extends PagePropOpt = PagePropOpt,
+  InlineCSS extends InlineCssOpt = InlineCssOpt
+>({
   condition,
   config,
   configEnv,
   userOptions,
   autoDiscoveredFiles,
-}: ResolveUserConfigProps): ResolveUserConfigReturn {
+}: ResolveUserConfigProps<T, InlineCSS>): ResolveUserConfigReturn {
   const ssr =
     typeof config.build?.ssr === "boolean"
       ? config.build?.ssr
@@ -62,6 +70,9 @@ export function resolveUserConfig({
     fallback: (info: T, ssr: boolean) => string,
     ssr: boolean
   ) => {
+    if ("source" in info && info.source === "") {
+      return "";
+    }
     if (!ssr || !input) {
       return fallback(info, false);
     }
@@ -234,6 +245,7 @@ export function resolveUserConfig({
       // client build options
       build: {
         ...config.build,
+        modulePreload: config.build?.modulePreload ?? false,
         emptyOutDir: config.build?.emptyOutDir ?? true,
         outDir: config.build?.outDir ?? join(userOptions.build.outDir, envDir),
         assetsDir: config.build?.assetsDir ?? userOptions.build.assetsDir,
@@ -246,7 +258,9 @@ export function resolveUserConfig({
         minify: minify,
         rollupOptions: {
           ...config.build?.rollupOptions,
-          input: autoDiscoveredFiles.inputs,
+          input: {
+            ...autoDiscoveredFiles.inputs,
+          },
           output: newOutput,
           preserveEntrySignatures:
             config.build?.rollupOptions?.preserveEntrySignatures ??
@@ -285,6 +299,7 @@ export function resolveUserConfig({
       // server build options
       build: {
         ...config.build,
+        modulePreload: config.build?.modulePreload ?? false,
         emptyOutDir: config.build?.emptyOutDir ?? true,
         outDir: config.build?.outDir ?? join(userOptions.build.outDir, envDir),
         target: config.build?.target ?? "node18",

package/plugin/error/toError.ts

@@ -1,19 +1,51 @@
+import type { Logger } from "vite";
+
 export function toError(error: unknown): {
   name: string;
   message: string;
   stack?: string;
+  cause?: unknown;
 } {
+  if(typeof error === "string") {
+    return {
+      name: "Error",
+      message: error,
+      stack: undefined,
+      cause: undefined,
+    };
+  }
   return error instanceof Error
     ? error
     : typeof error === "object" && error !== null
     ? {
         name: "name" in error ? String(error.name) : "Unknown Error",
-        message: "message" in error ? String(error.message) : "Unknown Error",
+        message: "message" in error ? typeof error.message === "string" ? error.message : JSON.stringify(error.message) : "Unknown Error",
         stack: "stack" in error ? String(error.stack) : undefined,
+        cause: "cause" in error ? toError(error.cause) : error,
       }
     : {
         name: "Unknown Error",
         message: typeof error === "string" ? error : "Unknown Error",
         stack: undefined,
+        cause: error,
       };
 }
+
+export function logError(error: unknown, logger: Logger | Console = console) {
+  const err = toError(error);
+  if (process.env["NODE_ENV"] !== "production") {
+    if (err.stack && err.stack.includes(err.message)) {
+      logger.error(err.stack);
+    } else if (err.stack) {
+      logger.error(err.message + "\n" + err.stack, {
+        error: err,
+      });
+    } else {
+      logger.error(err.message, {
+        error: err,
+      });
+    }
+  } else {
+    logger.error(err.message);
+  }
+}

package/plugin/helpers/cleanObject.ts

@@ -1,44 +1,105 @@
 import type { SerializableRecord } from "../types.js";
 
 // Helper function to serialize RegExp objects
-function serializeRegExp(regex: RegExp): { source: string; flags: string; __isRegExp: boolean } {
+function serializeRegExp(regex: RegExp): {
+  source: string;
+  flags: string;
+  __isRegExp: boolean;
+} {
   return {
     source: regex.source,
     flags: regex.flags,
-    __isRegExp: true
+    __isRegExp: true,
   };
 }
 
-export function cleanObject<T>(obj: T, knownNonSerializableFunctions: Set<string> = new Set(), currentPath: string = ''): SerializableRecord & T {
-  if (obj === null || obj === undefined) return obj as Extract<SerializableRecord, T>;
-  if (typeof obj !== 'object') return obj as Extract<SerializableRecord, T>;
-  if (obj instanceof RegExp) return serializeRegExp(obj) as unknown as Extract<SerializableRecord, T>;
+const isSerializable = (
+  x: unknown
+): x is
+  | number
+  | bigint
+  | boolean
+  | string
+  | undefined
+  | null
+  | Uint8Array
+  | Uint16Array
+  | Uint32Array
+  | Int8Array
+  | Int16Array
+  | Int32Array => {
+  return (
+    typeof x === "number" ||
+    typeof x === "bigint" ||
+    typeof x === "boolean" ||
+    typeof x === "string" ||
+    x instanceof Buffer ||
+    (Array.isArray(x) &&
+      (!x.length ||
+        x instanceof Uint8Array ||
+        x instanceof Uint16Array ||
+        x instanceof Uint32Array ||
+        x instanceof Int8Array ||
+        x instanceof Int16Array ||
+        x instanceof Int32Array))
+  );
+};
+
+export function cleanObject<T>(
+  obj: T,
+  knownNonSerializableFunctions: Set<string> = new Set(),
+  currentPath: string = ""
+): SerializableRecord & T {
+  if (typeof obj !== "object" || obj == null) return obj as Extract<SerializableRecord, T>;
+  if (isSerializable(obj)) return obj as Extract<SerializableRecord, T>;
+
   if (Array.isArray(obj)) {
-    return obj.map((x, i) => cleanObject(x, knownNonSerializableFunctions, `${currentPath}[${i}]`)).filter(x => x !== undefined) as Extract<SerializableRecord, T>;
+    return obj
+      .map((x, i) =>
+        cleanObject(x, knownNonSerializableFunctions, `${currentPath}[${i}]`)
+      )
+      .filter((x) => x !== undefined) as Extract<SerializableRecord, T>;
   }
-  
+  if (obj instanceof RegExp)
+    return serializeRegExp(obj) as unknown as Extract<SerializableRecord, T>;
+
   const result: Record<string, any> = {};
   for (const [key, value] of Object.entries(obj)) {
     const fullPath = currentPath ? `${currentPath}.${key}` : key;
-    const normalizedPath = fullPath.replace(/\[\d+\]/g, '[]');
+    const normalizedPath = fullPath.replace(/\[\d+\]/g, "[]");
     // Skip if it's a function or known non-serializable property
-    if (typeof value === 'function' || knownNonSerializableFunctions.has(normalizedPath) || knownNonSerializableFunctions.has(key)) {
+    if(isSerializable(value)) {
+      result[key] = value;
+      continue;
+    }
+    if (
+      typeof value === "function" ||
+      knownNonSerializableFunctions.has(normalizedPath) ||
+      knownNonSerializableFunctions.has(key)
+    ) {
       continue;
     }
 
     // Handle nested objects
-    if (typeof value === 'object' && value !== null) {
+    if (typeof value === "object" && value !== null) {
       // Check if the object has any functions
       const hasFunctions = Object.entries(value).some(([k, v]) => {
         const nestedPath = `${normalizedPath}.${k}`;
-        return typeof v === 'function' || knownNonSerializableFunctions.has(nestedPath);
+        return (
+          typeof v === "function" ||
+          knownNonSerializableFunctions.has(nestedPath)
+        );
       });
 
       if (hasFunctions) {
         continue;
       }
 
-      const cleaned = cleanObject(value, knownNonSerializableFunctions, `${normalizedPath}.${key}`);
+      const cleaned = cleanObject(
+        value,
+        knownNonSerializableFunctions,
+        `${normalizedPath}.${key}`
+      );
       if (cleaned !== undefined && Object.keys(cleaned).length > 0) {
         result[key] = cleaned;
       }
@@ -46,5 +107,8 @@ export function cleanObject<T>(obj: T, knownNonSerializableFunctions: Set<string
       result[key] = value;
     }
   }
-  return (Object.keys(result).length > 0 ? result : {}) as Extract<SerializableRecord, T>;
-}
+  return (Object.keys(result).length > 0 ? result : {}) as Extract<
+    SerializableRecord,
+    T
+  >;
+}

package/plugin/helpers/collectManifestCss.ts

@@ -1,5 +1,4 @@
 import type { Manifest } from "vite";
-import type { ResolvedUserOptions } from "../types.js";
 
 /**
  * Collects CSS file paths from a manifest by walking through imports starting from a given file
@@ -7,7 +6,6 @@ import type { ResolvedUserOptions } from "../types.js";
 export function collectManifestCss(
   manifest: Manifest,
   startFile: string | string[],
-  userOptions: Pick<ResolvedUserOptions, "normalizer">
 ): Record<string, string> {
   const cssInputs: Record<string, string> = {};
   const visited = new Set<string>();
@@ -29,8 +27,7 @@ export function collectManifestCss(
     // Add CSS files from the css property
     if (fileInfo.css) {
       for (const cssFile of fileInfo.css) {
-        const [keyNormalized, valueNormalized] = userOptions.normalizer(cssFile);
-        cssInputs[keyNormalized] = valueNormalized;
+        cssInputs[cssFile] = cssFile + '.css';
       }
     }
 
@@ -49,8 +46,7 @@ export function collectManifestCss(
         const importedFile = manifest[importPath];
         if (importedFile?.css) {
           for (const cssFile of importedFile.css) {
-            const [keyNormalized, valueNormalized] = userOptions.normalizer(cssFile);
-            cssInputs[keyNormalized] = valueNormalized;
+            cssInputs[cssFile] = cssFile + '.css';
           }
         }
       }

package/plugin/helpers/collectViteModuleGraphCss.ts

@@ -1,5 +1,5 @@
 import type { EnvironmentModuleGraph, ModuleGraph } from "vite";
-import type { CreateHandlerOptions, CssContent } from "../types.js";
+import type { CreateHandlerOptions, CssContent,  InlineCssOpt,  PagePropOpt } from "../types.js";
 import { createCssProps } from "./createCssProps.js";
 
 type CollectViteModuleGraphCssResult =
@@ -29,7 +29,8 @@ type CollectViteModuleGraphCssResult =
     };
 
 export async function collectViteModuleGraphCss<
-  InlineCSS extends boolean | undefined = undefined
+  T extends PagePropOpt = PagePropOpt,
+  InlineCSS extends InlineCssOpt = InlineCssOpt
 >({
   moduleGraph,
   onCss,
@@ -40,7 +41,7 @@ export async function collectViteModuleGraphCss<
   onCss?: (cssContent: CssContent, parentUrl: string) => void;
   parentUrl?: string;
   handlerOptions: Pick<
-    CreateHandlerOptions<InlineCSS>,
+    CreateHandlerOptions<T, InlineCSS>,
     | "pagePath"
     | "moduleBaseURL"
     | "moduleBasePath"
@@ -48,6 +49,8 @@ export async function collectViteModuleGraphCss<
     | "projectRoot"
     | "css"
     | "loader"
+    | "normalizer"
+    | "moduleID"
   >;
 }): Promise<CollectViteModuleGraphCssResult> {
   const {
@@ -58,6 +61,8 @@ export async function collectViteModuleGraphCss<
     projectRoot,
     css,
     loader,
+    normalizer,
+    moduleID,
   } = handlerOptions;
   if (!pagePath) return { type: "skip" };
 
@@ -106,6 +111,8 @@ export async function collectViteModuleGraphCss<
           moduleRootPath: moduleRootPath,
           projectRoot: projectRoot,
           css: css,
+          normalizer: normalizer,
+          moduleID: moduleID,
         },
       });
       cssFiles.set(mod?.url, cssContent);

package/plugin/helpers/createCssProps.tsx

@@ -1,5 +1,6 @@
 import type { ResolvedUserOptions, CssContent } from "../types.js";
-import { join, relative } from "node:path";
+import type { InlineCssOpt, PagePropOpt } from "../../server.js";
+import { join } from "node:path";
 import { deserializeRegExp } from "./serializeUserOptions.js";
 
 /**
@@ -21,7 +22,10 @@ import { deserializeRegExp } from "./serializeUserOptions.js";
  * @param css - The css options
  * @returns A CssContent object
  */
-export const createCssProps = ({
+export const createCssProps = <
+  T extends PagePropOpt = PagePropOpt,
+  InlineCSS extends InlineCssOpt = InlineCssOpt
+>({
   id,
   code,
   userOptions,
@@ -29,29 +33,26 @@ export const createCssProps = ({
   id: string;
   code: string;
   userOptions: Pick<
-    ResolvedUserOptions,
+    ResolvedUserOptions<T, InlineCSS>,
     | "css"
     | "moduleBaseURL"
     | "moduleBasePath"
     | "moduleRootPath"
     | "projectRoot"
+    | "normalizer"
+    | "moduleID"
   >;
-}): CssContent => {
-  const { css, moduleBaseURL, moduleBasePath, moduleRootPath, projectRoot } =
-    userOptions;
+}): CssContent<InlineCSS> => {
+  const { css, moduleRootPath } = 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/
-  const normalizedId = id.startsWith(projectRoot)
-    ? relative(projectRoot, id)
-    : id;
-
+  const [, value] = userOptions.normalizer(id);
+  const moduleID = userOptions.moduleID(value);
   if (css.inlinePatterns?.length) {
     // Deserialize RegExp patterns if they exist
-    const inlinePatterns = css.inlinePatterns?.map((pattern) =>
-      typeof pattern === "string" ? deserializeRegExp(pattern) : pattern
-    );
-    if (inlinePatterns.some((pattern) => pattern.test?.(normalizedId))) {
+    const inlinePatterns = css.inlinePatterns;
+    if (inlinePatterns.some((pattern) => pattern.test?.(id))) {
       inline = true;
     }
   }
@@ -59,46 +60,33 @@ export const createCssProps = ({
     const linkPatterns = css.linkPatterns?.map((pattern) =>
       typeof pattern === "string" ? deserializeRegExp(pattern) : pattern
     );
-    if (linkPatterns.some((pattern) => pattern.test?.(normalizedId))) {
+    if (linkPatterns.some((pattern) => pattern.test?.(id))) {
       inline = false;
     }
   }
   if (inline) {
     return {
       type: "text/css",
-      id: normalizedId,
+      id: moduleID,
       as: "style",
       children: code.trim(),
       ...(process.env["NODE_ENV"] !== "production"
         ? {
-            "data-vite-dev-id": join(projectRoot, moduleRootPath, normalizedId),
+            "data-vite-dev-id": join(moduleRootPath, moduleID),
           }
         : {}),
-    } as CssContent<true>;
+    } as CssContent<InlineCSS>;
   }
-  const joined = normalizedId.startsWith(moduleBasePath) ? normalizedId : join(moduleBasePath, normalizedId);
-  const moduleBaseHasTrailingSlash = moduleBaseURL.endsWith("/");
-  const joinedHasLeadingSlash = joined.startsWith("/");
-  const safeParseURL = (() => {
-    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 {
-    id: normalizedId,
+    id: moduleID,
     as: "link",
     rel: "stylesheet",
-    href: safeParseURL,
+    href:
+      typeof process.env.VITE_PUBLIC_ORIGIN === "string" &&
+      process.env.VITE_PUBLIC_ORIGIN !== ""
+        ? new URL(moduleID, process.env.VITE_PUBLIC_ORIGIN).href
+        : moduleID,
     precedence: "high",
-  } as CssContent<false>;
+  } as CssContent<InlineCSS>;
 };

package/plugin/helpers/createHandler.ts

@@ -1,9 +1,12 @@
-import type { CreateHandlerOptions } from "../types.js";
+import type { CreateHandlerOptions, InlineCssOpt } from "../types.js";
+import type { PagePropOpt } from "../../server.js";
 import { createRscStream } from "./createRscStream.js";
 
-
-export async function createHandler(handlerOptions: CreateHandlerOptions) {
-  if(!handlerOptions.PageComponent) {
+export function createHandler<
+  T extends PagePropOpt = PagePropOpt,
+  InlineCSS extends InlineCssOpt = InlineCssOpt
+>(handlerOptions: CreateHandlerOptions<T, InlineCSS>) {
+  if (!handlerOptions.PageComponent) {
     throw new Error("PageComponent is required");
   }
   try {

package/plugin/helpers/createRscStream.tsx

@@ -1,11 +1,12 @@
 import { React, ReactDOMServer } from "../vendor/vendor.server.js";
-import type { CreateHandlerOptions, StreamMetrics } from "../types.js";
+import type {
+  CreateHandlerOptions,
+  StreamMetrics,
+  PagePropOpt,
+} from "../types.js";
 import { performance } from "node:perf_hooks";
-export function createRscStream<
-  T,
-  C extends React.ComponentType<T>,
-  InlineCSS extends boolean = true
->({
+
+export function createRscStream<T extends PagePropOpt = PagePropOpt>({
   Html = React.Fragment,
   PageComponent,
   pageProps,
@@ -22,7 +23,7 @@ export function createRscStream<
   onEvent,
   projectRoot,
 }: Pick<
-  CreateHandlerOptions<T, C, InlineCSS>,
+  CreateHandlerOptions<T>,
   | "Html"
   | "PageComponent"
   | "pageProps"
@@ -46,7 +47,7 @@ export function createRscStream<
   let streamError: Error | null = null;
   const startTime = performance.now();
   try {
-    const htmlIsFragment = Html == React.Fragment;
+    const htmlIsFragment = Html === React.Fragment;
     const url = route.startsWith(moduleBaseURL) ? route : moduleBaseURL + route;
 
     if (!PageComponent) {
@@ -64,10 +65,15 @@ export function createRscStream<
         },
       };
     }
+
     const elements = htmlIsFragment ? (
-      <CssCollector cssFiles={cssFiles}>
-        <PageComponent {...(pageProps as any)} />
-      </CssCollector>
+      <CssCollector
+        key={route}
+        as={React.Fragment}
+        cssFiles={cssFiles}
+        pageProps={pageProps}
+        Page={PageComponent}
+      />
     ) : (
       <Html
         moduleBase={moduleBase}
@@ -82,15 +88,16 @@ export function createRscStream<
         globalCss={globalCss}
         CssCollector={CssCollector}
         manifest={manifest}
-      >
-        <PageComponent {...(pageProps as any)} />
-      </Html>
+        Page={PageComponent}
+        as={"div"}
+      />
     );
     const stream = ReactDOMServer.renderToPipeableStream(
       elements,
       moduleBasePath,
       {
         ...pipeableStreamOptions,
+        moduleBaseURL: moduleBaseURL,
         onError(error: Error, errorInfo: any) {
           const err = error instanceof Error ? error : new Error(String(error));
           streamError = err;

package/plugin/helpers/index.ts

@@ -15,10 +15,10 @@ export * from "./inputNormalizer.js";
 export * from "./collectBundleManifestCss.js";
 export * from "./collectManifestCss.js";
 export * from "./collectViteModuleGraphCss.js";
-export * from "./createCssProps.jsx";
+export * from "./createCssProps.js";
 
 // Stream and handler creation
-export * from "./createRscStream.jsx";
+export * from "./createRscStream.js";
 export * from "./createHandler.js";
 export * from "./createEventHandler.js";
 

package/plugin/helpers/inputNormalizer.ts

@@ -180,7 +180,7 @@ export function createInputNormalizer({
   root,
   moduleBasePath,
   preserveModulesRoot = undefined,
-  removeExtension = DEFAULT_CONFIG.MODULE_EXTENSION,
+  removeExtension = DEFAULT_CONFIG.AUTO_DISCOVER.moduleExtension,
 }: CreateInputNormalizerProps): InputNormalizer {
   if (stashedNormalizer) {
     return stashedNormalizer;
@@ -246,7 +246,9 @@ export function createInputNormalizer({
         ? virtualPrefix[0] + normalizedPath
         : normalizedPath
       : normalizedPath;
-
+    if(virtualPrefix){
+      return ['', ''];
+    }
     return [key, finalPath];
   };
   return stashedNormalizer;

package/plugin/helpers/moduleResolver.ts

@@ -0,0 +1,36 @@
+let stashedResolve: any = null;
+
+export function setStashedResolve(resolve: any) {
+  stashedResolve = resolve;
+}
+
+export async function resolveClientImport(specifier: string, parentURL: string) {
+  const conditions = ["node", "import"];
+
+  if (stashedResolve === null) {
+    throw new Error(
+      "Expected resolve to have been called before transformSource"
+    );
+  }
+
+  try {
+    const result = await stashedResolve(
+      specifier,
+      {
+        conditions,
+        parentURL,
+      },
+      stashedResolve
+    );
+
+    if (!result) {
+      console.warn(`Failed to resolve import: ${specifier}`);
+      return null;
+    }
+
+    return result;
+  } catch (error) {
+    console.error(`Error resolving import ${specifier}:`, error);
+    return null;
+  }
+}