fix: Fixed mutation observer for custom controls.

application/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
@@ -205,7 +211,7 @@ class CustomElement extends HTMLElement {
         });
         this[initMethodSymbol]();
         initOptionObserver.call(this);
-        initAttributeChangeMutationObserver.call(this);
+
     }
 
     /**
@@ -546,6 +552,9 @@ class CustomElement extends HTMLElement {
             customElementUpdaterLinkSymbol,
             clone(self[internalSymbol].getRealSubject()["options"]),
         );
+
+        attachAttributeChangeMutationObserver.call(this);
+
         return self;
     }
 
@@ -561,6 +570,7 @@ class CustomElement extends HTMLElement {
         if (!hasObjectLink(self, customElementUpdaterLinkSymbol)) {
             self[assembleMethodSymbol]();
         }
+
     }
 
     /**
@@ -598,7 +608,12 @@ class CustomElement extends HTMLElement {
         const callback = self[attributeObserverSymbol]?.[attrName];
 
         if (isFunction(callback)) {
+            try {
                 callback.call(self, newVal, oldVal);
+            } catch (e) {
+                addAttributeToken(self, ATTRIBUTE_ERRORMESSAGE, e.toString());
+            }
+
         }
     }
 
@@ -630,19 +645,30 @@ class CustomElement extends HTMLElement {
  * @private
  * @this CustomElement
  */
-function initAttributeChangeMutationObserver() {
+function attachAttributeChangeMutationObserver() {
     const self = this;
 
-    new MutationObserver(function (mutations) {
+    if (typeof self[attributeMutationObserverSymbol] !== "undefined") {
+        return;
+    }
+
+    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, {
+    });
+
+    try {
+        self[attributeMutationObserverSymbol].observe(self, {
             attributes: true,
             attributeOldValue: true,
         });
+
+    } catch (e) {
+        addAttributeToken(self, ATTRIBUTE_ERRORMESSAGE, e.toString());
+    }
 }
 
 /**

development/package.json

@@ -31,20 +31,20 @@
     "clean-jsdoc-theme": "^4.2.7",
     "create-polyfill-service-url": "^2.2.6",
     "crypt": "^0.0.2",
-    "cssnano": "^6.0.0",
-    "esbuild": "^0.17.15",
-    "flow-bin": "^0.203.1",
+    "cssnano": "^6.0.1",
+    "esbuild": "^0.17.18",
+    "flow-bin": "^0.205.0",
     "fs": "0.0.1-security",
-    "glob": "^9.3.4",
+    "glob": "^10.2.2",
     "graphviz": "^0.0.9",
     "jsdoc": "^4.0.2",
     "jsdoc-external-example": "github:volker-schukai/jsdoc-external-example",
-    "jsdoc-plantuml": "^1.0.2",
-    "jsdom": "^21.1.1",
+    "jsdoc-plantuml": "^1.0.3",
+    "jsdom": "^21.1.2",
     "jsdom-global": "^3.0.2",
     "mocha": "^10.2.0",
     "node-plantuml": "^0.9.0",
-    "postcss": "^8.4.21",
+    "postcss": "^8.4.23",
     "postcss-fluid": "^1.4.2",
     "postcss-for": "^2.1.1",
     "postcss-import": "^15.1.0",
@@ -54,18 +54,18 @@
     "postcss-nesting": "^11.2.2",
     "postcss-normalize": "^10.0.1",
     "postcss-responsive-type": "^1.0.0",
-    "postcss-rtlcss": "^4.0.3",
+    "postcss-rtlcss": "^4.0.5",
     "postcss-strip-units": "^2.0.1",
     "rome": "^12.0.0",
-    "sinon": "^15.0.3",
+    "sinon": "^15.0.4",
     "url": "^0.11.0",
     "url-exist": "3.0.1",
     "util": "^0.12.5",
-    "vite": "^4.2.1",
+    "vite": "^4.3.3",
     "vite-plugin-banner": "^0.7.0",
     "vite-plugin-list-directory-contents": "^1.4.5",
     "vite-plugin-minify": "^1.5.2",
-    "vite-plugin-mkcert": "^1.14.0",
+    "vite-plugin-mkcert": "^1.14.1",
     "ws": "^8.13.0"
   }
 }

development/playground/dom-arguments/main.mjs

-import {Fetch} from '../../../application/source/i18n/providers/fetch.mjs';
-import {Updater} from '../../../application/source/dom/updater.mjs';
+// import {Fetch} from '../../../application/source/i18n/providers/fetch.mjs';
+// import {Updater} from '../../../application/source/dom/updater.mjs';
 import {
     attributeObserverSymbol,
     CustomElement,
     registerCustomElement
-} from '../../../application/source/dom/customelement.mjs';
+} from '../../../application/source/monster.mjs';
 import {domReady} from '../../../application/source/dom/ready.mjs';
-import {Embed} from '../../../application/source/i18n/providers/embed.mjs';
-import {ATTRIBUTE_OPTIONS_SELECTOR} from "../../../application/source/monster.mjs";
+// import {Embed} from '../../../application/source/i18n/providers/embed.mjs';
+// import {ATTRIBUTE_OPTIONS_SELECTOR} from "../../../application/source/monster.mjs";
 
 
 const initMethodSymbol = Symbol.for("@schukai/monster/dom/@@initMethodSymbol");
@@ -56,10 +56,10 @@ class Monster1 extends CustomElement {
 domReady.then(() => {
 
    
-    const m1 = document.querySelector("monster-1");
-    console.log(m1);
     
-    window.m1 = m1;
+    //console.log(m1);
+    
+    window.m1 = document.querySelector("monster-1");;
 
 
 // read from scritp tag with id i18n

development/playground/i18n-updater/updater.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Popper Button</title>
-    <script src="main.mjs" type="module"></script>
+    <script src="updater.js" type="module"></script>
 </head>
 <body>
 <a href="../">Back</a>