Kalau kita biasanya menulis <NamaComponent /> di file .svelte atau di file .jsx jika pada React, ternyata kita juga bisa lho melakukan hal yang sama di file .html alias kita membuat custom tag html sendiri 😆

menariknya kita bisa membuat custom tag html sendiri menggunakan Svelte, sehingga fitur-fitur yang ada di Svelte tetap bisa kita pakai.

Contoh Web Components

Singkatnya, Web Components adalah kumpulan API yang disediakan web browser untuk membuat Tag HTML baru yang independent, reusable (bisa digunakan berulang-kali), dan encapsulated (memiliki scope sendiri sehingga tidak menimbulkan side effect pada Regular DOM).

ini mirip kayak konsep Component di kebanyakan UI Framework, tapi bedanya dia bisa dipakai di manapun, termasuk di file .html biasa atau bahkan di Framework lain selain UI Framework tersebut karena sifatnya yang independent.

Menurut webcomponents.org, Web Components terdiri dari 4 spesifikasi, yaitu :

1. Custom Elements

Custom Elements memungkinkan kita untuk membuat custom Tag HTML baru, kita bisa melakukannya dengan membuatnya dari nol, memodifikasi dari tag HTML yang sudah ada, atau bahkan memodifikasi Web Components yang dibuat oleh Developer lain.

2. Shadow DOM

ini memungkinkan Web Browser untuk merender Web Components tanpa menambahkannya ke document DOM tree. sehingga CSS Styling yang berada di dalam Web Components tidak akan mempengaruhi Regular DOM. inilah yang dinamakan encapsulated.

Regular DOM vs Shadow DOM

3. HTML Template

seperti namanya, spesifikasi ini memungkinkan kita untuk membuat template HTML menggunakan tag <template> , nah elemen2 yang berada di dalamnya tidak langsung ditampilkan oleh web browser saat halaman di-load, untuk menampilkannya kita harus menggunakan javascript.

4. ES Modules

dan yang terakhir adalah ES Modules atau EcmaScript Modules, ini memungkinkan kita untuk meng-export code dan meng-import code dari file .js lain.

1. Seperti yang saya bilang di awal, dengan membuat Web Components menggunakan Svelte, kita tetap bisa menikmati benefit atau fitur2 yang ditawarkan oleh Svelte. seperti Reactivity, data binding, dll.

2. Small Bundle Size, dibandingkan Framework lain seperti Angular, bundle size Svelte jauh lebih kecil, sehingga web atau aplikasi kita akan lebih cepat di-load oleh web browser dan performanya juga akan meningkat, sebagai contoh, salah satu penulis di itnext.io membuat Web Components yang sama secara UI maupun fungsionalitas-nya menggunakan Framework Angular dan Svelte, hasil akhirnya di Angular menghasilkan ukuran 51 KB tapi di Svelte hanya 5.4 KB, artikelnya bisa kalian baca disini. 🥳 📯

3. Lebih simple, dengan menggunakan Svelte, kita sebenarnya nggak perlu bersentuhan secara langsung dengan API Web Components seperti shadowRoot, customElements, dll. semuanya telah dihandle oleh Compiler Svelte, sehingga code yang kita tulis lebih sederhana dan meminimalisir munculnya bug pada aplikasi.

4. Lebih ringkas, honestly ini yang aku suka dari Svelte dibandingkan UI Framework lain 🤣 yups, dengan membuat Web Components menggunakan Svelte akan jauh lebih ringkas dibandingkan membuatnya langsung dengan Vanilla Javascript, dibawah ini adalah benchmark banyaknya code yang harus ditulis untuk melakukan pekerjaan yang sama oleh Vanilla Javascript (Web Components), React dan Svelte. hasilnya Svelte lebih unggul 🥳 (saya ambil dari presentasinya Rich harris di JSCamp The Return of ‘Write Less, Do More’).

Perbandingan banyaknya code yang harus ditulis oleh Vanilla Javascript (Web Components) vs React vs Svelte

yang pertama kali harus dilakukan adalah menyiapkan project Svelte itu sendiri, dengan cara menjalankan beberapa command berikut ke Terminal atau CMD :

Setup project Svelte
Copy
1$ npx degit sveltejs/template [nama project]
2
3$ cd [nama project]
4
5$ npm install
6
7$ npm run dev

Setelah projectnya kita buat, Pergi ke file rollup.config.js kemudian tambahkan customElement: true untuk memberitahu compiler agar component2 kita dicompile menjadi Custom Element.

rollup.config.js
Copy
1plugins: [
2    svelte({
3        customElement: true,
4    })
5]

Seperti biasa, kita lakukan dulu “ritual” menampilkan mantra “Hello World!” wkwk 😜

Kita akan membuat Web Components sederhana yang akan menampilkan text “Hello World!”

• Buatlah file hello-world.svelte di folder src/ yang berisi :

hello-world.svelte

<svelte:options /> adalah salah satu Special Elements di Svelte JS, buat yang belum tahu mungkin bisa baca artikel saya yang sebelumnya mengenai Special Elements disini

Properti tag menandakan nama tag html yang akan dipakai nantinya.

• Step kedua, replace isi file main.js dengan code berikut :

main.js

• terakhir, replace isi file index.html dengan code berikut :

index.html
Copy
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset='utf-8'>
5 <meta name='viewport' content='width=device-width,initial-scale=1'>
6
7 <title>Svelte app</title>
8 <link rel='icon' type='image/png' href='/favicon.png'>
9
10 <script defer src='/build/bundle.js'></script>
11</head>
12
13<body>
14  <hello-world />
15</body>
16</html>

Kemudian buka Terminal lagi dan jalankan command berikut :

Copy
1npm run build && npm run start

command diatas berfungsi untuk mem-build project kita, kemudian menjalankan folder hasil build-nya (folder public)

http://localhost:5000

Yeeay.. kita telah berhasil membuat Web Components menggunakan Svelte 🥳

Semua props yang ada di Custom Element akan dianggap sebagai property, jadi format penamaannya harus lowercase karena format penamaan property yang mengandung huruf kapital seperti PascalCase, atau camelCase tidak didukung oleh HTML.

Buatlah file baru bernama my-article.svelte yang berisi code berikut :

my-article.svelte
Copy
1<svelte:options tag="my-article" />
2
3<script>
4  export let title = ''
5  export let content = ''
6</script>
7
8<div>
9  <h1>{title}</h1>
10  <p>{content}</p>
11</div>
12
13<style>
14  div {
15    padding: 20px;
16    border: 4px solid lightgrey;
17  }
18  h1 {
19    font-family: arial;
20  }
21  p {
22    color: grey;
23  }
24</style>

dan jangan lupa juga untuk meng-importnya di main.js :

main.js
Copy
1import "./hello-world.svelte";
2import "./my-article.svelte";

sekarang kita sudah bisa menggunakan custom element yang telah kita buat, tambahkan code berikut di file index.html :

index.html
Copy
1<my-article
2    title="Ini judul"
3    content="Lorem ipsum"
4/>

Kemudian build ulang dan jalankan projectnya, maka akan tampil kurang lebih seperti ini :

http://localhost:5000

Untuk membuat Custom Event pada Web Components, kita bisa menggunakan API CustomEvent , CustomEvent ini menerima 2 parameter, yang pertama adalah nama Event-nya, kemudian yang kedua adalah opsi-opsi konfigurasi Event tsb "tuk membuat Custom Event pada Web Components, kita bisa menggunakan API [CustomEvent".

Custom Event
Copy
1const event = new CustomEvent('nama event', {
2    // options
3});

setelah kita membuat Custom Event, sekarang kita bisa melakukan dispatch atau men-trigger event tsb menggunakan this.dispatchEvent(event)

agar lebih jelas, perhatikan code berikut :

my-article.svelte
Copy
1<svelte:options tag="my-article" />
2
3<script>
4  export let title = ''
5  export let content = ''
6
7  let claps = 0;
8  function handleClap() {
9    claps += 1;
10    const event = new CustomEvent('clappress', {
11      // options
12      composed: true,
13      detail: {
14        total_claps: claps
15      }
16    });
17
18    this.dispatchEvent(event)
19  }
20</script>
21
22<div>
23  <h1>{title}</h1>
24  <p>{content}</p>
25  <button on:click={handleClap}>👏</button>
26  <span>{claps} Claps</span>
27</div>
28
29<style>
30  div {
31    padding: 20px;
32    border: 4px solid lightgrey;
33  }
34  h1 {
35    font-family: arial;
36  }
37  p {
38    color: grey;
39  }
40  button {
41    transform: scale(2);
42    border: none;
43    background: none;
44  }
45  button:focus {
46    outline-style: none;
47  }
48</style>

Penjelasan kode :

• kita mempunyai state claps yang value-nya akan bertambah +1 ketika <button> di-press atau ditekan

• pada baris ke-11, kita membuat Custom Event bernama clappress, nah di parameter kedua, kita set composed menjadi true agar event tsb bisa bubble melewati boundary (batas-batas) antara Shadow DOM dan Regular DOM.

• untuk mem-passing data, kita bisa menaruhnya di object detail

• lalu kita dispatch event clappress menggunakan this.dispatchEvent(event)

yang terakhir, kita akan menambahkan Event Listener ke Web Components kita, tambahkan code berikut di file index.html :

index.html
Copy
1<script>
2const article = document.querySelector("my-article");
3
4article.addEventListener("clappress", (e) => {
5    console.log(`clap button pressed ${e.detail.total_claps} times!`);
6});
7</script>

Penjelasan kode :

• ketika event clappress di-dispatch maka kita akan menampilkan total claps ke console. total_claps ini berasal dari state claps yang tadi kita passing melalui property detail di file my-article.svelte

ini adalah output dari kode diatas :

http://localhost:5000

Satu Web Components mungkin saja terdiri dari beberapa component, nah component-component children tersebut juga harus diubah dulu menjadi Web Component, kalau tidak maka akan muncul error seperti ini :

Sebagai contoh, kita akan membuat component article-tags yang menampilkan tag-tag dari sebuah artikel.

• Pertama, buat component baru bernama article-tags.svelte di folder src yang berisi code berikut :

article-tags.svelte
Copy
1<svelte:options tag="article-tags" />
2
3<script>
4  export let tags = '';
5  $: parsed_tags = tags.split(',')
6</script>
7
8{#each parsed_tags as tag}
9  <span>{tag}</span>
10{/each}
11
12<style>
13  span {
14    padding: 4px 8px;
15    background: darkgrey;
16    color: white;
17    margin-right: 4px;
18  }
19</style>

• kemudian import dan tampilkan component tersebut di component my-article :

my-article.svelte
Copy
1<svelte:options tag="my-article" />
2
3<script>
4  import './article-tags.svelte';
5
6  ...
7  export let tags = ''
8  ...
9</script>
10
11...
12<article-tags tags={tags} />
13...

• dan yang terakhir kita tinggal memasukkan value pada property tags di file index.html :

index.html
Copy
1<my-article
2    title="Ini judul"
3    content="Lorem ipsum"
4    tags="HTML,CSS,Javascript"
5/>

Kalau kita build ulang dan jalankan projectnya, maka akan tampil seperti ini :

http://localhost:5000

Oke mungkin itu saja yang bisa saya bagikan kali ini, kalau kamu merasa artikel ini bermanfaat silakan Like & Share artikel ini ke teman-teman kamu atau jika kamu punya pertanyaan, tulis aja di kolom komentar, Thank you! 😁 🙏