Preguntas frecuentes

Preguntas y respuestas comunes sobre el Compilador de Lingo.dev.

¿Puedo traducir literales de cadena?

El Compilador de Lingo.dev sigue la convención de que todo en JSX es localizable. Los literales de cadena fuera de los componentes JSX no se localizan por diseño.

Comportamiento actual:

// Esto NO será traducido
const message = "Hello world";
const errorText = "Something went wrong";

// Esto SÍ será traducido
function Component() {
  return <h1>Hello world</h1>;
}

Cómo hacer que los literales sean localizables:

Puedes hacer que los literales de cadena sean localizables envolviéndolos en fragmentos JSX:

// Antes: No localizable
const message = "Hello world";

// Después: Localizable usando fragmentos
const message = <>Hello world</>;

// Uso en tu componente
function Component() {
  return <div>{message}</div>;
}

Enfoque alternativo:

// Para mensajes dinámicos
function getLocalizedMessage() {
  return <>Something went wrong</>;
}

// Para texto condicional
const statusText = isError ? <>Error occurred</> : <>Success</>;

Esta convención asegura un comportamiento de localización consistente mientras mantiene límites claros entre contenido localizable y no localizable.

Estamos explorando formas de extender este comportamiento para soportar más casos de uso en el futuro. Únete a nuestro Discord para discutir patrones específicos que te gustaría ver implementados.

¿Qué frameworks son compatibles?

El Compilador de Lingo.dev actualmente soporta estos frameworks de React:

  • Next.js (solo App Router)
  • React Router v6+
  • Remix (última versión)
  • Vite + React

Damos la bienvenida a colaboradores interesados en implementar soporte del compilador para otras plataformas. Únete a nuestro Discord para discutir estrategias de implementación.

¿Puedo añadir más idiomas?

¡Sí! Puedes extender el soporte de idiomas configurando modelos personalizados directamente en tu configuración del compilador:

const compilerConfig = {
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de", "pt", "it"],
  models: {
    "*:pt": "mistral-saba-24b",
    "en:it": "meta-llama/llama-4-maverick-17b-128e-instruct",
    "*:*": "mistral-saba-24b",
  },
};

lingoCompiler.next(compilerConfig)(nextConfig);

Consulta la configuración avanzada para más detalles.

¿Puedo usar prompts personalizados?

¡Sí! Puedes personalizar los prompts de traducción directamente en tu configuración del compilador:

const compilerConfig = {
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  prompt:
    "Eres un traductor profesional especializado en documentación técnica. Traduce del {SOURCE_LOCALE} al {TARGET_LOCALE} manteniendo la precisión técnica.",
};

Para glosarios personalizados, incluye definiciones de terminología en tu prompt. Consulta nuestro prompt predeterminado para conocer las mejores prácticas.

¿Puedo utilizar más proveedores de LLM?

Actualmente, Lingo.dev Compiler se integra con Lingo.dev Engine y múltiples otros proveedores de LLM.

Nos encantaría dar soporte a más proveedores de LLM pronto - habla con nosotros o envíanos una solicitud de extracción!

¿Necesito la clave API de GROQ en CI/CD?

Normalmente no. Si construyes tu aplicación localmente, todas las traducciones se almacenarán en el directorio lingo/. Tu proceso de CI/CD no necesitará llamar al LLM para traducir ninguna cadena de texto.

Alternativamente, puedes añadir la variable GROQ_API_KEY a tu CI/CD y realizar todas las traducciones allí durante la compilación, pero no recomendamos este enfoque para mantener un mayor control sobre las traducciones finales.

¿Puedo editar las traducciones?

¡Sí! Puedes editar manualmente el archivo lingo/dictionary.js. Este exporta un objeto con traducciones para todos los archivos y entradas. Puedes editar el texto para cada localización en la propiedad content. Tus ediciones se conservarán hasta que el texto fuente en los componentes de React sea actualizado.

¿No te gusta editar objetos JavaScript? Pronto lanzaremos un editor para mejorar la experiencia de edición. ¡Háznoslo saber si estás interesado!

¿Cómo puedo retraducir toda mi aplicación, un archivo específico o un idioma?

Para retraducir toda tu aplicación, elimina el archivo dictionary.js del directorio lingo/.

Para retraducir solo archivos específicos, puedes eliminar su clave (nombre de archivo) de dictionary.js.

Si deseas retraducir una localización específica, necesitas eliminar todos los registros para esa localización.

¿Por qué necesito compilar la aplicación localmente?

Las compilaciones locales normalizan tus archivos de traducción lingo/ mediante:

  • Eliminación de claves de traducción no utilizadas
  • Actualización de huellas digitales de contenido
  • Garantía de un formato de archivo consistente
  • Optimización para el despliegue en producción

Ejecuta siempre npm run build antes de confirmar cambios para mantener limpios los archivos de traducción.

¡Faltan traducciones!

Si faltan traducciones:

  1. Compila localmente para normalizar tus archivos lingo/:

    npm run build

  2. Verifica que tu clave API esté correctamente configurada:

    # Verifica que tu archivo .env contiene
GROQ_API_KEY=gsk_...

  3. Confirma los archivos actualizados:

    git add lingo/
git commit -m "Update translations"

  4. Reinicia tu servidor de desarrollo después de los cambios.

¿Puedo configurar un glosario personalizado?

¡Sí! Utiliza prompts personalizados para definir terminología y glosarios directamente en tu configuración del compilador:

const compilerConfig = {
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  prompt:
    "You are a professional translator. Use these terms consistently: 'Dashboard' should be 'Tableau de bord' in French, 'Settings' should be 'Configuración' in Spanish. Translate from {SOURCE_LOCALE} to {TARGET_LOCALE}.",
};

¿Cómo puedo excluir cierto contenido de la traducción?

Utiliza el atributo data-lingo-skip:

<div data-lingo-skip>This content will not be translated</div>

Para omitir condicionalmente según el tipo de contenido:

<code data-lingo-skip>
  // Code blocks are automatically skipped const apiKey = "secret-key";
</code>

¿Puedo sobrescribir traducciones específicas?

¡Sí! Utiliza los atributos data-lingo-override- para sobrescrituras específicas por idioma:

<button data-lingo-override-es="¡Hola!" data-lingo-override-fr="Bonjour!">
  Hello
</button>

Esto es útil para:

  • Nombres de marca que no deben traducirse
  • Terminología específica de cada región
  • Textos de marketing que requieren revisión manual

¿Cómo maneja el compilador la pluralización?

El compilador maneja automáticamente los patrones básicos de pluralización, pero para reglas de pluralización complejas, es posible que necesites estructurar tu JSX de la siguiente manera:

// El compilador manejará esto apropiadamente
<p>{count === 1 ? <>1 elemento</> : <>{count} elementos</>}</p>

¿Qué hay del rendimiento en producción?

Lingo.dev Compiler está optimizado para producción:

  • Cero coste en tiempo de ejecución - las traducciones son precompiladas
  • División de paquetes - solo se carga el idioma activo
  • Tree shaking - las traducciones no utilizadas son eliminadas
  • Compatible con CDN - los archivos de traducción estáticos se almacenan eficientemente en caché

¿Puedo usar esto con TypeScript?

¡Sí! El compilador funciona perfectamente con proyectos TypeScript. Todos los componentes React proporcionados están completamente tipados:

import { LocaleSwitcher } from "lingo.dev/react/client";

// Soporte completo de TypeScript
const locales: string[] = ["en", "es", "fr"];
<LocaleSwitcher locales={locales} />;

¿Cómo puedo reportar errores o solicitar funcionalidades?

Próximos pasos