fix(lingui): Use json files instead of TS

Author: PrettyCoffee

.gitignore

@@ -6,6 +6,6 @@
 dist/
 node_modules
 storybook-static/
-src/locales/_*.ts
+src/locales/_*.json
 
 .eslintcache

lingui.config.ts

@@ -3,6 +3,7 @@ import { defineConfig } from "@lingui/cli"
 export default defineConfig({
   sourceLocale: "en",
   locales: ["en", "de"],
+  compileNamespace: "json",
   catalogs: [
     {
       path: "<rootDir>/src/locales/_{locale}",

package.json

@@ -42,7 +42,7 @@
     "start": "pnpm run build && pnpm run --filter ./docs start",
     "build": "node ./scripts/build.mjs",
     "build:docs": "pnpm run build && pnpm run --filter ./docs build",
-    "l10n:build": "lingui extract --clean && lingui compile --typescript",
+    "l10n:build": "lingui extract --clean && lingui compile",
     "lint": "tsc -b && eslint",
     "lint:fix": "pnpm run lint --fix",
     "test": "vitest"

scripts/build.mjs

@@ -29,7 +29,7 @@ const run = cmd =>
   })
 
 printHeadline("🛠️ Compile translations")
-await run("lingui compile --typescript")
+await run("lingui compile")
 
 printHeadline("🛠️ Bundling javascript")
 await run("vite build")

src/locales/_de.po

@@ -21,15 +21,15 @@ msgstr "Ein unerwarteter Fehler ist aufgetreten"
 msgid "Cancel"
 msgstr "Abbrechen"
 
-#: src/components/ui/text-input.tsx:79
+#: src/components/ui/text-input.tsx:81
 msgid "Clear text field"
 msgstr "Textfeld leeren"
 
 #: src/components/ui/dialog/dialog.tsx:128
 msgid "Close"
 msgstr "Schließen"
 
-#: src/components/ui/toaster/toast.tsx:127
+#: src/components/ui/toaster/toast.tsx:126
 msgid "Close message"
 msgstr "Nachricht schließen"
 
@@ -65,6 +65,6 @@ msgstr "Vorheriges Jahr"
 msgid "Size"
 msgstr "Größe"
 
-#: src/components/ui/date-input.tsx:16
+#: src/components/ui/date-input.tsx:18
 msgid "Today"
 msgstr "Heute"

src/locales/_en.po

@@ -21,15 +21,15 @@ msgstr "An unexpected error occurred here"
 msgid "Cancel"
 msgstr "Cancel"
 
-#: src/components/ui/text-input.tsx:79
+#: src/components/ui/text-input.tsx:81
 msgid "Clear text field"
 msgstr "Clear text field"
 
 #: src/components/ui/dialog/dialog.tsx:128
 msgid "Close"
 msgstr "Close"
 
-#: src/components/ui/toaster/toast.tsx:127
+#: src/components/ui/toaster/toast.tsx:126
 msgid "Close message"
 msgstr "Close message"
 
@@ -65,6 +65,6 @@ msgstr "Previous year"
 msgid "Size"
 msgstr "Size"
 
-#: src/components/ui/date-input.tsx:16
+#: src/components/ui/date-input.tsx:18
 msgid "Today"
 msgstr "Today"

src/locales/l10n-provider.tsx

@@ -2,26 +2,18 @@ import { type PropsWithChildren, useEffect, useMemo, useState } from "react"
 
 import { type I18n, type MessageDescriptor, setupI18n } from "@lingui/core"
 
-import { messages as de } from "./_de"
-import { messages as en } from "./_en"
+import { messages as de } from "./_de.json"
+import { messages as en } from "./_en.json"
 import { createContext } from "../utils/create-context"
 
-const availableLanguages = new Set(["en", "de"])
-
+const defaultLanguage = "en"
 const catalog = { en, de }
-
 const i18n = setupI18n({
-  locales: [...availableLanguages],
-  locale: "en",
+  locales: Object.keys(catalog),
+  locale: defaultLanguage,
   messages: catalog,
 })
 
-const activate = (languageArg: "en" | "de") => {
-  const language = availableLanguages.has(languageArg) ? languageArg : "en"
-  i18n.loadAndActivate({ locale: language, messages: catalog[language] })
-  return language
-}
-
 interface L10nProviderState {
   i18n: I18n
   locale: string
@@ -31,14 +23,16 @@ const Context = createContext<L10nProviderState>("L10nProvider")
 
 export const L10nProvider = ({
   locale,
-  language,
+  language: languageProp,
   children,
 }: PropsWithChildren<Omit<L10nProviderState, "i18n">>) => {
+  const language = languageProp in catalog ? languageProp : defaultLanguage
   const [activeLanguage, setActiveLanguage] = useState<"en" | "de">()
 
   useEffect(() => {
+    i18n.activate(language)
     // enforce rerendering consumers when language changes
-    setActiveLanguage(activate(language))
+    setActiveLanguage(language)
   }, [language])
 
   return (