CHANGELOG.md

 
+<a name="v3.39.0"></a>
+## [v3.39.0] - 2023-04-03
+### Add Features
+- monitoring attribute change
+
+
 <a name="v3.38.1"></a>
 ## [v3.38.1] - 2023-04-03
 ### Bug Fixes
@@ -545,6 +551,7 @@
 <a name="1.8.0"></a>
 ## 1.8.0 - 2021-08-15
 
+[v3.39.0]: https://gitlab.schukai.com/oss/libraries/javascript/monster/compare/v3.38.1...v3.39.0
 [v3.38.1]: https://gitlab.schukai.com/oss/libraries/javascript/monster/compare/v3.38.0...v3.38.1
 [v3.38.0]: https://gitlab.schukai.com/oss/libraries/javascript/monster/compare/v3.37.0...v3.38.0
 [v3.37.0]: https://gitlab.schukai.com/oss/libraries/javascript/monster/compare/v3.36.0...v3.37.0

application/package.json

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

application/source/dom/util/init-options-from-attributes.mjs

@@ -7,6 +7,7 @@
 
 import {Pathfinder} from '../../data/pathfinder.mjs';
 import {isFunction} from '../../types/is.mjs';
+import {attributeObserverSymbol} from "../customelement.mjs";
 
 export {initOptionsFromAttributes};
 
@@ -74,6 +75,30 @@ function initOptionsFromAttributes(element, options, mapping = {}, prefix = 'dat
             }
 
             finder.setVia(optionName, value);
+
+            // if element has an attribute observer, then register the attribute observer
+            if (element?.[attributeObserverSymbol]) {
+                element[attributeObserverSymbol][name] = (newValue, oldValue) => {
+
+                    if (newValue === oldValue) return;
+
+                    let changedValue = newValue;
+
+                    if (typeOfOptionValue === 'boolean') {
+                        changedValue = changedValue === 'true';
+                    } else if (typeOfOptionValue === 'number') {
+                        changedValue = Number(changedValue);
+                    } else if (typeOfOptionValue === 'string') {
+                        changedValue = String(changedValue);
+                    } else if (typeOfOptionValue === 'object') {
+                        changedValue = JSON.parse(changedValue);
+                    }
+
+                    finder.setVia(optionName, changedValue);
+                }
+            }
+
+
         }
     })
 

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.38.0");
+    monsterVersion = new Version("3.38.1");
 
     return monsterVersion;
 }

development/package.json

 {
   "name": "monster",
-  "version": "3.38.0",
+  "version": "3.38.1",
   "description": "monster",
   "repository": {
     "type": "git",

development/test/cases/dom/util/init-options-from-attributes.mjs

 import {expect} from "chai"
 
-import {initOptionsFromAttributes} from "../../../../..//application/source/dom/util/init-options-from-attributes.mjs";
 import {initJSDOM} from "../../../util/jsdom.mjs";
 
 describe('initOptionsFromAttributes', () => {
     let element;
     let options;
+    let initOptionsFromAttributes;
 
-    before(async function () {
-        await initJSDOM();
+    before( function (done) {
+         initJSDOM().then(() => {
+            import("../../../../..//application/source/dom/util/init-options-from-attributes.mjs").then((m) => {
+                initOptionsFromAttributes = m['initOptionsFromAttributes'];
+                done();
             })
+        })
+    });
 
     beforeEach(() => {
         options = {url: "", key: {subkey: "", caseSensitive: true}};

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.38.0")
+        monsterVersion = new Version("3.38.1")
 
         let m = getMonsterVersion();
 

release.json

-{"version":"3.38.1"}
+{"version":"3.39.0"}