Kako izgraditi web komponentu pomoću Stencil.js

Web komponente skup su tehnologija koje vam omogućuju stvaranje elemenata za višekratnu upotrebu i njihovo ponovno korištenje u različitim web aplikacijama.

Stencil.js je kompajler koji generira web komponente koje su kompatibilne sa svim modernim preglednicima. Pruža alate i API-je koji vam pomažu u izgradnji brzih, učinkovitih, skalabilnih web komponenti.

Početak rada sa Stencil.js

Da biste započeli s Stencil.js, prvo ga trebate inicijalizirati na svom računalu.

Učinite to pokretanjem sljedeće naredbe u svom node.js terminalu:

npm init šablona

Nakon pokretanja naredbe, na zaslonu će se pojaviti upit za odabir projekta s kojim želite započeti:

Za nastavak odaberite opciju komponente, unesite naziv svog projekta i potvrdite svoj odabir:

Zatim prijeđite u direktorij svog projekta i instalirajte svoje ovisnosti izvođenjem ovih naredbi:

cd prvi-stencil-projekt
npm instalirati

Stvaranje nove web komponente

Da biste stvorili novu web komponentu u Stencil.js, stvorite put mape poput src/komponente. Mapa komponenti sadržavat će datoteku TypeScript nazvanu prema vašoj komponenti, kao Stencil.js koristi jezik TypeScript i JSX za razvoj komponenti. Mapa će također sadržavati CSS datoteku koja sadrži stil vaše komponente.

Na primjer, ako želite izgraditi komponentu pod nazivom "my-button", stvorite datoteku pod nazivom moj-gumb.tsx i CSS datoteka tzv moj-gumb.css. u moj-gumb.tsx datoteku, definirajte svoju komponentu koristeći Stencil.js API:

uvoz { Komponenta, h } iz'@stencil/core';
@Component({
 označiti: 'moj gumb',
 styleUrl: 'my-button.css',
 sjena: pravi,
})
izvozrazredaMyButton{
 render() {
povratak (
Kliknite Me</button>
 );
 }
}

Ovaj kod uvozi komponenta i h funkcije iz Stencil.js. The komponenta funkcija definira komponentu, dok h funkcija stvara svoju oznaku koristeći HTML.

Definirajte svoju komponentu pomoću @Komponenta dekorater, koji uzima objekt s tri svojstva: označiti, styleUrl, i sjena.

The označiti svojstvo sadrži naziv oznake komponente. The styleUrl svojstvo navodi CSS datoteku za stiliziranje prilagođenog elementa. Na kraju, sjena svojstvo je Booleova vrijednost koja pokazuje hoće li komponenta koristiti Shadow DOM za enkapsulaciju stilova i ponašanja prilagođenog elementa. U metodi renderiranja stvarate element gumba.

Uz to styleUrl svojstvo, možete koristiti još dva svojstva za stiliziranje svoje komponente: stil i styleUrls.

The stil svojstvo definira ugrađene stilove za komponentu. Potrebna je vrijednost niza koja predstavlja CSS stilove za komponentu:

uvoz { Komponenta, h } iz'@stencil/core';
@Component({
 označiti: 'moj gumb',
 stil: `
 dugme {
 padding: 1rem 0.5rem;
 radijus granice: 12px;
 obitelj-fontova: kurziv;
 granica: nema;
 boja: #e2e2e2;
 boja pozadine: #333333;
 font-weight: bold;
 }
`,
 sjena: pravi,
})
izvozrazredaMyButton{
 render() {
povratak (
Kliknite Me</button>
 );
 }
}

The styleUrls Svojstvo navodi više vanjskih CSS datoteka za stiliziranje komponente. Potreban je niz vrijednosti niza koji predstavljaju staze do CSS datoteka:

uvoz { Komponenta, h } iz'@stencil/core';
@Component({
 označiti: 'moj gumb',
 styleUrls: ['my-button.css', 'drugi-gumb.css'],
 sjena: pravi,
})
izvozrazredaMyButton{
 render() {
povratak (
Kliknite Me</button>
 );
 }
}

Renderiranje web komponente

Nakon što ste izradili svoju web komponentu, možete je prikazati u HTML datoteci dodavanjem prilagođene oznake elementa. Evo kako možete uključiti komponentu my-button:

html>
<htmlred="ltr"jezik="en">
<glava>
<metaskup znakova="utf-8" />
<metaIme="viewport"sadržaj="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
<vezahref=""rel="list stilova">
<titula>Početni dio šablonetitula>
<skriptatip="modul"src="/build/first-stencil-project.esm.js">skripta>
<skriptanomodulsrc="/build/first-stencil-project.js">skripta>
glava>
<tijelo>
<moj-gumb>moj-gumb>
tijelo>
html>

Sada možete stvarati web komponente koristeći Stencil.js

Stencil.js moćan je alat za izradu web komponenti koje su brze, učinkovite i skalabilne. Njegov API i alati olakšavaju stvaranje i upravljanje web komponentama, a njegova kompatibilnost sa svim modernim preglednicima osigurava da će vaše komponente dobro raditi na različitim web aplikacijama.

Kako web komponente postaju sve popularnije, Stencil.js je okvir koji biste trebali uzeti u obzir pri izradi elemenata za višekratnu upotrebu za web.