@schukai/monster 1.14.0 → 1.15.3

package/source/dom/customcontrol.js

@@ -1,13 +1,11 @@
 'use strict';
 
+import {extend} from "../data/extend.js";
 /**
  * @author schukai GmbH
  */
-
-import {extend} from "../data/extend.js";
-import {isArray} from "../types/is.js";
-import {OBJECTLINK_KEY_UPDATER} from "./constants.js";
-import {Monster, CustomElement} from "./customelement.js";
+import {assignToNamespace, Monster} from '../namespace.js';
+import {CustomElement} from "./customelement.js";
 
 
 /**
@@ -29,7 +27,7 @@ const internalSymbol = Symbol('internalSymbol');
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.14.0/dist/modules/dom/customcontrol.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.15.3/dist/modules/dom/customcontrol.js';
  * console.log(new Monster.DOM.CustomControl())
  * </script>
  * ```
@@ -38,7 +36,7 @@ const internalSymbol = Symbol('internalSymbol');
  *
  * ```
  * <script type="module">
- * import {CustomControl} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.14.0/dist/modules/dom/customcontrol.js';
+ * import {CustomControl} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.15.3/dist/modules/dom/customcontrol.js';
  * console.log(new CustomControl())
  * </script>
  * ```
@@ -59,7 +57,7 @@ class CustomControl extends CustomElement {
     constructor() {
         super();
 
-        if (typeof this['attachInternals'] === 'function' && this.getOption('formAssociated') === true) {
+        if (typeof this['attachInternals'] === 'function') {
             // currently only supported by chrome
             this[internalSymbol] = this.attachInternals();
         }
@@ -67,15 +65,25 @@ class CustomControl extends CustomElement {
     }
 
     /**
-     * | option         | description                                                                                                                                                                                                                                                                |
-     * |----------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-     * | formAssociated     | Adding a static formAssociated property, with a true value, makes an autonomous custom element a form-associated custom element.                                                                          |
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals
+     * @since 1.14.0
+     * @return {boolean}
+     */
+    static get formAssociated() {
+        return true;
+    }
+
+    /**
+     * | option         | description                     |
+     * |----------------|---------------------------------|
+     * |                |                                 |
      *
      * Derived classes can override and extend this method as follows.
      *
      * ```
      * get defaults() {
-     *    return Object.assign({}, super.defaults, {
+     *    return extends{}, super.defaults, {
      *        myValue:true
      *    });
      * }
@@ -83,55 +91,11 @@ class CustomControl extends CustomElement {
      *
      * @see https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example
      * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals
-     * @return {{shadowMode: string, delegatesFocus: boolean}}
+     * @return {object}
      * @since 1.14.0
      */
     get defaults() {
-
-        return Object.assign({}, super.defaults, {
-            formAssociated: true
-        });
-
-    }
-
-    /**
-     * This method determines which attributes are to be monitored by `attributeChangedCallback()`.
-     *
-     * @return {string[]}
-     * @since 1.14.0
-     */
-    static get observedAttributes() {
-        return [];
-    }
-
-    /**
-     * This method can be implemented in a derived class. The attributes must be defined in `observedAttributes()`.
-     *
-     * @param {string} name
-     * @param {string} oldValue
-     * @param {string} newValue
-     * @since 1.14.0
-     * @throws {Error} attributes but no handles have been defined
-     */
-    attributeChangedCallback(name, oldValue, newValue) {
-
-        const a = this.constructor.observedAttributes();
-
-        if (!a || (isArray(a) && a.length > 0)) {
-            throw new Error('attributes but no handles have been defined');
-        }
-
-
-    }
-
-    /**
-     *
-     * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals
-     * @since 1.14.0
-     * @return {boolean}
-     */
-    static get formAssociated() {
-        return true;
+        return extend({}, super.defaults);
     }
 
     /**
@@ -159,73 +123,6 @@ class CustomControl extends CustomElement {
         throw Error('the value setter must be overwritten by the derived class');
     }
 
-    /**
-     * This is a method of [internal api](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals)
-     *
-     * ```
-     * // Use the control's name as the base name for submitted data
-     * const n = this.getAttribute('name');
-     * const entries = new FormData();
-     * entries.append(n + '-first-name', this.firstName_);
-     * entries.append(n + '-last-name', this.lastName_);
-     * this.setFormValue(entries);
-     * ```
-     *
-     * @param {File|string|FormData} value
-     * @param {File|string|FormData} state
-     * @since 1.14.0
-     * @return {undefined}
-     * @throws {DOMException} NotSupportedError
-     * @throws {Error} the ElementInternals is not supported and a polyfill is necessary
-     * @see https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/setFormValue
-     */
-    setFormValue(value, state) {
-        getInternal.call(this).setFormValue(value, state);
-    }
-
-    /**
-     *
-     * @param {object} flags
-     * @param {string|undefined} message
-     * @param {HTMLElement} anchor
-     * @see https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/setValidity
-     * @since 1.14.0
-     * @return {undefined}
-     * @throws {DOMException} NotSupportedError
-     * @throws {Error} the ElementInternals is not supported and a polyfill is necessary
-     */
-    setValidity(flags, message, anchor) {
-        getInternal.call(this).setValidity(flags, message, anchor);
-    }
-
-
-    /**
-     * This is a method of [internal api](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals)
-     *
-     * @see https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/checkValidity
-     * @since 1.14.0
-     * @return {boolean}
-     * @throws {DOMException} NotSupportedError
-     * @throws {Error} the ElementInternals is not supported and a polyfill is necessary
-     */
-    checkValidity() {
-        return getInternal.call(this)?.checkValidity();
-    }
-
-
-    /**
-     * This is a method of [internal api](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals)
-     *
-     * @return {boolean}
-     * @since 1.14.0
-     * @see https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/reportValidity
-     * @throws {Error} the ElementInternals is not supported and a polyfill is necessary
-     * @throws {DOMException} NotSupportedError
-     */
-    reportValidity() {
-        return getInternal.call(this)?.reportValidity();
-    }
-
     /**
      * This is a method of [internal api](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals)
      *
@@ -316,6 +213,71 @@ class CustomControl extends CustomElement {
         return getInternal.call(this)?.form;
     }
 
+    /**
+     * This is a method of [internal api](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals)
+     *
+     * ```
+     * // Use the control's name as the base name for submitted data
+     * const n = this.getAttribute('name');
+     * const entries = new FormData();
+     * entries.append(n + '-first-name', this.firstName_);
+     * entries.append(n + '-last-name', this.lastName_);
+     * this.setFormValue(entries);
+     * ```
+     *
+     * @param {File|string|FormData} value
+     * @param {File|string|FormData} state
+     * @since 1.14.0
+     * @return {undefined}
+     * @throws {DOMException} NotSupportedError
+     * @throws {Error} the ElementInternals is not supported and a polyfill is necessary
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/setFormValue
+     */
+    setFormValue(value, state) {
+        getInternal.call(this).setFormValue(value, state);
+    }
+
+    /**
+     *
+     * @param {object} flags
+     * @param {string|undefined} message
+     * @param {HTMLElement} anchor
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/setValidity
+     * @since 1.14.0
+     * @return {undefined}
+     * @throws {DOMException} NotSupportedError
+     * @throws {Error} the ElementInternals is not supported and a polyfill is necessary
+     */
+    setValidity(flags, message, anchor) {
+        getInternal.call(this).setValidity(flags, message, anchor);
+    }
+
+    /**
+     * This is a method of [internal api](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals)
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/checkValidity
+     * @since 1.14.0
+     * @return {boolean}
+     * @throws {DOMException} NotSupportedError
+     * @throws {Error} the ElementInternals is not supported and a polyfill is necessary
+     */
+    checkValidity() {
+        return getInternal.call(this)?.checkValidity();
+    }
+
+    /**
+     * This is a method of [internal api](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals)
+     *
+     * @return {boolean}
+     * @since 1.14.0
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/reportValidity
+     * @throws {Error} the ElementInternals is not supported and a polyfill is necessary
+     * @throws {DOMException} NotSupportedError
+     */
+    reportValidity() {
+        return getInternal.call(this)?.reportValidity();
+    }
+
 }
 
 /**
@@ -325,13 +287,13 @@ class CustomControl extends CustomElement {
  */
 function getInternal() {
     const self = this;
-    
+
     if (!(internalSymbol in this)) {
-        throw new Error('the ElementInternals is not supported and a polyfill is necessary');
+        throw new Error('ElementInternals is not supported and a polyfill is necessary');
     }
 
     return this[internalSymbol];
 }
 
-Monster.assignToNamespace('Monster.DOM', CustomControl);
+assignToNamespace('Monster.DOM', CustomControl);
 export {Monster, CustomControl}

package/source/dom/customelement.js

@@ -1,25 +1,28 @@
 'use strict';
 
+import {PROPERTY_KEY_INTERNALDATA} from "../constants.js";
+import {extend} from "../data/extend.js";
+import {Pathfinder} from "../data/pathfinder.js";
 /**
  * @author schukai GmbH
  */
-
-import {Monster, Updater} from "./updater.js";
-import {extend} from "../data/extend.js";
-import {Pathfinder} from "../data/pathfinder.js";
-import {ATTRIBUTE_OPTIONS, OBJECTLINK_KEY_UPDATER} from "./constants.js";
-import {findDocumentTemplate, Template} from "./template.js";
-import {addToObjectLink,getLinkedObjects, hasObjectLink} from "./attributes.js";
+import {assignToNamespace, Monster} from '../namespace.js';
 import {getGlobalObject} from "../types/global.js";
-import {validateFunction, validateObject} from "../types/validate.js";
 import {isString} from "../types/is.js";
-import {PROPERTY_KEY_OPTIONS} from "../constants.js";
+import {Observer} from "../types/observer.js";
+import {ProxyObserver} from "../types/proxyobserver.js";
+import {validateFunction, validateObject} from "../types/validate.js";
+import {clone} from "../util/clone.js";
+import {addToObjectLink, getLinkedObjects, hasObjectLink} from "./attributes.js";
+import {ATTRIBUTE_OPTIONS, OBJECTLINK_KEY_UPDATER} from "./constants.js";
+import {findDocumentTemplate, Template} from "./template.js";
+import {Updater} from "./updater.js";
 
 /**
  * @private
  * @type {symbol}
  */
-const optionsSymbol = Symbol.for(PROPERTY_KEY_OPTIONS);
+const internalDataSymbol = Symbol.for(PROPERTY_KEY_INTERNALDATA);
 
 /**
  * @private
@@ -37,7 +40,6 @@ const initMethodSymbol = Symbol('initMethodSymbol');
  */
 const assembleMethodSymbol = Symbol('assembleMethodSymbol');
 
-
 /**
  * To define a new HTML element we need the power of CustomElement
  *
@@ -48,7 +50,7 @@ const assembleMethodSymbol = Symbol('assembleMethodSymbol');
  *
  * ```
  * <script type="module">
- * import {CustomElement} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.14.0/dist/modules/dom/customelement.js';
+ * import {CustomElement} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.15.3/dist/modules/dom/customelement.js';
  * console.log(new Monster.DOM.CustomElement())
  * </script>
  * ```
@@ -57,7 +59,7 @@ const assembleMethodSymbol = Symbol('assembleMethodSymbol');
  *
  * ```
  * <script type="module">
- * import {CustomElement} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.14.0/dist/modules/dom/customelement.js';
+ * import {CustomElement} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.15.3/dist/modules/dom/customelement.js';
  * console.log(new CustomElement())
  * </script>
  * ```
@@ -155,10 +157,21 @@ class CustomElement extends HTMLElement {
      */
     constructor() {
         super();
-        this[optionsSymbol] = extend({}, this.defaults, getOptionsFromAttributes.call(this));
+        this[internalDataSymbol] = new ProxyObserver({'options': extend({}, this.defaults, getOptionsFromAttributes.call(this))});
+        initOptionObserver.call(this);
         this[initMethodSymbol]();
     }
 
+    /**
+     * This method determines which attributes are to be monitored by `attributeChangedCallback()`.
+     *
+     * @return {string[]}
+     * @since 1.15.0
+     */
+    static get observedAttributes() {
+        return [ATTRIBUTE_OPTIONS];
+    }
+
     /**
      * | option         | description                                                                                                                                                                                                                                                                |
      * |----------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
@@ -190,6 +203,75 @@ class CustomElement extends HTMLElement {
         };
     }
 
+    /**
+     * There is no check on the name by this class. the developer is responsible for assigning an appropriate tag.
+     * if the name is not valid, registerCustomElement() will issue an error
+     *
+     * @link https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name
+     * @return {string}
+     * @throws {Error} the method getTag must be overwritten by the derived class.
+     * @since 1.7.0
+     */
+    static getTag() {
+        throw new Error("the method getTag must be overwritten by the derived class.");
+    }
+
+    /**
+     * At this point a `CSSStyleSheet` object can be returned. If the environment does not
+     * support a constructor, then an object can also be built using the following detour.
+     *
+     * If `undefined` is returned then the shadowRoot does not get a stylesheet.
+     *
+     * ```
+     * const doc = document.implementation.createHTMLDocument('title');
+     *
+     * let style = doc.createElement("style");
+     * style.innerHTML="p{color:red;}";
+     *
+     * // WebKit Hack
+     * style.appendChild(document.createTextNode(""));
+     * // Add the <style> element to the page
+     * doc.head.appendChild(style);
+     * return doc.styleSheets[0];
+     * ;
+     * ```
+     *
+     * @return {CSSStyleSheet|undefined}
+     */
+    static getCSSStyleSheet() {
+        return undefined;
+    }
+
+    /**
+     * attach a new observer
+     *
+     * @param {Observer} observer
+     * @returns {CustomElement}
+     */
+    attachObserver(observer) {
+        this[internalDataSymbol].attachObserver(observer)
+        return this;
+    }
+
+    /**
+     * detach a observer
+     *
+     * @param {Observer} observer
+     * @returns {CustomElement}
+     */
+    detachObserver(observer) {
+        this[internalDataSymbol].detachObserver(observer)
+        return this;
+    }
+
+    /**
+     * @param {Observer} observer
+     * @returns {ProxyObserver}
+     */
+    containsObserver(observer) {
+        return this[internalDataSymbol].containsObserver(observer)
+    }
+
     /**
      * nested options can be specified by path `a.b.c`
      *
@@ -202,7 +284,7 @@ class CustomElement extends HTMLElement {
         let value;
 
         try {
-            value = new Pathfinder(this[optionsSymbol]).getVia(path);
+            value = new Pathfinder(this[internalDataSymbol].getRealSubject()['options']).getVia(path);
         } catch (e) {
 
         }
@@ -220,20 +302,27 @@ class CustomElement extends HTMLElement {
      * @since 1.14.0
      */
     setOption(path, value) {
+        new Pathfinder(this[internalDataSymbol].getSubject()['options']).setVia(path, value);
+        //this[internalDataSymbol].notifyObservers();
+        return this;
+    }
 
-        // inform every element
-        const updaters = getLinkedObjects(this, Symbol.for(OBJECTLINK_KEY_UPDATER));
+    /**
+     * @since 1.15.0
+     * @param {string|object} options
+     * @return {CustomElement}
+     */
+    setOptions(options) {
 
-        for (const list of updaters) {
-            for (const updater of list) {
-                // reset value so that a change occurs
-                new Pathfinder(this[optionsSymbol]).setVia(path, false);
-                new Pathfinder(updater.getSubject()).setVia(path, value);
-            }
+        if (isString(options)) {
+            options = parseOptionsJSON(options)
         }
 
-        return this;
+        const self = this;
+        extend(self[internalDataSymbol].getSubject()['options'], self.defaults, options);
+        //this[internalDataSymbol].notifyObservers();
 
+        return self;
     }
 
     /**
@@ -275,8 +364,8 @@ class CustomElement extends HTMLElement {
         for (const [, element] of Object.entries(elements)) {
 
             if (!(element instanceof HTMLElement)) continue;
-
-            const u = new Updater(element, this[optionsSymbol])
+            if ((element instanceof HTMLTemplateElement)) continue;
+            const u = new Updater(element, clone(self[internalDataSymbol].getRealSubject()['options']))
             updater.add(u);
 
             u.run().then(() => {
@@ -298,9 +387,7 @@ class CustomElement extends HTMLElement {
     connectedCallback() {
         let self = this;
         if (!hasObjectLink(self, objectLinkSymbol)) {
-            setTimeout(() => {
-                self[assembleMethodSymbol]()
-            }, 0);
+            self[assembleMethodSymbol]()
         }
     }
 
@@ -326,58 +413,53 @@ class CustomElement extends HTMLElement {
 
     /**
      * Called when an observed attribute has been added, removed, updated, or replaced. Also called for initial
-     * values when an element is created by the parser, or upgraded. Note: only attributes listed in the observedAttributes property will receive this callback.
+     * values when an element is created by the parser, or upgraded. Note: only attributes listed in the observedAttributes
+     * property will receive this callback.
      *
      * @param {string} attrName
      * @param {string} oldVal
      * @param {string} newVal
      * @return {void}
-     * @since 1.7.0
+     * @since 1.15.0
      */
     attributeChangedCallback(attrName, oldVal, newVal) {
-    }
+        const self = this;
 
-    /**
-     * There is no check on the name by this class. the developer is responsible for assigning an appropriate tag.
-     * if the name is not valid, registerCustomElement() will issue an erro
-     *
-     * @link https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name
-     * @return {string}
-     * @throws {Error} the method getTag must be overwritten by the derived class.
-     * @since 1.7.0
-     */
-    static getTag() {
-        throw new Error("the method getTag must be overwritten by the derived class.");
-    }
+        if (attrName === ATTRIBUTE_OPTIONS) {
+            self.setOptions(newVal);
+        }
 
-    /**
-     * At this point a `CSSStyleSheet` object can be returned. If the environment does not
-     * support a constructor, then an object can also be built using the following detour.
-     *
-     * If `undefined` is returned then the shadowRoot does not get a stylesheet.
-     *
-     * ```
-     * const doc = document.implementation.createHTMLDocument('title');
-     *
-     * let style = doc.createElement("style");
-     * style.innerHTML="p{color:red;}";
-     *
-     * // WebKit Hack
-     * style.appendChild(document.createTextNode(""));
-     * // Add the <style> element to the page
-     * doc.head.appendChild(style);
-     * return doc.styleSheets[0];
-     * ;
-     * ```
-     *
-     * @return {CSSStyleSheet|undefined}
-     */
-    static getCSSStyleSheet() {
-        return undefined;
     }
 
 }
 
+/**
+ * @since 1.15.0
+ * @private
+ */
+function initOptionObserver() {
+    const self = this;
+
+    self.attachObserver(new Observer(function () {
+
+        // not initialised
+        if (!hasObjectLink(self, Symbol.for(OBJECTLINK_KEY_UPDATER))) {
+            return;
+        }
+        // inform every element
+        const updaters = getLinkedObjects(self, Symbol.for(OBJECTLINK_KEY_UPDATER));
+
+        for (const list of updaters) {
+            for (const updater of list) {
+                let d = clone(self[internalDataSymbol].getRealSubject()['options']);
+                Object.assign(updater.getSubject(), d);
+            }
+        }
+
+    }));
+
+}
+
 /**
  * @private
  * @return {object}
@@ -386,11 +468,24 @@ class CustomElement extends HTMLElement {
 function getOptionsFromAttributes() {
     if (this.hasAttribute(ATTRIBUTE_OPTIONS)) {
         try {
-            let obj = JSON.parse(this.getAttribute(ATTRIBUTE_OPTIONS))
+            return parseOptionsJSON(this.getAttribute(ATTRIBUTE_OPTIONS))
+        } catch (e) {
+            throw new Error('the options attribute ' + ATTRIBUTE_OPTIONS + ' does not contain a valid json definition (actual: ' + this.getAttribute(ATTRIBUTE_OPTIONS) + ').');
+        }
+    }
+
+    return {};
+}
+
+
+function parseOptionsJSON(data) {
+    if (isString(data)) {
+        try {
+            let obj = JSON.parse(data);
             validateObject(obj);
             return obj;
         } catch (e) {
-            throw new Error('the options attribute ' + ATTRIBUTE_OPTIONS + ' does not contain a valid json definition (actual: ' + this.getAttribute(ATTRIBUTE_OPTIONS) + ').');
+            throw new Error('the options does not contain a valid json definition (actual: ' + data + ').');
         }
     }
 
@@ -476,5 +571,5 @@ function registerCustomElement(element) {
     getGlobalObject('customElements').define(element.getTag(), element);
 }
 
-Monster.assignToNamespace('Monster.DOM', CustomElement, registerCustomElement);
+assignToNamespace('Monster.DOM', CustomElement, registerCustomElement);
 export {Monster, registerCustomElement, CustomElement, initMethodSymbol, assembleMethodSymbol}