vite-plugin-react-server 1.1.13 → 1.1.14

package/plugin/config/resolveOptions.ts

@@ -40,8 +40,11 @@ const handleSearchQuery = (path: string) => {
 const registerPath = (
   path: string,
   _pattern?: string | RegExp | ((path: string) => boolean) | undefined,
-  _fallback?: string | undefined
+  ext?: string | undefined
 ) => {
+  if (ext && !path.endsWith(ext)) {
+    return path + ext;
+  }
   return path;
 };
 
@@ -145,24 +148,24 @@ export const resolveOptions = <
       moduleBasePath,
     });
 
-  const testModuleExtension = resolveAutoDiscoverMatcher(
+  const moduleExtension = resolveAutoDiscoverMatcher(
     options.autoDiscover?.moduleExtension,
     DEFAULT_CONFIG.AUTO_DISCOVER.moduleExtension
   );
   // Auto-discovery pattern matchers
-  const testModulePattern = resolveAutoDiscoverMatcher(
+  const modulePattern = resolveAutoDiscoverMatcher(
     options.autoDiscover?.modulePattern,
     options.autoDiscover?.moduleExtension
-      ? (id: string) => testModuleExtension(id.toLowerCase())
+      ? (id: string) => moduleExtension(id.toLowerCase())
       : DEFAULT_CONFIG.AUTO_DISCOVER.modulePattern
   );
 
-  const testJson = resolveAutoDiscoverMatcher(
+  const jsonPattern = resolveAutoDiscoverMatcher(
     options.autoDiscover?.jsonPattern,
     DEFAULT_CONFIG.AUTO_DISCOVER.jsonPattern
   );
 
-  const testCss = resolveAutoDiscoverMatcher(
+  const cssPattern = resolveAutoDiscoverMatcher(
     options.autoDiscover?.cssPattern,
     DEFAULT_CONFIG.AUTO_DISCOVER.cssPattern
   );
@@ -177,80 +180,85 @@ export const resolveOptions = <
     DEFAULT_CONFIG.AUTO_DISCOVER.rscPattern
   );
 
-  const testClientComponents = resolveAutoDiscoverMatcher(
+  const clientComponents = resolveAutoDiscoverMatcher(
     options.autoDiscover?.clientComponents,
     options.autoDiscover?.moduleExtension
       ? (id: string) =>
-          testModuleExtension(id.toLowerCase()) &&
+          moduleExtension(id.toLowerCase()) &&
           /(\.|\/)?client(\.|\/)/.test(id.toLowerCase())
       : DEFAULT_CONFIG.AUTO_DISCOVER.clientComponents
   );
 
-  const testServerFunctions = resolveAutoDiscoverMatcher(
+  const serverFunctions = resolveAutoDiscoverMatcher(
     options.autoDiscover?.serverFunctions,
     options.autoDiscover?.moduleExtension
       ? (id: string) =>
-          testModuleExtension(id.toLowerCase()) &&
+          moduleExtension(id.toLowerCase()) &&
           /(\.|\/)?server(\.|\/)/.test(id.toLowerCase())
       : DEFAULT_CONFIG.AUTO_DISCOVER.serverFunctions
   );
 
-  const testNodeOnly = resolveAutoDiscoverMatcher(
+  const nodeOnly = resolveAutoDiscoverMatcher(
     options.autoDiscover?.nodeOnly,
     DEFAULT_CONFIG.AUTO_DISCOVER.nodeOnly
   );
 
-  const testPropsPattern = resolveAutoDiscoverMatcher(
+  const propsPattern = resolveAutoDiscoverMatcher(
     options.autoDiscover?.propsPattern,
     options.autoDiscover?.moduleExtension
       ? (id: string) =>
-          testModuleExtension(id.toLowerCase()) &&
+          moduleExtension(id.toLowerCase()) &&
           /(\.|\/)?props(\.|\/)/.test(id.toLowerCase())
       : DEFAULT_CONFIG.AUTO_DISCOVER.propsPattern
   );
 
-  const testPagePattern = resolveAutoDiscoverMatcher(
+  const pagePattern = resolveAutoDiscoverMatcher(
     options.autoDiscover?.pagePattern,
     options.autoDiscover?.moduleExtension
       ? (id: string) =>
-          testModuleExtension(id.toLowerCase()) &&
+          moduleExtension(id.toLowerCase()) &&
           /(\.|\/)?page(\.|\/)/.test(id.toLowerCase())
       : DEFAULT_CONFIG.AUTO_DISCOVER.pagePattern
   );
 
-  const testCssModule = resolveAutoDiscoverMatcher(
+  const cssModulePattern = resolveAutoDiscoverMatcher(
     options.autoDiscover?.cssModulePattern,
     DEFAULT_CONFIG.AUTO_DISCOVER.cssModulePattern
   );
 
-  const testVendor = resolveAutoDiscoverMatcher(
+  const vendorPattern = resolveAutoDiscoverMatcher(
     options.autoDiscover?.vendorPattern,
     DEFAULT_CONFIG.AUTO_DISCOVER.vendorPattern
   );
 
-  const testVirtual = resolveAutoDiscoverMatcher(
+  const virtualPattern = resolveAutoDiscoverMatcher(
     options.autoDiscover?.virtualPattern,
     DEFAULT_CONFIG.AUTO_DISCOVER.virtualPattern
   );
 
-  const testDotFiles = resolveAutoDiscoverMatcher(
+  const dotFiles = resolveAutoDiscoverMatcher(
     options.autoDiscover?.dotFiles,
     DEFAULT_CONFIG.AUTO_DISCOVER.dotFiles
   );
 
-  const isServerFunction = resolveAutoDiscoverMatcher(
+  const isServerFunctionCode = resolveAutoDiscoverMatcher(
     options.autoDiscover?.isServerFunction,
     options.autoDiscover?.serverDirective
-      ? (code: string) =>
-          code.match(options.autoDiscover?.serverDirective!) !== null
-      : DEFAULT_CONFIG.AUTO_DISCOVER.serverDirective
+      ? (code: string, moduleId?: string) =>
+          code.match(options.autoDiscover?.serverDirective!) != null ||
+          (moduleId && serverFunctions(moduleId)) ||
+          false
+      : (code: string, moduleId?: string) =>
+          code.match(DEFAULT_CONFIG.AUTO_DISCOVER.serverDirective) != null ||
+          (moduleId && serverFunctions(moduleId)) ||
+          false
   );
 
-  const isClientComponent = resolveAutoDiscoverMatcher(
+  const isClientComponentCode = resolveAutoDiscoverMatcher(
     options.autoDiscover?.isClientComponent,
     options.autoDiscover?.clientDirective
       ? (code: string) =>
-          code.match(options.autoDiscover?.clientDirective!) !== null
+          code.match(options.autoDiscover?.clientDirective!) != null
       : DEFAULT_CONFIG.AUTO_DISCOVER.clientDirective
   );
 
@@ -287,67 +295,83 @@ export const resolveOptions = <
       return n + hashString;
     }
   };
+  const jsExtension = options.autoDiscover?.jsExtension ?? ".js";
+  const cssExtension = options.autoDiscover?.cssExtension ?? ".css";
+  const htmlExtension = options.autoDiscover?.htmlExtension ?? ".html";
+  const jsonExtension = options.autoDiscover?.jsonExtension ?? ".json";
+  const rscExtension = options.autoDiscover?.rscExtension ?? ".rsc";
 
   // Output path resolution
   const getOutputPath = (n: string | null) => {
     if (!n) return "";
     let path = handleSearchQuery(n);
-    path = path.startsWith(moduleBase + "/")
-      ? path.slice(moduleBase.length + 1)
+    path = path.startsWith(moduleBase + moduleBasePath)
+      ? path.slice(moduleBase.length + moduleBasePath.length)
       : path;
 
-    if (testVendor(path))
-      return registerPath(path, options.autoDiscover?.vendorPattern, "vendor");
-    if (testCssModule(path))
+    if (vendorPattern(path))
+      return registerPath(
+        path,
+        options.autoDiscover?.vendorPattern,
+        jsExtension
+      );
+    if (cssModulePattern(path))
       return registerPath(
         path,
         options.autoDiscover?.cssModulePattern,
-        ".css.js"
+        cssExtension + jsExtension
       );
-    if (testCss(path))
-      return registerPath(path, options.autoDiscover?.cssPattern, ".css");
-    if (testClientComponents(path))
+    if (cssPattern(path))
+      return registerPath(path, options.autoDiscover?.cssPattern, cssExtension);
+    if (clientComponents(path))
       return registerPath(
         path,
         options.autoDiscover?.clientComponents,
-        "client"
+        jsExtension
       );
     if (testHtml(path))
-      return registerPath(path, options.autoDiscover?.htmlPattern, ".html");
-    if (testJson(path))
-      return registerPath(path, options.autoDiscover?.jsonPattern, ".json");
-    if (testPropsPattern(path))
       return registerPath(
         path,
-        options.autoDiscover?.propsPattern,
-        options.propsExportName?.toLowerCase() ??
-          DEFAULT_CONFIG.PROPS_EXPORT_NAME.toLowerCase()
+        options.autoDiscover?.htmlPattern,
+        htmlExtension
       );
-    if (testPagePattern(path))
+    if (jsonPattern(path))
       return registerPath(
         path,
-        options.autoDiscover?.pagePattern,
-        options.pageExportName?.toLowerCase() ??
-          DEFAULT_CONFIG.PAGE_EXPORT_NAME.toLowerCase()
+        options.autoDiscover?.jsonPattern,
+        jsonExtension
       );
-    if (testServerFunctions(path))
+    if (propsPattern(path))
+      return registerPath(
+        path,
+        options.autoDiscover?.propsPattern,
+        jsExtension
+      );
+    if (pagePattern(path))
+      return registerPath(path, options.autoDiscover?.pagePattern, jsExtension);
+    if (serverFunctions(path))
       return registerPath(
         path,
         options.autoDiscover?.serverFunctions,
-        "server"
+        jsExtension
+      );
+    if (modulePattern(path))
+      return registerPath(
+        path,
+        options.autoDiscover?.modulePattern,
+        jsExtension
       );
-    if (testModulePattern(path)) return path;
     return path;
   };
 
   // File naming functions
   const entryFile = (n: PreRenderedChunk, ssr: boolean) => {
-    if (testVendor(n.name)) {
+    if (vendorPattern(n.name)) {
       const search = n.facadeModuleId?.split("?")[1];
       if (search) {
-        return hash(`${n.name}.${search}.js`, ssr);
+        return hash(`${n.name}.${search}${jsExtension}`, ssr);
       } else {
-        return hash(`${n.name}.js`, ssr);
+        return hash(`${n.name}${jsExtension}`, ssr);
       }
     }
     return hash(addModuleExtension(getOutputPath(normalizer(n.name)[0])), ssr);
@@ -358,7 +382,12 @@ export const resolveOptions = <
   };
 
   const assetFile = (n: PreRenderedAsset, ssr: boolean) => {
-    return hash(getOutputPath(normalizer(n.names[0])[0]), ssr);
+    const firstName = n.names[0];
+    const extIndex = firstName.lastIndexOf(".");
+    const nameWithoutExtension = firstName.slice(0, extIndex);
+    const extension = firstName.slice(extIndex);
+    const assetName = normalizer(nameWithoutExtension)[0] + extension;
+    return hash(getOutputPath(assetName), ssr);
   };
 
   const moduleID =
@@ -427,6 +456,11 @@ export const resolveOptions = <
 
   // Auto-discovery configuration
   const autoDiscover = {
+    jsExtension: jsExtension,
+    cssExtension: cssExtension,
+    htmlExtension: htmlExtension,
+    jsonExtension: jsonExtension,
+    rscExtension: rscExtension,
     moduleExtension:
       options.autoDiscover?.moduleExtension ??
       DEFAULT_CONFIG.AUTO_DISCOVER.moduleExtension,
@@ -436,22 +470,22 @@ export const resolveOptions = <
     clientDirective:
       options.autoDiscover?.clientDirective ??
       DEFAULT_CONFIG.AUTO_DISCOVER.clientDirective,
-    modulePattern: testModulePattern,
-    cssPattern: testCss,
-    jsonPattern: testJson,
-    clientComponents: testClientComponents,
-    serverFunctions: testServerFunctions,
-    nodeOnly: testNodeOnly,
-    propsPattern: testPropsPattern,
-    pagePattern: testPagePattern,
-    cssModulePattern: testCssModule,
-    vendorPattern: testVendor,
-    dotFiles: testDotFiles,
-    virtualPattern: testVirtual,
+    modulePattern: modulePattern,
+    cssPattern: cssPattern,
+    jsonPattern: jsonPattern,
+    clientComponents: clientComponents,
+    serverFunctions: serverFunctions,
+    nodeOnly: nodeOnly,
+    propsPattern: propsPattern,
+    pagePattern: pagePattern,
+    cssModulePattern: cssModulePattern,
+    vendorPattern: vendorPattern,
+    dotFiles: dotFiles,
+    virtualPattern: virtualPattern,
     htmlPattern: testHtml,
     rscPattern: testRsc,
-    isServerFunction: isServerFunction,
-    isClientComponent: isClientComponent,
+    isServerFunctionCode: isServerFunctionCode,
+    isClientComponentCode: isClientComponentCode,
   };
   const pipeableStreamOptions = options.pipeableStreamOptions
     ? options.pipeableStreamOptions

package/plugin/error/toError.ts

@@ -34,8 +34,6 @@ export function toError(error: unknown): {
 export function logError(error: unknown, logger: Logger | Console = console) {
   const err = toError(error);
   if (process.env["NODE_ENV"] !== "production") {
-    console.trace(err)
-    
     if (err.stack && err.stack.includes(err.message)) {
       logger.error(err.stack);
     } else if (err.stack) {

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

@@ -49,6 +49,8 @@ export async function collectViteModuleGraphCss<
     | "projectRoot"
     | "css"
     | "loader"
+    | "normalizer"
+    | "moduleID"
   >;
 }): Promise<CollectViteModuleGraphCssResult> {
   const {
@@ -59,6 +61,8 @@ export async function collectViteModuleGraphCss<
     projectRoot,
     css,
     loader,
+    normalizer,
+    moduleID,
   } = handlerOptions;
   if (!pagePath) return { type: "skip" };
 
@@ -107,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,6 +1,6 @@
 import type { ResolvedUserOptions, CssContent } from "../types.js";
 import type { InlineCssOpt, PagePropOpt } from "../../server.js";
-import { join, relative } from "node:path";
+import { join } from "node:path";
 import { deserializeRegExp } from "./serializeUserOptions.js";
 
 /**
@@ -39,23 +39,20 @@ export const createCssProps = <
     | "moduleBasePath"
     | "moduleRootPath"
     | "projectRoot"
+    | "normalizer"
+    | "moduleID"
   >;
 }): CssContent<InlineCSS> => {
-  const { css, moduleBaseURL, moduleBasePath, moduleRootPath, projectRoot } =
-    userOptions;
+  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;
     }
   }
@@ -63,59 +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<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<InlineCSS>;
 };

package/plugin/helpers/createRscStream.tsx

@@ -97,6 +97,7 @@ export function createRscStream<T extends PagePropOpt = PagePropOpt>({
       moduleBasePath,
       {
         ...pipeableStreamOptions,
+        moduleBaseURL: moduleBaseURL,
         onError(error: Error, errorInfo: any) {
           const err = error instanceof Error ? error : new Error(String(error));
           streamError = err;

package/plugin/loader/createDefaultLoader.ts

@@ -1,6 +1,8 @@
 import { readFileSync } from "fs";
 import * as esbuild from "esbuild";
 import type { LoaderContext } from "../types.js";
+import { transformModuleIfNeeded } from "./transformModuleIfNeeded.js";
+import { createMappingsSerializer } from "../source-map/createMappingsSerializer.js";
 
 export interface LoaderResult {
   source: string;
@@ -25,9 +27,46 @@ export function createDefaultLoader(source?: string): Loader {
         sourcemap: true,
         sourcefile: id,
       });
+
+      // Transform the code for RSC boundaries
+      const transformed = transformModuleIfNeeded(
+        result.code,
+        id,
+        null, // isServerFunction
+        null, // isClientComponent
+        true // isServerEnvironment
+      );
+
+      // Create a new source map with proper mappings
+      const map = result.map ? {
+        version: 3,
+        sources: [id],
+        sourcesContent: [transformed],
+        mappings: (() => {
+          const serializer = createMappingsSerializer();
+          let mappings = '';
+          
+          // Map each line of the transformed code to its corresponding line in the original source
+          const transformedLines = transformed.split('\n');
+          for (let i = 0; i < transformedLines.length; i++) {
+            if (i > 0) mappings += ';';
+            // For the import and registration lines, map to the first line of the original source
+            if (transformedLines[i].includes('import {') || transformedLines[i].includes('registerServerReference')) {
+              mappings += serializer(i + 1, 0, 0, 1, 0, 0);
+            } else {
+              // For the actual code, map to the corresponding line in the original source
+              const originalLine = Math.max(1, i - 1); // Adjust for the import line
+              mappings += serializer(i + 1, 0, 0, originalLine, 0, 0);
+            }
+          }
+
+          return mappings;
+        })()
+      } : null;
+
       return {
-        source: result.code,
-        map: result.map ? JSON.parse(result.map) : null,
+        source: transformed,
+        map
       };
     };
   }
@@ -47,9 +86,46 @@ export function createDefaultLoader(source?: string): Loader {
           sourcemap: true,
           sourcefile: id,
         });
+
+        // Transform the code for RSC boundaries
+        const transformed = transformModuleIfNeeded(
+          result.code,
+          id,
+          null, // isServerFunction
+          null, // isClientComponent
+          true // isServerEnvironment
+        );
+
+        // Create a new source map with proper mappings
+        const map = result.map ? {
+          version: 3,
+          sources: [id],
+          sourcesContent: [transformed],
+          mappings: (() => {
+            const serializer = createMappingsSerializer();
+            let mappings = '';
+            
+            // Map each line of the transformed code to its corresponding line in the original source
+            const transformedLines = transformed.split('\n');
+            for (let i = 0; i < transformedLines.length; i++) {
+              if (i > 0) mappings += ';';
+              // For the import and registration lines, map to the first line of the original source
+              if (transformedLines[i].includes('import {') || transformedLines[i].includes('registerServerReference')) {
+                mappings += serializer(i + 1, 0, 0, 1, 0, 0);
+              } else {
+                // For the actual code, map to the corresponding line in the original source
+                const originalLine = Math.max(1, i - 1); // Adjust for the import line
+                mappings += serializer(i + 1, 0, 0, originalLine, 0, 0);
+              }
+            }
+
+            return mappings;
+          })()
+        } : null;
+
         return {
-          source: result.code,
-          map: result.map ? JSON.parse(result.map) : null,
+          source: transformed,
+          map
         };
       };
     }