@intlayer/docs 9.5.4 → 9.5.6

package/docs/es/how_works_intlayer.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-12
-updatedAt: 2026-08-30
+updatedAt: 2026-09-19
 title: Cómo funciona Intlayer
 description: Aprenda cómo funciona Intlayer internamente. Comprenda la arquitectura y los componentes que hacen que Intlayer sea potente.
 keywords:
@@ -134,49 +134,105 @@ Intlayer está compuesto por varios paquetes, cada uno con un rol específico en
 
 El paquete `intlayer` se utiliza en aplicaciones para declarar contenido en archivos de contenido.
 
-### react-intlayer
+### Frameworks de Frontend
+
+<Tabs group="framework">
+  <Tab label="React" value="react">
 
 El paquete `react-intlayer` se utiliza para interpretar los diccionarios de Intlayer y hacerlos utilizables en aplicaciones React.
 
-### next-intlayer
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
 
 El paquete `next-intlayer` se utiliza como una capa sobre `react-intlayer` para hacer que los diccionarios de Intlayer sean utilizables en aplicaciones Next.js. Integra características esenciales para que Intlayer funcione en un entorno Next.js, como middleware de traducción, enrutamiento o la configuración del archivo `next.config.js`.
 
-### vue-intlayer
+  </Tab>
+  <Tab label="Vue" value="vue">
 
 El paquete `vue-intlayer` se utiliza para interpretar los diccionarios de Intlayer y hacerlos utilizables en aplicaciones Vue.
 
-### nuxt-intlayer
+  </Tab>
+  <Tab label="Nuxt" value="nuxt">
 
 El paquete `nuxt-intlayer` es un módulo de Nuxt para hacer que los diccionarios de Intlayer sean utilizables en aplicaciones Nuxt. Integra características esenciales para que Intlayer funcione en un entorno Nuxt, como middleware de traducción, enrutamiento o la configuración del archivo `nuxt.config.js`.
 
-### svelte-intlayer
+  </Tab>
+  <Tab label="Svelte" value="svelte">
 
 El paquete `svelte-intlayer` se utiliza para interpretar los diccionarios de Intlayer y hacerlos utilizables en aplicaciones Svelte.
 
-### solid-intlayer (WIP)
+  </Tab>
+  <Tab label="Solid" value="solid">
 
 El paquete `solid-intlayer` se utiliza para interpretar los diccionarios de Intlayer y hacerlos utilizables en aplicaciones Solid.js.
 
-### preact-intlayer
+  </Tab>
+  <Tab label="Preact" value="preact">
 
 El paquete `preact-intlayer` se utiliza para interpretar los diccionarios de Intlayer y hacerlos utilizables en aplicaciones Preact.
 
-### angular-intlayer (WIP)
+  </Tab>
+  <Tab label="Angular" value="angular">
 
 El paquete `angular-intlayer` se utiliza para interpretar los diccionarios de Intlayer y hacerlos utilizables en aplicaciones Angular.
 
-### express-intlayer
+  </Tab>
+  <Tab label="Astro" value="astro">
 
-El paquete `express-intlayer` se utiliza para usar Intlayer en un backend de Express.js.
+El paquete `astro-intlayer` proporciona las herramientas necesarias para integrar Intlayer en aplicaciones Astro. Configura el enrutamiento basado en locales y la gestión de diccionarios.
+
+  </Tab>
+  <Tab label="Remix" value="remix">
+
+El paquete `remix-intlayer` proporciona las herramientas necesarias para integrar Intlayer en aplicaciones Remix. Configura el enrutamiento basado en locales, el contexto del lado del servidor y la gestión de diccionarios.
 
-### react-native-intlayer
+  </Tab>
+  <Tab label="React Native" value="react-native">
 
 El paquete `react-native-intlayer` proporciona herramientas que integran plugins para que Intlayer funcione con el empaquetador Metro.
 
-### lynx-intlayer
+  </Tab>
+  <Tab label="Lit" value="lit">
+
+El paquete `lit-intlayer` proporciona herramientas y componentes para interpretar y usar los diccionarios de Intlayer en aplicaciones Lit.
+
+  </Tab>
+  <Tab label="Vanilla JS" value="vanilla">
+
+El paquete `vanilla-intlayer` proporciona herramientas para integrar Intlayer en aplicaciones de JavaScript vanilla, HTML o PHP.
+
+  </Tab>
+</Tabs>
+
+### Frameworks de Backend
+
+<Tabs group="backend">
+  <Tab label="Express" value="express">
+
+El paquete `express-intlayer` se utiliza para usar Intlayer en un backend de Express.js.
+
+  </Tab>
+  <Tab label="Fastify" value="fastify">
+
+El paquete `fastify-intlayer` proporciona un plugin para aplicaciones Fastify para gestionar la internacionalización. Detecta el locale del usuario y decora el objeto request.
 
-El paquete `lynx-intlayer` proporciona herramientas que integran plugins para que Intlayer funcione con el empaquetador Lynx.
+  </Tab>
+  <Tab label="Hono" value="hono">
+
+El paquete `hono-intlayer` proporciona un middleware para aplicaciones Hono para manejar la internacionalización. Detecta el idioma del usuario y rellena el objeto de contexto.
+
+  </Tab>
+  <Tab label="Elysia" value="elysia">
+
+El paquete `elysia-intlayer` proporciona un plugin para aplicaciones Elysia para gestionar la internacionalización. Detecta el locale del usuario e inyecta un objeto `intlayer` en el contexto de la ruta.
+
+  </Tab>
+  <Tab label="AdonisJS" value="adonis">
+
+El paquete `adonis-intlayer` proporciona un middleware para aplicaciones AdonisJS para manejar la internacionalización. Detecta el locale del usuario y proporciona funciones de traducción.
+
+  </Tab>
+</Tabs>
 
 ### vite-intlayer
 
@@ -186,6 +242,10 @@ Incluye el plugin de Vite para integrar Intlayer con el [empaquetador Vite](http
 
 Incluye los comandos y plugins de `react-scripts-intlayer` para integrar Intlayer con aplicaciones basadas en Create React App. Estos plugins están basados en [craco](https://craco.js.org/) e incluyen configuración adicional para el empaquetador [Webpack](https://webpack.js.org/).
 
+### eslint-plugin-intlayer
+
+El paquete `eslint-plugin-intlayer` proporciona reglas de ESLint y oxlint para detectar cadenas sin traducir, validar definiciones de diccionario y aplicar las mejores prácticas de i18n.
+
 ### intlayer-editor
 
 El paquete `intlayer-editor` se utiliza para permitir el uso del editor visual. Este paquete, opcional, puede instalarse en aplicaciones y será utilizado por el paquete `react-intlayer`.
@@ -219,6 +279,18 @@ El paquete `@intlayer/cli` es un paquete de NPM que se utiliza para declarar los
 
 El paquete `@intlayer/mcp` proporciona un servidor MCP (Model Context Protocol) que ofrece asistencia para IDE potenciada por IA, adaptada al ecosistema Intlayer. Carga automáticamente la documentación e integra con la CLI de Intlayer.
 
+### @intlayer/lsp
+
+El paquete `@intlayer/lsp` proporciona un servidor Language Server Protocol (LSP) adaptado para Intlayer. Ofrece funciones de IDE como ir a la definición, buscar referencias, vistas previas al pasar el cursor, autocompletado de claves de diccionario y advertencias de diagnóstico.
+
+### @intlayer/ai
+
+El paquete `@intlayer/ai` proporciona capacidades de SDK para aplicaciones Intlayer, lo que permite la traducción automatizada y la generación de contenido mediante IA.
+
+### @intlayer/analytics
+
+El paquete `@intlayer/analytics` proporciona herramientas para recopilar métricas de visualización de contenido, análisis a nivel de página/locale y de nodos, e impulsa pruebas A/B de contenido.
+
 ### @intlayer/dictionaries-entry
 
 El paquete `@intlayer/dictionaries-entry` devuelve la ruta de entrada de los diccionarios de Intlayer: los diccionarios fusionados desde su raíz, y los no fusionados, remotos, dinámicos y fetch desde sus subrutas `/unmerged`, `/remote`, `/dynamic` y `/fetch`. Dado que buscar en el sistema de archivos desde el navegador es imposible, no es posible usar empaquetadores como Webpack o Rollup para obtener la ruta de entrada de los diccionarios. El paquete y sus subrutas están diseñados para ser aliasados, lo que permite la optimización del empaquetado en varios empaquetadores como Vite, Webpack y Turbopack.

package/docs/es/intlayer_visual_editor.md

@@ -278,6 +278,13 @@ El editor muestra tu aplicación en un iframe, así que tu Content Security Poli
 
 Está diseñado para desarrollo y staging, donde es aceptable una recompilación tras una edición. Para editar contenido en un sitio en vivo sin un despliegue, usa el [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_CMS.md) y sus diccionarios remotos en su lugar.
 
+</Question>
+<Question title="¿Cuál es el costo del editor visual? ¿Es excesivo si no lo necesito?">
+
+El editor visual de Intlayer tiene un **costo cero** en su aplicación si no está configurado. La lógica adicional solo se carga si se habilita explícitamente y es necesaria.
+
+Si está habilitado, el impacto es extremadamente ligero (+5 KB, cargado dinámicamente solo cuando se activa) porque la mayor parte de la lógica es manejada por el editor del servidor en [app.intlayer.org](https://app.intlayer.org) o a través del paquete `intlayer-editor`. Si solo necesita una solución de traducción simple sin edición visual, Intlayer no agrega ninguna sobrecarga a su aplicación.
+
 </Question>
 <Question title="¿El editor visual es gratuito?">
 

package/docs/es/intlayer_with_astro.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-08-30
+updatedAt: 2026-09-20
 title: "Astro i18n - Guía completa para traducir tu aplicación"
 description: "Sin más i18next. La guía 2026 para crear una aplicación Astro multilingüe (i18n). Traduce con agentes de IA y optimiza el tamaño del bundle, SEO y rendimiento."
 keywords:
@@ -18,6 +18,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
 applicationShowcase: https://intlayer-astro-template.vercel.app
 history:
+  - version: 9.5.5
+    date: 2026-09-19
+    changes: "Añadir los hooks useIntlayer / useLocale y el middleware Astro.locals a astro-intlayer"
   - 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"
@@ -152,7 +155,7 @@ bun add intlayer astro-intlayer
   El paquete core que proporciona herramientas de i18n para la gestión de la configuración, traducciones, [declaración de contenidos](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/content_file.md), transpilación y [comandos CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/cli/index.md).
 
 - **astro-intlayer**
-  Incluye el plugin de integración de Astro para conectar Intlayer con el [bundler Vite](https://vite.dev/guide/why.html#why-bundle-for-production), así como el middleware para detectar el idioma preferido del usuario, gestionar cookies y manejar redirecciones de URL.
+  Incluye el plugin de integración de Astro para integrar Intlayer con el [empaquetador Vite](https://vite.dev/guide/why.html#why-bundle-for-production), un middleware que resuelve el idioma de cada solicitud en `Astro.locals.intlayer`, y los hooks `useIntlayer` / `useDictionary` / `useLocale`. La misma ruta de importación resuelve a la implementación de servidor en tu frontmatter `.astro` y a la de cliente (respaldada por `vanilla-intlayer`) en bloques `<script>`.
 
 </Step>
 <Step number={2} title="Configurar tu proyecto">
@@ -228,26 +231,28 @@ export default appContent;
 </Step>
 <Step number={5} title="Usar el contenido en Astro">
 
-Puedes consumir los diccionarios directamente en tus archivos `.astro` utilizando los helpers core exportados por `intlayer`.
+Consume tus diccionarios en archivos `.astro` con los hooks exportados por `astro-intlayer`. Comparten las firmas de `react-intlayer`: `useIntlayer("key")` devuelve el contenido de un diccionario y `useLocale()` el idioma actual, sin necesidad de pasar argumentos.
+
+El idioma proviene del middleware `astro-intlayer`, que la integración registra automáticamente antes de tu propio `src/middleware.ts`. Lo resuelve para cada solicitud, a partir del prefijo de URL, luego del idioma guardado por el cliente (cookie o encabezado), luego de `Accept-Language`, y lo almacena en `Astro.locals.intlayer`. Las páginas pre-renderizadas solo usan la URL, ya que se renderizan una vez para cada visitante.
+
+También debes agregar metadatos de SEO como hreflang y enlaces canónicos a cada página e incluir un selector de idioma para permitir a los usuarios cambiar de idioma.
 
 ```astro fileName="src/pages/index.astro"
 ---
+import { useIntlayer, useLocale } from "astro-intlayer";
 import {
-  getIntlayer,
-  getLocaleFromPath,
   getLocalizedUrl,
   defaultLocale,
   localeMap,
   getHTMLTextDir,
-  type LocalesValues,
 } from "intlayer";
 import LocaleSwitcher from "../components/LocaleSwitcher.astro";
 
-// Get the current locale from the URL (e.g. /es/about -> 'es')
-const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
+// Idioma resuelto por el middleware (ej. /es/about -> 'es')
+const { locale } = useLocale();
 
-// Get the content for the 'app' dictionary
-const { title } = getIntlayer("app", locale);
+// Contenido del diccionario 'app' para ese idioma
+const { title } = useIntlayer("app");
 ---
 
 <!doctype html>
@@ -299,6 +304,8 @@ const { title } = getIntlayer("app", locale);
 </html>
 ```
 
+> `Astro.locals.intlayer` también expone `locale`, `defaultLocale` y `availableLocales` a tus propios middlewares y endpoints. Pasa un idioma o un selector como segundo argumento (`useIntlayer("app", "fr")`, `useIntlayer("faq", { item: 2 })`) para anular el idioma de la solicitud en una llamada.
+
 </Step>
 <Step number={6} title="Enrutamiento localizado">
 
@@ -324,44 +331,51 @@ Para permitir a los usuarios cambiar de idioma, puedes crear un componente `Loca
 
 ```astro fileName="src/components/LocaleSwitcher.astro"
 ---
-import {
-  locales,
-  getLocaleName,
-  getLocalizedUrl,
-  getLocaleFromPath,
-  getPathWithoutLocale,
-  type LocalesValues,
-} from "intlayer";
+import { useLocale } from "astro-intlayer";
+import { getLocaleName, getLocalizedUrl, getPathWithoutLocale } from "intlayer";
 
-const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
+const { locale, availableLocales } = useLocale();
 const pathWithoutLocale = getPathWithoutLocale(Astro.url.pathname);
 ---
 
-<nav>
-  {
-    locales.map((localeItem) => (
-      <a
-        href={getLocalizedUrl(pathWithoutLocale, localeItem)}
-        data-locale={localeItem}
-        aria-current={localeItem === locale ? "page" : undefined}
-      >
-        {getLocaleName(localeItem)}
-      </a>
-    ))
-  }
+<nav aria-label="Languages">
+  <ul>
+    {
+      availableLocales.map((localeItem) => (
+        <li key={localeItem} class="p-1">
+          <a
+            href={getLocalizedUrl(pathWithoutLocale, localeItem)}
+            data-locale={localeItem}
+            aria-current={localeItem === locale ? "page" : undefined}
+          >
+            {getLocaleName(localeItem)}
+          </a>
+        </li>
+      ))
+    }
+  </ul>
 </nav>
 
 <script>
-  import { setLocaleInStorageClient, getLocalizedUrl, type LocalesValues } from "intlayer";
+  // En el navegador, la misma importación resuelve a la implementación del cliente
+  import { useLocale } from "astro-intlayer";
+  import { getLocalizedUrl, type LocalesValues } from "intlayer";
+
+  // Guarda la elección en la cookie de idioma y luego navega a la URL localizada
+  const { setLocale } = useLocale({
+    onLocaleChange: (newLocale) => {
+      window.location.href = getLocalizedUrl(window.location.pathname, newLocale);
+    },
+  });
 
   const localeLinks = document.querySelectorAll("[data-locale]");
 
   localeLinks.forEach((link) => {
-    link.addEventListener("click", (e) => {
+    link.addEventListener("click", (event) => {
       const locale = link.getAttribute("data-locale") as LocalesValues;
 
-      // Update the locale cookie
-      setLocaleInStorageClient(locale);
+      event.preventDefault();
+      setLocale(locale);
     });
   });
 </script>
@@ -371,6 +385,13 @@ const pathWithoutLocale = getPathWithoutLocale(Astro.url.pathname);
     display: flex;
     gap: 1rem;
   }
+  ul {
+    display: flex;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    gap: 0.5rem;
+  }
   a[aria-current="page"] {
     font-weight: bold;
     text-decoration: underline;
@@ -379,7 +400,10 @@ const pathWithoutLocale = getPathWithoutLocale(Astro.url.pathname);
 ```
 
 > **Nota sobre la persistencia:**
-> El uso de `setLocaleInStorageClient` en el script del lado del cliente garantiza que la preferencia de idioma del usuario se guarde en una cookie. Esto permite que el middleware de Intlayer recuerde la elección y redirija automáticamente al usuario a su idioma preferido en futuras visitas.
+> `setLocale` desde el `useLocale` del lado del cliente guarda la preferencia de idioma del usuario en una cookie. Esto permite que Intlayer recuerde la elección y redirija automáticamente al usuario a su idioma preferido en futuras visitas: las páginas renderizadas bajo demanda (un adaptador con `output: 'server'` o `prerender = false`) son redirigidas por el middleware de Intlayer antes de que se envíe cualquier HTML, mientras que las páginas prerenderizadas, servidas como archivos estáticos, son redirigidas por un pequeño script que la integración inyecta en cada página. Establece `routing.enableProxy` en `false` para desactivar ambos. En `astro dev`, la cookie se ignora como fuente de redirección a menos que `routing.enableProxy` esté establecido en `true`, por lo que una cookie obsoleta no puede secuestrar las páginas en las que estás trabajando.
+>
+> **Intercompatibilidad servidor / cliente:**
+> `astro-intlayer` resuelve a sus hooks de servidor en el frontmatter (leyendo `Astro.locals`) y a los hooks de cliente de `vanilla-intlayer` en bloques `<script>` e islas, con los mismos nombres y formato de contenido. `setLocale` y `onChange` solo actúan en el cliente, llama a `installIntlayer()` allí una vez para inicializar el almacén del cliente. `astro-intlayer/client` expone la entrada del cliente explícitamente.
 
 </Step>
 <Step number={8} title="Sitemap y Robots.txt">
@@ -403,10 +427,10 @@ const pathList: SitemapUrlEntry[] = [
   { path: "/about", changefreq: "monthly", priority: 0.7 },
 ];
 
-const SITE_URL = import.meta.env.SITE ?? "http://localhost:4321";
-
 export const GET: APIRoute = async ({ site }) => {
-  const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });
+  const xmlOutput = generateSitemap(pathList, {
+    siteUrl: "https://example.com",
+  });
 
   return new Response(xmlOutput, {
     headers: { "Content-Type": "application/xml" },
@@ -447,11 +471,12 @@ export const GET: APIRoute = ({ site }) => {
 
 Sigue construyendo tu aplicación con el framework que prefieras.
 
-- Intlayer + React: [Intlayer con React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_vite+react.md)
-- Intlayer + Vue: [Intlayer con Vue](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_vite+vue.md)
-- Intlayer + Svelte: [Intlayer con Svelte](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_vite+svelte.md)
-- Intlayer + Solid: [Intlayer con Solid](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_vite+solid.md)
-- Intlayer + Preact: [Intlayer con Preact](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_vite+preact.md)
+- Intlayer + React: [Intlayer con React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_astro_react.md)
+- Intlayer + Vue: [Intlayer con Vue](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_astro_vue.md)
+- Intlayer + Svelte: [Intlayer con Svelte](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_astro_svelte.md)
+- Intlayer + Solid: [Intlayer con Solid](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_astro_solid.md)
+- Intlayer + Preact: [Intlayer con Preact](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_astro_preact.md)
+- Intlayer + Lit: [Intlayer con Lit](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_astro_lit.md)
 </Step>
 
 <Step number={15} title="Extraer el contenido de tus componentes" isOptional={true}>
@@ -517,21 +542,7 @@ 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"
-import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
-
-export default defineConfig({
-  plugins: [
-    intlayer(),
-    intlayerCompiler(), // Adds the compiler plugin
-  ],
-});
-```
+Compila tu aplicación para transformar tus componentes y extraer el contenido
 
 ```bash packageManager="npm"
 npm run build # O npm run dev

package/docs/es/intlayer_with_astro_lit.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-08-30
+updatedAt: 2026-09-20
 title: "Astro + Lit i18n - Guía completa para traducir tu aplicación"
 description: "Sin más i18next. La guía 2026 para crear una aplicación Astro + Lit multilingüe (i18n). Traduce con agentes de IA y optimiza el tamaño del bundle, SEO y rendimiento."
 keywords:
@@ -20,6 +20,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
 applicationShowcase: https://intlayer-astro-template.vercel.app
 history:
+  - version: 9.5.5
+    date: 2026-09-19
+    changes: "Uso de los hooks useIntlayer / useLocale de astro-intlayer en la página de Astro"
   - 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"
@@ -151,7 +154,7 @@ bun add intlayer astro-intlayer lit lit-intlayer @astrojs/lit
   El paquete core que proporciona herramientas de i18n para la gestión de la configuración, traducciones, [declaración de contenidos](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/content_file.md), transpilación y [comandos CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/cli/index.md).
 
 - **astro-intlayer**
-  Incluye el plugin de integración de Astro para conectar Intlayer con el [bundler Vite](https://vite.dev/guide/why.html#why-bundle-for-production), así como el middleware para detectar el idioma preferido del usuario, gestionar cookies y manejar redirecciones de URL.
+  Incluye el plugin de integración de Astro para integrar Intlayer con el [empaquetador Vite](https://vite.dev/guide/why.html#why-bundle-for-production), un middleware que resuelve el idioma de cada solicitud en `Astro.locals.intlayer`, y los hooks `useIntlayer` / `useDictionary` / `useLocale`. La misma ruta de importación resuelve a la implementación de servidor en tu frontmatter `.astro` y a la de cliente (respaldada por `vanilla-intlayer`) en bloques `<script>`.
 
 - **lit**
   El paquete core de Lit para construir Web Components rápidos y ligeros.
@@ -243,19 +246,21 @@ export default litDemoContent;
 </Step>
 <Step number={5} title="Usar el contenido en Astro">
 
-Puedes consumir los diccionarios directamente en tus archivos `.astro` utilizando los helpers core exportados por `intlayer`. También deberías añadir metadatos SEO (como hreflang y enlaces canónicos) a cada página. Los elementos personalizados de Lit se importan mediante un `<script>` del cliente y se colocan en el body.
+Consume tus diccionarios en archivos `.astro` con los hooks exportados por `astro-intlayer`. Comparten las firmas de `react-intlayer`: `useIntlayer("key")` devuelve el contenido de un diccionario y `useLocale()` el idioma actual, sin necesidad de pasar argumentos.
+
+El idioma proviene del middleware `astro-intlayer`, que la integración registra automáticamente antes de tu propio `src/middleware.ts`. Lo resuelve para cada solicitud, a partir del prefijo de URL, luego del idioma guardado por el cliente (cookie o encabezado), luego de `Accept-Language`, y lo almacena en `Astro.locals.intlayer`. Las páginas pre-renderizadas solo usan la URL, ya que se renderizan una vez para cada visitante.
+
+Los elementos personalizados de Lit se importan mediante un `<script>` del cliente y se colocan en el body.
 
 ```astro fileName="src/pages/[...locale]/index.astro"
 ---
+import { useIntlayer, useLocale } from "astro-intlayer";
 import {
-  getIntlayer,
-  getLocaleFromPath,
   getLocalizedUrl,
-  getHTMLTextDir,
   getPrefix,
   localeMap,
   defaultLocale,
-  type LocalesValues,
+  getHTMLTextDir,
 } from "intlayer";
 
 export const getStaticPaths = () => {
@@ -264,8 +269,11 @@ export const getStaticPaths = () => {
   }));
 };
 
-const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
-const { greeting } = getIntlayer("lit-demo", locale);
+// Idioma resuelto por el middleware (ej. /es/about -> 'es')
+const { locale } = useLocale();
+
+// Contenido del diccionario 'lit-demo' para ese idioma
+const { greeting } = useIntlayer("lit-demo");
 ---
 
 <!doctype html>
@@ -324,6 +332,8 @@ const { greeting } = getIntlayer("lit-demo", locale);
 > <img src={String(content.image.src)} alt={String(content.image)} />
 > ```
 
+> `Astro.locals.intlayer` también expone `locale`, `defaultLocale` y `availableLocales` a tus propios middlewares y endpoints. Pasa un idioma o un selector como segundo argumento (`useIntlayer("app", "fr")`, `useIntlayer("faq", { item: 2 })`) para anular el idioma de la solicitud en una llamada.
+
 > **Nota sobre la configuración de rutas:**
 > La estructura de directorios que utilices depende del ajuste `middleware.routing` en `intlayer.config.ts`:
 >
@@ -480,10 +490,10 @@ const pathList: SitemapUrlEntry[] = [
   { path: "/about", changefreq: "monthly", priority: 0.7 },
 ];
 
-const SITE_URL = import.meta.env.SITE ?? "http://localhost:4321";
-
 export const GET: APIRoute = async ({ site }) => {
-  const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });
+  const xmlOutput = generateSitemap(pathList, {
+    siteUrl: "https://example.com",
+  });
 
   return new Response(xmlOutput, {
     headers: { "Content-Type": "application/xml" },
@@ -583,21 +593,7 @@ 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"
-import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
-
-export default defineConfig({
-  plugins: [
-    intlayer(),
-    intlayerCompiler(), // Adds the compiler plugin
-  ],
-});
-```
+Compila tu aplicación para transformar tus componentes y extraer el contenido
 
 ```bash packageManager="npm"
 npm run build # O npm run dev

package/docs/es/intlayer_with_astro_preact.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-08-30
+updatedAt: 2026-09-20
 title: "Astro + Preact i18n - Guía completa para traducir tu aplicación"
 description: "Sin más i18next. La guía 2026 para crear una aplicación Astro + Preact multilingüe (i18n). Traduce con agentes de IA y optimiza el tamaño del bundle, SEO y rendimiento."
 keywords:
@@ -19,6 +19,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
 applicationShowcase: https://intlayer-astro-template.vercel.app
 history:
+  - version: 9.5.5
+    date: 2026-09-19
+    changes: "Uso de los hooks useIntlayer / useLocale de astro-intlayer en la página de Astro"
   - 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"
@@ -150,7 +153,7 @@ bun add intlayer astro-intlayer preact preact-intlayer @astrojs/preact
   El paquete core que proporciona herramientas de i18n para la gestión de la configuración, traducciones, [declaración de contenidos](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/content_file.md), transpilación y [comandos CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/cli/index.md).
 
 - **astro-intlayer**
-  Incluye el plugin de integración de Astro para conectar Intlayer con el [bundler Vite](https://vite.dev/guide/why.html#why-bundle-for-production), así como el middleware para detectar el idioma preferido del usuario, gestionar cookies y manejar redirecciones de URL.
+  Incluye el plugin de integración de Astro para integrar Intlayer con el [empaquetador Vite](https://vite.dev/guide/why.html#why-bundle-for-production), un middleware que resuelve el idioma de cada solicitud en `Astro.locals.intlayer`, y los hooks `useIntlayer` / `useDictionary` / `useLocale`. La misma ruta de importación resuelve a la implementación de servidor en tu frontmatter `.astro` y a la de cliente (respaldada por `vanilla-intlayer`) en bloques `<script>`.
 
 - **preact**
   El paquete core de Preact - una alternativa rápida y ligera a React.
@@ -241,19 +244,21 @@ export default appContent;
 </Step>
 <Step number={5} title="Usar el contenido en Astro">
 
-Puedes consumir los diccionarios directamente en tus archivos `.astro` utilizando los helpers core exportados por `intlayer`. También deberías añadir metadatos SEO (como hreflang y enlaces canónicos) a cada página e introducir una isla de Preact para el contenido interactivo del lado del cliente.
+Consume tus diccionarios en archivos `.astro` con los hooks exportados por `astro-intlayer`. Comparten las firmas de `react-intlayer`: `useIntlayer("key")` devuelve el contenido de un diccionario y `useLocale()` el idioma actual, sin necesidad de pasar argumentos.
+
+El idioma proviene del middleware `astro-intlayer`, que la integración registra automáticamente antes de tu propio `src/middleware.ts`. Lo resuelve para cada solicitud, a partir del prefijo de URL, luego del idioma guardado por el cliente (cookie o encabezado), luego de `Accept-Language`, y lo almacena en `Astro.locals.intlayer`. Las páginas pre-renderizadas solo usan la URL, ya que se renderizan una vez para cada visitante.
+
+También deberías añadir metadatos SEO (como hreflang y enlaces canónicos) a cada página e introducir una isla de Preact para el contenido interactivo del lado del cliente.
 
 ```astro fileName="src/pages/[...locale]/index.astro"
 ---
+import { useIntlayer, useLocale } from "astro-intlayer";
 import {
-  getIntlayer,
-  getLocaleFromPath,
   getLocalizedUrl,
-  getHTMLTextDir,
   getPrefix,
   localeMap,
   defaultLocale,
-  type LocalesValues,
+  getHTMLTextDir,
 } from "intlayer";
 import { PreactIsland } from "../../components/preact/PreactIsland";
 
@@ -263,8 +268,11 @@ export const getStaticPaths = () => {
   }));
 };
 
-const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
-const { title } = getIntlayer("app", locale);
+// Idioma resuelto por el middleware (ej. /es/about -> 'es')
+const { locale } = useLocale();
+
+// Contenido del diccionario 'app' para ese idioma
+const { title } = useIntlayer("app");
 ---
 
 <!doctype html>
@@ -320,6 +328,8 @@ const { title } = getIntlayer("app", locale);
 > <img src={String(content.image.src)} alt={String(content.image)} />
 > ```
 
+> `Astro.locals.intlayer` también expone `locale`, `defaultLocale` y `availableLocales` a tus propios middlewares y endpoints. Pasa un idioma o un selector como segundo argumento (`useIntlayer("app", "fr")`, `useIntlayer("faq", { item: 2 })`) para anular el idioma de la solicitud en una llamada.
+
 > **Nota sobre la configuración de rutas:**
 > La estructura de directorios que utilices depende del ajuste `middleware.routing` en `intlayer.config.ts`:
 >
@@ -436,10 +446,10 @@ const pathList: SitemapUrlEntry[] = [
   { path: "/about", changefreq: "monthly", priority: 0.7 },
 ];
 
-const SITE_URL = import.meta.env.SITE ?? "http://localhost:4321";
-
 export const GET: APIRoute = async ({ site }) => {
-  const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });
+  const xmlOutput = generateSitemap(pathList, {
+    siteUrl: "https://example.com",
+  });
 
   return new Response(xmlOutput, {
     headers: { "Content-Type": "application/xml" },
@@ -539,21 +549,7 @@ 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"
-import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
-
-export default defineConfig({
-  plugins: [
-    intlayer(),
-    intlayerCompiler(), // Adds the compiler plugin
-  ],
-});
-```
+Compila tu aplicación para transformar tus componentes y extraer el contenido
 
 ```bash packageManager="npm"
 npm run build # O npm run dev
@@ -720,6 +716,13 @@ Sí: [formas plurales](https://github.com/aymericzip/intlayer/blob/main/docs/doc
 
 A través del [editor visual](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_visual_editor.md), que se ejecuta en tu propia infraestructura y permite que cualquiera edite texto en su sitio en la aplicación en ejecución, o del [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_CMS.md), que externaliza el contenido para que pueda cambiar sin un despliegue.
 
+</Question>
+<Question title="¿Cuál es el costo del editor visual? ¿Es excesivo si no lo necesito?">
+
+El [editor visual de Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_visual_editor.md) tiene un **costo cero** en su aplicación si no está configurado. La lógica adicional solo se carga si se habilita explícitamente y es necesaria.
+
+Si está habilitado, el impacto es extremadamente ligero (+5 KB, cargado dinámicamente solo cuando se activa) porque la mayor parte de la lógica es manejada por el editor del servidor en [app.intlayer.org](https://app.intlayer.org) o a través del paquete `intlayer-editor`. Si solo necesita una solución de traducción simple sin edición visual, Intlayer no agrega ninguna sobrecarga a su aplicación.
+
 </Question>
 <Question title="¿Es Intlayer gratuito y de código abierto?">