dumle

Sweet virtual DOM library for Rust and WebAssembly.

Example

The following example creates a simple counter that can be incremented:

use dumle::{hook::UseState, html, Context};
use wasm_bindgen::{prelude::*, throw_str, UnwrapThrowExt};

#[wasm_bindgen(start)]
pub fn run() {
	// Get the document's `<body>`
	let body = web_sys::window()
		.and_then(|window| window.document())
		.and_then(|document| document.body())
		.unwrap_throw();

	// Render a simple virtual node with a counter
	let vnode = UseState::new(|state: &i32, set_state| {
		html! {
			<div>
				{ state.to_string() }
				<button click=move |_| set_state(&|state: &mut i32| *state += 1),>
					{"Increment"}
				</button>
			</div>
		}
	});

	// Patch the real DOM to match the virtual DOM
	Context::from(body.clone().into()).patch(None, Some(&vnode));

	throw_str("SimulateInfiniteLoop") // Exit with live runtime
}

Design

Dumle aims only to be a virtual DOM library, not a full web application framework. Constructing virtual trees with dumle should add near zero overhead. To accomplish that, zero-sized types with inlining is used. For example, the macro invocation

html! {
	<div>
		<button />
	</div>
	<img />
}

gets turned into Cons(Child(div, button), img) which is a zero-sized type. Thus the compiler can inline the whole reconciliation phase, should it want to. This means that dumle can get by with a simple macro_rules! macro instead of a full blown procedural macro while generating the same code.

While patching the DOM, dumle maintains a cursor pointing at the current DOM node instead of storing mounted DOM nodes in their corresponding virtual nodes. This makes supporting functionality otherwise provided by something like React Fragments trivial, and reduces the memory size of virtual trees at the cost of always having to traverse the DOM tree (which isn't too expensive). Upcoming features to the Rust ecosystem such as specialization and host bindings should improve performance for free.

No attempt is made at diffing similar sub-trees. That means that given

use dumle::{html, Either};
if switch {
	Either::A(html! {<div>{"One"}</div>})
} else {
	Either::B(html! {<div>{"Two"}</div>})
}

toggling switch would remove the <div> and then re-add the new <div>. This should rarely matter.

Project Name	Stars	Repos Using This	Packages Using This	Most Recent Commit	Total Releases	Latest Release	Open Issues	License	Language
Incremental Dom	3,496	371	112	3 days ago	10	October 29, 2019	65	apache-2.0	TypeScript
An in-place DOM diffing library
Hyperhtml	2,956	143	51	5 months ago	232	August 11, 2022	10	isc	HTML
A Fast & Light Virtual DOM Alternative
Yo Yo	1,313	459	145	2 years ago	13	May 23, 2017	33		JavaScript
A tiny library for building modular UI components using DOM diffing and ES6 tagged template literals
Transparency	973			3 years ago			48	mit	JavaScript
Transparency is a semantic template engine for the browser. It maps JSON objects to DOM elements by id, class and data-bind attributes.
T7	895	3	4	6 years ago	25	November 20, 2016	11		JavaScript
Lightweight virtual DOM templating library
Domvm	597	18	2	8 months ago	48	February 01, 2022	9	mit	JavaScript
DOM ViewModel - A thin, fast, dependency-free vdom view layer
Blaze	510	248		4 months ago	15	October 04, 2016	25	other	JavaScript
:fire: Meteor Blaze is a powerful library for creating live-updating user interfaces
Litedom	388		2	3 years ago	5	November 28, 2019	13	mit	JavaScript
A reactive Web Component library to create Custom Element and turns any HTML sections into components
Jadelet	378	4	4	3 months ago	10	February 02, 2017	5	mit	CoffeeScript
Pure and simple clientside templates
Enfocus	362	88		6 years ago	27	October 05, 2015	13		Clojure
DOM manipulation and templating library for ClojureScript inspired by Enlive.