@cocreate/render 1.30.1 → 1.32.0

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+# [1.32.0](https://github.com/CoCreate-app/CoCreate-render/compare/v1.31.0...v1.32.0) (2023-11-16)
+
+
+### Bug Fixes
+
+* bug rendering forms ([abc62d4](https://github.com/CoCreate-app/CoCreate-render/commit/abc62d45c5e7cbb418e88c11fb39ee9e94b1728b))
+* type replace with key ([7575216](https://github.com/CoCreate-app/CoCreate-render/commit/7575216927168b7157a7d2fb820415eb4309ccbf))
+
+
+### Features
+
+* filter.overwite boolean to force re render ([273c71a](https://github.com/CoCreate-app/CoCreate-render/commit/273c71ad7b82a343c2b9d87ca17997584e778612))
+
+# [1.31.0](https://github.com/CoCreate-app/CoCreate-render/compare/v1.30.1...v1.31.0) (2023-11-12)
+
+
+### Bug Fixes
+
+* await renderTemplate ([7680350](https://github.com/CoCreate-app/CoCreate-render/commit/7680350b4fb1c25aaf23e04c80ea3be419c4080e))
+* bump dependencies for latest features ([342de1f](https://github.com/CoCreate-app/CoCreate-render/commit/342de1feb27739de85626f90bc94d0c627ef4cfa))
+
+
+### Features
+
+* support startingIndex ([bc3332a](https://github.com/CoCreate-app/CoCreate-render/commit/bc3332ad8ffad1a22d030c72a670356c3ac14e29))
+
 ## [1.30.1](https://github.com/CoCreate-app/CoCreate-render/compare/v1.30.0...v1.30.1) (2023-11-09)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/render",
-  "version": "1.30.1",
+  "version": "1.32.0",
   "description": "A simple render component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.",
   "keywords": [
     "render",
@@ -58,10 +58,10 @@
     "webpack-log": "^3.0.1"
   },
   "dependencies": {
-    "@cocreate/actions": "^1.12.1",
-    "@cocreate/api": "^1.15.9",
-    "@cocreate/element-prototype": "^1.11.8",
-    "@cocreate/observer": "^1.11.7",
-    "@cocreate/utils": "^1.26.2"
+    "@cocreate/actions": "^1.12.3",
+    "@cocreate/api": "^1.15.11",
+    "@cocreate/element-prototype": "^1.13.0",
+    "@cocreate/observer": "^1.11.9",
+    "@cocreate/utils": "^1.27.1"
   }
 }

package/src/index.js

@@ -42,7 +42,7 @@ function init(element) {
         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].renderValue = async (data) => await render({ source: element[i], data })
             element[i].getData = () => sources.get(element[i]).data
         }
     }
@@ -71,9 +71,19 @@ async function render({ source, element, selector, data, key, index, currentInde
     }
 
     if (source) {
-        if (!key)
+        if (!key) {
             key = source.getAttribute('render') || source.getAttribute('key')
+            if (!key) {
+                key = data.type
+                if (key == 'key')
+                    key = 'object'
+                else if (!key && data.method)
+                    key = data.method.split('.')[0]
+                else if (!key)
+                    return
 
+            }
+        }
         let sourceData = sources.get(source)
         if (!sourceData) {
             sourceData = { element: source, data }
@@ -88,23 +98,16 @@ async function render({ source, element, selector, data, key, index, currentInde
         source = { data }
 
     if (data.$filter) {
-        index = index || data.$filter.index
+        index = index || data.$filter.startingIndex
         update = update || data.$filter.update
         remove = remove || data.$filter.remove
     }
 
-    let type = data.type
-    if (!type && data.method) {
-        type = data.method.split('.')[0]
-    } else if (type == 'key')
-        type = 'object'
-
-
     if (!Array.isArray(element) && !(element instanceof HTMLCollection) && !(element instanceof NodeList))
         element = [element]
 
     for (let i = 0; i < element.length; i++) {
-        key = element[i].getAttribute('render') || key || type
+        key = element[i].getAttribute('render') || key
 
         let renderedNode = renderedNodes.get(element[i])
         if (source) {
@@ -115,12 +118,12 @@ async function render({ source, element, selector, data, key, index, currentInde
         }
 
         if (remove) {
-            for (let j = 0; j < data[type].length; j++) {
+            for (let j = 0; j < data[key].length; j++) {
                 let cloneKey
-                if (type === 'object') {
-                    cloneKey = data[type][j]._id;
+                if (key === 'object') {
+                    cloneKey = data[key][j]._id;
                 } else {
-                    cloneKey = data[type][j].name;
+                    cloneKey = data[key][j].name;
                 }
 
                 let clone = renderedNode.clones.get(cloneKey)
@@ -132,12 +135,12 @@ async function render({ source, element, selector, data, key, index, currentInde
             }
         } else if (key || Array.isArray(data)) {
             if (update) {
-                for (let j = 0; j < data[type].length; j++) {
+                for (let j = 0; j < data[key].length; j++) {
                     let clone
-                    if (type === 'object') {
-                        clone = renderedNode.clones.get(data[type][j]._id);
+                    if (key === 'object') {
+                        clone = renderedNode.clones.get(data[key][j]._id);
                     } else {
-                        clone = renderedNode.clones.get(data[type][j].name);
+                        clone = renderedNode.clones.get(data[key][j].name);
                     }
 
                     if (!currentIndex)
@@ -145,12 +148,11 @@ async function render({ source, element, selector, data, key, index, currentInde
 
                     if (!clone) return
 
-                    await renderValues(clone, { object: data[type][j] });
+                    await renderValues(clone, { object: data[key][j] });
                     if (currentIndex >= 0)
                         insertElement(renderedNode, clone, index, currentIndex)
                 }
             } else {
-
                 // 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));
@@ -158,7 +160,7 @@ async function render({ source, element, selector, data, key, index, currentInde
                 if (key)
                     element[i].setAttribute('render', key);
 
-                renderTemplate(element[i], data, key, index);
+                await renderTemplate(element[i], data, key, index);
             }
         } else
             await renderValues(element[i], data);
@@ -209,7 +211,7 @@ async function renderTemplate(template, data, key, index, keyPath) {
 
 
     let isInsert = data.$filter && (data.$filter.create || data.$filter.update)
-    if (!isInsert && index === 0) {
+    if (!isInsert && !index || data.$filter.overwrite) {
         for (const [key, element] of template.clones) {
             renderedNodes.delete(element)
             element.remove()
@@ -300,6 +302,7 @@ async function renderTemplate(template, data, key, index, keyPath) {
 
 function cloneTemplate(template) {
     let clone = template.element.cloneNode(true);
+    let cloneTagName = clone.tagName
 
     if (clone.tagName == 'TEMPLATE') {
         clone = template.element.content.firstElementChild
@@ -316,12 +319,16 @@ function cloneTemplate(template) {
     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('tbody');
+        // TODO: Some elements are only allowed a specific element, need to find these elements and confirm proper rendering.
+        let container
+        if (cloneTagName === 'TR')
+            container = document.createElement('tbody');
+        else
+            container = document.createElement('div');
+
         container.innerHTML = clone;
         clone = container.firstChild
         container.remove()
@@ -337,6 +344,8 @@ function insertElement(template, element, index, currentIndex) {
         console.log('attribute eid not found')
 
     if (index !== null && index >= 0) {
+        if (!template.clones)
+            template = template.template
         const clones = Array.from(template.clones);
 
         let item