Alfa
El Compiler de Lingo.dev está en fase alfa. Es inestable, no se recomienda para producción y las API pueden cambiar entre versiones.
El Compiler de Lingo.dev incluye herramientas de desarrollo que te permiten iterar rápidamente en interfaces multilingües sin llamar a APIs externas. Estas herramientas te ayudan a verificar que todo el texto sea traducible, probar el diseño con distintas longitudes de texto y depurar problemas de traducción durante el desarrollo.
Pseudotraductor#
El pseudotraductor genera traducciones simuladas al instante envolviendo el texto fuente con marcadores visuales. No necesitas una API key, no se realizan llamadas de red y los resultados aparecen de inmediato.
Actívalo en la configuración del Compiler:
{
dev: {
usePseudotranslator: true,
},
}Qué genera#
| Texto fuente | Pseudotraducción |
|---|---|
Welcome | [!!! Welcome !!!] |
Sign in to your account | [!!! Sign in to your account !!!] |
Items: {count} | [!!! Items: {count} !!!] |
Los marcadores ([!!! ... !!!]) hacen que el texto traducido se distinga visualmente del texto sin traducir. Si ves inglés sin procesar en la interfaz mientras el pseudotraductor está habilitado, ese texto no está siendo procesado por el Compiler.
Casos de uso#
Identifica cadenas sin traducir
Ejecuta tu app con el pseudotraductor habilitado. Cualquier texto que aparezca sin los marcadores [!!! ... !!!] no está siendo detectado por el Compiler. Esto pasa cuando el texto se almacena en variables fuera de JSX o cuando un componente está fuera del directorio sourceRoot.
Prueba el diseño con texto más largo
Las pseudotraducciones son más largas que el texto fuente (por los caracteres de los marcadores). Esto simula idiomas como el alemán o el francés, que normalmente producen texto entre un 20 y un 30% más largo que el inglés, y permite detectar desde temprano problemas de desbordamiento en el diseño.
Verifica la interpolación
Los placeholders como {count} y {name} deben aparecer dentro de los marcadores de pseudotraducción. Si un placeholder aparece fuera de los marcadores o falta, es posible que el Compiler no lo esté preservando correctamente.
El pseudotraductor sigue el mismo flujo de traducción que los proveedores reales: procesa el mismo análisis de AST y los mismos pasos de inyección de código. La única diferencia está en la etapa de generación de la traducción, donde los marcadores reemplazan la llamada al LLM.
Servidor de traducción#
Durante el desarrollo, el Compiler ejecuta un servidor local de traducción que gestiona solicitudes de traducción bajo demanda. El servidor se inicia automáticamente cuando ejecutas npm run dev.
Cómo funciona#
El servidor de traducción escucha en un puerto local y gestiona solicitudes de traducción desde el pipeline de compilación de desarrollo. Cuando detecta una cadena nueva o modificada, el Compiler la envía al servidor, que la dirige al proveedor de traducción configurado (o al pseudotraductor).
Configuración del puerto#
El servidor encuentra automáticamente un puerto disponible dentro de un rango configurable:
{
dev: {
translationServerStartPort: 60000,
},
}| Opción | Predeterminado | Descripción |
|---|---|---|
translationServerStartPort | 60000 | Número de puerto inicial. El servidor prueba los puertos en secuencia (60000, 60001, ..., 60099) hasta encontrar uno disponible. |
translationServerUrl | detectado automáticamente | Reemplaza por completo la URL del servidor. Útil para conectarte a un servidor de traducción remoto o a un proxy personalizado. |
Si todos los puertos en el rango 60000-60099 están ocupados, el servidor no podrá iniciarse. Consulta Solución de problemas para ver cómo resolver conflictos de puertos.
Widget para desarrollo (próximamente)#
Un editor de traducción en el navegador que te permite ver y editar traducciones en tiempo real mientras navegas por tu app. El widget se superpone a tu interfaz y muestra detalles de traducción de cada elemento de texto.
Funciones planificadas:
- Haz clic en cualquier elemento de texto para ver su texto fuente, sus traducciones y sus metadatos
- Edita traducciones directamente en el navegador
- Los cambios se guardan en
.lingo/metadata.jsonal instante - Cambia entre idiomas sin recargar
Estado
El widget para desarrollo está en desarrollo y todavía no está disponible. Sigue el changelog para conocer las novedades de lanzamiento.
Configuración de desarrollo recomendada#
Para obtener la experiencia de desarrollo más rápida, combina el pseudotraductor con la configuración predeterminada del servidor de traducción:
{
dev: {
usePseudotranslator: true,
translationServerStartPort: 60000,
},
}Cuando estés listo para previsualizar traducciones reales, desactiva el pseudotraductor y reinicia el servidor de desarrollo:
{
dev: {
usePseudotranslator: false,
},
}Después, el Compiler genera traducciones reales para cadenas nuevas o modificadas con tu proveedor de traducción configurado.
