@schukai/monster 4.46.6 → 4.46.7

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 
 
+## [4.46.7] - 2025-11-22
+
+### Bug Fixes
+
+- performance update updater
+
+
+
 ## [4.46.6] - 2025-11-22
 
 ### 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.46.6"}
+{"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.46.7"}

package/source/dom/updater.mjs

@@ -72,6 +72,18 @@ const pendingDiffsSymbol = Symbol("pendingDiffs");
  */
 const processingSymbol = Symbol("processing");
 
+/**
+ * @private
+ * @type {symbol}
+ */
+const pipeCacheSymbol = Symbol("pipeCache");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const processingScheduledSymbol = Symbol("processingScheduled");
+
 /**
  * @private
  * Performance optimization: static Set for boolean checks
@@ -137,6 +149,9 @@ class Updater extends Base {
 
     this[pendingDiffsSymbol] = [];
     this[processingSymbol] = false;
+    this[processingScheduledSymbol] = false;
+    this[pipeCacheSymbol] = new Map();
+    this[timerElementEventHandlerSymbol] = new WeakMap();
 
     this[internalSymbol].subject.attachObserver(
       new Observer(() => {
@@ -144,7 +159,19 @@ class Updater extends Base {
         const diffResult = diff(this[internalSymbol].last, real);
         this[internalSymbol].last = clone(real);
         this[pendingDiffsSymbol].push(diffResult);
-        return this.#processQueue();
+
+        if (!this[processingScheduledSymbol]) {
+          this[processingScheduledSymbol] = true;
+
+          return new Promise((resolve) => {
+            queueMicrotask(() => {
+              this[processingScheduledSymbol] = false;
+              this.#processQueue().finally(resolve);
+            });
+          });
+        }
+
+        return Promise.resolve();
       }),
     );
   }
@@ -301,6 +328,20 @@ class Updater extends Base {
     this[internalSymbol].callbacks.set(name, callback);
     return this;
   }
+
+  /**
+   * @private
+   * @param {string} cmd
+   * @returns {Pipe}
+   */
+  getPipe(cmd) {
+    let pipe = this[pipeCacheSymbol].get(cmd);
+    if (!pipe) {
+      pipe = new Pipe(cmd);
+      this[pipeCacheSymbol].set(cmd, pipe);
+    }
+    return pipe;
+  }
 }
 
 /**
@@ -356,22 +397,26 @@ function getControlEventHandler() {
       return;
     }
 
-    if (this[timerElementEventHandlerSymbol] instanceof DeadMansSwitch) {
+    const switches = this[timerElementEventHandlerSymbol];
+    let dms = switches.get(element);
+
+    if (dms instanceof DeadMansSwitch) {
       try {
-        this[timerElementEventHandlerSymbol].touch();
+        dms.touch();
         return;
       } catch (e) {
-        delete this[timerElementEventHandlerSymbol];
+        switches.delete(element);
       }
     }
 
-    this[timerElementEventHandlerSymbol] = new DeadMansSwitch(50, () => {
+    dms = new DeadMansSwitch(50, () => {
       try {
         retrieveAndSetValue.call(this, element);
       } catch (e) {
         addErrorAttribute(element, e);
       }
     });
+    switches.set(element, dms);
   };
 
   return this[symbol];
@@ -653,7 +698,7 @@ function insertElement(change) {
           throw new Error("pipes are not allowed when cloning a node.");
         }
 
-        const pipe = new Pipe(cmd);
+        const pipe = this.getPipe(cmd);
         this[internalSymbol].callbacks.forEach((f, n) => {
           pipe.setCallback(n, f);
         });
@@ -844,7 +889,7 @@ function runUpdateContent(container, parts, subject) {
       const attributes = element.getAttribute(ATTRIBUTE_UPDATER_REPLACE);
       const cmd = trimSpaces(attributes);
 
-      const pipe = new Pipe(cmd);
+      const pipe = this.getPipe(cmd);
       this[internalSymbol].callbacks.forEach((f, n) => {
         pipe.setCallback(n, f);
       });
@@ -936,7 +981,7 @@ function runUpdateAttributes(container, parts, subject) {
         const name = trimSpaces(def.substr(0, i));
         const cmd = trimSpaces(def.substr(i));
 
-        const pipe = new Pipe(cmd);
+        const pipe = this.getPipe(cmd);
 
         this[internalSymbol].callbacks.forEach((f, n) => {
           pipe.setCallback(n, f, element);

package/source/net/webconnect.mjs

@@ -13,7 +13,7 @@
  */
 
 import { instanceSymbol } from "../constants.mjs";
-import { isInteger, isString, isObject } from "../types/is.mjs";
+import { isInteger, isString } from "../types/is.mjs";
 import { BaseWithOptions } from "../types/basewithoptions.mjs";
 import { ObservableQueue } from "../types/observablequeue.mjs";
 import { Message } from "./webconnect/message.mjs";
@@ -26,11 +26,6 @@ export { WebConnect };
  * @type {symbol}
  */
 const receiveQueueSymbol = Symbol("receiveQueue");
-/**
- * @private
- * @type {symbol}
- */
-const sendQueueSymbol = Symbol("sendQueue");
 
 /**
  * @private
@@ -52,19 +47,19 @@ const manualCloseSymbol = Symbol("manualClose");
  * @type {Object}
  */
 const connectionStatusCode = {
-	1000: "Normal closure",
-	1001: "Going away",
-	1002: "Protocol error",
-	1003: "Unsupported data",
-	1004: "Reserved",
-	1005: "No status code",
-	1006: "Connection closed abnormally",
-	1007: "Invalid frame payload data",
-	1008: "Policy violation",
-	1009: "The Message is too big",
-	1010: "Mandatory extension",
-	1011: "Internal server error",
-	1015: "TLS handshake",
+  1000: "Normal closure",
+  1001: "Going away",
+  1002: "Protocol error",
+  1003: "Unsupported data",
+  1004: "Reserved",
+  1005: "No status code",
+  1006: "Connection closed abnormally",
+  1007: "Invalid frame payload data",
+  1008: "Policy violation",
+  1009: "The Message is too big",
+  1010: "Mandatory extension",
+  1011: "Internal server error",
+  1015: "TLS handshake",
 };
 
 /**
@@ -73,107 +68,142 @@ const connectionStatusCode = {
  * @throws {Error} No url defined for websocket datasource.
  */
 function connectServer(resolve, reject) {
-	const self = this;
-
-	const url = self.getOption("url");
-	if (!url) {
-		reject("No url defined for web connect.");
-		return;
-	}
-
-	let promiseAllredyResolved = false;
-
-	let connectionTimeout = self.getOption("connection.timeout");
-	if (!isInteger(connectionTimeout) || connectionTimeout < 100) {
-		connectionTimeout = 5000;
-	}
-
-	setTimeout(() => {
-		if (promiseAllredyResolved) {
-			return;
-		}
-		reject(new Error("Connection timeout"));
-	}, connectionTimeout);
-
-	let reconnectTimeout = self.getOption("connection.reconnect.timeout");
-	if (!isInteger(reconnectTimeout) || reconnectTimeout < 1000)
-		reconnectTimeout = 1000;
-	let reconnectAttempts = self.getOption("connection.reconnect.attempts");
-	if (!isInteger(reconnectAttempts) || reconnectAttempts < 1)
-		reconnectAttempts = 1;
-	let reconnectEnabled = self.getOption("connection.reconnect.enabled");
-	if (reconnectEnabled !== true) reconnectEnabled = false;
-
-	self[manualCloseSymbol] = false;
-	self[connectionSymbol].reconnectCounter++;
-
-	if (
-		self[connectionSymbol].socket &&
-		self[connectionSymbol].socket.readyState < 2
-	) {
-		self[connectionSymbol].socket.close();
-	}
-	self[connectionSymbol].socket = null;
-
-	const WebSocket = getGlobalFunction("WebSocket");
-	if (!WebSocket) {
-		reject(new Error("WebSocket is not available"));
-		return;
-	}
-
-	self[connectionSymbol].socket = new WebSocket(url);
-
-	self[connectionSymbol].socket.onmessage = function (event) {
-		if (event.data instanceof Blob) {
-			const reader = new FileReader();
-			reader.addEventListener("loadend", function () {
-				self[receiveQueueSymbol].add(new Message(reader.result));
-			});
-			reader.readAsText(new Message(event.data));
-		} else {
-			self[receiveQueueSymbol].add(Message.fromJSON(event.data));
-		}
-	};
-
-	self[connectionSymbol].socket.onopen = function () {
-		self[connectionSymbol].reconnectCounter = 0;
-		if (typeof resolve === "function" && !promiseAllredyResolved) {
-			promiseAllredyResolved = true;
-			resolve();
-		}
-	};
-
-	self[connectionSymbol].socket.close = function (event) {
-		if (self[manualCloseSymbol]) {
-			self[manualCloseSymbol] = false;
-			return;
-		}
-
-		if (
-			reconnectEnabled &&
-			this[connectionSymbol].reconnectCounter < reconnectAttempts
-		) {
-			setTimeout(() => {
-				self.connect();
-			}, reconnectTimeout * this[connectionSymbol].reconnectCounter);
-		}
-	};
-
-	self[connectionSymbol].socket.onerror = (error) => {
-		if (
-			reconnectEnabled &&
-			self[connectionSymbol].reconnectCounter < reconnectAttempts
-		) {
-			setTimeout(() => {
-				self.connect();
-			}, reconnectTimeout * this[connectionSymbol].reconnectCounter);
-		} else {
-			if (typeof reject === "function" && !promiseAllredyResolved) {
-				promiseAllredyResolved = true;
-				reject(error);
-			}
-		}
-	};
+  const self = this;
+
+  const url = self.getOption("url");
+  if (!url) {
+    reject(new Error("No url defined for web connect."));
+    return;
+  }
+
+  let promiseAlreadyResolved = false;
+
+  let connectionTimeout = self.getOption("connection.timeout");
+  if (!isInteger(connectionTimeout) || connectionTimeout < 100) {
+    connectionTimeout = 5000;
+  }
+
+  // Timeout Handling
+  const timeoutId = setTimeout(() => {
+    if (promiseAlreadyResolved) {
+      return;
+    }
+    promiseAlreadyResolved = true;
+
+    // Clean up hanging socket attempt
+    if (self[connectionSymbol].socket) {
+      try {
+        self[connectionSymbol].socket.close();
+      } catch (e) {
+        // ignore
+      }
+    }
+
+    reject(new Error("Connection timeout"));
+  }, connectionTimeout);
+
+  let reconnectTimeout = self.getOption("connection.reconnect.timeout");
+  if (!isInteger(reconnectTimeout) || reconnectTimeout < 1000)
+    reconnectTimeout = 1000;
+
+  let reconnectAttempts = self.getOption("connection.reconnect.attempts");
+  if (!isInteger(reconnectAttempts) || reconnectAttempts < 1)
+    reconnectAttempts = 1;
+
+  let reconnectEnabled = self.getOption("connection.reconnect.enabled");
+  if (reconnectEnabled !== true) reconnectEnabled = false;
+
+  self[manualCloseSymbol] = false;
+  self[connectionSymbol].reconnectCounter++;
+
+  // Cleanup existing socket
+  if (
+    self[connectionSymbol].socket &&
+    self[connectionSymbol].socket.readyState < 2
+  ) {
+    // Remove listeners to prevent side effects during close
+    self[connectionSymbol].socket.onclose = null;
+    self[connectionSymbol].socket.onerror = null;
+    self[connectionSymbol].socket.onmessage = null;
+    self[connectionSymbol].socket.onopen = null;
+    self[connectionSymbol].socket.close();
+  }
+  self[connectionSymbol].socket = null;
+
+  const WebSocket = getGlobalFunction("WebSocket");
+  if (!WebSocket) {
+    clearTimeout(timeoutId);
+    reject(new Error("WebSocket is not available"));
+    return;
+  }
+
+  try {
+    self[connectionSymbol].socket = new WebSocket(url);
+  } catch (error) {
+    clearTimeout(timeoutId);
+    if (!promiseAlreadyResolved) {
+      promiseAlreadyResolved = true;
+      reject(error);
+    }
+    return;
+  }
+
+  self[connectionSymbol].socket.onmessage = function (event) {
+    if (event.data instanceof Blob) {
+      const reader = new FileReader();
+      reader.addEventListener("loadend", function () {
+        self[receiveQueueSymbol].add(new Message(reader.result));
+      });
+      // Correctly pass the Blob, not a Message object
+      reader.readAsText(event.data);
+    } else {
+      self[receiveQueueSymbol].add(Message.fromJSON(event.data));
+    }
+  };
+
+  self[connectionSymbol].socket.onopen = function () {
+    clearTimeout(timeoutId);
+    self[connectionSymbol].reconnectCounter = 0;
+    if (typeof resolve === "function" && !promiseAlreadyResolved) {
+      promiseAlreadyResolved = true;
+      resolve();
+    }
+  };
+
+  // Internal helper to handle reconnects
+  const handleReconnect = () => {
+    if (self[manualCloseSymbol]) {
+      self[manualCloseSymbol] = false;
+      return;
+    }
+
+    if (
+      reconnectEnabled &&
+      self[connectionSymbol].reconnectCounter < reconnectAttempts
+    ) {
+      setTimeout(() => {
+        // catch potential unhandled promise rejections from the recursive call
+        self.connect().catch(() => {});
+      }, reconnectTimeout * self[connectionSymbol].reconnectCounter);
+    }
+  };
+
+  // Use onclose event instead of overriding the close method
+  self[connectionSymbol].socket.onclose = function (event) {
+    handleReconnect();
+  };
+
+  self[connectionSymbol].socket.onerror = (error) => {
+    if (!promiseAlreadyResolved) {
+      clearTimeout(timeoutId);
+      promiseAlreadyResolved = true;
+      reject(error);
+    } else {
+      // If the connection was already established, treat error as potential disconnect
+      // Usually onclose follows onerror, but we ensure we don't double-handle logic
+      // typically we rely on onclose for reconnect logic.
+    }
+  };
 }
 
 /**
@@ -186,171 +216,180 @@ function connectServer(resolve, reject) {
  * @summary The LocalStorage class encapsulates the access to data objects.
  */
 class WebConnect extends BaseWithOptions {
-	/**
-	 *
-	 * @param {Object} [options] options contains definitions for the webconnect.
-	 */
-	constructor(options) {
-		if (isString(options)) {
-			options = { url: options };
-		}
-
-		super(options);
-
-		this[receiveQueueSymbol] = new ObservableQueue();
-		this[sendQueueSymbol] = new ObservableQueue();
-
-		this[connectionSymbol] = {};
-		this[connectionSymbol].socket = null;
-		this[connectionSymbol].reconnectCounter = 0;
-		this[manualCloseSymbol] = false;
-	}
-
-	/**
-	 *
-	 * @return {Promise}
-	 */
-	connect() {
-		return new Promise((resolve, reject) => {
-			connectServer.call(this, resolve, reject);
-		});
-	}
-
-	/**
-	 * @return {boolean}
-	 */
-	isConnected() {
-		return this[connectionSymbol]?.socket?.readyState === 1;
-	}
-
-	/**
-	 * This method is called by the `instanceof` operator.
-	 * @return {symbol}
-	 */
-	static get [instanceSymbol]() {
-		return Symbol.for("@schukai/monster/net/webconnect");
-	}
-
-	/**
-	 * @property {string} url=undefined Defines the resource that you wish to fetch.
-	 * @property {Object} connection
-	 * @property {Object} connection.timeout=5000 Defines the timeout for the connection.
-	 * @property {Number} connection.reconnect.timeout The timeout in milliseconds for the reconnect.
-	 * @property {Number} connection.reconnect.attempts The maximum number of reconnects.
-	 * @property {Bool} connection.reconnect.enabled If the reconnect is enabled.
-	 */
-	get defaults() {
-		return Object.assign({}, super.defaults, {
-			url: undefined,
-			connection: {
-				timeout: 5000,
-				reconnect: {
-					timeout: 1000,
-					attempts: 1,
-					enabled: false,
-				},
-			},
-		});
-	}
-
-	/**
-	 * This method closes the connection.
-	 *
-	 * @param {Number} [code=1000] The close code.
-	 * @param {String} [reason=""] The close reason.
-	 * @return {Promise}
-	 * @see https://www.rfc-editor.org/rfc/rfc6455.html#section-7.4.1
-	 */
-	close(statusCode, reason) {
-		if (!isInteger(statusCode) || statusCode < 1000 || statusCode > 4999) {
-			statusCode = 1000;
-		}
-		if (!isString(reason)) {
-			reason = "";
-		}
-
-		return new Promise((resolve, reject) => {
-			try {
-				this[manualCloseSymbol] = true;
-				if (this[connectionSymbol].socket) {
-					this[connectionSymbol].socket.close(statusCode, reason);
-				}
-			} catch (error) {
-				reject(error);
-			}
-			resolve();
-		});
-	}
-
-	/**
-	 * Polls the receive queue for new messages.
-	 *
-	 * @return {Message}
-	 */
-	poll() {
-		return this[receiveQueueSymbol].poll();
-	}
-
-	/**
-	 * Are there any messages in the receive queue?
-	 *
-	 * @return {boolean}
-	 */
-	dataReceived() {
-		return !this[receiveQueueSymbol].isEmpty();
-	}
-
-	/**
-	 * Get Message from the receive queue, but do not remove it.
-	 *
-	 * @return {Object}
-	 */
-	peek() {
-		return this[receiveQueueSymbol].peek();
-	}
-
-	/**
-	 * Attach a new observer
-	 *
-	 * @param {Observer} observer
-	 * @return {ProxyObserver}
-	 */
-	attachObserver(observer) {
-		this[receiveQueueSymbol].attachObserver(observer);
-		return this;
-	}
-
-	/**
-	 * Detach a observer
-	 *
-	 * @param {Observer} observer
-	 * @return {ProxyObserver}
-	 */
-	detachObserver(observer) {
-		this[receiveQueueSymbol].detachObserver(observer);
-		return this;
-	}
-
-	/**
-	 * @param {Observer} observer
-	 * @return {boolean}
-	 */
-	containsObserver(observer) {
-		return this[receiveQueueSymbol].containsObserver(observer);
-	}
-
-	/**
-	 * @param {Message|Object} message
-	 * @return {Promise}
-	 */
-	send(message) {
-		return new Promise((resolve, reject) => {
-			if (this[connectionSymbol].socket.readyState !== 1) {
-				reject("the socket is not ready");
-			}
-
-			this[connectionSymbol].socket.send(JSON.stringify(message));
-			resolve();
-		});
-	}
+  /**
+   *
+   * @param {Object} [options] options contains definitions for the webconnect.
+   */
+  constructor(options) {
+    if (isString(options)) {
+      options = { url: options };
+    }
+
+    super(options);
+
+    this[receiveQueueSymbol] = new ObservableQueue();
+
+    this[connectionSymbol] = {};
+    this[connectionSymbol].socket = null;
+    this[connectionSymbol].reconnectCounter = 0;
+    this[manualCloseSymbol] = false;
+  }
+
+  /**
+   *
+   * @return {Promise}
+   */
+  connect() {
+    return new Promise((resolve, reject) => {
+      connectServer.call(this, resolve, reject);
+    });
+  }
+
+  /**
+   * @return {boolean}
+   */
+  isConnected() {
+    return this[connectionSymbol]?.socket?.readyState === 1;
+  }
+
+  /**
+   * This method is called by the `instanceof` operator.
+   * @return {symbol}
+   */
+  static get [instanceSymbol]() {
+    return Symbol.for("@schukai/monster/net/webconnect");
+  }
+
+  /**
+   * @property {string} url=undefined Defines the resource that you wish to fetch.
+   * @property {Object} connection
+   * @property {Object} connection.timeout=5000 Defines the timeout for the connection.
+   * @property {Number} connection.reconnect.timeout The timeout in milliseconds for the reconnect.
+   * @property {Number} connection.reconnect.attempts The maximum number of reconnects.
+   * @property {Bool} connection.reconnect.enabled If the reconnect is enabled.
+   */
+  get defaults() {
+    return Object.assign({}, super.defaults, {
+      url: undefined,
+      connection: {
+        timeout: 5000,
+        reconnect: {
+          timeout: 1000,
+          attempts: 1,
+          enabled: false,
+        },
+      },
+    });
+  }
+
+  /**
+   * This method closes the connection.
+   *
+   * @param {Number} [code=1000] The close code.
+   * @param {String} [reason=""] The close reason.
+   * @return {Promise}
+   * @see https://www.rfc-editor.org/rfc/rfc6455.html#section-7.4.1
+   */
+  close(statusCode, reason) {
+    if (!isInteger(statusCode) || statusCode < 1000 || statusCode > 4999) {
+      statusCode = 1000;
+    }
+    if (!isString(reason)) {
+      reason = "";
+    }
+
+    return new Promise((resolve, reject) => {
+      try {
+        // Set manual close flag BEFORE calling close() to prevent reconnect
+        this[manualCloseSymbol] = true;
+        if (this[connectionSymbol].socket) {
+          this[connectionSymbol].socket.close(statusCode, reason);
+        }
+      } catch (error) {
+        reject(error);
+        return;
+      }
+      resolve();
+    });
+  }
+
+  /**
+   * Polls the receive queue for new messages.
+   *
+   * @return {Message}
+   */
+  poll() {
+    return this[receiveQueueSymbol].poll();
+  }
+
+  /**
+   * Are there any messages in the receive queue?
+   *
+   * @return {boolean}
+   */
+  dataReceived() {
+    return !this[receiveQueueSymbol].isEmpty();
+  }
+
+  /**
+   * Get Message from the receive queue, but do not remove it.
+   *
+   * @return {Object}
+   */
+  peek() {
+    return this[receiveQueueSymbol].peek();
+  }
+
+  /**
+   * Attach a new observer
+   *
+   * @param {Observer} observer
+   * @return {ProxyObserver}
+   */
+  attachObserver(observer) {
+    this[receiveQueueSymbol].attachObserver(observer);
+    return this;
+  }
+
+  /**
+   * Detach a observer
+   *
+   * @param {Observer} observer
+   * @return {ProxyObserver}
+   */
+  detachObserver(observer) {
+    this[receiveQueueSymbol].detachObserver(observer);
+    return this;
+  }
+
+  /**
+   * @param {Observer} observer
+   * @return {boolean}
+   */
+  containsObserver(observer) {
+    return this[receiveQueueSymbol].containsObserver(observer);
+  }
+
+  /**
+   * @param {Message|Object} message
+   * @return {Promise}
+   */
+  send(message) {
+    return new Promise((resolve, reject) => {
+      if (
+        !this[connectionSymbol].socket ||
+        this[connectionSymbol].socket.readyState !== 1
+      ) {
+        reject(new Error("The socket is not ready"));
+        return;
+      }
+
+      try {
+        this[connectionSymbol].socket.send(JSON.stringify(message));
+        resolve();
+      } catch (e) {
+        reject(e);
+      }
+    });
+  }
 }