Alfa
O Lingo.dev Compiler está em alfa. É instável, não é recomendado para utilização em produção e as APIs podem mudar entre versões.
O Lingo.dev Compiler inclui ferramentas de desenvolvimento que permitem iterar rapidamente em interfaces multilingues sem recorrer a APIs externas. Estas ferramentas ajudam a verificar se todo o texto é traduzível, a testar o layout com diferentes comprimentos de texto e a depurar problemas de tradução durante o desenvolvimento.
Pseudotradutor#
O pseudotradutor gera traduções fictícias instantâneas ao envolver o texto de origem em marcadores visuais. Não requer chave de API, não faz chamadas de rede e os resultados aparecem de imediato.
Ative-o na configuração do seu Compiler:
{
dev: {
usePseudotranslator: true,
},
}O que produz#
| 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 por traduzir. Se vir texto em inglês na interface com o pseudotradutor ativado, esse texto não está a ser processado pelo Compiler.
Casos de utilização#
Identificar strings por traduzir
Execute a sua aplicação com o pseudotradutor ativado. Qualquer texto que apareça sem os marcadores [!!! ... !!!] não está a ser detetado pelo Compiler. Isto acontece quando o texto é armazenado em variáveis fora de JSX ou quando um componente está fora da diretoria sourceRoot.
Testar o layout com texto mais longo
As pseudotraduções são mais longas do que o texto de origem (devido aos caracteres dos marcadores). Isto simula idiomas como o alemão ou o francês, que normalmente produzem texto 20–30% mais longo do que o inglês, revelando cedo problemas de overflow no layout.
Verificar a interpolação
Placeholders como {count} e {name} devem aparecer dentro dos marcadores da pseudotradução. Se um placeholder aparecer fora dos marcadores ou estiver em falta, o Compiler pode não o estar a preservar corretamente.
O pseudotradutor segue o mesmo pipeline de tradução que os fornecedores reais — processa a mesma análise AST e os mesmos passos 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 de tradução local que trata pedidos de tradução a pedido. O servidor arranca automaticamente quando executa npm run dev.
Como funciona#
O servidor de tradução escuta numa porta local e trata pedidos de tradução do pipeline de compilação de desenvolvimento. Quando é detetada uma string nova ou alterada, o Compiler envia-a para o servidor, que a encaminha para o fornecedor de tradução configurado (ou para o pseudotradutor).
Configuração da porta#
O servidor encontra automaticamente uma porta disponível dentro de um intervalo configurável:
{
dev: {
translationServerStartPort: 60000,
},
}| Opção | Predefinição | Descrição |
|---|---|---|
translationServerStartPort | 60000 | Número da porta inicial. O servidor tenta as portas sequencialmente (60000, 60001, ..., 60099) até encontrar uma disponível. |
translationServerUrl | detetado automaticamente | Substitui por completo o URL do servidor. Útil para ligar a um servidor de tradução remoto ou a um proxy personalizado. |
Se todas as portas no intervalo 60000-60099 estiverem ocupadas, o servidor não arranca. Consulte Troubleshooting para saber como resolver conflitos de portas.
Widget de desenvolvimento (em breve)#
Um editor de traduções no navegador que lhe permite ver e editar traduções em tempo real enquanto navega na sua aplicação. O widget sobrepõe-se à sua interface e mostra detalhes de tradução para cada elemento de texto.
Funcionalidades planeadas:
- Clique em qualquer elemento de texto para ver o respetivo texto de origem, traduções e metadados
- Edite traduções diretamente no navegador
- As alterações são guardadas em
.lingo/metadata.jsonde imediato - Alterne entre idiomas sem recarregar
Estado
O widget de desenvolvimento está em desenvolvimento e ainda não está disponível. Acompanhe o changelog para atualizações de lançamento.
Configuração de desenvolvimento recomendada#
Para a experiência de desenvolvimento mais rápida, combine o pseudotradutor com as definições predefinidas do servidor de tradução:
{
dev: {
usePseudotranslator: true,
translationServerStartPort: 60000,
},
}Quando estiver pronto para pré-visualizar traduções reais, desative o pseudotradutor e reinicie o servidor de desenvolvimento:
{
dev: {
usePseudotranslator: false,
},
}O Compiler gera então traduções reais para strings novas ou alteradas com o fornecedor de tradução configurado.
