feat: keyed diffing

packages/core/tests/diffing.rs

@@ -1,7 +1,7 @@
 //! Diffing Tests
 //! -------------
 //!
-//! These should always compile and run, but the result is not validated for each test.
+//! These should always compile and run, but the result is not validat root: (), m: () ed for each test.
 //! TODO: Validate the results beyond visual inspection.
 
 use bumpalo::Bump;
@@ -13,6 +13,8 @@ use dioxus::{
 use dioxus_core as dioxus;
 use dioxus_html as dioxus_elements;
 use futures_util::FutureExt;
+mod test_logging;
+use DomEdit::*;
 
 struct TestDom {
     bump: Bump,
@@ -20,6 +22,7 @@ struct TestDom {
 }
 impl TestDom {
     fn new() -> TestDom {
+        test_logging::set_up_logging();
         let bump = Bump::new();
         let resources = SharedResources::new();
         TestDom { bump, resources }
@@ -106,28 +109,70 @@ fn diffing_works() {}
 #[test]
 fn html_and_rsx_generate_the_same_output() {
     let dom = TestDom::new();
-    let edits = dom.lazy_diff(
+    let (create, change) = dom.lazy_diff(
         rsx! ( div { "Hello world" } ),
         rsx! ( div { "Goodbye world" } ),
     );
-    dbg!(edits);
+    assert_eq!(
+        create.edits,
+        [
+            CreateElement { id: 0, tag: "div" },
+            CreateTextNode {
+                id: 1,
+                text: "Hello world"
+            },
+            AppendChildren { many: 1 },
+            AppendChildren { many: 1 },
+        ]
+    );
+
+    assert_eq!(
+        change.edits,
+        [
+            PushRoot { id: 1 },
+            SetText {
+                text: "Goodbye world"
+            },
+            PopRoot
+        ]
+    );
 }
 
 /// Should result in 3 elements on the stack
 #[test]
 fn fragments_create_properly() {
     let dom = TestDom::new();
-    let Mutations { edits, noderefs } = dom.create(rsx! {
+
+    let create = dom.create(rsx! {
         div { "Hello a" }
         div { "Hello b" }
         div { "Hello c" }
     });
-    assert!(&edits[0].is("CreateElement"));
-    assert!(&edits[3].is("CreateElement"));
-    assert!(&edits[6].is("CreateElement"));
 
-    assert_eq!(*edits.last().unwrap(), DomEdit::AppendChildren { many: 3 });
-    dbg!(edits);
+    assert_eq!(
+        create.edits,
+        [
+            CreateElement { id: 0, tag: "div" },
+            CreateTextNode {
+                id: 1,
+                text: "Hello a"
+            },
+            AppendChildren { many: 1 },
+            CreateElement { id: 2, tag: "div" },
+            CreateTextNode {
+                id: 3,
+                text: "Hello b"
+            },
+            AppendChildren { many: 1 },
+            CreateElement { id: 4, tag: "div" },
+            CreateTextNode {
+                id: 5,
+                text: "Hello c"
+            },
+            AppendChildren { many: 1 },
+            AppendChildren { many: 3 },
+        ]
+    );
 }
 
 /// Should result in the creation of an anchor (placeholder) and then a replacewith
@@ -138,8 +183,19 @@ fn empty_fragments_create_anchors() {
     let left = rsx!({ (0..0).map(|f| rsx! { div {}}) });
     let right = rsx!({ (0..1).map(|f| rsx! { div {}}) });
 
-    let edits = dom.lazy_diff(left, right);
-    dbg!(edits);
+    let (create, change) = dom.lazy_diff(left, right);
+
+    assert_eq!(
+        create.edits,
+        [CreatePlaceholder { id: 0 }, AppendChildren { many: 1 }]
+    );
+    assert_eq!(
+        change.edits,
+        [
+            CreateElement { id: 1, tag: "div" },
+            ReplaceWith { m: 1, root: 0 }
+        ]
+    );
 }
 
 /// Should result in the creation of an anchor (placeholder) and then a replacewith m=5
@@ -150,8 +206,22 @@ fn empty_fragments_create_many_anchors() {
     let left = rsx!({ (0..0).map(|f| rsx! { div {}}) });
     let right = rsx!({ (0..5).map(|f| rsx! { div {}}) });
 
-    let edits = dom.lazy_diff(left, right);
-    dbg!(edits);
+    let (create, change) = dom.lazy_diff(left, right);
+    assert_eq!(
+        create.edits,
+        [CreatePlaceholder { id: 0 }, AppendChildren { many: 1 }]
+    );
+    assert_eq!(
+        change.edits,
+        [
+            CreateElement { id: 1, tag: "div" },
+            CreateElement { id: 2, tag: "div" },
+            CreateElement { id: 3, tag: "div" },
+            CreateElement { id: 4, tag: "div" },
+            CreateElement { id: 5, tag: "div" },
+            ReplaceWith { m: 5, root: 0 }
+        ]
+    );
 }
 
 /// Should result in the creation of an anchor (placeholder) and then a replacewith
@@ -162,15 +232,40 @@ fn empty_fragments_create_anchors_with_many_children() {
 
     let left = rsx!({ (0..0).map(|f| rsx! { div {} }) });
     let right = rsx!({
-        (0..5).map(|f| {
-            rsx! { div { "hello" }}
+        (0..3).map(|f| {
+            rsx! { div { "hello: {f}" }}
         })
     });
 
-    let edits = dom.lazy_diff(left, right);
-    dbg!(&edits);
-    let last_edit = edits.1.edits.last().unwrap();
-    assert!(last_edit.is("ReplaceWith"));
+    let (create, change) = dom.lazy_diff(left, right);
+    assert_eq!(
+        create.edits,
+        [CreatePlaceholder { id: 0 }, AppendChildren { many: 1 }]
+    );
+    assert_eq!(
+        change.edits,
+        [
+            CreateElement { id: 1, tag: "div" },
+            CreateTextNode {
+                text: "hello: 0",
+                id: 2
+            },
+            AppendChildren { many: 1 },
+            CreateElement { id: 3, tag: "div" },
+            CreateTextNode {
+                text: "hello: 1",
+                id: 4
+            },
+            AppendChildren { many: 1 },
+            CreateElement { id: 5, tag: "div" },
+            CreateTextNode {
+                text: "hello: 2",
+                id: 6
+            },
+            AppendChildren { many: 1 },
+            ReplaceWith { m: 3, root: 0 }
+        ]
+    );
 }
 
 /// Should result in every node being pushed and then replaced with an anchor
@@ -185,8 +280,35 @@ fn many_items_become_fragment() {
     });
     let right = rsx!({ (0..0).map(|f| rsx! { div {} }) });
 
-    let edits = dom.lazy_diff(left, right);
-    dbg!(&edits);
+    let (create, change) = dom.lazy_diff(left, right);
+    assert_eq!(
+        create.edits,
+        [
+            CreateElement { id: 0, tag: "div" },
+            CreateTextNode {
+                text: "hello",
+                id: 1
+            },
+            AppendChildren { many: 1 },
+            CreateElement { id: 2, tag: "div" },
+            CreateTextNode {
+                text: "hello",
+                id: 3
+            },
+            AppendChildren { many: 1 },
+            AppendChildren { many: 2 },
+        ]
+    );
+
+    // hmmmmmmmmm worried about reusing IDs that we shouldnt be
+    assert_eq!(
+        change.edits,
+        [
+            Remove { root: 2 },
+            CreatePlaceholder { id: 4 },
+            ReplaceWith { root: 0, m: 1 },
+        ]
+    );
 }
 
 /// Should result in no edits
@@ -205,9 +327,8 @@ fn two_equal_fragments_are_equal() {
         })
     });
 
-    let edits = dom.lazy_diff(left, right);
-    dbg!(&edits);
-    assert!(edits.1.edits.is_empty());
+    let (create, change) = dom.lazy_diff(left, right);
+    assert!(change.edits.is_empty());
 }
 
 /// Should result the creation of more nodes appended after the old last node
@@ -216,11 +337,11 @@ fn two_fragments_with_differrent_elements_are_differet() {
     let dom = TestDom::new();
 
     let left = rsx!(
-        {(0..2).map(|f| {rsx! { div {  }}})}
+        { (0..2).map(|f| rsx! { div {  }} ) }
         p {}
     );
     let right = rsx!(
-        {(0..5).map(|f| {rsx! { h1 {  }}})}
+        { (0..5).map(|f| rsx! (h1 {  }) ) }
         p {}
     );
 
@@ -242,8 +363,31 @@ fn two_fragments_with_differrent_elements_are_differet_shorter() {
         p {}
     );
 
-    let edits = dom.lazy_diff(left, right);
-    dbg!(&edits);
+    let (create, change) = dom.lazy_diff(left, right);
+    assert_eq!(
+        create.edits,
+        [
+            CreateElement { id: 0, tag: "div" },
+            CreateElement { id: 1, tag: "div" },
+            CreateElement { id: 2, tag: "div" },
+            CreateElement { id: 3, tag: "div" },
+            CreateElement { id: 4, tag: "div" },
+            CreateElement { id: 5, tag: "p" },
+            AppendChildren { many: 6 },
+        ]
+    );
+    assert_eq!(
+        change.edits,
+        [
+            Remove { root: 2 },
+            Remove { root: 3 },
+            Remove { root: 4 },
+            CreateElement { id: 6, tag: "h1" },
+            ReplaceWith { root: 0, m: 1 },
+            CreateElement { id: 7, tag: "h1" },
+            ReplaceWith { root: 1, m: 1 },
+        ]
+    );
 }
 
 /// Should result in multiple nodes destroyed - with no changes
@@ -260,26 +404,25 @@ fn two_fragments_with_same_elements_are_differet() {
         p {}
     );
 
-    let edits = dom.lazy_diff(left, right);
-    dbg!(&edits);
-}
-
-// Similar test from above, but with extra child nodes
-#[test]
-fn two_fragments_with_same_elements_are_differet_shorter() {
-    let dom = TestDom::new();
-
-    let left = rsx!(
-        {(0..5).map(|f| {rsx! { div {  }}})}
-        p {"e"}
+    let (create, change) = dom.lazy_diff(left, right);
+    assert_eq!(
+        create.edits,
+        [
+            CreateElement { id: 0, tag: "div" },
+            CreateElement { id: 1, tag: "div" },
+            CreateElement { id: 2, tag: "p" },
+            AppendChildren { many: 3 },
+        ]
     );
-    let right = rsx!(
-        {(0..2).map(|f| {rsx! { div {  }}})}
-        p {"e"}
+    assert_eq!(
+        change.edits,
+        [
+            CreateElement { id: 3, tag: "div" },
+            CreateElement { id: 4, tag: "div" },
+            CreateElement { id: 5, tag: "div" },
+            InsertAfter { root: 1, n: 3 },
+        ]
     );
-
-    let edits = dom.lazy_diff(left, right);
-    dbg!(&edits);
 }
 
 /// should result in the removal of elements
@@ -296,8 +439,11 @@ fn keyed_diffing_order() {
         p {"e"}
     );
 
-    let edits = dom.lazy_diff(left, right);
-    dbg!(&edits);
+    let (create, change) = dom.lazy_diff(left, right);
+    assert_eq!(
+        change.edits,
+        [Remove { root: 2 }, Remove { root: 3 }, Remove { root: 4 },]
+    );
 }
 
 #[test]
@@ -313,23 +459,239 @@ fn fragment_keys() {
 fn keyed_diffing_out_of_order() {
     let dom = TestDom::new();
 
-    // 0, 1, 2, 3, 4, 5, 6, 7, 8,
     let left = rsx!({
-        (0..3).chain(3..6).chain(6..9).map(|f| {
+        [0, 1, 2, 3, /**/ 4, 5, 6, /**/ 7, 8, 9].iter().map(|f| {
             rsx! { div { key: "{f}"  }}
         })
     });
 
-    // 0, 1, 2, 6, 5, 4, 3, 7, 8, 9
     let right = rsx!({
-        (0..3).chain((3..7).rev()).chain(7..10).map(|f| {
+        [0, 1, 2, 3, /**/ 6, 4, 5, /**/ 7, 8, 9].iter().map(|f| {
             rsx! { div { key: "{f}"  }}
         })
     });
 
-    // LIS: 3, 7, 8,
     let edits = dom.lazy_diff(left, right);
-    dbg!(&edits);
+    dbg!(&edits.1);
+}
+
+/// Should result in moves only
+#[test]
+fn keyed_diffing_out_of_order_adds() {
+    let dom = TestDom::new();
+
+    let left = rsx!({
+        [/**/ 4, 5, 6, 7, 8 /**/].iter().map(|f| {
+            rsx! { div { key: "{f}"  }}
+        })
+    });
+
+    let right = rsx!({
+        [/**/ 8, 7, 4, 5, 6 /**/].iter().map(|f| {
+            rsx! { div { key: "{f}"  }}
+        })
+    });
+
+    let (_, change) = dom.lazy_diff(left, right);
+    assert_eq!(
+        change.edits,
+        [
+            PushRoot { id: 4 },
+            PushRoot { id: 3 },
+            InsertBefore { n: 2, root: 0 }
+        ]
+    );
+}
+/// Should result in moves onl
+#[test]
+fn keyed_diffing_out_of_order_adds_2() {
+    let dom = TestDom::new();
+
+    let left = rsx!({
+        [/**/ 4, 5, 6, 7, 8 /**/].iter().map(|f| {
+            rsx! { div { key: "{f}"  }}
+        })
+    });
+
+    let right = rsx!({
+        [/**/ 7, 8, 4, 5, 6 /**/].iter().map(|f| {
+            rsx! { div { key: "{f}"  }}
+        })
+    });
+
+    let (_, change) = dom.lazy_diff(left, right);
+    assert_eq!(
+        change.edits,
+        [
+            PushRoot { id: 3 },
+            PushRoot { id: 4 },
+            InsertBefore { n: 2, root: 0 }
+        ]
+    );
+}
+
+/// Should result in moves onl
+#[test]
+fn keyed_diffing_out_of_order_adds_3() {
+    let dom = TestDom::new();
+
+    let left = rsx!({
+        [/**/ 4, 5, 6, 7, 8 /**/].iter().map(|f| {
+            rsx! { div { key: "{f}"  }}
+        })
+    });
+
+    let right = rsx!({
+        [/**/ 4, 8, 7, 5, 6 /**/].iter().map(|f| {
+            rsx! { div { key: "{f}"  }}
+        })
+    });
+
+    let (_, change) = dom.lazy_diff(left, right);
+    assert_eq!(
+        change.edits,
+        [
+            PushRoot { id: 4 },
+            PushRoot { id: 3 },
+            InsertBefore { n: 2, root: 1 }
+        ]
+    );
+}
+
+/// Should result in moves onl
+#[test]
+fn keyed_diffing_out_of_order_adds_4() {
+    let dom = TestDom::new();
+
+    let left = rsx!({
+        [/**/ 4, 5, 6, 7, 8 /**/].iter().map(|f| {
+            rsx! { div { key: "{f}"  }}
+        })
+    });
+
+    let right = rsx!({
+        [/**/ 4, 5, 8, 7, 6 /**/].iter().map(|f| {
+            rsx! { div { key: "{f}"  }}
+        })
+    });
+
+    let (_, change) = dom.lazy_diff(left, right);
+    assert_eq!(
+        change.edits,
+        [
+            PushRoot { id: 4 },
+            PushRoot { id: 3 },
+            InsertBefore { n: 2, root: 2 }
+        ]
+    );
+}
+
+/// Should result in moves onl
+#[test]
+fn keyed_diffing_out_of_order_adds_5() {
+    let dom = TestDom::new();
+
+    let left = rsx!({
+        [/**/ 4, 5, 6, 7, 8 /**/].iter().map(|f| {
+            rsx! { div { key: "{f}"  }}
+        })
+    });
+
+    let right = rsx!({
+        [/**/ 4, 5, 6, 8, 7 /**/].iter().map(|f| {
+            rsx! { div { key: "{f}"  }}
+        })
+    });
+
+    let (_, change) = dom.lazy_diff(left, right);
+    assert_eq!(
+        change.edits,
+        [PushRoot { id: 4 }, InsertBefore { n: 1, root: 3 }]
+    );
+}
+
+#[test]
+fn keyed_diffing_additions() {
+    let dom = TestDom::new();
+
+    let left = rsx!({
+        [/**/ 4, 5, 6, 7, 8 /**/].iter().map(|f| {
+            rsx! { div { key: "{f}"  }}
+        })
+    });
+
+    let right = rsx!({
+        [/**/ 4, 5, 6, 7, 8, 9, 10 /**/].iter().map(|f| {
+            rsx! { div { key: "{f}"  }}
+        })
+    });
+
+    let (_, change) = dom.lazy_diff(left, right);
+    assert_eq!(
+        change.edits,
+        [
+            CreateElement { id: 5, tag: "div" },
+            CreateElement { id: 6, tag: "div" },
+            InsertAfter { n: 2, root: 4 }
+        ]
+    );
+}
+
+#[test]
+fn keyed_diffing_additions_and_moves_on_ends() {
+    let dom = TestDom::new();
+
+    let left = rsx!({
+        [/**/ 4, 5, 6, 7 /**/].iter().map(|f| {
+            rsx! { div { key: "{f}"  }}
+        })
+    });
+
+    let right = rsx!({
+        [/**/ 7, 4, 5, 6, 11, 12 /**/].iter().map(|f| {
+            // [/**/ 8, 7, 4, 5, 6, 9, 10 /**/].iter().map(|f| {
+            rsx! { div { key: "{f}"  }}
+        })
+    });
+
+    let (_, change) = dom.lazy_diff(left, right);
+    dbg!(change);
+    // assert_eq!(
+    //     change.edits,
+    //     [
+    //         CreateElement { id: 5, tag: "div" },
+    //         CreateElement { id: 6, tag: "div" },
+    //         InsertAfter { n: 2, root: 4 }
+    //     ]
+    // );
+}
+
+#[test]
+fn keyed_diffing_additions_and_moves_in_middle() {
+    let dom = TestDom::new();
+
+    let left = rsx!({
+        [/**/ 4, 5, 6, 7 /**/].iter().map(|f| {
+            rsx! { div { key: "{f}"  }}
+        })
+    });
+
+    let right = rsx!({
+        [/**/ 7, 4, 13, 17, 5, 11, 12, 6 /**/].iter().map(|f| {
+            rsx! { div { key: "{f}"  }}
+        })
+    });
+
+    let (_, change) = dom.lazy_diff(left, right);
+    dbg!(change);
+    // assert_eq!(
+    //     change.edits,
+    //     [
+    //         CreateElement { id: 5, tag: "div" },
+    //         CreateElement { id: 6, tag: "div" },
+    //         InsertAfter { n: 2, root: 4 }
+    //     ]
+    // );
 }
 
 #[test]