fix: case senstive options work now

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

@@ -43,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) => {
@@ -51,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)) {
@@ -77,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;
+}

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);
+    });    
+    
 });