@cocreate/render 1.31.0 → 1.33.0

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# [1.33.0](https://github.com/CoCreate-app/CoCreate-render/compare/v1.32.0...v1.33.0) (2023-11-19)
+
+
+### Bug Fixes
+
+* use action.form and action.params ([90f9428](https://github.com/CoCreate-app/CoCreate-render/commit/90f9428a5c87473d51aec4111b15a0f194f46cb1))
+
+
+### Features
+
+* update dependecies for th latest features and bug fixes ([733e8cf](https://github.com/CoCreate-app/CoCreate-render/commit/733e8cfa7b601c2c5b494fb132588a67f6d6f433))
+
+# [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)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/render",
-  "version": "1.31.0",
+  "version": "1.33.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.3",
-    "@cocreate/api": "^1.15.11",
-    "@cocreate/element-prototype": "^1.13.0",
-    "@cocreate/observer": "^1.11.9",
-    "@cocreate/utils": "^1.27.1"
+    "@cocreate/actions": "^1.12.4",
+    "@cocreate/api": "^1.15.12",
+    "@cocreate/element-prototype": "^1.13.2",
+    "@cocreate/observer": "^1.12.0",
+    "@cocreate/utils": "^1.27.4"
   }
 }

package/src/index.js

@@ -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 }
@@ -93,18 +103,11 @@ async function render({ source, element, selector, data, key, index, currentInde
         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));
@@ -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()
@@ -645,9 +652,12 @@ function getRenderValue(node, data, key, renderAs) {
     return value
 }
 
-async function renderKey(element, params) {
+async function renderKey(action) {
     // TODO: custom render-keys 
-    const form = element.closest("form") || document;
+    let element = action.element
+    let form = action.form || document
+    let params = action.params
+
     if (!params)
         params = 'render-key'
 
@@ -676,7 +686,7 @@ async function renderKey(element, params) {
 Actions.init({
     name: "renderKey",
     callback: (action) => {
-        renderKey(action.element, action.params);
+        renderKey(action);
     }
 });