astro-intl 1.1.1 → 2.0.0

package/README.md

@@ -6,7 +6,8 @@ Sistema de internacionalización simple y type-safe para Astro, inspirado en nex
 
 - 🔒 **Type-safe**: Autocompletado y validación de claves de traducción con TypeScript
 - 🎯 **API simple**: Inspirada en next-intl, fácil de usar
-- ⚛️ **Soporte React**: Funciones específicas para componentes React con `t.rich()`
+- ⚛️ **Soporte React**: Adapter dedicado con `t.rich()` para rich text con componentes React. Importa desde `astro-intl/react`
+- 🧡 **Soporte Svelte**: Adapter dedicado con `t.rich()` que retorna segmentos y componente `RichText`. Importa desde `astro-intl/svelte`
 - 🎨 **Markup en traducciones**: Inserta HTML en strings con `t.markup()`
 - 📁 **Namespaces**: Organiza traducciones por secciones
 - 🌐 **Detección automática de locale**: Extrae el idioma desde la URL
@@ -16,8 +17,35 @@ Sistema de internacionalización simple y type-safe para Astro, inspirado en nex
 - 🗺️ **Routing localizado**: Define URLs traducidas por locale (`/es/sobre-nosotros` en vez de `/es/about`)
 - 🔄 **Rewrites automáticos**: El middleware reescribe URLs traducidas a rutas canónicas del filesystem
 - 🔗 **Generación de URLs**: `path()` y `switchLocalePath()` para construir y transformar URLs localizadas
+- 📦 **Sub-path imports**: `astro-intl/react`, `astro-intl/svelte`, `astro-intl/routing`, `astro-intl/middleware`
 
-## 📦 Instalación
+## � Migración desde v1 a v2
+
+### Breaking changes
+
+1. **`getTranslationsReact` ya no se exporta desde `astro-intl`**. Usa `getTranslations` desde `astro-intl/react`:
+
+```diff
+- import { getTranslationsReact } from "astro-intl";
++ import { getTranslations } from "astro-intl/react";
+
+- const t = getTranslationsReact();
++ const t = getTranslations();
+```
+
+2. **Sub-path imports obligatorios para adapters de framework**:
+   - React: `astro-intl/react`
+   - Svelte: `astro-intl/svelte`
+
+3. Las funciones base de Astro (`getTranslations`, `setRequestLocale`, `getLocale`, etc.) siguen exportándose desde `astro-intl` sin cambios.
+
+### Nuevas funcionalidades
+
+- **Adapter Svelte** con `t.rich()` y `renderRichText()`
+- **`createGetTranslations` factory** en ambos adapters (React y Svelte) para uso standalone sin store global
+- **`parseRichSegments()`** base agnóstica compartida
+
+## �📦 Instalación
 
 ### Instalación automática (Recomendado)
 
@@ -179,11 +207,13 @@ const t = getTranslations();
 
 ### En componentes React
 
+> **v2**: Importa desde `astro-intl/react` en lugar de `astro-intl`.
+
 ```tsx
-import { getTranslationsReact } from "astro-intl";
+import { getTranslations } from "astro-intl/react";
 
 export function MyComponent() {
-  const t = getTranslationsReact();
+  const t = getTranslations();
 
   return (
     <div>
@@ -196,13 +226,29 @@ export function MyComponent() {
 }
 ```
 
+#### Factory standalone (sin store)
+
+Si prefieres pasar los mensajes directamente sin depender del store global:
+
+```tsx
+import { createGetTranslations } from "astro-intl/react";
+import { ui } from "../i18n";
+
+const getT = createGetTranslations(ui, "en");
+
+export function MyComponent({ lang }: { lang: string }) {
+  const t = getT(lang, "nav");
+  return <a href="/">{t("home")}</a>;
+}
+```
+
 ### Traducciones con componentes React (rich text)
 
 ```tsx
-import { getTranslationsReact } from "astro-intl";
+import { getTranslations } from "astro-intl/react";
 
 export function MyComponent() {
-  const t = getTranslationsReact();
+  const t = getTranslations();
 
   // src/i18n/es.json
   // { "terms": "Acepto los <link>términos y condiciones</link>" }
@@ -217,6 +263,78 @@ export function MyComponent() {
 }
 ```
 
+### En componentes Svelte
+
+> **v2**: Nuevo adapter. Importa desde `astro-intl/svelte`.
+
+```svelte
+<script>
+  import { getTranslations } from 'astro-intl/svelte';
+
+  const t = getTranslations();
+</script>
+
+<h1>{t('welcome')}</h1>
+<nav>
+  <a href="/">{t('nav.home')}</a>
+</nav>
+```
+
+#### Rich text en Svelte
+
+`t.rich()` retorna un array de `RichSegment[]` que puedes renderizar con `renderRichText()`:
+
+```svelte
+<script>
+  import { getTranslations, renderRichText } from 'astro-intl/svelte';
+
+  // { "terms": "Acepto los <link>términos y condiciones</link>" }
+  const t = getTranslations();
+  const segments = t.rich('terms', ['link']);
+
+  const html = renderRichText(segments, {
+    tags: { link: 'a' },       // renderiza como <a>...</a>
+  });
+</script>
+
+<p>{@html html}</p>
+```
+
+También puedes usar funciones personalizadas con `components`:
+
+```svelte
+<script>
+  import { getTranslations, renderRichText } from 'astro-intl/svelte';
+
+  const t = getTranslations();
+  const segments = t.rich('terms', ['link']);
+
+  const html = renderRichText(segments, {
+    components: {
+      link: (chunks) => `<a href="/terms" class="underline">${chunks}</a>`,
+    },
+  });
+</script>
+
+<p>{@html html}</p>
+```
+
+#### Factory standalone en Svelte (sin store)
+
+```svelte
+<script>
+  import { createGetTranslations } from 'astro-intl/svelte';
+  import { ui } from '../i18n';
+
+  const getT = createGetTranslations(ui, 'en');
+
+  export let lang;
+  const t = getT(lang, 'nav');
+</script>
+
+<a href="/">{t('home')}</a>
+```
+
 ### Type-safety con TypeScript
 
 ```astro
@@ -431,15 +549,44 @@ Obtiene la función de traducción para componentes Astro.
   - `Record<string, (chunks: string) => string>` - Solo tags (backward compatible)
   - `{ values?: Record<string, Primitive>, tags: Record<string, (chunks: string) => string> }` - Tags con interpolación
 
-### `getTranslationsReact<T>(namespace?)`
+### `getTranslations()` — `astro-intl/react`
+
+Obtiene la función de traducción para componentes React (usa el store global).
+
+**Retorna:** Función `t(key)` con método `t.rich(key, tags)` que retorna `ReactNode[]`
+
+### `createGetTranslations(ui, defaultLocale)` — `astro-intl/react`
+
+Factory standalone que no depende del store global. Útil para pasar mensajes directamente.
+
+**Parámetros:**
+
+- `ui: Record<string, Record<string, unknown>>` - Objeto con todos los mensajes por locale
+- `defaultLocale: string` - Locale por defecto
+
+**Retorna:** `(lang, namespace) => t` — función que retorna `t(key)` con `t.rich(key, tags)`
+
+### `getTranslations()` — `astro-intl/svelte`
+
+Obtiene la función de traducción para componentes Svelte (usa el store global).
+
+**Retorna:** Función `t(key)` con método `t.rich(key, tagNames?)` que retorna `RichSegment[]`
+
+### `createGetTranslations(ui, defaultLocale)` — `astro-intl/svelte`
+
+Factory standalone para Svelte. Misma firma que el de React pero `t.rich()` retorna `RichSegment[]`.
+
+### `renderRichText(segments, options?)` — `astro-intl/svelte`
 
-Obtiene la función de traducción para componentes React.
+Resuelve un array de `RichSegment[]` en un string HTML.
 
 **Parámetros:**
 
-- `namespace?: string` - Namespace opcional
+- `segments: RichSegment[]` - Segmentos retornados por `t.rich()`
+- `options.tags?: Record<string, string>` - Mapea nombre de tag a elemento HTML (ej: `{ link: 'a' }`)
+- `options.components?: Record<string, (chunks: string) => string>` - Funciones personalizadas por tag
 
-**Retorna:** Función `t(key)` con método `t.rich(key, tags)`
+**Retorna:** `string` - HTML listo para renderizar con `{@html}`
 
 ### `getLocale()`
 
@@ -518,12 +665,15 @@ Esto actualizará los enlaces simbólicos y los tipos estarán disponibles en lo
 ```text
 packages/integration/
 ├── src/
+│   ├── adapters/
+│   │   ├── react.ts       # Adapter React — getTranslations, createGetTranslations, t.rich() → ReactNode[]
+│   │   └── svelte.ts      # Adapter Svelte — getTranslations, createGetTranslations, t.rich() → RichSegment[], renderRichText()
 │   ├── core.ts            # Barrel — re-exporta todo desde los módulos
+│   ├── framework-base.ts  # parseRichSegments() — base agnóstica compartida por React y Svelte
 │   ├── sanitize.ts        # Validación de locale, sanitización HTML, escape regex
 │   ├── interpolation.ts   # Interpolación {variables}, acceso a valores anidados
 │   ├── store.ts           # Estado por request (AsyncLocalStorage + fallback)
-│   ├── translations.ts    # getTranslations y getTranslationsReact
-│   ├── react.ts           # Factory de t.rich() para React
+│   ├── translations.ts    # getTranslations para componentes Astro
 │   ├── routing.ts         # path(), switchLocalePath() — generación de URLs localizadas
 │   ├── middleware.ts       # createIntlMiddleware() con rewrites de rutas traducidas
 │   ├── index.ts           # Entry point público + integración de Astro

package/dist/__tests__/framework-base.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/framework-base.test.js

@@ -0,0 +1,67 @@
+import { describe, it, expect } from "vitest";
+import { parseRichSegments } from "../framework-base.js";
+describe("framework-base.ts", () => {
+    describe("parseRichSegments", () => {
+        it("should return single text segment for plain text", () => {
+            const result = parseRichSegments("Hello world", []);
+            expect(result).toEqual([{ type: "text", value: "Hello world" }]);
+        });
+        it("should return empty array for empty string", () => {
+            const result = parseRichSegments("", []);
+            expect(result).toEqual([]);
+        });
+        it("should parse a single tag", () => {
+            const result = parseRichSegments("Click <link>here</link> to continue", ["link"]);
+            expect(result).toEqual([
+                { type: "text", value: "Click " },
+                { type: "tag", tag: "link", chunks: "here" },
+                { type: "text", value: " to continue" },
+            ]);
+        });
+        it("should parse multiple tags", () => {
+            const result = parseRichSegments("Text with <bold>bold</bold> and <italic>italic</italic>", ["bold", "italic"]);
+            expect(result).toEqual([
+                { type: "text", value: "Text with " },
+                { type: "tag", tag: "bold", chunks: "bold" },
+                { type: "text", value: " and " },
+                { type: "tag", tag: "italic", chunks: "italic" },
+            ]);
+        });
+        it("should handle adjacent tags", () => {
+            const result = parseRichSegments("<tag1>First</tag1><tag2>Second</tag2>", [
+                "tag1",
+                "tag2",
+            ]);
+            expect(result).toEqual([
+                { type: "tag", tag: "tag1", chunks: "First" },
+                { type: "tag", tag: "tag2", chunks: "Second" },
+            ]);
+        });
+        it("should handle empty chunks", () => {
+            const result = parseRichSegments("Text <tag></tag> more text", ["tag"]);
+            expect(result).toEqual([
+                { type: "text", value: "Text " },
+                { type: "tag", tag: "tag", chunks: "" },
+                { type: "text", value: " more text" },
+            ]);
+        });
+        it("should return text segment when no matching tags found", () => {
+            const result = parseRichSegments("Hello <unknown>world</unknown>", ["link"]);
+            expect(result).toEqual([
+                { type: "text", value: "Hello <unknown>world</unknown>" },
+            ]);
+        });
+        it("should handle tag names with special regex characters", () => {
+            const result = parseRichSegments("Click <link.ext>here</link.ext> now", ["link.ext"]);
+            expect(result).toEqual([
+                { type: "text", value: "Click " },
+                { type: "tag", tag: "link.ext", chunks: "here" },
+                { type: "text", value: " now" },
+            ]);
+        });
+        it("should treat text as plain when tagNames is empty", () => {
+            const result = parseRichSegments("Click <link>here</link>", []);
+            expect(result).toEqual([{ type: "text", value: "Click <link>here</link>" }]);
+        });
+    });
+});

package/dist/__tests__/integration.test.js

@@ -1,5 +1,6 @@
 import { describe, it, expect, beforeEach } from "vitest";
-import { setRequestLocale, getLocale, getTranslations, getTranslationsReact, __resetRequestConfig, } from "../index.js";
+import { setRequestLocale, getLocale, getTranslations, __resetRequestConfig } from "../index.js";
+import { getTranslations as getTranslationsReact } from "../adapters/react.js";
 describe("Integration Tests", () => {
     beforeEach(() => {
         __resetRequestConfig();
@@ -127,7 +128,6 @@ describe("Integration Tests", () => {
         it("should throw descriptive error when accessing translations before setup", () => {
             expect(() => getLocale()).toThrow("[astro-intl] No request config found. Did you call setRequestLocale()?");
             expect(() => getTranslations()).toThrow("[astro-intl] No request config found. Did you call setRequestLocale()?");
-            expect(() => getTranslationsReact()).toThrow("[astro-intl] No request config found. Did you call setRequestLocale()?");
         });
         it("should handle missing translations gracefully", async () => {
             const url = new URL("https://example.com/en/page");

package/dist/__tests__/react.test.js

@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest";
-import { createGetTranslationsReact } from "../react.js";
+import { createGetTranslations } from "../adapters/react.js";
 describe("react.ts", () => {
     const ui = {
         en: {
@@ -31,36 +31,36 @@ describe("react.ts", () => {
             },
         },
     };
-    describe("createGetTranslationsReact", () => {
+    describe("createGetTranslations", () => {
         it("should create translation function for default locale", () => {
-            const getT = createGetTranslationsReact(ui, "en");
+            const getT = createGetTranslations(ui, "en");
             const t = getT("en", "common");
             expect(t("greeting")).toBe("Hello");
             expect(t("farewell")).toBe("Goodbye");
         });
         it("should create translation function for non-default locale", () => {
-            const getT = createGetTranslationsReact(ui, "en");
+            const getT = createGetTranslations(ui, "en");
             const t = getT("es", "common");
             expect(t("greeting")).toBe("Hola");
             expect(t("farewell")).toBe("Adiós");
         });
         it("should handle nested keys", () => {
-            const getT = createGetTranslationsReact(ui, "en");
+            const getT = createGetTranslations(ui, "en");
             const t = getT("en", "common");
             expect(t("nested.deep")).toBe("Deep value");
         });
         it("should return key when translation not found", () => {
-            const getT = createGetTranslationsReact(ui, "en");
+            const getT = createGetTranslations(ui, "en");
             const t = getT("en", "common");
             expect(t("nonexistent")).toBe("nonexistent");
         });
         it("should fallback to default locale when locale not found", () => {
-            const getT = createGetTranslationsReact(ui, "en");
+            const getT = createGetTranslations(ui, "en");
             const t = getT("fr", "common");
             expect(t("greeting")).toBe("Hello");
         });
         it("should work with different namespaces", () => {
-            const getT = createGetTranslationsReact(ui, "en");
+            const getT = createGetTranslations(ui, "en");
             const tCommon = getT("en", "common");
             const tHome = getT("en", "home");
             expect(tCommon("greeting")).toBe("Hello");
@@ -69,7 +69,7 @@ describe("react.ts", () => {
     });
     describe("t.rich", () => {
         it("should interpolate React components", () => {
-            const getT = createGetTranslationsReact(ui, "en");
+            const getT = createGetTranslations(ui, "en");
             const t = getT("en", "home");
             const result = t.rich("withTags", {
                 link: (chunks) => `<a>${chunks}</a>`,
@@ -77,7 +77,7 @@ describe("react.ts", () => {
             expect(result).toEqual(["Click ", "<a>here</a>", " to continue"]);
         });
         it("should handle multiple tags", () => {
-            const getT = createGetTranslationsReact(ui, "en");
+            const getT = createGetTranslations(ui, "en");
             const t = getT("en", "home");
             const result = t.rich("multipleTags", {
                 bold: (chunks) => `<strong>${chunks}</strong>`,
@@ -86,13 +86,13 @@ describe("react.ts", () => {
             expect(result).toEqual(["Text with ", "<strong>bold</strong>", " and ", "<em>italic</em>"]);
         });
         it("should handle text without tags", () => {
-            const getT = createGetTranslationsReact(ui, "en");
+            const getT = createGetTranslations(ui, "en");
             const t = getT("en", "common");
             const result = t.rich("greeting", {});
             expect(result).toEqual(["Hello"]);
         });
         it("should work with Spanish locale", () => {
-            const getT = createGetTranslationsReact(ui, "en");
+            const getT = createGetTranslations(ui, "en");
             const t = getT("es", "home");
             const result = t.rich("withTags", {
                 link: (chunks) => `<a>${chunks}</a>`,
@@ -107,13 +107,21 @@ describe("react.ts", () => {
                     },
                 },
             };
-            const getT = createGetTranslationsReact(customUi, "en");
+            const getT = createGetTranslations(customUi, "en");
             const t = getT("en", "test");
             const result = t.rich("nested", {
-                outer: (chunks) => `[${chunks}]`,
-                inner: (chunks) => `{${chunks}}`,
+                outer: (chunks) => ({ wrapper: "outer", children: chunks }),
+                inner: (chunks) => ({ wrapper: "inner", children: chunks }),
             });
-            expect(result).toEqual(["Start ", "[outer {inner} outer]", " end"]);
+            // outer receives a ReactNode[] because inner was processed recursively
+            expect(result).toEqual([
+                "Start ",
+                {
+                    wrapper: "outer",
+                    children: ["outer ", { wrapper: "inner", children: "inner" }, " outer"],
+                },
+                " end",
+            ]);
         });
         it("should handle adjacent tags", () => {
             const customUi = {
@@ -123,7 +131,7 @@ describe("react.ts", () => {
                     },
                 },
             };
-            const getT = createGetTranslationsReact(customUi, "en");
+            const getT = createGetTranslations(customUi, "en");
             const t = getT("en", "test");
             const result = t.rich("adjacent", {
                 tag1: (chunks) => `[${chunks}]`,
@@ -139,7 +147,7 @@ describe("react.ts", () => {
                     },
                 },
             };
-            const getT = createGetTranslationsReact(customUi, "en");
+            const getT = createGetTranslations(customUi, "en");
             const t = getT("en", "test");
             const result = t.rich("empty", {
                 tag: (chunks) => `[${chunks}]`,

package/dist/__tests__/svelte.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/svelte.test.js

@@ -0,0 +1,180 @@
+import { describe, it, expect } from "vitest";
+import { createGetTranslations, renderRichText } from "../adapters/svelte.js";
+describe("svelte adapter", () => {
+    const ui = {
+        en: {
+            common: {
+                greeting: "Hello",
+                farewell: "Goodbye",
+                nested: {
+                    deep: "Deep value",
+                },
+            },
+            home: {
+                title: "Welcome Home",
+                withTags: "Click <link>here</link> to continue",
+                multipleTags: "Text with <bold>bold</bold> and <italic>italic</italic>",
+            },
+        },
+        es: {
+            common: {
+                greeting: "Hola",
+                farewell: "Adiós",
+                nested: {
+                    deep: "Valor profundo",
+                },
+            },
+            home: {
+                title: "Bienvenido a Casa",
+                withTags: "Haz clic <link>aquí</link> para continuar",
+                multipleTags: "Texto con <bold>negrita</bold> y <italic>cursiva</italic>",
+            },
+        },
+    };
+    describe("createGetTranslations", () => {
+        it("should create translation function for default locale", () => {
+            const getT = createGetTranslations(ui, "en");
+            const t = getT("en", "common");
+            expect(t("greeting")).toBe("Hello");
+            expect(t("farewell")).toBe("Goodbye");
+        });
+        it("should create translation function for non-default locale", () => {
+            const getT = createGetTranslations(ui, "en");
+            const t = getT("es", "common");
+            expect(t("greeting")).toBe("Hola");
+            expect(t("farewell")).toBe("Adiós");
+        });
+        it("should handle nested keys", () => {
+            const getT = createGetTranslations(ui, "en");
+            const t = getT("en", "common");
+            expect(t("nested.deep")).toBe("Deep value");
+        });
+        it("should return key when translation not found", () => {
+            const getT = createGetTranslations(ui, "en");
+            const t = getT("en", "common");
+            expect(t("nonexistent")).toBe("nonexistent");
+        });
+        it("should fallback to default locale when locale not found", () => {
+            const getT = createGetTranslations(ui, "en");
+            const t = getT("fr", "common");
+            expect(t("greeting")).toBe("Hello");
+        });
+    });
+    describe("t.rich", () => {
+        it("should return segments for a single tag", () => {
+            const getT = createGetTranslations(ui, "en");
+            const t = getT("en", "home");
+            const result = t.rich("withTags", ["link"]);
+            expect(result).toEqual([
+                { type: "text", value: "Click " },
+                { type: "tag", tag: "link", chunks: "here" },
+                { type: "text", value: " to continue" },
+            ]);
+        });
+        it("should return segments for multiple tags", () => {
+            const getT = createGetTranslations(ui, "en");
+            const t = getT("en", "home");
+            const result = t.rich("multipleTags", ["bold", "italic"]);
+            expect(result).toEqual([
+                { type: "text", value: "Text with " },
+                { type: "tag", tag: "bold", chunks: "bold" },
+                { type: "text", value: " and " },
+                { type: "tag", tag: "italic", chunks: "italic" },
+            ]);
+        });
+        it("should return text segment when no tagNames provided", () => {
+            const getT = createGetTranslations(ui, "en");
+            const t = getT("en", "common");
+            const result = t.rich("greeting");
+            expect(result).toEqual([{ type: "text", value: "Hello" }]);
+        });
+        it("should work with Spanish locale", () => {
+            const getT = createGetTranslations(ui, "en");
+            const t = getT("es", "home");
+            const result = t.rich("withTags", ["link"]);
+            expect(result).toEqual([
+                { type: "text", value: "Haz clic " },
+                { type: "tag", tag: "link", chunks: "aquí" },
+                { type: "text", value: " para continuar" },
+            ]);
+        });
+        it("should handle adjacent tags", () => {
+            const customUi = {
+                en: {
+                    test: {
+                        adjacent: "<tag1>First</tag1><tag2>Second</tag2>",
+                    },
+                },
+            };
+            const getT = createGetTranslations(customUi, "en");
+            const t = getT("en", "test");
+            const result = t.rich("adjacent", ["tag1", "tag2"]);
+            expect(result).toEqual([
+                { type: "tag", tag: "tag1", chunks: "First" },
+                { type: "tag", tag: "tag2", chunks: "Second" },
+            ]);
+        });
+        it("should handle empty chunks", () => {
+            const customUi = {
+                en: {
+                    test: {
+                        empty: "Text <tag></tag> more text",
+                    },
+                },
+            };
+            const getT = createGetTranslations(customUi, "en");
+            const t = getT("en", "test");
+            const result = t.rich("empty", ["tag"]);
+            expect(result).toEqual([
+                { type: "text", value: "Text " },
+                { type: "tag", tag: "tag", chunks: "" },
+                { type: "text", value: " more text" },
+            ]);
+        });
+    });
+    describe("renderRichText", () => {
+        it("should resolve tags to native HTML elements", () => {
+            const getT = createGetTranslations(ui, "en");
+            const t = getT("en", "home");
+            const segments = t.rich("multipleTags", ["bold", "italic"]);
+            const html = renderRichText(segments, {
+                tags: { bold: "strong", italic: "em" },
+            });
+            expect(html).toBe("Text with <strong>bold</strong> and <em>italic</em>");
+        });
+        it("should resolve components as callback functions", () => {
+            const getT = createGetTranslations(ui, "en");
+            const t = getT("en", "home");
+            const segments = t.rich("withTags", ["link"]);
+            const html = renderRichText(segments, {
+                components: {
+                    link: (chunks) => `<a href="/target">${chunks}</a>`,
+                },
+            });
+            expect(html).toBe('Click <a href="/target">here</a> to continue');
+        });
+        it("should mix tags and components", () => {
+            const getT = createGetTranslations(ui, "en");
+            const t = getT("en", "home");
+            const segments = t.rich("multipleTags", ["bold", "italic"]);
+            const html = renderRichText(segments, {
+                tags: { bold: "strong" },
+                components: {
+                    italic: (chunks) => `<span class="italic">${chunks}</span>`,
+                },
+            });
+            expect(html).toBe('Text with <strong>bold</strong> and <span class="italic">italic</span>');
+        });
+        it("should fallback to plain chunks when no resolver found", () => {
+            const getT = createGetTranslations(ui, "en");
+            const t = getT("en", "home");
+            const segments = t.rich("withTags", ["link"]);
+            const html = renderRichText(segments);
+            expect(html).toBe("Click here to continue");
+        });
+        it("should handle empty segments", () => {
+            const html = renderRichText([]);
+            expect(html).toBe("");
+        });
+    });
+});

package/dist/adapters/react.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+import { type DotPaths } from "../interpolation.js";
+export declare function createGetTranslations<UI extends Record<string, Record<string, unknown>>, DefaultLocale extends keyof UI>(ui: UI, defaultLocale: DefaultLocale): <N extends keyof UI[DefaultLocale]>(lang: string | undefined, namespace: N) => ((key: DotPaths<UI[DefaultLocale][N]>) => string) & {
+    rich: (key: DotPaths<UI[DefaultLocale][N]>, tags: Record<string, (chunks: ReactNode) => ReactNode>) => ReactNode[];
+};
+export declare function getTranslations<T extends Record<string, unknown> = Record<string, unknown>>(namespace?: string): ((key: DotPaths<T>) => string) & {
+    rich: (key: DotPaths<T>, tags: Record<string, (chunks: ReactNode) => ReactNode>) => ReactNode[];
+};

package/dist/adapters/react.js

@@ -0,0 +1,45 @@
+import { getNestedValue } from "../interpolation.js";
+import { parseRichSegments } from "../framework-base.js";
+import { getMessages, getLocale } from "../store.js";
+// ─── createGetTranslations (standalone, no store dependency) ────────
+export function createGetTranslations(ui, defaultLocale) {
+    return function getTranslations(lang, namespace) {
+        const resolvedLang = lang && lang in ui ? lang : defaultLocale;
+        const messages = ui[resolvedLang][namespace];
+        function t(key) {
+            const value = getNestedValue(messages, key);
+            return typeof value === "string" ? value : key;
+        }
+        const rich = function (key, tags) {
+            const str = t(key);
+            const tagNames = Object.keys(tags);
+            function processString(input) {
+                const segments = parseRichSegments(input, tagNames);
+                return segments.map((seg) => {
+                    if (seg.type === "text")
+                        return seg.value;
+                    // Recursively process nested tags within chunks
+                    const innerSegments = parseRichSegments(seg.chunks, tagNames);
+                    const hasNestedTags = innerSegments.some((s) => s.type === "tag");
+                    const resolvedChunks = hasNestedTags ? processString(seg.chunks) : seg.chunks;
+                    const tagFn = tags[seg.tag];
+                    if (typeof tagFn !== "function") {
+                        console.warn(`[astro-intl] Unregistered rich tag: <${seg.tag}>. Content will render without transformation.`);
+                        return resolvedChunks;
+                    }
+                    return tagFn(resolvedChunks);
+                });
+            }
+            return processString(str);
+        };
+        Object.assign(t, { rich });
+        return t;
+    };
+}
+// ─── getTranslations (store-backed, for use in Astro islands) ───────
+export function getTranslations(namespace) {
+    const messages = getMessages(namespace);
+    const locale = getLocale();
+    const ui = { [locale]: { default: messages } };
+    return createGetTranslations(ui, locale)(locale, "default");
+}

package/dist/adapters/svelte.d.ts

@@ -0,0 +1,14 @@
+import { type DotPaths } from "../interpolation.js";
+import { type RichSegment } from "../framework-base.js";
+export type { RichSegment } from "../framework-base.js";
+export declare function createGetTranslations<UI extends Record<string, Record<string, unknown>>, DefaultLocale extends keyof UI>(ui: UI, defaultLocale: DefaultLocale): <N extends keyof UI[DefaultLocale]>(lang: string | undefined, namespace: N) => ((key: DotPaths<UI[DefaultLocale][N]>) => string) & {
+    rich: (key: DotPaths<UI[DefaultLocale][N]>, tagNames?: string[]) => RichSegment[];
+};
+export type RichTextOptions = {
+    tags?: Record<string, string>;
+    components?: Record<string, (chunks: string) => string>;
+};
+export declare function renderRichText(segments: RichSegment[], options?: RichTextOptions): string;
+export declare function getTranslations<T extends Record<string, unknown> = Record<string, unknown>>(namespace?: string): ((key: DotPaths<T>) => string) & {
+    rich: (key: DotPaths<T>, tagNames?: string[]) => RichSegment[];
+};

package/dist/adapters/svelte.js

@@ -0,0 +1,44 @@
+import { getNestedValue } from "../interpolation.js";
+import { parseRichSegments } from "../framework-base.js";
+import { getMessages, getLocale } from "../store.js";
+// ─── createGetTranslations (standalone, no store dependency) ────────
+export function createGetTranslations(ui, defaultLocale) {
+    return function getTranslations(lang, namespace) {
+        const resolvedLang = lang && lang in ui ? lang : defaultLocale;
+        const messages = ui[resolvedLang][namespace];
+        function t(key) {
+            const value = getNestedValue(messages, key);
+            return typeof value === "string" ? value : key;
+        }
+        const rich = function (key, tagNames) {
+            const str = t(key);
+            return parseRichSegments(str, tagNames ?? []);
+        };
+        Object.assign(t, { rich });
+        return t;
+    };
+}
+export function renderRichText(segments, options = {}) {
+    const { tags = {}, components = {} } = options;
+    return segments
+        .map((seg) => {
+        if (seg.type === "text")
+            return seg.value;
+        const componentFn = components[seg.tag];
+        if (typeof componentFn === "function")
+            return componentFn(seg.chunks);
+        const htmlTag = tags[seg.tag];
+        if (typeof htmlTag === "string")
+            return `<${htmlTag}>${seg.chunks}</${htmlTag}>`;
+        console.warn(`[astro-intl] Unregistered rich tag: <${seg.tag}>. Content will render without transformation.`);
+        return seg.chunks;
+    })
+        .join("");
+}
+// ─── getTranslations (store-backed, for use in Astro islands) ───────
+export function getTranslations(namespace) {
+    const messages = getMessages(namespace);
+    const locale = getLocale();
+    const ui = { [locale]: { default: messages } };
+    return createGetTranslations(ui, locale)(locale, "default");
+}

package/dist/core.d.ts

@@ -1,5 +1,5 @@
 export { setRequestLocale, runWithLocale, getLocale, getLocales, isValidLocale, getMessages, getDefaultLocale, defineRequestConfig, __setConfigMessages, __resetRequestConfig, __setIntlConfig, } from "./store.js";
-export { getTranslations, getTranslationsReact } from "./translations.js";
+export { getTranslations } from "./translations.js";
 export { getNestedValue, type DotPaths } from "./interpolation.js";
 export { sanitizeLocale, sanitizeHtml, escapeRegExp } from "./sanitize.js";
 export { path, switchLocalePath, templateToRegex } from "./routing.js";

package/dist/core.js

@@ -1,7 +1,7 @@
 // ─── Store (request lifecycle) ──────────────────────────────────────
 export { setRequestLocale, runWithLocale, getLocale, getLocales, isValidLocale, getMessages, getDefaultLocale, defineRequestConfig, __setConfigMessages, __resetRequestConfig, __setIntlConfig, } from "./store.js";
 // ─── Translations ───────────────────────────────────────────────────
-export { getTranslations, getTranslationsReact } from "./translations.js";
+export { getTranslations } from "./translations.js";
 // ─── Interpolation utilities ────────────────────────────────────────
 export { getNestedValue } from "./interpolation.js";
 // ─── Sanitisation utilities ─────────────────────────────────────────

package/dist/framework-base.d.ts

@@ -0,0 +1,11 @@
+export type RichSegmentText = {
+    type: "text";
+    value: string;
+};
+export type RichSegmentTag = {
+    type: "tag";
+    tag: string;
+    chunks: string;
+};
+export type RichSegment = RichSegmentText | RichSegmentTag;
+export declare function parseRichSegments(str: string, tagNames: string[]): RichSegment[];

package/dist/framework-base.js

@@ -0,0 +1,24 @@
+import { escapeRegExp } from "./sanitize.js";
+// ─── Parse rich text into framework-agnostic segments ───────────────
+export function parseRichSegments(str, tagNames) {
+    if (tagNames.length === 0) {
+        return str.length > 0 ? [{ type: "text", value: str }] : [];
+    }
+    const escaped = tagNames.map(escapeRegExp);
+    const regex = new RegExp(`<(${escaped.join("|")})>(.*?)<\\/(\\1)>`, "g");
+    const result = [];
+    let lastIndex = 0;
+    let match;
+    while ((match = regex.exec(str)) !== null) {
+        if (match.index > lastIndex) {
+            result.push({ type: "text", value: str.slice(lastIndex, match.index) });
+        }
+        const [, tag, chunks] = match;
+        result.push({ type: "tag", tag, chunks });
+        lastIndex = match.index + match[0].length;
+    }
+    if (lastIndex < str.length) {
+        result.push({ type: "text", value: str.slice(lastIndex) });
+    }
+    return result;
+}

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import type { AstroIntegration } from "astro";
 import type { MessagesConfig, RoutesMap } from "./types/index.js";
-import { setRequestLocale as _setRequestLocale, runWithLocale as _runWithLocale, getLocale as _getLocale, getLocales as _getLocales, isValidLocale as _isValidLocale, getMessages as _getMessages, getTranslations as _getTranslations, getTranslationsReact as _getTranslationsReact, defineRequestConfig as _defineRequestConfig, __resetRequestConfig as _resetRequestConfig, path as _path, switchLocalePath as _switchLocalePath } from "./core.js";
+import { setRequestLocale as _setRequestLocale, runWithLocale as _runWithLocale, getLocale as _getLocale, getLocales as _getLocales, isValidLocale as _isValidLocale, getMessages as _getMessages, getTranslations as _getTranslations, defineRequestConfig as _defineRequestConfig, __resetRequestConfig as _resetRequestConfig, path as _path, switchLocalePath as _switchLocalePath } from "./core.js";
 export type AstroIntlOptions = {
     enabled?: boolean;
     defaultLocale?: string;
@@ -16,7 +16,6 @@ export declare const getLocales: typeof _getLocales;
 export declare const isValidLocale: typeof _isValidLocale;
 export declare const getMessages: typeof _getMessages;
 export declare const getTranslations: typeof _getTranslations;
-export declare const getTranslationsReact: typeof _getTranslationsReact;
 export declare const defineRequestConfig: typeof _defineRequestConfig;
 export declare const __resetRequestConfig: typeof _resetRequestConfig;
 export declare const path: typeof _path;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { setRequestLocale as _setRequestLocale, runWithLocale as _runWithLocale, getLocale as _getLocale, getLocales as _getLocales, isValidLocale as _isValidLocale, getMessages as _getMessages, getTranslations as _getTranslations, getTranslationsReact as _getTranslationsReact, defineRequestConfig as _defineRequestConfig, __resetRequestConfig as _resetRequestConfig, __setConfigMessages, __setIntlConfig, path as _path, switchLocalePath as _switchLocalePath, } from "./core.js";
+import { setRequestLocale as _setRequestLocale, runWithLocale as _runWithLocale, getLocale as _getLocale, getLocales as _getLocales, isValidLocale as _isValidLocale, getMessages as _getMessages, getTranslations as _getTranslations, defineRequestConfig as _defineRequestConfig, __resetRequestConfig as _resetRequestConfig, __setConfigMessages, __setIntlConfig, path as _path, switchLocalePath as _switchLocalePath, } from "./core.js";
 export default function astroIntl(options = {}) {
     const { enabled = true, defaultLocale, locales, messages, routes } = options;
     if (defaultLocale || locales || routes) {
@@ -38,7 +38,6 @@ export const getLocales = _getLocales;
 export const isValidLocale = _isValidLocale;
 export const getMessages = _getMessages;
 export const getTranslations = _getTranslations;
-export const getTranslationsReact = _getTranslationsReact;
 export const defineRequestConfig = _defineRequestConfig;
 export const __resetRequestConfig = _resetRequestConfig;
 export const path = _path;

package/dist/translations.d.ts

@@ -6,6 +6,3 @@ export declare function getTranslations<T extends Record<string, unknown> = Reco
         tags: Record<string, (chunks: string) => string>;
     }) => string;
 };
-export declare function getTranslationsReact<T extends Record<string, unknown> = Record<string, unknown>>(namespace?: string): ((key: DotPaths<T>) => string) & {
-    rich: (key: DotPaths<T>, tags: Record<string, (chunks: string) => import("react").ReactNode>) => import("react").ReactNode[];
-};

package/dist/translations.js

@@ -1,7 +1,6 @@
-import { getMessages, getLocale } from "./store.js";
+import { getMessages } from "./store.js";
 import { getNestedValue, interpolateValues } from "./interpolation.js";
 import { escapeRegExp, sanitizeHtml } from "./sanitize.js";
-import { createGetTranslationsReact } from "./react.js";
 // ─── getTranslations (Astro / plain HTML) ───────────────────────────
 export function getTranslations(namespace) {
     const messages = getMessages(namespace);
@@ -32,10 +31,3 @@ export function getTranslations(namespace) {
     Object.assign(t, { markup });
     return t;
 }
-// ─── getTranslationsReact (React islands) ───────────────────────────
-export function getTranslationsReact(namespace) {
-    const messages = getMessages(namespace);
-    const locale = getLocale();
-    const ui = { [locale]: { default: messages } };
-    return createGetTranslationsReact(ui, locale)(locale, "default");
-}

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "astro-intl",
-  "version": "1.1.1",
+  "version": "2.0.0",
   "type": "module",
-  "description": "Sistema de internacionalización simple y type-safe para Astro, inspirado en next-intl",
+  "description": "Sistema de internacionalización simple y type-safe para Astro.",
   "keywords": [
     "astro",
     "astro-integration",
@@ -12,8 +12,7 @@
     "internationalization",
     "intl",
     "translations",
-    "typescript",
-    "accessibility"
+    "typescript"
   ],
   "author": "Erick Cruz <erickj.cruzs@gmail.com>",
   "license": "MIT",
@@ -43,6 +42,14 @@
       "types": "./dist/middleware.d.ts",
       "import": "./dist/middleware.js"
     },
+    "./react": {
+      "types": "./dist/adapters/react.d.ts",
+      "import": "./dist/adapters/react.js"
+    },
+    "./svelte": {
+      "types": "./dist/adapters/svelte.d.ts",
+      "import": "./dist/adapters/svelte.js"
+    },
     "./routing": {
       "types": "./dist/routing.d.ts",
       "import": "./dist/routing.js"
@@ -54,6 +61,9 @@
   "peerDependenciesMeta": {
     "react": {
       "optional": true
+    },
+    "svelte": {
+      "optional": true
     }
   },
   "repository": {
@@ -81,6 +91,7 @@
     "react-dom": "^19.2.4",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.19.1",
+    "svelte": "^5.0.0",
     "vitest": "^4.0.18"
   }
 }