Stencil.js Kullanarak Web Bileşeni Oluşturma

Web bileşenleri, yeniden kullanılabilir öğeler oluşturmanıza ve bunları farklı web uygulamalarında yeniden kullanmanıza izin veren bir dizi teknolojidir.

Stencil.js, tüm modern tarayıcılarla uyumlu web bileşenleri üreten bir derleyicidir. Hızlı, verimli, ölçeklenebilir web bileşenleri oluşturmanıza yardımcı olacak araçlar ve API'ler sağlar.

Stencil.js'ye Başlarken

Stencil.js'yi kullanmaya başlamak için önce onu bilgisayarınızda başlatmanız gerekir.

Bunu, node.js terminalinizde aşağıdaki komutu çalıştırarak yapın:

npm başlangıç ​​kalıbı

Komutu çalıştırdıktan sonra, hangi projeyle başlamak istediğinizi seçmeniz için ekranınızda bir bilgi istemi görünecektir:

Devam etmek için bileşen seçeneğini belirleyin, projenizin adını girin ve seçiminizi onaylayın:

Ardından, projenizin dizinine geçin ve şu komutları çalıştırarak bağımlılıklarınızı kurun:

cd ilk şablon projesi
npm kurulum

Yeni Bir Web Bileşeni Oluşturma

Stencil.js'de yeni bir web bileşeni oluşturmak için aşağıdaki gibi bir klasör yolu oluşturun kaynak/bileşenler. Bileşenler klasörü, bileşeninizin adıyla Stencil.js olarak adlandırılan bir TypeScript dosyası içerecektir. TypeScript dilini kullanır ve bileşen geliştirme için JSX. Klasör, bileşeninizin stilini içeren bir CSS dosyası da içerecektir.

Örneğin, "düğmem" adlı bir bileşen oluşturmak istiyorsanız, adında bir dosya oluşturun. düğmem.tsx ve adlı bir CSS dosyası düğmem.css. İçinde düğmem.tsx dosyası, Stencil.js API'sini kullanarak bileşeninizi tanımlayın:

içe aktarmak { Bileşen, h } itibaren"@kalıp/çekirdek";
@Bileşen({
 etiket: "düğmem",
 stil URL'si: 'düğmem.css',
 gölge: doğru,
})
ihracatsınıfDüğmem{
 render() {
geri dönmek (
Bana tıklayın</button>
 );
 }
}

Bu kod içe aktarır Bileşen Ve H Stencil.js'den işlevler. bu Bileşen işlev bileşeni tanımlarken, H işlev işaretlemesini HTML kullanarak oluşturur.

kullanarak bileşeninizi tanımlayın. @Bileşen üç özelliğe sahip bir nesneyi alan dekoratör: etiket, stilUrl, Ve gölge.

bu etiket özelliği, bileşenin etiket adını içerir. bu stilUrl özelliği, özel öğeyi biçimlendirmek için CSS dosyasını belirtir. Son olarak, gölge özelliği, bileşenin özel öğenin stillerini ve davranışını kapsüllemek için Gölge DOM kullanıp kullanmayacağını gösteren bir boole değeridir. Oluşturma yönteminde, bir düğme öğesi oluşturursunuz.

Buna ek olarak stilUrl özelliği, bileşeninize stil vermek için iki özellik daha kullanabilirsiniz: stil Ve stil URL'leri.

bu stil özelliği, bileşen için satır içi stilleri tanımlar. Bileşen için CSS stillerini temsil eden bir dize değeri alır:

içe aktarmak { Bileşen, h } itibaren"@kalıp/çekirdek";
@Bileşen({
 etiket: "düğmem",
 stil: `
 düğme {
 dolgu malzemesi: 1rem 0.5rem;
 sınır yarıçapı: 12piksel;
 yazı tipi ailesi: el yazısı;
 kenarlık: yok;
 renk: #e2e2e2;
 arka plan rengi: #333333;
 yazı tipi ağırlığı: kalın;
 }
`,
 gölge: doğru,
})
ihracatsınıfDüğmem{
 render() {
geri dönmek (
Bana tıklayın</button>
 );
 }
}

bu stil URL'leri özelliği, bileşene stil vermek için birden fazla harici CSS dosyası belirtir. CSS dosyalarına giden yolları temsil eden bir dizi dize değeri alır:

içe aktarmak { Bileşen, h } itibaren"@kalıp/çekirdek";
@Bileşen({
 etiket: "düğmem",
 stil URL'leri: ['düğmem.css', 'başka bir düğme.css'],
 gölge: doğru,
})
ihracatsınıfDüğmem{
 render() {
geri dönmek (
Bana tıklayın</button>
 );
 }
}

Web Bileşenini Oluşturma

Web bileşeninizi oluşturduktan sonra, özel bir öğe etiketi ekleyerek onu bir HTML dosyasında oluşturabilirsiniz. Düğmem bileşenini şu şekilde dahil edebilirsiniz:

html>
<htmlyön="ltr"dil="tr">
<KAFA>
<metakarakter kümesi="utf-8" />
<metaisim="görüntü alanı"içerik="genişlik=cihaz genişliği, ilk ölçek=1.0, minimum ölçek=1.0, maksimum ölçek=5.0" />
<bağlantıhref=""rel="stil sayfası">
<başlık>Şablon Bileşen Başlatıcıbaşlık>
<senaryotip="modül"kaynak="/build/ilk-stencil-project.esm.js">senaryo>
<senaryonomodülkaynak="/build/ilk-stencil-project.js">senaryo>
KAFA>
<vücut>
<düğmem>düğmem>
vücut>
html>

Artık Stencil.js Kullanarak Web Bileşenleri Oluşturabilirsiniz

Stencil.js, hızlı, verimli ve ölçeklenebilir web bileşenleri oluşturmak için güçlü bir araçtır. API'si ve araçları, web bileşenlerini oluşturmayı ve yönetmeyi kolaylaştırır ve tüm modern tarayıcılarla uyumluluğu, bileşenlerinizin farklı web uygulamalarında iyi çalışmasını sağlar.

Web bileşenleri giderek daha popüler hale geldikçe, Stencil.js, web için yeniden kullanılabilir öğeler oluştururken göz önünde bulundurmanız gereken bir çerçevedir.