Nueva versión Intlayer v6 - ¿Qué hay de nuevo?

¡Bienvenido a Intlayer v6! Esta versión se centra en el rendimiento, la experiencia del desarrollador y la fiabilidad. A continuación, los aspectos más destacados, con notas de migración y ejemplos para copiar y pegar.

Aspectos destacados

• Nuevo comando: npx intlayer content test para detectar traducciones faltantes
• Nueva opción global autoFill para autogenerar traducciones faltantes
• El comando Fill por defecto omite las traducciones existentes: npx intlayer fill
• Extensión de VS Code: nueva Barra de Actividad de Intlayer (Búsqueda y Diccionarios), acciones en la barra de herramientas/contexto, auto-revelado, comandos Fill/Test
• Construcciones 10× más rápidas gracias a la paralelización de promesas
• Caché remota de diccionarios para evitar recargas al iniciar la aplicación
• Registro mejorado: configura log.mode: 'verbose' para inspeccionar el comportamiento
• Validación más estricta para evitar fallos en la aplicación por problemas en los diccionarios
• Actualizaciones en vivo con CMS usando build.importMode = 'live' y pnpm intlayer live
• Correcciones: integración con Vue.js, adaptador Lynx, Editor Visual en Windows

Nuevo: Prueba de traducciones faltantes

Audita rápidamente tu proyecto para encontrar qué claves/idiomas faltan.

npx intlayer content test

Salida:

pnpm intlayer content testTraducciones faltantes: - blog-data       - Japonés (ja), Coreano (ko), Chino (zh), Alemán (de), Italiano (it) - src/components/BlogPage/blogData.content.ts - demo-page       - Francés (fr), Italiano (it)                                         - src/components/DemoPage/demo.content.ts - locale-switcher - Italiano (it), Portugués (pt)                                       - src/components/LocaleSwitcher/localeSwitcher.content.tsLocales: Inglés (en), Ruso (ru), Japonés (ja), Francés (fr), Coreano (ko), Chino (zh), Español (es), Alemán (de), Árabe (ar), Italiano (it), Inglés Británico (en-GB), Portugués (pt), Hindi (hi)Locales requeridas: Inglés (en)Locales faltantes: Japonés (ja), Coreano (ko), Chino (zh), Alemán (de), Italiano (it), Francés (fr), Portugués (pt)Locales requeridas faltantes: -Total de locales faltantes: 7Total de locales requeridas faltantes: 0

Consulta más opciones en la documentación de la CLI: Referencia CLI → "Test missing translations". Así como la guía de Testing.

Nuevo: autoFill global para completar traducciones faltantes

Ahora puedes habilitar auto‑fill globalmente para que cualquier diccionario con traducciones faltantes se complete automáticamente.

import { type IntlayerConfig, Locales } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,    requiredLocales: [Locales.ENGLISH, Locales.FRENCH],  },  content: {    // Auto-generar traducciones faltantes para todos los diccionarios    autoFill: "./{{fileName}}.content.ts",    //    // autoFill: "/messages/{{locale}}/{{key}}/{{fileName}}.content.json",    //    // autoFill: true, // auto-generar traducciones faltantes para todos los diccionarios como usando "./{{fileName}}.content.json"    //    // autoFill: {    //   en: "./{{fileName}}.en.content.json",    //   fr: "./{{fileName}}.fr.content.json",    //   es: "./{{fileName}}.es.content.json",    // },  },};export default config;

Aún puedes ajustar por diccionario usando el campo autoFill en los archivos de contenido. Consulta la referencia completa en doc/autoFill y doc/dictionary/content_file.

Comando fill: valores predeterminados más seguros

El comando fill ahora, por defecto, solo rellena las traducciones faltantes y omite el contenido existente.

npx intlayer fill

Claves de diccionario afectadas para el procesamiento: access-key-creation-form-schema, doc-search-metadata, doc-search-page  - [access-key-creation-form-schema]      El diccionario no tiene ruta de archivo. Omitiendo.  - [access-key-creation-form-schema]      Procesando declaración de contenido: src/components/Dashboard/ProjectForm/AccessKey/useAccessKeyCreationFormSchema.content.ts  - [access-key-creation-form-schema]      No hay locales para rellenar - Omitiendo diccionario  - [doc-search-metadata]                  El diccionario no tiene ruta de archivo. Omitiendo.  - [doc-search-metadata]                  Procesando declaración de contenido: src/app/[locale]/(docs)/doc/search/metadata.content.ts  - [doc-search-metadata]                  No hay locales para rellenar - Omitiendo diccionario  - [doc-search-page]                      El diccionario no tiene ruta de archivo. Omitiendo.  - [doc-search-page]                      Procesando declaración de contenido: src/app/[locale]/(docs)/doc/search/page.content.ts  - [doc-search-page]                     [Ruso (ru)]                   Preparando traducción para el diccionario de Inglés (en) a Ruso (ru)[intlayer]  Se aplicó el formato Prettier a src/app/[locale]/(docs)/doc/search/page.content.ts  - [doc-search-page]                      Declaración de contenido escrita en src/app/[locale]/(docs)/doc/search/page.content.ts

Ejemplos de CI están disponibles en CI/CD.

Extensión actualizada de VS Code

La extensión ahora incluye una pestaña dedicada de Intlayer en la Barra de Actividad y varias mejoras en el flujo de trabajo:

• Barra de Actividad de Intlayer con dos vistas:
  • Vista web de búsqueda (intlayer.searchBar) para búsqueda en vivo en diccionarios/contenidos
  • Árbol de diccionarios (intlayer.dictionaries) que lista entornos, diccionarios y archivos contribuyentes
• Barra de herramientas en la vista de Diccionarios: Construir, Extraer (Pull), Enviar (Push), Rellenar, Actualizar, Probar, Crear archivo de diccionario

• Menús contextuales: Extraer/Enviar en diccionarios; Rellenar en archivos

• Auto-revelación: el archivo actual del editor se resalta en el árbol de Diccionarios cuando es aplicable
• Nuevos comandos disponibles desde la Paleta de Comandos: Rellenar Diccionarios y Probar Diccionarios

Vea los detalles en la documentación de la Extensión Oficial de VS Code.

Rendimiento: 10× más rápido

• Resolución paralela de diccionarios locales y remotos
• Los diccionarios remotos se almacenan en caché para evitar volver a obtenerlos al iniciar la aplicación

npx intlayer build

Salida:

[intlayer]  Preparando Intlayer (v6.0.1)[intlayer]  Diccionarios:[intlayer]  ✓ Contenido local: 163/163[intlayer]  ✓ Contenido remoto: 100/100[intlayer]   - access-key-creation-form             [local: ✔ construido] [distant: ✔ importado][intlayer]   - access-key-creation-form-schema      [local: ✔ construido] [distant: ✔ importado][intlayer]   - access-key-form                      [local: ✔ construido] [distant: ✔ importado][intlayer]   - ai-ab-testing-section                                 [distant: ✔ importado][intlayer]   - application-not-running-view         [local: ✔ construido] [distant: ✔ importado][intlayer]   - application-template-message         [local: ✔ construido] [distant: ✔ obtenido][intlayer]   - aside-navigation                     [local: ✔ construido] [distant: ✔ importado][intlayer]   - ask-reset-password                   [local: ✔ construido] [distant: ✔ importado][intlayer]   - ask-reset-password-schema            [local: ✔ construido] [distant: ✔ importado][intlayer]   - sección-autocompletado               [local: ✔ construido] [distant: ✔ obtenido][intlayer]   - sección-tecnología-disponible        [local: ✔ construido] [distant: ✔ importado][intlayer]   - datos-blog                           [local: ✔ construido][intlayer]   - metadatos-blog                       [local: ✔ construido][intlayer]   - lista-navegación-blog                [local: ✔ construido] [distant: ✔ importado][intlayer]   - página-blog                                             [distant: ✔ obtenido][intlayer]   - metadatos-búsqueda-blog              [local: ✔ construido] [distant: ✔ importado][intlayer]   - página-búsqueda-blog                 [local: ✔ construido] [distant: ✔ importado]...[intlayer]  Contenido cargado  (Total: 8401ms - Local: 4050ms - Remoto: 4222ms)

Mejoras en el registro de eventos (Logging)

El sistema de registro se ha mejorado para proporcionar información más detallada sobre lo que sucede durante las transformaciones en tiempo de compilación y ejecución.

Habilite los registros detallados para comprender mejor lo que sucede durante las transformaciones en tiempo de compilación y ejecución.

export default {  log: {    mode: "verbose", // opciones: "default" | "verbose" | "disabled"  },};

Consulte Configuración para todas las opciones de registro.

Validación más estricta

El procesamiento del diccionario ahora realiza una validación más robusta. Cuando un diccionario no se puede procesar, Intlayer evita que su aplicación se rompa y muestra errores accionables.

Actualizaciones en vivo con CMS (Seguro para producción)

Sirve actualizaciones de contenido en vivo (por ejemplo, actualizaciones editoriales) en producción sin necesidad de reconstruir tu aplicación.

1. Habilita el modo de importación en vivo:

import { type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  build: {    importMode: "live", // "static" | "dynamic" | "live"  },  editor: {    liveSync: true, // habilitar sincronización en vivo del lado del servidor  },};export default config;

2. Ejecuta tu aplicación y el proceso en vivo simultáneamente:

npx intlayer live --process 'vite preview'

Notas:

• Solo los diccionarios marcados para usar el modo en vivo serán obtenidos en vivo. Los demás están optimizados para rendimiento.
• Se recurre a la importación dinámica si la API en vivo no está disponible.

Consulta CMS y sincronización en vivo y Configuración para obtener una guía completa.

Notas de migración

• Eliminado: dictionaryOutput (anteriormente i18next o next-intl). Esto volverá como adaptadores enchufables en versiones futuras. Elimina este campo de tu configuración.
• Eliminación relacionada: i18nextResourcesDir (consulta el registro de cambios en doc/configuration).
• Prefiere la nueva opción global content.autoFill para generar traducciones faltantes a gran escala.
• Usa npx intlayer content test para controlar los PRs con traducciones faltantes.
• Para diagnósticos detallados, configura log.mode = 'verbose'.

Correcciones

• Estabilidad en la integración con Vue.js
• Mejoras en el adaptador Lynx
• Editor visual en Windows

Enlaces útiles

• Referencia CLI
• Auto‑relleno
• Configuración
• Referencia de archivo de contenido
• Extensión oficial para VS Code
• CMS y sincronización en vivo