wip: fragment diffing working

packages/core/tests/create_lists.rs

@@ -6,6 +6,8 @@ use dioxus_core::ElementId;
 // In react, this would be a lot of node creation.
 //
 // In Dioxus, we memoize the rsx! body and simplify it down to a few template loads
+//
+// Also note that the IDs increase linearly. This lets us drive a vec on the renderer for O(1) re-indexing
 fn app(cx: Scope) -> Element {
     cx.render(rsx! {
         div {
@@ -29,41 +31,41 @@ fn list_renders() {
         edits.template_mutations,
         [
             // Create the outer div
-            CreateElement { name: "div", namespace: None, id: ElementId(1) },
+            CreateElement { name: "div", namespace: None, id: ElementId(0) },
             // todo: since this is the only child, we should just use
             // append when modify the values (IE no need for a placeholder)
-            CreatePlaceholder { id: ElementId(2) },
+            CreatePlaceholder { id: ElementId(0) },
             AppendChildren { m: 1 },
             SaveTemplate { name: "template", m: 1 },
             // Create the inner template div
-            CreateElement { name: "div", namespace: None, id: ElementId(3) },
-            CreateElement { name: "h1", namespace: None, id: ElementId(4) },
+            CreateElement { name: "div", namespace: None, id: ElementId(0) },
+            CreateElement { name: "h1", namespace: None, id: ElementId(0) },
             CreateStaticText { value: "hello world! " },
             AppendChildren { m: 1 },
-            CreateElement { name: "p", namespace: None, id: ElementId(5) },
+            CreateElement { name: "p", namespace: None, id: ElementId(0) },
             CreateStaticText { value: "d" },
             AppendChildren { m: 1 },
             AppendChildren { m: 2 },
             SaveTemplate { name: "template", m: 1 }
-        ]
+        ],
     );
 
     assert_eq!(
         edits.edits,
         [
             // Load the outer div
-            LoadTemplate { name: "template", index: 0 },
+            LoadTemplate { name: "template", index: 0, id: ElementId(1) },
             // Load each template one-by-one, rehydrating it
-            LoadTemplate { name: "template", index: 0 },
-            HydrateText { path: &[1, 0], value: "0", id: ElementId(6) },
-            LoadTemplate { name: "template", index: 0 },
-            HydrateText { path: &[1, 0], value: "1", id: ElementId(7) },
-            LoadTemplate { name: "template", index: 0 },
-            HydrateText { path: &[1, 0], value: "2", id: ElementId(8) },
+            LoadTemplate { name: "template", index: 0, id: ElementId(2) },
+            HydrateText { path: &[1, 0], value: "0", id: ElementId(3) },
+            LoadTemplate { name: "template", index: 0, id: ElementId(4) },
+            HydrateText { path: &[1, 0], value: "1", id: ElementId(5) },
+            LoadTemplate { name: "template", index: 0, id: ElementId(6) },
+            HydrateText { path: &[1, 0], value: "2", id: ElementId(7) },
             // Replace the 0th childn on the div with the 3 templates on the stack
             ReplacePlaceholder { m: 3, path: &[0] },
             // Append the container div to the dom
             AppendChildren { m: 1 }
-        ]
+        ],
     )
 }

packages/core/tests/create_passthru.rs

@@ -28,13 +28,15 @@ fn nested_passthru_creates() {
     assert_eq!(
         edits.edits,
         [
-            LoadTemplate { name: "template", index: 0 },
+            LoadTemplate { name: "template", index: 0, id: ElementId(1) },
             AppendChildren { m: 1 },
         ]
     )
 }
 
 /// Should load all the templates and append them
+///
+/// Take note on how we don't spit out the template for child_comp since it's entirely dynamic
 #[test]
 fn nested_passthru_creates_add() {
     fn app(cx: Scope) -> Element {
@@ -64,15 +66,20 @@ fn nested_passthru_creates_add() {
     assert_eq!(
         dom.rebuild().santize().edits,
         [
-            LoadTemplate { name: "template", index: 0 },
-            LoadTemplate { name: "template", index: 0 },
-            LoadTemplate { name: "template", index: 0 },
-            LoadTemplate { name: "template", index: 1 },
+            // load 1
+            LoadTemplate { name: "template", index: 0, id: ElementId(1) },
+            // load 2
+            LoadTemplate { name: "template", index: 0, id: ElementId(2) },
+            // load 3
+            LoadTemplate { name: "template", index: 0, id: ElementId(3) },
+            // load div that contains 4
+            LoadTemplate { name: "template", index: 1, id: ElementId(4) },
             AppendChildren { m: 4 },
         ]
     );
 }
 
+/// note that the template is all dynamic roots - so it doesn't actually get cached as a template
 #[test]
 fn dynamic_node_as_root() {
     fn app(cx: Scope) -> Element {

packages/core/tests/diff_unkeyed_list.rs

@@ -0,0 +1,134 @@
+use dioxus::core::{ElementId, Mutation::*};
+use dioxus::prelude::*;
+
+#[test]
+fn list_creates_one_by_one() {
+    let mut dom = VirtualDom::new(|cx| {
+        let gen = cx.generation();
+
+        cx.render(rsx! {
+            div {
+                (0..gen).map(|i| rsx! {
+                    div { "{i}" }
+                })
+            }
+        })
+    });
+
+    // load the div and then assign the empty fragment as a placeholder
+    assert_eq!(
+        dom.rebuild().santize().edits,
+        [
+            LoadTemplate { name: "template", index: 0, id: ElementId(1,) },
+            AssignId { path: &[0], id: ElementId(2,) },
+            AppendChildren { m: 1 },
+        ]
+    );
+
+    // Rendering the first item should replace the placeholder with an element
+    dom.mark_dirty_scope(ScopeId(0));
+    assert_eq!(
+        dom.render_immediate().santize().edits,
+        [
+            LoadTemplate { name: "template", index: 0, id: ElementId(3,) },
+            HydrateText { path: &[0], value: "0", id: ElementId(4,) },
+            ReplaceWith { id: ElementId(2,), m: 1 },
+        ]
+    );
+
+    // Rendering the next item should insert after the previous
+    dom.mark_dirty_scope(ScopeId(0));
+    assert_eq!(
+        dom.render_immediate().santize().edits,
+        [
+            LoadTemplate { name: "template", index: 0, id: ElementId(5,) },
+            HydrateText { path: &[0], value: "1", id: ElementId(6,) },
+            InsertAfter { id: ElementId(3,), m: 1 },
+        ]
+    );
+
+    // ... and again!
+    dom.mark_dirty_scope(ScopeId(0));
+    assert_eq!(
+        dom.render_immediate().santize().edits,
+        [
+            LoadTemplate { name: "template", index: 0, id: ElementId(7,) },
+            HydrateText { path: &[0], value: "2", id: ElementId(8,) },
+            InsertAfter { id: ElementId(5,), m: 1 },
+        ]
+    );
+
+    // once more
+    dom.mark_dirty_scope(ScopeId(0));
+    assert_eq!(
+        dom.render_immediate().santize().edits,
+        [
+            LoadTemplate { name: "template", index: 0, id: ElementId(9,) },
+            HydrateText { path: &[0], value: "3", id: ElementId(10,) },
+            InsertAfter { id: ElementId(7,), m: 1 },
+        ]
+    );
+}
+
+#[test]
+fn removes_one_by_one() {
+    let mut dom = VirtualDom::new(|cx| {
+        let gen = 3 - cx.generation();
+
+        println!("gen: {:?}", gen);
+        println!("range: {:?}", 0..gen);
+
+        cx.render(rsx! {
+            div {
+                (0..gen).map(|i| rsx! {
+                    div { "{i}" }
+                })
+            }
+        })
+    });
+
+    // load the div and then assign the empty fragment as a placeholder
+    assert_eq!(
+        dom.rebuild().santize().edits,
+        [
+            // The container
+            LoadTemplate { name: "template", index: 0, id: ElementId(1) },
+            // each list item
+            LoadTemplate { name: "template", index: 0, id: ElementId(2) },
+            HydrateText { path: &[0], value: "0", id: ElementId(3) },
+            LoadTemplate { name: "template", index: 0, id: ElementId(4) },
+            HydrateText { path: &[0], value: "1", id: ElementId(5) },
+            LoadTemplate { name: "template", index: 0, id: ElementId(6) },
+            HydrateText { path: &[0], value: "2", id: ElementId(7) },
+            // replace the placeholder in the template with the 3 templates on the stack
+            ReplacePlaceholder { m: 3, path: &[0] },
+            // Mount the div
+            AppendChildren { m: 1 }
+        ]
+    );
+
+    // Remove div(3)
+    // Rendering the first item should replace the placeholder with an element
+    dom.mark_dirty_scope(ScopeId(0));
+    assert_eq!(
+        dom.render_immediate().santize().edits,
+        [Remove { id: ElementId(6) }]
+    );
+
+    // Remove div(2)
+    dom.mark_dirty_scope(ScopeId(0));
+    assert_eq!(
+        dom.render_immediate().santize().edits,
+        [Remove { id: ElementId(4) }]
+    );
+
+    // Remove div(1) and replace with a placeholder
+    dom.mark_dirty_scope(ScopeId(0));
+    assert_eq!(dom.render_immediate().santize().edits, []);
+
+    // dom.mark_dirty_scope(ScopeId(0));
+    // assert_eq!(
+    //     dom.render_immediate().santize().edits,
+    //     [Remove { id: ElementId(4) }]
+    // );
+}

packages/core/tests/suspend.rs

@@ -1,55 +1,67 @@
-use dioxus_core::*;
-use std::{cell::RefCell, rc::Rc, time::Duration};
+use dioxus::core::ElementId;
+use dioxus::core::{Mutation::*, SuspenseBoundary};
+use dioxus::prelude::*;
+use dioxus_core::SuspenseContext;
+use std::{rc::Rc, time::Duration};
 
 #[tokio::test]
 async fn it_works() {
     let mut dom = VirtualDom::new(app);
 
-    let mutations = dom.rebuild();
+    let mutations = dom.rebuild().santize();
 
-    println!("mutations: {:?}", mutations);
+    // We should at least get the top-level template in
+    assert_eq!(
+        mutations.template_mutations,
+        [
+            CreateElement { name: "div", namespace: None, id: ElementId(0) },
+            CreateStaticText { value: "Waiting for child..." },
+            CreatePlaceholder { id: ElementId(0) },
+            AppendChildren { m: 2 },
+            SaveTemplate { name: "template", m: 1 }
+        ]
+    );
+
+    // And we should load it in and assign the placeholder properly
+    assert_eq!(
+        mutations.edits,
+        [
+            LoadTemplate { name: "template", index: 0, id: ElementId(1) },
+            // hmmmmmmmmm.... with suspense how do we guarantee that IDs increase linearly?
+            // can we even?
+            AssignId { path: &[1], id: ElementId(3) },
+            AppendChildren { m: 1 },
+        ]
+    );
+
+    // wait just a moment, not enough time for the boundary to resolve
 
     dom.wait_for_work().await;
 }
 
 fn app(cx: Scope) -> Element {
-    println!("running root app");
-
-    VNode::template_from_dynamic_node(
-        cx,
-        cx.component(suspense_boundary, (), "suspense_boundary"),
-        "app",
-    )
+    cx.render(rsx!(
+        div {
+            "Waiting for child..."
+            suspense_boundary {}
+        }
+    ))
 }
 
 fn suspense_boundary(cx: Scope) -> Element {
-    println!("running boundary");
+    cx.use_hook(|| cx.provide_context(Rc::new(SuspenseBoundary::new(cx.scope_id()))));
 
-    let _ = cx.use_hook(|| {
-        cx.provide_context(Rc::new(RefCell::new(SuspenseBoundary::new(cx.scope_id()))))
-    });
+    // Ensure the right types are found
+    cx.has_context::<SuspenseContext>().unwrap();
 
-    VNode::template_from_dynamic_node(cx, cx.component(async_child, (), "async_child"), "app")
+    cx.render(rsx!(async_child {}))
 }
 
 async fn async_child(cx: Scope<'_>) -> Element {
-    println!("rendering async child");
-
-    let fut = cx.use_hook(|| {
-        Box::pin(async {
-            println!("Starting sleep");
-            tokio::time::sleep(Duration::from_secs(1)).await;
-            println!("Sleep ended");
-        })
-    });
-
-    fut.await;
-
-    println!("Future awaited and complete");
-
-    VNode::template_from_dynamic_node(cx, cx.component(async_text, (), "async_text"), "app")
+    use_future!(cx, || tokio::time::sleep(Duration::from_millis(10))).await;
+    cx.render(rsx!(async_text {}))
 }
 
 async fn async_text(cx: Scope<'_>) -> Element {
-    VNode::single_text(&cx, &[TemplateNode::Text("it works!")], "beauty")
+    cx.render(rsx!("async_text"))
 }

packages/core/tests/task.rs

@@ -3,6 +3,8 @@
 use dioxus::prelude::*;
 use std::time::Duration;
 
+static mut POLL_COUNT: usize = 0;
+
 #[tokio::test]
 async fn it_works() {
     let mut dom = VirtualDom::new(app);
@@ -11,23 +13,27 @@ async fn it_works() {
 
     tokio::select! {
         _ = dom.wait_for_work() => {}
-        _ = tokio::time::sleep(Duration::from_millis(600)) => {}
+        _ = tokio::time::sleep(Duration::from_millis(10)) => {}
     };
+
+    // By the time the tasks are finished, we should've accumulated ticks from two tasks
+    // Be warned that by setting the delay to too short, tokio might not schedule in the tasks
+    assert_eq!(unsafe { POLL_COUNT }, 135);
 }
 
 fn app(cx: Scope) -> Element {
     cx.use_hook(|| {
         cx.spawn(async {
             for x in 0..10 {
-                tokio::time::sleep(Duration::from_millis(50)).await;
-                println!("Hello, world! {x}");
+                tokio::time::sleep(Duration::from_micros(50)).await;
+                unsafe { POLL_COUNT += x }
             }
         });
 
         cx.spawn(async {
             for x in 0..10 {
-                tokio::time::sleep(Duration::from_millis(25)).await;
-                println!("Hello, world from second thread! {x}");
+                tokio::time::sleep(Duration::from_micros(25)).await;
+                unsafe { POLL_COUNT += x * 2 }
             }
         });
     });