Elementos condicionais com v:if

Use v:if={condition} quando uma condição decide se um elemento inteiro existe. Uma condição falsa evita a chamada do componente e a avaliação de suas propriedades e filhos. No exemplo, expensive() só executa para elementos visíveis. A mesma regra vale para HTML e componentes coletados com std::ui.

use std::html::{div, span, render}
use std::ui::{collect}

var calls = 0
fn expensive() -> str { calls += 1; return "visible" }
let html = <div>
    <span v:if={false}>{expensive()}</span>
    <span v:if={true}>{expensive()}</span>
</div>
assert_eq(render(html), "<div><span>visible</span></div>")
assert_eq(calls, 1)

struct UiNode { text: str, children: [Any] }
fn Label(value: str) -> UiNode { UiNode.new(text: value, children: []) }
fn Panel(children: Any = nil) -> UiNode { UiNode.new(text: "panel", children: collect(children)) }
let panel = <Panel>
    <Label v:if={false} value={expensive()}/>
    <Label v:if={true} value={expensive()}/>
</Panel>
assert_eq(panel.children.len(), 1)
assert_eq(panel.children[0].text, "visible")
assert_eq(calls, 2)
print(render(html))
print(panel.children[0].text)
print(calls)

A condição booleana executa uma vez. Um elemento ausente não acrescenta um filho. v:if exige uma expressão explícita e pode aparecer uma vez por elemento. Blocos {if ...} continuam úteis para vários elementos. Atualizações reativas usam o caminho de renderização condicional existente.

Este exemplo funciona na VM embarcada do playground e nos modos VM, native e LLVM da CLI. O wasm-aot independente ainda rejeita a coleta de componentes de std::ui usada aqui, pois ela depende do transporte de exceções (TryCallEnv). Capturar uma falha da validação booleana em runtime também exige transporte de exceções (TryCall), ainda indisponível nesse backend. v:if em si funciona no wasm-aot quando as dependências do componente são suportadas.