@umijs/plugins 4.0.0-rc.6 → 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

@@ -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) {
@@ -27,7 +32,13 @@ exports.default = (api) => {
         },
         enableBy: api.EnableBy.config,
     });
+    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,6 +47,7 @@ exports.default = (api) => {
         return memo;
     });
     api.modifyConfig((memo) => {
+        checkPkgPath();
         // antd import
         memo.alias.antd = pkgPath;
         // moment > dayjs
@@ -49,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/dva.js

@@ -29,6 +29,7 @@ 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({
@@ -36,6 +37,7 @@ exports.default = (api) => {
             schema(Joi) {
                 return Joi.object({
                     extraModels: Joi.array().items(Joi.string()),
+                    immer: Joi.object(),
                 });
             },
         },
@@ -55,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);
@@ -70,6 +73,12 @@ 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 { models } from './models';
@@ -91,6 +100,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);
     }

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 {
@@ -28,15 +27,15 @@ exports.default = (api) => {
     catch (e) {
         api.logger.warn('antd is not installed. <SelecLang /> unavailable');
     }
+    const defaultConfig = {
+        baseNavigator: true,
+        useLocalStorage: true,
+        baseSeparator: '-',
+        antd: hasAntd,
+    };
     api.describe({
         key: 'locale',
         config: {
-            default: {
-                baseNavigator: true,
-                useLocalStorage: true,
-                baseSeparator: '-',
-                antd: hasAntd,
-            },
             schema(joi) {
                 return joi.object({
                     default: joi.string(),
@@ -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,15 +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 } = api
-            .config.locale;
-        const defaultLocale = ((_e = api.config.locale) === null || _e === void 0 ? void 0 : _e.default) || `zh${baseSeparator}CN`;
+        const { baseSeparator, baseNavigator, antd, title, useLocalStorage } = Object.assign(Object.assign({}, defaultConfig), api.config.locale);
+        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)
@@ -102,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) {
@@ -112,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,
@@ -139,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',
@@ -179,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/dist/tailwindcss.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const plugin_utils_1 = require("umi/plugin-utils");
 const path_1 = require("path");
+const plugin_utils_1 = require("umi/plugin-utils");
 exports.default = (api) => {
     api.describe({
         key: 'tailwindcss',
@@ -14,7 +14,7 @@ exports.default = (api) => {
     });
     let tailwind = null;
     const outputPath = 'plugin-tailwindcss/tailwind.css';
-    api.onStart(() => {
+    api.onBeforeCompiler(() => {
         const inputPath = (0, path_1.join)(api.cwd, 'tailwind.css');
         const generatedPath = (0, path_1.join)(api.paths.absTmpPath, outputPath);
         const binPath = (0, path_1.join)(api.cwd, 'node_modules/.bin/tailwind');

package/dist/unocss.js

@@ -1,34 +1,8 @@
 "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 __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 const child_process_1 = require("child_process");
-const fs = __importStar(require("fs"));
-const path_1 = __importDefault(require("path"));
+const fs_1 = require("fs");
+const path_1 = require("path");
 const plugin_utils_1 = require("umi/plugin-utils");
 exports.default = (api) => {
     api.describe({
@@ -42,20 +16,24 @@ exports.default = (api) => {
         },
         enableBy: api.EnableBy.config,
     });
-    api.onStart(() => {
+    const outputPath = 'uno.css';
+    api.onBeforeCompiler(() => {
         /** 由于 @unocss/cli 对设置文件进行了检查，因此加入需要 unocss.config.ts 设置的提示
          * https://github.com/antfu/unocss/blob/main/packages/cli/src/index.ts#L93 */
-        if (!fs.existsSync(path_1.default.resolve(api.paths.cwd, 'unocss.config.ts')))
-            plugin_utils_1.logger.warn('请在项目目录中添加 unocss.config.ts 文件，并配置需要的 unocss presets，否则插件将没有效果！');
-        const generatedPath = path_1.default.resolve(api.paths.absTmpPath, 'uno.css');
-        const binPath = path_1.default.resolve(api.cwd, 'node_modules/.bin/unocss');
+        if (!(0, fs_1.existsSync)((0, path_1.join)(api.paths.cwd, 'unocss.config.ts')))
+            api.logger.warn('请在项目目录中添加 unocss.config.ts 文件，并配置需要的 unocss presets，否则插件将没有效果！');
+        const generatedPath = (0, path_1.join)(api.paths.absTmpPath, outputPath);
+        const binPath = (0, path_1.join)(api.cwd, 'node_modules/.bin/unocss');
         const watchDirs = api.config.unocss.watch;
         /** 透过子进程建立 unocss 服务，将生成的 css 写入 generatedPath */
-        const unocss = (0, child_process_1.exec)(`${binPath} ${watchDirs.join(' ')} --out-file ${generatedPath} --watch`, { cwd: api.cwd });
+        const unocss = (0, child_process_1.exec)(`${binPath} ${watchDirs.join(' ')} --out-file ${generatedPath} ${api.env === 'development' ? '--watch' : ''}`, { cwd: api.cwd });
         unocss.on('error', (m) => {
             api.logger.error('unocss service encounter an error: ' + m);
         });
-        /** 将生成的 css 文件加入到 import 中 */
-        api.addEntryImports(() => [{ source: generatedPath }]);
+    });
+    /** 将生成的 css 文件加入到 import 中 */
+    api.addEntryImports(() => {
+        const generatedPath = (0, plugin_utils_1.winPath)((0, path_1.join)(api.paths.absTmpPath, outputPath));
+        return [{ source: generatedPath }];
     });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umijs/plugins",
-  "version": "4.0.0-rc.6",
+  "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",
@@ -18,18 +18,21 @@
   "scripts": {
     "build": "pnpm tsc",
     "build:deps": "pnpm esno ../../scripts/bundleDeps.ts",
-    "dev": "pnpm build -- --watch"
+    "dev": "pnpm build -- --watch",
+    "test": "jest -c ../../jest.turbo.config.ts"
   },
   "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.6",
+    "@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",
-    "dayjs": "^1.10.8",
+    "dayjs": "^1.11.0",
     "dva-core": "^2.0.4",
+    "dva-immer": "^1.0.0",
+    "dva-loading": "^3.0.22",
     "event-emitter": "~0.3.5",
     "fast-deep-equal": "3.1.3",
     "lodash": "^4.17.21",
@@ -41,7 +44,7 @@
     "warning": "^4.0.3"
   },
   "devDependencies": {
-    "umi": "4.0.0-rc.6"
+    "umi": "4.0.0-rc.9"
   },
   "publishConfig": {
     "access": "public"