Обзор

В gt-next@6.8.0 мы представили компонент <Static>, чтобы решить проблему фрагментации предложений и повторного использования кода в JSX. Этот компонент позволяет вызывать статические функции прямо внутри переводов, сохраняя согласование слов, спряжение и изменения порядка слов в разных языках. Однако для строковых переводов с использованием gt() и msg() решение по-прежнему отсутствовало. Как и в случае с JSX, многие приложения активно используют построение строк через вспомогательные функции, особенно в зрелых кодовых базах, где переводимый контент разбросан по сервисам, утилитам и бизнес-логике.

gt-next 6.12.0 закрывает этот пробел, добавляя declareStatic() — строковый эквивалент компонента <Static> — вместе со вспомогательными функциями declareVar() и decodeVars().

Основные возможности

declareStatic()

Работает аналогично <Static>, но для строковых функций. CLI анализирует все возможные варианты возврата и создает отдельные записи перевода для каждого из них.

const getDisplayName = (name) => {
  return name ? declareVar(name) : 'Someone';
};

gt(`${declareStatic(getDisplayName(name))} says hello.`);

declareVar()

Строковый эквивалент <Var> — помечает динамическое содержимое внутри функций declareStatic(), которое должно исключаться из вычисления хеша и обрабатываться как переменная во время выполнения. Для этого динамическое содержимое оборачивается в совместимый с ICU оператор select, который при интерполяции преобразуется в исходное динамическое содержимое.

const greeting = "Hello, " + declareVar(name);
// "Привет, {_gt_, select, other {name}}"

decodeVars()

Поскольку declareVar() добавляет в исходный текст ICU-совместимые маркеры, само по себе использование declareVar() может вызывать проблемы в существующей логике обработки строк. Чтобы извлечь исходное значение, достаточно просто обернуть исходную строку в decodeVars().

const greeting = "Hello, " + declareVar("Brian");
// "Hello, {_gt_, select, other {Brian}}"
const decodedGreeting = decodeVars(greeting);
// "Hello, Brian"

Другие улучшения

Улучшенные строковые функции

Теперь и gt(), и msg() поддерживают конкатенацию строк, но только для статических строк:

gt("Hello " + "world");
msg("Welcome, " + "Brian");

Расширенная поддержка <Static>

До этого компонент <Static> поддерживал в качестве дочерних элементов только вызовы функций. Теперь он также поддерживает произвольные JSX-выражения, которые можно вычислить на этапе сборки, например вложенный текст JSX, тернарные операторы, условные выражения и вызовы функций.

function getDisplayName(name) {
  return name ? <Var>{name}</Var> : 'Someone';
};
...
<T>
  <Static>
    Hello {getDisplayName("Brian")}!
    {
      isFriend ? " How are you?" : " What's up?"
    }
  </Static>
</T>

Соображения о производительности

Как и <Static>, declareStatic() увеличивает количество записей перевода. Каждый вызов функции с несколькими вариантами результата создаёт отдельные переводы, а несколько вызовов declareStatic() в одной строке экспоненциально увеличивают их общее количество. Используйте эту возможность с осторожностью и отдавайте предпочтение операторам ICU select, если коэффициент увеличения становится слишком большим.