@schukai/monster 4.104.0 → 4.105.0

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 
 
+## [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

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.104.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.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/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/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>