fix(plugins): antd App locale not working bug (#10969)

* chore: code refactoring

* fix: app locale no work

* feat: cache antd runtime config

* Update runtime.ts.tpl

examples/with-antd-5/.umirc.ts

@@ -1,5 +1,9 @@
 export default {
-  plugins: ['@umijs/plugins/dist/antd'],
+  plugins: ['@umijs/plugins/dist/antd', '@umijs/plugins/dist/locale'],
+  locale: {
+    title: true,
+    default: 'zh-CN',
+  },
   antd: {
     // valid for antd5.0 only
     theme: {

examples/with-antd-5/locales/en-US.js

@@ -0,0 +1,3 @@
+export default {
+  HELLO: 'Hello',
+};

examples/with-antd-5/locales/zh-CN.js

@@ -0,0 +1,3 @@
+export default {
+  HELLO: '你好',
+};

examples/with-antd-5/pages/index.tsx

@@ -1,18 +1,23 @@
 import { App, Button, Space, version } from 'antd';
-import React from 'react';
+import React, { useState } from 'react';
+import { getLocale, setLocale, useIntl } from 'umi';
 
 export default function Page() {
+  const [isZh, setIsZh] = useState(true);
   // 若要使用 useApp hook，须先在 antd 插件中配置 appConfig
   const { message, modal } = App.useApp();
-
+  const locale = getLocale();
   const showModal = () => {
     modal.confirm({
       title: 'Hai',
       content: '注意 Modal 内的按钮样式应该和页面中的按钮样一致',
       maskClosable: true,
     });
   };
-
+  const intl = useIntl();
+  const msg = intl.formatMessage({
+    id: 'HELLO',
+  });
   const sayHai = () => {
     // .umirc.ts 中配置了 appConfig.message.maxCount = 3
     // app.txt 中配置了 appConfig.message.duration = 5
@@ -28,6 +33,15 @@ export default function Page() {
           Open Modal
         </Button>
       </Space>
+      locale:{locale}
+      <Button
+        onClick={() => {
+          setIsZh(!isZh);
+          setLocale(isZh ? 'en-US' : 'zh-CN', false);
+        }}
+      >
+        {msg}
+      </Button>
     </>
   );
 }

packages/plugins/package.json

@@ -14,7 +14,7 @@
   "files": [
     "dist",
     "libs",
-    "tpls"
+    "templates"
   ],
   "scripts": {
     "build": "umi-scripts father build",

packages/plugins/src/antd.ts

@@ -1,10 +1,13 @@
 import assert from 'assert';
 import { dirname, join } from 'path';
 import { IApi, RUNTIME_TYPE_FILE_NAME } from 'umi';
-import { deepmerge, Mustache, semver } from 'umi/plugin-utils';
+import { deepmerge, Mustache, semver, winPath } from 'umi/plugin-utils';
+import { TEMPLATES_DIR } from './constants';
 import { resolveProjectDep } from './utils/resolveProjectDep';
 import { withTmpPath } from './utils/withTmpPath';
 
+const ANTD_TEMPLATES_DIR = join(TEMPLATES_DIR, 'antd');
+
 export default (api: IApi) => {
   let pkgPath: string;
   let antdVersion = '4.0.0';
@@ -196,7 +199,7 @@ export default (api: IApi) => {
         appConfig:
           appComponentAvailable && JSON.stringify(api.config.antd.appConfig),
       },
-      tplPath: join(__dirname, '../tpls/antd-runtime.ts.tpl'),
+      tplPath: winPath(join(ANTD_TEMPLATES_DIR, 'runtime.ts.tpl')),
     });
 
     api.writeTmpFile({

packages/plugins/src/constants.ts

@@ -0,0 +1,3 @@
+import { join } from 'path';
+
+export const TEMPLATES_DIR = join(__dirname, '../templates');

packages/plugins/src/locale.ts

@@ -2,6 +2,7 @@ import { existsSync, readFileSync } from 'fs';
 import { dirname, join } from 'path';
 import { IApi, RUNTIME_TYPE_FILE_NAME } from 'umi';
 import { lodash, Mustache, winPath } from 'umi/plugin-utils';
+import { TEMPLATES_DIR } from './constants';
 import {
   exactLocalePaths,
   getAntdLocale,
@@ -13,6 +14,7 @@ import {
 } from './utils/localeUtils';
 import { withTmpPath } from './utils/withTmpPath';
 
+const LOCALE_TEMPLATES_DIR = join(TEMPLATES_DIR, 'locale');
 interface ILocaleConfig {
   default?: string;
   baseNavigator?: boolean;
@@ -106,7 +108,7 @@ export default (api: IApi) => {
 
   api.onGenerateFiles(async () => {
     const localeTpl = readFileSync(
-      join(__dirname, '../libs/locale/locale.tpl'),
+      join(LOCALE_TEMPLATES_DIR, 'locale.tpl'),
       'utf-8',
     );
     // moment2dayjs
@@ -176,7 +178,7 @@ export default (api: IApi) => {
     });
 
     const localeExportsTpl = readFileSync(
-      join(__dirname, '../libs/locale/localeExports.tpl'),
+      join(LOCALE_TEMPLATES_DIR, 'localeExports.tpl'),
       'utf-8',
     );
     const localeDirName = 'locales';
@@ -209,7 +211,7 @@ export default (api: IApi) => {
     });
     // runtime.tsx
     const runtimeTpl = readFileSync(
-      join(__dirname, '../libs/locale/runtime.tpl'),
+      join(LOCALE_TEMPLATES_DIR, 'runtime.tpl'),
       'utf-8',
     );
     api.writeTmpFile({
@@ -221,7 +223,7 @@ export default (api: IApi) => {
 
     // SelectLang.tsx
     const selectLang = readFileSync(
-      join(__dirname, '../libs/locale/SelectLang.tpl'),
+      join(LOCALE_TEMPLATES_DIR, 'SelectLang.tpl'),
       'utf-8',
     );
 

packages/plugins/src/mf.ts

@@ -2,12 +2,14 @@ import { existsSync, opendirSync } from 'fs';
 import { join } from 'path';
 import type { IApi } from 'umi';
 import { lodash, winPath } from 'umi/plugin-utils';
+import { TEMPLATES_DIR } from './constants';
 import { toRemotesCodeString } from './utils/mfUtils';
 
 const { isEmpty } = lodash;
 
 const mfSetupPathFileName = '_mf_setup-public-path.js';
 const mfAsyncEntryFileName = 'asyncEntry.ts';
+const MF_TEMPLATES_DIR = join(TEMPLATES_DIR, 'mf');
 
 export default function mf(api: IApi) {
   api.describe({
@@ -122,7 +124,7 @@ export default function mf(api: IApi) {
       context: {
         remoteCodeString: toRemotesCodeString(remotes),
       },
-      tplPath: join(__dirname, '../tpls/mf-runtime.ts.tpl'),
+      tplPath: winPath(join(MF_TEMPLATES_DIR, 'runtime.ts.tpl')),
     });
 
     if (api.env === 'development' && api.config.mfsu) {

packages/plugins/tpls/antd-runtime.ts.tpl → packages/plugins/templates/antd/runtime.ts.tpl

@@ -13,30 +13,32 @@ import {
 import { ApplyPluginsType } from 'umi';
 import { getPluginManager } from '../core/plugin';
 
+let cacheAntdConfig = null;
+
+const getAntdConfig = () => {
+  if(!cacheAntdConfig){
+    cacheAntdConfig = getPluginManager().applyPlugins({
+      key: 'antd',
+      type: ApplyPluginsType.modify,
+      initialValue: {
+  {{#configProvider}}
+        ...{{{configProvider}}},
+  {{/configProvider}}
+  {{#appConfig}}
+        appConfig: {{{appConfig}}},
+  {{/appConfig}}
+      },
+    });
+  }
+  return cacheAntdConfig;
+}
+
 export function rootContainer(rawContainer) {
   const {
-    appConfig: finalAppConfig = {},
+    appConfig,
     ...finalConfigProvider
-  } = getPluginManager().applyPlugins({
-    key: 'antd',
-    type: ApplyPluginsType.modify,
-    initialValue: {
-{{#configProvider}}
-      ...{{{configProvider}}},
-{{/configProvider}}
-{{#appConfig}}
-      appConfig: {{{appConfig}}},
-{{/appConfig}}
-    },
-  });
-
+  } = getAntdConfig();
   let container = rawContainer;
-
-{{#appConfig}}
-  // The App component should be under ConfigProvider
-  container = <App {...finalAppConfig}>{container}</App>;
-{{/appConfig}}
-
 {{#configProvider}}
   if (finalConfigProvider.prefixCls) {
     Modal.config({
@@ -61,3 +63,14 @@ export function rootContainer(rawContainer) {
 
   return container;
 }
+
+{{#appConfig}}
+// The App component should be under ConfigProvider
+// plugin-locale has other ConfigProvider
+export function innerProvider(container: any) {
+  const {
+    appConfig: finalAppConfig = {},
+  } = getAntdConfig();
+  return <App {...finalAppConfig}>{container}</App>;
+}
+{{/appConfig}}