@schukai/monster 4.148.8 → 4.149.0

package/source/dom/customelement.mjs

@@ -122,6 +122,20 @@ const managedShadowRootSymbol = Symbol("managedShadowRoot");
 const visibilityStateSymbol = Symbol("visibilityState");
 let hostVisibilityStyleSheet = null;
 
+class RevisionObserver extends Observer {
+	#onNotification;
+
+	constructor(callback, onNotification) {
+		super(callback);
+		this.#onNotification = onNotification;
+	}
+
+	update(subject) {
+		this.#onNotification();
+		return super.update(subject);
+	}
+}
+
 /**
  * The `CustomElement` class provides a way to define a new HTML element using the power of Custom Elements.
  *
@@ -1207,20 +1221,42 @@ function initOptionObserver() {
 
 	self[internalSymbol].syncDisabledState = syncDisabledState;
 
+	let updaterSyncRevision = 0;
 	self.attachObserver(
-		new Observer(function () {
-			if (!hasObjectLink(self, customElementUpdaterLinkSymbol)) {
-				return;
-			}
-			const updaters = getLinkedObjects(self, customElementUpdaterLinkSymbol);
+		new RevisionObserver(
+			async function () {
+				let processedRevision;
+				do {
+					processedRevision = updaterSyncRevision;
+					if (hasObjectLink(self, customElementUpdaterLinkSymbol)) {
+						const source = clone(
+							self[internalSymbol].getRealSubject()["options"],
+						);
+						const notifications = [];
+						const updaters = getLinkedObjects(
+							self,
+							customElementUpdaterLinkSymbol,
+						);
+
+						for (const list of updaters) {
+							for (const updater of list) {
+								syncUpdaterSubject(updater.getSubject(), source);
+								const subject = updater?.[internalSymbol]?.subject;
+								if (subject instanceof ProxyObserver) {
+									notifications.push(subject.notifyObservers());
+								}
+							}
+						}
+						await Promise.all(notifications);
+					}
 
-			for (const list of updaters) {
-				for (const updater of list) {
-					const d = clone(self[internalSymbol].getRealSubject()["options"]);
-					syncUpdaterSubject(updater.getSubject(), d);
-				}
-			}
-		}),
+					await Promise.resolve();
+				} while (processedRevision !== updaterSyncRevision);
+			},
+			() => {
+				updaterSyncRevision++;
+			},
+		),
 	);
 
 	self[attributeObserverSymbol][ATTRIBUTE_DISABLED] = () => {
@@ -1258,39 +1294,68 @@ function syncUpdaterSubject(target, source) {
 	}
 
 	for (const [key, value] of Object.entries(source)) {
-		if (
-			isElement(value) ||
-			(typeof Document !== "undefined" && value instanceof Document) ||
-			(typeof DocumentFragment !== "undefined" &&
-				value instanceof DocumentFragment)
-		) {
-			target[key] = value;
-			continue;
-		}
+		syncUpdaterValue(target, key, value);
+	}
+}
 
-		if (isArray(value)) {
-			if (!isArray(target?.[key])) {
-				target[key] = [];
-			}
-			target[key].length = 0;
-			target[key].push(...clone(value));
-			continue;
+/**
+ * Synchronizes an updater value while preserving proxied array and plain-object
+ * identities. Equal primitive entries therefore do not notify observers again.
+ * @private
+ * @param {object|array} target
+ * @param {string|number} key
+ * @param {*} value
+ * @return {void}
+ */
+function syncUpdaterValue(target, key, value) {
+	if (
+		isElement(value) ||
+		(typeof Document !== "undefined" && value instanceof Document) ||
+		(typeof DocumentFragment !== "undefined" &&
+			value instanceof DocumentFragment)
+	) {
+		target[key] = value;
+		return;
+	}
+
+	if (isArray(value)) {
+		if (!isArray(target?.[key])) {
+			target[key] = clone(value);
+			return;
 		}
+		syncUpdaterArray(target[key], value);
+		return;
+	}
 
-		if (isObject(value)) {
-			const proto = Object.getPrototypeOf(value);
-			if (proto && proto !== Object.prototype) {
-				target[key] = value;
-				continue;
-			}
-			if (!isObject(target?.[key]) || isArray(target?.[key])) {
-				target[key] = {};
-			}
-			syncUpdaterSubject(target[key], value);
-			continue;
+	if (isObject(value)) {
+		const proto = Object.getPrototypeOf(value);
+		if (proto && proto !== Object.prototype) {
+			target[key] = value;
+			return;
 		}
+		if (!isObject(target?.[key]) || isArray(target?.[key])) {
+			target[key] = {};
+		}
+		syncUpdaterSubject(target[key], value);
+		return;
+	}
 
-		target[key] = value;
+	target[key] = value;
+}
+
+/**
+ * @private
+ * @param {array} target
+ * @param {array} source
+ * @return {void}
+ */
+function syncUpdaterArray(target, source) {
+	for (let index = 0; index < source.length; index++) {
+		syncUpdaterValue(target, index, source[index]);
+	}
+
+	if (target.length !== source.length) {
+		target.length = source.length;
 	}
 }