Gleam library for working with Virtual DOMs.
Producing a diff from two virtual DOMs
diff(
new: Some(element("div", [], [text("new_text")])),
old: Some(element("div", [], [text("old_text")])),
)
[
ChildDiff(
index: 0,
attr_diff: [],
diff: [ReplaceText(index: 0, text: "new_text")],
),
]
Patching the browser DOM using a set of diffs.
let container: DOMElement = get_element_by_id("#app")
let initial_state: VDOM = element("p", [], [text("starting text")])
let desired_state: VDOM = element("p", [], [text("new text!")])
dom.patch(
container,
diff(
new: Some(initial_state),
old: None, // None as there are no existing elements.
)
)
should_equal(dom.outer_html(container), "<div id=\"app\"><p>starting text</p></div>")
dom.patch(
container,
diff(
new: Some(desired_state),
old: Some(initial_state),
)
)
should_equal(dom.outer_html(container), "<div id=\"app\"><p>new text!</p></div>")