Special Elements pada Svelte JS
Macam-macam built-in element pada Svelte JS
20 July 2020 · 5 Minutes
Nggak cuma nasi goreng aja yang spesial, di SvelteJS juga ada lho element yang spesial 🤣
element-element tersebut disediakan oleh Svelte untuk memudahkan kita dalam membuat aplikasi web, dengan memanfaatkan element2 tersebut code yang kita tulis juga akan lebih ringkas nantinya. pada saat artikel ini ditulis, ada 6 elemen spesial yang disediakan oleh Svelte, antara lain:
svelte:head
svelte:window
svelte:body
svelte:self
svelte:component
svelte:options
yang pertama adalah svelte:head, fungsinya untuk menyisipkan element ke dalam tag <head> pada dokumen html melalui component Svelte.
dengan svelte:head, kita bisa menyisipkan CSS eksternal, Javascript library, mengganti title, dan lain-lain.
berikut ini adalah contoh penggunaaan svelte:head untuk mengganti title :
Contoh svelte:head
Output
ini fungsinya untuk memberikan event listener pada window, sebagai contoh, kita bisa membuat keyboard shortcut dengan cara passing function handleShortcut pada attribute on:keydown, yang mana function tsb akan dijalankan ketika user menekan tombol di keyboard.
Contoh svelte:window
Output
Ohya, kita juga bisa melakukan binding pada elemen svelte:window lho! berikut ini adalah property2 yang bisa dipakai untuk binding :
innerWidth
innerHeight
outerWidth
outerHeight
scrollX
scrollY
online : sebagai alias untuk window.navigator.onLine
contoh binding pada svelte:window
output
sama halnya dengan svelte:window, svelte:body berfungsi untuk memberikan event listener, tapi pada document.body, element ini bisa kita manfaatkan untuk memberikan event listener mouseenter dan mouseleave, yang mana tidak bisa dihandle oleh svelte:window.
berikut ini adalah contoh penggunaan-nya :
contoh svelte:body
Output
element ini memungkinkan sebuah component untuk merender dirinya sendiri secara rekursif. ini bisa kita manfaatkan untuk membuat fitur reply secara rekursif tanpa batas.
atau mungkin untuk menampilkan file dari sebuah folder yang isinya terdapat folder lagi yang folder tersebut berisi folder lagi yang didalamnya ada folder berisi folder 😜
Yo dawg
berikut ini adalah contoh penggunaan element svelte:self :
App.svelte
Folder.svelte
File.svelte
Output
App.svelte : di component ini kita mempunyai variabel files yang berisi object file2 dan folder, kemudian kita render component Folder, di component Folder tersebut kita passing props nama dan files yg berisi object file2 dan folder.
Folder.svelte : disini kita menampilkan nama foldernya yang berasal dari props nama, karena sebuah folder bisa berisi banyak file bahkan subfolder maka kemudian kita akan merender file2 dan subfolder miliknya yang berasal dari props files.
File.svelte : di component ini kita hanya menampilkan nama filenya yang berasal dari props nama.
kita bisa memanfaatkan svelte:component untuk merender component secara dinamis, caranya gampang aja tinggal masukin component yg ingin dirender ke dalam props this
berikut ini adalah contoh penggunaan-nya :
Contoh svelte:component
Output
daripada kita merender component dengan if else if else if … seperti ini :
Dynamic rendering1{#if selected.color === 'red'}2 <RedComponent/>3{:else if selected.color === 'green'}4 <GreenComponent/>5{:else if selected.color === 'blue'}6 <BlueComponent/>7{/if}
dengan memanfaatkan svelte:component, cukup begini saja 😉
Dynamic rendering1<svelte:component this={selected.component} />
yang terakhir adalah svelte:options, di element ini kita bisa menjelaskan kepada compiler bagaimana component kita dicompile, dengan cara passing opsi2-nya sebagai props.
berikut ini adalah beberapa opsi yang bisa kita atur :
Immutable (default=false) : jika di-set menjadi true, maka object props-nya akan diperlakukan sebagai immutable, menjadi immutable artinya parent component akan membuat object baru untuk object props daripada mengubah property pada object yang sudah ada. ini memungkinkan compiler Svelte untuk menentukan perubahan props dengan cara membandingkan Object Reference daripada Object Property. dengan begini, kalau parent component mengubah property pada object yang digunakan oleh child component, maka child component tidak akan mendeteksi perubahan dan tidak akan di-rerender.
accessors (default=false) : jika di-set menjadi true, maka akan ditambahkan method getter dan setter pada component props. ini akan berguna jika kita ingin membuat Custom Element yang bisa dipakai oleh non-Svelte (Vanilla JS, React, dll).
namespace : untuk menentukan namespace sebuah component, ini biasanya dipakai kalo kita ingin membuat svg component yang digunakan di dalam element <svg>
tag : ini adalah nama tag yang dipakai ketika Svelte Component dicompile menjadi Custom Element yang bisa dipakai oleh non-Svelte.
ini adalah contoh penggunaan svelte:options :
Svelte Options1<svelte:options immutable={true}/>
jika kamu masih bingung dengan opsiimmutable, perhatikan gambar berikut :
Mutable vs Immutable
pada gambar diatas, jika muncul flash merah itu tandanya component tsb sedang di-rerender, jadi, dengan set immutable pada svelte:options menjadi true, kita bisa sedikit mengoptimasi performa Svelte app kita karena kita hanya me-rerender component2 yg mengalami perubahan di DOM saja 🥳
kita telah mengetahui apa saja Special Elements pada Svelte, apa fungsinya dan bagaimana cara menggunakannya, congrats!! btw tadi saya menyinggung beberapa kali terkait Custom Element tapi sepertinya kurang detail yah 😅 mungkin di artikel selanjutnya kita akan bahas itu, karena cukup menarik sih, kita bisa membuat Svelte Component jadi element biasa yang bisa dipake di non-Svelte apps.
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! 😁 🙏
Alfin Syahruddin
Developer · Stock Trader · Libertarian · FreethinkerAlways open to new ideas 🕊️
Loading...
Related articles
Articles that you might want to read.
Reactive Programming yang sesungguhnya dengan Svelte JS
6 July 2020 · 7 Minutes
Buat custom Tag HTML-mu sendiri dengan Svelte! 🤓
3 August 2020 · 8 Minutes
Tutorial membongkar dan memodifikasi aplikasi iOS 🍎