@schukai/monster 4.29.0 → 4.30.0

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 
 
+## [4.30.0] - 2025-07-08
+
+### Add Features
+
+- Refactor Select and Updater for improved readability and functionality
+
+
+
+## [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.30.0"}

package/source/components/form/select.mjs

@@ -608,9 +608,9 @@ class Select extends CustomControl {
 			let lastValue = self.value;
 			self[internalSymbol].attachObserver(
 				new Observer(function () {
+					// this is here not the Control, but the ProxyObserver
 					if (isObject(this) && this instanceof ProxyObserver) {
 						const n = this.getSubject()?.options?.value;
-
 						if (lastValue !== n && n !== undefined) {
 							lastValue = n;
 							setSelection
@@ -806,6 +806,7 @@ class Select extends CustomControl {
  * @returns {any}
  */
 function importOptionsIntern(data) {
+
 	const self = this;
 	const mappingOptions = this.getOption("mapping", {});
 	const selector = mappingOptions?.["selector"];

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,49 @@ 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) {
+      const diffResult = this[pendingDiffsSymbol].shift();
+      for (const change of Object.values(diffResult)) {
+        await this.#applyChange(change);
+      }
+    }
+
+    this[processingSymbol] = false;
+  }
+
+  /** @private **/
+  async #applyChange(change) {
+    removeElement.call(this, change);
+    insertElement.call(this, change);
+    updateContent.call(this, change);
+    await Promise.resolve();
+    updateAttributes.call(this, change);
+  }
+
   /**
    * Defaults: 'keyup', 'click', 'change', 'drop', 'touchend'
    *