Home

Awesome

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.