Jak vytvořit webovou komponentu pomocí Stencil.js

Webové komponenty jsou sadou technologií, které umožňují vytvářet opakovaně použitelné prvky a znovu je používat v různých webových aplikacích.

Stencil.js je kompilátor, který generuje webové komponenty, které jsou kompatibilní se všemi moderními prohlížeči. Poskytuje nástroje a rozhraní API, které vám pomohou vytvářet rychlé, efektivní a škálovatelné webové komponenty.

Začínáme se Stencil.js

Chcete-li začít se Stencil.js, musíte jej nejprve inicializovat v počítači.

To provedete spuštěním následujícího příkazu v terminálu node.js:

npm init vzorník

Po spuštění příkazu se na obrazovce objeví výzva k výběru projektu, se kterým chcete začít:

Chcete-li pokračovat, vyberte možnost komponenty, zadejte název projektu a potvrďte svůj výběr:

Dále přejděte do adresáře svého projektu a nainstalujte své závislosti spuštěním těchto příkazů:

cd first-stencil-project
instalace npm

Vytvoření nové webové komponenty

Chcete-li vytvořit novou webovou komponentu v Stencil.js, vytvořte cestu ke složce jako src/komponenty. Složka komponent bude obsahovat soubor TypeScript pojmenovaný po vaší komponentě, jako Stencil.js používá jazyk TypeScript a JSX pro vývoj komponent. Složka bude také obsahovat soubor CSS, který obsahuje styl vaší komponenty.

Pokud například chcete sestavit komponentu s názvem „my-button“, vytvořte soubor s názvem moje-tlačítko.tsx a soubor CSS nazvaný moje-tlačítko.css. V moje-tlačítko.tsx definujte svou komponentu pomocí rozhraní API Stencil.js:

import { Komponenta, h } z'@stencil/core';
@Komponent({
 štítek: 'my-button',
 styleUrl: 'my-button.css',
 stín: skutečný,
})
vývoznítřídaMyButton{
 poskytnout() {
vrátit se (
Klikněte na Me</button>
 );
 }
}

Tento kód importuje Komponent a h funkce ze Stencil.js. The Komponent funkce definuje komponentu, zatímco h funkce vytváří své označení pomocí HTML.

Definujte svou komponentu pomocí @Komponent dekoratér, který přebírá objekt se třemi vlastnostmi: štítek, styleUrl, a stín.

The štítek vlastnost obsahuje název tagu komponenty. The styleUrl vlastnost určuje soubor CSS pro stylování vlastního prvku. Konečně, stín vlastnost je booleovská hodnota, která označuje, zda komponenta použije Shadow DOM k zapouzdření stylů a chování vlastního prvku. V metodě vykreslení vytvoříte prvek tlačítka.

Navíc k styleUrl vlastnost, můžete ke stylování komponenty použít další dvě vlastnosti: styl a styl URL.

The styl vlastnost definuje inline styly pro komponentu. Přebírá hodnotu řetězce, která představuje styly CSS pro komponentu:

import { Komponenta, h } z'@stencil/core';
@Komponent({
 štítek: 'my-button',
 styl: `
 knoflík {
 vycpávka: 1rem 0.5rem;
 okraj-poloměr: 12px;
 font-family: cursive;
 hranice: žádná;
 barva: #e2e2e2;
 barva pozadí: #333333;
 váha písma: tučné;
 }
`,
 stín: skutečný,
})
vývoznítřídaMyButton{
 poskytnout() {
vrátit se (
Klikněte na Me</button>
 );
 }
}

The styl URL vlastnost určuje více externích souborů CSS pro stylování komponenty. Vyžaduje pole řetězcových hodnot představujících cesty k souborům CSS:

import { Komponenta, h } z'@stencil/core';
@Komponent({
 štítek: 'my-button',
 styleUrls: ['my-button.css', 'další-tlačítko.css'],
 stín: skutečný,
})
vývoznítřídaMyButton{
 poskytnout() {
vrátit se (
Klikněte na Me</button>
 );
 }
}

Vykreslování webové komponenty

Jakmile vytvoříte webovou komponentu, můžete ji vykreslit v souboru HTML přidáním vlastní značky prvku. Zde je návod, jak můžete zahrnout komponentu my-button:

html>
<htmldir="ltr"lang="en">
<hlava>
<metaznaková sada="utf-8" />
<metanázev="výřez"obsah="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
<odkazhref=""rel="stylesheet">
<titul>Startér součástí šablonytitul>
<skripttyp="modul"src="/build/first-stencil-project.esm.js">skript>
<skriptnomodulesrc="/build/first-stencil-project.js">skript>
hlava>
<tělo>
<můj-tlačítko>můj-tlačítko>
tělo>
html>

Nyní můžete vytvářet webové komponenty pomocí Stencil.js

Stencil.js je výkonný nástroj pro vytváření webových komponent, které jsou rychlé, efektivní a škálovatelné. Jeho API a nástroje usnadňují vytváření a správu webových komponent a jeho kompatibilita se všemi moderními prohlížeči zajišťuje, že vaše komponenty budou dobře fungovat v různých webových aplikacích.

Jak jsou webové komponenty stále populárnější, Stencil.js je framework, který byste měli vzít v úvahu při vytváření opakovaně použitelných prvků pro web.