dare-rust-leptos

/dare-rust-leptos

Guia de desenvolvimento Leptos para projetos DARE. Cobre decisão de variante, idioms obrigatórios, antipatterns, tipos compartilhados e templates de tasks.

Como usar

/dare-rust-leptos                    ← decide variante + configura workspace
/dare-rust-leptos --csr              ← guia específico para CSR + trunk
/dare-rust-leptos --fullstack        ← guia específico para SSR + cargo-leptos
/dare-rust-leptos --shared-types     ← padrão cfg_attr para tipos server + 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 (CDN)	⚠️ binário Axum
Server functions (#[server])	❌ não existe	✅

Regra de ouro:

• Se o projeto vive atrás de login e SEO não importa → CSR
• Se precisa de SEO, carregamento inicial rápido, ou server functions → Fullstack
• Se já tem rust-axum como backend no monorepo → Fullstack (workspace unificado)

---

2. Ferramentas — nunca misturar

Variante	Build	Dev server	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 sempre cargo test --workspace. ⚠️ Não use trunk para fullstack nem cargo leptos para CSR — ferramentas erradas para o target errado.

---

3. Idioms obrigatórios Leptos 0.7

Estado reativo

// ✅ Fine-grained signals — só re-renderiza o que usa o signal
let (count, set_count) = signal(0);
let doubled = move || count.get() * 2;  // derived (memo inline)

// Para estado complexo ou compartilhado entre componentes:
let count = RwSignal::new(0);  // read + write em um só

Dados assíncronos

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

// ✅ Suspense — loading state automático
view! {
    <Suspense fallback=|| view! { <p>"Loading..."</p> }>
        {move || user.get().map(|u| view! { <p>{u.name}</p> })}
    </Suspense>
}

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