Modo Bridge

Mantenha sua biblioteca i18n existente enquanto adiciona o preenchimento automático, tradução por IA e gerenciamento de arquivos com segurança de tipo do i1n.

O que é o Modo Bridge?

O Modo Ponte permite que você mantenha sua biblioteca i18n existente (i18next, react-intl, vue-i18n, ngx-translate, i18n-js) enquanto usa o i1n para gerenciar arquivos de tradução, tradução por IA e geração de tipos.

Conecte sua biblioteca com uma única linha usando registerI1n(). A função i1n t() delega para sua biblioteca internamente, mas com verificação de tipo rigorosa e preenchimento automático completo da IDE a partir do i1n.d.ts gerado.

Configuração pela Biblioteca

Uma linha por biblioteca. Chame registerI1n() com a função de tradução da sua biblioteca e pronto — o i1n cuida do resto. Veja os exemplos de código abaixo para sua configuração específica.

vue-i18n: registerI1n((key, params) => i18n.global.t(key, params)). ngx-translate (Angular): registerI1n((key, params) => translateService.instant(key, params)). i18n-js (React Native): registerI1n((key, params) => i18n.t(key, params)).

Função personalizada: registerI1n((key, params) => yourLookup(key, params)). O Modo Bridge funciona com qualquer função que aceite uma chave e parâmetros opcionais e retorne uma string.

Como funciona

Após chamar registerI1n(), cada chamada para a função i1n t() é encaminhada para sua callback registrada. O i1n adiciona segurança de tipo — se uma chave não existir em seus arquivos de tradução, o TypeScript detecta o erro no momento da compilação.

O i1n continua a gerenciar os arquivos de tradução (push, pull, tradução por IA) e a gerar i1n.d.ts. Sua biblioteca continua a lidar com o carregamento em tempo de execução, interpolação e pluralização. Ambos os sistemas funcionam juntos perfeitamente.

Quando usar o Modo Bridge vs. Autônomo

Use o Modo Bridge quando você tiver um projeto existente com uma biblioteca i18n estabelecida e não quiser reescrever o código do aplicativo. O Modo Bridge oferece um caminho de migração de custo zero — você pode adotar a infraestrutura do i1n sem alterar um único componente.

Use o Modo Independente para novos projetos ou quando quiser substituir completamente sua biblioteca i18n. O SDK i1n lida com inicialização, interpolação, pluralização e troca de locale nativamente, sem dependências externas.

i18next (React, Next.js, Remix)

import { registerI1n } from 'i1n'
import i18next from 'i18next'

registerI1n((key, params) => i18next.t(key, params))

react-intl (FormatJS)

import { registerI1n } from 'i1n'
import { useIntl } from 'react-intl'

const intl = useIntl()
registerI1n((key, params) => intl.formatMessage({ id: key }, params))

vue-i18n

import { registerI1n } from 'i1n'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
registerI1n((key, params) => t(key, params))

ngx-translate (Angular)

import { registerI1n } from 'i1n'
import { TranslateService } from '@ngx-translate/core'

constructor(private translate: TranslateService) {
  registerI1n((key, params) => this.translate.instant(key, params))
}

i18n-js (React Native)

import { registerI1n } from 'i1n'
import { I18n } from 'i18n-js'

const i18n = new I18n(translations)
registerI1n((key, params) => i18n.t(key, params))

Custom function

import { registerI1n } from 'i1n'

// Works with any function: (key, params?) => string
registerI1n((key, params) => myCustomLookup(key, params))

Relacionado

Painel

Guia para o painel web i1n: criação de conta, organizações, chaves de API, edição de tradução e gerenciamento de equipe.