@schukai/monster 4.29.0 → 4.29.1

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 
 
+## [4.29.1] - 2025-07-07
+
+### Bug Fixes
+
+- handle updates better
+
+
+
 ## [4.29.0] - 2025-07-07
 
 ### Add Features

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.2","@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.29.0"}
+{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.2","@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.29.1"}

package/source/dom/updater.mjs

@@ -60,6 +60,18 @@ export { Updater, addObjectWithUpdaterToElement };
  */
 const timerElementEventHandlerSymbol = Symbol("timerElementEventHandler");
 
+/**
+ * @private
+ * @type {symbol}
+ */
+const pendingDiffsSymbol = Symbol("pendingDiffs");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const processingSymbol = Symbol("processing");
+
 /**
  * The updater class connects an object with the DOM. In this way, structures and contents in the DOM can be
  * programmatically adapted via attributes.
@@ -85,6 +97,7 @@ const timerElementEventHandlerSymbol = Symbol("timerElementEventHandler");
  * @summary The updater class connects an object with the dom
  */
 class Updater extends Base {
+
   /**
    * @since 1.8.0
    * @param {HTMLElement} element
@@ -117,39 +130,50 @@ class Updater extends Base {
       getCheckStateCallback.call(this),
     );
 
-    this[internalSymbol].subject.attachObserver(
-      new Observer(() => {
-        const s = this[internalSymbol].subject.getRealSubject();
-
-        const diffResult = diff(this[internalSymbol].last, s);
-        this[internalSymbol].last = clone(s);
-
-        const promises = [];
-
-        for (const [, change] of Object.entries(diffResult)) {
-          promises.push(
-            new Promise((resolve, reject) => {
-              getWindow().requestAnimationFrame(() => {
-                try {
-                  removeElement.call(this, change);
-                  insertElement.call(this, change);
-                  updateContent.call(this, change);
-                  updateAttributes.call(this, change);
-
-                  resolve();
-                } catch (error) {
-                  reject(error);
-                }
-              });
-            }),
-          );
-        }
+    this[pendingDiffsSymbol] = [];
+    this[processingSymbol] = false;
 
-        return Promise.all(promises);
-      }),
+    this[internalSymbol].subject.attachObserver(
+        new Observer(() => {
+          const real = this[internalSymbol].subject.getRealSubject();
+          const diffResult = diff(this[internalSymbol].last, real);
+          this[internalSymbol].last = clone(real);
+          this[pendingDiffsSymbol].push(diffResult);
+          return this.#processQueue();
+        }),
     );
   }
 
+  /**
+   * @private
+   * @return {Promise}
+   */
+  async #processQueue() {
+    if ( this[processingSymbol]) {
+      return Promise.resolve();
+    }
+    this[processingSymbol] = true;
+
+    while (this[pendingDiffsSymbol].length > 0) {
+      const diffResult = this[pendingDiffsSymbol].shift();
+      for (const [, change] of Object.entries(diffResult)) {
+        await new Promise((resolve, reject) => {
+            try {
+              removeElement.call(this, change);
+              insertElement.call(this, change);
+              updateContent.call(this, change);
+              updateAttributes.call(this, change);
+              resolve();
+            } catch (err) {
+              reject(err);
+            }
+        });
+      }
+    }
+
+    this[processingSymbol] = false;
+  }
+
   /**
    * Defaults: 'keyup', 'click', 'change', 'drop', 'touchend'
    *