@umijs/plugins 4.0.0-rc.7 → 4.0.0

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 React, { PropsWithChildren } 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<PropsWithChildren<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[accessCode];
+
+        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.children?.length) {
+        const isNoAccessibleChild = !route.children.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/analytics.js

@@ -20,7 +20,7 @@ exports.default = (api) => {
         return `
     (function() {
       var hm = document.createElement('script');
-      hm.src = 'https://hm.baidu.com/hm.js?${code}';
+      hm.src = '//hm.baidu.com/hm.js?${code}';
       var s = document.getElementsByTagName('script')[0];
       s.parentNode.insertBefore(hm, s);
     })();

package/dist/antd.js

@@ -30,7 +30,12 @@ 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) {
@@ -48,17 +53,31 @@ exports.default = (api) => {
     });
     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
@@ -73,6 +92,7 @@ exports.default = (api) => {
                         libraryDirectory: 'es',
                         style: style === 'less' ? true : 'css',
                     },
+                    'antd',
                 ],
             ]
             : [];
@@ -84,6 +104,7 @@ exports.default = (api) => {
         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) {

package/dist/dva.js

@@ -25,11 +25,11 @@ 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");
 const withTmpPath_1 = require("./utils/withTmpPath");
-const utils_1 = require("@umijs/utils");
 exports.default = (api) => {
     const pkgPath = (0, path_1.join)(__dirname, '../libs/dva.ts');
     api.describe({
@@ -80,15 +80,22 @@ import dvaImmer, { enableES5, enableAllPlugins } from '${(0, utils_1.winPath)(re
 `
                 : ''}
 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: {},
@@ -105,7 +112,10 @@ export function RootContainer(props: any) {
     ${((_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);
+      app.current.model({
+        namespace: models[id].namespace,
+        ...models[id].model,
+      });
     }
     app.current.start();
   }
@@ -139,6 +149,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

@@ -14,7 +14,12 @@ exports.default = (api) => {
     });
     api.register({
         key: 'addExtraModels',
-        fn: () => [(0, withTmpPath_1.withTmpPath)({ api, path: '@@initialState.ts' })],
+        fn: () => [
+            (0, withTmpPath_1.withTmpPath)({
+                api,
+                path: '@@initialState.ts#{"namespace":"@@initialState"}',
+            }),
+        ],
     });
     api.addRuntimePluginKey(() => ['getInitialState']);
     api.addRuntimePlugin(() => {
@@ -30,8 +35,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") || {};
@@ -55,8 +60,10 @@ export default function InitialStateProvider(props: any) {
 import { useState, useEffect, useCallback } from 'react';
 import { getInitialState } from '@/app';
 
+export type InitialStateType = Awaited<ReturnType<typeof getInitialState>> | undefined;
+
 const initState = {
-  initialState: undefined,
+  initialState: undefined as InitialStateType,
   loading: true,
   error: undefined,
 };
@@ -71,8 +78,6 @@ export default () => {
     } catch (e) {
       setState((s) => ({ ...s, error: e, loading: false }));
     }
-    // [?]
-    // await sleep(10);
   }, []);
 
   const setInitialState = useCallback(async (initialState) => {
@@ -82,8 +87,6 @@ export default () => {
       }
       return { ...s, initialState, loading: false };
     });
-    // [?]
-    // await sleep(10)
   }, []);
 
   useEffect(() => {
@@ -107,7 +110,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

@@ -22,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({
@@ -43,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 = (0, plugin_utils_1.winPath)(getPkgPath());
     api.modifyAppData((memo) => {
         const version = require(`${pkgPath}/package.json`).version;
         memo.pluginLayout = {
@@ -57,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(() => {
@@ -67,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 "${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
+                ? `
+import { useAccessMarkedRoutes } from '@@/plugin-access';
+   `.trim()
+                : 'const useAccessMarkedRoutes = (r) => r;'}
 ${api.config.locale
                 ? `
 import { useIntl } from '@@/plugin-locale';
@@ -85,7 +107,7 @@ import { useIntl } from '@@/plugin-locale';
                 : ''}
 
 
-export default () => {
+export default (props: any) => {
   const location = useLocation();
   const navigate = useNavigate();
   const { clientRoutes, pluginManager } = useAppData();
@@ -108,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}
@@ -132,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>
           );
@@ -166,19 +188,45 @@ const { formatMessage } = useIntl();
         })
       }
     >
-      <Outlet />
+      <Exception
+        route={matchedRoute}
+        notFound={runtimeConfig.notFound}
+        noAccessible={runtimeConfig.noAccessible}
+      >
+        {runtimeConfig.childrenRender
+          ? runtimeConfig.childrenRender(<Outlet />, props)
+          : <Outlet />
+        }
+      </Exception>
     </ProLayout>
   );
 }
       `,
+        });
+        // 写入类型, RunTimeLayoutConfig 是 app.tsx 中 layout 配置的类型
+        // 对于动态 layout 配置很有用
+        api.writeTmpFile({
+            path: 'index.ts',
+            content: `
+    import type { ProLayoutProps } from "${pkgPath || '@ant-design/pro-layout'}";
+    ${hasInitialStatePlugin
+                ? `import { Models } from '@@/plugin-model/useModel';
+           type InitDataType = Models<'@@initialState'>;
+        `
+                : 'type InitDataType = any;'}
+    
+    export type RunTimeLayoutConfig = (
+      initData: InitDataType,
+    ) => BasicLayoutProps & {
+      childrenRender?: (dom: JSX.Element, props: ProLayoutProps) => React.ReactNode,
+      unAccessible?: JSX.Element,
+      noFound?: 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));
-                (0, assert_1.default)(
-                // @ts-ignore
-                allIcons[upperIcon] || allIcons[`${upperIcon}Outlined`], `Icon ${upperIcon} is not found`);
                 // @ts-ignore
                 if (allIcons[upperIcon]) {
                     memo[upperIcon] = true;
@@ -223,7 +271,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']);
+      }
     }
   });
 }
@@ -468,6 +518,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 [