@umijs/plugins 4.0.0-rc.8 → 4.0.0-rc.9

package/dist/access.js

@@ -12,7 +12,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const path_1 = require("path");
 const withTmpPath_1 = require("./utils/withTmpPath");
 exports.default = (api) => {
-    // TODO: route access
     api.describe({
         config: {
             schema(joi) {
@@ -52,10 +51,68 @@ export function accessProvider(container) {
             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

package/dist/antd.js

@@ -61,6 +61,10 @@ exports.default = (api) => {
         }
         return memo;
     });
+    api.modifyConfig((memo) => {
+        memo.theme = Object.assign({ 'root-entry-name': 'default' }, memo.theme);
+        return memo;
+    });
     // babel-plugin-import
     api.addExtraBabelPlugins(() => {
         const style = api.config.antd.style || 'less';

package/dist/layout.js

@@ -67,17 +67,23 @@ exports.default = (api) => {
         api.writeTmpFile({
             path: 'Layout.tsx',
             content: `
-import { Link, useLocation, useNavigate, Outlet, useAppData, useRouteContext } from 'umi';
+import { Link, useLocation, useNavigate, Outlet, useAppData, useRouteData, matchRoutes } from 'umi';
+import { useMemo } from 'react';
 import ProLayout, {
   PageLoading,
 } from '@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 +91,7 @@ import { useIntl } from '@@/plugin-locale';
                 : ''}
 
 
-export default () => {
+export default (props: any) => {
   const location = useLocation();
   const navigate = useNavigate();
   const { clientRoutes, pluginManager } = useAppData();
@@ -108,9 +114,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}
@@ -166,7 +171,16 @@ const { formatMessage } = useIntl();
         })
       }
     >
-      <Outlet />
+      <Exception
+        route={matchedRoute}
+        notFound={runtimeConfig.notFound}
+        noAccessible={runtimeConfig.noAccessible}
+      >
+        {runtimeConfig.childrenRender
+          ? runtimeConfig.childrenRender(<Outlet />, props)
+          : <Outlet />
+        }
+      </Exception>
     </ProLayout>
   );
 }
@@ -468,6 +482,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 [

package/dist/locale.js

@@ -19,7 +19,6 @@ const packageNormalize = (packageName) => packageName.replace(/[@\/\-.]/g, '_');
 exports.packageNormalize = packageNormalize;
 // TODO: runtime plugin
 exports.default = (api) => {
-    var _a;
     // TODO: antd 的校验考虑 antd 插件
     let hasAntd = false;
     try {
@@ -52,30 +51,30 @@ exports.default = (api) => {
     });
     const reactIntlPkgPath = (0, plugin_utils_1.winPath)((0, path_1.dirname)(require.resolve('react-intl/package')));
     // polyfill
-    if ((0, localeUtils_1.isNeedPolyfill)(((_a = api.userConfig) === null || _a === void 0 ? void 0 : _a.targets) || {})) {
-        api.addEntryImportsAhead(() => [
+    api.addEntryImportsAhead(() => (0, localeUtils_1.isNeedPolyfill)(api.config.targets || {})
+        ? [
             {
                 source: require.resolve('intl'),
             },
-        ]);
-    }
+        ]
+        : []);
     const addAntdLocales = (args) => __awaiter(void 0, void 0, void 0, function* () {
-        var _b;
+        var _a;
         return yield api.applyPlugins({
             key: 'addAntdLocales',
             type: api.ApplyPluginsType.add,
             initialValue: [
-                `antd/${((_b = api.config) === null || _b === void 0 ? void 0 : _b.ssr) ? 'lib' : 'es'}/locale/${(0, localeUtils_1.getAntdLocale)(args.lang, args.country)}`,
+                `antd/${((_a = api.config) === null || _a === void 0 ? void 0 : _a.ssr) ? 'lib' : 'es'}/locale/${(0, localeUtils_1.getAntdLocale)(args.lang, args.country)}`,
             ],
             args,
         });
     });
     const getList = (resolveKey) => __awaiter(void 0, void 0, void 0, function* () {
-        var _c, _d;
+        var _b;
         const { paths } = api;
         return (0, localeUtils_1.getLocaleList)({
-            localeFolder: ((_c = api.config) === null || _c === void 0 ? void 0 : _c.singular) ? 'locale' : 'locales',
-            separator: (_d = api.config.locale) === null || _d === void 0 ? void 0 : _d.baseSeparator,
+            localeFolder: 'locales',
+            separator: (_b = api.config.locale) === null || _b === void 0 ? void 0 : _b.baseSeparator,
             absSrcPath: paths.absSrcPath,
             absPagesPath: paths.absPagesPath,
             addAntdLocales,
@@ -83,14 +82,14 @@ exports.default = (api) => {
         });
     });
     api.onGenerateFiles(() => __awaiter(void 0, void 0, void 0, function* () {
-        var _e, _f, _g, _h;
+        var _c, _d, _e, _f;
         const localeTpl = (0, fs_1.readFileSync)((0, path_1.join)(__dirname, '../libs/locale/locale.tpl'), 'utf-8');
         // moment2dayjs
         const resolveKey = api.config.moment2dayjs ? 'dayjs' : 'moment';
         const momentPkgPath = (0, plugin_utils_1.winPath)((0, path_1.dirname)(require.resolve(`${resolveKey}/package.json`)));
         const EventEmitterPkg = (0, plugin_utils_1.winPath)((0, path_1.dirname)(require.resolve('event-emitter/package')));
         const { baseSeparator, baseNavigator, antd, title, useLocalStorage } = Object.assign(Object.assign({}, defaultConfig), api.config.locale);
-        const defaultLocale = ((_e = api.config.locale) === null || _e === void 0 ? void 0 : _e.default) || `zh${baseSeparator}CN`;
+        const defaultLocale = ((_c = api.config.locale) === null || _c === void 0 ? void 0 : _c.default) || `zh${baseSeparator}CN`;
         const localeList = yield getList(resolveKey);
         const momentLocales = localeList
             .map(({ momentLocale }) => momentLocale)
@@ -101,7 +100,7 @@ exports.default = (api) => {
         let MomentLocales = momentLocales;
         let DefaultMomentLocale = '';
         // set moment default accounding to locale.default
-        if (!MomentLocales.length && ((_f = api.config.locale) === null || _f === void 0 ? void 0 : _f.default)) {
+        if (!MomentLocales.length && ((_d = api.config.locale) === null || _d === void 0 ? void 0 : _d.default)) {
             const [lang, country = ''] = defaultLocale.split(baseSeparator);
             const { momentLocale } = (0, localeUtils_1.getMomentLocale)(lang, country, resolveKey);
             if (momentLocale) {
@@ -111,7 +110,7 @@ exports.default = (api) => {
         }
         let DefaultAntdLocales = [];
         // set antd default locale
-        if (!antdLocales.length && ((_g = api.config.locale) === null || _g === void 0 ? void 0 : _g.antd)) {
+        if (!antdLocales.length && ((_e = api.config.locale) === null || _e === void 0 ? void 0 : _e.antd)) {
             const [lang, country = ''] = defaultLocale.split(baseSeparator);
             DefaultAntdLocales = plugin_utils_1.lodash.uniq(yield addAntdLocales({
                 lang,
@@ -138,7 +137,7 @@ exports.default = (api) => {
             path: 'locale.tsx',
         });
         const localeExportsTpl = (0, fs_1.readFileSync)((0, path_1.join)(__dirname, '../libs/locale/localeExports.tpl'), 'utf-8');
-        const localeDirName = api.config.singular ? 'locale' : 'locales';
+        const localeDirName = 'locales';
         const localeDirPath = (0, path_1.join)(api.paths.absSrcPath, localeDirName);
         api.writeTmpFile({
             path: 'localeExports.ts',
@@ -178,14 +177,14 @@ exports.default = (api) => {
                 Antd: !!antd,
                 LocaleList: localeList,
                 ShowSelectLang: localeList.length > 1 && !!antd,
-                antdFiles: ((_h = api.config) === null || _h === void 0 ? void 0 : _h.ssr) ? 'lib' : 'es',
+                antdFiles: ((_f = api.config) === null || _f === void 0 ? void 0 : _f.ssr) ? 'lib' : 'es',
             }),
         });
         // index.ts
         api.writeTmpFile({
             path: 'index.ts',
             content: `
-export { useIntl, formatMessage, FormattedMessage } from './localeExports.ts';
+export { setLocale, getLocale, useIntl, formatMessage, FormattedMessage } from './localeExports.ts';
 export { SelectLang } from './SelectLang.tsx';
 `,
         });

package/dist/request.js

@@ -265,6 +265,7 @@ export {
   useRequest,
   UseRequestProvider,
   request,
+  getRequestInstance,
 };
 
 export type {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umijs/plugins",
-  "version": "4.0.0-rc.8",
+  "version": "4.0.0-rc.9",
   "description": "@umijs/plugins",
   "homepage": "https://github.com/umijs/umi-next/tree/master/packages/plugins#readme",
   "bugs": "https://github.com/umijs/umi-next/issues",
@@ -24,8 +24,8 @@
   "dependencies": {
     "@ahooksjs/use-request": "^2.0.0",
     "@ant-design/icons": "^4.7.0",
-    "@ant-design/pro-layout": "^7.0.1-beta.3",
-    "@umijs/bundler-utils": "4.0.0-rc.8",
+    "@ant-design/pro-layout": "^6.34.6",
+    "@umijs/bundler-utils": "4.0.0-rc.9",
     "antd-dayjs-webpack-plugin": "^1.0.6",
     "axios": "^0.26.1",
     "babel-plugin-import": "^1.13.3",
@@ -44,7 +44,7 @@
     "warning": "^4.0.3"
   },
   "devDependencies": {
-    "umi": "4.0.0-rc.8"
+    "umi": "4.0.0-rc.9"
   },
   "publishConfig": {
     "access": "public"