Svelte und SvelteKit i18n, automatisiert

Funktionsweise

Markup wird zu {$_('key')}, Attribute wie title="Hello {name}" werden zu einer Nachricht, und Toasts in <script> werden ebenfalls übersetzt. Konstanten, die das Markup anzeigt ({title}, {#each tabs as tab}{tab.label}), werden zu Schlüsseln, die über $_() gelesen werden.

Ein Satz um einen Link oder fetten Text bleibt eine Nachricht: ein generiertes <I18nT> rendert ihn, wobei jedes Element als Snippet (Svelte 5) übergeben oder in seinem Slot (Svelte 3 und 4) ausgewählt wird, sodass Übersetzer den Link an die Grammatik anpassen können.

In SvelteKit wählt ein generierter hooks.server die Sprache aus einem Cookie oder Accept-Language, sodass Seiten ohne Flackern in der richtigen Sprache gerendert werden.

Vorher und nachher

Die tatsächliche Ausgabe der Engine für diese Datei. Bei einer echten Ausführung benennt das gehostete Modell die Schlüssel anhand des Kontexts.

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

<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 } })} />

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

Was das Setup hinzufügt

Der erste Durchlauf richtet svelte-i18n ein, falls das Projekt es noch nicht hat:

• svelte-i18n
• src/lib/i18n (oder src/i18n), importiert aus +layout oder main
• hooks.server für SvelteKit

Ausführen

Die CLI benötigt Node.js 22 oder neuer.

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

Oder fügen Sie die GitHub Action und erhalten Sie bei jedem Push einen Pull Request. Probieren Sie es zuerst mit Ihrem eigenen Code im Spielbereich.