Alpha
El Compiler de Lingo.dev está en alpha. Es inestable, no se recomienda para entornos de producción y las API pueden cambiar entre versiones.
El Compiler de Lingo.dev incluye herramientas de desarrollo que te permiten iterar rápidamente sobre interfaces multilingües sin depender de API externas. Te ayudan a comprobar que todo el texto sea traducible, poner a prueba 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 de origen con marcadores visuales. No necesitas ninguna API key, no se realiza ninguna llamada de red y los resultados aparecen de inmediato.
Actívalo en la configuración de tu Compiler:
{
dev: {
usePseudotranslator: true,
},
}Qué genera#
| Texto de origen | 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 texto en inglés sin procesar en la interfaz mientras el pseudotraductor está activado, significa que ese texto no está siendo procesado por el Compiler.
Casos de uso#
Identifica cadenas sin traducir
Ejecuta tu aplicación con el pseudotraductor activado. Cualquier texto que aparezca sin los marcadores [!!! ... !!!] no está siendo detectado por el Compiler. Esto ocurre cuando el texto se guarda en variables fuera de JSX o cuando un componente está fuera del directorio sourceRoot.
Pon a prueba el diseño con texto más largo
Las pseudotraducciones son más largas que el texto de origen (debido a los caracteres de los marcadores). Esto simula idiomas como el alemán o el francés, que normalmente generan textos entre un 20 % y un 30 % más largos que el inglés, lo que permite detectar pronto problemas de desbordamiento en el diseño.
Comprueba 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, puede que el Compiler no lo esté conservando correctamente.
El pseudotraductor sigue la misma canalización de traducción que los proveedores reales: procesa los mismos pasos de análisis del AST y de inyección de código. La única diferencia está en la fase de generación de la traducción, donde los marcadores sustituyen a 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 la canalización de compilación de desarrollo. Cuando detecta una cadena nueva o modificada, el Compiler se la envía al servidor, que la redirige 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 | Por defecto | Descripción |
|---|---|---|
translationServerStartPort | 60000 | Número de puerto inicial. El servidor prueba los puertos de forma secuencial (60000, 60001, ..., 60099) hasta encontrar uno disponible. |
translationServerUrl | detectado automáticamente | Sustituye por completo la URL del servidor. Útil para conectarte a un servidor remoto de traducción o a un proxy personalizado. |
Si todos los puertos del rango 60000-60099 están ocupados, el servidor no podrá iniciarse. Consulta Troubleshooting para ver cómo resolver conflictos de puertos.
Widget de desarrollo (próximamente)#
Un editor de traducciones en el navegador que te permite verlas y editarlas en tiempo real mientras navegas por tu aplicación. El widget se superpone a tu interfaz y muestra los detalles de traducción de cada elemento de texto.
Funciones previstas:
- Haz clic en cualquier elemento de texto para ver su texto de origen, sus traducciones y sus metadatos
- Edita traducciones directamente en el navegador
- Los cambios se guardan en
.lingo/metadata.jsonal instante - Alterna entre idiomas sin recargar
Estado
El widget de desarrollo está en desarrollo y todavía no está disponible. Sigue el changelog para enterarte de las novedades de lanzamiento.
Configuración de desarrollo recomendada#
Para disfrutar de la experiencia de desarrollo más ágil, 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,
},
}A partir de ahí, el Compiler generará traducciones reales para las cadenas nuevas o modificadas usando el proveedor de traducción que hayas configurado.
