Fixes for new cloud applications project

Author: maxfriedmann

src/lib/modules/i18n/LanguageSelector.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { availableLanguages, currentLanguage, getI18n, t } from "$lib/stores/i18n.store";
+
+	const i18n = getI18n();
+
+	function changeLanguage(event: Event & { currentTarget: EventTarget & HTMLSelectElement }) {
+		$i18n.changeLanguage(event.currentTarget.value);
+	}
+</script>
+
+<label class="form-control">
+	<div class="label">
+		<span class="label-text">{$t("i18n.language")}</span>
+	</div>
+	<select
+		class="select select-bordered"
+		value={$currentLanguage}
+		onchange={changeLanguage}
+		data-testid="language-selector"
+	>
+		<option disabled>{$t("i18n.noLanguageSelected")}</option>
+		{#each $availableLanguages as lang}
+			<option value={lang} data-testid={`language-selector-option-${lang}`}
+				>{$t(`i18n.languages.${lang}`)}</option
+			>
+		{/each}
+	</select>
+</label>

src/lib/modules/i18n/LanguageSelector.test.ts

@@ -0,0 +1,27 @@
+import { createI18nStore, currentLanguage } from "$lib/i18n/i18n.store";
+import fetchMockVitest from "@fetch-mock/vitest";
+import { fireEvent, render, screen } from "@testing-library/svelte";
+import { get } from "svelte/store";
+import LanguageSelector from "./LanguageSelector.svelte";
+
+describe("LanguageSelector", () => {
+  beforeEach(() => {
+    fetchMockVitest.mockGlobal();
+    fetchMockVitest.get("/api/i18n/translations", {
+      elements: []
+    });
+  });
+  it("should render correctly", () => {
+    const { getByText } = render(LanguageSelector, { context: new Map([["i18n", createI18nStore()]]) });
+    expect(getByText("i18n.language")).toBeInTheDocument();
+  });
+
+  it("should change language on select change", async () => {
+    render(LanguageSelector, { context: new Map([["i18n", createI18nStore()]]) });
+    const select = screen.getByTestId("language-selector") as HTMLSelectElement;
+    await fireEvent.change(select, { target: { value: "de" } });
+    expect(get(currentLanguage)).toBe("de");
+    await fireEvent.change(select, { target: { value: "en" } });
+    expect(get(currentLanguage)).toBe("en");
+  });
+});

src/lib/modules/i18n/index.ts

@@ -0,0 +1,2 @@
+export { default as LanguageSelector } from "./LanguageSelector.svelte";
+

src/lib/modules/index.ts

@@ -1,6 +1,8 @@
+export * from "./chat";
 export * from "./forms";
+export * from "./i18n";
 export * from "./layout";
 export * from "./modals";
 export * from "./navigation";
 export * from "./utils";
-export * from "./chat";
+

src/lib/modules/navigation/Navbar.svelte

@@ -5,7 +5,7 @@
 </script>
 
 <div
-	class="w-full flex flex-row gap-2 justify-between items-center"
+	class="w-full flex flex-row gap-2 justify-between items-center px-5"
 	style="background-color: {options?.bgColor}; color: {options?.textColor}; height:{options.height ||
 		64}px; --navbarBgColor: {options?.bgColor}; --navbarTextColor: {options?.textColor}"
 >
@@ -20,7 +20,7 @@
 		</div>
 	</a>
 	<div class="flex flex-row gap-8 items-center">
-		{#if options?.showNavigation}
+		{#if options?.showNavigation !== false}
 			{#each options?.navigation.entries as entry}
 				<a class="border-b-2 menu-entry" href={entry.link}>
 					{$t(entry.text)}

src/lib/modules/navigation/SideNavbar.svelte

@@ -39,14 +39,18 @@
 				<span>{$t(entry.text)}</span>
 			</div>
 		</a>
+		{#if Array.isArray(entry.entries)}
+			<div class="flex flex-col gap-1 w-full">
+				{#each entry.entries as subEntry}
+					{@render menuEntry(subEntry, "pl-8 text-md")}
+				{/each}
+			</div>
+		{/if}
 	{/snippet}
 
 	{#each options?.navigation?.entries as entry}
 		<div class="flex flex-col gap-1 w-full">
 			{@render menuEntry(entry, "p-2 text-lg")}
-			{#each entry.entries as subEntry}
-				{@render menuEntry(subEntry, "pl-8 text-md")}
-			{/each}
 		</div>
 	{/each}
 </div>

src/lib/modules/navigation/breakpoint.service.svelte.ts

@@ -37,8 +37,9 @@ class BreakpointService {
 		}
 	}
 
-	public matches(breakpoints: boolean | string | string[]) {
-		if (typeof breakpoints === "boolean" || breakpoints === undefined) return breakpoints;
+	public matches(breakpoints: boolean | string | string[]): boolean {
+		if (typeof breakpoints === "boolean" || breakpoints === undefined)
+			return breakpoints as boolean;
 		if (typeof breakpoints === "string") breakpoints = [breakpoints];
 		for (const breakpoint of breakpoints) {
 			const dimensions = BREAKPOINT_DIMENSIONS[breakpoint];

src/lib/stores/i18n.store.ts

@@ -5,7 +5,7 @@ import { getContext, setContext } from "svelte";
 import type { Readable } from "svelte/store";
 import { derived, get, writable } from "svelte/store";
 
-export const getI18nStore = (i18nNextOptions?: Partial<InitOptions>) => {
+const createI18nStore = (i18nNextOptions?: Partial<InitOptions>) => {
 	i18nNext.use(LanguageDetector).init({
 		fallbackLng: "en",
 		detection: {
@@ -15,13 +15,37 @@ export const getI18nStore = (i18nNextOptions?: Partial<InitOptions>) => {
 		interpolation: {
 			escapeValue: false // not needed for svelte as it escapes by default
 		},
+		defaultNS: "translation",
 		...i18nNextOptions
 	});
 	return derived([currentLanguage], () => i18nNext);
 };
 
 export function initI18n(i18nNextOptions?: Partial<InitOptions>) {
-	setContext("i18n", getI18nStore(i18nNextOptions));
+	setContext("i18n", createI18nStore(i18nNextOptions));
+}
+
+export function addTranslations(locale: string, translations: Record<string, unknown>) {
+	i18nNext.addResourceBundle(locale, "translation", translations, true, true);
+	translationsUpdated.set(true);
+}
+
+export async function addTranslationsFromUrl(url: string) {
+	// load translations async
+	await fetch(url).then(async (response) => {
+		const translations = await response.json();
+		for (const translation of translations.elements) {
+			const keyValueMap = translation.translations.reduce(
+				(acc, curr) => {
+					acc[curr.key] = curr.value;
+					return acc;
+				},
+				{} as Record<string, string>
+			);
+			i18nNext.addResourceBundle(translation.language, "translation", keyValueMap, true, true);
+		}
+		translationsUpdated.set(true);
+	});
 }
 
 export function getI18n(): Readable<typeof i18nNext> {
@@ -37,8 +61,11 @@ export type InlineTranslation = {
 
 export const currentLanguage = writable("de");
 i18nNext.on("languageChanged", (lng) => {
-	currentLanguage.set(lng);
+	const formattedLanguage = lng.split("-")[0];
+	currentLanguage.set(formattedLanguage);
 });
+export const availableLanguages = writable(["de"]);
+export const translationsUpdated = writable(undefined);
 
 export function translateInlineTranslation(
 	translation: InlineTranslation | string,
@@ -63,3 +90,10 @@ export const t = derived(currentLanguage, (currentLanguage: string) => {
 		return translateInlineTranslation(key, { language: currentLanguage });
 	};
 });
+
+export function isInlineTranslation(obj: InlineTranslation): obj is InlineTranslation {
+	if (!(obj instanceof Object)) return false;
+	for (const [key, value] of Object.entries(obj))
+		if (typeof key !== "string" || typeof value !== "string") return false;
+	return true;
+}