Merge pull request #468 from Demonthos/fix_diffing_equal_length_listeners

Fix Diffing Equal Length Listeners

packages/core/src/diff.rs

@@ -402,12 +402,12 @@ impl<'b> DiffState<'b> {
 
         if old.listeners.len() == new.listeners.len() {
             for (old_l, new_l) in old.listeners.iter().zip(new.listeners.iter()) {
+                new_l.mounted_node.set(old_l.mounted_node.get());
                 if old_l.event != new_l.event {
                     self.mutations
                         .remove_event_listener(old_l.event, root.as_u64());
                     self.mutations.new_event_listener(new_l, cur_scope_id);
                 }
-                new_l.mounted_node.set(old_l.mounted_node.get());
             }
         } else {
             for listener in old.listeners {

tests/diffing.rs

@@ -756,3 +756,79 @@ fn add_nested_elements() {
         ]
     );
 }
+
+#[test]
+fn add_listeners() {
+    let vdom = new_dom();
+
+    let (_create, change) = vdom.diff_lazynodes(
+        rsx! {
+            div{}
+        },
+        rsx! {
+            div{
+                onkeyup: |_| {},
+                onkeydown: |_| {},
+            }
+        },
+    );
+
+    assert_eq!(
+        change.edits,
+        [
+            NewEventListener { event_name: "keyup", scope: ScopeId(0), root: 1 },
+            NewEventListener { event_name: "keydown", scope: ScopeId(0), root: 1 },
+        ]
+    );
+}
+
+#[test]
+fn remove_listeners() {
+    let vdom = new_dom();
+
+    let (_create, change) = vdom.diff_lazynodes(
+        rsx! {
+            div{
+                onkeyup: |_| {},
+                onkeydown: |_| {},
+            }
+        },
+        rsx! {
+            div{}
+        },
+    );
+
+    assert_eq!(
+        change.edits,
+        [
+            RemoveEventListener { event: "keyup", root: 1 },
+            RemoveEventListener { event: "keydown", root: 1 },
+        ]
+    );
+}
+
+#[test]
+fn diff_listeners() {
+    let vdom = new_dom();
+
+    let (_create, change) = vdom.diff_lazynodes(
+        rsx! {
+            div{
+                onkeydown: |_| {},
+            }
+        },
+        rsx! {
+            div{
+                onkeyup: |_| {},
+            }
+        },
+    );
+
+    assert_eq!(
+        change.edits,
+        [
+            RemoveEventListener { root: 1, event: "keydown" },
+            NewEventListener { event_name: "keyup", scope: ScopeId(0), root: 1 }
+        ]
+    );
+}