read new translations format in App.svelte

mathesar-foundation · Oct 9, 2023 · e30a065 · e30a065
1 parent 6c50c83
commit e30a065
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 26 deletions.
diff --git a/config/context_processors.py b/config/context_processors.py
@@ -31,24 +31,24 @@ def get_i18n_settings(manifest_data, development_mode):
     but will be taken from users model
     and cookies later on
     """
-    preferred_language = 'en'
-    default_language = 'en'
+    display_language = 'en'
+    fallback_language = 'en'
 
     client_dev_url = settings.MATHESAR_CLIENT_DEV_URL
 
     if development_mode is True:
-        module_translations_file_path = f'{client_dev_url}/src/i18n/{preferred_language}/index.ts'
-        legacy_translations_file_path = f'{client_dev_url}/src/i18n/{preferred_language}/index.ts'
+        module_translations_file_path = f'{client_dev_url}/src/i18n/{display_language}/index.ts'
+        legacy_translations_file_path = f'{client_dev_url}/src/i18n/{display_language}/index.ts'
     else:
         try:
-            module_translations_file_path = static(manifest_data[preferred_language]["file"])
-            legacy_translations_file_path = static(manifest_data[f"{preferred_language}-legacy"]["file"])
+            module_translations_file_path = static(manifest_data[display_language]["file"])
+            legacy_translations_file_path = static(manifest_data[f"{display_language}-legacy"]["file"])
         except KeyError:
-            module_translations_file_path = static(manifest_data[default_language]["file"])
-            legacy_translations_file_path = static(manifest_data[f"{default_language}-legacy"]["file"])
+            module_translations_file_path = static(manifest_data[fallback_language]["file"])
+            legacy_translations_file_path = static(manifest_data[f"{fallback_language}-legacy"]["file"])
 
     return {
         'module_translations_file_path': module_translations_file_path,
         'legacy_translations_file_path': legacy_translations_file_path,
-        'preferred_language': preferred_language
+        'display_language': display_language
     }
diff --git a/mathesar_ui/src/App.svelte b/mathesar_ui/src/App.svelte
@@ -14,27 +14,18 @@
    * 1. Load the translations file in parallel to the first FE chunk.
    * 2. And then make it available for the entry(App.svelte)
    *    file to load them into memory.
-   * the index.html loads it as using a script tag and attach it
-   * to the window object which is being read here
+   *
+   * The index.html loads it as using a script tag
+   * Each translations file on load, attaches the translations
+   * to the window object
    */
   void (async () => {
-    const { translations } = window.mathesar || {};
-    if (translations) {
-      loadTranslations(
-        translations.lang,
-        JSON.parse(translations.translationStrings),
-      );
-      setLocale(translations.lang);
+    const { translations, displayLanguage } = window.Mathesar || {};
+    if (translations && displayLanguage) {
+      loadTranslations(displayLanguage, translations[displayLanguage]);
+      setLocale(displayLanguage);
       isTranslationsLoaded = true;
     } else {
-      /**
-       * !!! CAUTION: DO NOT REMOVE THIS !!!
-       * Reason: Apart from loading the `en` translations as default
-       * when there are translations on the window object,
-       * this also tells the vite bundler to bundle
-       * it as a default exported module. Otherwise vite converts the
-       * default export to named exports internally for the sake of optimization.
-       */
       await loadLocaleAsync('en');
       isTranslationsLoaded = true;
     }

diff --git a/mathesar_ui/src/global.d.ts b/mathesar_ui/src/global.d.ts
@@ -9,6 +9,7 @@ declare module '*.mdx' {
 interface Window {
   Mathesar:
     | {
+        displayLanguage: Locales;
         translations: Record<Locales, Translations> | undefined;
       }
     | undefined;

diff --git a/mathesar_ui/src/i18n/i18n-util.ts b/mathesar_ui/src/i18n/i18n-util.ts
@@ -7,9 +7,17 @@ export function addTranslationsToGlobalObject(
   locale: Locales,
   translations: Translations,
 ) {
+  /**
+   * This function is being called by all of the translations files
+   * The base translation file is being loaded by the typesafe-i18n utility
+   * to generate types during the development time.
+   * Hence this function also runs in the context of node
+   * instead of just browser.
+   */
   if (typeof window === 'undefined') return;
   window.Mathesar = {
     ...window.Mathesar,
+    displayLanguage: locale,
     translations: {
       ...window.Mathesar?.translations,
       [locale]: translations,