A arquitetura web moderna raramente depende de HTML estático. O conteúdo é injetado via JavaScript, buscado via APIs ou renderizado no lado do cliente usando frameworks como React ou Vue. O MultiLipi foi projetado para lidar com isso "DOM Volátil." O nosso script não se limita a traduzir a página uma vez ao carregar; ele estabelece uma ligação persistente MutationObserver para detetar e traduzir novos nós à medida que são injetados na árvore DOM.

Este guia explica como a nossa infraestrutura lida com cargas úteis dinâmicas, pedidos AJAX e estados interativos.

1. O Desafio do Conteúdo "Volátil"

Os proxies de tradução padrão falham quando o conteúdo muda após o carregamento inicial.

O MultiLipi suporta:

Renderização do Lado do Cliente (CSR)

Aplicações criadas em React, Vue, Angular ou Svelte.

Buscas Assíncronas

Conteúdo carregado via APIs AJAX/Fetch (por exemplo, rolagem infinita ou resultados de pesquisa).

Estados Interativos

Erros de validação de formulário, totais de carrinho e notificações.

2. A Arquitetura de Engenharia

Como traduzimos sem quebrar a sua aplicação.

O nosso motor JavaScript executa um processo de monitorização contínuo no lado do cliente:

Observação DOM:

MutationObserver

Utilizamos a API nativa MutationObserver do navegador para observar alterações no .

Deteção:

Quando a sua aplicação injeta uma nova

(por exemplo, ao abrir uma modal), o nosso observador sinaliza-a imediatamente.

Injeção Instantânea:

< 50ms

O texto é enviado para o nosso cache local ou API. Se uma tradução existir na memória, ela é trocada instantaneamente (muitas vezes em menos de 50ms), parecendo perfeita para o utilizador.

Preservação de Estado:

apenas nós de texto

Nós apenas modificamos nós de texto. Não destruímos elementos DOM nem removemos ouvintes de eventos, garantindo que os seus bindings React/Vue permaneçam intactos.

3. Melhores Práticas para Texto Dinâmico

Para garantir que o MutationObserver funciona eficientemente, siga estas diretrizes de arquitetura:

Nós de Texto Estáveis

Evite cadeias de caracteres que mudam a cada segundo (como um temporizador de contagem decrescente: "00:01", "00:02"). Isto inunda o motor de tradução com milhares de pedidos únicos.

Abordagem Recomendada:

Hora: 00:01

Envolvimento de HTML Limpo

Certifique-se de que o texto está envolvido em etiquetas específicas (

, ,

) em vez de flutuar solto no . Isto ajuda o observador a isolar o segmento.

Boas Práticas:

Seu texto aqui

Texto solto

Evite Efeitos de "Digitação"

Scripts que "escrevem" texto caractere a caractere (t... te... tex... texto) confundem os motores de tradução. Apresente a cadeia de texto completa de uma só vez.

Dica de Implementação:

// Render complete text instead of character-by-character animation
<p>{fullText}</p>

4. Caso Extremo: iFrames

Uma nota sobre limitações de origem cruzada.

Se o seu conteúdo dinâmico estiver dentro de um iFrame (por exemplo, um widget de chat de terceiros ou um gateway de pagamento):

Mesma Origem:

Se o iFrame estiver hospedado em o seu domínio, MultiLipi consegue traduzi-lo.

Origem Cruzada:

Se o iFrame for carregado a partir de um domínio externo (por exemplo, Stripe, Intercom), nós não consegue traduzi-lo devido a políticas de segurança do navegador (CORS).

Você deve configurar as definições de tradução diretamente nessa ferramenta de terceiros.

Resumo

Não precisa de instalar SDKs específicos para React ou Angular. Assim que o script MultiLipi estiver ativo, ele integra-se automaticamente ao motor de renderização do navegador para traduzir qualquer conteúdo—estático ou dinâmico—que aparece no ecrã.

Como Traduzir Conteúdos Dinâmicos com o MultiLipi