Load languages lazily (#214)

* Load languages lazily * Prettier * Fix bug
PIVX-Labs · Sep 26, 2023 · 2a42b60 · 2a42b60
1 parent 5b97200
commit 2a42b60
Show file tree

Hide file tree

Showing 11 changed files with 22 additions and 37 deletions.
diff --git a/locale/de/translation.js b/locale/de/translation.js
@@ -1,4 +1,4 @@
-export const de_translation = {
+export default {
     // This document is to be used as a template as all the base code is in English
     // Basic HTML tags are allowed such as <b><i> etc. All data is sanitized https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
 

diff --git a/locale/en/translation.js b/locale/en/translation.js
@@ -1,4 +1,4 @@
-export const en_translation = {
+export default {
     // This document is to be used as a template as all the base code is in English
     // Basic HTML tags are allowed such as <b><i> etc. All data is sanitized https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
 

diff --git a/locale/es-mx/translation.js b/locale/es-mx/translation.js
@@ -1,4 +1,4 @@
-export const es_mx_translation = {
+export default {
     // Este documento se debe usar como una plantilla ya que todo el código base está en inglés
     // Se permiten etiquetas HTML básicas como <b><i> etc. Todos los datos están saneados https://developer.mozilla.org/es/docs/Web/API/Element/innerHTML
 

diff --git a/locale/fr/translation.js b/locale/fr/translation.js
@@ -1,4 +1,4 @@
-export const fr_translation = {
+export default {
     // Les balises HTML de base sont autorisées, comme <b><i>, etc. Toutes les données sont nettoyées https://developer.mozilla.org/fr/docs/Web/API/Element/innerHTML
 
     // NOTA: Si une section n'a PAS besoin d'être traduite, laissez-la vide..

diff --git a/locale/it/translation.js b/locale/it/translation.js
@@ -1,4 +1,4 @@
-export const it_translation = {
+export default {
     // Sono consentiti tag HTML di base, come <b><i> ecc. Tutti i dati vengono puliti https://developer.mozilla.org/fr/docs/Web/API/Element/innerHTML
 
     // NOTA: Se una sezione NON necessita di traduzione , lasciala vuota.

diff --git a/locale/ph/translation.js b/locale/ph/translation.js
@@ -1,4 +1,4 @@
-export const ph_translation = {
+export default {
     // This document is to be used as a template as all the base code is in English
     // Basic HTML tags are allowed such as <b><i> etc. All data is sanitized https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
 

diff --git a/locale/pt-br/translation.js b/locale/pt-br/translation.js
@@ -1,4 +1,4 @@
-export const pt_br_translation = {
+export default {
     // As tags básicas HTML são permitidas como <b><i> etc. Todos os dados são higienizados https://developer.mozilla.org/pt-BR/docs/Web/API/Element/innerHTML
 
     // NOTA: Se uma seção NÃO precisar ser traduzida, deixe-a vazia.

diff --git a/locale/pt-pt/translation.js b/locale/pt-pt/translation.js
@@ -1,4 +1,4 @@
-export const pt_pt_translation = {
+export default {
     // As tags básicas HTML são permitidas como <b><i> etc. Todos os dados são higienizados https://developer.mozilla.org/pt-BR/docs/Web/API/Element/innerHTML
 
     // NOTA: Se uma seção NÃO precisar ser traduzida, deixe-a vazia.

diff --git a/locale/template/translation.js b/locale/template/translation.js
@@ -1,4 +1,4 @@
-export const translation_template = {
+export default {
     // This document is to be used as a template as all the base code is in English
     // Basic HTML tags are allowed such as <b><i> etc. All data is sanitized https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
 

diff --git a/locale/uwu/translation.js b/locale/uwu/translation.js
@@ -1,4 +1,4 @@
-export const uwu_translation = {
+export default {
     // Basic HTML tags are allowed such as <b><i> etc. All data is sanitized https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
 
     // NOTE: If a section does NOT need translating, leave it empty.

diff --git a/scripts/i18n.js b/scripts/i18n.js
@@ -1,13 +1,4 @@
 import { translation_template } from '../locale/template/translation.js';
-import { en_translation } from '../locale/en/translation.js';
-import { pt_br_translation } from '../locale/pt-br/translation.js';
-import { pt_pt_translation } from '../locale/pt-pt/translation.js';
-import { es_mx_translation } from '../locale/es-mx/translation.js';
-import { ph_translation } from '../locale/ph/translation.js';
-import { uwu_translation } from '../locale/uwu/translation.js';
-import { fr_translation } from '../locale/fr/translation.js';
-import { it_translation } from '../locale/it/translation.js';
-import { de_translation } from '../locale/de/translation.js';
 import { Database } from './database.js';
 import { fillAnalyticSelect, setTranslation } from './settings.js';
 import { updateEncryptionGUI } from './global.js';
@@ -26,32 +17,28 @@ export const ALERTS = {};
  */
 export const translation = reactive({});
 
-// TRANSLATION
-//Create an object of objects filled with all the translations
-export const translatableLanguages = {
-    en: en_translation,
-    uwu: uwu_translation,
-    'pt-pt': pt_pt_translation,
-    'pt-br': pt_br_translation,
-    'es-mx': es_mx_translation,
-    ph: ph_translation,
-    fr: fr_translation,
-    it: it_translation,
-    de: de_translation,
-};
+/**
+ * @param {string} code
+ * @returns {Promise<translation_template>}
+ */
+async function getLanguage(code) {
+    return (await import(`../locale/${code}/translation.js`)).default;
+}
 
 /**
  * Takes the language name and sets the translation settings based on the language file
  * @param {string} langName
  */
-export function switchTranslation(langName) {
+export async function switchTranslation(langName) {
     if (arrActiveLangs.find((lang) => lang.code === langName)) {
         // Load every 'active' key of the language, otherwise, we'll default the key to the EN file
-        const arrNewLang = translatableLanguages[langName];
+        const arrNewLang = await getLanguage(langName);
         for (const strKey of Object.keys(arrNewLang)) {
             // Skip empty and/or missing i18n keys, defaulting them to EN
             if (!arrNewLang[strKey]) {
-                translation[strKey] = translatableLanguages.en[strKey];
+                // It's fine if we import a language multiple times
+                // Webpack will fetch it once from the server
+                translation[strKey] = (await getLanguage('en'))[strKey];
                 continue;
             }
 
@@ -155,7 +142,6 @@ function parseUserAgentLang(strUA, arrLangsWithSubset) {
     return strUA;
 }
 
-// When adding a lang remember to add it to the object translatableLanguages as well as here.
 export const arrActiveLangs = [
     { code: 'en', emoji: '🇬🇧' },
     { code: 'fr', emoji: '🇫🇷' },
@@ -180,7 +166,6 @@ export async function start() {
         ? parseUserAgentLang(localeLang.toLowerCase(), arrLangsWithSubset)
         : undefined;
 
-    // When removing you do not have to remove from translatableLanguages
     const database = await Database.getInstance();
     const { translation: localTranslation } = await database.getSettings();