feat: new updaterTransformerMethodsSymbol method #163

source/dom/updater.mjs

@@ -29,20 +29,23 @@ 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 { addToObjectLink } from "./attributes.mjs";
+import {addAttributeToken, addToObjectLink} from "./attributes.mjs";
+import {updaterTransformerMethodsSymbol} from "./customelement.mjs";
 import { findTargetElementFromEvent } from "./events.mjs";
 import { findDocumentTemplate } from "./template.mjs";
 
 export { Updater, addObjectWithUpdaterToElement };
 
 /**
- * The updater class connects an object with the dom. In this way, structures and contents in the DOM can be programmatically adapted via attributes.
+ * The updater class connects an object with the dom. In this way, structures and contents in the DOM can be 
+ * programmatically adapted via attributes.
  *
  * For example, to include a string from an object, the attribute `data-monster-replace` can be used.
  * a further explanation can be found under [monsterjs.org](https://monsterjs.org/)
  *
- * Changes to attributes are made only when the direct values are changed. If you want to assign changes to other values
- * as well, you have to insert the attribute `data-monster-select-this`. This should be done with care, as it can reduce performance.
+ * Changes to attributes are made only when the direct values are changed. If you want to assign changes 
+ * to other values as well, you have to insert the attribute `data-monster-select-this`. This should be 
+ * done with care, as it can reduce performance.
  *
  * @externalExample ../../example/dom/updater.mjs
  * @license AGPLv3
@@ -929,13 +932,38 @@ function addObjectWithUpdaterToElement(elements, symbol, object) {
 
 	const result = [];
 
+	let updaterCallbacks = []
+	const cb = this?.[updaterTransformerMethodsSymbol]
+	if (this instanceof HTMLElement && (typeof cb === "function")) {
+		
+		let callbacks = cb();
+		if (typeof callbacks === "object") {
+			for (const [name, callback] of Object.entries(callbacks)) {
+				if (typeof callback === "function") {
+					updaterCallbacks.push([name, callback]);
+				} else {
+					addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, `onUpdaterPipeCallbacks: ${name} is not a function`);
+				}
+			}
+		} else {
+			addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, `onUpdaterPipeCallbacks do not return an object with functions`);
+		}
+	}
+
 	elements.forEach((element) => {
+		
 		if (!(element instanceof HTMLElement)) return;
 		if (element instanceof HTMLTemplateElement) return;
 
 		const u = new Updater(element, object);
 		updaters.add(u);
 		
+		if (updaterCallbacks.length > 0) {
+			for (const [name, callback] of updaterCallbacks) {
+				u.setCallback(name, callback);
+			}
+		}
+
 		result.push(
 			u.run().then(() => {
 				return u.enableEventProcessing();