@cocreate/render 1.11.0 → 1.12.2

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+## [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)
+
+
+### Bug Fixes
+
+* moved the of loop that adds dataOriginal to inside if elements ([a1db516](https://github.com/CoCreate-app/CoCreate-render/commit/a1db516d6c4739581ab59db5ab5e746e8f409985))
+
+# [1.12.0](https://github.com/CoCreate-app/CoCreate-render/compare/v1.11.0...v1.12.0) (2022-07-29)
+
+
+### Bug Fixes
+
+* replace attribute value if new and old value are not equal ([3dc25d8](https://github.com/CoCreate-app/CoCreate-render/commit/3dc25d884510a6ad14455b232d9068eb5e1302a8))
+
+
+### Features
+
+* if oldValues same as new value will not update text, html or attributes ([9cfe3f0](https://github.com/CoCreate-app/CoCreate-render/commit/9cfe3f017e706a5a7211449c294158d60fa2098c))
+
 # [1.11.0](https://github.com/CoCreate-app/CoCreate-render/compare/v1.10.0...v1.11.0) (2022-07-25)
 
 

package/demo/render.array.html

@@ -19,7 +19,7 @@
                 </cc-options>
 
             <div class="template" template_id="abc1">
-                <div class="template" render-array="data.current" render-key="current_org"  value="{{current_org.name}}">
+                <div class="template" render-array="data[0].current" render-key="current_org"  value="{{current_org.name}}">
                     <h3>{{current_org.name}}</h3>
                 </div>
             </div>

package/demo/render.object.html

@@ -16,7 +16,7 @@
             <div class="template" render-object="" render-key="one">
                 <h5>{{one.key}}: {{one.value}}</h5>
             </div>
-            <div class="template" render-array="data.current_org" render-key="current_org" value="{{current_org}}">
+            <div class="template" render-array="data[0].current_org" render-key="current_org" value="{{current_org}}">
                 <h3>{{current_org}}</h3>
             </div>
         </div>

package/package.json

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

package/src/index.js

@@ -197,6 +197,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,18 +209,19 @@ 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)
+						if (text && text != el.renderedValue)
 							el.innerHTML = placeholder.placeholder
 					}
 				}
@@ -224,24 +229,26 @@ 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;
-						attrValue = placeholder.placeholder;
+						// 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}
 	
-						attrValue = that.__replaceValue(updateData, attrValue, renderKey);
+						attrValue = that.__replaceValue(updateData, temp, renderKey);
+						if (attrValue == attr.value)
+							attrValue = undefined
 					}
 					else
 						attrValue = that.__replaceValue(data, attrValue, renderKey);
@@ -259,7 +266,13 @@ const CoCreateRender = {
 				}
 				if (el.classList.contains('template') && !el.hasAttribute('template_id')) {
 					that.render(el, data);
-				} 
+				}
+				// if (el.hasAttribute('render-array') || el.hasAttribute('render-object')) {
+				// 	if (!el.dataOriginal) {
+				// 		that.render(el, data);
+				// 	}
+				// }
+
 			}
 
 			if (el.nodeType == 3) {
@@ -268,35 +281,41 @@ 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}
 						text = that.__replaceValue(updateData, textContent, renderKey, valueType);
 					}
-				if (!text) {
+				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);
 				}
 
 				if (text || text == "") {
-					if (valueType == 'text' || valueType == 'string'){
-						el.textContent = text;
-					} else {
-						const newNode = document.createElement('div');
-						newNode.innerHTML = text;
-						let parentElement = el.parentElement
-						if (!parentElement.renderMap) {
-							that.renderMap(parentElement, textContent, renderArray, renderKey)
-						} else if (!parentElement['renderMap'].has(parentElement))
-							that.renderMap(parentElement, textContent, renderArray, renderKey)
-						el.replaceWith(...newNode.childNodes)
+					if (text != el.renderedValue) {
+						el.renderedValue = text
+						if (valueType == 'text' || valueType == 'string'){
+							el.renderedValue = text
+							el.textContent = text;
+						} else {
+							const newNode = document.createElement('div');
+							newNode.innerHTML = text;
+							let parentElement = el.parentElement
+							parentElement.renderedValue = text
+							if (!parentElement.renderMap) {
+								that.renderMap(parentElement, textContent, renderArray, renderKey)
+							} else if (!parentElement['renderMap'].has(parentElement))
+								that.renderMap(parentElement, textContent, renderArray, renderKey)
+							el.replaceWith(...newNode.childNodes)
+						}
 					}
 				}
 			}
@@ -314,12 +333,8 @@ const CoCreateRender = {
 	dataOriginal: {},
 	data: function({selector, data, elements}) {
 		this.dataOriginal = {...data};
-		this.dataString = {...data};
 		delete this.dataOriginal.data
 
-		for (let element of elements)
-			element.dataOriginal = {...this.dataOriginal};
-
 		if (selector) {
 			let template = queryDocumentSelector(selector);
 			if (!template) return;
@@ -330,6 +345,9 @@ const CoCreateRender = {
 			else
 				this.setValue([template], data);
 		} else if (elements) {
+			for (let element of elements)
+				element.dataOriginal = {...this.dataOriginal};
+
 			if (elements.length == 1 && elements[0].classList.contains('template')){
 				this.render(elements[0], data);
 			}