@cocreate/events 1.26.0 → 1.27.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/events",
-  "version": "1.26.0",
+  "version": "1.27.1",
   "description": "A simple events component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.",
   "keywords": [
     "events",
@@ -45,22 +45,18 @@
   },
   "main": "./src/index.js",
   "devDependencies": {
-    "@babel/core": "^7.9.6",
-    "@babel/preset-env": "^7.9.6",
-    "babel-loader": "^8.1.0",
-    "clean-webpack-plugin": "^3.0.0",
-    "file-loader": "^6.2.0",
+    "css-loader": "^5.1.3",
+    "esbuild": "^0.25.2",
+    "esbuild-loader": "^4.3.0",
     "mini-css-extract-plugin": "^1.5.0",
-    "style-loader": "^3.3.1",
-    "terser-webpack-plugin": "^5.1.1",
     "webpack": "^5.24.4",
     "webpack-cli": "^4.5.0",
     "webpack-log": "^3.0.1"
   },
   "dependencies": {
-    "@cocreate/actions": "^1.18.2",
-    "@cocreate/element-prototype": "^1.23.0",
-    "@cocreate/observer": "^1.16.1",
-    "@cocreate/utils": "^1.33.7"
+    "@cocreate/actions": "^1.21.0",
+    "@cocreate/element-prototype": "^1.29.0",
+    "@cocreate/observer": "^1.18.0",
+    "@cocreate/utils": "^1.38.0"
   }
 }

package/src/index.js

@@ -63,7 +63,7 @@ const CoCreateEvents = {
 		const self = this;
 		observer.init({
 			name: "CoCreateEventName",
-			observe: ["addedNodes"],
+			types: ["addedNodes"],
 			selector: `[event-name]`,
 			callback: function (mutation) {
 				let name = mutation.target.getAttribute("event-name");
@@ -89,20 +89,22 @@ const CoCreateEvents = {
 			}
 		});
 
-		let selector = `[${prefix}], [${prefix}-key], [${prefix}-attribute], [${prefix}-value], [${prefix}-action], [${prefix}-selector], [${prefix}-closest], [${prefix}-parent], [${prefix}-next], [${prefix}-previous]`;
+		let selector = `[${prefix}], [${prefix}-key], [${prefix}-attribute], [${prefix}-value], [${prefix}-action], [${prefix}-query], [${prefix}-preventDefault], [${prefix}-stopPropagation], [${prefix}-stopImmediatePropagation]`;
 
 		observer.init({
 			name: "CoCreateEventattributes",
-			observe: ["attributes", "addedNodes"],
-			attributeName: [
+			types: ["attributes", "addedNodes"],
+			attributeFilter: [
 				`${prefix}-key`,
 				`${prefix}-value`,
-				`${prefix}-selector`,
-				`${prefix}-closest`,
-				`${prefix}-parent`,
-				`${prefix}-next`,
-				`${prefix}-previous`,
-				`${prefix}-events`
+				`${prefix}-query`,
+				`${prefix}-events`,
+				`${prefix}-bubbles`,
+				`${prefix}-cancelable`,
+				`${prefix}-composed`,
+				`${prefix}-preventDefault`,
+				`${prefix}-stopPropagation`,
+				`${prefix}-stopImmediatePropagation`
 			],
 			selector,
 			callback: function (mutation) {
@@ -125,7 +127,9 @@ const CoCreateEvents = {
 				this.elements.set(el, prefixes);
 			} else if (!prefixes[prefix]) {
 				prefixes[prefix] = { events };
-			} else isEventable = false;
+			} else {
+				isEventable = false;
+			}
 
 			let customEvents = el.getAttribute(`${prefix}-events`);
 			if (customEvents) {
@@ -140,8 +144,25 @@ const CoCreateEvents = {
 				prefixes[prefix].events = events;
 				isEventable = true;
 			}
+
 			if (!events || !isEventable) continue;
-			if (events.includes("onload")) this.__updateElements(el, prefix);
+
+			// let originalSelector = ""; // i think we need to extract the selector and remove the operators
+			// if (originalSelector) {
+			// 	observer.init({
+			// 		types: ["addedNodes"],
+			// 		callback: function (mutation) {
+			// 			const els = el.queryElements();
+			// 			if (els && els.includes(mutation.target)) {
+			// 				self.__updateElements();
+			// 			}
+			// 		}
+			// 	});
+			// }
+
+			if (events.includes("onload")) {
+				this.__updateElements(el, prefix);
+			}
 
 			if (events.includes("observer")) {
 				let target;
@@ -149,21 +170,13 @@ const CoCreateEvents = {
 					if (attribute.name === "observe-target") {
 						target = attribute.value;
 						break;
-					} else if (
-						[
-							`${prefix}-selector`,
-							`${prefix}-closest`,
-							`${prefix}-parent`,
-							`${prefix}-next`,
-							`${prefix}-previous`
-						].includes(attribute.name)
-					) {
+					} else if ([`${prefix}-query`].includes(attribute.name)) {
 						target = attribute.value;
 						break;
 					}
 				}
 
-				let attributeName = (
+				let attributeFilter = (
 					el.getAttribute(`${prefix}-attributes`) || ""
 				)
 					.split(/\s*,\s*/)
@@ -176,7 +189,7 @@ const CoCreateEvents = {
 					.filter((item) => item);
 
 				let observerConfig = {
-					observe: observeAttribute,
+					types: observeAttribute,
 					callback: function (mutation) {
 						self.__updateElements(el, prefix, mutation.target);
 					}
@@ -186,20 +199,19 @@ const CoCreateEvents = {
 					if (
 						target &&
 						!observeAttribute.length &&
-						!attributeName.length
+						!attributeFilter.length
 					) {
-						observerConfig.observe.push("addedNodes");
+						observerConfig.types.push("addedNodes");
 					}
 					observerConfig.target = target;
 				}
 
-				if (attributeName.length) {
-					observerConfig.observe.push("attributes");
-					observerConfig.attributeName = attributeName;
+				if (attributeFilter.length) {
+					observerConfig.types.push("attributes");
+					observerConfig.attributeFilter = attributeFilter;
 				}
 
-				if (observerConfig.observe.length)
-					observer.init(observerConfig);
+				if (observerConfig.types.length) observer.init(observerConfig);
 			}
 
 			if (events.includes("resize")) {
@@ -270,19 +282,40 @@ const CoCreateEvents = {
 			}
 
 			for (let i = 0; i < events.length; i++) {
+				// Skip specific lifecycle events
 				if (
-					events[i] !== "onload" &&
-					events[i] !== "observer" &&
-					events[i] !== "intersection" &&
-					events[i] !== "resize"
+					events[i] === "onload" ||
+					events[i] === "observer" ||
+					events[i] === "intersection" ||
+					events[i] === "resize"
 				) {
-					el.removeEventListener(events[i], eventFunction);
-					el.addEventListener(events[i], eventFunction);
+					continue;
+				}
+
+				// Remove any existing event listener
+				el.removeEventListener(events[i], eventFunction);
+
+				// Initialize an empty options object
+				const options = {};
+
+				// Attributes to check dynamically
+				const attributes = ["bubbles", "cancelable", "composed"];
+
+				for (let j = 0; j < attributes.length; j++) {
+					const attrValue = el.getAttribute(
+						`${events[i]}-${attributes[j]}`
+					);
+					if (attrValue !== null) {
+						options[attributes[j]] = attrValue !== "false";
+					}
 				}
+
+				// Add the new event listener with the dynamically constructed options
+				el.addEventListener(events[i], eventFunction, options);
 			}
 
 			function eventFunction(event) {
-				// TODO: apply debounce
+				// TODO: apply debounce.
 				// let debounce;
 				// clearTimeout(debounce);
 				// debounce = setTimeout(function() {
@@ -300,6 +333,25 @@ const CoCreateEvents = {
 					if (attribute.includes(prefix)) return;
 					// if (target.closest(`[actions*="${prefix}"]`))
 					// 	return;
+
+					// Define the lifecycle attributes (matching JavaScript event methods)
+					const lifecycleAttributes = [
+						"preventDefault",
+						"stopPropagation",
+						"stopImmediatePropagation"
+					];
+
+					// Handle lifecycle attributes dynamically
+					for (let i = 0; i < lifecycleAttributes.length; i++) {
+						const attr = `${prefix}-${lifecycleAttributes[i]}`; // Add prefix dynamically
+						const attrValue = target.getAttribute(attr); // Directly get the attribute value
+
+						// If attribute exists and is not explicitly "false", apply the corresponding event method
+						if (attrValue !== null && attrValue !== "false") {
+							event[lifecycleAttributes[i]]();
+						}
+					}
+
 					self.__updateElements(
 						target,
 						prefix,
@@ -307,7 +359,7 @@ const CoCreateEvents = {
 						prefixes[prefix].events
 					);
 
-					// let selector = `[${prefix}], [${prefix}-key], [${prefix}-value], [${prefix}-selector], [${prefix}-closest], [${prefix}-parent], [${prefix}-next], [${prefix}-previous]`
+					// let selector = `[${prefix}], [${prefix}-key], [${prefix}-value], [${prefix}-query]`
 
 					// let parentElement = target.parentElement;
 					// if (parentElement) {
@@ -341,7 +393,26 @@ const CoCreateEvents = {
 		}
 
 		for (let element of elements) {
-			let delay = element.getAttribute(`${prefix}-delay`);
+			// const requestAnimationFrameAttr = element.getAttribute(
+			// 	`${prefix}-requestAnimationFrame`
+			// );
+
+			// if (
+			// 	requestAnimationFrameAttr !== null &&
+			// 	requestAnimationFrameAttr !== "false"
+			// ) {
+			// 	// Double requestAnimationFrame
+			// 	await new Promise((resolve) => {
+			// 		requestAnimationFrame(() => {
+			// 			requestAnimationFrame(() => {
+			// 				resolve();
+			// 			});
+			// 		});
+			// 	});
+			// }
+
+			// TODO: Handle setInterval logic
+			let delay = element.getAttribute(`${prefix}-setTimeout`);
 
 			if (delay) {
 				delay = parseInt(delay, 10) || 0;
@@ -390,7 +461,9 @@ const CoCreateEvents = {
 					values = localStorage.getItem(key);
 				} else if ((key = element.getAttribute("localstorage-set"))) {
 					values = await element.getValue();
-					if (values) localStorage.setItem(key, values);
+					if (values) {
+						localStorage.setItem(key, values);
+					}
 				}
 
 				// if (!key || !values)
@@ -403,59 +476,95 @@ const CoCreateEvents = {
 						element,
 						prefix: `${prefix}-value`
 					});
-					if (valueElements) {
+					if (valueElements.length) {
 						let elementValues = [];
-						for (let i = 0; i < valueElements.length; i++)
+						for (let i = 0; i < valueElements.length; i++) {
 							elementValues.push(valueElements[i].getValue());
-
-						if (elementValues.length) values = elementValues;
+						}
+						if (elementValues.length) {
+							values = elementValues;
+						}
 					}
 				}
 
-				if (values === null)
+				if (values === null) {
 					values = element.getAttribute(`${prefix}-if-value`);
-				if (values === null) values = element.getAttribute(prefix);
+				}
+				if (values === null) {
+					values = element.getAttribute(prefix);
+				}
 			}
 
 			if (values || values === "") {
-				if (typeof values === "string") values = values.split(",");
-				else if (!Array.isArray(values)) values = [values];
+				if (typeof values === "string") {
+					values = values.split(",");
+				} else if (!Array.isArray(values)) {
+					values = [values];
+				}
 			} else {
 				values = await element.getValue();
-				if (!Array.isArray(values)) values = [values];
+				if (!Array.isArray(values)) {
+					values = [values];
+				}
 			}
 
-			if ((targetAttribute && !values) || values.length === 0) return;
+			if ((targetAttribute && !values) || values.length === 0) {
+				return;
+			}
 
 			let ifCondition = element.getAttribute(`${prefix}-if`);
 			let elseCondition = element.getAttribute(`${prefix}-else`);
 
 			let ifValue = element.getAttribute(`${prefix}-if-value`);
-			if (!ifValue && ifValue !== "")
-				ifValue = (await element.getValue()) || values;
-			//values // await element.getValue()
-			else if (ifValue || ifValue === "") ifValue = [ifValue];
-			else ifValue = values;
+			if (ifCondition) {
+				if (!ifValue && ifValue !== "")
+					ifValue = (await element.getValue()) || values;
+				//values // await element.getValue()
+				else if (ifValue || ifValue === "") {
+					ifValue = [ifValue];
+				} else {
+					ifValue = values;
+				}
 
-			if (!Array.isArray(ifValue)) ifValue = [ifValue];
+				if (!Array.isArray(ifValue)) {
+					ifValue = [ifValue];
+				}
+			}
 
 			//TODO: improved resize toggling of values
 			// let hasCondition = this.elements2.get(element)
-			if (ifCondition && evaluateCondition(ifCondition, ifValue)) {
-				// if (hasCondition && hasCondition.condition === ifCondition) {
-				//     return
-				// } else
-				//     this.elements2.set(element, { condition: ifCondition })
-			} else if (
-				elseCondition &&
-				evaluateCondition(elseCondition, ifValue)
-			) {
-				// if (hasCondition && hasCondition.condition === elseCondition) {
-				//     return
-				// } else
-				//     this.elements2.set(element, { condition: elseCondition })
-			} else if (ifCondition || elseCondition) {
-				return;
+			if (ifCondition) {
+				if (evaluateCondition(ifCondition, ifValue)) {
+					// Action 1: Condition exists and evaluates true
+					// console.log("Executing Action 1 for ifCondition:", ifCondition); // Optional debug log
+					// Replace this comment with your actual code for Path 1
+					// e.g., this.elements2.set(element, { condition: ifCondition });
+
+					// Assuming we stop processing for this element once a condition is met and actioned
+					return;
+				} else {
+					// Condition existed but evaluated false. Stop processing.
+					// Corresponds to the original `else if (ifCondition || elseCondition) { return; }` for the ifCondition case
+					return;
+				}
+			}
+
+			// If we reach here, ifCondition was falsy (didn't exist)
+			// Now check the 'else' condition
+			if (elseCondition) {
+				if (evaluateCondition(elseCondition, ifValue)) {
+					// Action 2: Condition exists and evaluates true
+					// console.log("Executing Action 2 for elseCondition:", elseCondition); // Optional debug log
+					// Replace this comment with your actual code for Path 2
+					// e.g., this.elements2.set(element, { condition: elseCondition });
+
+					// Assuming we stop processing for this element once a condition is met and actioned
+					return;
+				} else {
+					// Condition existed but evaluated false. Stop processing.
+					// Corresponds to the original `else if (ifCondition || elseCondition) { return; }` for the elseCondition case
+					return;
+				}
 			}
 
 			let targetText = element.getAttribute(`${prefix}-text`);
@@ -463,12 +572,17 @@ const CoCreateEvents = {
 			let targetKey = element.getAttribute(`${prefix}-key`);
 
 			if (prefix === "selected") {
-				if (el !== element) element.removeAttribute("selected");
-				else element.setAttribute("selected", "");
+				if (el !== element) {
+					element.removeAttribute("selected");
+				} else {
+					element.setAttribute("selected", "");
+				}
 			}
 
 			let deactivate = false;
-			if (el !== element) deactivate = true;
+			if (el !== element) {
+				deactivate = true;
+			}
 			// values = values.map(x => x.trim());
 
 			values = values.map((x) => {
@@ -479,13 +593,17 @@ const CoCreateEvents = {
 				}
 				return x; // Return the updated x
 			});
+			let targetElements;
+			if (element.hasAttribute(`${prefix}-query`)) {
+				targetElements = queryElements({
+					element,
+					prefix,
+					selector: params
+				});
+			} else {
+				targetElements = [element];
+			}
 
-			let targetElements = queryElements({
-				element,
-				prefix,
-				selector: params
-			});
-			if (targetElements === false) targetElements = [element];
 			let action = element.getAttribute(`${prefix}-action`);
 			for (let i = 0; i < targetElements.length; i++) {
 				if (action) {
@@ -520,7 +638,7 @@ const CoCreateEvents = {
 			}
 		}
 
-		document.dispatchEvent(
+		el.dispatchEvent(
 			new CustomEvent(`${prefix}End`, {
 				detail: {}
 			})
@@ -565,7 +683,7 @@ const CoCreateEvents = {
 			// let value = values[0]
 			replaceKey(prefix, element, key, values);
 		} else {
-			// TODo: if html in iframe
+			// TODO: if html in iframe
 			let domTextEditor;
 			if (element.parentElement) {
 				domTextEditor =
@@ -628,7 +746,7 @@ const CoCreateEvents = {
 						element.classList.add(newValue);
 					}
 				} else if (attrName === "value") {
-					element.setValue(newValue);
+					element.setValue(newValue, false);
 				} else if (
 					["$click", "$focus", "$blur", "$save", "$read"].includes(
 						attrName
@@ -871,6 +989,160 @@ function parseNumberCondition(condition) {
 		: condition;
 }
 
+// Helper function for delay using Promises
+const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
+/**
+ * Waits for a specific element property to meet a readiness condition,
+ * based on retry attributes defined on the element.
+ * Incorporates optional exponential backoff for retry delays.
+ * Returns a Promise that resolves to true if the condition is met within
+ * the allowed attempts, and false otherwise.
+ *
+ * @param {HTMLElement} element The element with the onload-retry-* attributes.
+ * @returns {Promise<boolean>} A Promise resolving to true if ready, false if timed out.
+ */
+async function checkElementReadinessWithBackoff(element) {
+	const propertyName = element.getAttribute("onload-retry-property");
+
+	if (!propertyName) {
+		return true; // No retry needed
+	}
+
+	// --- Retry Parameters ---
+	const maxAttempts =
+		parseInt(element.getAttribute("onload-retry-attempts") || "3", 10) || 3;
+	// Initial delay (used for the first wait and as the base for backoff)
+	const initialDelayMs =
+		parseInt(element.getAttribute("onload-retry-delay") || "100", 10) ||
+		100;
+	// Exponential backoff factor (e.g., 2 for doubling). <= 1 means fixed delay.
+	// Default to 1 (no backoff) if missing or invalid.
+	const backoffFactor =
+		parseFloat(
+			element.getAttribute("onload-retry-backoff-factor") || "1"
+		) || 1;
+	// Optional maximum delay cap. Use Infinity if missing, invalid, or <= 0.
+	const maxDelayMs = parseInt(
+		element.getAttribute("onload-retry-max-delay") || "0",
+		10
+	);
+	const effectiveMaxDelay =
+		maxDelayMs && maxDelayMs > 0 ? maxDelayMs : Infinity;
+
+	console.log(
+		`Checking readiness for property "${propertyName}" on element ${
+			element.id || ""
+		}. Max attempts: ${maxAttempts}, Initial Delay: ${initialDelayMs}ms, Backoff Factor: ${backoffFactor}, Max Delay: ${
+			effectiveMaxDelay === Infinity ? "None" : effectiveMaxDelay + "ms"
+		}.`
+	);
+
+	// Initialize the delay to be used for the *first* wait.
+	let currentDelay = initialDelayMs;
+
+	for (let attempt = 1; attempt <= maxAttempts; attempt++) {
+		console.log(
+			`Attempt ${attempt}/${maxAttempts}: Checking "${propertyName}"...`
+		);
+		try {
+			const propertyValue = element[propertyName];
+			// Example check: Adjust condition as needed
+			if (propertyValue !== undefined && propertyValue > 0) {
+				console.log(
+					`Property "${propertyName}" ready on attempt ${attempt}. Value: ${propertyValue}`
+				);
+				return true; // Condition met
+			}
+		} catch (error) {
+			console.error(
+				`Error accessing property "${propertyName}" on attempt ${attempt}:`,
+				error
+			);
+		}
+
+		// If condition not met and more attempts remain:
+		if (attempt < maxAttempts) {
+			// Determine the actual delay for this wait, applying the cap
+			const delayForThisWait = Math.min(currentDelay, effectiveMaxDelay);
+
+			console.log(
+				`Waiting ${Math.round(
+					delayForThisWait
+				)}ms before next attempt...`
+			);
+			await delay(delayForThisWait);
+
+			// Calculate the delay for the *next* potential wait, only if backoff is active
+			if (backoffFactor > 1) {
+				currentDelay = currentDelay * backoffFactor;
+				// Note: We apply the cap just before the actual delay,
+				// but the base 'currentDelay' keeps growing exponentially.
+				// Alternatively, you could cap 'currentDelay' itself here:
+				// currentDelay = Math.min(currentDelay * backoffFactor, effectiveMaxDelay);
+				// Let's stick to capping just before delay() for now.
+			}
+			// If backoffFactor <= 1, currentDelay remains initialDelayMs (implicitly handled by initialization)
+		}
+	}
+
+	// If loop finishes without condition being met
+	console.warn(
+		`Readiness check failed for property "${propertyName}" on element ${
+			element.id || ""
+		} after ${maxAttempts} attempts.`
+	);
+	return false; // Timed out
+}
+
+// --- Example Usage (calling code doesn't change) ---
+
+async function handleElementProcessingWithBackoff(element) {
+	// Call the function that now supports backoff
+	const isReady = await checkElementReadinessWithBackoff(element);
+
+	if (isReady) {
+		console.log(
+			`Element ${element.id || ""} is ready. Proceeding with actions.`
+		);
+		// --- Execute subsequent actions ---
+		if (element.hasAttribute("onload-attribute")) {
+			/* ... */
+		}
+		if (element.hasAttribute("onload-query")) {
+			/* ... */
+		}
+	} else {
+		console.warn(
+			`Skipping actions for element ${
+				element.id || ""
+			} because readiness check failed.`
+		);
+	}
+}
+
+// --- Example Elements ---
+
+// With Backoff (Delays: 100, 200, 400, 800 - capped)
+// <span id="elem1" onload-retry-property="scrollWidth"
+//   onload-retry-attempts="5" onload-retry-delay="100"
+//   onload-retry-backoff-factor="2" onload-retry-max-delay="500">
+//   Content 1
+// </span>
+// Waits would be: 100ms, 200ms, 400ms, 500ms (capped)
+
+// No Backoff (factor missing/invalid/<=1)
+// <span id="elem2" onload-retry-property="clientHeight"
+//   onload-retry-attempts="4" onload-retry-delay="300">
+//   Content 2
+// </span>
+// Waits would be: 300ms, 300ms, 300ms
+
+// const element1 = document.getElementById('elem1');
+// if (element1) handleElementProcessingWithBackoff(element1);
+// const element2 = document.getElementById('elem2');
+// if (element2) handleElementProcessingWithBackoff(element2);
+
 CoCreateEvents.init();
 
 export default CoCreateEvents;