@schukai/monster 4.103.1 → 4.104.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 
 
+## [4.104.0] - 2026-01-19
+
+### Add Features
+
+- Add batching feature for updates in the DataTable and CustomElement
+
+
+
 ## [4.103.1] - 2026-01-19
 
 ### Bug Fixes

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.103.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.104.0"}

package/source/components/datatable/datatable.mjs

@@ -202,6 +202,8 @@ class DataTable extends CustomElement {
 	 * @property {string} copy.quoteOpen Quote open character
 	 * @property {string} copy.quoteClose Quote close character
 	 * @property {string} copy.rowBreak Row break character
+	 * @property {Object} updater Updater configuration
+	 * @property {boolean} updater.batchUpdates Enables batched updater content/attribute updates
 	 * @property {Object} templateMapping Template mapping
 	 * @property {string} templateMapping.row-key Row key
 	 * @property {string} templateMapping.filter-id Filter id
@@ -257,6 +259,10 @@ class DataTable extends CustomElement {
 					rowBreak: "\n",
 				},
 
+				updater: {
+					batchUpdates: true,
+				},
+
 				templateMapping: {
 					"row-key": null,
 					"filter-id": null,

package/source/dom/customelement.mjs

@@ -314,6 +314,8 @@ class CustomElement extends HTMLElement {
 	 * @property {Function} templateFormatter.marker.close=null Specifies the closing marker for the templates.
 	 * @property {Boolean} templateFormatter.i18n=false Specifies whether the templates should be formatted with i18n.
 	 * @property {Boolean} eventProcessing=false Specifies whether the control processes events.
+	 * @property {Object} updater Specifies updater options.
+	 * @property {Boolean} updater.batchUpdates=false Batches updater content/attribute updates per diff.
 	 * @since 1.8.0
 	 */
 	get defaults() {
@@ -334,6 +336,9 @@ class CustomElement extends HTMLElement {
 			},
 
 			eventProcessing: false,
+			updater: {
+				batchUpdates: false,
+			},
 		};
 	}
 
@@ -651,6 +656,9 @@ class CustomElement extends HTMLElement {
 		if (this.getOption("eventProcessing") === true) {
 			cfg.eventProcessing = true;
 		}
+		if (this.getOption("updater.batchUpdates") === true) {
+			cfg.batchUpdates = true;
+		}
 		addObjectWithUpdaterToElement.call(
 			this,
 			nodeList,

package/source/dom/updater.mjs

@@ -71,6 +71,8 @@ const pendingDiffsSymbol = Symbol("pendingDiffs");
  * @type {symbol}
  */
 const processingSymbol = Symbol("processing");
+const processQueueSymbol = Symbol("processQueue");
+const applyChangeSymbol = Symbol("applyChange");
 const updaterRootSymbol = Symbol.for("@schukai/monster/dom/@@updater-root");
 
 /**
@@ -125,6 +127,9 @@ class Updater extends Base {
 			callbacks: new Map(),
 			eventTypes: ["keyup", "click", "change", "drop", "touchend", "input"],
 			subject: subject,
+			features: {
+				batchUpdates: false,
+			},
 		};
 
 		this[internalSymbol].callbacks.set(
@@ -144,7 +149,7 @@ class Updater extends Base {
 					return Promise.resolve();
 				}
 				this[pendingDiffsSymbol].push(diffResult);
-				return this.#processQueue();
+				return this[processQueueSymbol]();
 			}),
 		);
 	}
@@ -153,7 +158,7 @@ class Updater extends Base {
 	 * @private
 	 * @return {Promise}
 	 */
-	async #processQueue() {
+	async [processQueueSymbol]() {
 		if (this[processingSymbol]) {
 			return Promise.resolve();
 		}
@@ -162,8 +167,34 @@ class Updater extends Base {
 		try {
 			while (this[pendingDiffsSymbol].length) {
 				const diffResult = this[pendingDiffsSymbol].shift();
-				for (const change of Object.values(diffResult)) {
-					await this.#applyChange(change);
+				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 path = isArray(change?.["path"]) ? change["path"] : null;
+						if (!path) {
+							continue;
+						}
+						if (path.length === 0) {
+							updatePaths.set("", path);
+							continue;
+						}
+						const root = path[0];
+						if (!updatePaths.has(root)) {
+							updatePaths.set(root, [root]);
+						}
+					}
+
+					for (const path of updatePaths.values()) {
+						updateContent.call(this, { path });
+						updateAttributes.call(this, { path });
+					}
+				} else {
+					for (const change of Object.values(diffResult)) {
+						await this[applyChangeSymbol](change);
+					}
 				}
 			}
 		} catch (err) {
@@ -174,7 +205,7 @@ class Updater extends Base {
 	}
 
 	/** @private **/
-	async #applyChange(change) {
+	async [applyChangeSymbol](change) {
 		removeElement.call(this, change);
 		insertElement.call(this, change);
 		updateContent.call(this, change);
@@ -195,6 +226,18 @@ class Updater extends Base {
 		return this;
 	}
 
+	/**
+	 * Enable or disable batched update processing.
+	 *
+	 * @since 4.104.0
+	 * @param {boolean} enabled
+	 * @return {Updater}
+	 */
+	setBatchUpdates(enabled) {
+		this[internalSymbol].features.batchUpdates = enabled === true;
+		return this;
+	}
+
 	/**
 	 * With this method, the eventlisteners are hooked in and the magic begins.
 	 *
@@ -1097,6 +1140,7 @@ function handleInputControlAttributeUpdate(element, name, value) {
  * @param {object} config
  *
  * Config: enableEventProcessing {boolean} - default: false - enables the event processing
+ * Config: batchUpdates {boolean} - default: false - batches updateContent/updateAttributes per diff
  *
  * @return {Promise[]}
  * @license AGPLv3
@@ -1169,6 +1213,9 @@ function addObjectWithUpdaterToElement(elements, symbol, object, config = {}) {
 
 		result.push(
 			u.run().then(() => {
+				if (config.batchUpdates === true) {
+					u.setBatchUpdates(true);
+				}
 				if (config.eventProcessing === true) {
 					u.enableEventProcessing();
 				}