REFERÊNCIA RÁPIDA DO SVELTE
Componentes, reatividade, stores, transições, SvelteKit
Componentes
Componente Básico
Hello {name}!
Estrutura do Componente
| <script> | Lógica do componente (JS/TS) |
| Markup | Template HTML com {expressões} |
| <style> | CSS com escopo (automaticamente restrito ao componente) |
| <script context="module"> | Executado uma vez por módulo, não por instância |
Reatividade
Atribuições Reativas
Declarações Reativas
$: marca declarações e instruções reativas
Regras de Reatividade
| Atribuição aciona | count += 1 aciona atualização; obj.x = 1 também |
| Mutação de array | Use arr = [...arr, item] (reatribuir para acionar) |
| $: declaração | Recalcula automaticamente quando variáveis referenciadas mudam |
| $: instrução | Executa efeitos colaterais reativamente |
Props
Declarando e Passando Props
Spread de Props
Eventos
Eventos DOM
value = e.target.value} />
Modificadores de Evento
| preventDefault | Chama e.preventDefault() |
| stopPropagation | Para a propagação do evento |
| once | Handler é disparado apenas uma vez |
| self | Apenas se event.target for o elemento |
| capture | Usar fase de captura |
Eventos de Componente
Bindings
Binding Bidirecional
Bindings de Elemento e Componente
Tipos de Binding
| bind:value | Valor de input/select/textarea |
| bind:checked | Estado da caixa de seleção |
| bind:group | Grupo de rádio/caixa de seleção |
| bind:this | Referência ao elemento DOM |
| bind:clientWidth/Height | Dimensões do elemento (somente leitura) |
Stores
Store Gravável
// store.js
import { writable } from "svelte/store";
export const count = writable(0);
// Componente — assinar automaticamente com $
Métodos do Store
count.set(10); // definir valor
count.update(n => n + 1); // atualizar a partir do atual
const unsub = count.subscribe(v => console.log(v));
Tipos de Store
| writable(val) | Store de leitura e escrita |
| readable(val, fn) | Somente leitura, definido pela função de início |
| derived(stores, fn) | Computado a partir de outros stores |
| $store | Sintaxe de assinatura automática em componentes |
Transições
Transições Internas
{
#if visible}
Aparece/desaparece
Voa para dentro, desaparece
{/if}
Opções de Transição
| fade | Opacidade de 0 a 1 |
| fly | Anima deslocamento x/y + opacidade |
| slide | Desliza para dentro/fora (altura) |
| scale | Escala e desvanece |
| draw | Animação de traço de caminho SVG |
| duration | Duração da transição em ms |
| delay | Atraso antes de iniciar |
Slots
Slots Padrão e Nomeados
Cabeçalho padrão
Conteúdo padrão
Título
Conteúdo do corpo aqui
Props de Slot
{
#each items as item}
{/each}
{index}: {item.name}
Contexto
Definir e Obter Contexto
Contexto vs Stores
| Contexto | Com escopo na árvore de componentes, não reativo por padrão |
| Stores | Global, reativo, importável em qualquer lugar |
| Contexto + Store | Passar um store via contexto para reatividade com escopo |
Básico do SvelteKit
Roteamento Baseado em Arquivo
src/routes/
+page.svelte
about/+page.svelte
blog/[slug]/+page.svelte
Funções de Carregamento
// +page.js (executado no cliente e no servidor)
export async function load({ params, fetch }) {
const res = await fetch(`/api/posts/${params.slug}`);
return { post: await res.json() };
}
Arquivos Principais
| +page.svelte | Componente de página |
| +page.js / +page.ts | Função de carregamento cliente/universal |
| +page.server.js | Carregamento somente no servidor / ações de formulário |
| +layout.svelte | Wrapper de layout compartilhado |
| +error.svelte | Página de erro |
| +server.js | Endpoint de API (GET, POST, ...) |