@umijs/preset-umi 4.0.4 → 4.0.7

package/dist/commands/dev/dev.js

@@ -235,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

@@ -78,6 +78,17 @@ umi preview --port [port]
             }));
             // history fallback
             app.use(require('@umijs/bundler-webpack/compiled/connect-history-api-fallback')());
+            // 如果是 browser，并且配置了非 / base，访问 / 时 /index.html redirect 到 base 路径
+            app.use((_req, res, next) => {
+                var _a;
+                const historyType = ((_a = api.config.history) === null || _a === void 0 ? void 0 : _a.type) || 'browser';
+                if (historyType === 'browser' &&
+                    api.config.base !== '/' &&
+                    (_req.path === '/' || _req.path === '/index.html')) {
+                    return res.redirect(api.config.base);
+                }
+                next();
+            });
             // https 复用用户配置
             const server = api.userConfig.https
                 ? await (0, bundler_utils_1.createHttpsServer)(app, api.userConfig.https)
@@ -92,7 +103,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/apiRoute/request.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="node" />
+/// <reference types="node" />
 import type { IncomingMessage } from 'http';
 import type { IRoute } from '../../types';
 declare class UmiApiRequest {
@@ -22,4 +23,10 @@ declare class UmiApiRequest {
     get pathName(): string | undefined;
     readBody(): Promise<void>;
 }
+export declare function parseMultipart(body: Buffer, boundary: string): {
+    [key: string]: any;
+};
+export declare function parseUrlEncoded(body: string): {
+    [key: string]: any;
+};
 export default UmiApiRequest;

package/dist/features/apiRoute/request.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseUrlEncoded = exports.parseMultipart = void 0;
 const utils_1 = require("./utils");
 class UmiApiRequest {
     constructor(req, apiRoutes) {
@@ -61,21 +62,33 @@ class UmiApiRequest {
             return Promise.resolve();
         }
         return new Promise((resolve, reject) => {
-            let body = '';
+            let body = [];
             this._req.on('data', (chunk) => {
-                body += chunk;
+                body.push(chunk);
             });
             this._req.on('end', () => {
-                // TODO: handle other content types
-                switch (this._req.headers['content-type']) {
+                var _a, _b;
+                const bodyBuffer = Buffer.concat(body);
+                switch ((_a = this._req.headers['content-type']) === null || _a === void 0 ? void 0 : _a.split(';')[0]) {
                     case 'application/json':
                         try {
-                            this._body = JSON.parse(body);
+                            this._body = JSON.parse(bodyBuffer.toString());
                         }
                         catch (e) {
                             this._body = body;
                         }
                         break;
+                    case 'multipart/form-data':
+                        const boundary = (_b = this.headers['content-type']) === null || _b === void 0 ? void 0 : _b.split('boundary=')[1];
+                        if (!boundary) {
+                            this._body = body;
+                            break;
+                        }
+                        this._body = parseMultipart(bodyBuffer, boundary);
+                        break;
+                    case 'application/x-www-form-urlencoded':
+                        this._body = parseUrlEncoded(bodyBuffer.toString());
+                        break;
                     default:
                         this._body = body;
                         break;
@@ -86,4 +99,46 @@ class UmiApiRequest {
         });
     }
 }
+function parseMultipart(body, boundary) {
+    const hexBoundary = Buffer.from(`--${boundary}`, 'utf-8').toString('hex');
+    return body
+        .toString('hex')
+        .split(hexBoundary)
+        .reduce((acc, cur) => {
+        var _a, _b;
+        const [hexMeta, hexValue] = cur.split(Buffer.from('\r\n\r\n').toString('hex'));
+        const meta = Buffer.from(hexMeta, 'hex').toString('utf-8');
+        const name = (_a = meta.split('name="')[1]) === null || _a === void 0 ? void 0 : _a.split('"')[0];
+        // if this part doesn't have name, skip it
+        if (!name)
+            return acc;
+        // if there is filename, this field is file, save as buffer
+        const fileName = (_b = meta.split('filename="')[1]) === null || _b === void 0 ? void 0 : _b.split('"')[0];
+        if (fileName) {
+            const fileBufferBeforeTrim = Buffer.from(hexValue, 'hex');
+            const fileBuffer = fileBufferBeforeTrim.slice(0, fileBufferBeforeTrim.byteLength - 2);
+            const contentType = meta.split('Content-Type: ')[1];
+            acc[name] = {
+                fileName,
+                data: fileBuffer,
+                contentType,
+            };
+            return acc;
+        }
+        // if there is no filename, this field is string, save as string
+        const valueBufferBeforeTrim = Buffer.from(hexValue, 'hex');
+        const valueBuffer = valueBufferBeforeTrim.slice(0, valueBufferBeforeTrim.byteLength - 2);
+        acc[name] = valueBuffer.toString('utf-8');
+        return acc;
+    }, {});
+}
+exports.parseMultipart = parseMultipart;
+function parseUrlEncoded(body) {
+    return body.split('&').reduce((acc, cur) => {
+        const [key, value] = cur.split('=');
+        acc[key] = decodeURI(value);
+        return acc;
+    }, {});
+}
+exports.parseUrlEncoded = parseUrlEncoded;
 exports.default = UmiApiRequest;

package/dist/features/apiRoute/response.d.ts

@@ -6,6 +6,7 @@ declare class UmiApiResponse {
     status(statusCode: number): this;
     header(key: string, value: string): this;
     setCookie(key: string, value: string): this;
+    end(data: any): this;
     text(data: string): this;
     html(data: string): this;
     json(data: any): this;

package/dist/features/apiRoute/response.js

@@ -16,6 +16,10 @@ class UmiApiResponse {
         this._res.setHeader('Set-Cookie', `${key}=${value}; path=/`);
         return this;
     }
+    end(data) {
+        this._res.end(data);
+        return this;
+    }
     text(data) {
         this._res.setHeader('Content-Type', 'text/plain; charset=utf-8');
         this._res.end(data);

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/mock/getMockData.js

@@ -29,6 +29,7 @@ function getMockData(opts) {
         const mockFile = `${opts.cwd}/${file}`;
         let m;
         try {
+            delete require.cache[mockFile];
             m = require(mockFile);
         }
         catch (e) {
@@ -52,9 +53,6 @@ function getMockData(opts) {
         }
         return memo;
     }, {});
-    for (const file of utils_1.register.getFiles()) {
-        delete require.cache[file];
-    }
     utils_1.register.restore();
     return ret;
 }

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/features/tmpFiles/tmpFiles.js

@@ -128,6 +128,14 @@ declare module '*.gif' {
   export default src
 }
 declare module '*.svg' {
+  ${api.config.svgr
+                ? `
+  import * as React from 'react';
+  export const ReactComponent: React.FunctionComponent<React.SVGProps<
+  SVGSVGElement
+  > & { title?: string }>;
+`.trimStart()
+                : ''}
   const src: string
   export default src
 }

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umijs/preset-umi",
-  "version": "4.0.4",
+  "version": "4.0.7",
   "description": "@umijs/preset-umi",
   "homepage": "https://github.com/umijs/umi/tree/master/packages/preset-umi#readme",
   "bugs": "https://github.com/umijs/umi/issues",
@@ -26,15 +26,16 @@
   },
   "dependencies": {
     "@types/multer": "1.4.7",
-    "@umijs/ast": "4.0.4",
-    "@umijs/babel-preset-umi": "4.0.4",
-    "@umijs/bundler-utils": "4.0.4",
-    "@umijs/bundler-vite": "4.0.4",
-    "@umijs/bundler-webpack": "4.0.4",
-    "@umijs/core": "4.0.4",
-    "@umijs/renderer-react": "4.0.4",
-    "@umijs/server": "4.0.4",
-    "@umijs/utils": "4.0.4",
+    "@umijs/ast": "4.0.7",
+    "@umijs/babel-preset-umi": "4.0.7",
+    "@umijs/bundler-utils": "4.0.7",
+    "@umijs/bundler-vite": "4.0.7",
+    "@umijs/bundler-webpack": "4.0.7",
+    "@umijs/core": "4.0.7",
+    "@umijs/renderer-react": "4.0.7",
+    "@umijs/server": "4.0.7",
+    "@umijs/utils": "4.0.7",
+    "click-to-react-component": "^1.0.8",
     "core-js": "3.22.4",
     "current-script-polyfill": "1.0.0",
     "enhanced-resolve": "5.9.3",

package/templates/history.tpl

@@ -7,7 +7,7 @@ export function createHistory(opts: any) {
   if (opts.type === 'hash') {
     h = createHashHistory();
   } else if (opts.type === 'memory') {
-    h = createMemoryHistory();
+    h = createMemoryHistory(opts);
   } else {
     h = createBrowserHistory();
   }

package/templates/umi.tpl

@@ -51,8 +51,9 @@ async function render() {
         publicPath,
         runtimePublicPath,
         history: createHistory({
-          type: '{{{ historyType }}}',
+          type: contextOpts.historyType || '{{{ historyType }}}',
           basename,
+          ...contextOpts.historyOpts,
         }),
         basename,
       };