Создание библиотеки React с Vite и Lingui

Вопрос или проблема

import { Trans } from "@lingui/macro";

function Welcome() {
  return (
    <div>
      <Trans context="Library">Добро пожаловать в библиотеку</Trans>
    </div>
  );
}

export default Welcome;

function I18nApp({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    dynamicActivate("en");
  }, []);

  return <I18nProvider i18n={i18n}>{children}</I18nProvider>;
}

import { i18n } from "@lingui/core";

async function dynamicActivate(locale: string) {
  //как-то, либо в виде строк, либо загруженных файлов, будет получен .po файл приложения, но сейчас он пустой
  const mergedPaths: string[] = [];

  const { message: libraryTranslation } = await import(`./assets/locales/${locale}.po`);
  let mergedMessages = libraryTranslation || {};

  for (const translationPath of mergedPaths) {
    const { messages } = await import(`${translationPath}/locales/${locale}.po`);
    mergedMessages = { ...mergedMessages, ...messages };
  }

  i18n.load(locale, mergedMessages);
  i18n.activate(locale);
}

export default dynamicActivate;

import { Trans } from "@lingui/macro";

function Welcome() {
  return (
    <div>
      <Trans context="App">Добро пожаловать в приложение</Trans>
    </div>
  );
}

export default Welcome;

Ответ или решение

Для создания React-библиотеки с Lingui, используя Vite, и включения ваших переводов в сборку, вам нужно будет выполнить несколько шагов. Я подробно опишу процесс настройки, чтобы вы могли добиться желаемого результата.

Шаг 1: Установка зависимостей

Убедитесь, что у вас установлены необходимые зависимости для Lingui и Vite. Если вы этого еще не сделали, выполните команду:

npm install @lingui/core @lingui/macro @lingui/cli @lingui/translations vite --save

Шаг 2: Настройка Lingui

Создайте или обновите файл lingui.config.ts в корне вашего проекта:

import { defineConfig } from '@lingui/cli';

export default defineConfig({
  locales: ['en', 'ru'], // добавьте нужные локали
  catalogs: [
    {
      path: '<rootDir>/src/assets/locales/{locale}/messages.po',
      include: ['<rootDir>/src/**/*.{js,jsx,ts,tsx}'],
    },
  ],
  format: 'po',
});

Шаг 3: Убедитесь, что файлы локалей включены в сборку

Вам нужно настроить Vite так, чтобы он включал ваши .po файлы в финальную сборку. Для этого настройте файл vite.config.ts:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { resolve } from 'path';

export default defineConfig({
  plugins: [react()],
  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.tsx'), // укажите входной файл вашей библиотеки
      name: 'MyLibrary',
      fileName: (format) => `my-library.${format}.js`,
      formats: ['es', 'umd'],
    },
    rollupOptions: {
      external: ['react', 'react-dom', '@lingui/core'], // определить внешние зависимости
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
          '@lingui/core': 'LinguiCore',
        },
      },
    },
  },
  assetsInclude: ['**/*.po'], // добавьте для обработки файлов .po
});

Шаг 4: Загрузка переводов

Ваша функция dynamicActivate кажется корректной, но не забудьте убедиться, что в mergedPaths вы добавили пути к переводам вашего приложения, которые вы хотите загрузить. Возможно, стоит использовать динамическое извлечение этих путей в зависимости от структуры вашего проекта.

Шаг 5: Исполнение команд Lingui

Для генерации файлов .po вам необходимо выполнить команды Lingui для извлечения и компиляции переводов. Запустите:

npx lingui extract
npx lingui compile

Шаг 6: Тестирование

Теперь, когда ваше приложение со всеми настройками готово, протестируйте его, чтобы убедиться, что все переводы загружаются и работают корректно. Вы можете использовать компонент I18nApp, чтобы обернуть ваши компоненты, и подтвердить, что dynamicActivate правильно загружает переводы.

Заключение

Следуя вышеописанным шагам, вы сможете создать библиотеку React с поддержкой локализации с использованием Vite и Lingui. Убедитесь, что все пути указаны правильно и что ваши переводные файлы размещены в ожидаемых местах. Это обеспечит корректную работу вашей библиотеки и интеграцию приложения с переводами.