2 menit baca
Svelte Component Syntax Markup Script Style Scoped
Panduan Svelte component syntax: tiga blok script/markup/style scoped, directive if/each, bind:value, dan jebakan lupa key di each.
Dokumentasi Svelte
Compiler web reaktif berperforma tinggi. Pelajari sintaks reaktif, Runes (Svelte 5), Stores, Lifecycle, dan SvelteKit.
19Artikel
Component Syntax
6 Materi2 menit baca
Svelte Transitions Animations Transition Animate Crossfade
Panduan Svelte transitions: fade/fly/slide, in:/out:, animate:flip, crossfade, dan jebakan transisi di luar if/each.
2 menit baca
Svelte Actions Use Action Custom Directive Lifecycle
Panduan Svelte actions: use:fn dengan node + update/destroy, pola click-outside, dan jebakan lupa cleanup listener.
1 menit baca
SVElte5 Runes State Derived
Reaktivitas Svelte 5 dengan runes $state dan $derived sebagai pengganti let/$.
1 menit baca
SVElte5 Props Effects
Prop deklarasi via $props() dan side-effect via $effect di Svelte 5.
1 menit baca
SVElte5 Snippets Children Slot
Pola composition Svelte 5: {@render} snippet dan default children.
Deployment
1 Materi2 menit baca
Svelte Deployment Build Adapter Static Node Vercel Netlify
Panduan deploy SvelteKit: pilih adapter (static/node/vercel), vite build, prerender, env vars, dan jebakan adapter tidak cocok hosting.
Form Handling
2 Materi2 menit baca
Svelte Form Handling Bind Onsubmit Use Enhance Actions
Panduan Svelte form: bind:value, on:submit preventDefault, use:enhance + actions SvelteKit, dan jebakan validasi hanya client.
2 menit baca
Sveltekit Form Actions Lanjut Named Actions Fail Progressive Enhancement
Panduan SvelteKit form actions: named action ?/nama, fail() return data ke form, use:enhance progressive, dan jebakan lupa enhance + return biasa vs fail.
Lifecycle
2 Materi2 menit baca
Svelte Lifecycle Onmount Ondestroy Tick Beforeupdate Afterupdate
Panduan Svelte lifecycle: onMount/onDestroy cleanup, tick() tunggu DOM, before/afterUpdate, dan jebakan akses DOM sebelum tick + lupa cleanup.
2 menit baca
Sveltekit Hooks Handle Server Hooks Locals Sequence Diagram
Panduan SvelteKit hooks: handle auth tiap request, set locals.user, sequence chaining, handleFetch, dan jebakan lupa return resolve + baca locals sebelum set.
Memulai
2 Materi2 menit baca
Svelte Memulai Instalasi Struktur Project Reactivity Dasar
Panduan Svelte memulai: instalasi Vite, struktur .svelte, reactivity lewat assignment, dan jebakan mutasi array/object tanpa re-assign.
2 menit baca
Svelte Reactivity Dollar Reactive Statements Derived
Panduan Svelte reactivity: reactive statement $:, dependency otomatis, derived state, dan jebakan mutasi tanpa re-assign + dependency siklik.
Props & Events
2 Materi2 menit baca
Svelte Props Events Export Let Createeventdispatcher Bind
Panduan Svelte props (export let), event (createEventDispatcher + detail), dan two-way bind: kapan pakai masing-masing + jebakan over-bind.
1 menit baca
SVElte5 Event Handling Bind
Penanganan event dan binding di Svelte 5 (onclick, bind:value, callback props).
Routing
1 Materi2 menit baca
Svelte Routing Sveltekit Pages Layouts Load Navigation
Panduan SvelteKit routing: struktur src/routes, +page/+layout, load function, param dinamis, dan jebakan lupa export let data.
Stores
3 Materi2 menit baca
Svelte Stores Writable Readable Derived Custom
Panduan Svelte stores: writable/readable/derived, auto-subscribe $store, custom store dengan contract subscribe, dan jebakan lupa unsubscribe.
2 menit baca
Svelte Context API Setcontext Getcontext Deep Props
Panduan Svelte context API: setContext/getContext untuk hindari prop drilling, key symbol, dan jebakan getContext di dalam fungsi.