fix: performance tweak #235

source/components/datatable/change-button.mjs

@@ -222,7 +222,7 @@ function initControlReferences() {
 	);
 
 	if (this[stateButtonElementSymbol]) {
-		setTimeout(() => {
+		queueMicrotask(() => {
 			const states = {
 				changed: new State(
 					"changed",
@@ -239,7 +239,7 @@ function initControlReferences() {
 				"labels.button",
 				this.getOption("labels.button"),
 			);
-		}, 1);
+		});
 	}
 
 	return this;
@@ -278,7 +278,7 @@ function getIndex() {
  * @private
  */
 function initEventHandler() {
-	setTimeout(() => {
+	queueMicrotask(() => {
 		this[stateButtonElementSymbol].setOption("actions.click", () => {
 			const index = getIndex.call(this);
 
@@ -287,7 +287,7 @@ function initEventHandler() {
 				this[overlayLinkedElementSymbol].open();
 			}
 		});
-	}, 1);
+	});
 }
 
 /**

source/components/datatable/columnbar.mjs

@@ -249,12 +249,12 @@ function initEventHandler() {
 			if (self[settingsLayerElementSymbol].classList.contains("visible")) {
 				self[popperInstanceSymbol].update();
 
-				setTimeout(() => {
+				queueMicrotask(() => {
 					document.body.addEventListener(
 						"click",
 						self[settingsButtonEventHandlerSymbol],
 					);
-				}, 0);
+				});
 			}
 		}
 	});

source/components/datatable/dataset.mjs

@@ -198,7 +198,7 @@ class DataSet extends CustomElement {
 				return;
 			}
 
-			setTimeout(() => {
+			queueMicrotask(() => {
 				const path = this.getOption("mapping.data");
 				const index = this.getOption("mapping.index");
 
@@ -224,7 +224,7 @@ class DataSet extends CustomElement {
 				this[datasourceLinkedElementSymbol].data = ref;
 
 				resolve();
-			}, 0);
+			});
 		});
 	}
 

source/components/datatable/datasource/rest.mjs

@@ -234,7 +234,7 @@ class Rest extends Datasource {
 				datasource: this,
 			});
 
-			setTimeout(() => {
+			queueMicrotask(() => {
 				this[dataSourceSymbol]
 					.read()
 					.then((response) => {
@@ -252,7 +252,7 @@ class Rest extends Datasource {
 						addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error.toString());
 						reject(error);
 					});
-			}, 0);
+			});
 		});
 	}
 
@@ -289,11 +289,11 @@ class Rest extends Datasource {
 	connectedCallback() {
 		super.connectedCallback();
 
-		setTimeout(() => {
+		queueMicrotask(() => {
 			if (this.getOption("features.filter", false) === true) {
 				initFilter.call(this);
 			}
-		}, 0);
+		});
 	}
 
 	/**
@@ -335,7 +335,7 @@ class Rest extends Datasource {
 				datasource: this,
 			});
 
-			setTimeout(() => {
+			queueMicrotask(() => {
 				this[dataSourceSymbol]
 					.write()
 					.then((response) => {
@@ -353,7 +353,7 @@ class Rest extends Datasource {
 						addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error.toString());
 						reject(error);
 					});
-			}, 0);
+			});
 		});
 	}
 }
@@ -492,9 +492,9 @@ function initAutoInit() {
 		return;
 	}
 
-	setTimeout(() => {
+	queueMicrotask(() => {
 		this.fetch().catch(() => {});
-	}, 0);
+	});
 }
 
 function initEventHandler() {

source/components/datatable/datatable.mjs

@@ -290,12 +290,12 @@ class DataTable extends CustomElement {
 
 			this[datasourceLinkedElementSymbol] = element;
 
-			setTimeout(() => {
+			queueMicrotask(() => {
 				handleDataSourceChanges.call(this);
 				element.datasource.attachObserver(
 					new Observer(handleDataSourceChanges.bind(this)),
 				);
-			}, 0);
+			});
 		}
 
 		getHostConfig
@@ -658,7 +658,7 @@ function initEventHandler() {
 
 			headers[index].changeDirection();
 
-			setTimeout(function () {
+			queueMicrotask(function () {
 				/** hotfix, normally this should be done via the updater, no idea why this is not possible. */
 				element.setAttribute(
 					ATTRIBUTE_DATATABLE_SORTABLE,
@@ -666,7 +666,7 @@ function initEventHandler() {
 				);
 
 				storeOrderStatement.call(self, true);
-			}, 0);
+			});
 		}
 	});
 }
@@ -797,9 +797,9 @@ function initGridAndStructs(hostConfig, headerOrderMap) {
 	}
 
 	this.setOption("headers", headers);
-	setTimeout(() => {
+	queueMicrotask(() => {
 		storeOrderStatement.call(this, this.getOption("features.autoInit"));
-	}, 0);
+	});
 }
 
 /**

source/components/datatable/filter.mjs

@@ -386,14 +386,14 @@ function initControlReferences() {
 }
 
 function updateFilterSelections() {
-	setTimeout(() => {
+	queueMicrotask(() => {
 		const options = this[settingsSymbol].getOptions();
 		this[filterSelectElementSymbol].setOption("options", options);
-		setTimeout(() => {
+		queueMicrotask(() => {
 			this[filterSelectElementSymbol].value =
 				this[settingsSymbol].getSelected();
-		}, 10);
-	}, 10);
+		});
+	});
 }
 
 /**

source/components/datatable/filter/date-range.mjs

@@ -480,9 +480,9 @@ function initEventHandler() {
 
 	// change the input value if the user change the value of the radio button
 	this[inputElementSymbol].addEventListener("change", (event) => {
-		setTimeout(() => {
+		queueMicrotask(() => {
 			updatePopperInputsFromMainValue.call(this);
-		}, 0);
+		});
 	});
 
 	// if the user change the value of on of the input fields, we should update the value of the input field
@@ -514,9 +514,9 @@ function initEventHandler() {
 		if (event.key === "Escape") {
 			hide.call(this);
 
-			setTimeout(() => {
+			queueMicrotask(() => {
 				this[inputElementSymbol].focus();
-			}, 10);
+			});
 
 			return;
 		}
@@ -600,10 +600,10 @@ function show() {
 		clearAndDisableFormGroups.call(this);
 	}
 
-	setTimeout(() => {
+	queueMicrotask(() => {
 		updatePopperInputsFromMainValue.call(this);
 		updatePopper.call(this);
-	}, 0);
+	});
 }
 
 /**

source/components/datatable/filter/range.mjs

@@ -412,9 +412,9 @@ function initEventHandler() {
 		// if key code esc than hide dialog
 		if (event.key === "Escape") {
 			hide.call(this);
-			setTimeout(() => {
+			queueMicrotask(() => {
 				this[inputElementSymbol].focus();
-			}, 10);
+			});
 
 			return;
 		}
@@ -438,7 +438,7 @@ function initEventHandler() {
 			if (radio) {
 				radio.checked = true;
 			}
-			setTimeout(() => {
+			queueMicrotask(() => {
 				// focus the input field
 				const input = this[formContainerElementSymbol].querySelector(
 					"input[type=radio][value=single] ~ input[name=singleValue]",
@@ -446,7 +446,7 @@ function initEventHandler() {
 				if (input) {
 					input.focus();
 				}
-			}, 10);
+			});
 		}
 	});
 

source/components/datatable/save-button.mjs

@@ -260,7 +260,7 @@ function initControlReferences() {
 	);
 
 	if (this[stateButtonElementSymbol]) {
-		setTimeout(() => {
+		queueMicrotask(() => {
 			const states = {
 				changed: new State(
 					"changed",
@@ -278,7 +278,7 @@ function initControlReferences() {
 				"labels.button",
 				this.getOption("labels.button"),
 			);
-		}, 1);
+		});
 	}
 
 	return this;
@@ -288,7 +288,7 @@ function initControlReferences() {
  * @private
  */
 function initEventHandler() {
-	setTimeout(() => {
+	queueMicrotask(() => {
 		this[stateButtonElementSymbol].setOption("actions.click", () => {
 			this[datasourceLinkedElementSymbol]
 				.write()
@@ -308,7 +308,7 @@ function initEventHandler() {
 					addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error.toString());
 				});
 		});
-	}, 1);
+	});
 }
 
 /**

source/components/datatable/util.mjs

@@ -66,7 +66,7 @@ function handleDataSourceChanges() {
 		return;
 	}
 
-	setTimeout(() => {
+	queueMicrotask(() => {
 		this.setOption("data", data);
-	}, 0);
+	});
 }

source/components/tree-menu/tree-menu.mjs

@@ -189,9 +189,9 @@ class TreeMenu extends CustomElement {
 		initControlReferences.call(this);
 		initEventHandler.call(this);
 		initObserver.call(this);
-		setTimeout(() => {
+		queueMicrotask(() => {
 			copyIconMap.call(this);
-		}, 0);
+		});
 	}
 
 	/**
@@ -324,9 +324,9 @@ function initEventHandler() {
 						return;
 					}
 					this[preventChangeSymbol] = true;
-					setTimeout(() => {
+					queueMicrotask(() => {
 						importEntries.call(this);
-					}, 10);
+					});
 				}),
 			);
 		});
@@ -515,9 +515,9 @@ function importEntries() {
 		}
 	}
 
-	setTimeout(() => {
+	queueMicrotask(() => {
 		this.setOption("entries", options);
-	}, 5);
+	});
 
 	return this;
 }

source/dom/updater.mjs

@@ -33,7 +33,6 @@ import {isArray, isString, isInstance, isIterable} from "../types/is.mjs";
 import {Observer} from "../types/observer.mjs";
 import {ProxyObserver} from "../types/proxyobserver.mjs";
 import {validateArray, validateInstance} from "../types/validate.mjs";
-import {Sleep} from "../util/sleep.mjs";
 import {clone} from "../util/clone.mjs";
 import {trimSpaces} from "../util/trimspaces.mjs";
 import {addAttributeToken, addToObjectLink} from "./attributes.mjs";
@@ -310,9 +309,9 @@ function getControlEventHandler() {
         if (element === undefined) {
             return;
         }
-        setTimeout(() => {
+        queueMicrotask(() => {
             retrieveAndSetValue.call(this, element);
-        }, 0);
+        });
     };
 
     return this[symbol];

source/types/observer.mjs

@@ -132,12 +132,11 @@ class Observer extends Base {
 	update(subject) {
 		const self = this;
 
-		return new Promise(function (resolve, reject) {
 		if (!isObject(subject)) {
-				reject("subject must be an object");
-				return;
+			return Promise.reject("subject must be an object");
 		}
 
+		return new Promise(function (resolve, reject) {
 			self.queue.add(subject);
 
 			setTimeout(() => {

source/types/version.mjs

@@ -159,7 +159,7 @@ function getMonsterVersion() {
 	}
 
 	/** don't touch, replaced by make with package.json version */
-	monsterVersion = new Version("3.73.6");
+	monsterVersion = new Version("3.73.9");
 
 	return monsterVersion;
 }

test/cases/monster.mjs

@@ -7,7 +7,7 @@ describe('Monster', function () {
         let monsterVersion
 
         /** don´t touch, replaced by make with package.json version */
-        monsterVersion = new Version("3.73.6")
+        monsterVersion = new Version("3.73.9")
 
         let m = getMonsterVersion();
 

test/web/test.html

@@ -9,8 +9,8 @@
 </head>
 <body>
 <div id="headline" style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
-  <h1 style='margin-bottom: 0.1em;'>Monster 3.73.6</h1>
-  <div id="lastupdate" style='font-size:0.7em'>last update Do 1. Aug 15:58:34 CEST 2024</div>
+  <h1 style='margin-bottom: 0.1em;'>Monster 3.73.9</h1>
+  <div id="lastupdate" style='font-size:0.7em'>last update So 15. Sep 19:44:25 CEST 2024</div>
 </div>
 <div id="mocha-errors"
      style="color: red;font-weight: bold;display: flex;align-items: center;justify-content: center;flex-direction: column;margin:20px;"></div>