@schukai/monster 4.54.1 → 4.55.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 
 
+## [4.55.0] - 2025-12-29
+
+### Add Features
+
+- Introduce updater root symbol and enhance event handling for nested structures
+
+
+
 ## [4.54.1] - 2025-12-28
 
 ### Bug Fixes

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","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.54.1"}
+{"author":"schukai GmbH","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.55.0"}

package/source/dom/updater.mjs

@@ -71,6 +71,7 @@ const pendingDiffsSymbol = Symbol("pendingDiffs");
  * @type {symbol}
  */
 const processingSymbol = Symbol("processing");
+const updaterRootSymbol = Symbol.for("@schukai/monster/dom/@@updater-root");
 
 /**
  * The updater class connects an object with the DOM. In this way, structures and contents in the DOM can be
@@ -123,6 +124,7 @@ class Updater extends Base {
       eventTypes: ["keyup", "click", "change", "drop", "touchend", "input"],
       subject: subject,
     };
+    this[internalSymbol].element[updaterRootSymbol] = true;
 
     this[internalSymbol].callbacks.set(
       "checkstate",
@@ -137,6 +139,9 @@ class Updater extends Base {
         const real = this[internalSymbol].subject.getRealSubject();
         const diffResult = diff(this[internalSymbol].last, real);
         this[internalSymbol].last = clone(real);
+        if (diffResult.length === 0) {
+          return Promise.resolve();
+        }
         this[pendingDiffsSymbol].push(diffResult);
         return this.#processQueue();
       }),
@@ -343,6 +348,10 @@ function getControlEventHandler() {
    * @param {Event} event
    */
   this[symbol] = (event) => {
+    const root = findClosestUpdaterRootFromEvent(event);
+    if (root !== this[internalSymbol].element) {
+      return;
+    }
     const element = findTargetElementFromEvent(event, ATTRIBUTE_UPDATER_BIND);
 
     if (element === undefined) {
@@ -370,6 +379,27 @@ function getControlEventHandler() {
   return this[symbol];
 }
 
+/**
+ * @private
+ * @param {Event} event
+ * @return {HTMLElement|undefined}
+ */
+function findClosestUpdaterRootFromEvent(event) {
+  if (typeof event?.composedPath !== "function") {
+    return undefined;
+  }
+
+  const path = event.composedPath();
+  for (let i = 0; i < path.length; i++) {
+    const node = path[i];
+    if (node instanceof HTMLElement && node[updaterRootSymbol] === true) {
+      return node;
+    }
+  }
+
+  return undefined;
+}
+
 /**
  * @throws {Error} the bind argument must start as a value with a path
  * @param {HTMLElement} element

package/source/types/proxyobserver.mjs

@@ -247,7 +247,7 @@ function getHandler() {
 
 		// https://262.ecma-international.org/9.0/#sec-proxy-object-internal-methods-and-internal-slots-setprototypeof-v
 		setPrototypeOf: function (target, key) {
-			const result = Reflect.setPrototypeOf(object1, key);
+			const result = Reflect.setPrototypeOf(target, key);
 
 			if (typeof key !== "symbol") {
 				proxy.observers.notify(proxy);

package/test/cases/dom/updater.mjs

@@ -109,6 +109,15 @@ let html4 = `
 
 `;
 
+let htmlNested = `
+    <div id="parent">
+        <input id="parent-input" type="text" data-monster-bind="path:parentVal">
+        <div id="child">
+            <input id="child-input" type="text" data-monster-bind="path:childVal">
+        </div>
+    </div>
+`;
+
 describe("DOM", function () {
   let Updater = null;
 
@@ -525,6 +534,117 @@ describe("DOM", function () {
     });
   });
 
+  describe("Updater()", function () {
+    beforeEach(() => {
+      let mocks = document.getElementById("mocks");
+      mocks.innerHTML = htmlNested;
+    });
+
+    describe("Nested Eventhandling", function () {
+      it("should not propagate child events to parent updater", function (done) {
+        const parentObserver = new ProxyObserver({});
+        const childObserver = new ProxyObserver({});
+        const parentUpdater = new Updater(
+          document.getElementById("parent"),
+          parentObserver,
+        );
+        const childUpdater = new Updater(
+          document.getElementById("child"),
+          childObserver,
+        );
+
+        parentUpdater.enableEventProcessing();
+        childUpdater.enableEventProcessing();
+
+        let parentNotified = false;
+        parentObserver.attachObserver(
+          new Observer(function () {
+            parentNotified = true;
+          }),
+        );
+
+        childObserver.attachObserver(
+          new Observer(function () {
+            try {
+              expect(childUpdater.getSubject()["childVal"]).to.equal("child");
+              expect(parentUpdater.getSubject()).to.not.have.property(
+                "childVal",
+              );
+              setTimeout(() => {
+                if (parentNotified) {
+                  done(
+                    new Error(
+                      "parent updater should not react to child bind events",
+                    ),
+                  );
+                } else {
+                  done();
+                }
+              }, 10);
+            } catch (e) {
+              done(e);
+            }
+          }),
+        );
+
+        const childInput = document.getElementById("child-input");
+        childInput.value = "child";
+        childInput.click();
+      });
+
+      it("should handle parent events without triggering child updater", function (done) {
+        const parentObserver = new ProxyObserver({});
+        const childObserver = new ProxyObserver({});
+        const parentUpdater = new Updater(
+          document.getElementById("parent"),
+          parentObserver,
+        );
+        const childUpdater = new Updater(
+          document.getElementById("child"),
+          childObserver,
+        );
+
+        parentUpdater.enableEventProcessing();
+        childUpdater.enableEventProcessing();
+
+        let childNotified = false;
+        childObserver.attachObserver(
+          new Observer(function () {
+            childNotified = true;
+          }),
+        );
+
+        parentObserver.attachObserver(
+          new Observer(function () {
+            try {
+              expect(parentUpdater.getSubject()["parentVal"]).to.equal("parent");
+              expect(childUpdater.getSubject()).to.not.have.property(
+                "parentVal",
+              );
+              setTimeout(() => {
+                if (childNotified) {
+                  done(
+                    new Error(
+                      "child updater should not react to parent bind events",
+                    ),
+                  );
+                } else {
+                  done();
+                }
+              }, 10);
+            } catch (e) {
+              done(e);
+            }
+          }),
+        );
+
+        const parentInput = document.getElementById("parent-input");
+        parentInput.value = "parent";
+        parentInput.click();
+      });
+    });
+  });
+
   describe("Updater()", function () {
     beforeEach(() => {
       let mocks = document.getElementById("mocks");

package/test/cases/types/proxyobserver.mjs

@@ -216,5 +216,18 @@ describe('ProxyObserver', function () {
         });
     });
 
-})
+    describe('setPrototypeOf', function () {
+        it('should allow setPrototypeOf and notify observer', function (done) {
+            const proxy = new ProxyObserver({});
+            const observer = new Observer(function () {
+                done();
+            });
+            proxy.attachObserver(observer);
+
+            const proto = {flag: true};
+            Object.setPrototypeOf(proxy.getSubject(), proto);
+            expect(Object.getPrototypeOf(proxy.getSubject())).to.equal(proto);
+        });
+    });
 
+})