@schukai/monster 3.38.0 → 3.38.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "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",

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

@@ -8,17 +8,17 @@
 import {Pathfinder} from '../../data/pathfinder.mjs';
 import {isFunction} from '../../types/is.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 +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.
@@ -38,10 +39,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 +53,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 +72,41 @@ function initOptionsFromAttributes(element, options, mapping={},prefix = 'data-m
             } else if (typeOfOptionValue === 'object') {
                 value = JSON.parse(value);
             }
-            
+
             finder.setVia(optionName, value);
         }
     })
 
     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.38.1");
 
     return monsterVersion;
 }

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

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.38.1")
 
         let m = getMonsterVersion();