@cocreate/element-prototype 1.28.1 → 1.29.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+# [1.29.0](https://github.com/CoCreate-app/CoCreate-element-prototype/compare/v1.28.1...v1.29.0) (2025-04-11)
+
+
+### Bug Fixes
+
+* default to string if value is falsy and not 0 ([b8eadb1](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/b8eadb19405393eb1121e257571d3cff45db6263))
+* format dat and time to correct format to set on inputs ([35dd407](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/35dd4071c89741b468ac8e9a3927abf06cef5838))
+* if value-type condition before switch case ([066da57](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/066da57a48fb8c0758254525a9d273977d8dba0a))
+* setAttribute value ([afcc695](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/afcc695ba678cc2c8a525ea5093a5421407eebf5))
+* update exports ([19eb2ae](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/19eb2aeab014f367d67009e6e9ae38f50f2b0104))
+* utility import ([1f3337a](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/1f3337a6422e0615a3e3d38532f71d489b0d9690))
+
+
+### Features
+
+* $scrollWidth , $relativPath and $path operators ([08844ba](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/08844ba13c82f9542cf70b68a42a77d3e259f999))
+* add [@cocreate](https://github.com/cocreate) utils ([d82ee9b](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/d82ee9b685e98eec292e96dfc247b87847fde56e))
+* added queryElements() to element prototype. wiil automatically use attibutes if found on element as well as options could be passed ([70114a1](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/70114a1dde8dc8263b1fd4f86907a118aa596167))
+* improved operators to target element poperties and methods ([2734187](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/2734187b6640119f8e00dc374e056acd502f8d71))
+* utility for operator handling ([d76a0f6](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/d76a0f6640ce5069823f7b8a71272d3738a44e17))
+
 ## [1.28.1](https://github.com/CoCreate-app/CoCreate-element-prototype/compare/v1.28.0...v1.28.1) (2025-01-18)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/element-prototype",
-  "version": "1.28.1",
+  "version": "1.29.0",
   "description": "A simple element-prototype component in vanilla javascript. Easily configured using HTML5 data-attributes and/or JavaScript API.",
   "keywords": [
     "element-prototype",
@@ -57,5 +57,7 @@
     "webpack-cli": "^4.5.0",
     "webpack-log": "^3.0.1"
   },
-  "dependencies": {}
+  "dependencies": {
+    "@cocreate/utils": "1.37.3"
+  }
 }

package/src/getAttribute.js

@@ -1,4 +1,4 @@
-import utility from "./utility";
+import { processOperators } from "./utility";
 
 // Store a reference to the original getAttribute function
 const originalGetAttribute = Element.prototype.getAttribute;
@@ -22,34 +22,5 @@ function updateAttributes(e) {
 // Override the getAttribute function
 Element.prototype.getAttribute = function (name) {
 	let value = originalGetAttribute.call(this, name);
-
-	const localKeys = {
-		$organization_id: "organization_id",
-		$user_id: "user_id",
-		$clientId: "clientId",
-		$session_id: "session_id"
-	};
-
-	if (localKeys.hasOwnProperty(value)) {
-		let newValue = localStorage.getItem(localKeys[value]);
-
-		if (!attributes.has(localKeys[value])) {
-			attributes.set(localKeys[value], []);
-		}
-
-		attributes.get(localKeys[value]).push({
-			element: this,
-			name,
-			value: newValue
-		});
-		value = newValue;
-	} else if (value === "$innerWidth") {
-		value = window.innerWidth;
-	} else if (value === "$innerHeight") {
-		value = window.innerHeight;
-	} else if (typeof value === "string" && value.includes("$")) {
-		value = utility.urlOperators(value);
-	}
-
-	return value;
+	return processOperators(this, value);
 };

package/src/getValue.js

@@ -1,4 +1,4 @@
-import utility from "./utility";
+import { processOperators } from "./utility";
 
 const storage = new Map();
 
@@ -95,51 +95,53 @@ const getValue = (element) => {
 				// value = value.substring(11, 8) + 'Z';
 				value = value.substring(11, 19) + "Z";
 
-			switch (valueType) {
-				case "getDayName":
-					const days = [
-						"Sunday",
-						"Monday",
-						"Tuesday",
-						"Wednesday",
-						"Thursday",
-						"Friday",
-						"Saturday"
-					];
-					value = days[value.getDay()];
-					break;
-				case "getMonthName":
-					const months = [
-						"January",
-						"February",
-						"March",
-						"April",
-						"May",
-						"June",
-						"July",
-						"August",
-						"September",
-						"October",
-						"November",
-						"December"
-					];
-					value = months[value.getMonth()];
-					break;
-				case "toUnixTimestamp":
-					value = Math.floor(value.getTime() / 1000);
-					break;
-				case "toLocaleString":
-					let locale = element.getAttribute("locale") || "en-US";
-					value = value[valueType](locale);
-					break;
-				default:
-					if (typeof value[valueType] === "function") {
-						value = value[valueType]();
-					} else {
-						console.warn(
-							`The method ${valueType} is not a function of Date object.`
-						);
-					}
+			if (valueType) {
+				switch (valueType) {
+					case "getDayName":
+						const days = [
+							"Sunday",
+							"Monday",
+							"Tuesday",
+							"Wednesday",
+							"Thursday",
+							"Friday",
+							"Saturday"
+						];
+						value = days[value.getDay()];
+						break;
+					case "getMonthName":
+						const months = [
+							"January",
+							"February",
+							"March",
+							"April",
+							"May",
+							"June",
+							"July",
+							"August",
+							"September",
+							"October",
+							"November",
+							"December"
+						];
+						value = months[value.getMonth()];
+						break;
+					case "toUnixTimestamp":
+						value = Math.floor(value.getTime() / 1000);
+						break;
+					case "toLocaleString":
+						let locale = element.getAttribute("locale") || "en-US";
+						value = value[valueType](locale);
+						break;
+					default:
+						if (typeof value[valueType] === "function") {
+							value = value[valueType]();
+						} else {
+							console.warn(
+								`The method ${valueType} is not a function of Date object.`
+							);
+						}
+				}
 			}
 		}
 	} else if (element.tagName == "INPUT" || element.tagName == "SELECT") {
@@ -171,6 +173,8 @@ const getValue = (element) => {
 			value = targetElement.innerText;
 		} else if (valueType === "outerHTML") {
 			value = targetElement.outerHTML;
+		} else if (valueType === "element" || valueType === "node") {
+			value = targetElement.outerHTML;
 		} else {
 			value = targetElement.innerHTML;
 		}
@@ -181,15 +185,7 @@ const getValue = (element) => {
 		else return true;
 	}
 
-	if (value === "$organization_id")
-		value = localStorage.getItem("organization_id");
-	else if (value === "$user_id") value = localStorage.getItem("user_id");
-	else if (value === "$clientId") value = localStorage.getItem("clientId");
-	else if (value === "$session_id")
-		value = localStorage.getItem("session_id");
-	else if (typeof value === "string" && value.includes("$")) {
-		value = utility.urlOperators(value);
-	}
+	value = processOperators(element, value, ["$value"]);
 
 	try {
 		const attributes = element.attributes; // Get all attributes of the element

package/src/index.js

@@ -20,8 +20,16 @@
 // you must obtain a commercial license from CoCreate LLC.
 // For details, visit <https://cocreate.app/licenses/> or contact us at sales@cocreate.app.
 
-import { getAttribute } from './getAttribute';
-import { setValue } from './setValue';
-import { getValue } from './getValue';
+import { getAttribute } from "./getAttribute";
+import { setValue } from "./setValue";
+import { getValue } from "./getValue";
+import { queryElements } from "./queryElements";
+import { processOperators } from "./utility";
 
-export default { getAttribute, getValue, setValue }
+export default {
+	getAttribute,
+	getValue,
+	setValue,
+	processOperators,
+	queryElements
+};

package/src/queryElements.js

@@ -0,0 +1,5 @@
+import utils from "@cocreate/utils";
+
+Element.prototype.queryElements = function (options = {}) {
+	return utils.queryElements({ element: this, ...options });
+};

package/src/setValue.js

@@ -19,11 +19,26 @@ const setValue = (el, value, dispatch) => {
 	else if (typeof value === "object") value = JSON.stringify(value, null, 2);
 
 	if (["time", "datetime", "datetime-local"].includes(el.type)) {
-		if (el.value) {
-			value = new Date(el.value).toLocalString();
+		if (value) {
+			const date = new Date(value);
+			if (el.type === "time") {
+				// Format time as "HH:MM"
+				const hours = String(date.getHours()).padStart(2, "0");
+				const minutes = String(date.getMinutes()).padStart(2, "0");
+				el.value = `${hours}:${minutes}`;
+			} else if (el.type === "datetime-local") {
+				// Format datetime-local as "YYYY-MM-DDTHH:MM"
+				const year = date.getFullYear();
+				const month = String(date.getMonth() + 1).padStart(2, "0");
+				const day = String(date.getDate()).padStart(2, "0");
+				const hours = String(date.getHours()).padStart(2, "0");
+				const minutes = String(date.getMinutes()).padStart(2, "0");
+				el.value = `${year}-${month}-${day}T${hours}:${minutes}`;
+			}
 		} else {
-			value = "";
+			el.value = "";
 		}
+		return dispatchEvents(el, bubbles, dispatch);
 	}
 
 	let valueType = el.getAttribute("value-type");
@@ -100,6 +115,8 @@ const setValue = (el, value, dispatch) => {
 		el.srcdoc = value;
 	} else if (el.tagName === "SCRIPT") {
 		setScript(el, value);
+	} else if (el.hasAttribute("value")) {
+		value = el.setAttribute("value", value);
 	} else {
 		if (el.hasAttribute("contenteditable") && el == document.activeElement)
 			return;

package/src/utility.js

@@ -1,80 +1,200 @@
-import { ObjectId } from "@cocreate/utils";
+import { ObjectId, queryElements } from "@cocreate/utils";
 
-function getSubdomain() {
-	const hostname = window.location.hostname; // e.g., "api.dev.example.com"
-	const parts = hostname.split(".");
+// Operators handled directly for simple, synchronous value retrieval
+const customOperators = new Map(
+	Object.entries({
+		$organization_id: () => localStorage.getItem("organization_id"),
+		$user_id: () => localStorage.getItem("user_id"),
+		$clientId: () => localStorage.getItem("clientId"),
+		$session_id: () => localStorage.getItem("session_id"),
+		$value: (element) => element.getValue() || "",
+		$innerWidth: () => window.innerWidth,
+		$innerHeight: () => window.innerHeight,
+		$href: () => window.location.href.replace(/\/$/, ""),
+		$origin: () => window.location.origin,
+		$protocol: () => window.location.protocol,
+		$hostname: () => window.location.hostname,
+		$host: () => window.location.host,
+		$port: () => window.location.port,
+		$pathname: () => window.location.pathname.replace(/\/$/, ""),
+		$hash: () => window.location.hash,
+		$subdomain: () => getSubdomain() || "",
+		$object_id: () => ObjectId().toString(),
+		"ObjectId()": () => ObjectId().toString(),
+		$relativePath: () => {
+			let depth = window.location.pathname.split("/").length - 1;
+			return depth > 0 ? "../".repeat(depth) : "./";
+		},
+		$path: () => {
+			let path = window.location.pathname;
+			if (path.split("/").pop().includes(".")) {
+				path = path.replace(/\/[^\/]+$/, "/");
+			}
+			return path === "/" ? "" : path;
+		},
+		$param: (element, args) => args,
+		$setValue: (element, args) => element.setValue(...args) || ""
+	})
+);
+
+// Operators that access a specific property of a target element
+const propertyOperators = new Set([
+	"$scrollWidth",
+	"$scrollHeight",
+	"$offsetWidth",
+	"$offsetHeight",
+	"$id",
+	"$tagName",
+	"$className",
+	"$textContent",
+	"$innerHTML",
+	"$getValue"
+]);
+
+// Combine all known operator keys for the main parsing regex
+const knownOperatorKeys = [
+	...customOperators.keys(),
+	...propertyOperators
+].sort((a, b) => b.length - a.length);
+
+function escapeRegexKey(key) {
+	if (key.startsWith("$")) {
+		return "\\" + key; // Escape the leading $
+	} else if (key === "ObjectId()") {
+		return "ObjectId\\(\\)"; // Escape the parentheses
+	}
+	return key; // Should not happen with current keys, but fallback
+}
+
+const operatorPattern = knownOperatorKeys.map(escapeRegexKey).join("|");
+
+// Regex to find potential operators and their arguments
+// $1: Potential operator identifier (e.g., $user_id, $closestDiv)
+// $2: Arguments within parentheses (optional)
+const regex = new RegExp(`(${operatorPattern})(?:\\s*\\((.*?)\\))?`, "g");
+
+/**
+ * Synchronously processes a string, finding and replacing operators recursively.
+ * Assumes ALL underlying operations (getValue, queryElements) are synchronous.
+ * @param {Element | null} element - Context element.
+ * @param {string} value - String containing operators.
+ * @param {string[]} [exclude=[]] - Operator prefixes to ignore.
+ * @returns {string} - Processed string.
+ */
+function processOperators(element, value, exclude = [], parent) {
+	// Early exit if no operators are possible or value is not a string
+	if (typeof value !== "string" || !value.includes("$")) {
+		return value;
+	}
+	let params = [];
+	const processedValue = value.replace(
+		regex,
+		(match, operator, args = "") => {
+			// 'match' is the full matched string (e.g., "$closest(.myClass)")
+			// 'operator' is the identifier part (e.g., "$closest")
+			// 'args' is the content within parentheses (e.g., ".myClass") or "" if no parentheses
+
+			if (operator === "$param" && !args) {
+				return match;
+			}
+
+			// If a valid operator was identified AND it's not in the exclude list
+			if (operator && !exclude.includes(operator)) {
+				// Resolve the value for the identified operator and its arguments
+				// Pass the *trimmed* arguments to the resolver
+				let resolvedValue = resolveOperator(
+					element,
+					operator,
+					args.replace(/^['"]|['"]$/g, "").trim(),
+					parent
+				);
+
+				if (operator === "$param") {
+					params.push(resolvedValue);
+					return "";
+				}
 
-	// Handle edge cases for single-word hostnames or IPs
-	if (parts.length > 2 && isNaN(parts[parts.length - 1])) {
-		return parts.slice(0, parts.length - 2).join("."); // Subdomain
+				return resolvedValue ?? "";
+			} else {
+				// If no known operator matched, or if it was excluded,
+				// return the original matched string (no replacement).
+				return match;
+			}
+		}
+	);
+
+	if (params.length) {
+		return params;
 	}
 
-	return null; // No subdomain
+	return processedValue;
 }
 
-const operatorsMap = {
-	$href: function () {
-		return window.location.href;
-	},
-	$origin: function () {
-		return window.location.origin;
-	},
-	$protocol: function () {
-		return window.location.protocol;
-	},
-	$host: function () {
-		return window.location.host;
-	},
-	$hostname: function () {
-		return window.location.hostname;
-	},
-	$port: function () {
-		return window.location.port;
-	},
-	$pathname: function () {
-		return window.location.pathname;
-	},
-	$hash: function () {
-		return window.location.hash;
-	},
-	$subdomain: function () {
-		return getSubdomain() || "";
-	},
-	$object_id: function () {
-		return ObjectId().toString();
+/**
+ * Synchronously determines and executes the action for a single operator token.
+ * @returns {string} The final string value for the token.
+ */
+function resolveOperator(element, operator, args, parent) {
+	if (args && args.includes("$")) {
+		args = processOperators(element, args, "", operator);
+	}
+
+	let targetElements = element ? [element] : [];
+	if (args && typeof args === "string") {
+		targetElements = queryElements({
+			element,
+			args
+		});
 	}
-};
 
-function urlOperators(value) {
-	if (typeof value !== "string") {
-		console.error("Value is not a string:", value);
-		return value; // Return as-is for non-string input
+	let value = processValues(targetElements, operator, args, parent);
+	if (value && typeof value === "string" && value.includes("$")) {
+		value = processOperators(element, value, parent);
 	}
 
-	// Dynamically construct a regex from the keys in operatorsMap
-	const operatorKeys = Object.keys(operatorsMap)
-		.map((key) => `\\${key}`)
-		.join("|");
-	const regex = new RegExp(operatorKeys, "g");
-
-	// Debugging regex match
-	// if (!regex.test(value)) {
-	// 	console.warn("Regex did not match any part of the input value.");
-	// }
-
-	// Replace matched operators with their resolved values
-	const updatedValue = value.replace(regex, function (match) {
-		if (operatorsMap[match]) {
-			const replacement = operatorsMap[match]();
-			console.log(`Replacing "${match}" with "${replacement}"`);
-			return replacement || "";
+	return value;
+}
+
+/**
+ * Synchronously aggregates values.
+ * @returns {string} The aggregated string value.
+ */
+function processValues(elements, operator, args, parent) {
+	let customOp = customOperators.get(operator);
+	let aggregatedString = "";
+	for (const el of elements) {
+		if (!el) continue;
+		let rawValue = customOp || el?.[operator.substring(1)];
+		if (typeof rawValue === "function") {
+			if (Array.isArray(args)) {
+				if (args.length) {
+					return "";
+				}
+				rawValue = rawValue(el, ...args);
+			} else {
+				rawValue = rawValue(el, args);
+			}
+		}
+
+		if (parent === "$param") {
+			if (rawValue) {
+				return rawValue;
+			}
 		} else {
-			console.warn(`No match found for "${match}" in operatorsMap.`);
-			return ""; // Default replacement if operator not found
+			aggregatedString += String(rawValue ?? "");
 		}
-	});
+	}
+
+	return aggregatedString;
+}
 
-	return updatedValue;
+function getSubdomain() {
+	const hostname = window.location.hostname;
+	const parts = hostname.split(".");
+	if (parts.length > 2 && isNaN(parseInt(parts[parts.length - 1]))) {
+		return parts.slice(0, parts.length - 2).join(".");
+	}
+	return null;
 }
 
-export default { urlOperators };
+export { processOperators };