@module-federation/vite 1.7.1 → 1.8.0

package/lib/index.modern.js

@@ -2,7 +2,7 @@ import defu from 'defu';
 import * as fs from 'fs';
 import { mkdirSync, writeFileSync, existsSync, writeFile } from 'fs';
 import * as path from 'pathe';
-import path__default, { resolve, basename, parse, join, dirname, relative } from 'pathe';
+import path__default, { resolve, basename, parse, join, dirname } from 'pathe';
 import { createFilter } from '@rollup/pluginutils';
 import { walk } from 'estree-walker';
 import MagicString from 'magic-string';
@@ -97,7 +97,7 @@ const addEntry = ({
         emitFileOptions.fileName = fileName;
       }
       emitFileId = this.emitFile(emitFileOptions);
-      if (htmlFilePath) {
+      if (htmlFilePath && fs.existsSync(htmlFilePath)) {
         const htmlContent = fs.readFileSync(htmlFilePath, 'utf-8');
         const scriptRegex = /<script\s+[^>]*src=["']([^"']+)["'][^>]*>/gi;
         let match;
@@ -138,10 +138,14 @@ const addEntry = ({
  */
 function PluginDevProxyModuleTopLevelAwait() {
   const filterFunction = createFilter();
+  const processedFlag = '/* already-processed-by-dev-proxy-module-top-level-await */';
   return {
     name: 'dev-proxy-module-top-level-await',
     apply: 'serve',
     transform(code, id) {
+      if (code.includes(processedFlag)) {
+        return null;
+      }
       if (!code.includes('/*mf top-level-await placeholder replacement mf*/')) {
         return null;
       }
@@ -200,8 +204,9 @@ function PluginDevProxyModuleTopLevelAwait() {
           }
         }
       });
+      const transformedCode = magicString.toString();
       return {
-        code: magicString.toString(),
+        code: `${processedFlag}\n${transformedCode}`,
         map: magicString.generateMap({
           hires: true
         })
@@ -406,6 +411,7 @@ function normalizeModuleFederationOptions(options) {
     dev: options.dev,
     dts: options.dts,
     getPublicPath: options.getPublicPath,
+    publicPath: options.publicPath,
     shareStrategy: options.shareStrategy || 'version-first',
     ignoreOrigin: options.ignoreOrigin || false,
     virtualModuleDir: options.virtualModuleDir || '__mf__virtual'
@@ -700,7 +706,7 @@ function generateLocalSharedImportMap() {
   const options = getNormalizeModuleFederationOptions();
   return `
     const importMap = {
-      ${Array.from(getUsedShares()).map(pkg => `
+      ${Array.from(getUsedShares()).sort().map(pkg => `
         ${JSON.stringify(pkg)}: async () => {
           let pkg = await import("${getPreBuildLibImportId(pkg)}")
           return pkg
@@ -708,7 +714,7 @@ function generateLocalSharedImportMap() {
       `).join(',')}
     }
       const usedShared = {
-      ${Array.from(getUsedShares()).map(key => {
+      ${Array.from(getUsedShares()).sort().map(key => {
     const shareItem = getNormalizeShareItem(key);
     if (!shareItem) return null;
     return `
@@ -843,6 +849,153 @@ function initVirtualModules() {
   writeRuntimeInitStatus();
 }
 
+const ASSET_TYPES = ['js', 'css'];
+const LOAD_TIMINGS = ['sync', 'async'];
+const JS_EXTENSIONS = ['.ts', '.tsx', '.jsx', '.mjs', '.cjs'];
+/**
+ * Creates an empty asset map structure for tracking JS and CSS assets
+ * @returns Initialized asset map with sync/async arrays for JS and CSS
+ */
+const createEmptyAssetMap = () => ({
+  js: {
+    sync: [],
+    async: []
+  },
+  css: {
+    sync: [],
+    async: []
+  }
+});
+/**
+ * Tracks an asset in the preload map with deduplication
+ * @param map - The preload map to update
+ * @param key - The module key to track under
+ * @param fileName - The asset filename to track
+ * @param isAsync - Whether the asset is loaded async
+ * @param type - The asset type ('js' or 'css')
+ */
+const trackAsset = (map, key, fileName, isAsync, type) => {
+  if (!map[key]) {
+    map[key] = createEmptyAssetMap();
+  }
+  const target = isAsync ? map[key][type].async : map[key][type].sync;
+  if (!target.includes(fileName)) {
+    target.push(fileName);
+  }
+};
+/**
+ * Checks if a file is a CSS file by extension
+ * @param fileName - The filename to check
+ * @returns True if file has a CSS extension (.css, .scss, .less)
+ */
+const isCSSFile = fileName => {
+  return fileName.endsWith('.css') || fileName.endsWith('.scss') || fileName.endsWith('.less');
+};
+/**
+ * Collects all CSS assets from the bundle
+ * @param bundle - The Rollup output bundle
+ * @returns Set of CSS asset filenames
+ */
+const collectCssAssets = bundle => {
+  const cssAssets = new Set();
+  for (const [fileName, fileData] of Object.entries(bundle)) {
+    if (fileData.type === 'asset' && isCSSFile(fileName)) {
+      cssAssets.add(fileName);
+    }
+  }
+  return cssAssets;
+};
+/**
+ * Processes module assets and tracks them in the files map
+ * @param bundle - The Rollup output bundle
+ * @param filesMap - The preload map to populate
+ * @param moduleMatcher - Function that matches module paths to keys
+ */
+const processModuleAssets = (bundle, filesMap, moduleMatcher) => {
+  for (const [fileName, fileData] of Object.entries(bundle)) {
+    if (fileData.type !== 'chunk') continue;
+    if (!fileData.modules) continue;
+    for (const modulePath of Object.keys(fileData.modules)) {
+      const matchKey = moduleMatcher(modulePath);
+      if (!matchKey) continue;
+      // Track main JS chunk
+      trackAsset(filesMap, matchKey, fileName, false, 'js');
+      // Handle dynamic imports
+      if (fileData.dynamicImports) {
+        for (const dynamicImport of fileData.dynamicImports) {
+          const importData = bundle[dynamicImport];
+          if (!importData) continue;
+          const isCss = isCSSFile(dynamicImport);
+          trackAsset(filesMap, matchKey, dynamicImport, true, isCss ? 'css' : 'js');
+        }
+      }
+    }
+  }
+};
+/**
+ * Deduplicates assets in the files map
+ * @param filesMap - The preload map to deduplicate
+ * @returns New deduplicated preload map
+ */
+const deduplicateAssets = filesMap => {
+  const result = {};
+  for (const [key, assetMaps] of Object.entries(filesMap)) {
+    result[key] = createEmptyAssetMap();
+    for (const type of ASSET_TYPES) {
+      for (const timing of LOAD_TIMINGS) {
+        result[key][type][timing] = Array.from(new Set(assetMaps[type][timing]));
+      }
+    }
+  }
+  return result;
+};
+/**
+ * Builds a mapping between module files and their share keys
+ * @param shareKeys - Set of share keys to map
+ * @param resolveFn - Function to resolve module paths
+ * @returns Map of file paths to their corresponding share keys
+ */
+const buildFileToShareKeyMap = async (shareKeys, resolveFn) => {
+  const fileToShareKey = new Map();
+  const resolutions = await Promise.all(Array.from(shareKeys).map(shareKey => resolveFn(getPreBuildLibImportId(shareKey)).then(resolution => {
+    var _resolution$id;
+    return {
+      shareKey,
+      file: resolution == null || (_resolution$id = resolution.id) == null ? void 0 : _resolution$id.split('?')[0]
+    };
+  }).catch(() => null)));
+  for (const resolution of resolutions) {
+    if (resolution != null && resolution.file) {
+      fileToShareKey.set(resolution.file, resolution.shareKey);
+    }
+  }
+  return fileToShareKey;
+};
+
+/**
+ * Resolves the public path for remote entries
+ * @param options - Module Federation options
+ * @param viteBase - Vite's base config value
+ * @param originalBase - Original base config before any transformations
+ * @returns The resolved public path
+ */
+function resolvePublicPath(options, viteBase, originalBase) {
+  // Use explicitly set publicPath if provided
+  if (options.publicPath) {
+    return options.publicPath;
+  }
+  // Handle empty original base case
+  if (originalBase === '') {
+    return 'auto';
+  }
+  // Use viteBase if available, ensuring it ends with a slash
+  if (viteBase) {
+    return viteBase.replace(/\/?$/, '/');
+  }
+  // Fallback to auto if no base is specified
+  return 'auto';
+}
+
 const Manifest = () => {
   const mfOptions = getNormalizeModuleFederationOptions();
   const {
@@ -856,21 +1009,43 @@ const Manifest = () => {
     mfManifestName = 'mf-manifest.json';
   }
   if (typeof manifestOptions !== 'boolean') {
-    mfManifestName = join((manifestOptions == null ? void 0 : manifestOptions.filePath) || '', (manifestOptions == null ? void 0 : manifestOptions.fileName) || '');
+    mfManifestName = path.join((manifestOptions == null ? void 0 : manifestOptions.filePath) || '', (manifestOptions == null ? void 0 : manifestOptions.fileName) || '');
   }
-  let extensions;
   let root;
   let remoteEntryFile;
   let publicPath;
   let _command;
   let _originalConfigBase;
   let viteConfig;
+  /**
+   * Adds global CSS assets to all module exports
+   * @param filesMap - The preload map to update
+   * @param cssAssets - Set of CSS asset filenames to add
+   */
+  const addCssAssetsToAllExports = (filesMap, cssAssets) => {
+    Object.keys(filesMap).forEach(key => {
+      cssAssets.forEach(cssAsset => {
+        trackAsset(filesMap, key, cssAsset, false, 'css');
+      });
+    });
+  };
   return [{
     name: 'module-federation-manifest',
     apply: 'serve',
+    /**
+     * Stores resolved Vite config for later use
+     */
+    /**
+     * Finalizes configuration after all plugins are resolved
+     * @param config - Fully resolved Vite config
+     */
     configResolved(config) {
       viteConfig = config;
     },
+    /**
+     * Configures dev server middleware to handle manifest requests
+     * @param server - Vite dev server instance
+     */
     configureServer(server) {
       server.middlewares.use((req, res, next) => {
         var _req$url;
@@ -918,119 +1093,85 @@ const Manifest = () => {
   }, {
     name: 'module-federation-manifest',
     enforce: 'post',
+    /**
+     * Initial plugin configuration
+     * @param config - Vite config object
+     * @param command - Current Vite command (serve/build)
+     */
     config(config, {
       command
     }) {
       if (!config.build) config.build = {};
-      if (!config.build.manifest) config.build.manifest = config.build.manifest || !!manifestOptions;
+      if (!config.build.manifest) {
+        config.build.manifest = config.build.manifest || !!manifestOptions;
+      }
       _command = command;
       _originalConfigBase = config.base;
     },
     configResolved(config) {
       root = config.root;
-      extensions = config.resolve.extensions || ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json'];
       let base = config.base;
       if (_command === 'serve') {
         base = (config.server.origin || '') + config.base;
       }
-      publicPath = _originalConfigBase === '' ? 'auto' : base ? base.replace(/\/?$/, '/') : 'auto';
+      publicPath = resolvePublicPath(mfOptions, base, _originalConfigBase);
     },
+    /**
+     * Generates the module federation manifest file
+     * @param options - Rollup output options
+     * @param bundle - Generated bundle assets
+     */
     async generateBundle(options, bundle) {
       if (!mfManifestName) return;
-      const exposesModules = Object.keys(mfOptions.exposes).map(item => mfOptions.exposes[item].import); // 获取你提供的 moduleIds
-      const filesContainingModules = {};
-      // 帮助函数：检查模块路径是否匹配
-      const isModuleMatched = (relativeModulePath, preloadModule) => {
-        // 先尝试直接匹配
-        if (relativeModulePath === preloadModule) return true;
-        // 如果 preloadModule 没有后缀，尝试添加可能的后缀进行匹配
-        for (const ext of extensions) {
-          if (relativeModulePath === `${preloadModule}${ext}`) {
-            return true;
-          }
-        }
-        return false;
-      };
-      // 遍历打包生成的每个文件
-      for (const [fileName, fileData] of Object.entries(bundle)) {
+      let filesMap = {};
+      // First pass: Find remoteEntry file
+      for (const [_, fileData] of Object.entries(bundle)) {
         if (mfOptions.filename.replace(/[\[\]]/g, '_').replace(/\.[^/.]+$/, '') === fileData.name || fileData.name === 'remoteEntry') {
           remoteEntryFile = fileData.fileName;
-        }
-        if (fileData.type === 'chunk') {
-          // 遍历该文件的所有模块
-          for (const modulePath of Object.keys(fileData.modules)) {
-            // 将绝对路径转换为相对于 Vite root 的相对路径
-            const relativeModulePath = relative(root, modulePath);
-            // 检查模块是否在 preloadModules 列表中
-            for (const preloadModule of exposesModules) {
-              const formatPreloadModule = preloadModule.replace('./', '');
-              if (isModuleMatched(relativeModulePath, formatPreloadModule)) {
-                if (!filesContainingModules[preloadModule]) {
-                  filesContainingModules[preloadModule] = {
-                    sync: [],
-                    async: []
-                  };
-                }
-                console.log(Object.keys(fileData.modules));
-                filesContainingModules[preloadModule].sync.push(fileName);
-                filesContainingModules[preloadModule].async.push(...(fileData.dynamicImports || []));
-                findSynchronousImports(fileName, filesContainingModules[preloadModule].sync);
-                break; // 如果找到匹配，跳出循环
-              }
-            }
-          }
-        }
-      }
-      // 递归查找模块的同步导入文件
-      function findSynchronousImports(fileName, array) {
-        const fileData = bundle[fileName];
-        if (fileData && fileData.type === 'chunk') {
-          array.push(fileName); // 将当前文件加入预加载列表
-          // 遍历该文件的同步导入文件
-          fileData.imports.forEach(importedFile => {
-            if (array.indexOf(importedFile) === -1) {
-              findSynchronousImports(importedFile, array); // 递归查找同步导入的文件
-            }
-          });
+          break; // We can break early since we only need to find remoteEntry once
         }
       }
-      const fileToShareKey = {};
-      await Promise.all(Array.from(getUsedShares()).map(async shareKey => {
-        const file = (await this.resolve(getPreBuildLibImportId(shareKey))).id.split('?')[0];
-        fileToShareKey[file] = shareKey;
-      }));
-      // 遍历打包生成的每个文件
-      for (const [fileName, fileData] of Object.entries(bundle)) {
-        if (fileData.type === 'chunk') {
-          // 遍历该文件的所有模块
-          for (const modulePath of Object.keys(fileData.modules)) {
-            const sharedKey = fileToShareKey[modulePath];
-            if (sharedKey) {
-              if (!filesContainingModules[sharedKey]) {
-                filesContainingModules[sharedKey] = {
-                  sync: [],
-                  async: []
-                };
-              }
-              filesContainingModules[sharedKey].sync.push(fileName);
-              filesContainingModules[sharedKey].async.push(...(fileData.dynamicImports || []));
-              findSynchronousImports(fileName, filesContainingModules[sharedKey].sync);
-              break; // 如果找到匹配，跳出循环
-            }
+      // Second pass: Collect all CSS assets
+      const allCssAssets = collectCssAssets(bundle);
+      const exposesModules = Object.keys(mfOptions.exposes).map(item => mfOptions.exposes[item].import);
+      // Process exposed modules
+      processModuleAssets(bundle, filesMap, modulePath => {
+        const absoluteModulePath = path.resolve(root, modulePath);
+        return exposesModules.find(exposeModule => {
+          const exposePath = path.resolve(root, exposeModule);
+          // First try exact path match
+          if (absoluteModulePath === exposePath) {
+            return true;
           }
-        }
-      }
-      Object.keys(filesContainingModules).forEach(key => {
-        filesContainingModules[key].sync = Array.from(new Set(filesContainingModules[key].sync));
-        filesContainingModules[key].async = Array.from(new Set(filesContainingModules[key].async));
+          // Then try path match without known extensions
+          const getPathWithoutKnownExt = filePath => {
+            const ext = path.extname(filePath);
+            return JS_EXTENSIONS.includes(ext) ? path.join(path.dirname(filePath), path.basename(filePath, ext)) : filePath;
+          };
+          const modulePathNoExt = getPathWithoutKnownExt(absoluteModulePath);
+          const exposePathNoExt = getPathWithoutKnownExt(exposePath);
+          return modulePathNoExt === exposePathNoExt;
+        });
       });
+      // Process shared modules
+      const fileToShareKey = await buildFileToShareKeyMap(getUsedShares(), this.resolve.bind(this));
+      processModuleAssets(bundle, filesMap, modulePath => fileToShareKey.get(modulePath));
+      // Add all CSS assets to every export
+      addCssAssetsToAllExports(filesMap, allCssAssets);
+      // Final deduplication of all assets
+      filesMap = deduplicateAssets(filesMap);
       this.emitFile({
         type: 'asset',
         fileName: mfManifestName,
-        source: JSON.stringify(generateMFManifest(filesContainingModules))
+        source: JSON.stringify(generateMFManifest(filesMap))
       });
     }
   }];
+  /**
+   * Generates the final manifest JSON structure
+   * @param preloadMap - Map of module assets to include
+   * @returns Complete manifest object
+   */
   function generateMFManifest(preloadMap) {
     const options = getNormalizeModuleFederationOptions();
     const {
@@ -1041,23 +1182,17 @@ const Manifest = () => {
       path: '',
       type: 'module'
     };
-    const remotes = [];
-    const usedRemotesMap = getUsedRemotesMap();
-    Object.keys(usedRemotesMap).forEach(remoteKey => {
-      const usedModules = Array.from(usedRemotesMap[remoteKey]);
-      usedModules.forEach(moduleKey => {
-        remotes.push({
-          federationContainerName: options.remotes[remoteKey].entry,
-          moduleName: moduleKey.replace(remoteKey, '').replace('/', ''),
-          alias: remoteKey,
-          entry: '*'
-        });
-      });
-    });
-    // @ts-ignore
+    // Process remotes
+    const remotes = Array.from(Object.entries(getUsedRemotesMap())).flatMap(([remoteKey, modules]) => Array.from(modules).map(moduleKey => ({
+      federationContainerName: options.remotes[remoteKey].entry,
+      moduleName: moduleKey.replace(remoteKey, '').replace('/', ''),
+      alias: remoteKey,
+      entry: '*'
+    })));
+    // Process shared dependencies
     const shared = Array.from(getUsedShares()).map(shareKey => {
-      var _preloadMap$shareKey, _preloadMap$shareKey2;
       const shareItem = getNormalizeShareItem(shareKey);
+      const assets = preloadMap[shareKey] || createEmptyAssetMap();
       return {
         id: `${name}:${shareKey}`,
         name: shareKey,
@@ -1065,42 +1200,42 @@ const Manifest = () => {
         requiredVersion: shareItem.shareConfig.requiredVersion,
         assets: {
           js: {
-            async: (preloadMap == null || (_preloadMap$shareKey = preloadMap[shareKey]) == null ? void 0 : _preloadMap$shareKey.async) || [],
-            sync: (preloadMap == null || (_preloadMap$shareKey2 = preloadMap[shareKey]) == null ? void 0 : _preloadMap$shareKey2.sync) || []
+            async: assets.js.async,
+            sync: assets.js.sync
           },
           css: {
-            async: [],
-            sync: []
+            async: assets.css.async,
+            sync: assets.css.sync
           }
         }
       };
-    }).filter(item => item);
-    const exposes = Object.keys(options.exposes).map(key => {
-      var _preloadMap$sourceFil, _preloadMap$sourceFil2;
-      // assets(.css, .jpg, .svg等)其他资源, 不重要, 暂未处理
+    }).filter(Boolean);
+    // Process exposed modules
+    const exposes = Object.entries(options.exposes).map(([key, value]) => {
       const formatKey = key.replace('./', '');
-      const sourceFile = options.exposes[key].import;
+      const sourceFile = value.import;
+      const assets = preloadMap[sourceFile] || createEmptyAssetMap();
       return {
-        id: name + ':' + formatKey,
+        id: `${name}:${formatKey}`,
         name: formatKey,
         assets: {
           js: {
-            async: (preloadMap == null || (_preloadMap$sourceFil = preloadMap[sourceFile]) == null ? void 0 : _preloadMap$sourceFil.async) || [],
-            sync: (preloadMap == null || (_preloadMap$sourceFil2 = preloadMap[sourceFile]) == null ? void 0 : _preloadMap$sourceFil2.sync) || []
+            async: assets.js.async,
+            sync: assets.js.sync
           },
           css: {
-            sync: [],
-            async: []
+            async: assets.css.async,
+            sync: assets.css.sync
           }
         },
         path: key
       };
-    }).filter(item => item); // Filter out any null values
-    const result = {
+    }).filter(Boolean);
+    return {
       id: name,
-      name: name,
+      name,
       metaData: _extends({
-        name: name,
+        name,
         type: 'app',
         buildInfo: {
           buildVersion: '1.0.0',
@@ -1111,8 +1246,6 @@ const Manifest = () => {
         types: {
           path: '',
           name: ''
-          // "zip": "@mf-types.zip",
-          // "api": "@mf-types.d.ts"
         },
         globalName: name,
         pluginVersion: '0.2.5'
@@ -1125,7 +1258,6 @@ const Manifest = () => {
       remotes,
       exposes
     };
-    return result;
   }
 };
 
@@ -1225,10 +1357,11 @@ function pluginProxyRemoteEntry () {
         if (_command === 'serve') {
           var _viteConfig$server, _viteConfig$server2;
           const host = typeof ((_viteConfig$server = viteConfig.server) == null ? void 0 : _viteConfig$server.host) === 'string' && viteConfig.server.host !== '0.0.0.0' ? viteConfig.server.host : 'localhost';
+          const publicPath = JSON.stringify(resolvePublicPath(options, viteConfig.base) + options.filename);
           return `
           const origin = (window && ${!options.ignoreOrigin}) ? window.origin : "//${host}:${(_viteConfig$server2 = viteConfig.server) == null ? void 0 : _viteConfig$server2.port}"
-          const remoteEntryPromise = await import(origin + "${viteConfig.base + options.filename}")
-          // __tla only serves as a hack for vite-plugin-top-level-await. 
+          const remoteEntryPromise = await import(origin + ${publicPath})
+          // __tla only serves as a hack for vite-plugin-top-level-await.
           Promise.resolve(remoteEntryPromise)
           .then(remoteEntry => {
             return Promise.resolve(remoteEntry.__tla)