@schukai/monster 3.51.4 → 3.52.0

package/source/dom/util/extract-keys.mjs

@@ -17,28 +17,40 @@ export { extractKeys };
  * @param {string} valueSeparator
  * @returns {Map<any, any>}
  */
-function extractKeys(obj, keyPrefix = "", keySeparator = "-", valueSeparator = ".") {
-    const resultMap = new Map();
+function extractKeys(
+	obj,
+	keyPrefix = "",
+	keySeparator = "-",
+	valueSeparator = ".",
+) {
+	const resultMap = new Map();
 
-    function helper(currentObj, currentKeyPrefix, currentValuePrefix) {
-        for (const key in currentObj) {
-            if (currentObj[key] !== null && typeof currentObj[key] === "object" && !Array.isArray(currentObj[key])) {
-                const newKeyPrefix = currentKeyPrefix
-                    ? currentKeyPrefix + keySeparator + key.toLowerCase()
-                    : key.toLowerCase();
-                const newValuePrefix = currentValuePrefix ? currentValuePrefix + valueSeparator + key : key;
-                helper(currentObj[key], newKeyPrefix, newValuePrefix);
-            } else {
-                const finalKey = currentKeyPrefix
-                    ? currentKeyPrefix + keySeparator + key.toLowerCase()
-                    : key.toLowerCase();
-                const finalValue = currentValuePrefix ? currentValuePrefix + valueSeparator + key : key;
-                resultMap.set(finalKey, finalValue);
-            }
-        }
-    }
+	function helper(currentObj, currentKeyPrefix, currentValuePrefix) {
+		for (const key in currentObj) {
+			if (
+				currentObj[key] !== null &&
+				typeof currentObj[key] === "object" &&
+				!Array.isArray(currentObj[key])
+			) {
+				const newKeyPrefix = currentKeyPrefix
+					? currentKeyPrefix + keySeparator + key.toLowerCase()
+					: key.toLowerCase();
+				const newValuePrefix = currentValuePrefix
+					? currentValuePrefix + valueSeparator + key
+					: key;
+				helper(currentObj[key], newKeyPrefix, newValuePrefix);
+			} else {
+				const finalKey = currentKeyPrefix
+					? currentKeyPrefix + keySeparator + key.toLowerCase()
+					: key.toLowerCase();
+				const finalValue = currentValuePrefix
+					? currentValuePrefix + valueSeparator + key
+					: key;
+				resultMap.set(finalKey, finalValue);
+			}
+		}
+	}
 
-    helper(obj, keyPrefix, keyPrefix);
-    return resultMap;
+	helper(obj, keyPrefix, keyPrefix);
+	return resultMap;
 }
-

package/source/dom/util/init-options-from-attributes.mjs

@@ -41,50 +41,58 @@ export { initOptionsFromAttributes };
  * @returns {Object} - The initialized options object.
  * @this HTMLElement - The context of the DOM element.
  */
-function initOptionsFromAttributes(element, options, mapping = {}, prefix = "data-monster-option-") {
-    if (!(element instanceof HTMLElement)) return options;
-    if (!element.hasAttributes()) return options;
+function initOptionsFromAttributes(
+	element,
+	options,
+	mapping = {},
+	prefix = "data-monster-option-",
+) {
+	if (!(element instanceof HTMLElement)) return options;
+	if (!element.hasAttributes()) return options;
 
-    const keyMap = extractKeys(options);
+	const keyMap = extractKeys(options);
 
-    const finder = new Pathfinder(options);
+	const finder = new Pathfinder(options);
 
-    element.getAttributeNames().forEach((name) => {
-        if (!name.startsWith(prefix)) return;
+	element.getAttributeNames().forEach((name) => {
+		if (!name.startsWith(prefix)) return;
 
-        // check if the attribute name is a valid option.
-        // the mapping between the attribute is simple. The dash is replaced by a dot.
-        // e.g. data-monster-url => url
-        const optionName = keyMap.get(name.substring(prefix.length).toLowerCase());
-        if (!finder.exists(optionName)) return;
+		// check if the attribute name is a valid option.
+		// the mapping between the attribute is simple. The dash is replaced by a dot.
+		// e.g. data-monster-url => url
+		const optionName = keyMap.get(name.substring(prefix.length).toLowerCase());
+		if (!finder.exists(optionName)) return;
 
-        if (element.hasAttribute(name)) {
-            let value = element.getAttribute(name);
-            if (mapping.hasOwnProperty(optionName) && isFunction(mapping[optionName])) {
-                value = mapping[optionName](value);
-            }
+		if (element.hasAttribute(name)) {
+			let value = element.getAttribute(name);
+			if (
+				mapping.hasOwnProperty(optionName) &&
+				isFunction(mapping[optionName])
+			) {
+				value = mapping[optionName](value);
+			}
 
-            let optionValue = finder.getVia(optionName);
-            if (optionValue === null || optionValue === undefined) {
-                optionValue = value;
-            }
-                
-            const typeOfOptionValue = typeof optionValue;
-            if (optionValue === null || optionValue === undefined) {
-                value = null;
-            } else if (typeOfOptionValue === "boolean") {
-                value = value === "true";
-            } else if (typeOfOptionValue === "number") {
-                value = Number(value);
-            } else if (typeOfOptionValue === "string") {
-                value = String(value);
-            } else if (typeOfOptionValue === "object") {
-                value = JSON.parse(value);
-            }
+			let optionValue = finder.getVia(optionName);
+			if (optionValue === null || optionValue === undefined) {
+				optionValue = value;
+			}
 
-            finder.setVia(optionName, value);
-        }
-    });
+			const typeOfOptionValue = typeof optionValue;
+			if (optionValue === null || optionValue === undefined) {
+				value = null;
+			} else if (typeOfOptionValue === "boolean") {
+				value = value === "true";
+			} else if (typeOfOptionValue === "number") {
+				value = Number(value);
+			} else if (typeOfOptionValue === "string") {
+				value = String(value);
+			} else if (typeOfOptionValue === "object") {
+				value = JSON.parse(value);
+			}
 
-    return options;
+			finder.setVia(optionName, value);
+		}
+	});
+
+	return options;
 }

package/source/dom/util/namespace.mjs

@@ -0,0 +1,13 @@
+/**
+ * Copyright 2023 schukai GmbH
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+/**
+ * In this namespace all DOM utility functions are stored.
+ *
+ * @namespace Monster.DOM.Util
+ * @memberOf Monster
+ * @author schukai GmbH
+ */
+const ns = {};

package/source/dom/util/set-option-from-attribute.mjs

@@ -42,40 +42,46 @@ export { setOptionFromAttribute };
  * @returns {Object} - The initialized options object.
  * @this HTMLElement - The context of the DOM element.
  */
-function setOptionFromAttribute(element, name, options, mapping = {}, prefix = "data-monster-option-") {
-    if (!(element instanceof HTMLElement)) return options;
-    if (!element.hasAttributes()) return options;
+function setOptionFromAttribute(
+	element,
+	name,
+	options,
+	mapping = {},
+	prefix = "data-monster-option-",
+) {
+	if (!(element instanceof HTMLElement)) return options;
+	if (!element.hasAttributes()) return options;
 
-    const keyMap = extractKeys(options);
-    const finder = new Pathfinder(options);
+	const keyMap = extractKeys(options);
+	const finder = new Pathfinder(options);
 
-    // check if the attribute name is a valid option.
-    // the mapping between the attribute is simple. The dash is replaced by a dot.
-    // e.g. data-monster-url => url
-    const optionName = keyMap.get(name.substring(prefix.length).toLowerCase());
-    if (!finder.exists(optionName)) return;
+	// check if the attribute name is a valid option.
+	// the mapping between the attribute is simple. The dash is replaced by a dot.
+	// e.g. data-monster-url => url
+	const optionName = keyMap.get(name.substring(prefix.length).toLowerCase());
+	if (!finder.exists(optionName)) return;
 
-    if (!element.hasAttribute(name)) {
-        return options;
-    }
+	if (!element.hasAttribute(name)) {
+		return options;
+	}
 
-    let value = element.getAttribute(name);
-    if (mapping.hasOwnProperty(optionName) && isFunction(mapping[optionName])) {
-        value = mapping[optionName](value);
-    }
+	let value = element.getAttribute(name);
+	if (mapping.hasOwnProperty(optionName) && isFunction(mapping[optionName])) {
+		value = mapping[optionName](value);
+	}
 
-    const typeOfOptionValue = typeof finder.getVia(optionName);
-    if (typeOfOptionValue === "boolean") {
-        value = value === "true";
-    } else if (typeOfOptionValue === "number") {
-        value = Number(value);
-    } else if (typeOfOptionValue === "string") {
-        value = String(value);
-    } else if (typeOfOptionValue === "object") {
-        value = JSON.parse(value);
-    }
+	const typeOfOptionValue = typeof finder.getVia(optionName);
+	if (typeOfOptionValue === "boolean") {
+		value = value === "true";
+	} else if (typeOfOptionValue === "number") {
+		value = Number(value);
+	} else if (typeOfOptionValue === "string") {
+		value = String(value);
+	} else if (typeOfOptionValue === "object") {
+		value = JSON.parse(value);
+	}
 
-    finder.setVia(optionName, value);
+	finder.setVia(optionName, value);
 
-    return options;
+	return options;
 }

package/source/dom/util.mjs

@@ -8,7 +8,14 @@
 import { getGlobal } from "../types/global.mjs";
 import { validateString } from "../types/validate.mjs";
 
-export { getDocument, getWindow, getDocumentFragmentFromString, findElementWithIdUpwards, getContainingDocument };
+export {
+	getDocument,
+	getWindow,
+	getDocumentFragmentFromString,
+	findElementWithIdUpwards,
+	getContainingDocument,
+	getRegisteredCustomElements,
+};
 
 /**
  * This method fetches the document object
@@ -48,12 +55,12 @@ export { getDocument, getWindow, getDocumentFragmentFromString, findElementWithI
  * @throws {Error} not supported environment
  */
 function getDocument() {
-    let document = getGlobal()?.["document"];
-    if (typeof document !== "object") {
-        throw new Error("not supported environment");
-    }
+	const document = getGlobal()?.["document"];
+	if (typeof document !== "object") {
+		throw new Error("not supported environment");
+	}
 
-    return document;
+	return document;
 }
 
 /**
@@ -96,12 +103,12 @@ function getDocument() {
  * @throws {Error} not supported environment
  */
 function getWindow() {
-    let window = getGlobal()?.["window"];
-    if (typeof window !== "object") {
-        throw new Error("not supported environment");
-    }
+	const window = getGlobal()?.["window"];
+	if (typeof window !== "object") {
+		throw new Error("not supported environment");
+	}
 
-    return window;
+	return window;
 }
 
 /**
@@ -143,13 +150,13 @@ function getWindow() {
  * @throws {TypeError} value is not a string
  */
 function getDocumentFragmentFromString(html) {
-    validateString(html);
+	validateString(html);
 
-    const document = getDocument();
-    const template = document.createElement("template");
-    template.innerHTML = html;
+	const document = getDocument();
+	const template = document.createElement("template");
+	template.innerHTML = html;
 
-    return template.content;
+	return template.content;
 }
 
 /**
@@ -165,39 +172,39 @@ function getDocumentFragmentFromString(html) {
  * @copyright schukai GmbH
  */
 function findElementWithIdUpwards(element, targetId) {
-    if (!element) {
-        return null;
-    }
-
-    // Check if the current element has the target ID
-    if (element.id === targetId) {
-        return element;
-    }
-
-    // Search within the current element's shadow root, if it exists
-    if (element.shadowRoot) {
-        const target = element.shadowRoot.getElementById(targetId);
-        if (target) {
-            return target;
-        }
-    }
-
-    // If the current element is the document.documentElement, search within the main document
-    if (element === document.documentElement) {
-        const target = document.getElementById(targetId);
-        if (target) {
-            return target;
-        }
-    }
-
-    // If the current element is inside a shadow root, search its host's ancestors
-    const rootNode = element.getRootNode();
-    if (rootNode && rootNode instanceof ShadowRoot) {
-        return findElementWithIdUpwards(rootNode.host, targetId);
-    }
-
-    // Otherwise, search the current element's parent
-    return findElementWithIdUpwards(element.parentElement, targetId);
+	if (!element) {
+		return null;
+	}
+
+	// Check if the current element has the target ID
+	if (element.id === targetId) {
+		return element;
+	}
+
+	// Search within the current element's shadow root, if it exists
+	if (element.shadowRoot) {
+		const target = element.shadowRoot.getElementById(targetId);
+		if (target) {
+			return target;
+		}
+	}
+
+	// If the current element is the document.documentElement, search within the main document
+	if (element === document.documentElement) {
+		const target = document.getElementById(targetId);
+		if (target) {
+			return target;
+		}
+	}
+
+	// If the current element is inside a shadow root, search its host's ancestors
+	const rootNode = element.getRootNode();
+	if (rootNode && rootNode instanceof ShadowRoot) {
+		return findElementWithIdUpwards(rootNode.host, targetId);
+	}
+
+	// Otherwise, search the current element's parent
+	return findElementWithIdUpwards(element.parentElement, targetId);
 }
 
 /**
@@ -206,30 +213,34 @@ function findElementWithIdUpwards(element, targetId) {
  * @returns {HTMLElement|null}
  */
 function traverseShadowRoots(element) {
-    let currentRoot = element.shadowRoot;
-    let currentParent = element.parentNode;
-
-    while (
-        currentParent &&
-        currentParent.nodeType !== Node.DOCUMENT_NODE &&
-        currentParent.nodeType !== Node.DOCUMENT_FRAGMENT_NODE
-    ) {
-        if (currentRoot && currentRoot.parentNode) {
-            currentParent = currentRoot.parentNode;
-            currentRoot = currentParent.shadowRoot;
-        } else if (currentParent.parentNode) {
-            currentParent = currentParent.parentNode;
-            currentRoot = null;
-        } else if (currentRoot && currentRoot.host && currentRoot.host.nodeType === Node.DOCUMENT_NODE) {
-            currentParent = currentRoot.host;
-            currentRoot = null;
-        } else {
-            currentParent = null;
-            currentRoot = null;
-        }
-    }
-
-    return currentParent;
+	let currentRoot = element.shadowRoot;
+	let currentParent = element.parentNode;
+
+	while (
+		currentParent &&
+		currentParent.nodeType !== Node.DOCUMENT_NODE &&
+		currentParent.nodeType !== Node.DOCUMENT_FRAGMENT_NODE
+	) {
+		if (currentRoot && currentRoot.parentNode) {
+			currentParent = currentRoot.parentNode;
+			currentRoot = currentParent.shadowRoot;
+		} else if (currentParent.parentNode) {
+			currentParent = currentParent.parentNode;
+			currentRoot = null;
+		} else if (
+			currentRoot &&
+			currentRoot.host &&
+			currentRoot.host.nodeType === Node.DOCUMENT_NODE
+		) {
+			currentParent = currentRoot.host;
+			currentRoot = null;
+		} else {
+			currentParent = null;
+			currentRoot = null;
+		}
+	}
+
+	return currentParent;
 }
 
 /**
@@ -242,12 +253,32 @@ function traverseShadowRoots(element) {
  * @since 3.36.0
  */
 function getContainingDocument(element) {
-    if (
-        !element ||
-        !(element instanceof HTMLElement || element instanceof element.ownerDocument.defaultView.HTMLElement)
-    ) {
-        throw new Error("Invalid argument. Expected an HTMLElement.");
-    }
-
-    return traverseShadowRoots(element) || null;
+	if (
+		!element ||
+		!(
+			element instanceof HTMLElement ||
+			element instanceof element.ownerDocument.defaultView.HTMLElement
+		)
+	) {
+		throw new Error("Invalid argument. Expected an HTMLElement.");
+	}
+
+	return traverseShadowRoots(element) || null;
+}
+
+
+/**
+ * Returns a list of all registered custom elements in the current document.
+ * 
+ * @returns {string[]}
+ * @since 4.0.0
+ * @memberOf Monster.DOM
+ * @returns {string[]}
+ */
+function getRegisteredCustomElements() {
+	const customElementTags = Array.from(document.querySelectorAll('*'))
+		.map(tag => tag.tagName.toLowerCase())
+		.filter(tagName => tagName.includes('-') && customElements.get(tagName));
+
+	return Array.from(new Set(customElementTags));
 }

package/source/dom/worker/factory.mjs

@@ -23,87 +23,87 @@ export { Factory };
  * @summary A small factory to create worker
  */
 class Factory extends Base {
-    /**
-     *
-     */
-    constructor() {
-        super();
-        this[internalSymbol] = {
-            worker: new WeakMap(),
-        };
-    }
-
-    /**
-     * Creates a worker from a URL
-     *
-     * @param {string|URL} url
-     * @param {function} messageHandler
-     * @param {function} errorHandler
-     * @return {Worker}
-     */
-    createFromURL = function (url, messageHandler, errorHandler) {
-        if (url instanceof URL) {
-            url = url.toString();
-        }
-
-        const workerClass = getGlobalFunction("Worker");
-        var worker = new workerClass(validateString(url));
-
-        if (isFunction(messageHandler)) {
-            worker.onmessage = (event) => {
-                messageHandler.call(worker, event);
-            };
-        }
-
-        if (isFunction(errorHandler)) {
-            worker.onerror = (event) => {
-                errorHandler.call(worker, event);
-            };
-        }
-
-        return worker;
-    };
-
-    /**
-     * Creates a worker from a script
-     *
-     * @param {string} content
-     * @param {function} messageHandler
-     * @param {function} errorHandler
-     * @return {Worker}
-     * @see https://developer.mozilla.org/de/docs/Web/API/URL/createObjectURL
-     */
-    createFromScript = function (content, messageHandler, errorHandler) {
-        const blobFunction = new getGlobalFunction("Blob");
-        const blob = new blobFunction([validateString(content)], {
-            type: "script/javascript",
-        });
-
-        const url = getGlobalFunction("URL").createObjectURL(blob);
-        const worker = this.createFromURL(url, messageHandler, errorHandler);
-
-        this[internalSymbol]["worker"].set(worker, url);
-
-        return worker;
-    };
-
-    /**
-     * Terminate the worker and call revokeObjectURL if necessary.
-     *
-     * @param worker
-     * @return {Monster.DOM.Worker.Factory}
-     */
-    terminate(worker) {
-        const workerClass = getGlobalFunction("Worker");
-        validateInstance(worker, workerClass);
-
-        worker.terminate();
-
-        if (this[internalSymbol]["worker"].has(worker)) {
-            const url = this[internalSymbol]["worker"].get(worker);
-            URL.revokeObjectURL(url);
-        }
-
-        return this;
-    }
+	/**
+	 *
+	 */
+	constructor() {
+		super();
+		this[internalSymbol] = {
+			worker: new WeakMap(),
+		};
+	}
+
+	/**
+	 * Creates a worker from a URL
+	 *
+	 * @param {string|URL} url
+	 * @param {function} messageHandler
+	 * @param {function} errorHandler
+	 * @return {Worker}
+	 */
+	createFromURL = function (url, messageHandler, errorHandler) {
+		if (url instanceof URL) {
+			url = url.toString();
+		}
+
+		const workerClass = getGlobalFunction("Worker");
+		var worker = new workerClass(validateString(url));
+
+		if (isFunction(messageHandler)) {
+			worker.onmessage = (event) => {
+				messageHandler.call(worker, event);
+			};
+		}
+
+		if (isFunction(errorHandler)) {
+			worker.onerror = (event) => {
+				errorHandler.call(worker, event);
+			};
+		}
+
+		return worker;
+	};
+
+	/**
+	 * Creates a worker from a script
+	 *
+	 * @param {string} content
+	 * @param {function} messageHandler
+	 * @param {function} errorHandler
+	 * @return {Worker}
+	 * @see https://developer.mozilla.org/de/docs/Web/API/URL/createObjectURL
+	 */
+	createFromScript = function (content, messageHandler, errorHandler) {
+		const blobFunction = new getGlobalFunction("Blob");
+		const blob = new blobFunction([validateString(content)], {
+			type: "script/javascript",
+		});
+
+		const url = getGlobalFunction("URL").createObjectURL(blob);
+		const worker = this.createFromURL(url, messageHandler, errorHandler);
+
+		this[internalSymbol]["worker"].set(worker, url);
+
+		return worker;
+	};
+
+	/**
+	 * Terminate the worker and call revokeObjectURL if necessary.
+	 *
+	 * @param worker
+	 * @return {Monster.DOM.Worker.Factory}
+	 */
+	terminate(worker) {
+		const workerClass = getGlobalFunction("Worker");
+		validateInstance(worker, workerClass);
+
+		worker.terminate();
+
+		if (this[internalSymbol]["worker"].has(worker)) {
+			const url = this[internalSymbol]["worker"].get(worker);
+			URL.revokeObjectURL(url);
+		}
+
+		return this;
+	}
 }