Alpha
Lingo.dev Compiler está en fase alpha. Es inestable, no se recomienda para producción y las API pueden cambiar entre versiones.
Lingo.dev Compiler es un sistema de traducción gratuito y de código abierto en tiempo de compilación para aplicaciones React. Detecta el texto traducible en tu JSX, genera traducciones con IA con todo el contexto del componente y las integra en bundles por idioma durante el proceso de compilación. Tu código fuente no cambia: no hay archivos manuales de claves de traducción que mantener ni diccionarios independientes que cargar en tiempo de ejecución.
Míralo en acción: demo en directo en X
Antes y después#
// Your code - unchanged
export function Welcome() {
return <h1>Welcome to our app</h1>;
}
// Renders "Bienvenido a nuestra aplicacion" in SpanishNo hace falta cambiar el código. Las traducciones se resuelven en tiempo de compilación, lo que genera bundles optimizados por idioma.
En qué se diferencia de las bibliotecas de i18n tradicionales#
| Bibliotecas de i18n tradicionales | Lingo.dev Compiler | |
|---|---|---|
| Gestión de traducciones | Manual: creas y mantienes los archivos de claves | Automática: el Compiler extrae las cadenas traducibles del JSX |
| Cambios de código necesarios | Envuelve cada cadena en llamadas a t() | Ninguno: escribe JSX normal |
| Cómo se cargan las traducciones | Archivos de diccionario independientes cargados en tiempo de ejecución | Integradas en bundles por idioma durante la compilación |
| Origen de las traducciones | Manual o mediante un TMS externo | Generadas por IA con todo el contexto del componente |
| Carga de diccionarios | Fetch o importación en tiempo de ejecución de archivos de traducción | Sin fetch independiente: las traducciones forman parte del bundle |
El pipeline de compilación#
Análisis del AST
El Compiler analiza tu código React y lo transforma en un árbol de sintaxis abstracta con Babel. Identifica el contenido traducible: nodos de texto, atributos de cadena (alt, aria-label, placeholder) y expresiones de plantilla.
Extracción de contenido
Cada cadena traducible recibe un identificador estable basado en hash. El Compiler conserva el contexto del componente, la estructura de texto enriquecido (anidado <strong>, <em>) y los marcadores de interpolación. Los metadatos se almacenan en .lingo/metadata.json.
Generación de traducciones
En desarrollo, el pseudotraductor genera traducciones falsas al instante, sin llamadas a la API. En CI, el proveedor de LLM configurado genera traducciones reales con todo el contexto del componente: ubicación del archivo, elementos circundantes y semántica de interpolación. Solo se traducen las cadenas nuevas o modificadas: el Compiler usa hashing de contenido para omitir las que no han cambiado.
Inyección de código
Las búsquedas de traducción se inyectan en tu JSX. El Compiler añade llamadas ligeras de búsqueda basadas en hash contra el diccionario integrado para cada idioma. Tu código fuente nunca se modifica.
Optimización del bundle
Se crean bundles por idioma. Solo se incluyen las traducciones que usa cada componente. La eliminación de código muerto y el tree-shaking mantienen los bundles al mínimo.
Frameworks compatibles#
| Framework | Integración |
|---|---|
| Next.js (App Router) | withLingo() wrapper de configuración: compatible con RSC, Webpack y Turbopack |
| Vite + React | lingoCompilerPlugin: plugin de Vite con compatibilidad total con HMR |
Funciones clave#
- Automático por defecto: todo el texto de JSX se traduce, salvo que actives el modo de directivas
'use i18n' - Sin carga de diccionarios: traducciones integradas en bundles por idioma, sin archivos independientes que cargar
- Modos de compilación: pseudotraductor en desarrollo, traducciones reales en CI y solo caché en producción
- Anulaciones manuales: atributo
data-lingo-overridepara un control preciso - Resolvers de idioma personalizados: implementa tu propia detección y persistencia de idioma
- Pluralización automática: compatibilidad con ICU MessageFormat para formas plurales
- Herramientas de desarrollo: pseudotraductor y editor de traducciones en el navegador
