Svelte y SvelteKit i18n, automatizado

Cómo funciona

El marcado se convierte en {$_('key')}, atributos como title="Hello {name}" se convierten en un solo mensaje, y las notificaciones en <script> también se traducen. Las constantes que muestra el marcado ({title}, {#each tabs as tab}{tab.label}) se convierten en claves leídas a través de $_().

Una frase alrededor de un enlace o texto en negrita sigue siendo un solo mensaje: un <I18nT> generado lo renderiza, con cada elemento pasado como un fragmento (Svelte 5) o seleccionado en su slot (Svelte 3 y 4), para que los traductores puedan mover el enlace para que se ajuste a la gramática.

En SvelteKit, un hooks.server generado selecciona el idioma de una cookie o Accept-Language, para que las páginas se rendericen en el idioma correcto sin parpadeo.

Antes y después

La salida real del motor para este archivo. En una ejecución real, el modelo alojado nombra las claves a partir del contexto.

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

Lo que añade la configuración

La primera ejecución configura svelte-i18n si el proyecto aún no lo tiene:

• svelte-i18n
• src/lib/i18n (o src/i18n), importado desde +layout o main
• hooks.server para SvelteKit

Ejecutarlo

La CLI necesita Node.js 22 o posterior.

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

O añade la GitHub Action y obtén una pull request en cada push. Pruébalo primero en tu propio código en el playground.