Локализация уже скомпилированных React компонентов в node_modules

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

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

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

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

// vite.config.mjsresolve: {  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.mjsimport 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 не ломая логику. Словарь в этом проекте интегрирован в роутер и меняется зависимо от страницы.

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