feat: layout plugin 迁移 umi@3

example/.umirc.ts

@@ -1,11 +1,24 @@
 import { defineConfig } from 'umi';
 
 export default defineConfig({
+  routes: [
+    {
+      name: 'model 测试',
+      path: '/plugin-model',
+      component: './plugin-model',
+    },
+    {
+      name: '首页',
+      path: '/',
+      component: './index',
+    },
+  ],
   plugins: [
     require.resolve('../packages/plugin-antd/lib'),
     require.resolve('../packages/plugin-locale/lib'),
     require.resolve('../packages/plugin-dva/lib'),
     require.resolve('../packages/plugin-model/lib'),
     require.resolve('../packages/plugin-request/lib'),
+    require.resolve('../packages/plugin-layout/lib'),
   ],
 });

example/app.ts

@@ -2,6 +2,18 @@ export function render(oldRender: Function) {
   oldRender();
 }
 
+// export function getInitialState() {
+//   return {
+//     name: 'test'
+//   };
+// }
+
+export const layout = {
+  logout: () => {
+    console.log('logout success');
+  }, // do something
+};
+
 export const locale = {
   default: 'zh-CN',
 };

example/package.json

@@ -1,4 +1,3 @@
 {
-  "dependencies": {
-  }
+  "dependencies": {}
 }

package.json

@@ -28,6 +28,9 @@
     ]
   },
   "devDependencies": {
+    "@umijs/plugin-initial-state": "^1.0.1",
+    "@umijs/plugin-model": "^1.0.1",
+    "@umijs/plugin-locale": "^0.1.2",
     "@testing-library/react": "^9.4.0",
     "@testing-library/react-hooks": "^3.2.1",
     "@types/jest": "^24.0.25",

packages/plugin-layout/package.json

@@ -16,26 +16,26 @@
     "umi"
   ],
   "authors": [
-    "chencheng <sorrycc@gmail.com> (https://github.com/sorrycc)"
+    "Ariel <1319413542@qq.com> (https://github.com/Ariel-Cheng)"
   ],
   "license": "MIT",
   "bugs": "http://github.com/umijs/plugins/issues",
   "homepage": "https://github.com/umijs/plugins/tree/master/packages/plugin-layout#readme",
   "peerDependencies": {
-    "umi": "2.x",
+    "umi": "3.x",
     "@umijs/plugin-initial-state": "^1.0.1",
     "@umijs/plugin-model": "^1.0.1",
+    "@umijs/plugin-locale": "^0.1.2",
     "react": "^16.0.0"
   },
   "dependencies": {
-    "@ant-design/pro-layout": "^4.9.9",
-    "antd": "^3.26.7",
+    "@ant-design/pro-layout": "^5.0.0",
+    "antd": "^4.0.0-rc.4",
     "lodash": "^4.17.15",
     "memoize-one": "^5.1.1",
-    "path-to-regexp": "1.x",
-    "umi-plugin-locale": "^2.11.4"
+    "path-to-regexp": "1.x"
   },
   "publishConfig": {
     "access": "public"
   }
-}
+}

packages/plugin-layout/src/component/Exception/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Typography, Button } from 'antd';
-import history from '@@/history';
+import { history } from 'umi';
 import './index.less';
 import { IRouteLayoutConfig } from '../../types/interface.d';
 

packages/plugin-layout/src/index.ts

@@ -1,4 +1,4 @@
-import { IApi } from 'umi-types';
+import { IApi, utils } from 'umi';
 import { join } from 'path';
 import getLayoutContent from './utils/getLayoutContent';
 import { LayoutConfig } from './types/interface.d';
@@ -7,30 +7,37 @@ const DEFAULT_ANTFIN_LOGO =
   'https://gw.alipayobjects.com/zos/rmsportal/VjSUcTzdEiSwfnvdapaa.png';
 const DIR_NAME = 'plugin-layout';
 
-export default (api: IApi, opts: LayoutConfig = {}) => {
-  let layoutOpts: LayoutConfig = { ...opts };
-  api.onOptionChange(newOption => {
-    opts = newOption; // eslint-disable-line no-param-reassign
-    api.rebuildTmpFiles();
+export default (api: IApi) => {
+  api.describe({
+    key: 'layout',
+    config: {
+      default: {},
+      schema(joi) {
+        return joi.object();
+      },
+      onChange: api.ConfigChangeType.regenerateTmpFiles,
+    },
   });
 
-  api.addRuntimePluginKey('layout');
+  let layoutOpts: LayoutConfig = {};
+
+  api.addRuntimePluginKey(() => 'layout');
 
   api.onGenerateFiles(() => {
     // apply default options
     layoutOpts = {
-      name: require(join(api.paths.cwd, 'package.json')).name,
+      name: require(join(api.paths?.cwd || '', 'package.json')).name,
       logo: DEFAULT_ANTFIN_LOGO,
       theme: 'PRO',
       locale: false,
       showBreadcrumb: true,
-      ...(api.config as any).layout,
-      ...opts,
+      ...(api.service.userConfig as any).layout,
+      ...(api.userConfig.layout || {}),
     };
 
     // allow custom theme
     let layoutComponent = {
-      PRO: api.winPath(join(__dirname, './layout/index.js')),
+      PRO: utils.winPath(join(__dirname, './layout/index.js')),
     };
     if (layoutOpts.layoutComponent) {
       layoutComponent = Object.assign(
@@ -43,16 +50,16 @@ export default (api: IApi, opts: LayoutConfig = {}) => {
     const currentLayoutComponentPath =
       layoutComponent[theme] || layoutComponent['PRO'];
 
-    api.writeTmpFile(
-      join(DIR_NAME, 'Layout.tsx'),
-      getLayoutContent(layoutOpts, currentLayoutComponentPath),
-    );
+    api.writeTmpFile({
+      path: join(DIR_NAME, 'Layout.tsx'),
+      content: getLayoutContent(layoutOpts, currentLayoutComponentPath),
+    });
   });
 
   api.modifyRoutes(routes => [
     {
       path: '/',
-      component: join(api.paths.absTmpDirPath, DIR_NAME, 'Layout.tsx'),
+      component: join(api.paths.absTmpPath || '', DIR_NAME, 'Layout.tsx'),
       routes,
     },
   ]);

packages/plugin-layout/src/layout/index.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
-import { Link, useModel } from 'umi';
+import { Link, useModel, history, useIntl } from 'umi';
 import pathToRegexp from 'path-to-regexp';
-import history from '@@/history';
-import { formatMessage } from 'umi-plugin-locale';
 import ProLayout from '@ant-design/pro-layout';
 import './style.less';
 import ErrorBoundary from '../component/ErrorBoundary';
@@ -14,7 +12,8 @@ import getMenuDataFromRoutes from '../utils/getMenuFromRoute';
 const BasicLayout = (props: any) => {
   const { children, userConfig, location } = props;
   const { initialState = {}, loading } = useModel('@@initialState');
-  const _routes = require('@@/router').routes;
+  const _routes = require('@@/core/routes').routes;
+  const intl = useIntl();
   const rightContentRender = useRightContent(userConfig, loading, initialState);
   const layoutConfig = getLayoutConfigFromRoute(_routes);
   const menus = getMenuDataFromRoutes(_routes[0].routes);
@@ -53,7 +52,7 @@ const BasicLayout = (props: any) => {
       }}
       menu={{ locale: userConfig.locale }}
       menuDataRender={() => menus}
-      formatMessage={formatMessage}
+      formatMessage={intl.formatMessage}
       logo={
         initialState.avatar ||
         'https://gw-office.alipayobjects.com/basement_prod/c83c53ab-515e-43e2-85d0-4d0da16f11ef.svg'

packages/plugin-layout/src/layout/useRightContent.tsx

@@ -1,7 +1,8 @@
 import React, { useCallback } from 'react';
-import { Avatar, Dropdown, Menu, Icon, Spin } from 'antd';
+import { Avatar, Dropdown, Menu, Spin } from 'antd';
+import { LogoutOutlined } from '@ant-design/icons';
 import './style.less';
-import { ILayoutRuntimeConfig } from '../../types/interface.d';
+import { ILayoutRuntimeConfig } from '../types/interface.d';
 
 export default function useRightContent(
   runtimeLayout: ILayoutRuntimeConfig,
@@ -16,7 +17,7 @@ export default function useRightContent(
     const menu = (
       <Menu className="umi-plugin-layout-menu">
         <Menu.Item key="logout" onClick={runtimeLayout.logout}>
-          <Icon type="logout" />
+          <LogoutOutlined />
           退出登陆
         </Menu.Item>
       </Menu>

packages/plugin-layout/src/utils/getLayoutContent.tsx

@@ -4,9 +4,15 @@ export default (
   userConfig: LayoutConfig,
   path: string,
 ) => `import React from 'react';
+import { ApplyPluginsType } from 'umi';
+import { plugin } from '../core/umiExports';
 
 export default (props) => {
-  const runtimeConfig = require('umi/_runtimePlugin').mergeConfig('layout') || {};
+  const runtimeConfig = plugin.applyPlugins({
+    key: 'layout',
+    type: ApplyPluginsType.modify,
+    initialValue: {},
+  }) || {};
   const userConfig = {
     ...${JSON.stringify(userConfig).replace(/"/g, "'")},
     ...runtimeConfig

packages/plugin-layout/src/utils/intl.ts

@@ -1,4 +1,4 @@
-import { formatMessage, getLocale } from 'umi-plugin-locale';
+import { useIntl, getLocale } from 'umi';
 import zhCN from '../locale/zh-CN';
 import enUS from '../locale/en-US';
 
@@ -22,7 +22,8 @@ export function intl({
   id: string;
   value?: { [key: string]: any };
 }) {
+  const intl = useIntl();
   const localeMessages: { [key: string]: string } =
     getLocale() === 'zh-CN' ? zhCN : enUS;
-  return formatMessage({ id }, value) || localeMessages[id] || id;
+  return intl.formatMessage({ id }, value) || localeMessages[id] || id;
 }

packages/plugin-layout/test/getLayoutContent.test.js

@@ -6,9 +6,15 @@ describe('getLayoutContent', () => {
 
     expect(LayoutContent).toEqual(
       `import React from 'react';
+import { ApplyPluginsType } from 'umi';
+import { plugin } from '../core/umiExports';
 
 export default (props) => {
-  const runtimeConfig = require('umi/_runtimePlugin').mergeConfig('layout') || {};
+  const runtimeConfig = plugin.applyPlugins({
+    key: 'layout',
+    type: ApplyPluginsType.modify,
+    initialValue: {},
+  }) || {};
   const userConfig = {
     ...{},
     ...runtimeConfig