@umijs/mfsu 4.0.0-canary.20220429.3 → 4.0.0-canary.20220429.4

package/dist/mfsu.js

@@ -0,0 +1,304 @@
+"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");
+// @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");
+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 = Object.assign(Object.assign({}, 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) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            const { mfName } = this.opts;
+            /**
+             * config
+             */
+            // 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] = yield (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: {
+                        [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: () => {
+                        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* () {
+            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(', '));
+            yield 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 = 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}`);
+                if (isMF) {
+                    this.depBuilder.onBuildComplete(() => {
+                        if (!req.path.includes(constants_1.REMOTE_FILE)) {
+                            res.setHeader('cache-control', 'max-age=31536000,immutable');
+                        }
+                        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));
+                        res.send(content);
+                    });
+                }
+                else {
+                    next();
+                }
+            },
+        ];
+    }
+    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 [
+            (0, awaitImport_2.default)({
+                cache,
+                opts: checkOpts,
+            }),
+        ];
+    }
+}
+exports.MFSU = MFSU;

package/dist/moduleGraph.d.ts

@@ -0,0 +1,73 @@
+declare class ModuleNode {
+    file: string;
+    importers: Set<ModuleNode>;
+    importedModules: Set<ModuleNode>;
+    isDependency: boolean;
+    isRoot: boolean;
+    version: string | null;
+    constructor(file: string);
+}
+interface IDep {
+    file: string;
+    isDependency: boolean;
+    version?: string;
+}
+export declare class ModuleGraph {
+    fileToModules: Map<string, ModuleNode>;
+    depToModules: Map<string, ModuleNode>;
+    depSnapshotModules: Record<string, {
+        file: string;
+        version: string;
+    }>;
+    rootModules: Set<ModuleNode>;
+    constructor();
+    restore(data: {
+        roots: any;
+        fileModules: any;
+        depModules: any;
+        depSnapshotModules: any;
+    }): void;
+    toJSON(): {
+        roots: string[];
+        fileModules: Record<string, {
+            importedModules: string[];
+            isRoot?: boolean | undefined;
+        }>;
+        depModules: Record<string, {
+            version: string | null;
+        }>;
+        depSnapshotModules: Record<string, {
+            file: string;
+            version: string;
+        }>;
+    };
+    snapshotDeps(): void;
+    getDepsInfo(mods: Map<string, ModuleNode>): Record<string, {
+        file: string;
+        version: string;
+    }>;
+    getDepInfo(mod: ModuleNode): {
+        file: string;
+        version: string;
+    };
+    hasDepChanged(): boolean;
+    onFileChange(opts: {
+        file: string;
+        deps: IDep[];
+    }): void;
+    updateModule(opts: {
+        mod: ModuleNode;
+        deps: IDep[];
+    }): void;
+    addNode(opts: {
+        file: string;
+        isDependency: boolean;
+        importer: ModuleNode;
+        version?: string | null;
+    }): void;
+    deleteNode(opts: {
+        mod: ModuleNode;
+        importer: ModuleNode;
+    }): void;
+}
+export {};

package/dist/moduleGraph.js

@@ -0,0 +1,197 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModuleGraph = void 0;
+const utils_1 = require("@umijs/utils");
+class ModuleNode {
+    constructor(file) {
+        this.importers = new Set();
+        this.importedModules = new Set();
+        this.isDependency = false;
+        this.isRoot = false;
+        this.version = null;
+        this.file = file;
+    }
+}
+class ModuleGraph {
+    constructor() {
+        this.fileToModules = new Map();
+        this.depToModules = new Map();
+        this.depSnapshotModules = {};
+        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;
+            if (data.fileModules[file]) {
+                info = data.fileModules[file];
+            }
+            else if (data.depModules[file]) {
+                info = data.depModules[file];
+                isDependency = true;
+            }
+            if (info.isRoot)
+                mod.isRoot = true;
+            if (importer) {
+                mod.importers.add(importer);
+                importer.importedModules.add(mod);
+            }
+            mod.isDependency = isDependency;
+            if (info.version !== undefined) {
+                mod.version = info.version;
+            }
+            if (isDependency) {
+                this.depToModules.set(file, mod);
+            }
+            else {
+                for (const importedModule of info.importedModules) {
+                    addNode({ file: importedModule, importer: mod });
+                }
+                this.fileToModules.set(file, mod);
+            }
+        };
+        for (const root of data.roots) {
+            addNode({ file: root });
+        }
+        this.depSnapshotModules = data.depSnapshotModules;
+    }
+    toJSON() {
+        const roots = [];
+        const fileModules = {};
+        const depModules = {};
+        this.depToModules.forEach((value, key) => {
+            depModules[key] = {
+                version: value.version,
+            };
+        });
+        this.fileToModules.forEach((value, key) => {
+            fileModules[key] = {
+                importedModules: Array.from(value.importedModules).map((item) => item.file),
+            };
+            if (value.isRoot) {
+                fileModules[key].isRoot = true;
+                roots.push(key);
+            }
+        });
+        return {
+            roots,
+            fileModules,
+            depModules,
+            depSnapshotModules: this.depSnapshotModules,
+        };
+    }
+    snapshotDeps() {
+        this.depSnapshotModules = this.getDepsInfo(this.depToModules);
+    }
+    getDepsInfo(mods) {
+        return Array.from(mods.keys()).reduce((memo, key) => {
+            memo[key] = this.getDepInfo(mods.get(key));
+            return memo;
+        }, {});
+    }
+    getDepInfo(mod) {
+        return {
+            file: mod.file,
+            version: mod.version,
+        };
+    }
+    hasDepChanged() {
+        const depModulesInfo = this.getDepsInfo(this.depToModules);
+        return !utils_1.lodash.isEqual(depModulesInfo, this.depSnapshotModules);
+    }
+    onFileChange(opts) {
+        if (this.fileToModules.has(opts.file)) {
+            const mod = this.fileToModules.get(opts.file);
+            this.updateModule({
+                mod,
+                deps: opts.deps,
+            });
+        }
+        else {
+            const mod = new ModuleNode(opts.file);
+            mod.isRoot = true;
+            this.fileToModules.set(opts.file, mod);
+            this.rootModules.add(mod);
+            opts.deps.forEach((dep) => {
+                this.addNode({
+                    file: dep.file,
+                    isDependency: dep.isDependency,
+                    version: dep.version || null,
+                    importer: mod,
+                });
+            });
+        }
+    }
+    updateModule(opts) {
+        const importedModulesMap = Array.from(opts.mod.importedModules).reduce((memo, mod) => {
+            memo[mod.file] = mod;
+            return memo;
+        }, {});
+        const newDeps = [];
+        for (const dep of opts.deps) {
+            // update
+            if (importedModulesMap[dep.file]) {
+                if (dep.version !== undefined) {
+                    importedModulesMap[dep.file].version = dep.version;
+                }
+                delete importedModulesMap[dep.file];
+            }
+            // add
+            else {
+                newDeps.push(dep);
+            }
+        }
+        Object.keys(importedModulesMap).forEach((key) => {
+            this.deleteNode({ mod: importedModulesMap[key], importer: opts.mod });
+        });
+        newDeps.forEach((dep) => {
+            this.addNode(Object.assign(Object.assign({}, dep), { importer: opts.mod }));
+        });
+    }
+    addNode(opts) {
+        const modules = opts.isDependency ? this.depToModules : this.fileToModules;
+        let mod;
+        if (modules.has(opts.file)) {
+            mod = modules.get(opts.file);
+            if (opts.version !== undefined)
+                mod.version = opts.version;
+        }
+        else {
+            mod = new ModuleNode(opts.file);
+            mod.isDependency = opts.isDependency;
+            if (opts.version !== undefined)
+                mod.version = opts.version;
+            modules.set(opts.file, mod);
+        }
+        if (!mod.importers.has(opts.importer)) {
+            mod.importers.add(opts.importer);
+        }
+        if (!opts.importer.importedModules.has(mod)) {
+            opts.importer.importedModules.add(mod);
+        }
+    }
+    deleteNode(opts) {
+        const modules = opts.mod.isDependency
+            ? this.depToModules
+            : this.fileToModules;
+        const { mod, importer } = opts;
+        mod.importers.delete(opts.importer);
+        importer.importedModules.delete(mod);
+        if (!mod.importers.size) {
+            modules.delete(opts.mod.file);
+            mod.importedModules.forEach((importedModule) => {
+                this.deleteNode({
+                    mod: importedModule,
+                    importer: mod,
+                });
+            });
+        }
+    }
+}
+exports.ModuleGraph = ModuleGraph;

package/dist/types.d.ts

@@ -0,0 +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/dist/types.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Mode = void 0;
+var Mode;
+(function (Mode) {
+    Mode["development"] = "development";
+    Mode["production"] = "production";
+})(Mode = exports.Mode || (exports.Mode = {}));

package/dist/utils/makeArray.d.ts

@@ -0,0 +1 @@
+export declare function makeArray(item: any): any[];

package/dist/utils/makeArray.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeArray = void 0;
+function makeArray(item) {
+    return Array.isArray(item) ? item : [item];
+}
+exports.makeArray = makeArray;

package/dist/utils/trimFileContent.d.ts

@@ -0,0 +1 @@
+export declare function trimFileContent(content: string): string;

package/dist/utils/trimFileContent.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.trimFileContent = void 0;
+function trimFileContent(content) {
+    return content.trim() + '\n';
+}
+exports.trimFileContent = trimFileContent;

package/dist/webpackPlugins/buildDepPlugin.d.ts

@@ -0,0 +1,10 @@
+import type { Compiler } from 'webpack';
+interface IOpts {
+    onCompileDone: Function;
+}
+export declare class BuildDepPlugin {
+    private opts;
+    constructor(opts: IOpts);
+    apply(compiler: Compiler): void;
+}
+export {};

package/dist/webpackPlugins/buildDepPlugin.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BuildDepPlugin = void 0;
+const PLUGIN_NAME = 'MFSUBuildDeps';
+class BuildDepPlugin {
+    constructor(opts) {
+        this.opts = opts;
+    }
+    apply(compiler) {
+        compiler.hooks.done.tap(PLUGIN_NAME, (stats) => {
+            if (!stats.hasErrors()) {
+                this.opts.onCompileDone();
+            }
+        });
+    }
+}
+exports.BuildDepPlugin = BuildDepPlugin;

package/dist/webpackPlugins/depChunkIdPrefixPlugin.d.ts

@@ -0,0 +1,5 @@
+import { Compiler } from 'webpack';
+export declare class DepChunkIdPrefixPlugin {
+    constructor();
+    apply(compiler: Compiler): void;
+}

package/dist/webpackPlugins/depChunkIdPrefixPlugin.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DepChunkIdPrefixPlugin = void 0;
+const constants_1 = require("../constants");
+const pluginId = 'MFSUDepChunkIdPrefix';
+class DepChunkIdPrefixPlugin {
+    constructor() { }
+    apply(compiler) {
+        compiler.hooks.compilation.tap(pluginId, (compilation) => {
+            compilation.hooks.afterOptimizeChunkIds.tap(pluginId, (chunks) => {
+                for (const chunk of chunks) {
+                    chunk.id = constants_1.MF_DEP_PREFIX + chunk.id;
+                    chunk.ids = [chunk.id];
+                }
+            });
+        });
+    }
+}
+exports.DepChunkIdPrefixPlugin = DepChunkIdPrefixPlugin;