@schukai/monster 4.85.0 → 4.85.2

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 
 
+## [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
+
+- Add new issue page and enhanced message state button functionality
+
+
+
 ## [4.85.0] - 2026-01-08
 
 ### 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.85.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.85.2"}

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

@@ -22,6 +22,7 @@ import { parseDataURL } from "../types/dataurl.mjs";
 import { getGlobalObject } from "../types/global.mjs";
 import {
 	isArray,
+	isElement,
 	isFunction,
 	isIterable,
 	isObject,
@@ -1080,6 +1081,16 @@ function syncUpdaterSubject(target, source) {
 	}
 
 	for (const [key, value] of Object.entries(source)) {
+		if (
+			isElement(value) ||
+			(typeof Document !== "undefined" && value instanceof Document) ||
+			(typeof DocumentFragment !== "undefined" &&
+				value instanceof DocumentFragment)
+		) {
+			target[key] = value;
+			continue;
+		}
+
 		if (isArray(value)) {
 			if (!isArray(target?.[key])) {
 				target[key] = [];
@@ -1090,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/types/proxyobserver.mjs

@@ -13,7 +13,7 @@
  */
 
 import { Base } from "./base.mjs";
-import { isArray, isObject, isPrimitive } from "./is.mjs";
+import { isArray, isElement, isObject, isPrimitive } from "./is.mjs";
 import { Observer } from "./observer.mjs";
 import { ObserverList } from "./observerlist.mjs";
 import { validateObject } from "./validate.mjs";
@@ -165,6 +165,14 @@ function getHandler() {
 				return value;
 			}
 
+			if (isElement(value)) {
+				return value;
+			}
+
+			if (typeof Node !== "undefined" && value instanceof Node) {
+				return value;
+			}
+
 			// set value as proxy if object or array
 			if (isArray(value) || isObject(value)) {
 				if (proxy.objectMap.has(value)) {

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