feat: update i18n (#50)

package.json

@@ -71,7 +71,7 @@
     "zustand": "^4.3.7"
   },
   "gitHooks": {
-    "pre-commit": "lint-staged"
+    "pre-commit": "lint-staged && node ./scripts/check-i18n.mjs"
   },
   "lint-staged": {
     "*.{js,jsx,less,md,json}": [

scripts/check-i18n.mjs

@@ -0,0 +1,59 @@
+/* eslint-disable */
+import fs from 'node:fs';
+import { resolve, join } from 'node:path';
+import _ from 'lodash-es';
+
+console.log('\n| Start checking i18n ...\n');
+
+class FileNotFound extends Error {
+  name = 'FileNotFound';
+}
+
+const directory = resolve(process.cwd(), './src/assets/locales');
+
+function flattenObject(obj, parentKey = '') {
+  return _.transform(
+    obj,
+    (result, value, key) => {
+      const newKey = parentKey ? `${parentKey}.${key}` : key;
+
+      if (_.isObject(value)) {
+        _.assign(result, flattenObject(value, newKey));
+      } else {
+        result[newKey] = value;
+      }
+    },
+    {},
+  );
+}
+
+fs.readdir(directory, (err, files) => {
+  if (err) {
+    throw new FileNotFound('The `/src/assets/locales` directory is not found');
+  }
+
+  const locales = files
+    .filter((i) => i.endsWith('.json'))
+    .map((i) => {
+      const file = join(directory, i);
+      const content = JSON.parse(fs.readFileSync(file, 'utf-8'));
+      const keys = _.keys(flattenObject(content));
+      return {
+        filename: file,
+        keys,
+      };
+    });
+
+  const unionKeys = _.union(...locales.map((i) => i.keys));
+
+  for (let i = 0; i < locales.length; i++) {
+    const diff = _.difference(unionKeys, locales[i].keys);
+    if (diff.length) {
+      console.error(
+        `The "${diff.join(' / ')}" in the ${locales[i].filename} is not ready.`,
+      );
+      process.exit(1);
+    }
+  }
+  process.exit(0);
+});

src/assets/locales/en.json

@@ -89,7 +89,11 @@
       "fix-suggestion-2": "2. Troubleshoot network issues: If there are access restrictions on the server where your source files are located, it may lead to failed requests when trying to access the resources. You can open the devtool to check if the network is working properly."
     }
   },
-  "network": {},
+  "network": {
+    "open-in-new-tab": "Open in new tab",
+    "copy-link-address": "Copy link address",
+    "copy-as-curl": "Copy as cURL"
+  },
   "system": {
     "overview": "Overview",
     "feature": "Feature",

src/assets/locales/index.ts

@@ -1,33 +1,41 @@
-import en from './en.json';
-import zh from './zh.json';
+// import zh from './zh.json';
+// import en from './en.json';
+// import ja from './ja.json';
+// import ko from './ko.json';
 import { initReactI18next } from 'react-i18next';
-import i18next from 'i18next';
+import i18next, { InitOptions } from 'i18next';
 import languageDetector from 'i18next-browser-languagedetector';
 
+const data = import.meta.glob('./*.json', { eager: true }) as Record<
+  string,
+  object
+>;
+
+const resources = Object.entries(data).reduce((acc, cur) => {
+  const [key, value] = cur;
+  const result = key.match(/^\.\/(.*)\.json$/);
+  if (!result) return acc;
+  acc[result[1]] = {
+    translation: {
+      ...value,
+    },
+  };
+  return acc;
+}, {} as NonNullable<InitOptions['resources']>);
+
 i18next
   .use(initReactI18next)
   .use(languageDetector)
   .init({
-    resources: {
-      en: {
-        translation: {
-          ...en,
-        },
-      },
-      zh: {
-        translation: {
-          ...zh,
-        },
-      },
-    },
+    resources,
     fallbackLng: 'en',
     interpolation: {
       escapeValue: false,
     },
   });
 
 export const getTranslation = (key: string) => {
-  const lang = i18next.resolvedLanguage;
+  const lang = i18next.resolvedLanguage || 'zh';
   const res = i18next.getResource(lang, 'translation', key);
   return res || key;
 };

src/assets/locales/ja.json

@@ -0,0 +1,128 @@
+{
+  "common": {
+    "cancel": "キャンセル",
+    "OK": "OK",
+    "clear": "クリア",
+    "refresh": "リフレッシュ",
+    "lang": "日本語",
+    "doc": "ドキュメント",
+    "connections": "接続",
+    "inject-sdk": "SDKを注入",
+    "submit": "送信",
+    "reset": "リセット",
+    "device-id": "デバイスID",
+    "os": "オペレーティング システム",
+    "browser": "ブラウザ",
+    "project": "プロジェクト",
+    "debug": "デバッグ"
+  },
+  "error": {
+    "oops": "おっと！エラーが発生しました。",
+    "actions": "<1>リフレッシュ</1>するか、<3><0>報告</0></3>してください。",
+    "try-again": "リフレッシュ",
+    "report": "報告"
+  },
+  "inject": {
+    "load-script": "テストプロジェクトに <script> を読み込む；",
+    "init-instance": "次に、（オプションで）構成して初期化します；",
+    "pass-config": "設定を渡すこともでき、これによりデフォルトの値が上書きされます；",
+    "end": "以上がすべてです。",
+    "start-debug": "<1>接続</1>メニューからトップに移動し、デバッグを開始します！"
+  },
+  "banner": {
+    "title": "多機能<br />リモートデバッグツール",
+    "desc": "Google Chromeのコンソールのように簡単にリモートデバッグを開始します。",
+    "goStart": "デバッグを開始",
+    "goGithub": "Github リポジトリ"
+  },
+  "intro": {
+    "does": "PageSpyでできること",
+    "doesTitle": "ランタイムの検出、<br />リモート操作！",
+    "provides": "提供するもの",
+    "providesTitle": "使用準備の整った <1>SDK</1> および<br /> <4>クライアントデバッグ</4>",
+    "welcome": "PageSpyへようこそ",
+    "goStart": "開始"
+  },
+  "selConn": {
+    "title": "接続を選択",
+    "label": "接続",
+    "placeholder": "接続を選択"
+  },
+  "devtool": {
+    "device": "デバイス",
+    "system": "システム",
+    "browser": "ブラウザ",
+    "version": "バージョン",
+    "menu": {
+      "Console": "コンソール",
+      "Network": "ネットワーク",
+      "System": "システム",
+      "Page": "ページ",
+      "Storage": "ストレージ"
+    }
+  },
+  "shortcuts": {
+    "title": "ショートカット",
+    "enter": "コードを実行",
+    "tab": "タブを挿入（2スペース）",
+    "shift+enter": "改行",
+    "cmd+k": "パネルをクリア",
+    "ctrl+l": "パネルをクリア",
+    "updown": "入力履歴を切り替え"
+  },
+  "console": {
+    "run": "実行",
+    "placeholder": "実行可能なコード",
+    "newContent": "新しいメッセージ",
+    "error-trace": {
+      "title": "エラーの詳細",
+      "hints": "使用のヒント",
+      "message-title": "エラーメッセージ",
+      "stack-title": "エラースタック",
+      "source-filename": "ソースファイル",
+      "fetch-minify-fail": "ソースファイルの取得に失敗",
+      "none-sourcemap": "ソースマップが見つかりません",
+      "fetch-sourcemap-fail": "ソースマップの取得に失敗",
+      "failed-title": "ソースコードの特定中に問題が発生しました",
+      "failed-advice": "以下は修正と改善の提案です：",
+      "fix-suggestion-1": "<0>1. ファイルの存在を確認：各エラースタックでソースコードを特定するためには、2つのファイル（圧縮ファイルとソースマップファイル）が要求されます。ソースマップファイルの取得規則は圧縮ファイル内の</0><1>//# sourceMappingURL=*</1><2>に指定されたアドレスに従います；</2>",
+      "fix-suggestion-2": "2. ネットワークの問題を除外：ソースファイルが存在するサーバーにアクセス制限がある場合、リソースの取得に失敗する可能性があるため、ネットワークリクエストが正常かどうかをコンソールで確認できます。"
+    }
+  },
+  "network": {
+    "open-in-new-tab": "新しいタブで開く",
+    "copy-link-address": "リンクアドレスをコピー",
+    "copy-as-curl": "cURLとしてコピー"
+  },
+  "system": {
+    "overview": "概要",
+    "feature": "機能",
+    "unsupport": "サポートされていないリスト",
+    "reference": "チェックルールを確認"
+  },
+  "page": {
+    "element": "要素",
+    "device": "デバイス"
+  },
+  "storage": {
+    "empty-detail": "値を表示するアイテムを選択"
+  },
+  "socket": {
+    "client-name": "クライアント",
+    "client-not-in-connection": "現在の接続にクライアントが存在しません",
+    "client-not-found": "クライアントが見つかりません",
+    "client-offline": "クライアントがオフラインです",
+    "client-fail": "クライアントの接続が切断されました。関連するテスターにお問い合わせください。",
+    "debug-name": "あなた",
+    "debug-offline": "あなたはオフラインです",
+    "reconnect-fail": "接続が切断されました",
+    "reconnect-fail-desc": "再接続に失敗しました。ページをリフレッシュするか、再選択してください。",
+    "room-not-found": "ルームが存在しません",
+    "network-timeout": "ネットワークエラー、接続がタイムアウトしました",
+    "server-down": "サーバーエラー"
+  },
+  "connections": {
+    "select-os": "オペレーティング システムを選択",
+    "select-browser": "ブラウザを選択"
+  }
+}