Lingo.dev Compiler
Альфа
Lingo.dev Compiler находится в альфа-версии. Он пока нестабилен, не рекомендуется для production, а API могут меняться от релиза к релизу.
Lingo.dev Compiler — это бесплатная open-source система перевода на этапе сборки для React-приложений. Она находит переводимый текст в JSX, генерирует переводы с помощью ИИ с полным контекстом компонента и встраивает их в отдельные бандлы для каждой локали в процессе сборки. Исходный код остаётся неизменным: не нужно вручную поддерживать файлы с ключами перевода и отдельно загружать словари во время выполнения.
Посмотрите в действии: живое демо на X
До и после#
// Your code - unchanged
export function Welcome() {
return <h1>Welcome to our app</h1>;
}
// Renders "Bienvenido a nuestra aplicacion" in SpanishНикаких изменений в коде. Переводы определяются на этапе компиляции, а для каждой локали создаются оптимизированные бандлы.
Чем отличается от традиционных i18n-библиотек#
| Традиционные i18n-библиотеки | Lingo.dev Compiler | |
|---|---|---|
| Управление переводами | Вручную — вы создаёте и поддерживаете файлы с ключами | Автоматически — Compiler извлекает переводимые строки из JSX |
| Нужны ли изменения в коде | Нужно оборачивать каждую строку в вызовы t() | Нет — просто пишите обычный JSX |
| Как загружаются переводы | Отдельные файлы словарей загружаются во время выполнения | Встраиваются в бандлы для каждой локали на этапе сборки |
| Источник переводов | Вручную или через внешний TMS | Генерируются ИИ с полным контекстом компонента |
| Загрузка словарей | Запрос или импорт файлов перевода во время выполнения | Без отдельной загрузки — переводы уже входят в бандл |
Пайплайн сборки#
Анализ AST
Compiler разбирает ваш React-код в Abstract Syntax Tree с помощью Babel. Он определяет переводимый контент: текстовые узлы, строковые атрибуты (alt, aria-label, placeholder) и шаблонные выражения.
Извлечение контента
Каждая переводимая строка получает стабильный идентификатор на основе хеша. Compiler сохраняет контекст компонента, структуру форматированного текста (вложенные <strong>, <em>) и плейсхолдеры интерполяции. Метаданные сохраняются в .lingo/metadata.json.
Генерация переводов
В разработке pseudotranslator мгновенно генерирует тестовые переводы без API-вызовов. В CI настроенный провайдер LLM создаёт реальные переводы с полным контекстом компонента — расположением файла, окружающими элементами и семантикой интерполяции. Переводятся только новые или изменённые строки: Compiler использует хеширование содержимого, чтобы пропускать неизменившиеся строки.
Инъекция кода
В ваш JSX внедряются обращения к переводам. Compiler добавляет лёгкие вызовы поиска по хешу к встроенному словарю для каждой локали. Исходный код при этом никогда не изменяется.
Оптимизация бандла
Создаются отдельные бандлы для каждой локали. В них попадают только те переводы, которые используются конкретным компонентом. Удаление мёртвого кода и tree-shaking помогают сохранить минимальный размер бандлов.
Поддерживаемые фреймворки#
| Фреймворк | Интеграция |
|---|---|
| Next.js (App Router) | Обёртка для конфигурации withLingo() — поддерживает RSC, Webpack и Turbopack |
| Vite + React | lingoCompilerPlugin — плагин для Vite с полной поддержкой HMR |
Ключевые возможности#
- Автоматически по умолчанию — весь текст в JSX переводится, если только вы не включите режим директив
'use i18n' - Без загрузки словарей — переводы встраиваются в бандлы для каждой локали, без отдельных файлов для загрузки
- Режимы сборки — pseudotranslator в dev, реальные переводы в CI, только кэш в production
- Ручные переопределения — атрибут
data-lingo-overrideдля точного контроля - Пользовательские резолверы локали — реализуйте собственную логику определения и сохранения локали
- Автоматическая плюрализация — поддержка ICU MessageFormat для форм множественного числа
- Инструменты разработки — pseudotranslator и редактор переводов прямо в браузере