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 versões.
O Lingo.dev Compiler inclui ferramentas de desenvolvimento que aceleram a iteração em interfaces multilíngues sem precisar chamar APIs externas. Com elas, você consegue verificar se todo o texto é traduzível, testar o layout com diferentes comprimentos de texto e depurar problemas de tradução durante o desenvolvimento.
Pseudotradutor#
O pseudotradutor gera traduções simuladas instantâneas ao envolver o texto de origem com marcadores visuais. Não é necessária nenhuma chave de API, nenhuma chamada de rede é feita e os resultados aparecem imediatamente.
Ative-o na configuração do seu Compiler:
{
dev: {
usePseudotranslator: true,
},
}O que ele gera#
| Texto de origem | Pseudotradução |
|---|---|
Welcome | [!!! Welcome !!!] |
Sign in to your account | [!!! Sign in to your account !!!] |
Items: {count} | [!!! Items: {count} !!!] |
Os marcadores ([!!! ... !!!]) tornam o texto traduzido visualmente distinto do texto não traduzido. Se você vir inglês puro na interface enquanto o pseudotradutor estiver ativado, esse texto não está sendo processado pelo Compiler.
Casos de uso#
Identifique strings não traduzidas
Execute seu app com o pseudotradutor ativado. Qualquer texto que apareça sem os marcadores [!!! ... !!!] não está sendo detectado pelo Compiler. Isso acontece quando o texto fica armazenado em variáveis fora do JSX ou quando um componente está fora do diretório sourceRoot.
Teste o layout com textos mais longos
As pseudotraduções são mais longas que o texto de origem (por causa dos caracteres dos marcadores). Isso simula idiomas como alemão ou francês, que normalmente produzem textos 20-30% mais longos que o inglês, revelando cedo problemas de estouro no layout.
Verifique a interpolação
Placeholders como {count} e {name} devem aparecer dentro dos marcadores de pseudotradução. Se um placeholder aparecer fora dos marcadores ou estiver ausente, o Compiler pode não estar preservando-o corretamente.
O pseudotradutor segue o mesmo pipeline de tradução dos provedores reais: processa a mesma análise de AST e as mesmas etapas de injeção de código. A única diferença está na etapa de geração da tradução, em que os marcadores substituem a chamada ao LLM.
Servidor de tradução#
Durante o desenvolvimento, o Compiler executa um servidor local de tradução que atende solicitações sob demanda. O servidor é iniciado automaticamente quando você executa npm run dev.
Como funciona#
O servidor de tradução escuta em uma porta local e lida com solicitações de tradução do pipeline de build de desenvolvimento. Quando uma string nova ou alterada é detectada, o Compiler a envia ao servidor, que a encaminha ao provedor de tradução configurado (ou ao pseudotradutor).
Configuração de porta#
O servidor encontra automaticamente uma porta disponível dentro de um intervalo configurável:
{
dev: {
translationServerStartPort: 60000,
},
}| Opção | Padrão | Descrição |
|---|---|---|
translationServerStartPort | 60000 | Número inicial da porta. O servidor tenta as portas em sequência (60000, 60001, ..., 60099) até encontrar uma disponível. |
translationServerUrl | detectado automaticamente | Substitui completamente a URL do servidor. Útil para se conectar a um servidor remoto de tradução ou a um proxy personalizado. |
Se todas as portas no intervalo 60000-60099 estiverem ocupadas, o servidor não conseguirá iniciar. Consulte Troubleshooting para saber como resolver conflitos de porta.
Widget de desenvolvimento (em breve)#
Um editor de tradução no navegador que permite visualizar e editar traduções em tempo real enquanto você navega pelo app. O widget fica sobreposto à interface e mostra detalhes da tradução de cada elemento de texto.
Recursos planejados:
- Clique em qualquer elemento de texto para ver o texto de origem, as traduções e os metadados
- Edite traduções diretamente no navegador
- As alterações são salvas em
.lingo/metadata.jsonimediatamente - Alterne entre idiomas sem recarregar
Status
O widget de desenvolvimento ainda está em desenvolvimento e não está disponível. Acompanhe o changelog para atualizações de lançamento.
Configuração recomendada para desenvolvimento#
Para ter a experiência de desenvolvimento mais rápida, combine o pseudotradutor com as configurações padrão do servidor de tradução:
{
dev: {
usePseudotranslator: true,
translationServerStartPort: 60000,
},
}Quando estiver tudo pronto para visualizar traduções reais, desative o pseudotradutor e reinicie o servidor de desenvolvimento:
{
dev: {
usePseudotranslator: false,
},
}O Compiler então gera traduções reais para strings novas ou alteradas usando o provedor de tradução configurado.
