CHANGELOG.md

 
+<a name="v3.44.0"></a>
+## [v3.44.0] - 2023-05-01
+### Changes
+- doc
+
+### Code Refactoring
+- monitor all attribute changes
+
+
 <a name="v3.43.0"></a>
 ## [v3.43.0] - 2023-04-07
 ### Add Features
@@ -587,6 +596,7 @@
 <a name="1.8.0"></a>
 ## 1.8.0 - 2021-08-15
 
+[v3.44.0]: https://gitlab.schukai.com/oss/libraries/javascript/monster/compare/v3.43.0...v3.44.0
 [v3.43.0]: https://gitlab.schukai.com/oss/libraries/javascript/monster/compare/v3.42.1...v3.43.0
 [v3.42.1]: https://gitlab.schukai.com/oss/libraries/javascript/monster/compare/v3.42.0...v3.42.1
 [v3.42.0]: https://gitlab.schukai.com/oss/libraries/javascript/monster/compare/v3.41.0...v3.42.0

application/package.json

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

application/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]),
     });
 }
 

application/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.

application/source/types/version.mjs

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

development/package.json

 {
   "name": "monster",
-  "version": "3.42.1",
+  "version": "3.43.0",
   "description": "monster",
   "repository": {
     "type": "git",

development/playground/dom-arguments/index.html

+<!doctype html>
+<html lang="en">
+<head>
+    <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>
+</head>
+<body>
+<a href="../">Back</a>
+<main>
+<h1>Updater</h1>
+
+<script type="application/json" data-monster-role="translations">
+    {
+        "theListContainsNoEntries": "translation1",
+        "key2": {
+            "other": "translation2"
+        },
+        "multi": {
+            "two": "translation3"
+        }
+    }
+</script>
+
+<monster-1>Monster1</monster-1>
+</main>
+</body>
+</html>

development/playground/dom-arguments/main.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';
+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";
+
+
+const initMethodSymbol = Symbol.for("@schukai/monster/dom/@@initMethodSymbol");
+
+class Monster1 extends CustomElement {
+
+    constructor() {
+        super();
+     
+    }
+
+    get defaults() {
+        return Object.assign(
+            {},
+            super.defaults,
+            {
+                a: {
+                    b: {
+                        c: "d"
+                    }
+                }
+            });
+    };
+    
+    
+    [initMethodSymbol]() {
+        self = this;
+        console.log("initMethodSymbol");
+        this[attributeObserverSymbol]["data-monster-option-a-b-c"] = (value) => {
+            console.log("data-monster-option-a-b-c", value);
+            self.setOption("a.b.c", value);
+        };
+    }
+
+    /**
+     *
+     * @return {string}
+     */
+    static getTag() {
+        return "monster-1";
+    }
+
+}
+
+
+domReady.then(() => {
+
+   
+    const m1 = document.querySelector("monster-1");
+    console.log(m1);
+    
+    window.m1 = m1;
+
+
+// read from scritp tag with id i18n
+
+
+});
+
+registerCustomElement(Monster1);

development/playground/dom-arguments/translation.json

+{
+  "key1": "value1",
+  "key2": "value2"
+}
\ No newline at end of file

development/playground/dom-insert/index.html

-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
-    <script type="module" src="main.mjs"></script>
+    <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>
 </head>
 <body>
-<h1>Updater</h1>
+<a href="../">Back</a>
+<main>
 
 
 <template id="current">
@@ -14,6 +18,6 @@
     <ul data-monster-insert="current path:a.b" >
     </ul>
 </div>
-
+</main>
 </body>
 </html>

development/playground/i18n-control/index.html

-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
-    <script type="module" src="main.mjs"></script>
+    <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>
 </head>
 <body>
+<a href="../">Back</a>
+<main>
     <h1>Updater</h1>
 
     <script type="application/json" data-monster-role="translations">
@@ -20,5 +25,6 @@
 
     <monster-1>Monster1</monster-1>
 
+</main>
 </body>
 </html>

development/playground/i18n-updater/updater.html

-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
-    <script type="module" src="updater.js"></script>
+    <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>
 </head>
 <body>
+<a href="../">Back</a>
+<main>
 <h1>Updater</h1>
 
 <div data-monster-replace="i18n:key1"></div>
 <div data-monster-replace="i18n:key2"></div>
+</main>
 </body>
 </html>

development/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.42.1")
+        monsterVersion = new Version("3.43.0")
 
         let m = getMonsterVersion();
 

release.json

-{"version":"3.43.0"}
+{"version":"3.44.0"}