Load localles from source

This fixes the issue with cache stalessness in the only vite-friendly way we have :/

Author: aastefanov

package.json

@@ -53,6 +53,7 @@
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.54.0",
     "typescript-plugin-css-modules": "^5.2.0",
-    "vite": "^7.3.0"
+    "vite": "^7.3.0",
+    "vite-plugin-i18next-loader": "^3.1.3"
   }
 }

src/App.tsx

@@ -1,7 +1,8 @@
-import {createElement, useEffect} from 'react';
+import {createElement, useEffect, Suspense} from 'react';
 import {Container} from 'react-bootstrap';
 import {Route, Routes} from 'react-router-dom';
 
+import LoadingIcon from './widgets/LoadingIcon.tsx';
 import NavBar from './layout/NavBar.tsx';
 import Footer from './layout/Footer.tsx';
 import Sensors from './pages/Sensors.tsx';
@@ -22,7 +23,7 @@ function App() {
     const [theme] = useTheme();
     useEffect(() => document.documentElement.setAttribute('data-bs-theme', theme), [theme]);
 
-    return (<>
+    return (<Suspense fallback={<LoadingIcon/>}>
         <NavBar/>
         <main>
             <Container as="section" className="mt-4">
@@ -46,7 +47,7 @@ function App() {
             </Container>
         </main>
         <Footer/>
-    </>);
+    </Suspense>);
 }
 
 export default App;

src/i18n.ts

@@ -3,17 +3,20 @@ import Backend from 'i18next-http-backend';
 import {initReactI18next} from 'react-i18next';
 import {load} from 'js-yaml';
 
+import resources from 'virtual:i18next-loader';
+
 i18n
-    .use(Backend)
     .use(initReactI18next)
+    .on('failedLoading', (lng, ns, msg) => console.error(msg))
     .init({
-        backend: {
-            loadPath: import.meta.env.BASE_URL + 'locales/{{lng}}.yaml',
-            parse: (data: any) => load(data),
-        },
         interpolation: {
             escapeValue: false,
         },
+        // I hate this, but i18next changed the format
+        resources: Object.fromEntries(Object.entries(resources).map(x => [x[0], ({translation: x[1]})])),
+        detection: {
+            supportedLanguages: ["en", "bg"],
+        },
     })
     .then();
 

public/locales/bg.yaml src/locales/bg/bg.yamlpublic/locales/bg.yaml renamed to src/locales/bg/bg.yaml

@@ -126,14 +126,14 @@ views:
       имейл us@initlab.org.
     colibri_message_emergency: При неотложни случаи, моля обадете се на тел. 02 422 54 36.
   devices:
-    lock: заключи
-    unlock: отключи
-    open: отвори
-    open_alternative: отвори
-    turn_off: изключи
-    turn_on: включи
-    turn_on_cooling: охлаждане
-    turn_on_heating: отопление
+    lock: Заключи
+    unlock: Отключи
+    open: Отвори
+    open_alternative: Отвори
+    turn_off: Изключи
+    turn_on: Включи
+    turn_on_cooling: Охлаждане
+    turn_on_heating: Отопление
     offline: В момента няма връзка с устройството
   door:
     locked: Заключено

public/locales/en.yaml src/locales/en/en.yamlpublic/locales/en.yaml renamed to src/locales/en/en.yaml

@@ -119,14 +119,14 @@ views:
       at us@initlab.org.
     colibri_message_emergency: In case of major malfunction, please call +359 2 422 54 36.
   devices:
-    lock: lock
-    unlock: unlock
-    open: open
-    open_alternative: open
-    turn_off: turn off
-    turn_on: turn on
-    turn_on_cooling: cooling
-    turn_on_heating: heating
+    lock: Lock
+    unlock: Unlock
+    open: Open
+    open_alternative: Open
+    turn_off: Turn off
+    turn_on: Turn on
+    turn_on_cooling: Cooling
+    turn_on_heating: Heating
     offline: Device is currently offline
   door:
     locked: Locked

vite.config.js

@@ -1,10 +1,11 @@
 import {defineConfig} from 'vite';
 import react from '@vitejs/plugin-react';
 import viteCompression from 'vite-plugin-compression';
+import i18nextLoader from 'vite-plugin-i18next-loader';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-    build: {sourcemap: true,},
+    build: {sourcemap: true, assetsInlineLimit: 0,},
     css: {
         preprocessorOptions: {
             scss: {api: 'modern-compiler',},
@@ -20,5 +21,6 @@ export default defineConfig({
     plugins: [
         react(),
         viteCompression(),
+        i18nextLoader({ paths: ['./src/locales'] }),
     ],
 });