vite-plugin-react-server 0.3.11 → 0.3.12

package/plugin/helpers/getBundleManifest.ts

@@ -1,10 +1,11 @@
 import type {
-  NormalizedOutputOptions,
   OutputBundle,
   PluginContext,
+  OutputChunk,
 } from "rollup";
 import { createInputNormalizer } from "./inputNormalizer.js";
 import { join } from "path";
+import { DEFAULT_CONFIG, resolveOptions } from "../config/index.js";
 
 interface BundleManifestEntry {
   file: string;
@@ -23,53 +24,90 @@ interface BundleManifestEntry {
  * @param preserveModulesRoot - The preserve modules root
  * @returns The bundle manifest
  */
-export function getBundleManifest(
+export function getBundleManifest({
+  pluginContext,
+  bundle,
+  moduleBase,
+  preserveModulesRoot,
+}: {
   pluginContext: PluginContext,
   bundle: OutputBundle,
-  preserveModulesRoot: string | undefined
-): Record<string, BundleManifestEntry> {
+  moduleBase?: string,
+  preserveModulesRoot?: boolean,
+}): Record<string, BundleManifestEntry> {
 
   const normalizer = createInputNormalizer({
     root: pluginContext.environment.config.root,
-    removeExtension: false,
-    preserveModulesRoot:
-      typeof preserveModulesRoot === "string" ? preserveModulesRoot : undefined,
+    removeExtension: DEFAULT_CONFIG.FILE_REGEX,
+    preserveModulesRoot: preserveModulesRoot === true ? moduleBase : undefined,
   });
 
-  if (!bundle) {
-    return {};
-  }
+  if (!bundle) return {};
 
-  return Object.fromEntries(
+  // Track virtual modules to prevent duplicates
+  const virtualModules = new Map<string, string>();
+
+  const bundleManifest = Object.fromEntries(
     Object.entries(bundle)
       .map(([fileName, chunk]) => {
         if (chunk.type !== "chunk") return null as never;
+        const chunkWithFacade = chunk as OutputChunk;
+        
+        // Get the module ID, preferring facadeModuleId
+        const moduleId = chunkWithFacade.facadeModuleId || chunkWithFacade.moduleIds[0] || fileName;
+        
+        // Handle commonjs helpers specially - must be done before normalization
+        if (moduleId.includes('commonjsHelpers')) {
+          return [
+            moduleId,
+            {
+              file: 'commonjs-runtime.js',
+              name: 'commonjsHelpers',
+              src: moduleId,
+              isEntry: false
+            }
+          ];
+        }
+        
+        // Normalize both paths, removing the root prefix
+        const [normalizedId, sourcePath] = normalizer(moduleId);
 
-        // Normalize both the module ID and file path
-        const [moduleId, sourcePath] = normalizer(
-          chunk.facadeModuleId || chunk.moduleIds[0] || fileName
-        );
-        return [
-          moduleId,
+        // For virtual modules, use a consistent naming scheme
+        let finalFileName = fileName;
+        if (moduleId.includes('?')) {
+          const [basePath, query] = moduleId.split('?');
+          const virtualPath = basePath.includes('node_modules') 
+            ? basePath.split('node_modules/')[1] 
+            : basePath;
+          
+          // Create a unique key for this virtual module
+          const virtualKey = `${virtualPath}?${query}`;
+          
+          if (!virtualModules.has(virtualKey)) {
+            // First time seeing this virtual module
+            const virtualFileName = `${virtualPath.replace(/\.js$/, '')}.${query}.js`;
+            virtualModules.set(virtualKey, virtualFileName);
+          }
+          
+          finalFileName = virtualModules.get(virtualKey)!;
+        }
+        const bundleManifestEntry = [
+          sourcePath,
           {
-            file: join( pluginContext.environment.config.build.outDir, fileName),
-            name: moduleId,
-            src: sourcePath.startsWith(pluginContext.environment.config.root) ? sourcePath.slice(pluginContext.environment.config.root.length + 1) : sourcePath,
+            file: finalFileName,
+            name: normalizedId.startsWith('\x00') ? normalizedId.replace('\x00', '') : normalizedId,
+            src: sourcePath.startsWith('/') ? sourcePath.slice(1) : sourcePath,
             isEntry: chunk.isEntry,
-            ...(Object.keys(chunk.imports).length > 0
-              ? { imports: chunk.imports }
-              : {}),
-            ...(Object.keys(chunk.dynamicImports).length > 0
-              ? { dynamicImports: chunk.dynamicImports }
-              : {}),
-            ...(chunk.viteMetadata?.importedCss
-              ? {
-                  css: Array.from(chunk.viteMetadata.importedCss),
-                }
-              : {}),
+            ...(chunk.imports?.length > 0 ? { imports: chunk.imports } : {}),
+            ...(chunk.dynamicImports?.length > 0 ? { dynamicImports: chunk.dynamicImports } : {}),
+            ...(chunk.viteMetadata?.importedCss?.size ? {
+              css: Array.from(chunk.viteMetadata.importedCss),
+            } : {}),
           },
         ];
+        return bundleManifestEntry;
       })
       .filter(Boolean)
   );
+  return bundleManifest;
 }

package/plugin/helpers/inputNormalizer.ts

@@ -7,7 +7,6 @@ type CreateInputNormalizerProps = {
   root: string;
   preserveModulesRoot?: string | undefined;
   removeExtension?: boolean | RegExp | string | ((path: string) => boolean);
-  moduleBasePath?: string;
 };
 
 const resolveExtensionOptions = (
@@ -48,120 +47,119 @@ const resolveRootOption = (
   root: CreateInputNormalizerProps["root"],
   preserveModulesRoot: CreateInputNormalizerProps["preserveModulesRoot"]
 ) => {
-  if (typeof root !== "string" && typeof preserveModulesRoot !== "string") {
-    return "";
-  }
   if (typeof preserveModulesRoot === "string" && typeof root === "string") {
-    const normalizedRoot = normalizePath(root);
-    const normalizedPreserveModulesRoot = normalizePath(preserveModulesRoot);
-    if (normalizedPreserveModulesRoot.startsWith(normalizedRoot)) {
-      return join(normalizedPreserveModulesRoot, "/");
-    }
-    return join(normalizedRoot, normalizedPreserveModulesRoot, "/");
-  }
-  if (typeof preserveModulesRoot === "string" && typeof root !== "string") {
-    const normalizedRoot = normalizePath(root);
     const normalizedPreserveModulesRoot = normalizePath(preserveModulesRoot);
-    if (normalizedRoot.startsWith(normalizedPreserveModulesRoot)) {
-      return join(normalizedPreserveModulesRoot, "/");
+    if (normalizedPreserveModulesRoot.startsWith(root)) {
+      return normalizedPreserveModulesRoot.slice(root.length + 1);
     }
-    return join(normalizedRoot, normalizedPreserveModulesRoot, "/");
-  }
-  if (typeof preserveModulesRoot !== "string" && typeof root === "string") {
-    const normalizedRoot = normalizePath(root);
-    return join(normalizedRoot, "/");
+    return "";
+  } else if (typeof preserveModulesRoot === "string" && typeof root !== "string") {
+    return normalizePath(preserveModulesRoot);
   }
-  return "/";
+  return "";
 };
 const createKeyNormalizer =
   ({
-    normalizedRoot,
+    root: normalizedRoot,
     preserveModulesRoot,
     handleExtension,
   }: {
-    normalizedRoot: string;
+    root: string;
     preserveModulesRoot: string | undefined;
     handleExtension: (path: string) => string;
   }) =>
   (key: string) => {
-    const normalPath = normalizePath(key);
-    const noRoot = normalPath.startsWith(normalizedRoot)
-      ? normalPath.slice(normalizedRoot.length)
-      : normalPath;
-    const noExtension = handleExtension(noRoot);
+    // Handle virtual modules first
+    const virtualPrefix = key.match(/^\0+/)?.[0] || '';
+    const actualKey = key.slice(virtualPrefix.length);
+    
+    let moduleId = normalizePath(actualKey);
+    
+    if (moduleId.startsWith(normalizedRoot)) {
+      moduleId = moduleId.slice(normalizedRoot.length);
+    }
 
-    let noRelativeNorAbsolute = noExtension;
-    while (
-      noRelativeNorAbsolute.startsWith("/") ||
-      noRelativeNorAbsolute.startsWith(".")
-    ) {
-      noRelativeNorAbsolute = noRelativeNorAbsolute.slice(1);
+    moduleId = handleExtension(moduleId);
+    while (moduleId.startsWith("/") || moduleId.startsWith(".")) {
+      moduleId = moduleId.slice(1);
     }
-    if (preserveModulesRoot) {
-      const removedModulesRoot = noRelativeNorAbsolute.startsWith(
-        preserveModulesRoot
-      )
-        ? noRelativeNorAbsolute.slice(preserveModulesRoot.length)
-        : noRelativeNorAbsolute;
-      return removedModulesRoot.startsWith(normalizedRoot)
-        ? removedModulesRoot.slice(normalizedRoot.length)
-        : removedModulesRoot;
+    while (moduleId.endsWith("/")) {
+      moduleId = moduleId.slice(0, -1);
     }
-    return noRelativeNorAbsolute;
+    if (typeof preserveModulesRoot === "string" && preserveModulesRoot !== "") {
+      moduleId = moduleId.startsWith(preserveModulesRoot)
+        ? moduleId.slice(preserveModulesRoot.length)
+        : moduleId;
+    }
+    
+    // Add virtual prefix back
+    return virtualPrefix + moduleId;
   };
 
 const createPathNormalizer =
-  ({ normalizedRoot, moduleBasePath }: { normalizedRoot: string, moduleBasePath: string }) =>
+  ({
+    root,
+    preserveModulesRoot,
+  }: {
+    root: string;
+    preserveModulesRoot: string | undefined;
+  }) =>
   (path: string) => {
-    if(typeof path !== 'string') {
+    if (typeof path !== "string") {
       throw new Error(`Invalid path: ${JSON.stringify(path)}`);
     }
-    const normalPath = normalizePath(path);
-    const noRoot = normalPath.startsWith(normalizedRoot)
-      ? normalPath.slice(normalizedRoot.length)
-      : normalPath;
-    // no leading slash when starting with module base
-    if(noRoot.startsWith(moduleBasePath)) {
-      return noRoot.slice(1);
+    let normalPath = normalizePath(path);
+    if(normalPath.startsWith(root)) {
+      normalPath = normalPath.slice(root.length);
+    }
+    if (typeof preserveModulesRoot === "string" && preserveModulesRoot !== "") {
+      normalPath = normalPath.startsWith(preserveModulesRoot)
+        ? normalPath.slice(preserveModulesRoot.length)
+        : normalPath;
     }
-    return noRoot;
+    while (normalPath.endsWith("/")) {
+      normalPath = normalPath.slice(0, -1);
+    }
+    return normalPath;
   };
- /**
-  * @description Create a function that normalizes the input
-  * @param root - The root of the project
-  * @param preserveModulesRoot - The root of the preserve modules
-  * @param removeExtension - Whether to remove the extension of the file
-  * @returns A function that normalizes the input
-  */
+/**
+ * @description Create a function that normalizes the input
+ * @param root - The root of the project
+ * @param preserveModulesRoot - The root of the preserve modules
+ * @param removeExtension - Whether to remove the extension of the file
+ * @returns A function that normalizes the input
+ */
 export function createInputNormalizer({
   root,
   preserveModulesRoot = undefined,
   removeExtension = DEFAULT_CONFIG.FILE_REGEX,
-  moduleBasePath = "/",
 }: CreateInputNormalizerProps): InputNormalizer {
-  const normalizedRoot = resolveRootOption(root, preserveModulesRoot);
+  const relativeRoot = resolveRootOption(root, preserveModulesRoot);
   const handleExtension = resolveExtensionOptions(removeExtension);
 
   const normalizeEntryKey = createKeyNormalizer({
-    normalizedRoot,
-    preserveModulesRoot,
+    root: root,
+    preserveModulesRoot: relativeRoot,
     handleExtension,
   });
 
-  const normalizeEntryPath = createPathNormalizer({ normalizedRoot, moduleBasePath });
-  return function normalizeInput(id: NormalizerInput): [string, string] {
+  const normalizeEntryPath = createPathNormalizer({
+    root: root,
+    preserveModulesRoot: relativeRoot,
+  });
+  function normalizeInput(id: NormalizerInput): [string, string] {
     // Normalize both paths to use POSIX separators
     if (Array.isArray(id)) {
       const [key, path] = id;
-      if(typeof key === 'string' && Array.isArray(path) && path.length === 2) {
+      if (typeof key === "string" && Array.isArray(path) && path.length === 2) {
         const isNumber = !isNaN(Number(key));
-        if(isNumber) {
+        if (isNumber) {
           // ignore it
           return normalizeInput([path[0], path[1]]);
         }
         return normalizeInput([join(key, path[0]), path[1]]);
       }
-      if(typeof key !== 'string' || typeof path !== 'string') {
+      if (typeof key !== "string" || typeof path !== "string") {
         throw new Error(`Invalid input: ${JSON.stringify(id)}`);
       }
       return [normalizeEntryKey(key), normalizeEntryPath(path)];
@@ -183,4 +181,18 @@ export function createInputNormalizer({
     }
     throw new Error(`Invalid input type: ${typeof id}`);
   };
+
+  return (input: NormalizerInput): [string, string] => {
+    const [key, path] = normalizeInput(input);
+    // Apply the same normalization to both key and path
+    const normalizedPath = path.startsWith('/') ? path.slice(1) : path;
+    const virtualPrefix = key.match(/^\0+/)?.[0] || '';
+    
+    // If key has virtual prefix, ensure path has it too
+    const finalPath = virtualPrefix ? 
+      (normalizedPath.startsWith(virtualPrefix) ? normalizedPath : virtualPrefix + normalizedPath) : 
+      normalizedPath;
+    
+    return [key, finalPath];
+  };
 }

package/plugin/helpers/tryManifest.ts

@@ -5,7 +5,7 @@ import type { Manifest } from "vite";
 type TryManifestOptions<SSR extends boolean> = {
   root: string;
   outDir: string;
-  ssrManifest: SSR;
+  ssrManifest?: SSR;
 };
 
 export function tryManifest<SSR extends boolean>(options: TryManifestOptions<SSR>): {

package/plugin/loader/createBuildLoader.ts

@@ -1,4 +1,4 @@
-import { join, resolve } from "node:path";
+import { join, relative, resolve } from "node:path";
 import type { PluginContext } from "rollup";
 import type { ResolvedUserConfig, ResolvedUserOptions } from "../../server.js";
 import type { Manifest } from "vite";
@@ -14,54 +14,51 @@ export interface BuildLoaderOptions {
 }
 
 export function createBuildLoader({
+  root,
   userConfig,
   userOptions,
   pluginContext,
-  clientManifest,
   serverManifest,
+  clientManifest,
 }: BuildLoaderOptions) {
-  const root = pluginContext.environment.config.root ?? userConfig.root ?? userOptions.projectRoot ?? process.cwd();
   const normalizer = createInputNormalizer({
-    root: userConfig.root,
-    preserveModulesRoot:
-      userOptions.build.preserveModulesRoot === true
-        ? userOptions.moduleBase
-        : undefined,
+    root,
+    preserveModulesRoot: undefined,
+    removeExtension: false,
   });
-
   return async function buildLoader(id: string) {
-    // Normalize the requested ID - strip leading slash
-    const [normalizedId] = normalizer(id.replace(/^\//, ''));
-
-    // Try to find the module in either manifest
-    const clientEntry = Object.entries(clientManifest).find(([key]) => {
-      const [keyNormalized] = normalizer(key);
-      return keyNormalized === normalizedId;
-    });
-
-    if (clientEntry) {
-      console.log("[vite:plugin-react-server] Loading client entry", clientEntry[1].file);
-      const module = await import(
-        join(root, clientEntry[1].file)
-      );
-      return module;
+    const [key, value] = normalizer(id);
+    // Remove leading slash if present
+    const distDir = userOptions.build.outDir;
+    const manifests = [clientManifest, serverManifest];
+    // Try to find the module in the manifest
+    for (const n of [0, 1]) {
+      const manifest = manifests[n];
+      const manifestEntry = manifest[key]
+      if (!manifestEntry) {
+        continue;
+      }
+      const isClient = userOptions.autoDiscover.clientComponents(id);
+      const isServer = userOptions.autoDiscover.serverFunctions(id);
+      const outDir = isClient
+        ? userOptions.build.client
+        : isServer
+        ? userOptions.build.server
+        : n === 0
+        ? userOptions.build.client
+        : userOptions.build.server;
+      if (manifestEntry.file.startsWith(`${root}/${distDir}/${outDir}/`)) {
+        return import(manifestEntry.file);
+      }
+      if (manifestEntry.file.startsWith(`${distDir}/`)) {
+        return import(join(root, manifestEntry.file));
+      }
+      if (manifestEntry.file.startsWith(`${outDir}/`)) {
+        return import(join(root, distDir, outDir, manifestEntry.file));
+      }
+      // Load the module
+      return import(join(root, distDir, outDir, manifestEntry.file));
     }
-
-    const serverEntry = Object.entries(serverManifest).find(([key]) => {
-      const [keyNormalized] = normalizer(key);
-      return keyNormalized === normalizedId;
-    });
-
-    if (serverEntry) {
-      const module = await import(
-        join(root, serverEntry[1].file)
-      );
-      return module;
-    }
-    const availableModules = [...Object.keys(clientManifest), ...Object.keys(serverManifest)]
-
-    throw new Error(
-      `Module not found: ${id}, available modules: ${availableModules.join(", ")}`
-    );
+    throw new Error(`Module not found: ${id}`);
   };
 }

package/plugin/loader/css-loader.ts

@@ -0,0 +1,96 @@
+import { readFile } from 'fs/promises';
+import { basename } from 'path';
+import postcss from 'postcss';
+import type { MessagePort } from 'node:worker_threads';
+import type { CssFileMessage } from '../worker/types.js';
+import type { LoadHookContext } from 'node:module';
+
+type LoaderContext = {
+  data?: { port: MessagePort };
+};
+// Store port globally for CSS loader
+let cssLoaderPort: MessagePort | undefined;
+
+// Initialize hook
+export async function initialize(data: { port: MessagePort }) {
+  cssLoaderPort = data.port;  // Store port
+  data.port.postMessage({ type: 'INITIALIZED' });
+  data.port.unref();
+}
+
+// CSS file tracking per page
+const cssFilesByPage = new Map<string, Set<string>>();
+let currentPage: string | null = null;
+
+export function setCurrentPage(page: string | null) {
+  currentPage = page;
+  if (page && !cssFilesByPage.has(page)) {
+    cssFilesByPage.set(page, new Set());
+  }
+}
+
+export function getCssFilesForPage(page: string): string[] {
+  return Array.from(cssFilesByPage.get(page) || []);
+}
+
+// Modify the CSS handling in the load function
+export async function load(url: string, context: LoadHookContext & LoaderContext, defaultLoad: any) {
+  // Handle CSS files
+  if(url.endsWith(".css")) {
+    const source = await readFile(new URL(url), 'utf-8');
+    
+    // Process CSS with PostCSS
+    const result = await postcss().process(source, {
+      from: url,
+      to: url,
+      map: {
+        inline: false,
+        annotation: false
+      }
+    });
+
+    // Generate both transformed CSS and class mappings
+    const moduleName = basename(url, '.css').replace('.', '_');
+    const classes: Record<string, string> = {};
+
+    // Transform selectors
+    result.root.walkRules(rule => {
+      const selector = rule.selector.replace('.', '');
+      const className = `${moduleName}_${selector}`;
+      classes[selector] = className;
+      rule.selector = `.${className}`;
+    });
+
+    // Get transformed CSS using root.toString()
+    const transformedCss = result.root.toString();
+
+    // Send processed CSS to worker
+    if (cssLoaderPort) {
+      cssLoaderPort.postMessage({
+        type: 'CSS_FILE',
+        id: url,
+        cssFile: transformedCss
+      } satisfies CssFileMessage);
+    }
+    
+    // Return CSS module
+    const moduleSource = `
+      const styles = ${JSON.stringify(classes)};
+      export default styles;
+      export const css = ${JSON.stringify(transformedCss)};
+    `;
+
+    return {
+      format: 'module',
+      source: moduleSource,
+      shortCircuit: true
+    };
+  }
+  return defaultLoad(url, context, defaultLoad);
+}
+
+export function resolve(specifier: string, context: any, defaultResolve: any) {
+  return defaultResolve(specifier, context, defaultResolve);
+}
+
+