@cocreate/render 1.8.4 → 1.9.0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+# [1.9.0](https://github.com/CoCreate-app/CoCreate-render/compare/v1.8.4...v1.9.0) (2022-07-03)
+
+
+### Features
+
+* added @cocreate/utils queryDocumentSelector to return an element from ann irframe or parent of iframe ([b9bb90f](https://github.com/CoCreate-app/CoCreate-render/commit/b9bb90f9ab72fc24fc71e64a37bcfee73a0c0c9c))
+* support for value-type attribute to define if render will be a string, text, innerHTML. Defaults to innerHTML ([a14fcc2](https://github.com/CoCreate-app/CoCreate-render/commit/a14fcc2ff886df7207c537cca67c3343be2da997))
+
 ## [1.8.4](https://github.com/CoCreate-app/CoCreate-render/compare/v1.8.3...v1.8.4) (2022-06-19)
 
 

package/demo/render.array.html

@@ -19,8 +19,8 @@
                 </cc-options>
 
             <div class="template" template_id="abc1">
-                <div class="template" render-array="data.current_org" render-key="current_org"  value="{{current_org}}">
-                    <h3>{{current_org}}</h3>
+                <div class="template" render-array="data.current" render-key="current_org"  value="{{current_org.name}}">
+                    <h3>{{current_org.name}}</h3>
                 </div>
             </div>
      
@@ -34,7 +34,8 @@
                     collection : 'dededede',
                     data: [{
                          _id : '123kijfhgfkel45',
-                         current_org: ['test1', 'test2', 'test31', 'test3']
+                         current_org: ['test1', 'test2', 'test31', 'test3'],
+                         current: [{name: 'test1w'}, {name: 'test2'}, {name: 'test31'}, {name: 'test3'}]
                      }]
                 }
                 

package/demo/render.object.html

@@ -11,8 +11,8 @@
     <body>
         
         <div class="template" template_id="abc1">
-            <div>{{data}}</div>
-            <h1> {{data.collection}} {{data._id}}</h1>
+            <!-- <div>{{data}}</div>
+            <h1> {{data.collection}} {{data._id}}</h1> -->
             <div class="template" render-object="" render-key="one">
                 <h5>{{one.key}}: {{one.value}}</h5>
             </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/render",
-  "version": "1.8.4",
+  "version": "1.9.0",
   "description": "A simple render component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.",
   "keywords": [
     "render",
@@ -63,6 +63,7 @@
   "dependencies": {
     "@cocreate/actions": "^1.4.3",
     "@cocreate/api": "^1.3.3",
-    "@cocreate/docs": "^1.3.3"
+    "@cocreate/docs": "^1.3.3",
+    "@cocreate/utils": "^1.8.1"
   }
 }

package/src/index.js

@@ -1,5 +1,6 @@
 /*globals CustomEvent*/
 import action from '@cocreate/actions';
+import { queryDocumentSelector } from '@cocreate/utils';
 // import api from '@cocreate/api';
 
 const CoCreateRender = {
@@ -161,6 +162,13 @@ const CoCreateRender = {
 					}
 				});
 
+				// if (el.classList.contains('template')) {
+				// 	that.render(el, data);
+				// } 
+				// if(el.childNodes.length > 0) {
+				// 	that.setValue(el.childNodes, data, renderKey);
+				// }
+
 				if(el.childNodes.length > 0) {
 					that.setValue(el.childNodes, data, renderKey);
 				}
@@ -170,12 +178,17 @@ const CoCreateRender = {
 			}
 			
 			if (el.nodeType == 3) {
+				let valueType = el.parentElement.getAttribute('value-type')
 				let textContent = el.textContent;
 				let text = that.__replaceValue(data, textContent, renderKey);
 				if (text || text == "") {
-					const newNode = document.createElement('div');
-					newNode.innerHTML = text;
-					el.replaceWith(...newNode.childNodes)
+					if (valueType == 'text' || valueType == 'string'){
+						el.textContent = text;
+					} else {
+						const newNode = document.createElement('div');
+						newNode.innerHTML = text;
+						el.replaceWith(...newNode.childNodes)
+					}
 				}
 			}
 
@@ -184,7 +197,7 @@ const CoCreateRender = {
 	
 	data: function({selector, data, elements}) {
 		if (selector) {
-			let template = document.querySelector(selector);
+			let template = queryDocumentSelector(selector);
 			if (!template) return;
 			if (template.classList.contains('template')) {
 				this.render(template, data);