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.

Tabla de contenidos

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 test
Traducciones 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.ts
Locales: 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: 7
Total 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.

Aún puedes ajustar por diccionario usando el campo autoFill en archivos de contenido. Intlayer primero considerará la configuración por diccionario y luego recurrirá a la configuración global. Consulta la referencia completa en Auto-fill y Referencia de archivo de contenido.

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

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

Se actualizó el servidor MCP para admitir las nuevas funciones.

• 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 (build time) y ejecución.

Habilite los registros detallados para comprender mejor lo que sucede durante las transformaciones en tiempo de compilación (build time) 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 --with '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.

Proceso paralelo para monitorear archivos en turbopack

Al usar Turbopack en Next.js 14 y superior como tu servidor de desarrollo con el comando next dev --turbopack, los cambios en el diccionario no se detectarán automáticamente de forma predeterminada.

Esta limitación ocurre porque Turbopack no puede ejecutar plugins de webpack en paralelo para monitorear cambios en tus archivos de contenido.

Para solucionar esto, utilizamos el comando intlayer watch, usando la opción --with para ejecutar tanto el servidor de desarrollo como el observador de compilación de Intlayer simultáneamente.

{
  "scripts": {
    "dev": "npx intlayer watch --with 'next dev --turbopack'",
  },
}

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

Notas de migración de v6 a v7

Consulta las notas de migración de v6 a v7 para más información.

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