Custom i18n loader (with caching) (#2678)

* Custom i18n loader (with caching)

* Just the basics, cache on language identifier

packages/react-components/package.json

@@ -21,7 +21,6 @@
     "codeflask": "^1.4.1",
     "i18next": "^19.4.4",
     "i18next-browser-languagedetector": "^4.1.1",
-    "i18next-http-backend": "^1.0.7",
     "react": "^16.13.1",
     "react-beautiful-dnd": "^13.0.0",
     "react-chartjs-2": "^2.9.0",

packages/react-components/src/i18n/Backend.ts

@@ -0,0 +1,46 @@
+// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+type Callback = (error: string | null, data: any) => void;
+
+export const languageCache: Record<string, Record<string, string>> = {};
+
+export default class Backend {
+  type = 'backend'
+
+  static type: 'backend' = 'backend'
+
+  async read (lng: string, _namespace: string, responder: Callback): Promise<void> {
+    const cached = languageCache[lng];
+
+    if (cached) {
+      responder(null, cached);
+
+      return;
+    }
+
+    try {
+      const response = await fetch(`locales/${lng}/translation.json`, {});
+      const { ok, status } = response;
+
+      if (!ok) {
+        responder(`i18n: failed loading ${lng}`, status >= 500 && status < 600);
+
+        return;
+      }
+
+      const data = await response.json();
+
+      languageCache[lng] = data;
+
+      return responder(null, data);
+    } catch (error) {
+      responder(error.message, false);
+    }
+  }
+
+  create (): void {
+    // no creation
+  }
+}

packages/react-components/src/i18n/index.ts

@@ -4,11 +4,11 @@
 
 import i18n from 'i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
-import HttpApi from 'i18next-http-backend';
 import { initReactI18next } from 'react-i18next';
-
 import uiSettings, { LANGUAGE_DEFAULT } from '@polkadot/ui-settings';
 
+import Backend from './Backend';
+
 const languageDetector = new LanguageDetector();
 
 languageDetector.addDetector({
@@ -25,11 +25,9 @@ languageDetector.addDetector({
 i18n
   .use(languageDetector)
   .use(initReactI18next)
-  .use(HttpApi)
+  .use(Backend)
   .init({
-    backend: {
-      loadPath: 'locales/{{lng}}/translation.json'
-    },
+    backend: {},
     debug: false,
     detection: {
       order: ['i18nLangDetector', 'navigator']

yarn.lock

@@ -3316,7 +3316,6 @@ __metadata:
     codeflask: ^1.4.1
     i18next: ^19.4.4
     i18next-browser-languagedetector: ^4.1.1
-    i18next-http-backend: ^1.0.7
     react: ^16.13.1
     react-beautiful-dnd: ^13.0.0
     react-chartjs-2: ^2.9.0
@@ -11502,15 +11501,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"i18next-http-backend@npm:^1.0.7":
-  version: 1.0.7
-  resolution: "i18next-http-backend@npm:1.0.7"
-  dependencies:
-    node-fetch: 2.6.0
-  checksum: 2/e10d9af7ae97583d18f14e51197a59e790eed170982fe61362bb290e7d2f5e485181af5bb1c7e5431435942b372d74cb268a129e57eb6edcc2750f18e16c1283
-  languageName: node
-  linkType: hard
-
 "i18next-scanner@npm:^2.11.0":
   version: 2.11.0
   resolution: "i18next-scanner@npm:2.11.0"
@@ -15234,13 +15224,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"node-fetch@npm:2.6.0, node-fetch@npm:^2.3.0, node-fetch@npm:^2.5.0":
-  version: 2.6.0
-  resolution: "node-fetch@npm:2.6.0"
-  checksum: 2/dd9f586a9f7ddb7dd94d2aba9cb693d32f5001e9850098512fbc8a4cbdd56838afa08ed0a6725b9fce9b01ec12b713e622cbfc16d92762d8b937b238330a632a
-  languageName: node
-  linkType: hard
-
 "node-fetch@npm:^1.0.1":
   version: 1.7.3
   resolution: "node-fetch@npm:1.7.3"
@@ -15251,6 +15234,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"node-fetch@npm:^2.3.0, node-fetch@npm:^2.5.0":
+  version: 2.6.0
+  resolution: "node-fetch@npm:2.6.0"
+  checksum: 2/dd9f586a9f7ddb7dd94d2aba9cb693d32f5001e9850098512fbc8a4cbdd56838afa08ed0a6725b9fce9b01ec12b713e622cbfc16d92762d8b937b238330a632a
+  languageName: node
+  linkType: hard
+
 "node-forge@npm:0.9.0":
   version: 0.9.0
   resolution: "node-forge@npm:0.9.0"