@umijs/plugins 4.0.0-rc.2 → 4.0.0-rc.20

package/dist/access.js

@@ -1,18 +1,12 @@
 "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 fs_1 = __importDefault(require("fs"));
 const path_1 = require("path");
 const withTmpPath_1 = require("./utils/withTmpPath");
 exports.default = (api) => {
-    // TODO: route access
     api.describe({
         config: {
             schema(joi) {
@@ -21,19 +15,29 @@ exports.default = (api) => {
         },
         enableBy: api.EnableBy.config,
     });
-    api.onGenerateFiles(() => __awaiter(void 0, void 0, void 0, function* () {
+    api.onGenerateFiles(async () => {
+        // allow enable access without access file
+        const hasAccessFile = ['js', 'jsx', 'ts', 'tsx'].some((ext) => fs_1.default.existsSync((0, path_1.join)(api.paths.absSrcPath, `access.${ext}`)));
         // runtime.tsx
         api.writeTmpFile({
             path: 'runtime.tsx',
             content: `
-import React from 'react';
-import accessFactory from '@/access';
+import React from 'react';${hasAccessFile
+                ? `
+import accessFactory from '@/access'
 import { useModel } from '@@/plugin-model';
+`
+                : ''}
 import { AccessContext } from './context';
 
-function Provider(props) {
+function Provider(props) {${hasAccessFile
+                ? `
   const { initialState } = useModel('@@initialState');
   const access = React.useMemo(() => accessFactory(initialState), [initialState]);
+`
+                : `
+  const access = {};
+`}
   return (
     <AccessContext.Provider value={access}>
       { props.children }
@@ -46,16 +50,74 @@ export function accessProvider(container) {
 }
       `,
         });
-        // index.ts
+        // index.tsx
         api.writeTmpFile({
-            path: 'index.ts',
+            path: 'index.tsx',
             content: `
 import React from 'react';
 import { AccessContext } from './context';
+import type { IRoute } from 'umi';
 
 export const useAccess = () => {
   return React.useContext(AccessContext);
 };
+
+export interface AccessProps {
+  accessible: boolean;
+  fallback?: React.ReactNode;
+}
+export const Access: React.FC<AccessProps> = (props) => {
+  if (process.env.NODE_ENV === 'development' && typeof props.accessible !== 'boolean') {
+    throw new Error('[access] the \`accessible\` property on <Access /> should be a boolean');
+  }
+
+  return <>{ props.accessible ? props.children : props.fallback }</>;
+};
+
+export const useAccessMarkedRoutes = (routes: IRoute[]) => {
+  const access = useAccess();
+  const markdedRoutes: IRoute[] = React.useMemo(() => {
+    const process = (route, parentAccessCode) => {
+      const accessCode = route.access || parentAccessCode;
+
+      // set default status
+      route.unaccessible = ${api.config.access.strictMode ? 'true' : 'false'};
+
+      // check access code
+      if (typeof accessCode === 'string') {
+        const detector = access[route.access];
+
+        if (typeof detector === 'function') {
+          route.unaccessible = !detector(route);
+        } else if (typeof detector === 'boolean') {
+          route.unaccessible = !detector;
+        } else if (typeof detector === 'undefined') {
+          route.unaccessible = true;
+        }
+      }
+
+      // check children access code
+      if (route.routes) {
+        const isNoAccessibleChild = !route.routes.reduce((hasAccessibleChild, child) => {
+          process(child, accessCode);
+
+          return hasAccessibleChild || !child.unaccessible;
+        }, false);
+
+        // make sure parent route is unaccessible if all children are unaccessible
+        if (isNoAccessibleChild) {
+          route.unaccessible = true;
+        }
+      }
+
+      return route;
+    }
+
+    return routes.map(route => process(route));
+  }, [routes.length]);
+
+  return markdedRoutes;
+}
       `,
         });
         // context.ts
@@ -66,7 +128,7 @@ import React from 'react';
 export const AccessContext = React.createContext<any>(null);
       `,
         });
-    }));
+    });
     api.addRuntimePlugin(() => {
         return [(0, withTmpPath_1.withTmpPath)({ api, path: 'runtime.tsx' })];
     });

package/dist/antd.js

@@ -5,11 +5,16 @@ const plugin_utils_1 = require("umi/plugin-utils");
 const resolveProjectDep_1 = require("./utils/resolveProjectDep");
 const withTmpPath_1 = require("./utils/withTmpPath");
 exports.default = (api) => {
-    const pkgPath = (0, resolveProjectDep_1.resolveProjectDep)({
-        pkg: api.pkg,
-        cwd: api.cwd,
-        dep: 'antd',
-    }) || (0, path_1.dirname)(require.resolve('antd/package.json'));
+    let pkgPath;
+    try {
+        pkgPath =
+            (0, resolveProjectDep_1.resolveProjectDep)({
+                pkg: api.pkg,
+                cwd: api.cwd,
+                dep: 'antd',
+            }) || (0, path_1.dirname)(require.resolve('antd/package.json'));
+    }
+    catch (e) { }
     api.describe({
         config: {
             schema(Joi) {
@@ -25,9 +30,20 @@ exports.default = (api) => {
                 });
             },
         },
-        enableBy: api.EnableBy.config,
+        enableBy({ userConfig }) {
+            // 由于本插件有 api.modifyConfig 的调用，以及 Umi 框架的限制
+            // 在其他插件中通过 api.modifyDefaultConfig 设置 antd 并不能让 api.modifyConfig 生效
+            // 所以这里通过环境变量来判断是否启用
+            return process.env.UMI_PLUGIN_ANTD_ENABLE || userConfig.antd;
+        },
     });
+    function checkPkgPath() {
+        if (!pkgPath) {
+            throw new Error(`Can't find antd package. Please install antd first.`);
+        }
+    }
     api.modifyAppData((memo) => {
+        checkPkgPath();
         const version = require(`${pkgPath}/package.json`).version;
         memo.antd = {
             pkgPath,
@@ -36,17 +52,32 @@ exports.default = (api) => {
         return memo;
     });
     api.modifyConfig((memo) => {
+        checkPkgPath();
+        const antd = memo.antd || {};
+        // defaultConfig 的取值在 config 之后，所以改用环境变量传默认值
+        if (process.env.UMI_PLUGIN_ANTD_ENABLE) {
+            const { defaultConfig } = JSON.parse(process.env.UMI_PLUGIN_ANTD_ENABLE);
+            Object.assign(antd, defaultConfig);
+        }
         // antd import
         memo.alias.antd = pkgPath;
         // moment > dayjs
-        if (memo.antd.dayjs) {
+        if (antd.dayjs) {
             memo.alias.moment = (0, path_1.dirname)(require.resolve('dayjs/package.json'));
         }
         // dark mode & compact mode
-        if (memo.antd.dark || memo.antd.compact) {
+        if (antd.dark || antd.compact) {
             const { getThemeVariables } = require('antd/dist/theme');
-            memo.theme = Object.assign(Object.assign({}, getThemeVariables(memo.antd)), memo.theme);
+            memo.theme = {
+                ...getThemeVariables(antd),
+                ...memo.theme,
+            };
         }
+        // antd theme
+        memo.theme = {
+            'root-entry-name': 'default',
+            ...memo.theme,
+        };
         return memo;
     });
     // babel-plugin-import
@@ -61,17 +92,19 @@ exports.default = (api) => {
                         libraryDirectory: 'es',
                         style: style === 'less' ? true : 'css',
                     },
+                    'antd',
                 ],
             ]
             : [];
     });
     // antd config provider
     api.onGenerateFiles(() => {
-        if (!api.config.antd.config)
+        if (!api.config.antd.configProvider)
             return;
         api.writeTmpFile({
             path: `runtime.tsx`,
             content: plugin_utils_1.Mustache.render(`
+import React from 'react';
 import { ConfigProvider, Modal, message, notification } from 'antd';
 
 export function rootContainer(container) {
@@ -90,12 +123,12 @@ export function rootContainer(container) {
   return <ConfigProvider {...finalConfig}>{container}</ConfigProvider>;
 }
       `.trim(), {
-                config: JSON.stringify(api.config.antd.config),
+                config: JSON.stringify(api.config.antd.configProvider),
             }),
         });
     });
     api.addRuntimePlugin(() => {
-        return api.config.antd.config
+        return api.config.antd.configProvider
             ? [(0, withTmpPath_1.withTmpPath)({ api, path: 'runtime.tsx' })]
             : [];
     });

package/dist/dva.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];
@@ -21,6 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getAllModels = exports.getModelUtil = void 0;
 const t = __importStar(require("@umijs/bundler-utils/compiled/babel/types"));
+const utils_1 = require("@umijs/utils");
 const path_1 = require("path");
 const plugin_utils_1 = require("umi/plugin-utils");
 const modelUtils_1 = require("./utils/modelUtils");
@@ -32,6 +37,7 @@ exports.default = (api) => {
             schema(Joi) {
                 return Joi.object({
                     extraModels: Joi.array().items(Joi.string()),
+                    immer: Joi.object(),
                 });
             },
         },
@@ -51,6 +57,7 @@ exports.default = (api) => {
         return memo;
     });
     api.onGenerateFiles((args) => {
+        var _a, _b, _c, _d, _e, _f;
         const models = args.isFirstTime
             ? api.appData.pluginDva.models
             : getAllModels(api);
@@ -66,16 +73,29 @@ exports.default = (api) => {
 // It's faked dva
 // aliased to @umijs/plugins/templates/dva
 import { create, Provider } from 'dva';
+import createLoading from '${(0, utils_1.winPath)(require.resolve('dva-loading'))}';
+${((_a = api.config.dva) === null || _a === void 0 ? void 0 : _a.immer)
+                ? `
+import dvaImmer, { enableES5, enableAllPlugins } from '${(0, utils_1.winPath)(require.resolve('dva-immer'))}';
+`
+                : ''}
 import React, { useRef } from 'react';
-import { history } from 'umi';
+import { history, ApplyPluginsType, useAppData } from 'umi';
 import { models } from './models';
 
 export function RootContainer(props: any) {
+  const { pluginManager } = useAppData();
   const app = useRef<any>();
+  const runtimeDva = pluginManager.applyPlugins({
+    key: 'dva',
+    type: ApplyPluginsType.modify,
+    initialValue: {},
+  });
   if (!app.current) {
     app.current = create(
       {
         history,
+        ...(runtimeDva.config || {}),
       },
       {
         initialReducer: {},
@@ -87,6 +107,10 @@ export function RootContainer(props: any) {
         },
       },
     );
+    app.current.use(createLoading());
+    ${((_b = api.config.dva) === null || _b === void 0 ? void 0 : _b.immer) ? `app.current.use(dvaImmer());` : ''}
+    ${((_d = (_c = api.config.dva) === null || _c === void 0 ? void 0 : _c.immer) === null || _d === void 0 ? void 0 : _d.enableES5) ? `enableES5();` : ''}
+    ${((_f = (_e = api.config.dva) === null || _e === void 0 ? void 0 : _e.immer) === null || _f === void 0 ? void 0 : _f.enableAllPlugins) ? `enableAllPlugins();` : ''}
     for (const id of Object.keys(models)) {
       app.current.model(models[id].model);
     }
@@ -122,6 +146,7 @@ export { connect, useDispatch, useStore, useSelector } from 'dva';`,
     api.addRuntimePlugin(() => {
         return [(0, withTmpPath_1.withTmpPath)({ api, path: 'runtime.tsx' })];
     });
+    api.addRuntimePluginKey(() => ['dva']);
     // dva list model
     api.registerCommand({
         name: 'dva',

package/dist/initial-state.js

@@ -30,8 +30,8 @@ exports.default = (api) => {
 import React from 'react';
 import { useModel } from '@@/plugin-model';
 ${loading
-                ? `import Loading from ${loading}`
-                : `function Loading() { return <div>loading</div>; }`}
+                ? `import Loading from '${loading}'`
+                : `function Loading() { return <div />; }`}
 export default function InitialStateProvider(props: any) {
   const appLoaded = React.useRef(false);
   const { loading = false } = useModel("@@initialState") || {};
@@ -107,7 +107,7 @@ export default () => ({ loading: false, refresh: () => {} })
             content: `
 import React from 'react';
 import Provider from './Provider';
-export function innerProvider(container) {
+export function dataflowProvider(container) {
   return <Provider>{ container }</Provider>;
 }
       `,

package/dist/layout.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];
@@ -18,15 +22,11 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 const allIcons = __importStar(require("@ant-design/icons"));
-const assert_1 = __importDefault(require("assert"));
+const fs_1 = require("fs");
 const path_1 = require("path");
 const plugin_utils_1 = require("umi/plugin-utils");
-const resolveProjectDep_1 = require("./utils/resolveProjectDep");
 const withTmpPath_1 = require("./utils/withTmpPath");
 exports.default = (api) => {
     api.describe({
@@ -39,11 +39,28 @@ exports.default = (api) => {
         },
         enableBy: api.EnableBy.config,
     });
-    const pkgPath = (0, resolveProjectDep_1.resolveProjectDep)({
-        pkg: api.pkg,
-        cwd: api.cwd,
-        dep: '@ant-design/pro-layout',
-    }) || (0, path_1.dirname)(require.resolve('@ant-design/pro-layout/package.json'));
+    /**
+     * 优先去找 '@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);
+        }
+        // 如果项目中没有去找插件以来的
+        return (0, path_1.dirname)(require.resolve('@ant-design/pro-layout/package.json'));
+    };
+    const pkgPath = getPkgPath();
     api.modifyAppData((memo) => {
         const version = require(`${pkgPath}/package.json`).version;
         memo.pluginLayout = {
@@ -53,8 +70,11 @@ exports.default = (api) => {
         return memo;
     });
     api.modifyConfig((memo) => {
-        // import from @ant-design/pro-layout
-        memo.alias['@ant-design/pro-layout'] = pkgPath;
+        // 只在没有自行依赖 @ant-design/pro-layout 或 @alipay/tech-ui 时
+        // 才使用插件中提供的 @ant-design/pro-layout
+        if (!pkgHasDep) {
+            memo.alias['@ant-design/pro-layout'] = pkgPath;
+        }
         return memo;
     });
     api.onGenerateFiles(() => {
@@ -63,17 +83,23 @@ exports.default = (api) => {
         api.writeTmpFile({
             path: 'Layout.tsx',
             content: `
-import { Link, useLocation, useNavigate, Outlet, useAppData, useRouteContext } from 'umi';
-import ProLayout, {
-  PageLoading,
-} from '@ant-design/pro-layout';
+import { Link, useLocation, useNavigate, Outlet, useAppData, useRouteData, matchRoutes } from 'umi';
+import { useMemo } from 'react';
+import  {
+  ProLayout,
+} from "${pkgHasDep || '@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
+                ? `
+import { useAccessMarkedRoutes } from '@@/plugin-access';
+   `.trim()
+                : 'const useAccessMarkedRoutes = (r) => r;'}
 ${api.config.locale
                 ? `
 import { useIntl } from '@@/plugin-locale';
@@ -81,7 +107,7 @@ import { useIntl } from '@@/plugin-locale';
                 : ''}
 
 
-export default () => {
+export default (props: any) => {
   const location = useLocation();
   const navigate = useNavigate();
   const { clientRoutes, pluginManager } = useAppData();
@@ -104,9 +130,8 @@ const { formatMessage } = useIntl();
       ...initialInfo
     },
   });
-  const route = clientRoutes.filter(r => {
-    return r.id === 'ant-design-pro-layout';
-  })[0];
+  const matchedRoute = useMemo(() => matchRoutes(clientRoutes, location.pathname).pop()?.route, [location.pathname]);
+  const [route] = useAccessMarkedRoutes(clientRoutes.filter(({ id }) => id === 'ant-design-pro-layout'));
   return (
     <ProLayout
       route={route}
@@ -128,7 +153,8 @@ const { formatMessage } = useIntl();
         }
         if (menuItemProps.path && location.pathname !== menuItemProps.path) {
           return (
-            <Link to={menuItemProps.path} target={menuItemProps.target}>
+            // handle wildcard route path, for example /slave/* from qiankun
+            <Link to={menuItemProps.path.replace('/*', '')} target={menuItemProps.target}>
               {defaultDom}
             </Link>
           );
@@ -162,7 +188,16 @@ const { formatMessage } = useIntl();
         })
       }
     >
-      <Outlet />
+      <Exception
+        route={matchedRoute}
+        notFound={runtimeConfig.notFound}
+        noAccessible={runtimeConfig.noAccessible}
+      >
+        {runtimeConfig.childrenRender
+          ? runtimeConfig.childrenRender(<Outlet />, props)
+          : <Outlet />
+        }
+      </Exception>
     </ProLayout>
   );
 }
@@ -172,9 +207,6 @@ const { formatMessage } = useIntl();
             const { icon } = api.appData.routes[id];
             if (icon) {
                 const upperIcon = plugin_utils_1.lodash.upperFirst(plugin_utils_1.lodash.camelCase(icon));
-                (0, assert_1.default)(
-                // @ts-ignore
-                allIcons[upperIcon] || allIcons[`${upperIcon}Outlined`], `Icon ${upperIcon} is not found`);
                 // @ts-ignore
                 if (allIcons[upperIcon]) {
                     memo[upperIcon] = true;
@@ -219,7 +251,9 @@ export function patchRoutes({ routes }) {
     const { icon } = routes[key];
     if (icon && typeof icon === 'string') {
       const upperIcon = formatIcon(icon);
-      routes[key].icon = React.createElement(icons[upperIcon] || icons[upperIcon + 'Outlined']);
+      if (icons[upperIcon] || icons[upperIcon + 'Outlined']) {
+        routes[key].icon = React.createElement(icons[upperIcon] || icons[upperIcon + 'Outlined']);
+      }
     }
   });
 }
@@ -464,6 +498,43 @@ const LogoIcon: React.FC = () => {
 export default LogoIcon;
       `,
         });
+        api.writeTmpFile({
+            path: 'Exception.tsx',
+            content: `
+import React from 'react';
+import { history, type IRoute } from 'umi';
+import { Result, Button } from 'antd';
+
+const Exception: React.FC<{
+  children: React.ReactNode;
+  route?: IRoute;
+  notFound?: React.ReactNode;
+  noAccessible?: React.ReactNode;
+}> = (props) => (
+  // render custom 404
+  (!props.route && props.notFound) ||
+  // render custom 403
+  (props.route.unaccessible && props.noAccessible) ||
+  // render default exception
+  ((!props.route || props.route.unaccessible) && (
+    <Result
+      status={props.route ? '403' : '404'}
+      title={props.route ? '403' : '404'}
+      subTitle={props.route ? '抱歉，你无权访问该页面' : '抱歉，你访问的页面不存在'}
+      extra={
+        <Button type="primary" onClick={() => history.push('/')}>
+          返回首页
+        </Button>
+      }
+    />
+  )) ||
+  // normal render
+  props.children
+);
+
+export default Exception;
+`,
+        });
     });
     api.addLayouts(() => {
         return [