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.

packages/native-core-macro/tests/initial_build.rs

@@ -1,7 +1,4 @@
-use std::cell::Cell;
-
-use dioxus::core as dioxus_core;
-use dioxus::core::{ElementId, VElement, VText};
+use dioxus::core::{self as dioxus_core, GlobalNodeId};
 use dioxus::prelude::*;
 use dioxus_native_core::real_dom::RealDom;
 use dioxus_native_core::state::State;
@@ -12,8 +9,6 @@ struct Empty {}
 
 #[test]
 fn initial_build_simple() {
-    use std::cell::Cell;
-
     #[allow(non_snake_case)]
     fn Base(cx: Scope) -> Element {
         render!(div {})
@@ -28,19 +23,17 @@ fn initial_build_simple() {
     let mut dom: RealDom<Empty> = RealDom::new();
 
     let _to_update = dom.apply_mutations(vec![mutations]);
-    let root_div = VElement {
-        id: Cell::new(Some(ElementId(1))),
-        key: None,
-        tag: "div",
-        namespace: None,
-        parent: Cell::new(Some(ElementId(0))),
-        listeners: &[],
-        attributes: &[],
-        children: &[],
-    };
+
     assert_eq!(dom.size(), 1);
-    assert!(&dom.contains_node(&VNode::Element(&root_div)));
-    assert_eq!(dom[ElementId(1)].height, 1);
+    assert_eq!(
+        dom[GlobalNodeId::TemplateId {
+            template_ref_id: dioxus_core::ElementId(1),
+            template_node_id: dioxus::prelude::TemplateNodeId(0),
+        }]
+        .node_data
+        .height,
+        1
+    );
 }
 
 #[test]
@@ -67,62 +60,59 @@ fn initial_build_with_children() {
     let mut dom: RealDom<Empty> = RealDom::new();
 
     let _to_update = dom.apply_mutations(vec![mutations]);
-    let first_text = VText {
-        id: Cell::new(Some(ElementId(3))),
-        text: "hello",
-        is_static: true,
-    };
-    let first_text_node = VNode::Text(&first_text);
-    let child_text = VText {
-        id: Cell::new(Some(ElementId(5))),
-        text: "world",
-        is_static: true,
-    };
-    let child_text_node = VNode::Text(&child_text);
-    let child_p_el = VElement {
-        id: Cell::new(Some(ElementId(4))),
-        key: None,
-        tag: "p",
-        namespace: None,
-        parent: Cell::new(Some(ElementId(2))),
-        listeners: &[],
-        attributes: &[],
-        children: &[child_text_node],
-    };
-    let child_p_node = VNode::Element(&child_p_el);
-    let second_text = VText {
-        id: Cell::new(Some(ElementId(6))),
-        text: "hello world",
-        is_static: true,
-    };
-    let second_text_node = VNode::Text(&second_text);
-    let child_div_el = VElement {
-        id: Cell::new(Some(ElementId(2))),
-        key: None,
-        tag: "div",
-        namespace: None,
-        parent: Cell::new(Some(ElementId(1))),
-        listeners: &[],
-        attributes: &[],
-        children: &[first_text_node, child_p_node, second_text_node],
-    };
-    let child_div_node = VNode::Element(&child_div_el);
-    let root_div = VElement {
-        id: Cell::new(Some(ElementId(1))),
-        key: None,
-        tag: "div",
-        namespace: None,
-        parent: Cell::new(Some(ElementId(0))),
-        listeners: &[],
-        attributes: &[],
-        children: &[child_div_node],
-    };
-    assert_eq!(dom.size(), 6);
-    assert!(&dom.contains_node(&VNode::Element(&root_div)));
-    assert_eq!(dom[ElementId(1)].height, 1);
-    assert_eq!(dom[ElementId(2)].height, 2);
-    assert_eq!(dom[ElementId(3)].height, 3);
-    assert_eq!(dom[ElementId(4)].height, 3);
-    assert_eq!(dom[ElementId(5)].height, 4);
-    assert_eq!(dom[ElementId(6)].height, 3);
+    assert_eq!(dom.size(), 1);
+    assert_eq!(
+        dom[GlobalNodeId::TemplateId {
+            template_ref_id: dioxus_core::ElementId(1),
+            template_node_id: dioxus::prelude::TemplateNodeId(0),
+        }]
+        .node_data
+        .height,
+        1
+    );
+    assert_eq!(
+        dom[GlobalNodeId::TemplateId {
+            template_ref_id: dioxus_core::ElementId(1),
+            template_node_id: dioxus::prelude::TemplateNodeId(1),
+        }]
+        .node_data
+        .height,
+        2
+    );
+    assert_eq!(
+        dom[GlobalNodeId::TemplateId {
+            template_ref_id: dioxus_core::ElementId(1),
+            template_node_id: dioxus::prelude::TemplateNodeId(2),
+        }]
+        .node_data
+        .height,
+        3
+    );
+    assert_eq!(
+        dom[GlobalNodeId::TemplateId {
+            template_ref_id: dioxus_core::ElementId(1),
+            template_node_id: dioxus::prelude::TemplateNodeId(3),
+        }]
+        .node_data
+        .height,
+        3
+    );
+    assert_eq!(
+        dom[GlobalNodeId::TemplateId {
+            template_ref_id: dioxus_core::ElementId(1),
+            template_node_id: dioxus::prelude::TemplateNodeId(4),
+        }]
+        .node_data
+        .height,
+        4
+    );
+    assert_eq!(
+        dom[GlobalNodeId::TemplateId {
+            template_ref_id: dioxus_core::ElementId(1),
+            template_node_id: dioxus::prelude::TemplateNodeId(5),
+        }]
+        .node_data
+        .height,
+        3
+    );
 }