@cocreate/render 1.45.1 → 1.45.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/render",
-  "version": "1.45.1",
+  "version": "1.45.3",
   "description": "A simple render component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.",
   "keywords": [
     "render",
@@ -45,23 +45,19 @@
   },
   "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.4",
-    "@cocreate/api": "^1.4.2",
-    "@cocreate/element-prototype": "^1.23.0",
-    "@cocreate/observer": "^1.16.3",
-    "@cocreate/utils": "^1.34.1"
+    "@cocreate/actions": "^1.21.1",
+    "@cocreate/api": "^1.22.3",
+    "@cocreate/element-prototype": "^1.29.1",
+    "@cocreate/observer": "^1.18.1",
+    "@cocreate/utils": "^1.39.0"
   }
 }

package/src/index.js

@@ -35,19 +35,14 @@ import "./index.css";
 
 const sources = new Map();
 const renderedNodes = new Map();
-const elementSelector =
-	"[render-selector], [render-closest], [render-parent], [render-next], [render-previous]";
+const elementSelector = "[render-query]";
 
 /**
  * Initializes elements based on specified rendering attributes. If a specific element is provided, it initializes that element.
  * If no element is provided, it queries and initializes all elements matching the defined selector criteria for rendering attributes.
  *
  * Supported rendering attributes:
- * - render-selector: [Describe what this attribute does]
- * - render-closest: [Describe what this attribute does]
- * - render-parent: [Describe what this attribute does]
- * - render-next: [Describe what this attribute does]
- * - render-previous: [Describe what this attribute does]
+ * - render-query: [Describe what this attribute does]
  *
  * @param {(Element|Element[]|HTMLCollection|null)} [element] - Optional. A single element, an array of elements, an HTMLCollection, or null.
  *     - If an HTMLCollection or an array of elements is provided, each element in the collection/array is initialized.
@@ -100,52 +95,64 @@ async function render({
 	update,
 	remove
 }) {
-	let Data = { ...data };
-	if (!element) {
-		if (source) {
-			element = queryElements({ element: source, prefix: "render" });
-			if (!element && source.children.length > 0) {
-				for (const child of source.children) {
-					if (
-						child.matches(
-							"template, [template], .template, [render]"
-						)
-					) {
-						element = child;
-						break; // Found the desired element, no need to continue the loop
-					}
-				}
-			}
+	if (!data || (!source && !data)) {
+		return;
+	}
 
-			if (!element) {
-				element = source.querySelector(
-					"template, [template], .template, [render]"
+	if (!element) {
+		if (source instanceof HTMLElement) {
+			if (selector || (selector = source.getAttribute("render-query"))) {
+				element = queryElements({
+					element: source,
+					selector
+				});
+			} else if (source.children.length > 0) {
+				element = Array.from(source.children).find((child) =>
+					child.matches("template, [template], .template, [render]")
 				);
+				if (!element) {
+					element = source.querySelector(
+						"template, [template], .template, [render]"
+					);
+				}
 			}
-		} else if (selector) element = queryElements({ selector });
+		} else if (selector) {
+			element = queryElements({
+				selector
+			});
+		}
 
-		if (!element) return;
+		if (!element || (Array.isArray(element) && !element.length)) {
+			return;
+		}
 	}
 
-	if (source) {
-		if (!key) {
-			key = source.getAttribute("render") || source.getAttribute("key");
-			if (!key) {
-				key = data.type;
-				if (key == "key") key = "object";
-				else if (!key && data.method) key = data.method.split(".")[0];
-				else if (!key) return;
-			} else if (key == "{}") key = "object";
+	if (!key) {
+		key =
+			source.getAttribute("render") ||
+			source.getAttribute("key") ||
+			data.type;
+		if (!key || key === "key") {
+			key = "object";
+		} else if (key === "{}" || (!key && data.method)) {
+			key = data.method ? data.method.split(".")[0] : undefined;
 		}
-		let sourceData = sources.get(source);
-		if (!sourceData) {
-			sourceData = { element: source, Data };
-			sources.set(source, sourceData);
+		if (!key) {
+			return;
 		}
+	}
 
-		source = sourceData;
-		if (!source.data) source.data = Data;
-	} else if (data) source = { Data };
+	let sourceData = sources.get(source);
+	if (!sourceData) {
+		sourceData = { element: source, data: { ...data } };
+		sources.set(source, sourceData);
+	} else if (sourceData.data) {
+		sourceData.data = { ...data };
+	} else {
+		// TODO: Most effiecientway to comapre too objects or array of objects
+		if (data === sourceData.data) return;
+		sourceData.data = { ...data };
+	}
 
 	if (data.$filter) {
 		index = index || data.$filter.startingIndex || data.$filter.index;
@@ -157,36 +164,42 @@ async function render({
 		!Array.isArray(element) &&
 		!(element instanceof HTMLCollection) &&
 		!(element instanceof NodeList)
-	)
+	) {
 		element = [element];
+	}
 
 	for (let i = 0; i < element.length; i++) {
-		key = element[i].getAttribute("render") || key;
-
 		let renderedNode = renderedNodes.get(element[i]);
-		if (
-			renderedNode &&
-			renderedNode.clones &&
-			renderedNode.source &&
-			renderedNode.source.element
-		) {
-			let limit =
-				renderedNode.source.element.getAttribute("render-limit");
-			if (limit && renderedNode.clones.size >= parseInt(limit)) continue;
+		if (renderedNode) {
+			if (
+				renderedNode.clones &&
+				renderedNode.source &&
+				renderedNode.source.element
+			) {
+				let limit =
+					renderedNode.source.element.getAttribute("render-limit");
+				if (limit && renderedNode.clones.size >= parseInt(limit))
+					continue;
+			}
+		} else {
+			renderedNode = {
+				element: element[i],
+				source: sourceData,
+				clones: new Map()
+			};
+			renderedNodes.set(element[i], renderedNode);
 		}
 
-		if (source) {
-			if (!renderedNode) {
-				renderedNode = {
-					element: element[i],
-					source,
-					clones: new Map(),
-					renderAs: new Map()
-				};
-				renderedNodes.set(element[i], renderedNode);
-			}
+		let clones = renderedNode.clones; // || renderedNode.template.clones..
+		if (!clones) {
+			clones = renderedNode.template.clones;
+			console.log("renderedNode.template.clones", clones);
 		}
 
+		key = element[i].getAttribute("render") || key;
+		let renderType =
+			renderedNode.source.element.getAttribute("render-type");
+		let clone;
 		if (remove) {
 			for (let j = 0; j < data[key].length; j++) {
 				let cloneKey;
@@ -196,21 +209,23 @@ async function render({
 					cloneKey = data[key][j].name;
 				}
 
-				let clone = renderedNode.clones.get(cloneKey);
+				clone = clones.get(cloneKey);
 				if (!clone) return;
 
-				renderedNode.clones.delete(cloneKey);
+				clones.delete(cloneKey);
 				renderedNodes.delete(clone);
 				clone.remove();
 			}
-		} else if ((key && Array.isArray(data[key])) || Array.isArray(data)) {
+		} else if (
+			(key && (Array.isArray(data[key]) || renderType)) ||
+			Array.isArray(data)
+		) {
 			if (update) {
 				for (let j = 0; j < data[key].length; j++) {
-					let clone;
 					if (key === "object") {
-						clone = renderedNode.clones.get(data[key][j]._id);
+						clone = clones.get(data[key][j]._id);
 					} else {
-						clone = renderedNode.clones.get(data[key][j].name);
+						clone = clones.get(data[key][j].name);
 					}
 
 					if (!currentIndex) currentIndex = data.$filter.currentIndex;
@@ -248,48 +263,36 @@ async function renderTemplate(template, data, key, index, keyPath) {
 	}
 
 	templateData.parent = template.parentElement.closest("[render]");
-	if (templateData.parent)
+	if (templateData.parent) {
 		templateData.parent = renderedNodes.get(templateData.parent);
+	}
 
 	if (!templateData.keyPath) {
-		if (keyPath) templateData.keyPath = keyPath;
-		else if (templateData.parent && templateData.parent.keyPath)
+		if (keyPath) {
+			templateData.keyPath = keyPath;
+		} else if (templateData.parent && templateData.parent.keyPath) {
 			templateData.keyPath = templateData.parent.keyPath;
-		else if (key) templateData.keyPath = key;
+		} else if (key) {
+			templateData.keyPath = key;
+		}
 	}
 
 	template = templateData;
 
 	let renderData;
-	if (key) renderData = getRenderValue(template.element, data, key);
-	else if (Array.isArray(data)) renderData = data;
-
-	if (!renderData && data)
-		if (Array.isArray(data)) renderData = data;
-		else renderData = [data];
-	else if (!renderData) return;
+	if (key) {
+		renderData = getRenderValue(template.element, data, key);
+	} else if (Array.isArray(data)) {
+		renderData = data;
+	}
 
-	let isInsert = data.$filter && (data.$filter.create || data.$filter.update);
-	if ((!isInsert && !index) || data.$filter.overwrite) {
-		if (!template.clones) template = template.template;
-		for (const [key, element] of template.clones) {
-			renderedNodes.delete(element);
-			element.remove();
-			template.clones.delete(key);
+	if (!renderData && data) {
+		if (Array.isArray(data)) {
+			renderData = data;
+		} else {
+			renderData = [data];
 		}
-		// if (renderedNodes.size) {
-		//     for (let [element] of renderedNodes) {
-		//         element.remove()
-		//     }
-		//     renderedNodes.clear();
-		// }
-
-		// template.data = renderData
-	}
-	// else if (index) {
-	// updates data that has already been rendered
-	// template.data = dotNotationToObject(renderData, template.data)
-	// }
+	} else if (!renderData) return;
 
 	let renderAs = template.element.getAttribute("render-as") || key;
 	template.renderAs = renderAs;
@@ -312,18 +315,43 @@ async function renderTemplate(template, data, key, index, keyPath) {
 	}
 	let reference = template.element.getAttribute("render-reference");
 
+	let isInsert = data.$filter && (data.$filter.create || data.$filter.update);
+	if (renderType !== "object") {
+		if ((!isInsert && !index) || data.$filter.overwrite) {
+			if (!template.clones) template = template.template;
+			for (const [key, element] of template.clones) {
+				renderedNodes.delete(element);
+				element.remove();
+				template.clones.delete(key);
+			}
+		} //
+		// else if (index) {
+		// updates data that has already been rendered
+		// template.data = dotNotationToObject(renderData, template.data)
+		// }
+	}
+
 	if ((key && !Array.isArray(renderData)) || renderType === "object") {
 		if (renderType && Array.isArray(renderData) && renderData.length === 1)
 			renderData = renderData[0];
 
 		const keys = Object.keys(renderData);
 		for (let i = 0; i < keys.length; i++) {
-			if (exclude.includes(keys[i])) continue;
+			let clone = template.clones.get(keys[i]);
+			clone = renderedNodes.get(clone);
+
 			if (
-				reference === "false" &&
-				["$storage", "$database", "$array"].includes(key)
-			)
+				exclude.includes(keys[i]) ||
+				(reference === "false" &&
+					["$storage", "$database", "$array"].includes(key))
+			) {
+				if (clone) {
+					renderedNodes.delete(clone.element);
+					clone.element.remove();
+					template.clones.delete(keys[i]);
+				}
 				continue;
+			}
 
 			let value = renderData[keys[i]];
 			let type = "string";
@@ -333,7 +361,16 @@ async function renderTemplate(template, data, key, index, keyPath) {
 
 			let Data = { [renderAs]: { key: keys[i], value, type } };
 
-			let clone = cloneTemplate(template);
+			if (!clone) {
+				clone = cloneTemplate(template);
+			} else {
+				if (clone.renderedValue === value) {
+					continue;
+				}
+			}
+			clone.renderedValue = value;
+			// let clone = cloneTemplate(template);
+
 			let renderedKey = key.split(".");
 			renderedKey = renderedKey[renderedKey.length - 1];
 			//renderedKey needs to remove the parent.renderAs/key
@@ -441,6 +478,7 @@ function cloneTemplate(template) {
 		clone = container.firstChild;
 		container.remove();
 	}
+
 	let renderedNode = { template, element: clone };
 	renderedNodes.set(clone, renderedNode);
 	return renderedNode;
@@ -905,9 +943,9 @@ function getRenderValue(node, data, key, renderAs) {
 						eid,
 						parent = parentNode.parent || parentNode.template;
 					do {
-						if (key.includes("keyPath"))
+						if (key.includes("keyPath")) {
 							value = parentNode.keyPath || parent.keyPath;
-						else if (key.includes("parentKey")) {
+						} else if (key.includes("parentKey")) {
 							value =
 								parentNode.parentKey ||
 								parent.parentKey ||
@@ -916,17 +954,24 @@ function getRenderValue(node, data, key, renderAs) {
 							value = renderAs;
 						} else if (key === "object" || key === "_id")
 							value = ObjectId().toString();
-						else if (key === "uuid") value = uuid.generate(6);
-						else if (parent.source) Data = parent.source.data;
-						else if (parent.parent) parent = parent.parent;
-						else if (parent.template) parent = parent.template;
-						else parent = undefined;
+						else if (key === "uuid") {
+							value = uuid.generate(6);
+						} else if (parent.source) {
+							Data = parent.source.data;
+						} else if (parent.parent) {
+							parent = parent.parent;
+						} else if (parent.template) {
+							parent = parent.template;
+						} else {
+							parent = undefined;
+						}
 
 						if (!Data && parent && parent.eid) eid = parent.eid;
 					} while (!value && parent && !Data);
 
-					if (!value && Data) value = getValueFromObject(Data, key);
-
+					if (!value && Data) {
+						value = getValueFromObject(Data, key);
+					}
 					if (!value && key.includes(".")) {
 						let renderedData = getValueFromObject(
 							Data,
@@ -934,29 +979,34 @@ function getRenderValue(node, data, key, renderAs) {
 						);
 						if (renderedData) {
 							let index;
-							if (!parent.clones.size || parent.clones.size === 1)
+							if (
+								!parent.clones.size ||
+								parent.clones.size === 1
+							) {
 								index = 0;
-							else if (eid)
+							} else if (eid) {
 								index = Array.from(
 									parent.clones.keys()
 								).indexOf(eid);
-							else console.log("eid not found");
+							} else console.log("eid not found");
 
-							if (index >= 0)
+							if (index >= 0) {
 								Data = {
 									[key.split(".")[0]]: renderedData[index]
 								};
-
+							}
 							value = getValueFromObject(Data, key);
 						}
 					}
 				}
 			}
 
-			if (!value && parentTemplate.parentElement)
+			if (!value && parentTemplate.parentElement) {
 				parentTemplate =
 					parentTemplate.parentElement.closest("[render]");
-			else parentTemplate = undefined;
+			} else {
+				parentTemplate = undefined;
+			}
 		} while (!value && parentTemplate);
 	}
 
@@ -977,7 +1027,9 @@ async function renderKey(action) {
 	let form = action.form || document;
 	let params = action.params;
 
-	if (!params) params = "render-key";
+	if (!params) {
+		params = "render-key";
+	}
 
 	let data = {};
 	let selector = `[${params}]`;
@@ -989,7 +1041,7 @@ async function renderKey(action) {
 	data = dotNotationToObject(data);
 	let renderData = { data: { [params]: data } };
 
-	let renderSelector = element.getAttribute("render-selector");
+	let renderSelector = element.getAttribute("render-query");
 	if (!renderSelector) return;
 
 	renderData.selector = renderSelector;
@@ -1054,13 +1106,7 @@ Observer.init({
 Observer.init({
 	name: "fileRender",
 	types: ["attributes"],
-	attributeFilter: [
-		"render-selector",
-		"render-closest",
-		"render-parent",
-		"render-next",
-		"render-previous"
-	],
+	attributeFilter: ["render-query"],
 	callback: async function (mutation) {
 		render({
 			element: mutation.target,
@@ -1080,8 +1126,12 @@ Observer.init({
 		return;
 		let renderedNode = renderedNodes.get(parentElement);
 		let data;
-		if (renderedNode.source) data = renderedNode.source.data;
-		if (renderedNode.template) data = renderedNode.template.source.data;
+		if (renderedNode.source) {
+			data = renderedNode.source.data;
+		}
+		if (renderedNode.template) {
+			data = renderedNode.template.source.data;
+		}
 
 		render({ element: mutation.target, data });
 	}