@schukai/monster 1.22.0 → 1.26.0

package/source/dom/theme.js

@@ -15,7 +15,7 @@ import {ATTRIBUTE_THEME_NAME, DEFAULT_THEME} from "./constants.js";
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.22.0/dist/modules/dom/theme.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.0/dist/monster.js';
  * console.log(new Monster.DOM.Theme())
  * </script>
  * ```
@@ -24,14 +24,14 @@ import {ATTRIBUTE_THEME_NAME, DEFAULT_THEME} from "./constants.js";
  *
  * ```
  * <script type="module">
- * import {Theme} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.22.0/dist/modules/dom/theme.js';
+ * import {Theme} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.0/dist/modules/dom/theme.js';
  * console.log(new Theme())
  * </script>
  * ```
  *
  * @example
  *
- * import {getDocumentTheme} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.22.0/dist/modules/dom/theme.js';
+ * import {getDocumentTheme} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.0/dist/modules/dom/theme.js';
  *
  * const theme = getDocumentTheme();
  * console.log(theme.getName());

package/source/dom/updater.js

@@ -1,9 +1,14 @@
 'use strict';
 
-import {Diff} from "../data/diff.js";
+/**
+ * @author schukai GmbH
+ */
+
+import {diff} from "../data/diff.js";
 import {Pathfinder} from "../data/pathfinder.js";
 import {Pipe} from "../data/pipe.js";
 import {
+    ATTRIBUTE_ERRORMESSAGE,
     ATTRIBUTE_UPDATER_ATTRIBUTES,
     ATTRIBUTE_UPDATER_BIND,
     ATTRIBUTE_UPDATER_INSERT,
@@ -11,9 +16,6 @@ import {
     ATTRIBUTE_UPDATER_REMOVE,
     ATTRIBUTE_UPDATER_REPLACE
 } from "../dom/constants.js";
-/**
- * @author schukai GmbH
- */
 import {assignToNamespace, Monster} from '../namespace.js';
 import {Base} from "../types/base.js";
 import {isArray, isInstance, isIterable} from "../types/is.js";
@@ -21,6 +23,7 @@ import {Observer} from "../types/observer.js";
 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 {findDocumentTemplate} from "./template.js";
 import {getDocument} from "./util.js";
 
@@ -28,15 +31,15 @@ import {getDocument} from "./util.js";
 /**
  * The updater class connects an object with the dom. In this way, structures and contents in the DOM can be programmatically adapted via attributes.
  *
- * For example, to include a string from an object, the attribute `data-monster-replace` can be used. 
+ * 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}.
  *
  * 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.22.0/dist/modules/dom/updater.js';
- * console.log(new Monster.DOM.Updater())
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.0/dist/monster.js';
+ * new Monster.DOM.Updater()
  * </script>
  * ```
  *
@@ -44,14 +47,14 @@ import {getDocument} from "./util.js";
  *
  * ```
  * <script type="module">
- * import {Updater} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.22.0/dist/modules/dom/updater.js';
- * console.log(new Updater())
+ * import {Updater} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.0/dist/modules/dom/updater.js';
+ * new Updater()
  * </script>
  * ```
  *
  * @example
  *
- * import {Updater} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.22.0/dist/modules/dom/updater.js';
+ * import {Updater} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.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.
@@ -65,7 +68,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);
@@ -121,10 +124,10 @@ class Updater extends Base {
 
             const s = this.subject.getRealSubject();
 
-            const diff = Diff(this.last, s)
+            const diffResult = diff(this.last, s)
             this.last = clone(s);
 
-            for (const [, change] of Object.entries(diff)) {
+            for (const [, change] of Object.entries(diffResult)) {
                 removeElement.call(this, change);
                 insertElement.call(this, change);
                 updateContent.call(this, change);
@@ -150,6 +153,13 @@ class Updater extends Base {
     }
 
     /**
+     * With this method, the eventlisteners are hooked in and the magic begins.
+     *
+     * ```
+     * updater.run().then(() => {
+     *   updater.enableEventProcessing();
+     * });
+     * ```
      *
      * @since 1.9.0
      * @return {Updater}
@@ -166,6 +176,7 @@ class Updater extends Base {
     }
 
     /**
+     * This method turns off the magic or who loves it more profane it removes the eventListener.
      *
      * @since 1.9.0
      * @return {Updater}
@@ -181,10 +192,16 @@ class Updater extends Base {
     }
 
     /**
-     * Let the magic begin
-     *
      * The run method must be called for the update to start working.
+     * The method ensures that changes are detected.
      *
+     * ```
+     * updater.run().then(() => {
+     *   updater.enableEventProcessing();
+     * });
+     * ```
+     *
+     * @summary Let the magic begin
      * @return {Promise}
      */
     run() {
@@ -195,13 +212,13 @@ class Updater extends Base {
     }
 
     /**
-     * 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();
@@ -336,9 +353,9 @@ function getControlEventHandler() {
         const pf = new Pathfinder(copy);
         pf.setVia(path, value);
 
-        const diff = new Diff(copy, self.subject.getRealSubject());
+        const diffResult = diff(copy, self.subject.getRealSubject());
 
-        if (diff.length > 0) {
+        if (diffResult.length > 0) {
             pathfinder.setVia(path, value);
         }
 
@@ -400,11 +417,11 @@ function insertElement(change) {
                 found = true;
 
                 const attributes = containerElement.getAttribute(ATTRIBUTE_UPDATER_INSERT);
-                let def = attributes.trim();
+                let def = trimSpaces(attributes);
                 let i = def.indexOf(' ');
-                let key = def.substr(0, i).trim();
+                let key = trimSpaces(def.substr(0, i));
                 let refPrefix = key + '-';
-                let cmd = def.substr(i).trim();
+                let cmd = trimSpaces(def.substr(i));
 
                 // this case is actually excluded by the query but is nevertheless checked again here
                 if (cmd.indexOf('|') > 0) {
@@ -416,7 +433,14 @@ function insertElement(change) {
                     pipe.setCallback(n, f);
                 })
 
-                let value = pipe.run(subject)
+                let value
+                try {
+                    containerElement.removeAttribute(ATTRIBUTE_ERRORMESSAGE);
+                    value = pipe.run(subject)
+                } catch (e) {
+                    containerElement.setAttribute(ATTRIBUTE_ERRORMESSAGE, e.message);
+                }
+
                 let dataPath = cmd.split(':').pop();
 
                 let insertPoint;
@@ -506,12 +530,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)) {
@@ -533,6 +557,17 @@ function updateContent(change) {
 
     let p = clone(change?.['path']);
     runUpdateContent.call(this, this.element, p, subject);
+
+    const slots = this.element.querySelectorAll('slot');
+    if (slots.length > 0) {
+        for (const [, slot] of Object.entries(slots)) {
+            for (const [, element] of Object.entries(slot.assignedNodes())) {
+                runUpdateContent.call(this, element, p, subject);
+            }
+        }
+    }
+
+
 }
 
 /**
@@ -545,6 +580,7 @@ function updateContent(change) {
  */
 function runUpdateContent(container, parts, subject) {
     if (!isArray(parts)) return;
+    if (!(container instanceof HTMLElement)) return;
     parts = clone(parts);
 
     let mem = new WeakSet;
@@ -554,20 +590,37 @@ function runUpdateContent(container, parts, subject) {
         parts.pop();
 
         // Unfortunately, static data is always changed as well, since it is not possible to react to changes here.
-        for (const [, element] of container.querySelectorAll(':scope [' + ATTRIBUTE_UPDATER_REPLACE + '^="path:' + current + '"], [' + ATTRIBUTE_UPDATER_REPLACE + '^="static:"]').entries()) {
+        const query = '[' + ATTRIBUTE_UPDATER_REPLACE + '^="path:' + current + '"], [' + ATTRIBUTE_UPDATER_REPLACE + '^="static:"]';
+        const e = container.querySelectorAll('' + query);
 
-            if (mem.has(element)) continue;
+        const iterator = new Set([
+            ...e
+        ])
+
+        if (container.matches(query)) {
+            iterator.add(container);
+        }
+
+        iterator.forEach((key, element) => {
+
+            if (mem.has(element)) return;
             mem.add(element)
 
             const attributes = element.getAttribute(ATTRIBUTE_UPDATER_REPLACE)
-            let cmd = attributes.trim();
+            let cmd = trimSpaces(attributes);
 
             let pipe = new Pipe(cmd);
             this.callbacks.forEach((f, n) => {
                 pipe.setCallback(n, f);
             })
 
-            let value = pipe.run(subject)
+            let value
+            try {
+                element.removeAttribute(ATTRIBUTE_ERRORMESSAGE);
+                value = pipe.run(subject)
+            } catch (e) {
+                element.setAttribute(ATTRIBUTE_ERRORMESSAGE, e.message);
+            }
 
             if (value instanceof HTMLElement) {
                 while (element.firstChild) {
@@ -578,7 +631,9 @@ function runUpdateContent(container, parts, subject) {
                 element.innerHTML = value;
             }
 
-        }
+        })
+
+
     }
 
 }
@@ -617,18 +672,33 @@ function runUpdateAttributes(container, parts, subject) {
         const current = parts.join('.');
         parts.pop();
 
-        for (const [, element] of container.querySelectorAll(':scope [' + ATTRIBUTE_UPDATER_ATTRIBUTES + '*="path:' + current + '"]').entries()) {
+        let iterator = new Set;
+
+        const query = '[' + ATTRIBUTE_UPDATER_ATTRIBUTES + '*="path:' + current + '"], [' + ATTRIBUTE_UPDATER_ATTRIBUTES + '^="static:"]';
+        const e = container.querySelectorAll(query);
 
-            if (mem.has(element)) continue;
+        if (e.length > 0) {
+            iterator = new Set(
+                [...e]
+            )
+        }
+
+        if (container.matches(query)) {
+            iterator.add(container);
+        }
+
+        iterator.forEach((key, element) => {
+
+            if (mem.has(element)) return;
             mem.add(element)
 
             const attributes = element.getAttribute(ATTRIBUTE_UPDATER_ATTRIBUTES)
 
             for (let [, def] of Object.entries(attributes.split(','))) {
-                def = def.trim();
+                def = trimSpaces(def);
                 let i = def.indexOf(' ');
-                let name = def.substr(0, i).trim();
-                let cmd = def.substr(i).trim();
+                let name = trimSpaces(def.substr(0, i));
+                let cmd = trimSpaces(def.substr(i));
 
                 let pipe = new Pipe(cmd);
 
@@ -636,7 +706,14 @@ function runUpdateAttributes(container, parts, subject) {
                     pipe.setCallback(n, f, element);
                 })
 
-                let value = pipe.run(subject)
+                let value
+                try {
+                    element.removeAttribute(ATTRIBUTE_ERRORMESSAGE);
+                    value = pipe.run(subject)
+                } catch (e) {
+                    element.setAttribute(ATTRIBUTE_ERRORMESSAGE, e.message);
+                }
+
 
                 if (value === undefined) {
                     element.removeAttribute(name)
@@ -647,9 +724,8 @@ function runUpdateAttributes(container, parts, subject) {
 
                 handleInputControlAttributeUpdate.call(this, element, name, value);
 
-
             }
-        }
+        });
 
     }
 

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.22.0/dist/modules/dom/util.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.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.22.0/dist/modules/dom/util.js';
+ * import {getDocument} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.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.22.0/dist/modules/dom/util.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.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.22.0/dist/modules/dom/util.js';
+ * import {getWindow} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.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.22.0/dist/modules/dom/util.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.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.22.0/dist/modules/dom/util.js';
+ * import {getDocumentFragmentFromString} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.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.26.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.26.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}