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.

¿Por qué no se traducen mis componentes basados en colecciones?

El compilador actualmente tiene una limitación con los componentes basados en Adobe React-Aria/React-Stately que esperan colecciones como hijos. El contenido de texto directo en los elementos de la colección no se localiza automáticamente.

Esto afecta a componentes como Select, Listbox, Menu y otros componentes basados en colecciones de bibliotecas como HeroUI, NextUI y otras implementaciones de React-Aria.

Comportamiento actual:

import { Select, SelectItem } from "@heroui/react";

export default function SelectExample() {
  return (
    <Select label="Selecciona un animal">
      {/* Este texto NO será traducido */}
      <SelectItem key="cat" textValue="Cat">
        Cat
      </SelectItem>
      <SelectItem key="dog" textValue="Dog">
        Dog
      </SelectItem>
    </Select>
  );
}

Solución alternativa:

Envuelve el contenido de texto en fragmentos JSX para que sea localizable:

import { Select, SelectItem } from "@heroui/react";

export default function SelectWithWorkaround() {
  return (
    <Select label="Selecciona un animal">
      {/* Este texto SÍ será traducido */}
      <SelectItem key="cat" textValue="Cat">
        <>Cat</>
      </SelectItem>
      <SelectItem key="dog" textValue="Dog">
        <>Dog</>
      </SelectItem>
    </Select>
  );
}

Esta limitación afecta a cualquier componente que utilice el patrón de colecciones de React-Aria donde el contenido de texto se pasa directamente como hijos a los elementos de la colección. Estamos trabajando para mejorar el soporte del compilador en estos casos.

¿Qué frameworks son compatibles?

Lingo.dev Compiler actualmente es compatible con los siguientes frameworks de React:

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

Damos la bienvenida a los 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 ampliar 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": "qwen/qwen3-32b",
    "en:it": "meta-llama/llama-4-maverick-17b-128e-instruct",
    "*:*": "qwen/qwen3-32b",
  },
};

lingoCompiler.next(compilerConfig)(nextConfig);

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

¿Puedo usar prompts personalizados?

¡Sí! Puedes personalizar las indicaciones de traducción directamente en la configuración de tu compilador:

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

Para glosarios personalizados, incluye definiciones de terminología en tu indicación. Consulta nuestra indicación predeterminada para mejores prácticas.

¿Puedo usar más proveedores de LLM?

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

Nos encantaría soportar más proveedores de LLM pronto. Habla con nosotros o envíanos un pull request!

¿Necesito la clave de 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 compilación en CI/CD no necesitará llamar a LLM para traducir ninguna cadena.

Alternativamente, puedes agregar 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 más control sobre las traducciones finales.

¿Puedo editar las traducciones?

¡Sí! Puedes editar manualmente el archivo lingo/dictionary.js. Este exporta un objeto con las traducciones para todos los archivos y entradas. Puedes editar el texto para cada idioma 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 de JavaScript? Estamos lanzando un editor para mejorar la experiencia de edición pronto. ¡Avísanos 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 del archivo) de dictionary.js.

Si deseas retraducir un idioma específico, necesitas eliminar todos los registros para ese idioma.

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

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

  • Eliminar claves de traducción no utilizadas
  • Actualizar las huellas digitales del contenido
  • Garantizar un formato de archivo consistente
  • Optimizar para el despliegue en producción

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

¡Faltan traducciones!

Si faltan traducciones:

  1. Compila localmente para normalizar tus archivos lingo/:

    npm run build

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

    # Asegúrate de que tu archivo .env contenga
GROQ_API_KEY=gsk_...

  3. Confirma los archivos actualizados:

    git add lingo/
git commit -m "Actualizar traducciones"

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

¿Puedo configurar un glosario personalizado?

¡Sí! Usa indicaciones personalizadas para definir terminología y glosarios directamente en la configuración de tu compilador:

const compilerConfig = {
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  prompt:
    "Eres un traductor profesional. Usa estos términos de manera consistente: 'Dashboard' debe ser 'Tableau de bord' en francés, 'Settings' debe ser 'Configuración' en español. Traduce de {SOURCE_LOCALE} a {TARGET_LOCALE}.",
};

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

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

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

¿Qué pasa con el rendimiento en producción?

El compilador de Lingo.dev está optimizado para producción:

  • Costo de ejecución nulo: las traducciones se precompilan
  • División de paquetes: solo se carga el idioma activo
  • Eliminación de código muerto: se eliminan las traducciones no utilizadas
  • Amigable con CDN: los archivos de traducción estáticos se almacenan en caché de manera eficiente

¿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