REFERENSI CEPAT SVELTE
Komponen, reaktivitas, store, transisi, SvelteKit
Komponen
Komponen Dasar
Hello {name}!
Struktur Komponen
| <script> | Logika komponen (JS/TS) |
| Markup | Template HTML dengan {expressions} |
| <style> | CSS yang di-scope (otomatis per komponen) |
| <script context="module"> | Dijalankan sekali per modul, bukan per instance |
Reaktivitas
Penugasan Reaktif
Deklarasi Reaktif
$: menandai deklarasi dan pernyataan reaktif
Aturan Reaktivitas
| Assignment triggers | count += 1 memicu update; obj.x = 1 juga |
| Array mutation | Gunakan arr = [...arr, item] (reassign untuk memicu) |
| $: declaration | Dihitung ulang otomatis ketika variabel yang dirujuk berubah |
| $: statement | Menjalankan efek samping secara reaktif |
Props
Deklarasi & Pemberian Props
Spread Props
Event
Event DOM
value = e.target.value} />
Modifier Event
| preventDefault | Memanggil e.preventDefault() |
| stopPropagation | Menghentikan event bubbling |
| once | Handler hanya dipanggil sekali |
| self | Hanya jika event.target adalah elemen itu sendiri |
| capture | Gunakan fase capture |
Event Komponen
Binding
Two-Way Binding
Binding Elemen & Komponen
Jenis Binding
| bind:value | Nilai input/select/textarea |
| bind:checked | Status checkbox |
| bind:group | Grup radio/checkbox |
| bind:this | Referensi elemen DOM |
| bind:clientWidth/Height | Dimensi elemen (hanya baca) |
Store
Writable Store
// store.js
import { writable } from "svelte/store";
export const count = writable(0);
// Component — auto-subscribe with $
Metode Store
count.set(10); // set value
count.update(n => n + 1); // update from current
const unsub = count.subscribe(v => console.log(v));
Jenis Store
| writable(val) | Store baca-tulis |
| readable(val, fn) | Hanya baca, diset oleh fungsi start |
| derived(stores, fn) | Dihitung dari store lain |
| $store | Sintaks auto-subscribe dalam komponen |
Transisi
Transisi Bawaan
{
#if visible}
Fades in/out
Fly in, fade out
{/if}
Opsi Transisi
| fade | Opacity 0 ke 1 |
| fly | Animasi offset x/y + opacity |
| slide | Masuk/keluar dengan geser (tinggi) |
| scale | Skala dan fade |
| draw | Animasi stroke SVG path |
| duration | Durasi transisi dalam ms |
| delay | Tunda sebelum dimulai |
Slot
Slot Default & Bernama
Default header
Default content
Title
Body content goes here
Slot Props
{
#each items as item}
{/each}
{index}: {item.name}
Context
Set & Get Context
Context vs Store
| Context | Di-scope ke pohon komponen, tidak reaktif secara default |
| Stores | Global, reaktif, bisa diimpor dari mana saja |
| Context + Store | Teruskan store via context untuk reaktivitas yang di-scope |
Dasar SvelteKit
Routing Berbasis File
src/routes/
+page.svelte
about/+page.svelte
blog/[slug]/+page.svelte
Fungsi Load
// +page.js (runs on client & server)
export async function load({ params, fetch }) {
const res = await fetch(`/api/posts/${params.slug}`);
return { post: await res.json() };
}
File Penting
| +page.svelte | Komponen halaman |
| +page.js / +page.ts | Fungsi load client/universal |
| +page.server.js | Load khusus server / form actions |
| +layout.svelte | Pembungkus layout bersama |
| +error.svelte | Halaman error |
| +server.js | API endpoint (GET, POST, ...) |