ta-dom-components - npm Package Compare versions

Comparing version 0.0.7 to 0.0.8

example/another-element.js

 import TaDom from '/ta-dom-element.js';
 
 export class AnotherElement extends TaDom.TaDomElement {
+
   static get css() {
     return link({rel:'stylesheet', href:'./another-element.css'});
   }
+
   static get properties() {
     return {
-      name:{
+      name: {
         value: 'bob',
@@ -20,2 +22,10 @@ reflectToAttribute: true
 
+  connectedCallback() {
+    super.connectedCallback();
+    console.log('another-element connected');
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    console.log('another-element disconnected');
+  }
   render() {
@@ -22,0 +32,0 @@ return div(`hello there, ${this.name}!`);

example/my-element.js

@@ -91,3 +91,5 @@ import TaDom from '/ta-dom-element.js';
     disconnectedCallback() {
+      super.disconnectedCallback();
       this.mousePos$.unsubscribe();
+      this.timer$.unsubscribe();
     }
@@ -141,3 +143,3 @@
           maybeThing(),
-          anotherElement({name:'Howard'})
+          anotherElement({name:'Howard', 'on-click':event => console.log('clicked another')})
         )
@@ -144,0 +146,0 @@ )

package.json

 {
   "name": "ta-dom-components",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "another web-component library",
@@ -18,4 +18,4 @@ "main": "index.js",
     "morphdom": "github:kozmanbalint/morphdom",
-    "ta-dom": "^0.0.5"
+    "ta-dom": "^0.0.6"
   }
 }

ta-dom-element.js

@@ -58,7 +58,30 @@ import TaDom from '/node_modules/ta-dom/index.js';
 
+// removes listeners from discarded nodes
+const removeListeners = (el) => {
+  if (el.__eventListeners) {
+    el.__eventListeners.forEach(l => {
+      el.removeEventListener(l.eventName, l.fn);
+    });
+  }
+  el.__eventListeners = undefined;
+  if (el.children && el.children.length > 0) {
+    Array.from(el.children).forEach(c => {
+      removeListeners(c);
+    });
+  }
+};
+
+// Each ta-dom element only compares what's inside it's shadow
+// dom. Is there a way to prevent child components from getting
+// recreated all the time?
+// morphdom seems to handle this well.
+// ex:
+// a render function returns:
+// div(myElement({some-attr:this.myProp}))
+// a new myElement will get instantiated, but the existing element may
+// not get replaced.
 const compareNodes = function(newNode, oldNode) {
   return morphdom(oldNode, newNode, {
     onNodeDiscarded: node => {
-      // TODO: do we have to remove event listeners from discarded nodes?
-      // console.log('node discarded', node);
+      removeListeners(node);
     }
@@ -116,2 +139,9 @@ });
 
+  disconnectedCallback() {
+    if(this.dom){
+      removeListeners(this.dom);
+      this.dom.remove();
+    }
+  }
+
   // handle attribute changes
@@ -152,2 +182,3 @@ attributeChangedCallback(attribute, oldVal, newVal) {
   // replaces the entire style sheet
+  // TODO: handle caching external styles somehow??
   updateStyles(newStyle) {
@@ -217,17 +248,23 @@ // first render
     window.cancelAnimationFrame(this.drawId);
-    this.drawId_ = window.requestAnimationFrame(() => {
-      const newDom = this.render();
-      if (!newDom){
-        return;
-      }
-      if (!this.dom) {
-        // first render
-        this.dom = newDom;
-        this.updateStyles(this.constructor.css);
+    // short-circuit if not connected!
+    if(!this.isConnected) {
+      return;
+    }
+    const newDom = this.render();
+    if (!newDom){
+      return;
+    }
+    if (!this.dom) {
+      // first render
+      this.dom = newDom;
+      this.updateStyles(this.constructor.css);
+      this.drawId_ = window.requestAnimationFrame(() => {
         this.shadowRoot.appendChild(this.dom);
-      } else {
+      });
+    } else {
+      this.drawId_ = window.requestAnimationFrame(() => {
         // after first render
-        this.dom = compareNodes(newDom, this.dom);
-      }
-    });
+        compareNodes(newDom, this.dom);
+      });
+    }
   }
@@ -234,0 +271,0 @@ };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

29740

increased by4.54%

Lines of code

858

increased by5.54%

Dependency changes

• + Addedta-dom@0.0.6(transitive)

• - Removedta-dom@0.0.5(transitive)

• Updatedta-dom@^0.0.6