@schukai/monster 4.70.0 → 4.70.1

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 
 
+## [4.70.1] - 2026-01-03
+
+### Bug Fixes
+
+- timing issues [#359](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/359)
+
+
+
 ## [4.70.0] - 2026-01-03
 
 ### Add Features

package/package.json

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

package/source/components/datatable/dataset.mjs

@@ -155,9 +155,8 @@ class DataSet extends CustomElement {
 	refresh() {
 		// makes sure that handleDataSourceChanges is called
 		return new Promise((resolve) => {
-			this.setOption("data", {});
 			queueMicrotask(() => {
-				handleDataSourceChanges.call(this);
+				handleDataSourceChanges.call(this, true);
 				resolve();
 			});
 		});

package/source/components/datatable/save-button.mjs

@@ -61,6 +61,7 @@ const originValuesSymbol = Symbol("originValues");
 const badgeElementSymbol = Symbol("badgeElement");
 const saveInFlightSymbol = Symbol("saveInFlight");
 const pendingResetSymbol = Symbol("pendingReset");
+const fetchInFlightSymbol = Symbol("fetchInFlight");
 
 /**
  * A save button component
@@ -186,8 +187,21 @@ class SaveButton extends CustomElement {
 						self[pendingResetSymbol] = true;
 						return;
 					}
+					self[fetchInFlightSymbol] = true;
 					self[originValuesSymbol] = null;
 				});
+				element.addEventListener("monster-datasource-fetched", () => {
+					self[fetchInFlightSymbol] = false;
+					if (!self[originValuesSymbol]) {
+						self[originValuesSymbol] = clone(
+							self[datasourceLinkedElementSymbol].data,
+						);
+						updateChangesState.call(self);
+					}
+				});
+				element.addEventListener("monster-datasource-error", () => {
+					self[fetchInFlightSymbol] = false;
+				});
 			}
 
 			this[datasourceLinkedElementSymbol] = element;
@@ -199,92 +213,16 @@ class SaveButton extends CustomElement {
 
 			element.datasource.attachObserver(
 				new Observer(function () {
+					if (self[fetchInFlightSymbol] === true) {
+						return;
+					}
 					if (!self[originValuesSymbol]) {
 						self[originValuesSymbol] = clone(
 							self[datasourceLinkedElementSymbol].data,
 						);
 					}
 
-					const currentValues = this.getRealSubject();
-					const ignoreChanges = self.getOption("ignoreChanges");
-
-					const result = diff(self[originValuesSymbol], currentValues);
-					if (
-						self.getOption("logLevel") === "debug" ||
-						location.search.includes("logLevel=debug")
-					) {
-						console.groupCollapsed("SaveButton");
-						console.log(
-							"originValues",
-							JSON.parse(JSON.stringify(currentValues)),
-						);
-						console.log("result of diff", result);
-						console.log("ignoreChanges", ignoreChanges);
-
-						if (isArray(result) && result.length > 0) {
-							const formattedDiff = result.map((change) => ({
-								Operator: change?.operator,
-								Path: change?.path?.join("."),
-								"First Value": change?.first?.value,
-								"First Type": change?.first?.type,
-								"Second Value": change?.second?.value,
-								"Second Type": change?.second?.type,
-							}));
-
-							console.table(formattedDiff);
-						} else {
-							console.log("There are no changes to save");
-						}
-						console.groupEnd();
-					}
-
-					if (isArray(ignoreChanges) && ignoreChanges.length > 0) {
-						const itemsToRemove = [];
-						for (const item of result) {
-							for (const ignorePattern of ignoreChanges) {
-								const p = new RegExp(ignorePattern);
-
-								let matchPath = item.path;
-								if (isArray(item.path)) {
-									matchPath = item.path.join(".");
-								}
-
-								if (p.test(matchPath)) {
-									itemsToRemove.push(item);
-									break;
-								}
-							}
-						}
-
-						for (const itemToRemove of itemsToRemove) {
-							const index = result.indexOf(itemToRemove);
-							if (index > -1) {
-								result.splice(index, 1);
-							}
-						}
-					}
-
-					if (isArray(result) && result.length > 0) {
-						self[stateButtonElementSymbol].setState("changed");
-						self[stateButtonElementSymbol].setOption("disabled", false);
-						self.setOption("changes", result.length);
-						self.setOption(
-							"classes.badge",
-							new TokenList(self.getOption("classes.badge"))
-								.remove("hidden")
-								.toString(),
-						);
-					} else {
-						self[stateButtonElementSymbol].removeState();
-						self[stateButtonElementSymbol].setOption("disabled", true);
-						self.setOption("changes", 0);
-						self.setOption(
-							"classes.badge",
-							new TokenList(self.getOption("classes.badge"))
-								.add("hidden")
-								.toString(),
-						);
-					}
+					updateChangesState.call(self);
 				}),
 			);
 		}
@@ -440,6 +378,91 @@ function initEventHandler() {
 	});
 }
 
+/**
+ * @private
+ */
+function updateChangesState() {
+	const currentValues = this[datasourceLinkedElementSymbol]?.datasource?.get();
+	const ignoreChanges = this.getOption("ignoreChanges");
+	let result = diff(this[originValuesSymbol], currentValues);
+
+	if (
+		this.getOption("logLevel") === "debug" ||
+		location.search.includes("logLevel=debug")
+	) {
+		console.groupCollapsed("SaveButton");
+		console.log(
+			"originValues",
+			JSON.parse(JSON.stringify(this[originValuesSymbol])),
+		);
+		console.log("currentValues", JSON.parse(JSON.stringify(currentValues)));
+		console.log("result of diff", result);
+		console.log("ignoreChanges", ignoreChanges);
+
+		if (isArray(result) && result.length > 0) {
+			const formattedDiff = result.map((change) => ({
+				Operator: change?.operator,
+				Path: change?.path?.join("."),
+				"First Value": change?.first?.value,
+				"First Type": change?.first?.type,
+				"Second Value": change?.second?.value,
+				"Second Type": change?.second?.type,
+			}));
+
+			console.table(formattedDiff);
+		} else {
+			console.log("There are no changes to save");
+		}
+		console.groupEnd();
+	}
+
+	if (isArray(ignoreChanges) && ignoreChanges.length > 0) {
+		const itemsToRemove = [];
+		for (const item of result) {
+			for (const ignorePattern of ignoreChanges) {
+				const p = new RegExp(ignorePattern);
+
+				let matchPath = item.path;
+				if (isArray(item.path)) {
+					matchPath = item.path.join(".");
+				}
+
+				if (p.test(matchPath)) {
+					itemsToRemove.push(item);
+					break;
+				}
+			}
+		}
+
+		for (const itemToRemove of itemsToRemove) {
+			const index = result.indexOf(itemToRemove);
+			if (index > -1) {
+				result.splice(index, 1);
+			}
+		}
+	}
+
+	if (isArray(result) && result.length > 0) {
+		this[stateButtonElementSymbol].setState("changed");
+		this[stateButtonElementSymbol].setOption("disabled", false);
+		this.setOption("changes", result.length);
+		this.setOption(
+			"classes.badge",
+			new TokenList(this.getOption("classes.badge"))
+				.remove("hidden")
+				.toString(),
+		);
+	} else {
+		this[stateButtonElementSymbol].removeState();
+		this[stateButtonElementSymbol].setOption("disabled", true);
+		this.setOption("changes", 0);
+		this.setOption(
+			"classes.badge",
+			new TokenList(this.getOption("classes.badge")).add("hidden").toString(),
+		);
+	}
+}
+
 /**
  * @param {Object} options
  * @deprecated 2024-12-31

package/source/components/datatable/util.mjs

@@ -16,6 +16,7 @@ import { diff } from "../../data/diff.mjs";
 import { Pathfinder } from "../../data/pathfinder.mjs";
 import { isObject, isPrimitive } from "../../types/is.mjs";
 import { Observer } from "../../types/observer.mjs";
+import { clone } from "../../util/clone.mjs";
 
 export { handleDataSourceChanges, datasourceLinkedElementSymbol };
 
@@ -29,7 +30,7 @@ const dataChangeVersionSymbol = Symbol("dataChangeVersion");
 /**
  * @private
  */
-function handleDataSourceChanges() {
+function handleDataSourceChanges(force = false) {
 	if (!this[datasourceLinkedElementSymbol]) {
 		return;
 	}
@@ -69,15 +70,20 @@ function handleDataSourceChanges() {
 		data = [];
 	}
 
-	const result = diff(data, actualDataAsObj);
-	if (result.length === 0) {
-		return;
-	}
-
 	queueMicrotask(() => {
 		if (this[dataChangeVersionSymbol] !== version) {
 			return;
 		}
+		if (force) {
+			this.setOption("data", clone(data));
+			return;
+		}
+
+		const result = diff(data, actualDataAsObj);
+		if (result.length === 0) {
+			return;
+		}
+
 		this.setOption("data", data);
 	});
 }

package/source/components/form/select.mjs

@@ -252,6 +252,11 @@ const runLookupOnceSymbol = Symbol("runLookupOnce");
  * @type {symbol}
  */
 const cleanupOptionsListSymbol = Symbol("cleanupOptionsList");
+const optionsVersionSymbol = Symbol("optionsVersion");
+const pendingSelectionSymbol = Symbol("pendingSelection");
+const selectionSyncScheduledSymbol = Symbol("selectionSyncScheduled");
+const optionsSnapshotSymbol = Symbol("optionsSnapshot");
+const selectionVersionSymbol = Symbol("selectionVersion");
 
 /**
  * @private
@@ -950,6 +955,77 @@ function processAndApplyPaginationData(data) {
 	}
 }
 
+/**
+ * @private
+ * @returns {number}
+ */
+function bumpOptionsVersion() {
+	if (!isInteger(this[optionsVersionSymbol])) {
+		this[optionsVersionSymbol] = 0;
+	}
+	this[optionsVersionSymbol] += 1;
+	return this[optionsVersionSymbol];
+}
+
+/**
+ * @private
+ * @returns {*}
+ */
+function getSelectionSyncState() {
+	const attrValue = this.getAttribute("value");
+	const selection = this.getOption("selection");
+	const options = this.getOption("options");
+	const optionsLength = Array.isArray(options) ? options.length : 0;
+	return { attrValue, selection, optionsLength };
+}
+
+/**
+ * @private
+ * @param {number} version
+ */
+function scheduleSelectionSync(version) {
+	const state = getSelectionSyncState.call(this);
+	const selectionIsEmpty =
+		Array.isArray(state.selection) && state.selection.length === 0;
+
+	if (state.attrValue === null && selectionIsEmpty) {
+		return;
+	}
+
+	const pending = {
+		version,
+		selectionVersion: this[selectionVersionSymbol] || 0,
+		value: state.attrValue !== null ? state.attrValue : state.selection,
+	};
+	this[pendingSelectionSymbol] = pending;
+
+	if (this[selectionSyncScheduledSymbol] === true) {
+		return;
+	}
+	this[selectionSyncScheduledSymbol] = true;
+
+	queueMicrotask(() => {
+		this[selectionSyncScheduledSymbol] = false;
+		const current = this[pendingSelectionSymbol];
+		if (!current) {
+			return;
+		}
+		if (current.version !== this[optionsVersionSymbol]) {
+			return;
+		}
+		if (current.selectionVersion !== (this[selectionVersionSymbol] || 0)) {
+			return;
+		}
+
+		setSelection
+			.call(this, current.value)
+			.then(() => {})
+			.catch((e) => {
+				addErrorAttribute(this, e);
+			});
+	});
+}
+
 /**
  * @private
  * @param data
@@ -1011,8 +1087,9 @@ function importOptionsIntern(data) {
 	const map = buildMap(data, selector, labelTemplate, valueTemplate, filter);
 
 	let options = [];
+	const currentOptions = this.getOption("options");
 	if (this[cleanupOptionsListSymbol] !== true) {
-		options = this.getOption("options", []);
+		options = currentOptions ?? [];
 	}
 
 	this[cleanupOptionsListSymbol] = false;
@@ -1092,17 +1169,10 @@ function importOptionsIntern(data) {
 		options,
 	});
 
-	setTimeout(() => {
-		const attrValue = this.getAttribute("value");
-		const selection =
-			attrValue !== null ? attrValue : this.getOption("selection");
-		setSelection
-			.call(this, selection)
-			.then(() => {})
-			.catch((e) => {
-				addErrorAttribute(this, e);
-			});
-	}, 10);
+	if (options === currentOptions) {
+		const version = bumpOptionsVersion.call(this);
+		scheduleSelectionSync.call(this, version);
+	}
 
 	return this;
 }
@@ -1675,24 +1745,13 @@ function fetchIt(url, controlOptions) {
 
 						this[lastFetchedDataSymbol] = map;
 
-						let result;
-						const selection = this.getOption("selection");
-						let newValue = [];
-						if (selection) {
-							newValue = selection;
-						} else if (this.hasAttribute("value")) {
-							newValue = this.getAttribute("value");
-						}
-
-						result = setSelection.call(this, newValue);
-
 						queueMicrotask(() => {
 							checkOptionState.call(this);
 							setTotalText.call(this);
 							updatePopper.call(this);
 							setStatusOrRemoveBadges.call(this, "closed");
 
-							resolve(result);
+							resolve();
 						});
 
 						return;
@@ -1831,6 +1890,7 @@ function getSummaryTemplate() {
  */
 function parseSlotsToOptions() {
 	let options = this.getOption("options");
+	const currentOptions = options;
 	if (!isIterable(options)) {
 		options = [];
 	}
@@ -1858,6 +1918,8 @@ function parseSlotsToOptions() {
 	});
 
 	this.setOption("options", options);
+	const version = bumpOptionsVersion.call(this);
+	scheduleSelectionSync.call(this, version);
 }
 
 /**
@@ -2044,6 +2106,13 @@ function initOptionObserver() {
 
 	self.attachObserver(
 		new Observer(function () {
+			const options = self.getOption("options");
+			if (options !== self[optionsSnapshotSymbol]) {
+				self[optionsSnapshotSymbol] = options;
+				const version = bumpOptionsVersion.call(self);
+				scheduleSelectionSync.call(self, version);
+			}
+
 			new Processing(() => {
 				try {
 					self.updateI18n();
@@ -2785,6 +2854,11 @@ function gatherState() {
 		throw new Error("no shadow-root is defined");
 	}
 
+	const inputElements = this.shadowRoot.querySelectorAll(`input[type=${type}]`);
+	if (inputElements.length === 0) {
+		return this;
+	}
+
 	let filteredSelection = [];
 	if (type === "radio") {
 		const selection = [];
@@ -2802,7 +2876,7 @@ function gatherState() {
 		filteredSelection = selection;
 	} else {
 		const selection = [...this.getOption("selection", [])];
-		const allElements = this.shadowRoot.querySelectorAll(`input[type=${type}]`);
+		const allElements = inputElements;
 		const checkedElements = this.shadowRoot.querySelectorAll(
 			`input[type=${type}]:checked`,
 		);
@@ -3006,6 +3080,10 @@ function areOptionsAvailableAndInitInternal() {
 
 	if (updated) {
 		this.setOption("options", options);
+		if (options === currentOptions) {
+			const version = bumpOptionsVersion.call(this);
+			scheduleSelectionSync.call(this, version);
+		}
 	}
 
 	setStatusOrRemoveBadges.call(this);
@@ -3036,11 +3114,19 @@ function checkOptionState() {
 		return a.value;
 	});
 
+	const CLASSNAME = "selected";
 	for (const e of elements) {
+		const parent = e.closest(`[${ATTRIBUTE_ROLE}=option]`);
 		if (checkedValues.indexOf(e.value) !== -1) {
 			if (e.checked !== true) e.checked = true;
+			if (parent) {
+				parent.classList.add(CLASSNAME);
+			}
 		} else {
 			if (e.checked !== false) e.checked = false;
+			if (parent) {
+				parent.classList.remove(CLASSNAME);
+			}
 		}
 	}
 }
@@ -3191,6 +3277,11 @@ function setSelection(selection) {
 
 	selection = resultSelection;
 
+	if (!isInteger(this[selectionVersionSymbol])) {
+		this[selectionVersionSymbol] = 0;
+	}
+	this[selectionVersionSymbol] += 1;
+
 	this.setOption("selection", selection);
 
 	checkOptionState.call(this);

package/source/components/layout/slider.mjs

@@ -916,14 +916,14 @@ function getTemplate() {
 	// language=HTML
 	return `
         <div data-monster-role="control" part="control">
-            <div class="prev" data-monster-role="prev" part="prev">
+            <div class="prev hidden" data-monster-role="prev" part="prev">
                 <slot name="prev"></slot>
             </div>
             <div data-monster-role="slider" part="slides">
                 <slot></slot>
             </div>
-            <div data-monster-role="thumbnails" part="thumbnails"></div>
-            <div class="next" data-monster-role="next" part="next">
+            <div class="hidden" data-monster-role="thumbnails" part="thumbnails"></div>
+            <div class="next hidden" data-monster-role="next" part="next">
                 <slot name="next"></slot>
             </div>
         </div>`;

package/source/dom/customelement.mjs

@@ -98,6 +98,12 @@ const attributeObserverSymbol = Symbol.for(
 const attributeMutationObserverSymbol = Symbol(
 	"@schukai/monster/dom/@@mutationObserver",
 );
+const childMutationObserverSymbol = Symbol(
+	"@schukai/monster/dom/@@childMutationObserver",
+);
+const childMutationTimerSymbol = Symbol(
+	"@schukai/monster/dom/@@childMutationTimer",
+);
 
 /**
  * @private
@@ -221,6 +227,9 @@ class CustomElement extends HTMLElement {
 		this[initMethodSymbol]();
 		initOptionObserver.call(this);
 		this[scriptHostElementSymbol] = [];
+		// Catch attribute changes made before connectedCallback runs.
+		attachAttributeChangeMutationObserver.call(this);
+		attachChildMutationObserver.call(this);
 	}
 
 	/**
@@ -679,6 +688,14 @@ class CustomElement extends HTMLElement {
 	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]();
 		}
@@ -874,6 +891,65 @@ function attachAttributeChangeMutationObserver() {
 	}
 }
 
+/**
+ * @private
+ * @this CustomElement
+ */
+function attachChildMutationObserver() {
+	const self = this;
+
+	if (self[childMutationObserverSymbol]) {
+		return;
+	}
+
+	if (self.getOption("features.mutationObserver") !== true) {
+		return;
+	}
+
+	self[childMutationObserverSymbol] = new MutationObserver((mutations) => {
+		let hasAdditions = false;
+		for (const mutation of mutations) {
+			if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
+				hasAdditions = true;
+				break;
+			}
+		}
+
+		if (!hasAdditions) {
+			return;
+		}
+
+		if (self[childMutationTimerSymbol]) {
+			return;
+		}
+
+		self[childMutationTimerSymbol] = setTimeout(() => {
+			self[childMutationTimerSymbol] = null;
+			if (!hasObjectLink(self, customElementUpdaterLinkSymbol)) {
+				return;
+			}
+
+			const updaters = getLinkedObjects(self, customElementUpdaterLinkSymbol);
+			for (const list of updaters) {
+				for (const updater of list) {
+					updater.run().catch((e) => {
+						addErrorAttribute(self, e);
+					});
+				}
+			}
+		}, 50);
+	});
+
+	try {
+		self[childMutationObserverSymbol].observe(self, {
+			childList: true,
+			subtree: true,
+		});
+	} catch (e) {
+		addErrorAttribute(self, e);
+	}
+}
+
 /**
  * @this CustomElement
  * @private

package/source/dom/util/set-option-from-attribute.mjs

@@ -13,7 +13,15 @@
  */
 
 import { Pathfinder } from "../../data/pathfinder.mjs";
-import { isFunction } from "../../types/is.mjs";
+import {
+	isFunction,
+	isBoolean,
+	isString,
+	isObject,
+	isNumber,
+	isArray,
+	isInteger,
+} from "../../types/is.mjs";
 import { attributeObserverSymbol } from "../customelement.mjs";
 import { extractKeys } from "./extract-keys.mjs";
 
@@ -77,15 +85,27 @@ function setOptionFromAttribute(
 		value = mapping[optionName](value);
 	}
 
-	const typeOfOptionValue = typeof finder.getVia(optionName);
-	if (typeOfOptionValue === "boolean") {
+	let optionValue = finder.getVia(optionName);
+	if (optionValue === null || optionValue === undefined) {
+		optionValue = value;
+	}
+
+	if (optionValue === null || optionValue === undefined) {
+		value = null;
+	} else if (isBoolean(optionValue)) {
 		value = value === "true";
-	} else if (typeOfOptionValue === "number") {
+	} else if (isInteger(optionValue)) {
+		value = Number(value);
+	} else if (isNumber(optionValue)) {
 		value = Number(value);
-	} else if (typeOfOptionValue === "string") {
+	} else if (isString(optionValue)) {
 		value = String(value);
-	} else if (typeOfOptionValue === "object") {
+	} else if (isObject(optionValue)) {
 		value = JSON.parse(value);
+	} else if (isArray(optionValue)) {
+		value = value.split("::");
+	} else {
+		value = optionValue;
 	}
 
 	finder.setVia(optionName, value);