[i18n] Load "en" translations parallely

config/context_processors.py

@@ -1,17 +1,50 @@
 from django.conf import settings
+from django.templatetags.static import static
+
 
 from mathesar.utils.frontend import get_manifest_data
 
 
 def frontend_settings(request):
+    manifest_data = get_manifest_data()
+    development_mode = settings.MATHESAR_MODE == 'DEVELOPMENT'
+
+    i18n_settings = get_i18n_settings(manifest_data, development_mode)
     frontend_settings = {
-        'development_mode': settings.MATHESAR_MODE == 'DEVELOPMENT',
-        'manifest_data': get_manifest_data(),
+        'development_mode': development_mode,
+        'manifest_data': manifest_data,
         'live_demo_mode': getattr(settings, 'MATHESAR_LIVE_DEMO', False),
         'live_demo_username': getattr(settings, 'MATHESAR_LIVE_DEMO_USERNAME', None),
         'live_demo_password': getattr(settings, 'MATHESAR_LIVE_DEMO_PASSWORD', None),
+        **i18n_settings
     }
     # Only include development URL if we're in development mode.
     if frontend_settings['development_mode'] is True:
         frontend_settings['client_dev_url'] = settings.MATHESAR_CLIENT_DEV_URL
+
     return frontend_settings
+
+
+def get_i18n_settings(manifest_data, development_mode):
+    """
+    Hard coding this for now
+    but will be taken from users model
+    and cookies later on
+    """
+    preferred_language = 'en'
+    default_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'
+    else:
+        try:
+            module_translations_file_path = static(manifest_data[preferred_language]["file"])
+        except KeyError:
+            module_translations_file_path = static(manifest_data[default_language]["file"])
+
+    return {
+        'module_translations_file_path': module_translations_file_path,
+        'preferred_language': preferred_language
+    }

config/settings/common_settings.py

@@ -15,6 +15,7 @@
 
 from decouple import Csv, config as decouple_config
 from dj_database_url import parse as db_url
+from django.utils.translation import gettext_lazy
 
 
 # We use a 'tuple' with pipes as delimiters as decople naively splits the global
@@ -250,3 +251,9 @@ def pipe_delim(pipe_string):
 }
 # List of Template names that contains additional script tags to be added to the base template
 BASE_TEMPLATE_ADDITIONAL_SCRIPT_TEMPLATES = []
+
+# i18n
+LANGUAGES = [
+    ('en', gettext_lazy('English')),
+    ('ja', gettext_lazy('Japanese')),
+]

mathesar/templates/mathesar/index.html

@@ -4,9 +4,11 @@
 {% block title %}Home{% endblock %}
 
 {% block styles %}
-  {% if not development_mode %} {% for css_file in manifest_data.module_css %}
-    <link rel="stylesheet" href="{% static css_file %}" />
-  {% endfor %} {% endif %}
+  {% if not development_mode %} 
+    {% for css_file in manifest_data.module_css %}
+      <link rel="stylesheet" href="{% static css_file %}" />
+    {% endfor %} 
+  {% endif %}
 {% endblock %}
 
 {% block scripts %}
@@ -17,6 +19,16 @@
     {% endfor %}
   {% endif %}
 
+  <script type="module">
+    import("{{ module_translations_file_path }}").then(translations => {
+      window.mathesar = window.mathesar || {};
+      window.mathesar.translations = {
+        lang: "{{ preferred_language }}",
+        translationStrings: JSON.stringify(translations.default)
+      };
+    })
+  </script>
+
   {% if development_mode %}
     <script type="module" src="{{ client_dev_url }}/@vite/client"></script>
     <script type="module" src="{{ client_dev_url }}/src/main.ts"></script>
@@ -52,12 +64,13 @@
     ></script>
     <script
       nomodule
-      id="vite-legacy-entry"
+      id="vite-legacy-js-slot"
       data-src="{% static manifest_data.legacy_js %}"
     >
       System.import(
-        document.getElementById("vite-legacy-entry").getAttribute("data-src")
+        document.getElementById("vite-legacy-js-slot").getAttribute("data-src")
       );
     </script>
+
   {% endif %}
 {% endblock %}

mathesar/utils/frontend.py

@@ -21,11 +21,13 @@ def get_manifest_data():
     module_data = raw_data['src/main.ts']
     manifest_data['module_css'] = [filename for filename in module_data['css']]
     manifest_data['module_js'] = module_data['file']
-
     legacy_data = raw_data['src/main-legacy.ts']
     manifest_data['legacy_polyfill_js'] = raw_data['vite/legacy-polyfills-legacy']['file']
     manifest_data['legacy_js'] = legacy_data['file']
 
+    for locale, _ in settings.LANGUAGES or []:
+        manifest_data[locale] = raw_data[f'src/i18n/{locale}/index.ts']
+
     # Cache data for 1 hour
     cache.set('manifest_data', manifest_data, 60 * 60)
     return manifest_data

mathesar_ui/src/App.svelte

@@ -3,38 +3,51 @@
   import { preloadCommonData } from '@mathesar/utils/preloadData';
   import AppContext from './AppContext.svelte';
   import RootRoute from './routes/RootRoute.svelte';
-  import { loadLocaleAsync } from './i18n/i18n-load';
   import { setLocale } from './i18n/i18n-svelte';
-  import type { RequestStatus } from './api/utils/requestUtils';
-  import { getErrorMessage } from './utils/errors';
   import ErrorBox from './components/message-boxes/ErrorBox.svelte';
+  import { loadLocaleAsync, loadTranslations } from './i18n/i18n-load';
 
+  let isTranslationsLoaded = false;
   /**
-   * Later the translations file will be loaded
-   * in parallel to the FE's first chunk
+   * Why translations are being read from window object?
+   * In order to -
+   * 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
    */
-  let translationLoadStatus: RequestStatus = { state: 'processing' };
   void (async () => {
-    try {
+    const { translations } = window.mathesar || {};
+    if (translations) {
+      loadTranslations(
+        translations.lang,
+        JSON.parse(translations.translationStrings),
+      );
+      setLocale(translations.lang);
+      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');
-      setLocale('en');
-      translationLoadStatus = { state: 'success' };
-    } catch (exp) {
-      translationLoadStatus = {
-        state: 'failure',
-        errors: [getErrorMessage(exp)],
-      };
+      isTranslationsLoaded = true;
     }
   })();
 
   const commonData = preloadCommonData();
 </script>
 
-{#if translationLoadStatus.state === 'success' && commonData}
+{#if isTranslationsLoaded && commonData}
   <AppContext {commonData}>
     <RootRoute {commonData} />
   </AppContext>
-{:else if translationLoadStatus.state === 'processing'}
+{:else if !isTranslationsLoaded}
   <div class="app-loader">
     <Spinner size="2rem" />
   </div>

mathesar_ui/src/global.d.ts

@@ -5,3 +5,11 @@ declare module '*.mdx' {
   const value: string;
   export default value;
 }
+
+interface Window {
+  mathesar:
+    | {
+        translations: { lang: Locales; translationStrings: string } | undefined;
+      }
+    | undefined;
+}

mathesar_ui/src/i18n/i18n-load.ts

@@ -30,3 +30,8 @@ export async function loadLocaleAsync(locale: Locales): Promise<void> {
   updateTranslationsDictionary(locale, await importLocaleAsync(locale));
   loadFormatters(locale);
 }
+
+export function loadTranslations(locale: Locales, translations: Translations) {
+  updateTranslationsDictionary(locale, translations);
+  loadFormatters(locale);
+}

mathesar_ui/vite.config.js

@@ -38,7 +38,11 @@ export default defineConfig({
   build: {
     manifest: true,
     rollupOptions: {
-      input: './src/main.ts',
+      input: {
+        main: './src/main.ts',
+        en: './src/i18n/en/index.ts',
+        ja: './src/i18n/ja/index.ts',
+      },
     },
     outDir: '../mathesar/static/mathesar/',
     emptyOutDir: true,