From d92f121cf4199e518abe5eb6557365c6a99bd821 Mon Sep 17 00:00:00 2001 From: Baorong Li Date: Wed, 17 Mar 2021 16:50:49 +0800 Subject: [PATCH] upgrade lingui: 3.x --- .umirc.js | 5 ++++- docs/i18n.md | 2 +- package.json | 34 ++++++++++++++++++---------- src/components/Layout/Bread.js | 7 +++--- src/components/Layout/Header.js | 9 ++++---- src/components/Layout/Sider.js | 9 ++++---- src/layouts/index.js | 35 ++++++++++++++++------------- src/pages/index.js | 6 ++--- src/pages/login/index.js | 10 ++++----- src/pages/post/components/List.js | 25 ++++++++++----------- src/pages/post/index.js | 9 ++++---- src/pages/request/index.js | 2 +- src/pages/user/components/Filter.js | 12 +++++----- src/pages/user/components/List.js | 21 +++++++++-------- src/pages/user/components/Modal.js | 25 +++++++++++---------- src/pages/user/index.js | 11 ++++----- 16 files changed, 116 insertions(+), 106 deletions(-) diff --git a/.umirc.js b/.umirc.js index b270ac2..493b0ca 100644 --- a/.umirc.js +++ b/.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: { diff --git a/docs/i18n.md b/docs/i18n.md index c4e86fc..33bf011 100644 --- a/docs/i18n.md +++ b/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 `?message`, `` 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 `?message`, `` 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 diff --git a/package.json b/package.json index 006dd0f..d7b590e 100644 --- a/package.json +++ b/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": { diff --git a/src/components/Layout/Bread.js b/src/components/Layout/Bread.js index fcfb200..ca86499 100644 --- a/src/components/Layout/Bread.js +++ b/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`, }, ] diff --git a/src/components/Layout/Header.js b/src/components/Layout/Header.js index 4840187..3b37540 100644 --- a/src/components/Layout/Header.js +++ b/src/components/Layout/Header.js @@ -8,8 +8,8 @@ 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' @@ -17,14 +17,12 @@ 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( diff --git a/src/components/Layout/Sider.js b/src/components/Layout/Sider.js index 4614abc..575311d 100644 --- a/src/components/Layout/Sider.js +++ b/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`} /> )} diff --git a/src/layouts/index.js b/src/layouts/index.js index 20974cd..ffecc73 100644 --- a/src/layouts/index.js +++ b/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 ( - - + + {children} diff --git a/src/pages/index.js b/src/pages/index.js index b34ad05..346f576 100644 --- a/src/pages/index.js +++ b/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 + return } } diff --git a/src/pages/login/index.js b/src/pages/login/index.js index 0529c46..f6c5e0b 100644 --- a/src/pages/login/index.js +++ b/src/pages/login/index.js @@ -4,7 +4,8 @@ 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' @@ -12,12 +13,11 @@ 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 { diff --git a/src/pages/post/components/List.js b/src/pages/post/components/List.js index ed0f882..cde1d4a 100644 --- a/src/pages/post/components/List.js +++ b/src/pages/post/components/List.js @@ -1,21 +1,20 @@ import React, { PureComponent } from 'react' import { Table, Avatar } from 'antd' -import { withI18n } from '@lingui/react' +import { t } from "@lingui/macro" import { Ellipsis } from 'components' import styles from './List.less' -@withI18n() class List extends PureComponent { render() { - const { i18n, ...tableProps } = this.props + const { ...tableProps } = this.props const columns = [ { - title: i18n.t`Image`, + title: t`Image`, dataIndex: 'image', render: text => , }, { - title: i18n.t`Title`, + title: t`Title`, dataIndex: 'title', render: text => ( @@ -24,31 +23,31 @@ class List extends PureComponent { ), }, { - title: i18n.t`Author`, + title: t`Author`, dataIndex: 'author', }, { - title: i18n.t`Categories`, + title: t`Categories`, dataIndex: 'categories', }, { - title: i18n.t`Tags`, + title: t`Tags`, dataIndex: 'tags', }, { - title: i18n.t`Visibility`, + title: t`Visibility`, dataIndex: 'visibility', }, { - title: i18n.t`Comments`, + title: t`Comments`, dataIndex: 'comments', }, { - title: i18n.t`Views`, + title: t`Views`, dataIndex: 'views', }, { - title: i18n.t`Publish Date`, + title: t`Publish Date`, dataIndex: 'date', }, ] @@ -58,7 +57,7 @@ class List extends PureComponent { {...tableProps} pagination={{ ...tableProps.pagination, - showTotal: total => i18n.t`Total ${total} Items`, + showTotal: total => t`Total ${total} Items`, }} bordered scroll={{ x: 1200 }} diff --git a/src/pages/post/index.js b/src/pages/post/index.js index c20db47..cd398f6 100644 --- a/src/pages/post/index.js +++ b/src/pages/post/index.js @@ -4,7 +4,7 @@ import { connect } from 'umi' import { Tabs } from 'antd' import { history } from 'umi' import { stringify } from 'qs' -import { withI18n } from '@lingui/react' +import { t } from "@lingui/macro" import { Page } from 'components' import List from './components/List' @@ -15,7 +15,6 @@ const EnumPostStatus = { PUBLISHED: 2, } -@withI18n() @connect(({ post, loading }) => ({ post, loading })) class Post extends PureComponent { handleTabClick = key => { @@ -52,7 +51,7 @@ class Post extends PureComponent { } render() { - const { location, i18n } = this.props + const { location } = this.props const { query } = location return ( @@ -66,13 +65,13 @@ class Post extends PureComponent { onTabClick={this.handleTabClick} > diff --git a/src/pages/request/index.js b/src/pages/request/index.js index b440512..4067926 100644 --- a/src/pages/request/index.js +++ b/src/pages/request/index.js @@ -4,7 +4,7 @@ import { apiPrefix } from 'utils/config' import { Row, Col, Select, Form, Input, Button, List, Tag, Checkbox } from 'antd' import classnames from 'classnames' import { CloseOutlined } from '@ant-design/icons' -import { Trans } from '@lingui/react' +import { Trans } from "@lingui/macro" import api from '@/services/api' import { Page } from 'components' diff --git a/src/pages/user/components/Filter.js b/src/pages/user/components/Filter.js index 93d99ff..3443baa 100644 --- a/src/pages/user/components/Filter.js +++ b/src/pages/user/components/Filter.js @@ -2,8 +2,8 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import moment from 'moment' import { FilterItem } from 'components' - -import { Trans } from '@lingui/react' +import { Trans } from "@lingui/macro" +import { t } from "@lingui/macro" import { Button, Row, Col, DatePicker, Form, Input, Cascader } from 'antd' import city from 'utils/city' @@ -67,7 +67,7 @@ class Filter extends Component { } render() { - const { onAdd, filter, i18n } = this.props + const { onAdd, filter } = this.props const { name, address } = filter let initialCreateTime = [] @@ -84,7 +84,7 @@ class Filter extends Component { @@ -99,7 +99,7 @@ class Filter extends Component { @@ -110,7 +110,7 @@ class Filter extends Component { sm={{ span: 12 }} id="createTimeRangePicker" > - + { - const { onDeleteItem, onEditItem, i18n } = this.props + const { onDeleteItem, onEditItem } = this.props if (e.key === '1') { onEditItem(record) } else if (e.key === '2') { confirm({ - title: i18n.t`Are you sure delete this record?`, + title: t`Are you sure delete this record?`, onOk() { onDeleteItem(record.id) }, @@ -26,14 +26,14 @@ class List extends PureComponent { } render() { - const { onDeleteItem, onEditItem, i18n, ...tableProps } = this.props + const { onDeleteItem, onEditItem, ...tableProps } = this.props const columns = [ { title: Avatar, dataIndex: 'avatar', key: 'avatar', - width: 72, + width: '7%', fixed: 'left', render: text => , }, @@ -51,12 +51,14 @@ class List extends PureComponent { { title: Age, dataIndex: 'age', + width: '6%', key: 'age', }, { title: Gender, dataIndex: 'isMale', key: 'isMale', + width: '7%', render: text => {text ? 'Male' : 'Female'}, }, { @@ -83,13 +85,14 @@ class List extends PureComponent { title: Operation, key: 'operation', fixed: 'right', + width: '8%', render: (text, record) => { return ( this.handleMenuClick(record, e)} menuOptions={[ - { key: '1', name: i18n.t`Update` }, - { key: '2', name: i18n.t`Delete` }, + { key: '1', name: t`Update` }, + { key: '2', name: t`Delete` }, ]} /> ) @@ -102,7 +105,7 @@ class List extends PureComponent { {...tableProps} pagination={{ ...tableProps.pagination, - showTotal: total => i18n.t`Total ${total} Items`, + showTotal: total => t`Total ${total} Items`, }} className={styles.table} bordered diff --git a/src/pages/user/components/Modal.js b/src/pages/user/components/Modal.js index 7bec6e3..cae9d7f 100644 --- a/src/pages/user/components/Modal.js +++ b/src/pages/user/components/Modal.js @@ -1,8 +1,9 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import { Form, Input, InputNumber, Radio, Modal, Cascader } from 'antd' -import { Trans } from '@lingui/react' +import { Trans } from "@lingui/macro" import city from 'utils/city' +import { t } from "@lingui/macro" const FormItem = Form.Item @@ -36,21 +37,21 @@ class UserModal extends PureComponent { } render() { - const { i18n, item = {}, onOk, form, ...modalProps } = this.props + const { item = {}, onOk, form, ...modalProps } = this.props return (
+ label={t`Name`} hasFeedback {...formItemLayout}> + label={t`NickName`} hasFeedback {...formItemLayout}> + label={t`Gender`} hasFeedback {...formItemLayout}> Male @@ -60,23 +61,23 @@ class UserModal extends PureComponent { - + - + - + + label={t`Address`} hasFeedback {...formItemLayout}> diff --git a/src/pages/user/index.js b/src/pages/user/index.js index 610c967..d713e99 100644 --- a/src/pages/user/index.js +++ b/src/pages/user/index.js @@ -3,14 +3,13 @@ import PropTypes from 'prop-types' import { history } from 'umi' import { connect } from 'umi' import { Row, Col, Button, Popconfirm } from 'antd' -import { withI18n } from '@lingui/react' +import { t } from "@lingui/macro" import { Page } from 'components' import { stringify } from 'qs' import List from './components/List' import Filter from './components/Filter' import Modal from './components/Modal' -@withI18n() @connect(({ user, loading }) => ({ user, loading })) class User extends PureComponent { handleRefresh = newQuery => { @@ -49,18 +48,17 @@ class User extends PureComponent { } get modalProps() { - const { dispatch, user, loading, i18n } = this.props + const { dispatch, user, loading } = this.props const { currentItem, modalVisible, modalType } = user return { - i18n, item: modalType === 'create' ? {} : currentItem, visible: modalVisible, destroyOnClose: true, maskClosable: false, confirmLoading: loading.effects[`user/${modalType}`], title: `${ - modalType === 'create' ? i18n.t`Create User` : i18n.t`Update User` + modalType === 'create' ? t`Create User` : t`Update User` }`, centered: true, onOk: data => { @@ -130,11 +128,10 @@ class User extends PureComponent { } get filterProps() { - const { location, dispatch, i18n } = this.props + const { location, dispatch } = this.props const { query } = location return { - i18n, filter: { ...query, },