@umijs/mfsu 4.0.0-beta.7 → 4.0.0-canary.202200505.1

package/dist/mfsu.js

@@ -1,49 +1,61 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MFSU = void 0;
+const bundler_utils_1 = require("@umijs/bundler-utils");
 const utils_1 = require("@umijs/utils");
+const assert_1 = __importDefault(require("assert"));
 const fs_1 = require("fs");
 const path_1 = require("path");
 const mrmime_1 = require("../compiled/mrmime");
-const autoExport_1 = __importDefault(require("./babelPlugins/autoExport"));
+// @ts-ignore
+const webpack_virtual_modules_1 = __importDefault(require("../compiled/webpack-virtual-modules"));
 const awaitImport_1 = __importDefault(require("./babelPlugins/awaitImport/awaitImport"));
 const getRealPath_1 = require("./babelPlugins/awaitImport/getRealPath");
 const constants_1 = require("./constants");
 const dep_1 = require("./dep/dep");
 const depBuilder_1 = require("./depBuilder/depBuilder");
 const depInfo_1 = require("./depInfo");
+const awaitImport_2 = __importDefault(require("./esbuildHandlers/awaitImport"));
 const types_1 = require("./types");
 const makeArray_1 = require("./utils/makeArray");
 const buildDepPlugin_1 = require("./webpackPlugins/buildDepPlugin");
-const writeCachePlugin_1 = require("./webpackPlugins/writeCachePlugin");
 class MFSU {
     constructor(opts) {
         this.alias = {};
         this.externals = [];
         this.depConfig = null;
+        this.buildDepsAgain = false;
+        this.progress = { done: false };
+        this.publicPath = '/';
         this.opts = opts;
         this.opts.mfName = this.opts.mfName || constants_1.DEFAULT_MF_NAME;
         this.opts.tmpBase =
             this.opts.tmpBase || (0, path_1.join)(process.cwd(), constants_1.DEFAULT_TMP_DIR_NAME);
         this.opts.mode = this.opts.mode || types_1.Mode.development;
         this.opts.getCacheDependency = this.opts.getCacheDependency || (() => ({}));
+        this.onProgress = (progress) => {
+            var _a, _b;
+            this.progress = {
+                ...this.progress,
+                ...progress,
+            };
+            (_b = (_a = this.opts).onMFSUProgress) === null || _b === void 0 ? void 0 : _b.call(_a, this.progress);
+        };
         this.opts.cwd = this.opts.cwd || process.cwd();
         this.depInfo = new depInfo_1.DepInfo({ mfsu: this });
         this.depBuilder = new depBuilder_1.DepBuilder({ mfsu: this });
+        this.depInfo.loadCache();
+    }
+    // swc don't support top-level await
+    // ref: https://github.com/vercel/next.js/issues/31054
+    asyncImport(content) {
+        return `await import('${(0, utils_1.winPath)(content)}');`;
+        // return `(async () => await import('${content}'))();`;
     }
-    setWebpackConfig(opts) {
+    async setWebpackConfig(opts) {
         var _a;
         const { mfName } = this.opts;
         /**
@@ -52,52 +64,166 @@ class MFSU {
         // set alias and externals with reference for babel plugin
         Object.assign(this.alias, ((_a = opts.config.resolve) === null || _a === void 0 ? void 0 : _a.alias) || {});
         this.externals.push(...(0, makeArray_1.makeArray)(opts.config.externals || []));
+        // entry
+        const entry = {};
+        const virtualModules = {};
+        // ensure entry object type
+        const entryObject = utils_1.lodash.isString(opts.config.entry)
+            ? { default: [opts.config.entry] }
+            : opts.config.entry;
+        (0, assert_1.default)(utils_1.lodash.isPlainObject(entryObject), `webpack config 'entry' value must be a string or an object.`);
+        for (const key of Object.keys(entryObject)) {
+            const virtualPath = `./mfsu-virtual-entry/${key}.js`;
+            const virtualContent = [];
+            let index = 1;
+            let hasDefaultExport = false;
+            const entryFiles = utils_1.lodash.isArray(entryObject[key])
+                ? entryObject[key]
+                : [entryObject[key]];
+            for (let entry of entryFiles) {
+                // ensure entry is a file
+                if ((0, fs_1.statSync)(entry).isDirectory()) {
+                    const realEntry = (0, utils_1.tryPaths)([
+                        (0, path_1.join)(entry, 'index.tsx'),
+                        (0, path_1.join)(entry, 'index.ts'),
+                    ]);
+                    (0, assert_1.default)(realEntry, `entry file not found, please configure the specific entry path. (e.g. 'src/index.tsx')`);
+                    entry = realEntry;
+                }
+                const content = (0, fs_1.readFileSync)(entry, 'utf-8');
+                const [_imports, exports] = await (0, bundler_utils_1.parseModule)({ content, path: entry });
+                if (exports.length) {
+                    virtualContent.push(`const k${index} = ${this.asyncImport(entry)}`);
+                    for (const exportName of exports) {
+                        if (exportName === 'default') {
+                            hasDefaultExport = true;
+                            virtualContent.push(`export default k${index}.${exportName}`);
+                        }
+                        else {
+                            virtualContent.push(`export const ${exportName} = k${index}.${exportName}`);
+                        }
+                    }
+                }
+                else {
+                    virtualContent.push(this.asyncImport(entry));
+                }
+                index += 1;
+            }
+            if (!hasDefaultExport) {
+                virtualContent.push(`export default 1;`);
+            }
+            virtualModules[virtualPath] = virtualContent.join('\n');
+            entry[key] = virtualPath;
+        }
+        opts.config.entry = entry;
+        // plugins
         opts.config.plugins = opts.config.plugins || [];
+        // support publicPath auto
+        let publicPath = opts.config.output.publicPath;
+        if (publicPath === 'auto') {
+            publicPath = '/';
+        }
+        this.publicPath = publicPath;
         opts.config.plugins.push(...[
+            new webpack_virtual_modules_1.default(virtualModules),
             new this.opts.implementor.container.ModuleFederationPlugin({
                 name: '__',
                 remotes: {
-                    // TODO: support runtime public path
-                    [mfName]: `${mfName}@${opts.config.output.publicPath}${constants_1.REMOTE_FILE_FULL}`,
+                    [mfName]: this.opts.runtimePublicPath
+                        ? // ref:
+                            // https://webpack.js.org/concepts/module-federation/#promise-based-dynamic-remotes
+                            `
+promise new Promise(resolve => {
+  const remoteUrlWithVersion = window.publicPath + '${constants_1.REMOTE_FILE_FULL}';
+  const script = document.createElement('script');
+  script.src = remoteUrlWithVersion;
+  script.onload = () => {
+    // the injected script has loaded and is available on window
+    // we can now resolve this Promise
+    const proxy = {
+      get: (request) => window['${mfName}'].get(request),
+      init: (arg) => {
+        try {
+          return window['${mfName}'].init(arg);
+        } catch(e) {
+          console.log('remote container already initialized');
+        }
+      }
+    }
+    resolve(proxy);
+  }
+  // inject this script with the src set to the versioned remoteEntry.js
+  document.head.appendChild(script);
+})
+                `.trimLeft()
+                        : `${mfName}@${publicPath}${constants_1.REMOTE_FILE_FULL}`,
                 },
             }),
             new buildDepPlugin_1.BuildDepPlugin({
                 onCompileDone: () => {
-                    this.buildDeps().catch((e) => {
-                        utils_1.logger.error(e);
-                    });
-                },
-            }),
-            new writeCachePlugin_1.WriteCachePlugin({
-                onWriteCache: () => {
-                    this.depInfo.writeCache();
+                    if (this.depBuilder.isBuilding) {
+                        this.buildDepsAgain = true;
+                    }
+                    else {
+                        this.buildDeps()
+                            .then(() => {
+                            this.onProgress({
+                                done: true,
+                            });
+                        })
+                            .catch((e) => {
+                            utils_1.logger.error(e);
+                            this.onProgress({
+                                done: true,
+                            });
+                        });
+                    }
                 },
             }),
+            // new WriteCachePlugin({
+            //   onWriteCache: lodash.debounce(() => {
+            //     this.depInfo.writeCache();
+            //   }, 300),
+            // }),
         ]);
+        // ensure topLevelAwait enabled
+        utils_1.lodash.set(opts.config, 'experiments.topLevelAwait', true);
         /**
          * depConfig
          */
         this.depConfig = opts.depConfig;
     }
-    buildDeps() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.depInfo.shouldBuild())
-                return;
-            this.depInfo.snapshot();
-            const deps = dep_1.Dep.buildDeps({
-                deps: this.depInfo.moduleGraph.depSnapshotModules,
-                cwd: this.opts.cwd,
-                mfsu: this,
-            });
-            yield this.depBuilder.build({
-                deps,
-            });
+    async buildDeps() {
+        const shouldBuild = this.depInfo.shouldBuild();
+        if (!shouldBuild) {
+            utils_1.logger.info('MFSU skip buildDeps');
+            return;
+        }
+        this.depInfo.snapshot();
+        const deps = dep_1.Dep.buildDeps({
+            deps: this.depInfo.moduleGraph.depSnapshotModules,
+            cwd: this.opts.cwd,
+            mfsu: this,
         });
+        utils_1.logger.info(`MFSU buildDeps since ${shouldBuild}`);
+        utils_1.logger.debug(deps.map((dep) => dep.file).join(', '));
+        await this.depBuilder.build({
+            deps,
+        });
+        // Write cache
+        this.depInfo.writeCache();
+        if (this.buildDepsAgain) {
+            utils_1.logger.info('MFSU buildDepsAgain');
+            this.buildDepsAgain = false;
+            this.buildDeps().catch((e) => {
+                utils_1.logger.error(e);
+            });
+        }
     }
     getMiddlewares() {
         return [
             (req, res, next) => {
-                const publicPath = '/';
+                const publicPath = this.publicPath;
                 const isMF = req.path.startsWith(`${publicPath}${constants_1.MF_VA_PREFIX}`) ||
                     req.path.startsWith(`${publicPath}${constants_1.MF_DEP_PREFIX}`) ||
                     req.path.startsWith(`${publicPath}${constants_1.MF_STATIC_PREFIX}`);
@@ -108,7 +234,7 @@ class MFSU {
                         }
                         res.setHeader('content-type', (0, mrmime_1.lookup)((0, path_1.extname)(req.path)) || 'text/plain');
                         const relativePath = req.path.replace(new RegExp(`^${publicPath}`), '/');
-                        const content = (0, fs_1.readFileSync)((0, path_1.join)(this.opts.tmpBase, relativePath), 'utf-8');
+                        const content = (0, fs_1.readFileSync)((0, path_1.join)(this.opts.tmpBase, relativePath));
                         res.send(content);
                     });
                 }
@@ -118,38 +244,50 @@ class MFSU {
             },
         ];
     }
+    getAwaitImportCollectOpts() {
+        return {
+            onTransformDeps: () => { },
+            onCollect: ({ file, data, }) => {
+                this.depInfo.moduleGraph.onFileChange({
+                    file,
+                    // @ts-ignore
+                    deps: [
+                        ...Array.from(data.matched).map((item) => ({
+                            file: item.sourceValue,
+                            isDependency: true,
+                            version: dep_1.Dep.getDepVersion({
+                                dep: item.sourceValue,
+                                cwd: this.opts.cwd,
+                            }),
+                        })),
+                        ...Array.from(data.unMatched).map((item) => ({
+                            file: (0, getRealPath_1.getRealPath)({
+                                file,
+                                dep: item.sourceValue,
+                            }),
+                            isDependency: false,
+                        })),
+                    ],
+                });
+            },
+            exportAllMembers: this.opts.exportAllMembers,
+            unMatchLibs: this.opts.unMatchLibs,
+            remoteName: this.opts.mfName,
+            alias: this.alias,
+            externals: this.externals,
+        };
+    }
     getBabelPlugins() {
+        return [[awaitImport_1.default, this.getAwaitImportCollectOpts()]];
+    }
+    getEsbuildLoaderHandler() {
+        const cache = new Map();
+        const checkOpts = this.getAwaitImportCollectOpts();
         return [
-            autoExport_1.default,
-            [
-                awaitImport_1.default,
-                {
-                    onTransformDeps: () => { },
-                    onCollect: ({ file, data, }) => {
-                        this.depInfo.moduleGraph.onFileChange({
-                            file,
-                            deps: [
-                                ...Array.from(data.matched).map((item) => ({
-                                    file: item.sourceValue,
-                                    isDependency: true,
-                                })),
-                                ...Array.from(data.unMatched).map((item) => ({
-                                    file: (0, getRealPath_1.getRealPath)({
-                                        file,
-                                        dep: item.sourceValue,
-                                    }),
-                                    isDependency: false,
-                                })),
-                            ],
-                        });
-                    },
-                    exportAllMembers: this.opts.exportAllMembers,
-                    unMatchLibs: this.opts.unMatchLibs,
-                    remoteName: this.opts.mfName,
-                    alias: this.alias,
-                    externals: this.externals,
-                },
-            ],
+            (0, awaitImport_2.default)({
+                cache,
+                opts: checkOpts,
+            }),
         ];
     }
 }

package/dist/moduleGraph.d.ts

@@ -30,7 +30,8 @@ export declare class ModuleGraph {
     toJSON(): {
         roots: string[];
         fileModules: Record<string, {
-            importModules: string[];
+            importedModules: string[];
+            isRoot?: boolean | undefined;
         }>;
         depModules: Record<string, {
             version: string | null;

package/dist/moduleGraph.js

@@ -20,7 +20,12 @@ class ModuleGraph {
         this.rootModules = new Set();
     }
     restore(data) {
+        let fileMap = new Map();
         const addNode = ({ file, importer }) => {
+            // fix circular dependency
+            if (fileMap.has(file))
+                return;
+            fileMap.set(file, true);
             const mod = new ModuleNode(file);
             let isDependency = false;
             let info;
@@ -33,8 +38,10 @@ class ModuleGraph {
             }
             if (info.isRoot)
                 mod.isRoot = true;
-            if (importer)
+            if (importer) {
                 mod.importers.add(importer);
+                importer.importedModules.add(mod);
+            }
             mod.isDependency = isDependency;
             if (info.version !== undefined) {
                 mod.version = info.version;
@@ -65,9 +72,10 @@ class ModuleGraph {
         });
         this.fileToModules.forEach((value, key) => {
             fileModules[key] = {
-                importModules: Array.from(value.importedModules).map((item) => item.file),
+                importedModules: Array.from(value.importedModules).map((item) => item.file),
             };
             if (value.isRoot) {
+                fileModules[key].isRoot = true;
                 roots.push(key);
             }
         });
@@ -143,7 +151,7 @@ class ModuleGraph {
             this.deleteNode({ mod: importedModulesMap[key], importer: opts.mod });
         });
         newDeps.forEach((dep) => {
-            this.addNode(Object.assign(Object.assign({}, dep), { importer: opts.mod }));
+            this.addNode({ ...dep, importer: opts.mod });
         });
     }
     addNode(opts) {

package/dist/types.d.ts

@@ -1,4 +1,16 @@
+import type { ImportSpecifier } from '@umijs/bundler-utils/compiled/es-module-lexer';
+import type { TransformOptions } from '@umijs/bundler-utils/compiled/esbuild';
 export declare enum Mode {
     development = "development",
     production = "production"
 }
+export interface IEsbuildLoaderHandlerParams {
+    code: string;
+    filePath: string;
+    imports: readonly ImportSpecifier[];
+    exports: readonly string[];
+}
+export interface IEsbuildLoaderOpts extends Partial<TransformOptions> {
+    handler?: Array<(opts: IEsbuildLoaderHandlerParams) => string>;
+    implementation?: typeof import('@umijs/bundler-utils/compiled/esbuild');
+}

package/package.json

@@ -1,7 +1,14 @@
 {
   "name": "@umijs/mfsu",
-  "version": "4.0.0-beta.7",
+  "version": "4.0.0-canary.202200505.1",
   "description": "@umijs/mfsu",
+  "homepage": "https://github.com/umijs/umi-next/tree/master/packages/mfsu#readme",
+  "bugs": "https://github.com/umijs/umi-next/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/umijs/umi-next"
+  },
+  "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
@@ -10,39 +17,37 @@
   ],
   "scripts": {
     "build": "pnpm tsc",
-    "build:deps": "pnpm esno ../../scripts/bundleDeps.ts",
-    "dev": "pnpm build -- --watch"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/umijs/umi-next"
-  },
-  "authors": [
-    "chencheng <sorrycc@gmail.com> (https://github.com/sorrycc)"
-  ],
-  "license": "MIT",
-  "bugs": "https://github.com/umijs/umi-next/issues",
-  "homepage": "https://github.com/umijs/umi-next/tree/master/packages/mfsu#readme",
-  "publishConfig": {
-    "access": "public"
+    "build:deps": "umi-scripts bundleDeps",
+    "dev": "pnpm build -- --watch",
+    "test": "umi-scripts jest-turbo"
   },
   "dependencies": {
-    "@umijs/bundler-esbuild": "4.0.0-beta.7",
-    "@umijs/bundler-utils": "4.0.0-beta.7",
-    "@umijs/utils": "4.0.0-beta.7"
+    "@umijs/bundler-esbuild": "4.0.0-canary.202200505.1",
+    "@umijs/bundler-utils": "4.0.0-canary.202200505.1",
+    "@umijs/utils": "4.0.0-canary.202200505.1",
+    "enhanced-resolve": "5.9.2"
   },
   "devDependencies": {
-    "@types/express": "4.17.13",
-    "enhanced-resolve": "5.8.3",
     "mrmime": "1.0.0",
-    "webpack": "5.61.0"
+    "webpack": "5.72.0",
+    "webpack-virtual-modules": "0.4.3"
   },
+  "publishConfig": {
+    "access": "public"
+  },
+  "authors": [
+    "chencheng <sorrycc@gmail.com> (https://github.com/sorrycc)"
+  ],
   "compiledConfig": {
     "deps": [
-      "mrmime"
+      "mrmime",
+      "webpack-virtual-modules"
     ],
     "externals": {
       "mrmime": "$$LOCAL"
-    }
+    },
+    "excludeDtsDeps": [
+      "webpack-virtual-modules"
+    ]
   }
 }

package/dist/babelPlugins/autoExport.d.ts

@@ -1,7 +0,0 @@
-import * as Babel from '@umijs/bundler-utils/compiled/babel/core';
-import * as t from '@umijs/bundler-utils/compiled/babel/types';
-export default function (): {
-    visitor: {
-        Program(path: Babel.NodePath<t.Program>): void;
-    };
-};

package/dist/babelPlugins/autoExport.js

@@ -1,61 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const t = __importStar(require("@umijs/bundler-utils/compiled/babel/types"));
-function default_1() {
-    return {
-        visitor: {
-            Program(path) {
-                let hasExport = false;
-                path.node.body.forEach((node) => {
-                    if (
-                    // esm
-                    t.isExportNamedDeclaration(node) ||
-                        t.isExportDefaultDeclaration(node) ||
-                        t.isExportAllDeclaration(node) ||
-                        // cjs
-                        (t.isExpressionStatement(node) &&
-                            t.isAssignmentExpression(node.expression) &&
-                            t.isMemberExpression(node.expression.left) &&
-                            // exports.xxx =
-                            (t.isIdentifier(node.expression.left.object, {
-                                name: 'exports',
-                            }) ||
-                                // module.exports =
-                                (t.isIdentifier(node.expression.left.object, {
-                                    name: 'module',
-                                }) &&
-                                    t.isIdentifier(node.expression.left.property, {
-                                        name: 'exports',
-                                    }))))) {
-                        hasExport = true;
-                    }
-                });
-                if (!hasExport) {
-                    path.node.body.push(t.exportNamedDeclaration(t.variableDeclaration('const', [
-                        t.variableDeclarator(t.identifier('__mfsu'), t.numericLiteral(1)),
-                    ])));
-                }
-            },
-        },
-    };
-}
-exports.default = default_1;