@schukai/monster 4.103.1 → 4.105.0

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 
 
+## [4.105.0] - 2026-01-22
+
+### Add Features
+
+- Shorten tab labels for better readability
+- Add write-back sanitizer for cleaner dataset diffs
+### Bug Fixes
+
+- tabs labels
+- update
+
+
+
+## [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.105.0"}

package/source/components/datatable/dataset.mjs

@@ -26,7 +26,7 @@ import {
 	getDocument,
 	getWindow,
 } from "../../dom/util.mjs";
-import { isString } from "../../types/is.mjs";
+import { isArray, isObject, isString } from "../../types/is.mjs";
 import { Observer } from "../../types/observer.mjs";
 import {
 	ATTRIBUTE_DATASOURCE_SELECTOR,
@@ -40,6 +40,8 @@ import {
 } from "./util.mjs";
 import { FormStyleSheet } from "../stylesheet/form.mjs";
 import { addErrorAttribute } from "../../dom/error.mjs";
+import { Pipe } from "../../data/pipe.mjs";
+import { clone } from "../../util/clone.mjs";
 
 export { DataSet };
 
@@ -135,6 +137,11 @@ class DataSet extends CustomElement {
 					"input, select, textarea, monster-select, monster-toggle-switch",
 			},
 
+			writeBack: {
+				transformer: null,
+				callbacks: null,
+			},
+
 			data: {},
 		});
 
@@ -204,6 +211,17 @@ class DataSet extends CustomElement {
 					pathWithIndex = String(index);
 				}
 
+				let sanitizedData;
+				try {
+					sanitizedData = applyWriteBackTransform.call(
+						this,
+						clone(internalData),
+					);
+				} catch (e) {
+					reject(e);
+					return;
+				}
+
 				if (this.getOption("features.skipNoopWrite") === true) {
 					const currentData = this[datasourceLinkedElementSymbol]?.data;
 					let currentValue;
@@ -214,7 +232,7 @@ class DataSet extends CustomElement {
 							currentValue = undefined;
 						}
 					}
-					if (diff(currentValue, internalData).length === 0) {
+					if (diff(currentValue, sanitizedData).length === 0) {
 						resolve();
 						return;
 					}
@@ -223,7 +241,7 @@ class DataSet extends CustomElement {
 				if (this.getOption("logLevel") === "debug") {
 					console.log("monster-dataset: write", {
 						path: pathWithIndex,
-						data: internalData,
+						data: sanitizedData,
 					});
 				}
 
@@ -236,7 +254,7 @@ class DataSet extends CustomElement {
 				const unref = JSON.stringify(data);
 				const ref = JSON.parse(unref);
 
-				new Pathfinder(ref).setVia(pathWithIndex, internalData);
+				new Pathfinder(ref).setVia(pathWithIndex, sanitizedData);
 
 				this[datasourceLinkedElementSymbol].data = ref;
 
@@ -447,4 +465,45 @@ function getTemplate() {
     `;
 }
 
+/**
+ * @private
+ * @param {Object|Array} data
+ * @return {Object|Array}
+ */
+function applyWriteBackTransform(data) {
+	const transformer = this.getOption("writeBack.transformer");
+	if (transformer === undefined || transformer === null || transformer === "") {
+		return clone(data);
+	}
+
+	const pipe = new Pipe(transformer);
+	const callbacks = this.getOption("writeBack.callbacks");
+
+	if (isArray(callbacks)) {
+		for (const callback of callbacks) {
+			if (typeof callback === "function") {
+				pipe.setCallback(callback);
+			}
+		}
+	}
+
+	if (isObject(callbacks)) {
+		for (const key in callbacks) {
+			if (
+				Object.prototype.hasOwnProperty.call(callbacks, key) &&
+				typeof callbacks[key] === "function"
+			) {
+				pipe.setCallback(key, callbacks[key]);
+			}
+		}
+	}
+
+	const result = pipe.run(data);
+	if (typeof result === "undefined") {
+		return clone(data);
+	}
+
+	return clone(result);
+}
+
 registerCustomElement(DataSet);

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/components/form/form.mjs

@@ -91,6 +91,8 @@ class Form extends DataSet {
 
 			writeBack: {
 				events: ["keyup", "click", "change", "drop", "touchend", "input"],
+				transformer: null,
+				callbacks: null,
 			},
 
 			reportValidity: {

package/source/components/layout/tabs.mjs

@@ -1326,6 +1326,16 @@ function getButtonLabel(node) {
 		label = "";
 	}
 
+	if (setLabel === true) {
+		if (label.trim() === "") {
+			label = node.textContent || "";
+		}
+		label = label.replace(/\s+/g, " ").trim();
+		const words = label.split(" ").filter((word) => word !== "");
+		if (words.length > 3) {
+			label = `${words.slice(0, 3).join(" ")}…`;
+		}
+	}
 	label = label.trim();
 
 	if (label === "") {

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

package/source/types/version.mjs

@@ -156,7 +156,7 @@ function getMonsterVersion() {
 	}
 
 	/** don't touch, replaced by make with package.json version */
-	monsterVersion = new Version("4.94.0");
+	monsterVersion = new Version("4.104.0");
 
 	return monsterVersion;
 }

package/test/cases/components/datatable/writeback-sanitizer.mjs

@@ -0,0 +1,104 @@
+import * as chai from 'chai';
+import {chaiDom} from "../../../util/chai-dom.mjs";
+import {initJSDOM} from "../../../util/jsdom.mjs";
+
+let expect = chai.expect;
+chai.use(chaiDom);
+
+let Dataset;
+
+function buildDatasource(id, payload) {
+    const ds = document.createElement('monster-datasource-dom');
+    ds.id = id;
+    ds.innerHTML = `<script type="application/json">${JSON.stringify(payload)}</script>`;
+    return ds;
+}
+
+describe('Dataset writeBack sanitizer', function () {
+
+    before(async function () {
+        await initJSDOM();
+        await import("element-internals-polyfill").catch(() => {});
+        await import("../../../../source/components/datatable/datasource/dom.mjs");
+        const mod = await import("../../../../source/components/datatable/dataset.mjs");
+        Dataset = mod['DataSet'];
+    });
+
+    beforeEach(() => {
+        const mocks = document.getElementById('mocks');
+        mocks.innerHTML = '';
+    });
+
+    afterEach(() => {
+        const mocks = document.getElementById('mocks');
+        mocks.innerHTML = '';
+    });
+
+    it('sanitizes data before write and avoids side effects', async function () {
+        const mocks = document.getElementById('mocks');
+        const ds = buildDatasource('ds-sanitize', [{}]);
+        mocks.appendChild(ds);
+
+        const dataset = document.createElement('monster-dataset');
+        expect(dataset).is.instanceof(Dataset);
+
+        dataset.setOption('datasource.selector', '#ds-sanitize');
+        dataset.setOption('mapping.data', '');
+
+        const initial = {name: '', email: 'a@b', tags: []};
+        dataset.setOption('data', initial);
+
+        dataset.setOption('writeBack.transformer', 'call:sanitize');
+        dataset.setOption('writeBack.callbacks', {
+            sanitize: (obj) => {
+                for (const [key, value] of Object.entries(obj)) {
+                    if (value === '' || value === null || value === undefined) {
+                        delete obj[key];
+                        continue;
+                    }
+                    if (Array.isArray(value) && value.length === 0) {
+                        delete obj[key];
+                    }
+                }
+                return obj;
+            },
+        });
+
+        mocks.appendChild(dataset);
+
+        await new Promise((resolve) => setTimeout(resolve, 30));
+        await dataset.write();
+
+        expect(ds.data[0]).deep.equal({email: 'a@b'});
+
+        const internal = dataset.getInternalUpdateCloneData();
+        expect(internal.data).deep.equal({name: '', email: 'a@b', tags: []});
+        expect(initial).deep.equal({name: '', email: 'a@b', tags: []});
+    });
+
+    it('uses original data when sanitizer returns undefined', async function () {
+        const mocks = document.getElementById('mocks');
+        const ds = buildDatasource('ds-undefined', [{}]);
+        mocks.appendChild(ds);
+
+        const dataset = document.createElement('monster-dataset');
+        dataset.setOption('datasource.selector', '#ds-undefined');
+        dataset.setOption('mapping.data', '');
+
+        const initial = {name: '', email: 'a@b'};
+        dataset.setOption('data', initial);
+
+        dataset.setOption('writeBack.transformer', 'call:noop');
+        dataset.setOption('writeBack.callbacks', {
+            noop: () => undefined,
+        });
+
+        mocks.appendChild(dataset);
+
+        await new Promise((resolve) => setTimeout(resolve, 30));
+        await dataset.write();
+
+        expect(ds.data[0]).deep.equal({name: '', email: 'a@b'});
+    });
+
+});

package/test/cases/components/layout/tabs.mjs

@@ -92,7 +92,30 @@ describe('Tabs', function () {
 
         });
 
+        it('should shorten label from content when no explicit label is provided', function (done) {
+
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = html1;
+
+            setTimeout(() => {
+                try {
+                    const tabs = document.getElementById('mytabs');
+                    expect(tabs).is.instanceof(Tabs);
+
+                    setTimeout(() => {
+                        const buttons = tabs.shadowRoot.querySelectorAll('button[part=button]');
+                        const labelSpan = buttons[2].querySelector('span[data-monster-replace]');
+                        expect(labelSpan).to.not.equal(null);
+                        expect(labelSpan.textContent.trim()).to.equal('Das ist tab…');
+                        done();
+                    }, 100);
+                } catch (e) {
+                    return done(e);
+                }
+            }, 0);
+        });
+
     });
 
 
-});
+});

package/test/cases/monster.mjs

@@ -7,7 +7,7 @@ describe('Monster', function () {
         let monsterVersion
 
         /** don´t touch, replaced by make with package.json version */
-        monsterVersion = new Version("4.94.0")
+        monsterVersion = new Version("4.104.0")
 
         let m = getMonsterVersion();
 

package/test/web/test.html

@@ -9,8 +9,8 @@
 </head>
 <body>
 <div id="headline" style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
-  <h1 style='margin-bottom: 0.1em;'>Monster 4.94.0</h1>
-  <div id="lastupdate" style='font-size:0.7em'>last update Di 13. Jan 13:09:31 CET 2026</div>
+  <h1 style='margin-bottom: 0.1em;'>Monster 4.104.0</h1>
+  <div id="lastupdate" style='font-size:0.7em'>last update Mi 21. Jan 21:19:58 CET 2026</div>
 </div>
 <div id="mocha-errors"
      style="color: red;font-weight: bold;display: flex;align-items: center;justify-content: center;flex-direction: column;margin:20px;"></div>