Web-komponentin rakentaminen Stencil.js: n avulla

Verkkokomponentit ovat joukko teknologioita, joiden avulla voit luoda uudelleenkäytettäviä elementtejä ja käyttää niitä uudelleen eri verkkosovelluksissa.

Stencil.js on kääntäjä, joka luo verkkokomponentteja, jotka ovat yhteensopivia kaikkien nykyaikaisten selainten kanssa. Se tarjoaa työkaluja ja sovellusliittymiä, joiden avulla voit rakentaa nopeita, tehokkaita ja skaalautuvia verkkokomponentteja.

Stencil.js: n käytön aloittaminen

Jotta voit aloittaa Stencil.js: n käytön, sinun on ensin alustettava se tietokoneellasi.

Tee tämä suorittamalla seuraava komento node.js-päätteessäsi:

npm init stencil

Kun olet suorittanut komennon, näyttöön tulee kehote, jossa voit valita, minkä projektin haluat aloittaa:

Jatka valitsemalla komponenttivaihtoehto, kirjoittamalla projektisi nimi ja vahvistamalla valintasi:

Vaihda seuraavaksi projektisi hakemistoon ja asenna riippuvuudet suorittamalla nämä komennot:

cd ensimmäinen stencil-projekti
npm asennus

Uuden verkkokomponentin luominen

Luo uusi verkkokomponentti Stencil.js: ssä luomalla kansiopolku kuten src/komponentit. Komponentit-kansio sisältää TypeScript-tiedoston, joka on nimetty komponentin mukaan nimellä Stencil.js käyttää TypeScript-kieltä ja JSX komponenttien kehittämiseen. Kansio sisältää myös CSS-tiedoston, joka sisältää komponenttisi tyylin.

Jos esimerkiksi haluat rakentaa komponentin nimeltä "my-button", luo tiedosto nimeltä my-button.tsx ja CSS-tiedosto nimeltä my-button.css. Vuonna my-button.tsx tiedostoa, määritä komponentti käyttämällä Stencil.js-sovellusliittymää:

tuonti { Komponentti, h } alkaen'@stencil/core';
@Component({
 tag: "oma-painike",
 styleUrl: "my-button.css",
 varjo: totta,
})
viedäluokkaaMyButton{
 render() {
palata (
Napsauta Minä</button>
 );
 }
}

Tämä koodi tuo Komponentti ja h toimintoja Stencil.js: stä. The Komponentti toiminto määrittää komponentin, kun taas h toiminto luo merkintönsä HTML: n avulla.

Määritä komponentti käyttämällä @Komponentti sisustaja, joka ottaa esineen, jolla on kolme ominaisuutta: tag, styleUrl, ja varjo.

The tag ominaisuus sisältää komponentin tunnisteen nimen. The styleUrl ominaisuus määrittää CSS-tiedoston mukautetun elementin muotoilua varten. Lopuksi, varjo ominaisuus on boolen arvo, joka osoittaa, käyttääkö komponentti Shadow DOM: ia mukautetun elementin tyylien ja toiminnan kapseloimiseen. Renderöintimenetelmässä luot painikeelementin.

Lisäksi styleUrl ominaisuutta, voit käyttää kahta muuta ominaisuutta komponenttisi tyyliin: tyyli ja styleUrls.

The tyyli ominaisuus määrittää komponentin rivityylit. Se ottaa merkkijonoarvon, joka edustaa komponentin CSS-tyylejä:

tuonti { Komponentti, h } alkaen'@stencil/core';
@Component({
 tag: "oma-painike",
 tyyli: `
 painike {
 pehmuste: 1rem 0.5rem;
 rajan säde: 12px;
 font-family: kursiivinen;
 reuna: ei mitään;
 väri: #e2e2e2;
 taustaväri: #333333;
 fontin paino: lihavoitu;
 }
`,
 varjo: totta,
})
viedäluokkaaMyButton{
 render() {
palata (
Napsauta Minä</button>
 );
 }
}

The styleUrls ominaisuus määrittää useita ulkoisia CSS-tiedostoja komponentin muotoilua varten. Se vaatii joukon merkkijonoarvoja, jotka edustavat polkuja CSS-tiedostoihin:

tuonti { Komponentti, h } alkaen'@stencil/core';
@Component({
 tag: "oma-painike",
 styleUrls: ["my-button.css", 'other-button.css'],
 varjo: totta,
})
viedäluokkaaMyButton{
 render() {
palata (
Napsauta Minä</button>
 );
 }
}

Web-komponentin renderöiminen

Kun olet luonut verkkokomponentin, voit hahmontaa sen HTML-tiedostoksi lisäämällä mukautetun elementtitunnisteen. Näin voit sisällyttää my-button -komponentin:

html>
<htmlohj="ltr"lang="en">
<pää>
<metamerkkisetti="utf-8" />
<metanimi="näkymä"sisältö="leveys = laitteen leveys, alkumittakaava = 1,0, pienin mittakaava = 1,0, maksimimittakaava = 5,0" />
<linkkihref=""rel="tyylitaulukko">
<otsikko>Stencil Component Starterotsikko>
<käsikirjoitustyyppi="moduuli"src="/build/first-stencil-project.esm.js">käsikirjoitus>
<käsikirjoitusei moduuliasrc="/build/first-stencil-project.js">käsikirjoitus>
pää>
<kehon>
<my-painike>my-painike>
kehon>
html>

Nyt voit luoda verkkokomponentteja käyttämällä Stencil.js: ää

Stencil.js on tehokas työkalu nopeiden, tehokkaiden ja skaalautuvien verkkokomponenttien rakentamiseen. Sen API ja työkalut tekevät verkkokomponenttien luomisesta ja hallinnasta helppoa, ja sen yhteensopivuus kaikkien nykyaikaisten selainten kanssa varmistaa, että komponentit toimivat hyvin eri verkkosovelluksissa.

Kun verkkokomponentit yleistyvät, Stencil.js on kehys, joka sinun tulee ottaa huomioon, kun rakennat uudelleenkäytettäviä elementtejä verkkoon.