@cocreate/elements 1.42.4 → 1.42.6

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [1.42.6](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.42.5...v1.42.6) (2025-10-10)
+
+
+### Bug Fixes
+
+* enhance form attribute handling and improve element initialization logic ([6a3eeb3](https://github.com/CoCreate-app/CoCreate-elements/commit/6a3eeb35ccfd1656f71c7e51d0d604d8ccc28071))
+
+## [1.42.5](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.42.4...v1.42.5) (2025-10-08)
+
+
+### Bug Fixes
+
+* ensure key checks in setData and filterData handle undefined values correctly ([fd04107](https://github.com/CoCreate-app/CoCreate-elements/commit/fd04107fde4d1d51ce215d3da5f241c47565aa92))
+* import getRelativePath and remove unused getPath function in fetchSrc.js ([363497c](https://github.com/CoCreate-app/CoCreate-elements/commit/363497cd9fa0b2e920e226766488593e46f6db8f))
+
 ## [1.42.4](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.42.3...v1.42.4) (2025-09-07)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/elements",
-  "version": "1.42.4",
+  "version": "1.42.6",
   "description": "Fetch content into any html element by using html5 attributes to query data stored in CoCreate headless CMS. If data is changed it will instantly reflect in html tags as changes are broadcasted in realtime",
   "keywords": [
     "elements",

package/src/fetchSrc.js

@@ -1,9 +1,9 @@
 import observer from "@cocreate/observer";
-import { ObjectId } from "@cocreate/utils";
+import { getRelativePath, ObjectId } from "@cocreate/utils";
 
 const selector =
 	"[src]:not(img, video, audio, script, input, iframe, frame, link, source), [source], [stream]";
-const initializing = new Map();
+const textExtensions = ['html','htm','xhtml','css','js','mjs','cjs','json','jsonc','json5','xml','xsd','xsl','xslt','svg','md','markdown','scss','sass','less','vue','jsx','tsx','graphql','gql','htc','webmanifest','txt','csv','tsv','yaml','yml','toml','ini','log','dat','env','c','cc','cpp','cxx','h','hh','hpp','hxx','m','mm','cs','java','jsp','properties','py','pyc','pyd','pyo','rb','erb','php','phtml','php3','php4','php5','php7','phps','go','rs','swift','kt','kts','ts','pl','pm','pod','sh','bash','zsh','ksh','csh','tcsh','ps1','psm1','psd1','bat','cmd','sql','r','Rprofile','Rmd','lua','hs','lhs','erl','hrl','scala','sbt','d','f','for','f77','f90','f95','f03','f08','adb','ads','cbl','cob','cpy','lisp','lsp','scm','ss','pro','plg','vb','vbs','dart','asm','s','conf','cfg','config','ini','env','npmrc','yarnrc','gitattributes','gitignore','gitmodules','gitkeep','editorconfig','prettierrc','eslintrc','eslintignore','browserslistrc','package.json','package-lock.json','tsconfig.json','babelrc','vite.config.js','rollup.config.js','webpack.config.js','procfile','dockerfile','dockerignore','makefile','gradle','groovy','pom','properties','service','target','rst','adoc','asciidoc','tex','latex','textile','org','wiki','nfo','rtf','gcode','patch','diff','log','reg','map','sub','srt','dic','wml','rss','atom','gpx','kml','kmz','vcf','vcard','ics','ical','ps','eps','mf','lic','license','pem','key','crt','cert','pub','tpl','liquid','mustache','hbs','twig','blade.php','ejs','coffee','litcoffee','jl','nim','zig','wgsl']; const initializing = new Map();
 
 function init(elements) {
 	if (elements && !Array.isArray(elements)) elements = [elements];
@@ -37,6 +37,7 @@ async function initElements(elements) {
 			if (element.tagName === "AUDIO" || element.tagName === "VIDEO") {
 				initMediaSource(element, src);
 			} else {
+				if (src && !textExtensions.includes(src.split('.').pop())) return
 				element.removeAttribute("rendered");
 
 				let text = await response.text();
@@ -44,9 +45,11 @@ async function initElements(elements) {
 					let path = "";
 					let pathElement = element.closest("[path]");
 					if (pathElement) {
-						path = pathElement.getAttribute("path") || getPath();
+						path =
+							pathElement.getAttribute("path") ||
+							getRelativePath();
 					} else {
-						path = getPath();
+						path = getRelativePath();
 					}
 					// Replace $relativePath in the fetched text
 					if (path) {
@@ -66,16 +69,6 @@ async function initElements(elements) {
 	}
 }
 
-function getPath() {
-	let currentPath = window.location.pathname.replace(/\/[^\/]*$/, ""); // Remove file from path
-	if (!currentPath.endsWith("/")) {
-		currentPath += "/";
-	}
-	let depth = currentPath.split("/").filter(Boolean).length; // Count depth levels
-
-	return depth > 0 ? "../".repeat(depth) : "./"; // Return the correct relative path
-}
-
 async function initMediaSource(element, src) {
 	try {
 		let mediaConfig = await response.json();

package/src/form.js

@@ -54,29 +54,32 @@ function runObjectId(form) {
 	}
 }
 
+const formAttributes = [
+	"organization_id",
+	"host",
+	"storage",
+	"database",
+	"array",
+	"index",
+	"object",
+	"key"
+];
+const formAttributesSelector = formAttributes.map((attr) => `[${attr}]`).join(", ");
+
 /**
  * @param form
  */
 function setAttribute(form, elements) {
-	if (!elements)
-		elements = form.querySelectorAll(
-			"[organization_id], [host], [storage], [database], [array], [index], [object], [key]"
-		);
+	if (!elements) elements = form.querySelectorAll(formAttributesSelector);
 
 	for (let attribute of form.attributes) {
-		let variable = window.CoCreateConfig.attributes[attribute.name];
-
-		// Set the attribute of all elements in the variable
-		if (variable) {
-			for (let el of elements) {
-				// Set the value of the attribute.
-				// TODO: skip-attribute naming convention, perhaps skip by defualt if storage, database, array not the same and use attribute to apply for cases where one _id will be used across 2 arrays
-				if (
-					!el.getAttribute(attribute.name) &&
-					!el.hasAttribute("skip-attribute")
-				) {
-					el.setAttribute(attribute.name, attribute.value);
-				}
+		if (!formAttributes.includes(attribute.name)) continue;
+
+		for (let el of elements) {
+			// Set the value of the attribute.
+			// TODO: skip-attribute naming convention, perhaps skip by defualt if storage, database, array not the same and use attribute to apply for cases where one _id will be used across 2 arrays
+			if ( !el.hasAttribute("skip-attribute") ) {
+				el.setAttribute(attribute.name, attribute.value);
 			}
 		}
 	}
@@ -208,11 +211,10 @@ Observer.init({
 Observer.init({
 	name: "CoCreateFormElements",
 	types: ["addedNodes"],
-	selector:
-		"[organization_id], [host], [storage], [database], [array], [index], [object], [key]",
+	selector: formAttributesSelector,
 	callback: function (mutation) {
-		if (mutation.target.form)
-			setAttribute(mutation.target.form, [mutation.target]);
+		let form = mutation.target.form || mutation.target.closest("form");
+		if (form) setAttribute(form, [mutation.target]);
 	}
 });
 

package/src/index.js

@@ -123,7 +123,7 @@ async function initElement(el) {
 				["INPUT", "TEXTAREA", "SELECT"].includes(el.tagName) ||
 				(el.hasAttribute("contenteditable") &&
 					el.getAttribute("contenteditable") !== "false") ||
-				el.contenteditable
+				el.contenteditable || el.value !== undefined || el.hasAttribute("value")
 			) {
 				if (el.tagName == "IFRAME") {
 					// ToDo: saving on contenteditable elements when an objectId does not exist in order to crud or crdt
@@ -143,7 +143,7 @@ async function initElement(el) {
 					if (e.detail && e.detail.skip == true) return;
 					if (data.type !== "object" && data[data.type] === "pending")
 						return;
-
+					if (!el.value && !el.hasAttribute("value") && el.contenteditable && !el.hasAttribute("contenteditable")) return;
 					save(el);
 				});
 			}
@@ -430,11 +430,11 @@ async function setData(element, data) {
 						data[type][0] = { ...data[type][0], ...$update };
 					} else if (key === "$data") {
 						value = data;
-					} else if (key.startsWith("$data")) {
+					} else if (key && key.startsWith("$data")) {
 						value = CRUD.getValueFromObject(data, key.slice(1));
 					} else if (key === `$${type}`) {
 						value = data[type];
-					} else if (key.startsWith(`$${type}`)) {
+					} else if (key && key.startsWith(`$${type}`)) {
 						value = CRUD.getValueFromObject(data, key.slice(1));
 					} else if (key === "{}") {
 						value = data[type][0];
@@ -562,11 +562,11 @@ async function filterData(element, data, type, key) {
 		element.setValue(value.length);
 	} else if (key === "$data") {
 		value = data;
-	} else if (key.startsWith("$data")) {
+	} else if (key && key.startsWith("$data")) {
 		value = CRUD.getValueFromObject(data, key.slice(1));
 	} else if (key === `$${type}`) {
 		value = data[type];
-	} else if (key.startsWith(`$${type}`)) {
+	} else if (key && key.startsWith(`$${type}`)) {
 		value = CRUD.getValueFromObject(data, key.slice(1));
 	} else if (key === "{}") {
 		value = data[type][0];