Modo puente

Conserve su biblioteca de i18n actual mientras añade el autocompletado con seguridad de tipos, la traducción por IA y la gestión de archivos de i1n.

¿Qué es el modo puente?

El Modo Puente (Bridge Mode) le permite conservar su biblioteca de i18n existente (i18next, react-intl, vue-i18n, ngx-translate, i18n-js) mientras utiliza i1n para gestionar archivos de traducción, traducción por IA y generación de tipos.

Conecte su biblioteca con una sola línea utilizando registerI1n(). La función t() de i1n delega en su biblioteca subyacente, pero con una verificación de tipos estricta y autocompletado completo en el IDE a partir del archivo i1n.d.ts generado.

Configuración por librería

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 puente (Bridge Mode) funciona con cualquier función que tome una clave y parámetros opcionales y devuelva una cadena de texto.

Cómo funciona

Después de llamar a registerI1n(), cada llamada a la función t() de i1n se reenvía a su callback registrado. i1n añade seguridad de tipos adicional: 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 por IA) y generando i1n.d.ts. Su biblioteca sigue encargándose de la carga en tiempo de ejecución, la interpolación y la pluralización. Ambos sistemas funcionan juntos de manera integrada.

Cuándo utilizar el modo puente (Bridge Mode) frente al modo independiente

Utilice el Modo Puente (Bridge Mode) cuando tenga un proyecto existente con una biblioteca de i18n establecida y no desee reescribir el código de la aplicación. El Modo Puente ofrece una ruta de migración sin costo: puede adoptar la infraestructura de i1n sin cambiar ni un solo componente.

Utilice el Modo Independiente (Standalone Mode) para proyectos nuevos o cuando desee reemplazar su biblioteca de i18n por completo. El SDK de i1n maneja la inicialización, interpolación, pluralización y el 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 de control

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