From 2a42b604fddd265f0cd887bb99f9dc0a74cb6f1f Mon Sep 17 00:00:00 2001 From: Duddino Date: Tue, 26 Sep 2023 20:58:01 +0200 Subject: [PATCH] Load languages lazily (#214) * Load languages lazily * Prettier * Fix bug --- locale/de/translation.js | 2 +- locale/en/translation.js | 2 +- locale/es-mx/translation.js | 2 +- locale/fr/translation.js | 2 +- locale/it/translation.js | 2 +- locale/ph/translation.js | 2 +- locale/pt-br/translation.js | 2 +- locale/pt-pt/translation.js | 2 +- locale/template/translation.js | 2 +- locale/uwu/translation.js | 2 +- scripts/i18n.js | 39 +++++++++++----------------------- 11 files changed, 22 insertions(+), 37 deletions(-) diff --git a/locale/de/translation.js b/locale/de/translation.js index 2a30e1635..ec075d7b5 100644 --- 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 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 index a9817aa2c..e8b4a23b3 100644 --- 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 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 index 0e5d9439c..d59e50f80 100644 --- 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 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 index 571c49aea..a7d128722 100644 --- 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 , 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 index 3abdb5a21..fe5aa93cf 100644 --- 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 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 index 35851ea3e..1fce7a905 100644 --- 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 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 index 2de7b6a8a..b9d5b1b7f 100644 --- 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 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 index 06c1f2d13..6c09efe89 100644 --- 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 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 index 7fd634504..97d748da6 100644 --- 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 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 index 0803a7fd5..a4d629c44 100644 --- 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 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 index 8b9ab636b..e7c12a829 100644 --- 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} + */ +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();