refactor: Use i18next for language resolution

Due to https://github.com/i18next/i18next/issues/1564 we still have to
implement our own language resolution, but we can rely on
resolvedLanguage to determine which language to pass through to the
renderer.

We will use the language detected by chromium as the system locale, so
there is no need to use os-locale for detection any more.

We use i18next in the main process do resolve the language, then set the
resolve (not requested!) language in the renderer process to avoid doing
resolution twice. This avoids the need in the renderer process to know
the list of supported languages.

We set the language and the writing direction in HTML in the renderer.

Signed-off-by: Kristóf Marussy <kristof@marussy.com>

2 files changed, 76 insertions, 116 deletions

diff --git a/packages/main/src/i18n/loadLocalization.ts b/packages/main/src/i18n/loadLocalization.ts
index 0413373..507075d 100644
--- a/packages/main/src/i18n/loadLocalization.ts
+++ b/packages/main/src/i18n/loadLocalization.ts
@@ -18,49 +18,108 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { FALLBACK_LOCALE } from '@sophie/shared';
-import i18next from 'i18next';
-import { autorun } from 'mobx';
+import { FALLBACK_LOCALE, SYSTEM_LOCALE } from '@sophie/shared';
+import i18next, { i18n } from 'i18next';
+import { reaction } from 'mobx';
 import { addDisposer } from 'mobx-state-tree';
 
 import type MainStore from '../stores/MainStore';
 import { getLogger } from '../utils/log';
 
 import I18nStore from './I18nStore';
-import LocatlizationRepository from './LocalizationRepository';
+import type LocatlizationRepository from './LocalizationRepository';
 import RepositoryBasedI18nBackend from './RepositoryBasedI18nBackend';
 import i18nLog from './i18nLog';
 
 const log = getLogger('loadLocationzation');
 
+const TEST_LOCALE = 'cimode';
+
+function getLanguage(
+  language: string,
+  systemLocale: string,
+  supportedLanguages: string[],
+): string {
+  const selectedLanguage = language === SYSTEM_LOCALE ? systemLocale : language;
+  if (selectedLanguage === TEST_LOCALE) {
+    return selectedLanguage;
+  }
+  // Even though i18next has a `supportedLngs` array from which it can pick a supported language,
+  // we still have to do this ourselves to avoid spurious warnings like
+  // https://github.com/i18next/i18next/issues/1564
+  if (supportedLanguages.includes(selectedLanguage)) {
+    return selectedLanguage;
+  }
+  if (selectedLanguage.includes('-')) {
+    const iso639 = selectedLanguage.split('-')[0];
+    if (supportedLanguages.includes(iso639)) {
+      return iso639;
+    }
+  }
+  return FALLBACK_LOCALE;
+}
+
+function updateSharedStoreLanguage(store: MainStore, i18nInstance: i18n): void {
+  const resolvedLanguage =
+    i18nInstance.language === TEST_LOCALE
+      ? TEST_LOCALE
+      : i18nInstance.resolvedLanguage;
+  const dir = i18nInstance.dir();
+  // We do not want to pass the list of supported languages to the renderer process,
+  // so we extract the resolved languages from `i18n` as pass only that to the renderer.
+  // Thus, the renderer always selects a language that is actually supported.
+  store.shared.setLanguage(resolvedLanguage, dir);
+  log.debug('Loaded language', resolvedLanguage, 'with direction', dir);
+}
+
 export default async function loadLocalization(
   store: MainStore,
+  systemLocale: string,
+  supportedLanguages: string[],
   repository: LocatlizationRepository,
   devMode: boolean,
 ): Promise<void> {
   const backend = new RepositoryBasedI18nBackend(repository, devMode);
-  const i18n = i18next
+  const i18nInstance = i18next
     .createInstance({
-      lng: store.shared.language,
+      lng: getLanguage(
+        store.settings.language,
+        systemLocale,
+        supportedLanguages,
+      ),
+      supportedLngs: supportedLanguages,
       fallbackLng: [FALLBACK_LOCALE],
       debug: devMode,
       saveMissing: devMode,
     })
     .use(backend)
     .use(i18nLog);
-  const i18nStore = new I18nStore(i18n);
+  const i18nStore = new I18nStore(i18nInstance);
   store.setI18n(i18nStore);
-  await i18n.init();
-  const disposeChangeLanguage = autorun(() => {
-    const {
-      shared: { language },
-    } = store;
-    if (i18n.language !== language) {
-      log.debug('Setting language', language);
-      i18n.changeLanguage(language).catch((error) => {
+
+  await i18nInstance.init();
+  updateSharedStoreLanguage(store, i18nInstance);
+
+  const disposeChangeLanguage = reaction(
+    () => store.settings.language,
+    (languageSetting) => {
+      (async () => {
+        const languageToSet = getLanguage(
+          languageSetting,
+          systemLocale,
+          supportedLanguages,
+        );
+        if (i18nInstance.language !== languageToSet) {
+          await i18nInstance.changeLanguage(languageToSet);
+          updateSharedStoreLanguage(store, i18nInstance);
+        }
+      })().catch((error) => {
         log.error('Failed to change language', error);
       });
-    }
-  });
+    },
+    {
+      fireImmediately: true,
+    },
+  );
   addDisposer(store, disposeChangeLanguage);
 }
diff --git a/packages/main/src/i18n/synchronizeLocalizationSettings.ts b/packages/main/src/i18n/synchronizeLocalizationSettings.ts
deleted file mode 100644
index 971a593..0000000
--- a/packages/main/src/i18n/synchronizeLocalizationSettings.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-/*
- * Copyright (C)  2022 Kristóf Marussy <kristof@marussy.com>
- *
- * This file is part of Sophie.
- *
- * Sophie is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, version 3.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-import { FALLBACK_LOCALE, SYSTEM_LOCALE } from '@sophie/shared';
-import { reaction } from 'mobx';
-import { addDisposer } from 'mobx-state-tree';
-
-import type MainStore from '../stores/MainStore';
-import { getLogger } from '../utils/log';
-
-const log = getLogger('synchronizeLocalizationSettings');
-
-export const TEST_LOCALE = 'cimode';
-
-/**
- * Finds the closes requested supported language for the requested one.
- *
- * If `language` is supported, this function will return it.
- * Otherwise, it returns a supported language with the same ISO639 code but
- * no country code (e.g., `en` for `en-GB`) if it exists.
- * If no supported language matches, `FALLBACK_LOCALE` will be returned.
- *
- * @param language The requested language.
- * @param supportedLanguages  The set of supported languages.
- * @returns The language to load.
- */
-function getMatchingLocale(
-  language: string,
-  supportedLanguages: Set<string>,
-): string {
-  // Also let the test locale (i.e., show localization keys directly) through.
-  if (language === TEST_LOCALE || supportedLanguages.has(language)) {
-    return language;
-  }
-  const separatorIndex = language.indexOf('-');
-  if (separatorIndex < 0) {
-    return FALLBACK_LOCALE;
-  }
-  const iso639 = language.slice(0, Math.max(0, separatorIndex));
-  if (supportedLanguages.has(iso639)) {
-    return iso639;
-  }
-  return FALLBACK_LOCALE;
-}
-
-export async function synchronizeLocalizationSettings(
-  store: MainStore,
-  supportedLanguages: string[],
-  osLocale: () => Promise<string>,
-): Promise<void> {
-  const { settings, shared } = store;
-  const supportedLangaugesSet = new Set(supportedLanguages);
-  const setLanguageAsync = async (languageSetting: string) => {
-    const requestedLanguage =
-      languageSetting === SYSTEM_LOCALE ? await osLocale() : languageSetting;
-    const matchingLanguage = getMatchingLocale(
-      requestedLanguage,
-      supportedLangaugesSet,
-    );
-    log.debug(
-      'Setting language',
-      matchingLanguage,
-      'for requested language',
-      requestedLanguage,
-    );
-    shared.setLanguage(matchingLanguage);
-  };
-  const disposer = reaction(
-    () => settings.language,
-    (languageSetting) => {
-      setLanguageAsync(languageSetting).catch((error) => {
-        log.error('Failed to update language', error);
-      });
-    },
-    {
-      fireImmediately: false,
-    },
-  );
-  addDisposer(store, disposer);
-  // Make sure that the language is already set when we resolve.
-  await setLanguageAsync(settings.language);
-}