@webtides/element-js 0.4.1 → 0.5.0

package/CHANGELOG.md

@@ -14,11 +14,29 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 <!-- ### Changed -->
 <!-- ### Removed -->
 <!-- ### Fixed -->
+## [0.5.0] - 2022-09-13
+
+### Changed
+* improved the performance of the vanilla-renderer
+
+### Removed
+* setting attributes as properties during dom diffing for the vanilla renderer. This is potentially a **breaking** change if you used attributes with the "." (dot) notation
+
+## [0.4.3] - 2022-07-06
+
+### ADDED
+* parse option to propertyOptions that can be either a boolean OR a function for custom parsing
+* enhance reflect option in propertyOptions that it can also be a function for custom reflection
+
+## [0.4.2] - 2022-02-03
+
+### Fixed
+* vanilla-renderer: fixes attribute comparsion
 
 ## [0.4.1] - 2022-02-01
 
 ### Fixed
-* vanilla-renderer: fixes attribute comparsion 
+* refs="id[]" indexing keys not nodes *rolleyes* 
 
 ### Added
 * refs="id[]" aka possibbility to refrence a list of nodes to the $refs map. 

package/dist/index.js

@@ -33,10 +33,13 @@ function isNumber(value) {
 function isNaN(value) {
   return Number.isNaN(value);
 }
-function parseAttribute(value) {
-  if (!isString(value)) {
+function parseAttribute(value, options = {}) {
+  if (options.parse === false || !isString(value)) {
     return value;
   }
+  if (typeof options.parse === "function") {
+    return options.parse(value);
+  }
   let parsedValue = value;
   if (isJSON(value))
     parsedValue = JSON.parse(value);
@@ -132,7 +135,7 @@ var BaseElement = class extends HTMLElement {
     this._mutationObserver = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {
         if (mutation.type === "attributes" && mutation.target === this && this._state.hasOwnProperty(dashToCamel(mutation.attributeName))) {
-          this[dashToCamel(mutation.attributeName)] = parseAttribute(this.getAttribute(mutation.attributeName));
+          this[dashToCamel(mutation.attributeName)] = parseAttribute(this.getAttribute(mutation.attributeName), this._options.propertyOptions[dashToCamel(mutation.attributeName)]);
         }
         if (mutation.type === "attributes" && mutation.target !== this) {
           this.requestUpdate();
@@ -191,7 +194,9 @@ var BaseElement = class extends HTMLElement {
     Array.from(this.attributes).filter((attribute) => {
       return !ignoreAttributes.includes(attribute.name);
     }).forEach((attribute) => {
-      this.defineProperty(dashToCamel(attribute.name), parseAttribute(attribute.value), true);
+      const name = dashToCamel(attribute.name);
+      const parseOptions = this._options.propertyOptions[name];
+      this.defineProperty(name, parseAttribute(attribute.value, parseOptions), true);
     });
   }
   properties() {
@@ -208,7 +213,7 @@ var BaseElement = class extends HTMLElement {
     if (this._state.hasOwnProperty(property)) {
       return;
     }
-    if (!reflectAttribute && ((_a = this._options.propertyOptions[property]) == null ? void 0 : _a.reflect) === true) {
+    if (!reflectAttribute && ((_a = this._options.propertyOptions[property]) == null ? void 0 : _a.reflect)) {
       this.reflectProperty({property, newValue: value});
     }
     if (((_b = this._options.propertyOptions[property]) == null ? void 0 : _b.reflect) === false) {
@@ -225,7 +230,7 @@ var BaseElement = class extends HTMLElement {
         const newValueString = JSON.stringify(newValue);
         if (JSON.stringify(oldValue) !== newValueString) {
           this._state[property] = newValue;
-          if (reflectAttribute || ((_a2 = this._options.propertyOptions[property]) == null ? void 0 : _a2.reflect) === true) {
+          if (reflectAttribute || ((_a2 = this._options.propertyOptions[property]) == null ? void 0 : _a2.reflect)) {
             this.reflectProperty({property, newValue, newValueString});
           }
           const informWatchedPropertiesAndDispatchChangeEvent = () => {
@@ -255,12 +260,16 @@ var BaseElement = class extends HTMLElement {
     });
   }
   reflectProperty(options) {
+    var _a;
     const {property, newValue} = options;
     const newValueString = options.newValueString || JSON.stringify(newValue);
     if (newValue === void 0 || newValue === null || isNaN(newValue)) {
       this.setAttribute(camelToDash(property), "");
     } else {
-      const attributeValue = isObjectLike(newValue) ? newValueString : newValue;
+      let attributeValue = isObjectLike(newValue) ? newValueString : newValue;
+      if (typeof ((_a = this._options.propertyOptions[property]) == null ? void 0 : _a.reflect) === "function") {
+        attributeValue = this._options.propertyOptions[property].reflect(newValue);
+      }
       this.setAttribute(camelToDash(property), attributeValue);
     }
   }
@@ -350,7 +359,7 @@ var BaseElement = class extends HTMLElement {
         if (!refsMap[cleanKey] || !hasListRef) {
           refsMap[cleanKey] = [];
         }
-        refsMap[cleanKey].push(cleanKey);
+        refsMap[cleanKey].push(refNode);
       } else if (!hasListRef) {
         refsMap[refKey] = refNode;
       } else {