@schukai/monster 3.102.2 → 3.102.3

package/source/components/layout/split-panel.mjs

@@ -23,7 +23,7 @@ import { Observer } from "../../types/observer.mjs";
 import { SplitPanelStyleSheet } from "./stylesheet/split-panel.mjs";
 import { instanceSymbol } from "../../constants.mjs";
 import { internalSymbol } from "../../constants.mjs";
-import {getDocument} from "../../dom/util.mjs";
+import { getDocument } from "../../dom/util.mjs";
 
 export { SplitPanel, TYPE_VERTICAL, TYPE_HORIZONTAL };
 
@@ -378,7 +378,6 @@ function initEventHandler() {
 		const dragEventHandler = (e) => {
 			self[internalSymbol].getSubject().isDragging = false;
 
-
 			document.body.style.userSelect = userSelectDefault;
 
 			document.removeEventListener("mousemove", eventListener);

package/source/dom/customcontrol.mjs

@@ -17,6 +17,8 @@ import { addAttributeToken } from "./attributes.mjs";
 import { ATTRIBUTE_ERRORMESSAGE } from "./constants.mjs";
 import { CustomElement, attributeObserverSymbol } from "./customelement.mjs";
 import { instanceSymbol } from "../constants.mjs";
+import { DeadMansSwitch } from "../util/deadmansswitch.mjs";
+import { addErrorAttribute } from "./error.mjs";
 
 export { CustomControl };
 
@@ -77,8 +79,8 @@ class CustomControl extends CustomElement {
 			);
 		}
 
-		// initialize a MutationObserver to watch for attribute changes
-		initObserver.call(this);
+		// watch for attribute value changes
+		initValueAttributeObserver.call(this);
 	}
 
 	/**
@@ -348,14 +350,42 @@ function getInternal() {
 	return this[attachedInternalSymbol];
 }
 
+const debounceValueSymbol = Symbol("debounceValue");
+
 /**
+ *
+ * @issue https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/290
+ *
  * @private
  * @return {object}
  * @this CustomControl
  */
-function initObserver() {
-	// value
+function initValueAttributeObserver() {
+	const self = this;
+
 	this[attributeObserverSymbol]["value"] = () => {
-		this.setOption("value", this.getAttribute("value"));
+		if (self[debounceValueSymbol] instanceof DeadMansSwitch) {
+			try {
+				self[debounceValueSymbol].touch();
+				return;
+			} catch (e) {
+				// catch Error("has already run");
+				if (e.message !== "has already run") {
+					throw e;
+				}
+				delete self[debounceValueSymbol];
+			}
+		}
+
+		self[debounceValueSymbol] = new DeadMansSwitch(50, () => {
+			requestAnimationFrame(() => {
+				const oldValue = self.getAttribute("value");
+				const newValue = self.getOption("value");
+
+				if (oldValue !== newValue) {
+					this.setOption("value", this.getAttribute("value"));
+				}
+			});
+		});
 	};
 }