@umijs/preset-umi 4.0.3 → 4.0.6

package/dist/commands/dev/dev.js

@@ -7,6 +7,7 @@ const utils_1 = require("@umijs/utils");
 const fs_1 = require("fs");
 const path_1 = require("path");
 const constants_1 = require("../../constants");
+const AutoUpdateSourceCodeCache_1 = require("../../libs/folderCache/AutoUpdateSourceCodeCache");
 const lazyImportFromCurrentPkg_1 = require("../../utils/lazyImportFromCurrentPkg");
 const createRouteMiddleware_1 = require("./createRouteMiddleware");
 const faviconMiddleware_1 = require("./faviconMiddleware");
@@ -207,7 +208,7 @@ PORT=8888 umi dev
             const debouncedPrintMemoryUsage = utils_1.lodash.debounce(printMemoryUsage_1.printMemoryUsage, 5000);
             let srcCodeCache;
             if (((_b = api.config.mfsu) === null || _b === void 0 ? void 0 : _b.strategy) === 'eager') {
-                srcCodeCache = new utils_1.AutoUpdateSrcCodeCache({
+                srcCodeCache = new AutoUpdateSourceCodeCache_1.AutoUpdateSrcCodeCache({
                     cwd: api.paths.absSrcPath,
                     cachePath: (0, path_1.join)(api.paths.absNodeModulesPath, '.cache', 'mfsu', 'v4'),
                 });
@@ -234,12 +235,16 @@ PORT=8888 umi dev
                 extraBabelPresets,
                 beforeMiddlewares: [].concat([
                     ...beforeMiddlewares,
-                    faviconMiddleware_1.faviconMiddleware,
                 ]),
                 // vite 模式使用 ./plugins/ViteHtmlPlugin.ts 处理
                 afterMiddlewares: enableVite
                     ? []
-                    : middlewares.concat((0, createRouteMiddleware_1.createRouteMiddleware)({ api })),
+                    : middlewares.concat([
+                        (0, createRouteMiddleware_1.createRouteMiddleware)({ api }),
+                        // 放置 favicon 在 webpack middleware 之后，兼容 public 目录下有 favicon.ico 的场景
+                        // ref: https://github.com/umijs/umi/issues/8024
+                        faviconMiddleware_1.faviconMiddleware,
+                    ]),
                 onDevCompileDone(opts) {
                     debouncedPrintMemoryUsage;
                     // debouncedPrintMemoryUsage();

package/dist/commands/lint.js

@@ -17,11 +17,14 @@ umi lint --stylelint-only
 
 # automatically fix, where possible
 umi lint --fix
+
+# disable reporting on warnings
+umi lint --quiet
 `,
         fn: async function () {
             // re-parse cli args to process boolean flags, for get the lint-staged args
             const args = (0, utils_1.yParser)(process.argv.slice(3), {
-                boolean: ['fix', 'eslint-only', 'stylelint-only'],
+                boolean: ['quiet', 'fix', 'eslint-only', 'stylelint-only'],
             });
             try {
                 require.resolve('@umijs/lint/package.json');

package/dist/commands/preview.js

@@ -92,7 +92,7 @@ umi preview --port [port]
             server.listen(port, () => {
                 const host = api.args.host && api.args.host !== '0.0.0.0'
                     ? api.args.host
-                    : '127.0.0.1';
+                    : 'localhost';
                 utils_1.logger.ready(`App listening at ${utils_1.chalk.green(`${protocol}//${host}:${port}`)}`);
             });
         },

package/dist/features/apiRoute/apiRoute.js

@@ -48,7 +48,6 @@ exports.default = (api) => {
                 return false;
             const config = api.userConfig.apiRoute;
             if (!config) {
-                utils_1.logger.warn('Directory ./src/api exists, but config.apiRoute is not set. API route feature will not be enabled!');
                 return false;
             }
             if (!config.platform) {

package/dist/features/clickToComponent/clickToComponent.d.ts

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

package/dist/features/clickToComponent/clickToComponent.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const utils_1 = require("@umijs/utils");
+const path_1 = require("path");
+exports.default = (api) => {
+    api.describe({
+        key: 'clickToComponent',
+        config: {
+            schema(joi) {
+                return joi.object({
+                    editor: joi.string(),
+                });
+            },
+        },
+        enableBy: api.EnableBy.config,
+    });
+    const pkgPath = (0, path_1.dirname)(require.resolve('click-to-react-component'));
+    api.modifyConfig((memo) => {
+        memo.alias['click-to-react-component'] = pkgPath;
+        return memo;
+    });
+    api.modifyAppData((memo) => {
+        memo.clickToComponent = {
+            pkgPath,
+            version: '1.0.8',
+        };
+        return memo;
+    });
+    api.onGenerateFiles({
+        name: 'clickToComponent',
+        fn: () => {
+            api.writeTmpFile({
+                path: 'runtime.tsx',
+                content: `
+import { ClickToComponent } from 'click-to-react-component';
+import React from 'react';
+export function rootContainer(container, opts) {
+return React.createElement(
+  (props) => {
+    return (
+      <>
+        <ClickToComponent editor="${api.config.clickToComponent.editor || 'vscode'}"/>
+        {props.children}
+      </>
+    );
+  },
+  opts,
+  container,
+);
+}
+    `,
+            });
+        },
+    });
+    api.addRuntimePlugin(() => [
+        (0, utils_1.winPath)((0, path_1.join)(api.paths.absTmpPath, 'plugin-clickToComponent/runtime.tsx')),
+    ]);
+};

package/dist/features/ssr/builder/css-loader.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.cssLoader = exports.getClassNames = exports.hashString = exports.ensureLastSlash = void 0;
-const bundler_webpack_1 = require("@umijs/bundler-webpack");
+const parcelCSS_1 = require("@umijs/bundler-webpack/dist/parcelCSS");
 const utils_1 = require("@umijs/utils");
 const fs_1 = require("fs");
 const path_1 = require("path");
@@ -18,7 +18,7 @@ exports.hashString = hashString;
 function getClassNames(code, filename) {
     // why use Parcel CSS?
     // ref: https://github.com/indooorsman/esbuild-css-modules-plugin
-    const { exports } = bundler_webpack_1.parcelCSS.transform({
+    const { exports } = parcelCSS_1.parcelCSS.transform({
         filename,
         code,
         minify: false,

package/dist/features/tmpFiles/routes.d.ts

@@ -10,3 +10,12 @@ export declare function getRouteComponents(opts: {
     prefix: string;
     api: IApi;
 }): Promise<string>;
+/**
+ *
+ * transform component into webpack chunkName
+ * @export
+ * @param {string} component component path
+ * @param {string} [cwd] current root path
+ * @return {*}  {string}
+ */
+export declare function componentToChunkName(component: string, cwd?: string): string;

package/dist/features/tmpFiles/routes.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getRouteComponents = exports.getRoutes = exports.getApiRoutes = void 0;
+exports.componentToChunkName = exports.getRouteComponents = exports.getRoutes = exports.getApiRoutes = void 0;
 const core_1 = require("@umijs/core");
 const utils_1 = require("@umijs/utils");
 const fs_1 = require("fs");
@@ -190,11 +190,43 @@ async function getRouteComponents(opts) {
         const path = (0, path_1.isAbsolute)(route.file) || route.file.startsWith('@/')
             ? route.file
             : `${opts.prefix}${route.file}`;
+        const webpackChunkName = componentToChunkName(path, opts.api.cwd);
         return useSuspense
-            ? `'${key}': React.lazy(() => import(/* webpackChunkName: "${key.replace(/[\/-]/g, '_')}" */'${(0, utils_1.winPath)(path)}')),`
-            : `'${key}': () => import(/* webpackChunkName: "${key.replace(/[\/-]/g, '_')}" */'${(0, utils_1.winPath)(path)}'),`;
+            ? `'${key}': React.lazy(() => import(/* webpackChunkName: "${webpackChunkName}" */'${(0, utils_1.winPath)(path)}')),`
+            : `'${key}': () => import(/* webpackChunkName: "${webpackChunkName}" */'${(0, utils_1.winPath)(path)}'),`;
     })
         .join('\n');
     return `{\n${imports}\n}`;
 }
 exports.getRouteComponents = getRouteComponents;
+function lastSlash(str) {
+    return str[str.length - 1] === '/' ? str : `${str}/`;
+}
+/**
+ *
+ * transform component into webpack chunkName
+ * @export
+ * @param {string} component component path
+ * @param {string} [cwd] current root path
+ * @return {*}  {string}
+ */
+function componentToChunkName(component, cwd) {
+    return typeof component === 'string'
+        ? component
+            .replace(new RegExp(`^${utils_1.lodash.escapeRegExp(lastSlash((0, utils_1.winPath)(cwd || '/')))}`), '')
+            .replace(/^.(\/|\\)/, '')
+            .replace(/(\/|\\)/g, '__')
+            .replace(/\.jsx?$/, '')
+            .replace(/\.tsx?$/, '')
+            .replace(/\.vue?$/, '')
+            .replace(/^src__/, '')
+            .replace(/\.\.__/g, '')
+            // 约定式路由的 [ 会导致 webpack 的 code splitting 失败
+            // ref: https://github.com/umijs/umi/issues/4155
+            .replace(/[\[\]]/g, '')
+            // 插件层的文件也可能是路由组件，比如 plugin-layout 插件
+            .replace(/^.umi-production__/, 't__')
+            .replace(/^pages__/, 'p__')
+        : '';
+}
+exports.componentToChunkName = componentToChunkName;

package/dist/index.js

@@ -28,6 +28,7 @@ exports.default = () => {
             require.resolve('./features/vite/vite'),
             require.resolve('./features/apiRoute/apiRoute'),
             require.resolve('./features/monorepo/redirect'),
+            require.resolve('./features/clickToComponent/clickToComponent'),
             // commands
             require.resolve('./commands/build'),
             require.resolve('./commands/config/config'),

package/dist/libs/folderCache/AutoUpdateFolderCache.d.ts

@@ -0,0 +1,32 @@
+declare type AbsPath = string;
+declare type FileContent = string;
+declare type FileContentCache = Record<AbsPath, FileContent>;
+export declare type FileChangeEvent = {
+    event: 'unlink' | 'change' | 'add';
+    path: string;
+};
+export declare class AutoUpdateFolderCache {
+    fileContentCache: FileContentCache;
+    private watcher;
+    private readonly readyPromise;
+    private readonly cwd;
+    pendingChanges: FileChangeEvent[];
+    private readonly debouchedHandleChanges;
+    private readonly onCacheUpdated;
+    private readonly filesLoader;
+    constructor(opts: {
+        cwd: string;
+        exts: string[];
+        onCacheUpdate: (cache: FileContentCache, events: FileChangeEvent[]) => void;
+        debouncedTimeout?: number;
+        ignored: string[];
+        filesLoader?: (files: string[]) => Promise<Record<string, string>>;
+    });
+    unwatch(): Promise<void>;
+    init(): Promise<void>;
+    private watchAll;
+    getFileCache(): FileContentCache;
+    loadFiles(files: string[]): Promise<void>;
+    private _defaultLoader;
+}
+export {};

package/dist/libs/folderCache/AutoUpdateFolderCache.js

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutoUpdateFolderCache = void 0;
+const utils_1 = require("@umijs/utils");
+const fs_1 = require("fs");
+const path_1 = require("path");
+const { watch } = utils_1.chokidar;
+class AutoUpdateFolderCache {
+    constructor(opts) {
+        this.fileContentCache = {};
+        this.pendingChanges = [];
+        console.log('the path ', `./**/*.{${opts.exts.join(',')}}`);
+        this.cwd = opts.cwd;
+        this.onCacheUpdated = opts.onCacheUpdate;
+        this.filesLoader = opts.filesLoader || this._defaultLoader;
+        this.watcher = watch(`./**/*.{${opts.exts.join(',')}}`, {
+            ignored: opts.ignored || [],
+            cwd: opts.cwd,
+            ignorePermissionErrors: true,
+            ignoreInitial: true,
+        });
+        this.watchAll();
+        this.readyPromise = new Promise((resolve) => {
+            this.watcher.on('ready', () => {
+                resolve();
+            });
+        });
+        this.debouchedHandleChanges = utils_1.lodash.debounce(async () => {
+            const modifiedFiles = [];
+            const events = this.pendingChanges.slice();
+            while (this.pendingChanges.length > 0) {
+                const c = this.pendingChanges.pop();
+                switch (c.event) {
+                    case 'unlink':
+                        delete this.fileContentCache[c.path];
+                        break;
+                    case 'change':
+                    case 'add':
+                        modifiedFiles.push(c.path);
+                        break;
+                    default:
+                        ((_n) => { })(c.event);
+                }
+            }
+            await this.loadFiles(modifiedFiles);
+            await this.onCacheUpdated(this.fileContentCache, events);
+        }, opts.debouncedTimeout);
+    }
+    unwatch() {
+        return this.watcher.close();
+    }
+    async init() {
+        await this.readyPromise;
+    }
+    watchAll() {
+        this.watcher.on('all', (eventName, path) => {
+            switch (eventName) {
+                case 'change':
+                    this.pendingChanges.push({
+                        event: 'change',
+                        path: (0, path_1.join)(this.cwd, path),
+                    });
+                    this.debouchedHandleChanges();
+                    break;
+                case 'add':
+                    this.pendingChanges.push({
+                        event: 'add',
+                        path: (0, path_1.join)(this.cwd, path),
+                    });
+                    this.debouchedHandleChanges();
+                    break;
+                case 'unlink':
+                    this.pendingChanges.push({
+                        event: 'unlink',
+                        path: (0, path_1.join)(this.cwd, path),
+                    });
+                    this.debouchedHandleChanges();
+                    break;
+                default:
+                // ignore all others;
+            }
+        });
+    }
+    getFileCache() {
+        return this.fileContentCache;
+    }
+    async loadFiles(files) {
+        const loaded = await this.filesLoader(files);
+        for (const f of Object.keys(loaded)) {
+            this.fileContentCache[f] = loaded[f];
+        }
+    }
+    async _defaultLoader(files) {
+        const loaded = {};
+        for (let file of files) {
+            try {
+                loaded[file] = (0, fs_1.readFileSync)(file, 'utf-8');
+            }
+            catch (e) {
+                utils_1.logger.error('[fileCache] load file', (0, path_1.relative)(this.cwd, file), 'failed ', e);
+            }
+        }
+        return loaded;
+    }
+}
+exports.AutoUpdateFolderCache = AutoUpdateFolderCache;

package/dist/libs/folderCache/AutoUpdateSourceCodeCache.d.ts

@@ -0,0 +1,27 @@
+import { ImportSpecifier } from '@umijs/bundler-utils/compiled/es-module-lexer';
+import { AutoUpdateFolderCache, FileChangeEvent } from './AutoUpdateFolderCache';
+export declare type MergedCodeInfo = {
+    code: string;
+    imports: readonly ImportSpecifier[];
+    events: FileChangeEvent[];
+};
+export declare type Listener = (info: MergedCodeInfo) => void;
+export declare class AutoUpdateSrcCodeCache {
+    private readonly srcPath;
+    private readonly cachePath;
+    folderCache: AutoUpdateFolderCache;
+    private listeners;
+    constructor(opts: {
+        cwd: string;
+        cachePath: string;
+    });
+    init(): Promise<void>;
+    private initFileList;
+    batchProcess(files: string[]): Promise<void>;
+    getMergedCode(): {
+        code: string;
+        imports: readonly ImportSpecifier[];
+    };
+    register(l: Listener): () => void;
+    unwatch(): Promise<void>;
+}

package/dist/libs/folderCache/AutoUpdateSourceCodeCache.js

@@ -0,0 +1,124 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutoUpdateSrcCodeCache = 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 utils_1 = require("@umijs/utils");
+// @ts-ignore
+const fast_glob_1 = __importDefault(require("fast-glob"));
+const fs_1 = require("fs");
+const path_1 = require("path");
+const AutoUpdateFolderCache_1 = require("./AutoUpdateFolderCache");
+class AutoUpdateSrcCodeCache {
+    constructor(opts) {
+        this.listeners = [];
+        this.srcPath = opts.cwd;
+        this.cachePath = opts.cachePath;
+        this.folderCache = new AutoUpdateFolderCache_1.AutoUpdateFolderCache({
+            cwd: this.srcPath,
+            exts: ['ts', 'js', 'jsx', 'tsx'],
+            ignored: [
+                '**/*.d.ts',
+                '**/*.test.{js,ts,jsx,tsx}',
+                // fixme respect to environment
+                '**/.umi-production/**',
+                '**/node_modules/**',
+                '**/.git/**',
+            ],
+            debouncedTimeout: 500,
+            filesLoader: async (files) => {
+                const loaded = {};
+                await this.batchProcess(files);
+                for (const f of files) {
+                    let newFile = (0, path_1.join)(this.cachePath, (0, path_1.relative)(this.srcPath, f));
+                    // fixme ensure the last one
+                    newFile = newFile.replace((0, path_1.extname)(newFile), '.js');
+                    loaded[f] = (0, fs_1.readFileSync)(newFile, 'utf-8');
+                }
+                return loaded;
+            },
+            onCacheUpdate: (_cache, events) => {
+                const merged = this.getMergedCode();
+                const info = { ...merged, events };
+                this.listeners.forEach((l) => l(info));
+            },
+        });
+    }
+    async init() {
+        const [files] = await Promise.all([this.initFileList(), es_module_lexer_1.init]);
+        await this.folderCache.loadFiles(files);
+    }
+    async initFileList() {
+        const start = Date.now();
+        const files = await (0, fast_glob_1.default)((0, path_1.join)(this.srcPath, '**', '*.{ts,js,jsx,tsx}'), {
+            dot: true,
+            ignore: [
+                '**/*.d.ts',
+                '**/*.test.{js,ts,jsx,tsx}',
+                // fixme respect to environment
+                '**/.umi-production/**',
+                '**/node_modules/**',
+                '**/.git/**',
+            ],
+        });
+        utils_1.logger.debug('[MFSU][eager] fast-glob costs', Date.now() - start);
+        return files;
+    }
+    async batchProcess(files) {
+        var _a, _b, _c, _d;
+        try {
+            await (0, esbuild_1.build)({
+                entryPoints: files,
+                bundle: false,
+                outdir: this.cachePath,
+                outbase: this.srcPath,
+                loader: {
+                    // in case some js using some feature, eg: decorator
+                    '.jsx': 'tsx',
+                },
+                logLevel: 'silent',
+            });
+        }
+        catch (e) {
+            // error ignored due to user have to update code to fix then trigger another batchProcess;
+            // @ts-ignore
+            if (((_a = e.errors) === null || _a === void 0 ? void 0 : _a.length) || ((_b = e.warnings) === null || _b === void 0 ? void 0 : _b.length)) {
+                utils_1.logger.warn('transpile code with esbuild got ', 
+                // @ts-ignore
+                ((_c = e.errors) === null || _c === void 0 ? void 0 : _c.lenght) || 0, 'errors,', 
+                // @ts-ignore
+                ((_d = e.warnings) === null || _d === void 0 ? void 0 : _d.length) || 0, 'warnings');
+                utils_1.logger.debug('esbuild transpile code with error', e);
+            }
+            else {
+                utils_1.logger.warn('transpile code with esbuild error', e);
+            }
+        }
+    }
+    getMergedCode() {
+        const fileContentCache = this.folderCache.getFileCache();
+        const code = Object.values(fileContentCache).join('\n');
+        const [imports] = (0, es_module_lexer_1.parse)(code);
+        const merged = {
+            code,
+            imports,
+        };
+        return merged;
+    }
+    register(l) {
+        if (this.listeners.indexOf(l) < 0) {
+            this.listeners.push(l);
+        }
+        return () => {
+            const i = this.listeners.indexOf(l);
+            this.listeners.splice(i, 1);
+        };
+    }
+    unwatch() {
+        return this.folderCache.unwatch();
+    }
+}
+exports.AutoUpdateSrcCodeCache = AutoUpdateSrcCodeCache;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umijs/preset-umi",
-  "version": "4.0.3",
+  "version": "4.0.6",
   "description": "@umijs/preset-umi",
   "homepage": "https://github.com/umijs/umi/tree/master/packages/preset-umi#readme",
   "bugs": "https://github.com/umijs/umi/issues",
@@ -26,18 +26,20 @@
   },
   "dependencies": {
     "@types/multer": "1.4.7",
-    "@umijs/ast": "4.0.3",
-    "@umijs/babel-preset-umi": "4.0.3",
-    "@umijs/bundler-utils": "4.0.3",
-    "@umijs/bundler-vite": "4.0.3",
-    "@umijs/bundler-webpack": "4.0.3",
-    "@umijs/core": "4.0.3",
-    "@umijs/renderer-react": "4.0.3",
-    "@umijs/server": "4.0.3",
-    "@umijs/utils": "4.0.3",
+    "@umijs/ast": "4.0.6",
+    "@umijs/babel-preset-umi": "4.0.6",
+    "@umijs/bundler-utils": "4.0.6",
+    "@umijs/bundler-vite": "4.0.6",
+    "@umijs/bundler-webpack": "4.0.6",
+    "@umijs/core": "4.0.6",
+    "@umijs/renderer-react": "4.0.6",
+    "@umijs/server": "4.0.6",
+    "@umijs/utils": "4.0.6",
+    "click-to-react-component": "^1.0.8",
     "core-js": "3.22.4",
     "current-script-polyfill": "1.0.0",
     "enhanced-resolve": "5.9.3",
+    "fast-glob": "^3.2.11",
     "magic-string": "0.26.2",
     "path-to-regexp": "1.7.0",
     "react": "18.1.0",