Alpha
O Lingo.dev Compiler está em alpha. É instável, não é recomendado para utilização em produção e as APIs podem mudar entre versões.
O Lingo.dev Compiler é um sistema gratuito e open-source de tradução em tempo de compilação para aplicações React. Deteta texto traduzível no teu JSX, gera traduções com IA com contexto completo do componente e integra-as em bundles por idioma durante o processo de compilação. O teu código-fonte mantém-se inalterado — sem ficheiros de chaves de tradução para criar e manter manualmente, sem carregamento separado de dicionários em runtime.
Vê-o em ação: demonstração ao vivo no X
Antes e depois#
// Your code - unchanged
export function Welcome() {
return <h1>Welcome to our app</h1>;
}
// Renders "Bienvenido a nuestra aplicacion" in SpanishNão são necessárias alterações ao código. As traduções são determinadas em tempo de compilação, criando bundles otimizados por idioma.
Em que difere das bibliotecas de i18n tradicionais#
| Bibliotecas de i18n tradicionais | Lingo.dev Compiler | |
|---|---|---|
| Gestão de traduções | Manual — crias e manténs ficheiros de chaves | Automática — o Compiler extrai strings traduzíveis do JSX |
| Alterações ao código necessárias | Envolver cada string em chamadas t() | Nenhuma — escreves JSX normal |
| Como as traduções são carregadas | Ficheiros de dicionário separados, carregados em runtime | Integradas em bundles por idioma em tempo de compilação |
| Origem das traduções | Manual ou TMS externo | Geradas por IA com contexto completo do componente |
| Carregamento do dicionário | Fetch em runtime ou importação de ficheiros de tradução | Sem fetch separado — as traduções fazem parte do bundle |
O pipeline de compilação#
Análise AST
O Compiler analisa o teu código React e converte-o numa Abstract Syntax Tree com Babel. Identifica conteúdo traduzível: nós de texto, atributos de string (alt, aria-label, placeholder) e expressões de template.
Extração de conteúdo
Cada string traduzível recebe um identificador estável baseado em hash. O Compiler preserva o contexto do componente, a estrutura de rich text (<strong>, <em>) e os placeholders de interpolação. Os metadados são armazenados em .lingo/metadata.json.
Geração de traduções
Em desenvolvimento, o pseudotradutor gera de imediato traduções fictícias (sem chamadas à API). Em CI, o fornecedor de LLM configurado gera traduções reais com contexto completo do componente — localização do ficheiro, elementos envolventes e semântica de interpolação. Apenas as strings novas ou alteradas são traduzidas — o Compiler usa hashing de conteúdo para ignorar strings inalteradas.
Injeção de código
As pesquisas de traduções são injetadas no teu JSX. O Compiler adiciona chamadas leves de pesquisa baseadas em hash ao dicionário integrado para cada idioma. O teu código-fonte nunca é modificado.
Otimização de bundles
São criados bundles por idioma. Só são incluídas as traduções usadas por cada componente. A eliminação de código morto e o tree-shaking mantêm os bundles no mínimo.
Frameworks suportadas#
| Framework | Integração |
|---|---|
| Next.js (App Router) | Wrapper de configuração withLingo() — suporta RSC, Webpack e Turbopack |
| Vite + React | lingoCompilerPlugin — plugin de Vite com suporte completo para HMR |
Principais funcionalidades#
- Automático por predefinição — todo o texto em JSX é traduzido, a menos que optes pelo modo de diretiva
'use i18n' - Sem carregamento de dicionário — traduções integradas em bundles por idioma, sem ficheiros separados para carregar
- Modos de compilação — pseudotradutor em desenvolvimento, traduções reais em CI, apenas cache em produção
- Substituições manuais — atributo
data-lingo-overridepara controlo preciso - Resolvedores de idioma personalizados — implementa a tua própria deteção e persistência de idioma
- Pluralização automática — suporte para ICU MessageFormat nas formas de plural
- Ferramentas de desenvolvimento — pseudotradutor e editor de traduções no navegador
