@schukai/monster 4.148.0 → 4.148.2

package/source/data/pathfinder.mjs

@@ -43,6 +43,17 @@ const DELIMITER = ".";
  */
 const WILDCARD = "*";
 
+/**
+ * Path segments that must never be traversed by mutation operations.
+ * @private
+ * @type {Set<string>}
+ */
+const UNSAFE_MUTATION_PATH_SEGMENTS = new Set([
+	"__proto__",
+	"constructor",
+	"prototype",
+]);
+
 /**
  * Pathfinder is a class to find a path to an object.
  *
@@ -245,7 +256,12 @@ function getValueViaPath(subject, path, check) {
 	}
 
 	let parts;
-	if (isString(path)) {
+	if (isArray(path)) {
+		if (path.length === 0) {
+			return subject;
+		}
+		parts = [...path];
+	} else {
 		if (path === "") {
 			return subject;
 		}
@@ -263,10 +279,12 @@ function getValueViaPath(subject, path, check) {
 		let anchor;
 		if (subject instanceof Map || subject instanceof WeakMap) {
 			anchor = subject.get(current);
-		} else if (subject instanceof Set || subject instanceof WeakSet) {
+		} else if (subject instanceof Set) {
 			current = parseInt(current);
 			validateInteger(current);
 			anchor = [...subject]?.[current];
+		} else if (subject instanceof WeakSet) {
+			throw Error("unsupported action for this data type (WeakSet)");
 		} else if (typeof WeakRef === "function" && subject instanceof WeakRef) {
 			throw Error("unsupported action for this data type (WeakRef)");
 		} else if (isArray(subject)) {
@@ -318,6 +336,7 @@ function setValueViaPath(subject, path, value) {
 	if (!(isArray(path) || isString(path))) {
 		throw new Error("type error: a path must be a string or an array");
 	}
+	validateMutationPath(path);
 
 	let parts;
 	if (isArray(path)) {
@@ -325,7 +344,7 @@ function setValueViaPath(subject, path, value) {
 			return;
 		}
 
-		parts = path;
+		parts = [...path];
 	} else {
 		parts = path.split(DELIMITER);
 	}
@@ -370,8 +389,10 @@ function setValueViaPath(subject, path, value) {
 
 	if (anchor instanceof Map || anchor instanceof WeakMap) {
 		anchor.set(last, value);
-	} else if (anchor instanceof Set || anchor instanceof WeakSet) {
-		anchor.append(value);
+	} else if (anchor instanceof Set) {
+		anchor.add(value);
+	} else if (anchor instanceof WeakSet) {
+		throw Error("unsupported action for this data type in setValueViaPath");
 	} else if (typeof WeakRef === "function" && anchor instanceof WeakRef) {
 		throw Error("unsupported action for this data type in setValueViaPath");
 	} else if (isArray(anchor)) {
@@ -421,6 +442,7 @@ function deleteValueViaPath(subject, path) {
 			"type error: a path must be a string or an array in deleteValueViaPath",
 		);
 	}
+	validateMutationPath(path);
 
 	let parts;
 	if (isArray(path)) {
@@ -428,7 +450,7 @@ function deleteValueViaPath(subject, path) {
 			return;
 		}
 
-		parts = path;
+		parts = [...path];
 	} else {
 		parts = path.split(DELIMITER);
 	}
@@ -455,3 +477,19 @@ function deleteValueViaPath(subject, path) {
 		delete anchor[last];
 	}
 }
+
+/**
+ * Reject paths that could mutate an object's prototype chain.
+ * @param {string|array} path
+ * @return {void}
+ * @throws {Error} unsafe mutation path segment
+ * @private
+ */
+function validateMutationPath(path) {
+	const parts = isArray(path) ? path : path.split(DELIMITER);
+	for (const part of parts) {
+		if (UNSAFE_MUTATION_PATH_SEGMENTS.has(`${part}`)) {
+			throw new Error(`unsafe mutation path segment: ${part}`);
+		}
+	}
+}

package/source/dom/updater.mjs

@@ -69,7 +69,8 @@ export { Updater, addObjectWithUpdaterToElement };
  * @private
  * @type {symbol}
  */
-const timerElementEventHandlerSymbol = Symbol("timerElementEventHandler");
+const controlEventTimersSymbol = Symbol("controlEventTimers");
+const registeredEventTypesSymbol = Symbol("registeredEventTypes");
 
 /**
  * @private
@@ -87,9 +88,29 @@ const applyChangeSymbol = Symbol("applyChange");
 const updaterRootSymbol = Symbol.for("@schukai/monster/dom/@@updater-root");
 const disposedSymbol = Symbol("disposed");
 const subjectObserverSymbol = Symbol("subjectObserver");
+const subjectRevisionSymbol = Symbol("subjectRevision");
 const patchNodeKeySymbol = Symbol("patchNodeKey");
 const queuedSnapshotSymbol = Symbol("queuedSnapshot");
 
+/**
+ * Tracks every notification request, including requests that Observer deduplicates
+ * while its asynchronous callback is already running.
+ * @private
+ */
+class UpdaterSubjectObserver extends Observer {
+	#onNotification;
+
+	constructor(callback, onNotification) {
+		super(callback);
+		this.#onNotification = onNotification;
+	}
+
+	update(subject) {
+		this.#onNotification();
+		return super.update(subject);
+	}
+}
+
 /**
  * The updater class connects an object with the DOM. In this way, structures and contents in the DOM can be
  * programmatically adapted via attributes.
@@ -165,23 +186,34 @@ class Updater extends Base {
 		this[pendingDiffsSymbol] = [];
 		this[processingSymbol] = false;
 		this[disposedSymbol] = false;
+		this[subjectRevisionSymbol] = 0;
 		this[queuedSnapshotSymbol] = clone(this[internalSymbol].last);
+		this[controlEventTimersSymbol] = new Map();
+		this[registeredEventTypesSymbol] = new Set();
+
+		this[subjectObserverSymbol] = new UpdaterSubjectObserver(
+			async () => {
+				let processedRevision;
+				do {
+					processedRevision = this[subjectRevisionSymbol];
+					if (this[disposedSymbol] === true) {
+						return;
+					}
 
-		this[subjectObserverSymbol] = new Observer(() => {
-			if (this[disposedSymbol] === true) {
-				return Promise.resolve();
-			}
-
-			const real = this[internalSymbol].subject.getRealSubject();
-			const diffResult = diff(this[queuedSnapshotSymbol], real);
-			if (diffResult.length === 0) {
-				return Promise.resolve();
-			}
-			const snapshot = clone(real);
-			this[queuedSnapshotSymbol] = snapshot;
-			this[pendingDiffsSymbol].push({ diffResult, snapshot });
-			return this[processQueueSymbol]();
-		});
+					const real = this[internalSymbol].subject.getRealSubject();
+					const diffResult = diff(this[queuedSnapshotSymbol], real);
+					if (diffResult.length > 0) {
+						const snapshot = clone(real);
+						this[queuedSnapshotSymbol] = snapshot;
+						this[pendingDiffsSymbol].push({ diffResult, snapshot });
+						await this[processQueueSymbol]();
+					}
+				} while (processedRevision !== this[subjectRevisionSymbol]);
+			},
+			() => {
+				this[subjectRevisionSymbol]++;
+			},
+		);
 		this[internalSymbol].subject.attachObserver(this[subjectObserverSymbol]);
 	}
 
@@ -317,6 +349,7 @@ class Updater extends Base {
 					passive: true,
 				},
 			);
+			this[registeredEventTypesSymbol].add(type);
 		}
 
 		return this;
@@ -329,12 +362,23 @@ class Updater extends Base {
 	 * @return {Updater}
 	 */
 	disableEventProcessing() {
-		for (const type of this[internalSymbol].eventTypes) {
+		for (const type of this[registeredEventTypesSymbol]) {
 			this[internalSymbol].element.removeEventListener(
 				type,
 				getControlEventHandler.call(this),
+				{ capture: true },
 			);
 		}
+		this[registeredEventTypesSymbol].clear();
+
+		for (const timer of this[controlEventTimersSymbol].values()) {
+			try {
+				timer.defuse();
+			} catch (e) {
+				// A timer that already ran no longer has pending work to cancel.
+			}
+		}
+		this[controlEventTimersSymbol].clear();
 
 		delete this[internalSymbol].element[updaterRootSymbol];
 
@@ -354,8 +398,6 @@ class Updater extends Base {
 			this[internalSymbol].subject.detachObserver(this[subjectObserverSymbol]);
 		}
 
-		delete this[timerElementEventHandlerSymbol];
-
 		return this;
 	}
 
@@ -495,21 +537,24 @@ function getControlEventHandler() {
 			return;
 		}
 
-		if (this[timerElementEventHandlerSymbol] instanceof DeadMansSwitch) {
+		const timers = this[controlEventTimersSymbol];
+		let timer = timers.get(element);
+		if (timer instanceof DeadMansSwitch) {
 			try {
-				this[timerElementEventHandlerSymbol].touch();
+				timer.touch();
 				return;
 			} catch (e) {
-				delete this[timerElementEventHandlerSymbol];
+				timers.delete(element);
 			}
 		}
 
-		this[timerElementEventHandlerSymbol] = new DeadMansSwitch(50, () => {
+		timer = new DeadMansSwitch(50, () => {
 			if (
 				this[disposedSymbol] === true ||
 				!this[internalSymbol].element?.isConnected ||
 				!element?.isConnected
 			) {
+				timers.delete(element);
 				return;
 			}
 
@@ -517,8 +562,11 @@ function getControlEventHandler() {
 				retrieveAndSetValue.call(this, element);
 			} catch (e) {
 				addErrorAttribute(element, e);
+			} finally {
+				timers.delete(element);
 			}
 		});
+		timers.set(element, timer);
 	};
 
 	return this[symbol];
@@ -1091,6 +1139,7 @@ function runUpdateContent(container, parts, subject) {
 				value = pipe.run(subject);
 			} catch (e) {
 				element.setAttribute(ATTRIBUTE_ERRORMESSAGE, e.message);
+				continue;
 			}
 
 			if (value instanceof HTMLElement) {
@@ -1529,6 +1578,7 @@ function runUpdateAttributes(container, parts, subject) {
 			}
 
 			const attributes = element.getAttribute(ATTRIBUTE_UPDATER_ATTRIBUTES);
+			element.removeAttribute(ATTRIBUTE_ERRORMESSAGE);
 
 			for (let [, def] of Object.entries(attributes.split(","))) {
 				def = trimSpaces(def);
@@ -1544,10 +1594,10 @@ function runUpdateAttributes(container, parts, subject) {
 
 				let value;
 				try {
-					element.removeAttribute(ATTRIBUTE_ERRORMESSAGE);
 					value = pipe.run(subject);
 				} catch (e) {
 					addErrorAttribute(element, e);
+					continue;
 				}
 
 				if (value === undefined) {
@@ -1604,6 +1654,7 @@ function runUpdateProperties(container, parts, subject) {
 			}
 
 			const properties = element.getAttribute(ATTRIBUTE_UPDATER_PROPERTIES);
+			element.removeAttribute(ATTRIBUTE_ERRORMESSAGE);
 
 			for (let [, def] of Object.entries(properties.split(","))) {
 				def = trimSpaces(def);
@@ -1619,10 +1670,10 @@ function runUpdateProperties(container, parts, subject) {
 
 				let value;
 				try {
-					element.removeAttribute(ATTRIBUTE_ERRORMESSAGE);
 					value = pipe.run(subject);
 				} catch (e) {
 					addErrorAttribute(element, e);
+					continue;
 				}
 
 				handleInputControlPropertyUpdate.call(this, element, name, value);

package/source/types/proxyobserver.mjs

@@ -173,6 +173,10 @@ function getHandler() {
 				return value;
 			}
 
+			if (isNativeObjectWithInternalSlots(value)) {
+				return value;
+			}
+
 			// set value as proxy if object or array
 			if (isArray(value) || isObject(value)) {
 				if (proxy.objectMap.has(value)) {
@@ -264,3 +268,14 @@ function getHandler() {
 
 	return handler;
 }
+
+/**
+ * Native objects with internal slots cannot be used through a transparent Proxy
+ * because their prototype methods require the original receiver.
+ * @param {*} value
+ * @return {boolean}
+ * @private
+ */
+function isNativeObjectWithInternalSlots(value) {
+	return value instanceof Date || value instanceof Map || value instanceof Set;
+}

package/source/util/clone.mjs

@@ -135,13 +135,14 @@ function cloneObject(obj) {
 	validateObject(obj);
 
 	const fkt = obj?.["constructor"];
+	const sourcePrototype = Object.getPrototypeOf(obj);
 
 	/** Object has clone method */
 	if (typeOf(fkt) === "function") {
 		const prototype = fkt?.prototype;
 		if (typeof prototype === "object") {
 			if (
-				prototype.hasOwnProperty("getClone") &&
+				Object.prototype.hasOwnProperty.call(prototype, "getClone") &&
 				typeOf(obj.getClone) === "function"
 			) {
 				return obj.getClone();
@@ -149,16 +150,17 @@ function cloneObject(obj) {
 		}
 	}
 
-	let copy = {};
+	let copy = sourcePrototype === null ? Object.create(null) : {};
 	if (
-		typeof obj.constructor === "function" &&
-		typeof obj.constructor.call === "function"
+		sourcePrototype !== null &&
+		typeof fkt === "function" &&
+		typeof fkt.call === "function"
 	) {
-		copy = new obj.constructor();
+		copy = new fkt();
 	}
 
 	for (const key in obj) {
-		if (!obj.hasOwnProperty(key)) {
+		if (!Object.prototype.hasOwnProperty.call(obj, key)) {
 			continue;
 		}
 

package/test/cases/components/form/floating-ui.mjs

@@ -5,6 +5,7 @@ let expect = chai.expect;
 
 let resolveClippingBoundaryElement;
 let applyAdaptiveFloatingElementSize;
+let applyFloatingReferenceVisibility;
 let createVisibilityRecoveryConfig;
 let getFloatingVisibleRatio;
 
@@ -19,6 +20,7 @@ describe("form floating-ui boundary resolution", function () {
 			.then((m) => {
 				resolveClippingBoundaryElement = m.resolveClippingBoundaryElement;
 				applyAdaptiveFloatingElementSize = m.applyAdaptiveFloatingElementSize;
+				applyFloatingReferenceVisibility = m.applyFloatingReferenceVisibility;
 				createVisibilityRecoveryConfig = m.createVisibilityRecoveryConfig;
 				getFloatingVisibleRatio = m.getFloatingVisibleRatio;
 				done();
@@ -169,7 +171,8 @@ describe("form floating-ui boundary resolution", function () {
 
 		popper.style.maxHeight = "300px";
 		content.setAttribute("part", "content");
-		content.textContent = "A long help text that still needs one readable line.";
+		content.textContent =
+			"A long help text that still needs one readable line.";
 		content.style.fontSize = "16px";
 		content.style.lineHeight = "24px";
 		popper.appendChild(content);
@@ -476,4 +479,48 @@ describe("form floating-ui boundary resolution", function () {
 			"arrow",
 		]);
 	});
+
+	it("should hide a floating element while its reference is clipped", function () {
+		const reference = document.createElement("div");
+		const popper = document.createElement("div");
+		reference.getBoundingClientRect = () => ({
+			top: -100,
+			left: 10,
+			right: 110,
+			bottom: -50,
+			width: 100,
+			height: 50,
+			x: 10,
+			y: -100,
+		});
+
+		const visible = applyFloatingReferenceVisibility(reference, popper);
+
+		expect(visible).to.equal(false);
+		expect(popper.style.visibility).to.equal("hidden");
+		expect(popper.dataset.monsterReferenceHidden).to.equal("true");
+	});
+
+	it("should restore a floating element when its reference is visible again", function () {
+		const reference = document.createElement("div");
+		const popper = document.createElement("div");
+		reference.getBoundingClientRect = () => ({
+			top: 10,
+			left: 10,
+			right: 110,
+			bottom: 60,
+			width: 100,
+			height: 50,
+			x: 10,
+			y: 10,
+		});
+		popper.dataset.monsterReferenceHidden = "true";
+		popper.style.visibility = "hidden";
+
+		const visible = applyFloatingReferenceVisibility(reference, popper);
+
+		expect(visible).to.equal(true);
+		expect(popper.style.visibility).to.equal("");
+		expect(popper.dataset.monsterReferenceHidden).to.equal(undefined);
+	});
 });