@cocreate/element-prototype 1.29.2 → 1.30.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [1.30.0](https://github.com/CoCreate-app/CoCreate-element-prototype/compare/v1.29.3...v1.30.0) (2025-10-11)
+
+
+### Features
+
+* add async support for getAttribute and enhance processOperators with async handling ([88cfe33](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/88cfe33deff47ecd3c80b1c4c8b2de04b38530b1))
+
+## [1.29.3](https://github.com/CoCreate-app/CoCreate-element-prototype/compare/v1.29.2...v1.29.3) (2025-07-13)
+
+
+### Bug Fixes
+
+* improve handling of radio inputs and select elements in setValue function ([8fb0fba](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/8fb0fbade7136dfd8eefd1109d30f3ec02bcc32a))
+
 ## [1.29.2](https://github.com/CoCreate-app/CoCreate-element-prototype/compare/v1.29.1...v1.29.2) (2025-05-01)
 
 

package/package.json

@@ -1,18 +1,10 @@
 {
   "name": "@cocreate/element-prototype",
-  "version": "1.29.2",
+  "version": "1.30.0",
   "description": "A simple element-prototype component in vanilla javascript. Easily configured using HTML5 data-attributes and/or JavaScript API.",
   "keywords": [
     "element-prototype",
-    "cocreate",
-    "low-code-framework",
-    "no-code-framework",
-    "cocreatejs",
-    "cocreatejs-component",
-    "cocreate-framework",
-    "no-code",
     "low-code",
-    "collaborative-framework",
     "realtime",
     "realtime-framework",
     "collaboration",

package/src/getAttribute.js

@@ -1,4 +1,4 @@
-import { processOperators } from "./operators";
+import { processOperators, processOperatorsAsync } from "./operators";
 
 // Store a reference to the original getAttribute function
 const originalGetAttribute = Element.prototype.getAttribute;
@@ -41,10 +41,29 @@ function getAttribute(element, name) {
 	return processOperators(element, value);
 }
 
+/**
+ * Asynchronously gets an attribute and processes its value for operators.
+ * @param {Element} element - The element from which to get the attribute.
+ * @param {string} name - The attribute name.
+ * @returns {Promise<string|object>} - A promise that resolves to the processed attribute value.
+ */
+async function getAttributeAsync(element, name) {
+	if (!(element instanceof Element)) {
+		throw new Error("First argument must be an Element");
+	}
+	let value = originalGetAttribute.call(element, name);
+	return await processOperatorsAsync(element, value);
+}
+
 // Override the getAttribute method on Element prototype
 Element.prototype.getAttribute = function (name) {
 	return getAttribute(this, name); // Use the custom getAttribute function
 };
 
+// Add getAttributeAsync to the Element prototype
+Element.prototype.getAttributeAsync = function (name) {
+	return getAttributeAsync(this, name);
+};
+
 // Export the custom getAttribute function
-export { getAttribute };
+export { getAttribute, getAttributeAsync };

package/src/getValue.js

@@ -56,7 +56,10 @@ const getValue = (element, valueType) => {
 		case "radio":
 			const key = element.getAttribute("key");
 			// Handles radio inputs by selecting the checked radio's value in the group with the same key
-			value = document.querySelector(`input[key="${key}"]:checked`).value;
+			let el = document.querySelector(`input[key="${key}"]:checked`);
+			if (el) {
+				value = el.value;
+			}
 			break;
 
 		case "number":

package/src/operators.js

@@ -1,4 +1,4 @@
-import { ObjectId, queryElements } from "@cocreate/utils";
+import { ObjectId, queryElements, getValueFromObject } from "@cocreate/utils";
 
 // Operators handled directly for simple, synchronous value retrieval
 const customOperators = new Map(
@@ -8,6 +8,8 @@ const customOperators = new Map(
 		$clientId: () => localStorage.getItem("clientId"),
 		$session_id: () => localStorage.getItem("session_id"),
 		$value: (element) => element.getValue() || "",
+		// TODO: get length of value
+		// $length: (element) => {element.getValue() || ""},
 		$innerWidth: () => window.innerWidth,
 		$innerHeight: () => window.innerHeight,
 		$href: () => window.location.href.replace(/\/$/, ""),
@@ -34,7 +36,25 @@ const customOperators = new Map(
 			return path === "/" ? "" : path;
 		},
 		$param: (element, args) => args,
-		$setValue: (element, args) => element.setValue(...args) || ""
+		$getObjectValue: (element, args) => {
+			if (Array.isArray(args) && args.length >= 2) {
+				return getValueFromObject(args[0], args[1]);
+			}
+			return "";
+		},
+		$setValue: (element, args) => element.setValue(...args) || "",
+		$true: () => true,
+		$false: () => false,
+		// TODO: Handle uuid generation
+		// $uid: () => uid.generate(6),
+		$parse: (element, args) => {
+			let value = args || "";
+			try {
+				return JSON.parse(value);
+			} catch (e) {
+				return value;
+			}
+		}
 	})
 );
 
@@ -49,7 +69,8 @@ const propertyOperators = new Set([
 	"$className",
 	"$textContent",
 	"$innerHTML",
-	"$getValue"
+	"$getValue",
+	"$reset"
 ]);
 
 // Combine all known operator keys for the main parsing regex
@@ -58,6 +79,172 @@ const knownOperatorKeys = [
 	...propertyOperators
 ].sort((a, b) => b.length - a.length);
 
+/**
+ * Helper function to check if a string path starts with a known bare operator.
+ * This logic is necessary to separate '$value' from '[0].src' when no parentheses remain.
+ */
+const findBareOperatorInPath = (path, knownOperatorKeys) => {
+    const trimmedPath = path.trim();
+    for (const key of knownOperatorKeys) {
+        if (trimmedPath.startsWith(key)) {
+            const remaining = trimmedPath.substring(key.length);
+            // Edge Case Fix: Ensure the operator is followed by a space, bracket, dot, or end-of-string.
+            // This prevents "valueThing" from being incorrectly split into "$value" + "Thing".
+            if (remaining.length === 0 || /^\s|\[|\./.test(remaining)) {
+                return key;
+            }
+        }
+    }
+    return null;
+}
+
+/**
+ * Finds the innermost function call (operator + its balanced parentheses argument)
+ * in the expression. This is the core logic for iterative parsing.
+ * * @param {string} expression The full expression string.
+ * @returns {{operator: string, args: string, fullMatch: string} | null} Details of the innermost function call, or null.
+ */
+const findInnermostFunctionCall = (expression) => {
+    let balance = 0;
+    let deepestStart = -1;
+    let deepestEnd = -1;
+    let deepestBalance = -1;
+    let inSingleQuote = false;
+    let inDoubleQuote = false;
+
+    // First pass: Find the indices of the DEEPEST balanced parenthesis pair.
+    for (let i = 0; i < expression.length; i++) {
+        const char = expression[i];
+
+        if (char === '"' && !inSingleQuote) {
+            inDoubleQuote = !inDoubleQuote;
+            continue;
+        } else if (char === "'" && !inDoubleQuote) {
+            inSingleQuote = !inDoubleQuote;
+            continue;
+        }
+
+        if (inSingleQuote || inDoubleQuote) {
+            continue;
+        }
+
+        if (char === '(') {
+            balance++;
+            // Track the index of the open parenthesis that belongs to the deepest balance level
+            if (balance > deepestBalance) {
+                deepestBalance = balance;
+                deepestStart = i;
+                deepestEnd = -1; // Reset end until match is found
+            }
+        } else if (char === ')') {
+            if (balance === deepestBalance) {
+                // This is the closing parenthesis that matches the deepest open parenthesis found
+                deepestEnd = i;
+            }
+            balance--;
+        }
+    }
+    
+    // If we didn't find a balanced pair, or the match is invalid, exit.
+    if (deepestStart === -1 || deepestEnd === -1 || deepestEnd <= deepestStart) {
+        return null;
+    }
+
+    // Now we have the innermost argument content indices (deepestStart + 1 to deepestEnd - 1)
+    const rawArgs = expression.substring(deepestStart + 1, deepestEnd).trim();
+    
+    // Step 2: Find the operator name backward from the deepestStart index.
+    let operatorStart = -1;
+    let nonWhitespaceFound = false;
+
+    for (let i = deepestStart - 1; i >= 0; i--) {
+        const char = expression[i];
+        
+        // Skip trailing whitespace between operator and '('
+        if (!nonWhitespaceFound) {
+            if (/\s/.test(char)) {
+                continue;
+            }
+            nonWhitespaceFound = true;
+        }
+        
+        // Find the start of the operator name
+        // This regex captures letters, numbers, hyphens, and the required $
+        let isOperatorChar = /[\w\-\$]/.test(char);
+        
+        if (!isOperatorChar) {
+            operatorStart = i + 1;
+            break;
+        }
+        operatorStart = i;
+    }
+    
+    if (operatorStart === -1) operatorStart = 0;
+    
+    const operatorNameCandidate = expression.substring(operatorStart, deepestStart).trim();
+
+    // Step 3: Validate the operator name
+    if (knownOperatorKeys.includes(operatorNameCandidate)) {
+        // Construct the full match string: operatorNameCandidate(rawArgs)
+        const fullMatch = expression.substring(operatorStart, deepestEnd + 1);
+        
+        return {
+            operator: operatorNameCandidate,
+            args: rawArgs,
+            fullMatch: fullMatch
+        };
+    }
+    
+    return null; // Operator name invalid or not found
+};
+
+/**
+ * Main function to find the innermost operator.
+ * * Logic flow is updated to prioritize finding the innermost FUNCTION CALL,
+ * then fall back to finding a BARE OPERATOR if no function calls remain.
+ * * @param {string} expression The expression to parse.
+ * @returns {{operator: string, args: string, rawContent: string, fullMatch?: string} | {operator: null, args: string, rawContent: string}}
+ */
+const findInnermostOperator = (expression) => {
+    
+    // --- 1. PRIORITY: Find Innermost FUNCTION CALL (Operator with Parentheses) ---
+    const functionCall = findInnermostFunctionCall(expression);
+
+    if (functionCall) {
+        // Return the full function expression details, including the full string section
+        return {
+            operator: functionCall.operator,
+            args: functionCall.args,
+            rawContent: functionCall.args, // The content inside the parentheses (arguments)
+            fullMatch: functionCall.fullMatch // The operator(args) string (the complete section to replace)
+        };
+    }
+    
+    // --- 2. FALLBACK: Find BARE OPERATOR (e.g., $value path) ---
+    
+    // If no function calls are found, the entire expression is treated as the raw content
+    const rawContent = expression.trim();
+
+    // Now check the raw content to see if it starts with a bare operator ($value)
+    const innermostOperator = findBareOperatorInPath(rawContent, knownOperatorKeys);
+
+    if (innermostOperator) {
+        const operatorArgs = rawContent.substring(innermostOperator.length).trim();
+        return {
+            operator: innermostOperator,
+            args: operatorArgs,
+            rawContent: rawContent,
+        };
+    }
+
+    // Fallback if no known operator is found
+    return {
+        operator: null,
+        args: rawContent,
+        rawContent: rawContent
+    };
+};
+
 function escapeRegexKey(key) {
 	if (key.startsWith("$")) {
 		return "\\" + key; // Escape the leading $
@@ -67,71 +254,140 @@ function escapeRegexKey(key) {
 	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.
+ * @returns {string | {value: string, params: Promise[]}} - Processed string or an object containing the partially processed string and unresolved Promises.
  */
-function processOperators(element, value, exclude = [], parent) {
+function processOperators(
+	element,
+	value,
+	exclude = [],
+	parent,
+	params = []
+) {
 	// 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;
+
+	let processedValue = value;
+	let hasPromise = false;
+
+	while (processedValue.includes("$")) {
+        
+        // --- PROMISE TOKEN RESOLUTION ---
+        // If the processedValue starts with a resolved parameter token from the previous async step,
+        // substitute the token with its actual (now resolved) value from the params array.
+        const paramMatch = processedValue.match(/^\$\$PARAM_(\d+)\$\$/);
+        if (paramMatch && Array.isArray(params) && params.length > 0) {
+            const index = parseInt(paramMatch[1], 10);
+            if (index < params.length) {
+                const resolvedTokenValue = params[index];
+                processedValue = processedValue.replace(paramMatch[0], resolvedTokenValue);
+                // After replacement, we restart the loop to find the *next* innermost operator
+                continue; 
+            }
+        }
+        // --- END TOKEN RESOLUTION ---
+
+		const { operator, args, rawContent, fullMatch } = findInnermostOperator(processedValue);
+
+		if (!operator) {
+			break; // No more operators found
+		}
+
+		if (operator === "$param" && !args) {
+			break;
+		}
+
+		if (operator && !exclude.includes(operator)) {
+            
+            // --- Determine textToReplace ---
+            // The fullMatch property from findInnermostOperator ensures we correctly replace 
+            // the whole expression (e.g., "$param(...)") or just the bare operator ($value path).
+            const textToReplace = fullMatch || rawContent;
+            // --- END textToReplace CALCULATION ---
+
+			let resolvedValue = resolveOperator(element, operator, args, parent, params);
+
+			if (resolvedValue instanceof Promise) {
+				const paramIndex = params.length; // Get the index *before* push
+				params.push(resolvedValue); // Store the Promise
+                
+                // CRITICAL FIX: Replace the matched expression with a unique token, then break.
+                processedValue = processedValue.replace(textToReplace, `$$PARAM_${paramIndex}$$`);
+				hasPromise = true;
+				break; // Stop processing and yield
 			}
 
-			// 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 "";
-				}
+			if (params.some((p) => p instanceof Promise)) {
+				hasPromise = true;
+				break; // A nested call found a promise, stop and yield
+			}
 
-				return resolvedValue ?? "";
+			let replacement = "";
+			if (operator === "$param") {
+				params.push(resolvedValue);
 			} else {
-				// If no known operator matched, or if it was excluded,
-				// return the original matched string (no replacement).
-				return match;
+				replacement = resolvedValue ?? "";
 			}
+
+			// Manually replace the matched part of the string
+			processedValue = processedValue.replace(textToReplace, replacement);
+
+		} else {
+			// If operator is excluded, we need to advance past it to avoid infinite loop
+			break;
 		}
-	);
+	}
+
+	if (hasPromise) {
+		return { value: processedValue, params };
+	}
 
 	if (params.length) {
-		return params;
+		if (processedValue.trim() === "") {
+			return params;
+		}
 	}
 
 	return processedValue;
 }
 
-/**
+async function processOperatorsAsync(
+	element,
+	value,
+	exclude = [],
+	parent,
+	params = []
+) {
+	let result = processOperators(element, value, exclude, parent, params);
+
+	while (typeof result === "object" && result.params) {
+		const resolvedParams = await Promise.all(result.params);
+		// Note: The second argument passed to processOperators here is the partially processed string (result.value)
+		// which now contains the PARAM tokens. The third argument is the array of resolved values (resolvedParams)
+		// which will be used to replace those tokens in the subsequent processOperators call.
+		result = processOperators(
+			element,
+			result.value,
+			exclude,
+			parent,
+			resolvedParams
+		);
+	}
+
+	if (result instanceof Promise) {
+		return await result;
+	}
+
+	return result;
+}
+
 /**
  * Synchronously determines and executes the action for processing a single operator token.
  * @param {HTMLElement|null} element - The context element from which to derive values or execute methods.
@@ -140,18 +396,28 @@ function processOperators(element, value, exclude = [], parent) {
  * @param {string} parent - Context in which the function is called, potentially affecting behavior or processing.
  * @returns {string} The final resolved value after applying the operator to the given elements.
  */
-function resolveOperator(element, operator, args, parent) {
+function resolveOperator(element, operator, args, parent, params) {
+	// If a promise is already in the params, we must stop and wait for it to be resolved.
+	if (params.some((p) => p instanceof Promise)) {
+		return "";
+	}
+
 	// If args contain any operators (indicated by '$'), process them recursively
-	if (args && args.includes("$")) {
+	if (args && typeof args === "string" && args.includes("$")) {
 		// Reprocess args to resolve any nested operators
-		args = processOperators(element, args, "", operator);
+		args = processOperators(element, args, "", operator, params);
+	}
+
+	if (params.some((p) => p instanceof Promise)) {
+		return operator;
 	}
 
 	// Initialize an array of elements to operate on, starting with the single element reference if provided
 	let targetElements = element ? [element] : [];
-
-	// If args are provided as a string, treat it as a selector to find applicable target elements
-	if (args && typeof args === "string") {
+    
+	// If the argument is a string and the operator is NOT a custom utility that expects raw data
+    // (like $param, $parse), we assume the argument is a selector.
+	if (args && typeof args === "string" && !customOperators.has(operator)) {
 		targetElements = queryElements({
 			element, // Use the context element as the base for querying
 			selector: args // Selector from args to find matching elements
@@ -167,7 +433,7 @@ function resolveOperator(element, operator, args, parent) {
 	// If the result is a string and still contains unresolved operators, process them further
 	if (value && typeof value === "string" && value.includes("$")) {
 		// Resolve any remaining operators within the value string
-		value = processOperators(element, value, parent);
+		value = processOperators(element, value, parent, params);
 	}
 
 	// Return the final processed value, fully resolved
@@ -201,8 +467,10 @@ function processValues(elements, operator, args, parent) {
 		if (typeof rawValue === "function") {
 			// If arguments are provided as an array
 			if (Array.isArray(args)) {
-				// If there are arguments, exit by returning an empty string (assumes args should not be used here)
-				if (args.length) {
+				// If the custom operator is NOT $param and has arguments, something is wrong with the flow.
+				// However, if it's a generic method on an element (like $setValue), the args are passed via spread.
+				if (customOperators.has(operator) && operator !== "$setValue" && operator !== "$getObjectValue" && args.length) {
+					// For simple custom operators that don't take multiple args, return an empty string.
 					return "";
 				}
 				// Invoke the function using the element and spread array arguments
@@ -220,6 +488,12 @@ function processValues(elements, operator, args, parent) {
 				return rawValue;
 			}
 		} else {
+			if (
+				rawValue instanceof Promise ||
+				(typeof rawValue === "object" && rawValue !== null)
+			) {
+				return rawValue;
+			}
 			// Otherwise, append the stringified rawValue to the aggregated result, defaulting to an empty string if it's nullish
 			aggregatedString += String(rawValue ?? "");
 		}
@@ -252,4 +526,4 @@ function getSubdomain() {
 	return null;
 }
 
-export { processOperators };
+export { processOperators, processOperatorsAsync };

package/src/setValue.js

@@ -52,7 +52,7 @@ const setValue = (el, value, dispatch) => {
 	if (
 		el.tagName == "INPUT" ||
 		el.tagName == "TEXTAREA" ||
-		(el.tagName == "SELECT" && el.options.length)
+		el.tagName == "SELECT"
 	) {
 		// TODO: attribute config undefined when used with onload-value
 		let isCrdt = el.getAttribute("crdt");
@@ -71,9 +71,11 @@ const setValue = (el, value, dispatch) => {
 				if (inputs[i].value) {
 					if (value === true || value === false)
 						inputs[i].checked = value;
-					else if (value.includes(inputValue))
+					else if (value.includes(inputValue) || value === "on") {
 						inputs[i].checked = true;
-					else inputs[i].checked = false;
+					} else {
+						inputs[i].checked = false;
+					}
 				} else {
 					if (
 						value === "true" ||
@@ -85,14 +87,17 @@ const setValue = (el, value, dispatch) => {
 				}
 			}
 		} else if (el.type === "radio") {
-			el.value == value ? (el.checked = true) : (el.checked = false);
+			const wasChecked = el.checked;
+			if (el.value == value) {
+				el.checked = true;
+			} else {
+				el.checked = false;
+			}
+			// Only continue if checked state changed
+			if (el.checked === wasChecked) return;
 		} else if (el.type === "password") {
 			el.value = __decryptPassword(value);
-		} else if (
-			el.tagName == "SELECT" &&
-			el.hasAttribute("multiple") &&
-			Array.isArray(value)
-		) {
+		} else if (el.tagName == "SELECT") {
 			let options = el.options;
 			for (let i = 0; i < options.length; i++) {
 				if (value.includes && value.includes(options[i].value)) {