@schukai/monster 4.127.1 → 4.128.0

package/CHANGELOG.md

@@ -1,6 +1,26 @@
 # Changelog
 
 
+## [Unreleased]
+
+### Bug Fixes
+
+- **updater:** add explicit disposal semantics for observer, queue, and event-processing teardown
+- **updater:** dispose linked stateful subtrees before destructive replace/remove operations
+- **updater:** add `data-monster-patch` as a lifecycle-safe alternative to destructive replace rendering
+- **updater:** extend `data-monster-patch` with `DocumentFragment` and unkeyed array support
+- **updater:** add initial `data-monster-patch-key` support for keyed array reorder and removal
+- **updater:** add `data-monster-patch-render` for keyed object arrays with explicit single-node item rendering
+- **message-state-button:** render `message.content` through `data-monster-patch` to preserve rich and stateful message content
+- **customelement:** skip mutation-observer updater reruns for disconnected or disposed instances
+- **message-state-button:** clear auto-hide timers on disconnect and ignore delayed hides after removal
+- **popper:** guard show/hide/update flows against disconnected hosts and missing internal elements
+
+### Changes
+
+- document lifecycle ownership rules for Updater-driven and stateful custom element implementations
+
+
 
 ## [4.127.1] - 2026-03-16
 
@@ -4658,4 +4678,3 @@
 ## 1.8.0 - 2021-08-15
 
 - Initial release
-

package/package.json

@@ -1 +1 @@
-{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.5","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.127.1"}
+{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.128.0"}

package/source/components/form/message-state-button.mjs

@@ -39,6 +39,7 @@ const innerDisabledObserverSymbol = Symbol("innerDisabledObserver");
 const popperElementSymbol = Symbol("popperElement");
 const messageElementSymbol = Symbol("messageElement");
 const measurementPopperSymbol = Symbol("measurementPopper");
+const autoHideTimerSymbol = Symbol("autoHideTimer");
 
 /**
  * A specialized button component that combines state management with message display capabilities.
@@ -245,6 +246,7 @@ class MessageStateButton extends Popper {
 		this.setOption("message.title", undefined);
 		this.setOption("message.content", undefined);
 		this.setOption("message.icon", undefined);
+		clearAutoHideTimer.call(this);
 		return this;
 	}
 
@@ -255,12 +257,17 @@ class MessageStateButton extends Popper {
 	 * @return {MessageStateButton} Returns the button instance for chaining
 	 */
 	showMessage(timeout) {
+		clearAutoHideTimer.call(this);
 		applyMeasuredMessageWidth.call(this);
 		this.showDialog.call(this);
 
 		if (timeout !== undefined) {
-			setTimeout(() => {
-				super.hideDialog();
+			this[autoHideTimerSymbol] = setTimeout(() => {
+				this[autoHideTimerSymbol] = undefined;
+				if (!this.isConnected) {
+					return;
+				}
+				this.hideMessage();
 			}, timeout);
 		}
 
@@ -285,10 +292,16 @@ class MessageStateButton extends Popper {
 	 * @return {MessageStateButton}
 	 */
 	hideMessage() {
+		clearAutoHideTimer.call(this);
 		super.hideDialog();
 		return this;
 	}
 
+	disconnectedCallback() {
+		clearAutoHideTimer.call(this);
+		super.disconnectedCallback();
+	}
+
 	/**
 	 *
 	 * @return {MessageStateButton}
@@ -407,6 +420,13 @@ function initEventHandlerByMode(mode) {
 	}
 }
 
+function clearAutoHideTimer() {
+	if (this[autoHideTimerSymbol] !== undefined) {
+		clearTimeout(this[autoHideTimerSymbol]);
+		this[autoHideTimerSymbol] = undefined;
+	}
+}
+
 /**
  * @private
  * @return {Select}
@@ -515,7 +535,7 @@ function getTemplate() {
             <div data-monster-role="popper" part="popper" tabindex="-1" class="monster-color-primary-1">
                 <div data-monster-role="arrow"></div>
                 <div data-monster-role="message" part="message" class="flex"
-                     data-monster-replace="path:message.content"></div>
+                     data-monster-patch="path:message.content"></div>
             </div>
         </div>
         </div>

package/source/components/layout/popper.mjs

@@ -427,13 +427,26 @@ function disconnectResizeObserver() {
  */
 function hide() {
 	const self = this;
+	const popperElement = self[popperElementSymbol];
+	const controlElement = self[controlElementSymbol];
+
+	if (!self.isConnected) {
+		unregisterFromHost.call(self);
+		return;
+	}
 
 	fireCustomEvent(self, "monster-popper-hide", {
 		self,
 	});
 
-	self[popperElementSymbol].style.display = "none";
-	removeAttributeToken(self[controlElementSymbol], "class", "open");
+	if (popperElement instanceof HTMLElement) {
+		popperElement.style.display = "none";
+	}
+
+	if (controlElement instanceof HTMLElement) {
+		removeAttributeToken(controlElement, "class", "open");
+	}
+
 	unregisterFromHost.call(self);
 
 	setTimeout(() => {
@@ -449,12 +462,22 @@ function hide() {
  */
 function show() {
 	const self = this;
+	const popperElement = self[popperElementSymbol];
+	const controlElement = self[controlElementSymbol];
 
 	if (self.getOption("disabled", false) === true) {
 		return;
 	}
 
-	if (self[popperElementSymbol].style.display === STYLE_DISPLAY_MODE_BLOCK) {
+	if (
+		!self.isConnected ||
+		!(popperElement instanceof HTMLElement) ||
+		!(controlElement instanceof HTMLElement)
+	) {
+		return;
+	}
+
+	if (popperElement.style.display === STYLE_DISPLAY_MODE_BLOCK) {
 		return;
 	}
 
@@ -462,10 +485,10 @@ function show() {
 		self,
 	});
 
-	self[popperElementSymbol].style.visibility = "hidden";
-	self[popperElementSymbol].style.display = STYLE_DISPLAY_MODE_BLOCK;
+	popperElement.style.visibility = "hidden";
+	popperElement.style.display = STYLE_DISPLAY_MODE_BLOCK;
 
-	addAttributeToken(self[controlElementSymbol], "class", "open");
+	addAttributeToken(controlElement, "class", "open");
 	registerWithHost.call(self);
 	updatePopper.call(self);
 
@@ -481,6 +504,14 @@ function show() {
  * @private
  */
 function updatePopper() {
+	if (
+		!this.isConnected ||
+		!(this[controlElementSymbol] instanceof HTMLElement) ||
+		!(this[popperElementSymbol] instanceof HTMLElement)
+	) {
+		return;
+	}
+
 	if (this[popperElementSymbol].style.display !== STYLE_DISPLAY_MODE_BLOCK) {
 		return;
 	}

package/source/dom/constants.mjs

@@ -23,6 +23,9 @@ export {
 	ATTRIBUTE_UPDATER_PROPERTIES,
 	ATTRIBUTE_UPDATER_SELECT_THIS,
 	ATTRIBUTE_UPDATER_REPLACE,
+	ATTRIBUTE_UPDATER_PATCH,
+	ATTRIBUTE_UPDATER_PATCH_KEY,
+	ATTRIBUTE_UPDATER_PATCH_RENDER,
 	ATTRIBUTE_UPDATER_INSERT,
 	ATTRIBUTE_UPDATER_INSERT_REFERENCE,
 	ATTRIBUTE_UPDATER_REMOVE,
@@ -172,6 +175,9 @@ const ATTRIBUTE_UPDATER_SELECT_THIS = `${ATTRIBUTE_PREFIX}select-this`;
  * @since 1.8.0
  */
 const ATTRIBUTE_UPDATER_REPLACE = `${ATTRIBUTE_PREFIX}replace`;
+const ATTRIBUTE_UPDATER_PATCH = `${ATTRIBUTE_PREFIX}patch`;
+const ATTRIBUTE_UPDATER_PATCH_KEY = `${ATTRIBUTE_PREFIX}patch-key`;
+const ATTRIBUTE_UPDATER_PATCH_RENDER = `${ATTRIBUTE_PREFIX}patch-render`;
 
 /**
  * @type {string}

package/source/dom/customelement.mjs

@@ -932,18 +932,33 @@ function attachChildMutationObserver() {
 			return;
 		}
 
-		self[childMutationTimerSymbol] = setTimeout(() => {
-			self[childMutationTimerSymbol] = null;
-			if (!hasObjectLink(self, customElementUpdaterLinkSymbol)) {
-				return;
-			}
+			self[childMutationTimerSymbol] = setTimeout(() => {
+				self[childMutationTimerSymbol] = null;
+				if (!self.isConnected) {
+					return;
+				}
 
-			const updaters = getLinkedObjects(self, customElementUpdaterLinkSymbol);
-			for (const list of updaters) {
-				for (const updater of list) {
-					updater.run().catch((e) => {
-						addErrorAttribute(self, e);
-					});
+				if (!hasObjectLink(self, customElementUpdaterLinkSymbol)) {
+					return;
+				}
+
+				const updaters = getLinkedObjects(self, customElementUpdaterLinkSymbol);
+				for (const list of updaters) {
+					for (const updater of list) {
+						if (
+							typeof updater?.isDisposed === "function" &&
+							updater.isDisposed() === true
+						) {
+							continue;
+						}
+
+						if (!updater?.[internalSymbol]?.element?.isConnected) {
+							continue;
+						}
+
+						updater.run().catch((e) => {
+							addErrorAttribute(self, e);
+						});
 				}
 			}
 		}, 50);

package/source/dom/events.mjs

@@ -72,7 +72,12 @@ function fireEvent(element, type) {
  * @summary Construct and send and event
  */
 function fireCustomEvent(element, type, detail) {
-	if (element instanceof HTMLElement) {
+	if (
+		element instanceof HTMLElement ||
+		(element &&
+			typeof element === "object" &&
+			typeof element.dispatchEvent === "function")
+	) {
 		if (!isObject(detail)) {
 			detail = { detail };
 		}