https://github.com/axelf4/dumle
🍬 Rust HTML templating and virtual DOM library
https://github.com/axelf4/dumle
rust-library virtual-dom webassembly
Last synced: 7 months ago
JSON representation
🍬 Rust HTML templating and virtual DOM library
- Host: GitHub
- URL: https://github.com/axelf4/dumle
- Owner: axelf4
- Created: 2019-03-28T11:09:28.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-12-28T12:29:48.000Z (almost 5 years ago)
- Last Synced: 2025-03-18T18:13:07.434Z (7 months ago)
- Topics: rust-library, virtual-dom, webassembly
- Language: Rust
- Homepage:
- Size: 336 KB
- Stars: 27
- Watchers: 6
- Forks: 1
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# dumle
Sweet virtual DOM library for Rust and WebAssembly.
## Example
The following example creates a simple counter that can be incremented:
```rust
use dumle::{hook::UseState, html, Context};
use wasm_bindgen::{prelude::*, throw_str, UnwrapThrowExt};
#[wasm_bindgen(start)]
pub fn run() {
// Get the document's ``
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! {
{ state.to_string() }
{"Increment"}
}
});
// 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
```rust
html! {
![]()
}
```
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](https://reactjs.org/docs/fragments.html) 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
```rust
use dumle::{html, Either};
if switch {
Either::A(html! {
{"One"}})
} else {
Either::B(html! {{"Two"}})
}
```
toggling `switch` would remove the `
` and then re-add the new ``.
This should rarely matter.