@cocreate/render 1.9.2 → 1.12.0

package/CHANGELOG.md

@@ -1,3 +1,35 @@
+# [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)
+
+
+### Bug Fixes
+
+* if templateId setAttribute ([41e30b3](https://github.com/CoCreate-app/CoCreate-render/commit/41e30b3a748aa8900d9f9397584f14052d637197))
+
+
+### Features
+
+* getValueFromObject supports deeply nested array and objects ([db7fefd](https://github.com/CoCreate-app/CoCreate-render/commit/db7fefd81a908ba6f68dbf4c43d62639aa73e3f8))
+* observe new elements with atrribute render, if elements detected replace placholders with values ([90d7d98](https://github.com/CoCreate-app/CoCreate-render/commit/90d7d982eedf83b194cfae0704d06e110914ca52))
+
+# [1.10.0](https://github.com/CoCreate-app/CoCreate-render/compare/v1.9.2...v1.10.0) (2022-07-14)
+
+
+### Features
+
+* renderMap function to apply map containing placeholder to node object in order to render new values ([7afffa0](https://github.com/CoCreate-app/CoCreate-render/commit/7afffa07b2cc1dd562e96d1ee558433d3f6d043a))
+
 ## [1.9.2](https://github.com/CoCreate-app/CoCreate-render/compare/v1.9.1...v1.9.2) (2022-07-10)
 
 

package/demo/render.html

@@ -0,0 +1,42 @@
+<html>
+    <head>
+        <title>Render | CoCreateJS</title>
+        
+        <!-- CoCreate Favicon -->
+        <link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16">
+    </head>
+    <style>
+        .template{display:none}
+    </style>
+    <body>
+        
+        <body>
+
+            <div class="template" template_id="abc1">
+                <h3>{{collection}}</h3>
+                <h3>{{data._id}}</h3>
+            </div>
+     
+             <pre>
+                 <h1>Paste in your browser console</h1>
+            
+            /** Example **/
+            CoCreate.render.data({
+                selector: '[template_id=abc1]',
+                data: {
+                    collection: 'dededede',
+                    data: {
+                         _id : '123kijfhgfkel45',
+                         current_org: ['test1', 'test2', 'test31', 'test3'],
+                         current: [{name: 'test1w'}, {name: 'test2'}, {name: 'test31'}, {name: 'test3'}]
+                     }
+                }
+                
+            })
+                
+             </pre>
+            
+            <!-- CoCreate JS CDN -->
+            <script src="../../../CoCreateJS/dist/CoCreate.js" ></script>
+        </body>
+    </html>

package/package.json

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

package/src/index.js

@@ -1,17 +1,26 @@
 /*globals CustomEvent*/
 import action from '@cocreate/actions';
+import observer from '@cocreate/observer';
+import uuid from '@cocreate/uuid';
 import { queryDocumentSelector } from '@cocreate/utils';
 // import { getValue } from '../../CoCreate-elements/src/getValue';
 // import api from '@cocreate/api';
 
 const CoCreateRender = {
-
+	// Can be called from crud getObjectValueByPath
 	__getValueFromObject : function(json, path) {
 		try {
 			if(typeof json == 'undefined' || !path)
 				return false;
 			if (path.indexOf('.') == -1 && path.includes('collection'))
 				json = this.dataOriginal
+			if (/\[([0-9]*)\]/g.test(path)) {
+				path = path.replace(/\[/g, '.');
+				if (path.endsWith(']'))
+					path = path.slice(0, -1)
+				path = path.replace(/\]./g, '.');
+				path = path.replace(/\]/g, '.');
+			}
 			let jsonData = json, subpath = path.split('.');
 			
 			for (let i = 0; i < subpath.length; i++) {
@@ -52,7 +61,7 @@ const CoCreateRender = {
 		}
 	},
 	
-	__replaceValue: function(data, inputValue, renderKey) {
+	__replaceValue: function(data, inputValue, renderKey, valueType) {
 		let isPass = false;
 		let self = this;
 		let resultValue = null;
@@ -103,32 +112,33 @@ const CoCreateRender = {
 	},
 	
 	render: function(template, data) {
-		let type = template.getAttribute('render-array') || "data";
-		const renderKey = template.getAttribute('render-key') || type;
 		const self = this;
-
+		let type = '';
 		let arrayData = data;
 
 		const isRenderObject = template.hasAttribute('render-object');
 		if (isRenderObject){
-			const renderObject = template.getAttribute('render-object');			
-			type = renderObject || 'data'
+			const renderObject = template.getAttribute('render-object');
+			type = renderObject || ''
 		}
 
 		const isRenderArray = template.hasAttribute('render-array');
 		if (isRenderArray){
-			const renderArray = template.getAttribute('render-array');
+			var renderArray = template.getAttribute('render-array');
 			if (renderArray)
 				arrayData = data[renderArray];
-			type = renderArray || 'data';
+			type = renderArray || '';
 		}
+
+		let renderKey = template.getAttribute('render-key') || type;
+
 		if (isRenderObject && type) {
-			let r_data = self.isRenderObject(arrayData[type], renderKey)
-			for (let sdata of r_data) {
+			let Data = self.__getValueFromObject(arrayData, type);
+			let array = self.isRenderObject(Data, renderKey)
+			for (let item of array) {
 				let cloneEl = this.cloneEl(template);
-				cloneEl.classList.add('clone_' + type);	
-				self.setValue([cloneEl], sdata, renderKey);
-				template.insertAdjacentHTML('beforebegin', cloneEl.outerHTML);
+				self.setValue([cloneEl], item, renderArray, renderKey);
+				template.insertAdjacentElement('beforebegin', cloneEl);
 			}
 		} else {
 
@@ -137,18 +147,16 @@ const CoCreateRender = {
 
 			if (!arrayData) {
 				let cloneEl = this.cloneEl(template);
-				cloneEl.classList.add('cloned');
-				self.setValue([cloneEl], data, renderKey);
-				template.insertAdjacentHTML('beforebegin', cloneEl.outerHTML);
+				self.setValue([cloneEl], data, renderArray, renderKey);
+				template.insertAdjacentElement('beforebegin', cloneEl);
 			}
 
 			if(type && Array.isArray(arrayData)) {
 				arrayData.forEach((item) => {
 					let cloneEl = this.cloneEl(template);
-					cloneEl.classList.add('clone_' + type);
-					let r_data = self.__createObject(item, renderKey);
-					self.setValue([cloneEl], r_data, renderKey);
-					template.insertAdjacentHTML('beforebegin', cloneEl.outerHTML);
+					let object = self.__createObject(item, renderKey);
+					self.setValue([cloneEl], object, renderArray, renderKey);
+					template.insertAdjacentElement('beforebegin', cloneEl);
 				});
 			}
 		}
@@ -156,6 +164,8 @@ const CoCreateRender = {
 	
 	isRenderObject: function(data, renderKey) {	
 		let array = []
+		if (!data) 
+			return array
 		for (const [key, value] of Object.entries(data)) {
 			let type = 'string';
 			if (typeof(value) == "object")
@@ -170,68 +180,167 @@ const CoCreateRender = {
 
 	cloneEl: function(template) {
 		let cloneEl = template.cloneNode(true);
-		cloneEl.classList.remove('template');
+
 		let templateId = cloneEl.getAttribute('template_id');
+		if (templateId)
+			cloneEl.setAttribute('templateId', templateId);
+
 		cloneEl.removeAttribute('template_id');
-		cloneEl.setAttribute('templateId', templateId);
+		cloneEl.setAttribute('render-clone', '');	
+		cloneEl.classList.remove('template');
+
+		if (template.dataOriginal)
+			cloneEl.dataOriginal = template.dataOriginal
+
 		return cloneEl;
 	},
 
-	setValue: function(els, data, renderKey){
+	setValue: function(els, data, renderArray, renderKey){
 		if (!data) return;
 		const that = this;
 		Array.from(els).forEach(el => {
+			let updateData;
+
 			if (el.nodeType == 1) {
+				if (el.hasAttribute('render-clone')) {
+					el.renderData = {...data}
+				}
+				if (el.renderMap) {
+					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 (renderKey)
+						updateData = {[renderKey]: updateData}
+						let textContent = placeholder.placeholder
+						let text = that.__replaceValue(updateData, textContent, renderKey, valueType);
+						if (text && text != el.renderedValue)
+							el.innerHTML = placeholder.placeholder
+					}
+				}
+
 				Array.from(el.attributes).forEach(attr=>{
 					let attr_name = attr.name.toLowerCase();
 					let attrValue = attr.value;
-					attrValue = that.__replaceValue(data, attrValue, renderKey);
+
+					let placeholder
+					if (attr.renderMap)
+						placeholder = attr.renderMap.get(attr)
+					else
+						that.renderMap(attr, attr.value, renderArray, renderKey)
+
+					if(placeholder){
+						let updateData = data;
+						// let oldValue = attrValue 
+						let temp = placeholder.placeholder;
+						renderKey = placeholder.renderKey
+						renderArray = placeholder.renderArray
+						if (renderArray)
+							updateData = data[renderArray][0]
+						if (renderKey)
+							updateData = {[renderKey]: updateData}
+	
+						attrValue = that.__replaceValue(updateData, temp, renderKey);
+						if (attrValue == attr.value)
+							attrValue = undefined
+					}
+					else
+						attrValue = that.__replaceValue(data, attrValue, renderKey);
 					
+					// ToDo support attibute name replace if has {{}}
+					// attr_name = that.__replaceValue(data, attr_name, renderKey);
+
 					if (attrValue || attrValue == "") {
 						el.setAttribute(attr_name, attrValue);
 					}
 				});
 
-				if(el.childNodes.length > 0) {
-					that.setValue(el.childNodes, data, renderKey);
+				if(el.childNodes.length > 0) {		
+					that.setValue(el.childNodes, updateData || data, renderArray, renderKey);
 				}
 				if (el.classList.contains('template') && !el.hasAttribute('template_id')) {
 					that.render(el, data);
 				} 
 			}
-			
+
 			if (el.nodeType == 3) {
 				let valueType = el.parentElement.getAttribute('value-type')
-				let textContent = el.textContent;
-				let text = that.__replaceValue(data, textContent, renderKey);
+				
+				let textContent, placeholder, text;
+				if (el.renderMap)
+					placeholder = el.renderMap.get(el)
+					if (placeholder) {
+						let updateData = data;
+						textContent = placeholder.placeholder
+						renderKey = placeholder.renderKey
+						renderArray = placeholder.renderArray
+						if (renderArray)
+							updateData = data[renderArray][0]
+						if (renderKey)
+							updateData = {[renderKey]: updateData}
+						text = that.__replaceValue(updateData, textContent, renderKey, valueType);
+					}
+				if (!placeholder && !text) {
+					textContent = el.textContent;
+					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;
-						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)
+						}
 					}
 				}
 			}
-
 		});
 	},
+
+	renderMap: function(node, placeholder, renderArray, renderKey) {
+		if (!node.renderMap) {
+			node['renderMap'] = new Map();
+		}
+		if (placeholder && renderKey)
+			node['renderMap'].set(node, {placeholder, renderArray, renderKey})
+	},
 	
 	dataOriginal: {},
 	data: function({selector, data, elements}) {
-		this.dataOriginal = data;
+		this.dataOriginal = {...data};
+		delete this.dataOriginal.data
+
+		for (let element of elements)
+			element.dataOriginal = {...this.dataOriginal};
+
 		if (selector) {
 			let template = queryDocumentSelector(selector);
 			if (!template) return;
+			template.dataOriginal = {...data}
 			if (template.classList.contains('template')) {
 				this.render(template, data);
 			}
 			else
 				this.setValue([template], data);
 		} else if (elements) {
-			if (elements.length == 1 && elements[0].classList.contains('template'))
+			if (elements.length == 1 && elements[0].classList.contains('template')){
 				this.render(elements[0], data);
+			}
 			else
 				this.setValue(elements, data);
 		}
@@ -262,4 +371,79 @@ action.init({
 	}
 });
 
+observer.init({
+	name: 'render',
+	observe: ['addedNodes'],
+	target: '[render]',
+	callback: function(mutation) {
+		let element = mutation.target
+		element.removeAttribute('render')
+
+		let parentElement = element.parentElement
+		if (parentElement) {
+			let el = element
+			let parentKeys = [];
+			let renderData = new Map();
+			do {
+				let data;
+				el = el.parentElement
+				if (el) {
+					if (el.dataOriginal)
+						renderData.set(el.dataOriginal, '')
+					if (el.hasAttribute('render-clone'))
+						data = el.renderData
+					if (data)
+						renderData.set(data, '')
+					
+					let parentKey = el.getAttribute('parentKey')
+					if(parentKey && parentKey != null) {
+						if (/^\d+$/.test(parentKey))
+							parentKey = `[${parentKey}]`
+						parentKeys.push(parentKey)
+					}
+				}
+			} while (el)
+			
+			let renderKey = element.getAttribute('render-key')
+
+			let parentKey;
+			parentKey = parentElement.getAttribute('parentKey')
+			if(renderKey == '$auto' || parentKey || parentKeys) {
+				let template = element.outerHTML
+				if (renderKey) {				
+					template = template.replace(/\$auto/g, uuid.generate(6));
+				}
+				if (parentKeys.length > 0) {
+					let string = ''	
+					if (parentKeys.length == 1){
+						string = parentKeys[0]
+					}
+					else
+						string = parentKeys.reverse().join('.')	
+						string = string.replace(/.\[/g, '[');
+					template = template.replace(/\$parents/g, string);
+				}
+				if (parentKey) {				
+					template = template.replace(/\$parent/g, parentKey);
+				}
+	
+				parentElement.innerHTML = template
+
+			}
+
+			element = parentElement.firstElementChild
+			let obj = {}
+			let array = Array.from(renderData.keys())
+			for (let data of array.reverse()){
+				obj = {...obj, ...data}
+			}
+
+			CoCreateRender.data({
+				elements: [element],
+				data: obj
+			});
+		}
+	}
+});
+
 export default CoCreateRender;