Rollup

SkateJS — это библиотека для создания веб-компонентов на основе стандарта Custom Elements. Для интеграции с Rollup необходимо сначала установить SkateJS и необходимые зависимости:

npm install skatejs lit-html
npm install --save-dev rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs rollup-plugin-terser

В rollup.config.js подключаются плагины для корректной обработки модулей:

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife', // можно использовать 'es' для модульного вывода
    name: 'MyApp'
  },
  plugins: [
    resolve(),
    commonjs(),
    terser()
  ]
};

Ключевой момент: формат iife позволяет сразу использовать компонент в браузере без дополнительных загрузчиков модулей.

Создание веб-компонента на SkateJS

Компоненты в SkateJS строятся вокруг функции define и объекта с конфигурацией. Пример простого компонента:

import { define, props, Component } from 'skatejs';

class MyButton extends Component {
  static get props() {
    return {
      label: props.string
    };
  }

  renderCallback() {
    return ;
  }
}

define('my-button', MyButton);

Особенности структуры компонента:

  • props — объект с описанием свойств элемента. SkateJS автоматически отслеживает изменения и перерисовывает компонент.
  • renderCallback() — метод, вызываемый при каждой отрисовке компонента. Он может возвращать JSX или lit-html шаблон.
  • define() — регистрирует компонент в DOM по указанному имени.

Интеграция с Rollup

Rollup обеспечивает сборку всех зависимостей SkateJS и JSX в один файл. Для работы с JSX или lit-html важно использовать плагин @rollup/plugin-babel с нужными пресетами:

npm install --save-dev @rollup/plugin-babel @babel/core @babel/preset-env @babel/preset-react

Пример конфигурации Rollup с Babel:

import babel from '@rollup/plugin-babel';

plugins: [
  resolve(),
  commonjs(),
  babel({ 
    babelHelpers: 'bundled', 
    presets: ['@babel/preset-env', '@babel/preset-react']
  }),
  terser()
]

Ключевой момент: это позволяет использовать современный JavaScript и JSX-синтаксис внутри компонентов SkateJS.

Работа с событиями и методами компонента

SkateJS предоставляет встроенные механизмы для управления событиями и методами. Пример компонента с пользовательским событием:

class ClickCounter extends Component {
  static get props() {
    return { count: props.number };
  }

  constructor() {
    super();
    this.count = 0;
  }

  handleClick = () => {
    this.count++;
    this.emit('count-changed', { detail: { count: this.count } });
  }

  renderCallback() {
    return ;
  }
}

define('click-counter', ClickCounter);

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

  • this.emit() используется для генерации пользовательских событий.
  • SkateJS автоматически обновляет DOM при изменении props.

Лайфсайкл компонента

SkateJS поддерживает несколько жизненных циклов:

  • connectedCallback() — вызов при добавлении элемента в DOM.
  • disconnectedCallback() — вызов при удалении элемента из DOM.
  • updatedCallback(prevProps, prevState) — вызов при изменении свойств или состояния.

Пример использования:

class LifecycleDemo extends Component {
  static get props() { return { active: props.boolean }; }

  connectedCallback() {
    super.connectedCallback();
    console.log('Компонент добавлен в DOM');
  }

  updatedCallback(prevProps) {
    if (prevProps.active !== this.active) {
      console.log('Свойство active изменилось');
    }
  }
}

define('lifecycle-demo', LifecycleDemo);

Стилизация компонентов

SkateJS поддерживает Shadow DOM и локальные стили. Пример с использованием lit-html для стилей:

import { html, css } from 'lit-html';

class StyledComponent extends Component {
  renderCallback() {
    return html`
      
      
    `;
  }
}

define('styled-component', StyledComponent);

Ключевой момент: использование Shadow DOM гарантирует инкапсуляцию стилей, что предотвращает конфликт с глобальными CSS.

Организация проекта и Rollup

Структура проекта с SkateJS и Rollup может быть следующей:

/project
  /src
    index.js
    components/
      my-button.js
      click-counter.js
  /dist
    bundle.js
  rollup.config.js
  package.json
  • В index.js импортируются все компоненты.
  • Rollup собирает весь код в bundle.js, готовый для использования в браузере.
  • Для разработки удобно использовать rollup -c -w для автоматической пересборки при изменениях.

Оптимизация сборки

Rollup позволяет минимизировать размер бандла и исключать ненужные зависимости:

  • Плагин terser уменьшает размер JS.
  • Использование external в конфигурации исключает внешние библиотеки из сборки:
export default {
  input: 'src/index.js',
  output: { file: 'dist/bundle.js', format: 'iife', name: 'App' },
  external: ['lit-html'],
  plugins: [resolve(), commonjs(), terser()]
};
  • tree-shaking удаляет неиспользуемый код, что важно при использовании SkateJS с большим количеством компонентов.
Оглавление