Интернационализация форм

Интернационализация (i18n) форм в Riot.js представляет собой процесс адаптации пользовательских интерфейсов к различным языкам и региональным особенностям. Основная цель — сделать формы понятными и удобными для пользователей с разными языковыми предпочтениями, сохраняя при этом динамичность и реактивность компонентов.

Подключение и настройка локализации

Для работы с i18n в Riot.js часто используют сторонние библиотеки, такие как i18next или vue-i18n-подобные адаптеры, так как Riot не имеет встроенного механизма интернационализации. Основная схема работы:

  1. Установка библиотеки:
npm install i18next
  1. Инициализация в проекте:
import i18next from 'i18next';

i18next.init({
  lng: 'ru', // язык по умолчанию
  resources: {
    ru: {
      translation: {
        username: "Имя пользователя",
        password: "Пароль",
        submit: "Отправить"
      }
    },
    en: {
      translation: {
        username: "Username",
        password: "Password",
        submit: "Submit"
      }
    }
  }
});
  1. Подключение в Riot-компоненте:
import { component, html } from 'riot';
import i18next from 'i18next';

component('login-form', html`
  <form onsub mit="{ submit }">
    <label>{ i18next.t('username') }</label>
    <input type="text" name="username" required>
    
    <label>{ i18next.t('password') }</label>
    <input type="password" name="password" required>
    
    <button type="submit">{ i18next.t('submit') }</button>
  </form>
`, function() {
  this.submit = (e) => {
    e.preventDefault();
    console.log('Форма отправлена');
  }
});

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

Riot.js позволяет динамически изменять язык приложения без перезагрузки страницы. Основная логика:

  1. Вызов метода changeLanguage библиотеки i18next:
i18next.changeLanguage('en', () => {
  this.update(); // обновление компонента Riot.js
});
  1. Использование реактивного свойства для хранения текущего языка:
this.currentLang = 'ru';

this.setLanguage = (lang) => {
  this.currentLang = lang;
  i18next.changeLanguage(lang, () => this.update());
};
  1. В шаблоне можно создать переключатель:
<select oncha nge="{ e => setLanguage(e.target.value) }">
  <option value="ru">Русский</option>
  <option value="en">English</option>
</select>

Интернационализация сообщений об ошибках

Формы часто содержат валидацию, и важно, чтобы сообщения об ошибках также локализовались.

  1. Определение локализованных сообщений:
i18next.init({
  lng: 'ru',
  resources: {
    ru: {
      translation: {
        required: "Поле {field} обязательно для заполнения",
        email: "Введите корректный адрес электронной почты"
      }
    },
    en: {
      translation: {
        required: "{field} is required",
        email: "Enter a valid email address"
      }
    }
  }
});
  1. Динамическая генерация сообщений:
validateField(field, value) {
  if (!value) {
    return i18next.t('required', { field: i18next.t(field) });
  }
  if (field === 'email' && !/\S+@\S+\.\S+/.test(value)) {
    return i18next.t('email');
  }
  return '';
}

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

Riot.js позволяет связывать текстовые атрибуты напрямую с локализованными строками:

<input type="text" name="username" placeholder="{ i18next.t('username') }">
<input type="password" name="password" placeholder="{ i18next.t('password') }">

Для подсказок можно использовать <small> или <span> с динамическим текстом:

<small>{ i18next.t('passwordHint') }</small>

Поддержка чисел, дат и валют

Интернационализация не ограничивается только текстом. Riot.js совместно с библиотекой Intl позволяет форматировать числа, даты и валюту в зависимости от локали:

this.formatDate = (date) => {
  return new Intl.DateTimeFormat(this.currentLang, { 
    year: 'numeric', month: 'long', day: 'numeric' 
  }).format(date);
};

this.formatCurrency = (amount) => {
  return new Intl.NumberFormat(this.currentLang, { 
    style: 'currency', currency: 'USD' 
  }).format(amount);
};

Использование в шаблоне:

<p>{ formatDate(new Date()) }</p>
<p>{ formatCurrency(1234.56) }</p>

Автоматическое обновление компонентов при смене языка

Riot.js компоненты можно сделать полностью реактивными к смене языка. Основная стратегия:

  1. Создать глобальный объект состояния:
export const i18nState = {
  lang: 'ru',
  listeners: [],
  setLang(lang) {
    this.lang = lang;
    i18next.changeLanguage(lang);
    this.listeners.forEach(fn => fn());
  },
  subscribe(fn) {
    this.listeners.push(fn);
  }
};
  1. Подписка компонентов на изменения:
i18nState.subscribe(() => this.update());
  1. Вызов изменения языка:
i18nState.setLang('en');

Таким образом все компоненты автоматически обновляются при смене языка, включая формы, сообщения об ошибках и динамический контент.

Практические рекомендации

  • Соблюдать консистентность ключей: использовать одинаковый формат ключей (snake_case или camelCase) для всех переводов.
  • Хранить переводы в отдельных файлах: это упрощает масштабирование и поддержку.
  • Избегать жестко закодированных строк: каждая текстовая метка должна быть локализована.
  • Проверять правильность форматирования дат и чисел для разных локалей, чтобы избежать путаницы.
  • Тестировать на нескольких языках одновременно, особенно при динамическом обновлении интерфейса.

Интеграция интернационализации в формы Riot.js позволяет создавать гибкие и адаптивные интерфейсы, которые одинаково корректно работают для пользователей из разных стран, обеспечивая удобство и правильное отображение информации.

Оглавление