refactor(i18n): lazy load languages (#8456)

closes AF-1397

packages/frontend/core/src/modules/doc-display-meta/services/doc-display-meta.ts

@@ -159,7 +159,7 @@ export class DocDisplayMetaService extends Service {
       if (options?.originalTitle) return options.originalTitle;
 
       // empty title
-      if (!docTitle) return { key: 'Untitled' } as const;
+      if (!docTitle) return { i18nKey: 'Untitled' } as const;
 
       // reference
       if (options?.reference) return docTitle;

packages/frontend/core/src/modules/explorer/views/nodes/doc/index.tsx

@@ -208,7 +208,7 @@ export const ExplorerDocNode = ({
   return (
     <ExplorerTreeNode
       icon={Icon}
-      name={typeof docTitle === 'string' ? docTitle : t[docTitle.key]()}
+      name={t.t(docTitle)}
       dndData={dndData}
       onDrop={handleDropOnDoc}
       renameable

packages/frontend/core/src/modules/i18n/context.tsx

@@ -0,0 +1,15 @@
+import { I18nextProvider } from '@affine/i18n';
+import { useService } from '@toeverything/infra';
+import { type PropsWithChildren, useEffect } from 'react';
+
+import { I18nService } from './services/i18n';
+
+export function I18nProvider({ children }: PropsWithChildren) {
+  const i18n = useService(I18nService).i18n;
+
+  useEffect(() => {
+    i18n.init();
+  }, [i18n]);
+
+  return <I18nextProvider i18n={i18n.i18next}>{children}</I18nextProvider>;
+}

packages/frontend/core/src/modules/i18n/entities/i18n.ts

@@ -0,0 +1,83 @@
+import { notify } from '@affine/component';
+import { DebugLogger } from '@affine/debug';
+import {
+  getOrCreateI18n,
+  i18nCompletenesses,
+  type Language,
+  SUPPORTED_LANGUAGES,
+} from '@affine/i18n';
+import type { GlobalCache } from '@toeverything/infra';
+import { effect, Entity, fromPromise, LiveData } from '@toeverything/infra';
+import { catchError, EMPTY, exhaustMap, mergeMap } from 'rxjs';
+
+export type LanguageInfo = {
+  key: Language;
+  name: string;
+  originalName: string;
+  completeness: number;
+};
+
+const logger = new DebugLogger('i18n');
+
+function mapLanguageInfo(language: Language = 'en'): LanguageInfo {
+  const languageInfo = SUPPORTED_LANGUAGES[language];
+
+  return {
+    key: language,
+    name: languageInfo.name,
+    originalName: languageInfo.originalName,
+    completeness: i18nCompletenesses[language],
+  };
+}
+
+export class I18n extends Entity {
+  private readonly i18n = getOrCreateI18n();
+
+  get i18next() {
+    return this.i18n;
+  }
+
+  readonly currentLanguageKey$ = LiveData.from(
+    this.cache.watch<Language>('i18n_lng'),
+    undefined
+  );
+
+  readonly currentLanguage$ = this.currentLanguageKey$
+    .distinctUntilChanged()
+    .map(mapLanguageInfo);
+
+  readonly languageList: Array<LanguageInfo> =
+    // @ts-expect-error same key indexing
+    Object.keys(SUPPORTED_LANGUAGES).map(mapLanguageInfo);
+
+  constructor(private readonly cache: GlobalCache) {
+    super();
+    this.i18n.on('languageChanged', (language: Language) => {
+      document.documentElement.lang = language;
+      this.cache.set('i18n_lng', language);
+    });
+  }
+
+  init() {
+    this.changeLanguage(this.currentLanguageKey$.value ?? 'en');
+  }
+
+  changeLanguage = effect(
+    exhaustMap((language: string) =>
+      fromPromise(() => this.i18n.changeLanguage(language)).pipe(
+        catchError(error => {
+          notify({
+            theme: 'error',
+            title: 'Failed to change language',
+            message: 'Error occurs when loading language files',
+          });
+
+          logger.error('Failed to change language', error);
+
+          return EMPTY;
+        }),
+        mergeMap(() => EMPTY)
+      )
+    )
+  );
+}

packages/frontend/core/src/modules/i18n/index.ts

@@ -0,0 +1,11 @@
+import { type Framework, GlobalCache } from '@toeverything/infra';
+
+import { I18nProvider } from './context';
+import { I18n, type LanguageInfo } from './entities/i18n';
+import { I18nService } from './services/i18n';
+
+export function configureI18nModule(framework: Framework) {
+  framework.service(I18nService).entity(I18n, [GlobalCache]);
+}
+
+export { I18n, I18nProvider, I18nService, type LanguageInfo };

packages/frontend/core/src/modules/i18n/services/i18n.ts

@@ -0,0 +1,7 @@
+import { Service } from '@toeverything/infra';
+
+import { I18n } from '../entities/i18n';
+
+export class I18nService extends Service {
+  public readonly i18n = this.framework.createEntity(I18n);
+}

packages/frontend/core/src/modules/index.ts

@@ -14,6 +14,7 @@ import { configureEditorSettingModule } from './editor-settting';
 import { configureExplorerModule } from './explorer';
 import { configureFavoriteModule } from './favorite';
 import { configureFindInPageModule } from './find-in-page';
+import { configureI18nModule } from './i18n';
 import { configureImportTemplateModule } from './import-template';
 import { configureNavigationModule } from './navigation';
 import { configureOrganizeModule } from './organize';
@@ -30,6 +31,7 @@ import { configureThemeEditorModule } from './theme-editor';
 import { configureUserspaceModule } from './userspace';
 
 export function configureCommonModules(framework: Framework) {
+  configureI18nModule(framework);
   configureInfraModules(framework);
   configureCollectionModule(framework);
   configureNavigationModule(framework);

packages/frontend/core/src/modules/quicksearch/impls/collections.ts

@@ -11,7 +11,7 @@ import { highlighter } from '../utils/highlighter';
 const group = {
   id: 'collections',
   label: {
-    key: 'com.affine.cmdk.affine.category.affine.collections',
+    i18nKey: 'com.affine.cmdk.affine.category.affine.collections',
   },
   score: 10,
 } as QuickSearchGroup;
@@ -60,7 +60,7 @@ export class CollectionsQuickSearchSession
           label: {
             title: (highlighter(item.name, '<b>', '</b>', titleMatches ?? []) ??
               item.name) || {
-              key: 'Untitled',
+              i18nKey: 'Untitled',
             },
           },
           group,

packages/frontend/core/src/modules/quicksearch/impls/commands.ts

@@ -17,81 +17,81 @@ import { highlighter } from '../utils/highlighter';
 const categories = {
   'affine:recent': {
     id: 'command:affine:recent',
-    label: { key: 'com.affine.cmdk.affine.category.affine.recent' },
+    label: { i18nKey: 'com.affine.cmdk.affine.category.affine.recent' },
     score: 10,
   },
   'affine:navigation': {
     id: 'command:affine:navigation',
     label: {
-      key: 'com.affine.cmdk.affine.category.affine.navigation',
+      i18nKey: 'com.affine.cmdk.affine.category.affine.navigation',
     },
     score: 10,
   },
   'affine:creation': {
     id: 'command:affine:creation',
-    label: { key: 'com.affine.cmdk.affine.category.affine.creation' },
+    label: { i18nKey: 'com.affine.cmdk.affine.category.affine.creation' },
     score: 10,
   },
   'affine:general': {
     id: 'command:affine:general',
-    label: { key: 'com.affine.cmdk.affine.category.affine.general' },
+    label: { i18nKey: 'com.affine.cmdk.affine.category.affine.general' },
     score: 10,
   },
   'affine:layout': {
     id: 'command:affine:layout',
-    label: { key: 'com.affine.cmdk.affine.category.affine.layout' },
+    label: { i18nKey: 'com.affine.cmdk.affine.category.affine.layout' },
     score: 10,
   },
   'affine:pages': {
     id: 'command:affine:pages',
-    label: { key: 'com.affine.cmdk.affine.category.affine.pages' },
+    label: { i18nKey: 'com.affine.cmdk.affine.category.affine.pages' },
     score: 10,
   },
   'affine:edgeless': {
     id: 'command:affine:edgeless',
-    label: { key: 'com.affine.cmdk.affine.category.affine.edgeless' },
+    label: { i18nKey: 'com.affine.cmdk.affine.category.affine.edgeless' },
     score: 10,
   },
   'affine:collections': {
     id: 'command:affine:collections',
     label: {
-      key: 'com.affine.cmdk.affine.category.affine.collections',
+      i18nKey: 'com.affine.cmdk.affine.category.affine.collections',
     },
     score: 10,
   },
   'affine:settings': {
     id: 'command:affine:settings',
-    label: { key: 'com.affine.cmdk.affine.category.affine.settings' },
+    label: { i18nKey: 'com.affine.cmdk.affine.category.affine.settings' },
     score: 10,
   },
   'affine:updates': {
     id: 'command:affine:updates',
-    label: { key: 'com.affine.cmdk.affine.category.affine.updates' },
+    label: { i18nKey: 'com.affine.cmdk.affine.category.affine.updates' },
     score: 10,
   },
   'affine:help': {
     id: 'command:affine:help',
-    label: { key: 'com.affine.cmdk.affine.category.affine.help' },
+    label: { i18nKey: 'com.affine.cmdk.affine.category.affine.help' },
     score: 10,
   },
   'editor:edgeless': {
     id: 'command:editor:edgeless',
-    label: { key: 'com.affine.cmdk.affine.category.editor.edgeless' },
+    label: { i18nKey: 'com.affine.cmdk.affine.category.editor.edgeless' },
     score: 10,
   },
   'editor:insert-object': {
     id: 'command:editor:insert-object',
-    label: { key: 'com.affine.cmdk.affine.category.editor.insert-object' },
+    label: { i18nKey: 'com.affine.cmdk.affine.category.editor.insert-object' },
     score: 10,
   },
   'editor:page': {
     id: 'command:editor:page',
-    label: { key: 'com.affine.cmdk.affine.category.editor.page' },
+    label: { i18nKey: 'com.affine.cmdk.affine.category.editor.page' },
     score: 10,
   },
   'affine:results': {
     id: 'command:affine:results',
-    label: { key: 'com.affine.cmdk.affine.category.results' },
+    label: { i18nKey: 'com.affine.cmdk.affine.category.results' },
     score: 10,
   },
 } satisfies Required<{

packages/frontend/core/src/modules/quicksearch/impls/creation.ts

@@ -8,7 +8,7 @@ import type { QuickSearchItem } from '../types/item';
 
 const group = {
   id: 'creation',
-  label: { key: 'com.affine.quicksearch.group.creation' },
+  label: { i18nKey: 'com.affine.quicksearch.group.creation' },
   score: 0,
 } as QuickSearchGroup;
 
@@ -30,7 +30,7 @@ export class CreationQuickSearchSession
         id: 'creation:create-page',
         source: 'creation',
         label: {
-          key: 'com.affine.cmdk.affine.create-new-page-as',
+          i18nKey: 'com.affine.cmdk.affine.create-new-page-as',
           options: { keyWord: query },
         },
         group,
@@ -41,7 +41,7 @@ export class CreationQuickSearchSession
         id: 'creation:create-edgeless',
         source: 'creation',
         label: {
-          key: 'com.affine.cmdk.affine.create-new-edgeless-as',
+          i18nKey: 'com.affine.cmdk.affine.create-new-edgeless-as',
           options: { keyWord: query },
         },
         group,

packages/frontend/core/src/modules/quicksearch/impls/docs.ts

@@ -76,7 +76,7 @@ export class DocsQuickSearchSession
                   group: {
                     id: 'docs',
                     label: {
-                      key: 'com.affine.quicksearch.group.searchfor',
+                      i18nKey: 'com.affine.quicksearch.group.searchfor',
                       options: { query: truncate(query) },
                     },
                     score: 5,

packages/frontend/core/src/modules/quicksearch/impls/external-links.ts

@@ -42,7 +42,7 @@ export class ExternalLinksQuickSearchSession
         source: 'external-link',
         icon: LinkIcon,
         label: {
-          key: 'com.affine.cmdk.affine.insert-link',
+          i18nKey: 'com.affine.cmdk.affine.insert-link',
         },
         payload: { url: query },
       } as QuickSearchItem<'external-link', ExternalLinkPayload>,

packages/frontend/core/src/modules/quicksearch/impls/links.ts

@@ -63,7 +63,7 @@ export class LinksQuickSearchSession
         group: {
           id: 'docs',
           label: {
-            key: 'com.affine.quicksearch.group.searchfor',
+            i18nKey: 'com.affine.quicksearch.group.searchfor',
             options: { query: truncate(query) },
           },
           score: 5,

packages/frontend/core/src/modules/quicksearch/impls/recent-docs.ts

@@ -9,7 +9,7 @@ import type { QuickSearchItem } from '../types/item';
 const group = {
   id: 'recent-docs',
   label: {
-    key: 'com.affine.cmdk.affine.category.affine.recent',
+    i18nKey: 'com.affine.cmdk.affine.category.affine.recent',
   },
   score: 15,
 } as QuickSearchGroup;

packages/frontend/core/src/modules/quicksearch/impls/tags.ts

@@ -11,7 +11,7 @@ import { QuickSearchTagIcon } from '../views/tag-icon';
 const group: QuickSearchGroup = {
   id: 'tags',
   label: {
-    key: 'com.affine.cmdk.affine.category.affine.tags',
+    i18nKey: 'com.affine.cmdk.affine.category.affine.tags',
   },
   score: 10,
 };
@@ -72,7 +72,7 @@ export class TagsQuickSearchSession
                 titleMatches ?? []
               ) ??
                 item.title) || {
-                key: 'Untitled',
+                i18nKey: 'Untitled',
               },
             },
             group,

packages/frontend/core/src/modules/quicksearch/services/cmdk.ts

@@ -118,7 +118,7 @@ export class CMDKQuickSearchService extends Service {
         },
         {
           placeholder: {
-            key: 'com.affine.cmdk.docs.placeholder',
+            i18nKey: 'com.affine.cmdk.docs.placeholder',
           },
         }
       );

packages/frontend/core/src/modules/quicksearch/views/cmdk.tsx

@@ -232,12 +232,13 @@ export const CMDKGroup = ({
       style={{ overflowAnchor: 'none' }}
     >
       {items.map(item => {
-        const title = !isI18nString(item.label)
-          ? i18n.t(item.label.title)
-          : i18n.t(item.label);
-        const subTitle = !isI18nString(item.label)
-          ? item.label.subTitle && i18n.t(item.label.subTitle)
-          : null;
+        const [title, subTitle] = isI18nString(item.label)
+          ? [i18n.t(item.label), null]
+          : [
+              i18n.t(item.label.title),
+              item.label.subTitle ? i18n.t(item.label.subTitle) : null,
+            ];
+
         return (
           <Command.Item
             key={item.id}