CHANGELOG.md

 
+<a name="v3.1.0"></a>
+## [v3.1.0] - 2023-01-06
+### Add Features
+- new websocket datasource
+
+### Bug Fixes
+- return error in test
+- missing callbacks
+
+### Changes
+- tests
+- administration changes
+- doc
+- remove unused import
+- doc + tidy
+
+
 <a name="v3.0.0"></a>
 ## [v3.0.0] - 2023-01-04
 ### Changes
@@ -113,6 +130,7 @@
 <a name="1.8.0"></a>
 ## 1.8.0 - 2021-08-15
 
+[v3.1.0]: https://gitlab.schukai.com/oss/libraries/javascript/monster/compare/v3.0.0...v3.1.0
 [v3.0.0]: https://gitlab.schukai.com/oss/libraries/javascript/monster/compare/v2.2.1...v3.0.0
 [v2.2.1]: https://gitlab.schukai.com/oss/libraries/javascript/monster/compare/v2.2.0...v2.2.1
 [v2.2.0]: https://gitlab.schukai.com/oss/libraries/javascript/monster/compare/v2.1.1...v2.2.0

application/package.json

 {
   "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",

application/source/data/datasource.mjs

@@ -17,6 +17,18 @@ import {Pathfinder} from "./pathfinder.mjs";
 
 export {Datasource}
 
+
+/**
+ * This callback can be passed to a datasource and is used to adapt data structures.
+ *
+ * @callback Monster.Data.Datasource~exampleCallback
+ * @param {*} value Value
+ * @param {string} key  Key
+ * @memberOf Monster.Data
+ * @see Monster.Data.Datasource
+ */
+
+
 /**
  * @private
  * @type {symbol}

application/source/data/datasource/restapi.mjs

@@ -22,7 +22,7 @@ export {RestAPI}
  * @since 1.22.0
  * @copyright schukai GmbH
  * @memberOf Monster.Data.Datasource
- * @summary The LocalStorage class encapsulates the access to data objects.
+ * @summary The RestAPI is a class that binds a REST API server.
  */
 class RestAPI extends Datasource {
 
@@ -30,7 +30,6 @@ class RestAPI extends Datasource {
      *
      * @param {Object} [readDefinition] An options object containing any custom settings that you want to apply to the read request.
      * @param {Object} [writeDefinition] An options object containing any custom settings that you want to apply to the write request.
-     * @throws {TypeError} value is not a string
      */
     constructor(readDefinition, writeDefinition) {
         super();
@@ -54,17 +53,21 @@ class RestAPI extends Datasource {
     }    
     
     /**
-     * @property {string} url=undefined Defines the resource that you wish to fetch.
      * @property {Object} write={} Options
      * @property {Object} write.init={} An options object containing any custom settings that you want to apply to the request. The parameters are identical to those of the {@link https://developer.mozilla.org/en-US/docs/Web/API/Request/Request|Request constructor}
      * @property {string} write.init.method=POST
+     * @property {Object} write.init.headers Object containing any custom headers that you want to apply to the request.
      * @property {string} write.acceptedStatus=[200,201]
      * @property {string} write.url URL
      * @property {Object} write.mapping the mapping is applied before writing.
      * @property {String} write.mapping.transformer Transformer to select the appropriate entries
+     * @property {Monster.Data.Datasource~exampleCallback[]} write.mapping.callback with the help of the callback, the structures can be adjusted before writing.
      * @property {Object} write.report
      * @property {String} write.report.path Path to validations
-     * @property {Monster.Data.Datasource~exampleCallback[]} write.mapping.callback with the help of the callback, the structures can be adjusted before writing.
+     * @property {Object} write.sheathing 
+     * @property {Object} write.sheathing.object Object to be wrapped
+     * @property {string} write.sheathing.path Path to the data 
+     * @property {Object} read={} Options
      * @property {Object} read.init={} An options object containing any custom settings that you want to apply to the request. The parameters are identical to those of the {@link https://developer.mozilla.org/en-US/docs/Web/API/Request/Request|Request constructor}
      * @property {string} read.init.method=GET
      * @property {string} read.acceptedStatus=[200]
@@ -85,6 +88,10 @@ class RestAPI extends Datasource {
                     transformer: undefined,
                     callbacks: []
                 },
+                sheathing: {
+                    object: undefined,
+                    path: undefined,
+                },
                 report: {
                     path: undefined
                 }
@@ -146,6 +153,11 @@ class RestAPI extends Datasource {
             let transformation = self.getOption('read.mapping.transformer');
             if (transformation !== undefined) {
                 const pipe = new Pipe(transformation);
+
+                for (const callback of self.getOption('read.mapping.callbacks')) {
+                    pipe.setCallback(callback.constructor.name, callback);
+                }                
+                
                 obj = pipe.run(obj);
             }
 
@@ -174,6 +186,11 @@ class RestAPI extends Datasource {
         let transformation = self.getOption('write.mapping.transformer');
         if (transformation !== undefined) {
             const pipe = new Pipe(transformation);
+
+            for (const callback of self.getOption('write.mapping.callbacks')) {
+                pipe.setCallback(callback.constructor.name, callback);
+            }
+            
             obj = pipe.run(obj);
         }
 
@@ -234,12 +251,3 @@ class RestAPI extends Datasource {
 }
 
 
-/**
- * This callback can be passed to a datasource and is used to adapt data structures.
- *
- * @callback Monster.Data.Datasource~exampleCallback
- * @param {*} value Value
- * @param {string} key  Key
- * @memberOf Monster.Data
- * @see Monster.Data.Datasource
- */

application/source/data/datasource/websocket.mjs

+/**
+ * Copyright schukai GmbH and contributors 2022. All Rights Reserved.
+ * Node module: @schukai/monster
+ * This file is licensed under the AGPLv3 License.
+ * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
+ */
+
+import {internalSymbol, instanceSymbol} from "../../constants.mjs";
+import {isInteger, isString, isObject} from "../../types/is.mjs";
+import {Queue} from "../../types/queue.mjs";
+import {Datasource} from "../datasource.mjs";
+import {Pathfinder} from "../pathfinder.mjs";
+import {Pipe} from "../pipe.mjs";
+
+export {WebSocketDatasource}
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const receiveQueueSymbol = Symbol("queue");
+
+
+/**
+ * @private
+ * @type {symbol}
+ * 
+ * hint: this name is used in the tests. if you want to change it, please change it in the tests as well.
+ */
+const connectionSymbol = Symbol("connection");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const manualCloseSymbol = Symbol("manualClose");
+
+/**
+ * @see https://www.rfc-editor.org/rfc/rfc6455.html#section-7.4.1
+ * @type {{"1000": string, "1011": string, "1010": string, "1008": string, "1007": string, "1006": string, "1005": string, "1004": string, "1015": string, "1003": string, "1002": string, "1001": string, "1009": string}}
+ */
+const connectionStatusCode = {
+    1000: "Normal closure",
+    1001: "Going away",
+    1002: "Protocol error",
+    1003: "Unsupported data",
+    1004: "Reserved",
+    1005: "No status code",
+    1006: "Connection closed abnormally",
+    1007: "Invalid frame payload data",
+    1008: "Policy violation",
+    1009: "Message too big",
+    1010: "Mandatory extension",
+    1011: "Internal server error",
+    1015: "TLS handshake"
+};
+
+/**
+ * The RestAPI is a class that enables a REST API server.
+ *
+ * @externalExample ../../../example/data/storage/restapi.mjs
+ * @license AGPLv3
+ * @since 3.1.0
+ * @copyright schukai GmbH
+ * @memberOf Monster.Data.Datasource
+ * @summary The LocalStorage class encapsulates the access to data objects.
+ */
+class WebSocketDatasource extends Datasource {
+
+    /**
+     *
+     * @param {Object} [options] options contains definitions for the datasource.
+     */
+    constructor(options) {
+        super();
+
+        if (isString(options)) {
+            options = {url: options};
+        }
+
+        if (!isObject(options)) options = {};
+        this.setOptions(options);
+        this[receiveQueueSymbol] = new Queue();
+
+        this[connectionSymbol] = {};
+        this[connectionSymbol].socket = null;
+        this[connectionSymbol].reconnectCounter = 0;
+        this[manualCloseSymbol]=false;
+    }
+
+    /**
+     *
+     * @returns {Websocketdatasource}
+     * @throws {Error} No url defined for websocket datasource.
+     */
+    connect() {
+        const self = this;
+
+        let connected = false;
+        let reconnectTimeout = self.getOption('reconnect.timeout');
+        if (!isInteger(reconnectTimeout) || reconnectTimeout < 1000) reconnectTimeout = 1000;
+        let reconnectAttempts = self.getOption('reconnect.attempts');
+        if (!isInteger(reconnectAttempts) || reconnectAttempts < 1) reconnectAttempts = 1;
+        let reconnectEnabled = self.getOption('reconnect.enabled');
+        if (reconnectEnabled !== true) reconnectEnabled = false;
+
+        self[manualCloseSymbol] = false;
+        self[connectionSymbol].reconnectCounter++;
+
+        if (self[connectionSymbol].socket && self[connectionSymbol].socket.readyState < 2) {
+            self[connectionSymbol].socket.close();
+        }
+        self[connectionSymbol].socket = null;
+
+        const url = self.getOption('url');
+        if (!url) throw new Error('No url defined for websocket datasource.');
+
+        self[connectionSymbol].socket = new WebSocket(url);
+
+        self[connectionSymbol].socket.onmessage = function (event) {
+            self[receiveQueueSymbol].add(event);
+            setTimeout(function () {
+                self.read();
+            }, 0);
+        };
+
+        self[connectionSymbol].socket.onopen = function () {
+            connected = true;
+            self[connectionSymbol].reconnectCounter = 0;
+        };
+
+        self[connectionSymbol].socket.close = function (event) {
+            
+            if (self[manualCloseSymbol]) {
+                self[manualCloseSymbol] = false;
+                return;
+            }
+
+            if (reconnectEnabled && this[connectionSymbol].reconnectCounter < reconnectAttempts) {
+                setTimeout(() => {
+                    self.connect();
+                }, reconnectTimeout * this[connectionSymbol].reconnectCounter);
+            }
+
+        };
+
+        self[connectionSymbol].socket.onerror = (error) => {
+
+            if (reconnectEnabled && self[connectionSymbol].reconnectCounter < reconnectAttempts) {
+                setTimeout(() => {
+                    self.connect();
+                }, reconnectTimeout * this[connectionSymbol].reconnectCounter);
+            }
+
+        };
+    }
+
+    isConnected() {
+        return this[connectionSymbol].socket && this[connectionSymbol].socket.readyState === 1;
+    }
+
+    /**
+     * This method is called by the `instanceof` operator.
+     * @returns {symbol}
+     */
+    static get [instanceSymbol]() {
+        return Symbol.for("@schukai/monster/data/datasource/websocket");
+    }
+
+    /**
+     * @property {string} url=undefined Defines the resource that you wish to fetch.
+     * @property {Number} reconnect.timeout The timeout in milliseconds for the reconnect.
+     * @property {Number} reconnect.attempts The maximum number of reconnects.
+     * @property {Bool} reconnect.enabled If the reconnect is enabled.
+     * @property {Object} write={} Options
+     * @property {Object} write.mapping the mapping is applied before writing.
+     * @property {String} write.mapping.transformer Transformer to select the appropriate entries
+     * @property {Monster.Data.Datasource~exampleCallback[]} write.mapping.callback with the help of the callback, the structures can be adjusted before writing.
+     * @property {Object} write.report
+     * @property {String} write.report.path Path to validations
+     * @property {Object} write.sheathing
+     * @property {Object} write.sheathing.object Object to be wrapped
+     * @property {string} write.sheathing.path Path to the data
+     * @property {Object} read={} Options
+     * @property {Object} read.mapping the mapping is applied after reading.
+     * @property {String} read.mapping.transformer Transformer to select the appropriate entries
+     * @property {Monster.Data.Datasource~exampleCallback[]} read.mapping.callback with the help of the callback, the structures can be adjusted after reading.
+     */
+    get defaults() {
+        return Object.assign({}, super.defaults, {
+            url: undefined,
+            write: {
+                mapping: {
+                    transformer: undefined,
+                    callbacks: []
+                },
+                report: {
+                    path: undefined
+                },
+                sheathing: {
+                    object: undefined,
+                    path: undefined,
+                },
+            },
+            read: {
+                mapping: {
+                    transformer: undefined,
+                    callbacks: []
+                },
+            },
+            reconnect: {
+                timeout: 1000,
+                attempts: 10,
+                enabled: true
+            }
+        });
+    }
+
+    /**
+     * This method closes the connection.
+     * 
+     * @returns {Promise}
+     */
+    close() {
+        this[manualCloseSymbol]=true;
+        if (this[connectionSymbol].socket) {
+            this[connectionSymbol].socket.close();
+        }
+        return this;
+    }
+
+    /**
+     * @return {Promise}
+     * @throws {Error} the options does not contain a valid json definition
+     * @throws {Error} the data cannot be read
+     * @throws {TypeError} value is not an object
+     */
+    read() {
+        const self = this;
+        let response;
+
+        return new Promise((resolve, reject) => {
+            if (self[receiveQueueSymbol].isEmpty()) {
+                resolve();
+            }
+
+            while (!self[receiveQueueSymbol].isEmpty()) {
+                
+                const event = self[receiveQueueSymbol].poll();
+                const body = event?.data;
+                if (!body) continue;
+
+                let obj;
+                try {
+                    obj = JSON.parse(body);
+                } catch (e) {
+
+                    let msg = 'the response does not contain a valid json (actual: ';
+
+                    if (body.length > 100) {
+                        msg += body.substring(0, 97) + '...';
+                    } else {
+                        msg += body;
+                    }
+
+                    msg += "; " + e.message + ')';
+
+                    reject(msg);
+                }
+
+                let transformation = self.getOption('read.mapping.transformer');
+                if (transformation !== undefined) {
+                    const pipe = new Pipe(transformation);
+
+                    for (const callback of self.getOption('read.mapping.callbacks')) {
+                        pipe.setCallback(callback.constructor.name, callback);
+                    }
+
+                    obj = pipe.run(obj);
+                }
+
+                self.set(obj);
+                return response;
+            }
+        })
+    }
+
+    /**
+     * @return {Promise}
+     */
+    write() {
+        const self = this;
+
+        let obj = self.get();
+        let transformation = self.getOption('write.mapping.transformer');
+        if (transformation !== undefined) {
+            const pipe = new Pipe(transformation);
+
+            for (const callback of self.getOption('write.mapping.callbacks')) {
+                pipe.setCallback(callback.constructor.name, callback);
+            }
+
+            obj = pipe.run(obj);
+        }
+
+        let sheathingObject = self.getOption('write.sheathing.object');
+        let sheathingPath = self.getOption('write.sheathing.path');
+        let reportPath = self.getOption('write.report.path');
+
+        if (sheathingObject && sheathingPath) {
+            const sub = obj;
+            obj = sheathingObject;
+            (new Pathfinder(obj)).setVia(sheathingPath, sub);
+        }
+
+        return new Promise((resolve, reject) => {
+            
+            if (self[connectionSymbol].socket.readyState !== 1) {
+                reject('the socket is not ready');
+            }
+
+            self[connectionSymbol].socket.send(JSON.stringify(obj))
+            resolve();
+        });
+    }
+
+
+    /**
+     * @return {RestAPI}
+     */
+    getClone() {
+        const self = this;
+        return new Websocketdatasource(self[internalSymbol].getRealSubject()['options']);
+    }
+
+}
+

application/source/dom/customelement.mjs

@@ -16,7 +16,7 @@ import {Observer} from "../types/observer.mjs";
 import {ProxyObserver} from "../types/proxyobserver.mjs";
 import {validateFunction, validateInstance, validateObject, validateString} from "../types/validate.mjs";
 import {clone} from "../util/clone.mjs";
-import {addAttributeToken, addToObjectLink, getLinkedObjects, hasObjectLink} from "./attributes.mjs";
+import {addAttributeToken, getLinkedObjects, hasObjectLink} from "./attributes.mjs";
 import {
     ATTRIBUTE_DISABLED,
     ATTRIBUTE_ERRORMESSAGE,
@@ -468,7 +468,6 @@ class CustomElement extends HTMLElement {
         }
 
         addObjectWithUpdaterToElement.call(self, nodeList, customElementUpdaterLinkSymbol, clone(self[internalSymbol].getRealSubject()['options']))
-        //assignUpdaterToElement.call(self, nodeList, clone(self[internalSymbol].getRealSubject()['options']));
         return self;
     }
 

application/source/types/queue.mjs

@@ -7,10 +7,17 @@
 
 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

application/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;
 

development/makefiles/project.mk

@@ -19,7 +19,7 @@ test-browser-monster: create-polyfill-monster
 	$(QUIET) $(SED) -i 's|$$|";|' $(TEST_PATH)web/import.js 
 	$(QUIET) $(SED) -i "1 i import \"./prepare.js\";"  $(TEST_PATH)web/import.js
 	$(QUIET) $(SED) -i "1 i /** this file was created automatically by the make target test-browser-monster */"  $(TEST_PATH)web/import.js
-	$(ESBUILD) --platform=browser --sourcemap=inline --external:jsdom --external:process --external:crypto --bundle $(TEST_PATH)web/import.js --outfile=$(TEST_PATH)web/tests.js
+	$(ESBUILD) --platform=browser --sourcemap=inline --external:ws --external:jsdom --external:process --external:crypto --bundle $(TEST_PATH)web/import.js --outfile=$(TEST_PATH)web/tests.js
 #	$(QUIET) $(CD) $(MONSTER_BUILD_TEST_BROWSER_DIR); $(WEBPACK) ; $(CD) - 
 #	$(QUIET) $(SED) -i -E "/<h1/s_.*_  <h1 style='margin-bottom: 0.1em;'>Monster $(PROJECT_VERSION)</h1>_" $(TEST_PATH)web/test.html $(TEST_PATH)web/monster.html $(TEST_PATH)web/monster-dev.html 
 #	$(QUIET) $(SED) -i -E "/id=\"lastupdate\"/s_.*_  <div id=\"lastupdate\" style='font-size:0.7em'>last update $(shell date)</div>_" $(TEST_PATH)web/test.html $(TEST_PATH)web/monster.html $(TEST_PATH)web/monster-dev.html   

development/package.json

 {
   "name": "monster",
-  "version": "2.2.1",
+  "version": "3.0.0",
   "description": "monster",
   "repository": {
     "type": "git",
@@ -39,6 +39,7 @@
     "sinon": "^14.0.2",
     "url": "^0.11.0",
     "url-exist": "3.0.0",
-    "util": "^0.12.5"
+    "util": "^0.12.5",
+    "ws": "^8.11.0"
   }
 }

development/pnpm-lock.yaml

@@ -24,6 +24,7 @@ specifiers:
   url: ^0.11.0
   url-exist: 3.0.0
   util: ^0.12.5
+  ws: ^8.11.0
 
 devDependencies:
   '@peculiar/webcrypto': 1.4.1
@@ -49,6 +50,7 @@ devDependencies:
   url: 0.11.0
   url-exist: 3.0.0
   util: 0.12.5
+  ws: 8.11.0
 
 packages:
 

development/script/web-test.sh

@@ -15,7 +15,7 @@ sed -i 's|$|";|' ${TEST_PATH}web/import.js
 sed -i "1 i import \"./prepare.js\";"  ${TEST_PATH}web/import.js
 sed -i "1 i /** this file was created automatically by the make target test-browser-monster */"  ${TEST_PATH}web/import.js
 
-npx esbuild --platform=browser --sourcemap=inline --external:jsdom --external:process --external:crypto --bundle ${TEST_PATH}web/import.js --outfile=${TEST_PATH}web/tests.js
+npx esbuild --platform=browser --sourcemap=inline --external:ws --external:jsdom --external:process --external:crypto --bundle ${TEST_PATH}web/import.js --outfile=${TEST_PATH}web/tests.js
  
 sed -i -E "/<h1/s_.*_  <h1 style='margin-bottom: 0.1em;'>Monster ${VERSION}</h1>_" ${TEST_PATH}web/test.html 
 sed -i -E "/id=\"lastupdate\"/s_.*_  <div id=\"lastupdate\" style='font-size:0.7em'>last update $(date)</div>_" ${TEST_PATH}web/test.html   

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

+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);
+
+});

development/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();
 

development/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();

development/test/util/websocket.mjs

+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}
\ No newline at end of file

development/test/web/import.js

@@ -78,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";

development/test/web/test.html

@@ -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.2.1</h1>
-  <div id="lastupdate" style='font-size:0.7em'>last update Mi 4. Jan 15:51:44 CET 2023</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>

documentation/tutorial/assets/customelement-interaction.puml

@@ -50,7 +50,7 @@ end
 
 
 
-CustomElement -> CustomElement: assignUpdaterToElement()
+CustomElement -> CustomElement: addObjectWithUpdaterToElement()
 activate CustomElement