CHANGELOG.md

 
+<a name="v3.38.1"></a>
+## [v3.38.1] - 2023-04-03
+### Bug Fixes
+- case senstive options work now
+
+### Changes
+- doc
+
+
 <a name="v3.38.0"></a>
 ## [v3.38.0] - 2023-04-03
 ### Add Features
@@ -536,6 +545,7 @@
 <a name="1.8.0"></a>
 ## 1.8.0 - 2021-08-15
 
+[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
 [v3.36.0]: https://gitlab.schukai.com/oss/libraries/javascript/monster/compare/v3.35.4...v3.36.0

application/package.json

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

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

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

@@ -31,6 +31,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.
@@ -42,6 +43,8 @@ function initOptionsFromAttributes(element, options, mapping={},prefix = 'data-m
     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,7 +53,7 @@ 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)) {
@@ -76,3 +79,34 @@ function initOptionsFromAttributes(element, options, mapping={},prefix = 'data-m
 
     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;
+}

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

development/package.json

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

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

@@ -12,13 +12,13 @@ describe('initOptionsFromAttributes', () => {
     })    
 
     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 +73,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 +108,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'
         };
@@ -152,4 +152,11 @@ describe('initOptionsFromAttributes', () => {
         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);
+    });    
+    
 });

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

release.json

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