@schukai/monster 3.115.0 → 3.115.1

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 
 
+## [3.115.1] - 2025-04-01
+
+### Bug Fixes
+
+- update test and monster.mjs [#303](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/303)
+
+
+
 ## [3.115.0] - 2025-04-01
 
 ### 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.115.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.115.1"}

package/source/components/content/fetch-box.mjs

@@ -10,21 +10,19 @@
  * For more information about purchasing a commercial license, please contact schukai GmbH.
  */
 
-import {instanceSymbol} from "../../constants.mjs";
+import { instanceSymbol } from "../../constants.mjs";
+import { ATTRIBUTE_ROLE } from "../../dom/constants.mjs";
+import { CustomElement } from "../../dom/customelement.mjs";
 import {
-    ATTRIBUTE_ROLE
-} from "../../dom/constants.mjs";
-import {CustomElement} from "../../dom/customelement.mjs";
-import {
-    assembleMethodSymbol,
-    registerCustomElement,
+	assembleMethodSymbol,
+	registerCustomElement,
 } from "../../dom/customelement.mjs";
-import {isString} from "../../types/is.mjs";
-import {FetchBoxStyleSheet} from "./stylesheet/fetch-box.mjs";
-import {addErrorAttribute} from "../../dom/error.mjs";
-import {Formatter} from "../../text/formatter.mjs";
+import { isString } from "../../types/is.mjs";
+import { FetchBoxStyleSheet } from "./stylesheet/fetch-box.mjs";
+import { addErrorAttribute } from "../../dom/error.mjs";
+import { Formatter } from "../../text/formatter.mjs";
 
-export {FetchBox};
+export { FetchBox };
 
 /**
  * @private
@@ -44,185 +42,190 @@ export const fetchBoxElementSymbol = Symbol("fetchBoxElement");
  * @summary A beautiful FetchBox that can make your life easier and also looks good. Its like a box, but it fetches data from a URL.
  */
 class FetchBox extends CustomElement {
-    /**
-     * This method is called by the `instanceof` operator.
-     * @returns {symbol}
-     */
-    static get [instanceSymbol]() {
-        return Symbol.for("@schukai/monster/components/content/fetch-box@@instance");
-    }
-
-    /**
-     *
-     * @return {Components.Content.FetchBox
-     */
-    [assembleMethodSymbol]() {
-        super[assembleMethodSymbol]();
-        initControlReferences.call(this);
-        return this;
-    }
-
-
-    /**
-     * Handles the component's connection to the DOM.
-     * Determines the styling of the component based on its parent's tag name.
-     * Fetches necessary data for the component.
-     *
-     * @return {void} This method does not return a value.
-     */
-    connectedCallback() {
-        super.connectedCallback();
-
-
-        const parent = this.parentElement;
-
-        if (parent) {
-            const blockLevelElements = ['DIV', 'SECTION', 'ARTICLE', 'HEADER', 'FOOTER', 'MAIN', 'NAV', 'ASIDE'];
-            const isBlockLevel = blockLevelElements.includes(parent.tagName);
-
-            if (isBlockLevel) {
-                this.style.display = 'block';
-                this.style.width = '100%';
-                this.style.height = '100%';
-            } else {
-                this.style.display = 'inline-flex';
-                this.style.height = '100%';
-            }
-        }
-
-        this.fetch();
-
-    }
-
-
-    /**
-     * 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} classes CSS classes
-     * @property {string} classes.default CSS class for the main template
-     * @property {string} classes.loading CSS class for the loading template
-     * @property {string} classes.error CSS class for the error template
-     * @property {string} classes.empty CSS class for the empty template
-     * @property {Object} fetch fetch options for the request
-     * @property {string} fetch.redirect error, follow, manual
-     * @property {string} fetch.method GET, POST, PUT, DELETE
-     * @property {string} fetch.mode same-origin, cors, no-cors, navigate
-     * @property {string} fetch.credentials omit, same-origin, include
-     * @property {Object} fetch.headers
-     * @property {string} fetch.headers.accept text/html, application/json
-     * @property {string} fetch.headers.content-type application/json
-     * @property {string} parameter value for the data url
-     * @property {Object} formatter
-     * @property {Object} formatter.marker
-     * @property {string} formatter.marker.open marker for the url
-     * @property {string} formatter.marker.close marker for the url
-     * @property {string} url url to fetch
-     */
-    get defaults() {
-        return Object.assign({}, super.defaults, {
-            templates: {
-                main: getTemplate(),
-            },
-            classes: {
-                default: "monster-fetch-box-default",
-                loading: "loading",
-                error: "error",
-                empty: "empty",
-            },
-            data: {},
-            url: null,
-            fetch: {
-                redirect: "error",
-                method: "GET",
-                mode: "same-origin",
-                credentials: "same-origin",
-                headers: {
-                    accept: "text/html",
-                },
-            },
-
-            content: {
-                // <slot name="loading"></slot>
-                loading: `<div class="monster-skeleton-animated monster-skeleton-col-100"></div>`,
-                error: `<slot name="error"></slot>`,
-                empty: `<slot name="empty"></slot>`,
-            },
-            visible: "loading",
-            parameter: null,
-
-
-            formatter: {
-                marker: {
-                    open: null,
-                    close: null,
-                },
-            },
-
-        });
-    }
-
-    /**
-     * @return {string}
-     */
-    static getTag() {
-        return "monster-fetch-box";
-    }
-
-    /**
-     * @return {CSSStyleSheet[]}
-     */
-    static getCSSStyleSheet() {
-        return [FetchBoxStyleSheet];
-    }
-
-    /**
-     * load content from url
-     */
-    fetch() {
-        try {
-            return loadContent.call(this).then(obj => {
-
-                if (obj.type !== "application/json") {
-                    this.setOption("visible", "error");
-                    throw new Error("not a json response");
-                }
-
-                try {
-                    const content = obj.content;
-                    if (!isString(content)|| content === "") {
-                        this.setOption("visible", "empty");
-                        return
-                    }
-
-                    const jsonContent = JSON.parse(content);
-                    if (jsonContent === null) {
-                        this.setOption("visible", "empty");
-                        return
-                    }
-
-                    this.setOption("data", jsonContent);
-                    this.setOption("visible", "default");
-
-                } catch (e) {
-                    this.setOption("visible", "error");
-                    throw e;
-                }
-
-            }).catch(e => {
-                this.setOption("visible", "error");
-                addErrorAttribute(this, e);
-            });
-        } catch (e) {
-            addErrorAttribute(this, e);
-            this.setOption("visible", "error");
-            return Promise.reject(e);
-        }
-    }
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @returns {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for(
+			"@schukai/monster/components/content/fetch-box@@instance",
+		);
+	}
+
+	/**
+	 *
+	 * @return {Components.Content.FetchBox
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+		initControlReferences.call(this);
+		return this;
+	}
+
+	/**
+	 * Handles the component's connection to the DOM.
+	 * Determines the styling of the component based on its parent's tag name.
+	 * Fetches necessary data for the component.
+	 *
+	 * @return {void} This method does not return a value.
+	 */
+	connectedCallback() {
+		super.connectedCallback();
+
+		const parent = this.parentElement;
+
+		if (parent) {
+			const blockLevelElements = [
+				"DIV",
+				"SECTION",
+				"ARTICLE",
+				"HEADER",
+				"FOOTER",
+				"MAIN",
+				"NAV",
+				"ASIDE",
+			];
+			const isBlockLevel = blockLevelElements.includes(parent.tagName);
+
+			if (isBlockLevel) {
+				this.style.display = "block";
+				this.style.width = "100%";
+				this.style.height = "100%";
+			} else {
+				this.style.display = "inline-flex";
+				this.style.height = "100%";
+			}
+		}
+
+		this.fetch();
+	}
+
+	/**
+	 * 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} classes CSS classes
+	 * @property {string} classes.default CSS class for the main template
+	 * @property {string} classes.loading CSS class for the loading template
+	 * @property {string} classes.error CSS class for the error template
+	 * @property {string} classes.empty CSS class for the empty template
+	 * @property {Object} fetch fetch options for the request
+	 * @property {string} fetch.redirect error, follow, manual
+	 * @property {string} fetch.method GET, POST, PUT, DELETE
+	 * @property {string} fetch.mode same-origin, cors, no-cors, navigate
+	 * @property {string} fetch.credentials omit, same-origin, include
+	 * @property {Object} fetch.headers
+	 * @property {string} fetch.headers.accept text/html, application/json
+	 * @property {string} fetch.headers.content-type application/json
+	 * @property {string} parameter value for the data url
+	 * @property {Object} formatter
+	 * @property {Object} formatter.marker
+	 * @property {string} formatter.marker.open marker for the url
+	 * @property {string} formatter.marker.close marker for the url
+	 * @property {string} url url to fetch
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+			classes: {
+				default: "monster-fetch-box-default",
+				loading: "loading",
+				error: "error",
+				empty: "empty",
+			},
+			data: {},
+			url: null,
+			fetch: {
+				redirect: "error",
+				method: "GET",
+				mode: "same-origin",
+				credentials: "same-origin",
+				headers: {
+					accept: "text/html",
+				},
+			},
+
+			content: {
+				// <slot name="loading"></slot>
+				loading: `<div class="monster-skeleton-animated monster-skeleton-col-100"></div>`,
+				error: `<slot name="error"></slot>`,
+				empty: `<slot name="empty"></slot>`,
+			},
+			visible: "loading",
+			parameter: null,
+
+			formatter: {
+				marker: {
+					open: null,
+					close: null,
+				},
+			},
+		});
+	}
+
+	/**
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-fetch-box";
+	}
+
+	/**
+	 * @return {CSSStyleSheet[]}
+	 */
+	static getCSSStyleSheet() {
+		return [FetchBoxStyleSheet];
+	}
+
+	/**
+	 * load content from url
+	 */
+	fetch() {
+		try {
+			return loadContent
+				.call(this)
+				.then((obj) => {
+					if (obj.type !== "application/json") {
+						this.setOption("visible", "error");
+						throw new Error("not a json response");
+					}
+
+					try {
+						const content = obj.content;
+						if (!isString(content) || content === "") {
+							this.setOption("visible", "empty");
+							return;
+						}
+
+						const jsonContent = JSON.parse(content);
+						if (jsonContent === null) {
+							this.setOption("visible", "empty");
+							return;
+						}
+
+						this.setOption("data", jsonContent);
+						this.setOption("visible", "default");
+					} catch (e) {
+						this.setOption("visible", "error");
+						throw e;
+					}
+				})
+				.catch((e) => {
+					this.setOption("visible", "error");
+					addErrorAttribute(this, e);
+				});
+		} catch (e) {
+			addErrorAttribute(this, e);
+			this.setOption("visible", "error");
+			return Promise.reject(e);
+		}
+	}
 }
 
 /**
@@ -233,73 +236,65 @@ class FetchBox extends CustomElement {
  * @return {Promise}
  */
 function loadContent() {
-    let url = this.getOption("url");
-
-    if (url instanceof URL) {
-        url = url.toString();
-    }
-
-    if (!isString(url) || url === "") {
-        throw new Error("missing url");
-    }
-
-    let p = this.getOption("parameter", null);
-    if (p === null) {
-        p = "";
-    }
-
-    const data = {
-        parameter : p
-    }
-
-    const formatter = new Formatter(data)
-
-    if (this.getOption("formatter.marker.open")) {
-
-        const open = this.getOption("formatter.marker.open");
-        if (!isString(open)) {
-            throw new TypeError("open is not a string");
-        }
-
-        const close = this.getOption("formatter.marker.close");
-        if (close !== undefined && !isString(close)) {
-            throw new TypeError("close is not a string");
-        }
-
-        formatter.setMarker(
-            open,
-            close
-        );
-    }
-
-    const formattedUrl = formatter.format(
-        url
-    );
-
-
-    const options = this.getOption("fetch", {});
-
-    return fetch(formattedUrl, options).then((response) => {
-        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 = 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 response.text().then((content) => ({
-            content,
-            type: response.headers.get("Content-Type"),
-        }));
-    });
-
+	let url = this.getOption("url");
+
+	if (url instanceof URL) {
+		url = url.toString();
+	}
+
+	if (!isString(url) || url === "") {
+		throw new Error("missing url");
+	}
+
+	let p = this.getOption("parameter", null);
+	if (p === null) {
+		p = "";
+	}
+
+	const data = {
+		parameter: p,
+	};
+
+	const formatter = new Formatter(data);
+
+	if (this.getOption("formatter.marker.open")) {
+		const open = this.getOption("formatter.marker.open");
+		if (!isString(open)) {
+			throw new TypeError("open is not a string");
+		}
+
+		const close = this.getOption("formatter.marker.close");
+		if (close !== undefined && !isString(close)) {
+			throw new TypeError("close is not a string");
+		}
+
+		formatter.setMarker(open, close);
+	}
+
+	const formattedUrl = formatter.format(url);
+
+	const options = this.getOption("fetch", {});
+
+	return fetch(formattedUrl, options).then((response) => {
+		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 = 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 response.text().then((content) => ({
+			content,
+			type: response.headers.get("Content-Type"),
+		}));
+	});
 }
 
 /**
@@ -307,9 +302,9 @@ function loadContent() {
  * @return {void}
  */
 function initControlReferences() {
-    this[fetchBoxElementSymbol] = this.shadowRoot.querySelector(
-        `[${ATTRIBUTE_ROLE}="control"]`,
-    );
+	this[fetchBoxElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}="control"]`,
+	);
 }
 
 /**
@@ -317,8 +312,8 @@ function initControlReferences() {
  * @return {string}
  */
 function getTemplate() {
-    // language=HTML
-    return `
+	// language=HTML
+	return `
         <div data-monster-role="control" part="control">
             <div
                     data-monster-attributes="class path:classes.default,
@@ -341,5 +336,4 @@ function getTemplate() {
         </div>`;
 }
 
-
 registerCustomElement(FetchBox);