Modalità Bridge

Mantieni la tua libreria i18n esistente aggiungendo l'autocompletamento type-safe, la traduzione AI e la gestione dei file di i1n.

Cos'è la modalità Bridge?

La modalità Bridge ti consente di mantenere la tua libreria i18n esistente (i18next, react-intl, vue-i18n, ngx-translate, i18n-js) mentre usi i1n per gestire i file di traduzione, la traduzione AI e la generazione di tipi.

Collega la tua libreria con una singola riga utilizzando registerI1n(). La funzione i1n t() delega alla tua libreria in background, ma con controllo rigoroso dei tipi e completamento automatico completo dell'IDE dal file i1n.d.ts generato.

Configurazione tramite Libreria

Una riga per libreria. Chiama registerI1n() con la funzione di traduzione della tua libreria e hai finito: i1n si occuperà del resto. Vedi gli esempi di codice qui sotto per la tua configurazione specifica.

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)).

Funzione personalizzata: registerI1n((key, params) => yourLookup(key, params)). La modalità Bridge funziona con qualsiasi funzione che accetti una chiave e parametri opzionali e restituisca una stringa.

Come funziona

Dopo aver chiamato registerI1n(), ogni chiamata alla funzione i1n t() viene inoltrata alla tua callback registrata. i1n aggiunge la sicurezza dei tipi — se una chiave non esiste nei tuoi file di traduzione, TypeScript rileva l'errore al momento della compilazione.

i1n continua a gestire i file di traduzione (push, pull, traduzione AI) e a generare i1n.d.ts. La tua libreria continua a gestire il caricamento in fase di runtime, l'interpolazione e la pluralizzazione. Entrambi i sistemi lavorano insieme in modo impeccabile.

Quando usare la modalità Bridge rispetto alla modalità Standalone

Usa la Modalità Bridge quando hai un progetto esistente con una libreria i18n consolidata e non vuoi riscrivere il codice dell'applicazione. La Modalità Bridge offre un percorso di migrazione a costo zero: puoi adottare l'infrastruttura di i1n senza modificare un singolo componente.

Usa la Modalità Standalone per nuovi progetti o quando vuoi sostituire completamente la tua libreria i18n. L'SDK di i1n gestisce inizializzazione, interpolazione, pluralizzazione e cambio di locale nativamente, senza dipendenze esterne.

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))

Correlato

Cruscotto

Guida alla dashboard web di i1n: creazione account, organizzazioni, chiavi API, modifica traduzioni e gestione del team.