@schukai/monster 4.153.1 → 4.154.0

package/test/cases/dom/customelement.mjs

@@ -588,6 +588,100 @@ describe('DOM', function () {
                 }
             });
 
+            it('should not re-render unrelated NaN option paths on every change issue #571', async function () {
+                const htmlTAG = 'monster-testclass-nan-identity-571';
+
+                if (!customElements.get(htmlTAG)) {
+                    class NanIdentityComponent extends CustomElement {
+                        static getTag() {
+                            return htmlTAG;
+                        }
+
+                        get defaults() {
+                            return Object.assign({}, super.defaults, {
+                                measured: NaN,
+                                unrelated: 0,
+                                templates: {
+                                    main: '<span id="nan-measured" data-monster-replace="path:measured | call:renderMeasured"></span><span id="nan-unrelated" data-monster-replace="path:unrelated"></span>',
+                                },
+                            });
+                        }
+
+                        [updaterTransformerMethodsSymbol]() {
+                            return {
+                                renderMeasured: (value) => {
+                                    this.renderCalls = (this.renderCalls || 0) + 1;
+                                    return Number.isNaN(value) ? 'n/a' : String(value);
+                                },
+                            };
+                        }
+                    }
+
+                    registerCustomElement(NanIdentityComponent);
+                }
+
+                const element = document.createElement(htmlTAG);
+                document.getElementById('test1').appendChild(element);
+                await new Promise((resolve) => setTimeout(resolve, 20));
+
+                expect(element.shadowRoot.querySelector('#nan-measured').textContent).to.equal('n/a');
+                const afterAssembly = element.renderCalls;
+                expect(afterAssembly).to.be.greaterThan(0);
+
+                element.setOption('unrelated', 1);
+                await new Promise((resolve) => setTimeout(resolve, 30));
+
+                expect(element.shadowRoot.querySelector('#nan-unrelated').textContent).to.equal('1');
+                expect(element.renderCalls).to.equal(afterAssembly);
+            });
+
+            it('should not accumulate render work for a NaN option across repeated changes issue #571', async function () {
+                const htmlTAG = 'monster-testclass-nan-identity-repeat-571';
+
+                if (!customElements.get(htmlTAG)) {
+                    class NanRepeatComponent extends CustomElement {
+                        static getTag() {
+                            return htmlTAG;
+                        }
+
+                        get defaults() {
+                            return Object.assign({}, super.defaults, {
+                                measured: NaN,
+                                counter: 0,
+                                templates: {
+                                    main: '<span id="nan-repeat-measured" data-monster-replace="path:measured | call:renderMeasured"></span><span id="nan-repeat-counter" data-monster-replace="path:counter"></span>',
+                                },
+                            });
+                        }
+
+                        [updaterTransformerMethodsSymbol]() {
+                            return {
+                                renderMeasured: (value) => {
+                                    this.renderCalls = (this.renderCalls || 0) + 1;
+                                    return Number.isNaN(value) ? 'n/a' : String(value);
+                                },
+                            };
+                        }
+                    }
+
+                    registerCustomElement(NanRepeatComponent);
+                }
+
+                const element = document.createElement(htmlTAG);
+                document.getElementById('test1').appendChild(element);
+                await new Promise((resolve) => setTimeout(resolve, 20));
+
+                const afterAssembly = element.renderCalls;
+
+                for (let i = 1; i <= 5; i++) {
+                    element.setOption('counter', i);
+                    await new Promise((resolve) => setTimeout(resolve, 20));
+                }
+
+                expect(element.shadowRoot.querySelector('#nan-repeat-counter').textContent).to.equal('5');
+                expect(element.renderCalls).to.equal(afterAssembly);
+            });
+
             it('should remove stale updater keys after replacing an option object issue #565', async function () {
                 const htmlTAG = 'monster-testclass-object-sync-565';
 
@@ -986,10 +1080,270 @@ describe('DOM', function () {
                 expect(d.hasNode(t1)).to.be.true;
 
             })
+            // net: containment that already works and must keep working
+            it("hasNode should stay false for detached and foreign nodes issue #574", function () {
+                let d = document.createElement('monster-testclass');
+                let other = document.createElement('monster-testclass');
+
+                let own = document.createElement('div');
+                let foreign = document.createElement('div');
+                let foreignChild = document.createElement('span');
+                foreign.appendChild(foreignChild);
+
+                d.appendChild(own);
+                other.appendChild(foreign);
+
+                let div = document.getElementById('test1');
+                div.append(d);
+                div.append(other);
+
+                let detached = document.createElement('p');
+
+                expect(d.hasNode(own)).to.be.true;
+                expect(d.hasNode(detached)).to.be.false;
+                expect(d.hasNode(foreign)).to.be.false;
+                expect(d.hasNode(foreignChild)).to.be.false;
+            })
+
+            // regression: a node inside the shadow root of a child custom element
+            it("hasNode should find a node inside the shadow root of a child element issue #574", async function () {
+                const parentTAG = 'monster-testclass-hasnode-574';
+                const childTAG = 'monster-testclass-hasnode-child-574';
+
+                if (!customElements.get(childTAG)) {
+                    class HasNodeChild extends CustomElement {
+                        static getTag() {
+                            return childTAG;
+                        }
+
+                        get defaults() {
+                            return Object.assign({}, super.defaults, {
+                                templates: {
+                                    main: '<span id="deep-node">deep</span>',
+                                },
+                            });
+                        }
+                    }
+
+                    registerCustomElement(HasNodeChild);
+                }
+
+                if (!customElements.get(parentTAG)) {
+                    class HasNodeParent extends CustomElement {
+                        static getTag() {
+                            return parentTAG;
+                        }
+
+                        get defaults() {
+                            return Object.assign({}, super.defaults, {
+                                templates: {
+                                    main: '<div id="host-slot"></div>',
+                                },
+                            });
+                        }
+                    }
+
+                    registerCustomElement(HasNodeParent);
+                }
+
+                const parent = document.createElement(parentTAG);
+                document.getElementById('test1').appendChild(parent);
+                await new Promise((resolve) => setTimeout(resolve, 20));
+
+                const child = document.createElement(childTAG);
+                parent.shadowRoot.getElementById('host-slot').appendChild(child);
+                await new Promise((resolve) => setTimeout(resolve, 20));
+
+                const deep = child.shadowRoot.getElementById('deep-node');
+                expect(deep).to.not.equal(null);
+
+                // the child itself lives in the parent shadow root and is found today
+                expect(parent.hasNode(child)).to.be.true;
+                // the node inside the child shadow root is the gap being closed
+                expect(parent.hasNode(deep)).to.be.true;
+            })
+
+            it("hasNode should find a node nested two shadow roots deep issue #574", async function () {
+                const outerTAG = 'monster-testclass-hasnode-outer-574';
+                const middleTAG = 'monster-testclass-hasnode-middle-574';
+
+                if (!customElements.get(middleTAG)) {
+                    class HasNodeMiddle extends CustomElement {
+                        static getTag() {
+                            return middleTAG;
+                        }
+
+                        get defaults() {
+                            return Object.assign({}, super.defaults, {
+                                templates: {
+                                    main: '<div id="middle-host"></div>',
+                                },
+                            });
+                        }
+                    }
+
+                    registerCustomElement(HasNodeMiddle);
+                }
+
+                if (!customElements.get(outerTAG)) {
+                    class HasNodeOuter extends CustomElement {
+                        static getTag() {
+                            return outerTAG;
+                        }
+
+                        get defaults() {
+                            return Object.assign({}, super.defaults, {
+                                templates: {
+                                    main: '<div id="outer-host"></div>',
+                                },
+                            });
+                        }
+                    }
+
+                    registerCustomElement(HasNodeOuter);
+                }
+
+                const outer = document.createElement(outerTAG);
+                document.getElementById('test1').appendChild(outer);
+                await new Promise((resolve) => setTimeout(resolve, 20));
+
+                const middle = document.createElement(middleTAG);
+                outer.shadowRoot.getElementById('outer-host').appendChild(middle);
+                await new Promise((resolve) => setTimeout(resolve, 20));
+
+                const leaf = document.createElement('b');
+                middle.shadowRoot.getElementById('middle-host').appendChild(leaf);
+
+                expect(outer.hasNode(leaf)).to.be.true;
+
+                const unrelated = document.createElement('b');
+                expect(outer.hasNode(unrelated)).to.be.false;
+            })
+
 
 
 	        })
 
+        describe('option resolution issue #576', function () {
+
+            let mocks;
+            beforeEach(() => {
+                mocks = document.getElementById('mocks');
+                mocks.innerHTML = html1;
+            })
+
+            // Pathfinder.exists() is load bearing as an input validator here:
+            // the option name is undefined for every unknown
+            // data-monster-option-* attribute, and the constructor plus every
+            // attributeChangedCallback runs through it.
+            it('should construct with an unknown data-monster-option attribute', async function () {
+                const htmlTAG = 'monster-testclass-unknown-option-576';
+
+                if (!customElements.get(htmlTAG)) {
+                    class UnknownOptionComponent extends CustomElement {
+                        static getTag() {
+                            return htmlTAG;
+                        }
+
+                        get defaults() {
+                            return Object.assign({}, super.defaults, {
+                                known: 'initial',
+                                templates: {
+                                    main: '<span id="known-value" data-monster-replace="path:known"></span>',
+                                },
+                            });
+                        }
+                    }
+
+                    registerCustomElement(UnknownOptionComponent);
+                }
+
+                const element = document.createElement(htmlTAG);
+                element.setAttribute('data-monster-option-foo', 'bar');
+                element.setAttribute('data-monster-option-deeply-unknown-path', '1');
+                document.getElementById('test1').appendChild(element);
+                await new Promise((resolve) => setTimeout(resolve, 20));
+
+                expect(element.hasAttribute('data-monster-error')).to.be.false;
+                expect(element.shadowRoot.querySelector('#known-value').textContent).to.equal('initial');
+                expect(element.getOption('foo')).to.equal(undefined);
+            });
+
+            it('should survive a runtime change of an unknown data-monster-option attribute', async function () {
+                const htmlTAG = 'monster-testclass-unknown-option-runtime-576';
+
+                if (!customElements.get(htmlTAG)) {
+                    class UnknownOptionRuntimeComponent extends CustomElement {
+                        static getTag() {
+                            return htmlTAG;
+                        }
+
+                        get defaults() {
+                            return Object.assign({}, super.defaults, {
+                                known: 'initial',
+                                templates: {
+                                    main: '<span id="runtime-value" data-monster-replace="path:known"></span>',
+                                },
+                            });
+                        }
+                    }
+
+                    registerCustomElement(UnknownOptionRuntimeComponent);
+                }
+
+                const element = document.createElement(htmlTAG);
+                document.getElementById('test1').appendChild(element);
+                await new Promise((resolve) => setTimeout(resolve, 20));
+
+                element.setAttribute('data-monster-option-foo', 'bar');
+                element.setAttribute('data-monster-option-known', 'changed');
+                await new Promise((resolve) => setTimeout(resolve, 30));
+
+                expect(element.hasAttribute('data-monster-error')).to.be.false;
+                expect(element.getOption('known')).to.equal('changed');
+                expect(element.shadowRoot.querySelector('#runtime-value').textContent).to.equal('changed');
+            });
+
+            it('should return declared defaults including falsy ones', async function () {
+                const htmlTAG = 'monster-testclass-falsy-defaults-576';
+
+                if (!customElements.get(htmlTAG)) {
+                    class FalsyDefaultsComponent extends CustomElement {
+                        static getTag() {
+                            return htmlTAG;
+                        }
+
+                        get defaults() {
+                            return Object.assign({}, super.defaults, {
+                                zero: 0,
+                                flag: false,
+                                text: '',
+                                nothing: null,
+                                absent: undefined,
+                                templates: {
+                                    main: '<span></span>',
+                                },
+                            });
+                        }
+                    }
+
+                    registerCustomElement(FalsyDefaultsComponent);
+                }
+
+                const element = document.createElement(htmlTAG);
+                document.getElementById('test1').appendChild(element);
+                await new Promise((resolve) => setTimeout(resolve, 20));
+
+                expect(element.getOption('zero', 99)).to.equal(0);
+                expect(element.getOption('flag', true)).to.equal(false);
+                expect(element.getOption('text', 'fallback')).to.equal('');
+                expect(element.getOption('nothing', 'fallback')).to.equal(null);
+                expect(element.getOption('absent', 'fallback')).to.equal('fallback');
+                expect(element.getOption('templates.main', 'fallback')).to.equal('<span></span>');
+                expect(element.getOption('missing.deep.path', 'fallback')).to.equal('fallback');
+            });
+        });
+
         describe('mutation observer lifecycle', function () {
 	            it('should coalesce child mutations without a refresh loop issue #517', async function () {
 	                const htmlTAG = 'monster-testclass-mutation-loop-517';

package/test/cases/dom/dimension.mjs

@@ -6,6 +6,21 @@ import {getGlobal} from "../../../source/types/global.mjs";
 import {detectRuntimeEnvironment} from "../../../source/util/runtime.mjs";
 
 
+/**
+ * Puts the real window back. Deleting the global instead would make
+ * initJSDOM() build a second jsdom for every file that runs later, while
+ * CustomElement still extends the HTMLElement of the first one, so every
+ * custom element defined afterwards fails to upgrade.
+ */
+function restoreWindow(previousWindow) {
+    if (previousWindow === undefined) {
+        delete getGlobal().window;
+        return;
+    }
+
+    getGlobal().window = previousWindow;
+}
+
 function getMockWindow(dpi) {
 
     if(detectRuntimeEnvironment() === 'browser') {
@@ -43,16 +58,19 @@ describe('dimension', () => {
         });
     })
 
+    let originalWindow;
+
     beforeEach(() => {
 
         const testDpi = 96;
         const testWindow = getMockWindow(testDpi);
+        originalWindow = getGlobal().window;
         getGlobal().window = testWindow;
 
     });
 
     afterEach(() => {
-        delete getGlobal().window;
+        restoreWindow(originalWindow);
     });
 
     describe('convertToPixels', () => {
@@ -123,24 +141,30 @@ describe('dimension', () => {
         it('should return the correct device DPI', () => {
             const testDpi = 96;
             const testWindow = getMockWindow(testDpi);
+            const previousWindow = getGlobal().window;
             getGlobal().window = testWindow;
 
-            const deviceDpi = getDeviceDPI();
-            expect(deviceDpi).to.equal(testDpi * testWindow.devicePixelRatio);
-
-            delete getGlobal().window;
+            try {
+                const deviceDpi = getDeviceDPI();
+                expect(deviceDpi).to.equal(testDpi * testWindow.devicePixelRatio);
+            } finally {
+                restoreWindow(previousWindow);
+            }
         });
 
         it('should cache the result and return the same value', () => {
             const testDpi = 96;
             const testWindow = getMockWindow(testDpi);
+            const previousWindow = getGlobal().window;
             getGlobal().window = testWindow;
 
-            const deviceDpi1 = getDeviceDPI();
-            const deviceDpi2 = getDeviceDPI();
-            expect(deviceDpi1).to.equal(deviceDpi2);
-
-            delete getGlobal().window;
+            try {
+                const deviceDpi1 = getDeviceDPI();
+                const deviceDpi2 = getDeviceDPI();
+                expect(deviceDpi1).to.equal(deviceDpi2);
+            } finally {
+                restoreWindow(previousWindow);
+            }
         });
     });
 

package/test/cases/dom/updater-remove.mjs

@@ -0,0 +1,198 @@
+"use strict";
+
+import * as chai from "chai";
+import { getDocument } from "../../../source/dom/util.mjs";
+import { chaiDom } from "../../util/chai-dom.mjs";
+import { initJSDOM } from "../../util/jsdom.mjs";
+
+let expect = chai.expect;
+chai.use(chaiDom);
+
+/**
+ * Regressions for issue #579.
+ *
+ * data-monster-remove had no coverage anywhere in the repository, and its
+ * selector relied on a :scope prefix that carries no meaning for a descendant
+ * query but does not resolve for shadow root content under jsdom.
+ */
+describe("Updater remove attribute issue #579", function () {
+	let Updater;
+	let CustomElement;
+	let registerCustomElement;
+	let document;
+
+	const html = `
+    <div id="test1"></div>
+`;
+
+	before(function (done) {
+		initJSDOM({})
+			.then(() => import("../../../source/dom/updater.mjs"))
+			.then((updaterModule) => {
+				Updater = updaterModule["Updater"];
+				return import("../../../source/dom/customelement.mjs");
+			})
+			.then((m) => {
+				try {
+					CustomElement = m["CustomElement"];
+					registerCustomElement = m["registerCustomElement"];
+					document = getDocument();
+					done();
+				} catch (e) {
+					done(e);
+				}
+			})
+			.catch(done);
+	});
+
+	beforeEach(function () {
+		document.getElementById("mocks").innerHTML = html;
+	});
+
+	afterEach(function () {
+		document.getElementById("mocks").innerHTML = "";
+	});
+
+	function settle(ms = 30) {
+		return new Promise((resolve) => setTimeout(resolve, ms));
+	}
+
+	describe("light DOM", function () {
+		// net: this path already worked, because :scope resolves outside a shadow
+		// root, and it must keep working
+		it("should remove annotated nodes and keep the rest", async function () {
+			const container = document.getElementById("test1");
+			container.innerHTML = `
+                <div id="keep-me"></div>
+                <div id="drop-me" data-monster-remove></div>
+                <span data-monster-replace="path:label"></span>
+            `;
+
+			const updater = new Updater(container, { label: "rendered" });
+			await updater.run();
+			await settle();
+
+			expect(container.querySelector("#drop-me")).to.equal(null);
+			expect(container.querySelector("#keep-me")).to.not.equal(null);
+			expect(container.querySelector("span").textContent).to.equal("rendered");
+		});
+
+		it("should remove every annotated node, nested ones included", async function () {
+			const container = document.getElementById("test1");
+			container.innerHTML = `
+                <div id="outer" data-monster-remove>
+                    <div id="inner" data-monster-remove></div>
+                </div>
+                <div id="sibling"><div id="deep" data-monster-remove></div></div>
+                <span data-monster-replace="path:label"></span>
+            `;
+
+			const updater = new Updater(container, { label: "rendered" });
+			await updater.run();
+			await settle();
+
+			expect(container.querySelector("#outer")).to.equal(null);
+			expect(container.querySelector("#inner")).to.equal(null);
+			expect(container.querySelector("#deep")).to.equal(null);
+			expect(container.querySelector("#sibling")).to.not.equal(null);
+		});
+	});
+
+	describe("shadow DOM", function () {
+		const TAG = "monster-updater-remove-579";
+
+		before(function () {
+			if (!customElements.get(TAG)) {
+				class RemoveComponent extends CustomElement {
+					static getTag() {
+						return TAG;
+					}
+
+					get defaults() {
+						return Object.assign({}, super.defaults, {
+							label: "rendered",
+							templates: {
+								main: `
+                                    <div id="host">
+                                        <div id="keep-me"></div>
+                                        <div id="drop-me" data-monster-remove></div>
+                                        <span id="label" data-monster-replace="path:label"></span>
+                                    </div>
+                                `,
+							},
+						});
+					}
+				}
+
+				registerCustomElement(RemoveComponent);
+			}
+		});
+
+		// regression: the annotated node survived inside a shadow root
+		it("should remove annotated nodes from a component shadow root", async function () {
+			const element = document.createElement(TAG);
+			document.getElementById("test1").appendChild(element);
+			await settle();
+
+			expect(element.shadowRoot.querySelector("#drop-me")).to.equal(null);
+			expect(element.shadowRoot.querySelector("#keep-me")).to.not.equal(null);
+			expect(element.shadowRoot.querySelector("#label").textContent).to.equal(
+				"rendered",
+			);
+			expect(element.hasAttribute("data-monster-error")).to.be.false;
+		});
+
+		it("should keep the shadow root free of annotated nodes after an update", async function () {
+			const element = document.createElement(TAG);
+			document.getElementById("test1").appendChild(element);
+			await settle();
+
+			element.setOption("label", "changed");
+			await settle();
+
+			expect(element.shadowRoot.querySelector("#label").textContent).to.equal(
+				"changed",
+			);
+			expect(
+				element.shadowRoot.querySelectorAll("[data-monster-remove]").length,
+			).to.equal(0);
+		});
+
+		it("should remove an annotated node nested below the updater element", async function () {
+			const nestedTag = "monster-updater-remove-nested-579";
+
+			if (!customElements.get(nestedTag)) {
+				class NestedRemoveComponent extends CustomElement {
+					static getTag() {
+						return nestedTag;
+					}
+
+					get defaults() {
+						return Object.assign({}, super.defaults, {
+							label: "rendered",
+							templates: {
+								main: `
+                                    <div id="level-one">
+                                        <div id="level-two">
+                                            <em id="deep-drop" data-monster-remove></em>
+                                            <b id="deep-keep"></b>
+                                        </div>
+                                    </div>
+                                `,
+							},
+						});
+					}
+				}
+
+				registerCustomElement(NestedRemoveComponent);
+			}
+
+			const element = document.createElement(nestedTag);
+			document.getElementById("test1").appendChild(element);
+			await settle();
+
+			expect(element.shadowRoot.querySelector("#deep-drop")).to.equal(null);
+			expect(element.shadowRoot.querySelector("#deep-keep")).to.not.equal(null);
+		});
+	});
+});