@schukai/monster 1.24.0 → 1.27.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";
@@ -24,6 +25,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";
 
@@ -38,7 +40,7 @@ import {getDocument} from "./util.js";
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.24.0/dist/modules/dom/updater.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.0/dist/monster.js';
  * new Monster.DOM.Updater()
  * </script>
  * ```
@@ -47,14 +49,14 @@ import {getDocument} from "./util.js";
  *
  * ```
  * <script type="module">
- * import {Updater} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.24.0/dist/modules/dom/updater.js';
+ * import {Updater} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.0/dist/modules/dom/updater.js';
  * new Updater()
  * </script>
  * ```
  *
  * @example
  *
- * import {Updater} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.24.0/dist/modules/dom/updater.js';
+ * import {Updater} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.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.
@@ -105,27 +107,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));
 
-            const s = this.subject.getRealSubject();
+        this[internalSymbol].subject.attachObserver(new Observer(() => {
 
-            const diffResult = diff(this.last, s)
-            this.last = clone(s);
+            const s = this[internalSymbol].subject.getRealSubject();
+
+            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 +137,6 @@ class Updater extends Base {
             }
         }));
 
-        this.eventTypes = ['keyup', 'click', 'change', 'drop', 'touchend', 'input'];
-
     }
 
     /**
@@ -148,7 +148,7 @@ class Updater extends Base {
      * @return {Updater}
      */
     setEventTypes(types) {
-        this.eventTypes = validateArray(types);
+        this[internalSymbol].eventTypes = validateArray(types);
         return this;
     }
 
@@ -163,12 +163,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 +188,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,21 +212,32 @@ 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;
     }
 
     /**
-     * If you have passed a ProxyObserver in the constructor, you will get the same object here.
-     * However, if you have passed a simple object, you will get the ProxyObserver here.
+     * If you have passed a ProxyObserver in the constructor, you will get the object that the ProxyObserver manages here.
+     * However, if you passed a simple object, here you will get a proxy for that object.
      *
      * For changes the ProxyObserver must be used.
      *
      * @since 1.8.0
-     * @return {ProxyObserver}
+     * @return {Proxy}
      */
     getSubject() {
-        return this.subject.getSubject();
+        return this[internalSymbol].subject.getSubject();
     }
 
     /**
@@ -235,7 +251,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 +268,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 +278,8 @@ function getCheckStateCallback() {
             if (isArray(current) && current.indexOf(this.value) !== -1) {
                 return 'true'
             }
-            return undefined;
-
 
+            return undefined;
         }
     }
 }
@@ -277,6 +293,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 +303,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 +419,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 +439,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 +455,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 +477,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 +578,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 +601,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 +658,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 +694,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);
 }
 
 /**
@@ -702,7 +750,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);
                 })
 

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.24.0/dist/modules/dom/util.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.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.24.0/dist/modules/dom/util.js';
+ * import {getDocument} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.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.24.0/dist/modules/dom/util.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.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.24.0/dist/modules/dom/util.js';
+ * import {getWindow} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.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.24.0/dist/modules/dom/util.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.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.24.0/dist/modules/dom/util.js';
+ * import {getDocumentFragmentFromString} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.0/dist/modules/dom/util.js';
  * console.log(getDocumentFragmentFromString('<div></div>'))
  * </script>
  * ```

package/source/dom/worker/factory.js

@@ -0,0 +1,134 @@
+'use strict';
+
+
+/**
+ * @author schukai GmbH
+ */
+
+
+import {internalSymbol} from "../../constants.js";
+import {assignToNamespace, Monster} from "../../namespace.js";
+import {Base} from "../../types/base.js";
+import {getGlobal, getGlobalFunction} from "../../types/global.js";
+import {isFunction} from "../../types/is.js";
+import {validateInstance, validateString} from "../../types/validate.js";
+
+
+
+/**
+ * You can call the function via the monster namespace `new Monster.DOM.Worker.getLocaleOfDocument()`.
+ *
+ * ```
+ * <script type="module">
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.0/dist/monster.js';
+ * console.log(new Monster.DOM.Worker.Factory())
+ * </script>
+ * ```
+ *
+ * Alternatively, you can also integrate this function individually.
+ *
+ * ```
+ * <script type="module">
+ * import {Factory} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.0/dist/modules/dom/worker/factory.js';
+ * console.log(new Factory())
+ * </script>
+ * ```
+ *
+ * @since 1.25.0
+ * @copyright schukai GmbH
+ * @memberOf Monster.DOM.Worker
+ * @summary A small factory to create worker
+ */
+class Factory extends Base {
+
+
+    /**
+     *
+     */
+    constructor() {
+        super();
+        this[internalSymbol] = {
+            worker: new WeakMap
+        }
+    }
+
+    /**
+     * Creates a worker from a URL
+     *
+     * @param {string|URL} url
+     * @param {function} messageHandler
+     * @param {function} errorHandler
+     * @return {Worker}
+     */
+    createFromURL = function (url, messageHandler, errorHandler) {
+
+        if (url instanceof URL) {
+            url = url.toString();
+        }
+
+        const workerClass = getGlobalFunction('Worker');
+        var worker = new workerClass(validateString(url));
+
+        if (isFunction(messageHandler)) {
+            worker.onmessage = (event) => {
+                messageHandler.call(worker, event);
+            }
+        }
+
+        if (isFunction(errorHandler)) {
+            worker.onerror = (event) => {
+                errorHandler.call(worker, event);
+            }
+        }
+
+        return worker;
+    };
+
+    /**
+     * Creates a worker from a script
+     *
+     * @param {string} content
+     * @param {function} messageHandler
+     * @param {function} errorHandler
+     * @return {Worker}
+     * @see https://developer.mozilla.org/de/docs/Web/API/URL/createObjectURL
+     */
+    createFromScript = function (content, messageHandler, errorHandler) {
+        const blobFunction = new getGlobalFunction('Blob')
+        const blob = new blobFunction([validateString(content)], {type: 'script/javascript'});
+
+        const url = getGlobalFunction('URL').createObjectURL(blob);
+        const worker = this.createFromURL(url, messageHandler, errorHandler);
+
+        this[internalSymbol]['worker'].set(worker, url);
+
+        return worker;
+
+    };
+
+    /**
+     * Terminate the worker and call revokeObjectURL if necessary.
+     *
+     * @param worker
+     * @return {Monster.DOM.Worker.Factory}
+     */
+    terminate(worker) {
+
+        const workerClass = getGlobalFunction('Worker');
+        validateInstance(worker, workerClass);
+
+        worker.terminate();
+
+        if (this[internalSymbol]['worker'].has(worker)) {
+            const url = this[internalSymbol]['worker'].get(worker);
+            URL.revokeObjectURL(url);
+        }
+
+        return this;
+    }
+
+
+}
+
+assignToNamespace('Monster.DOM.Worker', Factory);
+export {Monster, Factory}