@schukai/monster 4.128.2 → 4.128.3

package/test/cases/dom/customcontrol.mjs

@@ -161,9 +161,9 @@ describe('DOM', function () {
         //
         // })
 
-        describe('Test ElementInternals', function () {
+	        describe('Test ElementInternals', function () {
 
-            let form;
+	            let form;
 
             beforeEach(() => {
                 form = document.createElement('form');
@@ -276,18 +276,52 @@ describe('DOM', function () {
             });
 
 
-            it('setValidity()', function () {
+	            it('setValidity()', function () {
 
-                let d = document.createElement('monster-customcontrol');
-                form.appendChild(d);
-                expect(d.setValidity({'valueMissing': true}, "my message")).to.be.undefined;
+	                let d = document.createElement('monster-customcontrol');
+	                form.appendChild(d);
+	                expect(d.setValidity({'valueMissing': true}, "my message")).to.be.undefined;
 
-            });
+	            });
 
+	            it('formResetCallback() should restore the value attribute', function () {
+	                const htmlTAG = 'monster-customcontrol-reset';
 
-        });
-    });
+	                class ResetComponent extends CustomControl {
+	                    static getTag() {
+	                        return htmlTAG;
+	                    }
 
-});
+	                    get defaults() {
+	                        return Object.assign({}, super.defaults, {
+	                            shadowMode: false,
+	                        });
+	                    }
+
+	                    get value() {
+	                        return this._value ?? '';
+	                    }
+
+	                    set value(value) {
+	                        this._value = value;
+	                    }
+	                }
 
+	                registerCustomElement(ResetComponent);
+
+	                let d = document.createElement(htmlTAG);
+	                d.setAttribute('value', 'seed');
+	                d.value = 'changed';
+	                form.appendChild(d);
+
+	                d.formResetCallback();
+
+	                expect(d.value).to.equal('seed');
+	            });
+
+
+	        });
+	    });
+
+});
 

package/test/cases/dom/customelement-initfromscripthost.mjs

@@ -133,7 +133,28 @@ describe('DOM', function () {
                 expect(control.hasAttribute('data-monster-error')).is.false;
 
             });
+
+            it('should resolve callback hosts from a comma separated list', function () {
+                let mocks = document.getElementById('mocks');
+                mocks.innerHTML = `
+                    <div id="call-back-host-1"></div>
+                    <div id="call-back-host-2"></div>
+                    <div id="container"></div>
+                `;
+
+                const container = document.getElementById('call-back-host-2');
+                container.initCustomControlCallback = function (control) {
+                    control.setOption('test', 3);
+                }
+
+                let control = document.createElement(randomTagNumber);
+                control.setAttribute('data-monster-script-host', "call-back-host-1,call-back-host-2");
+                document.getElementById('container').appendChild(control);
+
+                expect(control.getOption('test')).is.eql(3);
+                expect(control.hasAttribute('data-monster-error')).is.false;
+            });
         })
 
     });
-})
+})

package/test/cases/dom/customelement.mjs

@@ -321,6 +321,89 @@ describe('DOM', function () {
             });
         });
 
+        describe('shadow root lifecycle', function () {
+            it('should support closed shadow roots without adding an error', function (done) {
+                const htmlTAG = 'monster-testclass-closed';
+
+                class ClosedShadowComponent extends CustomElement {
+                    static getTag() {
+                        return htmlTAG;
+                    }
+
+                    get defaults() {
+                        return Object.assign({}, super.defaults, {
+                            shadowMode: 'closed',
+                            templates: {
+                                main: '<span id="inside">ok</span>'
+                            },
+                        });
+                    }
+                }
+
+                registerCustomElement(ClosedShadowComponent);
+
+                let d = document.createElement(htmlTAG);
+                document.getElementById('test1').appendChild(d);
+
+                setTimeout(function () {
+                    try {
+                        expect(d.hasAttribute('data-monster-error')).to.be.false;
+                        expect(d.shadowRoot).to.equal(null);
+                        done();
+                    } catch (e) {
+                        done(e);
+                    }
+                }, 10);
+            });
+        });
+
+        describe('attribute lifecycle', function () {
+            it('should not double-call attributeChangedCallback for observed attributes', function (done) {
+                const htmlTAG = 'monster-testclass-observed';
+
+                class ObservedAttributeComponent extends CustomElement {
+                    static getTag() {
+                        return htmlTAG;
+                    }
+
+                    static get observedAttributes() {
+                        return ['data-demo'];
+                    }
+
+                    get defaults() {
+                        return Object.assign({}, super.defaults, {
+                            shadowMode: false,
+                        });
+                    }
+
+                    constructor() {
+                        super();
+                        this.attributeChangedCalls = [];
+                    }
+
+                    attributeChangedCallback(attrName, oldVal, newVal) {
+                        this.attributeChangedCalls.push([attrName, oldVal, newVal]);
+                        super.attributeChangedCallback(attrName, oldVal, newVal);
+                    }
+                }
+
+                registerCustomElement(ObservedAttributeComponent);
+
+                let d = document.createElement(htmlTAG);
+                document.getElementById('test1').appendChild(d);
+                d.setAttribute('data-demo', '1');
+
+                setTimeout(function () {
+                    try {
+                        expect(d.attributeChangedCalls).to.have.length(1);
+                        done();
+                    } catch (e) {
+                        done(e);
+                    }
+                }, 10);
+            });
+        });
+
         describe('Options change', function () {
 
             it('delegatesFocus should change from true to false', function () {

package/test/cases/dom/updater.mjs

@@ -1907,5 +1907,103 @@ describe("DOM", function () {
         })
         .catch((e) => done(e));
     });
+
+    it("should update every parent-path binding when a nested path changes", function (done) {
+      let mocks = document.getElementById("mocks");
+      mocks.innerHTML = `
+        <div id="nested-parent-1" data-monster-replace="path:a | tojson"></div>
+        <div id="nested-leaf" data-monster-replace="path:a.b"></div>
+        <div id="nested-parent-2" data-monster-replace="path:a | tojson"></div>
+      `;
+
+      const updater = new Updater(mocks, { a: { b: "first" } });
+
+      updater
+        .run()
+        .then(() => {
+          updater.getSubject().a.b = "second";
+
+          setTimeout(() => {
+            try {
+              expect(document.getElementById("nested-parent-1").textContent).to.equal(
+                '{"b":"second"}',
+              );
+              expect(document.getElementById("nested-leaf").textContent).to.equal(
+                "second",
+              );
+              expect(document.getElementById("nested-parent-2").textContent).to.equal(
+                '{"b":"second"}',
+              );
+              done();
+            } catch (e) {
+              done(e);
+            }
+          }, 50);
+        })
+        .catch((e) => done(e));
+    });
+
+    it('should keep "0" for optional number bindings', function (done) {
+      let mocks = document.getElementById("mocks");
+      mocks.innerHTML = `
+        <input id="optional-number" data-monster-bind="path:value" data-monster-bind-type="number?">
+      `;
+
+      const updater = new Updater(mocks, {});
+      updater.enableEventProcessing();
+
+      const input = document.getElementById("optional-number");
+      input.value = "0";
+      input.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+
+      setTimeout(() => {
+        try {
+          expect(updater.getSubject().value).to.equal(0);
+          done();
+        } catch (e) {
+          done(e);
+        }
+      }, 80);
+    });
+
+    it("should clear select attributes when bound values become undefined", function (done) {
+      let mocks = document.getElementById("mocks");
+      mocks.innerHTML = `
+        <select id="select-one" data-monster-attributes="value path:single">
+          <option value="a">a</option>
+          <option value="b">b</option>
+        </select>
+        <select id="select-multiple" multiple data-monster-attributes="value path:multiple">
+          <option value="a">a</option>
+          <option value="b">b</option>
+        </select>
+      `;
+
+      const updater = new Updater(mocks, {
+        single: "b",
+        multiple: ["a"],
+      });
+
+      updater
+        .run()
+        .then(() => {
+          updater.getSubject().single = undefined;
+          updater.getSubject().multiple = undefined;
+
+          setTimeout(() => {
+            try {
+              const selectOne = document.getElementById("select-one");
+              const selectMultiple = document.getElementById("select-multiple");
+              expect(selectOne.selectedIndex).to.equal(-1);
+              expect(Array.from(selectMultiple.selectedOptions)).to.have.length(0);
+              expect(mocks.hasAttribute("data-monster-error")).to.be.false;
+              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.125.0")
+        monsterVersion = new Version("4.128.2")
 
         let m = getMonsterVersion();
 

package/test/cases/types/proxyobserver.mjs

@@ -261,4 +261,35 @@ describe('ProxyObserver', function () {
         });
     });
 
+    describe('runtime compatibility', function () {
+        it('should allow nested object access without DOM globals', function () {
+            const proxy = new ProxyObserver({options: {enabled: true}});
+            expect(proxy.getSubject().options.enabled).to.equal(true);
+        });
+
+        it('should preserve setter semantics for accessor-backed instances', function () {
+            let setterCalls = 0;
+
+            class Example {
+                set value(v) {
+                    setterCalls++;
+                    this._value = v;
+                }
+
+                get value() {
+                    return this._value;
+                }
+            }
+
+            const instance = new Example();
+            const proxy = new ProxyObserver({instance});
+
+            proxy.getSubject().instance.value = 7;
+
+            expect(setterCalls).to.equal(1);
+            expect(instance.value).to.equal(7);
+            expect(Object.prototype.hasOwnProperty.call(instance, 'value')).to.be.false;
+        });
+    });
+
 })

package/test/web/import.js

@@ -3,6 +3,7 @@ import "./prepare.js";
 import "../cases/components/layout/tabs.mjs";
 import "../cases/components/layout/slit-panel.mjs";
 import "../cases/components/layout/panel.mjs";
+import "../cases/components/content/image-editor.mjs";
 import "../cases/components/form/buy-box.mjs";
 import "../cases/components/form/message-state-button.mjs";
 import "../cases/components/form/button-bar.mjs";
@@ -12,6 +13,7 @@ import "../cases/components/form/select.mjs";
 import "../cases/components/form/confirm-button.mjs";
 import "../cases/components/form/form.mjs";
 import "../cases/components/form/tree-select.mjs";
+import "../cases/components/form/wizard.mjs";
 import "../cases/components/form/button.mjs";
 import "../cases/components/form/toggle-switch.mjs";
 import "../cases/components/form/template.mjs";
@@ -21,6 +23,7 @@ import "../cases/components/host/host.mjs";
 import "../cases/components/host/overlay.mjs";
 import "../cases/components/host/util.mjs";
 import "../cases/components/host/details.mjs";
+import "../cases/components/datatable/drag-scroll.mjs";
 import "../cases/components/datatable/writeback-sanitizer.mjs";
 import "../cases/components/datatable/pagination.mjs";
 import "../cases/text/formatter.mjs";

package/test/web/puppeteer.mjs

@@ -1,6 +1,9 @@
 import puppeteer from 'puppeteer';
 import {unlinkSync} from 'fs';
 import {existsSync} from 'fs';
+import {mkdtempSync, rmSync} from 'fs';
+import {tmpdir} from 'os';
+import path from 'path';
 
 
 // args auswerten mit --path und --browser, get from args
@@ -30,82 +33,102 @@ if (!config.browser) {
 
 
 (async () => {
-    const browser = await puppeteer.launch({
-        headless: 'new', // if you want to see the browser, set this to false
-        executablePath: config.browser,
-        //args: ['--no-sandbox',"--window-size=1440,1000", "--no-sandbox", "--disable-setuid-sandbox", "--disable-gpu"],
-        args: ["--disable-gpu",
-            '--no-sandbox',
-            '--disable-setuid-sandbox',
-            '--user-data-dir=/tmp',
-            '--enable-logging=stderr',
-            '--disable-web-security',
-            '--disable-features=IsolateOrigins',
-            '--disable-site-isolation-trials'
-        ],
+    const userDataDir = mkdtempSync(path.join(tmpdir(), 'monster-webtest-'));
+    let browser;
+
+    try {
+        try {
+            browser = await puppeteer.launch({
+                headless: 'new', // if you want to see the browser, set this to false
+                executablePath: config.browser,
+                //args: ['--no-sandbox',"--window-size=1440,1000", "--no-sandbox", "--disable-setuid-sandbox", "--disable-gpu"],
+                args: ["--disable-gpu",
+                    '--no-sandbox',
+                    '--disable-setuid-sandbox',
+                    `--user-data-dir=${userDataDir}`,
+                    '--enable-logging=stderr',
+                    '--disable-web-security',
+                    '--disable-features=IsolateOrigins',
+                    '--disable-site-isolation-trials',
+                    '--disable-crash-reporter',
+                    '--disable-breakpad',
+                    '--no-first-run',
+                    '--no-default-browser-check',
+                    '--disable-dev-shm-usage'
+                ],
+                
+                userAgent: 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36',
+                waitUntil: 'load', 
+                timeout: 0,
+                protocolTimeout: 0,
+                dumpio: true
+            });
+        } catch (error) {
+            console.error('Browser launch failed');
+            console.error(`Browser executable: ${config.browser}`);
+            console.error(`Browser profile: ${userDataDir}`);
+            throw error;
+        }
+
+        const page = await browser.newPage();
+        const fileUrl = 'file://' + config.path;
+
+        console.log('Loading page... '+fileUrl);
+
+        await page.goto(fileUrl, {waitUntil: 'load', timeout: 0});
+        
+        const title = await page.title();
+        console.log('Page title:', title);
+
+        // page.on('console', async e => {
+        //     const args = await Promise.all(e.args().map(a => a.jsonValue()));
+        //     console[e.type() === 'warning' ? 'warn' : e.type()](...args);
+        // });
+        //
+        //
+        //
+        console.log('Running tests...');
+        await page.waitForFunction('document.getElementById("mocha-done").textContent.length > 0', 
+            { 
+                timeout: 1000000,
+                polling: 1000
+            }
+        ) ;
+
+        const passes = await page.evaluate(() => document.getElementById('mocha-stats').querySelector('li.passes em').textContent);
+        const failures = await page.evaluate(() => document.getElementById('mocha-stats').querySelector('li.failures em').textContent);
+        const duration = await page.evaluate(() => document.getElementById('mocha-stats').querySelector('li.duration em').textContent);
+        
+        console.log('Tests passed:', passes);
+        console.log('Tests failed:', failures);
+        console.log('Duration:', duration);
         
-        userAgent: 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36',
-        waitUntil: 'load', 
-        timeout: 0,
-        protocolTimeout: 0,
-        dumpio: true
-    });
-
-    const page = await browser.newPage();
-    const fileUrl = 'file://' + config.path;
-
-    console.log('Loading page... '+fileUrl);
-
-    await page.goto(fileUrl, {waitUntil: 'load', timeout: 0});
-    
-    const title = await page.title();
-    console.log('Page title:', title);
-
-    // page.on('console', async e => {
-    //     const args = await Promise.all(e.args().map(a => a.jsonValue()));
-    //     console[e.type() === 'warning' ? 'warn' : e.type()](...args);
-    // });
-    //
-    //
-    //
-    console.log('Running tests...');
-    await page.waitForFunction('document.getElementById("mocha-done").textContent.length > 0', 
-        { 
-            timeout: 1000000,
-            polling: 1000
+        if (existsSync('screenshot.png')) {
+            unlinkSync('screenshot.png');
         }
-    ) ;
-
-    const passes = await page.evaluate(() => document.getElementById('mocha-stats').querySelector('li.passes em').textContent);
-    const failures = await page.evaluate(() => document.getElementById('mocha-stats').querySelector('li.failures em').textContent);
-    const duration = await page.evaluate(() => document.getElementById('mocha-stats').querySelector('li.duration em').textContent);
-    
-    console.log('Tests passed:', passes);
-    console.log('Tests failed:', failures);
-    console.log('Duration:', duration);
-    
-    if (existsSync('screenshot.png')) {
-        unlinkSync('screenshot.png');
-    }
-    
-    await page.screenshot({ path: 'screenshot.png' });
+        
+        await page.screenshot({ path: 'screenshot.png' });
 
-    const failuresAsInt = parseInt(failures);
-    if (failuresAsInt > 0) {
-        console.error('Tests failed');
+        const failuresAsInt = parseInt(failures);
+        if (failuresAsInt > 0) {
+            console.error('Tests failed');
 
-        await page.evaluate(() => {
-            document.querySelectorAll('.test.fail').forEach((node) => {
-                console.error(node.textContent);
+            await page.evaluate(() => {
+                document.querySelectorAll('.test.fail').forEach((node) => {
+                    console.error(node.textContent);
+                });
             });
-        });
 
-        await browser.close();
-        process.exit(1);
-    } else {
-        await browser.close();
-        console.log('Tests passed');
-    }
+            process.exitCode = 1;
+        } else {
+            console.log('Tests passed');
+        }
+    } finally {
+        if (browser) {
+            await browser.close().catch(() => {});
+        }
 
+        rmSync(userDataDir, { recursive: true, force: true });
+    }
 
-})();
+})();

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.125.0</h1>
-  <div id="lastupdate" style='font-size:0.7em'>last update Fr 6. Mär 02:15:36 CET 2026</div>
+  <h1 style='margin-bottom: 0.1em;'>Monster 4.128.2</h1>
+  <div id="lastupdate" style='font-size:0.7em'>last update Do 26. Mär 19:17:38 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>
@@ -26,8 +26,24 @@
 <script>
 
     try {
+        const ignoredBrowserErrorMessages = new Set([
+            "ResizeObserver loop completed with undelivered notifications.",
+            "ResizeObserver loop limit exceeded",
+        ]);
+
+        const isIgnoredBrowserError = (message, error) => {
+            const normalizedMessage = typeof message === "string" && message !== ""
+                ? message
+                : error?.message;
+            return ignoredBrowserErrorMessages.has(normalizedMessage);
+        };
 
         addEventListener("error", (event) => {
+            if (isIgnoredBrowserError(event.message, event.error)) {
+                event.preventDefault?.();
+                return;
+            }
+
             document.getElementById('mocha-errors').insertAdjacentHTML("afterbegin", event.message);
             document.getElementById('mocha-stats').style.backgroundColor = 'red';
         });
@@ -41,6 +57,17 @@
 
         });
 
+        const mochaOnError = window.onerror;
+        if (typeof mochaOnError === "function") {
+            window.onerror = function(message, source, line, column, error) {
+                if (isIgnoredBrowserError(message, error)) {
+                    return true;
+                }
+
+                return mochaOnError.call(this, message, source, line, column, error);
+            };
+        }
+
         runner.on('end', function () {
             document.getElementById('mocha-done').insertAdjacentHTML("afterbegin", 'the execution is done');
             document.getElementById('lastupdate').innerHTML = 'last update ' + new Date();