@schukai/monster 3.43.0 → 3.44.1

package/package.json

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

package/source/dom/customelement.mjs

@@ -60,6 +60,12 @@ const assembleMethodSymbol = Symbol.for("@schukai/monster/dom/@@assembleMethodSy
  */
 const attributeObserverSymbol = Symbol.for("@schukai/monster/dom/@@attributeObserver");
 
+/**
+ * @private
+ * @type {symbol}
+ */
+const attributeMutationObserverSymbol = Symbol("@schukai/monster/dom/@@mutationObserver");
+
 /**
  * HTMLElement
  * @external HTMLElement
@@ -203,9 +209,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);
+
     }
 
     /**
@@ -229,6 +235,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.
      *
@@ -524,6 +552,9 @@ class CustomElement extends HTMLElement {
             customElementUpdaterLinkSymbol,
             clone(self[internalSymbol].getRealSubject()["options"]),
         );
+
+        attachAttributeChangeMutationObserver.call(this);
+
         return self;
     }
 
@@ -539,6 +570,7 @@ class CustomElement extends HTMLElement {
         if (!hasObjectLink(self, customElementUpdaterLinkSymbol)) {
             self[assembleMethodSymbol]();
         }
+
     }
 
     /**
@@ -576,7 +608,12 @@ class CustomElement extends HTMLElement {
         const callback = self[attributeObserverSymbol]?.[attrName];
 
         if (isFunction(callback)) {
-            callback.call(self, newVal, oldVal);
+            try {
+                callback.call(self, newVal, oldVal);
+            } catch (e) {
+                addAttributeToken(self, ATTRIBUTE_ERRORMESSAGE, e.toString());
+            }
+
         }
     }
 
@@ -604,32 +641,34 @@ class CustomElement extends HTMLElement {
 
 /**
  * This method is called when the element is first created.
- * 
+ *
  * @private
  * @this CustomElement
  */
-function initAttributeChangeMutationObserver() {
+function attachAttributeChangeMutationObserver() {
     const self = this;
 
-    if (self[attributeObserverSymbol] === undefined) {
-        self[attributeObserverSymbol] = {};
-    }
-    
-    if(Object.keys(self[attributeObserverSymbol]).length === 0) {
+    if (typeof self[attributeMutationObserverSymbol] !== "undefined") {
         return;
     }
 
-    new MutationObserver(function (mutations) {
+    self[attributeMutationObserverSymbol] = new MutationObserver(function (mutations, observer) {
         for (const mutation of mutations) {
             if (mutation.type === "attributes") {
                 self.attributeChangedCallback(mutation.attributeName, mutation.oldValue, mutation.target.getAttribute(mutation.attributeName));
             }
         }
-    }).observe(self, {
-        attributes: true,
-        attributeOldValue: true,
-        attributeFilter: Object.keys(self[attributeObserverSymbol]),
     });
+
+    try {
+        self[attributeMutationObserverSymbol].observe(self, {
+            attributes: true,
+            attributeOldValue: true,
+        });
+
+    } catch (e) {
+        addAttributeToken(self, ATTRIBUTE_ERRORMESSAGE, e.toString());
+    }
 }
 
 /**

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.1");
 
     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.1")
 
         let m = getMonsterVersion();