@intlayer/docs 8.12.4 → 9.0.0-canary.10

package/docs/es/intlayer_with_react_native+expo.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-06-18
-updatedAt: 2026-05-31
+updatedAt: 2026-06-25
 title: "Expo + React Native i18n - Guía completa para traducir tu aplicación"
 description: "Sin más i18next. La guía 2026 para crear una aplicación Expo + React Native multilingüe (i18n). Traduce con agentes de IA y optimiza el tamaño del bundle, SEO y rendimiento."
 keywords:
@@ -17,15 +17,22 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-react-native-template
 applicationShowcase: https://intlayer-react-native.vercel.app
 history:
+  - version: 9.0.0
+    date: 2026-06-25
+    changes: "Importar providers y hooks directamente desde react-native-intlayer; react-intlayer ya no se necesita como dependencia directa"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Actualizar el uso de la API useIntlayer de Solid para el acceso directo a las propiedades"
   - version: 7.5.9
     date: 2025-12-30
     changes: "Agregar comando init"
+  - version: 6.1.6
+    date: 2025-10-02
+    changes: "Agregar sección de depuración"
   - version: 5.5.10
     date: 2025-06-29
     changes: "Historial inicial"
+author: aymericzip
 ---
 
 # Traduce tu aplicación Expo y React Native | Internacionalización (i18n)
@@ -36,7 +43,7 @@ history:
 <iframe
   src="https://ide.intlayer.org/aymericzip/intlayer-react-native-template?file=intlayer.config.ts"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo CodeSandbox - Intlayer"
+  title="Demo CodeSandbox - Cómo internacionalizar tu aplicación usando Intlayer"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />
@@ -55,7 +62,9 @@ history:
   </Tab>
 </Tabs>
 
-Consulta la [Plantilla de Aplicación](https://github.com/aymericzip/intlayer-react-native-template) en GitHub.
+## Tabla de Contenidos
+
+<TOC/>
 
 ## ¿Por qué Intlayer en lugar de alternativas?
 
@@ -71,7 +80,7 @@ Intlayer está optimizado para funcionar perfectamente con React Native y Expo a
 
 <Accordion header="Mantenibilidad">
 
-Determinar el alcance del contenido de su aplicación **facilita el mantenimiento** para aplicaciones a gran escala. Puede duplicar o eliminar una sola carpeta de funciones sin la carga mental de revisar todo el código base de contenido. Además, Intlayer está **completamente escrito** para garantizar la precisión de su contenido.
+Determinar el alcance del contenido de su aplicación **facilita el mantenimiento** para aplicaciones a gran escala. Puede duplicar o eliminar una sola carpeta de funciones sin la carga mental de revisar todo el código base de contenido. Además, Intlayer está **completamente tipado** para garantizar la precisión de su contenido.
 
 </Accordion>
 
@@ -95,7 +104,7 @@ La conexión de archivos JSON masivos a componentes puede provocar problemas de
 
 <Accordion header="Escalando sin ningún desarrollador">
 
-Más que una simple solución i18n, Intlayer proporciona un **[editor visual] autohospedado(https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** y un **[CMS completo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** para ayudarle a administrar su contenido multilingüe en **tiempo real**, lo que facilita la colaboración con traductores, redactores y otros miembros del equipo. El contenido se puede almacenar de forma local y/o remota.
+Más que una simple solución i18n, Intlayer proporciona un **[editor visual](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** autohospedado y un **[CMS completo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** para ayudarle a administrar su contenido multilingüe en **tiempo real**, lo que facilita la colaboración con traductores, redactores y otros miembros del equipo. El contenido se puede almacenar de forma local y/o remota.
 
 </Accordion>
 
@@ -106,75 +115,48 @@ En lugar de cargar archivos JSON masivos en sus páginas, cargue solo el conteni
 </Accordion>
 </AccordionGroup>
 
-## Paso 1: instalar dependencias
+<Steps>
+
+<Step number={1} title="Instalar dependencias">
 
 Consulte [Plantilla de aplicación](https://github.com/aymericzip/intlayer-react-native-template) en GitHub.
 
 Desde su proyecto React Native, instale los siguientes paquetes:
 
-```paquete de bashManager="npm"
-npm instala intlayer reaccionar-intlayer
-instalación npm --save-dev reaccionar-nativo-intlayer
-inicio de capa interna npx
+```bash packageManager="npm"
+npx intlayer-cli init --interactive
 ```
 
-```paquete de bashManager="pnpm"
-pnpm agregar intlayer reaccionar-intlayer
-pnpm agregar --save-dev reaccionar-nativo-intlayer
-inicio de capa interna pnpm
+```bash packageManager="pnpm"
+pnpm dlx intlayer-cli init --interactive
 ```
 
-```bash packageManager="hilo"
-hilo agregar capa interna reaccionar-capa interna
-hilo agregar --save-dev reaccionar-nativo-intlayer
-inicio de capa interna de hilo
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
 ```
 
 ```bash packageManager="bun"
-bollo agregar intlayer reaccionar-intlayer
-agregar bollo --dev reaccionar-nativo-intlayer
-inicio de capa intermedia x bun
+bunx intlayer-cli init --interactive
 ```
 
-### Paquetes
-
-- **capa interna**  
-  El conjunto de herramientas principal de i18n para configuración, contenido de diccionario, generación de tipos y comandos CLI.
+> La bandera `--interactive` es opcional. Usa `intlayer-cli init` si eres un agente de IA.
 
-- **reaccionar-intlayer**  
-  Integración de React que proporciona los proveedores de contexto y los enlaces de React que usará en React Native para obtener y cambiar de configuración regional.
-
-- **reaccionar-nativo-intlayer**  
-  Integración de React Native que proporciona el complemento Metro para integrar Intlayer con el paquete React Native.
-
----
-
-## Paso 1: Instalar dependencias
-
-Desde tu proyecto React Native, instala los siguientes paquetes:
+> Este comando detectará su entorno e instalará los paquetes necesarios. Por ejemplo:
 
 ```bash packageManager="npm"
-npm install intlayer react-intlayer
-npm install --save-dev react-native-intlayer
-npx intlayer init
+npm install intlayer react-native-intlayer
 ```
 
 ```bash packageManager="pnpm"
-pnpm add intlayer react-intlayer
-pnpm add --save-dev react-native-intlayer
-pnpm intlayer init
+pnpm add intlayer react-native-intlayer
 ```
 
 ```bash packageManager="yarn"
-yarn add intlayer react-intlayer
-yarn add --save-dev react-native-intlayer
-yarn intlayer init
+yarn add intlayer react-native-intlayer
 ```
 
 ```bash packageManager="bun"
-bun add intlayer react-intlayer
-bun add --dev react-native-intlayer
-bun x intlayer init
+bun add intlayer react-native-intlayer
 ```
 
 ### Paquetes
@@ -182,15 +164,14 @@ bun x intlayer init
 - **intlayer**  
   El conjunto de herramientas principal de i18n para configuración, contenido de diccionarios, generación de tipos y comandos CLI.
 
-- **react-intlayer**  
-  Integración con React que proporciona los proveedores de contexto y hooks de React que usarás en React Native para obtener y cambiar configuraciones regionales.
-
 - **react-native-intlayer**  
-  Integración con React Native que proporciona el plugin Metro para integrar Intlayer con el empaquetador de React Native.
+  Integración con React Native que proporciona los proveedores de contexto y hooks de React que usarás para obtener y cambiar configuraciones regionales, los polyfills de React Native y el plugin Metro para integrar Intlayer con el empaquetador de React Native. Re-exporta todo desde `react-intlayer`, por lo que solo necesitas este único paquete en una aplicación React Native.
 
 ---
 
-## Paso 2: Crear una Configuración de Intlayer
+</Step>
+
+<Step number={2} title="Crear una Configuración de Intlayer">
 
 En la raíz de tu proyecto (o en cualquier lugar conveniente), crea un archivo de **configuración de Intlayer**. Podría verse así:
 
@@ -220,9 +201,11 @@ Dentro de esta configuración, puedes:
 - Configurar tu **lista de configuraciones regionales soportadas**.
 - Establecer una configuración regional **predeterminada**.
 - Más adelante, puedes agregar opciones más avanzadas (por ejemplo, registros, directorios de contenido personalizados, etc.).
-- Consulta la [documentación de configuración de Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/configuration.md) para más información.
+- Consulta la [documentación de configuración de Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md) para más información.
+
+</Step>
 
-## Paso 3: Añadir el plugin de Metro
+<Step number={3} title="Añadir el plugin de Metro">
 
 Metro es un empaquetador para React Native. Es el empaquetador predeterminado para proyectos de React Native creados con el comando `react-native init`. Para usar Intlayer con Metro, necesitas añadir el plugin en tu archivo `metro.config.js`:
 
@@ -237,11 +220,18 @@ module.exports = (async () => {
 })();
 ```
 
-## Paso 4: Añadir el proveedor de Intlayer
+> Nota: `configMetroIntlayer` es una función asíncrona. Usa `configMetroIntlayerSync` en su lugar si deseas usarlo de forma síncrona, o evitar IIFE (Expresión de función invocada inmediatamente).
+> Nota: `configMetroIntlayerSync` no permite construir diccionarios de intlayer al iniciar el servidor
+
+</Step>
+
+<Step number={4} title="Añadir el proveedor de Intlayer">
 
-Para mantener sincronizado el idioma del usuario en toda tu aplicación, necesitas envolver tu componente raíz con el componente `IntlayerProvider` de `react-intlayer-native`.
+Para mantener sincronizado el idioma del usuario en toda tu aplicación, necesitas envolver tu componente raíz con el componente `IntlayerProvider` de `react-native-intlayer`.
 
-> Asegúrate de usar el proveedor de `react-native-intlayer` en lugar de `react-intlayer`. La exportación de `react-native-intlayer` incluye polyfills para la API web.
+> Importa siempre desde `react-native-intlayer`. Su `IntlayerProvider` incluye polyfills para la API web usada por Intlayer, y el paquete re-exporta todos los hooks y utilidades de `react-intlayer`.
+
+Además, necesitas agregar la función `intlayerPolyfill` a tu archivo `index.js` para garantizar que Intlayer pueda funcionar correctamente.
 
 ```tsx fileName="app/_layout.tsx" codeFormat={["typescript", "esm"]}
 import { Stack } from "expo-router";
@@ -264,11 +254,15 @@ const RootLayout: FC = () => {
 export default RootLayout;
 ```
 
-## Paso 5: Declara Tu Contenido
+</Step>
+
+<Step number={5} title="Declara Tu Contenido">
 
 Crea archivos de **declaración de contenido** en cualquier lugar de tu proyecto (comúnmente dentro de `src/`), usando cualquiera de los formatos de extensión que Intlayer soporta:
 
 - `.content.json`
+- `.content.jsonc`
+- `.content.json5`
 - `.content.ts`
 - `.content.tsx`
 - `.content.js`
@@ -276,9 +270,20 @@ Crea archivos de **declaración de contenido** en cualquier lugar de tu proyecto
 - `.content.mjs`
 - `.content.mjx`
 - `.content.cjs`
-- `.content.cjx`
+- `.content.md`
+- `.content.mdx`
+- `.content.yaml`
+- `.content.yml`
 - etc.
 
+> **Expo Router (web): mantén los archivos `.content.*` fuera del directorio `app/`.** Expo Router trata cada archivo JavaScript/TypeScript dentro de `app/` como una ruta. En la web, su descubrimiento de rutas escanea el sistema de archivos directamente y **no** respeta el `resolver.blockList` de Metro, por lo que un `*.content.ts` co-ubicado se registra como una ruta. Un archivo como `app/(tabs)/_layout.content.ts` incluso se analiza como un diseño (la parte `.content` se lee como un sufijo de plataforma), lo que choca con el `_layout.tsx` real y lanza:
+>
+> ```
+> The layouts "./(tabs)/_layout.content.ts" and "./(tabs)/_layout.tsx" conflict on the route "/(tabs)/_layout.content". Remove or rename one of these files.
+> ```
+>
+> Coloca tus declaraciones en un directorio fuera de `app/` (por ejemplo, `content/` o `src/content/`). Intlayer descubre los archivos `.content.*` en cualquier lugar del proyecto y los diccionarios se referencian por su `key`, por lo que no se necesitan cambios en las importaciones. En nativo esto no es necesario (el `blockList` de Metro ya los oculta), pero usar un directorio distinto de `app/` mantiene ambas plataformas funcionando.
+
 Ejemplo (TypeScript con nodos TSX para React Native):
 
 ```tsx fileName="src/app.content.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
@@ -321,11 +326,13 @@ export default homeScreenContent;
 }
 ```
 
-> Para más detalles sobre las declaraciones de contenido, consulta [la documentación de contenido de Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/content_file.md).
+> Para más detalles sobre las declaraciones de contenido, consulta [la documentación de contenido de Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md).
 
 ---
 
-## Paso 4: Usa Intlayer en tus Componentes
+</Step>
+
+<Step number={6} title="Usa Intlayer en tus Componentes">
 
 Usa el hook `useIntlayer` en componentes hijos para obtener contenido localizado.
 
@@ -333,7 +340,7 @@ Usa el hook `useIntlayer` en componentes hijos para obtener contenido localizado
 
 ```tsx fileName="app/(tabs)/index.tsx" codeFormat={["typescript", "esm"]}
 import { Image, StyleSheet, Platform } from "react-native";
-import { useIntlayer } from "intlayer";
+import { useIntlayer } from "react-native-intlayer";
 import { HelloWave } from "@/components/HelloWave";
 import ParallaxScrollView from "@/components/ParallaxScrollView";
 import { ThemedText } from "@/components/ThemedText";
@@ -374,11 +381,13 @@ export default HomeScreen;
 
 > Al usar `content.someKey` en propiedades basadas en cadenas (por ejemplo, el `title` de un botón o los `children` de un componente `Text`), **llama a `content.someKey.value`** para obtener la cadena real.
 
-> Si su aplicación ya existe, puede utilizar el [Compilador Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/compiler.md), así como el [comando de extracción](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/cli/extract.md), para transformar miles de componentes en un segundo.
+> Si su aplicación ya existe, puede utilizar el [Compilador Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/compiler.md), así como el [comando de extracción](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/extract.md), para transformar miles de componentes en un segundo.
 
 ---
 
-## (Opcional) Paso 5: Cambiar la configuración regional de la aplicación
+</Step>
+
+<Step number={7} title="Cambiar la configuración regional de la aplicación" isOptional={true}>
 
 Para cambiar la configuración regional desde dentro de tus componentes, puedes usar el método `setLocale` del hook `useLocale`:
 
@@ -386,7 +395,7 @@ Para cambiar la configuración regional desde dentro de tus componentes, puedes
 import { type FC } from "react";
 import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
 import { getLocaleName } from "intlayer";
-import { useLocale } from "react-intlayer";
+import { useLocale } from "react-native-intlayer";
 
 export const LocaleSwitcher: FC = () => {
   const { setLocale, availableLocales } = useLocale();
@@ -429,7 +438,11 @@ const styles = StyleSheet.create({
 
 Esto provoca una nueva renderización de todos los componentes que usan contenido de Intlayer, mostrando ahora las traducciones para la nueva configuración regional.
 
-> Consulta la [documentación de `useLocale`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/packages/react-intlayer/useLocale.md) para más detalles.
+> Consulta la [documentación de `useLocale`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/react-intlayer/useLocale.md) para más detalles.
+
+</Step>
+
+</Steps>
 
 ## Configurar TypeScript (si usas TypeScript)
 
@@ -484,10 +497,38 @@ Para más detalles sobre cómo usar la extensión, consulta la [documentación d
 
 ## Ir Más Allá
 
-- **Editor Visual**: Usa el [Editor Visual de Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_visual_editor.md) para gestionar las traducciones visualmente.
-- **Integración con CMS**: También puedes externalizar y obtener el contenido de tu diccionario desde un [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_CMS.md).
-- **Comandos CLI**: Explora el [CLI de Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/cli/index.md) para tareas como **extraer traducciones** o **verificar claves faltantes**.
+- **Editor Visual**: Usa el [Editor Visual de Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md) para gestionar las traducciones visualmente.
+- **Integración con CMS**: También puedes externalizar y obtener el contenido de tu diccionario desde un [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md).
+- **Comandos CLI**: Explora el [CLI de Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/index.md) para tareas como **extraer traducciones** o **verificar claves faltantes**.
 
 ¡Disfruta construyendo tus aplicaciones **React Native** con i18n completamente potenciado a través de **Intlayer**!
 
 ---
+
+### Debug
+
+React Native puede ser menos estable que React Web, por lo que debes prestar especial atención a la alineación de versiones.
+
+Intlayer se orienta principalmente a la Web Intl API; en React Native debes incluir los polyfills apropiados.
+
+Lista de verificación:
+
+- Usa las últimas versiones de `intlayer` y `react-native-intlayer`.
+- Habilita el polyfill de Intlayer.
+- Si usas `getLocaleName` u otras utilidades basadas en Intl-API, importa estos polyfills temprano (por ejemplo en `index.js` o `App.tsx`):
+
+```ts
+import "intl";
+import "@formatjs/intl-getcanonicallocales/polyfill";
+import "@formatjs/intl-locale/polyfill";
+import "@formatjs/intl-pluralrules/polyfill";
+import "@formatjs/intl-displaynames/polyfill";
+import "@formatjs/intl-listformat/polyfill";
+import "@formatjs/intl-numberformat/polyfill";
+import "@formatjs/intl-relativetimeformat/polyfill";
+import "@formatjs/intl-datetimeformat/polyfill";
+```
+
+- Verifica tu configuración de Metro (resolver aliases, asset plugins, rutas de `tsconfig`) si los módulos no se resuelven.
+
+---

package/docs/es/intlayer_with_react_router_v7.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-09-04
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "React Router v7 i18n - Guía completa para traducir tu aplicación"
 description: "Sin más i18next. La guía 2026 para crear una aplicación React Router v7 multilingüe (i18n). Traduce con agentes de IA y optimiza el tamaño del bundle, SEO y rendimiento."
 keywords:
@@ -36,6 +36,7 @@ history:
   - version: 5.8.2
     date: 2025-09-04
     changes: "Añadido para React Router v7"
+author: aymericzip
 ---
 
 # Traduce tu React Router v7 con Intlayer | Internacionalización (i18n)
@@ -105,28 +106,44 @@ Más que una simple solución i18n, Intlayer proporciona un **[editor visual] au
 
 Instala los paquetes necesarios usando tu gestor de paquetes preferido:
 
+```bash packageManager="npm"
+npx intlayer-cli init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer-cli init --interactive
+```
+
+> la bandera `--interactive` es opcional. Usa `intlayer-cli init` si eres un agente de IA.
+
+> Este comando detectará su entorno e instalará los paquetes necesarios. Por ejemplo:
+
 ```bash packageManager="npm"
 npm install intlayer react-intlayer
 npm install vite-intlayer --save-dev
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer react-intlayer
 pnpm add vite-intlayer --save-dev
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer react-intlayer
 yarn add vite-intlayer --save-dev
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer react-intlayer
 bun add vite-intlayer --dev
-bun x intlayer init
 ```
 
 - **intlayer**
@@ -618,6 +635,8 @@ bun x intlayer extract
  </Tab>
  <Tab value='Compilador Babel'>
 
+> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+
 Actualiza tu archivo `vite.config.ts` para incluir el plugin `intlayerCompiler` :
 
 ```ts fileName="vite.config.ts"
@@ -627,7 +646,7 @@ import { intlayer, intlayerCompiler } from "vite-intlayer";
 export default defineConfig({
   plugins: [
     intlayer(),
-    intlayerCompiler(), // Agrega el plugin del compilador
+    intlayerCompiler(), // Adds the compiler plugin
   ],
 });
 ```
@@ -705,100 +724,6 @@ For more details on how to use the extension, refer to the [Intlayer VS Code Ext
 
 ---
 
-## Go Further
-
-To go further, you can implement the [visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md) or externalize your content using the [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md).
-
----
-
-## Documentation References
-
-- [Intlayer Documentation](https://intlayer.org)
-- [React Router v7 Documentation](https://reactrouter.com/)
-- [useIntlayer hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/react-intlayer/useIntlayer.md)
-- [useLocale hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/react-intlayer/useLocale.md)
-- [Content Declaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md)
-- [Configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md)
-
-This comprehensive guide provides everything you need to integrate Intlayer with React Router v7 for a fully internationalized application with locale-aware routing and TypeScript support.
-
-<Steps>
-
-<Step number={11} title="Añadir middleware">
-
-También puedes usar el `intlayerProxy` para agregar enrutamiento del lado del servidor a tu aplicación. Este plugin detectará automáticamente la configuración regional actual basada en la URL y establecerá la cookie de configuración regional apropiada. Si no se especifica ninguna configuración regional, el plugin determinará la configuración regional más adecuada según las preferencias de idioma del navegador del usuario. Si no se detecta ninguna configuración regional, redirigirá a la configuración regional predeterminada.
-
-> Ten en cuenta que para usar el `intlayerProxy` en producción, necesitas cambiar el paquete `vite-intlayer` de `devDependencies` a `dependencies`.
-
-```typescript {3,7} fileName="vite.config.ts"
-import { reactRouter } from "@react-router/dev/vite";
-import { defineConfig } from "vite";
-import { intlayer, intlayerProxy } from "vite-intlayer";
-
-export default defineConfig({
-  plugins: [
-    intlayerProxy(), // should be placed first
-    reactRouter(),
-
-    intlayer(),
-  ],
-});
-```
-
----
-
-</Step>
-
-</Steps>
-
-## Configurar TypeScript
-
-Intlayer utiliza la ampliación de módulos para aprovechar las ventajas de TypeScript y fortalecer tu base de código.
-
-Asegúrate de que tu configuración de TypeScript incluya los tipos autogenerados:
-
-```json5 fileName="tsconfig.json"
-{
-  // ... tus configuraciones existentes
-  include: [
-    // ... tus inclusiones existentes
-    ".intlayer/**/*.ts", // Incluir los tipos autogenerados
-  ],
-}
-```
-
----
-
-## Configuración de Git
-
-Se recomienda ignorar los archivos generados por Intlayer. Esto te permite evitar comprometerlos en tu repositorio Git.
-
-Para hacer esto, puedes agregar las siguientes instrucciones a tu archivo `.gitignore`:
-
-```plaintext fileName=".gitignore"
-# Ignorar los archivos generados por Intlayer
-.intlayer
-```
-
----
-
-## Extensión de VS Code
-
-Para mejorar tu experiencia de desarrollo con Intlayer, puedes instalar la **Extensión oficial de Intlayer para VS Code**.
-
-[Instalar desde el Marketplace de VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
-
-Esta extensión ofrece:
-
-- **Autocompletado** para las claves de traducción.
-- **Detección de errores en tiempo real** para traducciones faltantes.
-- **Previsualizaciones en línea** del contenido traducido.
-- **Acciones rápidas** para crear y actualizar traducciones fácilmente.
-
-Para más detalles sobre cómo usar la extensión, consulta la [documentación de la Extensión de Intlayer para VS Code](https://intlayer.org/doc/vs-code-extension).
-
----
-
 ## Ir Más Allá
 
 Para profundizar, puedes implementar el [editor visual](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_visual_editor.md) o externalizar tu contenido usando el [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_CMS.md).

package/docs/es/intlayer_with_react_router_v7_fs_routes.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-12-07
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "React Router v7 i18n - Guía completa para traducir tu aplicación"
 description: "Sin más i18next. La guía 2026 para crear una aplicación React Router v7 multilingüe (i18n). Traduce con agentes de IA y optimiza el tamaño del bundle, SEO y rendimiento."
 keywords:
@@ -32,6 +32,7 @@ history:
   - version: 7.3.4
     date: 2025-12-08
     changes: "Historial inicial"
+author: aymericzip
 ---
 
 # Traduce tu React Router v7 (File-System Routes) con Intlayer | Internacionalización (i18n)
@@ -681,6 +682,8 @@ bun x intlayer extract
  </Tab>
  <Tab value='Compilador Babel'>
 
+> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+
 Actualiza tu archivo `vite.config.ts` para incluir el plugin `intlayerCompiler` :
 
 ```ts fileName="vite.config.ts"
@@ -690,7 +693,7 @@ import { intlayer, intlayerCompiler } from "vite-intlayer";
 export default defineConfig({
   plugins: [
     intlayer(),
-    intlayerCompiler(), // Agrega el plugin del compilador
+    intlayerCompiler(), // Adds the compiler plugin
   ],
 });
 ```
@@ -727,14 +730,17 @@ También puedes usar el `intlayerProxy` para agregar enrutamiento del lado del s
 ```typescript {3,7} fileName="vite.config.ts"
 import { reactRouter } from "@react-router/dev/vite";
 import { defineConfig } from "vite";
-import { intlayer, intlayerProxy } from "vite-intlayer";
+import { intlayer } from "vite-intlayer";
 
 export default defineConfig({
   plugins: [
-    intlayerProxy(), // should be placed first
     reactRouter(),
 
-    intlayer(),
+    intlayer({
+      proxy: {
+        ignore: (req) => req.url?.startsWith("/api"),
+      },
+    }),
   ],
 });
 ```

package/docs/es/intlayer_with_storybook.md

@@ -23,6 +23,7 @@ history:
   - version: 8.4.5
     date: 2026-03-20
     changes: "Init doc"
+author: aymericzip
 ---
 
 # Intlayer con Storybook
@@ -189,7 +190,13 @@ const config: StorybookConfig = {
     } as const;
 
     const viteConfig = defineConfig(() => ({
-      plugins: [intlayer()],
+      plugins: [
+        intlayer({
+          proxy: {
+            ignore: (req) => req.url?.startsWith("/api"),
+          },
+        }),
+      ],
     }));
 
     return mergeConfig(baseConfig, viteConfig(env));
@@ -259,10 +266,11 @@ export default preview;
 
 > Los valores de `locale` deben coincidir con los idiomas declarados en tu `intlayer.config.ts`.
 
+</Step>
+</Steps>
 </Tab>
 <Tab value="Webpack Setup">
-
-</Step>
+<Steps>
 
 <Step number={1} title="Instalar Dependencias">
 
@@ -384,14 +392,10 @@ const preview: Preview = {
 export default preview;
 ```
 
-</Tab>
-</Tabs>
-
----
-
 </Step>
-
 </Steps>
+</Tab>
+</Tabs>
 
 ## Declaración de Contenido