Alpha
Lingo.dev Compiler está en 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 de React. Detecta texto traducible en tu JSX, genera traducciones impulsadas por 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 separados que cargar en tiempo de ejecución.
Míralo en acción: demo en vivo 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 por idioma optimizados.
En qué se diferencia de las librerías tradicionales de i18n#
| Librerías tradicionales de i18n | Lingo.dev Compiler | |
|---|---|---|
| Gestión de traducciones | Manual: tú creas y mantienes los archivos de claves | Automática: el compilador 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 separados que se cargan en tiempo de ejecución | Integradas en bundles por idioma durante la compilación |
| Origen de las traducciones | Manual o con 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 separado: las traducciones forman parte del bundle |
El pipeline de compilación#
Análisis de AST
El compilador analiza tu código de React y lo convierte en un árbol de sintaxis abstracta con Babel. Identifica 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 compilador conserva el contexto del componente, la estructura de texto enriquecido (<strong>, <em> anidados) y los placeholders de interpolación. Los metadatos se almacenan en .lingo/metadata.json.
Generación de traducciones
En desarrollo, el pseudotraductor genera al instante traducciones simuladas (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 compilador usa hashing de contenido para omitir las que no cambiaron.
Inyección de código
Las búsquedas de traducción se inyectan en tu JSX. El compilador agrega llamadas ligeras de búsqueda basadas en hash contra el diccionario integrado para cada idioma. Tu código fuente nunca se modifica.
Optimización de bundles
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) | Wrapper de configuración de withLingo(): 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 en JSX se traduce, a menos que actives el modo de directivas
'use i18n' - Sin cargar diccionarios: traducciones integradas en bundles por idioma, sin archivos separados 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
