@schukai/monster 3.110.1 → 3.110.2

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 
 
+## [3.110.2] - 2025-02-19
+
+### Bug Fixes
+
+- **reload:** set shadowRoot to false
+
+
+
 ## [3.110.1] - 2025-02-19
 
 ### Bug Fixes

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.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.2"}

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"),
+		}));
 	});
 }