@cocreate/render 1.12.2 → 1.14.0

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+# [1.14.0](https://github.com/CoCreate-app/CoCreate-render/compare/v1.13.0...v1.14.0) (2022-08-31)
+
+
+### Bug Fixes
+
+* document_id was not inserting on some of the nested elements ([0ef42c7](https://github.com/CoCreate-app/CoCreate-render/commit/0ef42c73100f1af539c82c8cd0968c34c88655e6))
+
+
+### Features
+
+* render collection and document_id with and without a renderKey ([1f80cf3](https://github.com/CoCreate-app/CoCreate-render/commit/1f80cf3f224f9b894a9107bd009993f9673879c0))
+
+# [1.13.0](https://github.com/CoCreate-app/CoCreate-render/compare/v1.12.3...v1.13.0) (2022-08-23)
+
+
+### Features
+
+* add a map containing rendered keys to templates, if key not rendered clone template and render key ([0fd8cfd](https://github.com/CoCreate-app/CoCreate-render/commit/0fd8cfd3695280e19b6e518fd45d873d1637ed6e))
+
+## [1.12.3](https://github.com/CoCreate-app/CoCreate-render/compare/v1.12.2...v1.12.3) (2022-08-19)
+
+
+### Bug Fixes
+
+* add css file for class template display none ([4cfa7ee](https://github.com/CoCreate-app/CoCreate-render/commit/4cfa7ee8a6a1d4105f9144ce713a3435db4090f6))
+
 ## [1.12.2](https://github.com/CoCreate-app/CoCreate-render/compare/v1.12.1...v1.12.2) (2022-08-01)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/render",
-  "version": "1.12.2",
+  "version": "1.14.0",
   "description": "A simple render component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.",
   "keywords": [
     "render",

package/src/index.css

@@ -0,0 +1 @@
+.template, [template] {display: none !important;}

package/src/index.js

@@ -3,12 +3,13 @@ import action from '@cocreate/actions';
 import observer from '@cocreate/observer';
 import uuid from '@cocreate/uuid';
 import { queryDocumentSelector } from '@cocreate/utils';
+import './index.css';
 // import { getValue } from '../../CoCreate-elements/src/getValue';
 // import api from '@cocreate/api';
 
 const CoCreateRender = {
 	// Can be called from crud getObjectValueByPath
-	__getValueFromObject : function(json, path) {
+	__getValueFromObject: function(json, path) {
 		try {
 			if(typeof json == 'undefined' || !path)
 				return false;
@@ -40,7 +41,6 @@ const CoCreateRender = {
 			return this.__getValueFromObject(data, result[1].trim());
 		}
 		return false;
-		
 	},
 	
 	__createObject: function (data, path) {
@@ -68,11 +68,15 @@ const CoCreateRender = {
 		let variables = inputValue.match(/{{([A-Za-z0-9_.,\[\]\- ]*)}}/g);
 		if (variables) {
 			variables.forEach((attr) => {
-				if (attr.includes(`collection`))
-					if( this.dataOriginal[renderKey] && this.dataOriginal[renderKey]['collection'] && attr.includes(`{{${renderKey}.`))
-						data[renderKey]['collection'] = this.dataOriginal[renderKey]['collection']
-
-				let value = self.__getValue(data, attr);
+				let value;
+
+				if (attr == "{{data._id}}" || attr == `{{${renderKey}._id}}` ||  attr == "{{document_id}}")
+					value = this.document_id;
+				else if (attr == "{{collection}" || attr == `{{${renderKey}.collection}}`)
+					value = this.collection;
+				else 
+					value = self.__getValue(data, attr);
+				
 				if (value) {
 					if (typeof(value) == "object") {
 						value = this.generateString(value)	
@@ -113,6 +117,7 @@ const CoCreateRender = {
 	
 	render: function(template, data) {
 		const self = this;
+		const templateId =  template.getAttribute('templateId')
 		let type = '';
 		let arrayData = data;
 
@@ -131,14 +136,20 @@ const CoCreateRender = {
 		}
 
 		let renderKey = template.getAttribute('render-key') || type;
-
+		
+		if (!template.renderedKeys)
+			template.renderedKeys = new Map()
+		
 		if (isRenderObject && type) {
 			let Data = self.__getValueFromObject(arrayData, type);
 			let array = self.isRenderObject(Data, renderKey)
 			for (let item of array) {
-				let cloneEl = this.cloneEl(template);
-				self.setValue([cloneEl], item, renderArray, renderKey);
-				template.insertAdjacentElement('beforebegin', cloneEl);
+				if (!template.renderedKeys.has(item[renderKey].key)){
+					template.renderedKeys.set(item[renderKey].key, '')
+					let cloneEl = this.cloneEl(template);
+					self.setValue([cloneEl], item, renderArray, renderKey);
+					template.insertAdjacentElement('beforebegin', cloneEl);
+				}
 			}
 		} else {
 
@@ -153,10 +164,14 @@ const CoCreateRender = {
 
 			if(type && Array.isArray(arrayData)) {
 				arrayData.forEach((item) => {
-					let cloneEl = this.cloneEl(template);
-					let object = self.__createObject(item, renderKey);
-					self.setValue([cloneEl], object, renderArray, renderKey);
-					template.insertAdjacentElement('beforebegin', cloneEl);
+					if (!template.renderedKeys.has(item)){
+						template.renderedKeys.set(item, '')
+	
+						let cloneEl = this.cloneEl(template);
+						let object = self.__createObject(item, renderKey);
+						self.setValue([cloneEl], object, renderArray, renderKey);
+						template.insertAdjacentElement('beforebegin', cloneEl);
+					}
 				});
 			}
 		}
@@ -182,12 +197,24 @@ const CoCreateRender = {
 		let cloneEl = template.cloneNode(true);
 
 		let templateId = cloneEl.getAttribute('template_id');
-		if (templateId)
-			cloneEl.setAttribute('templateId', templateId);
-
-		cloneEl.removeAttribute('template_id');
+	 	if (templateId) {
+		 	cloneEl.setAttribute('templateId', templateId);
+			cloneEl.removeAttribute('template_id');
+		}
+		
+		if(cloneEl.tagName == 'TEMPLATE'){
+			cloneEl = template.content.firstElementChild
+			for (let attribute of template.attributes){
+				let attrName = attribute.name;
+				let attrValue = attribute.value || '';
+				cloneEl.setAttribute(attrName, attrValue);
+			}
+		}
+		else {
+			cloneEl.classList.remove('template');
+			cloneEl.removeAttribute('template');
+		}
 		cloneEl.setAttribute('render-clone', '');	
-		cloneEl.classList.remove('template');
 
 		if (template.dataOriginal)
 			cloneEl.dataOriginal = template.dataOriginal
@@ -195,11 +222,19 @@ const CoCreateRender = {
 		return cloneEl;
 	},
 
+	document_id: '',
 	setValue: function(els, data, renderArray, renderKey){
 		if (!data) return;
+		
 		let isRenderKey
 		if (data.renderKey)
 			isRenderKey = true
+
+		if (data.data && data.data._id )
+			this.document_id =  data.data._id;
+			
+		if (data.collection)
+			this.collection = data.collection;
 			
 		const that = this;
 		Array.from(els).forEach(el => {
@@ -264,7 +299,7 @@ const CoCreateRender = {
 				if(el.childNodes.length > 0) {		
 					that.setValue(el.childNodes, updateData || data, renderArray, renderKey);
 				}
-				if (el.classList.contains('template') && !el.hasAttribute('template_id')) {
+				if ((el.tagName == 'TEMPLATE' || el.hasAttribute('template') || el.classList.contains('template')) && !el.hasAttribute('template_id')) {
 					that.render(el, data);
 				}
 				// if (el.hasAttribute('render-array') || el.hasAttribute('render-object')) {
@@ -338,8 +373,10 @@ const CoCreateRender = {
 		if (selector) {
 			let template = queryDocumentSelector(selector);
 			if (!template) return;
+			// if (template.tagNmae === 'TEMPLATE')
+			// 	template = template.childNodes;
 			template.dataOriginal = {...data}
-			if (template.classList.contains('template')) {
+			if (template.tagName == 'TEMPLATE' || template.hasAttribute('template') || template.classList.contains('template')) {
 				this.render(template, data);
 			}
 			else
@@ -348,7 +385,7 @@ const CoCreateRender = {
 			for (let element of elements)
 				element.dataOriginal = {...this.dataOriginal};
 
-			if (elements.length == 1 && elements[0].classList.contains('template')){
+			if (elements.length == 1 && (elements[0].tagName == 'TEMPLATE' || elements[0].hasAttribute('template') || elements[0].classList.contains('template'))){
 				this.render(elements[0], data);
 			}
 			else
@@ -447,6 +484,9 @@ observer.init({
 			for (let data of array.reverse()){
 				obj = {...obj, ...data}
 			}
+			
+			// if (!obj['document_id'] && obj.data._id)
+			// 	obj['document_id'] = obj.data._id
 
 			CoCreateRender.data({
 				elements: [element],