@schukai/monster 3.110.0 → 3.110.2

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 
 
+## [3.110.2] - 2025-02-19
+
+### Bug Fixes
+
+- **reload:** set shadowRoot to false
+
+
+
+## [3.110.1] - 2025-02-19
+
+### Bug Fixes
+
+- optimize rest errors
+
+
+
 ## [3.110.0] - 2025-02-18
 
 ### Add Features

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.13","@popperjs/core":"^2.11.8","buffer":"^6.0.3"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"3.110.0"}
+{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.13","@popperjs/core":"^2.11.8","buffer":"^6.0.3"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"3.110.2"}

package/source/components/datatable/status.mjs

@@ -13,26 +13,26 @@
  */
 
 import {
-	assembleMethodSymbol,
-	CustomElement,
-	registerCustomElement,
+    assembleMethodSymbol,
+    CustomElement,
+    registerCustomElement,
 } from "../../dom/customelement.mjs";
-import { findElementWithSelectorUpwards } from "../../dom/util.mjs";
-import { ThemeStyleSheet } from "../stylesheet/theme.mjs";
-import { Datasource } from "./datasource.mjs";
-import { SpinnerStyleSheet } from "../stylesheet/spinner.mjs";
-import { isString } from "../../types/is.mjs";
-import { instanceSymbol } from "../../constants.mjs";
+import {findElementWithSelectorUpwards} from "../../dom/util.mjs";
+import {ThemeStyleSheet} from "../stylesheet/theme.mjs";
+import {Datasource} from "./datasource.mjs";
+import {SpinnerStyleSheet} from "../stylesheet/spinner.mjs";
+import {isString} from "../../types/is.mjs";
+import {instanceSymbol} from "../../constants.mjs";
 import "../form/select.mjs";
 
 import "./datasource/dom.mjs";
 import "./datasource/rest.mjs";
 import "../form/popper.mjs";
 import "../form/context-error.mjs";
-import { StatusStyleSheet } from "./stylesheet/status.mjs";
+import {StatusStyleSheet} from "./stylesheet/status.mjs";
 import {Formatter} from "../../text/formatter.mjs";
 
-export { DatasourceStatus };
+export {DatasourceStatus};
 
 /**
  * @private
@@ -59,86 +59,97 @@ const datasourceLinkedElementSymbol = Symbol("datasourceLinkedElement");
  * @summary The Status component is used to show the current status of a datasource.
  */
 class DatasourceStatus extends CustomElement {
-	/**
-	 */
-	constructor() {
-		super();
-	}
-
-	/**
-	 * This method is called by the `instanceof` operator.
-	 * @return {symbol}
-	 */
-	static get [instanceSymbol]() {
-		return Symbol.for("@schukai/monster/components/datatable/status@@instance");
-	}
-
-	/**
-	 * To set the options via the HTML tag, the attribute `data-monster-options` must be used.
-	 * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
-	 *
-	 * The individual configuration values can be found in the table.
-	 *
-	 * @property {Object} templates Template definitions
-	 * @property {string} templates.main Main template
-	 * @property {Object} datasource Datasource configuration
-	 * @property {string} datasource.selector The selector of the datasource
-	 * @property {Object} callbacks Callbacks
-	 * @property {Function} callbacks.onError Callback function for error handling
-	 * @property {Object} timeouts Timeouts
-	 * @property {number} timeouts.message Timeout for the message
-	 * @property {Object} state State
-	 */
-	get defaults() {
-		return Object.assign({}, super.defaults, {
-			templates: {
-				main: getTemplate(),
-			},
-
-			datasource: {
-				selector: null,
-			},
-
-			callbacks: {
-				onError: null
-			},
-
-
-			timeouts: {
-				message: 4000,
-			},
-
-			state: {
-				spinner: "hide",
-			},
-		});
-	}
-
-	/**
-	 *
-	 * @return {string}
-	 */
-	static getTag() {
-		return "monster-datasource-status";
-	}
-
-	/**
-	 * @private
-	 */
-	[assembleMethodSymbol]() {
-		super[assembleMethodSymbol]();
-
-		initControlReferences.call(this);
-		initEventHandler.call(this);
-	}
-
-	/**
-	 *
-	 * @return [CSSStyleSheet]
-	 */
-	static getCSSStyleSheet() {
-		return [StatusStyleSheet, SpinnerStyleSheet, ThemeStyleSheet];
-	}
+    /**
+     */
+    constructor() {
+        super();
+    }
+
+    /**
+     * This method is called by the `instanceof` operator.
+     * @return {symbol}
+     */
+    static get [instanceSymbol]() {
+        return Symbol.for("@schukai/monster/components/datatable/status@@instance");
+    }
+
+    /**
+     * To set the options via the HTML tag, the attribute `data-monster-options` must be used.
+     * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
+     *
+     * The individual configuration values can be found in the table.
+     *
+     * @property {Object} templates Template definitions
+     * @property {string} templates.main Main template
+     * @property {Object} datasource Datasource configuration
+     * @property {string} datasource.selector The selector of the datasource
+     * @property {Object} callbacks Callbacks
+     * @property {Function} callbacks.onError Callback function for error handling <code>function(message: string, event: Event): string</code>
+     * @property {Object} timeouts Timeouts
+     * @property {number} timeouts.message Timeout for the message
+     * @property {Object} state State
+     */
+    get defaults() {
+        return Object.assign({}, super.defaults, {
+            templates: {
+                main: getTemplate(),
+            },
+
+            datasource: {
+                selector: null,
+            },
+
+            callbacks: {
+                onError: null
+            },
+
+
+            timeouts: {
+                message: 4000,
+            },
+
+            state: {
+                spinner: "hide",
+            },
+        });
+    }
+
+    /**
+     *
+     * @return {string}
+     */
+    static getTag() {
+        return "monster-datasource-status";
+    }
+
+    /**
+     * @private
+     */
+    [assembleMethodSymbol]() {
+        super[assembleMethodSymbol]();
+
+        initControlReferences.call(this);
+        initEventHandler.call(this);
+    }
+
+    /**
+     *
+     * @param message
+     * @param timeout
+     * @returns {DatasourceStatus}
+     */
+    setErrorMessage(message, timeout) {
+        this[errorElementSymbol].setErrorMessage(message, timeout);
+        return this;
+    }
+
+    /**
+     *
+     * @return [CSSStyleSheet]
+     */
+    static getCSSStyleSheet() {
+        return [StatusStyleSheet, SpinnerStyleSheet, ThemeStyleSheet];
+    }
 }
 
 /**
@@ -147,85 +158,85 @@ class DatasourceStatus extends CustomElement {
  * @throws {Error} no shadow-root is defined
  */
 function initControlReferences() {
-	if (!this.shadowRoot) {
-		throw new Error("no shadow-root is defined");
-	}
+    if (!this.shadowRoot) {
+        throw new Error("no shadow-root is defined");
+    }
 
-	this[errorElementSymbol] = this.shadowRoot.querySelector(
-		"monster-context-error",
-	);
+    this[errorElementSymbol] = this.shadowRoot.querySelector(
+        "monster-context-error",
+    );
 }
 
 /**
  * @private
  */
 function initEventHandler() {
-	const selector = this.getOption("datasource.selector", "");
-	const self = this;
-
-	if (isString(selector)) {
-		const element = findElementWithSelectorUpwards(this, selector);
-		if (element === null) {
-			throw new Error("the selector must match exactly one element");
-		}
-
-		if (!(element instanceof Datasource)) {
-			throw new TypeError("the element must be a datasource");
-		}
-
-		let fadeOutTimer = null;
-
-		this[datasourceLinkedElementSymbol] = element;
-		element.addEventListener("monster-datasource-fetched", function () {
-			fadeOutTimer = setTimeout(() => {
-				self.setOption("state.spinner", "hide");
-			}, 800);
-		});
-
-		element.addEventListener("monster-datasource-fetch", function () {
-			if (fadeOutTimer) {
-				clearTimeout(fadeOutTimer);
-				fadeOutTimer = null;
-			}
-
-			self.setOption("state.spinner", "show");
-		});
-
-		element.addEventListener("monster-datasource-error", function (event) {
-			if (fadeOutTimer) {
-				clearTimeout(fadeOutTimer);
-				fadeOutTimer = null;
-			}
-
-			self.setOption("state.spinner", "hide");
-
-			const timeout = self.getOption("timeouts.message", 4000);
-			let msg = "Cannot load data";
-
-			try {
-				if (event.detail.error instanceof Error) {
-					msg = event.detail.error.message;
-				} else if (event.detail.error instanceof Object) {
-					msg = JSON.stringify(event.detail.error);
-				} else if (event.detail.error instanceof String) {
-					msg = event.detail.error;
-				} else if (event.detail.error instanceof Number) {
-					msg = event.detail.error.toString();
-				} else {
-					msg = event.detail.error;
-				}
-			} catch (e) {
-			} finally {
-
-				const callback = self.getOption("callbacks.onError", null);
-				if (callback) {
-					msg = callback(msg);
-				}
-
-				self[errorElementSymbol].setErrorMessage(msg, timeout);
-			}
-		});
-	}
+    const selector = this.getOption("datasource.selector", "");
+    const self = this;
+
+    if (isString(selector)) {
+        const element = findElementWithSelectorUpwards(this, selector);
+        if (element === null) {
+            throw new Error("the selector must match exactly one element");
+        }
+
+        if (!(element instanceof Datasource)) {
+            throw new TypeError("the element must be a datasource");
+        }
+
+        let fadeOutTimer = null;
+
+        this[datasourceLinkedElementSymbol] = element;
+        element.addEventListener("monster-datasource-fetched", function () {
+            fadeOutTimer = setTimeout(() => {
+                self.setOption("state.spinner", "hide");
+            }, 800);
+        });
+
+        element.addEventListener("monster-datasource-fetch", function () {
+            if (fadeOutTimer) {
+                clearTimeout(fadeOutTimer);
+                fadeOutTimer = null;
+            }
+
+            self.setOption("state.spinner", "show");
+        });
+
+        element.addEventListener("monster-datasource-error", function (event) {
+            if (fadeOutTimer) {
+                clearTimeout(fadeOutTimer);
+                fadeOutTimer = null;
+            }
+
+            self.setOption("state.spinner", "hide");
+
+            const timeout = self.getOption("timeouts.message", 4000);
+            let msg = "Cannot load data";
+
+            try {
+                if (event.detail.error instanceof Error) {
+                    msg = event.detail.error.message;
+                } else if (event.detail.error instanceof Object) {
+                    msg = JSON.stringify(event.detail.error);
+                } else if (event.detail.error instanceof String) {
+                    msg = event.detail.error;
+                } else if (event.detail.error instanceof Number) {
+                    msg = event.detail.error.toString();
+                } else {
+                    msg = event.detail.error;
+                }
+            } catch (e) {
+            } finally {
+
+                const callback = self.getOption("callbacks.onError", null);
+                if (callback) {
+                    callback.call(self, msg, event);
+                } else {
+                    self[errorElementSymbol].setErrorMessage(msg, timeout);
+                }
+            }
+        });
+    }
 }
 
 /**
@@ -233,13 +244,13 @@ function initEventHandler() {
  * @return {string}
  */
 function getTemplate() {
-	// language=HTML
-	return `
-	<div data-monster-role="control" part="control"
-    	     data-monster-attributes="disabled path:disabled | if:true">
+    // language=HTML
+    return `
+        <div data-monster-role="control" part="control"
+             data-monster-attributes="disabled path:disabled | if:true">
             <monster-context-error
                     data-monster-option-classes-button="monster-theme-error-2 monster-theme-background-inherit"></monster-context-error>
-            <div class="monster-spinner" 
+            <div class="monster-spinner"
                  data-monster-attributes="data-monster-state-loader path:state.spinner"></div>
         </div>
     `;

package/source/components/form/reload.mjs

@@ -69,7 +69,7 @@ class Reload extends CustomElement {
 	 * @property {Object} templates Template definitions
 	 * @property {string} templates.main Main template
 	 * @property {string} url url to fetch
-	 * @property {string} reload onshow, always
+	 * @property {string} reload onshow, always (onshow is default and means that the content is loaded when the element is visible, always means that the content is always loaded)
 	 * @property {string} filter css selector
 	 * @property {Object} fetch fetch options for the request
 	 * @property {string} fetch.redirect error, follow, manual
@@ -87,7 +87,7 @@ class Reload extends CustomElement {
 				templates: {
 					main: getTemplate.call(this),
 				},
-				shadowMode: null,
+				shadowMode: false,
 				url: null,
 				reload: "onshow",
 				filter: null,
@@ -171,7 +171,13 @@ class Reload extends CustomElement {
 			this.setAttribute(ATTRIBUTE_FORM_URL, `${url}`);
 		}
 
-		return loadContent.call(this);
+		try {
+			return loadContent.call(this);
+		} catch (e) {
+			addErrorAttribute(this, e);
+			return Promise.reject(e)
+		}
+
 	}
 }
 
@@ -290,7 +296,7 @@ function loadContent() {
 			}
 		})
 		.catch((e) => {
-			throw e;
+			addErrorAttribute(this, e);
 		});
 }
 

package/source/components/form/util/fetch.mjs

@@ -16,124 +16,117 @@ import { isString } from "../../../types/is.mjs";
 import { fireCustomEvent } from "../../../dom/events.mjs";
 import { validateInstance, validateString } from "../../../types/validate.mjs";
 
+/**
+ * Traverse the element's ancestors to find an existing Shadow DOM.
+ *
+ * @param {HTMLElement} element - The starting element.
+ * @returns {ShadowRoot|null} - The found Shadow DOM or null if none exists.
+ */
 function findShadowRoot(element) {
-	if (element instanceof ShadowRoot) return element;
-	if (!element.parentNode) return null;
-	return findShadowRoot(element.parentNode);
+	while (element) {
+		if (element?.shadowRoot) {
+			return element?.shadowRoot;
+		}
+		element = element?.parentNode;
+	}
+	return null;
 }
 
 /**
- * @private
- * @param {HTMLElement} element
- * @param {string|URL} url
- * @param {Object} options fetch options
- * @param {Object} filter fetch options
- * @return {Promise<Object>}
- * @throws {Error} we won't be able to read the data
- * @throws {Error} client error
- * @throws {Error} undefined status or type
- * @throws {TypeError} value is not an instance of
- * @throws {TypeError} value is not a string
+ * Loads content from a URL and assigns it to an element.
+ * Optionally, the loaded content can be filtered using a CSS selector.
+ * Additionally, any <script> elements within the content are extracted and executed.
+ *
+ * @param {HTMLElement} element - The target element to insert the content.
+ * @param {string|URL} url - The URL from which to load the content.
+ * @param {Object} options - Options for the fetch call.
+ * @param {string} [filter] - Optional CSS selector to filter the loaded content.
+ * @returns {Promise<Object>} A promise that resolves to an object containing { content: string, type: string | null }.
+ * @throws {Error} When the content cannot be read or the response contains an error.
+ * @throws {TypeError} When the provided parameters do not match the expected types.
  */
 function loadAndAssignContent(element, url, options, filter) {
 	return loadContent(url, options).then((response) => {
 		let content = response.content;
 
+		// Optional filtering: if a valid, non-empty CSS selector is provided,
+		// only the matching elements will be retained.
 		if (isString(filter) && filter !== "") {
-			const t = document.createElement("div");
-			const c = document.createElement("div");
-			c.innerHTML = content;
-			for (const [, node] of c.querySelectorAll(filter).entries()) {
-				t.appendChild(node);
-			}
-
-			content = t.innerHTML;
+			const filteredContainer = document.createElement("div");
+			const tempContainer = document.createElement("div");
+			tempContainer.innerHTML = content;
+			const matchingNodes = tempContainer.querySelectorAll(filter);
+			matchingNodes.forEach((node) => {
+				filteredContainer.appendChild(node);
+			});
+			content = filteredContainer.innerHTML;
 		}
 
-		const t = document.createElement("div");
-		t.innerHTML = content;
-
-		const scripts = t.querySelectorAll("script");
-		for (const [, script] of scripts.entries()) {
-			const s = document.createElement("script");
-			s.innerHTML = script.innerHTML;
-			if (script.src) s.src = script.src;
-			if (script.type) s.type = script.type;
-			if (script.async) s.async = script.async;
-			if (script.defer) s.defer = script.defer;
-			if (script.crossOrigin) s.crossOrigin = script.crossOrigin;
-			if (script.integrity) s.integrity = script.integrity;
-			if (script.referrerPolicy) s.referrerPolicy = script.referrerPolicy;
-			document.head.appendChild(s);
-			t.removeChild(script);
-		}
+		// Temporary container for processing the content and extracting scripts
+		const tempDiv = document.createElement("div");
+		tempDiv.innerHTML = content;
+
+		// Extract and execute all <script> elements by appending them to the document head
+		const scriptElements = tempDiv.querySelectorAll("script");
+		scriptElements.forEach((oldScript) => {
+			const newScript = document.createElement("script");
+			if (oldScript.src) newScript.src = oldScript.src;
+			if (oldScript.type) newScript.type = oldScript.type;
+			if (oldScript.async) newScript.async = oldScript.async;
+			if (oldScript.defer) newScript.defer = oldScript.defer;
+			if (oldScript.crossOrigin) newScript.crossOrigin = oldScript.crossOrigin;
+			if (oldScript.integrity) newScript.integrity = oldScript.integrity;
+			if (oldScript.referrerPolicy) newScript.referrerPolicy = oldScript.referrerPolicy;
+			newScript.textContent = oldScript.textContent;
+			document.head.appendChild(newScript);
+			if (oldScript.parentNode) {
+				oldScript.parentNode.removeChild(oldScript);
+			}
+		});
 
-		validateInstance(element, HTMLElement).innerHTML = t.innerHTML;
+		// Assign the processed content to the target element
+		validateInstance(element, HTMLElement).innerHTML = tempDiv.innerHTML;
 
-		const root = findShadowRoot(element);
-		if (root !== null) {
-			element = root.host;
+		// If the element is within a Shadow DOM, use the host as the event target
+		const shadowRoot = findShadowRoot(element);
+		const eventTarget = shadowRoot !== null ? shadowRoot.host : element;
+		if (eventTarget instanceof HTMLElement) {
+			fireCustomEvent(eventTarget, "monster-fetched", { url });
 		}
 
-		fireCustomEvent(element, "monster-fetched", {
-			url,
-		});
-
 		return response;
 	});
 }
 
 /**
- * @private
- * @param {string|URL} url
- * @param {Object} options fetch options
- * @return {Promise<string>}
- * @throws {Error} we won't be able to read the data
- * @throws {Error} client error
- * @throws {Error} undefined status or type
- * @throws {TypeError} value is not a string
+ * Loads content from a URL using fetch and returns an object with the loaded content
+ * and the Content-Type header.
+ *
+ * @param {string|URL} url - The URL from which to load the content.
+ * @param {Object} options - Options for the fetch call.
+ * @returns {Promise<Object>} A promise that resolves to an object { content: string, type: string | null }.
+ * @throws {Error} When the content cannot be read or the response contains an error.
+ * @throws {TypeError} When the URL cannot be validated as a string.
  */
 function loadContent(url, options) {
 	if (url instanceof URL) {
 		url = url.toString();
 	}
-
 	return fetch(validateString(url), options).then((response) => {
-		// The ok read-only property of the Response interface contains a
-		// Boolean stating whether the response was successful (status in the range 200-299) or not.
-		if (response?.ok !== true) {
-			// @see https://developer.mozilla.org/en-US/docs/Web/API/Response/type
-			if (
-				["error", "opaque", "opaqueredirect"].indexOf(response?.type) !== -1
-			) {
-				throw new Error(
-					`we won't be able to read the data (${response?.type})`,
-				);
+		if (!response.ok) {
+			if (["error", "opaque", "opaqueredirect"].includes(response.type)) {
+				throw new Error(`we won't be able to read the data (${response.type})`);
 			}
-
-			const statusClass = `${response?.status}`.substring(0, 1);
-			switch (statusClass) {
-				case "4":
-					throw new Error(`client error ${response?.statusText}`);
-					break;
-				default:
-					throw new Error(
-						`undefined status (${response?.status} / ${response?.statusText}) or type (${response?.type})`,
-					);
+			const statusClass = String(response.status).charAt(0);
+			if (statusClass === "4") {
+				throw new Error(`client error ${response.statusText}`);
 			}
+			throw new Error(`undefined status (${response.status} / ${response.statusText}) or type (${response.type})`);
 		}
-
-		return new Promise(function (resolve, reject) {
-			response
-				.text()
-				.then((content) => {
-					resolve({
-						content,
-						type: response.headers.get("Content-Type"),
-					});
-				})
-				.catch(reject);
-		});
+		return response.text().then((content) => ({
+			content,
+			type: response.headers.get("Content-Type"),
+		}));
 	});
 }
 

package/source/data/datasource/server/restapi/data-fetch-error.mjs

@@ -32,8 +32,20 @@ class DataFetchError extends Error {
 	 */
 	constructor(message, response) {
 		super(message);
+
+		let body = null
+
+		if (response instanceof Response) {
+			body = response.text();
+		}
+
+		if(!(body instanceof Promise)) {
+			body = Promise.resolve(body);
+		}
+
 		this[internalSymbol] = {
 			response: response,
+			body : body
 		};
 	}
 
@@ -47,10 +59,17 @@ class DataFetchError extends Error {
 		);
 	}
 
+	/**
+	 * @return {string|Object}
+	 */
+	getBody() {
+		return this[internalSymbol]?.["body"];
+	}
+
 	/**
 	 * @return {Response}
 	 */
 	getResponse() {
-		return this[internalSymbol]["response"];
+		return this[internalSymbol]?.["response"];
 	}
 }

package/source/data/datasource/server/restapi.mjs

@@ -245,7 +245,7 @@ function fetchData(init, key, callback) {
 				if (body.length > 100) {
 					body = `${body.substring(0, 97)}...`;
 				}
-
+				
 				throw new DataFetchError(
 					getInternalLocalizationMessage(
 						`i18n{the-response-does-not-contain-a-valid-json::actual=${body}}`,
@@ -257,6 +257,7 @@ function fetchData(init, key, callback) {
 			if (callback && isFunction(callback)) {
 				callback(obj);
 			}
+
 			return response;
 		})
 		.catch((e) => {

package/source/i18n/internal.mjs

@@ -28,7 +28,7 @@ function getInternalTranslations() {
 
 	let locale = "en";
 	try {
-		let locale = getLocaleOfDocument();
+		locale = getLocaleOfDocument();
 	} catch (error) {}
 
 	let messages = {};