Anulaciones manuales

Anula las traducciones generadas por IA para texto específico usando el atributo data-lingo-override.

Uso básico

<h1 data-lingo-override={{ es: "Lingo.dev", de: "Lingo.dev" }}>
  Lingo.dev
</h1>

El compilador usa tus traducciones especificadas en lugar de generarlas con IA.

Sintaxis

El atributo data-lingo-override acepta un objeto con códigos de idioma como claves:

data-lingo-override={{
  [locale]: "translation",
  ...
}}

Los códigos de idioma deben coincidir con tus targetLocales configurados. El atributo se elimina del HTML final.

Casos de uso

Nombres de marca

Preserva los nombres de marca en todos los idiomas:

<h1 data-lingo-override={{ es: "Lingo.dev", de: "Lingo.dev", fr: "Lingo.dev" }}>
  Lingo.dev
</h1>

Términos técnicos

Asegura terminología técnica consistente:

<p data-lingo-override={{ es: "API REST", de: "REST-API", ja: "REST API" }}>
  REST API
</p>

Usa traducciones certificadas para contenido legal:

<p data-lingo-override={{
  es: "Todos los derechos reservados. Consulte nuestros términos legales.",
  de: "Alle Rechte vorbehalten. Siehe unsere rechtlichen Bedingungen."
}}>
  All rights reserved. See our legal terms.
</p>

Textos de marketing

Ajusta los mensajes de marketing:

<h2 data-lingo-override={{
  es: "Traduce tu app en minutos",
  de: "Übersetze deine App in Minuten",
  fr: "Traduisez votre app en quelques minutes"
}}>
  Translate your app in minutes
</h2>

Anulaciones parciales

Anula solo idiomas específicos: otros idiomas usan traducciones de IA:

<p data-lingo-override={{ de: "Professionelle Übersetzung" }}>
  Professional translation
</p>

El español, francés y otros idiomas usan traducciones de IA. Solo el alemán usa tu anulación.

Texto enriquecido e interpolaciones

El compilador maneja texto enriquecido con elementos anidados:

<p data-lingo-override={{
  es: "Bienvenido <strong0>{name}</strong0>",
  de: "Willkommen <strong0>{name}</strong0>"
}}>
  Welcome <strong>{name}</strong>
</p>

Sintaxis de marcadores de posición:

  • <tagname0>...</tagname0> para la primera instancia de una etiqueta
  • <tagname1>...</tagname1> para la segunda instancia
  • {variableName} para interpolaciones

El compilador mapea automáticamente <strong0> de vuelta a <strong> en la salida.

Múltiples elementos anidados

<div data-lingo-override={{
  es: "Tu pedido: <span0>{count}</span0> artículos por <em0>${price}</em0>",
  de: "Deine Bestellung: <span0>{count}</span0> Artikel für <em0>${price}</em0>"
}}>
  Your order: <span>{count}</span> items for <em>${price}</em>
</div>

Ejemplos complejos

Componentes anidados

<section>
  <h1 data-lingo-override={{ es: "Características", de: "Funktionen" }}>
    Features
  </h1>
  <p data-lingo-override={{
    es: "Traduce automáticamente tus componentes React sin cambios de código",
    de: "Übersetze deine React-Komponenten automatisch ohne Code-Änderungen"
  }}>
    Automatically translate your React components without code changes
  </p>
</section>

Atributos

Funciona también con atributos de cadena:

<img
  src="/logo.png"
  alt="Company Logo"
  data-lingo-override={{
    es: "Logo de la Empresa",
    de: "Firmenlogo"
  }}
/>

La anulación se aplica al atributo alt.

Códigos de región de idioma

Admite códigos de región de idioma (p. ej., en-US, en-GB):

<p data-lingo-override={{
  "en-US": "color",
  "en-GB": "colour",
  "es-ES": "color",
  "es-MX": "color"
}}>
  color
</p>

Usa comillas para códigos de idioma con guiones.

Compatibilidad con TypeScript

El atributo está completamente tipado al usar TypeScript:

interface OverrideProps {
  "data-lingo-override"?: Record<string, string>;
}

TypeScript validará que los códigos de idioma coincidan con tu targetLocales configurado.

Mejores prácticas

Usa con moderación: deja que la IA maneje la mayoría de las traducciones. Anula solo cuando sea necesario:

  • Nombres de marca que no deben traducirse
  • Términos técnicos que requieren traducciones específicas
  • Texto legal que requiere certificación
  • Textos de marketing que necesitan revisión humana

Mantén la coherencia: usa anulaciones para los mismos términos en toda tu aplicación:

// Good - consistent brand name
<h1 data-lingo-override={{ es: "Lingo.dev", de: "Lingo.dev" }}>Lingo.dev</h1>
<p>Welcome to <span data-lingo-override={{ es: "Lingo.dev", de: "Lingo.dev" }}>Lingo.dev</span></p>

// Bad - inconsistent
<h1 data-lingo-override={{ es: "Lingo.dev" }}>Lingo.dev</h1>
<p>Welcome to Lingo.dev</p> // Missing override

Control de versiones: las cadenas anuladas están en tu código fuente, lo que facilita su revisión y control de versiones.

Preguntas frecuentes

¿Funciona esto con componentes de cliente? Sí. Las anulaciones funcionan tanto con componentes de servidor como de cliente.

¿Puedo anular atributos como aria-label? Sí. La anulación se aplica al texto traducible, ya sea contenido del elemento o un atributo.

¿Qué pasa si solo anulo un idioma? Otros idiomas usan traducciones de IA. Las anulaciones son por idioma: no es necesario especificar todos los idiomas.

¿Puedo usar variables en las anulaciones? Sí. Usa la sintaxis {variableName} para interpolaciones. El compilador conserva los marcadores de posición de variables.

¿Las anulaciones aumentan el tamaño del bundle? Ligeramente. Cada anulación añade unos pocos bytes al bundle. El impacto es insignificante para un uso razonable.

¿Puedo anular solo en desarrollo? No. Las anulaciones son código fuente: se aplican en todos los entornos. Usa el widget de desarrollo para pruebas temporales.

Próximos pasos