Make translations work on web & native

front/app/_middleware.ts

@@ -1,5 +1,5 @@
 import { createMiddleware, setServerData } from "one";
-import { supportedLanguages } from "~/providers/translations.web.ssr";
+import { supportedLanguages } from "~/providers/translations.compile";
 
 export default createMiddleware(({ request, next }) => {
 	const systemLanguage = request.headers

front/src/providers/index.tsx

@@ -7,7 +7,7 @@ import { createQueryClient } from "~/query";
 import { AccountProvider } from "./account-provider";
 import { ErrorConsumer } from "./error-consumer";
 import { ErrorProvider } from "./error-provider";
-import { TranslationsProvider } from "./translations";
+import { TranslationsProvider } from "./translations.native";
 
 const QueryProvider = ({ children }: { children: ReactNode }) => {
 	const [queryClient] = useState(() => createQueryClient());

front/src/providers/translations.native.tsx

@@ -0,0 +1,25 @@
+import i18next from "i18next";
+import { type ReactNode, useMemo } from "react";
+import { I18nextProvider } from "react-i18next";
+import { resources, supportedLanguages } from "./translations.compile";
+import { setServerData } from "one";
+
+export const TranslationsProvider = ({ children }: { children: ReactNode }) => {
+	const val = useMemo(() => {
+		const i18n = i18next.createInstance();
+		i18n.init({
+			interpolation: {
+				escapeValue: false,
+			},
+			returnEmptyString: false,
+			fallbackLng: "en",
+			load: "currentOnly",
+			supportedLngs: supportedLanguages,
+			resources: resources,
+		});
+		// store data for the browser
+		setServerData("translations", i18n.services.resourceStore.data);
+		return i18n;
+	}, []);
+	return <I18nextProvider i18n={val}>{children}</I18nextProvider>;
+};

front/src/providers/translations.tsx

@@ -1,22 +1,4 @@
-import i18next from "i18next";
-import { type ReactNode, useMemo } from "react";
-import { I18nextProvider } from "react-i18next";
-import { resources, supportedLanguages } from "./translations.compile";
-
-export const TranslationsProvider = ({ children }: { children: ReactNode }) => {
-	const val = useMemo(() => {
-		const i18n = i18next.createInstance();
-		i18n.init({
-			interpolation: {
-				escapeValue: false,
-			},
-			returnEmptyString: false,
-			fallbackLng: "en",
-			load: "currentOnly",
-			supportedLngs: supportedLanguages,
-			resources: resources,
-		});
-		return i18n;
-	}, []);
-	return <I18nextProvider i18n={val}>{children}</I18nextProvider>;
-};
+// use native version during ssr
+export default typeof window === "undefined"
+	? await import("./translations.native")
+	: await import("./translations.web.client");

front/src/providers/translations.web.client.tsx

@@ -3,6 +3,7 @@ import HttpApi, { type HttpBackendOptions } from "i18next-http-backend";
 import { getServerData } from "one";
 import { type ReactNode, useMemo } from "react";
 import { I18nextProvider } from "react-i18next";
+import { supportedLanguages } from "./translations.compile";
 
 export const TranslationsProvider = ({ children }: { children: ReactNode }) => {
 	const val = useMemo(() => {
@@ -15,7 +16,7 @@ export const TranslationsProvider = ({ children }: { children: ReactNode }) => {
 			returnEmptyString: false,
 			fallbackLng: "en",
 			load: "currentOnly",
-			supportedLngs: getServerData("supportedLngs"),
+			supportedLngs: supportedLanguages,
 			// we don't need to cache resources since we always get a fresh one from ssr
 			backend: {
 				loadPath: "/translations/{{lng}}.json",

front/src/providers/translations.web.tsx

@@ -1,5 +0,0 @@
-// use native version during ssr
-export const { TranslationsProvider } =
-	typeof window === "undefined"
-		? await import("./translations")
-		: await import("./translations.web.client");