Views and HTML

A view is a function that returns a tree. The server renders it to markup; the browser gets the same tree, and a differ applies what changed.

The view tree

std/html builds the tree. toHtmlString renders it for the server. Text is escaped. A tag or attribute name lands outside the quotes, so it is checked rather than escaped, and a bad one is refused.

The same tree crosses to the browser as JSON, and web/vyrn-dom.js applies the difference between the old tree and the new one. Keys carry list identity.

site/guide/html.vyrnBuilt

// A view is a function that returns a tree. `toHtmlString` renders it on the
// server; the same tree crosses to the browser for the client differ. Text is
// escaped, and a tag name is checked rather than escaped.
import { el, text, cls, toHtmlString, Html } from "std/html"

fn row(label: consume String) -> Html {
    return el("li", [cls("row")], [text(label)])
}

fn view() -> Html {
    return el("ul", [cls("items")], [row("Widget"), row("Gadget & Co")])
}

export fn demo() -> String {
    return toHtmlString(view())
}

fn main() -> Int64 {
    print(demo())
    return 0
}

// A view is a function that returns a tree. `toHtmlString` renders it on the
// server; the same tree crosses to the browser for the client differ. Text is
// escaped, and a tag name is checked rather than escaped.
import { el, text, cls, toHtmlString, Html } from "std/html"

fn row(label: consume String) -> Html {
    return el("li", [cls("row")], [text(label)])
}

fn view() -> Html {
    return el("ul", [cls("items")], [row("Widget"), row("Gadget & Co")])
}

export fn demo() -> String {
    return toHtmlString(view())
}

fn main() -> Int64 {
    print(demo())
    return 0
}

<ul class="items"><li class="row">Widget</li><li class="row">Gadget & Co</li></ul>

Server and browser

One view function serves both sides. The server calls it and writes a document, so the page exists before any script runs and works with none. The browser calls the same function after an event and hands the new tree to the differ, which touches only the nodes that changed.

A link between pages does the same in miniature: the next page arrives as a payload, the differ swaps the content, and form drafts and scroll survive. When anything about that goes wrong, the browser navigates for real — the failure mode is a normal page load.