localize.dev

Documenti / Svelte and SvelteKit

Internazionalizzazione Svelte e SvelteKit, automatizzata

Localizza app Svelte e SvelteKit con svelte-i18n: il markup diventa chiamate $_(), i plurali diventano messaggi ICU e le pagine SvelteKit vengono renderizzate nella lingua del visitatore sul server.

Come funziona

Il markup diventa {$_('key')}, attributi come title="Hello {name}" diventano un messaggio e anche i toast in <script> vengono tradotti. Le costanti mostrate dal markup ({title}, {#each tabs as tab}{tab.label}) diventano chiavi lette tramite $_().

Una frase attorno a un link o testo in grassetto rimane un messaggio: un <I18nT> generato lo renderizza, con ogni elemento passato come snippet (Svelte 5) o scelto nel suo slot (Svelte 3 e 4), così i traduttori possono spostare il link per adattarlo alla grammatica.

In SvelteKit, un hooks.server generato sceglie la lingua da un cookie o Accept-Language, così le pagine vengono renderizzate nella lingua corretta senza flash.

Prima e dopo

L'output effettivo del motore per questo file. In un'esecuzione reale, il modello ospitato nomina le chiavi dal contesto.

src/routes/cart/+page.svelte · prima
<script>
  export let data;
</script>

<h1>Your cart</h1>
<p>You have {data.count} items ready to ship.</p>
<p>Read our <a href="/returns">returns policy</a> before you order.</p>
<img src="/box.png" alt="Box for {data.name}" />
src/routes/cart/+page.svelte · dopo
<script>
  import { _ } from 'svelte-i18n';
  import I18nT from '$lib/I18nT.svelte';
  export let data;
</script>

<h1>{$_('page.your_cart')}</h1>
<p>{$_('page.you_have_items_ready_to', { values: { count: data.count } })}</p>
<p><I18nT key="page.read_our_before_you_order">{#snippet a()}<a href="/returns">{$_('page.returns_policy')}</a>{/snippet}</I18nT></p>
<img src="/box.png" alt={$_('page.box_for', { values: { name: data.name } })} />
locales/en.json
{
  "page": {
    "your_cart": "Your cart",
    "you_have_items_ready_to": "You have {count} items ready to ship.",
    "returns_policy": "returns policy",
    "read_our_before_you_order": "Read our {a} before you order.",
    "box_for": "Box for {name}"
  }
}

Cosa aggiunge la configurazione

La prima esecuzione imposta svelte-i18n se il progetto non lo ha ancora:

  • svelte-i18n
  • src/lib/i18n (o src/i18n), importato da +layout o main
  • hooks.server per SvelteKit

Eseguilo

La CLI richiede Node.js 22 o versioni successive.

npm install --save-dev localize-dev
npx localize-dev login

# Preview, then write the changes
npx localize-dev run --dry-run -l es,fr,de
npx localize-dev run -l es,fr,de

# Or open a pull request instead
npx localize-dev pr -l es,fr,de

Oppure aggiungi la GitHub Action e ottieni una pull request a ogni push. Provalo prima sul tuo codice nel playground.