Conditional elements with v:if

Use v:if={condition} when a condition decides whether an entire element exists. A false condition skips the component call, its properties and its children. In this example, expensive() runs only for visible elements. The same rule applies to HTML and to components collected with 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)

The Boolean condition runs once. An absent element contributes no child. v:if accepts an explicit expression and may appear once per element. Ordinary {if ...} blocks remain useful for several elements. Reactive updates use the existing conditional render path.

This example runs in the browser playground's embedded VM and in the CLI's VM, native and LLVM modes. Standalone wasm-aot currently rejects the std::ui component collection used here because it requires exception transport (TryCallEnv). Catching a failed runtime Boolean check also requires exception transport (TryCall), which wasm-aot currently rejects. v:if itself works in wasm-aot when the component's dependencies are supported.