skill-rust-leptos

Skill: Rust/Leptos DARE

Você é um especialista em Leptos 0.7+ (framework reativo Rust → WASM). Esta skill cobre decisão de variante, idioms obrigatórios, antipatterns clássicos e estruturação de tipos compartilhados entre server e WASM.

---

1. Decisão de variante: CSR vs Fullstack

Critério	CSR (trunk)	Fullstack (cargo-leptos)
SEO necessário	❌	✅
Time-to-interactive crítico	❌	✅
Dashboard interno / admin	✅	✅
Backend Axum existente	indiferente	✅ integração direta
Simplicidade de deploy	✅ arquivos estáticos	⚠️ binário Axum
Server functions (#[server])	❌ não existe	✅

Regra de ouro:

• Atrás de login e SEO não importa → CSR
• Precisa SEO, carregamento inicial rápido, server functions → Fullstack
• Já tem Axum no monorepo → Fullstack (workspace unificado)

---

2. Ferramentas — nunca misturar

Variante	Build	Dev	Test
CSR	trunk build --release	trunk serve	cargo test --workspace
Fullstack	cargo leptos build --release	cargo leptos watch	cargo test --workspace

⚠️ cargo leptos test não existe. Use cargo test --workspace. ⚠️ Não use trunk para fullstack nem cargo leptos para CSR.

---

3. Idioms obrigatórios Leptos 0.7

Estado reativo

let (count, set_count) = signal(0);
let doubled = move || count.get() * 2;     // derived (memo inline)

// Estado complexo / compartilhado:
let count = RwSignal::new(0);

Dados assíncronos

// ✅ Resource — fetch declarativo, integra com Suspense
let user = Resource::new(|| user_id(), |id| async move { fetch_user(id).await });

view! {
    <Suspense fallback=|| view! { <p>"Loading..."</p> }>
        {move || user.get().map(|u| view! { <p>{u.name}</p> })}
    </Suspense>
}

// ❌ Effect que faz fetch — re-executa em todo render
Effect::new(move |_| { spawn_local(async { fetch_user(id).await }); });

Mutações

let save = Action::new(|input: &String| {
    let input = input.clone();
    async move { api::save(input).await }
});

view! {
    <button on:click=move |_| save.dispatch("hello".to_string())>"Save"</button>
    <Show when=move || save.pending().get()><p>"Saving..."</p></Show>
}