@schukai/monster 1.25.0 → 1.28.0

package/source/dom/updater.js

@@ -4,6 +4,7 @@
  * @author schukai GmbH
  */
 
+import {internalSymbol} from "../constants.js";
 import {diff} from "../data/diff.js";
 import {Pathfinder} from "../data/pathfinder.js";
 import {Pipe} from "../data/pipe.js";
@@ -14,7 +15,8 @@ import {
     ATTRIBUTE_UPDATER_INSERT,
     ATTRIBUTE_UPDATER_INSERT_REFERENCE,
     ATTRIBUTE_UPDATER_REMOVE,
-    ATTRIBUTE_UPDATER_REPLACE
+    ATTRIBUTE_UPDATER_REPLACE,
+    ATTRIBUTE_UPDATER_SELECT_THIS
 } from "../dom/constants.js";
 import {assignToNamespace, Monster} from '../namespace.js';
 import {Base} from "../types/base.js";
@@ -24,6 +26,7 @@ import {ProxyObserver} from "../types/proxyobserver.js";
 import {validateArray, validateInstance} from "../types/validate.js";
 import {clone} from "../util/clone.js";
 import {trimSpaces} from "../util/trimspaces.js";
+import {findTargetElementFromEvent} from "./events.js";
 import {findDocumentTemplate} from "./template.js";
 import {getDocument} from "./util.js";
 
@@ -34,11 +37,14 @@ import {getDocument} from "./util.js";
  * For example, to include a string from an object, the attribute `data-monster-replace` can be used.
  * a further explanation can be found under {@tutorial dom-based-templating-implementation}.
  *
+ * Changes to attributes are made only when the direct values are changed. If you want to assign changes to other values
+ * as well, you have to insert the attribute `data-monster-select-this`. This should be done with care, as it can reduce performance.
+ *
  * You can create an object of this class using the monster namespace `new Monster.DOM.Updater()`.
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.25.0/dist/modules/dom/updater.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.28.0/dist/monster.js';
  * new Monster.DOM.Updater()
  * </script>
  * ```
@@ -47,14 +53,14 @@ import {getDocument} from "./util.js";
  *
  * ```
  * <script type="module">
- * import {Updater} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.25.0/dist/modules/dom/updater.js';
+ * import {Updater} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.28.0/dist/modules/dom/updater.js';
  * new Updater()
  * </script>
  * ```
  *
  * @example
  *
- * import {Updater} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.25.0/dist/modules/dom/updater.js';
+ * import {Updater} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.28.0/dist/modules/dom/updater.js';
  *
  * // First we prepare the html document.
  * // This is done here via script, but can also be inserted into the document as pure html.
@@ -68,7 +74,7 @@ import {getDocument} from "./util.js";
  * let obj = {
  *    headline: "Hello World",
  * };
- * 
+ *
  * // Now comes the real magic. we pass the updater the parent HTMLElement
  * // and the desired data structure.
  * const updater = new Updater(body, obj);
@@ -105,27 +111,27 @@ class Updater extends Base {
         /**
          * @type {HTMLElement}
          */
-        this.element = validateInstance(element, HTMLElement);
-
         if (subject === undefined) subject = {}
-        let a = subject;
         if (!isInstance(subject, ProxyObserver)) {
             subject = new ProxyObserver(subject);
         }
 
-        this.last = {};
-        this.callbacks = new Map();
-        this.callbacks.set('checkstate', getCheckStateCallback.call(this));
+        this[internalSymbol] = {
+            element: validateInstance(element, HTMLElement),
+            last: {},
+            callbacks: new Map(),
+            eventTypes: ['keyup', 'click', 'change', 'drop', 'touchend', 'input'],
+            subject: subject
+        }
 
-        /**
-         * @type {object}
-         */
-        this.subject = subject.attachObserver(new Observer(() => {
+        this[internalSymbol].callbacks.set('checkstate', getCheckStateCallback.call(this));
+
+        this[internalSymbol].subject.attachObserver(new Observer(() => {
 
-            const s = this.subject.getRealSubject();
+            const s = this[internalSymbol].subject.getRealSubject();
 
-            const diffResult = diff(this.last, s)
-            this.last = clone(s);
+            const diffResult = diff(this[internalSymbol].last, s)
+            this[internalSymbol].last = clone(s);
 
             for (const [, change] of Object.entries(diffResult)) {
                 removeElement.call(this, change);
@@ -135,8 +141,6 @@ class Updater extends Base {
             }
         }));
 
-        this.eventTypes = ['keyup', 'click', 'change', 'drop', 'touchend', 'input'];
-
     }
 
     /**
@@ -148,7 +152,7 @@ class Updater extends Base {
      * @return {Updater}
      */
     setEventTypes(types) {
-        this.eventTypes = validateArray(types);
+        this[internalSymbol].eventTypes = validateArray(types);
         return this;
     }
 
@@ -163,12 +167,17 @@ class Updater extends Base {
      *
      * @since 1.9.0
      * @return {Updater}
+     * @throws {Error} the bind argument must start as a value with a path
      */
     enableEventProcessing() {
         this.disableEventProcessing();
 
-        for (const type of this.eventTypes) {
-            this.element.addEventListener(type, getControlEventHandler.call(this));
+        for (const type of this[internalSymbol].eventTypes) {
+            // @see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
+            this[internalSymbol].element.addEventListener(type, getControlEventHandler.call(this), {
+                capture: true,
+                passive: true
+            });
         }
 
         return this;
@@ -183,8 +192,8 @@ class Updater extends Base {
      */
     disableEventProcessing() {
 
-        for (const type of this.eventTypes) {
-            this.element.removeEventListener(type, getControlEventHandler.call(this));
+        for (const type of this[internalSymbol].eventTypes) {
+            this[internalSymbol].element.removeEventListener(type, getControlEventHandler.call(this));
         }
 
         return this;
@@ -207,8 +216,19 @@ class Updater extends Base {
     run() {
         // the key __init__has no further meaning and is only 
         // used to create the diff for empty objects.
-        this.last = {'__init__': true};
-        return this.subject.notifyObservers();
+        this[internalSymbol].last = {'__init__': true};
+        return this[internalSymbol].subject.notifyObservers();
+    }
+
+    /**
+     * Gets the values of bound elements and changes them in subject
+     *
+     * @since 1.27.0
+     * @return {Monster.DOM.Updater}
+     */
+    retrieve() {
+        retrieveFromBindings.call(this);
+        return this;
     }
 
     /**
@@ -221,7 +241,7 @@ class Updater extends Base {
      * @return {Proxy}
      */
     getSubject() {
-        return this.subject.getSubject();
+        return this[internalSymbol].subject.getSubject();
     }
 
     /**
@@ -235,7 +255,7 @@ class Updater extends Base {
      * @throws {TypeError} value is not a function
      */
     setCallback(name, callback) {
-        this.callbacks.set(name, callback);
+        this[internalSymbol].callbacks.set(name, callback);
         return this;
     }
 
@@ -252,6 +272,7 @@ function getCheckStateCallback() {
 
     return function (current) {
 
+        // this is a reference to the current object (therefore no array function here)
         if (this instanceof HTMLInputElement) {
             if (['radio', 'checkbox'].indexOf(this.type) !== -1) {
                 return (this.value + "" === current + "") ? 'true' : undefined
@@ -261,9 +282,8 @@ function getCheckStateCallback() {
             if (isArray(current) && current.indexOf(this.value) !== -1) {
                 return 'true'
             }
-            return undefined;
-
 
+            return undefined;
         }
     }
 }
@@ -277,6 +297,7 @@ const symbol = Symbol('EventHandler');
  * @private
  * @return {function}
  * @this Updater
+ * @throws {Error} the bind argument must start as a value with a path
  */
 function getControlEventHandler() {
 
@@ -286,83 +307,112 @@ function getControlEventHandler() {
         return self[symbol];
     }
 
-    const pathfinder = new Pathfinder(this.subject.getSubject());
-
     /**
      * @throws {Error} the bind argument must start as a value with a path.
      * @throws {Error} unsupported object
      * @param {Event} event
      */
     self[symbol] = (event) => {
-        const element = event.target;
+        const element = findTargetElementFromEvent(event, ATTRIBUTE_UPDATER_BIND);
 
-        if (!element.hasAttribute(ATTRIBUTE_UPDATER_BIND)) {
+        if (element === undefined) {
             return;
         }
 
-        let path = element.getAttribute(ATTRIBUTE_UPDATER_BIND);
+        retrieveAndSetValue.call(self, element);
 
-        if (path.indexOf('path:') !== 0) {
-            throw new Error('the bind argument must start as a value with a path.');
-        }
+    }
 
-        path = path.substr(5);
+    return self[symbol];
 
-        let value;
 
-        if (element instanceof HTMLInputElement) {
-            switch (element.type) {
+}
 
-                case 'checkbox':
-                    value = element.checked ? element.value : undefined;
-                    break;
-                default:
-                    value = element.value;
-                    break;
+/**
+ * @throws {Error} the bind argument must start as a value with a path
+ * @param {HTMLElement} element
+ * @return void
+ */
+function retrieveAndSetValue(element) {
 
+    const self = this;
 
-            }
-        } else if (element instanceof HTMLTextAreaElement) {
-            value = element.value;
+    const pathfinder = new Pathfinder(self[internalSymbol].subject.getSubject());
 
-        } else if (element instanceof HTMLSelectElement) {
+    let path = element.getAttribute(ATTRIBUTE_UPDATER_BIND);
 
-            switch (element.type) {
-                case 'select-one':
-                    value = element.value;
-                    break;
-                case 'select-multiple':
-                    value = element.value;
+    if (path.indexOf('path:') !== 0) {
+        throw new Error('the bind argument must start as a value with a path');
+    }
 
-                    let options = element?.selectedOptions;
-                    if (options === undefined) options = element.querySelectorAll(":scope option:checked");
-                    value = Array.from(options).map(({value}) => value);
+    path = path.substr(5);
 
-                    break;
-            }
+    let value;
+
+    if (element instanceof HTMLInputElement) {
+        switch (element.type) {
+
+            case 'checkbox':
+                value = element.checked ? element.value : undefined;
+                break;
+            default:
+                value = element.value;
+                break;
 
 
-            // values from customelements 
-        } else if ((element?.constructor?.prototype && !!Object.getOwnPropertyDescriptor(element.constructor.prototype, 'value')?.['get']) || element.hasOwnProperty('value')) {
-            value = element?.['value'];
-        } else {
-            throw new Error("unsupported object");
         }
+    } else if (element instanceof HTMLTextAreaElement) {
+        value = element.value;
+
+    } else if (element instanceof HTMLSelectElement) {
 
-        const copy = clone(self.subject.getRealSubject());
-        const pf = new Pathfinder(copy);
-        pf.setVia(path, value);
+        switch (element.type) {
+            case 'select-one':
+                value = element.value;
+                break;
+            case 'select-multiple':
+                value = element.value;
 
-        const diffResult = diff(copy, self.subject.getRealSubject());
+                let options = element?.selectedOptions;
+                if (options === undefined) options = element.querySelectorAll(":scope option:checked");
+                value = Array.from(options).map(({value}) => value);
 
-        if (diffResult.length > 0) {
-            pathfinder.setVia(path, value);
+                break;
         }
 
+
+        // values from customelements 
+    } else if ((element?.constructor?.prototype && !!Object.getOwnPropertyDescriptor(element.constructor.prototype, 'value')?.['get']) || element.hasOwnProperty('value')) {
+        value = element?.['value'];
+    } else {
+        throw new Error("unsupported object");
     }
 
-    return self[symbol];
+    const copy = clone(self[internalSymbol].subject.getRealSubject());
+    const pf = new Pathfinder(copy);
+    pf.setVia(path, value);
+
+    const diffResult = diff(copy, self[internalSymbol].subject.getRealSubject());
+
+    if (diffResult.length > 0) {
+        pathfinder.setVia(path, value);
+    }
+}
+
+/**
+ * @since 1.27.0
+ * @return void
+ */
+function retrieveFromBindings() {
+    const self = this;
+
+    if (self[internalSymbol].element.matches('[' + ATTRIBUTE_UPDATER_BIND + ']')) {
+        retrieveAndSetValue.call(self, element)
+    }
 
+    for (const [, element] of self[internalSymbol].element.querySelectorAll('[' + ATTRIBUTE_UPDATER_BIND + ']').entries()) {
+        retrieveAndSetValue.call(self, element)
+    }
 
 }
 
@@ -373,7 +423,9 @@ function getControlEventHandler() {
  * @return {void}
  */
 function removeElement(change) {
-    for (const [, element] of this.element.querySelectorAll(':scope [' + ATTRIBUTE_UPDATER_REMOVE + ']').entries()) {
+    const self = this;
+
+    for (const [, element] of self[internalSymbol].element.querySelectorAll(':scope [' + ATTRIBUTE_UPDATER_REMOVE + ']').entries()) {
         element.parentNode.removeChild(element);
     }
 }
@@ -391,7 +443,7 @@ function removeElement(change) {
  */
 function insertElement(change) {
     const self = this;
-    const subject = self.subject.getRealSubject();
+    const subject = self[internalSymbol].subject.getRealSubject();
     const document = getDocument();
 
     let mem = new WeakSet;
@@ -407,7 +459,7 @@ function insertElement(change) {
 
         while (p.length > 0) {
             const current = p.join('.');
-            const list = this.element.querySelectorAll(':scope [' + ATTRIBUTE_UPDATER_INSERT + '*="path:' + current + '"]').entries()
+            const list = this[internalSymbol].element.querySelectorAll(':scope [' + ATTRIBUTE_UPDATER_INSERT + '*="path:' + current + '"]').entries()
 
             for (const [, containerElement] of list) {
 
@@ -429,7 +481,7 @@ function insertElement(change) {
                 }
 
                 let pipe = new Pipe(cmd);
-                this.callbacks.forEach((f, n) => {
+                this[internalSymbol].callbacks.forEach((f, n) => {
                     pipe.setCallback(n, f);
                 })
 
@@ -530,12 +582,12 @@ function applyRecursive(node, key, path) {
 
         if (node.hasAttribute(ATTRIBUTE_UPDATER_REPLACE)) {
             let value = node.getAttribute(ATTRIBUTE_UPDATER_REPLACE);
-            node.setAttribute(ATTRIBUTE_UPDATER_REPLACE, value.replace("path:" + key, "path:" + path));
+            node.setAttribute(ATTRIBUTE_UPDATER_REPLACE, value.replaceAll("path:" + key, "path:" + path));
         }
 
         if (node.hasAttribute(ATTRIBUTE_UPDATER_ATTRIBUTES)) {
             let value = node.getAttribute(ATTRIBUTE_UPDATER_ATTRIBUTES);
-            node.setAttribute(ATTRIBUTE_UPDATER_ATTRIBUTES, value.replace("path:" + key, "path:" + path));
+            node.setAttribute(ATTRIBUTE_UPDATER_ATTRIBUTES, value.replaceAll("path:" + key, "path:" + path));
         }
 
         for (const [, child] of Object.entries(node.childNodes)) {
@@ -553,12 +605,12 @@ function applyRecursive(node, key, path) {
  */
 function updateContent(change) {
     const self = this;
-    const subject = self.subject.getRealSubject();
+    const subject = self[internalSymbol].subject.getRealSubject();
 
     let p = clone(change?.['path']);
-    runUpdateContent.call(this, this.element, p, subject);
+    runUpdateContent.call(this, this[internalSymbol].element, p, subject);
 
-    const slots = this.element.querySelectorAll('slot');
+    const slots = this[internalSymbol].element.querySelectorAll('slot');
     if (slots.length > 0) {
         for (const [, slot] of Object.entries(slots)) {
             for (const [, element] of Object.entries(slot.assignedNodes())) {
@@ -610,7 +662,7 @@ function runUpdateContent(container, parts, subject) {
             let cmd = trimSpaces(attributes);
 
             let pipe = new Pipe(cmd);
-            this.callbacks.forEach((f, n) => {
+            this[internalSymbol].callbacks.forEach((f, n) => {
                 pipe.setCallback(n, f);
             })
 
@@ -646,9 +698,9 @@ function runUpdateContent(container, parts, subject) {
  * @return {void}
  */
 function updateAttributes(change) {
-    const subject = this.subject.getRealSubject();
+    const subject = this[internalSymbol].subject.getRealSubject();
     let p = clone(change?.['path']);
-    runUpdateAttributes.call(this, this.element, p, subject);
+    runUpdateAttributes.call(this, this[internalSymbol].element, p, subject);
 }
 
 /**
@@ -674,7 +726,8 @@ function runUpdateAttributes(container, parts, subject) {
 
         let iterator = new Set;
 
-        const query = '[' + ATTRIBUTE_UPDATER_ATTRIBUTES + '*="path:' + current + '"], [' + ATTRIBUTE_UPDATER_ATTRIBUTES + '^="static:"]';
+        const query = '[' + ATTRIBUTE_UPDATER_SELECT_THIS + '], [' + ATTRIBUTE_UPDATER_ATTRIBUTES + '*="path:' + current + '"], [' + ATTRIBUTE_UPDATER_ATTRIBUTES + '^="static:"]';
+
         const e = container.querySelectorAll(query);
 
         if (e.length > 0) {
@@ -702,7 +755,7 @@ function runUpdateAttributes(container, parts, subject) {
 
                 let pipe = new Pipe(cmd);
 
-                self.callbacks.forEach((f, n) => {
+                self[internalSymbol].callbacks.forEach((f, n) => {
                     pipe.setCallback(n, f, element);
                 })
 
@@ -776,19 +829,26 @@ function handleInputControlAttributeUpdate(element, name, value) {
         switch (element.type) {
 
             case 'radio':
-                if (name === 'checked' && value !== undefined) {
-                    element.checked = true;
-                } else {
-                    element.checked = false;
+                if (name === 'checked') {
+
+                    if (value !== undefined) {
+                        element.checked = true;
+                    } else {
+                        element.checked = false;
+                    }
                 }
 
                 break;
 
             case 'checkbox':
-                if (name === 'checked' && value !== undefined) {
-                    element.checked = true;
-                } else {
-                    element.checked = false;
+
+                if (name === 'checked') {
+
+                    if (value !== undefined) {
+                        element.checked = true;
+                    } else {
+                        element.checked = false;
+                    }
                 }
 
                 break;

package/source/dom/util.js

@@ -13,7 +13,7 @@ import {validateString} from "../types/validate.js";
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.25.0/dist/modules/dom/util.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.28.0/dist/monster.js';
  * console.log(Monster.DOM.getDocument())
  * </script>
  * ```
@@ -22,7 +22,7 @@ import {validateString} from "../types/validate.js";
  *
  * ```
  * <script type="module">
- * import {getDocument} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.25.0/dist/modules/dom/util.js';
+ * import {getDocument} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.28.0/dist/modules/dom/util.js';
  * console.log(getDocument())
  * </script>
  * ```
@@ -74,7 +74,7 @@ function getDocument() {
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.25.0/dist/modules/dom/util.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.28.0/dist/monster.js';
  * console.log(Monster.DOM.getWindow())
  * </script>
  * ```
@@ -83,7 +83,7 @@ function getDocument() {
  *
  * ```
  * <script type="module">
- * import {getWindow} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.25.0/dist/modules/dom/util.js';
+ * import {getWindow} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.28.0/dist/modules/dom/util.js';
  * console.log(getWindow(null))
  * </script>
  * ```
@@ -140,7 +140,7 @@ function getWindow() {
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.25.0/dist/modules/dom/util.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.28.0/dist/monster.js';
  * console.log(Monster.DOM.getDocumentFragmentFromString())
  * </script>
  * ```
@@ -149,7 +149,7 @@ function getWindow() {
  *
  * ```
  * <script type="module">
- * import {getDocumentFragmentFromString} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.25.0/dist/modules/dom/util.js';
+ * import {getDocumentFragmentFromString} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.28.0/dist/modules/dom/util.js';
  * console.log(getDocumentFragmentFromString('<div></div>'))
  * </script>
  * ```

package/source/dom/worker/factory.js

@@ -20,7 +20,7 @@ import {validateInstance, validateString} from "../../types/validate.js";
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.25.0/dist/modules/dom/worker/factory.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.28.0/dist/monster.js';
  * console.log(new Monster.DOM.Worker.Factory())
  * </script>
  * ```
@@ -29,7 +29,7 @@ import {validateInstance, validateString} from "../../types/validate.js";
  *
  * ```
  * <script type="module">
- * import {Factory} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.25.0/dist/modules/dom/worker/factory.js';
+ * import {Factory} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.28.0/dist/modules/dom/worker/factory.js';
  * console.log(new Factory())
  * </script>
  * ```