@schukai/monster 2.2.1 → 3.0.0

package/README.md

@@ -73,7 +73,7 @@ We do try to work around some browser bugs, but on the whole we don't use polyfi
 However, many functions can be mapped via [polyfill.io](https://polyfill.io/) and thus the compatibility can be increased.
 
 ```html
-<script id="polyfill" src="https://polyfill.io/v3/polyfill.min.js?features=Array.from,Array.isArray,Array.prototype.entries,Array.prototype.fill,Array.prototype.filter,Array.prototype.forEach,Array.prototype.indexOf,Array.prototype.keys,Array.prototype.lastIndexOf,Array.prototype.map,Array.prototype.reduce,Array.prototype.sort,ArrayBuffer,atob,CustomEvent,DataView,document,Document,DocumentFragment,Element,Event,fetch,globalThis,HTMLDocument,HTMLTemplateElement,Intl,JSON,Map,Math.log2,Number.isInteger,Object.assign,Object.defineProperty,Object.entries,Object.freeze,Object.getOwnPropertyDescriptor,Object.getOwnPropertyNames,Object.getOwnPropertySymbols,Object.getPrototypeOf,Object.keys,Promise,Reflect,Reflect.defineProperty,Reflect.get,Reflect.getOwnPropertyDescriptor,Reflect.setPrototypeOf,Set,String.prototype.endsWith,String.prototype.matchAll,String.prototype.padStart,String.prototype.startsWith,String.prototype.trim,Symbol,Symbol.for,Symbol.hasInstance,Symbol.iterator,Uint16Array,Uint8Array,URL,WeakMap,WeakSet"
+<script id="polyfill" src="https://polyfill.io/v3/polyfill.min.js?features=Array.from,Array.isArray,Array.prototype.entries,Array.prototype.fill,Array.prototype.filter,Array.prototype.forEach,Array.prototype.indexOf,Array.prototype.keys,Array.prototype.lastIndexOf,Array.prototype.map,Array.prototype.reduce,Array.prototype.sort,ArrayBuffer,atob,CustomEvent,DataView,document,Document,DocumentFragment,Element,Event,fetch,globalThis,HTMLDocument,HTMLTemplateElement,Intl,JSON,Map,Math.log2,Number.isInteger,Object.assign,Object.defineProperty,Object.entries,Object.freeze,Object.getOwnPropertyDescriptor,Object.getOwnPropertyNames,Object.getPrototypeOf,Object.keys,Promise,Reflect,Reflect.defineProperty,Reflect.get,Reflect.getOwnPropertyDescriptor,Reflect.setPrototypeOf,Set,String.prototype.endsWith,String.prototype.matchAll,String.prototype.padStart,String.prototype.startsWith,String.prototype.trim,Symbol,Symbol.for,Symbol.hasInstance,Symbol.iterator,Uint16Array,Uint8Array,URL,WeakMap,WeakSet"
        crossorigin="anonymous"
        referrerpolicy="no-referrer"></script>
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schukai/monster",
-  "version": "2.2.1",
+  "version": "3.0.0",
   "description": "Monster is a simple library for creating fast, robust and lightweight websites.",
   "keywords": [
     "framework",

package/source/dom/constants.mjs

@@ -59,6 +59,7 @@ export {
     ATTRIBUTE_EXPORTPARTS,
     ATTRIBUTE_HIDDEN,
     objectUpdaterLinkSymbol,
+    customElementUpdaterLinkSymbol
 
 }
 
@@ -223,6 +224,14 @@ const ATTRIBUTE_ERRORMESSAGE = ATTRIBUTE_PREFIX + 'error';
  */
 const objectUpdaterLinkSymbol = Symbol.for('@schukai/monster/dom/@@object-updater-link');
 
+/**
+ * @memberOf Monster.DOM
+ * @type {symbol}
+ * @license AGPLv3
+ * @since 1.24.0
+ */
+const customElementUpdaterLinkSymbol = Symbol.for('@schukai/monster/dom/custom-element@@options-updater-link');
+
 /**
  * @memberOf Monster.DOM
  * @type {string}

package/source/dom/customelement.mjs

@@ -22,13 +22,20 @@ import {
     ATTRIBUTE_ERRORMESSAGE,
     ATTRIBUTE_OPTIONS,
     ATTRIBUTE_OPTIONS_SELECTOR,
-    objectUpdaterLinkSymbol
+    customElementUpdaterLinkSymbol
 } from "./constants.mjs";
 import {findDocumentTemplate, Template} from "./template.mjs";
-import {Updater} from "./updater.mjs";
+import {addObjectWithUpdaterToElement} from "./updater.mjs";
 import {instanceSymbol} from '../constants.mjs';
 
-export {CustomElement, initMethodSymbol, assembleMethodSymbol, attributeObserverSymbol, registerCustomElement, assignUpdaterToElement, getSlottedElements}
+export {
+    CustomElement,
+    initMethodSymbol,
+    assembleMethodSymbol,
+    attributeObserverSymbol,
+    registerCustomElement,
+    getSlottedElements
+}
 
 /**
  * @memberOf Monster.DOM
@@ -460,7 +467,8 @@ class CustomElement extends HTMLElement {
             nodeList = elements
         }
 
-        assignUpdaterToElement.call(self, nodeList, clone(self[internalSymbol].getRealSubject()['options']));
+        addObjectWithUpdaterToElement.call(self, nodeList, customElementUpdaterLinkSymbol, clone(self[internalSymbol].getRealSubject()['options']))
+        //assignUpdaterToElement.call(self, nodeList, clone(self[internalSymbol].getRealSubject()['options']));
         return self;
     }
 
@@ -473,7 +481,7 @@ class CustomElement extends HTMLElement {
      */
     connectedCallback() {
         let self = this;
-        if (!hasObjectLink(self, objectUpdaterLinkSymbol)) {
+        if (!hasObjectLink(self, customElementUpdaterLinkSymbol)) {
             self[assembleMethodSymbol]()
         }
     }
@@ -673,11 +681,11 @@ function initOptionObserver() {
     self.attachObserver(new Observer(function () {
 
         // not initialised
-        if (!hasObjectLink(self, objectUpdaterLinkSymbol)) {
+        if (!hasObjectLink(self, customElementUpdaterLinkSymbol)) {
             return;
         }
         // inform every element
-        const updaters = getLinkedObjects(self, objectUpdaterLinkSymbol);
+        const updaters = getLinkedObjects(self, customElementUpdaterLinkSymbol);
 
         for (const list of updaters) {
             for (const updater of list) {
@@ -935,44 +943,3 @@ function registerCustomElement(element) {
     getGlobalObject('customElements').define(element.getTag(), element);
 }
 
-
-/**
- *
- * @param element
- * @param object
- * @return {Promise[]}
- * @license AGPLv3
- * @since 1.23.0
- * @memberOf Monster.DOM
- */
-function assignUpdaterToElement(elements, object) {
-
-    const updaters = new Set;
-
-    if (elements instanceof NodeList) {
-        elements = new Set([
-            ...elements
-        ])
-    }
-
-    let result = [];
-
-    elements.forEach((element) => {
-        if (!(element instanceof HTMLElement)) return;
-        if ((element instanceof HTMLTemplateElement)) return;
-
-        const u = new Updater(element, object)
-        updaters.add(u);
-
-        result.push(u.run().then(() => {
-            return u.enableEventProcessing();
-        }));
-
-    });
-
-    if (updaters.size > 0) {
-        addToObjectLink(this, objectUpdaterLinkSymbol, updaters);
-    }
-
-    return result;
-}

package/source/dom/updater.mjs

@@ -17,7 +17,7 @@ import {
     ATTRIBUTE_UPDATER_INSERT_REFERENCE,
     ATTRIBUTE_UPDATER_REMOVE,
     ATTRIBUTE_UPDATER_REPLACE,
-    ATTRIBUTE_UPDATER_SELECT_THIS
+    ATTRIBUTE_UPDATER_SELECT_THIS, customElementUpdaterLinkSymbol
 } from "../dom/constants.mjs";
 
 import {Base} from "../types/base.mjs";
@@ -27,11 +27,12 @@ import {ProxyObserver} from "../types/proxyobserver.mjs";
 import {validateArray, validateInstance} from "../types/validate.mjs";
 import {clone} from "../util/clone.mjs";
 import {trimSpaces} from "../util/trimspaces.mjs";
+import {addToObjectLink} from "./attributes.mjs";
 import {findTargetElementFromEvent} from "./events.mjs";
 import {findDocumentTemplate} from "./template.mjs";
 import {getDocument} from "./util.mjs";
 
-export {Updater}
+export {Updater, addObjectWithUpdaterToElement}
 
 /**
  * The updater class connects an object with the dom. In this way, structures and contents in the DOM can be programmatically adapted via attributes.
@@ -252,7 +253,7 @@ function getCheckStateCallback() {
 /**
  * @private
  */
-const symbol = Symbol('EventHandler');
+const symbol = Symbol('@schukai/monster/updater@@EventHandler');
 
 /**
  * @private
@@ -308,7 +309,7 @@ function retrieveAndSetValue(element) {
         throw new Error('the bind argument must start as a value with a path');
     }
 
-    path = path.substr(5);
+    path = path.substring(5);
 
     let value;
 
@@ -525,8 +526,6 @@ function insertElement(change) {
         }
 
     }
-
-
 }
 
 /**
@@ -608,8 +607,6 @@ function updateContent(change) {
             }
         }
     }
-
-
 }
 
 /**
@@ -869,3 +866,64 @@ function handleInputControlAttributeUpdate(element, name, value) {
     }
 
 }
+
+
+
+/**
+ * @param {NodeList|HTMLElement|Set<HTMLElement>} elements
+ * @param {Symbol} symbol
+ * @param {object} object
+ * @return {Promise[]}
+ * @license AGPLv3
+ * @since 1.23.0
+ * @memberOf Monster.DOM
+ * @throws {TypeError} elements is not an instance of NodeList, HTMLElement or Set
+ * @throws {TypeError} the context of the function is not an instance of HTMLElement
+ * @throws {TypeError} symbol must be an instance of Symbol
+ */
+function addObjectWithUpdaterToElement (elements,symbol, object) {
+    const self = this;
+    if (!(self instanceof HTMLElement)) {
+        throw new TypeError('the context of this function must be an instance of HTMLElement');
+    }
+    
+    if (!(typeof symbol === 'symbol')) {
+        throw new TypeError('symbol must be an instance of Symbol');
+    }
+
+    const updaters = new Set;
+
+    if (elements instanceof NodeList) {
+        elements = new Set([
+            ...elements
+        ])
+    } else if (elements instanceof HTMLElement) {
+        elements = new Set([
+            elements
+        ])
+    } else if (elements instanceof Set) {
+    } else {
+        throw new TypeError('elements is not a valid type. (actual: ' + typeof elements + ')');
+    }
+
+    let result = [];
+
+    elements.forEach((element) => {
+        if (!(element instanceof HTMLElement)) return;
+        if ((element instanceof HTMLTemplateElement)) return;
+
+        const u = new Updater(element, object)
+        updaters.add(u);
+
+        result.push(u.run().then(() => {
+            return u.enableEventProcessing();
+        }));
+
+    });
+
+    if (updaters.size > 0) {
+        addToObjectLink(self, symbol, updaters);
+    }
+
+    return result;
+}

package/source/monster.mjs

@@ -99,7 +99,6 @@ export {
     assembleMethodSymbol,
     attributeObserverSymbol,
     registerCustomElement,
-    assignUpdaterToElement,
     getSlottedElements
 } from "./dom/customelement.mjs"
 export {

package/source/types/version.mjs

@@ -149,7 +149,7 @@ function getMonsterVersion() {
     }
 
     /** don't touch, replaced by make with package.json version */
-    monsterVersion = new Version('2.2.1')
+    monsterVersion = new Version('3.0.0')
 
     return monsterVersion;
 

package/test/cases/dom/customelement.mjs

@@ -2,8 +2,10 @@
 
 import chai from "chai"
 import {internalSymbol} from "../../../../application/source/constants.mjs";
-import {ATTRIBUTE_OPTIONS} from "../../../../application/source/dom/constants.mjs";
+import {ATTRIBUTE_OPTIONS, customElementUpdaterLinkSymbol} from "../../../../application/source/dom/constants.mjs";
 import {getDocument} from "../../../../application/source/dom/util.mjs";
+import {ProxyObserver} from "../../../../application/source/types/proxyobserver.mjs";
+import {addObjectWithUpdaterToElement} from "../../../../application/source/dom/updater.mjs";
 import {chaiDom} from "../../util/chai-dom.mjs";
 import {initJSDOM} from "../../util/jsdom.mjs";
 
@@ -16,10 +18,164 @@ let html1 = `
     </div>
 `;
 
+let html2 = `
+    <input data-monster-bind="path:a" id="test2" data-monster-attributes="value path:a">
+`;
+
+// defined in constants.mjs
+const updaterSymbolKey = "@schukai/monster/dom/custom-element@@options-updater-link"
+const updaterSymbolSymbol = Symbol.for(updaterSymbolKey);
+
+
 
 describe('DOM', function () {
 
-    let CustomElement, registerCustomElement, TestComponent, document, TestComponent2;
+    let CustomElement, registerCustomElement, TestComponent, document, TestComponent2,assignUpdaterToElement;
+
+    // This allows us to inspect the addEventListener calls
+    
+    // let addEventListener = EventTarget.prototype.addEventListener;
+    // let removeEventListener = EventTarget.prototype.removeEventListener;
+    //
+    // before(function (done) {
+    //     initJSDOM().then(() => {
+    //
+    //         EventTarget.prototype.addEventListener = function (type, callback, options) {
+    //             /* store args and then… */
+    //             // callback = (e) => {
+    //             //     console.log("event fired" + e);
+    //             //     callback(e);
+    //             // };
+    //
+    //             addEventListener.call(this, type, callback, options);
+    //         };
+    //
+    //         EventTarget.prototype.removeEventListener = function (type, callback, options) {
+    //             /* remove from stored args and then… */
+    //             removeEventListener.call(this, type, callback, options);
+    //         };
+    //
+    //         done(e);
+    //
+    //
+    //     });
+    //
+    //    
+    // })
+    //
+    // after(function () {
+    //     EventTarget.prototype.addEventListener = addEventListener;
+    //     EventTarget.prototype.removeEventListener = removeEventListener;
+    // });
+
+
+    describe("assignUpdaterToElement", function () {
+
+        before(function (done) {
+            initJSDOM().then(() => {
+                import("../../../../application/source/dom/customelement.mjs").then((m) => {
+                    try {
+                        CustomElement = m['CustomElement'];
+                        assignUpdaterToElement= function (elements, object) {
+                            return addObjectWithUpdaterToElement.call(this, elements, updaterSymbolSymbol, object);
+                        }
+                        
+                        
+                        document = getDocument();
+
+                        done()
+                    } catch (e) {
+                        done(e);
+                    }
+
+
+                });
+
+            });
+        })
+
+        beforeEach(() => {
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = html2;
+        })
+
+        afterEach(() => {
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = "";
+        })
+
+        /**
+         * this test try to simulate the bug that was found in the assignUpdaterToElement function.
+         * The bug was that the updater was not assigned to the element when the element was created.
+         * 
+         * unfortunately, this test does not reproduce the bug.
+         */
+        it("should assign an updater to an element", function (done) {
+            let element = document.getElementById('test2');
+
+            expect(document.getElementById("mocks").innerHTML).to.equal(html2);
+
+            const a = {a: 1};
+            const b = {b: 2};
+
+            const ap = new ProxyObserver(a);
+            const bp = new ProxyObserver(b);
+
+            const x = ap.getSubject()
+            const y = bp.getSubject()
+
+            const set = new Set();
+            set.add(element);
+
+            assignUpdaterToElement.call(element, set, ap);
+            assignUpdaterToElement.call(element, set, bp);
+
+            expect(JSON.stringify(x)).to.equal('{"a":1}');
+            expect(JSON.stringify(y)).to.equal('{"b":2}');
+
+            const sy = updaterSymbolSymbol;
+            
+            let v = element.getAttribute("data-monster-objectlink");
+            expect(v).to.equal('Symbol('+updaterSymbolKey+')');
+
+            const updater = element[sy];
+
+            for (const v of updater) {
+                for (const u of v) {
+                    u.run().then(() => {
+                        u.enableEventProcessing();
+                    });
+                }
+            }
+
+            expect(updater).to.be.an.instanceof(Set);
+            expect(updater).to.be.a("Set");
+
+            x.a = 3;
+            bp.getSubject().b = 4;
+
+            setTimeout(() => {
+
+                let mockHTML = document.getElementById("mocks");
+
+                // html expexted:
+                // <input data-monster-bind="path:a" id="test2" data-monster-attributes="value path:a" data-monster-objectlink="Symbol(@schukai/monster/dom/@@object-updater-link)" value="3">
+
+                expect(mockHTML.querySelector("#test2")).to.have.value('3')
+                expect(mockHTML.querySelector("#test2")).to.have.attribute('data-monster-objectlink', 'Symbol('+updaterSymbolKey+')')
+                //expect(mockHTML).to.have.html(resultHTML);
+
+                expect(element.value).to.equal("3");
+
+                expect(JSON.stringify(ap.getRealSubject())).to.equal('{"a":3}');
+                expect(JSON.stringify(bp.getRealSubject())).to.equal('{"b":4}');
+                done()
+            }, 10)
+
+        })
+
+    })
+
 
     describe('CustomElement()', function () {
 
@@ -102,7 +258,7 @@ describe('DOM', function () {
 
                 let monster = document.getElementById('thisisatest');
                 expect(monster.getOption('demotest')).is.eql(1425);
-                
+
             });
         });
 
@@ -133,7 +289,7 @@ describe('DOM', function () {
                     try {
                         expect(document.getElementsByTagName('monster-testclass2').length).is.equal(1);
                         expect(document.getElementsByTagName('monster-testclass2').item(0).shadowRoot.innerHTML).is.equal('<h1></h1><article><p>test</p><div id="container"></div></article>');
-                        expect(document.getElementById('test1')).contain.html('<monster-testclass2 data-monster-objectlink="Symbol(@schukai/monster/dom/@@object-updater-link)"></monster-testclass2>');
+                        expect(document.getElementById('test1')).contain.html('<monster-testclass2 data-monster-objectlink="Symbol('+updaterSymbolKey+')"></monster-testclass2>');
                         return done();
                     } catch (e) {
                         done(e);
@@ -514,6 +670,4 @@ describe('DOM', function () {
         })
 
     });
-});
-
-
+})

package/test/cases/monster.mjs

@@ -7,7 +7,7 @@ describe('Monster', function () {
         let monsterVersion
 
         /** don´t touch, replaced by make with package.json version */
-        monsterVersion = new Version('2.2.1')
+        monsterVersion = new Version('3.0.0')
 
         let m = getMonsterVersion();
 

package/test/util/jsdom.mjs

@@ -54,6 +54,7 @@ function initJSDOM(options) {
                     'Document',
                     'Node',
                     'ShadowRoot',
+                    'EventTarget',
                     'Event',
                     'CustomEvent',
                     'Element',
@@ -62,6 +63,7 @@ function initJSDOM(options) {
                     'customElements',
                     'DocumentFragment',
                     'DOMParser',
+                    'KeyboardEvent',
                     'CSSStyleSheet',
                     'HTMLScriptElement',
                     'MutationObserver',

package/test/web/import.js

@@ -14,6 +14,7 @@ import "../cases/dom/updater.mjs";
 import "../cases/dom/customcontrol.mjs";
 import "../cases/dom/locale.mjs";
 import "../cases/dom/theme.mjs";
+import "../cases/dom/resource.mjs";
 import "../cases/dom/resourcemanager.mjs";
 import "../cases/dom/util.mjs";
 import "../cases/dom/customelement.mjs";
@@ -58,6 +59,7 @@ import "../cases/constraint/invalid.mjs";
 import "../cases/constraint/andoperator.mjs";
 import "../cases/constraint/oroperator.mjs";
 import "../cases/constraint/isarray.mjs";
+import "../cases/constraint/abstractoperator.mjs";
 import "../cases/constraint/valid.mjs";
 import "../cases/util/trimspaces.mjs";
 import "../cases/util/deadmansswitch.mjs";

package/test/web/test.html

@@ -5,7 +5,7 @@
     <title>Mocha Monster</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <link rel="stylesheet" href="mocha.css"/>
-   <script id="polyfill" src="https://polyfill.io/v3/polyfill.min.js?features=Array.from,Array.isArray,Array.prototype.entries,Array.prototype.fill,Array.prototype.filter,Array.prototype.forEach,Array.prototype.indexOf,Array.prototype.keys,Array.prototype.lastIndexOf,Array.prototype.map,Array.prototype.reduce,Array.prototype.sort,ArrayBuffer,atob,CustomEvent,DataView,document,Document,DocumentFragment,Element,Event,fetch,globalThis,HTMLDocument,HTMLTemplateElement,Intl,JSON,Map,Math.log2,Number.isInteger,Object.assign,Object.defineProperty,Object.entries,Object.freeze,Object.getOwnPropertyDescriptor,Object.getOwnPropertyNames,Object.getOwnPropertySymbols,Object.getPrototypeOf,Object.keys,Promise,Reflect,Reflect.defineProperty,Reflect.get,Reflect.getOwnPropertyDescriptor,Reflect.setPrototypeOf,Set,String.prototype.endsWith,String.prototype.matchAll,String.prototype.padStart,String.prototype.startsWith,String.prototype.trim,Symbol,Symbol.for,Symbol.hasInstance,Symbol.iterator,Uint16Array,Uint8Array,URL,WeakMap,WeakSet"
+   <script id="polyfill" src="https://polyfill.io/v3/polyfill.min.js?features=Array.from,Array.isArray,Array.prototype.entries,Array.prototype.fill,Array.prototype.filter,Array.prototype.forEach,Array.prototype.indexOf,Array.prototype.keys,Array.prototype.lastIndexOf,Array.prototype.map,Array.prototype.reduce,Array.prototype.sort,ArrayBuffer,atob,CustomEvent,DataView,document,Document,DocumentFragment,Element,Event,fetch,globalThis,HTMLDocument,HTMLTemplateElement,Intl,JSON,Map,Math.log2,Number.isInteger,Object.assign,Object.defineProperty,Object.entries,Object.freeze,Object.getOwnPropertyDescriptor,Object.getOwnPropertyNames,Object.getPrototypeOf,Object.keys,Promise,Reflect,Reflect.defineProperty,Reflect.get,Reflect.getOwnPropertyDescriptor,Reflect.setPrototypeOf,Set,String.prototype.endsWith,String.prototype.matchAll,String.prototype.padStart,String.prototype.startsWith,String.prototype.trim,Symbol,Symbol.for,Symbol.hasInstance,Symbol.iterator,Uint16Array,Uint8Array,URL,WeakMap,WeakSet"
             src="https://polyfill.io/v3/polyfill.min.js?features=Array.from,Array.isArray,Array.prototype.entries,Array.prototype.fill,Array.prototype.forEach,Array.prototype.indexOf,Array.prototype.keys,Array.prototype.lastIndexOf,Array.prototype.map,Array.prototype.reduce,Array.prototype.sort,ArrayBuffer,atob,DataView,document,DocumentFragment,Element,Event,globalThis,HTMLDocument,HTMLTemplateElement,JSON,Map,Math.log2,Number.isInteger,Object.assign,Object.defineProperty,Object.entries,Object.getOwnPropertyDescriptor,Object.getPrototypeOf,Object.keys,Promise,Reflect,Reflect.defineProperty,Reflect.get,Reflect.getOwnPropertyDescriptor,Reflect.setPrototypeOf,Set,String.prototype.endsWith,String.prototype.matchAll,String.prototype.padStart,String.prototype.startsWith,String.prototype.trim,Symbol,Symbol.iterator,WeakMap,WeakSet"
             crossorigin="anonymous"
             referrerpolicy="no-referrer"></script>
@@ -14,8 +14,8 @@
 </head>
 <body>
 <div id="headline" style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
-  <h1 style='margin-bottom: 0.1em;'>Monster 2.0.16</h1>
-  <div id="lastupdate" style='font-size:0.7em'>last update Do 29. Dez 14:29:19 CET 2022</div>
+  <h1 style='margin-bottom: 0.1em;'>Monster 2.2.1</h1>
+  <div id="lastupdate" style='font-size:0.7em'>last update Mi 4. Jan 15:51:44 CET 2023</div>
 </div>
 <div id="mocks"></div>
 <div id="mocha"></div>