upgrade lingui: 3.x

.umirc.js

@@ -23,7 +23,6 @@ export default {
   dynamicImport: {
     loading: 'components/Loader/Loader',
   },
-  extraBabelPresets: ['@lingui/babel-preset-react'],
   extraBabelPlugins: [
     [
       'import',
@@ -43,6 +42,9 @@ export default {
       },
       'ant-design-icons',
     ],
+    [
+      'macros'
+    ]
   ],
   hash: true,
   ignoreMomentLocale: true,
@@ -65,6 +67,7 @@ export default {
   theme: lessToJs(
     fs.readFileSync(path.join(__dirname, './src/themes/default.less'), 'utf8')
   ),
+  webpack5: {},
   chainWebpack: function (config, { webpack }) {
     config.merge({
       optimization: {

docs/i18n.md

@@ -12,7 +12,7 @@ Take Japanese as an example.
    npm run add-locale ja
    ```
 
-2. Extract the fields in the code that need to be translated, ie `<Trans>?message</Trans>`, `` i18n.t`message `` in the `message` field, run the following command after `src/locales/ja /messages.json` will appear after the extracted field configuration.
+2. Extract the fields in the code that need to be translated, ie `<Trans>?message</Trans>`, `` t`message `` in the `message` field, run the following command after `src/locales/ja /messages.json` will appear after the extracted field configuration.
 
    ```bash 
    npm run extract

package.json

@@ -5,11 +5,11 @@
   "description": "An admin dashboard application demo built upon Ant Design and UmiJS",
   "dependencies": {
     "@ant-design/icons": "^4.2.2",
-    "@lingui/react": "^2.8.0",
+    "@lingui/react": "^3.7.0",
     "antd": "^4.0.0",
-    "axios": "^0.19.0",
+    "axios": "^0.21.0",
     "classnames": "^2.2.6",
-    "d3-shape": "^1.3.0",
+    "d3-shape": "^2.1.0",
     "draft-js": "^0.11.7",
     "draftjs-to-html": "^0.9.0",
     "draftjs-to-markdown": "^0.6.0",
@@ -38,12 +38,13 @@
     "store": "^2.0.0"
   },
   "devDependencies": {
-    "@lingui/babel-preset-react": "^2.9.0",
-    "@lingui/cli": "^2.9.0",
-    "@lingui/loader": "^2.9.0",
+    "@lingui/cli": "^3.7.0",
+    "@lingui/macro": "^3.7.2",
     "@umijs/preset-react": "^1.4.0",
     "babel-eslint": "^10.0.1",
     "babel-plugin-dev-expression": "^0.2.1",
+    "babel-plugin-import": "^1.13.3",
+    "babel-plugin-macros": "^3.0.1",
     "babel-plugin-module-resolver": "^4.0.0",
     "cross-env": "^7.0.0",
     "eslint": "^7.0.0",
@@ -83,12 +84,21 @@
   "lingui": {
     "fallbackLocale": "en",
     "sourceLocale": "en",
-    "localeDir": "src/locales",
-    "srcPathDirs": [
-      "src/pages",
-      "src/layouts",
-      "src/components",
-      "src/layouts"
+    "locales": [
+      "en",
+      "zh",
+      "pr"
+    ],
+    "catalogs": [
+      {
+        "path": "src/locales/{locale}/messages",
+        "include": [
+          "src/pages",
+          "src/layouts",
+          "src/components",
+          "src/layouts"
+        ]
+      }
     ],
     "format": "minimal",
     "extractBabelOptions": {

src/components/Layout/Bread.js

@@ -2,13 +2,12 @@ import React, { PureComponent, Fragment } from 'react'
 import PropTypes from 'prop-types'
 import { Breadcrumb } from 'antd'
 import { Link, withRouter } from 'umi'
-import { withI18n } from '@lingui/react'
+import { t } from "@lingui/macro"
 import iconMap from 'utils/iconMap'
 const { pathToRegexp } = require('path-to-regexp')
 import { queryAncestors } from 'utils'
 import styles from './Bread.less'
 
-@withI18n()
 @withRouter
 class Bread extends PureComponent {
   generateBreadcrumbs = (paths) => {
@@ -36,7 +35,7 @@ class Bread extends PureComponent {
     })
   }
   render() {
-    const { routeList, location, i18n } = this.props
+    const { routeList, location } = this.props
 
     // Find a route that matches the pathname.
     const currentRoute = routeList.find(
@@ -50,7 +49,7 @@ class Bread extends PureComponent {
           routeList[0],
           {
             id: 404,
-            name: i18n.t`Not Found`,
+            name: t`Not Found`,
           },
         ]
 

src/components/Layout/Header.js

@@ -8,23 +8,21 @@ import {
   MenuFoldOutlined,
   MenuUnfoldOutlined,
 } from '@ant-design/icons'
-import { Trans, withI18n } from '@lingui/react'
-import { setLocale } from 'utils'
+import { Trans } from "@lingui/macro"
+import { getLocale, setLocale } from 'utils'
 import moment from 'moment'
 import classnames from 'classnames'
 import config from 'config'
 import styles from './Header.less'
 
 const { SubMenu } = Menu
 
-@withI18n()
 class Header extends PureComponent {
   handleClickMenu = e => {
     e.key === 'SignOut' && this.props.onSignOut()
   }
   render() {
     const {
-      i18n,
       fixed,
       avatar,
       username,
@@ -56,8 +54,9 @@ class Header extends PureComponent {
 
     if (config.i18n) {
       const { languages } = config.i18n
+      const language = getLocale()
       const currentLanguage = languages.find(
-        item => item.key === i18n._language
+        item => item.key === language
       )
 
       rightContent.unshift(

src/components/Layout/Sider.js

@@ -1,18 +1,17 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { Switch, Layout } from 'antd'
-import { withI18n, Trans } from '@lingui/react'
+import { t } from "@lingui/macro"
+import { Trans } from "@lingui/macro"
 import { BulbOutlined } from '@ant-design/icons'
 import ScrollBar from '../ScrollBar'
 import { config } from 'utils'
 import SiderMenu from './Menu'
 import styles from './Sider.less'
 
-@withI18n()
 class Sider extends PureComponent {
   render() {
     const {
-      i18n,
       menus,
       theme,
       isMobile,
@@ -67,8 +66,8 @@ class Sider extends PureComponent {
                 theme === 'dark' ? 'light' : 'dark'
               )}
               defaultChecked={theme === 'dark'}
-              checkedChildren={i18n.t`Dark`}
-              unCheckedChildren={i18n.t`Light`}
+              checkedChildren={t`Dark`}
+              unCheckedChildren={t`Light`}
             />
           </div>
         )}

src/layouts/index.js

@@ -1,15 +1,22 @@
 import React, { Component } from 'react'
 import { withRouter } from 'umi'
 import { ConfigProvider } from 'antd'
+import { i18n } from "@lingui/core"
 import { I18nProvider } from '@lingui/react'
 import { getLocale } from 'utils'
-const { i18n } = require('../../src/utils/config')
+import { zh, en, pt } from 'make-plural/plurals'
 import zh_CN from 'antd/lib/locale-provider/zh_CN'
 import en_US from 'antd/lib/locale-provider/en_US'
 import pt_BR from 'antd/lib/locale-provider/pt_BR'
 
 import BaseLayout from './BaseLayout'
 
+const plurals =  {
+  zh,
+  en,
+  'pt-br': pt,
+}
+
 const languages = {
   zh: zh_CN,
   en: en_US,
@@ -20,7 +27,6 @@ const { defaultLanguage } = i18n
 @withRouter
 class Layout extends Component {
   state = {
-    catalogs: {},
   }
 
   language = defaultLanguage
@@ -34,9 +40,8 @@ class Layout extends Component {
   shouldComponentUpdate(nextProps, nextState) {
     const language = getLocale()
     const preLanguage = this.language
-    const { catalogs } = nextState
 
-    if (preLanguage !== language && !catalogs[language]) {
+    if (preLanguage !== language && !languages[language]) {
       language && this.loadCatalog(language)
       this.language = language
       return false
@@ -48,29 +53,27 @@ class Layout extends Component {
 
   loadCatalog = async language => {
     const catalog = await import(
-      /* webpackMode: "lazy", webpackChunkName: "i18n-[index]" */
-      `@lingui/loader!../locales/${language}/messages.json`
+      `../locales/${language}/messages.json`
     )
 
-    this.setState(state => ({
-      catalogs: {
-        ...state.catalogs,
-        [language]: catalog,
-      },
-    }))
+    i18n.load(language, catalog)
+    i18n.activate(language)
   }
 
   render() {
     const { children } = this.props
-    const { catalogs } = this.state
 
     let language = getLocale()
     // If the language pack is not loaded or is loading, use the default language
-    if (!catalogs[language]) language = defaultLanguage
+    if (!languages[language]) language = defaultLanguage
+
+    i18n.loadLocaleData(language, { plurals: plurals[language] })
+    i18n.load(language, languages[language])
+    i18n.activate(language)
 
     return (
-      <ConfigProvider locale={languages[language]}>
-        <I18nProvider language={language} catalogs={catalogs}>
+      <ConfigProvider locale={language}>
+        <I18nProvider i18n={i18n}>
           <BaseLayout>{children}</BaseLayout>
         </I18nProvider>
       </ConfigProvider>

src/pages/index.js

@@ -1,12 +1,10 @@
 import React, { PureComponent } from 'react'
 import { Redirect } from 'umi'
-import { withI18n } from '@lingui/react'
+import { t } from "@lingui/macro"
 
-@withI18n()
 class Index extends PureComponent {
   render() {
-    const { i18n } = this.props
-    return <Redirect to={i18n.t`/dashboard`} />
+    return <Redirect to={t`/dashboard`} />
   }
 }
 

src/pages/login/index.js

@@ -4,20 +4,20 @@ import { connect } from 'umi'
 import { Button, Row, Input, Form } from 'antd'
 import { GlobalFooter } from 'components'
 import { GithubOutlined } from '@ant-design/icons'
-import { Trans, withI18n } from '@lingui/react'
+import { t } from "@lingui/macro"
+import { Trans } from "@lingui/macro"
 import { setLocale } from 'utils'
 import config from 'utils/config'
 
 import styles from './index.less'
 
 const FormItem = Form.Item
 
-@withI18n()
 @connect(({ loading, dispatch }) => ({ loading, dispatch }))
 class Login extends PureComponent {
 
   render() {
-    const { dispatch, loading, i18n } = this.props
+    const { dispatch, loading } = this.props
 
     const handleOk = values => {
       dispatch({ type: 'login/login', payload: values })
@@ -55,14 +55,14 @@ class Login extends PureComponent {
             <FormItem name="username" 
               rules={[{ required: true }]} hasFeedback>
                 <Input
-                  placeholder={i18n.t`Username`}
+                  placeholder={t`Username`}
                 />
             </FormItem>
             <FormItem name="password"
               rules={[{ required: true }]} hasFeedback>
                 <Input
                   type="password"
-                  placeholder={i18n.t`Password`}
+                  placeholder={t`Password`}
                 />
             </FormItem>
             <Row>