@schukai/monster 1.26.1 → 1.27.0

package/source/dom/template.js

@@ -7,6 +7,7 @@ import {assignToNamespace, Monster} from '../namespace.js';
 import {Base} from '../types/base.js';
 import {getGlobalFunction, getGlobalObject} from '../types/global.js';
 import {validateInstance, validateString} from "../types/validate.js";
+import {ATTRIBUTE_TEMPLATE_PREFIX} from "./constants.js";
 import {getDocumentTheme} from "./theme.js";
 
 /**
@@ -14,7 +15,7 @@ import {getDocumentTheme} from "./theme.js";
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/monster.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.0/dist/monster.js';
  * new Monster.DOM.Template()
  * </script>
  * ```
@@ -23,7 +24,7 @@ import {getDocumentTheme} from "./theme.js";
  *
  * ```
  * <script type="module">
- * import {Template} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/modules/dom/template.js';
+ * import {Template} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.0/dist/modules/dom/template.js';
  * new Template()
  * </script>
  * ```
@@ -85,7 +86,7 @@ class Template extends Base {
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/monster.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.0/dist/monster.js';
  * Monster.DOM.findDocumentTemplate()
  * </script>
  * ```
@@ -94,14 +95,14 @@ class Template extends Base {
  *
  * ```
  * <script type="module">
- * import {findTemplate} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/modules/dom/template.js';
+ * import {findTemplate} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.0/dist/modules/dom/template.js';
  * findDocumentTemplate()
  * </script>
  * ```
  *
  * @example
  *
- * import { findDocumentTemplate } from "https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/modules/dom/template.js";
+ * import { findDocumentTemplate } from "https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.0/dist/modules/dom/template.js";
  *
  * const template = document.createElement("template");
  * template.id = "myTemplate";
@@ -141,9 +142,22 @@ class Template extends Base {
 function findDocumentTemplate(id, currentNode) {
     validateString(id);
 
+    const document = getGlobalObject('document');
+    const HTMLTemplateElement = getGlobalFunction('HTMLTemplateElement');
+    const DocumentFragment = getGlobalFunction('DocumentFragment');
+    const Document = getGlobalFunction('Document');
+
+
+    let prefixID;
+
     if (!(currentNode instanceof Document || currentNode instanceof DocumentFragment)) {
 
         if (currentNode instanceof Node) {
+
+            if (currentNode.hasAttribute(ATTRIBUTE_TEMPLATE_PREFIX)) {
+                prefixID = currentNode.getAttribute(ATTRIBUTE_TEMPLATE_PREFIX)
+            }
+
             currentNode = currentNode.getRootNode();
 
             if (!(currentNode instanceof Document || currentNode instanceof DocumentFragment)) {
@@ -153,23 +167,39 @@ function findDocumentTemplate(id, currentNode) {
         }
 
         if (!(currentNode instanceof Document || currentNode instanceof DocumentFragment)) {
-            currentNode = getGlobalObject('document');
+            currentNode = document;
         }
     }
 
-    const HTMLTemplateElement = getGlobalFunction('HTMLTemplateElement');
-
+    let template;
     let theme = getDocumentTheme()
+
+    if (prefixID) {
+        let themedPrefixID = prefixID + '-' + id + '-' + theme.getName();
+
+        // current + themedPrefixID
+        template = currentNode.getElementById(themedPrefixID);
+        if (template instanceof HTMLTemplateElement) {
+            return new Template(template);
+        }
+
+        // document + themedPrefixID
+        template = document.getElementById(themedPrefixID);
+        if (template instanceof HTMLTemplateElement) {
+            return new Template(template);
+        }
+    }
+
     let themedID = id + '-' + theme.getName();
 
     // current + themedID
-    let template = currentNode.getElementById(themedID);
+    template = currentNode.getElementById(themedID);
     if (template instanceof HTMLTemplateElement) {
         return new Template(template);
     }
 
     // document + themedID
-    template = getGlobalObject('document').getElementById(themedID);
+    template = document.getElementById(themedID);
     if (template instanceof HTMLTemplateElement) {
         return new Template(template);
     }
@@ -181,7 +211,7 @@ function findDocumentTemplate(id, currentNode) {
     }
 
     // document + ID
-    template = getGlobalObject('document').getElementById(id);
+    template = document.getElementById(id);
     if (template instanceof HTMLTemplateElement) {
         return new Template(template);
     }

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.26.1/dist/monster.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.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.26.1/dist/modules/dom/theme.js';
+ * import {Theme} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.0/dist/modules/dom/theme.js';
  * console.log(new Theme())
  * </script>
  * ```
  *
  * @example
  *
- * import {getDocumentTheme} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/modules/dom/theme.js';
+ * import {getDocumentTheme} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.0/dist/modules/dom/theme.js';
  *
  * const theme = getDocumentTheme();
  * console.log(theme.getName());

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.26.1/dist/monster.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.26.1/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.26.1/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.
@@ -68,7 +70,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 +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));
+
+        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 +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,8 +212,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 +237,7 @@ class Updater extends Base {
      * @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.');
-        }
+    }
+
+    return self[symbol];
 
-        path = path.substr(5);
 
-        let value;
+}
 
-        if (element instanceof HTMLInputElement) {
-            switch (element.type) {
+/**
+ * @throws {Error} the bind argument must start as a value with a path
+ * @param {HTMLElement} element
+ * @return void
+ */
+function retrieveAndSetValue(element) {
 
-                case 'checkbox':
-                    value = element.checked ? element.value : undefined;
-                    break;
-                default:
-                    value = element.value;
-                    break;
+    const self = this;
 
+    const pathfinder = new Pathfinder(self[internalSymbol].subject.getSubject());
 
-            }
-        } else if (element instanceof HTMLTextAreaElement) {
-            value = element.value;
+    let path = element.getAttribute(ATTRIBUTE_UPDATER_BIND);
 
-        } else if (element instanceof HTMLSelectElement) {
+    if (path.indexOf('path:') !== 0) {
+        throw new Error('the bind argument must start as a value with a path');
+    }
 
-            switch (element.type) {
-                case 'select-one':
-                    value = element.value;
-                    break;
-                case 'select-multiple':
-                    value = element.value;
+    path = path.substr(5);
 
-                    let options = element?.selectedOptions;
-                    if (options === undefined) options = element.querySelectorAll(":scope option:checked");
-                    value = Array.from(options).map(({value}) => value);
+    let value;
 
-                    break;
-            }
+    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;
 
-        const copy = clone(self.subject.getRealSubject());
-        const pf = new Pathfinder(copy);
-        pf.setVia(path, value);
+    } else if (element instanceof HTMLSelectElement) {
 
-        const diffResult = diff(copy, self.subject.getRealSubject());
+        switch (element.type) {
+            case 'select-one':
+                value = element.value;
+                break;
+            case 'select-multiple':
+                value = element.value;
 
-        if (diffResult.length > 0) {
-            pathfinder.setVia(path, value);
+                let options = element?.selectedOptions;
+                if (options === undefined) options = element.querySelectorAll(":scope option:checked");
+                value = Array.from(options).map(({value}) => 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);
                 })
 
@@ -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.26.1/dist/monster.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.26.1/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.26.1/dist/monster.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.26.1/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.26.1/dist/monster.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.26.1/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

@@ -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.26.1/dist/monster.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.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.26.1/dist/modules/dom/worker/factory.js';
+ * import {Factory} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.0/dist/modules/dom/worker/factory.js';
  * console.log(new Factory())
  * </script>
  * ```