@schukai/monster 3.55.0 → 3.55.2

package/source/dom/updater.mjs

@@ -5,34 +5,34 @@
  * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
  */
 
-import {internalSymbol} from "../constants.mjs";
-import {diff} from "../data/diff.mjs";
-import {Pathfinder} from "../data/pathfinder.mjs";
-import {Pipe} from "../data/pipe.mjs";
+import { internalSymbol } from "../constants.mjs";
+import { diff } from "../data/diff.mjs";
+import { Pathfinder } from "../data/pathfinder.mjs";
+import { Pipe } from "../data/pipe.mjs";
 import {
-    ATTRIBUTE_ERRORMESSAGE,
-    ATTRIBUTE_UPDATER_ATTRIBUTES,
-    ATTRIBUTE_UPDATER_BIND,
-    ATTRIBUTE_UPDATER_INSERT,
-    ATTRIBUTE_UPDATER_INSERT_REFERENCE,
-    ATTRIBUTE_UPDATER_REMOVE,
-    ATTRIBUTE_UPDATER_REPLACE,
-    ATTRIBUTE_UPDATER_SELECT_THIS,
+	ATTRIBUTE_ERRORMESSAGE,
+	ATTRIBUTE_UPDATER_ATTRIBUTES,
+	ATTRIBUTE_UPDATER_BIND,
+	ATTRIBUTE_UPDATER_INSERT,
+	ATTRIBUTE_UPDATER_INSERT_REFERENCE,
+	ATTRIBUTE_UPDATER_REMOVE,
+	ATTRIBUTE_UPDATER_REPLACE,
+	ATTRIBUTE_UPDATER_SELECT_THIS,
 } from "./constants.mjs";
 
-import {Base} from "../types/base.mjs";
-import {isArray, 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 {addToObjectLink} from "./attributes.mjs";
-import {findTargetElementFromEvent} from "./events.mjs";
-import {findDocumentTemplate} from "./template.mjs";
+import { Base } from "../types/base.mjs";
+import { isArray, 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 { addToObjectLink } from "./attributes.mjs";
+import { findTargetElementFromEvent } from "./events.mjs";
+import { findDocumentTemplate } from "./template.mjs";
 
-export {Updater, addObjectWithUpdaterToElement};
+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.
@@ -57,183 +57,182 @@ export {Updater, addObjectWithUpdaterToElement};
  * @summary The updater class connects an object with the dom
  */
 class Updater extends Base {
-    /**
-     * @since 1.8.0
-     * @param {HTMLElement} element
-     * @param {object|ProxyObserver|undefined} subject
-     * @throws {TypeError} value is not a object
-     * @throws {TypeError} value is not an instance of HTMLElement
-     * @see {@link Monster.DOM.findDocumentTemplate}
-     */
-    constructor(element, subject) {
-        super();
-
-        /**
-         * @type {HTMLElement}
-         */
-        if (subject === undefined) subject = {};
-        if (!isInstance(subject, ProxyObserver)) {
-            subject = new ProxyObserver(subject);
-        }
-
-        this[internalSymbol] = {
-            element: validateInstance(element, HTMLElement),
-            last: {},
-            callbacks: new Map(),
-            eventTypes: ["keyup", "click", "change", "drop", "touchend", "input"],
-            subject: subject,
-        };
-
-        this[internalSymbol].callbacks.set(
-            "checkstate",
-            getCheckStateCallback.call(this),
-        );
-
-        this[internalSymbol].subject.attachObserver(
-            new Observer(() => {
-                const s = this[internalSymbol].subject.getRealSubject();
-
-                const diffResult = diff(this[internalSymbol].last, s);
-                this[internalSymbol].last = clone(s);
-
-                let promises = [];
-
-                for (const [, change] of Object.entries(diffResult)) {
-                    promises.push(
-                        Sleep(1).then(() => {
-                            removeElement.call(this, change);
-                            insertElement.call(this, change);
-                            updateContent.call(this, change);
-                            updateAttributes.call(this, change);
-                        })
-                )
-                }
-
-                return Promise.all(promises)
-
-            }),
-        );
-    }
-
-    /**
-     * Defaults: 'keyup', 'click', 'change', 'drop', 'touchend'
-     *
-     * @see {@link https://developer.mozilla.org/de/docs/Web/Events}
-     * @since 1.9.0
-     * @param {Array} types
-     * @return {Updater}
-     */
-    setEventTypes(types) {
-        this[internalSymbol].eventTypes = validateArray(types);
-        return this;
-    }
-
-    /**
-     * With this method, the eventlisteners are hooked in and the magic begins.
-     *
-     * ```
-     * updater.run().then(() => {
-     *   updater.enableEventProcessing();
-     * });
-     * ```
-     *
-     * @since 1.9.0
-     * @return {Updater}
-     * @throws {Error} the bind argument must start as a value with a path
-     */
-    enableEventProcessing() {
-        this.disableEventProcessing();
-
-        for (const type of this[internalSymbol].eventTypes) {
-            // @see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
-            this[internalSymbol].element.addEventListener(
-                type,
-                getControlEventHandler.call(this),
-                {
-                    capture: true,
-                    passive: true,
-                },
-            );
-        }
-
-        return this;
-    }
-
-    /**
-     * This method turns off the magic or who loves it more profane it removes the eventListener.
-     *
-     * @since 1.9.0
-     * @return {Updater}
-     */
-    disableEventProcessing() {
-        for (const type of this[internalSymbol].eventTypes) {
-            this[internalSymbol].element.removeEventListener(
-                type,
-                getControlEventHandler.call(this),
-            );
-        }
-
-        return this;
-    }
-
-    /**
-     * The run method must be called for the update to start working.
-     * The method ensures that changes are detected.
-     *
-     * ```
-     * updater.run().then(() => {
-     *   updater.enableEventProcessing();
-     * });
-     * ```
-     *
-     * @summary Let the magic begin
-     * @return {Promise}
-     */
-    run() {
-        // the key __init__has no further meaning and is only
-        // used to create the diff for empty objects.
-        this[internalSymbol].last = {__init__: true};
-        return this[internalSymbol].subject.notifyObservers();
-    }
-
-    /**
-     * Gets the values of bound elements and changes them in subject
-     *
-     * @since 1.27.0
-     * @return {Monster.DOM.Updater}
-     */
-    retrieve() {
-        retrieveFromBindings.call(this);
-        return this;
-    }
-
-    /**
-     * If you have passed a ProxyObserver in the constructor, you will get the object that the ProxyObserver manages here.
-     * However, if you passed a simple object, here you will get a proxy for that object.
-     *
-     * For changes the ProxyObserver must be used.
-     *
-     * @since 1.8.0
-     * @return {Proxy}
-     */
-    getSubject() {
-        return this[internalSymbol].subject.getSubject();
-    }
-
-    /**
-     * This method can be used to register commands that can be called via call: instruction.
-     * This can be used to provide a pipe with its own functionality.
-     *
-     * @param {string} name
-     * @param {function} callback
-     * @returns {Transformer}
-     * @throws {TypeError} value is not a string
-     * @throws {TypeError} value is not a function
-     */
-    setCallback(name, callback) {
-        this[internalSymbol].callbacks.set(name, callback);
-        return this;
-    }
+	/**
+	 * @since 1.8.0
+	 * @param {HTMLElement} element
+	 * @param {object|ProxyObserver|undefined} subject
+	 * @throws {TypeError} value is not a object
+	 * @throws {TypeError} value is not an instance of HTMLElement
+	 * @see {@link Monster.DOM.findDocumentTemplate}
+	 */
+	constructor(element, subject) {
+		super();
+
+		/**
+		 * @type {HTMLElement}
+		 */
+		if (subject === undefined) subject = {};
+		if (!isInstance(subject, ProxyObserver)) {
+			subject = new ProxyObserver(subject);
+		}
+
+		this[internalSymbol] = {
+			element: validateInstance(element, HTMLElement),
+			last: {},
+			callbacks: new Map(),
+			eventTypes: ["keyup", "click", "change", "drop", "touchend", "input"],
+			subject: subject,
+		};
+
+		this[internalSymbol].callbacks.set(
+			"checkstate",
+			getCheckStateCallback.call(this),
+		);
+
+		this[internalSymbol].subject.attachObserver(
+			new Observer(() => {
+				const s = this[internalSymbol].subject.getRealSubject();
+
+				const diffResult = diff(this[internalSymbol].last, s);
+				this[internalSymbol].last = clone(s);
+
+				const promises = [];
+
+				for (const [, change] of Object.entries(diffResult)) {
+					promises.push(
+						Sleep(1).then(() => {
+							removeElement.call(this, change);
+							insertElement.call(this, change);
+							updateContent.call(this, change);
+							updateAttributes.call(this, change);
+						}),
+					);
+				}
+
+				return Promise.all(promises);
+			}),
+		);
+	}
+
+	/**
+	 * Defaults: 'keyup', 'click', 'change', 'drop', 'touchend'
+	 *
+	 * @see {@link https://developer.mozilla.org/de/docs/Web/Events}
+	 * @since 1.9.0
+	 * @param {Array} types
+	 * @return {Updater}
+	 */
+	setEventTypes(types) {
+		this[internalSymbol].eventTypes = validateArray(types);
+		return this;
+	}
+
+	/**
+	 * With this method, the eventlisteners are hooked in and the magic begins.
+	 *
+	 * ```
+	 * updater.run().then(() => {
+	 *   updater.enableEventProcessing();
+	 * });
+	 * ```
+	 *
+	 * @since 1.9.0
+	 * @return {Updater}
+	 * @throws {Error} the bind argument must start as a value with a path
+	 */
+	enableEventProcessing() {
+		this.disableEventProcessing();
+
+		for (const type of this[internalSymbol].eventTypes) {
+			// @see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
+			this[internalSymbol].element.addEventListener(
+				type,
+				getControlEventHandler.call(this),
+				{
+					capture: true,
+					passive: true,
+				},
+			);
+		}
+
+		return this;
+	}
+
+	/**
+	 * This method turns off the magic or who loves it more profane it removes the eventListener.
+	 *
+	 * @since 1.9.0
+	 * @return {Updater}
+	 */
+	disableEventProcessing() {
+		for (const type of this[internalSymbol].eventTypes) {
+			this[internalSymbol].element.removeEventListener(
+				type,
+				getControlEventHandler.call(this),
+			);
+		}
+
+		return this;
+	}
+
+	/**
+	 * The run method must be called for the update to start working.
+	 * The method ensures that changes are detected.
+	 *
+	 * ```
+	 * updater.run().then(() => {
+	 *   updater.enableEventProcessing();
+	 * });
+	 * ```
+	 *
+	 * @summary Let the magic begin
+	 * @return {Promise}
+	 */
+	run() {
+		// the key __init__has no further meaning and is only
+		// used to create the diff for empty objects.
+		this[internalSymbol].last = { __init__: true };
+		return this[internalSymbol].subject.notifyObservers();
+	}
+
+	/**
+	 * Gets the values of bound elements and changes them in subject
+	 *
+	 * @since 1.27.0
+	 * @return {Monster.DOM.Updater}
+	 */
+	retrieve() {
+		retrieveFromBindings.call(this);
+		return this;
+	}
+
+	/**
+	 * If you have passed a ProxyObserver in the constructor, you will get the object that the ProxyObserver manages here.
+	 * However, if you passed a simple object, here you will get a proxy for that object.
+	 *
+	 * For changes the ProxyObserver must be used.
+	 *
+	 * @since 1.8.0
+	 * @return {Proxy}
+	 */
+	getSubject() {
+		return this[internalSymbol].subject.getSubject();
+	}
+
+	/**
+	 * This method can be used to register commands that can be called via call: instruction.
+	 * This can be used to provide a pipe with its own functionality.
+	 *
+	 * @param {string} name
+	 * @param {function} callback
+	 * @returns {Transformer}
+	 * @throws {TypeError} value is not a string
+	 * @throws {TypeError} value is not a function
+	 */
+	setCallback(name, callback) {
+		this[internalSymbol].callbacks.set(name, callback);
+		return this;
+	}
 }
 
 /**
@@ -244,20 +243,20 @@ class Updater extends Base {
  * @this Updater
  */
 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;
-            }
-        } else if (this instanceof HTMLOptionElement) {
-            if (isArray(current) && current.indexOf(this.value) !== -1) {
-                return "true";
-            }
-
-            return undefined;
-        }
-    };
+	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;
+			}
+		} else if (this instanceof HTMLOptionElement) {
+			if (isArray(current) && current.indexOf(this.value) !== -1) {
+				return "true";
+			}
+
+			return undefined;
+		}
+	};
 }
 
 /**
@@ -272,26 +271,26 @@ const symbol = Symbol("@schukai/monster/updater@@EventHandler");
  * @throws {Error} the bind argument must start as a value with a path
  */
 function getControlEventHandler() {
-    if (this[symbol]) {
-        return this[symbol];
-    }
-
-    /**
-     * @throws {Error} the bind argument must start as a value with a path.
-     * @throws {Error} unsupported object
-     * @param {Event} event
-     */
-    this[symbol] = (event) => {
-        const element = findTargetElementFromEvent(event, ATTRIBUTE_UPDATER_BIND);
-
-        if (element === undefined) {
-            return;
-        }
-
-        retrieveAndSetValue.call(this, element);
-    };
-
-    return this[symbol];
+	if (this[symbol]) {
+		return this[symbol];
+	}
+
+	/**
+	 * @throws {Error} the bind argument must start as a value with a path.
+	 * @throws {Error} unsupported object
+	 * @param {Event} event
+	 */
+	this[symbol] = (event) => {
+		const element = findTargetElementFromEvent(event, ATTRIBUTE_UPDATER_BIND);
+
+		if (element === undefined) {
+			return;
+		}
+
+		retrieveAndSetValue.call(this, element);
+	};
+
+	return this[symbol];
 }
 
 /**
@@ -302,70 +301,70 @@ function getControlEventHandler() {
  * @private
  */
 function retrieveAndSetValue(element) {
-    const pathfinder = new Pathfinder(this[internalSymbol].subject.getSubject());
-
-    let path = element.getAttribute(ATTRIBUTE_UPDATER_BIND);
-    if (path === null)
-        throw new Error("the bind argument must start as a value with a path");
-
-    if (path.indexOf("path:") !== 0) {
-        throw new Error("the bind argument must start as a value with a path");
-    }
-
-    path = path.substring(5);
-
-    let value;
-
-    if (element instanceof HTMLInputElement) {
-        switch (element.type) {
-            case "checkbox":
-                value = element.checked ? element.value : undefined;
-                break;
-            default:
-                value = element.value;
-                break;
-        }
-    } else if (element instanceof HTMLTextAreaElement) {
-        value = element.value;
-    } else if (element instanceof HTMLSelectElement) {
-        switch (element.type) {
-            case "select-one":
-                value = element.value;
-                break;
-            case "select-multiple":
-                value = element.value;
-
-                let options = element?.selectedOptions;
-                if (options === undefined)
-                    options = element.querySelectorAll(":scope option:checked");
-                value = Array.from(options).map(({value}) => value);
-
-                break;
-        }
-
-        // values from customelements
-    } else if (
-        (element?.constructor?.prototype &&
-            !!Object.getOwnPropertyDescriptor(
-                element.constructor.prototype,
-                "value",
-            )?.["get"]) ||
-        element.hasOwnProperty("value")
-    ) {
-        value = element?.["value"];
-    } else {
-        throw new Error("unsupported object");
-    }
-
-    const copy = clone(this[internalSymbol].subject.getRealSubject());
-    const pf = new Pathfinder(copy);
-    pf.setVia(path, value);
-
-    const diffResult = diff(copy, this[internalSymbol].subject.getRealSubject());
-
-    if (diffResult.length > 0) {
-        pathfinder.setVia(path, value);
-    }
+	const pathfinder = new Pathfinder(this[internalSymbol].subject.getSubject());
+
+	let path = element.getAttribute(ATTRIBUTE_UPDATER_BIND);
+	if (path === null)
+		throw new Error("the bind argument must start as a value with a path");
+
+	if (path.indexOf("path:") !== 0) {
+		throw new Error("the bind argument must start as a value with a path");
+	}
+
+	path = path.substring(5);
+
+	let value;
+
+	if (element instanceof HTMLInputElement) {
+		switch (element.type) {
+			case "checkbox":
+				value = element.checked ? element.value : undefined;
+				break;
+			default:
+				value = element.value;
+				break;
+		}
+	} else if (element instanceof HTMLTextAreaElement) {
+		value = element.value;
+	} else if (element instanceof HTMLSelectElement) {
+		switch (element.type) {
+			case "select-one":
+				value = element.value;
+				break;
+			case "select-multiple":
+				value = element.value;
+
+				let options = element?.selectedOptions;
+				if (options === undefined)
+					options = element.querySelectorAll(":scope option:checked");
+				value = Array.from(options).map(({ value }) => value);
+
+				break;
+		}
+
+		// values from customelements
+	} else if (
+		(element?.constructor?.prototype &&
+			!!Object.getOwnPropertyDescriptor(
+				element.constructor.prototype,
+				"value",
+			)?.["get"]) ||
+		element.hasOwnProperty("value")
+	) {
+		value = element?.["value"];
+	} else {
+		throw new Error("unsupported object");
+	}
+
+	const copy = clone(this[internalSymbol].subject.getRealSubject());
+	const pf = new Pathfinder(copy);
+	pf.setVia(path, value);
+
+	const diffResult = diff(copy, this[internalSymbol].subject.getRealSubject());
+
+	if (diffResult.length > 0) {
+		pathfinder.setVia(path, value);
+	}
 }
 
 /**
@@ -375,15 +374,15 @@ function retrieveAndSetValue(element) {
  * @private
  */
 function retrieveFromBindings() {
-    if (this[internalSymbol].element.matches(`[${ATTRIBUTE_UPDATER_BIND}]`)) {
-        retrieveAndSetValue.call(this, this[internalSymbol].element);
-    }
-
-    for (const [, element] of this[internalSymbol].element
-        .querySelectorAll(`[${ATTRIBUTE_UPDATER_BIND}]`)
-        .entries()) {
-        retrieveAndSetValue.call(this, element);
-    }
+	if (this[internalSymbol].element.matches(`[${ATTRIBUTE_UPDATER_BIND}]`)) {
+		retrieveAndSetValue.call(this, this[internalSymbol].element);
+	}
+
+	for (const [, element] of this[internalSymbol].element
+		.querySelectorAll(`[${ATTRIBUTE_UPDATER_BIND}]`)
+		.entries()) {
+		retrieveAndSetValue.call(this, element);
+	}
 }
 
 /**
@@ -394,11 +393,11 @@ function retrieveFromBindings() {
  * @return {void}
  */
 function removeElement(change) {
-    for (const [, element] of this[internalSymbol].element
-        .querySelectorAll(`:scope [${ATTRIBUTE_UPDATER_REMOVE}]`)
-        .entries()) {
-        element.parentNode.removeChild(element);
-    }
+	for (const [, element] of this[internalSymbol].element
+		.querySelectorAll(`:scope [${ATTRIBUTE_UPDATER_REMOVE}]`)
+		.entries()) {
+		element.parentNode.removeChild(element);
+	}
 }
 
 /**
@@ -414,135 +413,133 @@ function removeElement(change) {
  * @this Updater
  */
 function insertElement(change) {
-    const subject = this[internalSymbol].subject.getRealSubject();
+	const subject = this[internalSymbol].subject.getRealSubject();
 
-    const mem = new WeakSet();
-    let wd = 0;
+	const mem = new WeakSet();
+	let wd = 0;
 
-    const container = this[internalSymbol].element;
+	const container = this[internalSymbol].element;
 
-    while (true) {
-        let found = false;
-        wd++;
-
-        const p = clone(change?.["path"]);
-        if (!isArray(p)) return;
-
-        while (p.length > 0) {
-            const current = p.join(".");
-
-            let iterator = new Set();
-            const query = `[${ATTRIBUTE_UPDATER_INSERT}*="path:${current}"]`;
-
-            const e = container.querySelectorAll(query);
-
-            if (e.length > 0) {
-                iterator = new Set([...e]);
-            }
-
-            if (container.matches(query)) {
-                iterator.add(container);
-            }
-
-            for (const [, containerElement] of iterator.entries()) {
-                if (mem.has(containerElement)) continue;
-                mem.add(containerElement);
-
-                found = true;
-
-                const attributes = containerElement.getAttribute(
-                    ATTRIBUTE_UPDATER_INSERT,
-                );
-                if (attributes === null) continue;
-
-                const def = trimSpaces(attributes);
-                const i = def.indexOf(" ");
-                const key = trimSpaces(def.substr(0, i));
-                const refPrefix = `${key}-`;
-                const cmd = trimSpaces(def.substr(i));
-
-                // this case is actually excluded by the query but is nevertheless checked again here
-                if (cmd.indexOf("|") > 0) {
-                    throw new Error("pipes are not allowed when cloning a node.");
-                }
-
-                const pipe = new Pipe(cmd);
-                this[internalSymbol].callbacks.forEach((f, n) => {
-                    pipe.setCallback(n, f);
-                });
-
-                let value;
-                try {
-                    containerElement.removeAttribute(ATTRIBUTE_ERRORMESSAGE);
-                    value = pipe.run(subject);
-                } catch (e) {
-                    containerElement.setAttribute(ATTRIBUTE_ERRORMESSAGE, e.message);
-                }
-
-                const dataPath = cmd.split(":").pop();
-
-                let insertPoint;
-                if (containerElement.hasChildNodes()) {
-                    insertPoint = containerElement.lastChild;
-                }
-
-                if (!isIterable(value)) {
-                    throw new Error("the value is not iterable");
-                }
-
-                const available = new Set();
-
-                for (const [i, obj] of Object.entries(value)) {
-                    const ref = refPrefix + i;
-                    const currentPath = `${dataPath}.${i}`;
-
-                    available.add(ref);
-                    const refElement = containerElement.querySelector(
-                        `[${ATTRIBUTE_UPDATER_INSERT_REFERENCE}="${ref}"]`,
-                    );
-
-                    if (refElement instanceof HTMLElement) {
-                        insertPoint = refElement;
-                        continue;
-                    }
-
-                    appendNewDocumentFragment(containerElement, key, ref, currentPath);
-                }
-
-                const nodes = containerElement.querySelectorAll(
-                    `[${ATTRIBUTE_UPDATER_INSERT_REFERENCE}*="${refPrefix}"]`,
-                );
-
-                for (const [, node] of Object.entries(nodes)) {
-                    if (
-                        !available.has(
-                            node.getAttribute(ATTRIBUTE_UPDATER_INSERT_REFERENCE),
-                        )
-                    ) {
-                        try {
-                            containerElement.removeChild(node);
-                        } catch (e) {
-                            containerElement.setAttribute(
-                                ATTRIBUTE_ERRORMESSAGE,
-                                `${containerElement.getAttribute(ATTRIBUTE_ERRORMESSAGE)}, ${
-                                    e.message
-                                }`.trim(),
-                            );
-                        }
-                    }
-
-                }
-
-            }
-
-            p.pop();
-        }
-
-        if (found === false) break;
-        if (wd++ > 200) {
-            throw new Error("the maximum depth for the recursion is reached.");
-        }
-    }
+	while (true) {
+		let found = false;
+		wd++;
+
+		const p = clone(change?.["path"]);
+		if (!isArray(p)) return;
+
+		while (p.length > 0) {
+			const current = p.join(".");
+
+			let iterator = new Set();
+			const query = `[${ATTRIBUTE_UPDATER_INSERT}*="path:${current}"]`;
+
+			const e = container.querySelectorAll(query);
+
+			if (e.length > 0) {
+				iterator = new Set([...e]);
+			}
+
+			if (container.matches(query)) {
+				iterator.add(container);
+			}
+
+			for (const [, containerElement] of iterator.entries()) {
+				if (mem.has(containerElement)) continue;
+				mem.add(containerElement);
+
+				found = true;
+
+				const attributes = containerElement.getAttribute(
+					ATTRIBUTE_UPDATER_INSERT,
+				);
+				if (attributes === null) continue;
+
+				const def = trimSpaces(attributes);
+				const i = def.indexOf(" ");
+				const key = trimSpaces(def.substr(0, i));
+				const refPrefix = `${key}-`;
+				const cmd = trimSpaces(def.substr(i));
+
+				// this case is actually excluded by the query but is nevertheless checked again here
+				if (cmd.indexOf("|") > 0) {
+					throw new Error("pipes are not allowed when cloning a node.");
+				}
+
+				const pipe = new Pipe(cmd);
+				this[internalSymbol].callbacks.forEach((f, n) => {
+					pipe.setCallback(n, f);
+				});
+
+				let value;
+				try {
+					containerElement.removeAttribute(ATTRIBUTE_ERRORMESSAGE);
+					value = pipe.run(subject);
+				} catch (e) {
+					containerElement.setAttribute(ATTRIBUTE_ERRORMESSAGE, e.message);
+				}
+
+				const dataPath = cmd.split(":").pop();
+
+				let insertPoint;
+				if (containerElement.hasChildNodes()) {
+					insertPoint = containerElement.lastChild;
+				}
+
+				if (!isIterable(value)) {
+					throw new Error("the value is not iterable");
+				}
+
+				const available = new Set();
+
+				for (const [i, obj] of Object.entries(value)) {
+					const ref = refPrefix + i;
+					const currentPath = `${dataPath}.${i}`;
+
+					available.add(ref);
+					const refElement = containerElement.querySelector(
+						`[${ATTRIBUTE_UPDATER_INSERT_REFERENCE}="${ref}"]`,
+					);
+
+					if (refElement instanceof HTMLElement) {
+						insertPoint = refElement;
+						continue;
+					}
+
+					appendNewDocumentFragment(containerElement, key, ref, currentPath);
+				}
+
+				const nodes = containerElement.querySelectorAll(
+					`[${ATTRIBUTE_UPDATER_INSERT_REFERENCE}*="${refPrefix}"]`,
+				);
+
+				for (const [, node] of Object.entries(nodes)) {
+					if (
+						!available.has(
+							node.getAttribute(ATTRIBUTE_UPDATER_INSERT_REFERENCE),
+						)
+					) {
+						try {
+							containerElement.removeChild(node);
+						} catch (e) {
+							containerElement.setAttribute(
+								ATTRIBUTE_ERRORMESSAGE,
+								`${containerElement.getAttribute(ATTRIBUTE_ERRORMESSAGE)}, ${
+									e.message
+								}`.trim(),
+							);
+						}
+					}
+				}
+			}
+
+			p.pop();
+		}
+
+		if (found === false) break;
+		if (wd++ > 200) {
+			throw new Error("the maximum depth for the recursion is reached.");
+		}
+	}
 }
 
 /**
@@ -557,17 +554,17 @@ function insertElement(change) {
  * @throws {Error} no template was found with the specified key.
  */
 function appendNewDocumentFragment(container, key, ref, path) {
-    const template = findDocumentTemplate(key, container);
+	const template = findDocumentTemplate(key, container);
 
-    const nodes = template.createDocumentFragment();
-    for (const [, node] of Object.entries(nodes.childNodes)) {
-        if (node instanceof HTMLElement) {
-            applyRecursive(node, key, path);
-            node.setAttribute(ATTRIBUTE_UPDATER_INSERT_REFERENCE, ref);
-        }
+	const nodes = template.createDocumentFragment();
+	for (const [, node] of Object.entries(nodes.childNodes)) {
+		if (node instanceof HTMLElement) {
+			applyRecursive(node, key, path);
+			node.setAttribute(ATTRIBUTE_UPDATER_INSERT_REFERENCE, ref);
+		}
 
-        container.appendChild(node);
-    }
+		container.appendChild(node);
+	}
 }
 
 /**
@@ -580,27 +577,27 @@ function appendNewDocumentFragment(container, key, ref, path) {
  * @return {void}
  */
 function applyRecursive(node, key, path) {
-    if (node instanceof HTMLElement) {
-        if (node.hasAttribute(ATTRIBUTE_UPDATER_REPLACE)) {
-            const value = node.getAttribute(ATTRIBUTE_UPDATER_REPLACE);
-            node.setAttribute(
-                ATTRIBUTE_UPDATER_REPLACE,
-                value.replaceAll(`path:${key}`, `path:${path}`),
-            );
-        }
-
-        if (node.hasAttribute(ATTRIBUTE_UPDATER_ATTRIBUTES)) {
-            const value = node.getAttribute(ATTRIBUTE_UPDATER_ATTRIBUTES);
-            node.setAttribute(
-                ATTRIBUTE_UPDATER_ATTRIBUTES,
-                value.replaceAll(`path:${key}`, `path:${path}`),
-            );
-        }
-
-        for (const [, child] of Object.entries(node.childNodes)) {
-            applyRecursive(child, key, path);
-        }
-    }
+	if (node instanceof HTMLElement) {
+		if (node.hasAttribute(ATTRIBUTE_UPDATER_REPLACE)) {
+			const value = node.getAttribute(ATTRIBUTE_UPDATER_REPLACE);
+			node.setAttribute(
+				ATTRIBUTE_UPDATER_REPLACE,
+				value.replaceAll(`path:${key}`, `path:${path}`),
+			);
+		}
+
+		if (node.hasAttribute(ATTRIBUTE_UPDATER_ATTRIBUTES)) {
+			const value = node.getAttribute(ATTRIBUTE_UPDATER_ATTRIBUTES);
+			node.setAttribute(
+				ATTRIBUTE_UPDATER_ATTRIBUTES,
+				value.replaceAll(`path:${key}`, `path:${path}`),
+			);
+		}
+
+		for (const [, child] of Object.entries(node.childNodes)) {
+			applyRecursive(child, key, path);
+		}
+	}
 }
 
 /**
@@ -612,19 +609,19 @@ function applyRecursive(node, key, path) {
  * @this Updater
  */
 function updateContent(change) {
-    const subject = this[internalSymbol].subject.getRealSubject();
-
-    const p = clone(change?.["path"]);
-    runUpdateContent.call(this, this[internalSymbol].element, p, subject);
-
-    const slots = this[internalSymbol].element.querySelectorAll("slot");
-    if (slots.length > 0) {
-        for (const [, slot] of Object.entries(slots)) {
-            for (const [, element] of Object.entries(slot.assignedNodes())) {
-                runUpdateContent.call(this, element, p, subject);
-            }
-        }
-    }
+	const subject = this[internalSymbol].subject.getRealSubject();
+
+	const p = clone(change?.["path"]);
+	runUpdateContent.call(this, this[internalSymbol].element, p, subject);
+
+	const slots = this[internalSymbol].element.querySelectorAll("slot");
+	if (slots.length > 0) {
+		for (const [, slot] of Object.entries(slots)) {
+			for (const [, element] of Object.entries(slot.assignedNodes())) {
+				runUpdateContent.call(this, element, p, subject);
+			}
+		}
+	}
 }
 
 /**
@@ -637,69 +634,69 @@ function updateContent(change) {
  * @return {void}
  */
 function runUpdateContent(container, parts, subject) {
-    if (!isArray(parts)) return;
-    if (!(container instanceof HTMLElement)) return;
-    parts = clone(parts);
-
-    const mem = new WeakSet();
-
-    while (parts.length > 0) {
-        const current = parts.join(".");
-        parts.pop();
-
-        // 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]);
-
-        if (container.matches(query)) {
-            iterator.add(container);
-        }
-
-        /**
-         * @type {HTMLElement}
-         */
-        for (const [element] of iterator.entries()) {
-            if (mem.has(element)) return;
-            mem.add(element);
-
-            const attributes = element.getAttribute(ATTRIBUTE_UPDATER_REPLACE);
-            const cmd = trimSpaces(attributes);
-
-            const pipe = new Pipe(cmd);
-            this[internalSymbol].callbacks.forEach((f, n) => {
-                pipe.setCallback(n, f);
-            });
-
-            let value;
-            try {
-                element.removeAttribute(ATTRIBUTE_ERRORMESSAGE);
-                value = pipe.run(subject);
-            } catch (e) {
-                element.setAttribute(ATTRIBUTE_ERRORMESSAGE, e.message);
-            }
-
-            if (value instanceof HTMLElement) {
-                while (element.firstChild) {
-                    element.removeChild(element.firstChild);
-                }
-
-                try {
-                    element.appendChild(value);
-                } catch (e) {
-                    element.setAttribute(
-                        ATTRIBUTE_ERRORMESSAGE,
-                        `${element.getAttribute(ATTRIBUTE_ERRORMESSAGE)}, ${
-                            e.message
-                        }`.trim(),
-                    );
-                }
-            } else {
-                element.innerHTML = value;
-            }
-        }
-    }
+	if (!isArray(parts)) return;
+	if (!(container instanceof HTMLElement)) return;
+	parts = clone(parts);
+
+	const mem = new WeakSet();
+
+	while (parts.length > 0) {
+		const current = parts.join(".");
+		parts.pop();
+
+		// 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]);
+
+		if (container.matches(query)) {
+			iterator.add(container);
+		}
+
+		/**
+		 * @type {HTMLElement}
+		 */
+		for (const [element] of iterator.entries()) {
+			if (mem.has(element)) return;
+			mem.add(element);
+
+			const attributes = element.getAttribute(ATTRIBUTE_UPDATER_REPLACE);
+			const cmd = trimSpaces(attributes);
+
+			const pipe = new Pipe(cmd);
+			this[internalSymbol].callbacks.forEach((f, n) => {
+				pipe.setCallback(n, f);
+			});
+
+			let value;
+			try {
+				element.removeAttribute(ATTRIBUTE_ERRORMESSAGE);
+				value = pipe.run(subject);
+			} catch (e) {
+				element.setAttribute(ATTRIBUTE_ERRORMESSAGE, e.message);
+			}
+
+			if (value instanceof HTMLElement) {
+				while (element.firstChild) {
+					element.removeChild(element.firstChild);
+				}
+
+				try {
+					element.appendChild(value);
+				} catch (e) {
+					element.setAttribute(
+						ATTRIBUTE_ERRORMESSAGE,
+						`${element.getAttribute(ATTRIBUTE_ERRORMESSAGE)}, ${
+							e.message
+						}`.trim(),
+					);
+				}
+			} else {
+				element.innerHTML = value;
+			}
+		}
+	}
 }
 
 /**
@@ -711,9 +708,9 @@ function runUpdateContent(container, parts, subject) {
  * @return {void}
  */
 function updateAttributes(change) {
-    const subject = this[internalSymbol].subject.getRealSubject();
-    const p = clone(change?.["path"]);
-    runUpdateAttributes.call(this, this[internalSymbol].element, p, subject);
+	const subject = this[internalSymbol].subject.getRealSubject();
+	const p = clone(change?.["path"]);
+	runUpdateAttributes.call(this, this[internalSymbol].element, p, subject);
 }
 
 /**
@@ -725,70 +722,70 @@ function updateAttributes(change) {
  * @this Updater
  */
 function runUpdateAttributes(container, parts, subject) {
-    if (!isArray(parts)) return;
-    parts = clone(parts);
+	if (!isArray(parts)) return;
+	parts = clone(parts);
 
-    const mem = new WeakSet();
+	const mem = new WeakSet();
 
-    while (parts.length > 0) {
-        const current = parts.join(".");
-        parts.pop();
+	while (parts.length > 0) {
+		const current = parts.join(".");
+		parts.pop();
 
-        let iterator = new Set();
+		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 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);
+		const e = container.querySelectorAll(query);
 
-        if (e.length > 0) {
-            iterator = new Set([...e]);
-        }
+		if (e.length > 0) {
+			iterator = new Set([...e]);
+		}
 
-        if (container.matches(query)) {
-            iterator.add(container);
-        }
+		if (container.matches(query)) {
+			iterator.add(container);
+		}
 
-        for (const [element] of iterator.entries()) {
-            if (mem.has(element)) return;
-            mem.add(element);
+		for (const [element] of iterator.entries()) {
+			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;
-            }
+			// this case occurs when the ATTRIBUTE_UPDATER_SELECT_THIS attribute is set
+			if (!element.hasAttribute(ATTRIBUTE_UPDATER_ATTRIBUTES)) {
+				continue;
+			}
 
-            const attributes = element.getAttribute(ATTRIBUTE_UPDATER_ATTRIBUTES);
+			const attributes = element.getAttribute(ATTRIBUTE_UPDATER_ATTRIBUTES);
 
-            for (let [, def] of Object.entries(attributes.split(","))) {
-                def = trimSpaces(def);
-                const i = def.indexOf(" ");
-                const name = trimSpaces(def.substr(0, i));
-                const cmd = trimSpaces(def.substr(i));
+			for (let [, def] of Object.entries(attributes.split(","))) {
+				def = trimSpaces(def);
+				const i = def.indexOf(" ");
+				const name = trimSpaces(def.substr(0, i));
+				const cmd = trimSpaces(def.substr(i));
 
-                const pipe = new Pipe(cmd);
+				const pipe = new Pipe(cmd);
 
-                this[internalSymbol].callbacks.forEach((f, n) => {
-                    pipe.setCallback(n, f, element);
-                });
+				this[internalSymbol].callbacks.forEach((f, n) => {
+					pipe.setCallback(n, f, element);
+				});
 
-                let value;
-                try {
-                    element.removeAttribute(ATTRIBUTE_ERRORMESSAGE);
-                    value = pipe.run(subject);
-                } catch (e) {
-                    element.setAttribute(ATTRIBUTE_ERRORMESSAGE, e.message);
-                }
+				let value;
+				try {
+					element.removeAttribute(ATTRIBUTE_ERRORMESSAGE);
+					value = pipe.run(subject);
+				} catch (e) {
+					element.setAttribute(ATTRIBUTE_ERRORMESSAGE, e.message);
+				}
 
-                if (value === undefined) {
-                    element.removeAttribute(name);
-                } else if (element.getAttribute(name) !== value) {
-                    element.setAttribute(name, value);
-                }
+				if (value === undefined) {
+					element.removeAttribute(name);
+				} else if (element.getAttribute(name) !== value) {
+					element.setAttribute(name, value);
+				}
 
-                handleInputControlAttributeUpdate.call(this, element, name, value);
-            }
-        }
-    }
+				handleInputControlAttributeUpdate.call(this, element, name, value);
+			}
+		}
+	}
 }
 
 /**
@@ -801,66 +798,66 @@ function runUpdateAttributes(container, parts, subject) {
  */
 
 function handleInputControlAttributeUpdate(element, name, value) {
-    if (element instanceof HTMLSelectElement) {
-        switch (element.type) {
-            case "select-multiple":
-                for (const [index, opt] of Object.entries(element.options)) {
-                    if (value.indexOf(opt.value) !== -1) {
-                        opt.selected = true;
-                    } else {
-                        opt.selected = false;
-                    }
-                }
-
-                break;
-            case "select-one":
-                // Only one value may be selected
-
-                for (const [index, opt] of Object.entries(element.options)) {
-                    if (opt.value === value) {
-                        element.selectedIndex = index;
-                        break;
-                    }
-                }
-
-                break;
-        }
-    } else if (element instanceof HTMLInputElement) {
-        switch (element.type) {
-            case "radio":
-                if (name === "checked") {
-                    if (value !== undefined) {
-                        element.checked = true;
-                    } else {
-                        element.checked = false;
-                    }
-                }
-
-                break;
-
-            case "checkbox":
-                if (name === "checked") {
-                    if (value !== undefined) {
-                        element.checked = true;
-                    } else {
-                        element.checked = false;
-                    }
-                }
-
-                break;
-            case "text":
-            default:
-                if (name === "value") {
-                    element.value = value === undefined ? "" : value;
-                }
-
-                break;
-        }
-    } else if (element instanceof HTMLTextAreaElement) {
-        if (name === "value") {
-            element.value = value === undefined ? "" : value;
-        }
-    }
+	if (element instanceof HTMLSelectElement) {
+		switch (element.type) {
+			case "select-multiple":
+				for (const [index, opt] of Object.entries(element.options)) {
+					if (value.indexOf(opt.value) !== -1) {
+						opt.selected = true;
+					} else {
+						opt.selected = false;
+					}
+				}
+
+				break;
+			case "select-one":
+				// Only one value may be selected
+
+				for (const [index, opt] of Object.entries(element.options)) {
+					if (opt.value === value) {
+						element.selectedIndex = index;
+						break;
+					}
+				}
+
+				break;
+		}
+	} else if (element instanceof HTMLInputElement) {
+		switch (element.type) {
+			case "radio":
+				if (name === "checked") {
+					if (value !== undefined) {
+						element.checked = true;
+					} else {
+						element.checked = false;
+					}
+				}
+
+				break;
+
+			case "checkbox":
+				if (name === "checked") {
+					if (value !== undefined) {
+						element.checked = true;
+					} else {
+						element.checked = false;
+					}
+				}
+
+				break;
+			case "text":
+			default:
+				if (name === "value") {
+					element.value = value === undefined ? "" : value;
+				}
+
+				break;
+		}
+	} else if (element instanceof HTMLTextAreaElement) {
+		if (name === "value") {
+			element.value = value === undefined ? "" : value;
+		}
+	}
 }
 
 /**
@@ -876,48 +873,48 @@ function handleInputControlAttributeUpdate(element, name, value) {
  * @throws {TypeError} symbol must be an instance of Symbol
  */
 function addObjectWithUpdaterToElement(elements, symbol, object) {
-    if (!(this instanceof HTMLElement)) {
-        throw new TypeError(
-            "the context of this function must be an instance of HTMLElement",
-        );
-    }
-
-    if (!(typeof symbol === "symbol")) {
-        throw new TypeError("symbol must be an instance of Symbol");
-    }
-
-    const updaters = new Set();
-
-    if (elements instanceof NodeList) {
-        elements = new Set([...elements]);
-    } else if (elements instanceof HTMLElement) {
-        elements = new Set([elements]);
-    } else if (elements instanceof Set) {
-    } else {
-        throw new TypeError(
-            `elements is not a valid type. (actual: ${typeof elements})`,
-        );
-    }
-
-    const result = [];
-
-    elements.forEach((element) => {
-        if (!(element instanceof HTMLElement)) return;
-        if (element instanceof HTMLTemplateElement) return;
-
-        const u = new Updater(element, object);
-        updaters.add(u);
-
-        result.push(
-            u.run().then(() => {
-                return u.enableEventProcessing();
-            }),
-        );
-    });
-
-    if (updaters.size > 0) {
-        addToObjectLink(this, symbol, updaters);
-    }
-
-    return result;
+	if (!(this instanceof HTMLElement)) {
+		throw new TypeError(
+			"the context of this function must be an instance of HTMLElement",
+		);
+	}
+
+	if (!(typeof symbol === "symbol")) {
+		throw new TypeError("symbol must be an instance of Symbol");
+	}
+
+	const updaters = new Set();
+
+	if (elements instanceof NodeList) {
+		elements = new Set([...elements]);
+	} else if (elements instanceof HTMLElement) {
+		elements = new Set([elements]);
+	} else if (elements instanceof Set) {
+	} else {
+		throw new TypeError(
+			`elements is not a valid type. (actual: ${typeof elements})`,
+		);
+	}
+
+	const result = [];
+
+	elements.forEach((element) => {
+		if (!(element instanceof HTMLElement)) return;
+		if (element instanceof HTMLTemplateElement) return;
+
+		const u = new Updater(element, object);
+		updaters.add(u);
+
+		result.push(
+			u.run().then(() => {
+				return u.enableEventProcessing();
+			}),
+		);
+	});
+
+	if (updaters.size > 0) {
+		addToObjectLink(this, symbol, updaters);
+	}
+
+	return result;
 }