Alfa
El Compiler de Lingo.dev está en alfa. Es inestable, no se recomienda para uso en producción y las API pueden cambiar entre versiones.
El atributo data-lingo-override te da un control preciso sobre traducciones específicas. Cuando necesitas una traducción exacta para un nombre de marca, texto legal o un titular de marketing, agrega el atributo a cualquier elemento JSX y el Compiler usará las traducciones que proporciones en lugar de generarlas con IA.
Uso básico#
Pasa un objeto que asigne códigos de idioma a sus traducciones:
<h1 data-lingo-override={{ es: "Bienvenido", de: "Willkommen", fr: "Bienvenue" }}>
Welcome
</h1>El Compiler usa el valor de anulación para cada idioma especificado. En los idiomas que no aparezcan en el objeto de anulación, el Compiler genera las traducciones de forma normal.
Cómo funcionan las anulaciones#
El Compiler encuentra un elemento JSX con data-lingo-override
Durante la fase de análisis del AST, el Compiler detecta el atributo data-lingo-override en el elemento.
Se extraen los valores de anulación
La asignación de idioma a traducción se lee del valor del atributo.
Las anulaciones tienen prioridad
Para cada idioma presente en el objeto de anulación, el Compiler usa la traducción proporcionada. La traducción con IA se omite para esos idiomas. Los idiomas que no estén en la anulación se traducen normalmente.
Casos de uso#
| Caso de uso | Por qué usar una anulación | Ejemplo |
|---|---|---|
| Nombres de marca | La IA puede localizar nombres que deberían mantenerse consistentes en todos los idiomas | data-lingo-override={{ es: "Lingo.dev", de: "Lingo.dev" }} |
| Copy de marketing | Redacción específica creada por un copywriter | data-lingo-override={{ es: "Tu motor de localizacion" }} |
| Texto legal | Los requisitos regulatorios exigen una redacción exacta | data-lingo-override={{ de: "Datenschutzerklarung" }} |
| Modismos y juegos de palabras | Juegos de palabras que requieren creatividad humana | data-lingo-override={{ fr: "C'est la vie" }} |
| UI con límites estrictos de caracteres | Las traducciones con IA pueden exceder el espacio disponible | data-lingo-override={{ ja: "OK" }} |
Ejemplos#
Texto de párrafo#
<p data-lingo-override={{ es: "Crea un motor de localizacion en Lingo.dev" }}>
Create a localization engine on Lingo.dev
</p>Atributos#
Las anulaciones se aplican al contenido de texto del elemento. En el caso de atributos traducibles como placeholder, alt o aria-label, el Compiler los gestiona por separado mediante su flujo estándar de traducción de atributos.
Anulaciones parciales#
No necesitas proporcionar anulaciones para cada idioma de destino. Indica solo los idiomas que necesitan control manual:
<h2 data-lingo-override={{ ja: "はじめに" }}>
Getting Started
</h2>En este ejemplo, el japonés usa la anulación, mientras que todos los demás idiomas de destino reciben traducciones generadas por IA.
Cuándo usar anulaciones vs. otros enfoques#
| Enfoque | Cuándo usarlo |
|---|---|
data-lingo-override | Elementos específicos en los que conoces la traducción exacta. |
| Glosario (Lingo.dev Engine) | Términos que deben traducirse de forma consistente en toda la app. |
| voz de marca (Lingo.dev Engine) | Preferencias de tono y estilo que se aplican a todas las traducciones. |
| Prompts personalizados | Instrucciones generales de traducción para todo el contenido. |
Las anulaciones son la opción más granular: se aplican a un solo elemento. Para mantener la consistencia en todo el proyecto, usa un glosario o la voz de marca a través del motor de localización de Lingo.dev.
