diff --git a/source/dom/updater.mjs b/source/dom/updater.mjs index 7a64b42a705ffab5545a0c2f98f802f45a29c41c..4d94970a455f2c0043195f9dc25ec0d868caa521 100644 --- a/source/dom/updater.mjs +++ b/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,12 +932,37 @@ 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(() => {