Modo Puente

Conservá tu biblioteca i18n existente mientras agregás el autocompletado con seguridad de tipos, la traducción con IA y la gestión de archivos de i1n.

¿Qué es el modo Bridge?

El modo Puente le permite mantener su biblioteca i18n existente (i18next, react-intl, vue-i18n, ngx-translate, i18n-js) mientras usa i1n para administrar archivos de traducción, traducción con IA y generación de tipos.

Conecta tu biblioteca con una sola línea usando registerI1n(). La función i1n t() delega a tu biblioteca bajo el capó, pero con verificación estricta de tipos y autocompletado completo del IDE a partir del i1n.d.ts generado.

Configuración por Biblioteca

Una línea por biblioteca. Llame a registerI1n() con la función de traducción de su biblioteca y listo; i1n se encarga del resto. Consulte los ejemplos de código a continuación para su configuración 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)).

Función personalizada: registerI1n((key, params) => yourLookup(key, params)). El modo Bridge funciona con cualquier función que tome una clave y parámetros opcionales y devuelva una cadena.

Cómo funciona

Después de llamar a registerI1n(), cada llamada a la función i1n t() se reenvía a su callback registrado. i1n agrega seguridad de tipos encima: si una clave no existe en sus archivos de traducción, TypeScript detecta el error en tiempo de compilación.

i1n continúa gestionando los archivos de traducción (push, pull, traducción con IA) y generando i1n.d.ts. Su biblioteca continúa manejando la carga en tiempo de ejecución, la interpolación y la pluralización. Ambos sistemas funcionan juntos sin problemas.

Cuándo usar el modo Bridge vs. Standalone

Utilizá el Modo Puente cuando tengas un proyecto existente con una biblioteca i18n establecida y no quieras reescribir el código de la aplicación. El Modo Puente proporciona una ruta de migración sin costo: podés adoptar la infraestructura de i1n sin cambiar un solo componente.

Utilizá el Modo Independiente para proyectos nuevos o cuando quieras reemplazar tu librería i18n por completo. El SDK de i1n maneja la inicialización, interpolación, pluralización y cambio de idioma de forma nativa, sin dependencias 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

Panel

Guía del panel web de i1n: creación de cuentas, organizaciones, claves de API, edición de traducciones y gestión de equipos.