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

package/dist/dep/getModuleExports.js

@@ -1,45 +1,34 @@
 "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());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getModuleExports = void 0;
 const es_module_lexer_1 = require("@umijs/bundler-utils/compiled/es-module-lexer");
 const esbuild_1 = require("@umijs/bundler-utils/compiled/esbuild");
 const path_1 = require("path");
 const getCJSExports_1 = require("./getCJSExports");
-function getModuleExports({ content, filePath, }) {
-    return __awaiter(this, void 0, void 0, function* () {
-        // Support tsx and jsx
-        if (filePath && /\.(tsx|jsx)$/.test(filePath)) {
-            content = (yield (0, esbuild_1.transform)(content, {
-                sourcemap: false,
-                sourcefile: filePath,
-                format: 'esm',
-                target: 'es6',
-                loader: (0, path_1.extname)(filePath).slice(1),
-            })).code;
+async function getModuleExports({ content, filePath, }) {
+    // Support tsx and jsx
+    if (filePath && /\.(tsx|jsx)$/.test(filePath)) {
+        content = (await (0, esbuild_1.transform)(content, {
+            sourcemap: false,
+            sourcefile: filePath,
+            format: 'esm',
+            target: 'es6',
+            loader: (0, path_1.extname)(filePath).slice(1),
+        })).code;
+    }
+    await es_module_lexer_1.init;
+    const [imports, exports] = (0, es_module_lexer_1.parse)(content);
+    let isCJS = !imports.length && !exports.length;
+    let cjsEsmExports = null;
+    if (isCJS) {
+        cjsEsmExports = (0, getCJSExports_1.getCJSExports)({ content });
+        if (cjsEsmExports.includes('__esModule')) {
+            isCJS = false;
         }
-        yield es_module_lexer_1.init;
-        const [imports, exports] = (0, es_module_lexer_1.parse)(content);
-        let isCJS = !imports.length && !exports.length;
-        let cjsEsmExports = null;
-        if (isCJS) {
-            cjsEsmExports = (0, getCJSExports_1.getCJSExports)({ content });
-            if (cjsEsmExports.includes('__esModule')) {
-                isCJS = false;
-            }
-        }
-        return {
-            exports: cjsEsmExports || exports,
-            isCJS,
-        };
-    });
+    }
+    return {
+        exports: cjsEsmExports || exports,
+        isCJS,
+    };
 }
 exports.getModuleExports = getModuleExports;

package/dist/depBuilder/depBuilder.js

@@ -1,13 +1,4 @@
 "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());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DepBuilder = void 0;
 const bundler_esbuild_1 = require("@umijs/bundler-esbuild");
@@ -24,71 +15,77 @@ class DepBuilder {
         this.isBuilding = false;
         this.opts = opts;
     }
-    buildWithWebpack(opts) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const config = this.getWebpackConfig({ deps: opts.deps });
-            return new Promise((resolve, reject) => {
-                const compiler = this.opts.mfsu.opts.implementor(config);
-                compiler.run((err, stats) => {
-                    opts.onBuildComplete();
-                    if (err || (stats === null || stats === void 0 ? void 0 : stats.hasErrors())) {
-                        if (err) {
-                            reject(err);
-                        }
-                        if (stats) {
-                            const errorMsg = stats.toString('errors-only');
-                            // console.error(errorMsg);
-                            reject(new Error(errorMsg));
-                        }
+    async buildWithWebpack(opts) {
+        const config = this.getWebpackConfig({ deps: opts.deps });
+        return new Promise((resolve, reject) => {
+            const compiler = this.opts.mfsu.opts.implementor(config);
+            compiler.run((err, stats) => {
+                opts.onBuildComplete();
+                if (err || (stats === null || stats === void 0 ? void 0 : stats.hasErrors())) {
+                    if (err) {
+                        reject(err);
                     }
-                    else {
-                        resolve(stats);
+                    if (stats) {
+                        const errorMsg = stats.toString('errors-only');
+                        // console.error(errorMsg);
+                        reject(new Error(errorMsg));
                     }
-                    compiler.close(() => { });
-                });
+                }
+                else {
+                    resolve(stats);
+                }
+                compiler.close(() => { });
             });
         });
     }
     // TODO: support watch and rebuild
-    buildWithESBuild(opts) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const entryContent = (0, getESBuildEntry_1.getESBuildEntry)({ deps: opts.deps });
-            const ENTRY_FILE = 'esbuild-entry.js';
-            const tmpDir = this.opts.mfsu.opts.tmpBase;
-            const entryPath = (0, path_1.join)(tmpDir, ENTRY_FILE);
-            (0, fs_1.writeFileSync)(entryPath, entryContent, 'utf-8');
-            const date = new Date().getTime();
-            yield (0, bundler_esbuild_1.build)({
-                cwd: this.opts.mfsu.opts.cwd,
-                entry: {
-                    [`${constants_1.MF_VA_PREFIX}remoteEntry`]: entryPath,
-                },
-                config: {
-                    outputPath: tmpDir,
-                    alias: this.opts.mfsu.alias,
-                    externals: this.opts.mfsu.externals,
-                },
-            });
-            utils_1.logger.event(`[mfsu] compiled with esbuild successfully in ${+new Date() - date} ms`);
-            opts.onBuildComplete();
+    async buildWithESBuild(opts) {
+        const entryContent = (0, getESBuildEntry_1.getESBuildEntry)({ deps: opts.deps });
+        const ENTRY_FILE = 'esbuild-entry.js';
+        const tmpDir = this.opts.mfsu.opts.tmpBase;
+        const entryPath = (0, path_1.join)(tmpDir, ENTRY_FILE);
+        (0, fs_1.writeFileSync)(entryPath, entryContent, 'utf-8');
+        const date = new Date().getTime();
+        await (0, bundler_esbuild_1.build)({
+            cwd: this.opts.mfsu.opts.cwd,
+            entry: {
+                [`${constants_1.MF_VA_PREFIX}remoteEntry`]: entryPath,
+            },
+            config: {
+                ...this.opts.mfsu.opts.depBuildConfig,
+                outputPath: tmpDir,
+                alias: this.opts.mfsu.alias,
+                externals: this.opts.mfsu.externals,
+            },
+            inlineStyle: true,
         });
+        utils_1.logger.event(`[mfsu] compiled with esbuild successfully in ${+new Date() - date} ms`);
+        opts.onBuildComplete();
     }
-    build(opts) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.isBuilding = true;
-            yield this.writeMFFiles({ deps: opts.deps });
-            const newOpts = Object.assign(Object.assign({}, opts), { onBuildComplete: () => {
-                    this.isBuilding = false;
-                    this.completeFns.forEach((fn) => fn());
-                    this.completeFns = [];
-                } });
+    async build(opts) {
+        this.isBuilding = true;
+        const onBuildComplete = () => {
+            this.isBuilding = false;
+            this.completeFns.forEach((fn) => fn());
+            this.completeFns = [];
+        };
+        try {
+            await this.writeMFFiles({ deps: opts.deps });
+            const newOpts = {
+                ...opts,
+                onBuildComplete,
+            };
             if (this.opts.mfsu.opts.buildDepWithESBuild) {
-                yield this.buildWithESBuild(newOpts);
+                await this.buildWithESBuild(newOpts);
             }
             else {
-                yield this.buildWithWebpack(newOpts);
+                await this.buildWithWebpack(newOpts);
             }
-        });
+        }
+        catch (e) {
+            onBuildComplete();
+            throw e;
+        }
     }
     onBuildComplete(fn) {
         if (this.isBuilding) {
@@ -98,17 +95,16 @@ class DepBuilder {
             fn();
         }
     }
-    writeMFFiles(opts) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const tmpBase = this.opts.mfsu.opts.tmpBase;
-            // expose files
-            for (const dep of opts.deps) {
-                const content = yield dep.buildExposeContent();
-                (0, fs_1.writeFileSync)((0, path_1.join)(tmpBase, dep.filePath), content, 'utf-8');
-            }
-            // index file
-            (0, fs_1.writeFileSync)((0, path_1.join)(tmpBase, 'index.js'), '"😛"', 'utf-8');
-        });
+    async writeMFFiles(opts) {
+        const tmpBase = this.opts.mfsu.opts.tmpBase;
+        utils_1.fsExtra.mkdirpSync(tmpBase);
+        // expose files
+        for (const dep of opts.deps) {
+            const content = await dep.buildExposeContent();
+            (0, fs_1.writeFileSync)((0, path_1.join)(tmpBase, dep.filePath), content, 'utf-8');
+        }
+        // index file
+        (0, fs_1.writeFileSync)((0, path_1.join)(tmpBase, 'index.js'), '"😛"', 'utf-8');
     }
     getWebpackConfig(opts) {
         var _a, _b;
@@ -146,8 +142,11 @@ class DepBuilder {
         depConfig.plugins.push(new stripSourceMapUrlPlugin_1.StripSourceMapUrlPlugin({
             webpack: this.opts.mfsu.opts.implementor,
         }));
+        depConfig.plugins.push(new this.opts.mfsu.opts.implementor.ProgressPlugin((percent, msg) => {
+            this.opts.mfsu.onProgress({ percent, status: msg });
+        }));
         const exposes = opts.deps.reduce((memo, dep) => {
-            memo[`./${dep.shortFile}`] = (0, path_1.join)(this.opts.mfsu.opts.tmpBase, dep.filePath);
+            memo[`./${dep.file}`] = (0, path_1.join)(this.opts.mfsu.opts.tmpBase, dep.filePath);
             return memo;
         }, {});
         depConfig.plugins.push(new this.opts.mfsu.opts.implementor.container.ModuleFederationPlugin({

package/dist/depBuilder/getESBuildEntry.js

@@ -2,6 +2,20 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getESBuildEntry = void 0;
 const constants_1 = require("../constants");
+// from typescript `esModuleInterop`
+const ES_INTEROP_FUNC = `__exportStar`;
+const ES_INTEROP_HELPER = `
+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 ${ES_INTEROP_FUNC} = (this && this.__exportStar) || function(m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+`;
 function getESBuildEntry(opts) {
     return `
 (function() {
@@ -266,6 +280,7 @@ function getESBuildEntry(opts) {
 var __webpack_exports__ = {};
 (function() {
   var exports = __webpack_exports__;
+${ES_INTEROP_HELPER}
   var moduleMap = {
 ${opts.deps.map(getDepModuleStr).join(',\n')}
   };
@@ -299,15 +314,13 @@ ${opts.deps.map(getDepModuleStr).join(',\n')}
   `;
 }
 exports.getESBuildEntry = getESBuildEntry;
-function normalizeFile(file) {
-    return file.replace(/\//g, '_');
-}
 function getDepModuleStr(dep) {
     return `
 "./${dep.file}": function() {
   return new Promise(resolve => {
-    import('./${constants_1.MF_VA_PREFIX}${normalizeFile(dep.file)}.js').then(module => {
-      resolve(() => module);
+    import('./${constants_1.MF_VA_PREFIX}${dep.normalizedFile}.js').then(module => {
+      module.default && ${ES_INTEROP_FUNC}(module, module.default);
+      resolve(() => module.default || module);
     });
   })
 }

package/dist/depInfo.d.ts

@@ -9,7 +9,7 @@ export declare class DepInfo {
     moduleGraph: ModuleGraph;
     cacheDependency: object;
     constructor(opts: IOpts);
-    shouldBuild(): boolean;
+    shouldBuild(): false | "cacheDependency has changed" | "moduleGraph has changed";
     snapshot(): void;
     loadCache(): void;
     writeCache(): void;

package/dist/depInfo.js

@@ -14,10 +14,10 @@ class DepInfo {
     }
     shouldBuild() {
         if (!utils_1.lodash.isEqual(this.cacheDependency, this.opts.mfsu.opts.getCacheDependency())) {
-            return true;
+            return 'cacheDependency has changed';
         }
         if (this.moduleGraph.hasDepChanged()) {
-            return true;
+            return 'moduleGraph has changed';
         }
         return false;
     }
@@ -27,6 +27,7 @@ class DepInfo {
     }
     loadCache() {
         if ((0, fs_1.existsSync)(this.cacheFilePath)) {
+            utils_1.logger.info('MFSU restore cache');
             const { cacheDependency, moduleGraph } = JSON.parse((0, fs_1.readFileSync)(this.cacheFilePath, 'utf-8'));
             this.cacheDependency = cacheDependency;
             this.moduleGraph.restore(moduleGraph);
@@ -34,10 +35,16 @@ class DepInfo {
     }
     writeCache() {
         utils_1.fsExtra.mkdirpSync((0, path_1.dirname)(this.cacheFilePath));
-        (0, fs_1.writeFileSync)(this.cacheFilePath, JSON.stringify({
+        const newContent = JSON.stringify({
             cacheDependency: this.cacheDependency,
             moduleGraph: this.moduleGraph.toJSON(),
-        }, null, 2), 'utf-8');
+        }, null, 2);
+        if ((0, fs_1.existsSync)(this.cacheFilePath) &&
+            (0, fs_1.readFileSync)(this.cacheFilePath, 'utf-8') === newContent) {
+            return;
+        }
+        utils_1.logger.info('MFSU write cache');
+        (0, fs_1.writeFileSync)(this.cacheFilePath, newContent, 'utf-8');
     }
 }
 exports.DepInfo = DepInfo;

package/dist/esbuildHandlers/autoCssModules.d.ts

@@ -0,0 +1,2 @@
+import { IEsbuildLoaderHandlerParams } from '../types';
+export declare function autoCssModulesHandler(opts: IEsbuildLoaderHandlerParams): string;

package/dist/esbuildHandlers/autoCssModules.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.autoCssModulesHandler = void 0;
+const utils_1 = require("@umijs/utils");
+const CSS_MODULES_QUERY = '?modules';
+const QUERY_LENGTH = CSS_MODULES_QUERY.length;
+function autoCssModulesHandler(opts) {
+    let { code } = opts;
+    let offset = 0;
+    opts.imports.forEach((i) => {
+        if (i.d < 0 && (0, utils_1.isStyleFile)({ filename: i.n })) {
+            // import x from './index.less'
+            //   => import x from '
+            const importSegment = code.substring(i.ss + offset, i.s + offset);
+            // is css module
+            if (~importSegment.indexOf(' from')) {
+                code = `${code.substring(0, i.e + offset)}${CSS_MODULES_QUERY}${code.substring(i.e + offset)}`;
+                offset += QUERY_LENGTH;
+            }
+        }
+    });
+    return code;
+}
+exports.autoCssModulesHandler = autoCssModulesHandler;

package/dist/esbuildHandlers/awaitImport/index.d.ts

@@ -0,0 +1,12 @@
+import type { ImportSpecifier } from '@umijs/bundler-utils/compiled/es-module-lexer';
+interface IParams {
+    cache: Map<string, any>;
+    opts: any;
+}
+interface IOpts {
+    code: string;
+    imports: ImportSpecifier[];
+    filePath: string;
+}
+export default function getAwaitImportHandler(params: IParams): (opts: IOpts) => string;
+export {};

package/dist/esbuildHandlers/awaitImport/index.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const checkMatch_1 = require("../../babelPlugins/awaitImport/checkMatch");
+function getAwaitImportHandler(params) {
+    return function awaitImportHandler(opts) {
+        var _a, _b;
+        let offset = 0;
+        let { code } = opts;
+        const { filePath, imports } = opts;
+        imports.forEach((i) => {
+            if (!i.n)
+                return;
+            const isLazyImport = i.d > 0;
+            const from = i.n;
+            const { isMatch, replaceValue } = (0, checkMatch_1.checkMatch)({
+                cache: params.cache,
+                value: from,
+                opts: params.opts,
+                filename: filePath,
+            });
+            if (isMatch) {
+                // case: import x from './index.ts';
+                //       import('./index.ts');
+                // import x from '
+                // import(
+                const preSeg = code.substring(0, i.s + offset);
+                // ';
+                // );
+                const tailSeg = code.substring(i.e + offset);
+                const quote = isLazyImport ? '"' : '';
+                code = `${preSeg}${quote}${replaceValue}${quote}${tailSeg}`;
+                offset += replaceValue.length - from.length;
+            }
+        });
+        if (params.cache.has(filePath)) {
+            (_b = (_a = params.opts).onCollect) === null || _b === void 0 ? void 0 : _b.call(_a, {
+                file: filePath,
+                data: params.cache.get(filePath),
+            });
+        }
+        return code;
+    };
+}
+exports.default = getAwaitImportHandler;

package/dist/index.d.ts

@@ -1,2 +1,4 @@
 export * from './constants';
+export * from './esbuildHandlers/autoCssModules';
+export { esbuildLoader } from './loader/esbuild';
 export * from './mfsu';

package/dist/index.js

@@ -1,7 +1,11 @@
 "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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -10,5 +14,10 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.esbuildLoader = void 0;
 __exportStar(require("./constants"), exports);
+__exportStar(require("./esbuildHandlers/autoCssModules"), exports);
+// for independent use `esbuild-loader`
+var esbuild_1 = require("./loader/esbuild");
+Object.defineProperty(exports, "esbuildLoader", { enumerable: true, get: function () { return esbuild_1.esbuildLoader; } });
 __exportStar(require("./mfsu"), exports);

package/dist/loader/esbuild.d.ts

@@ -0,0 +1,5 @@
+import type { LoaderContext } from 'webpack';
+import type { IEsbuildLoaderOpts } from '../types';
+declare function esbuildTranspiler(this: LoaderContext<IEsbuildLoaderOpts>, source: string): Promise<void>;
+export default esbuildTranspiler;
+export declare const esbuildLoader: string;

package/dist/loader/esbuild.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.esbuildLoader = void 0;
+const es_module_lexer_1 = require("@umijs/bundler-utils/compiled/es-module-lexer");
+const esbuild_1 = require("@umijs/bundler-utils/compiled/esbuild");
+const path_1 = require("path");
+async function esbuildTranspiler(source) {
+    var _a;
+    const done = this.async();
+    const options = this.getOptions();
+    const { handler = [], implementation, ...otherOptions } = options;
+    const transform = (implementation === null || implementation === void 0 ? void 0 : implementation.transform) || esbuild_1.transform;
+    const filePath = this.resourcePath;
+    const ext = (0, path_1.extname)(filePath).slice(1);
+    const transformOptions = {
+        ...otherOptions,
+        target: (_a = options.target) !== null && _a !== void 0 ? _a : 'es2015',
+        loader: ext !== null && ext !== void 0 ? ext : 'js',
+        sourcemap: this.sourceMap,
+        sourcefile: filePath,
+    };
+    try {
+        let { code, map } = await transform(source, transformOptions);
+        if (handler.length) {
+            await es_module_lexer_1.init;
+            handler.forEach((handle) => {
+                const [imports, exports] = (0, es_module_lexer_1.parse)(code);
+                code = handle({ code, imports, exports, filePath });
+            });
+        }
+        done(null, code, map && JSON.parse(map));
+    }
+    catch (error) {
+        done(error);
+    }
+}
+exports.default = esbuildTranspiler;
+exports.esbuildLoader = __filename;

package/dist/mfsu.d.ts

@@ -1,6 +1,5 @@
-import type { NextFunction, Request, Response } from 'express';
+import type { NextFunction, Request, Response } from '@umijs/bundler-utils/compiled/express';
 import webpack, { Configuration } from 'webpack';
-import autoExport from './babelPlugins/autoExport';
 import awaitImport from './babelPlugins/awaitImport/awaitImport';
 import { DepBuilder } from './depBuilder/depBuilder';
 import { DepInfo } from './depInfo';
@@ -10,12 +9,15 @@ interface IOpts {
     excludeNodeNatives?: boolean;
     exportAllMembers?: Record<string, string[]>;
     getCacheDependency?: Function;
+    onMFSUProgress?: Function;
     mfName?: string;
     mode?: Mode;
     tmpBase?: string;
     unMatchLibs?: string[];
+    runtimePublicPath?: boolean | string;
     implementor: typeof webpack;
     buildDepWithESBuild?: boolean;
+    depBuildConfig: any;
 }
 export declare class MFSU {
     opts: IOpts;
@@ -24,14 +26,20 @@ export declare class MFSU {
     depInfo: DepInfo;
     depBuilder: DepBuilder;
     depConfig: Configuration | null;
+    buildDepsAgain: boolean;
+    progress: any;
+    onProgress: Function;
+    publicPath: string;
     constructor(opts: IOpts);
+    asyncImport(content: string): string;
     setWebpackConfig(opts: {
         config: Configuration;
         depConfig: Configuration;
-    }): void;
+    }): Promise<void>;
     buildDeps(): Promise<void>;
     getMiddlewares(): ((req: Request, res: Response, next: NextFunction) => void)[];
-    getBabelPlugins(): (typeof autoExport | (typeof awaitImport | {
+    private getAwaitImportCollectOpts;
+    getBabelPlugins(): ({
         onTransformDeps: () => void;
         onCollect: ({ file, data, }: {
             file: string;
@@ -49,6 +57,7 @@ export declare class MFSU {
         remoteName: string | undefined;
         alias: Record<string, string>;
         externals: (Function | Record<string, string>)[];
-    })[])[];
+    } | typeof awaitImport)[][];
+    getEsbuildLoaderHandler(): any[];
 }
 export {};