Uso de Vanilla JS

O núcleo do motor fornece o comportamento em tempo de execução. Seu aplicativo decide como apresentá-lo.

Contexto por área

Defina um contexto padrão no mecanismo e, em seguida, substitua-o para chamadas específicas quando necessário.

ts
const engine = create18waysEngine({
  apiKey: 'YOUR_18WAYS_PUBLIC_API_KEY',
  baseLocale: 'en-GB',
  locale: 'fr-FR',
  context: 'app',
});
 
const payNow = await engine.t('Pay now', {
  context: 'checkout.button',
});

As variáveis funcionam da mesma maneira

ts
const line = await engine.t('Hello {name}', {
  vars: { name: 'Ada' },
});

A mesma sintaxe waysParser usada no React funciona aqui também.

Comportamento de cache

O motor mantém um repositório de traduções na memória.

Isso significa:

  • a primeira solicitação por uma nova string ou localidade pode atingir a API
  • solicitações posteriores podem ser atendidas a partir da loja
  • voltar para um local anterior é barato se as traduções já estiverem em cache

Traga seus próprios controles de localidade

No Vanilla JS, a troca de localidade é explícita.

ts
async function setLocale(locale) {
  engine.setLocale(locale);
  await render();
}

Isso é uma opção melhor do que fingir que o pacote principal é responsável pelo roteamento ou pelo estado do React.

Quando ficar no pacote principal

Fique aqui se você quiser o máximo controle.

Mova-se para os pacotes React ou Next quando você quiser:

  • Primitivas de tradução JSX
  • ganchos de localidade embutidos
  • roteamento e metadados gerenciados por adaptador