CDN интеграция

SkateJS — это библиотека для создания веб-компонентов на базе стандартов Custom Elements и Shadow DOM. Одним из удобных способов интеграции является использование CDN, что позволяет быстро подключить библиотеку без установки через npm.

Подключение скрипта

Для подключения SkateJS через CDN достаточно добавить тег <script> в HTML-файл:

<script type="module" src="https://cdn.skatejs.dev/skatejs.min.js"></script>

Важно использовать type="module", так как SkateJS построен с поддержкой ES-модулей. При подключении через обычный <script> без модуля возможны ошибки импорта и недоступность ключевых функций.

Создание компонента после подключения

После подключения через CDN доступна глобальная переменная skate. Определение веб-компонента выполняется с помощью функции skate.define:

skate.define('my-element', {
  shadow: true,
  render(elem) {
    elem.shadowRoot.innerHTML = `<p>Привет, SkateJS!</p>`;
  }
});

Ключевые моменты:

  • shadow: true — включение Shadow DOM для изоляции стилей.
  • render(elem) — функция рендера, принимающая корневой элемент компонента.
  • skate.define(tagName, options) — регистрирует новый компонент.

Использование компонент в HTML

После определения компонента его можно использовать как обычный HTML-тег:

<my-element></my-element>

Браузер автоматически создаст экземпляр компонента и применит рендер, описанный в функции render.

Интеграция с модулями и сторонними библиотеками

SkateJS через CDN совместим с ES-модулями. Для подключения сторонних модулей можно использовать <script type="module"> с локальными или CDN-модулями:

<script type="module">
  import { h } from 'https://cdn.skatejs.dev/skatejs-h';
  
  skate.define('my-h-element', {
    shadow: true,
    render(elem) {
      elem.shadowRoot.appendChild(h('p', 'Элемент с h-функцией'));
    }
  });
</script>

Преимущества такой интеграции:

  • Не требуется сборка через npm или bundler.
  • Можно быстро протестировать компоненты в любом HTML-файле.
  • Подходит для прототипирования и обучения.

Управление версиями

CDN предоставляет возможность фиксировать версию библиотеки:

<script type="module" src="https://cdn.skatejs.dev/v6.0.0/skatejs.min.js"></script>

Фиксирование версии важно для стабильности приложения и предотвращения неожиданных изменений API при обновлениях.

Использование в браузерах без поддержки модулей

Для старых браузеров, не поддерживающих ES-модули, требуется полифилл. Обычно это делается через подключение:

<script src="https://cdn.skatejs.dev/webcomponents-loader.js"></script>

После этого можно подключать SkateJS, и библиотека корректно будет работать с Custom Elements и Shadow DOM.

Поддержка TypeScript

Даже при использовании CDN возможна интеграция с TypeScript. Для этого достаточно подключить типы через <script> или локальный .d.ts файл, чтобы получить автодополнение и проверку типов:

<script type="module">
  /** @type {import('skatejs').SkateElement} */
  const elem = document.createElement('my-element');
</script>

Настройка кеширования и производительности

CDN позволяет использовать встроенное кеширование. Для оптимизации загрузки компонентов рекомендуется:

  • Использовать фиксированные версии.
  • Подключать библиотеку внизу <body> для уменьшения блокировки рендеринга.
  • Минимизировать количество импортов сторонних модулей через CDN.

Пример комплексного компонента через CDN

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>SkateJS CDN</title>
  <script type="module" src="https://cdn.skatejs.dev/skatejs.min.js"></script>
</head>
<body>
  <my-card></my-card>

  <script type="module">
    skate.define('my-card', {
      shadow: true,
      render(elem) {
        elem.shadowRoot.innerHTML = `
          <style>
            div { padding: 16px; background: #f0f0f0; border-radius: 8px; }
          </style>
          <div>
            <h2>Карточка SkateJS</h2>
            <p>Пример компонента с Shadow DOM</p>
          </div>
        `;
      }
    });
  </script>
</body>
</html>

Этот пример демонстрирует полную интеграцию SkateJS через CDN, использование Shadow DOM, встроенных стилей и рендера компонентов, без необходимости сборки или установки дополнительных инструментов.

Оглавление