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

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/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/esmi/Service.d.ts

@@ -38,9 +38,28 @@ export interface IPkgData {
  */
 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

package/dist/features/esmi/Service.js

@@ -8,15 +8,64 @@ 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 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
@@ -37,16 +86,35 @@ class ESMIService {
      */
     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 1s
+            // 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) => (res.data.success ? res.data.data : next()), next);
+                    .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);
             };
-            // TODO: timeout + time spend log
             return deferrer();
         });
     }

package/dist/features/esmi/esmi.js

@@ -109,6 +109,9 @@ exports.default = (api) => {
             });
             // 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]);
@@ -136,7 +139,10 @@ exports.default = (api) => {
         key: 'esmi',
         config: {
             schema(Joi) {
-                return Joi.object();
+                return Joi.object({
+                    cdnOrigin: Joi.string(),
+                    shimUrl: Joi.string(),
+                });
             },
         },
         enableBy: api.EnableBy.config,
@@ -151,7 +157,10 @@ exports.default = (api) => {
     api.onBeforeCompiler(() => __awaiter(void 0, void 0, void 0, function* () {
         if (api.args.vite) {
             // init esmi service
-            service = new Service_1.default({ cdnOrigin: api.config.esmi.cdnOrigin });
+            service = new Service_1.default({
+                cdnOrigin: api.config.esmi.cdnOrigin,
+                cacheDir: (0, path_1.join)(api.cwd, '.esmi'),
+            });
             // init project resolver
             resolver = (0, scan_1.createResolver)({
                 alias: api.config.alias,
@@ -162,10 +171,17 @@ exports.default = (api) => {
     }));
     // append ipmortmap script for HTML
     api.modifyHTML(($) => {
-        const scp = $('<script type="importmap"></script>');
+        const scp = $('<script type="importmap"></script>\n');
         scp.html(JSON.stringify(importmap, null, 2));
         $('head > script:eq(0)').before(scp);
-        // TODO: polyfill for legacy browser
+        // 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) {

package/dist/features/tmpFiles/tmpFiles.js

@@ -101,10 +101,11 @@ exports.default = (api) => {
             initialValue: [
                 // TODO: support these methods
                 // 'modifyClientRenderOpts',
-                // 'patchRoutes',
+                'patchRoutes',
                 'rootContainer',
                 'innerProvider',
                 'i18nProvider',
+                'accessProvider',
                 'dataflowProvider',
                 'outerProvider',
                 // 'render',

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/types.d.ts

@@ -1,10 +1,10 @@
 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';
+import type { InlineConfig as ViteInlineConfig } from 'vite';
 export declare type IScript = Partial<{
     async: boolean;
     charset: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umijs/preset-umi",
-  "version": "4.0.0-beta.12",
+  "version": "4.0.0-beta.13",
   "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,23 +24,23 @@
   },
   "dependencies": {
     "@types/multer": "1.4.7",
-    "@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",
+    "@umijs/ast": "4.0.0-beta.13",
+    "@umijs/babel-preset-umi": "4.0.0-beta.13",
+    "@umijs/bundler-utils": "4.0.0-beta.13",
+    "@umijs/bundler-vite": "4.0.0-beta.13",
+    "@umijs/bundler-webpack": "4.0.0-beta.13",
+    "@umijs/core": "4.0.0-beta.13",
+    "@umijs/renderer-react": "4.0.0-beta.13",
+    "@umijs/server": "4.0.0-beta.13",
+    "@umijs/utils": "4.0.0-beta.13",
     "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.2",
-    "react-router-dom": "6.0.2"
+    "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",

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,17 +2,27 @@
 {{{ importsAhead }}}
 import { renderClient } from '{{{ rendererPath }}}';
 import { getRoutes } from './core/route';
-import { getPlugins, getValidKeys } from './core/plugin';
+import { createPluginManager } from './core/plugin';
 import { 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,
   };
   return renderClient(context);
 }