@intlayer/docs 9.0.0-canary.5 → 9.0.0-canary.6

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,12 +17,18 @@ 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"
@@ -37,7 +43,7 @@ author: aymericzip
 <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"
 />
@@ -56,7 +62,9 @@ author: aymericzip
   </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?
 
@@ -72,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>
 
@@ -96,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>
 
@@ -109,55 +117,12 @@ En lugar de cargar archivos JSON masivos en sus páginas, cargue solo el conteni
 
 <Steps>
 
-<Step number={1} title="instalar dependencias">
+<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
-```
-
-```paquete de bashManager="pnpm"
-pnpm agregar intlayer reaccionar-intlayer
-pnpm agregar --save-dev reaccionar-nativo-intlayer
-inicio de capa interna pnpm
-```
-
-```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="bun"
-bollo agregar intlayer reaccionar-intlayer
-agregar bollo --dev reaccionar-nativo-intlayer
-inicio de capa intermedia x bun
-```
-
-### Paquetes
-
-- **capa interna**  
-  El conjunto de herramientas principal de i18n para configuración, contenido de diccionario, generación de tipos y comandos CLI.
-
-- **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.
-
----
-
-</Step>
-
-<Step number={2} title="Instalar dependencias">
-
-Desde tu proyecto React Native, instala los siguientes paquetes:
-
 ```bash packageManager="npm"
 npx intlayer-cli init --interactive
 ```
@@ -174,28 +139,24 @@ yarn dlx intlayer-cli init --interactive
 bunx intlayer-cli init --interactive
 ```
 
-> la bandera `--interactive` es opcional. Usa `intlayer-cli init` si eres un agente de IA.
+> 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 --save-dev react-native-intlayer
+npm install intlayer react-native-intlayer
 ```
 
 ```bash packageManager="pnpm"
-pnpm add intlayer react-intlayer
-pnpm add --save-dev react-native-intlayer
+pnpm add intlayer react-native-intlayer
 ```
 
 ```bash packageManager="yarn"
-yarn add intlayer react-intlayer
-yarn add --save-dev react-native-intlayer
+yarn add intlayer react-native-intlayer
 ```
 
 ```bash packageManager="bun"
-bun add intlayer react-intlayer
-bun add --dev react-native-intlayer
+bun add intlayer react-native-intlayer
 ```
 
 ### Paquetes
@@ -203,17 +164,14 @@ bun add --dev react-native-intlayer
 - **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.
 
 ---
 
 </Step>
 
-<Step number={3} title="Crear una Configuración de Intlayer">
+<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í:
 
@@ -243,11 +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>
 
-<Step number={4} title="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`:
 
@@ -262,13 +220,18 @@ module.exports = (async () => {
 })();
 ```
 
+> 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={5} title="Añadir el proveedor de Intlayer">
+<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-native-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`.
+> 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`.
 
-> 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.
+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";
@@ -293,7 +256,7 @@ export default RootLayout;
 
 </Step>
 
-<Step number={6} title="Declara Tu Contenido">
+<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:
 
@@ -358,13 +321,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).
 
 ---
 
 </Step>
 
-<Step number={7} title="Usa Intlayer en tus Componentes">
+<Step number={6} title="Usa Intlayer en tus Componentes">
 
 Usa el hook `useIntlayer` en componentes hijos para obtener contenido localizado.
 
@@ -372,7 +335,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";
@@ -413,13 +376,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.
 
 ---
 
 </Step>
 
-<Step number={8} title="Cambiar la configuración regional de la aplicación" isOptional={true}>
+<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`:
 
@@ -427,7 +390,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();
@@ -470,7 +433,7 @@ 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>
 
@@ -529,9 +492,9 @@ 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**!
 
@@ -545,7 +508,7 @@ Intlayer se orienta principalmente a la Web Intl API; en React Native debes incl
 
 Lista de verificación:
 
-- Usa las últimas versiones de `intlayer`, `react-intlayer`, y `react-native-intlayer`.
+- 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`):
 

package/docs/es/packages/react-native-intlayer/exports.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-01-21
-updatedAt: 2026-01-21
+updatedAt: 2026-06-25
 title: Documentación del paquete react-native-intlayer
-description: Soporte para React Native de Intlayer, que proporciona providers y polyfills.
+description: Soporte para React Native de Intlayer, que proporciona providers, hooks, polyfills y configuración de Metro.
 keywords:
   - react-native-intlayer
   - react-native
@@ -14,6 +14,9 @@ slugs:
   - react-native-intlayer
   - exports
 history:
+  - version: 9.0.0
+    date: 2026-06-25
+    changes: "Re-exportar la API completa de react-intlayer (hooks, utilidades, subpaths de format/html/markdown) para que una aplicación React Native solo dependa de react-native-intlayer"
   - version: 8.0.0
     date: 2026-01-21
     changes: "Documentación unificada para todas las exportaciones"
@@ -22,7 +25,9 @@ author: aymericzip
 
 # Paquete react-native-intlayer
 
-El paquete `react-native-intlayer` proporciona las herramientas necesarias para integrar Intlayer en aplicaciones React Native. Incluye un provider y polyfills para el soporte de locales.
+El paquete `react-native-intlayer` proporciona las herramientas necesarias para integrar Intlayer en aplicaciones React Native. Re-exporta la API completa de `react-intlayer` (hooks y utilidades) con un `IntlayerProvider` listo para React Native, además de los polyfills y la configuración de Metro que requiere React Native.
+
+> En una aplicación React Native, importa **todo** desde `react-native-intlayer`. No necesitas instalar ni importar `react-intlayer` directamente.
 
 ## Instalación
 
@@ -34,14 +39,30 @@ npm install react-native-intlayer
 
 ### Proveedor
 
-| Componente         | Descripción                                                                           |
-| ------------------ | ------------------------------------------------------------------------------------- |
-| `IntlayerProvider` | Componente Provider que envuelve tu aplicación y proporciona el contexto de Intlayer. |
+| Componente         | Descripción                                                                                                                            |
+| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------- |
+| `IntlayerProvider` | Componente Provider que envuelve tu aplicación y proporciona el contexto de Intlayer. Aplica automáticamente los polyfills necesarios. |
+
+```tsx
+import { IntlayerProvider } from "react-native-intlayer";
+```
+
+### Hooks y utilidades
+
+Estos se re-exportan desde `react-intlayer`, por lo que puedes importarlos directamente desde `react-native-intlayer`:
 
-Importación:
+| Exportación                                                                                                       | Descripción                                                   |
+| ----------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
+| `useIntlayer`                                                                                                     | Accede al contenido localizado para una clave de diccionario. |
+| `useLocale`                                                                                                       | Lee y cambia el locale actual.                                |
+| `useDictionary`, `useDictionaryAsync`, `useDictionaryDynamic`, `useLoadDynamic`                                   | Carga el contenido del diccionario de diversas formas.        |
+| `useI18n`                                                                                                         | Hook compatible con i18next.                                  |
+| `t`                                                                                                               | Ayudante de traducción en línea.                              |
+| `getIntlayer`, `getDictionary`                                                                                    | Obtención de contenido imperativa.                            |
+| `localeCookie`, `localeInStorage`, `setLocaleCookie`, `setLocaleInStorage`, `useLocaleCookie`, `useLocaleStorage` | Ayudantes de persistencia de locale.                          |
 
 ```tsx
-import "react-native-intlayer";
+import { useIntlayer, useLocale, t } from "react-native-intlayer";
 ```
 
 ### Polyfill
@@ -50,10 +71,25 @@ import "react-native-intlayer";
 | ------------------ | ----------------------------------------------------------------------------------- |
 | `intlayerPolyfill` | Función que aplica los polyfills necesarios para que React Native soporte Intlayer. |
 
-Importación:
+```tsx
+import { intlayerPolyfill } from "react-native-intlayer";
+```
+
+> El polyfill se aplica automáticamente cuando importas `IntlayerProvider`. Llama a `intlayerPolyfill` manualmente solo si necesitas los polyfills antes de que se monte el provider.
+
+### Formateadores
+
+Los hooks de formato numérico, de fecha y otros basados en Intl están disponibles desde el subpath `/format`:
+
+```tsx
+import { useNumber, useDate } from "react-native-intlayer/format";
+```
+
+### Renderizado de Markdown y HTML
 
 ```tsx
-import "react-native-intlayer";
+import { MarkdownProvider } from "react-native-intlayer/markdown";
+import { HTMLProvider } from "react-native-intlayer/html";
 ```
 
 ### Configuración de Metro
@@ -66,8 +102,6 @@ El paquete `react-native-intlayer` proporciona utilidades de configuración de M
 | `configMetroIntlayerSync` | Función síncrona que fusiona la configuración de Metro sin preparar los recursos de Intlayer.   |
 | `exclusionList`           | Crea un patrón RegExp para el blockList de Metro para excluir archivos de contenido del bundle. |
 
-Importación:
-
 ```tsx
-import "react-native-intlayer/metro";
+import { configMetroIntlayer } from "react-native-intlayer/metro";
 ```