feat: add i18next http backend

gui/package.json

@@ -32,6 +32,7 @@
     "autoprefixer": "^10.4.13",
     "eslint": "^8.35.0",
     "eslint-config-react-app": "^7.0.1",
+    "i18next-http-backend": "^2.1.1",
     "postcss": "^8.4.21",
     "tailwindcss": "^3.2.7",
     "typescript": "^4.9.5",

gui/pnpm-lock.yaml

@@ -16,6 +16,7 @@ specifiers:
   eslint-config-react-app: ^7.0.1
   i18next: ^22.4.10
   i18next-browser-languagedetector: ^7.0.1
+  i18next-http-backend: ^2.1.1
   postcss: ^8.4.21
   react: ^18.2.0
   react-dom: ^18.2.0
@@ -51,6 +52,7 @@ devDependencies:
   autoprefixer: 10.4.13_postcss@8.4.21
   eslint: 8.35.0
   eslint-config-react-app: 7.0.1_ycpbpc6yetojsgtrx3mwntkhsu
+  i18next-http-backend: registry.npmmirror.com/i18next-http-backend/2.1.1
   postcss: 8.4.21
   tailwindcss: 3.2.7
   typescript: 4.9.5
@@ -4628,6 +4630,16 @@ packages:
       toggle-selection: registry.npmmirror.com/toggle-selection/1.0.6
     dev: false
 
+  registry.npmmirror.com/cross-fetch/3.1.5:
+    resolution: {integrity: sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/cross-fetch/-/cross-fetch-3.1.5.tgz}
+    name: cross-fetch
+    version: 3.1.5
+    dependencies:
+      node-fetch: registry.npmmirror.com/node-fetch/2.6.7
+    transitivePeerDependencies:
+      - encoding
+    dev: true
+
   registry.npmmirror.com/css-in-js-utils/3.1.0:
     resolution: {integrity: sha512-fJAcud6B3rRu+KHYk+Bwf+WFL2MDCJJ1XG9x137tJQ0xYxor7XziQtuGFbWNdqrvF4Tk26O3H73nfVqXt/fW1A==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/css-in-js-utils/-/css-in-js-utils-3.1.0.tgz}
     name: css-in-js-utils
@@ -4698,6 +4710,16 @@ packages:
     version: 1.0.4
     dev: false
 
+  registry.npmmirror.com/i18next-http-backend/2.1.1:
+    resolution: {integrity: sha512-jByfUCDVgQ8+/Wens7queQhYYvMcGTW/lR4IJJNEDDXnmqjLrwi8ubXKpmp76/JIWEZHffNdWqnxFJcTVGeaOw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/i18next-http-backend/-/i18next-http-backend-2.1.1.tgz}
+    name: i18next-http-backend
+    version: 2.1.1
+    dependencies:
+      cross-fetch: registry.npmmirror.com/cross-fetch/3.1.5
+    transitivePeerDependencies:
+      - encoding
+    dev: true
+
   registry.npmmirror.com/inline-style-prefixer/6.0.4:
     resolution: {integrity: sha512-FwXmZC2zbeeS7NzGjJ6pAiqRhXR0ugUShSNb6GApMl6da0/XGc4MOJsoWAywia52EEWbXNSy0pzkwz/+Y+swSg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/inline-style-prefixer/-/inline-style-prefixer-6.0.4.tgz}
     name: inline-style-prefixer
@@ -4747,6 +4769,20 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  registry.npmmirror.com/node-fetch/2.6.7:
+    resolution: {integrity: sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/node-fetch/-/node-fetch-2.6.7.tgz}
+    name: node-fetch
+    version: 2.6.7
+    engines: {node: 4.x || >=6.0.0}
+    peerDependencies:
+      encoding: ^0.1.0
+    peerDependenciesMeta:
+      encoding:
+        optional: true
+    dependencies:
+      whatwg-url: registry.npmmirror.com/whatwg-url/5.0.0
+    dev: true
+
   registry.npmmirror.com/picocolors/1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/picocolors/-/picocolors-1.0.0.tgz}
     name: picocolors
@@ -4914,6 +4950,12 @@ packages:
     version: 1.0.6
     dev: false
 
+  registry.npmmirror.com/tr46/0.0.3:
+    resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/tr46/-/tr46-0.0.3.tgz}
+    name: tr46
+    version: 0.0.3
+    dev: true
+
   registry.npmmirror.com/ts-easing/0.2.0:
     resolution: {integrity: sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/ts-easing/-/ts-easing-0.2.0.tgz}
     name: ts-easing
@@ -4931,3 +4973,18 @@ packages:
     name: tslib
     version: 2.5.0
     dev: false
+
+  registry.npmmirror.com/webidl-conversions/3.0.1:
+    resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz}
+    name: webidl-conversions
+    version: 3.0.1
+    dev: true
+
+  registry.npmmirror.com/whatwg-url/5.0.0:
+    resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/whatwg-url/-/whatwg-url-5.0.0.tgz}
+    name: whatwg-url
+    version: 5.0.0
+    dependencies:
+      tr46: registry.npmmirror.com/tr46/0.0.3
+      webidl-conversions: registry.npmmirror.com/webidl-conversions/3.0.1
+    dev: true

gui/src/i18n/config.ts

@@ -2,6 +2,7 @@ import i18next from 'i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import { initReactI18next } from 'react-i18next';
 import translation from './translation/en.json';
+import HttpBackend from 'i18next-http-backend'
 
 export const resources = {
   en: {
@@ -9,10 +10,17 @@ export const resources = {
   }
 };
 
-i18next
+const instance = i18next
   .use(initReactI18next)
-  .use(LanguageDetector)
-  .init({
+  .use(LanguageDetector);
+
+if (import.meta.env.DEV) {
+  instance.use(HttpBackend);
+}
+
+instance.init({
   debug: import.meta.env.DEV,
   resources,
-  });
+  saveMissing: true,
+  fallbackLng: 'en'
+});

gui/vite.config.ts

@@ -18,6 +18,9 @@ export default defineConfig({
   server: {
     port: 1420,
     strictPort: true,
+    proxy: {
+      '/locales/': 'http://127.0.0.1:1421'
+    }
   },
   // to make use of `TAURI_DEBUG` and other env variables
   // https://tauri.studio/v1/api/config#buildconfig.beforedevcommand