ta-dom-components - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

package.json

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

ta-dom-element.js

 import TaDom from '/node_modules/ta-dom/index.js';
 import morphdom from '/node_modules/morphdom/dist/morphdom-esm.js';
 
+//helloWorld -> hello-world
+const camelToDash = function(str){
+  return str
+    .replace(/(^[A-Z])/, ([first]) => first.toLowerCase())
+    .replace(/([A-Z])/g, ([letter]) => `-${letter.toLowerCase()}`)
+}
+
+// hello-world -> helloWorld
+const dashToCamel = function(str) {
+  return str.split('-').map((w, i) => {
+    if(i === 0) {
+      // don't capitalize first word
+      return w;
+    }
+    return w.replace(/(^[a-z])/, ([first]) => first.toUpperCase())
+  }).join('');
+};
+
 // generate getter/setter pair for prop
 const generateProp = function(element, key, obj) {
-  const ret = {};
+  const prop = {};
   if (typeof obj.value === 'function') {
     // function types can only have getters
-    ret.get = function() {
+    prop.get = function() {
       return obj.value();
     }
   } else {
-    ret.get = function() {
+    prop.get = function() {
       return element.state_[key];
     }
-    ret.set = function(newVal) {
+    prop.set = function(newVal) {
+      const oldVal = this.state_[key];
+      // short-circuit if values are the same
+      if (newVal === oldVal) {
+        return;
+      }
       const newState = {};
       newState[key] = newVal;
-      const oldVal = this.state_[key];
-      // don't reflect arrays or objects to attributes
-      // TODO: should probably warn here
-      // ...
-      if (obj.reflectToAttribute && typeof newVal !== 'object' && !Array.isArray(newVal)) {
-        this.setAttribute(key, newVal);
-      }
+      // update state
       element.setState(newState);
-      //
+      // dispatch a changed event
       element.dispatchEvent(new CustomEvent(`${key}-changed`, {
@@ -38,3 +55,3 @@ bubbles: true,
   }
-  return ret;
+  return prop;
 }
@@ -46,3 +63,3 @@
       // TODO: do we have to remove event listeners from discarded nodes?
-      console.log('node discarded', node);
+      // console.log('node discarded', node);
     }
@@ -91,3 +108,3 @@ });
     this.attachShadow({mode: 'open'});
-    // initial state
+    // initialize state
     this.setState(this.state_);
@@ -99,4 +116,11 @@ }
     if (newVal !== oldVal) {
-      if (this[attribute] !== newVal) {
-        this[attribute] = newVal;
+      const key = dashToCamel(attribute);
+      if(typeof this.constructor.properties[key].value === 'boolean') {
+        if(newVal === '') {
+          this[key] = true;
+        } else {
+          this[key] = false;
+        }
+      } else if (this[key] !== newVal) {
+        this[key] = newVal;
       }
@@ -167,3 +191,3 @@ }
 
-    // update state
+    // update internal state and possible attributes
     for(let key in update) {
@@ -174,4 +198,17 @@ const val = update[key];
       }
+      if (this.constructor.properties[key].reflectToAttribute) {
+        if (typeof val !== 'object' && !Array.isArray(val)){
+          if(val) {
+
+            this.setAttribute(camelToDash(key), typeof val === 'boolean' ? '' : val);
+          } else {
+            this.removeAttribute(camelToDash(key));
+          }
+
+        } else {
+          console.warn('attempted to reflect an object or array to attribute:', key);
+        }
+      }
     }
-    // redraw dom async
+    // redraw dom on next animation frame
     window.requestAnimationFrame(() => {
@@ -184,4 +221,4 @@ const newDom = this.render();
         // first render
+        this.dom = newDom;
         this.updateStyles(this.constructor.css);
-        this.dom = newDom;
         this.shadowRoot.appendChild(this.dom);
@@ -202,2 +239,3 @@ } else {
 
+
 export default {customElement, TaDomElement};

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

27509

increased by143.21%

Number of package files

8

increased by60%

Lines of code

777

increased by201.16%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedta-dom@0.0.5(transitive)

• - Removedta-dom@0.0.3(transitive)

• Updatedta-dom@^0.0.5