@schukai/monster 3.44.0 → 3.46.0

package/package.json

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

package/source/dom/customcontrol.mjs

@@ -5,11 +5,12 @@
  * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
  */
 
-import { extend } from "../data/extend.mjs";
-import { ATTRIBUTE_VALUE } from "./constants.mjs";
-import { CustomElement, attributeObserverSymbol } from "./customelement.mjs";
-import { instanceSymbol } from "../constants.mjs";
-export { CustomControl };
+import {extend} from "../data/extend.mjs";
+import {ATTRIBUTE_VALUE} from "./constants.mjs";
+import {CustomElement, attributeObserverSymbol} from "./customelement.mjs";
+import {instanceSymbol} from "../constants.mjs";
+
+export {CustomControl};
 
 /**
  * @private
@@ -41,6 +42,7 @@ const attachedInternalSymbol = Symbol("attachedInternal");
  * @see {@link https://www.npmjs.com/package/element-internals-polyfill}
  * @see {@link https://github.com/WICG/webcomponents}
  * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements}
+ * @see {@link https://html.spec.whatwg.org/dev/custom-elements.html#custom-element-reactions}
  * @license AGPLv3
  * @since 1.14.0
  * @copyright schukai GmbH
@@ -74,7 +76,7 @@ class CustomControl extends CustomElement {
      * @since 2.1.0
      */
     static get [instanceSymbol]() {
-        return Symbol.for("@schukai/monster/dom/custom-control");
+        return Symbol.for("@schukai/monster/dom/custom-control@@instance");
     }
 
     /**
@@ -84,20 +86,18 @@ class CustomControl extends CustomElement {
      * @since 1.15.0
      */
     static get observedAttributes() {
-        const list = super.observedAttributes;
-        list.push(ATTRIBUTE_VALUE);
-        return list;
+        return super.observedAttributes;
     }
 
     /**
+     * Adding a static formAssociated property, with a true value, makes an autonomous custom element a form-associated custom element.
      *
      * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals}
+     * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example}
      * @since 1.14.0
      * @return {boolean}
      */
-    static get formAssociated() {
-        return true;
-    }
+    static formAssociated = true
 
     /**
      * Derived classes can override and extend this method as follows.
@@ -116,7 +116,8 @@ class CustomControl extends CustomElement {
      * @since 1.14.0
      */
     get defaults() {
-        return extend({}, super.defaults);
+        return extend({
+        }, super.defaults);
     }
 
     /**
@@ -298,6 +299,46 @@ class CustomControl extends CustomElement {
     reportValidity() {
         return getInternal.call(this)?.reportValidity();
     }
+
+    /**
+     * @param {string} form
+     */
+    formAssociatedCallback(form) {
+        if (form) {
+            if(form.id) {
+                this.setAttribute("form", form.id);    
+            }
+        } else {
+            this.removeAttribute("form");
+        }
+    }
+
+    /**
+     * @param {string} disabled
+     */
+    formDisabledCallback(disabled) {
+        if (disabled) {
+            this.setAttribute("disabled", "");
+        } else {
+            this.removeAttribute("disabled");
+        }
+    }
+
+    /**
+     * @param {string} state
+     * @param {string} mode
+     */
+    formStateRestoreCallback(state, mode) {
+        
+    }
+
+    /**
+     *
+     */
+    formResetCallback() {
+       this.value = "";
+    }
+
 }
 
 /**
@@ -313,7 +354,7 @@ function getInternal() {
         throw new Error("ElementInternals is not supported and a polyfill is necessary");
     }
 
-    return this[attachedInternalSymbol];
+    return self[attachedInternalSymbol];
 }
 
 /**

package/source/dom/customelement.mjs

@@ -31,6 +31,7 @@ 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";
+import {setOptionFromAttribute} from "./util/set-option-from-attribute.mjs";
 
 export {
     CustomElement,
@@ -60,6 +61,12 @@ const assembleMethodSymbol = Symbol.for("@schukai/monster/dom/@@assembleMethodSy
  */
 const attributeObserverSymbol = Symbol.for("@schukai/monster/dom/@@attributeObserver");
 
+/**
+ * @private
+ * @type {symbol}
+ */
+const attributeMutationObserverSymbol = Symbol("@schukai/monster/dom/@@mutationObserver");
+
 /**
  * HTMLElement
  * @external HTMLElement
@@ -205,7 +212,7 @@ class CustomElement extends HTMLElement {
         });
         this[initMethodSymbol]();
         initOptionObserver.call(this);
-        initAttributeChangeMutationObserver.call(this);
+
     }
 
     /**
@@ -214,7 +221,7 @@ class CustomElement extends HTMLElement {
      * @since 2.1.0
      */
     static get [instanceSymbol]() {
-        return Symbol.for("@schukai/monster/dom/custom-element");
+        return Symbol.for("@schukai/monster/dom/custom-element@@instance");
     }
 
     /**
@@ -226,11 +233,11 @@ class CustomElement extends HTMLElement {
      * @since 1.15.0
      */
     static get observedAttributes() {
-        return [ATTRIBUTE_OPTIONS, ATTRIBUTE_DISABLED];
+        return [];
     }
 
     /**
-     * 
+     *
      * @param attribute
      * @param callback
      * @returns {Monster.DOM.CustomElement}
@@ -242,7 +249,7 @@ class CustomElement extends HTMLElement {
     }
 
     /**
-     * 
+     *
      * @param attribute
      * @returns {Monster.DOM.CustomElement}
      */
@@ -303,7 +310,7 @@ class CustomElement extends HTMLElement {
      */
     get defaults() {
         return {
-            ATTRIBUTE_DISABLED: this.getAttribute(ATTRIBUTE_DISABLED),
+            disabled: false,
             shadowMode: "open",
             delegatesFocus: true,
             templates: {
@@ -546,6 +553,9 @@ class CustomElement extends HTMLElement {
             customElementUpdaterLinkSymbol,
             clone(self[internalSymbol].getRealSubject()["options"]),
         );
+
+        attachAttributeChangeMutationObserver.call(this);
+
         return self;
     }
 
@@ -561,6 +571,7 @@ class CustomElement extends HTMLElement {
         if (!hasObjectLink(self, customElementUpdaterLinkSymbol)) {
             self[assembleMethodSymbol]();
         }
+
     }
 
     /**
@@ -595,10 +606,18 @@ class CustomElement extends HTMLElement {
     attributeChangedCallback(attrName, oldVal, newVal) {
         const self = this;
 
-        const callback = self[attributeObserverSymbol]?.[attrName];
+        if (attrName.startsWith("data-monster-option-")) {
+            setOptionFromAttribute(self, attrName, this[internalSymbol].getSubject()["options"]) 
+        }
 
+        const callback = self[attributeObserverSymbol]?.[attrName];
         if (isFunction(callback)) {
-            callback.call(self, newVal, oldVal);
+            try {
+                callback.call(self, newVal, oldVal);
+            } catch (e) {
+                addAttributeToken(self, ATTRIBUTE_ERRORMESSAGE, e.toString());
+            }
+
         }
     }
 
@@ -626,23 +645,34 @@ class CustomElement extends HTMLElement {
 
 /**
  * This method is called when the element is first created.
- * 
+ *
  * @private
  * @this CustomElement
  */
-function initAttributeChangeMutationObserver() {
+function attachAttributeChangeMutationObserver() {
     const self = this;
 
-    new MutationObserver(function (mutations) {
+    if (typeof self[attributeMutationObserverSymbol] !== "undefined") {
+        return;
+    }
+
+    self[attributeMutationObserverSymbol] = new MutationObserver(function (mutations, observer) {
         for (const mutation of mutations) {
             if (mutation.type === "attributes") {
                 self.attributeChangedCallback(mutation.attributeName, mutation.oldValue, mutation.target.getAttribute(mutation.attributeName));
             }
         }
-    }).observe(self, {
-        attributes: true,
-        attributeOldValue: true,
     });
+
+    try {
+        self[attributeMutationObserverSymbol].observe(self, {
+            attributes: true,
+            attributeOldValue: true,
+        });
+
+    } catch (e) {
+        addAttributeToken(self, ATTRIBUTE_ERRORMESSAGE, e.toString());
+    }
 }
 
 /**

package/source/dom/util/extract-keys.mjs

@@ -0,0 +1,39 @@
+/**
+ * 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
+ */
+
+export {extractKeys}
+
+/**
+ * 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/dom/util/init-options-from-attributes.mjs

@@ -8,6 +8,7 @@
 import {Pathfinder} from '../../data/pathfinder.mjs';
 import {isFunction} from '../../types/is.mjs';
 import {attributeObserverSymbol} from "../customelement.mjs";
+import {extractKeys} from "./extract-keys.mjs";
 
 export {initOptionsFromAttributes};
 
@@ -75,63 +76,10 @@ function initOptionsFromAttributes(element, options, mapping = {}, prefix = 'dat
             }
 
             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/dom/util/set-option-from-attribute.mjs

@@ -0,0 +1,83 @@
+/**
+ * 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';
+import {attributeObserverSymbol} from "../customelement.mjs";
+import {extractKeys} from "./extract-keys.mjs";
+
+export {setOptionFromAttribute};
+
+/**
+ * Set 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.45.0
+ * @param {HTMLElement} element - The DOM element to be used as the source of the attributes.
+ * @param {Object} name - The attribute object 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 setOptionFromAttribute(element, name, 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);
+
+    // 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)) {
+        return options;
+    }
+
+    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;
+}
+
+

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

package/test/cases/dom/customcontrol.mjs

@@ -4,9 +4,9 @@ import chai from "chai"
 import {ATTRIBUTE_OPTIONS} from "../../../../application/source/dom/constants.mjs";
 import {getDocument} from "../../../../application/source/dom/util.mjs";
 import {chaiDom} from "../../util/chai-dom.mjs";
+import {cleanupDOMFromTesting, initMutationObserverForTesting} from "../../util/cleanupdom.mjs";
 import {initJSDOM} from "../../util/jsdom.mjs";
 
-
 let expect = chai.expect;
 chai.use(chaiDom);
 
@@ -19,45 +19,46 @@ describe('DOM', function () {
 
     let CustomControl, registerCustomElement, TestComponent, document, jsdomFlag;
 
-    describe('CustomControl()', function () {
-
-        before(function (done) {
-            initJSDOM().then(() => {
+    before(function (done) {
+        initJSDOM().then(() => {
 
-                // jsdom does not support ElementInternals
-                jsdomFlag = navigator.userAgent.includes("jsdom");
+            // jsdom does not support ElementInternals
+            jsdomFlag = navigator.userAgent.includes("jsdom");
 
-                import("../../../../application/source/dom/customelement.mjs").then((m) => {
-                    registerCustomElement = m['registerCustomElement'];
+            import("../../../../application/source/dom/customelement.mjs").then((m) => {
+                registerCustomElement = m['registerCustomElement'];
 
 
-                    import("../../../../application/source/dom/customcontrol.mjs").then((m) => {
+                import("../../../../application/source/dom/customcontrol.mjs").then((m) => {
 
-                        document = getDocument();
+                    document = getDocument();
 
-                        try {
-                            CustomControl = m['CustomControl'];
+                    try {
+                        CustomControl = m['CustomControl'];
 
-                            TestComponent = class extends CustomControl {
-                                static getTag() {
-                                    return "monster-customcontrol"
-                                }
+                        TestComponent = class extends CustomControl {
+                            static getTag() {
+                                return "monster-customcontrol"
                             }
-                            registerCustomElement(TestComponent)
+                        }
+                        registerCustomElement(TestComponent)
 
 
-                            done()
-                        } catch (e) {
-                            done(e);
-                        }
+                        done()
+                    } catch (e) {
+                        done(e);
+                    }
 
 
-                    });
                 });
             });
-        })
+        });
+    })
+
+    describe('CustomControl()', function () {
 
         beforeEach(() => {
+            initMutationObserverForTesting()
             let mocks = document.getElementById('mocks');
             mocks.innerHTML = html1;
         })
@@ -65,6 +66,8 @@ describe('DOM', function () {
         afterEach(() => {
             let mocks = document.getElementById('mocks');
             mocks.innerHTML = "";
+            cleanupDOMFromTesting();
+
         })
 
         describe('create', function () {
@@ -76,28 +79,33 @@ describe('DOM', function () {
 
         describe('connect empty element', function () {
             it('document should contain monster-customcontrol', function () {
-                
+
                 let d = document.createElement('monster-customcontrol');
                 document.getElementById('test1').appendChild(d);
                 expect(document.getElementsByTagName('monster-customcontrol').length).is.equal(1);
-                // no data-monster-objectlink="Symbol(monsterUpdater)" because it has nothing to update
+                // no data-monster-objectlink="Symbol(monsterUpdater)" because it has nothing to update 
                 expect(document.getElementById('test1')).contain.html('<monster-customcontrol></monster-customcontrol>');
             });
         });
 
-        describe('Options change', function () {
-
-            it('delegatesFocus should change from true to false', function () {
-                let element = document.createElement('monster-customcontrol')
-
-                expect(element.getOption('delegatesFocus')).to.be.true;
-                element.setAttribute(ATTRIBUTE_OPTIONS, JSON.stringify({delegatesFocus: false}));
-                expect(element.getOption('delegatesFocus')).to.be.false;
-
-            })
-
-
-        })
+        // describe('Options change', function () {
+        //
+        //     it('delegatesFocus should change from true to false', function (done) {
+        //         let element = document.createElement('monster-customcontrol')
+        //
+        //         expect(element.getOption('delegatesFocus')).to.be.true;
+        //         setTimeout(() => {
+        //             element.setAttribute(ATTRIBUTE_OPTIONS, JSON.stringify({delegatesFocus: false}));
+        //             setTimeout(() => {
+        //                 expect(element.getOption('delegatesFocus')).to.be.false;
+        //                 done();
+        //             }, 10);
+        //         }, 10);
+        //
+        //
+        //     }).timeout(100);
+        //
+        // })
 
         describe('Test ElementInternals', function () {
 
@@ -115,6 +123,7 @@ describe('DOM', function () {
                 expect(d.constructor.formAssociated).to.be.true;
 
             });
+
             it('form', function () {
 
                 let d = document.createElement('monster-customcontrol');
@@ -147,7 +156,6 @@ describe('DOM', function () {
 
             });
 
-
             it('setFormValue', function () {
 
                 let d = document.createElement('monster-customcontrol');
@@ -161,7 +169,6 @@ describe('DOM', function () {
 
             });
 
-
             it('name getter', function () {
 
                 let d = document.createElement('monster-customcontrol');

package/test/cases/dom/customelement.mjs

@@ -277,12 +277,12 @@ describe('DOM', function () {
                 expect(element.getOption('delegatesFocus')).to.be.true;
                 expect(Object.is(element[internalSymbol].realSubject, o)).to.be.true;
 
-                element.setAttribute(ATTRIBUTE_OPTIONS, JSON.stringify({delegatesFocus: false}));
-                expect(Object.is(element[internalSymbol].realSubject, o)).to.be.true;
-
-                expect(element.getOption('delegatesFocus')).to.be.false;
-                expect(element[internalSymbol].realSubject.options.delegatesFocus).to.be.false;
-                expect(Object.is(element[internalSymbol].realSubject, o)).to.be.true;
+                // element.setAttribute(ATTRIBUTE_OPTIONS, JSON.stringify({delegatesFocus: false}));
+                // expect(Object.is(element[internalSymbol].realSubject, o)).to.be.true;
+                //
+                // expect(element.getOption('delegatesFocus')).to.be.false;
+                // expect(element[internalSymbol].realSubject.options.delegatesFocus).to.be.false;
+                // expect(Object.is(element[internalSymbol].realSubject, o)).to.be.true;
 
             })
 

package/test/cases/dom/focusmanager.mjs

@@ -55,7 +55,6 @@ describe('FocusManager', function () {
                 });
             }
 
-
         })
 
         it('run ist', function () {

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

package/test/util/cleanupdom.mjs

@@ -16,14 +16,10 @@ function init() {
                     }
                 })
             }
-
         });
     });
-
-
 }
 
-
 /**
  *
  */