Views y markup de Verniz

Un componente Verniz es una función Zolo que devuelve View. Las expresiones y el control de flujo siguen las reglas de Zolo.

Markup y componentes¶

use std::html::{article, h2, p, View}

fn PostCard(titulo: str, resumen: str) -> View {
    <article class="post">
        <h2>{titulo}</h2>
        <p>{resumen}</p>
    </article>
}

El parser transforma el markup en llamadas a los mismos builders que puede escribir directamente. Los componentes y elementos HTML aceptan argumentos con nombre y valores predeterminados.

Texto y control de flujo¶

Dentro del markup, el texto es literal. Las llaves introducen expresiones Zolo, incluidos bloques if y bucles for. Use <!-- comentario --> para comentarios entre elementos. Los comentarios Zolo se admiten entre atributos.

El texto interpolado y los atributos se escapan. Un título que contiene <script> se muestra como texto. Reserve raw(valor) para HTML cuya seguridad ya haya comprobado.

Documentos y fragmentos¶

Use document, head y body para páginas completas; fragment agrupa hermanos sin un elemento adicional. render(view) serializa una View. Una ruta HTTP puede devolver una View directamente: el servidor la renderiza y selecciona el tipo de contenido HTML.

El servidor sirve el runtime de Verniz en /_zolo/client.js cuando la página incluye client_script().

CSS y JavaScript¶

Los cuerpos de <style> y <script> se leen como CSS y JavaScript. Un <style> estático dentro del componente tiene alcance local y se recoge por defecto; <style global> aplica estilos al documento.

Elementos condicionales con v:if¶

Use v:if={condition} cuando una condición decide si existe un elemento completo. Una condición falsa evita la llamada al componente y la evaluación de sus propiedades e hijos. En el ejemplo, expensive() solo se ejecuta para elementos visibles. La misma regla se aplica a HTML y componentes recogidos con 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)

La condición booleana se ejecuta una vez. Un elemento ausente no añade un hijo. v:if exige una expresión explícita y puede aparecer una vez por elemento. Los bloques {if ...} siguen siendo útiles para varios elementos. Las actualizaciones reactivas usan la ruta de renderizado condicional existente.

Este ejemplo funciona en la VM integrada del playground y en los modos VM, native y LLVM de la CLI. El wasm-aot independiente todavía rechaza la recolección de componentes de std::ui usada aquí, porque depende del transporte de excepciones (TryCallEnv). Capturar un fallo de la validación booleana en runtime también requiere transporte de excepciones (TryCall), todavía no disponible en ese backend. v:if en sí funciona en wasm-aot cuando las dependencias del componente están soportadas.

By Example

Siguiente: Islas, signals y actions.