Svelte Adapter — astro-intl

Adaptador Svelte

Usa astro-intl/svelte para acceder a traducciones dentro de componentes Svelte con soporte de rich text via segmentos o strings HTML.

Importar

Importa desde el subpath astro-intl/svelte. Requiere svelte@^5 como peer dependency.

Import

import { getTranslations, createGetTranslations, renderRichText } from "astro-intl/svelte";
import RichText from "astro-intl/svelte/RichText.svelte";

Con Store (Astro Islands)

Usa getTranslations(namespace) dentro de componentes Svelte renderizados como Astro islands. Funciona de la misma manera que el adaptador de React.

MyComponent.svelte

<script>
  import { getTranslations } from "astro-intl/svelte";

  const t = getTranslations("hero");
</script>

<h1>{t("title")}</h1>
<p>{t("subtitle")}</p>

Standalone (Sin Store)

Usa createGetTranslations(ui, defaultLocale) cuando necesites traducciones sin el store global.

standalone.svelte

<script>
  import { createGetTranslations } from "astro-intl/svelte";
  import en from "./i18n/messages/en.json";
  import es from "./i18n/messages/es.json";

  const getTranslations = createGetTranslations(
    { en, es },
    "en"
  );

  export let lang = "en";
  const t = getTranslations(lang, "hero");
</script>

<h1>{t("title")}</h1>

Rich Text con t.rich()

t.rich(key, tagNames?) retorna un array de RichSegment[] — cada segmento es texto plano o un chunk con tag. Puedes renderizarlos de dos formas.

Opción A: renderRichText() → string HTML

Usa renderRichText(segments, options) para convertir segmentos en un string HTML. Pasa tags para elementos HTML nativos o components para renderizado personalizado.

RenderRichText.svelte

<script>
  import { getTranslations, renderRichText } from "astro-intl/svelte";

  const t = getTranslations("hero");
  const segments = t.rich("description");

  const html = renderRichText(segments, {
    tags: {
      bold: "strong",
      link: "a",
    },
  });
</script>

{@html html}

Opción B: Componente RichText.svelte

Importa el componente RichText para renderizado declarativo. Pasa tags para elementos HTML nativos y components para renderizado de componentes Svelte.

UsingRichText.svelte

<script>
  import { getTranslations } from "astro-intl/svelte";
  import RichText from "astro-intl/svelte/RichText.svelte";

  const t = getTranslations("hero");
  const segments = t.rich("description");
</script>

<RichText
  {segments}
  tags={{ bold: "strong", link: "a" }}
/>

Tip de Hidratación Los islands de Svelte funcionan con client:load o client:visible. Como React, las traducciones se resuelven en el servidor.

RichText vs renderRichText Usa RichText.svelte cuando necesites interpolación de componentes Svelte (ej., tooltip personalizado o componentes de iconos). Usa renderRichText() cuando tags HTML simples como <strong> o <a> sean suficientes — es más ligero y funciona con {@html}.

Svelte 5 Requerido El adaptador de Svelte requiere svelte@^5. Si estás usando Svelte 4, aún puedes usar renderRichText() con {@html}, pero el componente RichText es solo para Svelte 5.