@schukai/monster 3.38.0 → 3.39.0

package/package.json

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

package/source/dom/customelement.mjs

@@ -30,6 +30,7 @@ import { addObjectWithUpdaterToElement } from "./updater.mjs";
 import { instanceSymbol } from "../constants.mjs";
 import { getDocumentTranslations, Translations } from "../i18n/translations.mjs";
 import { getSlottedElements } from "./slotted.mjs";
+import {initOptionsFromAttributes} from "./util/init-options-from-attributes.mjs";
 
 export {
     CustomElement,
@@ -197,8 +198,9 @@ class CustomElement extends HTMLElement {
      */
     constructor() {
         super();
+        
         this[internalSymbol] = new ProxyObserver({
-            options: extend({}, this.defaults),
+            options: initOptionsFromAttributes(this, extend({}, this.defaults)),
         });
         this[attributeObserverSymbol] = {};
         initOptionObserver.call(this);

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

@@ -7,18 +7,19 @@
 
 import {Pathfinder} from '../../data/pathfinder.mjs';
 import {isFunction} from '../../types/is.mjs';
+import {attributeObserverSymbol} from "../customelement.mjs";
 
-export {initOptionsFromAttributes };
+export {initOptionsFromAttributes};
 
 /**
  * Initializes the given options object based on the attributes of the current DOM element.
  * The function looks for attributes with the prefix 'data-monster-option-', and maps them to
  * properties in the options object. It replaces the dashes with dots to form the property path.
  * For example, the attribute 'data-monster-option-url' maps to the 'url' property in the options object.
- * 
+ *
  * With the mapping parameter, the attribute value can be mapped to a different value.
  * For example, the attribute 'data-monster-option-foo' maps to the 'bar' property in the options object.
- * 
+ *
  * The mapping object would look like this:
  * {
  *    'foo': (value) => value + 'bar'
@@ -31,6 +32,7 @@ export {initOptionsFromAttributes };
  *    // e.g. <div data-monster-option-bar-baz="foo"></div>
  * }
  *
+ * @since 3.38.0
  * @param {HTMLElement} element - The DOM element to be used as the source of the attributes.
  * @param {Object} options - The options object to be initialized.
  * @param {Object} mapping - A mapping between the attribute value and the property value.
@@ -38,10 +40,12 @@ export {initOptionsFromAttributes };
  * @returns {Object} - The initialized options object.
  * @this HTMLElement - The context of the DOM element.
  */
-function initOptionsFromAttributes(element, options, mapping={},prefix = 'data-monster-option-') {
+function initOptionsFromAttributes(element, options, mapping = {}, prefix = 'data-monster-option-') {
     if (!(element instanceof HTMLElement)) return options;
     if (!element.hasAttributes()) return options;
 
+    const keyMap = extractKeys(options);
+
     const finder = new Pathfinder(options);
 
     element.getAttributeNames().forEach((name) => {
@@ -50,15 +54,15 @@ function initOptionsFromAttributes(element, options, mapping={},prefix = 'data-m
         // check if the attribute name is a valid option. 
         // the mapping between the attribute is simple. The dash is replaced by a dot.
         // e.g. data-monster-url => url
-        const optionName = name.replace(prefix, '').replace(/-/g, '.');
+        const optionName = keyMap.get(name.substring(prefix.length).toLowerCase());
         if (!finder.exists(optionName)) return;
 
         if (element.hasAttribute(name)) {
             let value = element.getAttribute(name);
-            if (mapping.hasOwnProperty(optionName)&&isFunction(mapping[optionName])) {
+            if (mapping.hasOwnProperty(optionName) && isFunction(mapping[optionName])) {
                 value = mapping[optionName](value);
             }
-            
+
             const typeOfOptionValue = typeof finder.getVia(optionName);
             if (typeOfOptionValue === 'boolean') {
                 value = value === 'true';
@@ -69,10 +73,65 @@ function initOptionsFromAttributes(element, options, mapping={},prefix = 'data-m
             } else if (typeOfOptionValue === 'object') {
                 value = JSON.parse(value);
             }
-            
+
             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);
+                }
+            }
+
+
         }
     })
 
     return options;
-}
+}
+
+/**
+ * Extracts the keys from the given object and returns a map with the keys and values.
+ *
+ * @private
+ * @param {object} obj
+ * @param {string} keyPrefix
+ * @param {string} keySeparator
+ * @param {string} valueSeparator
+ * @returns {Map<any, any>}
+ */
+function extractKeys(obj, keyPrefix = '', keySeparator = '-', valueSeparator = '.') {
+    const resultMap = new Map();
+
+    function helper(currentObj, currentKeyPrefix, currentValuePrefix) {
+        for (const key in currentObj) {
+            if (typeof currentObj[key] === 'object' && !Array.isArray(currentObj[key])) {
+                const newKeyPrefix = currentKeyPrefix ? currentKeyPrefix + keySeparator + key.toLowerCase() : key.toLowerCase();
+                const newValuePrefix = currentValuePrefix ? currentValuePrefix + valueSeparator + key : key;
+                helper(currentObj[key], newKeyPrefix, newValuePrefix);
+            } else {
+                const finalKey = currentKeyPrefix ? currentKeyPrefix + keySeparator + key.toLowerCase() : key.toLowerCase();
+                const finalValue = currentValuePrefix ? currentValuePrefix + valueSeparator + key : key;
+                resultMap.set(finalKey, finalValue);
+            }
+        }
+    }
+
+    helper(obj, keyPrefix, keyPrefix);
+    return resultMap;
+}

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

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

@@ -1,24 +1,29 @@
 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;
-
-    before(async function () {
-        await initJSDOM();
-    })    
+    let initOptionsFromAttributes;
+
+    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: "" } };
+        options = {url: "", key: {subkey: "", caseSensitive: true}};
         element = document.createElement('div');
     });
 
     it('should initialize options with matching attributes', () => {
         element.setAttribute('data-monster-option-url', 'https://example.com');
-        element.setAttribute('data-monster-option-key.subkey', 'test');
+        element.setAttribute('data-monster-option-key-subkey', 'test');
 
         const result = initOptionsFromAttributes(element, options);
 
@@ -73,7 +78,7 @@ describe('initOptionsFromAttributes', () => {
 
     it('should apply multiple mappings', () => {
         element.setAttribute('data-monster-option-url', 'example');
-        element.setAttribute('data-monster-option-key.subkey', '123');
+        element.setAttribute('data-monster-option-key-subkey', '123');
         const mapping = {
             'url': (value) => 'https://' + value + '.com',
             'key.subkey': (value) => parseInt(value, 10) * 2
@@ -108,7 +113,7 @@ describe('initOptionsFromAttributes', () => {
 
     it('should apply mapping only to specified attributes', () => {
         element.setAttribute('data-monster-option-url', 'example');
-        element.setAttribute('data-monster-option-key.subkey', '123');
+        element.setAttribute('data-monster-option-key-subkey', '123');
         const mapping = {
             'url': (value) => 'https://' + value + '.com'
         };
@@ -150,6 +155,13 @@ describe('initOptionsFromAttributes', () => {
         const result = initOptionsFromAttributes(element, options, mapping);
 
         expect(result.url).to.equal('');
-    });    
-    
+    });
+
+    it('should apply case sensitive mapping', () => {
+        element.setAttribute('data-monster-option-key-caseSensitive', 'false');
+        const result = initOptionsFromAttributes(element, options);
+
+        expect(result.key.caseSensitive).to.equal(false);
+    });
+
 });

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