i18n интернационализация

В SvelteKit интернационализация (i18n) реализуется через подключение специализированных библиотек, которые позволяют работать с многоязычными интерфейсами, динамически менять язык приложения и локализовать контент. Основные задачи i18n включают:

  • Поддержку нескольких языков в приложении.
  • Форматирование чисел, дат и валют в зависимости от локали.
  • Динамическую подгрузку переводов.
  • Легкую интеграцию с компонентной структурой SvelteKit.

Выбор библиотеки для SvelteKit

Наиболее популярные библиотеки для i18n в SvelteKit:

  1. svelte-i18n – лёгкая и гибкая библиотека, хорошо интегрируется с реактивными сторсами Svelte.
  2. @sveltekit-i18n – предлагает готовую структуру для маршрутов и серверного рендеринга.
  3. i18next с адаптером для Svelte – мощное решение с поддержкой сложных сценариев локализации.

Установка и базовая настройка svelte-i18n

npm install svelte-i18n

Создаём файл конфигурации i18n.js:

import { register, init, getLocaleFromNavigator } from 'svelte-i18n';

register('en', () => import('./locales/en.json'));
register('ru', () => import('./locales/ru.json'));

init({
  fallbackLocale: 'en',
  initialLocale: getLocaleFromNavigator(),
});

Пояснение ключевых моментов:

  • register – динамически подключает JSON-файлы с переводами.
  • init – инициализация библиотеки с указанием fallback языка и начальной локали.
  • getLocaleFromNavigator – определяет язык пользователя по настройкам браузера.

Структура файлов переводов

Файлы JSON обычно имеют вложенную структуру для удобства:

{
  "header": {
    "title": "Добро пожаловать",
    "subtitle": "Учебник по SvelteKit"
  },
  "buttons": {
    "save": "Сохранить",
    "cancel": "Отмена"
  }
}

Такая структура облегчает поиск и поддержку переводов при масштабировании проекта.

Использование переводов в компонентах

<script>
  import { t } from 'svelte-i18n';
</script>

<h1>{$t('header.title')}</h1>
<p>{$t('header.subtitle')}</p>
<button>{$t('buttons.save')}</button>
<button>{$t('buttons.cancel')}</button>

Особенности:

  • $t является реактивным store, автоматически обновляет текст при смене языка.
  • Можно использовать вложенные ключи для упрощения организации переводов.

Динамическая смена языка

Для переключения языка в приложении используется метод locale.set:

<script>
  import { locale } from 'svelte-i18n';

  function changeLanguage(lang) {
    locale.set(lang);
  }
</script>

<sel ect on:change="{e => changeLanguage(e.target.value)}">
  <option value="en">English</option>
  <option value="ru">Русский</option>
</select>

Смена локали автоматически обновляет все компоненты, использующие $t.

Локализация чисел и дат

svelte-i18n поддерживает функции форматирования:

<script>
  import { format } fr om 'svelte-i18n';

  let price = 12345.67;
  let date = new Date();
</script>

<p>{format(price, { style: 'currency', currency: 'USD' })}</p>
<p>{format(date, { dateStyle: 'long' })}</p>
  • style: 'currency' форматирует число как валюту.
  • dateStyle позволяет управлять форматированием даты (short, medium, long, full).

Интеграция с маршрутами SvelteKit

Для многоязычных маршрутов можно использовать динамические сегменты [lang]:

src/routes/[lang]/+page.svelte

В +layout.js:

import { locale } from 'svelte-i18n';

export function load({ params }) {
  locale.set(params.lang);
  return {};
}

Это позволяет подгружать нужный язык для каждого маршрута и сохранять консистентность приложения при серверном рендеринге.

Рекомендации по масштабированию i18n

  • Разделять переводимые строки на логические группы (header, footer, forms, buttons).
  • Использовать fallback локаль для всех компонентов.
  • Подключать динамическую загрузку JSON-файлов, чтобы не увеличивать бандл при росте числа языков.
  • Проверять локализацию чисел, валют и дат для каждой целевой локали отдельно.

Расширенные возможности

  • Pluralization – поддержка множественных форм слов:
{
  "items": "{count} товар |||| {count} товара |||| {count} товаров"
}
  • Context-based translations – разные переводы для одного слова в зависимости от контекста.
  • Lazy loading – загрузка переводов только при необходимости для оптимизации производительности.

Эти методы делают i18n в SvelteKit гибким и масштабируемым инструментом для построения мультиязычных приложений с реактивным UI.

Оглавление