Stencil docs output

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

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

Основные характеристики Stencil

  1. Web Components Stencil ориентирован на создание стандартных Web Components, которые являются нативными элементами HTML, поддерживаемыми всеми современными браузерами. Это позволяет создать компоненты, которые могут работать независимо от фреймворков и легко интегрироваться в любое приложение.

  2. Поддержка SSR (Server-Side Rendering) Stencil поддерживает рендеринг на сервере, что позволяет улучшить производительность при загрузке страницы, а также предоставляет возможность SEO-оптимизации для веб-приложений.

  3. Поддержка TypeScript В Stencil активно используется TypeScript, что помогает разработчикам писать типизированный и более безопасный код. Благодаря этому, с помощью Stencil можно легко использовать типы, интерфейсы и другие возможности TypeScript.

  4. Оптимизация на уровне сборки Stencil имеет встроенную систему оптимизации, которая автоматически минимизирует размер бандла, разделяет код на более мелкие чанки и позволяет избежать лишних зависимостей.

  5. Поддержка других фреймворков Хотя Stencil разрабатывает Web Components, компоненты, созданные с его помощью, можно интегрировать в проекты на любых популярных фреймворках, таких как Angular, React или Vue. Это позволяет легко использовать существующий код и компоненты в других экосистемах.

Конфигурация проекта в Stencil

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

npm init stencil

Эта команда создаст новый проект с необходимой структурой, настроенными зависимостями и примером компонента.

Основной конфигурационный файл проекта — это stencil.config.ts. Этот файл отвечает за настройку различных аспектов проекта, включая настройки сборки, пути к компонентам, поддержку различных форматов выходных данных и т. д.

Пример базовой конфигурации:

import { Config } from '@stencil/core';

export const config: Config = {
  namespace: 'mycomponent',
  globalStyle: 'src/global/app.css',
  outputTargets:[
    {
      type: 'dist',
      esmLoaderPath: '../loader'
    },
    {
      type: 'www',
      serviceWorker: null, // Disable service workers
      buildDir: 'www',
    }
  ],
};

Здесь можно настроить такие параметры как:

  • namespace — определяет префикс для всех сгенерированных файлов;
  • globalStyle — указывает на глобальные стили проекта;
  • outputTargets — настраивает способы вывода сборки (например, для использования в виде пакета NPM или создания веб-приложения).

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

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

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

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

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

  render() {
    return <div>Hello, Stencil!</div>;
  }
}

Основные моменты:

  • @Component — декоратор, который указывает на создание компонента. Внутри указываются:

    • tag — имя компонента, которое будет использоваться в HTML;
    • styleUrl — путь к стилям компонента;
    • shadow — указывает, использовать ли тень (Shadow DOM) для изоляции стилей компонента.

  • Метод render() возвращает JSX-код, который определяет разметку компонента.

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

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

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

@Component({
  tag: 'my-button',
  styleUrl: 'my-button.css',
  shadow: true,
})
export class MyButton {

  @Prop() label: string;

  render() {
    return <button>{this.label}</button>;
  }
}

Здесь свойство label передается в компонент через атрибут в HTML:

<my-button label="Click Me"></my-button>

Чтобы добавить событие, нужно использовать декоратор Event. Например, для создания кнопки, которая отправляет событие при нажатии:

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

@Component({
  tag: 'my-button',
  styleUrl: 'my-button.css',
  shadow: true,
})
export class MyButton {

  @Event() buttonClicked: EventEmitter;

  handleClick() {
    this.buttonClicked.emit();
  }

  render() {
    return <button onCl ick={() => this.handleClick()}>Click Me</button>;
  }
}

Здесь buttonClicked — это событие, которое будет отправлено при клике на кнопку. Для обработки события можно подписаться на него в родительском компоненте:

<my-button onButtonClic ked={() => alert('Button clicked!')}></my-button>

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

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

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

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

@Component({
  tag: 'my-counter',
  styleUrl: 'my-counter.css',
  shadow: true,
})
export class MyCounter {

  @State() count: number = 0;

  increment() {
    this.count++;
  }

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

Каждый раз при изменении состояния (например, при увеличении счетчика) компонент будет перерендериваться, и новое значение отобразится на экране.

Интеграция с другими фреймворками

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

Для использования компонента в Angular необходимо импортировать его модуль в соответствующий модуль Angular:

import { defineCustomElements } from 'my-component/dist/loader';
import { NgModule } from '@angular/core';

@NgModule({
  declarations: [],
  imports: [],
  providers: [],
  bootstrap: []
})
export class AppModule {
  constructor() {
    defineCustomElements(window);
  }
}

В React компоненты Stencil можно использовать как обычные JSX-элементы:

import { MyButton } from 'my-component';

function App() {
  return <my-button label="Click Me"></my-button>;
}

Оптимизация и производительность

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

Stencil также поддерживает tree shaking — процесс удаления неиспользуемого кода, что позволяет исключить из финального бандла ненужные части библиотеки или приложения.

Заключение

Stencil предоставляет мощный набор инструментов для создания производительных и независимых компонентов, которые можно интегрировать в различные фреймворки и проекты. Его поддержка Web Components, TypeScript, SSR и оптимизация сборки делают его идеальным выбором для разработчиков, стремящихся к созданию высококачественных компонентов с минимальными усилиями.

Оглавление