@schukai/monster 3.37.0 → 3.38.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schukai/monster",
-  "version": "3.37.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

@@ -0,0 +1,112 @@
+/**
+ * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
+ * Node module: @schukai/monster
+ * This file is licensed under the AGPLv3 License.
+ * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
+ */
+
+import {Pathfinder} from '../../data/pathfinder.mjs';
+import {isFunction} from '../../types/is.mjs';
+
+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'
+ *    // the value of the attribute 'data-monster-option-foo' is appended with 'bar'
+ *    // and assigned to the 'bar' property in the options object.
+ *    // e.g. <div data-monster-option-foo="foo"></div>
+ *    'bar.baz': (value) => value + 'bar'
+ *    // the value of the attribute 'data-monster-option-bar-baz' is appended with 'bar'
+ *    // and assigned to the 'bar.baz' property in the options object.  
+ *    // 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.
+ * @param {string} prefix - The prefix of the attributes to be considered.
+ * @returns {Object} - The initialized options object.
+ * @this HTMLElement - The context of the DOM element.
+ */
+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) => {
+        if (!name.startsWith(prefix)) return;
+
+        // 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 = 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])) {
+                value = mapping[optionName](value);
+            }
+
+            const typeOfOptionValue = typeof finder.getVia(optionName);
+            if (typeOfOptionValue === 'boolean') {
+                value = value === 'true';
+            } else if (typeOfOptionValue === 'number') {
+                value = Number(value);
+            } else if (typeOfOptionValue === 'string') {
+                value = String(value);
+            } 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.37.0");
+    monsterVersion = new Version("3.38.1");
 
     return monsterVersion;
 }

package/test/cases/dom/events.mjs

@@ -8,7 +8,7 @@ import {initJSDOM} from "../../util/jsdom.mjs";
 describe('Events', function () {
 
     before(async function () {
-        initJSDOM();
+        await initJSDOM();
     })
 
     describe('findTargetElementFromEvent()', function () {
@@ -23,10 +23,10 @@ describe('Events', function () {
                 expect(e.getAttribute('data-monster')).to.be.equal('hello')
                 done();
             })
-            setTimeout(()=>{
+            setTimeout(() => {
                 fireEvent(div, 'click');
-            },0)
-            
+            }, 0)
+
         });
 
     });
@@ -76,10 +76,10 @@ describe('Events', function () {
 
         it('should throw error', function () {
             expect(() => fireEvent({}, 'touch')).to.throw(Error);
-            
+
         });
-    });   
-    
+    });
+
     describe('fireCustomEvent()', function () {
         it('should fire a click event', function (done) {
             let div = document.createElement('div');
@@ -100,8 +100,8 @@ describe('Events', function () {
         it('should fire a touch event on collection1', function (done) {
             let div = document.createElement('div');
             div.addEventListener('touch', (e) => {
-                if(e.detail.detail!=='hello world') {
-                    done('error');    
+                if (e.detail.detail !== 'hello world') {
+                    done('error');
                 }
                 done();
             })
@@ -111,12 +111,12 @@ describe('Events', function () {
 
             fireCustomEvent(collection, 'touch', "hello world");
         });
-        
+
         it('should fire a touch event on collection2', function (done) {
             let div = document.createElement('div');
             div.addEventListener('touch', (e) => {
-                if(e.detail.a!=='hello world') {
-                    done('error');    
+                if (e.detail.a !== 'hello world') {
+                    done('error');
                 }
                 done();
             })
@@ -124,7 +124,7 @@ describe('Events', function () {
             div.appendChild(document.createElement('div'));
             let collection = div.querySelectorAll('div');
 
-            fireCustomEvent(collection, 'touch', {a:"hello world"});
+            fireCustomEvent(collection, 'touch', {a: "hello world"});
         });
 
         it('should fire a touch event', function (done) {

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

@@ -0,0 +1,162 @@
+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();
+    })    
+
+    beforeEach(() => {
+        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');
+
+        const result = initOptionsFromAttributes(element, options);
+
+        expect(result.url).to.equal('https://example.com');
+        expect(result.key.subkey).to.equal('test');
+    });
+
+    it('should not modify options without matching attributes', () => {
+        const result = initOptionsFromAttributes(element, options);
+
+        expect(result.url).to.equal('');
+        expect(result.key.subkey).to.equal('');
+    });
+
+    it('should ignore attributes without the correct prefix', () => {
+        element.setAttribute('data-some-option-url', 'https://example.com');
+
+        const result = initOptionsFromAttributes(element, options);
+
+        expect(result.url).to.equal('');
+    });
+
+    it('should ignore attributes with invalid option paths', () => {
+        element.setAttribute('data-monster-option-nonexistent', 'value');
+
+        const result = initOptionsFromAttributes(element, options);
+
+        expect(result).to.deep.equal(options);
+    });
+
+    it('should apply mapping for a single attribute', () => {
+        element.setAttribute('data-monster-option-url', 'example');
+        const mapping = {
+            'url': (value) => 'https://' + value + '.com'
+        };
+
+        const result = initOptionsFromAttributes(element, options, mapping);
+
+        expect(result.url).to.equal('https://example.com');
+    });
+
+    it('should apply mapping for a nested attribute', () => {
+        element.setAttribute('data-monster-option-key-subkey', '123');
+        const mapping = {
+            'key.subkey': (value) => parseInt(value, 10) * 2
+        };
+
+        const result = initOptionsFromAttributes(element, options, mapping);
+
+        expect(result.key.subkey).to.equal("246");
+    });
+
+    it('should apply multiple mappings', () => {
+        element.setAttribute('data-monster-option-url', 'example');
+        element.setAttribute('data-monster-option-key-subkey', '123');
+        const mapping = {
+            'url': (value) => 'https://' + value + '.com',
+            'key.subkey': (value) => parseInt(value, 10) * 2
+        };
+
+        const result = initOptionsFromAttributes(element, options, mapping);
+
+        expect(result.url).to.equal('https://example.com');
+        expect(result.key.subkey).to.equal("246");
+    });
+
+    it('should ignore mappings for non-existing attributes', () => {
+        const mapping = {
+            'url': (value) => 'https://' + value + '.com'
+        };
+
+        const result = initOptionsFromAttributes(element, options, mapping);
+
+        expect(result.url).to.equal('');
+    });
+
+    it('should ignore mappings for invalid option paths', () => {
+        element.setAttribute('data-monster-option-nonexistent', 'value');
+        const mapping = {
+            'nonexistent': (value) => value + 'bar'
+        };
+
+        const result = initOptionsFromAttributes(element, options, mapping);
+
+        expect(result).to.deep.equal(options);
+    });
+
+    it('should apply mapping only to specified attributes', () => {
+        element.setAttribute('data-monster-option-url', 'example');
+        element.setAttribute('data-monster-option-key-subkey', '123');
+        const mapping = {
+            'url': (value) => 'https://' + value + '.com'
+        };
+
+        const result = initOptionsFromAttributes(element, options, mapping);
+
+        expect(result.url).to.equal('https://example.com');
+        expect(result.key.subkey).to.equal('123');
+    });
+
+    it('should not apply mapping if not a function', () => {
+        element.setAttribute('data-monster-option-url', 'example');
+        const mapping = {
+            'url': 'https://example.com'
+        };
+
+        const result = initOptionsFromAttributes(element, options, mapping);
+
+        expect(result.url).to.equal('example');
+    });
+
+    it('should apply mapping with custom prefix', () => {
+        element.setAttribute('data-custom-option-url', 'example');
+        const mapping = {
+            'url': (value) => 'https://' + value + '.com'
+        };
+
+        const result = initOptionsFromAttributes(element, options, mapping, 'data-custom-option-');
+
+        expect(result.url).to.equal('https://example.com');
+    });
+
+    it('should not apply mapping with incorrect custom prefix', () => {
+        element.setAttribute('data-custom-option-url', 'example');
+        const mapping = {
+            'url': (value) => 'https://' + value + '.com'
+        };
+
+        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.37.0")
+        monsterVersion = new Version("3.38.1")
 
         let m = getMonsterVersion();