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

Значимый прорыв формирует отрасль ИИ: tripolskypetr 24 минуты назад Локализация уже скомпилированных React компонентов в node_modules Средний 2 мин 1. 1K ReactJS * React Native * TypeScript * JavaScript * Финансы в IT Туториал Исходный код, разобранный в статье, можно посмотреть по ссылкеПри разработка Автоматизированных Банковских Систем формы содержат сотни полей. Поэтому, применяют шаблонизатор, например, jsonformsОднако, так как JSON хранится вне контекста React компонента, хук react-i18n в нем не заработает.

Помимо декларативных JSON-форм в скомпилированных библиотеках из node_modulesРешение проблемы// vite. 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.

Отраслевые последствия

jss(type, props); // текстовые ноды → словарь } return React. createElement(type, props); // страховка на случай сбоя i18n }; = React; ;Если схемы форм хранятся не в static assets а модули . mjs, то можно сразу применить window.

Translate , { 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 не ломая логику.

Словарь в этом проекте интегрирован в роутер и меняется зависимо от страницы.

Этот прогресс даёт важные сигналы о будущем отрасли, и технологический мир внимательно наблюдает.