dioxus/packages/web/examples/hydrate.rs
Demonthos 047ed1e553
Subtree memorization / reactive templates (#488)
This commit adds subtree memoization to Dioxus.

Subtree memoization is basically a compile-time step that drastically 
reduces the amount of work the diffing engine needs to do at runtime by
extracting non-changing nodes out into a static "template." Templates 
are then understood by the various renderers in the ecosystem as a 
faster way of rendering the same items. 

For example, in the web, templates are simply a set of DOM Nodes created 
once and then cloned later. This is the same pattern frameworks like Lithtml
and SolidJS use to achieve near-perfect performance. 

Subtree memoization adds an additional level of complexity to Dioxus. The RSX
macro needs to be much smarter to identify changing/nonchanging nodes and
generate a mapping between the Template and its runtime counterparts.

This commit represents a working starter point for this work, adding support 
for templates for the web, desktop, liveview, ssr, and native-core renderers.
In the future we will try to shrink code generation, generally improve 
performance, and simplify our implementation.
2022-09-30 12:03:06 -07:00

65 lines
1.3 KiB
Rust

use dioxus::prelude::*;
use dioxus_web::Config;
use web_sys::window;
fn app(cx: Scope) -> Element {
cx.render(rsx! {
div {
h1 { "thing 1" }
}
div {
h2 { "thing 2"}
}
div {
h2 { "thing 2"}
"asd"
"asd"
Bapp {}
}
(0..10).map(|f| rsx!{
div {
"thing {f}"
}
})
})
}
#[allow(non_snake_case)]
fn Bapp(cx: Scope) -> Element {
cx.render(rsx! {
div {
h1 { "thing 1" }
}
div {
h2 { "thing 2"}
}
div {
h2 { "thing 2"}
"asd"
"asd"
}
})
}
fn main() {
console_error_panic_hook::set_once();
wasm_logger::init(wasm_logger::Config::new(log::Level::Trace));
let mut dom = VirtualDom::new(app);
let _ = dom.rebuild();
let pre = dioxus_ssr::pre_render_vdom(&dom);
log::trace!("{}", pre);
// set the inner content of main to the pre-rendered content
window()
.unwrap()
.document()
.unwrap()
.get_element_by_id("main")
.unwrap()
.set_inner_html(&pre);
// now rehydtrate
dioxus_web::launch_with_props(app, (), Config::new().hydrate(true));
}