Простейший пример компонента

Stencil — это фреймворк для создания веб-компонентов, который предоставляет простые, но мощные инструменты для разработки современных и кроссбраузерных пользовательских интерфейсов. В этой главе будет рассмотрен базовый пример создания компонента с использованием Stencil.

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

Простейший компонент: “my-component”

Для создания первого компонента в Stencil необходимо выполнить несколько шагов. Рассмотрим компонент с именем my-component.

Шаг 1: Создание компонента

После установки и настройки Stencil можно начать разработку компонента. В корне проекта необходимо создать файл компонента с расширением .tsx, например, my-component.tsx.

Пример базовой структуры компонента:

import { Component, h } from '@stencil/core';

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

Разбор кода:

  1. Импорт необходимых модулей:

    • Component: Это декоратор, который используется для определения компонента.
    • h: Функция для создания элементов в стиле JSX, которая генерирует виртуальный DOM.

  2. Декоратор @Component: Декоратор @Component используется для определения метаданных компонента. В нем указывается:

    • tag: Имя HTML-тега компонента. В этом примере это my-component.
    • styleUrl: Путь к CSS-файлу компонента. Этот стиль будет применяться к компоненту.
    • shadow: Включает или выключает использование теневого DOM (Shadow DOM). В данном случае установлено значение true, что означает использование Shadow DOM для изоляции стилей и структуры компонента.

  3. Метод render: Метод render возвращает JSX (или в случае Stencil — JSX-подобный синтаксис), который будет отображаться в компоненте. Здесь возвращается простой HTML-код с заголовком и параграфом.

Шаг 2: Стили компонента

Чтобы компонент выглядел более интересно, можно добавить базовый CSS. Создается файл my-component.css в той же директории, где находится компонент:

h1 {
  color: #3498db;
}

p {
  font-size: 18px;
  color: #2c3e50;
}

Этот CSS будет применяться только внутри компонента благодаря использованию Shadow DOM, если опция shadow: true указана в декораторе.

Шаг 3: Использование компонента

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

<my-component></my-component>

Важно, чтобы при сборке проекта Stencil создал файлы, включающие скомпилированный компонент. После этого можно подключить его к HTML-странице.

Работа с аттрибутами

Stencil позволяет работать с аттрибутами компонентов для динамического изменения их состояния. Аттрибуты могут быть привязаны к свойствам компонента и изменять поведение или внешний вид компонента.

Пример с аттрибутом

В следующем примере добавим аттрибут для отображения персонализированного сообщения:

import { Component, Prop, h } from '@stencil/core';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true
})
export class MyComponent {
  @Prop() name: string;

  render() {
    return (
      <div>
        <h1>Hello, {this.name}!</h1>
        <p>This is my first Stencil component.</p>
      </div>
    );
  }
}

В этом примере:

  • Аттрибут name определен как @Prop(). Это позволяет передавать значение аттрибута при использовании компонента.
  • Значение аттрибута подставляется в шаблон с помощью JSX-синтаксиса {this.name}.

Теперь компонент можно использовать с аттрибутом name, например:

<my-component name="John"></my-component>

Результат: на экране отобразится “Hello, John!”.

Реактивные свойства

Stencil также поддерживает реактивные свойства, которые позволяют автоматически обновлять компонент при изменении состояния. Для этого используются декораторы @State и @Watch.

Пример с реактивным свойством

Добавим реактивное свойство для отслеживания счетчика:

import { Component, State, h } from '@stencil/core';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true
})
export class MyComponent {
  @State() count: number = 0;

  increment() {
    this.count++;
  }

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

Здесь:

  • Свойство count определено с использованием декоратора @State, что делает его реактивным.
  • Метод increment увеличивает значение count на 1.
  • Кнопка вызывает этот метод при клике, и значение count автоматически обновляется в интерфейсе.

Подключение события

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

<button onCl ick={() => this.increment()}>Increment</button>

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

Заключение

Создание простых компонентов с использованием Stencil включает в себя несколько базовых шагов: определение компонента через декоратор @Component, использование шаблонов в JSX-подобном синтаксисе, работа с аттрибутами через декоратор @Prop и создание реактивных свойств через @State. Благодаря этому подходу можно создавать мощные, но в то же время простые и поддерживаемые компоненты для веб-приложений.

Оглавление