Как это работает

Компилятор Lingo.dev автоматизирует локализацию React-приложений на этапе сборки с помощью интеллектуального анализа кода и перевода на основе ИИ.

Когда вы запускаете процесс сборки, компилятор выполняет следующие шаги, чтобы сделать ваше приложение многоязычным без изменения исходного кода:

1. Анализ AST

Компилятор Lingo.dev обрабатывает абстрактное синтаксическое дерево (AST) вашего React-кода, чтобы детерминированно выявлять переводимый контент. Он анализирует:

  • Текстовое содержимое и атрибуты JSX
  • Строковые литералы внутри компонентов React (Поддержка строковых литералов скоро появится.)
  • Шаблоны динамического контента

Компилятор понимает границы компонентов React и сохраняет контекстную информацию для точных переводов.

2. Извлечение контента

Компилятор извлекает переводимые строки, сохраняя:

  • Иерархию компонентов и контекст
  • React-специфические шаблоны, такие как props и state
  • Структуру и форматирование кода

Извлекается только читаемый человеком контент. Технические идентификаторы, фрагменты кода и непереводимые элементы автоматически отфильтровываются.

3. Создание отпечатков и версий

Фингерпринтинг контента обеспечивает эффективное управление переводами:

  • Хеширование MD5 создаёт уникальные фингерпринты контента
  • Версионированные словари отслеживают изменения в директории lingo/
  • Интеграция с Git сохраняет историю переводов
  • Обработка дельт переводит только новый или изменённый контент

Этот подход минимизирует затраты на переводы и обеспечивает консистентность между сборками.

4. Перевод с помощью ИИ

Перевод осуществляется с помощью моделей ИИ с учетом контекста:

  • Интеграция GROQ обеспечивает быстрые и качественные переводы
  • Контекстные границы помогают ИИ понимать связи между компонентами
  • Единая терминология по всему приложению
  • Пакетная обработка для оптимальной производительности

Компилятор отправляет контекстную информацию, чтобы переводы органично вписывались в ваши UI-компоненты.

5. Внедрение кода

Переводы внедряются обратно в сборку без изменения исходных файлов:

  • Обработка на этапе сборки создает локализованные версии
  • Интеграция с фреймворками работает с Next.js, Vite и React Router
  • Оптимизированные сборки с загрузкой словарей для каждой локали
  • Эффективность выполнения благодаря предварительно скомпилированным переводам

Результат — готовые к производству многоязычные React-приложения с минимальной нагрузкой на выполнение.

Интеграция с фреймворками

Next.js App Router

Компилятор интегрируется с Next.js через систему конфигурации:

// next.config.js
export default lingoCompiler.next(config)(nextConfig);
  • Серверные компоненты обрабатываются на этапе сборки
  • Клиентские компоненты получают оптимизированные пакеты переводов
  • Автоматическая маршрутизация поддерживает URL-адреса, основанные на локалях

React Router / Remix

Интеграция через архитектуру плагинов Vite:

// vite.config.ts
export default lingoCompiler.vite(config)(viteConfig);
  • Серверный рендеринг с предварительно загруженными словарями
  • Гидратация на стороне клиента сохраняет состояние переводов
  • Разделение кода по маршрутам включает пакеты переводов

Vite

Прямая интеграция с плагином Vite:

// vite.config.ts
export default lingoCompiler.vite(config)(viteConfig);
  • Горячая замена модулей обновляет переводы во время разработки
  • Оптимизация сборки создает минимальные производственные пакеты
  • Обработка ресурсов эффективно управляет файлами переводов

Рабочий процесс разработки

  1. Пишите React-компоненты, используя текст на естественном языке
  2. Запустите сервер разработки — компилятор извлекает и переводит контент
  3. Проверьте переводы в сгенерированном каталоге lingo/
  4. Закоммитьте файлы переводов в систему контроля версий
  5. Разверните с встроенной поддержкой мультиязычности

Преимущества в продакшене

  • Нулевые затраты на выполнение — переводы предварительно компилируются
  • Оптимальные размеры пакетов — включаются только используемые переводы
  • SEO-дружественность — корректный рендеринг для каждой локали
  • Единый пользовательский опыт — профессиональное качество переводов

Компилятор создает приложения для продакшена, которые ощущаются как нативные для каждого поддерживаемого языка, сохраняя ваш исходный рабочий процесс разработки.

Следующие шаги