Add i18n support to Svelte language chooser using svelte-i18n-lingui

[Copilot]

The Svelte language chooser lacked translation support. This adds svelte-i18n-lingui integration to match the existing React implementation using LingUI, enabling interface language selection across 29 locales.

Changes

Configuration

• Added jstsExtractor and svelteExtractor to lingui.config.ts for Svelte file extraction
• Configured Vite with dynamicCompileOptions to handle Svelte 5 runes mode with legacy node_modules

New Infrastructure

• components/language-chooser/svelte/common/i18n.ts - Translation initialization and locale loading with whitelist validation
• components/language-chooser/svelte/common/I18nProvider.svelte - Provider component wrapping the app
• components/language-chooser/svelte/language-chooser-svelte-daisyui/index.ts - Package exports

Component Updates

• Wrapped all user-facing strings with $t macro in LanguageChooser, CustomizationModal, CustomizationForm, and UnlistedLanguageForm
• Added interface language dropdown to App.svelte with locale validation

Usage

<script>
  import { t } from "svelte-i18n-lingui";
</script>

<h3>{$t`Choose Language`}</h3>
<button>{$t`OK`}</button>

Commands now extract from both React and Svelte:

npm run l10n:extract  # Extracts 29 strings from React + Svelte
npm run l10n:compile  # Compiles for all locales

Screenshots

Interface Language Dropdown

Translated Modal

Security

Dynamic import paths validated against availableLocales whitelist to prevent path traversal.

Original prompt

Add support for multiple interface languages to language-chooser-svelte-daisyui.

The react language chooser, language-chooser-react-mui, uses LingUI for translations (see README-l10n.md). Translatable strings are extracted from the source code and uploaded to Crowdin. Then, Crowdin translations are downloaded and compiled by LingUI.

The Svelte project should use svelte-i18n-lingui for translations. The command l10n:extract should extract strings from both the React and the Svelte project. Similarly, l10n:compile should perform any compilation necessary for the Svelte app to use the translations from Crowdin.

Once translation is available, add an interface language dropdown to the Svelte project.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.