Исходный код, разобранный в статье, можно посмотреть по ссылке

При разработка Автоматизированных Банковских Систем формы содержат сотни полей. Поэтому, применяют шаблонизатор, например, jsonforms

Однако, так как JSON хранится вне контекста React компонента, хук react-i18n в нем не заработает. Помимо декларативных JSON-форм в скомпилированных библиотеках из node_modules

Решение проблемы

// vite.config.mjs
resolve: {
  alias: {
    "react/jsx-runtime": path.resolve(__dirname, "./src/i18n/config/jsx-runtime"),
    "react/jsx-dev-runtime": path.resolve(__dirname, "./src/i18n/config/jsx-dev-runtime"),
  },
},

JSX компилируется в вызовы jsx()/jsxs() из модуля react/jsx-runtime и Vite резолвит этот импорт через алиас для всех модулей, включая зависимости. Каждый элемент, который создаёт React проходит через мою фабрику. Translate смотрит текстовые ноды, ищет их в том же словаре, что и t(), и подменяет. Библиотека скомпилирована год назад, лежит в node_modules и не подозревает, что говорит по-русски.

// src/i18n/config/jsx-runtime.mjs
import React from "react";

const factory = (type, props) => {
  if (window.Translate) {
    return window.Translate.jss(type, props);   // текстовые ноды → словарь
  }
  return React.createElement(type, props);      // страховка на случай сбоя i18n
};

const { Fragment } = React;
export { Fragment, factory as jsx, factory as jsxs };

Если схемы форм хранятся не в static assets а модули .ts или .mjs, то можно сразу применить window.Translate.t

{
  type: FieldType.Typography,
  typoVariant: "h6",
  placeholder: t("General Information"),
},
{
  type: FieldType.Text,
  name: "symbol",
  title: t("Symbol"),
  readonly: true,
  compute: (obj) => obj.symbol || t("Not specified"),
},

Было

Дешборд содержит компоненты, импортируемые из node_modules целиком без возможности локализовать надписи вида Entry, Invested, Total

Стало

Кастомная JSX Factory достучалась до уже собранных компонентов и локализовала их без изменения кода внедрением react-i18n не ломая логику. Словарь в этом проекте интегрирован в роутер и меняется зависимо от страницы.

Спасибо за внимание!