@schukai/monster 4.57.0 → 4.59.0

package/source/dom/updater.mjs

@@ -17,24 +17,24 @@ 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_BIND_TYPE,
-  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_BIND_TYPE,
+	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,
-  isInteger,
-  isString,
-  isInstance,
-  isIterable,
+	isArray,
+	isInteger,
+	isString,
+	isInstance,
+	isIterable,
 } from "../types/is.mjs";
 import { Observer } from "../types/observer.mjs";
 import { ProxyObserver } from "../types/proxyobserver.mjs";
@@ -43,8 +43,8 @@ import { clone } from "../util/clone.mjs";
 import { trimSpaces } from "../util/trimspaces.mjs";
 import { addAttributeToken, addToObjectLink } from "./attributes.mjs";
 import {
-  CustomElement,
-  updaterTransformerMethodsSymbol,
+	CustomElement,
+	updaterTransformerMethodsSymbol,
 } from "./customelement.mjs";
 import { findTargetElementFromEvent } from "./events.mjs";
 import { findDocumentTemplate } from "./template.mjs";
@@ -98,208 +98,211 @@ const updaterRootSymbol = Symbol.for("@schukai/monster/dom/@@updater-root");
  * @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 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].element[updaterRootSymbol] = true;
-
-    this[internalSymbol].callbacks.set(
-      "checkstate",
-      getCheckStateCallback.call(this),
-    );
-
-    this[pendingDiffsSymbol] = [];
-    this[processingSymbol] = false;
-
-    this[internalSymbol].subject.attachObserver(
-      new Observer(() => {
-        const real = this[internalSymbol].subject.getRealSubject();
-        const diffResult = diff(this[internalSymbol].last, real);
-        this[internalSymbol].last = clone(real);
-        if (diffResult.length === 0) {
-          return Promise.resolve();
-        }
-        this[pendingDiffsSymbol].push(diffResult);
-        return this.#processQueue();
-      }),
-    );
-  }
-
-  /**
-   * @private
-   * @return {Promise}
-   */
-  async #processQueue() {
-    if (this[processingSymbol]) {
-      return Promise.resolve();
-    }
-    this[processingSymbol] = true;
-
-    try {
-      while (this[pendingDiffsSymbol].length) {
-        const diffResult = this[pendingDiffsSymbol].shift();
-        for (const change of Object.values(diffResult)) {
-          await this.#applyChange(change);
-        }
-      }
-    } catch (err) {
-      addErrorAttribute(this[internalSymbol]?.element, err);
-    } finally {
-      this[processingSymbol] = false;
-    }
-  }
-
-  /** @private **/
-  async #applyChange(change) {
-    removeElement.call(this, change);
-    insertElement.call(this, change);
-    updateContent.call(this, change);
-    await Promise.resolve();
-    updateAttributes.call(this, change);
-  }
-
-  /**
-   * 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.
-   *
-   * ```js
-   * 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.
-   *
-   * ```js
-   * 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
-   * @return {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 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[pendingDiffsSymbol] = [];
+		this[processingSymbol] = false;
+
+		this[internalSymbol].subject.attachObserver(
+			new Observer(() => {
+				const real = this[internalSymbol].subject.getRealSubject();
+				const diffResult = diff(this[internalSymbol].last, real);
+				this[internalSymbol].last = clone(real);
+				if (diffResult.length === 0) {
+					return Promise.resolve();
+				}
+				this[pendingDiffsSymbol].push(diffResult);
+				return this.#processQueue();
+			}),
+		);
+	}
+
+	/**
+	 * @private
+	 * @return {Promise}
+	 */
+	async #processQueue() {
+		if (this[processingSymbol]) {
+			return Promise.resolve();
+		}
+		this[processingSymbol] = true;
+
+		try {
+			while (this[pendingDiffsSymbol].length) {
+				const diffResult = this[pendingDiffsSymbol].shift();
+				for (const change of Object.values(diffResult)) {
+					await this.#applyChange(change);
+				}
+			}
+		} catch (err) {
+			addErrorAttribute(this[internalSymbol]?.element, err);
+		} finally {
+			this[processingSymbol] = false;
+		}
+	}
+
+	/** @private **/
+	async #applyChange(change) {
+		removeElement.call(this, change);
+		insertElement.call(this, change);
+		updateContent.call(this, change);
+		await Promise.resolve();
+		updateAttributes.call(this, change);
+	}
+
+	/**
+	 * 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.
+	 *
+	 * ```js
+	 * 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();
+
+		this[internalSymbol].element[updaterRootSymbol] = true;
+
+		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),
+			);
+		}
+
+		delete this[internalSymbol].element[updaterRootSymbol];
+
+		return this;
+	}
+
+	/**
+	 * The run method must be called for the update to start working.
+	 * The method ensures that changes are detected.
+	 *
+	 * ```js
+	 * 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
+	 * @return {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;
+	}
 }
 
 /**
@@ -310,20 +313,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;
+		}
+	};
 }
 
 /**
@@ -338,45 +341,45 @@ 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 root = findClosestUpdaterRootFromEvent(event);
-    if (root !== this[internalSymbol].element) {
-      return;
-    }
-    const element = findTargetElementFromEvent(event, ATTRIBUTE_UPDATER_BIND);
-
-    if (element === undefined) {
-      return;
-    }
-
-    if (this[timerElementEventHandlerSymbol] instanceof DeadMansSwitch) {
-      try {
-        this[timerElementEventHandlerSymbol].touch();
-        return;
-      } catch (e) {
-        delete this[timerElementEventHandlerSymbol];
-      }
-    }
-
-    this[timerElementEventHandlerSymbol] = new DeadMansSwitch(50, () => {
-      try {
-        retrieveAndSetValue.call(this, element);
-      } catch (e) {
-        addErrorAttribute(element, e);
-      }
-    });
-  };
-
-  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 root = findClosestUpdaterRootFromEvent(event);
+		if (root !== this[internalSymbol].element) {
+			return;
+		}
+		const element = findTargetElementFromEvent(event, ATTRIBUTE_UPDATER_BIND);
+
+		if (element === undefined) {
+			return;
+		}
+
+		if (this[timerElementEventHandlerSymbol] instanceof DeadMansSwitch) {
+			try {
+				this[timerElementEventHandlerSymbol].touch();
+				return;
+			} catch (e) {
+				delete this[timerElementEventHandlerSymbol];
+			}
+		}
+
+		this[timerElementEventHandlerSymbol] = new DeadMansSwitch(50, () => {
+			try {
+				retrieveAndSetValue.call(this, element);
+			} catch (e) {
+				addErrorAttribute(element, e);
+			}
+		});
+	};
+
+	return this[symbol];
 }
 
 /**
@@ -385,19 +388,19 @@ function getControlEventHandler() {
  * @return {HTMLElement|undefined}
  */
 function findClosestUpdaterRootFromEvent(event) {
-  if (typeof event?.composedPath !== "function") {
-    return undefined;
-  }
-
-  const path = event.composedPath();
-  for (let i = 0; i < path.length; i++) {
-    const node = path[i];
-    if (node instanceof HTMLElement && node[updaterRootSymbol] === true) {
-      return node;
-    }
-  }
-
-  return undefined;
+	if (typeof event?.composedPath !== "function") {
+		return undefined;
+	}
+
+	const path = event.composedPath();
+	for (let i = 0; i < path.length; i++) {
+		const node = path[i];
+		if (node instanceof HTMLElement && node[updaterRootSymbol] === true) {
+			return node;
+		}
+	}
+
+	return undefined;
 }
 
 /**
@@ -407,179 +410,179 @@ function findClosestUpdaterRootFromEvent(event) {
  * @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); // remove path: from the string
-
-  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 custom elements
-  } else if (
-    (element?.constructor?.prototype &&
-      !!Object.getOwnPropertyDescriptor(
-        element.constructor.prototype,
-        "value",
-      )?.["get"]) ||
-    "value" in element
-  ) {
-    value = element?.["value"];
-  } else {
-    throw new Error("unsupported object");
-  }
-
-  const type = element.getAttribute(ATTRIBUTE_UPDATER_BIND_TYPE);
-  switch (type) {
-    case "integer?":
-    case "int?":
-    case "number?":
-      value = Number(value);
-      if (isNaN(value) || 0 === value) {
-        value = undefined;
-      }
-      break;
-
-    case "number":
-    case "int":
-    case "float":
-    case "integer":
-      value = Number(value);
-      if (isNaN(value)) {
-        value = 0;
-      }
-      break;
-    case "boolean":
-    case "bool":
-    case "checkbox":
-      value =
-        value === "true" || value === "1" || value === "on" || value === true;
-      break;
-
-    case "string[]":
-    case "[]string":
-      if (isString(value)) {
-        if (value.trim() === "") {
-          value = [];
-        } else {
-          value = value.split(",").map((v) => `${v}`);
-        }
-      } else if (isInteger(value)) {
-        value = [`${value}`];
-      } else if (value === undefined || value === null) {
-        value = [];
-      } else if (isArray(value)) {
-        value = value.map((v) => `${v}`);
-      } else {
-        throw new Error("unsupported value");
-      }
-
-      break;
-
-    case "int[]":
-    case "integer[]":
-    case "number[]":
-    case "[]int":
-    case "[]integer":
-    case "[]number":
-      value = parseIntArray(value);
-      break;
-    case "[]":
-    case "array":
-    case "list":
-      if (isString(value)) {
-        if (value.trim() === "") {
-          value = [];
-        } else {
-          value = value.split(",");
-        }
-      } else if (isInteger(value)) {
-        value = [value];
-      } else if (value === undefined || value === null) {
-        value = [];
-      } else if (isArray(value)) {
-        // nothing to do
-      } else {
-        throw new Error("unsupported value for array");
-      }
-      break;
-    case "object":
-    case "json":
-      if (isString(value)) {
-        value = JSON.parse(value);
-      } else {
-        throw new Error("unsupported value for object");
-      }
-
-      break;
-    default:
-      break;
-  }
-
-  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); // remove path: from the string
+
+	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 custom elements
+	} else if (
+		(element?.constructor?.prototype &&
+			!!Object.getOwnPropertyDescriptor(
+				element.constructor.prototype,
+				"value",
+			)?.["get"]) ||
+		"value" in element
+	) {
+		value = element?.["value"];
+	} else {
+		throw new Error("unsupported object");
+	}
+
+	const type = element.getAttribute(ATTRIBUTE_UPDATER_BIND_TYPE);
+	switch (type) {
+		case "integer?":
+		case "int?":
+		case "number?":
+			value = Number(value);
+			if (isNaN(value) || 0 === value) {
+				value = undefined;
+			}
+			break;
+
+		case "number":
+		case "int":
+		case "float":
+		case "integer":
+			value = Number(value);
+			if (isNaN(value)) {
+				value = 0;
+			}
+			break;
+		case "boolean":
+		case "bool":
+		case "checkbox":
+			value =
+				value === "true" || value === "1" || value === "on" || value === true;
+			break;
+
+		case "string[]":
+		case "[]string":
+			if (isString(value)) {
+				if (value.trim() === "") {
+					value = [];
+				} else {
+					value = value.split(",").map((v) => `${v}`);
+				}
+			} else if (isInteger(value)) {
+				value = [`${value}`];
+			} else if (value === undefined || value === null) {
+				value = [];
+			} else if (isArray(value)) {
+				value = value.map((v) => `${v}`);
+			} else {
+				throw new Error("unsupported value");
+			}
+
+			break;
+
+		case "int[]":
+		case "integer[]":
+		case "number[]":
+		case "[]int":
+		case "[]integer":
+		case "[]number":
+			value = parseIntArray(value);
+			break;
+		case "[]":
+		case "array":
+		case "list":
+			if (isString(value)) {
+				if (value.trim() === "") {
+					value = [];
+				} else {
+					value = value.split(",");
+				}
+			} else if (isInteger(value)) {
+				value = [value];
+			} else if (value === undefined || value === null) {
+				value = [];
+			} else if (isArray(value)) {
+				// nothing to do
+			} else {
+				throw new Error("unsupported value for array");
+			}
+			break;
+		case "object":
+		case "json":
+			if (isString(value)) {
+				value = JSON.parse(value);
+			} else {
+				throw new Error("unsupported value for object");
+			}
+
+			break;
+		default:
+			break;
+	}
+
+	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);
+	}
 }
 
 /**
  * @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 (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");
 }
 
 /**
@@ -589,15 +592,15 @@ function parseIntArray(val) {
  * @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);
+	}
 }
 
 /**
@@ -608,11 +611,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);
+	}
 }
 
 /**
@@ -628,128 +631,128 @@ 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) {
-          addErrorAttribute(containerElement, e);
-        }
-
-        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] 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) {
-              addErrorAttribute(containerElement, e);
-            }
-          }
-        }
-      }
-
-      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) {
+					addErrorAttribute(containerElement, e);
+				}
+
+				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] 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) {
+							addErrorAttribute(containerElement, e);
+						}
+					}
+				}
+			}
+
+			p.pop();
+		}
+
+		if (found === false) break;
+		if (wd++ > 200) {
+			throw new Error("the maximum depth for the recursion is reached.");
+		}
+	}
 }
 
 /**
@@ -764,17 +767,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);
+	}
 }
 
 /**
@@ -787,31 +790,39 @@ function appendNewDocumentFragment(container, key, ref, path) {
  * @return {void}
  */
 function applyRecursive(node, key, path) {
-  if (!(node instanceof HTMLElement)) {
-    return;
-  }
-
-  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)) {
-    if (child instanceof HTMLElement) {
-      applyRecursive(child, key, path);
-    }
-  }
+	if (!(node instanceof HTMLElement)) {
+		return;
+	}
+
+	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}`),
+		);
+	}
+
+	if (node.hasAttribute(ATTRIBUTE_UPDATER_BIND)) {
+		const value = node.getAttribute(ATTRIBUTE_UPDATER_BIND);
+		node.setAttribute(
+			ATTRIBUTE_UPDATER_BIND,
+			value.replaceAll(`path:${key}`, `path:${path}`),
+		);
+	}
+
+	for (const [, child] of Object.entries(node.childNodes)) {
+		if (child instanceof HTMLElement) {
+			applyRecursive(child, key, path);
+		}
+	}
 }
 
 /**
@@ -823,19 +834,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);
+			}
+		}
+	}
 }
 
 /**
@@ -848,64 +859,64 @@ 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) {
-          addErrorAttribute(element, e);
-        }
-      } 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) {
+					addErrorAttribute(element, e);
+				}
+			} else {
+				element.innerHTML = value;
+			}
+		}
+	}
 }
 
 /**
@@ -915,9 +926,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);
 }
 
 /**
@@ -929,70 +940,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) {
-          addErrorAttribute(element, e);
-        }
+				let value;
+				try {
+					element.removeAttribute(ATTRIBUTE_ERRORMESSAGE);
+					value = pipe.run(subject);
+				} catch (e) {
+					addErrorAttribute(element, e);
+				}
 
-        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);
+			}
+		}
+	}
 }
 
 /**
@@ -1005,52 +1016,64 @@ 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)) {
-          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) {
-            element.selectedIndex = index;
-            break;
-          }
-        }
-
-        break;
-    }
-  } else if (element instanceof HTMLInputElement) {
-    switch (element.type) {
-      case "radio":
-        if (name === "checked") {
-          element.checked = value !== undefined;
-        }
-        break;
-
-      case "checkbox":
-        if (name === "checked") {
-          element.checked = value !== undefined;
-        }
-        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)) {
+					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) {
+						element.selectedIndex = index;
+						break;
+					}
+				}
+
+				break;
+		}
+	} else if (element instanceof HTMLInputElement) {
+		switch (element.type) {
+			case "radio":
+				if (name === "checked") {
+					element.checked = value !== undefined;
+				}
+				break;
+
+			case "checkbox":
+				if (name === "checked") {
+					element.checked = value !== undefined;
+				}
+				break;
+
+			case "color":
+				if (name === "value") {
+					// Setting an empty string on a color input is invalid (#rrggbb required)
+					if (value === undefined || value === "") {
+						break;
+					}
+
+					element.value = value;
+				}
+
+				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;
+		}
+	}
 }
 
 /**
@@ -1069,81 +1092,81 @@ function handleInputControlAttributeUpdate(element, name, value) {
  * @throws {TypeError} symbol must be an instance of Symbol
  */
 function addObjectWithUpdaterToElement(elements, symbol, object, config = {}) {
-  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 = [];
-
-  const updaterCallbacks = [];
-  const cb = this?.[updaterTransformerMethodsSymbol];
-  if (this instanceof HTMLElement && typeof cb === "function") {
-    const callbacks = cb.call(this);
-    if (typeof callbacks === "object") {
-      for (const [name, callback] of Object.entries(callbacks)) {
-        if (typeof callback === "function") {
-          updaterCallbacks.push([name, callback]);
-        } else {
-          addErrorAttribute(
-            this,
-            `onUpdaterPipeCallbacks: ${name} is not a function`,
-          );
-        }
-      }
-    } else {
-      addErrorAttribute(
-        this,
-        `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(() => {
-        if (config.eventProcessing === true) {
-          u.enableEventProcessing();
-        }
-
-        return u;
-      }),
-    );
-  });
-
-  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 = [];
+
+	const updaterCallbacks = [];
+	const cb = this?.[updaterTransformerMethodsSymbol];
+	if (this instanceof HTMLElement && typeof cb === "function") {
+		const callbacks = cb.call(this);
+		if (typeof callbacks === "object") {
+			for (const [name, callback] of Object.entries(callbacks)) {
+				if (typeof callback === "function") {
+					updaterCallbacks.push([name, callback]);
+				} else {
+					addErrorAttribute(
+						this,
+						`onUpdaterPipeCallbacks: ${name} is not a function`,
+					);
+				}
+			}
+		} else {
+			addErrorAttribute(
+				this,
+				`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(() => {
+				if (config.eventProcessing === true) {
+					u.enableEventProcessing();
+				}
+
+				return u;
+			}),
+		);
+	});
+
+	if (updaters.size > 0) {
+		addToObjectLink(this, symbol, updaters);
+	}
+
+	return result;
 }