@schukai/monster 4.85.1 → 4.86.0

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 
 
+## [4.86.0] - 2026-01-10
+
+### Add Features
+
+- Add investigation for form writeback and control ([#370](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/370))
+### Changes
+
+- close issue
+
+
+
+## [4.85.2] - 2026-01-08
+
+### Bug Fixes
+
+- Rename issue [#368](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/368) to closed and add issue [#369](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/369)
+
+
+
 ## [4.85.1] - 2026-01-08
 
 ### 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.85.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.86.0"}

package/source/components/datatable/status.mjs

@@ -166,7 +166,8 @@ function initControlReferences() {
 	this[errorElementSymbol] = this.shadowRoot.querySelector(
 		"monster-context-error",
 	);
-	this[spinnerElementSymbol] = this.shadowRoot.querySelector(".monster-spinner");
+	this[spinnerElementSymbol] =
+		this.shadowRoot.querySelector(".monster-spinner");
 }
 
 /**

package/source/components/form/form.mjs

@@ -189,6 +189,12 @@ function initEventHandler() {
 			const events = this.getOption("writeBack.events");
 			for (const event of events) {
 				this.addEventListener(event, (e) => {
+					const target = e?.target;
+					const targetTag = target?.tagName?.toLowerCase?.();
+					if (targetTag === "monster-select" && e.type !== "change") {
+						return;
+					}
+
 					if (e?.target && typeof e.target.setCustomValidity === "function") {
 						e.target.setCustomValidity("");
 						e.target.removeAttribute("data-monster-validation-error");

package/source/components/form/select.mjs

@@ -3241,6 +3241,40 @@ function isValueIsEmptyThenGetNormalize(value) {
 	return value;
 }
 
+/**
+ * @private
+ * @param {Array} current
+ * @param {Array} next
+ * @returns {boolean}
+ */
+function areSelectionValuesEqual(current, next) {
+	if (!isArray(current) || !isArray(next)) {
+		return false;
+	}
+
+	if (current.length !== next.length) {
+		return false;
+	}
+
+	const toValue = (item) => {
+		if (isObject(item) && Object.prototype.hasOwnProperty.call(item, "value")) {
+			return `${item.value}`;
+		}
+		return `${item}`;
+	};
+
+	const currentValues = current.map(toValue).sort();
+	const nextValues = next.map(toValue).sort();
+
+	for (let i = 0; i < currentValues.length; i++) {
+		if (currentValues[i] !== nextValues[i]) {
+			return false;
+		}
+	}
+
+	return true;
+}
+
 /**
  * @private
  * @param selection
@@ -3280,27 +3314,34 @@ function setSelection(selection) {
 
 	selection = resultSelection;
 
+	const previousSelection = this.getOption("selection", []);
+	const valuesChanged = !areSelectionValuesEqual(previousSelection, selection);
+
 	if (!isInteger(this[selectionVersionSymbol])) {
 		this[selectionVersionSymbol] = 0;
 	}
-	this[selectionVersionSymbol] += 1;
+	if (valuesChanged) {
+		this[selectionVersionSymbol] += 1;
+	}
 
 	this.setOption("selection", selection);
 
 	checkOptionState.call(this);
 	setSummaryAndControlText.call(this);
 
-	try {
-		this?.setFormValue(this.value);
-	} catch (e) {
-		addErrorAttribute(this, e);
-	}
+	if (valuesChanged) {
+		try {
+			this?.setFormValue(this.value);
+		} catch (e) {
+			addErrorAttribute(this, e);
+		}
 
-	fireCustomEvent(this, "monster-selected", {
-		selection,
-	});
+		fireCustomEvent(this, "monster-selected", {
+			selection,
+		});
 
-	fireEvent(this, "change"); // https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/291
+		fireEvent(this, "change"); // https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/291
+	}
 
 	if (this[runLookupOnceSymbol] !== true && selection.length > 0) {
 		this[runLookupOnceSymbol] = true;

package/source/data/diff.mjs

@@ -68,7 +68,16 @@ function doDiff(a, b, path, diff) {
 	const currDiff = diff || [];
 
 	if (typeA === typeB && (typeA === "object" || typeA === "array")) {
-		getKeys(a, b, typeA).forEach((v) => {
+		const keys = getKeys(a, b, typeA);
+		if (keys.size === 0) {
+			const o = getOperator(a, b, typeA, typeB);
+			if (o !== undefined) {
+				currDiff.push(buildResult(a, b, o, currPath));
+			}
+			return currDiff;
+		}
+
+		keys.forEach((v) => {
 			if (!Object.prototype.hasOwnProperty.call(a, v)) {
 				currDiff.push(buildResult(a[v], b[v], "add", currPath.concat(v)));
 			} else if (!Object.prototype.hasOwnProperty.call(b, v)) {

package/source/dom/controlflow.mjs

@@ -147,8 +147,7 @@ class ControlFlow {
 	 */
 	static onState(events, run) {
 		return {
-			on: (ctx) =>
-				ctx.source === "state" && matchEvent(ctx.event, events),
+			on: (ctx) => ctx.source === "state" && matchEvent(ctx.event, events),
 			run,
 		};
 	}

package/source/dom/customelement.mjs

@@ -1101,6 +1101,11 @@ function syncUpdaterSubject(target, source) {
 		}
 
 		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] = {};
 			}

package/source/util/clone.mjs

@@ -80,6 +80,29 @@ function clone(obj) {
 			return new URL(obj.toString());
 		}
 
+		// Handle RegExp
+		if (obj instanceof RegExp) {
+			return new RegExp(obj.source, obj.flags);
+		}
+
+		// Handle Map
+		if (obj instanceof Map) {
+			const copy = new Map();
+			for (const [key, value] of obj.entries()) {
+				copy.set(clone(key), clone(value));
+			}
+			return copy;
+		}
+
+		// Handle Set
+		if (obj instanceof Set) {
+			const copy = new Set();
+			for (const value of obj.values()) {
+				copy.add(clone(value));
+			}
+			return copy;
+		}
+
 		/** Do not clone DOM nodes */
 		if (typeof Element !== "undefined" && obj instanceof Element) return obj;
 		if (typeof Document !== "undefined" && obj instanceof Document) return obj;

package/test/cases/data/diff.mjs

@@ -65,7 +65,7 @@ describe('Diff', function () {
 
         it('Diff value with null ', function () {
             let d = diff(obj1, obj2);
-            expect(JSON.stringify(d)).is.equal('[{"operator":"update","path":["count"],"first":{"value":1,"type":"number"},"second":{"value":2,"type":"number"}},{"operator":"delete","path":["info"],"first":{"value":"test","type":"string"}}]');
+            expect(JSON.stringify(d)).is.equal('[{"operator":"update","path":["count"],"first":{"value":1,"type":"number"},"second":{"value":2,"type":"number"}},{"operator":"delete","path":["info"],"first":{"value":"test","type":"string"}},{"operator":"update","path":["exchange"],"first":{"value":[],"type":"object"},"second":{"value":[],"type":"object"}}]');
         });
 
         it('Diff identical value with null ', function () {
@@ -86,6 +86,21 @@ describe('Diff', function () {
     const date5 = new Date(Date.parse('04 Dec 1995 00:12:01 GMT')); // Date
     const date6 = new Date(Date.parse('04 Dec 1995 00:12:02 GMT')); // Date
 
+    const hiddenKey = Symbol("hidden");
+    class HiddenState {
+        constructor(value) {
+            this[hiddenKey] = value;
+        }
+
+        get value() {
+            return this[hiddenKey];
+        }
+
+        getClone() {
+            return new HiddenState(this.value);
+        }
+    }
+
     [
 
         [
@@ -146,6 +161,15 @@ describe('Diff', function () {
             },
             '[]'
         ],
+        [
+            {
+                a: new HiddenState("a")
+            },
+            {
+                a: new HiddenState("b")
+            },
+            '[{"operator":"update","path":["a"],"first":{"value":{},"type":"object","instance":"HiddenState"},"second":{"value":{},"type":"object","instance":"HiddenState"}}]'
+        ],
         [
             {},
             {
@@ -238,4 +262,4 @@ describe('Diff', function () {
 
     });
 
-})
+})

package/test/cases/dom/customelement.mjs

@@ -27,7 +27,7 @@ const updaterSymbolSymbol = Symbol.for(updaterSymbolKey);
 
 describe('DOM', function () {
 
-    let CustomElement, registerCustomElement, TestComponent, document, TestComponent2, assignUpdaterToElement,
+    let CustomElement, registerCustomElement, TestComponent, document, TestComponent2, TestStateComponent, HiddenStateClass, assignUpdaterToElement,
         addObjectWithUpdaterToElement;
 
     describe("assignUpdaterToElement", function () {
@@ -184,6 +184,40 @@ describe('DOM', function () {
 
                         registerCustomElement(TestComponent2)
 
+                        const hiddenKey = Symbol("hidden");
+                        class HiddenState {
+                            constructor(presentation) {
+                                this[hiddenKey] = presentation;
+                            }
+
+                            get presentation() {
+                                return this[hiddenKey];
+                            }
+
+                            getClone() {
+                                return new HiddenState(this.presentation);
+                            }
+                        }
+
+                        HiddenStateClass = HiddenState;
+
+                        TestStateComponent = class extends CustomElement {
+                            static getTag() {
+                                return "monster-testclass-state"
+                            }
+
+                            get defaults() {
+                                return Object.assign({}, super.defaults, {
+                                    current: new HiddenStateClass(""),
+                                    templates: {
+                                        main: '<div id="state" data-monster-replace="path:current.presentation"></div>'
+                                    }
+                                })
+                            }
+                        }
+
+                        registerCustomElement(TestStateComponent)
+
                         document = getDocument();
                         done()
                     } catch (e) {
@@ -292,6 +326,26 @@ describe('DOM', function () {
 
         })
 
+        describe('Updater sync for instance values', function () {
+            it('should keep class instances and update presentation', function (done) {
+                let d = document.createElement('monster-testclass-state');
+                document.getElementById('test1').appendChild(d);
+
+                setTimeout(function () {
+                    d.setOption('current', new HiddenStateClass('OK'));
+
+                    setTimeout(function () {
+                        try {
+                            expect(d.shadowRoot.querySelector('#state').textContent).to.equal('OK');
+                            done();
+                        } catch (e) {
+                            done(e);
+                        }
+                    }, 20);
+                }, 10);
+            });
+        })
+
         describe('setOptions()', function () {
             [
                 ['shadowMode', 'x1'],

package/test/cases/util/clone.mjs

@@ -119,6 +119,41 @@ describe('Clone', function () {
 
     })
 
+    describe('.clone(Map)', function () {
+        it('.clone(Map) should preserve entries', function () {
+            let a = new Map([
+                ['x', 1],
+                ['y', {z: 2}],
+            ]);
+            let b = clone(a);
+            expect(b).to.be.instanceOf(Map);
+            expect(b).not.equal(a);
+            expect(b.get('x')).to.equal(1);
+            expect(JSON.stringify(b.get('y'))).to.equal(JSON.stringify({z: 2}));
+        });
+    })
+
+    describe('.clone(Set)', function () {
+        it('.clone(Set) should preserve values', function () {
+            let a = new Set([1, 2, 3]);
+            let b = clone(a);
+            expect(b).to.be.instanceOf(Set);
+            expect(b).not.equal(a);
+            expect([...b]).to.deep.equal([1, 2, 3]);
+        });
+    })
+
+    describe('.clone(RegExp)', function () {
+        it('.clone(RegExp) should preserve pattern and flags', function () {
+            let a = /test/gi;
+            let b = clone(a);
+            expect(b).to.be.instanceOf(RegExp);
+            expect(b).not.equal(a);
+            expect(b.source).to.equal(a.source);
+            expect(b.flags).to.equal(a.flags);
+        });
+    })
+
     describe('.clone()', function () {
 
         [
@@ -152,4 +187,3 @@ describe('Clone', function () {
     });
 
 });
-