vite-plugin-react-server 0.3.11 → 0.3.12

package/plugin/config/resolveOptions.ts

@@ -2,8 +2,8 @@ import type { PreRenderedAsset } from "rollup";
 import type { PreRenderedChunk } from "rollup";
 import type { StreamPluginOptions, ResolvedUserOptions } from "../types.js";
 import { DEFAULT_CONFIG } from "./defaults.js";
-import { join } from "path";
 import { createModuleIdGenerator } from "./createModuleIdGenerator.js";
+import { normalizePath } from "vite";
 
 const resolveAutoDiscoverMatcher = (
   options: undefined | string | RegExp | ((path: string) => boolean),
@@ -26,6 +26,32 @@ const resolveAutoDiscoverMatcher = (
   }
 };
 
+const addJS = (path: string) => {
+  if (path.endsWith(".js")) return path;
+  if (path.endsWith("/.")) return path.slice(0, -2) + ".js";
+  if (path.endsWith(".")) return path + "js";
+  return path + ".js";
+};
+
+const handleSearchQuery = (path: string) => {
+  // make the query part of the name of the file so it's not ending up like index1, index2, etc.
+  const searchQuery = path.split("?")[1];
+  if (!searchQuery) return path;
+  // add the folder before the filename
+  const folder = path.split("/").slice(0, -1).join("/");
+  const filename = path.split("/").pop();
+  return `${folder}/${filename}?${searchQuery}`;
+};
+
+const applyPattern = (
+  path: string,
+  pattern?: string | RegExp | ((path: string) => boolean) | undefined,
+  fallback?: string | undefined
+) => {
+  // TODO: What to actually do here? I guess we could replace the extension, but it's not needed since we map them from the manifest anyway.
+  return path;
+};
+
 export const resolveOptions = (
   options: StreamPluginOptions,
   isClient: boolean = false
@@ -33,7 +59,10 @@ export const resolveOptions = (
   | { type: "success"; userOptions: ResolvedUserOptions }
   | { type: "error"; error: Error } => {
   const projectRoot = options.projectRoot ?? process.cwd();
-  const { pageExportName = DEFAULT_CONFIG.PAGE_EXPORT, propsExportName = DEFAULT_CONFIG.PROPS_EXPORT } = options;
+  const {
+    pageExportName = DEFAULT_CONFIG.PAGE_EXPORT_NAME,
+    propsExportName = DEFAULT_CONFIG.PROPS_EXPORT_NAME,
+  } = options;
   const pages =
     typeof options.build?.pages === "function"
       ? options.build.pages
@@ -47,13 +76,26 @@ export const resolveOptions = (
   const staticBuild = options.build?.static ?? DEFAULT_CONFIG.BUILD.static;
   const outDir = options.build?.outDir ?? DEFAULT_CONFIG.BUILD.outDir;
   const assetsDir =
-    options.build?.assetsDir ??
-    `${DEFAULT_CONFIG.CLIENT_ASSETS_DIR}`;
+    options.build?.assetsDir ?? `${DEFAULT_CONFIG.CLIENT_ASSETS_DIR}`;
 
   const ensureModuleBase = (n: string | null) => {
-    if(!n) return '';
+    if (!n) return "";
     return n.startsWith(moduleBase + "/") ? n.slice(moduleBase.length + 1) : n;
+  };
+  const hasWrongRoot = !projectRoot.startsWith("/");
+  if (hasWrongRoot) {
+    console.warn("projectRoot is not a full path", projectRoot);
   }
+  const wrongRoot = !hasWrongRoot ? projectRoot.slice(1) : projectRoot;
+  const ensureNoRoot = (n: string | null) => {
+    if (!n) return "";
+    if (n.startsWith(wrongRoot)) {
+      return n.slice(wrongRoot.length + 1);
+    }
+    return n.startsWith(projectRoot + "/")
+      ? n.slice(projectRoot.length + 1)
+      : n;
+  };
 
   const testModulePattern = resolveAutoDiscoverMatcher(
     options.autoDiscover?.modulePattern,
@@ -97,94 +139,105 @@ export const resolveOptions = (
     options.autoDiscover?.vendorPattern,
     DEFAULT_CONFIG.AUTO_DISCOVER.vendorPattern
   );
-  const preserveModulesRoot = options.build?.preserveModulesRoot ?? DEFAULT_CONFIG.BUILD.preserveModulesRoot;
-  const hashOption = typeof options.build?.hash === "string" ? options.build.hash : DEFAULT_CONFIG.BUILD.hash
-  const hashString = hashOption === '' ? '' : `-[${hashOption}]`;
+  const preserveModulesRoot =
+    options.build?.preserveModulesRoot ??
+    DEFAULT_CONFIG.BUILD.preserveModulesRoot;
+  const hashOption =
+    typeof options.build?.hash === "string"
+      ? options.build.hash
+      : DEFAULT_CONFIG.BUILD.hash;
+  const hashString = hashOption === "" ? "" : `-[${hashOption}]`;
   const hash = (n: string | null) => {
-    if(!n) return '';
-    if(hashString === '' || (!isClient && !testClientComponents(n))) return n;
-    const extensionIndex = n.lastIndexOf('.') 
-    if(extensionIndex !== -1 && !testClientComponents(n)) {
+    if (!n) return "";
+    if (hashString === "") return n;
+    const extensionIndex = n.lastIndexOf(".");
+    if (extensionIndex !== -1) {
       // put hash between extension and filename
-      const extension = n.slice(extensionIndex)
-      const filename = n.slice(0, extensionIndex)
+      const extension = n.slice(extensionIndex);
+      const filename = n.slice(0, extensionIndex);
       return filename + hashString + extension;
     } else {
       return n + hashString;
     }
-  }
+  };
 
   const getOutputPath = (n: string | null) => {
-    if(!n) return '';
+    if (!n) return "";
+    let path = handleSearchQuery(n);
     // Remove src/ prefix if present
-    const path = n.startsWith(moduleBase + "/")
-      ? n.slice(moduleBase.length + 1)
-      : n;
+    path = path.startsWith(moduleBase + "/")
+      ? path.slice(moduleBase.length + 1)
+      : path;
 
-    if (testClientComponents(path)) {
-      return `${assetsDir}/${path}`; 
+    if (testVendor(path)) {
+      return path;
+    }
+    
+    if (testCssModule(path)) {
+      // For CSS modules, keep the .css.js extension
+      return applyPattern(path, options.autoDiscover?.cssModulePattern, ".css.js");
     }
+    
     if (testCss(path)) {
-      return `${path}`; 
+      // For regular CSS files, keep the .css extension
+      return applyPattern(path, options.autoDiscover?.cssPattern, ".css");
     }
-    if(testHtml(path)) {
-      if(options.autoDiscover?.htmlPattern && typeof options.autoDiscover.htmlPattern !== "function") {
-        // if it's not a function, use it as an option for replace
-        return `${path.replace(options.autoDiscover.htmlPattern, '.js')}`;
-      } else {
-        return `${path.replace('.html', '')}`; 
-      }
+
+    if (testClientComponents(path)) {
+      return applyPattern(path, options.autoDiscover?.clientComponents, "client");
     }
-    if(testJson(path)) {
-      if(options.autoDiscover?.jsonPattern && typeof options.autoDiscover.jsonPattern !== "function") {
-        // if it's not a function, use it as an option for replace
-        return `${path.replace(options.autoDiscover.jsonPattern, '.js')}`;
-      } else {
-        return `${path}`; 
-      }
+    if (testHtml(path)) {
+      return applyPattern(path, options.autoDiscover?.htmlPattern, ".html");
+    }
+    if (testJson(path)) {
+      return applyPattern(path, options.autoDiscover?.jsonPattern, ".json");
     }
     if (testPropsPattern(path)) {
-      return `${path}`; 
+      return applyPattern(
+        path,
+        options.autoDiscover?.propsPattern,
+        options.propsExportName?.toLowerCase() ??
+          DEFAULT_CONFIG.PROPS_EXPORT_NAME.toLowerCase()
+      );
     }
     if (testPagePattern(path)) {
-      return `${path}`; 
+      return applyPattern(
+        path,
+        options.autoDiscover?.pagePattern,
+        options.pageExportName?.toLowerCase() ??
+          DEFAULT_CONFIG.PAGE_EXPORT_NAME.toLowerCase()
+      );
     }
     if (testServerFunctions(path)) {
-      return `${api}/${path}`; // 
+      return applyPattern(path, options.autoDiscover?.serverFunctions, "server");
     }
-    if(testCssModule(path)) {
-      if(options.autoDiscover?.cssModulePattern && typeof options.autoDiscover.cssModulePattern !== "function") {
-        // if it's not a function, use it as an option for replace
-        return `${path.replace(options.autoDiscover.cssModulePattern, '.js')}`;
-      } else {
-        return `${path.replace('.css.js', '.js')}`;
-      }
+    if (testModulePattern(path)) {
+      return path;
     }
-    if(testVendor(path)) {
-      return `vendor`;
-    }
-    return `${path}`;
+    return path;
   };
 
   const entryFile = (n: PreRenderedChunk) => {
-    if(testCss(n.name)) {
-      // this is the css.js chunk for ssr, which (if we keep the .css) would go into client, this prevents that.
-      const result = `${hash(getOutputPath(ensureModuleBase(n.name + '.js')))}`;
-      return result;
+    if (testVendor(n.name)) {
+      const search = n.facadeModuleId?.split("?")[1];
+      if(search) {
+        return `${n.name}.${search}.js`;
+      } else {
+        return n.name + ".js";
+      }
     }
-    const result = `${hash(getOutputPath(ensureModuleBase(n.name)))}.js`;
-    return result;
-  }
+    return addJS(getOutputPath(ensureModuleBase(ensureNoRoot(n.name))));
+  };
 
   const chunkFile = (n: PreRenderedChunk) => {
-    const result = `${hash(getOutputPath(ensureModuleBase(n.name)))}.js`;
-    return result;
-  }
+    // For chunks, we always want .js
+    return addJS(getOutputPath(ensureModuleBase(ensureNoRoot('_'+n.name))));
+  };
 
   const assetFile = (n: PreRenderedAsset) => {
-    const result = `${hash(getOutputPath(ensureModuleBase(n.names[0])))}`;
-    return result;
-  }
+    // For assets, keep the original extension
+    return getOutputPath(ensureModuleBase(ensureNoRoot(n.names[0])));
+  };
 
   const build =
     typeof options.build === "object" && options.build !== null
@@ -240,7 +293,7 @@ export const resolveOptions = (
     typeof options.moduleBaseURL === "string"
       ? options.moduleBaseURL
       : moduleBasePath ?? DEFAULT_CONFIG.MODULE_BASE_URL;
-  
+
   const autoDiscover = {
     modulePattern: testModulePattern,
     cssPattern: testCss,
@@ -253,23 +306,26 @@ export const resolveOptions = (
     vendorPattern: testVendor,
   };
 
-  const moduleId = typeof options.moduleId === "function" ? options.moduleId : createModuleIdGenerator({
-    isProduction: process.env['NODE_ENV'] === "production",
-    inputRoot: projectRoot,
-    client: client,
-    server: server,
-    moduleBase: moduleBase,
-    preserveModulesRoot: preserveModulesRoot,
-    removeExtension: DEFAULT_CONFIG.FILE_REGEX,
-    imports: {},
-  });
+  const moduleId =
+    typeof options.moduleId === "function"
+      ? options.moduleId
+      : createModuleIdGenerator({
+          isProduction: process.env["NODE_ENV"] === "production",
+          inputRoot: projectRoot,
+          client: client,
+          server: server,
+          moduleBase: moduleBase,
+          preserveModulesRoot: preserveModulesRoot,
+          removeExtension: DEFAULT_CONFIG.FILE_REGEX,
+          imports: {},
+        });
 
   try {
     return {
       type: "success",
       userOptions: {
         projectRoot,
-        moduleId,
+        moduleId: moduleId,
         moduleBase,
         moduleBasePath,
         moduleBaseURL,
@@ -290,7 +346,9 @@ export const resolveOptions = (
         moduleBaseExceptions: options.moduleBaseExceptions ?? [],
         autoDiscover: autoDiscover,
         pipableStreamOptions: options.pipableStreamOptions ?? {
-          bootstrapModules: [options.clientEntry ?? DEFAULT_CONFIG.CLIENT_ENTRY],
+          bootstrapModules: [
+            options.clientEntry ?? DEFAULT_CONFIG.CLIENT_ENTRY,
+          ],
         },
       },
     };

package/plugin/config/resolveUserConfig.ts

@@ -34,7 +34,10 @@ export function resolveUserConfig({
 
     const normalizer = createInputNormalizer({
       root,
-      preserveModulesRoot: undefined,
+      preserveModulesRoot: userOptions.build.preserveModulesRoot
+        ? userOptions.moduleBase
+        : undefined,
+      removeExtension: true,
     });
 
     const serverEntry = userOptions.serverEntry
@@ -55,16 +58,13 @@ export function resolveUserConfig({
       const allFiles = globSync(`**/*.client.*`, {
         cwd: join(root, userOptions.moduleBase),
       });
-      for (const [key, value] of Object.entries(allFiles).map(([n, path]) => {
-        if (typeof path !== "string") {
-          throw new Error(`Invalid path: ${JSON.stringify(path)}`);
-        }
-        const [key, value] = normalizer(join(userOptions.moduleBase, path));
-        return [key, value];
-      })) {
-        // check if not already in the inputs
+
+      for (const file of allFiles) {
+        const [key, value] = normalizer(join(userOptions.moduleBase, file));
         if (!inputs[key]) {
           inputs[key] = value;
+        } else {
+          console.warn(`[RSC] Client file already exists: ${key}`);
         }
       }
       return inputs;
@@ -73,25 +73,33 @@ export function resolveUserConfig({
       const allFiles = globSync(`${userOptions.moduleBase}/**/*.server.*`, {
         cwd: join(root, userOptions.moduleBase),
       });
-      for (const [key, value] of Object.entries(allFiles).map(normalizer)) {
+      for (const file of allFiles) {
+        const [key, value] = normalizer(join(userOptions.moduleBase, file));
         if (!inputs[key]) {
           inputs[key] = value;
+        } else {
+          console.warn(`[RSC] Server file already exists: ${key}`);
         }
       }
       return inputs;
     };
     const autoDiscoveredFiles = (inputs: Record<string, string>) => {
-      if(!files) {
-        return inputs;
-      }
-      for (const [key, value] of Object.entries( Array.from(files.pageMap.entries())).map(normalizer)) {
+      if (!files) return inputs;
+
+      // Add page files without extra prefix
+      for (const [key, value] of files.pageMap) {
         if (!inputs[key]) {
           inputs[key] = value;
+        } else {
+          console.warn(`[RSC] Page file already exists: ${key}`);
         }
       }
-      for (const [key, value] of Object.entries( Array.from(files.propsMap.entries())).map(normalizer)) {
+      // Add props files without extra prefix
+      for (const [key, value] of files.propsMap) {
         if (!inputs[key]) {
           inputs[key] = value;
+        } else {
+          console.warn(`[RSC] Props file already exists: ${key}`);
         }
       }
       return inputs;
@@ -102,21 +110,37 @@ export function resolveUserConfig({
       ? autoDiscoveredClientFiles(clientEntry)
       : autoDiscoveredServerFiles(autoDiscoveredFiles(serverEntry ?? {}));
 
-    if (userOptions.build.preserveModulesRoot) {
-      inputs = Object.fromEntries(
-        Object.entries(inputs).map(([key, value]) => {
-          if (key.startsWith(userOptions.moduleBase + "/")) {
-            return [key.slice(userOptions.moduleBase.length + 1), value];
-          }
-          return [key, value];
-        })
-      );
-    }
-
     const envDir = isClient
       ? userOptions.build.client
       : userOptions.build.server;
+
+    const pluginOutput = {
+      preserveModules: !isClient,
+      preserveModulesRoot: userOptions.build.preserveModulesRoot
+        ? userOptions.moduleBase
+        : undefined,
+      entryFileNames: userOptions.build.entryFile,
+      assetFileNames: userOptions.build.assetFile,
+      chunkFileNames: userOptions.build.chunkFile,
+      format: "esm",
+      exports: "named",
+      hoistTransitiveImports: false,
+      generatedCode: {
+        constBindings: true,
+        objectShorthand: true,
+      },
+      interop: "auto",
+    } satisfies OutputOptions;
+    
+    const newOutput = Array.isArray(config.build?.rollupOptions?.output)
+      ? [...config.build?.rollupOptions?.output, pluginOutput]
+      : typeof config.build?.rollupOptions?.output === "object" &&
+        config.build?.rollupOptions?.output !== null
+      ? [config.build?.rollupOptions?.output, pluginOutput]
+      : pluginOutput;
+
     if (isClient) {
+      // client build options
       return {
         type: "success",
         userConfig: {
@@ -125,69 +149,46 @@ export function resolveUserConfig({
           mode: configEnv.command === "build" ? "production" : "development",
           resolve: {
             external: ["react", "react-dom"],
-            alias: {
-              [userOptions.moduleBasePath]: join(root, userOptions.moduleBasePath),
-              [userOptions.moduleBase]: join(root, userOptions.moduleBase),
-              ['index.html']: join(root, 'index.html')
-            }
+            alias: {},
           },
           ssr: {
             target: "node",
-            external: ["react", "react-dom", "react-server-dom-esm/client.browser"],
+            external: [
+              "react",
+              "react-dom",
+              "react-server-dom-esm/client.browser",
+            ],
             resolve: {
-              conditions: ["react-server"],
               externalConditions: ["react-server"],
             },
           },
+          // client build options
           build: {
             ...config.build,
             emptyOutDir: config.build?.emptyOutDir ?? true,
             outDir: join(userOptions.build.outDir, envDir),
-            assetsDir: userOptions.build.assetsDir,
+            assetsDir: config.build?.assetsDir ?? userOptions.build.assetsDir,
             // modern browsers
             target: ["esnext"],
             minify: true,
-            ssr: true,
+            ssr:
+              typeof configEnv.isSsrBuild === "boolean"
+                ? configEnv.isSsrBuild
+                : true,
             manifest: config.build?.manifest ?? `.vite/manifest.json`,
             ssrManifest: config.build?.ssrManifest ?? `.vite/ssr-manifest.json`,
-            ssrEmitAssets: true,
+            ssrEmitAssets: config.build?.ssrEmitAssets ?? true,
             rollupOptions: {
               ...config.build?.rollupOptions,
               input: inputs,
-              output: {
-                ...config.build?.rollupOptions?.output,
-                preserveModulesRoot: userOptions.build.preserveModulesRoot
-                  ? userOptions.moduleBase
-                  : undefined,
-              },
+              output: newOutput,
+              preserveEntrySignatures: "exports-only",
             },
           },
         },
       };
     }
-    const mergeOutputArray = (Array.isArray(config.build?.rollupOptions?.output)) 
-    const pluginOutput =  {
-      preserveModules: true,
-      preserveModulesRoot: userOptions.build.preserveModulesRoot
-        ? userOptions.moduleBase
-        : undefined,
-      entryFileNames: userOptions.build.entryFile,
-      assetFileNames: userOptions.build.assetFile,
-      chunkFileNames: userOptions.build.chunkFile,
-      format: "esm",
-      exports: "named",
-      hoistTransitiveImports: false,
-      generatedCode: {
-        constBindings: true,
-        objectShorthand: true,
-      },
-      interop: "auto",
-    } satisfies OutputOptions;
-    const newOutput = Array.isArray(config.build?.rollupOptions?.output) ? 
-      [...config.build?.rollupOptions?.output, pluginOutput]
-      : typeof config.build?.rollupOptions?.output === 'object' && config.build?.rollupOptions?.output !== null ?
-        [config.build?.rollupOptions?.output, pluginOutput]
-        : pluginOutput
+    // server build options
     return {
       type: "success",
       userConfig: {
@@ -195,27 +196,25 @@ export function resolveUserConfig({
         root: root,
         mode: configEnv.command === "build" ? "production" : "development",
         resolve: {
-          alias: {
-            [userOptions.moduleBasePath]: join(root, userOptions.moduleBasePath),
-            [userOptions.moduleBase]: join(root, userOptions.moduleBase),
-            ['index.html']: join(root, 'index.html')
-          }
+          alias: {},
+          externalConditions: ["react-server"],
         },
+        // server build options
         build: {
           ...config.build,
           emptyOutDir: config.build?.emptyOutDir ?? true,
           outDir: join(userOptions.build.outDir, envDir),
-          target: "node18",
-          minify: true,
-          ssr: true,
+          target: config.build?.target ?? "node18",
+          minify: config.build?.minify ?? true,
+          ssr: config.build?.ssr ?? configEnv.isSsrBuild ?? true,
           manifest: config.build?.manifest ?? `.vite/manifest.json`,
           ssrManifest: config.build?.ssrManifest ?? `.vite/ssr-manifest.json`,
-          ssrEmitAssets: true,
+          ssrEmitAssets: config.build?.ssrEmitAssets ?? true,
           assetsDir: config.build?.assetsDir ?? userOptions.build.assetsDir,
-          rollupOptions:  {
+          rollupOptions: {
             ...config.build?.rollupOptions,
             input: inputs,
-            preserveEntrySignatures: "strict",
+            preserveEntrySignatures: config.build?.rollupOptions?.preserveEntrySignatures ?? "strict",
             output: newOutput,
           },
         },