chore: Clean up `src/i18n.ts` changes

src/element/subtypes/index.ts

@@ -3,7 +3,7 @@ import { ExcalidrawElement, ExcalidrawTextElement, NonDeleted } from "../types";
 import { getNonDeletedElements } from "../";
 import { getSelectedElements } from "../../scene";
 import { AppState, ExcalidrawImperativeAPI, ToolType } from "../../types";
-import { registerAuxLangData } from "../../i18n";
+import { LangLdr, registerCustomLangData } from "../../i18n";
 
 import {
   Action,
@@ -331,10 +331,7 @@ export type SubtypeCheckFn = (element: ExcalidrawElement) => boolean;
 // Functions to prepare subtypes for use
 export type SubtypePrepFn = (
   addSubtypeAction: (action: Action) => void,
-  addLangData: (
-    fallbackLangData: Object,
-    setLanguageAux: (langCode: string) => Promise<Object | undefined>,
-  ) => void,
+  addLangData: (fallbackLangData: {}, setLanguageAux: LangLdr) => void,
   onSubtypeLoaded?: SubtypeLoadedCb,
 ) => {
   actions: Action[];
@@ -411,7 +408,7 @@ export const prepareSubtype = (
   // Prepare the subtype
   const { actions, methods } = subtypePrepFn(
     addSubtypeAction,
-    registerAuxLangData,
+    registerCustomLangData,
     onSubtypeLoaded,
   );
 

src/element/subtypes/mathjax/implementation.tsx

@@ -25,7 +25,7 @@ import { getElementAbsoluteCoords } from "../../../element/bounds";
 import Scene from "../../../scene/Scene";
 
 // Imports for actions
-import { t, registerAuxLangData } from "../../../i18n";
+import { LangLdr, registerCustomLangData, t } from "../../../i18n";
 import { Action, makeCustomActionName } from "../../../actions/types";
 import { AppState } from "../../../types";
 import {
@@ -1611,19 +1611,12 @@ export const prepareMathSubtype = function (
   methods.render = renderMathElement;
   methods.renderSvg = renderSvgMathElement;
   methods.wrapText = wrapMathElement;
-  const getLangData = async (langCode: string): Promise<Object | undefined> => {
-    try {
-      const condData = await import(
-        /* webpackChunkName: "locales/[request]" */ `./locales/${langCode}.json`
-      );
-      if (condData) {
-        return condData;
-      }
-    } catch (e) {}
-    return undefined;
-  };
+  const getLangData: LangLdr = (langCode) =>
+    import(
+      /* webpackChunkName: "locales/[request]" */ `./locales/${langCode}.json`
+    );
   addLangData(fallbackMathJaxLangData, getLangData);
-  registerAuxLangData(fallbackMathJaxLangData, getLangData);
+  registerCustomLangData(fallbackMathJaxLangData, getLangData);
 
   const actions = createMathActions();
   actions.forEach((action) => addSubtypeAction(action));

src/i18n.ts

@@ -87,20 +87,15 @@ if (import.meta.env.DEV) {
 let currentLang: Language = defaultLang;
 let currentLangData = {};
 
-const auxCurrentLangData = Array<Object>();
-const auxFallbackLangData = Array<Object>();
-const auxSetLanguageFuncs =
-  Array<(langCode: string) => Promise<Object | undefined>>();
-
-export const registerAuxLangData = (
-  fallbackLangData: Object,
-  setLanguageAux: (langCode: string) => Promise<Object | undefined>,
-) => {
-  if (auxFallbackLangData.includes(fallbackLangData)) {
-    return;
+let fallbackCustomLangData = {};
+const langLoaders: LangLdr[] = [];
+export type LangLdr = (langCode: string) => Promise<{}>;
+
+export const registerCustomLangData = (fallbackLangData: {}, ldr: LangLdr) => {
+  if (!langLoaders.includes(ldr)) {
+    fallbackCustomLangData = { ...fallbackLangData, ...fallbackCustomLangData };
+    langLoaders.push(ldr);
   }
-  auxFallbackLangData.push(fallbackLangData);
-  auxSetLanguageFuncs.push(setLanguageAux);
 };
 
 export const setLanguage = async (lang: Language) => {
@@ -115,21 +110,18 @@ export const setLanguage = async (lang: Language) => {
       currentLangData = await import(
         /* webpackChunkName: "locales/[request]" */ `./locales/${currentLang.code}.json`
       );
-      // Empty the auxCurrentLangData array
-      while (auxCurrentLangData.length > 0) {
-        auxCurrentLangData.pop();
-      }
-      // Fill the auxCurrentLangData array with each locale file found in auxLangDataRoots for this language
-      auxSetLanguageFuncs.forEach(async (setLanguageFn) => {
-        const condData = await setLanguageFn(currentLang.code);
-        if (condData) {
-          auxCurrentLangData.push(condData);
-        }
-      });
     } catch (error: any) {
       console.error(`Failed to load language ${lang.code}:`, error.message);
       currentLangData = fallbackLangData;
     }
+    const auxData = langLoaders.map((fn) => fn(currentLang.code));
+    while (auxData.length > 0) {
+      try {
+        currentLangData = { ...(await auxData.pop()), ...currentLangData };
+      } catch (error: any) {
+        console.error(`Error loading ${lang.code} extra data:`, error.message);
+      }
+    }
   }
 
   jotaiStore.set(editorLangCodeAtom, lang.code);
@@ -169,14 +161,8 @@ export const t = (
   let translation =
     findPartsForData(currentLangData, parts) ||
     findPartsForData(fallbackLangData, parts) ||
+    findPartsForData(fallbackCustomLangData, parts) ||
     fallback;
-  const auxData = Array<Object>().concat(
-    auxCurrentLangData,
-    auxFallbackLangData,
-  );
-  for (let i = 0; i < auxData.length; i++) {
-    translation = translation || findPartsForData(auxData[i], parts);
-  }
   if (translation === undefined) {
     const errorMessage = `Can't find translation for ${path}`;
     // in production, don't blow up the app on a missing translation key

src/tests/subtypes.test.tsx

@@ -27,7 +27,7 @@ import {
 } from "../element/types";
 import { createIcon, iconFillColor } from "../components/icons";
 import { SubtypeButton } from "../components/Subtypes";
-import { registerAuxLangData } from "../i18n";
+import { LangLdr, registerCustomLangData } from "../i18n";
 import { getFontString, getShortcutKey } from "../utils";
 import * as textElementUtils from "../element/textElement";
 import { isTextElement } from "../element";
@@ -46,17 +46,8 @@ const FONTSIZE = 20;
 const DBFONTSIZE = 40;
 const TRFONTSIZE = 60;
 
-const getLangData = async (langCode: string): Promise<Object | undefined> => {
-  try {
-    const condData = await import(
-      /* webpackChunkName: "locales/[request]" */ `./helpers/locales/${langCode}.json`
-    );
-    if (condData) {
-      return condData;
-    }
-  } catch (e) {}
-  return undefined;
-};
+const getLangData: LangLdr = (langCode) =>
+  import(`./helpers/locales/${langCode}.json`);
 
 const testSubtypeIcon = ({ theme }: { theme: Theme }) =>
   createIcon(
@@ -155,7 +146,7 @@ const prepareTest1Subtype = function (
   methods.clean = cleanTestElementUpdate;
 
   addLangData(fallbackLangData, getLangData);
-  registerAuxLangData(fallbackLangData, getLangData);
+  registerCustomLangData(fallbackLangData, getLangData);
 
   const actions = [testAction, test1Button];
   actions.forEach((action) => addSubtypeAction(action));
@@ -223,7 +214,7 @@ const prepareTest2Subtype = function (
   } as SubtypeMethods;
 
   addLangData(fallbackLangData, getLangData);
-  registerAuxLangData(fallbackLangData, getLangData);
+  registerCustomLangData(fallbackLangData, getLangData);
 
   const actions = [test2Button];
   actions.forEach((action) => addSubtypeAction(action));
@@ -241,7 +232,7 @@ const prepareTest3Subtype = function (
   const methods = {} as SubtypeMethods;
 
   addLangData(fallbackLangData, getLangData);
-  registerAuxLangData(fallbackLangData, getLangData);
+  registerCustomLangData(fallbackLangData, getLangData);
 
   const actions = [test3Button];
   actions.forEach((action) => addSubtypeAction(action));