Natuurlijk! Hier is een overzicht van hoe je meertalige ondersteuning (internationalisatie) in je Svelte-applicatie kunt implementeren, inclusief beheer van vertalingen, dynamisch wisselen van taal en best practices voor de structuur van vertaalbestanden: 1. Kies een bibliotheek of aanpak Gebruik bijvoorbeeld een populaire bibliotheek zoals [svelte-i18n](https://github.com/kaisermann/svelte-i18n) of [i18next](https://www.i18next.com/). Voor Svelte is svelte-i18n vaak het eenvoudigst. 2. Installeer de benodigde pakket(en) ```bash npm install svelte-i18n ``` 3. Configureer de vertalingen Maak vertaalbestanden voor elke taal, bijvoorbeeld: ```js // src/locales/nl.json { "welcome": "Welkom", "greeting": "Hallo, {name}!" } // src/locales/en.json { "welcome": "Welcome", "greeting": "Hello, {name}!" } ``` 4. Initialiseer svelte-i18n in je app In je hoofdcomponent (bijvoorbeeld App.svelte) of een aparte i18n-configuratiebestand: ```js // src/i18n.js import { register, init, getLocaleFromNavigator, locale } from 'svelte-i18n'; register('nl', () => import('./locales/nl.json')); register('en', () => import('./locales/en.json')); init({ fallbackLocale: 'en', initialLocale: getLocaleFromNavigator() }); ``` 5. Gebruik vertalingen in je componenten ```svelte <script> import { t, locale } from 'svelte-i18n'; // Voor dynamisch wisselen van taal function changeLanguage(lang) { locale.set(lang); } </script> <h1>{$t('welcome')}</h1> <p>{$t('greeting', { name: 'Jan' })}</p> <button on:click={() => changeLanguage('nl')}>Nederlands</button> <button on:click={() => changeLanguage('en')}>English</button> ``` 6. Best practices voor structuur en beheer - **Vertaalbestanden:** Plaats alle vertalingen in een map zoals `src/locales/` en gebruik JSON- of JavaScript-bestanden. - **Dynamisch laden:** Laad vertalingen dynamisch met code-splitting om de initiële laadtijd te verbeteren. - **Fallback:** Stel een fallback taal in (bijvoorbeeld Engels). - **Taal opslaan:** Bewaar de gekozen taal in localStorage of cookies zodat de voorkeur van de gebruiker behouden blijft. - **Contextbeheer:** Gebruik Svelte Stores voor het beheren van de taalstatus en vertalingen indien nodig. 7. Samenvatting - Gebruik `svelte-i18n` voor eenvoudige integratie. - Organiseer vertalingen overzichtelijk in aparte bestanden. - Implementeer dynamische taalwisselknoppen. - Bewaar de taalvoorkeur voor een betere gebruikerservaring. Met deze aanpak kun je je Svelte-app gemakkelijk meertalig maken en gebruikers een vloeiende taalwisseling bieden.

Zeker! Hier is een complete handleiding voor het internationaliseren van je Svelte-applicatie met Nederlands en Engels. ## 1. Package Keuze: svelte-i18n Ik raad `svelte-i18n` aan, een lichtgewicht en Svelte-geoptimaliseerde oplossing: ```bash npm install svelte-i18n ``` ## 2. Projectstructuur ``` src/ ├── lib/ │ └── i18n/ │ ├── index.js │ ├── locales/ │ │ ├── nl.json │ │ └── en.json │ └── stores.js ``` ## 3. Vertaalbestanden **nl.json:** ```json { "common": { "welcome": "Welkom bij onze app", "save": "Opslaan", "cancel": "Annuleren" }, "navigation": { "home": "Home", "about": "Over ons", "contact": "Contact" }, "user": { "greeting": "Hallo, {name}!", "messages": { "zero": "Je hebt geen berichten", "one": "Je hebt 1 bericht", "other": "Je hebt {count} berichten" } } } ``` **en.json:** ```json { "common": { "welcome": "Welcome to our app", "save": "Save", "cancel": "Cancel" }, "navigation": { "home": "Home", "about": "About", "contact": "Contact" }, "user": { "greeting": "Hello, {name}!", "messages": { "zero": "You have no messages", "one": "You have 1 message", "other": "You have {count} messages" } } } ``` ## 4. i18n Configuratie **lib/i18n/index.js:** ```javascript import { addMessages, init, getLocaleFromNavigator } from 'svelte-i18n'; import nl from './locales/nl.json'; import en from './locales/en.json'; addMessages('nl', nl); addMessages('en', en); init({ fallbackLocale: 'en', initialLocale: getLocaleFromNavigator(), }); ``` **lib/i18n/stores.js:** ```javascript import { locale, dictionary, getLocaleFromNavigator } from 'svelte-i18n'; export { locale, dictionary }; // Hulpfunctie om taal te wisselen export function setLocale(newLocale) { locale.set(newLocale); } // Detecteer initiële taal export function detectInitialLocale() { const browserLocale = getLocaleFromNavigator(); return browserLocale.startsWith('nl') ? 'nl' : 'en'; } ``` ## 5. Hoofdapplicatie Setup **App.svelte:** ```svelte <script> import { locale } from '$lib/i18n/stores'; import { setLocale, detectInitialLocale } from '$lib/i18n/stores'; import { onMount } from 'svelte'; let currentLocale = 'en'; onMount(() => { // Stel initiële taal in currentLocale = detectInitialLocale(); setLocale(currentLocale); // Luister naar locale veranderingen locale.subscribe(value => { currentLocale = value; }); }); function switchLanguage(newLang) { setLocale(newLang); } </script> <main> <!-- Taalselectie --> <div class="language-switcher"> <button class:active={currentLocale === 'nl'} on:click={() => switchLanguage('nl')} > Nederlands </button> <button class:active={currentLocale === 'en'} on:click={() => switchLanguage('en')} > English </button> </div> <!-- Je applicatie inhoud --> <div> <h1>{$_('common.welcome')}</h1> <!-- Rest van je component --> </div> </main> <style> .language-switcher { margin-bottom: 2rem; } .language-switcher button { padding: 0.5rem 1rem; margin: 0 0.5rem; border: 1px solid #ccc; background: white; cursor: pointer; } .language-switcher button.active { background: #007acc; color: white; } </style> ``` ## 6. Gebruik in Componenten **Component.svelte:** ```svelte <script> import { _ } from 'svelte-i18n'; let userName = 'Jan'; let messageCount = 5; </script> <!-- Eenvoudige vertaling --> <p>{$_('common.welcome')}</p> <!-- Vertaling met parameters --> <p>{$_('user.greeting', { values: { name: userName } })}</p> <!-- Meervoudsvormen --> <p>{$_('user.messages', { values: { count: messageCount } })}</p> <!-- Inline vertaling --> <button>{$_('common.save')}</button> ``` ## 7. Geavanceerd Gebruik ### Formatting met $format ```svelte <script> import { _ , format } from 'svelte-i18n'; let price = 29.99; let date = new Date(); </script> <!-- Datum formatting --> <p>{$format(date, { dateStyle: 'long' })}</p> <!-- Valuta formatting --> <p>{$format(price, { style: 'currency', currency: 'EUR' })}</p> ``` ### Conditionele vertalingen ```svelte <script> import { _ } from 'svelte-i18n'; let items = []; </script> {#if items.length === 0} <p>{$_('list.empty')}</p> {:else} <p>{$_('list.items', { values: { count: items.length } })}</p> {/if} ``` ## 8. Best Practices ### 1. Vertaalbestanden structureren - Gebruik namespaces (common, navigation, forms, etc.) - Houd gerelateerde vertalingen bij elkaar - Gebruik consistente key naming (camelCase) ### 2. Performance optimalisatie ```javascript // Lazy loading van vertalingen async function loadLocale(locale) { const messages = await import(`./locales/${locale}.json`); addMessages(locale, messages.default); } ``` ### 3. Fallback mechanisme ```javascript init({ fallbackLocale: 'en', initialLocale: getLocaleFromNavigator(), }); ``` ### 4. SEO optimalisatie ```svelte <svelte:head> <html lang={currentLocale} /> </svelte:head> ``` ## 9. Alternatieve Packages Als je meer functionaliteit nodig hebt: - **i18next**: Meer geavanceerde features - **formatjs**: Intl API integration - **LinguiJS**: Focus op developer experience ## 10. Testing ```javascript // Test helper export function setTestLocale(lang) { locale.set(lang); } ``` Deze implementatie biedt een solide basis voor meertalige Svelte-applicaties. Begin met deze structuur en breid uit naargelang je behoeften!