chore(website): use static loading of translations

Author: eliandoran

apps/website/src/i18n.ts

@@ -1,9 +1,38 @@
+import i18next from "i18next";
+import { initReactI18next } from "react-i18next";
+
 interface Locale {
     id: string;
     name: string;
     rtl?: boolean;
 }
 
+i18next.use(initReactI18next);
+const localeFiles = import.meta.glob("./translations/*/translation.json", { eager: true });
+const resources: Record<string, Record<string, string>> = {};
+for (const [ path, translations ] of Object.entries(localeFiles)) {
+    const id = path.split("/").at(-2);
+    if (!resources[id]) resources[id] = {};
+    if ("default" in (translations as any)) {
+        resources[id].translation = (translations as any).default;
+    } else {
+        resources[id].translation = translations;
+    }
+}
+
+export function initTranslations(lng: string) {
+    i18next.init({
+        fallbackLng: "en",
+        lng,
+        returnEmptyString: false,
+        resources,
+        initAsync: false,
+        react: {
+            useSuspense: false
+        }
+    });
+}
+
 export const LOCALES: Locale[] = [
     { id: "en", name: "English" },
     { id: "ro", name: "Română" },

apps/website/src/index.tsx

@@ -8,9 +8,9 @@ import Footer from './components/Footer.js';
 import GetStarted from './pages/GetStarted/get-started.js';
 import SupportUs from './pages/SupportUs/SupportUs.js';
 import { createContext } from 'preact';
-import { useLayoutEffect, useState } from 'preact/hooks';
+import { useLayoutEffect, useRef, useState } from 'preact/hooks';
 import { default as i18next, changeLanguage } from 'i18next';
-import { extractLocaleFromUrl, LOCALES, mapLocale } from './i18n';
+import { extractLocaleFromUrl, initTranslations, LOCALES, mapLocale } from './i18n';
 import HttpApi from 'i18next-http-backend';
 import { initReactI18next } from "react-i18next";
 
@@ -43,29 +43,20 @@ export function App(props: {repoStargazersCount: number}) {
 export function LocaleProvider({ children }) {
   const { path } = useLocation();
   const localeId = mapLocale(extractLocaleFromUrl(path) || navigator.language);
-  const [ loaded, setLoaded ] = useState(false);
+  const loadedRef = useRef(false);
 
-  useLayoutEffect(() => {
-      i18next
-        .use(HttpApi)
-        .use(initReactI18next);
-      i18next.init({
-        lng: localeId,
-        fallbackLng: "en",
-        backend: {
-            loadPath: "/translations/{{lng}}/{{ns}}.json",
-        },
-        returnEmptyString: false
-    }).then(() => setLoaded(true))
-}, []);
+  if (!loadedRef.current) {
+    initTranslations(localeId);
+    loadedRef.current = true;
+  } else {
+    changeLanguage(localeId);
+  }
 
   useLayoutEffect(() => {
-    if (!loaded) return;
-    changeLanguage(localeId);
     const correspondingLocale = LOCALES.find(l => l.id === localeId);
     document.documentElement.lang = localeId;
     document.documentElement.dir = correspondingLocale?.rtl ? "rtl" : "ltr";
-  }, [ loaded, localeId ]);
+  }, [ localeId ]);
 
   return (
     <LocaleContext.Provider value={localeId}>