@umijs/preset-umi 4.0.0-beta.11 → 4.0.0-beta.12

package/dist/commands/setup.js

@@ -1,4 +1,13 @@
 "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 });
 const utils_1 = require("@umijs/utils");
 exports.default = (api) => {
@@ -6,14 +15,16 @@ exports.default = (api) => {
         name: 'setup',
         description: 'setup project',
         fn() {
-            // generate tmp files
-            utils_1.logger.info('generate files');
-            api.applyPlugins({
-                key: 'onGenerateFiles',
-                args: {
-                    files: null,
-                    isFirstTime: false,
-                },
+            return __awaiter(this, void 0, void 0, function* () {
+                // generate tmp files
+                utils_1.logger.info('generate files');
+                yield api.applyPlugins({
+                    key: 'onGenerateFiles',
+                    args: {
+                        files: null,
+                        isFirstTime: false,
+                    },
+                });
             });
         },
     });

package/dist/features/esmi/Service.d.ts

@@ -0,0 +1,56 @@
+import type { IApi } from '../../types';
+export interface IImportmapData {
+    importMap: {
+        imports: Record<string, string>;
+        scopes: Record<string, any>;
+    };
+    deps: {
+        name: string;
+        version: string;
+        type: string;
+    }[];
+}
+export interface IPkgData {
+    pkgJsonContent: IApi['pkg'];
+    pkgInfo: {
+        name: string;
+        version: string;
+        type: 'esm';
+        exports: {
+            name: string;
+            path: string;
+            from: string;
+            deps: {
+                name: string;
+                version: string;
+                usedMap: Record<string, {
+                    usedNamespace?: boolean;
+                    usedDefault?: boolean;
+                    usedNames: string[];
+                }>;
+            }[];
+        }[];
+        assets: any[];
+    };
+}
+/**
+ * class for connect esmi server
+ */
+export default class ESMIService {
+    cdnOrigin: string;
+    constructor(opts: {
+        cdnOrigin: string;
+    });
+    /**
+     * build importmap from deps tree
+     * @param data  package data
+     * @returns ticketId
+     */
+    build(data: IPkgData): Promise<string | undefined>;
+    /**
+     * get importmap from deps tree
+     * @param data  package data
+     * @returns importmap
+     */
+    getImportmap(data: IPkgData): Promise<IImportmapData | undefined>;
+}

package/dist/features/esmi/Service.js

@@ -0,0 +1,54 @@
+"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 });
+const utils_1 = require("@umijs/utils");
+/**
+ * class for connect esmi server
+ */
+class ESMIService {
+    constructor(opts) {
+        this.cdnOrigin = '';
+        this.cdnOrigin = opts.cdnOrigin;
+    }
+    /**
+     * build importmap from deps tree
+     * @param data  package data
+     * @returns ticketId
+     */
+    build(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return utils_1.axios
+                .post(`${this.cdnOrigin}/api/v1/esm/build`, data)
+                .then((a) => { var _a; return (_a = a.data.data) === null || _a === void 0 ? void 0 : _a.ticketId; });
+        });
+    }
+    /**
+     * get importmap from deps tree
+     * @param data  package data
+     * @returns importmap
+     */
+    getImportmap(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            // get the build ticket id
+            const ticketId = yield this.build(data);
+            // continue to the next request after 1s
+            const next = () => new Promise((resolve) => setTimeout(() => resolve(deferrer()), 2000));
+            const deferrer = () => {
+                return utils_1.axios
+                    .get(`${this.cdnOrigin}/api/v1/esm/importmap/${ticketId}`)
+                    .then((res) => (res.data.success ? res.data.data : next()), next);
+            };
+            // TODO: timeout + time spend log
+            return deferrer();
+        });
+    }
+}
+exports.default = ESMIService;

package/dist/features/esmi/esmi.d.ts

@@ -1,3 +1,3 @@
-import { IApi } from '../../types';
+import type { IApi } from '../../types';
 declare const _default: (api: IApi) => void;
 export default _default;

package/dist/features/esmi/esmi.js

@@ -8,10 +8,130 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         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 });
+const es_module_lexer_1 = require("@umijs/bundler-utils/compiled/es-module-lexer");
+const magic_string_1 = __importDefault(require("magic-string"));
 const path_1 = require("path");
 const scan_1 = require("../../libs/scan");
+const Service_1 = __importDefault(require("./Service"));
+let importmap = { imports: {}, scopes: {} };
+/**
+ * esmi vite plugin
+ */
+function esmi(opts) {
+    return {
+        name: 'preset-umi:esmi',
+        configResolved(config) {
+            const { include, exclude } = config.optimizeDeps;
+            // do not pre-compile deps which will be loaded by importmap (for top-level deps)
+            if (include === null || include === void 0 ? void 0 : include.length) {
+                config.optimizeDeps.include = include.filter((item) => !importmap.imports[item]);
+            }
+            // exclude pre-compile deps which within importmap by default (for nested deps)
+            config.optimizeDeps.exclude = (exclude || []).concat(Object.keys(importmap.imports).filter((item) => exclude === null || exclude === void 0 ? void 0 : exclude.includes(item)));
+        },
+        transform(source) {
+            try {
+                // parse imports
+                const imports = (0, es_module_lexer_1.parse)(source)[0];
+                let s;
+                // process all imports
+                imports.forEach((item) => {
+                    const { n: specifier, s: start, e: end } = item;
+                    // replace npm package to CDN url for matched imports
+                    if (specifier && importmap.imports[specifier]) {
+                        s !== null && s !== void 0 ? s : (s = new magic_string_1.default(source));
+                        s.overwrite(start, end, importmap.imports[specifier]);
+                    }
+                });
+                return (s === null || s === void 0 ? void 0 : s.toString()) || source;
+            }
+            catch (_a) {
+                // syntax error or non-javascript files
+                return null;
+            }
+        },
+        handleHotUpdate(ctx) {
+            return opts.handleHotUpdate(ctx);
+        },
+    };
+}
+/**
+ * generate package data
+ * @param api   plugin api
+ */
+function generatePkgData(api) {
+    return {
+        pkgJsonContent: {
+            dependencies: api.pkg.dependencies || {},
+            devDependencies: api.pkg.devDependencies || {},
+        },
+        pkgInfo: {
+            name: api.pkg.name,
+            version: api.pkg.version,
+            type: 'esm',
+            exports: [
+                {
+                    name: 'default',
+                    path: 'es/index.js',
+                    from: '',
+                    deps: Object.entries(api.appData.deps).map(([name, version]) => ({
+                        name,
+                        version,
+                        usedMap: {
+                            [name]: { usedNamespace: true, usedNames: [] },
+                        },
+                    })),
+                },
+            ],
+            assets: [],
+        },
+    };
+}
 exports.default = (api) => {
+    let service;
+    let resolver;
+    /**
+     * refresh importmap and save to the top-level variable
+     */
+    function refreshImportMap() {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            // scan and module graph
+            // TODO: module graph
+            api.appData.deps = yield (0, scan_1.scan)({
+                entry: (0, path_1.join)(api.paths.absTmpPath, 'umi.ts'),
+                externals: api.config.externals,
+                resolver,
+            });
+            // skip umi by default
+            delete api.appData.deps['umi'];
+            const data = generatePkgData(api);
+            const deps = data.pkgInfo.exports.reduce((r, exp) => r.concat(exp.deps.map((dep) => dep.name)), []);
+            const hasNewDep = deps.some((i) => !importmap.imports[i]);
+            // update importmap from esm if there has new import
+            if (hasNewDep) {
+                // TODO: add local cache and restore
+                importmap = (_a = (yield service.getImportmap(data))) === null || _a === void 0 ? void 0 : _a.importMap;
+                // because we will replaced package name to CDN url in vite plugin
+                // so we must append scope rules for the CDN url like the import specifier
+                // example:
+                //   origin:
+                //   { imports: { a: 'aa', b: 'bb', c: 'cc1' }, scopes: { b: { c: 'cc2' } } }
+                //   to:
+                //   { imports: { a: 'aa', b: 'bb', c: 'cc1' }, scopes: { b: { c: 'cc2' }, 'bb': { c: 'cc2' } } }
+                Object.keys(importmap.scopes || {})
+                    .filter((item) => importmap.imports[item])
+                    .forEach((item) => {
+                    importmap.scopes[importmap.imports[item]] = importmap.scopes[item];
+                });
+            }
+        });
+    }
+    // describe config
     api.describe({
         key: 'esmi',
         config: {
@@ -21,24 +141,48 @@ exports.default = (api) => {
         },
         enableBy: api.EnableBy.config,
     });
+    // check bundler type
     api.onStart(() => {
         if (!api.args.vite) {
             throw new Error(`esmi can only be used in vite mode.`);
         }
     });
-    // 需要在 generate 之后是因为需要先等临时文件生成
+    // collect all imports after tmp files generated
     api.onBeforeCompiler(() => __awaiter(void 0, void 0, void 0, function* () {
-        // scan and module graph
-        // TODO: module graph
         if (api.args.vite) {
-            const resolver = (0, scan_1.createResolver)({
+            // init esmi service
+            service = new Service_1.default({ cdnOrigin: api.config.esmi.cdnOrigin });
+            // init project resolver
+            resolver = (0, scan_1.createResolver)({
                 alias: api.config.alias,
             });
-            api.appData.deps = yield (0, scan_1.scan)({
-                entry: (0, path_1.join)(api.paths.absTmpPath, 'umi.ts'),
-                externals: api.config.externals,
-                resolver,
-            });
+            // init importmap
+            yield refreshImportMap();
         }
     }));
+    // append ipmortmap script for HTML
+    api.modifyHTML(($) => {
+        const scp = $('<script type="importmap"></script>');
+        scp.html(JSON.stringify(importmap, null, 2));
+        $('head > script:eq(0)').before(scp);
+        // TODO: polyfill for legacy browser
+        return $;
+    });
+    if (api.args.vite) {
+        // apply esmi vite plugin
+        api.modifyViteConfig((memo) => {
+            memo.plugins = (memo.plugins || []).concat(esmi({
+                handleHotUpdate: (ctx) => __awaiter(void 0, void 0, void 0, function* () {
+                    ctx.file;
+                    // TODO: incremental refresh by ctx.file
+                    yield refreshImportMap();
+                    // TODO: refresh page when importmap changed
+                }),
+            }));
+            return memo;
+        });
+    }
+    else {
+        // TODO: webpack implementation
+    }
 };

package/dist/features/mock/mock.js

@@ -24,8 +24,8 @@ function default_1(api) {
                 });
             },
         },
-        enableBy({ env }) {
-            return env === 'development';
+        enableBy() {
+            return api.name === 'dev';
         },
     });
     // context for update mockData

package/dist/features/tmpFiles/tmpFiles.js

@@ -27,6 +27,7 @@ exports.default = (api) => {
     api.onGenerateFiles((opts) => __awaiter(void 0, void 0, void 0, function* () {
         // umi.ts
         api.writeTmpFile({
+            noPluginDir: true,
             path: 'umi.ts',
             tplPath: (0, path_1.join)(constants_1.TEMPLATES_DIR, 'umi.tpl'),
             context: {
@@ -70,6 +71,7 @@ exports.default = (api) => {
         // @/pages/
         const prefix = hasSrc ? '../../../src/pages/' : '../../pages/';
         api.writeTmpFile({
+            noPluginDir: true,
             path: 'core/route.ts',
             tplPath: (0, path_1.join)(constants_1.TEMPLATES_DIR, 'route.tpl'),
             context: {
@@ -110,6 +112,7 @@ exports.default = (api) => {
             ],
         });
         api.writeTmpFile({
+            noPluginDir: true,
             path: 'core/plugin.ts',
             tplPath: (0, path_1.join)(constants_1.TEMPLATES_DIR, 'plugin.tpl'),
             context: {

package/dist/registerMethods.js

@@ -60,7 +60,9 @@ exports.default = (api) => {
         name: 'writeTmpFile',
         fn(opts) {
             (0, assert_1.default)(api.service.stage >= api.ServiceStage.runCommand, `api.writeTmpFile() should not execute in register stage.`);
-            const absPath = (0, path_1.join)(api.paths.absTmpPath, opts.path);
+            const absPath = (0, path_1.join)(api.paths.absTmpPath, 
+            // @ts-ignore
+            this.plugin.key && !opts.noPluginDir ? `plugin-${this.plugin.key}` : '', opts.path);
             utils_1.fsExtra.mkdirpSync((0, path_1.dirname)(absPath));
             let content = opts.content;
             if (!content) {
@@ -77,7 +79,8 @@ exports.default = (api) => {
                 (0, isTypeScriptFile_1.isTypeScriptFile)(opts.path) && `// @ts-nocheck`,
                 '// This file is generated by Umi automatically',
                 '// DO NOT CHANGE IT MANUALLY!',
-                content,
+                content.trim(),
+                '',
             ]
                 .filter((text) => text !== false)
                 .join('\n');

package/dist/types.d.ts

@@ -1,6 +1,7 @@
 import type { RequestHandler } from '@umijs/bundler-webpack';
 import type webpack from '@umijs/bundler-webpack/compiled/webpack';
 import type WebpackChain from '@umijs/bundler-webpack/compiled/webpack-5-chain';
+import type { InlineConfig as ViteInlineConfig } from 'vite';
 import type { IAdd, IEvent, IModify, IRoute as ICoreRoute, IServicePluginAPI, PluginAPI } from '@umijs/core';
 import { Env } from '@umijs/core';
 import type { CheerioAPI } from '@umijs/utils/compiled/cheerio';
@@ -48,6 +49,7 @@ export declare type IApi = PluginAPI & IServicePluginAPI & {
     restartServer: () => void;
     writeTmpFile: (opts: {
         path: string;
+        noPluginDir?: boolean;
         content?: string;
         tpl?: string;
         tplPath?: string;
@@ -133,7 +135,7 @@ export declare type IApi = PluginAPI & IServicePluginAPI & {
         webpack: typeof webpack;
         env: Env;
     }>;
-    modifyViteConfig: IModify<webpack.Configuration, {
+    modifyViteConfig: IModify<ViteInlineConfig, {
         env: Env;
     }>;
     chainWebpack: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umijs/preset-umi",
-  "version": "4.0.0-beta.11",
+  "version": "4.0.0-beta.12",
   "description": "@umijs/preset-umi",
   "homepage": "https://github.com/umijs/umi-next/tree/master/packages/preset-umi#readme",
   "bugs": "https://github.com/umijs/umi-next/issues",
@@ -24,28 +24,30 @@
   },
   "dependencies": {
     "@types/multer": "1.4.7",
-    "@umijs/ast": "4.0.0-beta.11",
-    "@umijs/babel-preset-umi": "4.0.0-beta.11",
-    "@umijs/bundler-utils": "4.0.0-beta.11",
-    "@umijs/bundler-vite": "4.0.0-beta.11",
-    "@umijs/bundler-webpack": "4.0.0-beta.11",
-    "@umijs/core": "4.0.0-beta.11",
-    "@umijs/renderer-react": "4.0.0-beta.11",
-    "@umijs/server": "4.0.0-beta.11",
-    "@umijs/utils": "4.0.0-beta.11",
+    "@umijs/ast": "4.0.0-beta.12",
+    "@umijs/babel-preset-umi": "4.0.0-beta.12",
+    "@umijs/bundler-utils": "4.0.0-beta.12",
+    "@umijs/bundler-vite": "4.0.0-beta.12",
+    "@umijs/bundler-webpack": "4.0.0-beta.12",
+    "@umijs/core": "4.0.0-beta.12",
+    "@umijs/renderer-react": "4.0.0-beta.12",
+    "@umijs/server": "4.0.0-beta.12",
+    "@umijs/utils": "4.0.0-beta.12",
     "current-script-polyfill": "1.0.0",
     "enhanced-resolve": "5.8.3",
+    "magic-string": "0.25.7",
     "path-to-regexp": "1.7.0",
     "react": "18.0.0-alpha-f2c381131-20211004",
     "react-dom": "18.0.0-alpha-f2c381131-20211004",
-    "react-router": "6.0.0-beta.7",
-    "react-router-dom": "6.0.0-beta.7"
+    "react-router": "6.0.2",
+    "react-router-dom": "6.0.2"
   },
   "devDependencies": {
     "@types/body-parser": "1.19.2",
     "@types/multer": "1.4.7",
     "body-parser": "1.19.0",
-    "multer": "1.4.3"
+    "multer": "1.4.3",
+    "vite": "2.6.13"
   },
   "publishConfig": {
     "access": "public"