Alpha
O Lingo.dev Compiler está em alpha. Ele é instável, não é recomendado para uso em produção, e as APIs podem mudar entre releases.
O Lingo.dev Compiler é um sistema gratuito e open source de tradução em tempo de build para aplicações React. Ele detecta textos traduzíveis no seu JSX, gera traduções com IA com todo o contexto do componente e as incorpora aos bundles por idioma durante o processo de build. Seu código-fonte continua inalterado — sem arquivos manuais de chaves de tradução para manter, sem carregamento separado de dicionários em tempo de execução.
Veja em ação: demo 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 SpanishSem precisar alterar o código. As traduções são definidas em tempo de compilação, gerando bundles otimizados por idioma.
Como ele se diferencia das bibliotecas tradicionais de i18n#
| Bibliotecas tradicionais de i18n | Lingo.dev Compiler | |
|---|---|---|
| Gerenciamento de traduções | Manual — você cria e mantém arquivos de chaves | Automático — o Compiler extrai strings traduzíveis do JSX |
| Mudanças de código necessárias | Envolva cada string em chamadas t() | Nenhuma — escreva JSX normalmente |
| Como as traduções são carregadas | Arquivos de dicionário separados, carregados em tempo de execução | Incorporadas aos bundles por idioma em tempo de build |
| Origem das traduções | Manual ou TMS externo | Geradas por IA com todo o contexto do componente |
| Carregamento de dicionários | Busca em tempo de execução ou importação de arquivos de tradução | Sem busca separada — as traduções fazem parte do bundle |
O pipeline de build#
Análise de AST
O Compiler analisa seu código React em uma Árvore Sintática Abstrata usando Babel. Ele identifica conteúdos traduzíveis: 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 (com <strong> e <em> aninhados) e os placeholders de interpolação. Os metadados são armazenados em .lingo/metadata.json.
Geração de traduções
Em desenvolvimento, o pseudotranslator gera traduções fictícias instantâneas (sem chamadas de API). Em CI, o provedor de LLM configurado gera traduções reais com todo o contexto do componente — localização do arquivo, elementos ao redor e semântica da interpolação. Apenas strings novas ou alteradas são traduzidas — o Compiler usa hash de conteúdo para ignorar strings inalteradas.
Injeção de código
As buscas de tradução são injetadas no seu JSX. O Compiler adiciona chamadas leves de busca baseadas em hash ao dicionário incorporado de cada idioma. Seu código-fonte nunca é modificado.
Otimização de bundle
Bundles por idioma são gerados. Apenas as traduções usadas por cada componente são incluídas. Eliminação de código morto e tree-shaking mantêm os bundles enxutos.
Frameworks compatíveis#
| Framework | Integração |
|---|---|
| Next.js (App Router) | Wrapper de configuração withLingo() — compatível com RSC, Webpack e Turbopack |
| Vite + React | lingoCompilerPlugin — plugin do Vite com suporte completo a HMR |
Principais recursos#
- Automático por padrão — todo texto em JSX é traduzido, a menos que você opte pelo modo de diretiva
'use i18n' - Sem carregar dicionários — traduções incorporadas aos bundles por idioma, sem arquivos separados para carregar
- Modos de build — pseudotranslator em dev, traduções reais em CI, somente cache em produção
- Substituições manuais — atributo
data-lingo-overridepara controle preciso - Resolvedores de idioma personalizados — implemente sua própria detecção e persistência de idioma
- Pluralização automática — suporte a ICU MessageFormat para formas no plural
- Ferramentas de desenvolvimento — pseudotranslator e editor de traduções no navegador
