@cocreate/render 1.19.2 → 1.20.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# [1.20.0](https://github.com/CoCreate-app/CoCreate-render/compare/v1.19.2...v1.20.0) (2023-01-09)
+
+
+### Bug Fixes
+
+* bump dependnecies ([0c049d8](https://github.com/CoCreate-app/CoCreate-render/commit/0c049d806a515842f2cf0928073f1cae14868ea2))
+* replaceValue send el for possible retrieval of data from parent templates ([902391a](https://github.com/CoCreate-app/CoCreate-render/commit/902391a0efa8b9491c2f13326eb93799516d803d))
+
+
+### Features
+
+* if key and value could not be found check in parent template ([b275832](https://github.com/CoCreate-app/CoCreate-render/commit/b27583278c5ee5ddda2697fa68deaded5f53374d))
+
 ## [1.19.2](https://github.com/CoCreate-app/CoCreate-render/compare/v1.19.1...v1.19.2) (2023-01-06)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/render",
-  "version": "1.19.2",
+  "version": "1.20.0",
   "description": "A simple render component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.",
   "keywords": [
     "render",
@@ -60,11 +60,11 @@
     "webpack-log": "^3.0.1"
   },
   "dependencies": {
-    "@cocreate/actions": "^1.5.50",
-    "@cocreate/api": "^1.6.1",
-    "@cocreate/docs": "^1.5.4",
-    "@cocreate/element-prototype": "^1.2.25",
-    "@cocreate/observer": "^1.5.54",
-    "@cocreate/utils": "^1.17.16"
+    "@cocreate/actions": "^1.5.51",
+    "@cocreate/api": "^1.6.2",
+    "@cocreate/docs": "^1.5.5",
+    "@cocreate/element-prototype": "^1.2.27",
+    "@cocreate/observer": "^1.5.55",
+    "@cocreate/utils": "^1.17.18"
   }
 }

package/src/index.js

@@ -9,10 +9,31 @@ import './index.css';
 
 const CoCreateRender = {
 	
-	__getValue: function(data, attrValue) {
+	__getValue: function(data, attrValue, el) {
 		let result = /{{\s*([\w\W]+)\s*}}/g.exec(attrValue);
 		if (result) {
-			return getValueFromObject(data, result[1].trim());
+			let value = getValueFromObject(data, result[1].trim());
+			if (!value) {
+				let parentTemplate
+				if (el && el.nodeType == 1) {
+					if (el.hasAttribute('templateid') && el.parentElement)
+						parentTemplate = el.parentElement.closest('[templateid]')
+					else
+						parentTemplate = el.closest('[templateid]')
+				}
+
+				if (parentTemplate) {
+					do {
+						if (parentTemplate.renderData)
+							value = getValueFromObject(parentTemplate.renderData, result[1].trim());
+						if (!value && parentTemplate.parentElement)
+							parentTemplate = parentTemplate.parentElement.closest('[templateid]')
+						else
+							parentTemplate = ""
+					} while (!value && parentTemplate)
+				}
+			}
+			return value;
 		}
 		return false;
 	},
@@ -35,39 +56,24 @@ const CoCreateRender = {
 		}
 	},
 	
-	__replaceValue: function(data, inputValue, renderKey, valueType) {
-		let isPass = false;
-		let self = this;
-		let resultValue = null;
-		let variables = inputValue.match(/{{([A-Za-z0-9_.,\[\]\- ]*)}}/g);
-		if (variables) {
-			variables.forEach((attr) => {
-				let value;
-
-				// if (attr == "{{data._id}}" || attr == `{{${renderKey}._id}}` ||  attr == "{{document_id}}" ||  attr == "{{document._id}}")
-				// 	value = this.document_id;
-				// else if (attr == "{{collection}" || attr == `{{${renderKey}.collection}}`)
-				// 	value = this.collection;
-				// else 
-					value = self.__getValue(data, attr);
+	__replaceValue: function(data, inputValue, renderKey, el) {
+		let outputValue = null;
+		let placeholders = inputValue.match(/{{([A-Za-z0-9_.,\[\]\- ]*)}}/g);
+		if (placeholders) {
+			for (let placeholder of placeholders) {
+				let value = this.__getValue(data, placeholder, el);
 				
 				if (value) {
-					if (typeof(value) == "object") {
+					if (typeof(value) == "object") 
 						value = this.generateString(value)	
-					}	
-					isPass = true;
-					inputValue = inputValue.replace(attr, value);
-				}
-				if (!isPass && renderKey && attr.includes(`{{${renderKey}.`)) {
-					resultValue = '';
+
+					outputValue = inputValue.replace(placeholder, value);
+				} else if (renderKey && placeholder.includes(`{{${renderKey}.`)) {
+					outputValue = '';
 				}
-			});
-			
-			if (isPass) {
-				resultValue = inputValue;
 			}
 		}
-		return resultValue;
+		return outputValue;
 	},
 
 	generateString: function(value, str = ''){
@@ -212,7 +218,6 @@ const CoCreateRender = {
 	document_id: '',
 	setValue: function(els, data, renderArray, renderKey){
 		if (!data) return;
-
 		let isRenderKey
 		if (data.renderKey)
 			isRenderKey = true
@@ -223,22 +228,33 @@ const CoCreateRender = {
 
 			if (el.nodeType == 1) {
 				if (el.hasAttribute('render-clone')) {
-					el.renderData = {...data}
+					if (!el.renderData)
+						el.renderData = {...data}
+					else if (Object.keys(el.renderData)[0] == Object.keys(data)[0]) {
+						el.renderData = {...data}
+					}
+
 				}
+
 				if (el.renderMap && !isRenderKey) {
 					let placeholder = el.renderMap.get(el)
 					if (placeholder){
-						let valueType = el.getAttribute('value-type')
 						renderKey = placeholder.renderKey
 						renderArray = placeholder.renderArray
 						if (renderArray && Array.isArray(data[renderArray]))
 							updateData = data[renderArray][0]
-						else
+						else if (data[renderArray])
 							updateData = data[renderArray]
-						if (renderKey)
-							updateData = {[renderKey]: updateData}
+
+						if (renderKey) {
+							if (updateData)
+								updateData = {[renderKey]: updateData}
+							else
+								updateData = {[renderKey]: data}
+						}
+
 						let textContent = placeholder.placeholder
-						let text = that.__replaceValue(updateData, textContent, renderKey, valueType);
+						let text = that.__replaceValue(updateData, textContent, renderKey, el);
 						if (text && text != el.renderedValue)
 							el.innerHTML = placeholder.placeholder
 					}
@@ -254,27 +270,31 @@ const CoCreateRender = {
 						that.renderMap(attr, attr.value, renderArray, renderKey)
 
 					if (placeholder && !isRenderKey){
-						let updateData = data;
-						// let oldValue = attrValue 
 						let temp = placeholder.placeholder;
-						renderKey = placeholder.renderKey
-						renderArray = placeholder.renderArray
-						if (renderArray && Array.isArray(data[renderArray]))
-							updateData = data[renderArray][0]
-						else
-							updateData = data[renderArray]
-						if (renderKey && updateData)
-							updateData = {[renderKey]: updateData}
-	
-						attrValue = that.__replaceValue(updateData, temp, renderKey);
+						// let updateData
+						// renderKey = placeholder.renderKey
+						// renderArray = placeholder.renderArray
+						// if (renderArray && Array.isArray(data[renderArray]))
+						// 	updateData = data[renderArray][0]
+						// else if (data[renderArray])
+						// 	updateData = data[renderArray]
+						
+						// if (renderKey) {
+						// 	if (updateData)
+						// 		updateData = {[renderKey]: updateData}
+						// 	else
+						// 		updateData = {[renderKey]: data}
+						// }
+		
+						attrValue = that.__replaceValue(updateData, temp, renderKey, el);
 						if (attrValue == attr.value)
 							attrValue = undefined
 					}
 					else
-						attrValue = that.__replaceValue(data, attrValue, renderKey);
+						attrValue = that.__replaceValue(data, attrValue, renderKey, el);
 					
 					// ToDo: support attibute name replace if has {{}}
-					// attr_name = that.__replaceValue(data, attr_name, renderKey);
+					// attr_name = that.__replaceValue(data, attr_name, renderKey, el);
 
 					if (attrValue || attrValue == "") {
 						el.setAttribute(attr_name, attrValue);
@@ -285,7 +305,8 @@ const CoCreateRender = {
 					that.setValue(el.childNodes, updateData || data, renderArray, renderKey);
 				}
 				if ((el.tagName == 'TEMPLATE' || el.hasAttribute('template') || el.classList.contains('template')) && !el.hasAttribute('template_id')) {
-					that.render(el, data);
+					if (el.getAttribute('render-object') || el.getAttribute('render-array'))
+						that.render(el, data);
 				}
 
 			}
@@ -307,13 +328,13 @@ const CoCreateRender = {
 							updateData = data[renderArray]
 						if (renderKey)
 							updateData = {[renderKey]: updateData}
-						text = that.__replaceValue(updateData, textContent, renderKey, valueType);
+						text = that.__replaceValue(updateData, textContent, renderKey, el);
 					}
 				if (!placeholder && !text) {
 					textContent = el.textContent;
 					if (!el.renderMap)
 						that.renderMap(el, textContent, renderArray, renderKey)
-					text = that.__replaceValue(data, textContent, renderKey, valueType);
+					text = that.__replaceValue(data, textContent, renderKey, el);
 				}
 
 				if (text || text == "") {