@cocreate/render 1.12.1 → 1.13.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+# [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)
+
+
+### Bug Fixes
+
+* renderKey action does not work with renderMap. added isRenderKey to skip renderMap as temp solution ([7e90de8](https://github.com/CoCreate-app/CoCreate-render/commit/7e90de81b596154d3ab0b36e7326dfb8e67e6684))
+
 ## [1.12.1](https://github.com/CoCreate-app/CoCreate-render/compare/v1.12.0...v1.12.1) (2022-07-31)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/render",
-  "version": "1.12.1",
+  "version": "1.13.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 {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;
@@ -113,6 +114,7 @@ const CoCreateRender = {
 	
 	render: function(template, data) {
 		const self = this;
+		const templateId =  template.getAttribute('templateId')
 		let type = '';
 		let arrayData = data;
 
@@ -131,14 +133,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 +161,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);
+					}
 				});
 			}
 		}
@@ -197,6 +209,10 @@ const CoCreateRender = {
 
 	setValue: function(els, data, renderArray, renderKey){
 		if (!data) return;
+		let isRenderKey
+		if (data.renderKey)
+			isRenderKey = true
+			
 		const that = this;
 		Array.from(els).forEach(el => {
 			let updateData;
@@ -205,16 +221,16 @@ const CoCreateRender = {
 				if (el.hasAttribute('render-clone')) {
 					el.renderData = {...data}
 				}
-				if (el.renderMap) {
+				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)
-						updateData = data[renderArray][0]
+						if (renderArray && Array.isArray(data[renderArray]))
+							updateData = data[renderArray][0]
 						if (renderKey)
-						updateData = {[renderKey]: updateData}
+							updateData = {[renderKey]: updateData}
 						let textContent = placeholder.placeholder
 						let text = that.__replaceValue(updateData, textContent, renderKey, valueType);
 						if (text && text != el.renderedValue)
@@ -225,20 +241,19 @@ const CoCreateRender = {
 				Array.from(el.attributes).forEach(attr=>{
 					let attr_name = attr.name.toLowerCase();
 					let attrValue = attr.value;
-
 					let placeholder
 					if (attr.renderMap)
 						placeholder = attr.renderMap.get(attr)
 					else
 						that.renderMap(attr, attr.value, renderArray, renderKey)
 
-					if(placeholder){
+					if(placeholder && !isRenderKey){
 						let updateData = data;
 						// let oldValue = attrValue 
 						let temp = placeholder.placeholder;
 						renderKey = placeholder.renderKey
 						renderArray = placeholder.renderArray
-						if (renderArray)
+						if (renderArray && Array.isArray(data[renderArray]))
 							updateData = data[renderArray][0]
 						if (renderKey)
 							updateData = {[renderKey]: updateData}
@@ -261,7 +276,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.classList.contains('template')) && !el.hasAttribute('template_id')) {
 					that.render(el, data);
 				}
 				// if (el.hasAttribute('render-array') || el.hasAttribute('render-object')) {
@@ -278,12 +293,12 @@ const CoCreateRender = {
 				let textContent, placeholder, text;
 				if (el.renderMap)
 					placeholder = el.renderMap.get(el)
-					if (placeholder) {
+					if (placeholder && !isRenderKey) {
 						let updateData = data;
 						textContent = placeholder.placeholder
 						renderKey = placeholder.renderKey
 						renderArray = placeholder.renderArray
-						if (renderArray)
+						if (renderArray &&  Array.isArray(data[renderArray]))
 							updateData = data[renderArray][0]
 						if (renderKey)
 							updateData = {[renderKey]: updateData}
@@ -291,7 +306,8 @@ const CoCreateRender = {
 					}
 				if (!placeholder && !text) {
 					textContent = el.textContent;
-					that.renderMap(el, textContent, renderArray, renderKey)
+					if (!el.renderMap)
+						that.renderMap(el, textContent, renderArray, renderKey)
 					text = that.__replaceValue(data, textContent, renderKey, valueType);
 				}
 
@@ -334,6 +350,8 @@ 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')) {
 				this.render(template, data);