Some TypeScript magic

Author: AFCMS

src/main.tsx

@@ -7,11 +7,10 @@ import { i18n } from "@lingui/core";
 import App from "./App.tsx";
 
 import "./index.css";
-import { dynamicActivate } from "./utils/i18nLocaleModuleLoading.ts";
-import { getSanitizedBrowserLanguageIfSupportedOrEnglish } from "./utils/getSanitizedBrowserLanguageIfSupportedOrEnglish.ts";
+import { dynamicActivate } from "./utils/i18n_loader.ts";
+import { getLanguage } from "./utils/get_language.ts";
 
-const sanitizedBrowserLanguageIfSupportedOrEnglish =
-  getSanitizedBrowserLanguageIfSupportedOrEnglish();
+const sanitizedBrowserLanguageIfSupportedOrEnglish = getLanguage();
 await dynamicActivate(sanitizedBrowserLanguageIfSupportedOrEnglish);
 
 const isAnalyticsEnabled =

src/utils/getSanitizedBrowserLanguageIfSupportedOrEnglish.ts

@@ -0,0 +1,11 @@
+import supportedLocales, { type SupportedLocale } from "./supported_locales";
+
+export function isSupportedLocale(locale: string): locale is SupportedLocale {
+  return (supportedLocales as readonly string[]).includes(locale);
+}
+
+export function getLanguage(): SupportedLocale {
+  const lang = navigator.language;
+  const sanitizedLang = lang.split("-")[0];
+  return isSupportedLocale(sanitizedLang) ? sanitizedLang : "en";
+}

src/utils/get_language.ts

@@ -1,6 +1,7 @@
 import { i18n, type Messages } from "@lingui/core";
+import type { SupportedLocale } from "./supported_locales";
 
-export async function dynamicActivate(locale: string) {
+export async function dynamicActivate(locale: SupportedLocale) {
   const { messages } = (await import(`./../locales/${locale}/messages.po`)) as {
     messages: Messages;
   };

src/utils/i18nLocaleModuleLoading.ts src/utils/i18n_loader.tssrc/utils/i18nLocaleModuleLoading.ts renamed to src/utils/i18n_loader.ts

@@ -0,0 +1,4 @@
+export const supportedLocales = ["en", "fr"] as const;
+export type SupportedLocale = (typeof supportedLocales)[number];
+
+export default supportedLocales;