Компиляция Riot компонентов

Компиляция в Riot.js — процесс преобразования пользовательских компонентов, написанных в формате .riot, в чистый JavaScript, готовый к выполнению в браузере. Riot использует собственный синтаксис тегов, объединяющий HTML, CSS и JavaScript в одном файле, что обеспечивает модульность и удобство поддержки кода. Компилятор разбирает структуру компонента, обрабатывает шаблоны и скрипты, а также генерирует эффективный код для реактивного обновления интерфейса.

Структура Riot компонента

Riot компонент обычно состоит из трёх частей:

  1. HTML-разметка Определяет структуру интерфейса. Поддерживается привязка данных через двойные фигурные скобки {{ }} и директивы Riot, такие как if, each и show.

  2. CSS-стили Размещаются внутри тега <style> и ограничены областью компонента благодаря локальной изоляции стилей, что предотвращает конфликты с другими компонентами.

  3. JavaScript-код Размещается внутри тега <script> и содержит логику компонента: методы, обработчики событий и реактивные свойства. Доступ к свойствам и методам компонента осуществляется через объект this.

Пример минимального компонента:

<my-counter>
  <p>Счётчик: {count}</p>
  <button oncl ick={increment}>+</button>

  <script>
    this.count = 0
    this.increment = () => this.count++
  </script>

  <style>
    p { font-weight: bold; }
    button { padding: 5px 10px; }
  </style>
</my-counter>

Компиляция и её этапы

Компиляция Riot компонентов может выполняться несколькими способами: через CLI, сборщики типа Webpack или Rollup, а также в браузере во время выполнения.

Основные этапы компиляции:

  1. Парсинг шаблона Разбор HTML и выявление директив, таких как each, if, show, а также привязок данных. На этом этапе Riot создаёт абстрактное дерево компонента.

  2. Обработка скриптов Извлечение JavaScript-кода, связывание его с жизненным циклом компонента, создание реактивных свойств и методов.

  3. Генерация функций рендеринга Riot преобразует шаблон в функции, которые обновляют DOM при изменении состояния. Функции рендеринга минимизируют количество операций с DOM, выполняя обновление только изменённых элементов.

  4. Интеграция стилей CSS преобразуется в уникальные селекторы для каждого компонента. Это обеспечивает локальную область действия стилей без глобального вмешательства.

  5. Вывод итогового JavaScript-кода На этом этапе создаётся полноценный JS-файл, который можно подключать к приложению. Итоговый код содержит все функции, данные и стили, объединённые в единый модуль.

CLI компиляция

Для командной строки используется пакет @riotjs/compiler. Простейший пример компиляции:

npx riot src/components -o dist/components

Здесь:

  • src/components — папка с .riot файлами.
  • dist/components — папка, куда будут записаны скомпилированные JS-модули.

Дополнительно можно использовать флаги:

  • --type es — для генерации ES-модулей.
  • --format cjs — для CommonJS модулей.
  • --minify — для минификации итогового кода.

Сборка через Webpack и Rollup

Riot интегрируется с современными сборщиками, что позволяет использовать Hot Module Replacement, Tree Shaking и другие оптимизации. Для Webpack используется загрузчик @riotjs/webpack-loader:

module.exports = {
  module: {
    rules: [
      {
        test: /\.riot$/,
        use: [
          {
            loader: '@riotjs/webpack-loader',
            options: { hot: true }
          }
        ]
      }
    ]
  }
}

Для Rollup используется плагин @riotjs/rollup-plugin:

import riot from '@riotjs/rollup-plugin';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm'
  },
  plugins: [riot()]
}

Реактивность и оптимизация

Компилятор Riot автоматически создаёт наблюдатели за изменениями свойств компонента. Это позволяет обновлять только те участки DOM, которые действительно изменились, минимизируя перерисовку.

Ключевые моменты оптимизации:

  • Использование each с уникальным key для эффективного отслеживания элементов.
  • Локальные свойства (this.property) вместо глобальных переменных для предотвращения ненужных обновлений.
  • Минимизация вычислений в шаблонах: сложные вычисления лучше выполнять в методах или геттер-вычисляемых свойствах.

Жизненный цикл компонентов

Компилятор Riot интегрирует JavaScript-код компонента с жизненным циклом:

  • onBeforeMount — перед монтированием компонента.
  • onMounted — после вставки в DOM.
  • onBeforeUpdate — перед обновлением состояния.
  • onUpdated — после обновления DOM.
  • onBeforeUnmount — перед удалением компонента.
  • onUnmounted — после удаления компонента.

Эти хуки позволяют выполнять операции с DOM, обращаться к внешним API и управлять реактивными свойствами безопасно в контексте компиляции.

Встроенная компиляция в браузере

Riot поддерживает компиляцию компонентов прямо в браузере, что полезно для прототипирования. Достаточно подключить riot+compiler.min.js и использовать функцию riot.compile():

<script src="riot+compiler.min.js"></script>
<script>
  riot.compile(() => {
    riot.mount('my-counter')
  })
</script>

Компилятор анализирует DOM на наличие <my-counter> и создаёт соответствующий JS-модуль на лету.

Итоговое понимание

Компиляция Riot компонентов превращает декларативный код с HTML, CSS и JS в высокоэффективные функции рендеринга. Понимание всех этапов — от парсинга до генерации реактивных функций — критично для построения крупных приложений с минимальными накладными расходами и максимальной отзывчивостью интерфейса.

Оглавление