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.

package.json

@@ -53,7 +53,8 @@
         "@sentry/browser": "^6.19.6",
         "@sentry/tracing": "^6.19.6",
         "core-js": "3.22.2",
-        "mdi-svelte": "^1.1.2"
+        "mdi-svelte": "^1.1.2",
+        "svelte-i18n": "^3.4.0"
     },
     "optionalDependencies": {
         "@cypress/code-coverage": "^3.9.12",

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"
+}

yarn.lock

@@ -2570,6 +2570,55 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@formatjs/ecma402-abstract@npm:1.11.4":
+  version: 1.11.4
+  resolution: "@formatjs/ecma402-abstract@npm:1.11.4"
+  dependencies:
+    "@formatjs/intl-localematcher": 0.2.25
+    tslib: ^2.1.0
+  checksum: 05dbe1c6457acfe9cdc0fc770940260e19fa588be6c655b1ff1697506348dac1eee9b249b64e6544531174d07a5a74a9e75f68430947cfdc074ebe8e3c86f86f
+  languageName: node
+  linkType: hard
+
+"@formatjs/fast-memoize@npm:1.2.1":
+  version: 1.2.1
+  resolution: "@formatjs/fast-memoize@npm:1.2.1"
+  dependencies:
+    tslib: ^2.1.0
+  checksum: 7df9e941142be16e5862afe7387926cec44ec136d2c2f9a7e1598cb6c8c23a65e420ed90251ec9b48df083f5473b10d6fbbee2e9fc7233d5bf1f27efffba59a7
+  languageName: node
+  linkType: hard
+
+"@formatjs/icu-messageformat-parser@npm:2.1.0":
+  version: 2.1.0
+  resolution: "@formatjs/icu-messageformat-parser@npm:2.1.0"
+  dependencies:
+    "@formatjs/ecma402-abstract": 1.11.4
+    "@formatjs/icu-skeleton-parser": 1.3.6
+    tslib: ^2.1.0
+  checksum: 8dab4d102b334dd7ab25b85817b074f1b54845d02f9ef9fa5a1fa6a9723176ad28a59d845fdc0eeedb868b891e61a4c530384b123db29f5b14e1f3f8b207373f
+  languageName: node
+  linkType: hard
+
+"@formatjs/icu-skeleton-parser@npm:1.3.6":
+  version: 1.3.6
+  resolution: "@formatjs/icu-skeleton-parser@npm:1.3.6"
+  dependencies:
+    "@formatjs/ecma402-abstract": 1.11.4
+    tslib: ^2.1.0
+  checksum: cce2d8bea54f0096c557dc03920bfe4785893e60962313fab9eeee41f0b411d38b9d45852882b19f261417d730362c8685bea6ba5ac1e2dee141f030cda624e9
+  languageName: node
+  linkType: hard
+
+"@formatjs/intl-localematcher@npm:0.2.25":
+  version: 0.2.25
+  resolution: "@formatjs/intl-localematcher@npm:0.2.25"
+  dependencies:
+    tslib: ^2.1.0
+  checksum: ee00ddc23317dc47a58831aaca5112e101d8bb1f38adc0ecfe1a9d7e008d0bb1091519f07e1d7d805b0c1e28f2c3e75f697ae479e22423445814412c7669284c
+  languageName: node
+  linkType: hard
+
 "@gar/promisify@npm:^1.1.3":
   version: 1.1.3
   resolution: "@gar/promisify@npm:1.1.3"
@@ -4817,6 +4866,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"deepmerge@npm:^4.2.2":
+  version: 4.2.2
+  resolution: "deepmerge@npm:4.2.2"
+  checksum: a8c43a1ed8d6d1ed2b5bf569fa4c8eb9f0924034baf75d5d406e47e157a451075c4db353efea7b6bcc56ec48116a8ce72fccf867b6e078e7c561904b5897530b
+  languageName: node
+  linkType: hard
+
 "default-require-extensions@npm:^3.0.0":
   version: 3.0.0
   resolution: "default-require-extensions@npm:3.0.0"
@@ -5490,6 +5546,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"estree-walker@npm:^2.0.1":
+  version: 2.0.2
+  resolution: "estree-walker@npm:2.0.2"
+  checksum: 6151e6f9828abe2259e57f5fd3761335bb0d2ebd76dc1a01048ccee22fabcfef3c0859300f6d83ff0d1927849368775ec5a6d265dde2f6de5a1be1721cd94efc
+  languageName: node
+  linkType: hard
+
 "esutils@npm:^2.0.2":
   version: 2.0.3
   resolution: "esutils@npm:2.0.3"
@@ -6165,6 +6228,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"globalyzer@npm:0.1.0":
+  version: 0.1.0
+  resolution: "globalyzer@npm:0.1.0"
+  checksum: 419a0f95ba542534fac0842964d31b3dc2936a479b2b1a8a62bad7e8b61054faa9b0a06ad9f2e12593396b9b2621cac93358d9b3071d33723fb1778608d358a1
+  languageName: node
+  linkType: hard
+
 "globby@npm:11.0.4":
   version: 11.0.4
   resolution: "globby@npm:11.0.4"
@@ -6179,6 +6249,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"globrex@npm:^0.1.2":
+  version: 0.1.2
+  resolution: "globrex@npm:0.1.2"
+  checksum: adca162494a176ce9ecf4dd232f7b802956bb1966b37f60c15e49d2e7d961b66c60826366dc2649093cad5a0d69970cfa8875bd1695b5a1a2f33dcd2aa88da3c
+  languageName: node
+  linkType: hard
+
 "graceful-fs@npm:^4.1.11, graceful-fs@npm:^4.1.15, graceful-fs@npm:^4.1.2, graceful-fs@npm:^4.1.3, graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.2.0":
   version: 4.2.8
   resolution: "graceful-fs@npm:4.2.8"
@@ -6655,6 +6732,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"intl-messageformat@npm:^9.3.15":
+  version: 9.13.0
+  resolution: "intl-messageformat@npm:9.13.0"
+  dependencies:
+    "@formatjs/ecma402-abstract": 1.11.4
+    "@formatjs/fast-memoize": 1.2.1
+    "@formatjs/icu-messageformat-parser": 2.1.0
+    tslib: ^2.1.0
+  checksum: effb840ae6e213adceab9951dbb2d18d1a354c82e35dbd213011daf23bcc79e2a18b6ef79157ae3b69c1e6d898fe66b54dd184ac180ee0646e26a70276e60038
+  languageName: node
+  linkType: hard
+
 "ip@npm:^1.1.5":
   version: 1.1.5
   resolution: "ip@npm:1.1.5"
@@ -10090,6 +10179,23 @@ send@latest:
   languageName: node
   linkType: hard
 
+"svelte-i18n@npm:^3.4.0":
+  version: 3.4.0
+  resolution: "svelte-i18n@npm:3.4.0"
+  dependencies:
+    deepmerge: ^4.2.2
+    estree-walker: ^2.0.1
+    intl-messageformat: ^9.3.15
+    sade: ^1.7.4
+    tiny-glob: ^0.2.6
+  peerDependencies:
+    svelte: ^3.25.1
+  bin:
+    svelte-i18n: dist/cli.js
+  checksum: 27c198e01c73c3f12cdf50be178227161616c53a7e3b9abc483e1aff21a207dc8492372b2c2a16a3037885dda0dd691bb23cc0b6ac71b49f55be52c997d065d6
+  languageName: node
+  linkType: hard
+
 "svelte-preprocess-esbuild@npm:^2.0.0":
   version: 2.0.0
   resolution: "svelte-preprocess-esbuild@npm:2.0.0"
@@ -10364,6 +10470,7 @@ send@latest:
     prettier-plugin-svelte: ^2.7.0
     svelte: ^3.47.0
     svelte-check: ^2.7.0
+    svelte-i18n: ^3.4.0
     svelte-preprocess: ^4.10.6
     svelte-preprocess-esbuild: ^2.0.0
     svelte-routing: ^1.6.0
@@ -10405,6 +10512,16 @@ send@latest:
   languageName: node
   linkType: hard
 
+"tiny-glob@npm:^0.2.6":
+  version: 0.2.9
+  resolution: "tiny-glob@npm:0.2.9"
+  dependencies:
+    globalyzer: 0.1.0
+    globrex: ^0.1.2
+  checksum: aea5801eb6663ddf77ebb74900b8f8bd9dfcfc9b6a1cc8018cb7421590c00bf446109ff45e4b64a98e6c95ddb1255a337a5d488fb6311930e2a95334151ec9c6
+  languageName: node
+  linkType: hard
+
 "tmp@npm:~0.2.1":
   version: 0.2.1
   resolution: "tmp@npm:0.2.1"
@@ -10508,7 +10625,7 @@ send@latest:
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.4.0":
+"tslib@npm:^2.1.0, tslib@npm:^2.4.0":
   version: 2.4.0
   resolution: "tslib@npm:2.4.0"
   checksum: 8c4aa6a3c5a754bf76aefc38026134180c053b7bd2f81338cb5e5ebf96fefa0f417bff221592bf801077f5bf990562f6264fecbc42cd3309b33872cb6fc3b113