@umijs/preset-umi 4.0.0-beta.10 → 4.0.0-beta.14

package/dist/commands/dev/createRouteMiddleware.js

@@ -24,11 +24,15 @@ window.__vite_plugin_react_preamble_installed__ = true
 function createRouteMiddleware(opts) {
     return (req, res, next) => __awaiter(this, void 0, void 0, function* () {
         const { vite } = opts.api.args;
+        const viteScripts = [
+            // add noshim attr for skip importmap shim logic for this modules
+            { content: viteRefreshScript, noshim: '' },
+            { src: '/@vite/client', noshim: '' },
+            '/.umi/umi.ts',
+        ];
         const markupArgs = yield (0, getMarkupArgs_1.getMarkupArgs)(opts);
         // @ts-ignore
-        const requestHandler = yield (0, server_1.createRequestHandler)(Object.assign(Object.assign({}, markupArgs), { scripts: (vite
-                ? [viteRefreshScript, '/@vite/client', '/.umi/umi.ts']
-                : ['/umi.js']).concat(markupArgs.scripts), esmScript: vite }));
+        const requestHandler = yield (0, server_1.createRequestHandler)(Object.assign(Object.assign({}, markupArgs), { scripts: (vite ? viteScripts : ['/umi.js']).concat(markupArgs.scripts), esmScript: vite }));
         requestHandler(req, res, next);
     });
 }

package/dist/commands/dev/dev.js

@@ -230,7 +230,10 @@ PORT=8888 umi dev
                     : { babelPreset, chainWebpack, modifyWebpackConfig })), { beforeBabelPlugins,
                     beforeBabelPresets,
                     extraBabelPlugins,
-                    extraBabelPresets, beforeMiddlewares: [faviconMiddleware_1.faviconMiddleware].concat(beforeMiddlewares), afterMiddlewares: [(0, createRouteMiddleware_1.createRouteMiddleware)({ api })].concat(middlewares), onDevCompileDone(opts) {
+                    extraBabelPresets, beforeMiddlewares: [].concat([
+                        ...beforeMiddlewares,
+                        faviconMiddleware_1.faviconMiddleware,
+                    ]), afterMiddlewares: [(0, createRouteMiddleware_1.createRouteMiddleware)({ api })].concat(middlewares), onDevCompileDone(opts) {
                         api.applyPlugins({
                             key: 'onDevCompileDone',
                             args: opts,

package/dist/commands/dev/getMarkupArgs.d.ts

@@ -2,6 +2,8 @@ import { IApi } from '../../types';
 export declare function getMarkupArgs(opts: {
     api: IApi;
 }): Promise<{
+    mountElementId: any;
+    base: any;
     routes: any;
     favicon: any;
     headScripts: any;

package/dist/commands/dev/getMarkupArgs.js

@@ -41,6 +41,8 @@ function getMarkupArgs(opts) {
             initialValue: opts.api.config.favicon,
         });
         return {
+            mountElementId: opts.api.config.mountElementId,
+            base: opts.api.config.base,
             routes: opts.api.appData.routes,
             favicon,
             headScripts,

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/appData/appData.js

@@ -9,8 +9,11 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const bundler_utils_1 = require("@umijs/bundler-utils");
 const utils_1 = require("@umijs/utils");
+const fs_1 = require("fs");
 const path_1 = require("path");
+const watch_1 = require("../../commands/dev/watch");
 const routes_1 = require("../tmpFiles/routes");
 exports.default = (api) => {
     api.modifyAppData((memo) => __awaiter(void 0, void 0, void 0, function* () {
@@ -25,6 +28,36 @@ exports.default = (api) => {
         memo.react = {
             version: require((0, path_1.join)(api.config.alias.react, 'package.json')).version,
         };
+        memo.appJS = yield getAppJsInfo();
         return memo;
     }));
+    // Execute earliest, so that other onGenerateFiles can get it
+    api.register({
+        key: 'onGenerateFiles',
+        fn(args) {
+            return __awaiter(this, void 0, void 0, function* () {
+                if (!args.isFirstTime) {
+                    api.appData.appJS = yield getAppJsInfo();
+                }
+            });
+        },
+        stage: Number.NEGATIVE_INFINITY,
+    });
+    function getAppJsInfo() {
+        return __awaiter(this, void 0, void 0, function* () {
+            for (const path of (0, watch_1.expandJSPaths)((0, path_1.join)(api.paths.absSrcPath, 'app'))) {
+                if ((0, fs_1.existsSync)(path)) {
+                    const [_, exports] = yield (0, bundler_utils_1.parseModule)({
+                        path,
+                        content: (0, fs_1.readFileSync)(path, 'utf-8'),
+                    });
+                    return {
+                        path,
+                        exports,
+                    };
+                }
+            }
+            return null;
+        });
+    }
 };

package/dist/features/check/check.js

@@ -31,4 +31,15 @@ exports.default = (api) => {
             },
         });
     }));
+    api.onCheckCode((args) => {
+        // Fixed version import is not allowed
+        // e.g. import { X } from '_@ant-design_icons@4.7.0@ant-design/icons'
+        if (['cnpm', 'tnpm'].includes(api.appData.npmClient)) {
+            args.imports.forEach(({ source }) => {
+                if (/@\d/.test(source)) {
+                    throw new Error(`${source} is not allowed to import.`);
+                }
+            });
+        }
+    });
 };

package/dist/features/configPlugins/configPlugins.js

@@ -8,7 +8,7 @@ function resolveProjectDep(opts) {
     var _a, _b;
     if (((_a = opts.pkg.dependencies) === null || _a === void 0 ? void 0 : _a[opts.dep]) ||
         ((_b = opts.pkg.devDependencies) === null || _b === void 0 ? void 0 : _b[opts.dep])) {
-        return (0, path_1.dirname)(utils_1.resolve.sync(`${opts.dep}/package`, {
+        return (0, path_1.dirname)(utils_1.resolve.sync(`${opts.dep}/package.json`, {
             basedir: opts.cwd,
         }));
     }
@@ -34,6 +34,8 @@ exports.default = (api) => {
         externals: {},
         autoCSSModules: true,
         publicPath: '/',
+        mountElementId: 'root',
+        base: '/',
     };
     const bundleSchemas = (0, schema_1.getSchemas)();
     const extraSchemas = (0, schema_2.getSchemas)();
@@ -55,7 +57,9 @@ exports.default = (api) => {
     }
     // api.paths is ready after register
     api.modifyConfig((memo, args) => {
-        memo.alias = Object.assign(Object.assign({}, memo.alias), { '@': args.paths.absSrcPath, '@@': args.paths.absTmpPath });
+        memo.alias = Object.assign(Object.assign({}, memo.alias), { '@': args.paths.absSrcPath, '@@': args.paths.absTmpPath, 
+            // like vite, use to pre-bundling dependencies in vite mode
+            '@fs': '/' });
         return memo;
     });
 };

package/dist/features/configPlugins/schema.js

@@ -4,11 +4,13 @@ exports.getSchemas = void 0;
 const utils_1 = require("@umijs/utils");
 function getSchemas() {
     return {
+        base: (Joi) => Joi.string(),
         plugins: (Joi) => Joi.array().items(Joi.string()),
         publicPath: (Joi) => Joi.string().regex(/\/$/).error(new Error('publicPath must end with /')),
         favicon: (Joi) => Joi.string(),
         headScripts: (Joi) => Joi.array().items(Joi.alternatives(Joi.string())),
         scripts: (Joi) => Joi.array().items(Joi.alternatives(Joi.string())),
+        mountElementId: (Joi) => Joi.string(),
         npmClient: (Joi) => Joi.string().valid(utils_1.NpmClientEnum.pnpm, utils_1.NpmClientEnum.tnpm, utils_1.NpmClientEnum.cnpm, utils_1.NpmClientEnum.yarn, utils_1.NpmClientEnum.npm),
         routes: (Joi) => Joi.array().items(Joi.object()),
     };

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

@@ -0,0 +1,75 @@
+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;
+    cacheDir: string;
+    cache: Record<string, IImportmapData>;
+    constructor(opts: {
+        cdnOrigin: string;
+        cacheDir: string;
+    });
+    /**
+     * get cache file path by cache key
+     * @param data  pkg data
+     */
+    static getCacheKey(data: IPkgData): string;
+    /**
+     * get importmap cache by cache key
+     * @param key cache key
+     */
+    getCache(key: string): IImportmapData;
+    /**
+     * set importmap cache
+     * @param key   cache key
+     * @param data  importmap data
+     */
+    setCache(key: string, data: IImportmapData): void;
+    /**
+     * 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,122 @@
+"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 });
+const utils_1 = require("@umijs/utils");
+const crypto_1 = require("crypto");
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+/**
+ * class for connect esmi server
+ */
+class ESMIService {
+    constructor(opts) {
+        this.cdnOrigin = '';
+        this.cacheDir = '';
+        this.cache = {};
+        this.cdnOrigin = opts.cdnOrigin;
+        this.cacheDir = opts.cacheDir;
+        // restore local cache
+        const cacheFilePath = path_1.default.join(this.cacheDir, 'importmap.json');
+        if (fs_1.default.existsSync(cacheFilePath)) {
+            try {
+                this.cache = require(cacheFilePath);
+            }
+            catch (_a) {
+                /* nothing */
+            }
+        }
+    }
+    /**
+     * get cache file path by cache key
+     * @param data  pkg data
+     */
+    static getCacheKey(data) {
+        const hash = (0, crypto_1.createHash)('md4');
+        hash.update(JSON.stringify(data.pkgInfo.exports));
+        return hash.digest('hex');
+    }
+    /**
+     * get importmap cache by cache key
+     * @param key cache key
+     */
+    getCache(key) {
+        return this.cache[key];
+    }
+    /**
+     * set importmap cache
+     * @param key   cache key
+     * @param data  importmap data
+     */
+    setCache(key, data) {
+        this.cache[key] = data;
+        // create cache dir
+        if (!fs_1.default.existsSync(this.cacheDir)) {
+            fs_1.default.mkdirSync(this.cacheDir, { recursive: true });
+        }
+        // write cache to file system
+        fs_1.default.writeFileSync(path_1.default.join(this.cacheDir, 'importmap.json'), JSON.stringify(this.cache, null, 2));
+    }
+    /**
+     * 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* () {
+            const cacheKey = ESMIService.getCacheKey(data);
+            const cache = this.getCache(cacheKey);
+            const stamp = +new Date();
+            // use valid cache first
+            if (cache) {
+                utils_1.logger.info('ESMi cache used');
+                return cache;
+            }
+            // log dependency list
+            utils_1.logger.info(utils_1.chalk.greenBright('Pre-compiling dependencies on esmi:'));
+            data.pkgInfo.exports[0].deps.forEach((dep) => {
+                console.log(utils_1.chalk.yellow(`  ${dep.name}`));
+            });
+            // get the build ticket id
+            const ticketId = yield this.build(data);
+            // continue to the next request after 2s
+            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) => {
+                    if (res.data.success) {
+                        this.setCache(cacheKey, res.data.data);
+                        utils_1.logger.info(`Done, took ${((+new Date() - stamp) / 1000).toFixed(1)}s`);
+                        return res.data.data;
+                    }
+                    return next();
+                }, next);
+            };
+            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,37 +8,197 @@ 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'];
+            // FIXME: force include react & react-dom
+            api.appData.deps['react'] = api.appData.react.version;
+            api.appData.deps['react-dom'] = api.appData.react.version;
+            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: {
             schema(Joi) {
-                return Joi.object();
+                return Joi.object({
+                    cdnOrigin: Joi.string(),
+                    shimUrl: Joi.string(),
+                });
             },
         },
         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)({
-                alias: api.config.alias,
+            // init esmi service
+            service = new Service_1.default({
+                cdnOrigin: api.config.esmi.cdnOrigin,
+                cacheDir: (0, path_1.join)(api.cwd, '.esmi'),
             });
-            api.appData.deps = yield (0, scan_1.scan)({
-                entry: (0, path_1.join)(api.paths.absTmpPath, 'umi.ts'),
-                externals: api.config.externals,
-                resolver,
+            // init project resolver
+            resolver = (0, scan_1.createResolver)({
+                alias: api.config.alias,
             });
+            // init importmap
+            yield refreshImportMap();
         }
     }));
+    // append ipmortmap script for HTML
+    api.modifyHTML(($) => {
+        const scp = $('<script type="importmap"></script>\n');
+        scp.html(JSON.stringify(importmap, null, 2));
+        $('head > script:eq(0)').before(scp);
+        // append importmap shim script
+        if (api.config.esmi.shimUrl) {
+            $('body > script:eq(0)').before($(`<script src="${api.config.esmi.shimUrl}"></script>\n`));
+        }
+        // preload for importmap modules
+        Object.values(importmap.imports).forEach((url) => {
+            scp.before($(`<link rel="modulepreload" href="${url}" />\n`));
+        });
+        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/favicon/favicon.js

@@ -34,7 +34,7 @@ exports.default = (api) => {
         }
         return memo;
     }));
-    api.addMiddlewares(() => [
+    api.addBeforeMiddlewares(() => [
         (req, res, next) => {
             if (api.appData.faviconFile &&
                 req.path === `/${api.appData.faviconFile}`) {
@@ -53,6 +53,8 @@ exports.default = (api) => {
         }
     });
     api.modifyHTMLFavicon((memo) => {
-        return `${api.config.publicPath}${api.appData.faviconFile}` || memo;
+        return api.appData.faviconFile
+            ? `${api.config.publicPath}${api.appData.faviconFile}`
+            : memo;
     });
 };

package/dist/features/lowImport/babelPlugin.d.ts

@@ -3,11 +3,13 @@ import * as t from '@umijs/bundler-utils/compiled/babel/types';
 import { IOpts } from './lowImport';
 interface IPluginOpts {
     opts: IOpts;
+    css: string;
 }
 export default function (): {
     visitor: {
         Identifier(path: Babel.NodePath<t.Identifier>, state: {
             opts: IPluginOpts;
+            file: any;
         }): void;
         MemberExpression(path: Babel.NodePath<t.MemberExpression>, state: {
             opts: IPluginOpts;

package/dist/features/lowImport/babelPlugin.js

@@ -21,11 +21,12 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const helper_module_imports_1 = require("@umijs/bundler-utils/compiled/babel/helper-module-imports");
 const t = __importStar(require("@umijs/bundler-utils/compiled/babel/types"));
+const path_1 = require("path");
 function default_1() {
     return {
         visitor: {
             Identifier(path, state) {
-                var _a, _b;
+                var _a, _b, _c;
                 const { name } = path.node;
                 if (path.scope.hasBinding(path.node.name)) {
                     return;
@@ -44,7 +45,15 @@ function default_1() {
                         nameHint: name,
                     }));
                 }
-                // TODO: state.opts.opts.namespaceToLib
+                else if ((_c = state.opts.opts.namespaceToLib) === null || _c === void 0 ? void 0 : _c[name]) {
+                    path.replaceWith((0, helper_module_imports_1.addNamespace)(path, state.opts.opts.namespaceToLib[name]));
+                }
+                // import css
+                if (name === 'styles' && state.opts.css) {
+                    const { filename } = state.file.opts;
+                    const cssFilename = (0, path_1.basename)(filename, (0, path_1.extname)(filename)) + '.' + state.opts.css;
+                    path.replaceWith((0, helper_module_imports_1.addDefault)(path, './' + cssFilename, { nameHint: name }));
+                }
             },
             MemberExpression(path, state) {
                 const { object, property } = path.node;

package/dist/features/lowImport/lowImport.js

@@ -25,6 +25,7 @@ exports.default = (api) => {
             schema(Joi) {
                 return Joi.object({
                     libs: Joi.array(),
+                    css: Joi.string(),
                 });
             },
         },
@@ -46,7 +47,7 @@ exports.default = (api) => {
                 const memberDts = (lib.members || [])
                     .map((member) => `${member}: typeof import('${lib.importFrom}')['${member}'],`)
                     .join('\n');
-                return `const ${lib.withObj} = {\n${memberDts}\n};`;
+                return `const ${lib.withObj} : {\n${memberDts}\n};`;
             }
             else if (lib.namespaceImport) {
                 return `const ${lib.namespaceImport}: typeof import('${lib.importFrom}');`;
@@ -60,20 +61,24 @@ exports.default = (api) => {
                     .join('\n');
             }
         });
+        // TODO: styles 的类型提示
         const content = `
 // generated by umi
 declare global {
-${dts}
+${dts.join('\n')}
+const styles: any;
 }
 export {}
     `.trim() + `\n`;
         (0, fs_1.writeFileSync)((0, path_1.join)(api.paths.cwd, 'lowImport.d.ts'), content, 'utf-8');
     });
     api.addBeforeBabelPresets(() => {
+        var _a;
         const opts = normalizeLibs(api.appData.lowImport);
+        const css = ((_a = api.config.lowImport) === null || _a === void 0 ? void 0 : _a.css) || 'less';
         return [
             {
-                plugins: [[babelPlugin_1.default, { opts }]],
+                plugins: [[babelPlugin_1.default, { opts, css }]],
             },
         ];
     });

package/dist/features/mock/mock.js

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

package/dist/features/tmpFiles/routes.js

@@ -51,6 +51,10 @@ function getRoutes(opts) {
                 routes,
             });
         }
+        routes = yield opts.api.applyPlugins({
+            key: 'modifyRoutes',
+            initialValue: routes,
+        });
         return routes;
     });
 }
@@ -62,6 +66,12 @@ function getRouteComponents(opts) {
             const route = opts.routes[key];
             if (!route.file)
                 return `// ${key}: no file to import`;
+            // e.g.
+            // component: () => <h1>foo</h1>
+            // component: (() => () => <h1>foo</h1>)()
+            if (route.file.startsWith('(')) {
+                return `'${key}': () => Promise.resolve(${route.file}),`;
+            }
             const path = (0, path_1.isAbsolute)(route.file) || route.file.startsWith('@/')
                 ? route.file
                 : `${opts.prefix}${route.file}`;

package/dist/features/tmpFiles/tmpFiles.js

@@ -27,9 +27,11 @@ 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: {
+                mountElementId: api.config.mountElementId,
                 rendererPath: yield api.applyPlugins({
                     key: 'modifyRendererPath',
                     initialValue: '@umijs/renderer-react',
@@ -54,6 +56,7 @@ exports.default = (api) => {
                     key: 'addEntryImports',
                     initialValue: [],
                 })).join('\n'),
+                basename: api.config.base,
             },
         });
         // route.ts
@@ -70,7 +73,8 @@ exports.default = (api) => {
         // @/pages/
         const prefix = hasSrc ? '../../../src/pages/' : '../../pages/';
         api.writeTmpFile({
-            path: 'core/route.ts',
+            noPluginDir: true,
+            path: 'core/route.tsx',
             tplPath: (0, path_1.join)(constants_1.TEMPLATES_DIR, 'route.tpl'),
             context: {
                 routes: JSON.stringify(routes),
@@ -99,17 +103,19 @@ exports.default = (api) => {
             initialValue: [
                 // TODO: support these methods
                 // 'modifyClientRenderOpts',
-                // 'patchRoutes',
+                'patchRoutes',
                 'rootContainer',
                 'innerProvider',
                 'i18nProvider',
+                'accessProvider',
                 'dataflowProvider',
                 'outerProvider',
-                // 'render',
+                'render',
                 // 'onRouteChange',
             ],
         });
         api.writeTmpFile({
+            noPluginDir: true,
             path: 'core/plugin.ts',
             tplPath: (0, path_1.join)(constants_1.TEMPLATES_DIR, 'plugin.tpl'),
             context: {

package/dist/index.js

@@ -15,6 +15,7 @@ exports.default = () => {
             require.resolve('./features/polyfill/polyfill'),
             require.resolve('./features/tmpFiles/tmpFiles'),
             require.resolve('./features/transform/transform'),
+            require.resolve('./features/lowImport/lowImport'),
             // commands
             require.resolve('./commands/build'),
             require.resolve('./commands/config/config'),

package/dist/libs/scan.js

@@ -87,6 +87,7 @@ function scan(opts) {
             const depPath = queueDeps.shift();
             if (cache.has(depPath))
                 continue;
+            // TODO: use parseModule in bundler-utils
             const content = yield getContent(depPath);
             const { deps } = yield scanContent({ content });
             cache.set(depPath, deps);

package/dist/registerMethods.js

@@ -7,6 +7,7 @@ const utils_1 = require("@umijs/utils");
 const assert_1 = __importDefault(require("assert"));
 const fs_1 = require("fs");
 const path_1 = require("path");
+const transformIEAR_1 = __importDefault(require("./utils/transformIEAR"));
 const isTypeScriptFile_1 = require("./utils/isTypeScriptFile");
 exports.default = (api) => {
     [
@@ -52,7 +53,7 @@ exports.default = (api) => {
         // 'modifyExportRouteMap',
         // 'modifyPublicPathStr',
         'modifyRendererPath',
-        // 'modifyRoutes',
+        'modifyRoutes',
     ].forEach((name) => {
         api.registerMethod({ name });
     });
@@ -60,7 +61,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,10 +80,15 @@ 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');
+            // transform imports for all javascript-like files
+            if (/\.(t|j)sx?$/.test(absPath)) {
+                content = (0, transformIEAR_1.default)({ content, path: absPath }, api);
+            }
             if (!(0, fs_1.existsSync)(absPath) || (0, fs_1.readFileSync)(absPath, 'utf-8') !== content) {
                 (0, fs_1.writeFileSync)(absPath, content, 'utf-8');
             }

package/dist/types.d.ts

@@ -4,6 +4,7 @@ import type WebpackChain from '@umijs/bundler-webpack/compiled/webpack-5-chain';
 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';
+import type { InlineConfig as ViteInlineConfig } from 'vite';
 export declare type IScript = Partial<{
     async: boolean;
     charset: string;
@@ -48,6 +49,7 @@ export declare type IApi = PluginAPI & IServicePluginAPI & {
     restartServer: () => void;
     writeTmpFile: (opts: {
         path: string;
+        noPluginDir?: boolean;
         content?: string;
         tpl?: string;
         tplPath?: string;
@@ -129,11 +131,12 @@ export declare type IApi = PluginAPI & IServicePluginAPI & {
         path: string;
     }>;
     modifyRendererPath: IModify<string, {}>;
+    modifyRoutes: IModify<Record<string, IRoute>, {}>;
     modifyWebpackConfig: IModify<webpack.Configuration, {
         webpack: typeof webpack;
         env: Env;
     }>;
-    modifyViteConfig: IModify<webpack.Configuration, {
+    modifyViteConfig: IModify<ViteInlineConfig, {
         env: Env;
     }>;
     chainWebpack: {

package/dist/utils/transformIEAR.d.ts

@@ -0,0 +1,22 @@
+import type { IApi } from '../types';
+/**
+ * import/export/await-import/require match regular expression
+ *
+ * WHY: REGEXP
+ * ref: https://github.com/umijs/umi-next/pull/230
+ *
+ * TODO: more choices
+ * 1. fork es-module-lexer, support jsx
+ * 2. use sourcemap of esbuild
+ */
+export declare const IEAR_REG_EXP: RegExp;
+/**
+ * transform absolute import/export/await-import/require path
+ * @note  use to vite can deps:
+ *        transform to relative path for .umi dir imports
+ *        prefix `@fs` for node_modules imports
+ */
+export default function transformIEAR({ content, path }: {
+    content: string;
+    path: string;
+}, api: IApi): string;

package/dist/utils/transformIEAR.js

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IEAR_REG_EXP = void 0;
+const utils_1 = require("@umijs/utils");
+const path_1 = require("path");
+/**
+ * import/export/await-import/require match regular expression
+ *
+ * WHY: REGEXP
+ * ref: https://github.com/umijs/umi-next/pull/230
+ *
+ * TODO: more choices
+ * 1. fork es-module-lexer, support jsx
+ * 2. use sourcemap of esbuild
+ */
+exports.IEAR_REG_EXP = new RegExp([
+    // match content before quote ($1)
+    '(',
+    [
+        // import/export statements
+        [
+            '(?:',
+            // match head
+            '(?:^|\\r|\\n|;)\\s*',
+            // match identifier
+            '(?:import|export)\\s+',
+            [
+                '(?:',
+                '(?:',
+                // match body
+                [
+                    // match default & member import
+                    [
+                        // match default import
+                        [
+                            '(?:',
+                            // match type import
+                            '(?:type\\s*)?',
+                            // match variable name
+                            '[a-zA-Z_$][\\w_$]*\\s*,?\\s+',
+                            // optional
+                            ')?',
+                        ].join(''),
+                        // match member import/export (optional)
+                        '(?:{[^}]+}\\s+)?',
+                    ].join(''),
+                    // match contents import/export
+                    '(?:type\\s*)?\\*\\s+(?:as\\s+[a-zA-Z][\\w_$]*\\s+)?',
+                ].join('|'),
+                ')',
+                // match from
+                'from\\s+',
+                // match direct file import
+                '|\\s*',
+                ')',
+            ].join(''),
+            ')',
+        ].join(''),
+        // import/require call
+        [
+            // match head (must be single function name)
+            '(?:^|[^a-zA-Z\\w_$\\.])',
+            // match call
+            '(?:import|require)\\(\\s*',
+        ].join(''),
+    ].join('|'),
+    ')',
+    '(?:',
+    // match quotes ($2)
+    `('|")`,
+    // match absolute file path ($3)
+    `(\\/.*[^\\\\])\\2`,
+    ')',
+].join(''), 
+// match full-content
+'g');
+/**
+ * transform absolute import/export/await-import/require path
+ * @note  use to vite can deps:
+ *        transform to relative path for .umi dir imports
+ *        prefix `@fs` for node_modules imports
+ */
+function transformIEAR({ content, path }, api) {
+    return content.replace(exports.IEAR_REG_EXP, (_, prefix, quote, absPath) => {
+        if (absPath.startsWith(api.paths.absTmpPath)) {
+            // transform .umi absolute imports
+            absPath = (0, utils_1.winPath)((0, path_1.relative)((0, path_1.dirname)(path), absPath));
+        }
+        else if (absPath.includes('node_modules')) {
+            // transform node_modules absolute imports
+            absPath = `@fs${absPath}`;
+        }
+        return `${prefix}${quote}${absPath}${quote}`;
+    });
+}
+exports.default = transformIEAR;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umijs/preset-umi",
-  "version": "4.0.0-beta.10",
+  "version": "4.0.0-beta.14",
   "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.10",
-    "@umijs/babel-preset-umi": "4.0.0-beta.10",
-    "@umijs/bundler-utils": "4.0.0-beta.10",
-    "@umijs/bundler-vite": "4.0.0-beta.10",
-    "@umijs/bundler-webpack": "4.0.0-beta.10",
-    "@umijs/core": "4.0.0-beta.10",
-    "@umijs/renderer-react": "4.0.0-beta.10",
-    "@umijs/server": "4.0.0-beta.10",
-    "@umijs/utils": "4.0.0-beta.10",
+    "@umijs/ast": "4.0.0-beta.14",
+    "@umijs/babel-preset-umi": "4.0.0-beta.14",
+    "@umijs/bundler-utils": "4.0.0-beta.14",
+    "@umijs/bundler-vite": "4.0.0-beta.14",
+    "@umijs/bundler-webpack": "4.0.0-beta.14",
+    "@umijs/core": "4.0.0-beta.14",
+    "@umijs/renderer-react": "4.0.0-beta.14",
+    "@umijs/server": "4.0.0-beta.14",
+    "@umijs/utils": "4.0.0-beta.14",
     "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": "18.0.0-rc.0",
+    "react-dom": "18.0.0-rc.0",
+    "react-router": "6.1.1",
+    "react-router-dom": "6.1.1"
   },
   "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.7.6"
   },
   "publishConfig": {
     "access": "public"

package/templates/plugin.tpl

@@ -1,6 +1,7 @@
 {{#plugins}}
 import * as Plugin_{{{ index }}} from '{{{ path }}}';
 {{/plugins}}
+import { PluginManager } from 'umi';
 
 export function getPlugins() {
   return [
@@ -16,3 +17,16 @@ export function getPlugins() {
 export function getValidKeys() {
   return [{{#validKeys}}'{{{ . }}}',{{/validKeys}}];
 }
+
+let pluginManager = null;
+export function createPluginManager() {
+  pluginManager = PluginManager.create({
+    plugins: getPlugins(),
+    validKeys: getValidKeys(),
+  });
+  return pluginManager;
+}
+
+export function getPluginManager() {
+  return pluginManager;
+}

package/templates/umi.tpl

@@ -2,19 +2,40 @@
 {{{ importsAhead }}}
 import { renderClient } from '{{{ rendererPath }}}';
 import { getRoutes } from './core/route';
-import { getPlugins, getValidKeys } from './core/plugin';
-import { PluginManager } from 'umi';
+import { createPluginManager } from './core/plugin';
+import { ApplyPluginsType, PluginManager } from 'umi';
 {{{ imports }}}
 
 async function render() {
+  const pluginManager = createPluginManager();
+  const { routes, routeComponents } = await getRoutes(pluginManager);
+
+  // allow user to extend routes
+  pluginManager.applyPlugins({
+    key: 'patchRoutes',
+    type: 'event',
+    args: {
+      routes,
+      routeComponents,
+    },
+  });
   const context = {
-    ...await getRoutes(),
-    pluginManager: PluginManager.create({
-      plugins: getPlugins(),
-      validKeys: getValidKeys(),
-    }),
+    routes,
+    routeComponents,
+    pluginManager,
+    rootElement: document.getElementById('{{{ mountElementId }}}'),
+{{#basename}}
+    basename: '{{{ basename }}}',
+{{/basename}}
   };
-  return renderClient(context);
+
+  return (pluginManager.applyPlugins({
+    key: 'render',
+    type: ApplyPluginsType.compose,
+    initialValue() {
+      return renderClient(context);
+    },
+  }))();
 }
 
 {{{ entryCodeAhead }}}

package/dist/libs/moduleGraph.d.ts

@@ -1,2 +0,0 @@
-export declare class ModuleGraph {
-}

package/dist/libs/moduleGraph.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModuleGraph = void 0;
-class ModuleGraph {
-}
-exports.ModuleGraph = ModuleGraph;