svelte-i18n dem Projekt hinzugefügt für die Möglichkeit, statische Texte sauberer an einer zentralen Stelle zu pflegen. Über den Language-Chooser wird die aktuelle locale der Übersetzungen auch gleich mit umgeschaltet.

src/components/App.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { _ } from "svelte-i18n"
     import { Router, Route } from "svelte-routing"
     import { scrollToTop } from "svelte-scrollto"
     import { generalInfo, location, currentLang } from "../store"
@@ -59,6 +60,8 @@
 
 <Header />
 
+{$_("test")}
+
 <Router url="{url}">
     <Route path="/" let:params>
         <Home />

src/components/widgets/LanguageChooser.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { locale } from "svelte-i18n"
     import { navigate } from "svelte-routing"
     import { navigations, location, currentLang } from "../../store"
 
@@ -17,6 +18,7 @@
 
     const setLanguage = (lang: string) => {
         $currentLang = lang
+        locale.set($currentLang)
     }
 </script>
 

src/i18n.ts

@@ -0,0 +1,12 @@
+import { addMessages, init, getLocaleFromNavigator } from "svelte-i18n"
+
+import de from "./localization/de.json"
+import en from "./localization/en.json"
+
+addMessages("de", de)
+addMessages("en", en)
+
+init({
+    fallbackLocale: "de",
+    initialLocale: getLocaleFromNavigator(),
+})

src/index.ts

@@ -2,6 +2,8 @@ import App from "./components/App.svelte"
 import { location } from "./store"
 import { apiBaseURL } from "./config"
 
+import "./i18n"
+
 console.log("API Base: ", apiBaseURL)
 
 // update location store
@@ -32,9 +34,7 @@ if (typeof history !== "undefined") {
     if (typeof Proxy !== "undefined") {
         // modern browser
         const historyApply = (target, thisArg, argumentsList) => {
-            publishLocation(
-                argumentsList && argumentsList.length >= 2 && argumentsList[2]
-            )
+            publishLocation(argumentsList && argumentsList.length >= 2 && argumentsList[2])
             Reflect.apply(target, thisArg, argumentsList)
         }
 
@@ -54,11 +54,7 @@ if (typeof history !== "undefined") {
             publishLocation(url)
             return pushStateFn.apply(history, arguments)
         }
-        history.replaceState = function (
-            data: any,
-            title: string,
-            url?: string
-        ) {
+        history.replaceState = function (data: any, title: string, url?: string) {
             publishLocation(url)
             return replaceStateFn.apply(history, arguments)
         }

src/localization/de.json

@@ -0,0 +1,3 @@
+{
+    "test": "DE - TEST"
+}

src/localization/en.json

@@ -0,0 +1,3 @@
+{
+    "test": "EN - TEST"
+}