@schukai/monster 4.70.1 → 4.70.2

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 
 
+## [4.70.2] - 2026-01-03
+
+### Bug Fixes
+
+- fix tests and select
+### Changes
+
+- update tests
+- update tests
+
+
+
 ## [4.70.1] - 2026-01-03
 
 ### Bug Fixes

package/package.json

@@ -1 +1 @@
-{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.4","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.70.1"}
+{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.4","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.70.2"}

package/source/components/form/select.mjs

@@ -2967,8 +2967,9 @@ function areOptionsAvailableAndInitInternal() {
 	this[areOptionsAvailableAndInitSymbol]++;
 
 	let options = this.getOption("options");
+	const currentOptions = options;
 
-	if (isArray(options) && Array.length === 1 && isString(options?.[0])) {
+	if (isArray(options) && options.length === 1 && isString(options?.[0])) {
 		try {
 			const obj = JSON.parse(options[0]);
 			if (isArray(obj)) {

package/source/types/version.mjs

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

package/test/cases/components/form/select.mjs

@@ -216,6 +216,62 @@ describe('Select', function () {
 
         });
 
+        it('should normalize options without throwing', function (done) {
+            this.timeout(2000);
+
+            let mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+            select.setOption('options', [
+                {label: 'Alpha'},
+                {value: 'Beta'},
+                {}
+            ]);
+            mocks.appendChild(select);
+
+            setTimeout(() => {
+                try {
+                    const options = select.getOption('options');
+                    expect(options[0].value).to.equal('Alpha');
+                    expect(options[0].label).to.equal('Alpha');
+                    expect(options[0].visibility).to.equal('visible');
+                    expect(options[1].value).to.equal('Beta');
+                    expect(options[1].label).to.equal('Beta');
+                    expect(options[1].visibility).to.equal('visible');
+                    expect(options[2].value).to.be.a('string');
+                    expect(options[2].label).to.equal(options[2].value);
+                    expect(options[2].visibility).to.equal('visible');
+                } catch (e) {
+                    return done(e);
+                }
+
+                done();
+            }, 350);
+        });
+
+        it('should not parse options arrays with multiple string entries', function (done) {
+            this.timeout(2000);
+
+            let mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+            select.setOption('options', ['One', 'Two']);
+            mocks.appendChild(select);
+
+            setTimeout(() => {
+                try {
+                    const options = select.getOption('options');
+                    const error = select.getAttribute('data-monster-error') ?? '';
+                    expect(error).to.not.contain('Unexpected token');
+                    expect(options.length).to.equal(2);
+                    expect(options[0]).to.equal('One');
+                    expect(options[1]).to.equal('Two');
+                } catch (e) {
+                    return done(e);
+                }
+
+                done();
+            }, 350);
+        });
+
     });
 
 

package/test/cases/data/datasource/server/restapi.mjs

@@ -8,6 +8,7 @@ describe('RestAPI', function () {
 
     let fetchReference;
     let returnStatus;
+    let responseBody;
 
     afterEach(() => {
         globalThis['fetch'] = fetchReference;
@@ -16,6 +17,7 @@ describe('RestAPI', function () {
     beforeEach(() => {
 
         returnStatus = 200;
+        responseBody = JSON.stringify({a: "test"});
         fetchReference = globalThis['fetch'];
         globalThis['fetch'] = function (options) {
 
@@ -23,9 +25,7 @@ describe('RestAPI', function () {
                 resolve({
                     text: function () {
                         return new Promise((resolve, reject) => {
-                            resolve(JSON.stringify({
-                                a: "test"
-                            }));
+                            resolve(responseBody);
                         });
                     },
                     status: returnStatus
@@ -91,5 +91,42 @@ describe('RestAPI', function () {
 
     })
 
+    describe('read response parsing', function () {
+        it('should reject on invalid json', function (done) {
+            responseBody = "{invalid";
+            const ds = new RestAPI({url: 'https://monsterjs.org/assets/world.json'})
+            ds.read().then(() => {
+                done("should not run.");
+            }).catch(() => done());
+        });
+
+        it('should call responseCallback when provided', function (done) {
+            let called = false;
+            const ds = new RestAPI({
+                read: {
+                    url: 'https://monsterjs.org/assets/world.json',
+                    responseCallback: () => {
+                        called = true;
+                    }
+                }
+            });
+            ds.read().then(() => {
+                expect(called).to.be.true;
+                done();
+            }).catch(e => done(e));
+        });
+    });
+
+    describe('getClone', function () {
+        it('should return an independent clone', function () {
+            const ds = new RestAPI({
+                read: {url: 'https://monsterjs.org/assets/world.json'},
+                write: {url: 'https://monsterjs.org/assets/world.json'}
+            });
+            const clone = ds.getClone();
+            clone.setOption('read.url', 'https://example.com/changed.json');
+            expect(ds.getOption('read.url')).to.equal('https://monsterjs.org/assets/world.json');
+        });
+    });
 
 })

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

@@ -2,11 +2,10 @@ import {expect} from "chai"
 import {WebConnect} from "../../../../../source/data/datasource/server/webconnect.mjs";
 import {initWebSocket} from "../../../../util/websocket.mjs";
 
-const testUrl = "wss://ws.postman-echo.com/raw"
-
 describe('Websocket', function () {
 
     let ds = undefined
+    const testUrl = "ws://mock.local"
 
     before(function (done) {
         initWebSocket().then(() => {

package/test/cases/data/datasource.mjs

@@ -2,6 +2,7 @@
 
 import {expect} from "chai"
 import {Datasource} from "../../../source/data/datasource.mjs";
+import {DataUrl} from "../../../source/types/dataurl.mjs";
 
 
 describe('Datasource', function () {
@@ -26,6 +27,25 @@ describe('Datasource', function () {
             expect(datasource.getOption('default')).to.be.true
         });
 
+        it('setOptions should parse json string', function () {
+            const datasource = new Datasource();
+            datasource.setOptions('{"default":true,"nested":{"flag":1}}');
+            expect(datasource.getOption('default')).to.be.true
+            expect(datasource.getOption('nested.flag')).to.be.equal(1)
+        });
+
+        it('setOptions should parse data url json', function () {
+            const datasource = new Datasource();
+            const dataUrl = new DataUrl('{"default":true}', 'application/json', false).toString();
+            datasource.setOptions(dataUrl);
+            expect(datasource.getOption('default')).to.be.true
+        });
+
+        it('setOptions should throw on invalid json string', function () {
+            const datasource = new Datasource();
+            expect(() => datasource.setOptions('{')).to.throw(Error);
+        });
+
     })
 
     describe('rw', function () {
@@ -57,4 +77,4 @@ describe('Datasource', function () {
     })
 
 
-})
+})

package/test/cases/dom/customelement.mjs

@@ -402,7 +402,10 @@ describe('DOM', function () {
                 div.append(d);
 
 
-                expect(div).contain.html('data-monster-error="value is not an instance of CSSStyleSheet"');
+                const cssName = CSSStyleSheet?.name || "CSSStyleSheet";
+                expect(div).contain.html(
+                    `data-monster-error="value is not an instance of ${cssName}"`,
+                );
                 done();
 
             })

package/test/cases/dom/resource/link/stylesheet.mjs

@@ -54,7 +54,7 @@ describe('Stylesheet', function () {
     describe('External Stylesheet', () => {
 
         let id = new ID('Stylesheet').toString();
-        let stylesheet, url = 'https://alvine.io/main.min.css';
+        let stylesheet, url = new DataUrl('body{color:red;}', 'text/css').toString();
 
         beforeEach(() => {
 
@@ -65,11 +65,20 @@ describe('Stylesheet', function () {
 
         });
 
+        const triggerLoad = () => {
+            const link = document.getElementById(id);
+            if (link) {
+                link.dispatchEvent(new window.Event("load"));
+            }
+        };
+
         it('append and remove Stylesheet ', (done) => {
 
             expect(stylesheet.isConnected()).to.be.false;
 
-            stylesheet.connect().available().then(() => {
+            stylesheet.connect();
+            triggerLoad();
+            stylesheet.available().then(() => {
                 expect(stylesheet.isConnected()).to.be.true;
                 expect(document.querySelector('[href="' + url + '"]')).to.exist;
 
@@ -77,7 +86,9 @@ describe('Stylesheet', function () {
                 expect(stylesheet.isConnected()).to.be.false;
                 expect(document.querySelector('[href="' + url + '"]')).not.to.exist;
 
-                stylesheet.connect().available().then(() => {
+                stylesheet.connect();
+                triggerLoad();
+                stylesheet.available().then(() => {
                     expect(stylesheet.isConnected()).to.be.true;
                     expect(document.querySelector('[href="' + url + '"]')).to.exist;
 
@@ -98,4 +109,4 @@ describe('Stylesheet', function () {
     });
 
 
-});
+});

package/test/cases/dom/resource/link.mjs

@@ -51,7 +51,7 @@ describe('Link', function () {
         this.timeout(5000);
 
         let id = new ID('link').toString();
-        let link, url = 'https://alvine.io/main.min.css';
+        let link, url = new DataUrl('body{color:red;}', 'text/css').toString();
 
         beforeEach(() => {
 
@@ -63,11 +63,20 @@ describe('Link', function () {
 
         });
 
+        const triggerLoad = () => {
+            const node = document.getElementById(id);
+            if (node) {
+                node.dispatchEvent(new window.Event("load"));
+            }
+        };
+
         it('append and remove Link ', (done) => {
 
             expect(link.isConnected()).to.be.false;
 
-            link.connect().available().then(() => {
+            link.connect();
+            triggerLoad();
+            link.available().then(() => {
                 expect(link.isConnected()).to.be.true;
                 expect(document.querySelector('[href="' + url + '"]')).to.exist;
 
@@ -75,7 +84,9 @@ describe('Link', function () {
                 expect(link.isConnected()).to.be.false;
                 expect(document.querySelector('[href="' + url + '"]')).not.to.exist;
 
-                link.connect().available().then(() => {
+                link.connect();
+                triggerLoad();
+                link.available().then(() => {
                     expect(link.isConnected()).to.be.true;
                     expect(document.querySelector('[href="' + url + '"]')).to.exist;
 
@@ -96,4 +107,4 @@ describe('Link', function () {
     });
 
 
-});
+});

package/test/cases/dom/resource/script.mjs

@@ -60,7 +60,7 @@ describe('Script', function () {
     describe('External JS', () => {
 
         let id = new ID('script').toString();
-        let server, script, url = 'https://cdnjs.cloudflare.com/ajax/libs/layzr.js/2.2.2/layzr.min.js';
+        let server, script, url = new DataUrl('console.log(1);', 'text/javascript').toString();
 
         beforeEach(() => {
 
@@ -79,11 +79,20 @@ describe('Script', function () {
 
         });
 
+        const triggerLoad = () => {
+            const node = document.getElementById(id);
+            if (node) {
+                node.dispatchEvent(new window.Event("load"));
+            }
+        };
+
         it('append and remove script ', (done) => {
 
             expect(script.isConnected()).to.be.false;
 
-            script.connect().available().then(() => {
+            script.connect();
+            triggerLoad();
+            script.available().then(() => {
                 expect(script.isConnected()).to.be.true;
                 expect(document.querySelector('[src="' + url + '"]')).to.exist;
 
@@ -91,7 +100,9 @@ describe('Script', function () {
                 expect(script.isConnected()).to.be.false;
                 expect(document.querySelector('[src="' + url + '"]')).not.to.exist;
 
-                script.connect().available().then(() => {
+                script.connect();
+                triggerLoad();
+                script.available().then(() => {
                     expect(script.isConnected()).to.be.true;
                     expect(document.querySelector('[src="' + url + '"]')).to.exist;
 
@@ -112,4 +123,4 @@ describe('Script', function () {
     });
 
 
-});
+});

package/test/cases/dom/updater.mjs

@@ -926,4 +926,33 @@ describe("DOM", function () {
       });
     });
   });
+
+  describe("Updater reactive updates", function () {
+    it("should update the DOM when the subject changes", function (done) {
+      let mocks = document.getElementById("mocks");
+      mocks.innerHTML = html1;
+
+      const element = document.getElementById("test1");
+      const updater = new Updater(element, { a: { b: ["one"] } });
+
+      updater
+        .run()
+        .then(() => {
+          expect(element).contain.html("one");
+
+          const subject = updater.getSubject();
+          subject.a.b = ["two"];
+
+          setTimeout(() => {
+            try {
+              expect(element).contain.html("two");
+              done();
+            } catch (e) {
+              done(e);
+            }
+          }, 50);
+        })
+        .catch((e) => done(e));
+    });
+  });
 });

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("4.70.0")
+        monsterVersion = new Version("4.70.1")
 
         let m = getMonsterVersion();
 

package/test/cases/types/proxyobserver.mjs

@@ -230,4 +230,35 @@ describe('ProxyObserver', function () {
         });
     });
 
+    describe('deleteProperty', function () {
+        it('should notify observers when deleting a key', function (done) {
+            const proxy = new ProxyObserver({a: 1});
+            const observer = new Observer(function () {
+                expect(proxy.getRealSubject()).to.eql({});
+                done();
+            });
+
+            proxy.attachObserver(observer);
+            delete proxy.getSubject().a;
+        });
+    });
+
+    describe('symbol properties', function () {
+        it('should not notify observers for symbol keys', function (done) {
+            const proxy = new ProxyObserver({});
+            let called = false;
+            const observer = new Observer(function () {
+                called = true;
+            });
+
+            proxy.attachObserver(observer);
+            proxy.getSubject()[Symbol("hidden")] = "value";
+
+            setTimeout(() => {
+                expect(called).to.be.false;
+                done();
+            }, 0);
+        });
+    });
+
 })

package/test/util/jsdom.mjs

@@ -2,6 +2,7 @@
 
 import {extend} from "../../source/data/extend.mjs";
 import {getGlobal} from "../../source/types/global.mjs";
+import {ResizeObserverMock} from "./resize-observer.mjs";
 
 export const isBrowser = new Function("try {return this===window;}catch(e){ return false;}");
 export const isNode = new Function("try {return this===global;}catch(e){return false;}");
@@ -24,7 +25,8 @@ function initJSDOM(options) {
         includeNodeLocations: true,
         storageQuota: 10000000,
         runScripts: "dangerously",
-        resources: "usable"
+        resources: "usable",
+        url: "https://example.test/"
     }, options || {})
 
     return import("jsdom").then(({JSDOM}) => {
@@ -84,13 +86,46 @@ function initJSDOM(options) {
                     }
                 });
 
-                import("dom-storage").then(({default: Storage}) => {
-                    
-                    g.localStorage = new Storage(null, {strict: true});
-                    g.sessionStorage = new Storage(null, {strict: true});
+                if (!window.ResizeObserver) {
+                    window.ResizeObserver = ResizeObserverMock;
+                }
+                if (!g.ResizeObserver) {
+                    g.ResizeObserver = window.ResizeObserver;
+                }
 
-                    window['localStorage'] = g.localStorage;
-                    window['sessionStorage'] = g.sessionStorage;
+                import("dom-storage").then(({default: Storage}) => {
+                    const ensureStorage = (key) => {
+                        let existing = null;
+                        try {
+                            existing = window[key];
+                        } catch (e) {}
+
+                        if (existing) {
+                            g[key] = existing;
+                            return;
+                        }
+
+                        const storage = new Storage(null, {strict: true});
+                        const descriptor = Object.getOwnPropertyDescriptor(window, key);
+
+                        if (!descriptor || descriptor.writable || typeof descriptor.set === "function") {
+                            window[key] = storage;
+                        } else if (descriptor.configurable === true) {
+                            Object.defineProperty(window, key, {
+                                value: storage,
+                                configurable: true,
+                            });
+                        }
+
+                        try {
+                            g[key] = window[key] ?? storage;
+                        } catch (e) {
+                            g[key] = storage;
+                        }
+                    };
+
+                    ensureStorage("localStorage");
+                    ensureStorage("sessionStorage");
 
                     resolve(g);
                     
@@ -107,4 +142,3 @@ function initJSDOM(options) {
 }
 
 export {initJSDOM, JSDOMExport} 
-

package/test/util/websocket.mjs

@@ -2,28 +2,48 @@ import {getGlobal} from "../../source/types/global.mjs";
 
 function initWebSocket() {
 
-//    const isBrowser = typeof window === 'object' && '[object Window]' === window.toString.call(window)
-    const isNode = typeof global === 'object' && '[object global]' === global.toString.call(global)
-
+    class MockWebSocket {
+        constructor(url) {
+            this.url = url;
+            this.readyState = 0;
+            setTimeout(() => {
+                this.readyState = 1;
+                if (typeof this.onopen === "function") {
+                    this.onopen();
+                }
+            }, 0);
+        }
+
+        send(data) {
+            if (this.readyState !== 1) {
+                return;
+            }
+            setTimeout(() => {
+                if (typeof this.onmessage === "function") {
+                    this.onmessage({data});
+                }
+            }, 0);
+        }
+
+        close() {
+            if (this.readyState === 3) {
+                return;
+            }
+            this.readyState = 3;
+            if (typeof this.onclose === "function") {
+                this.onclose({code: 1000});
+            }
+        }
 
-    if (!isNode) {
-         return Promise.resolve();
+        terminate() {
+            this.close();
+        }
     }
 
-    return import("ws").then((ws) => {
-        getGlobal().WebSocket = class extends ws['WebSocket'] {
-            constructor(url, protocols) {
-                super(url, protocols, {
-                    handshakeTimeout: 1000,
-                    maxPayload: 1024 * 1024 * 1024,
-                });
-                
-            }
-        };
-        
-    });
+    getGlobal().WebSocket = MockWebSocket;
+    return Promise.resolve();
 
 
 }
 
-export {initWebSocket}
+export {initWebSocket}

package/test/web/test.html

@@ -9,8 +9,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 4.70.0</h1>
-  <div id="lastupdate" style='font-size:0.7em'>last update Sa 3. Jan 03:58:16 CET 2026</div>
+  <h1 style='margin-bottom: 0.1em;'>Monster 4.70.1</h1>
+  <div id="lastupdate" style='font-size:0.7em'>last update Sa 3. Jan 13:33:23 CET 2026</div>
 </div>
 <div id="mocha-errors"
      style="color: red;font-weight: bold;display: flex;align-items: center;justify-content: center;flex-direction: column;margin:20px;"></div>