♻️ build: 基于 react-i18next 重构国际化实现

packages/user-panel/package.json

@@ -26,11 +26,13 @@
     "clean": "rm -rf es lib dist build coverage .umi"
   },
   "dependencies": {
-    "@arvinxu/i18n": "1.0.1",
-    "classnames": "^2.3.1",
-    "react-router": "^5.2.1",
     "@ant-design/icons": "^4.x",
     "@ant-design/pro-form": "^1.x",
-    "antd": "^4.x"
+    "antd": "^4.x",
+    "classnames": "^2.3.1",
+    "i18next": "^21.6.14",
+    "i18next-browser-languagedetector": "^6.1.3",
+    "react-i18next": "^11.16.1",
+    "react-router": "^5.2.1"
   }
 }

packages/user-panel/src/components/Intl.ts

@@ -1,4 +1,7 @@
-import createI18n from '@arvinxu/i18n';
-import localeMessageMaps from '../locales';
+import { useTranslation } from 'react-i18next';
 
-export const { IntlProvider, useFormatMessage } = createI18n(localeMessageMaps);
+export const useFormatMessage = () => {
+  const { t } = useTranslation();
+
+  return (id, values?) => t(id, values);
+};

packages/user-panel/src/layout/index.tsx

@@ -1,9 +1,11 @@
-import React, { CSSProperties } from 'react';
-import type { FC } from 'react';
+import React from 'react';
+import type { FC, CSSProperties } from 'react';
 import cls from 'classnames';
 
 import type { FooterProps, HeaderProps } from '../components';
-import { IntlProvider, Header, Footer } from '../components';
+import { Header, Footer } from '../components';
+import '../locales';
+
 import './style.less';
 
 export interface LayoutProps extends FooterProps, HeaderProps {
@@ -27,19 +29,17 @@ const Layout: FC<LayoutProps> = ({
   className,
 }) => {
   return (
-    <IntlProvider>
-      <div className={cls('avx-user-panel-container', className)} style={style}>
-        <Header type={type} logo={logo} logoUrl={logoUrl} />
-        {children}
-        {(onWechatLoginClick || onRegisterClick) && showFooter ? (
-          <Footer
-            type={type}
-            onWechatLoginClick={onWechatLoginClick}
-            onRegisterClick={onRegisterClick}
-          />
-        ) : null}
-      </div>
-    </IntlProvider>
+    <div className={cls('avx-user-panel-container', className)} style={style}>
+      <Header type={type} logo={logo} logoUrl={logoUrl} />
+      {children}
+      {(onWechatLoginClick || onRegisterClick) && showFooter ? (
+        <Footer
+          type={type}
+          onWechatLoginClick={onWechatLoginClick}
+          onRegisterClick={onRegisterClick}
+        />
+      ) : null}
+    </div>
   );
 };
 

packages/user-panel/src/locales/en-US/index.ts

@@ -0,0 +1,3 @@
+import pages from './login';
+
+export default pages;

packages/user-panel/src/locales/index.ts

@@ -1,6 +1,26 @@
-import type { LocaleMessageMaps } from '@arvinxu/i18n';
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+
 import zhCN from './zh-CN';
+import en from './en-US';
+
+const resources = {
+  en: { translation: en },
+  'zh-CN': { translation: zhCN },
+};
+
+i18n
+  .use(initReactI18next)
+
+  .use(LanguageDetector)
+  .init({
+    resources,
 
-const localeMessageMaps: LocaleMessageMaps = { 'zh-CN': zhCN };
+    fallbackLng: 'zh-CN',
+    interpolation: {
+      escapeValue: false, // react already safes from xss
+    },
+  });
 
-export default localeMessageMaps;
+export default i18n;

packages/user-panel/src/locales/zh-CN/index.ts

@@ -0,0 +1,4 @@
+import login from './login';
+import register from './register';
+
+export default { ...login, ...register };

packages/user-panel/src/login/index.test.tsx

@@ -4,34 +4,24 @@ import React from 'react';
 import { render, fireEvent, act } from '@testing-library/react';
 
 import Login from './index';
-import { IntlProvider } from '../components';
 
 describe('Login 组件', () => {
   it('默认状态', () => {
-    const { container } = render(
-      <IntlProvider>
-        <Login />
-      </IntlProvider>,
-    );
+    const { container } = render(<Login />);
     expect(container).toMatchSnapshot();
   });
 
   it('获取验证码', async () => {
     const {
       // container,
       findByText,
-    } = render(
-      <IntlProvider>
-        <Login />
-      </IntlProvider>,
-    );
+    } = render(<Login />);
     const btn = await findByText('手机号登录');
 
     await act(async () => {
       fireEvent.click(btn);
       const captcha = await findByText('获取验证码');
       fireEvent.click(captcha);
     });
-    // expect(container).toMatchSnapshot();
   });
 });