refactor: use lazy loading for localization files

package.json

@@ -7,7 +7,7 @@
         "dev": "cross-env PLATFORM=windows vite serve src",
         "dev-linux": "cross-env PLATFORM=linux vite serve src",
         "dev:test": "concurrently \"npm run dev\" \"jest --watchAll\"",
-        "localization": "node ./src/localization/localizationHelperCLI.js",
+        "localization": "node ./src/shared/utils/localizationHelperCLI.js",
         "test": "jest",
         "test:coverage": "jest --coverage",
         "prod": "cross-env PLATFORM=windows vite build src",

src/localization/index.js

@@ -0,0 +1,37 @@
+const langCodes = [
+    'cs',
+    'en',
+    'es',
+    'fr',
+    'hu',
+    'ja',
+    'ko',
+    'pl',
+    'pt',
+    'ru',
+    'th',
+    'vi',
+    'zh-CN',
+    'zh-TW'
+];
+
+async function getLocalizationStrings() {
+    const urlPromises = Promise.all(
+        langCodes.map((code) =>
+            import(`./${code}.json?url`).then((m) => m.default)
+        )
+    );
+
+    const urls = await urlPromises;
+    const fetchPromises = Promise.all(
+        urls.map((url) => fetch(url).then((res) => res.json()))
+    );
+    const results = await fetchPromises;
+    const entries = langCodes.map((code, index) => {
+        return [code, results[index]];
+    });
+
+    return Object.fromEntries(entries);
+}
+
+export { getLocalizationStrings };

src/localization/localizedStrings.js

@@ -1,44 +0,0 @@
-import en from './en/en.json' assert { type: 'JSON' };
-
-import es from './es/en.json' assert { type: 'JSON' };
-
-import fr from './fr/en.json' assert { type: 'JSON' };
-
-import hu from './hu/en.json' assert { type: 'JSON' };
-
-import ja from './ja/en.json' assert { type: 'JSON' };
-
-import ko from './ko/en.json' assert { type: 'JSON' };
-
-import pl from './pl/en.json' assert { type: 'JSON' };
-
-import pt from './pt/en.json' assert { type: 'JSON' };
-
-import cs from './cs/en.json' assert { type: 'JSON' };
-
-import ru from './ru/en.json' assert { type: 'JSON' };
-
-import vi from './vi/en.json' assert { type: 'JSON' };
-
-import zh_CN from './zh-CN/en.json' assert { type: 'JSON' };
-
-import zh_TW from './zh-TW/en.json' assert { type: 'JSON' };
-
-import th from './th/en.json' assert { type: 'JSON' };
-
-export {
-    en,
-    es,
-    fr,
-    hu,
-    ja,
-    ko,
-    pl,
-    pt,
-    cs,
-    ru,
-    vi,
-    zh_CN,
-    zh_TW,
-    th
-};

src/plugin/i18n.js

@@ -1,6 +1,8 @@
 import { createI18n } from 'vue-i18n';
 
-import * as localizedStrings from '../localization/localizedStrings';
+import { getLocalizationStrings } from '../localization/index.js';
+
+const localizedStrings = await getLocalizationStrings();
 
 const i18n = createI18n({
     locale: 'en',

src/shared/utils/localizationHelperCLI.js

@@ -9,11 +9,15 @@ const { hideBin } = require('yargs/helpers');
 
 const getLocalizationObjects = function* () {
     const localeFolder = './src/localization';
-    const folders = fs
+    const files = fs
         .readdirSync(localeFolder, { withFileTypes: true })
-        .filter((file) => file.isDirectory());
-    for (const folder of folders) {
-        const filePath = path.join(localeFolder, folder.name, 'en.json');
+        .filter(
+            (file) =>
+                file.isFile() &&
+                path.extname(file.name).toLowerCase() === '.json'
+        );
+    for (const file of files) {
+        const filePath = path.join(localeFolder, file.name);
         const jsonStr = fs.readFileSync(filePath);
         yield [filePath, JSON.parse(jsonStr)];
     }
@@ -119,8 +123,8 @@ const removeLocalizationKey = (key) => {
 // Yes this code is extremely slow, but it doesn't run very often so.
 const Validate = function () {
     const files = [...getLocalizationObjects()];
-    const enIndex = files.findIndex((file) =>
-        path.dirname(file[0]).endsWith('en')
+    const enIndex = files.findIndex(
+        (file) => path.basename(file[0]) === 'en.json'
     );
     const [_, enObj] = files.splice(enIndex, 1)[0];