Использование в vanilla JavaScript

Stencil — это инструмент для создания веб-компонентов, который генерирует высокопроизводительные компоненты с использованием стандартов веб-платформы. Он поддерживает возможности, такие как lazy loading, серверную рендеризацию и создание производительных приложений, обеспечивая разработчиков мощными инструментами для работы с компонентами.

В отличие от более сложных фреймворков, таких как React или Angular, Stencil можно интегрировать в существующие проекты без необходимости в полном переписывании структуры. Статья охватывает базовые принципы использования Stencil с Vanilla JavaScript.

Установка Stencil

Stencil можно установить с помощью менеджеров пакетов, таких как npm или yarn. Для начала необходимо создать проект и установить сам фреймворк.

  1. Создание нового проекта с использованием Stencil:
npm init stencil

  1. Следуйте подсказкам в терминале для выбора шаблона проекта. Для интеграции с Vanilla JavaScript можно выбрать шаблон компонента.

  2. Установка зависимостей:

npm install

После этого проект будет готов к использованию, и можно переходить к разработке компонентов.

Создание первого компонента

Stencil использует Web Components API для создания кастомных элементов, которые могут быть использованы в любом веб-приложении. Структура компонента в Stencil состоит из трех основных частей: HTML-шаблона, логики (JavaScript) и стилей (CSS).

  1. Создайте файл компонента, например my-component.tsx (хотя в Vanilla JavaScript файлы будут .js):
import { Component, h } from '@stencil/core';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true
})
export class MyComponent {
  render() {
    return (
      <div>
        <h1>Hello, World!</h1>
      </div>
    );
  }
}

В данном примере используется TypeScript, однако для Vanilla JavaScript можно использовать следующий код:

import { h, Component } from 'stencil';

class MyComponent {
  constructor() {
    this.render = this.render.bind(this);
  }

  render() {
    return `
      <div>
        <h1>Hello, World!</h1>
      </div>
    `;
  }
}

customElements.define('my-component', MyComponent);

Использование Web Components

После создания компонента его можно интегрировать в любой HTML-документ. Для этого необходимо подключить скомпилированный JavaScript файл, содержащий компонент. Когда проект скомпилирован с помощью Stencil, итоговый файл обычно располагается в папке dist.

<script src="path-to-your-component.js"></script>
<my-component></my-component>

Такой подход позволяет интегрировать компоненты, созданные с помощью Stencil, даже в существующие проекты без необходимости в переписывании кода.

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

Stencil поддерживает работу с состоянием компонента. Это позволяет отслеживать изменения данных внутри компонента и автоматически обновлять DOM. Для управления состоянием в Vanilla JavaScript можно использовать простое состояние в классе компонента.

Пример реализации состояния:

import { h, Component, State } from 'stencil';

class MyComponent extends Component {
  @State() count = 0;

  increment() {
    this.count += 1;
  }

  render() {
    return `
      <div>
        <h1>Count: ${this.count}</h1>
        <button oncl ick="${() => this.increment()}">Increment</button>
      </div>
    `;
  }
}

customElements.define('my-component', MyComponent);

В этом примере значение переменной count отслеживается с помощью декоратора @State, и его изменение автоматически отражается в интерфейсе пользователя.

Взаимодействие с пропсами

Stencil позволяет передавать данные компонентам через свойства (props). В Vanilla JavaScript это также реализуется через простое управление аттрибутами и внутренним состоянием компонента.

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

import { h, Component, Prop } from 'stencil';

class MyComponent extends Component {
  @Prop() message;

  render() {
    return `
      <div>
        <h1>${this.message}</h1>
      </div>
    `;
  }
}

customElements.define('my-component', MyComponent);

Для использования компонента с пропсом можно передать значение через аттрибут HTML-элемента:

<my-component message="Hello, Stencil!"></my-component>

Значение аттрибута будет передано в компонент как свойство message.

Управление событиями

Для обработки пользовательских событий, таких как клики или изменения, Stencil использует механизм событий. В Vanilla JavaScript события можно легко интегрировать с помощью стандартных методов DOM.

Пример:

import { h, Component, EventEmitter, Event } from 'stencil';

class MyComponent extends Component {
  @Event() myEvent: EventEmitter;

  handleClick() {
    this.myEvent.emit('Button clicked');
  }

  render() {
    return `
      <div>
        <button oncl ick="${() => this.handleClick()}">Click me</button>
      </div>
    `;
  }
}

customElements.define('my-component', MyComponent);

Когда кнопка будет нажата, событие myEvent будет сгенерировано и передано. Это событие можно обработать в родительском элементе.

<my-component onmyEv ent="alert('Button was clicked')"></my-component>

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

Stencil поддерживает использование обычных CSS или Scss для стилизации компонентов. Каждый компонент может быть стилизован индивидуально. Стиль можно подключить через аттрибут styleUrl.

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true
})

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

<style>
  h1 {
    color: red;
  }
</style>

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

Компиляция и сборка проекта

Stencil автоматически компилирует код компонентов в оптимизированный JavaScript, который можно использовать в любом проекте. Сборка проекта осуществляется с помощью команды:

npm run build

Это создаст готовые для использования файлы JavaScript в папке dist.

Подключение и интеграция

После сборки проект можно интегрировать в любой веб-проект, подключив компоненты через CDN или локально. Важно убедиться, что компоненты компилируются с нужной настройкой, которая поддерживает старые браузеры, если это необходимо.

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

<script src="https://cdn.jsdelivr.net/npm/my-component/dist/my-component.js"></script>
<my-component message="Hello, world!"></my-component>

Заключение

Stencil предлагает разработчикам гибкость и удобство при создании и использовании веб-компонентов. Использование Stencil в Vanilla JavaScript позволяет создавать чистые, независимые компоненты, которые можно интегрировать в любые проекты, независимо от используемых технологий.

Оглавление