@umijs/plugins 4.0.6 → 4.0.9

package/dist/layout.js

@@ -1,120 +1,104 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-const allIcons = __importStar(require("@ant-design/icons"));
-const fs_1 = require("fs");
-const path_1 = require("path");
-const plugin_utils_1 = require("umi/plugin-utils");
-const withTmpPath_1 = require("./utils/withTmpPath");
-exports.default = (api) => {
-    api.describe({
-        key: 'layout',
-        config: {
-            schema(joi) {
-                return joi.object();
-            },
-            onChange: api.ConfigChangeType.regenerateTmpFiles,
-        },
-        enableBy: api.EnableBy.config,
-    });
-    /**
-     * 优先去找 '@alipay/tech-ui'，保证稳定性
-     */
-    const depList = ['@alipay/tech-ui', '@ant-design/pro-layout'];
-    const pkgHasDep = depList.find((dep) => {
-        var _a, _b;
-        const { pkg } = api;
-        if (((_a = pkg.dependencies) === null || _a === void 0 ? void 0 : _a[dep]) || ((_b = pkg.devDependencies) === null || _b === void 0 ? void 0 : _b[dep])) {
-            return true;
-        }
-        return false;
-    });
-    const getPkgPath = () => {
-        // 如果 layout 和 techui 至少有一个在，找到他们的地址
-        if (pkgHasDep &&
-            (0, fs_1.existsSync)((0, path_1.join)(api.cwd, 'node_modules', pkgHasDep, 'package.json'))) {
-            return (0, path_1.join)(api.cwd, 'node_modules', pkgHasDep);
-        }
-        const cwd = process.cwd();
-        // support APP_ROOT
-        if (pkgHasDep &&
-            api.cwd !== cwd &&
-            (0, fs_1.existsSync)((0, path_1.join)(cwd, 'node_modules', pkgHasDep, 'package.json'))) {
-            return (0, path_1.join)(cwd, 'node_modules', pkgHasDep);
-        }
-        // 如果项目中没有去找插件以来的
-        return (0, path_1.dirname)(require.resolve('@ant-design/pro-layout/package.json'));
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// layout.ts
+var layout_exports = {};
+__export(layout_exports, {
+  default: () => layout_default
+});
+module.exports = __toCommonJS(layout_exports);
+var allIcons = __toESM(require("@ant-design/icons"));
+var import_fs = require("fs");
+var import_path = require("path");
+var import_plugin_utils = require("umi/plugin-utils");
+var import_withTmpPath = require("./utils/withTmpPath");
+var layout_default = (api) => {
+  api.describe({
+    key: "layout",
+    config: {
+      schema(Joi) {
+        return Joi.alternatives().try(Joi.object(), Joi.boolean().invalid(true));
+      },
+      onChange: api.ConfigChangeType.regenerateTmpFiles
+    },
+    enableBy: api.EnableBy.config
+  });
+  const depList = ["@alipay/tech-ui", "@ant-design/pro-layout"];
+  const pkgHasDep = depList.find((dep) => {
+    var _a, _b;
+    const { pkg } = api;
+    if (((_a = pkg.dependencies) == null ? void 0 : _a[dep]) || ((_b = pkg.devDependencies) == null ? void 0 : _b[dep])) {
+      return true;
+    }
+    return false;
+  });
+  const getPkgPath = () => {
+    if (pkgHasDep && (0, import_fs.existsSync)((0, import_path.join)(api.cwd, "node_modules", pkgHasDep, "package.json"))) {
+      return (0, import_path.join)(api.cwd, "node_modules", pkgHasDep);
+    }
+    const cwd = process.cwd();
+    if (pkgHasDep && api.cwd !== cwd && (0, import_fs.existsSync)((0, import_path.join)(cwd, "node_modules", pkgHasDep, "package.json"))) {
+      return (0, import_path.join)(cwd, "node_modules", pkgHasDep);
+    }
+    return (0, import_path.dirname)(require.resolve("@ant-design/pro-layout/package.json"));
+  };
+  const pkgPath = (0, import_plugin_utils.winPath)(getPkgPath());
+  api.modifyAppData((memo) => {
+    const version = require(`${pkgPath}/package.json`).version;
+    memo.pluginLayout = {
+      pkgPath,
+      version
     };
-    const pkgPath = (0, plugin_utils_1.winPath)(getPkgPath());
-    api.modifyAppData((memo) => {
-        const version = require(`${pkgPath}/package.json`).version;
-        memo.pluginLayout = {
-            pkgPath,
-            version,
-        };
-        return memo;
-    });
-    api.modifyConfig((memo) => {
-        // 只在没有自行依赖 @ant-design/pro-layout 或 @alipay/tech-ui 时
-        // 才使用插件中提供的 @ant-design/pro-layout
-        if (!pkgHasDep) {
-            memo.alias['@ant-design/pro-layout'] = pkgPath;
-        }
-        return memo;
-    });
-    api.onGenerateFiles(() => {
-        const hasInitialStatePlugin = api.config.initialState;
-        // Layout.tsx
-        api.writeTmpFile({
-            path: 'Layout.tsx',
-            content: `
+    return memo;
+  });
+  api.modifyConfig((memo) => {
+    if (!pkgHasDep) {
+      memo.alias["@ant-design/pro-layout"] = pkgPath;
+    }
+    return memo;
+  });
+  api.onGenerateFiles(() => {
+    const hasInitialStatePlugin = api.config.initialState;
+    api.writeTmpFile({
+      path: "Layout.tsx",
+      content: `
 import { Link, useLocation, useNavigate, Outlet, useAppData, useRouteData, matchRoutes } from 'umi';
 import type { IRoute } from 'umi';
 import React, { useMemo } from 'react';
 import {
   ProLayout,
-} from "${pkgPath || '@ant-design/pro-layout'}";
+} from "${pkgPath || "@ant-design/pro-layout"}";
 import './Layout.less';
 import Logo from './Logo';
 import Exception from './Exception';
 import { getRightRenderContent } from './rightRender';
-${hasInitialStatePlugin
-                ? `import { useModel } from '@@/plugin-model';`
-                : 'const useModel = null;'}
-${api.config.access
-                ? `
+${hasInitialStatePlugin ? `import { useModel } from '@@/plugin-model';` : "const useModel = null;"}
+${api.config.access ? `
 import { useAccessMarkedRoutes } from '@@/plugin-access';
-   `.trim()
-                : 'const useAccessMarkedRoutes = (r) => r;'}
-${api.config.locale
-                ? `
+   `.trim() : "const useAccessMarkedRoutes = (r) => r;"}
+${api.config.locale ? `
 import { useIntl } from '@@/plugin-locale';
-    `.trim()
-                : ''}
+    `.trim() : ""}
 
-// 过滤出需要显示的路由, 这里的filterFn 指 不希望显示的层级
+// \u8FC7\u6EE4\u51FA\u9700\u8981\u663E\u793A\u7684\u8DEF\u7531, \u8FD9\u91CC\u7684filterFn \u6307 \u4E0D\u5E0C\u671B\u663E\u793A\u7684\u5C42\u7EA7
 const filterRoutes = (routes: IRoute[], filterFn: (route: IRoute) => boolean) => {
   if (routes.length === 0) {
     return []
@@ -137,6 +121,26 @@ const filterRoutes = (routes: IRoute[], filterFn: (route: IRoute) => boolean) =>
   return newRoutes;
 }
 
+// \u683C\u5F0F\u5316\u8DEF\u7531 \u5904\u7406\u56E0 wrapper \u5BFC\u81F4\u7684 \u83DC\u5355 path \u4E0D\u4E00\u81F4
+const mapRoutes = (routes: IRoute[]) => {
+  if (routes.length === 0) {
+    return []
+  }
+  return routes.map(route => {
+    // \u9700\u8981 copy \u4E00\u4EFD, \u5426\u5219\u4F1A\u6C61\u67D3\u539F\u59CB\u6570\u636E
+    const newRoute = {...route}
+    if (route.originPath) {
+      newRoute.path = route.originPath
+    }
+
+    if (Array.isArray(route.routes)) {
+      newRoute.routes = mapRoutes(route.routes);
+    }
+
+    return newRoute
+  })
+}
+
 export default (props: any) => {
   const location = useLocation();
   const navigate = useNavigate();
@@ -148,11 +152,9 @@ export default (props: any) => {
   };
   const { initialState, loading, setInitialState } = initialInfo;
   const userConfig = ${JSON.stringify(api.config.layout, null, 2)};
-${api.config.locale
-                ? `
+${api.config.locale ? `
 const { formatMessage } = useIntl();
-`.trim()
-                : 'const formatMessage = undefined;'}
+`.trim() : "const formatMessage = undefined;"}
   const runtimeConfig = pluginManager.applyPlugins({
     key: 'layout',
     type: 'modify',
@@ -163,9 +165,9 @@ const { formatMessage } = useIntl();
 
   const matchedRoute = useMemo(() => matchRoutes(clientRoutes, location.pathname).pop()?.route, [location.pathname]);
   const newRoutes = filterRoutes(clientRoutes.filter(route => route.id === 'ant-design-pro-layout'), (route) => {
-    return !!route.isLayout && route.id !== 'ant-design-pro-layout';
+    return (!!route.isLayout && route.id !== 'ant-design-pro-layout') || !!route.isWrapper;
   })
-  const [route] = useAccessMarkedRoutes(newRoutes);
+  const [route] = useAccessMarkedRoutes(mapRoutes(newRoutes));
 
   return (
     <ProLayout
@@ -236,72 +238,63 @@ const { formatMessage } = useIntl();
     </ProLayout>
   );
 }
-      `,
-        });
-        api.writeTmpFile({
-            path: 'index.ts',
-            content: `export type TempType = string`,
-        });
-        // 写入类型, RunTimeLayoutConfig 是 app.tsx 中 layout 配置的类型
-        // 对于动态 layout 配置很有用
-        api.writeTmpFile({
-            path: 'types.d.ts',
-            content: `
-    import type { ProLayoutProps } from "${pkgPath || '@ant-design/pro-layout'}";
-    ${hasInitialStatePlugin
-                ? `import type InitialStateType from '@@/plugin-initialState/@@initialState';
+      `
+    });
+    api.writeTmpFile({
+      path: "index.ts",
+      content: `export type TempType = string`
+    });
+    api.writeTmpFile({
+      path: "types.d.ts",
+      content: `
+    import type { ProLayoutProps } from "${pkgPath || "@ant-design/pro-layout"}";
+    ${hasInitialStatePlugin ? `import type InitialStateType from '@@/plugin-initialState/@@initialState';
            type InitDataType = ReturnType<typeof InitialStateType>;
-        `
-                : 'type InitDataType = any;'}
+        ` : "type InitDataType = any;"}
 
     export type RunTimeLayoutConfig = (
       initData: InitDataType,
     ) => ProLayoutProps & {
       childrenRender?: (dom: JSX.Element, props: ProLayoutProps) => React.ReactNode,
-      unAccessible?: JSX.Element,
-      noFound?: JSX.Element,
+      noAccessible?: JSX.Element,
+      notFound?: JSX.Element,
     };
-    `,
-        });
-        const iconsMap = Object.keys(api.appData.routes).reduce((memo, id) => {
-            const { icon } = api.appData.routes[id];
-            if (icon) {
-                const upperIcon = plugin_utils_1.lodash.upperFirst(plugin_utils_1.lodash.camelCase(icon));
-                // @ts-ignore
-                if (allIcons[upperIcon]) {
-                    memo[upperIcon] = true;
-                }
-                // @ts-ignore
-                if (allIcons[`${upperIcon}Outlined`]) {
-                    memo[`${upperIcon}Outlined`] = true;
-                }
-            }
-            return memo;
-        }, {});
-        const icons = Object.keys(iconsMap);
-        const antIconsPath = (0, plugin_utils_1.winPath)((0, path_1.dirname)(require.resolve('@ant-design/icons/package')));
-        api.writeTmpFile({
-            path: 'icons.tsx',
-            content: `
-${icons
-                .map((icon) => {
-                return `import ${icon} from '${antIconsPath}/es/icons/${icon}';`;
-            })
-                .join('\n')}
-export default { ${icons.join(', ')} };
-      `,
-        });
-        // runtime.tsx
-        api.writeTmpFile({
-            path: 'runtime.tsx',
-            content: `
+    `
+    });
+    const iconsMap = Object.keys(api.appData.routes).reduce((memo, id) => {
+      const { icon } = api.appData.routes[id];
+      if (icon) {
+        const upperIcon = import_plugin_utils.lodash.upperFirst(import_plugin_utils.lodash.camelCase(icon));
+        if (allIcons[upperIcon]) {
+          memo[upperIcon] = true;
+        }
+        if (allIcons[`${upperIcon}Outlined`]) {
+          memo[`${upperIcon}Outlined`] = true;
+        }
+      }
+      return memo;
+    }, {});
+    const icons = Object.keys(iconsMap);
+    const antIconsPath = (0, import_plugin_utils.winPath)((0, import_path.dirname)(require.resolve("@ant-design/icons/package")));
+    api.writeTmpFile({
+      path: "icons.tsx",
+      content: `
+${icons.map((icon) => {
+        return `import ${icon} from '${antIconsPath}/es/icons/${icon}';`;
+      }).join("\n")}
+export default { ${icons.join(", ")} };
+      `
+    });
+    api.writeTmpFile({
+      path: "runtime.tsx",
+      content: `
 import React from 'react';
 import icons from './icons';
 
 function formatIcon(name: string) {
   return name
     .replace(name[0], name[0].toUpperCase())
-    .replace(/-(\w)/g, function(all, letter) {
+    .replace(/-(w)/g, function(all, letter) {
       return letter.toUpperCase();
     });
 }
@@ -317,9 +310,9 @@ export function patchRoutes({ routes }) {
     }
   });
 }
-      `,
-        });
-        const rightRenderContent = `
+      `
+    });
+    const rightRenderContent = `
 import React from 'react';
 import { Avatar, Dropdown, Menu, Spin } from 'antd';
 import { LogoutOutlined } from '@ant-design/icons';
@@ -350,7 +343,7 @@ export function getRightRenderContent (opts: {
         }
       >
         <LogoutOutlined />
-        退出登录
+        \u9000\u51FA\u767B\u5F55
       </Menu.Item>
     </Menu>
   );
@@ -394,22 +387,20 @@ export function getRightRenderContent (opts: {
   );
 }
       `;
-        const Locale = api.isPluginEnable('locale');
-        // rightRender.tsx
-        api.writeTmpFile({
-            path: 'rightRender.tsx',
-            content: plugin_utils_1.Mustache.render(rightRenderContent, {
-                Locale,
-            }),
-        });
-        // Layout.less
-        api.writeTmpFile({
-            path: 'Layout.less',
-            content: `
+    const Locale = api.isPluginEnable("locale");
+    api.writeTmpFile({
+      path: "rightRender.tsx",
+      content: import_plugin_utils.Mustache.render(rightRenderContent, {
+        Locale
+      })
+    });
+    api.writeTmpFile({
+      path: "Layout.less",
+      content: `
 @import '~antd/es/style/themes/default.less';
 @pro-header-hover-bg: rgba(0, 0, 0, 0.025);
 @media screen and (max-width: @screen-xs) {
-  // 在小屏幕的时候可以有更好的体验
+  // \u5728\u5C0F\u5C4F\u5E55\u7684\u65F6\u5019\u53EF\u4EE5\u6709\u66F4\u597D\u7684\u4F53\u9A8C
   .umi-plugin-layout-container {
     width: 100% !important;
   }
@@ -459,12 +450,11 @@ export function getRightRenderContent (opts: {
 .umi-plugin-layout-name {
   margin-left: 8px;
 }
-      `,
-        });
-        // Logo.tsx
-        api.writeTmpFile({
-            path: 'Logo.tsx',
-            content: `
+      `
+    });
+    api.writeTmpFile({
+      path: "Logo.tsx",
+      content: `
 import React from 'react';
 
 const LogoIcon: React.FC = () => {
@@ -556,11 +546,11 @@ const LogoIcon: React.FC = () => {
 };
 
 export default LogoIcon;
-      `,
-        });
-        api.writeTmpFile({
-            path: 'Exception.tsx',
-            content: `
+      `
+    });
+    api.writeTmpFile({
+      path: "Exception.tsx",
+      content: `
 import React from 'react';
 import { history, type IRoute } from 'umi';
 import { Result, Button } from 'antd';
@@ -580,10 +570,10 @@ const Exception: React.FC<{
     <Result
       status={props.route ? '403' : '404'}
       title={props.route ? '403' : '404'}
-      subTitle={props.route ? '抱歉，你无权访问该页面' : '抱歉，你访问的页面不存在'}
+      subTitle={props.route ? '\u62B1\u6B49\uFF0C\u4F60\u65E0\u6743\u8BBF\u95EE\u8BE5\u9875\u9762' : '\u62B1\u6B49\uFF0C\u4F60\u8BBF\u95EE\u7684\u9875\u9762\u4E0D\u5B58\u5728'}
       extra={
         <Button type="primary" onClick={() => history.push('/')}>
-          返回首页
+          \u8FD4\u56DE\u9996\u9875
         </Button>
       }
     />
@@ -593,22 +583,24 @@ const Exception: React.FC<{
 );
 
 export default Exception;
-`,
-        });
-    });
-    api.addLayouts(() => {
-        return [
-            {
-                id: 'ant-design-pro-layout',
-                file: (0, withTmpPath_1.withTmpPath)({ api, path: 'Layout.tsx' }),
-                test: (route) => {
-                    return route.layout !== false;
-                },
-            },
-        ];
-    });
-    api.addRuntimePluginKey(() => ['layout']);
-    api.addRuntimePlugin(() => {
-        return [(0, withTmpPath_1.withTmpPath)({ api, path: 'runtime.tsx' })];
+`
     });
+  });
+  api.addLayouts(() => {
+    return [
+      {
+        id: "ant-design-pro-layout",
+        file: (0, import_withTmpPath.withTmpPath)({ api, path: "Layout.tsx" }),
+        test: (route) => {
+          return route.layout !== false;
+        }
+      }
+    ];
+  });
+  api.addRuntimePluginKey(() => ["layout"]);
+  api.addRuntimePlugin(() => {
+    return [(0, import_withTmpPath.withTmpPath)({ api, path: "runtime.tsx" })];
+  });
 };
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});