@schukai/monster 4.153.1 → 4.154.0

package/source/dom/customelement.mjs

@@ -36,7 +36,11 @@ import {
 	validateObject,
 } from "../types/validate.mjs";
 import { clone } from "../util/clone.mjs";
-import { getLinkedObjects, hasObjectLink } from "./attributes.mjs";
+import {
+	getLinkedObjects,
+	hasObjectLink,
+	removeObjectLink,
+} from "./attributes.mjs";
 import {
 	ATTRIBUTE_DISABLED,
 	ATTRIBUTE_OPTIONS,
@@ -119,6 +123,8 @@ const updateCloneDataSymbol = Symbol("@schukai/monster/dom/@@updateCloneData");
 const scriptHostElementSymbol = Symbol("scriptHostElement");
 const optionDefaultsSymbol = Symbol("optionDefaults");
 const managedShadowRootSymbol = Symbol("managedShadowRoot");
+const assembledOnceSymbol = Symbol("assembledOnce");
+const teardownCallbacksSymbol = Symbol("teardownCallbacks");
 const visibilityStateSymbol = Symbol("visibilityState");
 let hostVisibilityStyleSheet = null;
 
@@ -358,7 +364,7 @@ class CustomElement extends HTMLElement {
 	 * @property {Function} templateFormatter.marker.open=null Specifies the opening marker for the templates.
 	 * @property {Function} templateFormatter.marker.close=null Specifies the closing marker for the templates.
 	 * @property {Boolean} templateFormatter.i18n=false Specifies whether the templates should be formatted with i18n.
-	 * @property {Boolean} eventProcessing=false Specifies whether the control processes events.
+	 * @property {Boolean} eventProcessing=false Specifies whether the control processes events. A bound input writes its value into the updater snapshot, not into the options. The synchronisation is one way, options to snapshot, so getOption() does not observe user input; read it with getInternalUpdateCloneData().
 	 * @property {Object} updater Specifies updater options.
 	 * @property {Boolean} updater.batchUpdates=false Batches updater content/attribute updates per diff.
 	 * @since 1.8.0
@@ -540,16 +546,9 @@ class CustomElement extends HTMLElement {
 	 * @since 1.10.0
 	 */
 	getOption(path, defaultValue = undefined) {
-		let value;
-
-		try {
-			value = new Pathfinder(
-				this[internalSymbol].getRealSubject()["options"],
-			).getVia(path);
-		} catch (e) {}
-
-		if (value === undefined) return defaultValue;
-		return value;
+		return new Pathfinder(
+			this[internalSymbol].getRealSubject()["options"],
+		).getVia(path, defaultValue);
 	}
 
 	/**
@@ -699,6 +698,7 @@ class CustomElement extends HTMLElement {
 	[assembleMethodSymbol]() {
 		let elements;
 		let nodeList;
+
 		// Extract options from attributes and set them
 		const AttributeOptions = getOptionsFromAttributes.call(this);
 		if (
@@ -736,7 +736,12 @@ class CustomElement extends HTMLElement {
 		try {
 			nodeList = new Set([
 				...elements,
-				...getSlottedElements.call(this, undefined, undefined, getManagedShadowRoot.call(this)),
+				...getSlottedElements.call(
+					this,
+					undefined,
+					undefined,
+					getManagedShadowRoot.call(this),
+				),
 			]);
 		} catch (e) {
 			nodeList = elements;
@@ -764,13 +769,40 @@ class CustomElement extends HTMLElement {
 		);
 		// Attach a mutation observer to observe changes to the attributes of the element
 		attachAttributeChangeMutationObserver.call(this);
+		attachChildMutationObserver.call(this);
 
 		if (isFunction(this[internalSymbol]?.syncDisabledState)) {
-			this[internalSymbol].syncDisabledState();
+			this[internalSymbol].syncDisabledState(true);
 		}
 
 		syncVisibilityState.call(this);
 
+		this[assembledOnceSymbol] = true;
+
+		return this;
+	}
+
+	/**
+	 * Registers a callback that runs when the element is disconnected.
+	 *
+	 * The registration is consumed by the first teardown, so a callback that is
+	 * needed again after a reconnect has to be registered again. A callback that
+	 * throws does not stop the remaining teardown; the error is reported through
+	 * the error attribute.
+	 *
+	 * @param {function} callback
+	 * @return {CustomElement}
+	 * @throws {TypeError} value is not a function
+	 * @since 4.154.0
+	 */
+	registerTeardown(callback) {
+		validateFunction(callback);
+
+		if (!isArray(this[teardownCallbacksSymbol])) {
+			this[teardownCallbacksSymbol] = [];
+		}
+
+		this[teardownCallbacksSymbol].push(callback);
 		return this;
 	}
 
@@ -778,7 +810,15 @@ class CustomElement extends HTMLElement {
 	 * You know what you are doing? This function is only for advanced users.
 	 * The result is a clone of the internal data.
 	 *
+	 * This snapshot is the object the updaters are bound to. It is the only
+	 * place where values typed into a `data-monster-bind` input end up when
+	 * `eventProcessing` is enabled, because the synchronisation runs one way
+	 * from the options into the snapshot and never back. A reconnect rebinds to
+	 * the same snapshot, so that state survives.
+	 *
 	 * @return {*}
+	 * @see Monster.DOM.CustomElement#getOption
+	 * @since 3.56.0
 	 */
 	getInternalUpdateCloneData() {
 		return clone(this[updateCloneDataSymbol]);
@@ -793,19 +833,31 @@ class CustomElement extends HTMLElement {
 	 * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/connectedCallback
 	 */
 	connectedCallback() {
-		// Check if the object has already been initialized
-		if (!hasObjectLink(this, customElementUpdaterLinkSymbol)) {
-			try {
-				initOptionsFromAttributes(
-					this,
-					this[internalSymbol].getSubject()?.["options"],
-				);
-			} catch (e) {
-				addErrorAttribute(this, e);
-			}
-			// If not, call the assembleMethod to initialize the object
-			this[assembleMethodSymbol]();
+		// Already bound, nothing to do. Moving a connected element inside its own
+		// parent fires disconnect and connect, so this runs often.
+		if (hasObjectLink(this, customElementUpdaterLinkSymbol)) {
+			return;
 		}
+
+		try {
+			initOptionsFromAttributes(
+				this,
+				this[internalSymbol].getSubject()?.["options"],
+			);
+		} catch (e) {
+			addErrorAttribute(this, e);
+		}
+
+		// The assemble method is a one shot: derived classes override it and
+		// rebuild their own state in there, for example state/log.mjs resets its
+		// entries array and its entry maps. After a disconnect the rendered DOM
+		// and that state are still intact, so a reconnect only relinks.
+		if (this[assembledOnceSymbol] === true) {
+			rebindAfterReconnect.call(this);
+			return;
+		}
+
+		this[assembleMethodSymbol]();
 	}
 
 	/**
@@ -814,7 +866,16 @@ class CustomElement extends HTMLElement {
 	 * @return {void}
 	 * @since 1.7.0
 	 */
-	disconnectedCallback() {}
+	disconnectedCallback() {
+		runTeardownCallbacks.call(this);
+		disposeLinkedUpdaters.call(this);
+		detachAttributeChangeMutationObserver.call(this);
+		detachChildMutationObserver.call(this);
+
+		if (isFunction(this[internalSymbol]?.disconnectDisabledObservers)) {
+			this[internalSymbol].disconnectDisabledObservers();
+		}
+	}
 
 	/**
 	 * The custom element has been moved into a new document (e.g. someone called document.adoptNode(el)).
@@ -970,6 +1031,168 @@ function initFromCallbackHost() {
 	callControlCallback.call(this, callBackFunctionName);
 }
 
+/**
+ * Relinks a previously assembled element after it was reconnected.
+ *
+ * Deliberately does not touch the shadow root, the rendered markup, the options
+ * snapshot or anything a derived assemble method built. It only recreates what
+ * the teardown released: the updaters and the observers.
+ *
+ * @private
+ * @this CustomElement
+ */
+function rebindAfterReconnect() {
+	let elements = getManagedShadowRoot.call(this)?.childNodes;
+	if (!(elements instanceof NodeList)) {
+		elements = this.childNodes;
+	}
+
+	let nodeList;
+	try {
+		nodeList = new Set([
+			...elements,
+			...getSlottedElements.call(
+				this,
+				undefined,
+				undefined,
+				getManagedShadowRoot.call(this),
+			),
+		]);
+	} catch {
+		nodeList = elements;
+	}
+
+	const cfg = {};
+	if (this.getOption("eventProcessing") === true) {
+		cfg.eventProcessing = true;
+	}
+	if (this.getOption("updater.batchUpdates") === true) {
+		cfg.batchUpdates = true;
+	}
+
+	// Binds to the same snapshot object on purpose: it carries the runtime state
+	// the updaters produced, including values written back by event processing,
+	// which the component options never receive.
+	addObjectWithUpdaterToElement.call(
+		this,
+		nodeList,
+		customElementUpdaterLinkSymbol,
+		this[updateCloneDataSymbol],
+		cfg,
+	);
+
+	attachAttributeChangeMutationObserver.call(this);
+	attachChildMutationObserver.call(this);
+
+	if (isFunction(this[internalSymbol]?.syncDisabledState)) {
+		this[internalSymbol].syncDisabledState(true);
+	}
+
+	syncVisibilityState.call(this);
+}
+
+/**
+ * @private
+ * @this CustomElement
+ */
+function runTeardownCallbacks() {
+	const callbacks = this[teardownCallbacksSymbol];
+	if (!isArray(callbacks) || callbacks.length === 0) {
+		return;
+	}
+
+	// taken first, so a callback that re-registers during teardown does not run
+	// in the same pass
+	this[teardownCallbacksSymbol] = [];
+
+	for (const callback of callbacks) {
+		try {
+			callback.call(this);
+		} catch (e) {
+			addErrorAttribute(this, e);
+		}
+	}
+}
+
+/**
+ * @private
+ * @this CustomElement
+ */
+function disposeLinkedUpdaters() {
+	if (!hasObjectLink(this, customElementUpdaterLinkSymbol)) {
+		return;
+	}
+
+	try {
+		for (const group of getLinkedObjects(
+			this,
+			customElementUpdaterLinkSymbol,
+		)) {
+			if (!(group instanceof Set)) {
+				continue;
+			}
+
+			for (const updater of group) {
+				if (typeof updater?.dispose !== "function") {
+					continue;
+				}
+
+				try {
+					updater.dispose();
+				} catch (e) {
+					addErrorAttribute(this, e);
+				}
+			}
+		}
+
+		removeObjectLink(this, customElementUpdaterLinkSymbol);
+	} catch (e) {
+		addErrorAttribute(this, e);
+	}
+}
+
+/**
+ * The symbol is deleted, not only disconnected: the attach guard treats a
+ * present symbol as an active observer and would otherwise never replace it.
+ *
+ * @private
+ * @this CustomElement
+ */
+function detachAttributeChangeMutationObserver() {
+	const observer = this[attributeMutationObserverSymbol];
+	if (observer) {
+		try {
+			observer.disconnect();
+		} catch (e) {
+			addErrorAttribute(this, e);
+		}
+	}
+
+	delete this[attributeMutationObserverSymbol];
+}
+
+/**
+ * @private
+ * @this CustomElement
+ */
+function detachChildMutationObserver() {
+	const observer = this[childMutationObserverSymbol];
+	if (observer) {
+		try {
+			observer.disconnect();
+		} catch (e) {
+			addErrorAttribute(this, e);
+		}
+	}
+
+	delete this[childMutationObserverSymbol];
+
+	if (this[childMutationTimerSymbol]) {
+		clearTimeout(this[childMutationTimerSymbol]);
+		this[childMutationTimerSymbol] = null;
+	}
+}
+
 /**
  * This method is called when the element is first created.
  *
@@ -1098,12 +1321,21 @@ function containChildNode(node) {
 		return true;
 	}
 
-	for (const [, e] of Object.entries(this.childNodes)) {
-		if (e.contains(node)) {
+	// Node.contains() already covers the whole light DOM subtree, so the only
+	// thing left to search is the shadow root of nested elements, which no
+	// contains() call can see.
+	for (const child of this.childNodes) {
+		const shadowRoot = child?.shadowRoot;
+		if (
+			shadowRoot instanceof ShadowRoot &&
+			containChildNode.call(shadowRoot, node)
+		) {
 			return true;
 		}
 
-		containChildNode.call(e, node);
+		if (child.childNodes?.length && containChildNode.call(child, node)) {
+			return true;
+		}
 	}
 
 	return false;
@@ -1228,6 +1460,8 @@ function initOptionObserver() {
 	self.attachObserver(new Observer(syncDisabledState));
 
 	self[internalSymbol].syncDisabledState = syncDisabledState;
+	self[internalSymbol].disconnectDisabledObservers =
+		disconnectDisabledObservers;
 
 	let updaterSyncRevision = 0;
 	self.attachObserver(
@@ -1698,6 +1932,15 @@ function initShadowRoot() {
 	let template;
 	let html;
 
+	// A rebind keeps the rendered shadow DOM. Calling attachShadow() again would
+	// throw, after which the main template used to be appended into the light
+	// DOM and a second updater set was bound to the same host.
+	const existing = getManagedShadowRoot.call(this);
+	if (existing instanceof ShadowRoot) {
+		this[managedShadowRootSymbol] = existing;
+		return this;
+	}
+
 	try {
 		template = findDocumentTemplate(this.constructor.getTag());
 	} catch (e) {

package/source/dom/updater.mjs

@@ -651,7 +651,7 @@ function retrieveAndSetValue(element) {
 
 				let options = element?.selectedOptions;
 				if (options === undefined)
-					options = element.querySelectorAll(":scope option:checked");
+					options = element.querySelectorAll("option:checked");
 				value = Array.from(options).map(({ value }) => value);
 
 				break;
@@ -847,8 +847,12 @@ function removeElement(_change, renderContext) {
 	}
 
 	let changed = false;
+	// No :scope prefix: querySelectorAll() on an element already returns only its
+	// descendants, so the prefix carries no meaning here, while :scope does not
+	// resolve for shadow root content under jsdom, which made this a silent no-op
+	// for every component that renders into a shadow root.
 	for (const [, element] of this[internalSymbol].element
-		.querySelectorAll(`:scope [${ATTRIBUTE_UPDATER_REMOVE}]`)
+		.querySelectorAll(`[${ATTRIBUTE_UPDATER_REMOVE}]`)
 		.entries()) {
 		teardownManagedSubtree(element);
 		element.parentNode.removeChild(element);

package/source/types/base.mjs

@@ -115,21 +115,22 @@ function checkInstanceSymbol(obj) {
 	}
 
 	if (proto.hasOwnProperty(instanceSymbol) !== true) {
-		return checkInstanceSymbol.apply(this, [obj.__proto__]);
+		return checkInstanceSymbol.apply(this, [Object.getPrototypeOf(obj)]);
 	}
 
 	const symbol = proto[instanceSymbol];
 	if (symbol === undefined) {
-		if (obj.__proto__) {
-			return checkInstanceSymbol(obj.__proto__);
-		} else {
-			return false;
+		const parent = Object.getPrototypeOf(obj);
+		if (parent) {
+			return checkInstanceSymbol.apply(this, [parent]);
 		}
+
+		return false;
 	}
 
 	if (symbol === this[instanceSymbol]) {
 		return true;
 	}
 
-	return checkInstanceSymbol.apply(this, [obj.__proto__]);
+	return checkInstanceSymbol.apply(this, [Object.getPrototypeOf(obj)]);
 }

package/source/types/basewithoptions.mjs

@@ -80,13 +80,6 @@ class BaseWithOptions extends Base {
 	 * @since 1.10.0
 	 */
 	getOption(path, defaultValue) {
-		let value;
-
-		try {
-			value = new Pathfinder(this[internalSymbol]).getVia(path);
-		} catch (e) {}
-
-		if (value === undefined) return defaultValue;
-		return value;
+		return new Pathfinder(this[internalSymbol]).getVia(path, defaultValue);
 	}
 }

package/source/types/internal.mjs

@@ -126,16 +126,10 @@ function equipWithInternal() {
 	 * @return {*}
 	 */
 	this["getInternal"] = (path, defaultValue) => {
-		let value;
-
-		try {
-			value = new Pathfinder(this[internalSymbol].getRealSubject()).getVia(
-				path,
-			);
-		} catch (e) {}
-
-		if (value === undefined) return defaultValue;
-		return value;
+		return new Pathfinder(this[internalSymbol].getRealSubject()).getVia(
+			path,
+			defaultValue,
+		);
 	};
 }
 

package/source/types/observerlist.mjs

@@ -55,9 +55,9 @@ class ObserverList extends Base {
 	detach(observer) {
 		validateInstance(observer, Observer);
 
-		var i = 0;
-		var l = this.observers.length;
-		for (; i < l; i++) {
+		// Iterate backwards: splicing while moving forward skips the entry that
+		// takes the freed slot, which left adjacent duplicates attached.
+		for (let i = this.observers.length - 1; i >= 0; i--) {
 			if (this.observers[i] === observer) {
 				this.observers.splice(i, 1);
 			}
@@ -74,14 +74,8 @@ class ObserverList extends Base {
 	 */
 	contains(observer) {
 		validateInstance(observer, Observer);
-		var i = 0;
-		var l = this.observers.length;
-		for (; i < l; i++) {
-			if (this.observers[i] === observer) {
-				return true;
-			}
-		}
-		return false;
+
+		return this.observers.includes(observer);
 	}
 
 	/**
@@ -90,14 +84,12 @@ class ObserverList extends Base {
 	 * @return {Promise}
 	 */
 	notify(subject) {
-		const pomises = [];
+		const promises = [];
 
-		let i = 0;
-		const l = this.observers.length;
-		for (; i < l; i++) {
-			pomises.push(this.observers[i].update(subject));
+		for (const observer of this.observers) {
+			promises.push(observer.update(subject));
 		}
 
-		return Promise.all(pomises);
+		return Promise.all(promises);
 	}
 }

package/source/types/proxyobserver.mjs

@@ -218,7 +218,7 @@ function getHandler() {
 				current = proxy.proxyMap.get(current);
 			}
 
-			if (current === value) {
+			if (isSameValue(current, value)) {
 				return true;
 			}
 
@@ -232,7 +232,7 @@ function getHandler() {
 				if (proxy.proxyMap.has(next)) {
 					next = proxy.proxyMap.get(next);
 				}
-				if (next !== current) {
+				if (!isSameValue(next, current)) {
 					proxy.observers.notify(proxy);
 				}
 			}
@@ -274,6 +274,23 @@ function getHandler() {
 	return handler;
 }
 
+/**
+ * Two NaN values are the same value, so assigning NaN over NaN is not a change.
+ * Object.is() is not used here because it would additionally treat 0 and -0 as
+ * a change and notify for assignments that do not alter the subject.
+ * @param {*} a
+ * @param {*} b
+ * @return {boolean}
+ * @private
+ */
+function isSameValue(a, b) {
+	if (a === b) {
+		return true;
+	}
+
+	return Number.isNaN(a) && Number.isNaN(b);
+}
+
 /**
  * Native objects with internal slots cannot be used through a transparent Proxy
  * because their prototype methods require the original receiver.

package/source/types/tokenlist.mjs

@@ -84,13 +84,18 @@ class TokenList extends Base {
 	 */
 	contains(value) {
 		if (isString(value)) {
-			value = value.trim();
-			let counter = 0;
-			value.split(" ").forEach((token) => {
-				if (this.tokens.has(token.trim()) === false) return false;
-				counter++;
-			});
-			return counter > 0 ? true : false;
+			// Repeated or surrounding whitespace produces empty segments, which are
+			// not tokens. A value without any token contains nothing.
+			const tokens = value
+				.split(" ")
+				.map((token) => token.trim())
+				.filter((token) => token !== "");
+
+			if (tokens.length === 0) {
+				return false;
+			}
+
+			return tokens.every((token) => this.tokens.has(token));
 		}
 
 		if (isIterable(value)) {
@@ -100,7 +105,7 @@ class TokenList extends Base {
 				if (this.tokens.has(token.trim()) === false) return false;
 				counter++;
 			}
-			return counter > 0 ? true : false;
+			return counter > 0;
 		}
 
 		return false;