@cocreate/render 1.24.32 → 1.26.0

package/src/index.js

@@ -1,531 +1,744 @@
+/********************************************************************************
+ * Copyright (C) 2023 CoCreate and Contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published
+ * by the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ ********************************************************************************/
+
+// Commercial Licensing Information:
+// For commercial use of this software without the copyleft provisions of the AGPLv3,
+// you must obtain a commercial license from CoCreate LLC.
+// For details, visit <https://cocreate.app/licenses/> or contact us at sales@cocreate.app.
+
 /*globals CustomEvent*/
-import action from '@cocreate/actions';
-import observer from '@cocreate/observer';
+import Actions from '@cocreate/actions';
+import Observer from '@cocreate/observer';
 import uuid from '@cocreate/uuid';
-import { queryDocumentSelector, getValueFromObject, dotNotationToObject } from '@cocreate/utils';
+import { queryElements, getValueFromObject, dotNotationToObject, ObjectId } from '@cocreate/utils';
 import '@cocreate/element-prototype';
 import './index.css';
-// import api from '@cocreate/api';
-
-const CoCreateRender = {
-	
-	__getValue: function(data, attrValue, el) {
-		let result = /{{\s*([\w\W]+)\s*}}/g.exec(attrValue);
-		if (result) {
-			let value = getValueFromObject(data, result[1].trim());
-			if (!value && 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.renderedData)
-							value = getValueFromObject(parentTemplate.renderedData, result[1].trim());
-						if (!value && parentTemplate.parentElement)
-							parentTemplate = parentTemplate.parentElement.closest('[templateid]')
-						else
-							parentTemplate = ""
-					} while (!value && parentTemplate)
-				}
-			}
-			return value;
-		}
-		return false;
-	},
-	
-	__createObject: function (data, path) {
-		try {
-			if (!path) return data;
-			
-			let keys = path.split('.');
-			let newObject = data;
-
-			for (var  i = keys.length - 1; i >= 0; i--) {
-				newObject = {[keys[i]]: newObject};				
-			}
-			return newObject;
-			
-		} catch (error) {
-			console.log("Error in getValueFromObject", error);
-			return false;
-		}
-	},
-	
-	__replaceValue: function(data, inputValue, renderKey, el) {
-		let outputValue = inputValue;
-		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 || value === "") {
-					if (typeof(value) == "object") 
-						value = this.generateString(value)	
-
-					outputValue = outputValue.replace(placeholder, value);
-				} else if (renderKey && placeholder.includes(`{{${renderKey}.`)) {
-					outputValue = '';
-				}
-			}
-		}
-		return outputValue;
-	},
-
-	generateString: function(value, str = ''){
-		// let str = '';
-		// do {
-			let flag = true;
-			if (str)
-				flag = false;
-			for (const key of Object.keys(value)) {
-				let val = value[key]
-				if (typeof(val) == "object") {
-					str += `${key}: \n`;
-					this.generateString(val, str)
-				}
-				else
-					str += `${key}: ${val}\n`;
-			}
-		// } while()
-		if (flag)
-			return str
-	},
-	
-	render: function(template, data) {
-		const self = this;
-		let type = '';
-		let arrayData = data;
-
-		let exclude = template.getAttribute('render-exclude') || ''
-		if (exclude) {
-			exclude = exclude.replace(/ /g, '').split(",")
-			if (!Array.isArray(exclude))
-				exclude = [exclude]
-		}
-
-		const isRenderObject = template.hasAttribute('render-object');
-		if (isRenderObject) {
-			const renderObject = template.getAttribute('render-object');
-			type = renderObject || ''
-		}
-
-		const isRenderArray = template.hasAttribute('render-array');
-		if (isRenderArray){
-			var renderArray = template.getAttribute('render-array');
-			if (renderArray)
-				arrayData = data[renderArray];
-			type = renderArray || '';
-		}
-
-		let renderKey = template.getAttribute('render-key') || type;
-		
-		if (!template.renderedKeys)
-			template.renderedKeys = new Map()
-		
-		if (isRenderObject && type) {
-			let Data = getValueFromObject(arrayData, type);
-			let array = self.renderObject(Data, renderKey, exclude)
-			for (let item of array) {
-				if (!template.renderedKeys.has(item[renderKey].key)){
-					template.renderedKeys.set(item[renderKey].key, '')
-					let cloneEl = this.cloneEl(template);
-					cloneEl.setAttribute('renderedKey', item[renderKey].key)
-					self.setValue([cloneEl], item, renderArray, renderKey);
-					template.insertAdjacentElement('beforebegin', cloneEl);
-				}
-			}
-		} else {
-
-			if (!Array.isArray(arrayData))
-				arrayData = getValueFromObject(data, type);
-
-			if (!arrayData) {
-				let cloneEl = this.cloneEl(template);
-				self.setValue([cloneEl], data, renderArray, renderKey);
-				template.insertAdjacentElement('beforebegin', cloneEl);
-			}
-
-			if (!Array.isArray(arrayData))
-				arrayData = [arrayData]
-
-			if (type && Array.isArray(arrayData)) {
-				arrayData.forEach((item) => {
-					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);
-					}
-				});
-			}
-		}
-	},
-	
-	renderObject: function(data, renderKey, exclude) {	
-		let array = []
-		if (!data) 
-			return array
-		for (const key of Object.keys(data)) {
-			let value = data[key]
-			if (!exclude.includes(key)) {
-				let type = 'string';
-				if (typeof(value) == "object")
-					if (Array.isArray(value))
-						type = 'array'
-					else
-						type = 'object'
-				array.push({[renderKey]: {key, value, type}})
-			}
-		}
-		return array
-	},
-
-	cloneEl: function(template) {
-		let cloneEl = template.cloneNode(true);
-
-		let templateId = cloneEl.getAttribute('template_id');
-		if (!templateId)
-			templateId = cloneEl.getAttribute('template');
-
-	 	if (templateId) {
-		 	cloneEl.setAttribute('templateId', templateId);
-			cloneEl.removeAttribute('template_id');
-			cloneEl.removeAttribute('template');
-		}
-		
-		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', '');	
-
-		return cloneEl;
-	},
-
-	document_id: '',
-	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;
-
-			if (el.nodeType == 1) {
-				if (el.hasAttribute('render-clone')) {
-					if (!el.renderedData)
-						el.renderedData = {...data}
-					else if (Object.keys(el.renderedData)[0] == Object.keys(data)[0]) {
-						el.renderedData = {...data}
-					}
-
-				}
-
-				if (el.renderMap && !isRenderKey) {
-					let placeholder = el.renderMap.get(el)
-					if (placeholder){
-						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}
-						}
-
-						let textContent = placeholder.placeholder
-						let text = that.__replaceValue(updateData, textContent, renderKey, el);
-						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;
-					let placeholder
-					if (attr.renderMap)
-						placeholder = attr.renderMap.get(attr)
-					else
-						that.renderMap(attr, attr.value, renderArray, renderKey)
-
-					if (placeholder && !isRenderKey){
-						let temp = placeholder.placeholder;
-						// 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}
-						// }
-						if (updateData)
-							attrValue = that.__replaceValue(updateData, temp, renderKey, el);
-						if (attrValue == attr.value)
-							attrValue = undefined
-					}
-					else
-						attrValue = that.__replaceValue(data, attrValue, renderKey, el);
-					
-					// TODO: support attibute name replace if has {{}}
-					// attr_name = that.__replaceValue(data, attr_name, renderKey, el);
-
-					if (attrValue || attrValue == "") {
-						el.setAttribute(attr_name, attrValue);
-					}
-				});
-
-				if (CoCreate.pass) {
-					if (el.hasAttribute('[pass_id]'))
-						CoCreate.pass.initElement(el)
-				}
-
-				if (el.tagName === 'SCRIPT' && el.src) {
-					if (el.src.includes('CoCreate.js') || el.src.includes('CoCreate.min.js')) {
-						el.remove()
-						return
-					}
-				}
-
-				if (el.tagName === 'LINK' && el.href) {
-					if (el.href.includes('CoCreate.css') || el.href.includes('CoCreate.min.css')) {
-						el.remove()
-						return
-					}
-				}
-
-				if (el.childNodes.length > 0) {		
-					that.setValue(el.childNodes, updateData || data, renderArray, renderKey);
-				}
-				
-				if ((el.tagName == 'TEMPLATE' || el.hasAttribute('template') || el.classList.contains('template')) && !el.hasAttribute('template_id')) {
-					if (el.getAttribute('render-object') || el.getAttribute('render-array'))
-						that.render(el, data);
-				}
-
-			}
-
-			if (el.nodeType == 3) {
-				let valueType = el.parentElement.getAttribute('value-type')
-				
-				let textContent, placeholder, text;
-				if (el.renderMap)
-					placeholder = el.renderMap.get(el)
-				if (placeholder && !isRenderKey) {
-					let updateData = data;
-					textContent = 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 = {[renderKey]: updateData}
-					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, el);
-				}
-
-				if (text || text == "") {
-					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)
-
-							if (el.childNodes.length > 0) {		
-								that.setValue(el.childNodes, updateData || data, renderArray, renderKey);
-							}
-						}
-					}
-				}
-			}
-		});
-	},
-
-	renderMap: function(node, placeholder, renderArray, renderKey) {
-		if (!node.renderMap) {
-			node['renderMap'] = new Map();
-		}
-		if (placeholder && renderKey)
-			node['renderMap'].set(node, {placeholder, renderArray, renderKey})
-	},
-	
-	data: function({selector, data, elements}) {
-		if (selector) {
-			let template = queryDocumentSelector(selector);
-			if (!template) return;
-			if (template.tagName == 'TEMPLATE' || template.hasAttribute('template') || template.classList.contains('template')) {
-				template.renderedKeys = undefined
-				this.render(template, data);
-			}
-			else
-				this.setValue([template], data);
-		} else if (elements) {
-			if (elements.length == 1 && (elements[0].tagName == 'TEMPLATE' || elements[0].hasAttribute('template') || elements[0].classList.contains('template'))){
-				this.render(elements[0], data);
-			}
-			else
-				this.setValue(elements, data);
-		}
-		
-	}
-	
-};
+
+const sources = new Map()
+const renderedNodes = new Map()
+const elementSelector = '[render-selector], [render-closest], [render-parent], [render-next], [render-previous]'
+
+function init(element) {
+    if (element && !(element instanceof HTMLCollection) && !Array.isArray(element))
+        element = [element]
+    else if (!element)
+        element = document.querySelectorAll(elementSelector)
+
+    for (let i = 0; i < element.length; i++) {
+        let source = sources.get(element[i])
+        if (!source) {
+            sources.set(element[i], { element: element[i] })
+            element[i].renderValue = (data) => render({ source: element[i], data })
+            element[i].getData = () => sources.get(element[i]).data
+        }
+    }
+}
+
+async function render({ source, element, data, key, index, currentIndex, update, remove }) {
+    if (!element) {
+        if (source) {
+            element = queryElements({ element: source, prefix: 'render' })
+            if (!element && source.children.length > 0) {
+                for (const child of source.children) {
+                    if (child.matches('template, [template], .template, [render]')) {
+                        element = child;
+                        break; // Found the desired element, no need to continue the loop
+                    }
+                }
+            }
+
+            if (!element) {
+                element = source.querySelector('template, [template], .template, [render]');
+            }
+        }
+
+        if (!element) return;
+    }
+
+    if (source) {
+        let sourceData = sources.get(source)
+        if (!sourceData) {
+            sourceData = { element: source, data }
+            sources.set(source, sourceData)
+        }
+
+        source = sourceData
+        if (!source.data)
+            source.data = data
+    } else if (data)
+        source = { data }
+
+    if (data.filter) {
+        index = index || data.filter.index
+        update = update || data.filter.update
+        remove = remove || data.filter.remove
+    }
+
+    if (!Array.isArray(element) && !(element instanceof HTMLCollection) && !(element instanceof NodeList))
+        element = [element]
+
+    for (let i = 0; i < element.length; i++) {
+        if (!key)
+            key = element[i].getAttribute('render')
+
+        let renderedNode = renderedNodes.get(element[i])
+        if (source) {
+            if (!renderedNode) {
+                renderedNode = { element: element[i], source, clones: new Map(), renderAs: new Map() }
+                renderedNodes.set(element[i], renderedNode)
+            }
+        }
+
+        if (remove) {
+            if (renderedNode.source) {
+                if (key)
+                    renderedNode.source.data[key].splice(index, 1)
+                else {
+
+                }
+            }
+
+            let clone = Array.from(renderedNode.clones)[index]
+            if (!clone) return
+
+            renderedNode.clones.delete(clone[0])
+            renderedNodes.delete(clone[1])
+            clone[1].remove()
+        } else if (key || Array.isArray(data)) {
+            if (update) {
+                let clone
+
+                if (!currentIndex)
+                    currentIndex = data.filter.currentIndex
+
+                if (currentIndex >= 0)
+                    clone = Array.from(renderedNode.clones)[currentIndex]
+                else
+                    clone = Array.from(renderedNode.clones)[index]
+
+                if (!clone) return
+
+                await renderValues(clone[1], data);
+                if (currentIndex >= 0)
+                    insertElement(renderedNode, clone[1], index, currentIndex)
+            }
+
+            // TODO: if $auto here every subsequent clone will have same value, not replacing here will apply unique value to each clone
+            if (key === '$auto')
+                key = key.replace(/\$auto/g, uuid.generate(6));
+
+            if (key)
+                element[i].setAttribute('render', key);
+
+            renderTemplate(element[i], data, key, index);
+        } else
+            await renderValues(element[i], data);
+
+    }
+
+}
+
+async function renderTemplate(template, data, key, index, keyPath) {
+    if (!key)
+        key = template.getAttribute('render')
+
+    let templateData = renderedNodes.get(template)
+    if (!templateData) {
+        templateData = { element: template, clones: new Map() }
+        renderedNodes.set(template, templateData)
+    }
+
+    templateData.parent = template.parentElement.closest('[render]')
+    if (templateData.parent)
+        templateData.parent = renderedNodes.get(templateData.parent)
+
+    if (!templateData.keyPath) {
+        if (keyPath)
+            templateData.keyPath = keyPath
+        else if (templateData.parent && templateData.parent.keyPath)
+            templateData.keyPath = templateData.parent.keyPath
+        else if (key)
+            templateData.keyPath = key
+    }
+
+    template = templateData
+
+    let renderData
+    if (key)
+        renderData = getRenderValue(template.element, data, key)
+    else if (Array.isArray(data))
+        renderData = data
+
+    if (!renderData) return
+
+    if (index === 0) {
+        for (const [key, element] of template.clones) {
+            renderedNodes.delete(element)
+            element.remove()
+            template.clones.delete(key)
+        }
+        // template.data = renderData
+    }
+    // else if (index) {
+    // updates data that has already been rendered
+    // template.data = dotNotationToObject(renderData, template.data)
+    // }
+
+    let renderAs = template.element.getAttribute('render-as') || key;
+    template.renderAs = renderAs
+
+    if (key && !Array.isArray(renderData)) {
+        let exclude = template.element.getAttribute('render-exclude') || ''
+        if (exclude) {
+            exclude = exclude.replace(/ /g, '').split(",")
+            if (!Array.isArray(exclude))
+                exclude = [exclude]
+        }
+
+        const keys = Object.keys(renderData)
+        for (let i = 0; i < keys.length; i++) {
+            if (exclude.includes(keys[i]))
+                continue
+
+            let value = renderData[keys[i]]
+            let type = 'string';
+
+            if (Array.isArray(value))
+                type = 'array'
+            else if (typeof (value) == "object")
+                type = 'object'
+
+            let Data = { [renderAs]: { key: keys[i], value, type } }
+
+            let clone = cloneTemplate(template);
+            let renderedKey = key.split('.')
+            renderedKey = renderedKey[renderedKey.length - 1];
+            //renderedKey needs to remove the parent.renderAs/key
+
+            clone.key = keys[i]
+            clone.keyPath = template.keyPath + '.' + renderedKey
+            clone.parentKey = renderedKey
+            clone.renderKey = key
+            clone.element.setAttribute('renderedKey', keys[i])
+            await renderValues(clone.element, Data, keys[i], renderAs);
+            insertElement(template, clone.element, index);
+
+        }
+    } else {
+        if (!key && !Array.isArray(renderData)) {
+            key = 'data'
+            renderData = getValueFromObject(renderData, key);
+            if (!renderAs)
+                renderAs = key
+        }
+
+        if (!renderData) {
+            let clone = cloneTemplate(template);
+            clone.keyPath = template.keyPath
+            await renderValues(clone.element, data, key, renderAs);
+            insertElement(template, clone.element, index);
+        } else {
+            if (!Array.isArray(renderData))
+                renderData = [renderData]
+
+            for (let i = 0; i < renderData.length; i++) {
+                let clone = cloneTemplate(template);
+                clone.keyPath = template.keyPath || '' + `[${i}]`
+
+                let object
+                if (renderAs) {
+                    object = { [renderAs]: renderData[i] }
+                    if (renderAs.includes('.'))
+                        object = dotNotationToObject(object);
+                } else
+                    object = renderData[i]
+
+                await renderValues(clone.element, object, key, renderAs);
+                insertElement(template, clone.element, index);
+            }
+        }
+    }
+}
+
+function cloneTemplate(template) {
+    let clone = template.element.cloneNode(true);
+
+    if (clone.tagName == 'TEMPLATE') {
+        clone = template.element.content.firstElementChild
+        for (let attribute of template.element.attributes) {
+            clone.setAttribute(attribute.name, attribute.value || '');
+        }
+    } else {
+        clone.classList.remove('template');
+        clone.removeAttribute('template');
+    }
+
+    clone.setAttribute('render-clone', '');
+
+    let renderAs = clone.getAttribute('render-as')
+    if (renderAs) {
+        clone = clone.outerHTML.replace(/\$auto/g, renderAs);
+    } else {
+        clone = clone.outerHTML;
+    }
+
+    if (typeof clone === 'string') {
+        let container = document.createElement('div');
+        container.innerHTML = clone;
+        clone = container.firstChild
+        container.remove()
+    }
+    let renderedNode = { template, element: clone }
+    renderedNodes.set(clone, renderedNode)
+    return renderedNode;
+}
+
+function insertElement(template, element, index, currentIndex) {
+    let eid = element.getAttribute('eid')
+    if (!eid)
+        console.log('attribute eid not found')
+
+    if (index !== null && index >= 0) {
+        const clones = Array.from(template.clones);
+
+        let item
+        if (currentIndex) {
+            item = clones.splice(currentIndex, 1)[0];
+        } else {
+            item = [eid, element];
+        }
+
+        clones.splice(index, 0, item);
+        if (clones[index + 1] && clones[index][1] !== element)
+            clones[index][1].insertAdjacentElement('beforebegin', element);
+        else if (clones[index] && clones[index][1] !== element)
+            clones[index][1].insertAdjacentElement('afterend', element);
+        else
+            template.element.insertAdjacentElement('beforebegin', element);
+        template.clones = new Map(clones);
+    } else {
+        template.clones.set(eid, element)
+        template.element.insertAdjacentElement('beforebegin', element);
+    }
+}
+
+async function renderValues(node, data, key, renderAs, keyPath, parent) {
+    if (!data) return;
+
+    let renderedNode = renderedNodes.get(node)
+    if (!renderedNode)
+        renderedNode = { key, renderAs }
+
+    if (!renderedNode.key)
+        renderedNode.key = key
+    else if (!key)
+        key = renderedNode.key
+
+    if (!renderedNode.renderAs)
+        renderedNode.renderAs = renderAs
+    else if (!renderAs)
+        renderAs = renderedNode.renderAs
+
+    if (keyPath)
+        renderedNode.keyPath = keyPath
+    else if (renderedNode.keyPath)
+        keyPath = renderedNode.keyPath
+
+    if (parent)
+        renderedNode.parent = parent
+
+    if (node.nodeType == 1) {
+        if (node.hasAttribute('render-clone')) {
+            parent = renderedNode
+
+            for (let eid of ['_id', 'name', 'key']) {
+                if (renderAs)
+                    eid = data[renderAs][eid]
+                else
+                    eid = data[eid]
+
+                if (!eid) continue
+
+                let oldEid = renderedNode.eid
+                let temp = renderedNode.template
+                if (!temp) {
+                    console.log('temp could not be found')
+                } else if (!temp.clones) {
+                    if (temp.template)
+                        temp = temp.template
+                    else
+                        console.log(temp)
+
+                    if (oldEid && oldEid !== eid)
+                        temp.clones.delete(oldEid)
+
+                    temp.clones.set(eid, node)
+                }
+
+                renderedNode.eid = eid
+
+                node.setAttribute('eid', eid)
+                break;
+            }
+        }
+
+        // Array.from(node.attributes).forEach(attr => {
+        for (let attr of node.attributes) {
+            let name = attr.name;
+            let value = attr.value;
+
+            let renderedAttribute = renderedNodes.get(attr)
+            if (!renderedAttribute) {
+                renderedAttribute = { placeholder: { name, value }, key, renderAs, parent: renderedNode }
+            }
+
+            let namePlaceholder = renderedAttribute.placeholder.name || name;
+            let valuePlaceholder = renderedAttribute.placeholder.value || value;
+
+            name = await renderValue(attr, data, namePlaceholder, renderAs, renderedAttribute);
+            value = await renderValue(attr, data, valuePlaceholder, renderAs, renderedAttribute);
+
+            if (name === undefined && name === null) {
+                renderedNodes.delete(attr)
+                node.removeAttribute(attr.name);
+            } else if ((value || value === "") && (name !== attr.name || value !== attr.value))
+                node.setAttribute(name, value);
+        }
+        // });
+
+        if (CoCreate.pass) {
+            if (node.hasAttribute('[pass_id]'))
+                CoCreate.pass.initElement(node)
+        }
+
+        if (node.tagName === 'SCRIPT' && node.src) {
+            if (node.src.includes('CoCreate.js') || node.src.includes('CoCreate.min.js')) {
+                node.remove()
+                return
+            }
+        }
+
+        if (node.tagName === 'LINK' && node.href) {
+            if (node.href.includes('CoCreate.css') || node.href.includes('CoCreate.min.css')) {
+                node.remove()
+                return
+            }
+        }
+        if (node.getAttribute('render') && !node.hasAttribute('render-clone')) {
+            renderTemplate(node, data);
+        } else if (node.childNodes.length > 0) {
+            // Array.from(node.childNodes).forEach(childNode => {
+            for (let childNode of node.childNodes) {
+                await renderValues(childNode, data, key, renderAs, keyPath, parent);
+            }
+            // });
+        }
+
+
+    } else if (node.nodeType == 3) {
+        let valueType = node.parentElement.getAttribute('value-type')
+
+        let textContent, text;
+
+        if (!renderedNode.placeholder && node.textContent.match(/{{(.*?)}}/))
+            renderedNode.placeholder = node.textContent
+
+        if (!renderedNode.placeholder)
+            return
+        textContent = renderedNode.placeholder || node.textContent;
+
+        text = await renderValue(node, data, textContent, renderAs, renderedNode);
+
+        if (text || text == "") {
+            if (text != renderedNode.text) {
+                renderedNode.text = text
+
+                if (valueType == 'text' || valueType == 'string' || valueType != "html") {
+                    node.textContent = text;
+                } else {
+                    const newNode = document.createElement('div');
+                    newNode.innerHTML = text;
+                    let parentElement = node.parentElement
+
+                    let renderedParent = renderedNodes.get(parentElement)
+                    if (!renderedParent) {
+                        renderedParent = { placeholder: textContent, key, renderAs }
+                    }
+                    renderedParent.text = text
+                    for (let newChild of newNode.childNodes) {
+                        renderedNode.element = newChild
+                        renderedNodes.set(newChild, renderedNode)
+                    }
+                    renderedNodes.delete(node)
+                    node.replaceWith(...newNode.childNodes)
+                }
+
+                if (node.childNodes.length > 0) {
+                    // Array.from(node.childNodes).forEach(childNode => {
+                    for (let childNode of node.childNodes) {
+                        await renderValues(childNode, data, key, renderAs, keyPath, parent);
+                    }
+                    // });
+                }
+            }
+        }
+    }
+}
+
+async function renderValue(node, data, placeholder, renderAs, renderedNode) {
+    let output = placeholder;
+
+    if (placeholder.match(/{{(.*?)}}/)) {
+        if (renderedNode) {
+            renderedNodes.set(node, renderedNode)
+        }
+
+        let match
+        do {
+            // match = output.match(/{{([A-Za-z0-9_.,\[\]\- ]*)}}/); // works by getting inner matches first
+            // match = output.match(/{{([^}]*)}}/);
+            match = output.match(/{{(.*?)}}/);
+            if (match) {
+                let value
+                try {
+                    let Data = JSON.parse('{' + match[1].replace(/'/g, '"') + '}');
+                    if (Data.storage || Data.database || Data.array || Data.object || Data.index) {
+                        Data.method = 'read.object'
+                        value = await CoCreate.crud.send(Data)
+                        value = value.object[0][Data.key]
+                    }
+                } catch (error) {
+                    value = getRenderValue(node, data, match[1], renderAs)
+                }
+
+                if (value || value === "") {
+                    if (typeof value === "object")
+                        value = JSON.stringify(value, null, 2)
+
+                    output = output.replace(match[0], value);
+                } else if (renderAs) {
+                    if (match[0].startsWith(`{{${renderAs}.`)) {
+                        output = output.replace(match[0], "");
+                    } else {
+                        match = null
+                    }
+                } else {
+                    match = null
+                }
+
+            }
+
+        } while (match)
+    }
+    return output;
+}
+
+function getRenderValue(node, data, key, renderAs) {
+    let value = getValueFromObject(data, key);
+
+    if (!value && value !== '' && node) {
+
+        let parentTemplate = node
+        do {
+            let parentNode = renderedNodes.get(parentTemplate)
+            if (parentNode) {
+
+                if (!value && (parentNode.parent || parentNode.template)) {
+                    let Data, eid, parent = parentNode.parent || parentNode.template
+                    do {
+                        if (key.includes('keyPath'))
+                            value = parentNode.keyPath || parent.keyPath
+                        else if (key.includes('parentKey')) {
+                            value = parentNode.parentKey || parent.parentKey || parent.parent.parentKey
+                        } else if (key.includes('renderAs')) {
+                            value = renderAs
+                        } else if (key === 'object' || key === '_id')
+                            value = ObjectId()
+                        else if (key === 'uuid')
+                            value = uuid.generate(6)
+                        else if (parent.source)
+                            Data = parent.source.data
+                        else if (parent.parent)
+                            parent = parent.parent
+                        else if (parent.template)
+                            parent = parent.template
+                        else
+                            parent = undefined
+
+                        if (!Data && parent && parent.eid)
+                            eid = parent.eid
+
+
+                    } while (!value && parent && !Data)
+
+                    if (!value && Data)
+                        value = getValueFromObject(Data, key);
+
+                    if (!value && key.includes('.')) {
+                        let renderedData = getValueFromObject(Data, key.split('.')[0]);
+                        if (renderedData) {
+                            let index
+                            if (!parent.clones.size || parent.clones.size === 1)
+                                index = 0
+                            else if (eid)
+                                index = Array.from(parent.clones.keys()).indexOf(eid);
+                            else
+                                console.log('eid not found')
+
+                            if (index >= 0)
+                                Data = { [key.split('.')[0]]: renderedData[index] }
+
+                            value = getValueFromObject(Data, key);
+                        }
+
+                    }
+                }
+            }
+
+            if (!value && parentTemplate.parentElement)
+                parentTemplate = parentTemplate.parentElement.closest('[render]')
+            else
+                parentTemplate = undefined
+
+        } while (!value && parentTemplate)
+    }
+    return value
+}
 
 function renderKey(element, params) {
-	// TODO: custom render-keys 
-	const form = element.closest("form") || document;
-	if (!params)
-		params = 'render-key'
-
-	let data = {}
-	let selector = `[${params}]`
-	let elements = form.querySelectorAll(selector);
-	for (let el of elements) {
-		let attribute = el.getAttribute(params)
-		if (attribute)
-			data[attribute] = el.getValue()
-	}	
-	data = dotNotationToObject(data)
-	let renderData = {data: {[params]: data}}
-
-	let templateSelector = `[template_id='${params}']`
-	let template = document.querySelectorAll(templateSelector);
-	if (template)
-		renderData.elements = template
-	else
-		renderData.selector = `[template='${params}']`
-	
-	CoCreateRender.data(renderData);
-	
-	document.dispatchEvent(new CustomEvent('renderKey', {
-		detail: { data }
-	}));
+    // TODO: custom render-keys 
+    const form = element.closest("form") || document;
+    if (!params)
+        params = 'render-key'
+
+    let data = {}
+    let selector = `[${params}]`
+    let elements = form.querySelectorAll(selector);
+    for (let el of elements) {
+        let attribute = el.getAttribute(params)
+        if (attribute)
+            data[attribute] = el.getValue()
+    }
+    data = dotNotationToObject(data)
+    let renderData = { data: { [params]: data } }
+
+    let renderSelector = element.getAttribute('render-selector')
+    if (!renderSelector) return
+
+    renderData.selector = renderSelector
+    render(renderData);
+
+    document.dispatchEvent(new CustomEvent('renderKey', {
+        detail: { data }
+    }));
 }
 
-action.init({
-	name: "renderKey",
-	callback: (btn, params) => {
-		renderKey(btn, params);
-	}
+Actions.init({
+    name: "renderKey",
+    callback: (action) => {
+        renderKey(action.element, action.params);
+    }
 });
 
-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 renderedData = new Map();
-			do {
-				let data;
-				el = el.parentElement
-				if (el) {
-					if (el.hasAttribute('render-clone'))
-						data = el.renderedData
-					if (data) {
-						renderedData.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(renderedData.keys())
-			for (let data of array.reverse()){
-				obj = {...obj, ...data}
-			}
-			
-			CoCreateRender.data({
-				elements: [element],
-				data: obj
-			});
-		}
-	}
+Observer.init({
+    name: 'render',
+    observe: ['addedNodes'],
+    target: elementSelector,
+    callback: function (mutation) {
+        init(mutation.target)
+    }
+})
+
+Observer.init({
+    name: 'fileRender',
+    observe: ['attributes'],
+    attributeName: ['render-selector', 'render-closest', 'render-parent', 'render-next', 'render-previous'],
+    callback: function (mutation) {
+        render({
+            element: mutation.target, data: mutation.target.getValue()
+        });
+    }
 });
 
-export default CoCreateRender;
+
+Observer.init({
+    name: 'render',
+    observe: ['addedNodes'],
+    target: '[render]',
+    callback: function (mutation) {
+        if (mutation.target.hasAttribute('render-clone'))
+            return
+        let parentElement = mutation.target.parentElement.closest(['render'])
+        if (!parentElement) return
+
+        let renderedNode = renderedNodes.get(parentElement)
+        let data = renderedNode.source.data
+
+        render({ element: mutation.target, data });
+
+    }
+});
+
+// Observer.init({
+//     name: 'render',
+//     observe: ['addedNodes'],
+//     target: '[render-clone]',
+//     callback: function (mutation) {
+//         let renderedNode = renderedNodes.get(mutation.target)
+//         if (!renderedNode) return
+
+// render({ source, element, data, key, index, currentIndex, update, remove })
+
+// let nextElement = mutation.target.nextElementSibling
+// if (!nextElement) return
+
+// let nextRenderedNode = renderedNodes.get(nextElement)
+// if (!nextRenderedNode) return
+
+// let clones
+// if (nextRenderedNode.template)
+//     clones = nextRenderedNode.template.clones
+// else if (nextRenderedNode.clones)
+//     clones = nextRenderedNode.clones
+
+// const cloneValueArray = Array.from(clones.values())
+// let index = cloneValueArray.indexOf(nextElement);
+
+// const cloneArray = Array.from(clones)
+
+// cloneArray.splice(index, 0, [renderedNode.eid, mutation.target]);
+// clones = new Map(cloneArray);
+
+//     }
+// })
+
+Observer.init({
+    name: 'renderNodesRemoved',
+    observe: ['removedNodes'],
+    target: '[render-clone]',
+    callback: function (mutation) {
+        if (mutation.target.parentElement) return
+        let renderedNode = renderedNodes.get(mutation.target)
+        if (!renderedNode) return
+        renderedNode.template.clones.delete(renderedNode.eid)
+        renderedNodes.delete(mutation.target)
+    }
+})
+
+init()
+
+export default { render, sources, renderedNodes }