@intlayer/docs 9.3.0 → 9.3.2

package/docs/es/eslint.md

@@ -0,0 +1,336 @@
+---
+createdAt: 2026-08-12
+updatedAt: 2026-08-12
+title: Plugin de ESLint | Reglas de lint para Intlayer
+description: Detecta cadenas hardcodeadas, llamadas dinámicas que el compilador de Intlayer no puede optimizar y contenido de diccionario sin usar, con eslint-plugin-intlayer. Funciona con ESLint y oxlint, en React, Vue, Svelte, Angular y Astro.
+keywords:
+  - Intlayer
+  - ESLint
+  - oxlint
+  - Lint
+  - i18n
+  - Internacionalización
+  - no-raw-text
+  - Cadenas hardcodeadas
+  - Traducciones sin usar
+  - Contenido muerto
+  - React
+  - Vue
+  - Svelte
+  - Angular
+slugs:
+  - doc
+  - eslint
+history:
+  - version: 9.3.1
+    date: 2026-08-12
+    changes: "Historial inicial"
+author: aymericzip
+---
+
+# Plugin de ESLint x OXLint
+
+`eslint-plugin-intlayer` detecta los tipos de error de i18n que TypeScript no puede ver:
+
+1. **Texto hardcodeado** que nunca llegó a un diccionario.
+2. **Llamadas dinámicas** que pasan el chequeo de tipos y se ejecutan, pero que el compilador de Intlayer no puede optimizar.
+3. **Contenido muerto** — diccionarios y campos que nada en el proyecto lee (opcional mediante activación).
+
+Las claves de diccionario desconocidas, las rutas de campo desconocidas y las locales faltantes ya son errores de compilación, así que el plugin no las repite.
+
+## Instalación
+
+```bash packageManager="npm"
+npm install --save-dev eslint-plugin-intlayer
+```
+
+```bash packageManager="pnpm"
+pnpm add --save-dev eslint-plugin-intlayer
+```
+
+```bash packageManager="yarn"
+yarn add --dev eslint-plugin-intlayer
+```
+
+Requiere ESLint 9 o posterior (flat config).
+
+## Uso
+
+El plugin funciona tanto en ESLint como en [oxlint](https://oxc.rs): las mismas reglas, las mismas opciones.
+
+<Tabs defaultTab="eslint">
+  <Tab label="ESLint" value="eslint">
+
+```javascript fileName="eslint.config.mjs" codeFormat="esm"
+import intlayer from "eslint-plugin-intlayer";
+
+export default [...intlayer.configs.recommended];
+```
+
+O activa las reglas una por una:
+
+```javascript fileName="eslint.config.mjs" codeFormat="esm"
+import intlayer from "eslint-plugin-intlayer";
+
+export default [
+  {
+    plugins: { intlayer },
+    rules: {
+      "intlayer/no-raw-text": "warn",
+      "intlayer/static-dictionary-key": "error",
+      "intlayer/no-dynamic-field-access": "error",
+      "intlayer/enforce-adapter-import": "warn",
+      "intlayer/no-unused-content": "warn",
+    },
+  },
+];
+```
+
+  </Tab>
+  <Tab label="oxlint" value="oxlint">
+
+```json fileName=".oxlintrc.json"
+{
+  "jsPlugins": ["eslint-plugin-intlayer"],
+  "rules": {
+    "intlayer/no-raw-text": "warn",
+    "intlayer/static-dictionary-key": "error",
+    "intlayer/no-dynamic-field-access": "error",
+    "intlayer/enforce-adapter-import": "warn"
+  }
+}
+```
+
+Dos advertencias: el soporte de plugins JS en oxlint aún está en fase alfa, y oxlint no admite parsers personalizados; por lo tanto, los archivos `.vue`, `.svelte`, `.astro` y las plantillas de Angular no se analizan allí. Ejecuta oxlint sobre tus archivos JS/TS/JSX y mantén ESLint para el resto.
+
+`no-unused-content` se omite intencionadamente arriba: necesita el directorio de trabajo y la ruta del archivo analizado del contexto de la regla, lo cual el puente alfa de plugins JS no garantiza. Ejecútala bajo ESLint.
+
+  </Tab>
+</Tabs>
+
+### Configuraciones
+
+| Configuración   | `no-raw-text`                    | `static-dictionary-key` | `no-dynamic-field-access` | `enforce-adapter-import` | `no-unused-content` |
+| --------------- | -------------------------------- | ----------------------- | ------------------------- | ------------------------ | ------------------- |
+| `recommended`   | warn                             | error                   | error                     | off                      | off                 |
+| `strict`        | error (+ literales fuera de JSX) | error                   | error                     | error                    | off                 |
+| `contract-only` | off                              | error                   | error                     | off                      | off                 |
+
+`recommended` mantiene deliberadamente `no-raw-text` en `warn`: apuntarla a una base de código existente detecta todas las cadenas no traducidas de golpe, lo cual no debería romper tu compilación desde el primer día.
+
+`enforce-adapter-import` está desactivada por defecto — actívala explícitamente si la deseas.
+
+`no-unused-content` está desactivada en todas las configuraciones, incluida `strict`. Es la única regla que lee tu configuración de Intlayer y recorre tus archivos fuente desde el disco, por lo que activarla debe ser una elección deliberada en lugar de algo que un ajuste preestablecido haga por ti.
+
+## Reglas
+
+### `no-raw-text`
+
+Informa sobre el texto orientado al usuario que no está declarado en un diccionario. Utiliza la misma detección que `intlayer extract`, por lo que se ignoran nombres de marcas, clases CSS e identificadores técnicos.
+
+```jsx
+// ✗ Reportado
+<h1>Welcome to our documentation</h1>
+<input placeholder="Enter your email address" />
+
+// ✓ Correcto
+const { title } = useIntlayer("home");
+<h1>{title}</h1>
+```
+
+Los archivos de declaración de contenido (`*.content.ts`, …) se ignoran.
+
+Para corregir un archivo completo de una vez, ejecuta `npx intlayer extract` y deja que el compilador mueva las cadenas a un diccionario por ti.
+
+**Opciones**
+
+```javascript fileName="eslint.config.mjs" codeFormat="esm"
+{
+  "intlayer/no-raw-text": [
+    "warn",
+    {
+      // Atributos cuyo valor es texto orientado al usuario.
+      // Por defecto: title, placeholder, alt, aria-label, label
+      attributes: ["title", "placeholder", "alt", "aria-label", "label"],
+
+      // Elementos cuyo contenido nunca es texto orientado al usuario.
+      // Por defecto: code, pre, script, style
+      ignoreElements: ["code", "pre", "script", "style"],
+
+      // Expresiones regulares para texto que nunca se debe reportar.
+      ignorePatterns: ["^Powered by"],
+
+      // También reportar literales de cadena fuera del marcado. Por defecto: false
+      includeStringLiterals: false,
+    },
+  ],
+}
+```
+
+### `static-dictionary-key`
+
+Requiere que la clave del diccionario sea un literal de cadena.
+
+El compilador solo puede precargar un diccionario cuando puede leer la clave directamente en el punto de llamada. Con una clave calculada, omite silenciosamente la optimización e incluye todos los diccionarios en el empaquetado.
+
+```typescript
+// ✗ Reportado
+useIntlayer(dictionaryKey);
+useIntlayer(`home-${suffix}`);
+getTranslations({ namespace: page });
+
+// ✗ Una variable sigue sin ser un literal
+const key = "home";
+useIntlayer(key);
+
+// ✓ Correcto
+useIntlayer("home");
+getTranslations({ namespace: "home" });
+```
+
+Esto se aplica a `useIntlayer`, `getIntlayer` y a todos los adaptadores de compatibilidad (`useTranslation`, `useTranslations`, `formatMessage`, `<FormattedMessage id>`, `<Trans i18nKey>`, …).
+
+### `no-dynamic-field-access`
+
+Requiere que el campo que lees de un diccionario sea conocido estáticamente.
+
+El compilador elimina los campos que no ve utilizados. Un acceso dinámico le resulta invisible, por lo que la lectura puede devolver `undefined` en tiempo de ejecución.
+
+```typescript
+// ✗ Reportado
+const content = useIntlayer("home");
+content[fieldName];
+
+const t = useTranslations("home");
+t(messageKey);
+
+// ✓ Correcto
+content.title;
+content["title"];
+content.items[0];
+t("hero.title");
+```
+
+### `enforce-adapter-import`
+
+Prefiere el adaptador de compatibilidad `@intlayer/*` sobre el paquete original. El original solo se resuelve a Intlayer cuando el alias del empaquetador está configurado; el adaptador siempre lo hace. Corregible automáticamente con `--fix`.
+
+```typescript
+// ✗ Reportado
+import { useTranslation } from "react-i18next";
+import { getTranslations } from "next-intl/server";
+
+// ✓ Correcto
+import { useTranslation } from "@intlayer/react-i18next";
+import { getTranslations } from "@intlayer/next-intl/server";
+```
+
+### `no-unused-content`
+
+**Desactivada por defecto.** Informa sobre contenido que nada en tu proyecto lee, además de claves de diccionario declaradas en más de un lugar.
+
+```typescript fileName="src/home.content.ts"
+export default {
+  key: "home", // ✗ Reportado si ninguna llamada en el proyecto solicita "home"
+  content: {
+    title: t({ es: "Título", en: "Title" }),
+
+    // ✗ Reportado si nada lee `hero`
+    hero: {
+      subtitle: t({ es: "Subtítulo", en: "Subtitle" }),
+    },
+  },
+};
+```
+
+A diferencia de las otras reglas, esta no puede responder solo a partir del archivo evaluado: un campo no se usa únicamente en relación con todo el proyecto. En la primera declaración de contenido de una ejecución de lint, carga tu configuración de Intlayer, busca los archivos fuente que declara dicha configuración (`build.traversePattern`, `compiler.transformPattern`) y ejecuta el mismo analizador de uso que alimenta `@intlayer/lsp` y el tachado de "no utilizado" en la extensión de VS Code. El resultado se almacena en caché durante `cacheTtl` milisegundos, por lo que el escaneo ocurre una vez por ejecución en lugar de una vez por archivo.
+
+**Opciones**
+
+```javascript fileName="eslint.config.mjs" codeFormat="esm"
+{
+  "intlayer/no-unused-content": [
+    "warn",
+    {
+      // Reportar claves de diccionario que nada referencia. Por defecto: true
+      reportUnusedDictionaries: true,
+
+      // Reportar campos de contenido que nada lee. Por defecto: true
+      reportUnusedFields: true,
+
+      // Reportar claves declaradas en más de un lugar. Por defecto: true
+      reportDuplicateKeys: true,
+
+      // Expresiones regulares para rutas de campos que nunca se deben reportar.
+      ignoreFields: ["^meta"],
+
+      // Raíz del proyecto desde donde comienza el escaneo. Por defecto: directorio de trabajo de ESLint
+      baseDir: process.cwd(),
+
+      // Tiempo que se reutiliza un escaneo de proyecto, en ms. Por defecto: 30000
+      cacheTtl: 30000,
+    },
+  ],
+}
+```
+
+Reduce `cacheTtl` cuando ejecutes lint desde un servidor de editor de larga duración y quieras que tus ediciones se reflejen antes; configura `baseDir` cuando una sola ejecución de lint abarque varios proyectos de Intlayer en un monorepo.
+
+> **Tiende al silencio.** Un falso positivo aquí eliminaría una traducción, por lo que no se reporta nada cuando el diccionario se consume de una manera que el análisis no puede rastrear: el objeto de contenido pasado en su totalidad, una función de traducción vinculada a partir de él (`const t = useTranslations("home")`), una declaración alcanzada mediante una importación directa (`useDictionary(myDictionary)`), un `nest()` de otro diccionario, o una lista de campos hecha no exhaustiva por un spread. Los componentes de un solo archivo (`.vue`, `.svelte`, `.astro`) se consideran como si usaran cada campo de los diccionarios que mencionan, ya que sus bloques de script no se analizan aquí.
+
+`reportDuplicateKeys` lee los diccionarios no fusionados que la compilación escribe bajo `.intlayer/`, por lo que permanece silenciosa hasta que el proyecto se haya compilado al menos una vez. Dos declaraciones que comparten una clave se fusionan, lo cual es un patrón legítimo; el reporte existe porque un campo definido en ambos lados conserva silenciosamente solo uno de los dos valores.
+
+El analizador se carga desde `@intlayer/lsp`, que se distribuye como ESM. Por lo tanto, la regla necesita una versión de Node que pueda hacer `require()` de un módulo ES: Node 20.19+ o 22.12+. En versiones anteriores no reporta nada en lugar de fallar la ejecución del lint.
+
+## Frameworks
+
+Todas las reglas funcionan en todas las integraciones de Intlayer, incluso dentro de plantillas de Vue, Svelte y Angular. Solo necesitas indicarle a ESLint qué parser lee cada tipo de archivo.
+
+| Framework                 | Archivos          | Parser                            |
+| ------------------------- | ----------------- | --------------------------------- |
+| React, Preact, Solid, Lit | `.jsx` `.tsx`     | `typescript-eslint`               |
+| Next.js                   | `.jsx` `.tsx`     | `typescript-eslint`               |
+| Vue, Nuxt                 | `.vue`            | `vue-eslint-parser`               |
+| Svelte, SvelteKit         | `.svelte`         | `svelte-eslint-parser`            |
+| Angular                   | `.ts`             | `typescript-eslint`               |
+| Plantillas de Angular     | `.component.html` | `@angular-eslint/template-parser` |
+| Astro                     | `.astro`          | `astro-eslint-parser`             |
+
+```javascript fileName="eslint.config.mjs" codeFormat="esm"
+import intlayer from "eslint-plugin-intlayer";
+import tseslint from "typescript-eslint";
+import vueParser from "vue-eslint-parser";
+import svelteParser from "svelte-eslint-parser";
+import angularTemplateParser from "@angular-eslint/template-parser";
+
+export default [
+  ...intlayer.configs.recommended,
+
+  {
+    files: ["**/*.{ts,tsx,jsx}"],
+    languageOptions: { parser: tseslint.parser },
+  },
+  {
+    files: ["**/*.vue"],
+    languageOptions: {
+      parser: vueParser,
+      parserOptions: { parser: tseslint.parser },
+    },
+  },
+  {
+    files: ["**/*.svelte"],
+    languageOptions: {
+      parser: svelteParser,
+      parserOptions: { parser: tseslint.parser },
+    },
+  },
+  {
+    files: ["**/*.component.html"],
+    languageOptions: { parser: angularTemplateParser },
+  },
+];
+```
+
+Instala solo los parsers que tu proyecto necesite.
+
+> **Limitación conocida.** En plantillas de Vue y Angular, una expresión como `{{ content[key] }}` no se verifica con `no-dynamic-field-access`. Las lecturas dinámicas escritas en el bloque script se detectan normalmente.

package/docs/es/interest_of_intlayer.md

@@ -207,7 +207,7 @@ export const ComponentExample = () => {
 Este enfoque te permite:
 
 1. **Aumentar la velocidad de desarrollo**
-   - Los archivos `.content.{{ts|mjs|cjs|json}}` se pueden crear utilizando una extensión de VSCode
+   - Los archivos `.content.{ts|js|mjs|cjs|json|tsx|jsx|md|mdx|yaml|yml}` se pueden crear utilizando una extensión de VSCode
    - Las herramientas de autocompletado de IA en tu IDE (como GitHub Copilot) pueden ayudarte a declarar tu contenido, reduciendo el copiar/pegar
 
 2. **Limpiar tu base de código**
@@ -231,27 +231,27 @@ Este enfoque te permite:
 
 ## Características adicionales de Intlayer
 
-| Característica                                                                                                            | Descripción                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| ------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/frameworks.png?raw=true)                          | **Soporte Multi-Framework**<br><br>Intlayer es compatible con todos los frameworks y librerías principales, incluidos Next.js, React, Vite, Vue.js, Nuxt, Preact, Express y más.                                                                                                                                                                                                                                                                                           |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/javascript_content_management.jpg?raw=true)       | **Administración de contenido basada en JavaScript**<br><br>Aprovecha la flexibilidad de JavaScript para definir y administrar tu contenido de manera eficiente.<br><br> - [Declaración de contenido](https://intlayer.org/doc/concept/content)                                                                                                                                                                                                                            |
-| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/compiler.jpg?raw=true" alt="Feature" width="700">  | **Compilador**<br><br>El compilador de Intlayer extrae automáticamente el contenido de los componentes y genera los archivos de diccionario.<br><br> - [Compilador](https://intlayer.org/doc/compiler)                                                                                                                                                                                                                                                                     |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/per_locale_content_declaration_file.png?raw=true) | **Archivo de declaración de contenido por idioma**<br><br>Acelera tu desarrollo declarando tu contenido una vez, antes de la generación automática.<br><br> - [Archivo de declaración de contenido por idioma](https://intlayer.org/doc/concept/per-locale-file)                                                                                                                                                                                                           |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)                      | **Entorno seguro para tipos**<br><br>Aprovecha TypeScript para garantizar que tus definiciones de contenido y tu código estén libres de errores, mientras te beneficias del autocompletado del IDE.<br><br> - [Configuración de TypeScript](https://intlayer.org/doc/environment/vite-and-react#configure-typescript)                                                                                                                                                      |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/config_file.png?raw=true)                         | **Configuración simplificada**<br><br>Ponte en marcha rápidamente con una configuración mínima. Ajusta la configuración de internacionalización, enrutamiento, IA, compilación y manejo de contenido con facilidad.<br><br> - [Explorar la integración de Next.js](https://intlayer.org/doc/environment/nextjs)                                                                                                                                                            |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/content_retrieval.png?raw=true)                   | **Obtención simplificada de contenido**<br><br>No es necesario llamar a tu función `t` para cada fragmento de contenido. Recupera todo tu contenido directamente usando un único hook.<br><br> - [Integración con React](https://intlayer.org/doc/environment/create-react-app)                                                                                                                                                                                            |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/server_component.png?raw=true)                    | **Implementación consistente de componentes de servidor**<br><br>Perfectamente adecuado para los componentes de servidor de Next.js, usa la misma implementación para componentes de cliente y de servidor, sin necesidad de pasar tu función `t` a través de cada componente de servidor.<br><br> - [Componentes de servidor](https://intlayer.org/doc/environment/nextjs#step-7-utilize-content-in-your-code)                                                            |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/file_tree.png?raw=true)                           | **Base de código organizada**<br><br>Mantén tu base de código más organizada: 1 componente = 1 diccionario en la misma carpeta. Las traducciones cercanas a sus respectivos componentes mejoran la mantenibilidad y la claridad.<br><br> - [Cómo funciona Intlayer](https://intlayer.org/doc/concept/how-works-intlayer)                                                                                                                                                   |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/url_routing.png?raw=true)                         | **Enrutamiento mejorado**<br><br>Soporte completo de enrutamiento de aplicaciones, adaptándose sin problemas a estructuras de aplicaciones complejas, para Next.js, React, Vite, Vue.js, etc.<br><br> - [Explorar la integración de Next.js](https://intlayer.org/doc/environment/nextjs)                                                                                                                                                                                  |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/markdown.png?raw=true)                            | **Soporte de Markdown**<br><br>Importa e interpreta archivos locales y Markdown remoto para contenido multilingüe como políticas de privacidad, documentación, etc. Interpreta y haz accesibles los metadatos de Markdown en tu código.<br><br> - [Archivos de contenido](https://intlayer.org/doc/concept/content/file)                                                                                                                                                   |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/visual_editor.png?raw=true)                       | **Editor visual y CMS gratuitos**<br><br>Un editor visual y un CMS gratuitos están disponibles para los escritores de contenido, eliminando la necesidad de una plataforma de localización. Mantén tu contenido sincronizado usando Git, o externalízalo total o parcialmente con el CMS.<br><br> - [Editor de Intlayer](https://intlayer.org/doc/concept/editor) <br> - [CMS de Intlayer](https://intlayer.org/doc/concept/cms)                                           |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle.png?raw=true)                              | **Contenido eliminable en compilación (Tree-shakable)**<br><br>Contenido eliminable en compilación, reduciendo el tamaño del bundle final. Carga contenido por componente, excluyendo cualquier contenido no utilizado de tu bundle. Soporta la carga diferida (lazy loading) para mejorar la eficiencia de carga de la aplicación.<br><br> - [Optimización de la compilación de aplicaciones](https://intlayer.org/doc/concept/how-works-intlayer#app-build-optimization) |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/static_rendering.png?raw=true)                    | **Renderizado estático**<br><br>No bloquea el renderizado estático.<br><br> - [Integración de Next.js](https://intlayer.org/doc/environment/nextjs)                                                                                                                                                                                                                                                                                                                        |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/AI_translation.png?raw=true)                      | **Traducción basada en IA**<br><br>Transforma tu sitio web a 231 idiomas con un solo clic utilizando las herramientas avanzadas de traducción basadas en IA de Intlayer usando tu propio proveedor de IA/clave API.<br><br> - [Integración de CI/CD](https://intlayer.org/doc/concept/ci-cd) <br> - [CLI de Intlayer](https://intlayer.org/doc/concept/cli) <br> - [Autocompletar](https://intlayer.org/doc/concept/auto-fill)                                             |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/mcp.png?raw=true)                                 | **Integración del servidor MCP**<br><br>Proporciona un servidor MCP (Model Context Protocol) para la automatización del IDE, lo que permite una gestión de contenido perfecta y flujos de trabajo de i18n directamente dentro de tu entorno de desarrollo.<br><br> - [Servidor MCP](https://github.com/aymericzip/intlayer/blob/main/docs/es/mcp_server.md)                                                                                                                |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vscode_extension.png?raw=true)                    | **Extension de VSCode**<br><br>Intlayer proporciona una extensión de VSCode para ayudarte a administrar tu contenido y traducciones, compilar tus diccionarios, traducir tu contenido y más.<br><br> - [Extensión de VSCode](https://intlayer.org/doc/vs-code-extension)                                                                                                                                                                                                   |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/interoperability.png?raw=true)                    | **Interoperabilidad**<br><br>Permite la interoperabilidad con react-i18next, next-i18next, next-intl y react-intl.<br><br> - [Intlayer y react-intl](https://intlayer.org/blog/intlayer-with-react-intl) <br> - [Intlayer y next-intl](https://intlayer.org/blog/intlayer-with-next-intl) <br> - [Intlayer y next-i18next](https://intlayer.org/blog/intlayer-with-next-i18next)                                                                                           |
-| Probar traducciones faltantes (CLI/CI)                                                                                    | ✅ CLI: npx intlayer content test (auditoría compatible con CI)                                                                                                                                                                                                                                                                                                                                                                                                            |
+| Característica                                                                                                            | Descripción                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| ------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/frameworks.png?raw=true)                          | **Soporte Multi-Framework**<br><br>Intlayer es compatible con todos los frameworks y librerías principales, incluidos Next.js, React, Vite, Vue.js, Nuxt, Preact, Express y más.                                                                                                                                                                                                                                                                                            |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/javascript_content_management.jpg?raw=true)       | **Administración de contenido basada en JavaScript**<br><br>Aprovecha la flexibilidad de JavaScript para definir y administrar tu contenido de manera eficiente.<br><br> - [Declaración de contenido](https://intlayer.org/doc/concept/content)                                                                                                                                                                                                                             |
+| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/compiler.jpg?raw=true" alt="Feature" width="700">  | **Compilador**<br><br>El compilador de Intlayer extrae automáticamente el contenido de los componentes y genera los archivos de diccionario.<br><br> - [Compilador](https://intlayer.org/doc/compiler)                                                                                                                                                                                                                                                                      |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/per_locale_content_declaration_file.png?raw=true) | **Archivo de declaración de contenido por idioma**<br><br>Acelera tu desarrollo declarando tu contenido una vez, antes de la generación automática.<br><br> - [Archivo de declaración de contenido por idioma](https://intlayer.org/doc/concept/per-locale-file)                                                                                                                                                                                                            |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)                      | **Entorno seguro para tipos**<br><br>Aprovecha TypeScript para garantizar que tus definiciones de contenido y tu código estén libres de errores, mientras te beneficias del autocompletado del IDE.<br><br> - [Configuración de TypeScript](https://intlayer.org/doc/environment/vite-and-react#configure-typescript)                                                                                                                                                       |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/config_file.png?raw=true)                         | **Configuración simplificada**<br><br>Ponte en marcha rápidamente con una configuración mínima. Ajusta la configuración de internacionalización, enrutamiento, IA, compilación y manejo de contenido con facilidad.<br><br> - [Explorar la integración de Next.js](https://intlayer.org/doc/environment/nextjs)                                                                                                                                                             |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/content_retrieval.png?raw=true)                   | **Obtención simplificada de contenido**<br><br>No es necesario llamar a tu función `t` para cada fragmento de contenido. Recupera todo tu contenido directamente usando un único hook.<br><br> - [Integración con React](https://intlayer.org/doc/environment/create-react-app)                                                                                                                                                                                             |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/server_component.png?raw=true)                    | **Implementación consistente de componentes de servidor**<br><br>Perfectamente adecuado para los componentes de servidor de Next.js, usa la misma implementación para componentes de cliente y de servidor, sin necesidad de pasar tu función `t` a través de cada componente de servidor.<br><br> - [Componentes de servidor](https://intlayer.org/doc/environment/nextjs#step-7-utilize-content-in-your-code)                                                             |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/file_tree.png?raw=true)                           | **Base de código organizada**<br><br>Mantén tu base de código más organizada: 1 componente = 1 diccionario en la misma carpeta. Las traducciones cercanas a sus respectivos componentes mejoran la mantenibilidad y la claridad.<br><br> - [Cómo funciona Intlayer](https://intlayer.org/doc/concept/how-works-intlayer)                                                                                                                                                    |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/url_routing.png?raw=true)                         | **Enrutamiento mejorado**<br><br>Soporte completo de enrutamiento de aplicaciones, adaptándose sin problemas a estructuras de aplicaciones complejas, para Next.js, React, Vite, Vue.js, etc.<br><br> - [Explorar la integración de Next.js](https://intlayer.org/doc/environment/nextjs)                                                                                                                                                                                   |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/markdown.png?raw=true)                            | **Soporte de Markdown**<br><br>Importa e interpreta archivos locales y Markdown remoto para contenido multilingüe como políticas de privacidad, documentación, etc. Interpreta y haz accesibles los metadatos de Markdown en tu código.<br><br> - [Archivos de contenido](https://intlayer.org/doc/concept/content/file)                                                                                                                                                    |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/visual_editor.png?raw=true)                       | **Editor visual y CMS gratuitos**<br><br>Un editor visual y un CMS gratuitos están disponibles para los escritores de contenido, eliminando la necesidad de una plataforma de localización. Mantén tu contenido sincronizado usando Git, o externalízalo total o parcialmente con el CMS.<br><br> - [Editor de Intlayer](https://intlayer.org/doc/concept/editor) <br> - [CMS de Intlayer](https://intlayer.org/doc/concept/cms)                                            |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle.png?raw=true)                              | **Contenido eliminable en compilación (Tree-shakable)**<br><br>Contenido eliminable en compilación, reduciendo el tamaño del bundle final. Carga contenido por componente, excluyendo cualquier contenido no utilizado de tu bundle. Soporta la carga diferida (lazy loading) para mejorar la eficiencia de carga de la aplicación.<br><br> - [Optimización de la compilación de aplicaciones](https://intlayer.org/doc/concept/how-works-intlayer#app-build-optimization)  |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/static_rendering.png?raw=true)                    | **Renderizado estático**<br><br>No bloquea el renderizado estático.<br><br> - [Integración de Next.js](https://intlayer.org/doc/environment/nextjs)                                                                                                                                                                                                                                                                                                                         |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/AI_translation.png?raw=true)                      | **Traducción basada en IA**<br><br>Transforma tu sitio web a 231 idiomas con un solo clic utilizando las herramientas avanzadas de traducción basadas en IA de Intlayer usando tu propio proveedor de IA/clave API.<br><br> - [Integración de CI/CD](https://intlayer.org/doc/concept/ci-cd) <br> - [CLI de Intlayer](https://intlayer.org/doc/concept/cli) <br> - [Autocompletar](https://intlayer.org/doc/concept/auto-fill)                                              |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/mcp.png?raw=true)                                 | **Integración del servidor MCP**<br><br>Proporciona un servidor MCP (Model Context Protocol) para la automatización del IDE, lo que permite una gestión de contenido perfecta y flujos de trabajo de i18n directamente dentro de tu entorno de desarrollo.<br><br> - [Servidor MCP](https://github.com/aymericzip/intlayer/blob/main/docs/es/mcp_server.md)                                                                                                                 |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vscode_extension.png?raw=true)                    | **Extension de VSCode**<br><br>Intlayer proporciona una extensión de VSCode para ayudarte a administrar tu contenido y traducciones, compilar tus diccionarios, traducir tu contenido y más.<br><br> - [Extensión de VSCode](https://intlayer.org/doc/vs-code-extension)                                                                                                                                                                                                    |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/interoperability.png?raw=true)                    | **Interoperabilidad**<br><br>Permite la interoperabilidad con react-i18next, next-i18next, next-intl y react-intl.<br><br> - [Intlayer y react-intl](https://intlayer.org/blog/intlayer-with-react-intl) <br> - [Intlayer y next-intl](https://intlayer.org/blog/intlayer-with-next-intl) <br> - [Intlayer y next-i18next](https://intlayer.org/blog/intlayer-with-next-i18next) <br> - [Adaptadores de compatibilidad de Intlayer](https://intlayer.org/doc/compatibility) |
+| Probar traducciones faltantes (CLI/CI)                                                                                    | ✅ CLI: npx intlayer content test (auditoría compatible con CI)                                                                                                                                                                                                                                                                                                                                                                                                             |
 
 ## Comparación de Intlayer con otras soluciones
 
@@ -290,3 +290,5 @@ Las estrellas de GitHub son un fuerte indicador de la popularidad de un proyecto
 `intlayer` también puede ayudar a gestionar tus espacios de nombres para `react-intl`, `react-i18next`, `next-intl`, `next-i18next` y `vue-i18n`.
 
 Usando `intlayer`, puedes declarar tu contenido en el formato de tu biblioteca de i18n favorita, e intlayer generará tus espacios de nombres en la ubicación de tu elección (ejemplo: `/messages/{{locale}}/{{namespace}}.json`).
+
+Si deseas seguir usando la API de tu biblioteca i18n actual, `intlayer` también proporciona **adaptadores de compatibilidad (compat adapters)**: paquetes que exponen exactamente la misma API que `react-i18next`, `next-intl`, `react-intl`, `vue-i18n` y otras, pero servidas por los diccionarios de Intlayer. Esto te permite migrar progresivamente sin reescribir tu código. Consulta la [documentación de los adaptadores de compatibilidad](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/compat/index.md).

package/docs/es/intlayer_with_svelte_kit.md

@@ -404,7 +404,7 @@ export const getLocale = (event: RequestEvent): Locale => {
 };
 ```
 
-> `getLocaleFromStorage` verificará la localidad desde el encabezado o la cookie dependiendo de tu configuración. Consulta [Configuración](https://intlayer.org/doc/configuration) para más detalles.
+> `getLocaleFromStorage` verificará la localidad desde el encabezado o la cookie dependiendo de tu configuración. Consulta [Configuración](https://intlayer.org/doc/concept/configuration) para más detalles.
 
 > La función `localeDetector` procesará el encabezado `Accept-Language` y devolverá la mejor coincidencia.
 

package/docs/es/intlayer_with_tanstack+solid.md

@@ -254,19 +254,21 @@ import {
   HeadContent,
   Scripts,
   createRootRouteWithContext,
+  getRouteApi,
 } from "@tanstack/solid-router";
 import { HydrationScript } from "solid-js/web";
 import { Suspense, type ParentComponent } from "solid-js";
 import { IntlayerProvider } from "solid-intlayer";
 import { defaultLocale, getHTMLTextDir } from "intlayer";
-import { Route as LocaleRoute } from "./{-$locale}/route";
+
+const localeRoute = getRouteApi("/{-$locale}");
 
 export const Route = createRootRouteWithContext()({
   shellComponent: RootComponent,
 });
 
 const RootComponent: ParentComponent = (props) => {
-  const params = LocaleRoute.useParams();
+  const params = localeRoute.useParams();
   const locale = params()?.locale ?? defaultLocale;
 
   return (
@@ -551,7 +553,7 @@ Como vimos en el Paso 5, puede gestionar los atributos `lang` y `dir` de la etiq
 
 ```tsx fileName="src/routes/__root.tsx"
 const RootComponent: ParentComponent = (props) => {
-  const params = LocaleRoute.useParams();
+  const params = localeRoute.useParams();
   const locale = params()?.locale ?? defaultLocale;
 
   return (

package/docs/es/intlayer_with_tanstack.md

@@ -271,13 +271,15 @@ Configura tu diseño raíz para admitir la internacionalización mediante el uso
 ```tsx fileName="src/routes/__root.tsx"
 import {
   createRootRouteWithContext,
+  getRouteApi,
   HeadContent,
   Scripts,
 } from "@tanstack/react-router";
 import { defaultLocale, getHTMLTextDir } from "intlayer";
 import { type ReactNode } from "react";
 import { IntlayerProvider } from "react-intlayer";
-import { Route as LocaleRoute } from "./{-$locale}/route";
+
+const localeRoute = getRouteApi("/{-$locale}");
 
 export const Route = createRootRouteWithContext<{}>()({
   head: () => ({
@@ -299,7 +301,7 @@ export const Route = createRootRouteWithContext<{}>()({
 });
 
 function RootDocument({ children }: { children: ReactNode }) {
-  const params = LocaleRoute.useParams();
+  const params = localeRoute.useParams();
   const locale = params?.locale ?? defaultLocale;
 
   return (
@@ -632,7 +634,7 @@ Como se vio en el Paso 5, puedes gestionar los atributos `lang` y `dir` de la et
 
 ```tsx fileName="src/routes/__root.tsx"
 function RootDocument({ children }: { children: ReactNode }) {
-  const params = LocaleRoute.useParams();
+  const params = localeRoute.useParams();
   const locale = params?.locale ?? defaultLocale;
 
   return (