@schukai/monster 4.46.5 → 4.46.7

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 
 
+## [4.46.7] - 2025-11-22
+
+### Bug Fixes
+
+- performance update updater
+
+
+
+## [4.46.6] - 2025-11-22
+
+### Bug Fixes
+
+- some NaN Issues
+
+
+
 ## [4.46.5] - 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.5"}
+{"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,24 @@ 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
+ */
+const TRUE_VALUES = new Set(["true", "1", "on"]);
+
 /**
  * The updater class connects an object with the DOM. In this way, structures and contents in the DOM can be
  * programmatically adapted via attributes.
@@ -131,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(() => {
@@ -138,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();
       }),
     );
   }
@@ -194,7 +227,7 @@ class Updater extends Base {
    *
    * ```js
    * updater.run().then(() => {
-   *   updater.enableEventProcessing();
+   * updater.enableEventProcessing();
    * });
    * ```
    *
@@ -243,7 +276,7 @@ class Updater extends Base {
    *
    * ```js
    * updater.run().then(() => {
-   *   updater.enableEventProcessing();
+   * updater.enableEventProcessing();
    * });
    * ```
    *
@@ -295,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;
+  }
 }
 
 /**
@@ -308,8 +355,9 @@ function getCheckStateCallback() {
   return function (current) {
     // this is a reference to the current object (therefore no array function here)
     if (this instanceof HTMLInputElement) {
-      if (["radio", "checkbox"].indexOf(this.type) !== -1) {
-        return `${this.value}` === `${current}` ? "true" : undefined;
+      if (["radio", "checkbox"].includes(this.type)) {
+        if (current == null) return undefined;
+        return String(this.value) === String(current) ? "true" : undefined;
       }
     } else if (this instanceof HTMLOptionElement) {
       if (isArray(current) && current.indexOf(this.value) !== -1) {
@@ -349,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];
@@ -447,18 +499,21 @@ function retrieveAndSetValue(element) {
     case "int":
     case "float":
     case "integer":
-      value = Number(value);
-      if (isNaN(value)) {
-        value = 0;
+      const num = Number(value);
+      if (value === "" || value === null || value === undefined) {
+        value = undefined;
+      } else if (Number.isNaN(num)) {
+        value = undefined;
+      } else {
+        value = num;
       }
       break;
     case "boolean":
     case "bool":
     case "checkbox":
-      value =
-        value === "true" || value === "1" || value === "on" || value === true;
+      // Use static set (Performance fix)
+      value = TRUE_VALUES.has(String(value).toLowerCase()) || value === true;
       break;
-
     case "string[]":
     case "[]string":
       if (isString(value)) {
@@ -509,11 +564,14 @@ function retrieveAndSetValue(element) {
     case "object":
     case "json":
       if (isString(value)) {
-        value = JSON.parse(value);
+        try {
+          value = JSON.parse(value);
+        } catch (e) {
+          throw new Error("unsupported value for object");
+        }
       } else {
         throw new Error("unsupported value for object");
       }
-
       break;
     default:
       break;
@@ -535,21 +593,11 @@ function retrieveAndSetValue(element) {
  * @private
  */
 function parseIntArray(val) {
-  if (isString(val)) {
-    return val.trim() === ""
-      ? []
-      : val
-          .split(",")
-          .map((v) => parseInt(v, 10))
-          .filter((v) => !isNaN(v));
-  } else if (isInteger(val)) {
-    return [val];
-  } else if (val === undefined || val === null) {
-    return [];
-  } else if (isArray(val)) {
-    return val.map((v) => parseInt(v, 10)).filter((v) => !isNaN(v));
-  }
-  throw new Error("unsupported value for int array");
+  if (val === undefined || val === null) return [];
+
+  const list = isArray(val) ? val : String(val).split(",");
+
+  return list.map((v) => parseInt(v, 10)).filter((v) => !Number.isNaN(v));
 }
 
 /**
@@ -650,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);
         });
@@ -830,25 +878,18 @@ function runUpdateContent(container, parts, subject) {
 
     // Unfortunately, static data is always changed as well, since it is not possible to react to changes here.
     const query = `[${ATTRIBUTE_UPDATER_REPLACE}^="path:${current}"], [${ATTRIBUTE_UPDATER_REPLACE}^="static:"], [${ATTRIBUTE_UPDATER_REPLACE}^="i18n:"]`;
-    const e = container.querySelectorAll(`${query}`);
 
-    const iterator = new Set([...e]);
+    // Performance optimization: avoid new Set([...NodeList])
+    const elements = container.querySelectorAll(`${query}`);
 
-    if (container.matches(query)) {
-      iterator.add(container);
-    }
-
-    /**
-     * @type {HTMLElement}
-     */
-    for (const [element] of iterator.entries()) {
+    const process = (element) => {
       if (mem.has(element)) return;
       mem.add(element);
 
       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);
       });
@@ -874,6 +915,16 @@ function runUpdateContent(container, parts, subject) {
       } else {
         element.innerHTML = value;
       }
+    };
+
+    // Iterate NodeList directly
+    for (const element of elements) {
+      process(element);
+    }
+
+    // Check container
+    if (container.matches(query)) {
+      process(container);
     }
   }
 }
@@ -908,27 +959,18 @@ function runUpdateAttributes(container, parts, subject) {
     const current = parts.join(".");
     parts.pop();
 
-    let iterator = new Set();
-
     const query = `[${ATTRIBUTE_UPDATER_SELECT_THIS}][${ATTRIBUTE_UPDATER_ATTRIBUTES}], [${ATTRIBUTE_UPDATER_ATTRIBUTES}*="path:${current}"], [${ATTRIBUTE_UPDATER_ATTRIBUTES}^="static:"], [${ATTRIBUTE_UPDATER_ATTRIBUTES}^="i18n:"]`;
 
-    const e = container.querySelectorAll(query);
-
-    if (e.length > 0) {
-      iterator = new Set([...e]);
-    }
-
-    if (container.matches(query)) {
-      iterator.add(container);
-    }
+    // Performance optimization: avoid new Set([...NodeList])
+    const elements = container.querySelectorAll(query);
 
-    for (const [element] of iterator.entries()) {
+    const process = (element) => {
       if (mem.has(element)) return;
       mem.add(element);
 
       // this case occurs when the ATTRIBUTE_UPDATER_SELECT_THIS attribute is set
       if (!element.hasAttribute(ATTRIBUTE_UPDATER_ATTRIBUTES)) {
-        continue;
+        return;
       }
 
       const attributes = element.getAttribute(ATTRIBUTE_UPDATER_ATTRIBUTES);
@@ -939,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);
@@ -967,6 +1009,16 @@ function runUpdateAttributes(container, parts, subject) {
         }
         handleInputControlAttributeUpdate.call(this, element, name, value);
       }
+    };
+
+    // Iterate NodeList directly
+    for (const element of elements) {
+      process(element);
+    }
+
+    // Check container
+    if (container.matches(query)) {
+      process(container);
     }
   }
 }
@@ -979,52 +1031,59 @@ function runUpdateAttributes(container, parts, subject) {
  * @return {void}
  * @this Updater
  */
-
 function handleInputControlAttributeUpdate(element, name, value) {
+  // Prevent NaN warnings by normalizing invalid numbers to undefined
+  if (typeof value === "number" && isNaN(value)) {
+    value = undefined;
+  }
+
   if (element instanceof HTMLSelectElement) {
     switch (element.type) {
       case "select-multiple":
-        for (const [index, opt] of Object.entries(element.options)) {
-          opt.selected = value.indexOf(opt.value) !== -1;
+        // Ensure value is an array before calling indexOf to avoid errors
+        if (Array.isArray(value) || typeof value === "string") {
+          for (const [index, opt] of Object.entries(element.options)) {
+            opt.selected = value.indexOf(opt.value) !== -1;
+          }
         }
-
         break;
       case "select-one":
         // Only one value may be selected
-
         for (const [index, opt] of Object.entries(element.options)) {
-          if (opt.value === value) {
+          if (opt.value == value) {
+            // Loose equality to match string numbers
             element.selectedIndex = index;
             break;
           }
         }
-
         break;
     }
   } else if (element instanceof HTMLInputElement) {
     switch (element.type) {
       case "radio":
         if (name === "checked") {
-          element.checked = value !== undefined;
+          element.checked = value !== undefined && value !== null;
         }
         break;
 
       case "checkbox":
         if (name === "checked") {
-          element.checked = value !== undefined;
+          element.checked = value !== undefined && value !== null;
         }
         break;
 
       case "text":
       default:
         if (name === "value") {
-          element.value = value === undefined ? "" : value;
+          // Check for undefined, null, or NaN
+          element.value = value === undefined || value === null ? "" : value;
         }
         break;
     }
   } else if (element instanceof HTMLTextAreaElement) {
     if (name === "value") {
-      element.value = value === undefined ? "" : value;
+      // Check for undefined, null, or NaN
+      element.value = value === undefined || value === null ? "" : value;
     }
   }
 }

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);
+      }
+    });
+  }
 }