@intlayer/docs 8.0.4 → 8.0.5

package/docs/es/intlayer_with_analog.md

@@ -0,0 +1,369 @@
+---
+createdAt: 2025-04-18
+updatedAt: 2025-12-30
+title: Analog i18n - Cómo traducir tu aplicación Analog – guía 2026
+description: Descubre cómo hacer que tu aplicación Analog sea multilingüe. Sigue la documentación para internacionalizarla (i18n) y traducirla.
+keywords:
+  - Internacionalización
+  - Documentación
+  - Intlayer
+  - Analog
+  - Angular
+  - JavaScript
+slugs:
+  - doc
+  - entorno
+  - analog
+applicationTemplate: https://github.com/aymericzip/intlayer/tree/main/examples/analog-app-template
+history:
+  - version: 8.0.4
+    date: 2026-01-26
+    changes: Inicio del historial
+---
+
+# Traduce tu aplicación Analog (Angular) con Intlayer | Internacionalización (i18n)
+
+## Tabla de contenidos
+
+<TOC/>
+
+## ¿Qué es Intlayer?
+
+**Intlayer** es una biblioteca de internacionalización (i18n) innovadora y de código abierto diseñada para simplificar el soporte multilingüe en aplicaciones web modernas.
+
+Con Intlayer, puedes:
+
+- **Gestionar fácilmente las traducciones** utilizando diccionarios declarativos a nivel de componente.
+- **Localizar dinámicamente metadatos**, rutas y contenido.
+- **Garantizar el soporte de TypeScript** con tipos autogenerados, mejorando el autocompletado y la detección de errores.
+- **Beneficiarte de funciones avanzadas**, como la detección y el cambio dinámico de idioma.
+
+---
+
+## Guía paso a paso para configurar Intlayer en una aplicación Analog
+
+<Tabs defaultTab="code">
+  <Tab label="Código" value="code">
+
+<iframe
+  src="https://stackblitz.com/github/aymericzip/intlayer/tree/main/examples/vite-analog-app?embed=1&ctl=1&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 - Cómo internacionalizar tu aplicación usando Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+  </Tab>
+</Tabs>
+
+Ver [Plantilla de Aplicación](https://github.com/aymericzip/intlayer/tree/main/examples/analog-app-template) en GitHub.
+
+### Paso 1: Instalar dependencias
+
+Instala los paquetes necesarios usando npm:
+
+```bash packageManager="npm"
+npm install intlayer angular-intlayer vite-intlayer
+npx intlayer init
+```
+
+```bash packageManager="pnpm"
+pnpm add intlayer angular-intlayer vite-intlayer
+pnpm intlayer init
+```
+
+```bash packageManager="yarn"
+yarn add intlayer angular-intlayer vite-intlayer
+yarn intlayer init
+```
+
+```bash packageManager="bun"
+bun add intlayer angular-intlayer vite-intlayer
+bunx intlayer init
+```
+
+- **intlayer**
+
+  El paquete principal que proporciona herramientas de internacionalización para la gestión de la configuración, traducción, [declaración de contenido](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/content_file.md), transpilación y [comandos de CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/cli/index.md).
+
+- **angular-intlayer**
+  El paquete que integra Intlayer con la aplicación Angular. Proporciona proveedores de contexto y hooks para la internacionalización de Angular.
+
+- **vite-intlayer**
+  El paquete que integra Intlayer con Vite. Proporciona un complemento para manejar archivos de declaración de contenido y establece alias para un rendimiento óptimo.
+
+### Paso 2: Configuración de tu proyecto
+
+Crea un archivo de configuración para configurar los idiomas de tu aplicación:
+
+```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH,
+      // Tus otros idiomas
+    ],
+    defaultLocale: Locales.ENGLISH,
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.mjs" codeFormat="esm"
+import { Locales } from "intlayer";
+
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  internationalization: {
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH,
+      // Tus otros idiomas
+    ],
+    defaultLocale: Locales.ENGLISH,
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
+const { Locales } = require("intlayer");
+
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  internationalization: {
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH,
+      // Tus otros idiomas
+    ],
+    defaultLocale: Locales.ENGLISH,
+  },
+};
+
+module.exports = config;
+```
+
+> A través de este archivo de configuración, puedes configurar URLs localizadas, redirección de middleware, nombres de cookies, la ubicación y extensión de tus declaraciones de contenido, desactivar los registros de Intlayer en la consola y más. Para obtener una lista completa de los parámetros disponibles, consulta la [documentación de configuración](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/configuration.md).
+
+### Paso 3: Integrar Intlayer en tu configuración de Vite
+
+Para integrar Intlayer con Analog, necesitas usar el complemento `vite-intlayer`.
+
+Modifica tu archivo `vite.config.ts`:
+
+```typescript fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import { intlayer } from "vite-intlayer";
+import analog from "@analogjs/platform";
+
+// https://vitejs.dev/config/
+export default defineConfig(() => ({
+  plugins: [
+    analog(),
+    intlayer(), // Añadir el complemento Intlayer
+  ],
+}));
+```
+
+> El complemento `intlayer()` configura Vite con Intlayer. Maneja los archivos de declaración de contenido y establece alias para un rendimiento óptimo.
+
+### Paso 4: Declarar tu contenido
+
+Crea y gestiona tus declaraciones de contenido para almacenar traducciones:
+
+```tsx fileName="src/app/app.content.ts" contentDeclarationFormat="typescript"
+import { t, type Dictionary } from "intlayer";
+
+const appContent = {
+  key: "app",
+  content: {
+    title: t({
+      en: "Hello",
+      fr: "Bonjour",
+      es: "Hola",
+    }),
+    congratulations: t({
+      en: "Congratulations! Your app is running. 🎉",
+      fr: "Félicitations! Votre application est en cours d'exécution. 🎉",
+      es: "¡Felicidades! Tu aplicación está en ejecución. 🎉",
+    }),
+  },
+} satisfies Dictionary;
+
+export default appContent;
+```
+
+> Tus declaraciones de contenido se pueden definir en cualquier lugar de tu aplicación, siempre que se incluyan en el directorio `contentDir` (por defecto, `./src`). Y coincidan con la extensión del archivo de declaración de contenido (por defecto, `.content.{json,ts,tsx,js,jsx,mjs,cjs}`).
+
+> Para más detalles, consulta la [documentación de declaración de contenido](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/content_file.md).
+
+### Paso 5: Utilizar Intlayer en tu código
+
+Para utilizar las funciones de internacionalización de Intlayer en toda tu aplicación Analog, debes proporcionar Intlayer en la configuración de tu aplicación.
+
+```typescript fileName="src/app/app.config.ts"
+import { ApplicationConfig } from "@angular/core";
+import { provideIntlayer } from "angular-intlayer";
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideIntlayer(), // Añade el proveedor de Intlayer aquí
+  ],
+};
+```
+
+Luego, puedes usar la función `useIntlayer` dentro de cualquier componente.
+
+```typescript fileName="src/app/pages/index.page.ts"
+import { Component } from "@angular/core";
+import { useIntlayer } from "angular-intlayer";
+
+@Component({
+  selector: "app-home",
+  standalone: true,
+  template: `
+    <div class="content">
+      <h1>{{ content().title }}</h1>
+      <p>{{ content().congratulations }}</p>
+    </div>
+  `,
+})
+export default class HomeComponent {
+  content = useIntlayer("app");
+}
+```
+
+El contenido de Intlayer se devuelve como un `Signal`, por lo que accedes a los valores llamando al signal: `content().title`.
+
+### (Opcional) Paso 6: Cambiar el idioma de tu contenido
+
+Para cambiar el idioma de tu contenido, puedes usar la función `setLocale` proporcionada por la función `useLocale`. Esto te permite establecer la locale de la aplicación y actualizar el contenido en consecuencia.
+
+Crea un componente para cambiar entre idiomas:
+
+```typescript fileName="src/app/locale-switcher.component.ts"
+import { Component } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { useLocale } from "angular-intlayer";
+
+@Component({
+  selector: "app-locale-switcher",
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="locale-switcher">
+      <select
+        [value]="locale()"
+        (change)="setLocale($any($event.target).value)"
+      >
+        @for (loc of availableLocales; track loc) {
+          <option [value]="loc">{{ loc }}</option>
+        }
+      </select>
+    </div>
+  `,
+  styles: [
+    `
+      .locale-switcher {
+        margin: 1rem;
+        padding: 0.5rem;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        width: fit-content;
+      }
+    `,
+  ],
+})
+export class LocaleSwitcherComponent {
+  localeCtx = useLocale();
+
+  locale = this.localeCtx.locale;
+  availableLocales = this.localeCtx.availableLocales;
+  setLocale = this.localeCtx.setLocale;
+}
+```
+
+Luego, usa este componente en tus páginas:
+
+```typescript fileName="src/app/pages/index.page.ts"
+import { Component } from "@angular/core";
+import { useIntlayer } from "angular-intlayer";
+import { LocaleSwitcherComponent } from "../locale-switcher.component";
+
+@Component({
+  selector: "app-home",
+  standalone: true,
+  imports: [LocaleSwitcherComponent],
+  template: `
+    <app-locale-switcher></app-locale-switcher>
+    <div class="content">
+      <h1>{{ content().title }}</h1>
+      <p>{{ content().congratulations }}</p>
+    </div>
+  `,
+})
+export default class HomeComponent {
+  content = useIntlayer("app");
+}
+```
+
+### Configurar TypeScript
+
+Intlayer utiliza la aumentación de módulos para obtener los beneficios de TypeScript y fortalecer tu base de código.
+
+![Autocompletado](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
+
+![Error de traducción](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
+
+Asegúrate de que tu configuración de TypeScript incluya los tipos autogenerados.
+
+```json5 fileName="tsconfig.json"
+{
+  // ... Tus configuraciones de TypeScript existentes
+  "include": [
+    // ... Tus configuraciones de TypeScript existentes
+    ".intlayer/**/*.ts", // Incluir los tipos autogenerados
+  ],
+}
+```
+
+### Configuración de Git
+
+Se recomienda ignorar los archivos generados por Intlayer. Esto te permite evitar subirlos a tu repositorio de Git.
+
+Para hacer esto, puedes añadir las siguientes instrucciones a tu archivo `.gitignore`:
+
+```plaintext
+# 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 proporciona:
+
+- **Autocompletado** para las claves de traducción.
+- **Detección de errores en tiempo real** para traductions faltantes.
+- **Vistas previas 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 ir más allá, puedes implementar el [editor visual](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_visual_editor.md) o externalizar tu contenido utilizando el [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_CMS.md).

package/docs/es/intlayer_with_angular.md

@@ -166,30 +166,25 @@ Para integrar Intlayer con Angular CLI, necesitas usar un constructor (builder)
 
 Primero, modifica tu `angular.json` para usar el constructor de Webpack personalizado. Actualiza las configuraciones de `build` y `serve`:
 
-```json fileName="angular.json"
+```json5 fileName="angular.json"
 {
   "projects": {
     "nombre-de-tu-app": {
       "architect": {
         "build": {
-          "builder": "@angular-builders/custom-webpack:browser",
+          "builder": "@angular-builders/custom-webpack:browser", // replace "@angular-devkit/build-angular:application",
           "options": {
             "customWebpackConfig": {
-              "path": "./webpack.config.ts"
-            }
-          }
+              "path": "./webpack.config.ts",
+              "mergeStrategies": { "module.rules": "prepend" },
+            },
+            "main": "src/main.ts", // replace "browser": "src/main.ts",
+            // ...
+          },
         },
-        "serve": {
-          "builder": "@angular-builders/custom-webpack:dev-server",
-          "options": {
-            "customWebpackConfig": {
-              "path": "./webpack.config.ts"
-            }
-          }
-        }
-      }
-    }
-  }
+      },
+    },
+  },
 }
 ```
 

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

@@ -33,7 +33,7 @@ El hook `useIntlayer` permite recuperar contenido localizado de un diccionario u
 import { useIntlayer } from "solid-intlayer";
 
 const MyComponent = () => {
-  const content = useIntlayer("my_dictionary_key");
+  const content = useIntlayer("my-dictionary-key");
 
   return (
     <div>

package/docs/fr/agent_skills.md

@@ -0,0 +1,53 @@
+---
+createdAt: 2026-02-09
+updatedAt: 2026-02-09
+title: Compétences de l'agent
+description: Apprenez à utiliser les compétences de l'agent Intlayer pour améliorer la compréhension de votre projet par votre agent IA.
+keywords:
+  - Intlayer
+  - Compétences de l'agent
+  - Agent IA
+  - Internationalisation
+  - Documentation
+slugs:
+  - doc
+  - agent_skills
+history:
+  - version: 8.0.4
+    date: 2026-02-09
+    changes: Initialiser l'historique
+---
+
+## La commande `intlayer init skills`
+
+La commande `intlayer init skills` est le moyen le plus simple de configurer les compétences de l'agent dans votre projet. Elle détecte votre environnement et installe les fichiers de configuration nécessaires pour vos plateformes préférées.
+
+```bash
+npx intlayer init skills
+```
+
+Lorsque vous exécutez cette commande, elle :
+
+1.  Détecte le framework que vous utilisez (ex: Next.js, React, Vite).
+2.  Vous demande pour quelles plateformes vous souhaitez installer des compétences (Cursor, VS Code, OpenCode, Claude Code, etc.).
+3.  Génère les fichiers de configuration requis (tels que `.cursor/mcp.json`, `.vscode/mcp.json` ou `.intlayer/skills/*.md`).
+
+## Plateformes supportées
+
+Intlayer supporte l'intégration avec les plateformes suivantes :
+
+### 1. Cursor
+
+Cursor supporte les serveurs MCP (Model Context Protocol). L'exécution de `intlayer init skills` créera un fichier `.cursor/mcp.json` qui permet à Cursor de communiquer avec le serveur MCP d'Intlayer.
+
+### 2. VS Code
+
+Pour les utilisateurs de VS Code, en particulier ceux utilisant GitHub Copilot ou d'autres extensions compatibles MCP, la commande crée une configuration `.vscode/mcp.json`.
+
+### 3. OpenCode
+
+OpenCode est un agent CLI interactif conçu pour les tâches d'ingénierie logicielle. Intlayer fournit des compétences spécifiques pour aider OpenCode à vous assister dans vos tâches d'internationalisation.
+
+### 4. Claude Code
+
+Claude Code peut être configuré pour utiliser les compétences d'Intlayer en ajoutant les configurations générées à ses paramètres de bureau ou CLI.

package/docs/fr/cli/doc-translate.md

@@ -86,6 +86,7 @@ npx intlayer doc translate
 - **`--temperature [temperature]`** : Paramètre de température pour le modèle d'IA.
 - **`--api-key [apiKey]`** : Fournir votre propre clé API pour le service d'IA.
 - **`--application-context [applicationContext]`** : Fournir un contexte supplémentaire pour la traduction par IA.
+- **`--data-serialization [dataSerialization]`** : Le format de sérialisation des données à utiliser pour les fonctionnalités d'IA d'Intlayer. Options : `json` (standard, fiable), `toon` (moins de tokens, moins cohérent).
 - **`--custom-prompt [prompt]`** : Personnalisez le prompt de base utilisé pour la traduction. (Remarque : Pour la plupart des cas d'utilisation, l'option `--custom-instructions` est recommandée car elle offre un meilleur contrôle sur le comportement de la traduction.)
 
   > Exemple : `npx intlayer doc translate --model deepseek-chat --provider deepseek --temperature 0.5 --api-key sk-1234567890 --application-context "Mon application est une boutique de chats"`

package/docs/fr/cli/fill.md

@@ -126,6 +126,7 @@ Affected dictionary keys for processing: app, comp-test, hello-world, lang-switc
 - **`--api-key [apiKey]`** : Fournir votre propre clé API pour le service d’IA.
 - **`--custom-prompt [prompt]`** : Fournir une invite personnalisée pour vos instructions de traduction.
 - **`--application-context [applicationContext]`** : Fournir un contexte supplémentaire pour la traduction par IA.
+- **`--data-serialization [dataSerialization]`** : Le format de sérialisation des données à utiliser pour les fonctionnalités d'IA d'Intlayer. Options : `json` (standard, fiable), `toon` (moins de tokens, moins cohérent).
 
   > Exemple : `npx intlayer fill --model gpt-3.5-turbo --provider openai --temperature 0.5 --api-key sk-1234567890 --application-context "Mon application est une boutique de chats"`
 

package/docs/fr/configuration.md

@@ -14,6 +14,9 @@ slugs:
   - concept
   - configuration
 history:
+  - version: 8.0.5
+    date: 2026-02-06
+    changes: Ajout de `dataSerialization` à la configuration de l'IA
   - version: 8.0.0
     date: 2026-01-22
     changes: Move `importMode` build configuration to `dictionary` configuration.
@@ -901,6 +904,13 @@ Intlayer prend en charge plusieurs fournisseurs d'IA pour une flexibilité et un
   - _Exemple_ : `'https://api.openai.com/v1'`
   - _Note_ : Peut être utilisé pour pointer vers un point de terminaison d'API d'IA local ou personnalisé.
 
+- **dataSerialization**:
+  - _Type_: `'json' | 'toon'`
+  - _Par défaut_: `'json'`
+  - _Description_: Le format de sérialisation des données à utiliser pour les fonctionnalités d'IA d'Intlayer.
+  - _Exemple_: `'toon'`
+  - _Note_: `json`: Standard, fiable ; utilise plus de tokens. `toon`: Moins de tokens, moins cohérent que le JSON.
+
 ### Configuration de la compilation
 
 Paramètres qui contrôlent la manière dont Intlayer optimise et construit l'internationalisation de votre application.