Трафарет JS ⇐ Васина Википедия

[wiki_en]

'''StencilJS''' — это компилятор JavaScript, который создает пользовательский элемент (веб-компоненты).
StencilJS помогает разработчикам и командам создавать и совместно использовать пользовательские компоненты (микроинтерфейс), которые не зависят от веб-платформы.
StencilJS обеспечивает абстракцию времени сборки с производительностью на уровне платформы. StencilJS — это не библиотека или фреймворк, а инструмент построения, который позволяет использовать абстракцию высокого уровня для определения компонентов пользовательского интерфейса и генерировать чистый код JavaScript, реализующий стандартные веб-компоненты. Скомпилированный код работает во всех основных браузерах. StencilJS генерирует оболочки для конкретной платформы, которые позволяют разрабатываемым пользовательским элементам использоваться с любой платформой, будь то Angular (веб-платформа)|Angular, React (программное обеспечение)|React или Vue.js.
==История==
StencilJS был создан командой Ionic (инфраструктура мобильных приложений).
==Системы проектирования==
Основная цель корпоративных команд, использующих StencilJS, — создание систем проектирования и библиотек компонентов,
==Основное использование==
Компонент StencilJS выглядит аналогично компоненту React на основе классов, но с добавлением декораторов TypeScript.


import { Component, h, Prop, State } из '@stencil/core';

@Component({
тег: 'мой-компонент',
styleUrl: 'my-comComponent.css',
тень: true // Включить теневой DOM
})
класс экспорта MyComponent {
Имя @Prop(): строка;
@State() счетчик: число = 0;

приращение() {
это.count++;
рендер() {
возврат (

Привет, {this.name}!
Количество: {this.count
this.increment()}>Приращение

);


==Примечательные особенности==

===Веб-компоненты===
StencilJS основан на стандарте веб-компонентов, который включает пользовательские элементы, теневую DOM и шаблоны HTML.

===Независимость от фреймворка===
StencilJS не зависит от фреймворка, что означает, что его можно использовать с любым фреймворком или библиотекой JavaScript, включая Angular, React, Vue.js или даже ванильный JavaScript. Такая гибкость позволяет разработчикам использовать StencilJS в своих существующих проектах без привязки к конкретной платформе.

===Встроенная маршрутизация и управление состоянием===
С помощью StencilJS можно создать целое одностраничное приложение (SPA), не полагаясь на внешние библиотеки, поскольку StencilJS предоставляет встроенные возможности маршрутизации и управления состоянием.

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

==См. также==
* Стройность
* ЛитЭлемент

* [https://stenciljs.com/docs/introduction Введение в stenciljs]
* [https://github.com/ionic-team/stencil-app-starter Starter App Stencil]
*
Программное обеспечение 2017 года
Компиляторы
Веб-разработка
Программное обеспечение, использующее лицензию MIT