@schukai/monster 4.153.0 → 4.154.0

package/test/cases/data/pathfinder.mjs

@@ -17,6 +17,8 @@ describe('Pathfinder', function () {
             `constructor.prototype.${probe}`,
             ['__proto__', probe],
             ['constructor', 'prototype', probe],
+            [`safe.__proto__`, probe],
+            [`safe.constructor.prototype`, probe],
         ].forEach(function (path) {
             it(`setVia(${JSON.stringify(path)}) should reject unsafe mutation paths`, function () {
                 try {
@@ -108,6 +110,38 @@ describe('Pathfinder', function () {
             expect(() => new Pathfinder({values}).setVia('values.next', {}))
                 .to.throw(Error, 'unsupported action for this data type in setValueViaPath');
         });
+
+        it('exists() should use collection membership semantics', function () {
+            expect(new Pathfinder(new Map([['entry', 0]])).exists('entry')).to.equal(true);
+            expect(new Pathfinder(new Map()).exists('entry')).to.equal(false);
+            expect(new Pathfinder(new Set([false])).exists('0')).to.equal(true);
+            expect(new Pathfinder(new Set()).exists('0')).to.equal(false);
+        });
+
+        it('wildcards should enumerate Map and Set values', function () {
+            expect([...new Pathfinder(new Map([['entry', false]])).getVia('*')])
+                .to.deep.equal([['entry', false]]);
+            expect([...new Pathfinder(new Set(['first', 'second'])).getVia('*')])
+                .to.deep.equal([['0', 'first'], ['1', 'second']]);
+        });
+
+        it('collection indices should reject trailing characters', function () {
+            expect(() => new Pathfinder(['first', 'second']).getVia('1suffix'))
+                .to.throw(TypeError);
+            expect(() => new Pathfinder(new Set(['first', 'second'])).getVia('1suffix'))
+                .to.throw(TypeError);
+        });
+
+        it('should support null-prototype objects', function () {
+            const subject = Object.assign(Object.create(null), {present: false});
+            const pathfinder = new Pathfinder(subject);
+
+            expect(pathfinder.getVia('present')).to.equal(false);
+            expect(pathfinder.exists('present')).to.equal(true);
+            expect(pathfinder.exists('missing')).to.equal(false);
+            pathfinder.setVia('next', 0);
+            expect(subject.next).to.equal(0);
+        });
     });
 
     let convertMapResult = function (r) {
@@ -523,4 +557,133 @@ describe('Pathfinder', function () {
         });
 
     });
+
+    describe('undefined writes keep the key issue #574', function () {
+
+        // net: setVia() is a write, deleteVia() is the deletion API. Writing
+        // undefined must not delete, otherwise a default option declared as
+        // undefined would vanish and set-option-from-attribute would stop
+        // accepting later attribute changes for it.
+        it('setVia() should keep an existing object key when writing undefined', function () {
+            const subject = {a: {b: 1}};
+
+            new Pathfinder(subject).setVia('a.b', undefined);
+
+            expect(Object.hasOwn(subject.a, 'b')).to.be.true;
+            expect(subject.a.b).to.equal(undefined);
+        });
+
+        it('setVia() should create a key when writing undefined to a new path', function () {
+            const subject = {};
+
+            new Pathfinder(subject).setVia('a.b', undefined);
+
+            expect(Object.hasOwn(subject.a, 'b')).to.be.true;
+            expect(subject.a.b).to.equal(undefined);
+        });
+
+        it('exists() should report a key written as undefined', function () {
+            const subject = {a: {b: 1}};
+            const pathfinder = new Pathfinder(subject);
+
+            pathfinder.setVia('a.b', undefined);
+
+            expect(pathfinder.exists('a.b')).to.be.true;
+            expect(pathfinder.exists('a.c')).to.be.false;
+        });
+
+        it('deleteVia() should remove a key that was written as undefined', function () {
+            const subject = {a: {b: 1, c: 2}};
+            const pathfinder = new Pathfinder(subject);
+
+            pathfinder.setVia('a.b', undefined);
+            pathfinder.deleteVia('a.b');
+
+            expect(Object.hasOwn(subject.a, 'b')).to.be.false;
+            expect(subject.a).to.deep.equal({c: 2});
+        });
+
+        it('setVia() should keep an array slot when writing undefined', function () {
+            const subject = {a: [1, 2, 3]};
+
+            new Pathfinder(subject).setVia('a.1', undefined);
+
+            expect(subject.a.length).to.equal(3);
+            expect(Object.hasOwn(subject.a, '1')).to.be.true;
+            expect(subject.a[1]).to.equal(undefined);
+        });
+
+        it('deleteVia() should clear an array slot', function () {
+            const subject = {a: [1, 2, 3]};
+
+            new Pathfinder(subject).deleteVia('a.1');
+
+            expect(subject.a.length).to.equal(3);
+            expect(Object.hasOwn(subject.a, '1')).to.be.false;
+        });
+    });
+
+    describe('getVia default value issue #576', function () {
+
+        function subject() {
+            return {
+                data: {
+                    calculated: false,
+                    space: 0,
+                    label: '',
+                    button: {},
+                    list: [1, 2],
+                },
+            };
+        }
+
+        // net: without a second argument the throwing contract is unchanged
+        it('should keep throwing past a non traversable value when no default is given', function () {
+            expect(() => new Pathfinder(subject()).getVia('data.label.deeper'))
+                .to.throw(Error, 'the journey is not at its end');
+        });
+
+        it('should keep resolving a missing leaf to undefined when no default is given', function () {
+            expect(new Pathfinder(subject()).getVia('data.missing')).to.equal(undefined);
+        });
+
+        // regression: the second argument was accepted and silently ignored
+        it('should return the default instead of throwing past a non traversable value', function () {
+            expect(new Pathfinder(subject()).getVia('data.label.deeper', 'fallback')).to.equal('fallback');
+        });
+
+        it('should return the default for a missing mid path segment', function () {
+            expect(new Pathfinder(subject()).getVia('data.button.unseeded.width', 0)).to.equal(0);
+            expect(new Pathfinder(subject()).getVia('missing.deep.path', 'fallback')).to.equal('fallback');
+        });
+
+        it('should return the default for a missing leaf', function () {
+            expect(new Pathfinder(subject()).getVia('data.button.unseeded', 0)).to.equal(0);
+            expect(new Pathfinder(subject()).getVia('data.missing', 'fallback')).to.equal('fallback');
+        });
+
+        it('should return the default for a malformed path instead of throwing', function () {
+            expect(new Pathfinder(subject()).getVia(undefined, 'fallback')).to.equal('fallback');
+            expect(new Pathfinder(subject()).getVia('data.list.1suffix', 'fallback')).to.equal('fallback');
+        });
+
+        it('should return the resolved value and not the default when the path exists', function () {
+            expect(new Pathfinder(subject()).getVia('data.calculated', true)).to.equal(false);
+            expect(new Pathfinder(subject()).getVia('data.space', 99)).to.equal(0);
+            expect(new Pathfinder(subject()).getVia('data.label', 'fallback')).to.equal('');
+            expect(new Pathfinder(subject()).getVia('data.list.0', 99)).to.equal(1);
+        });
+
+        it('should return the default for a key whose value is undefined', function () {
+            expect(new Pathfinder({a: {b: undefined}}).getVia('a.b', 'fallback')).to.equal('fallback');
+        });
+
+        it('should return the default for a null prototype subject without a match', function () {
+            const nullProto = Object.create(null);
+            nullProto.leaf = 1;
+
+            expect(new Pathfinder({nullProto}).getVia('nullProto.leaf', 9)).to.equal(1);
+            expect(new Pathfinder({nullProto}).getVia('nullProto.missing', 9)).to.equal(9);
+        });
+    });
 });

package/test/cases/data/transformer.mjs

@@ -8,6 +8,32 @@ import {initJSDOM} from "../../util/jsdom.mjs";
 
 describe('Transformer', function () {
 
+    describe('falsy property values issue #569', function () {
+        [
+            ['key:value:fallback', {value: 0}, 0],
+            ['property:value:fallback', {value: false}, false],
+            ['index:0:fallback', [''], ''],
+            ['key:value:fallback', {value: null}, null],
+            ['first-key:fallback', {a: false}, false],
+            ['last-key:fallback', {a: 1, z: 0}, 0],
+        ].forEach(([definition, value, expected]) => {
+            it(`${definition} should preserve ${String(expected)}`, function () {
+                expect(new Transformer(definition).run(value)).to.equal(expected);
+            });
+        });
+
+        it('should distinguish inherited and missing properties', function () {
+            const inherited = Object.create({value: false});
+            expect(new Transformer('key:value:fallback').run(inherited)).to.equal(false);
+            expect(new Transformer('key:missing:fallback').run(inherited)).to.equal('fallback');
+        });
+
+        it('should support null-prototype objects', function () {
+            const value = Object.assign(Object.create(null), {entry: 0});
+            expect(new Transformer('key:entry:fallback').run(value)).to.equal(0);
+        });
+    });
+
     before(function (done) {
 
         let promises = []

package/test/cases/dom/customcontrol.mjs

@@ -384,6 +384,91 @@ describe('DOM', function () {
                     control.remove();
                 });
 
+                it('should not let a stale value attribute overwrite a newer property issue #566', async function () {
+                    const htmlTAG = 'monster-customcontrol-value-race-566';
+
+                    class ValueRaceComponent 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(ValueRaceComponent);
+                    const control = document.createElement(htmlTAG);
+                    document.body.appendChild(control);
+
+                    control.setAttribute('value', 'attribute-value');
+                    control.value = 'newer-property-value';
+                    await new Promise((resolve) => setTimeout(resolve, 30));
+
+                    expect(control.getAttribute('value')).to.equal('attribute-value');
+                    expect(control.value).to.equal('newer-property-value');
+                    control.remove();
+                });
+
+                it('should coalesce rapid value attributes and preserve reflected setters issue #566', async function () {
+                    const htmlTAG = 'monster-customcontrol-reflected-value-566';
+
+                    class ReflectedValueComponent 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 = String(value ?? '');
+                            if (this.getAttribute('value') !== this._value) {
+                                this.setAttribute('value', this._value);
+                            }
+                        }
+                    }
+
+                    registerCustomElement(ReflectedValueComponent);
+                    const control = document.createElement(htmlTAG);
+                    document.body.appendChild(control);
+                    control.setAttribute('value', 'first');
+                    control.setAttribute('value', 'second');
+	                    await new Promise((resolve, reject) => {
+	                        const deadline = Date.now() + 500;
+	                        const check = () => {
+	                            if (control.value === 'second') {
+	                                resolve();
+	                            } else if (Date.now() >= deadline) {
+	                                reject(new Error('value attribute synchronization timed out'));
+	                            } else {
+	                                setTimeout(check, 5);
+	                            }
+	                        };
+	                        check();
+	                    });
+                    expect(control.value).to.equal('second');
+
+                    control.value = 'reflected';
+                    await new Promise((resolve) => setTimeout(resolve, 30));
+                    expect(control.value).to.equal('reflected');
+                    expect(control.getAttribute('value')).to.equal('reflected');
+                    control.remove();
+                });
+
                 it('should replay a pre-upgrade value once after assembly issue #501', async function () {
                     const htmlTAG = 'monster-customcontrol-pre-upgrade';
                     const control = document.createElement(htmlTAG);

package/test/cases/dom/customelement-rebind-baseline.mjs

@@ -0,0 +1,323 @@
+"use strict";
+
+import * as chai from "chai";
+import { customElementUpdaterLinkSymbol } from "../../../source/dom/constants.mjs";
+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);
+
+/**
+ * Baseline for issue #575.
+ *
+ * Before the base class starts disposing updaters on disconnect and rebinding
+ * on reconnect, this file pins the updater contract on a live element. Every
+ * assertion passes today, and the whole contract is checked twice: once on a
+ * freshly inserted element, and once after the element has been removed and
+ * appended again. The second pass is what proves a rebind actually restores
+ * rendering, event processing and pipe callbacks.
+ */
+describe("CustomElement rebind baseline issue #575", function () {
+	let CustomElement;
+	let registerCustomElement;
+	let updaterTransformerMethodsSymbol;
+	let document;
+
+	const TAG = "monster-rebind-baseline-575";
+	const CHILD_TAG = "monster-rebind-baseline-child-575";
+
+	const html = `
+    <div id="test1"></div>
+`;
+
+	before(function (done) {
+		initJSDOM({})
+			.then(() => import("../../../source/dom/customelement.mjs"))
+			.then((m) => {
+				try {
+					CustomElement = m["CustomElement"];
+					registerCustomElement = m["registerCustomElement"];
+					updaterTransformerMethodsSymbol =
+						m["updaterTransformerMethodsSymbol"];
+					document = getDocument();
+
+					if (!customElements.get(CHILD_TAG)) {
+						class RebindBaselineChild extends CustomElement {
+							static getTag() {
+								return CHILD_TAG;
+							}
+
+							get defaults() {
+								return Object.assign({}, super.defaults, {
+									label: "child-initial",
+									templates: {
+										main: '<span id="child-label" data-monster-replace="path:label"></span>',
+									},
+								});
+							}
+						}
+
+						registerCustomElement(RebindBaselineChild);
+					}
+
+					if (!customElements.get(TAG)) {
+						class RebindBaseline extends CustomElement {
+							static getTag() {
+								return TAG;
+							}
+
+							get defaults() {
+								return Object.assign({}, super.defaults, {
+									eventProcessing: true,
+									headline: "start",
+									shout: "quiet",
+									cssClass: "alpha",
+									inputValue: "typed",
+									checkedFlag: false,
+									patchText: "patch-start",
+									keyed: [
+										{ id: "k1", label: "first" },
+										{ id: "k2", label: "second" },
+									],
+									items: [{ name: "item-a" }, { name: "item-b" }],
+									templates: {
+										main: `
+                                            <template id="rebind-item-575">
+                                                <li data-monster-replace="path:rebind-item-575.name"></li>
+                                            </template>
+                                            <h1 id="headline" data-monster-replace="path:headline"></h1>
+                                            <span id="shouted" data-monster-replace="path:shout | call:shout"></span>
+                                            <div id="classed" data-monster-attributes="class path:cssClass"></div>
+                                            <input id="bound" type="text" data-monster-bind="path:inputValue" data-monster-attributes="value path:inputValue">
+                                            <input id="flag" type="checkbox" data-monster-properties="checked path:checkedFlag">
+                                            <div id="patched" data-monster-patch="path:patchText"></div>
+                                            <div id="keyed" data-monster-patch="path:keyed" data-monster-patch-key="path:id" data-monster-patch-render="path:label"></div>
+                                            <ul id="inserted" data-monster-insert="rebind-item-575 path:items"></ul>
+                                            <select id="native-select"><option>one</option></select>
+                                            <${CHILD_TAG} id="child"></${CHILD_TAG}>
+                                        `,
+									},
+								});
+							}
+
+							[updaterTransformerMethodsSymbol]() {
+								return {
+									shout: (value) => String(value).toUpperCase(),
+								};
+							}
+						}
+
+						registerCustomElement(RebindBaseline);
+					}
+
+					done();
+				} catch (e) {
+					done(e);
+				}
+			})
+			.catch(done);
+	});
+
+	let element;
+
+	beforeEach(async function () {
+		const mocks = document.getElementById("mocks");
+		mocks.innerHTML = html;
+
+		element = document.createElement(TAG);
+		document.getElementById("test1").appendChild(element);
+		await settle();
+	});
+
+	afterEach(function () {
+		const mocks = document.getElementById("mocks");
+		mocks.innerHTML = "";
+	});
+
+	function settle(ms = 30) {
+		return new Promise((resolve) => setTimeout(resolve, ms));
+	}
+
+	function query(id) {
+		return element.shadowRoot.querySelector(`#${id}`);
+	}
+
+	async function reconnect() {
+		const parent = element.parentNode;
+		element.remove();
+		await settle();
+		parent.appendChild(element);
+		await settle();
+	}
+
+	/**
+	 * The whole updater contract. Called once on a fresh element and once after a
+	 * reconnect, so both runs assert exactly the same behaviour.
+	 */
+	async function assertUpdaterContract(label) {
+		const because = ` (${label})`;
+
+		expect(element.hasAttribute("data-monster-error"), `no error${because}`).to
+			.be.false;
+
+		// data-monster-replace
+		element.setOption("headline", `headline-${label}`);
+		await settle();
+		expect(query("headline").textContent, `replace${because}`).to.equal(
+			`headline-${label}`,
+		);
+
+		// pipe callback from updaterTransformerMethodsSymbol
+		element.setOption("shout", `shout-${label}`);
+		await settle();
+		expect(query("shouted").textContent, `pipe${because}`).to.equal(
+			`shout-${label}`.toUpperCase(),
+		);
+
+		// data-monster-attributes
+		element.setOption("cssClass", `class-${label}`);
+		await settle();
+		expect(query("classed").getAttribute("class"), `attributes${because}`).to.
+			equal(`class-${label}`);
+
+		// data-monster-properties
+		element.setOption("checkedFlag", true);
+		await settle();
+		expect(query("flag").checked, `properties on${because}`).to.equal(true);
+		element.setOption("checkedFlag", false);
+		await settle();
+		expect(query("flag").checked, `properties off${because}`).to.equal(false);
+
+		// data-monster-patch
+		element.setOption("patchText", `patch-${label}`);
+		await settle();
+		expect(query("patched").textContent, `patch${because}`).to.equal(
+			`patch-${label}`,
+		);
+
+		// keyed patch renders one node per key and keeps node identity for a key
+		// whose data did not change
+		const keyedNodes = [...query("keyed").childNodes];
+		expect(keyedNodes.length, `keyed count${because}`).to.equal(2);
+		const firstKeyedNode = keyedNodes[0];
+		const firstLabel = element.getOption("keyed.0.label");
+
+		element.setOption("keyed.1.label", `second-${label}`);
+		await settle();
+
+		expect(
+			[...query("keyed").childNodes][0],
+			`keyed identity${because}`,
+		).to.equal(firstKeyedNode);
+		expect(
+			[...query("keyed").childNodes].map((node) => node.textContent),
+			`keyed render${because}`,
+		).to.deep.equal([firstLabel, `second-${label}`]);
+
+		// data-monster-insert
+		expect(query("inserted").children.length, `insert${because}`).to.equal(2);
+		element.setOption("items.0.name", `item-${label}`);
+		await settle();
+		expect(query("inserted").textContent, `insert update${because}`).to.contain(
+			`item-${label}`,
+		);
+
+		// nested component renders its own options
+		const child = query("child");
+		expect(child, `child present${because}`).to.not.equal(null);
+		child.setOption("label", `child-${label}`);
+		await settle();
+		expect(
+			child.shadowRoot.querySelector("#child-label").textContent,
+			`child update${because}`,
+		).to.equal(`child-${label}`);
+
+		// event processing writes a typed value into the updater subject, which is
+		// the options snapshot, not the component options. The one way sync means
+		// getOption() never sees user input, so the snapshot is the only place the
+		// value lives and a rebind must not discard it.
+		const bound = query("bound");
+		bound.value = `typed-${label}`;
+		bound.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+		await settle(150);
+		expect(
+			element.getInternalUpdateCloneData()?.inputValue,
+			`bind writeback${because}`,
+		).to.equal(`typed-${label}`);
+
+		// disabled propagation reaches native controls inside the shadow root
+		element.setOption("disabled", true);
+		await settle();
+		expect(
+			query("native-select").hasAttribute("disabled"),
+			`disabled${because}`,
+		).to.be.true;
+		element.setOption("disabled", false);
+		await settle();
+		expect(
+			query("native-select").hasAttribute("disabled"),
+			`disabled off${because}`,
+		).to.be.false;
+	}
+
+	it("should honor the whole updater contract on a fresh element", async function () {
+		await assertUpdaterContract("fresh");
+	});
+
+	it("should honor the whole updater contract again after a reconnect", async function () {
+		await assertUpdaterContract("before-reconnect");
+		await reconnect();
+		await assertUpdaterContract("after-reconnect");
+	});
+
+	it("should keep the shadow root and its nodes across a reconnect", async function () {
+		const shadowRoot = element.shadowRoot;
+		const headline = query("headline");
+		const childCount = shadowRoot.childNodes.length;
+
+		await reconnect();
+
+		expect(element.shadowRoot).to.equal(shadowRoot);
+		expect(query("headline")).to.equal(headline);
+		expect(element.shadowRoot.childNodes.length).to.equal(childCount);
+		expect(element.children.length).to.equal(0);
+		expect(element.hasAttribute("data-monster-error")).to.be.false;
+	});
+
+	it("should keep option object identity across a reconnect", async function () {
+		const items = element.getOption("items");
+		const keyed = element.getOption("keyed");
+
+		element.setOption("headline", "before");
+		await settle();
+
+		await reconnect();
+
+		expect(element.getOption("items")).to.equal(items);
+		expect(element.getOption("keyed")).to.equal(keyed);
+		expect(element.getOption("headline")).to.equal("before");
+	});
+
+	it("should keep exactly one updater group linked across a reconnect", async function () {
+		function countUpdaters() {
+			let count = 0;
+			for (const group of element[customElementUpdaterLinkSymbol] ?? []) {
+				for (const updater of group) {
+					if (typeof updater?.isDisposed === "function") {
+						count++;
+					}
+				}
+			}
+			return count;
+		}
+
+		const before = countUpdaters();
+		expect(before).to.be.greaterThan(0);
+
+		await reconnect();
+
+		expect(countUpdaters()).to.equal(before);
+	});
+});