feat: use i18next-resources-to-backend to lazy load i18n (#2738)

* feat: use i18next-resources-to-backend to lazy load i18n file

* feat: change source in yarn.lock

web/package.json

@@ -32,6 +32,7 @@
     "file-saver": "^2.0.5",
     "i18n-iso-countries": "^7.0.0",
     "i18next": "^19.8.9",
+    "i18next-resources-to-backend": "^1.2.0",
     "jwt-decode": "^4.0.0",
     "libphonenumber-js": "^1.10.19",
     "moment": "^2.29.1",

web/src/i18n.js

@@ -14,56 +14,9 @@
 
 import i18n from "i18next";
 import en from "./locales/en/data.json";
-import zh from "./locales/zh/data.json";
-import es from "./locales/es/data.json";
-import fr from "./locales/fr/data.json";
-import de from "./locales/de/data.json";
-import id from "./locales/id/data.json";
-import ja from "./locales/ja/data.json";
-import ko from "./locales/ko/data.json";
-import ru from "./locales/ru/data.json";
-import vi from "./locales/vi/data.json";
-import pt from "./locales/pt/data.json";
-import it from "./locales/it/data.json";
-import ms from "./locales/ms/data.json";
-import tr from "./locales/tr/data.json";
-import ar from "./locales/ar/data.json";
-import he from "./locales/he/data.json";
-import nl from "./locales/nl/data.json";
-import pl from "./locales/pl/data.json";
-import fi from "./locales/fi/data.json";
-import sv from "./locales/sv/data.json";
-import uk from "./locales/uk/data.json";
-import kk from "./locales/kk/data.json";
-import fa from "./locales/fa/data.json";
 import * as Conf from "./Conf";
 import {initReactI18next} from "react-i18next";
-
+import resourcesToBackend from "i18next-resources-to-backend";
-const resources = {
-  en: en,
-  zh: zh,
-  es: es,
-  fr: fr,
-  de: de,
-  id: id,
-  ja: ja,
-  ko: ko,
-  ru: ru,
-  vi: vi,
-  pt: pt,
-  it: it,
-  ms: ms,
-  tr: tr,
-  ar: ar,
-  he: he,
-  nl: nl,
-  pl: pl,
-  fi: fi,
-  sv: sv,
-  uk: uk,
-  kk: kk,
-  fa: fa,
-};
 
 function initLanguage() {
   let language = localStorage.getItem("language");
@@ -157,18 +110,24 @@ function initLanguage() {
   return language;
 }
 
-i18n.use(initReactI18next).init({
+await i18n.use(resourcesToBackend(async(language, namespace) => {
-  lng: initLanguage(),
+  const res = await import(`./locales/${language}/data.json`);
+  return res.default[namespace];
+}
+))
+  .use(initReactI18next)
+  .init({
+    lng: initLanguage(),
+    ns: Object.keys(en),
+    fallbackLng: Conf.DefaultLanguage,
 
-  resources: resources,
+    keySeparator: false,
 
-  keySeparator: false,
+    interpolation: {
-
+      escapeValue: true,
-  interpolation: {
+    },
-    escapeValue: true,
+    // debug: true,
-  },
+    saveMissing: true,
-  // debug: true,
+  });
-  saveMissing: true,
-});
 
 export default i18n;

web/yarn.lock

@@ -1416,6 +1416,13 @@
   dependencies:
     regenerator-runtime "^0.13.11"
 
+"@babel/runtime@^7.23.2":
+  version "7.23.9"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.9.tgz#47791a15e4603bb5f905bc0753801cf21d6345f7"
+  integrity sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.22.5", "@babel/template@^7.3.3":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.5.tgz#0c8c4d944509875849bd0344ff0050756eefc6ec"
@@ -8569,6 +8576,13 @@ i18n-iso-countries@^7.0.0:
   dependencies:
     diacritics "1.3.0"
 
+i18next-resources-to-backend@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/i18next-resources-to-backend/-/i18next-resources-to-backend-1.2.0.tgz#4e0ea0c093bf1acb3eb47972a3002b84a1fec3b2"
+  integrity sha512-8f1l03s+QxDmCfpSXCh9V+AFcxAwIp0UaroWuyOx+hmmv8484GcELHs+lnu54FrNij8cDBEXvEwhzZoXsKcVpg==
+  dependencies:
+    "@babel/runtime" "^7.23.2"
+
 i18next@^19.8.9:
   version "19.9.2"
   resolved "https://registry.yarnpkg.com/i18next/-/i18next-19.9.2.tgz#ea5a124416e3c5ab85fddca2c8e3c3669a8da397"
@@ -12721,6 +12735,11 @@ regenerator-runtime@^0.13.11, regenerator-runtime@^0.13.9:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
   integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
 
+regenerator-runtime@^0.14.0:
+  version "0.14.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
+  integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
+
 regenerator-transform@^0.15.1:
   version "0.15.1"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.1.tgz#f6c4e99fc1b4591f780db2586328e4d9a9d8dc56"