@schukai/monster 2.2.1 → 3.1.0

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/queue.mjs

@@ -7,11 +7,18 @@
 
 import {Base} from './base.mjs';
 import {instanceSymbol} from '../constants.mjs';
+
 export {Queue}
 
 /**
- * You can create the instance via the monster namespace `new Monster.Types.Queue()`.
- *
+ * A queue is a list of items that are processed one after another (first in, first out).
+ * 
+ * With a queue you can add items to the end of the list `Queue.add()` and remove items from the beginning of the list `Queue.pop()`.
+ * 
+ * With `Queue.peek()` you can get the first item without removing it from the list.
+ * 
+ * You can create the instance via `new Queue()`.
+ * 
  * @externalExample ../../example/types/queue.mjs
  * @license AGPLv3
  * @since 1.4.0

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.1.0')
 
     return monsterVersion;
 

package/test/cases/data/datasource/websocket.mjs

@@ -0,0 +1,96 @@
+import {expect} from "chai"
+import {WebSocketDatasource} from "../../../../../application/source/data/datasource/websocket.mjs";
+import {initWebSocket} from "../../../util/websocket.mjs";
+
+const testUrl = "wss://ws.postman-echo.com/raw"
+
+// const g = getGlobal();
+// g['WebSocket'] = WS;
+
+
+describe('Websocket', function () {
+
+    let ds = undefined
+
+    before(function (done) {
+        initWebSocket().then(() => {
+            done()
+        }).catch((e) => {
+            done(e)
+        })
+    });
+
+    afterEach(function (done) {
+        if (ds) {
+            ds.close()
+        }
+        
+        // without this, the node test will hang 
+        for (const sym of Object.getOwnPropertySymbols(ds)) {
+            if (sym.toString() ==='Symbol(connection)') {
+                if(ds[sym]?.socket?.['terminate']) {
+                    ds[sym]?.socket?.['terminate']()
+                }
+            }
+        }
+        
+        done()
+    });
+
+    it('should connect', function (done) {
+        ds = new WebSocketDatasource({
+            url: testUrl,
+            reconnect: {
+                enabled: false
+            }
+        });
+        ds.connect()
+        setTimeout(() => {
+            expect(ds.isConnected()).to.be.true;
+            done();
+        }, 500);
+
+
+    })
+
+    it('should send message', function (done) {
+        ds = new WebSocketDatasource({
+            url: testUrl,
+            reconnect: {
+                enabled: false
+            }
+        });
+        ds.connect()
+
+        ds.set({
+            data: {
+                message: "Hello World"
+            }
+        })
+
+        setTimeout(() => {
+
+            ds.write().then(() => {
+
+                ds.set({})
+                expect(ds.get()).to.be.deep.equal({});
+
+
+                setTimeout(() => {
+
+                    expect(ds.get()).to.be.deep.equal({
+                        data: {
+                            message: "Hello World"
+                        }
+                    });
+                    done();
+                }, 1000);
+            }).catch((err) => {
+                done(new Error(err));
+            })
+        }, 1000)
+
+
+    }).timeout(10000);
+
+});

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.1.0')
 
         let m = getMonsterVersion();
 

package/test/cases/util/deadmansswitch.mjs

@@ -9,7 +9,7 @@ describe('DeadMansSwitch', function () {
 
             const ms1 =  Date.now();
 
-            const deadmansswitch = new DeadMansSwitch(100, () => {
+            new DeadMansSwitch(100, () => {
 
                 const ms2 =  Date.now();
 
@@ -38,12 +38,12 @@ describe('DeadMansSwitch', function () {
                 const diff = ms2 - ms1;
 
                 if (ms1 > ms2) {
-                    done('timing error');
+                    done(new Error('timing error'));
                     return;
                 }
 
                 if (diff < 600) {
-                    done('to short ' + diff);
+                    done(new Error('to short ' + diff));
                     return;
                 }
                 done();

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/util/websocket.mjs

@@ -0,0 +1,22 @@
+import {getGlobal} from "../../../application/source/types/global.mjs";
+
+function initWebSocket() {
+    if (typeof window === "object" && window['WebSocket']) return Promise.resolve();
+
+    return import("ws").then((ws) => {
+        getGlobal().WebSocket = class extends ws['WebSocket'] {
+            constructor(url, protocols) {
+                super(url, protocols, {
+                    handshakeTimeout: 1000,
+                    maxPayload: 1024 * 1024 * 1024,
+                });
+                
+            }
+        };
+        
+    });
+
+
+}
+
+export {initWebSocket}

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";
@@ -76,4 +78,5 @@ import "../cases/data/diff.mjs";
 import "../cases/data/datasource/restapi.mjs";
 import "../cases/data/datasource/storage/sessionstorage.mjs";
 import "../cases/data/datasource/storage/localstorage.mjs";
+import "../cases/data/datasource/webservice.mjs";
 import "../cases/math/random.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 3.0.0</h1>
+  <div id="lastupdate" style='font-size:0.7em'>last update Fr 6. Jan 12:54:47 CET 2023</div>
 </div>
 <div id="mocks"></div>
 <div id="mocha"></div>