chore: add i18n Trans support

build/config/i18next-scanner.config.js

@@ -65,11 +65,18 @@ module.exports = {
         code,
         { component: 'Trans', i18nKey: 'i18nKey' },
         (key, options) => {
-          // 如果不是手动给, 则使用defaultValue 作为key
+          /**
-          if (key === '') {
+           * 处理scanner与react-i18next算法不一致导致的问题
-            key = options.defaultValue;
+           * Reference: https://github.com/i18next/i18next-scanner/issues/125
-          }
+           */
-          let hashKey = `k${crc32(key).toString(16)}`;
+          let sentence = options.defaultValue;
+          // remove <Tag> surrounding interopations to match i18next simpilied result
+          // @see https://github.com/i18next/react-i18next/blob/master/CHANGELOG.md#800
+          sentence = sentence.replace(/<(\d+)>{{(\w+)}}<\/\1>/g, '{{$2}}');
+          sentence = sentence.replace(/\s+/g, ' ');
+          options.defaultValue = sentence;
+
+          const hashKey = `k${crc32(key || sentence).toString(16)}`;
           parser.set(hashKey, options);
         }
       );

shared/i18n/Trans.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Trans as OriginalTrans, TransProps } from 'react-i18next';
+
+type Props = Omit<TransProps<string>, 't'>;
+export const Trans: React.FC<Props> = React.memo((props) => {
+  return <OriginalTrans>{props.children}</OriginalTrans>;
+});
+Trans.displayName = 'Trans';

shared/i18n/index.ts

@@ -22,6 +22,13 @@ i18next
         console.log('缺少翻译:', ...args);
       },
     },
+    react: {
+      // Reference: https://react.i18next.com/latest/trans-component#i-18-next-options
+      hashTransKey(defaultValue: string) {
+        // return a key based on defaultValue or if you prefer to just remind you should set a key return false and throw an error
+        return `k${crc32(defaultValue).toString(16)}`;
+      },
+    },
   } as any);
 
 /**
@@ -30,7 +37,7 @@ i18next
 export const t: TFunction = (
   key: string,
   defaultValue?: string,
-  options?: TOptionsBase
+  options?: TOptionsBase & Record<string, unknown>
 ) => {
   try {
     const hashKey = `k${crc32(key).toString(16)}`;

shared/i18n/langs/en-US/translation.json

@@ -23,6 +23,7 @@
   "k3e514bd0": "Panel name cannot be empty",
   "k3f3597fc": "All",
   "k419da0ef": "Message explanation",
+  "k424be044": "This invite expired in <2>{{date}}</2>",
   "k42a44318": "Joined",
   "k42a98418": "File Service",
   "k4603baea": "Create Group Panel",
@@ -97,6 +98,7 @@
   "kdd4c838c": "Jump to Group",
   "kdd6c18f8": "Service exception",
   "ke187440d": "Panel type cannot be empty",
+  "ked2baf28": "Loading...",
   "ked5385d5": "Create Panel",
   "keda14478": "You are the group manager, leaving the group will cause the group to be dissolved",
   "kef25594f": "Nickname#0000",

shared/i18n/langs/zh-CN/translation.json

@@ -23,6 +23,7 @@
   "k3e514bd0": "面板名不能为空",
   "k3f3597fc": "全员",
   "k419da0ef": "消息解释",
+  "k424be044": "该邀请将于 <2>{{date}}</2> 过期",
   "k42a44318": "已加入",
   "k42a98418": "文件服务",
   "k4603baea": "创建群组面板",
@@ -97,6 +98,7 @@
   "kdd4c838c": "跳转到群组",
   "kdd6c18f8": "服务异常",
   "ke187440d": "面板类型不能为空",
+  "ked2baf28": "加载中...",
   "ked5385d5": "创建面板",
   "keda14478": "您是群组管理者，退出群组会导致解散群组",
   "kef25594f": "用户昵称#0000",

shared/index.tsx

@@ -35,6 +35,7 @@ export { TcProvider } from './components/Provider';
 
 // i18n
 export { t, setLanguage, useTranslation } from './i18n';
+export { Trans } from './i18n/Trans';
 
 // hooks
 export { useAsync } from './hooks/useAsync';

web/src/components/LoadingSpinner.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { t } from 'tailchat-shared';
 import { Spinner } from './Spinner';
 
 interface LoadingSpinnerProps {
@@ -9,7 +10,7 @@ export const LoadingSpinner: React.FC<LoadingSpinnerProps> = React.memo(
     return (
       <div>
         <Spinner />
-        {props.tip ?? 'Processing'}
+        {props.tip ?? t('加载中...')}
       </div>
     );
   }

web/src/routes/Invite/InviteInfo.tsx

@@ -8,6 +8,7 @@ import {
   getGroupBasicInfo,
   showErrorToasts,
   t,
+  Trans,
   useAsync,
 } from 'tailchat-shared';
 
@@ -67,9 +68,13 @@ export const InviteInfo: React.FC<Props> = React.memo((props) => {
 
       {value.expired && (
         <div>
-          该邀请将于{' '}
+          <Trans>
-          <span className="font-bold">{datetimeFromNow(value.expired)}</span>{' '}
+            该邀请将于{' '}
-          过期
+            <span className="font-bold">
+              {{ date: datetimeFromNow(value.expired) }}
+            </span>{' '}
+            过期
+          </Trans>
         </div>
       )}
     </div>