@schukai/monster 3.109.0 → 3.110.1

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 
 
+## [3.110.1] - 2025-02-19
+
+### Bug Fixes
+
+- optimize rest errors
+
+
+
+## [3.110.0] - 2025-02-18
+
+### Add Features
+
+- **datatable-status:** add callbacks.onError
+
+
+
 ## [3.109.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.109.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.1"}

package/source/components/datatable/status.mjs

@@ -13,25 +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
@@ -58,76 +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
-	 */
-	get defaults() {
-		return Object.assign({}, super.defaults, {
-			templates: {
-				main: getTemplate(),
-			},
-
-			datasource: {
-				selector: 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];
+    }
 }
 
 /**
@@ -136,79 +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 {
-				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);
+                }
+            }
+        });
+    }
 }
 
 /**
@@ -216,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/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 = {};