Cómo funciona

Lingo.dev Compiler automatiza la localización de aplicaciones React durante el tiempo de compilación mediante análisis inteligente de código y traducción potenciada por IA.

Cuando ejecutas tu proceso de compilación, el compilador realiza los siguientes pasos para hacer tu aplicación multilingüe sin cambiar tu código fuente:

1. Análisis AST

Lingo.dev Compiler procesa el Árbol de Sintaxis Abstracta (AST) de tu código React para identificar determinísticamente el contenido traducible. Analiza:

  • Contenido de texto JSX y atributos
  • Literales de cadena dentro de componentes React (Soporte para literales de cadena próximamente.)
  • Patrones de contenido dinámico

El compilador comprende los límites de los componentes React y mantiene información contextual para traducciones precisas.

2. Extracción de contenido

El compilador extrae cadenas traducibles mientras preserva:

  • Jerarquía y contexto de componentes
  • Patrones específicos de React como props y state
  • Estructura y formato del código

Solo se extrae el contenido legible por humanos. Los identificadores técnicos, fragmentos de código y elementos no traducibles se filtran automáticamente.

3. Huellas digitales y versionado

La huella digital del contenido garantiza una gestión eficiente de las traducciones:

  • Hashing MD5 crea huellas digitales únicas del contenido
  • Diccionarios versionados rastrean cambios en el directorio lingo/
  • Integración con Git mantiene el historial de traducciones
  • Procesamiento delta solo traduce contenido nuevo o modificado

Este enfoque minimiza los costos de traducción y mantiene la consistencia entre compilaciones.

4. Traducción por IA

La traducción se realiza mediante modelos de IA con comprensión contextual:

  • La integración de modelos de IA proporciona traducciones rápidas y de alta calidad a través del Motor Lingo.dev o uno de los proveedores LLM compatibles
  • Los límites contextuales ayudan a la IA a comprender las relaciones entre componentes
  • Terminología consistente en toda la aplicación
  • Procesamiento por lotes para un rendimiento óptimo

El compilador envía información contextual para garantizar que las traducciones se integren naturalmente en los componentes de la interfaz de usuario.

5. Inyección de código

Las traducciones se inyectan de vuelta en tu compilación sin modificar los archivos fuente:

  • Procesamiento en tiempo de compilación crea versiones localizadas
  • Integración con frameworks funciona con Next.js, Vite y React Router
  • Paquetes optimizados con carga de diccionarios por localización
  • Eficiencia en tiempo de ejecución mediante traducciones precompiladas

El resultado son aplicaciones React multilingües listas para producción con una sobrecarga mínima en tiempo de ejecución.

Integración de framework

Next.js App Router

El compilador se integra con Next.js a través del sistema de configuración:

// next.config.js
export default lingoCompiler.next(config)(nextConfig);
  • Los componentes de servidor se procesan en tiempo de compilación
  • Los componentes de cliente reciben paquetes de traducción optimizados
  • El enrutamiento automático admite URLs basadas en configuración regional

React Router / Remix

Integración a través de la arquitectura de plugins de Vite:

// vite.config.ts
export default lingoCompiler.vite(config)(viteConfig);
  • Renderizado del lado del servidor con diccionarios precargados
  • La hidratación del lado del cliente mantiene el estado de traducción
  • La división de código basada en rutas incluye paquetes de traducción

Vite

Integración directa de plugins de Vite:

// vite.config.ts
export default lingoCompiler.vite(config)(viteConfig);
  • El reemplazo de módulos en caliente actualiza las traducciones durante el desarrollo
  • La optimización de compilación crea paquetes de producción mínimos
  • La gestión de activos administra los archivos de traducción de manera eficiente

Flujo de trabajo de desarrollo

  1. Escribir componentes React utilizando texto en lenguaje natural
  2. Ejecutar servidor de desarrollo - el compilador extrae y traduce el contenido
  3. Revisar traducciones en el directorio lingo/ generado
  4. Confirmar archivos de traducción en el control de versiones
  5. Implementar con soporte multilingüe integrado

Beneficios en producción

  • Costo de ejecución cero - las traducciones se precompilan
  • Tamaños de paquete óptimos - solo se incluyen las traducciones utilizadas
  • Compatible con SEO - renderizado adecuado específico para cada configuración regional
  • UX consistente - calidad de traducción profesional

El compilador crea aplicaciones de producción que se sienten construidas de forma nativa para cada idioma compatible mientras mantiene su flujo de trabajo de desarrollo original.

Proveedores de LLM

Opción 1. Motor Lingo.dev

El Compilador Lingo.dev puede utilizar el Motor Lingo.dev como su motor de traducción de IA.

Proporciona selección dinámica de modelos, enrutamiento automático a diferentes modelos para cada par de idiomas, respaldos automáticos de modelos, memoria de traducción que considera traducciones anteriores y soporte de glosario para la terminología específica del dominio de su proyecto. Hay opciones gratuitas y de pago, y el nivel gratuito Hobby debería ser suficiente para la mayoría de los proyectos.

Para autenticarse, ejecute:

npx lingo.dev@latest login

Configure el Motor Lingo.dev como su proveedor, por ejemplo, para Next.js:

lingoCompiler.next({
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  models: "lingo.dev",
})(nextConfig);

Detalle importante. Si está utilizando el navegador Brave, o si sus extensiones del navegador están bloqueando el flujo de autenticación, puede autenticarse manualmente añadiendo una variable de entorno LINGODOTDEV_API_KEY a su archivo .env:

LINGODOTDEV_API_KEY=...

Opción 2. Proveedores LLM alternativos

El compilador admite los siguientes proveedores de LLM:

Necesita crear una cuenta y obtener una clave API del proveedor de LLM que elija para configurar.

Nota: Asegúrese de activar su cuenta con el proveedor de LLM y aceptar sus Términos de servicio antes de utilizarlo en el Compilador. El proveedor de LLM podría impedirle usar su plataforma antes de completar todos los pasos. Los pasos pueden variar para cada proveedor de LLM.

Configure el proveedor de LLM de su elección, por ejemplo, para usar Groq en una aplicación Next.js:

lingoCompiler.next({
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  models: {
    "*:*": "groq:mistral-saba-24b", // GROQ
    // "*:*": "google:gemini-2.0-flash", // Google AI
    // "*:*": "openrouter:mistralai/mistral-small-24b-instruct-2501", // OpenRouter
    // "*:*": "ollama:mistral-small3.1", // Ollama
  },
})(nextConfig);

Añada su clave API para su proveedor de LLM configurado a su entorno:


# .env

GROQ_API_KEY=gsk_...
GOOGLE_API_KEY=...
OPENROUTER_API_KEY=...

Nos encantaría dar soporte a más LLMs - habla con nosotros o envíanos un pull request!

Próximos pasos