Merge pull request #466 from Demonthos/fix_js_interperter

check that an node is an element before removing listeners

packages/interpreter/src/interpreter.js

@@ -15,43 +15,45 @@ class ListenerMap {
     this.root = root;
   }
 
-  createBubbling(event_name, handler) {
+  create(event_name, element, handler, bubbles) {
-    if (this.global[event_name] === undefined) {
+    if (bubbles) {
-      this.global[event_name] = {};
+      if (this.global[event_name] === undefined) {
-      this.global[event_name].active = 1;
+        this.global[event_name] = {};
-      this.global[event_name].callback = handler;
+        this.global[event_name].active = 1;
-      this.root.addEventListener(event_name, handler);
+        this.global[event_name].callback = handler;
-    } else {
+        this.root.addEventListener(event_name, handler);
-      this.global[event_name].active++;
+      } else {
+        this.global[event_name].active++;
+      }
+    }
+    else {
+      const id = element.getAttribute("data-dioxus-id");
+      if (!this.local[id]) {
+        this.local[id] = {};
+      }
+      this.local[id][event_name] = handler;
+      element.addEventListener(event_name, handler);
     }
   }
 
-  createNonBubbling(event_name, element, handler) {
+  remove(element, event_name, bubbles) {
-    const id = element.getAttribute("data-dioxus-id");
+    if (bubbles) {
-    if (!this.local[id]) {
+      this.global[event_name].active--;
-      this.local[id] = {};
+      if (this.global[event_name].active === 0) {
+        this.root.removeEventListener(event_name, this.global[event_name].callback);
+        delete this.global[event_name];
+      }
     }
-    this.local[id][event_name] = handler;
+    else {
-    element.addEventListener(event_name, handler);
+      const id = element.getAttribute("data-dioxus-id");
-  }
+      delete this.local[id][event_name];
-
+      if (this.local[id].length === 0) {
-  removeBubbling(event_name) {
+        delete this.local[id];
-    this.global[event_name].active--;
+      }
-    if (this.global[event_name].active === 0) {
+      element.removeEventListener(event_name, handler);
-      this.root.removeEventListener(event_name, this.global[event_name].callback);
-      delete this.global[event_name];
     }
   }
 
-  removeNonBubbling(element, event_name) {
-    const id = element.getAttribute("data-dioxus-id");
-    delete this.local[id][event_name];
-    if (this.local[id].length === 0) {
-      delete this.local[id];
-    }
-    element.removeEventListener(event_name, handler);
-  }
-
   removeAllNonBubbling(element) {
     const id = element.getAttribute("data-dioxus-id");
     delete this.local[id];
@@ -93,7 +95,9 @@ export class Interpreter {
   ReplaceWith(root_id, m) {
     let root = this.nodes[root_id];
     let els = this.stack.splice(this.stack.length - m);
-    this.listeners.removeAllNonBubbling(root);
+    if (is_element_node(root.nodeType)) {
+      this.listeners.removeAllNonBubbling(root);
+    }
     root.replaceWith(...els);
   }
   InsertAfter(root, n) {
@@ -108,8 +112,10 @@ export class Interpreter {
   }
   Remove(root) {
     let node = this.nodes[root];
-    this.listeners.removeAllNonBubbling(node);
     if (node !== undefined) {
+      if (is_element_node(node)) {
+        this.listeners.removeAllNonBubbling(node);
+      }
       node.remove();
     }
   }
@@ -137,22 +143,12 @@ export class Interpreter {
   NewEventListener(event_name, root, handler, bubbles) {
     const element = this.nodes[root];
     element.setAttribute("data-dioxus-id", `${root}`);
-    if (bubbles) {
+    this.listeners.create(event_name, element, handler, bubbles);
-      this.listeners.createBubbling(event_name, handler);
-    }
-    else {
-      this.listeners.createNonBubbling(event_name, element, handler);
-    }
   }
   RemoveEventListener(root, event_name, bubbles) {
     const element = this.nodes[root];
     element.removeAttribute(`data-dioxus-id`);
-    if (bubbles) {
+    this.listeners.remove(element, event_name, bubbles);
-      this.listeners.removeBubbling(event_name)
-    }
-    else {
-      this.listeners.removeNonBubbling(element, event_name);
-    }
   }
   SetText(root, text) {
     this.nodes[root].textContent = text;
@@ -661,6 +657,10 @@ const bool_attrs = {
   truespeed: true,
 };
 
+function is_element_node(node) {
+  return node.nodeType == 1;
+}
+
 function event_bubbles(event) {
   switch (event) {
     case "copy":