@schukai/monster 4.153.0 → 4.154.0

package/test/cases/dom/customelement.mjs

@@ -587,6 +587,154 @@ describe('DOM', function () {
                     linkedUpdater[internalSymbol].subject.detachObserver(observer);
                 }
             });
+
+            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';
+
+                if (!customElements.get(htmlTAG)) {
+                    class ObjectSyncComponent extends CustomElement {
+                        static getTag() {
+                            return htmlTAG;
+                        }
+
+                        get defaults() {
+                            return Object.assign({}, super.defaults, {
+                                settings: {a: 'initial', b: 'retained'},
+                                templates: {
+                                    main: '<span data-monster-replace="path:settings.a"></span>',
+                                },
+                            });
+                        }
+                    }
+
+                    registerCustomElement(ObjectSyncComponent);
+                }
+
+                const element = document.createElement(htmlTAG);
+                document.getElementById('test1').appendChild(element);
+                await new Promise((resolve) => setTimeout(resolve, 20));
+
+                let linkedUpdater;
+                for (const group of element[customElementUpdaterLinkSymbol]) {
+                    for (const updater of group) {
+                        linkedUpdater = updater;
+                        break;
+                    }
+                    if (linkedUpdater) break;
+                }
+                expect(linkedUpdater).to.exist;
+
+                element.setOptions({settings: {a: 'merged'}});
+                await new Promise((resolve) => setTimeout(resolve, 20));
+                expect(linkedUpdater.getSubject().settings).to.deep.include({
+                    a: 'merged',
+                    b: 'retained',
+                });
+
+                const settingsProxy = linkedUpdater.getSubject().settings;
+                element.setOption('settings', {a: 'replacement'});
+                await new Promise((resolve) => setTimeout(resolve, 20));
+
+                expect(linkedUpdater.getSubject().settings).to.equal(settingsProxy);
+                expect(linkedUpdater.getSubject().settings).to.deep.equal({
+                    a: 'replacement',
+                });
+                expect(element.shadowRoot.textContent).to.equal('replacement');
+            });
         })
 
         describe('setOptions()', function () {
@@ -932,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/slotted-nodes.mjs

@@ -1,14 +1,61 @@
 import {expect} from 'chai';
 import {getSlottedNodes} from "../../../source/dom/slotted.mjs";
+import {getSlottedElements} from "../../../source/dom/slotted.mjs";
+import {initJSDOM} from "../../util/jsdom.mjs";
 
 
 describe('getSlottedNodes', () => {
 
+    before(async () => {
+        await initJSDOM();
+    });
+
 
     it('should return an empty Set if there is no ShadowRoot', () => {
         expect(getSlottedNodes).is.a('function');
     });
 
+    it('should ignore text nodes when applying an element query issue #567', () => {
+        const host = document.createElement('div');
+        host.append(' whitespace ');
+        const child = document.createElement('span');
+        child.className = 'match';
+        host.appendChild(child);
+        host.attachShadow({mode: 'open'}).innerHTML = '<slot></slot>';
+        document.body.appendChild(host);
+
+        expect([...getSlottedNodes.call(host, '.match')]).to.deep.equal([child]);
+        host.remove();
+    });
+
+    it('should match empty and spaced slot names without selector interpolation issue #567', () => {
+        const host = document.createElement('div');
+        const defaultChild = document.createElement('span');
+        const namedChild = document.createElement('span');
+        namedChild.slot = 'some slot';
+        host.append(defaultChild, namedChild);
+        host.attachShadow({mode: 'open'}).innerHTML =
+            '<slot name=""></slot><slot name="some slot"></slot>';
+        document.body.appendChild(host);
+
+        expect([...getSlottedElements.call(host, undefined, null)]).to.deep.equal([defaultChild]);
+        expect([...getSlottedElements.call(host, undefined, 'some slot')]).to.deep.equal([namedChild]);
+        host.remove();
+    });
+
+    it('should accept the internally managed closed shadow root issue #567', () => {
+        const host = document.createElement('div');
+        const child = document.createElement('span');
+        host.appendChild(child);
+        const root = host.attachShadow({mode: 'closed'});
+        root.innerHTML = '<slot></slot>';
+        document.body.appendChild(host);
+
+        expect(host.shadowRoot).to.equal(null);
+        expect([...getSlottedElements.call(host, undefined, undefined, root)])
+            .to.deep.equal([child]);
+        host.remove();
+    });
 
-});
 
+});

package/test/cases/dom/template.mjs

@@ -81,6 +81,17 @@ describe('Template', function () {
                 expect(t).is.instanceof(Template);
 
             })
+
+            it('should resolve from a text node context issue #567', function () {
+                const container = document.createElement('div');
+                const text = document.createTextNode('context');
+                container.appendChild(text);
+                document.body.appendChild(container);
+
+                const template = findDocumentTemplate('mytemplate', text);
+                expect(template).to.be.instanceof(Template);
+                container.remove();
+            });
         });
 
         describe('Thmened Template', function () {