@schukai/monster 4.148.8 → 4.148.9

package/package.json

@@ -1 +1 @@
-{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"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.148.8"}
+{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"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.148.9"}

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;
 	}
 }
 

package/source/dom/updater.mjs

@@ -91,6 +91,8 @@ const subjectObserverSymbol = Symbol("subjectObserver");
 const subjectRevisionSymbol = Symbol("subjectRevision");
 const patchNodeKeySymbol = Symbol("patchNodeKey");
 const queuedSnapshotSymbol = Symbol("queuedSnapshot");
+const fullRefreshRequestedSymbol = Symbol("fullRefreshRequested");
+const replacementValueCacheSymbol = Symbol("replacementValueCache");
 
 /**
  * Tracks every notification request, including requests that Observer deduplicates
@@ -188,6 +190,8 @@ class Updater extends Base {
 		this[disposedSymbol] = false;
 		this[subjectRevisionSymbol] = 0;
 		this[queuedSnapshotSymbol] = clone(this[internalSymbol].last);
+		this[fullRefreshRequestedSymbol] = false;
+		this[replacementValueCacheSymbol] = new WeakMap();
 		this[controlEventTimersSymbol] = new Map();
 		this[registeredEventTypesSymbol] = new Set();
 
@@ -201,7 +205,11 @@ class Updater extends Base {
 					}
 
 					const real = this[internalSymbol].subject.getRealSubject();
-					const diffResult = diff(this[queuedSnapshotSymbol], real);
+					const previous = this[fullRefreshRequestedSymbol]
+						? { __init__: true }
+						: this[queuedSnapshotSymbol];
+					this[fullRefreshRequestedSymbol] = false;
+					const diffResult = diff(previous, real);
 					if (diffResult.length > 0) {
 						const snapshot = clone(real);
 						this[queuedSnapshotSymbol] = snapshot;
@@ -239,11 +247,15 @@ class Updater extends Base {
 				}
 
 				const { diffResult, snapshot } = this[pendingDiffsSymbol].shift();
+				const renderContext = createRenderContext();
 				if (this[internalSymbol].features.batchUpdates === true) {
 					const updatePaths = new Map();
 					for (const change of Object.values(diffResult)) {
-						removeElement.call(this, change);
-						insertElement.call(this, change);
+						const removed = removeElement.call(this, change, renderContext);
+						const inserted = insertElement.call(this, change, renderContext);
+						if (removed || inserted) {
+							invalidateRenderCandidates(renderContext);
+						}
 
 						const path = isArray(change?.["path"]) ? change["path"] : null;
 						if (!path) {
@@ -260,13 +272,13 @@ class Updater extends Base {
 					}
 
 					for (const path of updatePaths.values()) {
-						updateContent.call(this, { path });
-						updateAttributes.call(this, { path });
-						updateProperties.call(this, { path });
+						updateContent.call(this, { path }, renderContext);
+						updateAttributes.call(this, { path }, renderContext);
+						updateProperties.call(this, { path }, renderContext);
 					}
 				} else {
 					for (const change of Object.values(diffResult)) {
-						await this[applyChangeSymbol](change);
+						await this[applyChangeSymbol](change, renderContext);
 					}
 				}
 				this[internalSymbol].last = clone(snapshot);
@@ -279,17 +291,20 @@ class Updater extends Base {
 	}
 
 	/** @private **/
-	async [applyChangeSymbol](change) {
+	async [applyChangeSymbol](change, renderContext) {
 		if (this[disposedSymbol] === true) {
-			return Promise.resolve();
+			return;
 		}
 
-		removeElement.call(this, change);
-		insertElement.call(this, change);
-		updateContent.call(this, change);
+		const removed = removeElement.call(this, change, renderContext);
+		const inserted = insertElement.call(this, change, renderContext);
+		if (removed || inserted) {
+			invalidateRenderCandidates(renderContext);
+		}
+		updateContent.call(this, change, renderContext);
 		await Promise.resolve();
-		updateAttributes.call(this, change);
-		updateProperties.call(this, change);
+		updateAttributes.call(this, change, renderContext);
+		updateProperties.call(this, change, renderContext);
 	}
 
 	/**
@@ -391,6 +406,7 @@ class Updater extends Base {
 		}
 
 		this[disposedSymbol] = true;
+		this[fullRefreshRequestedSymbol] = false;
 		this.disableEventProcessing();
 		this[pendingDiffsSymbol].length = 0;
 
@@ -423,10 +439,10 @@ class Updater extends Base {
 			return Promise.resolve();
 		}
 
-		// the key __init__has no further meaning and is only
-		// used to create the diff for empty objects.
-		this[internalSymbol].last = { __init__: true };
-		this[queuedSnapshotSymbol] = clone(this[internalSymbol].last);
+		// The key __init__ has no further meaning and is only used to create
+		// a full diff. A flag keeps repeated run requests from resetting an
+		// active queue more than once.
+		this[fullRefreshRequestedSymbol] = true;
 		return this[internalSymbol].subject.notifyObservers();
 	}
 
@@ -803,15 +819,25 @@ function retrieveFromBindings() {
  * @license AGPLv3
  * @since 1.8.0
  * @param {object} change
- * @return {void}
+ * @return {boolean}
  */
-function removeElement(change) {
+function removeElement(_change, renderContext) {
+	if (renderContext?.removeProcessed === true) {
+		return false;
+	}
+	if (renderContext) {
+		renderContext.removeProcessed = true;
+	}
+
+	let changed = false;
 	for (const [, element] of this[internalSymbol].element
 		.querySelectorAll(`:scope [${ATTRIBUTE_UPDATER_REMOVE}]`)
 		.entries()) {
 		teardownManagedSubtree(element);
 		element.parentNode.removeChild(element);
+		changed = true;
 	}
+	return changed;
 }
 
 /**
@@ -819,27 +845,36 @@ function removeElement(change) {
  * @license AGPLv3
  * @since 1.8.0
  * @param {object} change
- * @return {void}
+ * @return {boolean}
  * @throws {Error} the value is not iterable
  * @throws {Error} pipes are not allowed when cloning a node.
  * @throws {Error} no template was found with the specified key.
  * @throws {Error} the maximum depth for the recursion is reached.
  * @this Updater
  */
-function insertElement(change) {
+function insertElement(change, renderContext) {
 	const subject = this[internalSymbol].subject.getRealSubject();
 
 	const mem = new WeakSet();
 	let wd = 0;
+	let changed = false;
 
 	const container = this[internalSymbol].element;
+	if (renderContext && renderContext.insertBindingsPresent === undefined) {
+		const query = `[${ATTRIBUTE_UPDATER_INSERT}]`;
+		renderContext.insertBindingsPresent =
+			container.matches(query) || container.querySelector(query) !== null;
+	}
+	if (renderContext?.insertBindingsPresent === false) {
+		return false;
+	}
 
 	while (true) {
 		let found = false;
 		wd++;
 
 		const p = clone(change?.["path"]);
-		if (!isArray(p)) return;
+		if (!isArray(p)) return changed;
 
 		while (p.length > 0) {
 			const current = p.join(".");
@@ -920,6 +955,7 @@ function insertElement(change) {
 					}
 
 					appendNewDocumentFragment(containerElement, key, ref, currentPath);
+					changed = true;
 				}
 
 				const nodes = containerElement.querySelectorAll(
@@ -935,6 +971,7 @@ function insertElement(change) {
 						try {
 							teardownManagedSubtree(node);
 							containerElement.removeChild(node);
+							changed = true;
 						} catch (e) {
 							addErrorAttribute(containerElement, e);
 						}
@@ -950,6 +987,8 @@ function insertElement(change) {
 			throw new Error("the maximum depth for the recursion is reached.");
 		}
 	}
+
+	return changed;
 }
 
 /**
@@ -1064,25 +1103,147 @@ function applyRecursive(node, key, path) {
 
 /**
  * @private
- * @license AGPLv3
- * @since 1.8.0
+ * Creates state shared by every change in one queued subject snapshot.
+ * @private
+ * @return {object}
+ */
+function createRenderContext() {
+	return {
+		replace: new WeakSet(),
+		patch: new WeakSet(),
+		attributes: new WeakSet(),
+		properties: new WeakSet(),
+		removeProcessed: false,
+		insertBindingsPresent: undefined,
+		candidates: {
+			replace: new WeakMap(),
+			patch: new WeakMap(),
+			attributes: new WeakMap(),
+			properties: new WeakMap(),
+			slots: new WeakMap(),
+		},
+	};
+}
+
+/**
+ * Invalidates DOM-derived candidates after structural or rendered DOM changes.
+ * @private
+ * @param {object} renderContext
+ * @return {void}
+ */
+function invalidateRenderCandidates(renderContext) {
+	renderContext.removeProcessed = false;
+	renderContext.insertBindingsPresent = undefined;
+	renderContext.candidates.replace = new WeakMap();
+	renderContext.candidates.patch = new WeakMap();
+	renderContext.candidates.attributes = new WeakMap();
+	renderContext.candidates.properties = new WeakMap();
+	renderContext.candidates.slots = new WeakMap();
+}
+
+/**
+ * @private
+ * @param {HTMLElement} container
+ * @param {string} attribute
+ * @param {WeakMap} cache
+ * @return {Set<HTMLElement>}
+ */
+function getBindingCandidates(container, attribute, cache) {
+	if (!(container instanceof HTMLElement)) {
+		return new Set();
+	}
+
+	if (cache.has(container)) {
+		return cache.get(container);
+	}
+
+	const candidates = new Set(container.querySelectorAll(`[${attribute}]`));
+	if (container.hasAttribute(attribute)) {
+		candidates.add(container);
+	}
+	cache.set(container, candidates);
+	return candidates;
+}
+
+/**
+ * @private
+ * @param {HTMLElement} container
+ * @param {WeakMap} cache
+ * @return {NodeList}
+ */
+function getSlots(container, cache) {
+	if (cache.has(container)) {
+		return cache.get(container);
+	}
+
+	const slots = container.querySelectorAll("slot");
+	cache.set(container, slots);
+	return slots;
+}
+
+/**
+ * @private
  * @param {object} change
+ * @param {object} renderContext
  * @return {void}
  * @this Updater
  */
-function updateContent(change) {
+function updateContent(change, renderContext = createRenderContext()) {
 	const subject = this[internalSymbol].subject.getRealSubject();
 
 	const p = clone(change?.["path"]);
-	runUpdateContent.call(this, this[internalSymbol].element, p, subject);
-	runUpdatePatch.call(this, this[internalSymbol].element, p, subject);
-
-	const slots = this[internalSymbol].element.querySelectorAll("slot");
+	const replacementChanged = runUpdateContent.call(
+		this,
+		this[internalSymbol].element,
+		p,
+		subject,
+		renderContext.replace,
+		renderContext.candidates.replace,
+	);
+	if (replacementChanged) {
+		invalidateRenderCandidates(renderContext);
+	}
+	const patchProcessed = runUpdatePatch.call(
+		this,
+		this[internalSymbol].element,
+		p,
+		subject,
+		renderContext.patch,
+		renderContext.candidates.patch,
+	);
+	if (patchProcessed) {
+		invalidateRenderCandidates(renderContext);
+	}
+
+	const slots = getSlots(
+		this[internalSymbol].element,
+		renderContext.candidates.slots,
+	);
 	if (slots.length > 0) {
 		for (const [, slot] of Object.entries(slots)) {
 			for (const [, element] of Object.entries(slot.assignedNodes())) {
-				runUpdateContent.call(this, element, p, subject);
-				runUpdatePatch.call(this, element, p, subject);
+				const slottedReplacementChanged = runUpdateContent.call(
+					this,
+					element,
+					p,
+					subject,
+					renderContext.replace,
+					renderContext.candidates.replace,
+				);
+				if (slottedReplacementChanged) {
+					invalidateRenderCandidates(renderContext);
+				}
+				const slottedPatchProcessed = runUpdatePatch.call(
+					this,
+					element,
+					p,
+					subject,
+					renderContext.patch,
+					renderContext.candidates.patch,
+				);
+				if (slottedPatchProcessed) {
+					invalidateRenderCandidates(renderContext);
+				}
 			}
 		}
 	}
@@ -1097,35 +1258,47 @@ function updateContent(change) {
  * @param {object} subject
  * @return {void}
  */
-function runUpdateContent(container, parts, subject) {
+function runUpdateContent(
+	container,
+	parts,
+	subject,
+	mem = new WeakSet(),
+	candidateCache = new WeakMap(),
+) {
 	if (!isArray(parts)) return;
 	if (!(container instanceof HTMLElement)) return;
 	parts = clone(parts);
-
-	const mem = new WeakSet();
+	let changed = false;
 
 	while (parts.length > 0) {
 		const current = parts.join(".");
 		parts.pop();
 
 		// Unfortunately, static data is always changed as well, since it is not possible to react to changes here.
-		const query = `[${ATTRIBUTE_UPDATER_REPLACE}^="path:${current}"], [${ATTRIBUTE_UPDATER_REPLACE}^="static:"], [${ATTRIBUTE_UPDATER_REPLACE}^="i18n:"]`;
-		const e = container.querySelectorAll(`${query}`);
-
-		const iterator = new Set([...e]);
-
-		if (container.matches(query)) {
-			iterator.add(container);
-		}
+		const iterator = getBindingCandidates(
+			container,
+			ATTRIBUTE_UPDATER_REPLACE,
+			candidateCache,
+		);
 
 		/**
 		 * @type {HTMLElement}
 		 */
 		for (const [element] of iterator.entries()) {
 			if (mem.has(element)) continue;
-			mem.add(element);
 
 			const attributes = element.getAttribute(ATTRIBUTE_UPDATER_REPLACE);
+			if (!isString(attributes)) {
+				continue;
+			}
+			if (
+				!attributes.startsWith(`path:${current}`) &&
+				!attributes.startsWith("static:") &&
+				!attributes.startsWith("i18n:")
+			) {
+				continue;
+			}
+			mem.add(element);
 			const cmd = trimSpaces(attributes);
 
 			const pipe = new Pipe(cmd);
@@ -1142,49 +1315,101 @@ function runUpdateContent(container, parts, subject) {
 				continue;
 			}
 
-			if (value instanceof HTMLElement) {
-				teardownChildNodes(element);
-				while (element.firstChild) {
-					element.removeChild(element.firstChild);
-				}
+			changed = applyReplacementValue.call(this, element, value) || changed;
+		}
+	}
 
-				try {
-					element.appendChild(value);
-				} catch (e) {
-					addErrorAttribute(element, e);
-				}
-			} else {
-				teardownChildNodes(element);
-				element.innerHTML = value;
-			}
+	return changed;
+}
+
+function applyReplacementValue(element, value) {
+	if (!(element instanceof HTMLElement)) {
+		return false;
+	}
+
+	if (value instanceof HTMLElement) {
+		if (element.childNodes.length === 1 && element.firstChild === value) {
+			return false;
 		}
+
+		teardownChildNodes(element);
+		while (element.firstChild) {
+			element.removeChild(element.firstChild);
+		}
+
+		try {
+			element.appendChild(value);
+			this[replacementValueCacheSymbol].delete(element);
+		} catch (e) {
+			addErrorAttribute(element, e);
+		}
+		return true;
 	}
+
+	const cacheable =
+		value === null ||
+		value === undefined ||
+		(typeof value !== "object" && typeof value !== "function");
+	const cached = this[replacementValueCacheSymbol].get(element);
+	if (
+		cacheable &&
+		cached &&
+		Object.is(cached.value, value) &&
+		element.innerHTML === cached.html
+	) {
+		return false;
+	}
+
+	teardownChildNodes(element);
+	element.innerHTML = value;
+	if (cacheable) {
+		this[replacementValueCacheSymbol].set(element, {
+			value,
+			html: element.innerHTML,
+		});
+	} else {
+		this[replacementValueCacheSymbol].delete(element);
+	}
+	return true;
 }
 
-function runUpdatePatch(container, parts, subject) {
+function runUpdatePatch(
+	container,
+	parts,
+	subject,
+	mem = new WeakSet(),
+	candidateCache = new WeakMap(),
+) {
 	if (!isArray(parts)) return;
 	if (!(container instanceof HTMLElement)) return;
 	parts = clone(parts);
-
-	const mem = new WeakSet();
+	let processed = false;
 
 	while (parts.length > 0) {
 		const current = parts.join(".");
 		parts.pop();
 
-		const query = `[${ATTRIBUTE_UPDATER_PATCH}^="path:${current}"], [${ATTRIBUTE_UPDATER_PATCH}^="static:"], [${ATTRIBUTE_UPDATER_PATCH}^="i18n:"]`;
-		const e = container.querySelectorAll(`${query}`);
-
-		const iterator = new Set([...e]);
-		if (container.matches(query)) {
-			iterator.add(container);
-		}
+		const iterator = getBindingCandidates(
+			container,
+			ATTRIBUTE_UPDATER_PATCH,
+			candidateCache,
+		);
 
 		for (const [element] of iterator.entries()) {
 			if (mem.has(element)) continue;
-			mem.add(element);
 
 			const attributes = element.getAttribute(ATTRIBUTE_UPDATER_PATCH);
+			if (!isString(attributes)) {
+				continue;
+			}
+			if (
+				!attributes.startsWith(`path:${current}`) &&
+				!attributes.startsWith("static:") &&
+				!attributes.startsWith("i18n:")
+			) {
+				continue;
+			}
+			mem.add(element);
 			const cmd = trimSpaces(attributes);
 
 			const pipe = new Pipe(cmd);
@@ -1202,8 +1427,11 @@ function runUpdatePatch(container, parts, subject) {
 			}
 
 			applyPatchValue.call(this, element, value);
+			processed = true;
 		}
 	}
+
+	return processed;
 }
 
 function applyPatchValue(element, value) {
@@ -1253,6 +1481,9 @@ function applyPatchValue(element, value) {
 	}
 
 	const nextValue = value === null || value === undefined ? "" : String(value);
+	if (element.children.length === 0 && element.textContent === nextValue) {
+		return;
+	}
 
 	if (element.children.length > 0) {
 		teardownChildNodes(element);
@@ -1518,10 +1749,20 @@ function hasObjectLinkSafe(element, symbol) {
  * @param {object} change
  * @return {void}
  */
-function updateAttributes(change) {
+function updateAttributes(change, renderContext = createRenderContext()) {
 	const subject = this[internalSymbol].subject.getRealSubject();
 	const p = clone(change?.["path"]);
-	runUpdateAttributes.call(this, this[internalSymbol].element, p, subject);
+	const processed = runUpdateAttributes.call(
+		this,
+		this[internalSymbol].element,
+		p,
+		subject,
+		renderContext.attributes,
+		renderContext.candidates.attributes,
+	);
+	if (processed) {
+		invalidateRenderCandidates(renderContext);
+	}
 }
 
 /**
@@ -1530,10 +1771,20 @@ function updateAttributes(change) {
  * @param {object} change
  * @return {void}
  */
-function updateProperties(change) {
+function updateProperties(change, renderContext = createRenderContext()) {
 	const subject = this[internalSymbol].subject.getRealSubject();
 	const p = clone(change?.["path"]);
-	runUpdateProperties.call(this, this[internalSymbol].element, p, subject);
+	const processed = runUpdateProperties.call(
+		this,
+		this[internalSymbol].element,
+		p,
+		subject,
+		renderContext.properties,
+		renderContext.candidates.properties,
+	);
+	if (processed) {
+		invalidateRenderCandidates(renderContext);
+	}
 }
 
 /**
@@ -1544,40 +1795,44 @@ function updateProperties(change) {
  * @return {void}
  * @this Updater
  */
-function runUpdateAttributes(container, parts, subject) {
+function runUpdateAttributes(
+	container,
+	parts,
+	subject,
+	mem = new WeakSet(),
+	candidateCache = new WeakMap(),
+) {
 	if (!isArray(parts)) return;
 	parts = clone(parts);
-
-	const mem = new WeakSet();
+	let processed = false;
 
 	while (parts.length > 0) {
 		const current = parts.join(".");
 		parts.pop();
 
-		let iterator = new Set();
-
-		const query = `[${ATTRIBUTE_UPDATER_SELECT_THIS}][${ATTRIBUTE_UPDATER_ATTRIBUTES}], [${ATTRIBUTE_UPDATER_ATTRIBUTES}*="path:${current}"], [${ATTRIBUTE_UPDATER_ATTRIBUTES}^="static:"], [${ATTRIBUTE_UPDATER_ATTRIBUTES}^="i18n:"]`;
-
-		const e = container.querySelectorAll(query);
-
-		if (e.length > 0) {
-			iterator = new Set([...e]);
-		}
-
-		if (container.matches(query)) {
-			iterator.add(container);
-		}
+		const iterator = getBindingCandidates(
+			container,
+			ATTRIBUTE_UPDATER_ATTRIBUTES,
+			candidateCache,
+		);
 
 		for (const [element] of iterator.entries()) {
 			if (mem.has(element)) continue;
-			mem.add(element);
 
-			// this case occurs when the ATTRIBUTE_UPDATER_SELECT_THIS attribute is set
-			if (!element.hasAttribute(ATTRIBUTE_UPDATER_ATTRIBUTES)) {
+			const attributes = element.getAttribute(ATTRIBUTE_UPDATER_ATTRIBUTES);
+			if (!isString(attributes)) {
 				continue;
 			}
-
-			const attributes = element.getAttribute(ATTRIBUTE_UPDATER_ATTRIBUTES);
+			if (
+				!element.hasAttribute(ATTRIBUTE_UPDATER_SELECT_THIS) &&
+				!attributes.includes(`path:${current}`) &&
+				!attributes.startsWith("static:") &&
+				!attributes.startsWith("i18n:")
+			) {
+				continue;
+			}
+			mem.add(element);
+			processed = true;
 			element.removeAttribute(ATTRIBUTE_ERRORMESSAGE);
 
 			for (let [, def] of Object.entries(attributes.split(","))) {
@@ -1610,6 +1865,8 @@ function runUpdateAttributes(container, parts, subject) {
 			}
 		}
 	}
+
+	return processed;
 }
 
 /**
@@ -1620,40 +1877,44 @@ function runUpdateAttributes(container, parts, subject) {
  * @return {void}
  * @this Updater
  */
-function runUpdateProperties(container, parts, subject) {
+function runUpdateProperties(
+	container,
+	parts,
+	subject,
+	mem = new WeakSet(),
+	candidateCache = new WeakMap(),
+) {
 	if (!isArray(parts)) return;
 	parts = clone(parts);
-
-	const mem = new WeakSet();
+	let processed = false;
 
 	while (parts.length > 0) {
 		const current = parts.join(".");
 		parts.pop();
 
-		let iterator = new Set();
-
-		const query = `[${ATTRIBUTE_UPDATER_SELECT_THIS}][${ATTRIBUTE_UPDATER_PROPERTIES}], [${ATTRIBUTE_UPDATER_PROPERTIES}*="path:${current}"], [${ATTRIBUTE_UPDATER_PROPERTIES}^="static:"], [${ATTRIBUTE_UPDATER_PROPERTIES}^="i18n:"]`;
-
-		const e = container.querySelectorAll(query);
-
-		if (e.length > 0) {
-			iterator = new Set([...e]);
-		}
-
-		if (container.matches(query)) {
-			iterator.add(container);
-		}
+		const iterator = getBindingCandidates(
+			container,
+			ATTRIBUTE_UPDATER_PROPERTIES,
+			candidateCache,
+		);
 
 		for (const [element] of iterator.entries()) {
 			if (mem.has(element)) continue;
-			mem.add(element);
 
-			// this case occurs when the ATTRIBUTE_UPDATER_SELECT_THIS attribute is set
-			if (!element.hasAttribute(ATTRIBUTE_UPDATER_PROPERTIES)) {
+			const properties = element.getAttribute(ATTRIBUTE_UPDATER_PROPERTIES);
+			if (!isString(properties)) {
 				continue;
 			}
-
-			const properties = element.getAttribute(ATTRIBUTE_UPDATER_PROPERTIES);
+			if (
+				!element.hasAttribute(ATTRIBUTE_UPDATER_SELECT_THIS) &&
+				!properties.includes(`path:${current}`) &&
+				!properties.startsWith("static:") &&
+				!properties.startsWith("i18n:")
+			) {
+				continue;
+			}
+			mem.add(element);
+			processed = true;
 			element.removeAttribute(ATTRIBUTE_ERRORMESSAGE);
 
 			for (let [, def] of Object.entries(properties.split(","))) {
@@ -1680,6 +1941,8 @@ function runUpdateProperties(container, parts, subject) {
 			}
 		}
 	}
+
+	return processed;
 }
 
 /**
@@ -2026,12 +2289,11 @@ function addObjectWithUpdaterToElement(elements, symbol, object, config = {}) {
 				u.setCallback(name, callback);
 			}
 		}
-
+		if (config.batchUpdates === true) {
+			u.setBatchUpdates(true);
+		}
 		result.push(
 			u.run().then(() => {
-				if (config.batchUpdates === true) {
-					u.setBatchUpdates(true);
-				}
 				if (config.eventProcessing === true) {
 					u.enableEventProcessing();
 				}

package/test/cases/dom/customelement.mjs

@@ -4,6 +4,7 @@ import * as chai from 'chai';
 import {internalSymbol} from "../../../source/constants.mjs";
 import {customElementUpdaterLinkSymbol} from "../../../source/dom/constants.mjs";
 import {getDocument} from "../../../source/dom/util.mjs";
+import {Observer} from "../../../source/types/observer.mjs";
 import {ProxyObserver} from "../../../source/types/proxyobserver.mjs";
 import {chaiDom} from "../../util/chai-dom.mjs";
 import {initJSDOM} from "../../util/jsdom.mjs";
@@ -28,7 +29,7 @@ const updaterSymbolSymbol = Symbol.for(updaterSymbolKey);
 
 describe('DOM', function () {
 
-    let CustomElement, registerCustomElement, TestComponent, document, TestComponent2, TestStateComponent, TestMutationComponent, HiddenStateClass, assignUpdaterToElement,
+    let CustomElement, registerCustomElement, updaterTransformerMethodsSymbol, TestComponent, document, TestComponent2, TestStateComponent, TestMutationComponent, HiddenStateClass, assignUpdaterToElement,
         addObjectWithUpdaterToElement;
 
     describe("assignUpdaterToElement", function () {
@@ -154,6 +155,7 @@ describe('DOM', function () {
                     try {
                         CustomElement = m['CustomElement'];
                         registerCustomElement = m['registerCustomElement'];
+                        updaterTransformerMethodsSymbol = m['updaterTransformerMethodsSymbol'];
                         TestComponent = class extends CustomElement {
                             static getTag() {
                                 return "monster-testclass"
@@ -510,6 +512,81 @@ describe('DOM', function () {
                     }, 20);
                 }, 10);
             });
+
+            it('should synchronize option arrays without unchanged proxy churn issue #517', async function () {
+                const htmlTAG = 'monster-testclass-array-sync-517';
+
+                if (!customElements.get(htmlTAG)) {
+                    class ArraySyncComponent extends CustomElement {
+                        static getTag() {
+                            return htmlTAG;
+                        }
+
+                        get defaults() {
+                            return Object.assign({}, super.defaults, {
+                                items: Array.from({length: 100}, (_, index) => `item-${index}`),
+                                unrelated: 0,
+								templates: {
+									main: '<span id="array-sync-value" data-monster-replace="path:items | call:joinItems"></span><span id="array-sync-value-second" data-monster-replace="path:items | call:joinItems"></span>',
+                                },
+                            });
+                        }
+
+                        [updaterTransformerMethodsSymbol]() {
+                            return {
+                                joinItems: (items) => items.join(','),
+                            };
+                        }
+                    }
+
+                    registerCustomElement(ArraySyncComponent);
+                }
+
+                const element = document.createElement(htmlTAG);
+                document.getElementById('test1').appendChild(element);
+                await new Promise((resolve) => setTimeout(resolve, 20));
+
+                const updaterGroups = element[customElementUpdaterLinkSymbol];
+                let linkedUpdater = null;
+                for (const group of updaterGroups) {
+                    for (const updater of group) {
+                        linkedUpdater = updater;
+                        break;
+                    }
+                    if (linkedUpdater) break;
+                }
+                expect(linkedUpdater).to.exist;
+
+                let notificationCount = 0;
+                class CountingObserver extends Observer {
+                    update(subject) {
+                        notificationCount++;
+                        return super.update(subject);
+                    }
+                }
+                const observer = new CountingObserver(() => {});
+                linkedUpdater[internalSymbol].subject.attachObserver(observer);
+
+                try {
+                    element.setOption('unrelated', 1);
+                    await new Promise((resolve) => setTimeout(resolve, 30));
+					expect(notificationCount).to.be.at.most(3);
+
+                    notificationCount = 0;
+                    element.setOption('items.50', 'changed');
+                    await new Promise((resolve) => setTimeout(resolve, 30));
+
+					expect(notificationCount).to.be.at.most(3);
+					expect(
+						element.shadowRoot.querySelector('#array-sync-value').textContent,
+					).to.contain('changed');
+					expect(
+						element.shadowRoot.querySelector('#array-sync-value-second').textContent,
+					).to.contain('changed');
+                } finally {
+                    linkedUpdater[internalSymbol].subject.detachObserver(observer);
+                }
+            });
         })
 
         describe('setOptions()', function () {
@@ -860,6 +937,64 @@ describe('DOM', function () {
 	        })
 
         describe('mutation observer lifecycle', function () {
+	            it('should coalesce child mutations without a refresh loop issue #517', async function () {
+	                const htmlTAG = 'monster-testclass-mutation-loop-517';
+
+	                if (!customElements.get(htmlTAG)) {
+	                    class MutationLoopComponent extends CustomElement {
+	                        static getTag() {
+	                            return htmlTAG;
+	                        }
+
+	                        get defaults() {
+	                            return Object.assign({}, super.defaults, {
+	                                shadowMode: false,
+	                                features: {
+	                                    mutationObserver: true,
+	                                },
+	                                templates: {
+	                                    main: '<span data-monster-replace="static:stable"></span>',
+	                                },
+	                            });
+	                        }
+	                    }
+
+	                    registerCustomElement(MutationLoopComponent);
+	                }
+
+	                const element = document.createElement(htmlTAG);
+	                document.getElementById('test1').appendChild(element);
+	                await new Promise((resolve) => setTimeout(resolve, 120));
+
+	                const updaterGroups = element[customElementUpdaterLinkSymbol];
+	                let linkedUpdater = null;
+	                for (const group of updaterGroups) {
+	                    for (const updater of group) {
+	                        linkedUpdater = updater;
+	                        break;
+	                    }
+	                    if (linkedUpdater) break;
+	                }
+	                expect(linkedUpdater).to.exist;
+
+	                let runCount = 0;
+	                const originalRun = linkedUpdater.run.bind(linkedUpdater);
+	                linkedUpdater.run = function () {
+	                    runCount++;
+	                    return originalRun();
+	                };
+
+	                element.appendChild(document.createElement('i'));
+	                element.appendChild(document.createElement('b'));
+	                element.appendChild(document.createElement('em'));
+	                await new Promise((resolve) => setTimeout(resolve, 160));
+
+	                expect(runCount).to.equal(1);
+	                expect(element.querySelector('[data-monster-replace]').textContent).to.equal(
+	                    'stable',
+	                );
+	            });
+
 	            it('should not rerun linked updaters after disconnect', function (done) {
 	                let mocks = document.getElementById('mocks');
 	                mocks.innerHTML = `<monster-testclass-mutation id="mutation-case"></monster-testclass-mutation>`;

package/test/cases/dom/updater.mjs

@@ -170,6 +170,7 @@ let htmlPatchVsReplace = `
 
 describe("DOM", function () {
   let Updater = null;
+  let addObjectWithUpdaterToElement = null;
 
   before(function (done) {
     const options = {};
@@ -177,6 +178,7 @@ describe("DOM", function () {
       import("../../../source/dom/updater.mjs")
         .then((m) => {
           Updater = m.Updater;
+          addObjectWithUpdaterToElement = m.addObjectWithUpdaterToElement;
 
           if (!customElements.get("monster-test-property")) {
             class MonsterTestProperty extends HTMLElement {
@@ -1907,6 +1909,50 @@ describe("DOM", function () {
   });
 
   describe("Updater reactive updates", function () {
+    it("should enable configured batching before the initial run issue #517", async function () {
+      const originalRun = Updater.prototype.run;
+      const originalSetBatchUpdates = Updater.prototype.setBatchUpdates;
+      const batchedUpdaters = new WeakSet();
+      const batchStateAtRun = [];
+      const symbol = Symbol("initial-batch-test");
+      const element = document.createElement("div");
+      element.setAttribute("data-monster-replace", "path:value");
+      document.getElementById("mocks").appendChild(element);
+
+      Updater.prototype.setBatchUpdates = function (enabled) {
+        if (enabled === true) {
+          batchedUpdaters.add(this);
+        }
+        return originalSetBatchUpdates.call(this, enabled);
+      };
+      Updater.prototype.run = function () {
+        batchStateAtRun.push(batchedUpdaters.has(this));
+        return originalRun.call(this);
+      };
+
+      let updaters = [];
+      try {
+        updaters = await Promise.all(
+          addObjectWithUpdaterToElement.call(
+            element,
+            element,
+            symbol,
+            { value: "initial" },
+            { batchUpdates: true },
+          ),
+        );
+
+        expect(batchStateAtRun).to.deep.equal([true]);
+        expect(element.textContent).to.equal("initial");
+      } finally {
+        Updater.prototype.run = originalRun;
+        Updater.prototype.setBatchUpdates = originalSetBatchUpdates;
+        for (const updater of updaters) {
+          updater.dispose();
+        }
+      }
+    });
+
     [false, true].forEach((batchUpdates) => {
       it(`should preserve microtask changes with batchUpdates=${batchUpdates} issue #496`, async function () {
         let mocks = document.getElementById("mocks");
@@ -1938,6 +1984,134 @@ describe("DOM", function () {
       });
     });
 
+    [false, true].forEach((batchUpdates) => {
+      it(`should render each binding once per snapshot with batchUpdates=${batchUpdates} issue #517`, async function () {
+        const mocks = document.getElementById("mocks");
+        const staticBindings = Array.from(
+          { length: 20 },
+          (_, index) =>
+            `<span data-index="${index}" data-monster-replace="static:marker | call:trackStatic"></span>`,
+        ).join("");
+        mocks.innerHTML = `
+          <span id="snapshot-items" data-monster-replace="path:items | call:lastItem"></span>
+          ${staticBindings}
+          <span id="snapshot-attribute" data-monster-attributes="title path:items | call:trackAttribute"></span>
+          <input id="snapshot-property" data-monster-properties="value path:items | call:trackProperty">
+        `;
+
+        const updater = new Updater(mocks, { items: [] });
+        updater.setBatchUpdates(batchUpdates);
+        let staticRenderCount = 0;
+        let attributeRenderCount = 0;
+        let propertyRenderCount = 0;
+        updater.setCallback("trackStatic", (value) => {
+          staticRenderCount++;
+          return value;
+        });
+        updater.setCallback("lastItem", (value) => value.at(-1) ?? "");
+        updater.setCallback("trackAttribute", (value) => {
+          attributeRenderCount++;
+          return value;
+        });
+        updater.setCallback("trackProperty", (value) => {
+          propertyRenderCount++;
+          return value;
+        });
+
+        let innerHTMLDescriptor = null;
+        let replacementWrites = 0;
+        try {
+          await updater.run();
+          staticRenderCount = 0;
+          attributeRenderCount = 0;
+          propertyRenderCount = 0;
+
+          innerHTMLDescriptor = Object.getOwnPropertyDescriptor(
+            Element.prototype,
+            "innerHTML",
+          );
+          Object.defineProperty(Element.prototype, "innerHTML", {
+            configurable: innerHTMLDescriptor.configurable,
+            enumerable: innerHTMLDescriptor.enumerable,
+            get: innerHTMLDescriptor.get,
+            set(value) {
+              if (
+                mocks.contains(this) &&
+                this.hasAttribute("data-monster-replace")
+              ) {
+                replacementWrites++;
+              }
+              return innerHTMLDescriptor.set.call(this, value);
+            },
+          });
+
+          const items = updater.getSubject().items;
+          for (let index = 0; index < 500; index++) {
+            items.push(`new-${index}`);
+          }
+
+          await new Promise((resolve) => setTimeout(resolve, 30));
+
+          expect(document.getElementById("snapshot-items").textContent).to.equal(
+            "new-499",
+          );
+          expect(staticRenderCount).to.equal(20);
+          expect(attributeRenderCount).to.equal(1);
+          expect(propertyRenderCount).to.equal(1);
+          expect(replacementWrites).to.equal(1);
+        } finally {
+          updater.dispose();
+          if (innerHTMLDescriptor) {
+            Object.defineProperty(
+              Element.prototype,
+              "innerHTML",
+              innerHTMLDescriptor,
+            );
+          }
+        }
+      });
+    });
+
+    it("should not rewrite unchanged replacement content issue #517", async function () {
+      const mocks = document.getElementById("mocks");
+      mocks.innerHTML = `
+        <span id="unchanged-replacement" data-monster-replace="static:same"></span>
+      `;
+
+      const element = document.getElementById("unchanged-replacement");
+      const descriptor = Object.getOwnPropertyDescriptor(
+        Element.prototype,
+        "innerHTML",
+      );
+      let writes = 0;
+
+      Object.defineProperty(Element.prototype, "innerHTML", {
+        configurable: descriptor.configurable,
+        enumerable: descriptor.enumerable,
+        get: descriptor.get,
+        set(value) {
+          if (this === element) {
+            writes++;
+          }
+          return descriptor.set.call(this, value);
+        },
+      });
+
+      const updater = new Updater(mocks, { trigger: 0 });
+      try {
+        await updater.run();
+        writes = 0;
+        updater.getSubject().trigger = 1;
+        await new Promise((resolve) => setTimeout(resolve, 20));
+
+        expect(element.textContent).to.equal("same");
+        expect(writes).to.equal(0);
+      } finally {
+        updater.dispose();
+        Object.defineProperty(Element.prototype, "innerHTML", descriptor);
+      }
+    });
+
     it("should update the DOM when the subject changes", function (done) {
       let mocks = document.getElementById("mocks");
       mocks.innerHTML = html1;