feat: i18next

JuckZ · Oct 27, 2023 · 72998df · 72998df
1 parent 1f786f5
commit 72998df
Show file tree

Hide file tree

Showing 17 changed files with 237 additions and 92 deletions.
diff --git a/package.json b/package.json
@@ -93,8 +93,14 @@
     "cursor-effects": "^1.0.12",
     "emoji-mart": "^5.5.2",
     "i18next": "^23.6.0",
+    "i18next-browser-languagedetector": "^7.1.0",
+    "i18next-http-backend": "^2.3.0",
+    "i18next-locize-backend": "^6.3.0",
+    "i18next-vue": "^3.0.0",
     "interactjs": "^1.10.19",
     "jsonfile": "^6.1.0",
+    "locize": "^2.4.6",
+    "locize-lastused": "^3.3.0",
     "lodash-es": "^4.17.21",
     "naive-ui": "^2.34.4",
     "ora": "^7.0.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/i18n.ts b/src/i18n.ts
@@ -1,6 +1,66 @@
 import { merge } from 'lodash-es';
-import en from '@/locale/en';
+import i18next from 'i18next';
+// TODO 对比两个不同的实现
+import Backend from 'i18next-locize-backend';
+// import Backend from 'i18next-http-backend';
+import I18NextVue from 'i18next-vue';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import LastUsed from 'locize-lastused';
+import { locizePlugin } from 'locize';
 import zh from '@/locale/zh-cn';
+import en from '@/locale/en';
+
+const isProduction = process.env.NODE_ENV === 'production';
+
+const locizeOptions = {
+    projectId: process.env.VUE_APP_LOCIZE_PROJECTID as string,
+    apiKey: process.env.VUE_APP_LOCIZE_APIKEY as string, // YOU should not expose your apps API key to production!!!
+    version: process.env.VUE_APP_LOCIZE_VERSION as string,
+};
+
+if (!isProduction) {
+    // locize-lastused
+    // sets a timestamp of last access on every translation segment on locize
+    // -> safely remove the ones not being touched for weeks/months
+    // https://github.com/locize/locize-lastused
+    i18next.use(LastUsed);
+}
+
+export const i18nextPromise = i18next
+    // locize-editor
+    // InContext Editor of locize
+    .use(locizePlugin)
+    // i18next-http-backend
+    // loads translations from your server
+    // https://github.com/i18next/i18next-http-backend
+    // TODO
+    // .use(Backend)
+    // detect user language
+    // learn more: https://github.com/i18next/i18next-browser-languageDetector
+    .use(LanguageDetector)
+    // init i18next
+    // for all options read: https://www.i18next.com/overview/configuration-options
+    .init({
+        debug: true,
+        fallbackLng: 'en',
+        saveMissing: !isProduction,
+        backend: locizeOptions,
+        locizeLastUsed: locizeOptions,
+        resources: {
+            en: {
+                translation: en,
+            },
+            zh: {
+                translation: zh,
+            },
+        },
+    });
+
+export function useI18n(app) {
+    app.use(I18NextVue, { i18next });
+    return app;
+}
+
 class T {
     lang: string;
 
@@ -21,3 +81,4 @@ class T {
 }
 
 export default new T().texts;
+export const i18nextConst = i18next;
diff --git a/src/main.ts b/src/main.ts
@@ -20,6 +20,8 @@ import {
 } from 'obsidian';
 import { ref } from 'vue';
 import type { Database } from 'sql.js';
+import { t } from 'i18next';
+import { i18nextPromise } from '@/i18n';
 import { HoverEditor, type HoverEditorParent } from '@/ui/popover';
 import { expandEmmetAbbreviation } from '@/utils/emmet';
 import { usePomodoroStore, useSystemStore } from '@/stores';
@@ -47,7 +49,6 @@ import { notifyNtfy } from '@/api';
 import '@/main.scss';
 import { NotifyUtil } from '@/utils/ntfy/notify';
 import { EditorUtil, EditorUtils } from '@/utils/editor';
-import t from '@/i18n';
 import { UpdateModal } from '@/ui/modal/UpdateModal';
 
 // import { initWorker } from '@/web-worker';
@@ -173,7 +174,7 @@ export default class AwesomeBrainManagerPlugin extends Plugin {
     getMenus() {
         return [
             {
-                title: t.menu.setBannerForCurrent,
+                title: t('menu.setBannerForCurrent'),
                 icon: 'image',
                 clickFn: (menu: Menu, editor: Editor, info: MarkdownView | MarkdownFileInfo) => {
                     new ImageOriginModal(this.app, this, this.app.workspace.getActiveFile()).open();
@@ -200,15 +201,15 @@ export default class AwesomeBrainManagerPlugin extends Plugin {
                 },
             },
             {
-                title: t.menu.planPomodoro,
+                title: t('menu.planPomodoro'),
                 icon: 'send',
                 clickFn: async (menu: Menu, editor: Editor, info: MarkdownView | MarkdownFileInfo) => {
                     const task = EditorUtils.getCurrentSelection(editor);
                     usePomodoroStore().quickAddPomodoro(task);
                 },
             },
             {
-                title: t.menu.showPomodoro,
+                title: t('menu.showPomodoro'),
                 icon: 'alarm-clock',
                 clickFn: async (menu: Menu, editor: Editor, info: MarkdownView | MarkdownFileInfo) => {
                     this.app.workspace.detachLeavesOfType(POMODORO_HISTORY_VIEW);
@@ -299,6 +300,7 @@ export default class AwesomeBrainManagerPlugin extends Plugin {
     }
 
     override async onload(): Promise<void> {
+        await i18nextPromise;
         await this.pluginDataIO.load();
         LoggerUtil.init(SETTINGS.debugEnable);
         DBUtil.init(this, () => {
@@ -456,7 +458,7 @@ export default class AwesomeBrainManagerPlugin extends Plugin {
         this.addCommand({
             id: 'cut-line',
             icon: 'scissors',
-            name: t.command['cut-line'],
+            name: t('command.cut-line'),
             callback: () => {
                 const editor = this.app.workspace.activeEditor?.editor;
                 if (editor) {
@@ -467,7 +469,7 @@ export default class AwesomeBrainManagerPlugin extends Plugin {
         this.addCommand({
             id: 'plan-pomodoro',
             icon: 'scissors',
-            name: t.command['plan-pomodoro'],
+            name: t('command.plan-pomodoro'),
             callback: () => {
                 const editor = this.app.workspace.activeEditor?.editor;
                 if (editor) {
@@ -478,23 +480,23 @@ export default class AwesomeBrainManagerPlugin extends Plugin {
         });
         this.addCommand({
             id: 'check-in',
-            name: t.command['check-in'],
+            name: t('command.check-in'),
             callback: () => {
                 this.habitCheckIn();
             },
         });
 
         this.addCommand({
             id: 'remove-check-in',
-            name: t.command['remove-check-in'],
+            name: t('command.remove-check-in'),
             callback: () => {
                 this.removeHabitCheckIn();
             },
         });
 
         this.addCommand({
             id: 'query-openai',
-            name: t.command['query-openai'],
+            name: t('command.query-openai'),
             hotkeys: [{ modifiers: ['Mod', 'Shift'], key: 'o' }],
             // 带条件的编辑器指令
             // editorCheckCallback: (checking: boolean, editor: Editor, view: MarkdownView) => {}
@@ -511,7 +513,7 @@ export default class AwesomeBrainManagerPlugin extends Plugin {
 
         this.addCommand({
             id: 'open-emoji-picker',
-            name: t.command['open-emoji-picker'],
+            name: t('command.open-emoji-picker'),
             // 带条件的指令
             checkCallback: (checking: boolean) => {
                 const activeFile = this.app.workspace.getActiveFile();

diff --git a/src/render/Blast.ts b/src/render/Blast.ts
@@ -3,7 +3,7 @@ import { type Editor, Platform } from 'obsidian';
 import { throttle } from 'lodash-es';
 import party from 'party-js';
 import type { DynamicSourceType } from 'party-js/lib/systems/sources';
-import t from '@/i18n';
+import { t } from 'i18next';
 import type { SettingModel } from '@/model/settings';
 import { EditorUtils } from '@/utils/editor';
 
@@ -264,7 +264,7 @@ export function toggleShake(targetVal: SettingModel<boolean, boolean>) {
 }
 
 export function toggleBlast(targetEffect: string) {
-    if (Object.keys(t.info.powerMode).contains(targetEffect)) {
+    if (Object.keys(t('info.powerMode', { returnObjects: true })).contains(targetEffect)) {
         effect = targetEffect;
         isActive = true;
         if (!canvas) {