@cocreate/render 1.41.4 → 1.42.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [1.42.0](https://github.com/CoCreate-app/CoCreate-render/compare/v1.41.5...v1.42.0) (2024-09-21)
+
+
+### Features
+
+* render-reverse attribute to trigger reverse rendering for chats , etc ([f688f61](https://github.com/CoCreate-app/CoCreate-render/commit/f688f61ae4446a18356515c6d88d6bd8cc0be142))
+
+## [1.41.5](https://github.com/CoCreate-app/CoCreate-render/compare/v1.41.4...v1.41.5) (2024-08-24)
+
+
+### Bug Fixes
+
+* handling of array index ([3a7cae6](https://github.com/CoCreate-app/CoCreate-render/commit/3a7cae6270af70497356cd88e0287ae4d1740d0f))
+
 ## [1.41.4](https://github.com/CoCreate-app/CoCreate-render/compare/v1.41.3...v1.41.4) (2024-06-23)
 
 

package/package.json

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

package/src/index.js

@@ -283,6 +283,13 @@ async function renderTemplate(template, data, key, index, keyPath) {
     if (templateData.source && templateData.source.element)
         renderType = templateData.source.element.getAttribute('render-type');
 
+    let renderReverse
+    if (templateData.source && templateData.source.element) {
+        renderReverse = templateData.source.element.getAttribute('render-reverse');
+        if (!renderReverse)
+            renderReverse = template.element.getAttribute('render-reverse');
+    }
+
     if (key && !Array.isArray(renderData) || renderType === "object") {
         if (renderType && Array.isArray(renderData) && renderData.length === 1)
             renderData = renderData[0]
@@ -356,7 +363,7 @@ async function renderTemplate(template, data, key, index, keyPath) {
                 if (key !== 'data')
                     index = i
                 await renderValues(clone.element, object, key, renderAs, null, null, index);
-                insertElement(template, clone.element, index);
+                insertElement(template, clone.element, index, '', data, renderReverse);
             }
         }
     }
@@ -400,7 +407,7 @@ function cloneTemplate(template) {
     return renderedNode;
 }
 
-function insertElement(template, element, index, currentIndex) {
+function insertElement(template, element, index, currentIndex, data, renderReverse) {
     let eid = element.getAttribute('eid')
     if (!eid) {
         eid = uuid.generate(6)
@@ -410,22 +417,54 @@ function insertElement(template, element, index, currentIndex) {
     if (index !== null && index >= 0) {
         if (!template.clones)
             template = template.template
-        const clones = Array.from(template.clones);
+        // const clones = Array.from(template.clones);
 
         let item
-        if (currentIndex) {
+        if (!currentIndex && currentIndex !== 0) {
+            if (template.clones.has(eid))
+                return
+            item = [eid, element];
+        }
+
+        const clones = Array.from(template.clones);
+
+        if (currentIndex || currentIndex === 0) {
             item = clones.splice(currentIndex, 1)[0];
+        }
+
+        if (data.$filter && data.$filter.startingIndex)
+            index += data.$filter.startingIndex
+        clones.splice(index, 0, item);  // Insert item into clones at the specified index
+
+        if (renderReverse) {
+            // Chat-specific logic: reverse rendering but still inserting based on sorting
+
+            // If we're rendering in reverse order, we want to respect the insertion index
+            if (clones[index + 1] && clones[index + 1][1] !== element) {
+                // Insert before the next element (reverse order means newer items come before older ones)
+                clones[index + 1][1].insertAdjacentElement('afterend', element);
+            } else if (clones[index] && clones[index][1] !== element) {
+                // Insert after the current element if there's no next element
+                clones[index][1].insertAdjacentElement('beforeend', element);
+            } else {
+                // Fallback: insert before the template if clones are empty or undefined
+                template.element.insertAdjacentElement('afterend', element);
+            }
+
         } else {
-            item = [eid, element];
+            // Non-chat logic: handle ascending or descending order as usual
+            if (clones[index + 1] && clones[index + 1][1] !== element) {
+                // Insert before the next element
+                clones[index + 1][1].insertAdjacentElement('beforebegin', element);
+            } else if (clones[index] && clones[index][1] !== element) {
+                // Insert after the current element if there's no next element
+                clones[index][1].insertAdjacentElement('afterend', element);
+            } else {
+                // Fallback: insert before the template if clones are empty or undefined
+                template.element.insertAdjacentElement('beforebegin', 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)
@@ -615,8 +654,9 @@ async function renderValue(node, data, placeholder, renderAs, renderedNode, inde
             let value;
             try {
 
-                if (match[1] === 'index' && index >= 0) {  // {[]} - Dot-notation
+                if (match[1] === 'index' && index >= 0) {  // {{index}} - index
                     value = index
+                    match[0] = '{{' + match[1] + '}}'
                 } else if (match[1].startsWith('[') && match[1].endsWith(']')) {  // {[]} - Dot-notation
                     match[1] = match[1].slice(1, -1);
                     value = getRenderValue(node, data, match[1], renderAs);