@intlayer/docs 5.5.9 → 5.5.11

package/docs/es/packages/solid-intlayer/index.md

@@ -0,0 +1,54 @@
+---
+createdAt: 2024-08-11
+updatedAt: 2025-06-29
+title: Documentación del Paquete | solid-intlayer
+description: Vea cómo usar el paquete solid-intlayer
+keywords:
+  - Intlayer
+  - solid-intlayer
+  - Internacionalización
+  - Documentación
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - doc
+  - packages
+  - solid-intlayer
+---
+
+# solid-intlayer: Paquete NPM para internacionalizar (i18n) una aplicación Solid
+
+**Intlayer** es una suite de paquetes diseñada específicamente para desarrolladores de JavaScript. Es compatible con frameworks como Solid, Solid y Express.js.
+
+**El paquete `solid-intlayer`** te permite internacionalizar tu aplicación Solid. Proporciona proveedores de contexto y hooks para la internacionalización en Solid.
+
+## ¿Por qué internacionalizar tu aplicación Solid?
+
+Internacionalizar tu aplicación Solid es esencial para atender eficazmente a una audiencia global. Permite que tu aplicación entregue contenido y mensajes en el idioma preferido de cada usuario. Esta capacidad mejora la experiencia del usuario y amplía el alcance de tu aplicación al hacerla más accesible y relevante para personas de diferentes orígenes lingüísticos.
+
+## ¿Por qué integrar Intlayer?
+
+- **Gestión de contenido impulsada por JavaScript**: Aprovecha la flexibilidad de JavaScript para definir y gestionar tu contenido de manera eficiente.
+- **Entorno con tipado seguro**: Aprovecha TypeScript para asegurar que todas tus definiciones de contenido sean precisas y libres de errores.
+- **Archivos de contenido integrados**: Mantén tus traducciones cerca de sus respectivos componentes, mejorando la mantenibilidad y claridad.
+
+## Instalación
+
+Instala el paquete necesario usando tu gestor de paquetes preferido:
+
+```bash packageManager="npm"
+npm install solid-intlayer
+```
+
+```bash packageManager="yarn"
+yarn add solid-intlayer
+```
+
+```bash packageManager="pnpm"
+pnpm add solid-intlayer
+```
+
+## Historial de documentación
+
+- 5.5.10 - 2025-06-29: Historial inicial

package/docs/es/packages/svelte-intlayer/index.md

@@ -0,0 +1,53 @@
+---
+createdAt: 2025-04-18
+updatedAt: 2025-06-29
+title: Documentación del Paquete | svelte-intlayer
+description: Vea cómo usar el paquete svelte-intlayer
+keywords:
+  - Intlayer
+  - svelte-intlayer
+  - Internacionalización
+  - Documentación
+  - JavaScript
+  - Svelte
+slugs:
+  - doc
+  - packages
+  - svelte-intlayer
+---
+
+# svelte-intlayer: Paquete NPM para internacionalizar (i18n) una aplicación Solid
+
+**Intlayer** es una suite de paquetes diseñados específicamente para desarrolladores de JavaScript. Es compatible con frameworks como Solid, Solid y Express.js.
+
+**El paquete `svelte-intlayer`** te permite internacionalizar tu aplicación Solid. Proporciona proveedores de contexto y hooks para la internacionalización en Solid.
+
+## ¿Por qué internacionalizar tu aplicación Solid?
+
+Internacionalizar tu aplicación Solid es esencial para atender eficazmente a una audiencia global. Permite que tu aplicación entregue contenido y mensajes en el idioma preferido de cada usuario. Esta capacidad mejora la experiencia del usuario y amplía el alcance de tu aplicación al hacerla más accesible y relevante para personas de diferentes orígenes lingüísticos.
+
+## ¿Por qué integrar Intlayer?
+
+- **Gestión de contenido impulsada por JavaScript**: Aprovecha la flexibilidad de JavaScript para definir y gestionar tu contenido de manera eficiente.
+- **Entorno con tipado seguro**: Aprovecha TypeScript para asegurar que todas tus definiciones de contenido sean precisas y sin errores.
+- **Archivos de contenido integrados**: Mantén tus traducciones cerca de sus respectivos componentes, mejorando la mantenibilidad y claridad.
+
+## Instalación
+
+Instala el paquete necesario usando tu gestor de paquetes preferido:
+
+```bash packageManager="npm"
+npm install svelte-intlayer
+```
+
+```bash packageManager="yarn"
+yarn add svelte-intlayer
+```
+
+```bash packageManager="pnpm"
+pnpm add svelte-intlayer
+```
+
+## Historial de la documentación
+
+- 5.5.10 - 2025-06-29: Historial inicial

package/docs/es/packages/vite-intlayer/index.md

@@ -0,0 +1,76 @@
+---
+createdAt: 2024-08-11
+updatedAt: 2025-06-29
+title: Documentación del Paquete | vite-intlayer
+description: Vea cómo usar el paquete vite-intlayer
+keywords:
+  - Intlayer
+  - vite-intlayer
+  - Internacionalización
+  - Documentación
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - doc
+  - packages
+  - vite-intlayer
+---
+
+# vite-intlayer: Paquete NPM para internacionalizar (i18n) una aplicación Vite
+
+**Intlayer** es una suite de paquetes diseñada específicamente para desarrolladores de JavaScript. Es compatible con frameworks como React, React y Express.js.
+
+**El paquete `vite-intlayer`** te permite internacionalizar tu aplicación Vite. Incluye el plugin de Vite para configurar mediante variables de entorno en el [empaquetador Vite](https://vitejs.dev/guide/why.html#why-bundle-for-production). También proporciona middleware para detectar la configuración regional preferida del usuario y redirigirlo a la URL adecuada según lo especificado en la [configuración](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/configuration.md).
+
+## ¿Por qué internacionalizar tu aplicación Vite?
+
+Internacionalizar tu aplicación Vite es esencial para atender eficazmente a una audiencia global. Permite que tu aplicación entregue contenido y mensajes en el idioma preferido de cada usuario. Esta capacidad mejora la experiencia del usuario y amplía el alcance de tu aplicación al hacerla más accesible y relevante para personas de diferentes orígenes lingüísticos.
+
+## Configuración
+
+El paquete `vite-intlayer` funciona perfectamente con el paquete [`react-intlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/packages/react-intlayer/index.md) y el paquete [`intlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/packages/intlayer/index.md). Consulta la documentación correspondiente para más información.
+
+## Instalación
+
+Instala el paquete necesario usando tu gestor de paquetes preferido:
+
+```bash packageManager="npm"
+npm install vite-intlayer
+```
+
+```bash packageManager="yarn"
+yarn add vite-intlayer
+```
+
+```bash packageManager="pnpm"
+pnpm add vite-intlayer
+```
+
+## Ejemplo de uso
+
+Consulta un ejemplo de cómo incluir los plugins en tu configuración de Vite.
+
+```typescript fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import { intlayerPlugin, intLayerMiddlewarePlugin } from "vite-intlayer";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [intlayerPlugin(), intLayerMiddlewarePlugin()],
+});
+```
+
+> El plugin `intlayerPlugin()` para Vite se utiliza para integrar Intlayer con Vite. Asegura la construcción de archivos de declaración de contenido y los supervisa en modo desarrollo. Define variables de entorno de Intlayer dentro de la aplicación Vite. Además, proporciona alias para optimizar el rendimiento.
+
+> El plugin `intLayerMiddlewarePlugin()` añade 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 localización apropiada. Si no se especifica ninguna localización, el plugin determinará la localización más adecuada basándose en las preferencias de idioma del navegador del usuario. Si no se detecta ninguna localización, redirigirá a la localización predeterminada.
+
+## Dominando la internacionalización de tu aplicación Vite
+
+Intlayer ofrece muchas funcionalidades para ayudarte a internacionalizar tu aplicación Vite.
+
+**Para aprender más sobre estas funcionalidades, consulta la guía [Internacionalización (i18n) en React con Intlayer, Vite y React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_vite+react.md) para aplicaciones Vite y React.**
+
+## Historial del documento
+
+- 5.5.10 - 2025-06-29: Historial inicial

package/docs/es/packages/vue-intlayer/index.md

@@ -0,0 +1,53 @@
+---
+createdAt: 2025-04-18
+updatedAt: 2025-06-29
+title: Documentación del Paquete | vue-intlayer
+description: Vea cómo usar el paquete vue-intlayer
+keywords:
+  - Intlayer
+  - vue-intlayer
+  - Internacionalización
+  - Documentación
+  - JavaScript
+  - Vue
+slugs:
+  - doc
+  - packages
+  - vue-intlayer
+---
+
+# vue-intlayer: Paquete NPM para internacionalizar (i18n) una aplicación Vue
+
+**Intlayer** es una suite de paquetes diseñados específicamente para desarrolladores de JavaScript. Es compatible con frameworks como Vue, Vue y Express.js.
+
+**El paquete `vue-intlayer`** te permite internacionalizar tu aplicación Vue. Proporciona proveedores de contexto y hooks para la internacionalización en Vue.
+
+## ¿Por qué internacionalizar tu aplicación Vue?
+
+Internacionalizar tu aplicación Vue es esencial para atender eficazmente a una audiencia global. Permite que tu aplicación entregue contenido y mensajes en el idioma preferido de cada usuario. Esta capacidad mejora la experiencia del usuario y amplía el alcance de tu aplicación al hacerla más accesible y relevante para personas de diferentes orígenes lingüísticos.
+
+## ¿Por qué integrar Intlayer?
+
+- **Gestión de contenido impulsada por JavaScript**: Aprovecha la flexibilidad de JavaScript para definir y gestionar tu contenido de manera eficiente.
+- **Entorno con tipado seguro**: Aprovecha TypeScript para asegurar que todas tus definiciones de contenido sean precisas y sin errores.
+- **Archivos de contenido integrados**: Mantén tus traducciones cerca de sus respectivos componentes, mejorando la mantenibilidad y claridad.
+
+## Instalación
+
+Instala el paquete necesario usando tu gestor de paquetes preferido:
+
+```bash packageManager="npm"
+npm install vue-intlayer
+```
+
+```bash packageManager="yarn"
+yarn add vue-intlayer
+```
+
+```bash packageManager="pnpm"
+pnpm add vue-intlayer
+```
+
+## Historial de documentación
+
+- 5.5.10 - 2025-06-29: Historial inicial

package/docs/es/per_locale_file.md

@@ -0,0 +1,321 @@
+---
+createdAt: 2025-04-18
+updatedAt: 2025-06-29
+title: Declaración de contenido `Por-Locale` en Intlayer
+description: Descubre cómo declarar contenido por locale en Intlayer. Sigue la documentación para entender los diferentes formatos y casos de uso.
+keywords:
+  - Internacionalización
+  - Documentación
+  - Intlayer
+  - Por-Locale
+  - TypeScript
+  - JavaScript
+slugs:
+  - doc
+  - concept
+  - per-locale-file
+---
+
+# Declaración de contenido `Por-Locale` en Intlayer
+
+Intlayer soporta dos formas de declarar contenido multilingüe:
+
+- Archivo único con todas las traducciones
+- Un archivo por locale (formato por-locale)
+
+Esta flexibilidad permite:
+
+- Migración sencilla desde otras herramientas i18n
+- Soporte para flujos de trabajo de traducción automatizados
+- Organización clara de las traducciones en archivos separados y específicos por locale
+
+## Archivo único con múltiples traducciones
+
+Este formato es ideal para:
+
+- Iteración rápida en el código.
+- Integración fluida con el CMS.
+
+Este es el enfoque recomendado para la mayoría de los casos de uso. Centraliza las traducciones, facilitando la iteración y la integración con el CMS.
+
+```tsx fileName="hello-world.content.ts" contentDeclarationFormat="typescript"
+import { t, type Dictionary } from "intlayer";
+
+const helloWorldContent = {
+  key: "hello-world",
+  content: {
+    multilingualContent: t({
+      en: "Title of my component",
+      es: "Título de mi componente",
+    }),
+  },
+} satisfies Dictionary;
+
+export default helloWorldContent;
+```
+
+```js fileName="hello-world.content.mjs" contentDeclarationFormat="esm"
+import { t } from "intlayer";
+
+/** @type {import('intlayer').Dictionary} */
+// Contenido de hola mundo con traducciones multilingües
+const helloWorldContent = {
+  key: "hello-world",
+  content: {
+    multilingualContent: t({
+      en: "Title of my component",
+      es: "Título de mi componente",
+    }),
+  },
+};
+
+export default helloWorldContent;
+```
+
+```js fileName="hello-world.content.cjs" contentDeclarationFormat="json"
+const { t } = require("intlayer");
+
+/** @type {import('intlayer').Dictionary} */
+// Contenido de hola mundo con traducciones multilingües
+const helloWorldContent = {
+  key: "hello-world",
+  content: {
+    multilingualContent: t({
+      en: "Title of my component",
+      es: "Título de mi componente",
+    }),
+  },
+};
+
+module.exports = helloWorldContent;
+```
+
+```json fileName="hello-world.content.ts" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "hello-world",
+  "content": {
+    "multilingualContent": {
+      "nodeType": "translation",
+      "translation": {
+        "en": "Title of my component",
+        "es": "Título de mi componente"
+      }
+    }
+  }
+}
+```
+
+> Recomendado: Este formato es el mejor cuando se utiliza el editor visual de Intlayer o se gestionan las traducciones directamente en el código.
+
+## Formato por idioma
+
+Este formato es útil cuando:
+
+- Deseas versionar o sobrescribir traducciones de forma independiente.
+- Estás integrando flujos de trabajo de traducción automática o humana.
+
+También puedes dividir las traducciones en archivos individuales por idioma especificando el campo locale:
+
+```tsx fileName="hello-world.en.content.ts" contentDeclarationFormat="typescript"
+import { t, Locales, type Dictionary } from "intlayer";
+
+const helloWorldContent = {
+  key: "hello-world",
+  locale: Locales.ENGLISH, // Importante
+  content: { multilingualContent: "Title of my component" },
+} satisfies Dictionary;
+
+export default helloWorldContent;
+```
+
+```tsx fileName="hello-world.es.content.ts" contentDeclarationFormat="typescript"
+import { t, Locales, type Dictionary } from "intlayer";
+
+const helloWorldContent = {
+  key: "hello-world",
+  locale: Locales.SPANISH, // Importante
+  content: { multilingualContent: "Título de mi componente" },
+} satisfies Dictionary;
+
+export default helloWorldContent;
+```
+
+```js fileName="hello-world.en.content.mjs" contentDeclarationFormat="esm"
+import { t, Locales } from "intlayer";
+
+/** @type {import('intlayer').Dictionary} */
+const helloWorldContent = {
+  key: "hello-world",
+  locale: Locales.ENGLISH, // Importante
+  content: { multilingualContent: "Título de mi componente" },
+};
+
+export default helloWorldContent;
+```
+
+```tsx fileName="hello-world.es.content.mjs" contentDeclarationFormat="esm"
+import { t, Locales } from "intlayer";
+
+/** @type {import('intlayer').Dictionary} */
+const helloWorldContent = {
+  key: "hello-world",
+  locale: Locales.SPANISH, // Importante
+  content: { multilingualContent: "Título de mi componente" },
+};
+
+export default helloWorldContent;
+```
+
+```js fileName="hello-world.en.content.cjs" contentDeclarationFormat="commonjs"
+const { t, Locales } = require("intlayer");
+
+/** @type {import('intlayer').Dictionary} */
+const helloWorldContent = {
+  key: "hello-world",
+  locale: Locales.ENGLISH, // Importante
+  content: {
+    multilingualContent: "Título de mi componente",
+  },
+};
+
+module.exports = helloWorldContent;
+```
+
+```tsx fileName="hello-world.es.content.cjs" contentDeclarationFormat="commonjs"
+const { t, Locales } = require("intlayer");
+
+/** @type {import('intlayer').Dictionary} */
+const helloWorldContent = {
+  key: "hello-world",
+  locale: Locales.SPANISH, // Importante
+  content: {
+    multilingualContent: "Título de mi componente",
+  },
+};
+
+module.exports = helloWorldContent;
+```
+
+```json5 fileName="hello-world.en.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "hello-world",
+  "locale": "en", // Importante
+  "content": {
+    "multilingualContent": "Título de mi componente",
+  },
+}
+```
+
+```json5 fileName="hello-world.es.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "hello-world",
+  "locale": "es", // Importante
+  "content": {
+    "multilingualContent": "Título de mi componente",
+  },
+}
+```
+
+> Importante: Asegúrate de que el campo locale esté definido. Indica a Intlayer qué idioma representa el archivo.
+
+> Nota: En ambos casos, el archivo de declaración de contenido debe seguir el patrón de nombres `*.content.{ts,tsx,js,jsx,mjs,cjs,json}` para ser reconocido por Intlayer. El sufijo `.[locale]` es opcional y se usa solo como convención de nombres.
+
+## Mezclando formatos
+
+Puedes combinar ambos enfoques de declaración para la misma clave de contenido. Por ejemplo:
+
+- Declara tu contenido base de forma estática en un archivo como index.content.ts.
+- Añade o sobrescribe traducciones específicas en archivos separados como index.fr.content.ts o index.content.json.
+
+Esta configuración es especialmente útil cuando:
+
+- Quieres definir la estructura inicial del contenido en código.
+- Planeas enriquecer o completar las traducciones más adelante usando el CMS o herramientas automatizadas.
+
+```bash codeFormat="typescript"
+.
+└── Components
+    └── MyComponent
+        ├── index.content.ts
+        ├── index.content.json
+        └── index.ts
+```
+
+### Ejemplo
+
+Aquí un archivo de declaración de contenido multilingüe:
+
+```tsx fileName="Components/MyComponent/index.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+const helloWorldContent = {
+  key: "hello-world",
+  locale: Locales.ENGLISH,
+  content: {
+    multilingualContent: "Título de mi componente",
+    projectName: "Mi proyecto",
+  },
+} satisfies Dictionary;
+
+export default helloWorldContent;
+```
+
+```json fileName="Components/MyComponent/index.content.json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "hello-world",
+  "content": {
+    "multilingualContent": {
+      "nodeType": "translation",
+      "translation": {
+        "fr": "Titre de mon composant",
+        "es": "Título de mi componente"
+      }
+    }
+  }
+}
+```
+
+Intlayer combina automáticamente archivos multilingües y por idioma.
+
+```tsx fileName="Components/MyComponent/index.ts"
+import { getIntlayer, Locales } from "intlayer";
+
+const intlayer = getIntlayer("hello-world"); // La configuración regional predeterminada es INGLÉS, por lo que devolverá el contenido en INGLÉS
+
+console.log(JSON.stringify(intlayer, null, 2));
+// Resultado:
+// {
+//  "multilingualContent": "Título de mi componente",
+//  "projectName": "Mi proyecto"
+// }
+
+const intlayer = getIntlayer("hello-world", Locales.SPANISH);
+
+console.log(JSON.stringify(intlayer, null, 2));
+// Resultado:
+// {
+//  "multilingualContent": "Título de mi componente",
+//  "projectName": "Mi proyecto"
+// }
+
+const intlayer = getIntlayer("hello-world", Locales.FRENCH);
+
+console.log(JSON.stringify(intlayer, null, 2));
+// Resultado:
+// {
+//  "multilingualContent": "Titre de mon composant",
+//  "projectName": "Mi proyecto"
+// }
+```
+
+### Generación Automática de Traducciones
+
+Utilice el [intlayer CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_cli.md) para completar automáticamente las traducciones faltantes según sus servicios preferidos.
+
+## Historial del documento
+
+- 5.5.10 - 2025-06-29: Historial inicial