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.
This commit is contained in:
Demonthos authored and GitHub committed
1 parent
b32fd2d2cd
commit
047ed1e553
80 files changed
+6774
-2552
No files matched your search
@@ -1,4 +1,5 @@
|
||||
use dioxus::core as dioxus_core;
|
||||
use dioxus::core_macro::rsx_without_templates;
|
||||
use dioxus::prelude::*;
|
||||
use dioxus_native_core::{
|
||||
real_dom::{NodeType, RealDom},
|
||||
@@ -37,68 +38,68 @@ fn traverse() {
|
||||
let mut iter = PersistantElementIter::new();
|
||||
let div_tag = "div".to_string();
|
||||
assert!(matches!(
|
||||
&rdom[iter.next(&rdom).id()].node_type,
|
||||
&rdom[iter.next(&rdom).id()].node_data.node_type,
|
||||
NodeType::Element { tag: div_tag, .. }
|
||||
));
|
||||
assert!(matches!(
|
||||
&rdom[iter.next(&rdom).id()].node_type,
|
||||
&rdom[iter.next(&rdom).id()].node_data.node_type,
|
||||
NodeType::Element { tag: div_tag, .. }
|
||||
));
|
||||
let text1 = "hello".to_string();
|
||||
assert!(matches!(
|
||||
&rdom[iter.next(&rdom).id()].node_type,
|
||||
&rdom[iter.next(&rdom).id()].node_data.node_type,
|
||||
NodeType::Text { text: text1, .. }
|
||||
));
|
||||
let p_tag = "p".to_string();
|
||||
assert!(matches!(
|
||||
&rdom[iter.next(&rdom).id()].node_type,
|
||||
&rdom[iter.next(&rdom).id()].node_data.node_type,
|
||||
NodeType::Element { tag: p_tag, .. }
|
||||
));
|
||||
let text2 = "world".to_string();
|
||||
assert!(matches!(
|
||||
&rdom[iter.next(&rdom).id()].node_type,
|
||||
&rdom[iter.next(&rdom).id()].node_data.node_type,
|
||||
NodeType::Text { text: text2, .. }
|
||||
));
|
||||
let text3 = "hello world".to_string();
|
||||
assert!(matches!(
|
||||
&rdom[iter.next(&rdom).id()].node_type,
|
||||
&rdom[iter.next(&rdom).id()].node_data.node_type,
|
||||
NodeType::Text { text: text3, .. }
|
||||
));
|
||||
assert!(matches!(
|
||||
&rdom[iter.next(&rdom).id()].node_type,
|
||||
&rdom[iter.next(&rdom).id()].node_data.node_type,
|
||||
NodeType::Element { tag: div_tag, .. }
|
||||
));
|
||||
|
||||
assert!(matches!(
|
||||
&rdom[iter.prev(&rdom).id()].node_type,
|
||||
&rdom[iter.prev(&rdom).id()].node_data.node_type,
|
||||
NodeType::Text { text: text3, .. }
|
||||
));
|
||||
assert!(matches!(
|
||||
&rdom[iter.prev(&rdom).id()].node_type,
|
||||
&rdom[iter.prev(&rdom).id()].node_data.node_type,
|
||||
NodeType::Text { text: text2, .. }
|
||||
));
|
||||
assert!(matches!(
|
||||
&rdom[iter.prev(&rdom).id()].node_type,
|
||||
&rdom[iter.prev(&rdom).id()].node_data.node_type,
|
||||
NodeType::Element { tag: p_tag, .. }
|
||||
));
|
||||
assert!(matches!(
|
||||
&rdom[iter.prev(&rdom).id()].node_type,
|
||||
&rdom[iter.prev(&rdom).id()].node_data.node_type,
|
||||
NodeType::Text { text: text1, .. }
|
||||
));
|
||||
assert!(matches!(
|
||||
&rdom[iter.prev(&rdom).id()].node_type,
|
||||
&rdom[iter.prev(&rdom).id()].node_data.node_type,
|
||||
NodeType::Element { tag: div_tag, .. }
|
||||
));
|
||||
assert!(matches!(
|
||||
&rdom[iter.prev(&rdom).id()].node_type,
|
||||
&rdom[iter.prev(&rdom).id()].node_data.node_type,
|
||||
NodeType::Element { tag: div_tag, .. }
|
||||
));
|
||||
assert!(matches!(
|
||||
&rdom[iter.prev(&rdom).id()].node_type,
|
||||
&rdom[iter.prev(&rdom).id()].node_data.node_type,
|
||||
NodeType::Element { tag: div_tag, .. }
|
||||
));
|
||||
assert!(matches!(
|
||||
&rdom[iter.prev(&rdom).id()].node_type,
|
||||
&rdom[iter.prev(&rdom).id()].node_data.node_type,
|
||||
NodeType::Text { text: text3, .. }
|
||||
));
|
||||
}
|
||||
@@ -112,7 +113,7 @@ fn persist_removes() {
|
||||
}
|
||||
let vdom = VirtualDom::new(Base);
|
||||
let (build, update) = vdom.diff_lazynodes(
|
||||
rsx! {
|
||||
rsx_without_templates! {
|
||||
div{
|
||||
p{
|
||||
key: "1",
|
||||
@@ -128,7 +129,7 @@ fn persist_removes() {
|
||||
}
|
||||
}
|
||||
},
|
||||
rsx! {
|
||||
rsx_without_templates! {
|
||||
div{
|
||||
p{
|
||||
key: "1",
|
||||
@@ -177,16 +178,19 @@ fn persist_removes() {
|
||||
let p_tag = "p".to_string();
|
||||
let idx = iter1.next(&rdom).id();
|
||||
assert!(matches!(
|
||||
&rdom[idx].node_type,
|
||||
&rdom[idx].node_data.node_type,
|
||||
NodeType::Element { tag: p_tag, .. }
|
||||
));
|
||||
let text = "hello world".to_string();
|
||||
let idx = iter1.next(&rdom).id();
|
||||
assert!(matches!(&rdom[idx].node_type, NodeType::Text { text, .. }));
|
||||
assert!(matches!(
|
||||
&rdom[idx].node_data.node_type,
|
||||
NodeType::Text { text, .. }
|
||||
));
|
||||
let div_tag = "div".to_string();
|
||||
let idx = iter2.next(&rdom).id();
|
||||
assert!(matches!(
|
||||
&rdom[idx].node_type,
|
||||
&rdom[idx].node_data.node_type,
|
||||
NodeType::Element { tag: div_tag, .. }
|
||||
));
|
||||
}
|
||||
@@ -200,7 +204,7 @@ fn persist_instertions_before() {
|
||||
}
|
||||
let vdom = VirtualDom::new(Base);
|
||||
let (build, update) = vdom.diff_lazynodes(
|
||||
rsx! {
|
||||
rsx_without_templates! {
|
||||
div{
|
||||
p{
|
||||
key: "1",
|
||||
@@ -212,7 +216,7 @@ fn persist_instertions_before() {
|
||||
}
|
||||
}
|
||||
},
|
||||
rsx! {
|
||||
rsx_without_templates! {
|
||||
div{
|
||||
p{
|
||||
key: "1",
|
||||
@@ -252,7 +256,7 @@ fn persist_instertions_before() {
|
||||
let p_tag = "div".to_string();
|
||||
let idx = iter.next(&rdom).id();
|
||||
assert!(matches!(
|
||||
&rdom[idx].node_type,
|
||||
&rdom[idx].node_data.node_type,
|
||||
NodeType::Element { tag: p_tag, .. }
|
||||
));
|
||||
}
|
||||
@@ -266,7 +270,7 @@ fn persist_instertions_after() {
|
||||
}
|
||||
let vdom = VirtualDom::new(Base);
|
||||
let (build, update) = vdom.diff_lazynodes(
|
||||
rsx! {
|
||||
rsx_without_templates! {
|
||||
div{
|
||||
p{
|
||||
key: "1",
|
||||
@@ -278,7 +282,7 @@ fn persist_instertions_after() {
|
||||
}
|
||||
}
|
||||
},
|
||||
rsx! {
|
||||
rsx_without_templates! {
|
||||
div{
|
||||
p{
|
||||
key: "1",
|
||||
@@ -318,10 +322,13 @@ fn persist_instertions_after() {
|
||||
let p_tag = "p".to_string();
|
||||
let idx = iter.next(&rdom).id();
|
||||
assert!(matches!(
|
||||
&rdom[idx].node_type,
|
||||
&rdom[idx].node_data.node_type,
|
||||
NodeType::Element { tag: p_tag, .. }
|
||||
));
|
||||
let text = "hello world".to_string();
|
||||
let idx = iter.next(&rdom).id();
|
||||
assert!(matches!(&rdom[idx].node_type, NodeType::Text { text, .. }));
|
||||
assert!(matches!(
|
||||
&rdom[idx].node_data.node_type,
|
||||
NodeType::Text { text, .. }
|
||||
));
|
||||
}
|
||||
Reference in new issue
Block a user