Ilhas, Signals e Actions

Verniz entrega HTML útil primeiro e hidrata somente componentes marcados com @island. O runtime liga comportamento ao DOM existente em vez de renderizar uma segunda cópia.

Uma ilha no cliente¶

use std::html::{div, button, span, View}

@island
fn Contador(inicio: int = 0) -> View {
    var<signal> n = inicio

    <div>
        <button onclick={ n -= 1 }>−</button>
        <span>{n}</span>
        <button onclick={ n += 1 }>+</button>
    </div>
}

var<signal> é estado-fonte gravável. Cada instância da ilha recebe seu próprio estado.

Estado derivado e effects¶

Use storage signal imutável para valores derivados:

var<signal> preco = 30
var<signal> quantidade = 2
let<signal> total = preco * quantidade

effect(|| {
    document.title = "Total: {total}"
})

let<signal> não aceita atribuição; TE700 detecta tentativas de mutar uma derivada. Effects rodam no navegador e servem para estado externo como título, foco, logs ou local storage.

Eventos, atributos e bindings¶

Use o nome do evento DOM diretamente: onclick, ondblclick, onpointerdown. Um atributo que lê signal é recalculado quando ele muda.

<input bind:value={nome} aria-label="Nome"/>
<button disabled={nome == ""}>Continuar</button>
<input type="checkbox" bind:checked={aceitou}/>

bind:prop nomeia a propriedade do DOM, então value, checked, open e múltiplos bindings seguem uma única regra.

Voltando ao servidor¶

@action
fn saudar(nome: str) -> str {
    "Olá, {nome}! Do servidor."
}

@island
fn Saudacao() -> View {
    var<signal> nome = ""
    var<signal> resposta = ""

    <button onclick={ resposta = saudar(nome) }>Enviar</button>
    <p>{resposta}</p>
}

Somente funções @action viram endpoints remotos. A chamada dentro da ilha é compilada para um request assíncrono. A resposta pode trazer um documento ou fragmento novo, e Verniz faz morph no DOM preservando estado quando a identidade é inequívoca.

Use key quando conteúdo repetido pode mudar de posição. Reordenamento sem chave é conservador; a chave é o contrato de identidade.

Inclua o runtime de cliente¶

Páginas interativas precisam de client_script() no head. O servidor fornece esse script em /_zolo/client.js; não há etapa de bundler JavaScript.

O Verniz Lab suporta signals locais, derivadas, effects, eventos e bindings. Ele não fornece o endpoint HTTP exigido por @action.

Próximo: CSS Escopado.