@schukai/monster 3.43.0 → 3.44.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schukai/monster",
-  "version": "3.43.0",
+  "version": "3.44.0",
   "description": "Monster is a simple library for creating fast, robust and lightweight websites.",
   "keywords": [
     "framework",

package/source/dom/customelement.mjs

@@ -203,9 +203,9 @@ class CustomElement extends HTMLElement {
         this[internalSymbol] = new ProxyObserver({
             options: initOptionsFromAttributes(this, extend({}, this.defaults)),
         });
-        initAttributeChangeMutationObserver.call(this);        
-        initOptionObserver.call(this);
         this[initMethodSymbol]();
+        initOptionObserver.call(this);
+        initAttributeChangeMutationObserver.call(this);
     }
 
     /**
@@ -229,6 +229,28 @@ class CustomElement extends HTMLElement {
         return [ATTRIBUTE_OPTIONS, ATTRIBUTE_DISABLED];
     }
 
+    /**
+     * 
+     * @param attribute
+     * @param callback
+     * @returns {Monster.DOM.CustomElement}
+     */
+    addAttributeObserver(attribute, callback) {
+        validateFunction(callback);
+        this[attributeObserverSymbol][attribute] = callback;
+        return this;
+    }
+
+    /**
+     * 
+     * @param attribute
+     * @returns {Monster.DOM.CustomElement}
+     */
+    removeAttributeObserver(attribute) {
+        delete this[attributeObserverSymbol][attribute];
+        return this;
+    }
+
     /**
      * Derived classes can override and extend this method as follows.
      *
@@ -611,14 +633,6 @@ class CustomElement extends HTMLElement {
 function initAttributeChangeMutationObserver() {
     const self = this;
 
-    if (self[attributeObserverSymbol] === undefined) {
-        self[attributeObserverSymbol] = {};
-    }
-    
-    if(Object.keys(self[attributeObserverSymbol]).length === 0) {
-        return;
-    }
-
     new MutationObserver(function (mutations) {
         for (const mutation of mutations) {
             if (mutation.type === "attributes") {
@@ -628,7 +642,6 @@ function initAttributeChangeMutationObserver() {
     }).observe(self, {
         attributes: true,
         attributeOldValue: true,
-        attributeFilter: Object.keys(self[attributeObserverSymbol]),
     });
 }
 

package/source/dom/updater.mjs

@@ -37,7 +37,7 @@ export { Updater, addObjectWithUpdaterToElement };
  * The updater class connects an object with the dom. In this way, structures and contents in the DOM can be programmatically adapted via attributes.
  *
  * For example, to include a string from an object, the attribute `data-monster-replace` can be used.
- * a further explanation can be found under {@tutorial dom-based-templating-implementation}.
+ * a further explanation can be found under [monsterjs.org](https://monsterjs.org/)
  *
  * Changes to attributes are made only when the direct values are changed. If you want to assign changes to other values
  * as well, you have to insert the attribute `data-monster-select-this`. This should be done with care, as it can reduce performance.

package/source/types/version.mjs

@@ -142,7 +142,7 @@ function getMonsterVersion() {
     }
 
     /** don't touch, replaced by make with package.json version */
-    monsterVersion = new Version("3.43.0");
+    monsterVersion = new Version("3.44.0");
 
     return monsterVersion;
 }

package/test/cases/monster.mjs

@@ -7,7 +7,7 @@ describe('Monster', function () {
         let monsterVersion
 
         /** don´t touch, replaced by make with package.json version */
-        monsterVersion = new Version("3.43.0")
+        monsterVersion = new Version("3.44.0")
 
         let m = getMonsterVersion();