chore(website): use static loading of translations

This reverts commit dbfa94a9ee.

apps/client/src/print.tsx

@@ -56,7 +56,20 @@ function SingleNoteRenderer({ note, onReady }: RendererProps) {
                 await import("@triliumnext/ckeditor5/src/theme/ck-content.css");
             }
             const { $renderedContent } = await content_renderer.getRenderedContent(note, { noChildrenList: true });
-            containerRef.current?.replaceChildren(...$renderedContent);
+            const container = containerRef.current!;
+            container.replaceChildren(...$renderedContent);
+
+            // Wait for all images to load.
+            const images = Array.from(container.querySelectorAll("img"));
+            await Promise.all(
+                images.map(img => {
+                    if (img.complete) return Promise.resolve();
+                    return new Promise<void>(resolve => {
+                        img.addEventListener("load", () => resolve(), { once: true });
+                        img.addEventListener("error", () => resolve(), { once: true });
+                    });
+                })
+            );
         }
 
         load().then(() => requestAnimationFrame(onReady))

apps/server/package.json

@@ -61,7 +61,7 @@
     "@types/supertest": "6.0.3",
     "@types/swagger-ui-express": "4.1.8",
     "@types/tmp": "0.2.6",
-    "@types/turndown": "5.0.5",
+    "@types/turndown": "5.0.6",
     "@types/ws": "8.18.1",
     "@types/xml2js": "0.4.14",
     "archiver": "7.0.1",

apps/website/src/i18n.spec.ts

@@ -19,6 +19,7 @@ describe("swapLocale", () => {
         expect(swapLocaleInUrl("/ro/get-started", "ro")).toStrictEqual("/ro/get-started");
         expect(swapLocaleInUrl("/en/get-started", "ro")).toStrictEqual("/ro/get-started");
         expect(swapLocaleInUrl("/ro/", "en")).toStrictEqual("/en/");
+        expect(swapLocaleInUrl("/ro", "en")).toStrictEqual("/en");
     });
 });
 

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ă" },
@@ -35,7 +64,13 @@ export function mapLocale(locale: string) {
 export function swapLocaleInUrl(url: string, newLocale: string) {
     const components = url.split("/");
     if (components.length === 2) {
-        return `/${newLocale}${url}`;
+        const potentialLocale = components[1];
+        const correspondingLocale = LOCALES.find(l => l.id === potentialLocale);
+        if (correspondingLocale) {
+            return `/${newLocale}`;
+        } else {
+            return `/${newLocale}${url}`;
+        }
     } else {
         components[1] = newLocale;
         return components.join("/");

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,33 +43,24 @@ 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))
-}, []);
-
-  useLayoutEffect(() => {
-    if (!loaded) return;
+  if (!loadedRef.current) {
+    initTranslations(localeId);
+    loadedRef.current = true;
+  } else {
     changeLanguage(localeId);
+  }
+
+  useLayoutEffect(() => {
     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}>
-      {loaded && children}
+      {children}
     </LocaleContext.Provider>
   );
 }

pnpm-lock.yaml

@@ -559,8 +559,8 @@ importers:
         specifier: 0.2.6
         version: 0.2.6
       '@types/turndown':
-        specifier: 5.0.5
-        version: 5.0.5
+        specifier: 5.0.6
+        version: 5.0.6
       '@types/ws':
         specifier: 8.18.1
         version: 8.18.1
@@ -5188,8 +5188,8 @@ packages:
   '@types/trusted-types@2.0.7':
     resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
 
-  '@types/turndown@5.0.5':
-    resolution: {integrity: sha512-TL2IgGgc7B5j78rIccBtlYAnkuv8nUQqhQc+DSYV5j9Be9XOcm/SKOVRuA47xAVI3680Tk9B1d8flK2GWT2+4w==}
+  '@types/turndown@5.0.6':
+    resolution: {integrity: sha512-ru00MoyeeouE5BX4gRL+6m/BsDfbRayOskWqUvh7CLGW+UXxHQItqALa38kKnOiZPqJrtzJUgAC2+F0rL1S4Pg==}
 
   '@types/unist@3.0.3':
     resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
@@ -15004,8 +15004,6 @@ snapshots:
       '@ckeditor/ckeditor5-core': 47.1.0
       '@ckeditor/ckeditor5-utils': 47.1.0
       ckeditor5: 47.1.0(patch_hash=8331a09d41443b39ea1c784daaccfeb0da4f9065ed556e7de92e9c77edd9eb41)
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-code-block@47.1.0(patch_hash=2361d8caad7d6b5bddacc3a3b4aa37dbfba260b1c1b22a450413a79c1bb1ce95)':
     dependencies:
@@ -15067,6 +15065,8 @@ snapshots:
       '@ckeditor/ckeditor5-utils': 47.1.0
       '@ckeditor/ckeditor5-watchdog': 47.1.0
       es-toolkit: 1.39.5
+    transitivePeerDependencies:
+      - supports-color
 
   '@ckeditor/ckeditor5-dev-build-tools@43.1.0(@swc/helpers@0.5.17)(tslib@2.8.1)(typescript@5.9.3)':
     dependencies:
@@ -15231,8 +15231,6 @@ snapshots:
       '@ckeditor/ckeditor5-utils': 47.1.0
       ckeditor5: 47.1.0(patch_hash=8331a09d41443b39ea1c784daaccfeb0da4f9065ed556e7de92e9c77edd9eb41)
       es-toolkit: 1.39.5
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-editor-classic@47.1.0':
     dependencies:
@@ -15601,6 +15599,8 @@ snapshots:
       '@ckeditor/ckeditor5-utils': 47.1.0
       '@ckeditor/ckeditor5-widget': 47.1.0
       ckeditor5: 47.1.0(patch_hash=8331a09d41443b39ea1c784daaccfeb0da4f9065ed556e7de92e9c77edd9eb41)
+    transitivePeerDependencies:
+      - supports-color
 
   '@ckeditor/ckeditor5-mention@47.1.0(patch_hash=5981fb59ba35829e4dff1d39cf771000f8a8fdfa7a34b51d8af9549541f2d62d)':
     dependencies:
@@ -15754,6 +15754,8 @@ snapshots:
       '@ckeditor/ckeditor5-ui': 47.1.0
       '@ckeditor/ckeditor5-utils': 47.1.0
       ckeditor5: 47.1.0(patch_hash=8331a09d41443b39ea1c784daaccfeb0da4f9065ed556e7de92e9c77edd9eb41)
+    transitivePeerDependencies:
+      - supports-color
 
   '@ckeditor/ckeditor5-restricted-editing@47.1.0':
     dependencies:
@@ -15840,8 +15842,6 @@ snapshots:
       '@ckeditor/ckeditor5-ui': 47.1.0
       '@ckeditor/ckeditor5-utils': 47.1.0
       ckeditor5: 47.1.0(patch_hash=8331a09d41443b39ea1c784daaccfeb0da4f9065ed556e7de92e9c77edd9eb41)
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-special-characters@47.1.0':
     dependencies:
@@ -15953,8 +15953,6 @@ snapshots:
       '@ckeditor/ckeditor5-icons': 47.1.0
       '@ckeditor/ckeditor5-ui': 47.1.0
       '@ckeditor/ckeditor5-utils': 47.1.0
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-upload@47.1.0':
     dependencies:
@@ -19765,7 +19763,7 @@ snapshots:
   '@types/trusted-types@2.0.7':
     optional: true
 
-  '@types/turndown@5.0.5': {}
+  '@types/turndown@5.0.6': {}
 
   '@types/unist@3.0.3': {}