@cocreate/render 1.41.5 → 1.42.1

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [1.42.1](https://github.com/CoCreate-app/CoCreate-render/compare/v1.42.0...v1.42.1) (2024-11-02)
+
+
+### Bug Fixes
+
+* handeling of render-as $auto ([017dd71](https://github.com/CoCreate-app/CoCreate-render/commit/017dd71b400ed202aacd425eb63d76fdb7f9a968))
+* observer taget has been renamed to selector ([adbd2c9](https://github.com/CoCreate-app/CoCreate-render/commit/adbd2c9768f439189da40ae1fcdaa333fff2f2da))
+
+# [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)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/render",
-  "version": "1.41.5",
+  "version": "1.42.1",
   "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]
@@ -342,6 +349,11 @@ async function renderTemplate(template, data, key, index, keyPath) {
 
             for (let i = 0; i < renderData.length; i++) {
                 let clone = cloneTemplate(template);
+
+                let test = clone.element.getAttribute('render-as')
+                if (test)
+                    renderAs = test
+
                 clone.keyPath = template.keyPath || '' + `[${i}]`
 
                 let object
@@ -356,7 +368,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);
             }
         }
     }
@@ -379,7 +391,8 @@ function cloneTemplate(template) {
     clone.setAttribute('render-clone', '');
 
     let renderAs = clone.getAttribute('render-as')
-    if (renderAs) {
+    if (renderAs === '$auto') {
+        renderAs = uuid.generate(6)
         clone = clone.outerHTML.replace(/\$auto/g, renderAs);
     }
 
@@ -400,7 +413,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 +423,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 && 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)
@@ -841,7 +886,7 @@ Actions.init({
 Observer.init({
     name: 'render',
     observe: ['addedNodes'],
-    target: elementSelector,
+    selector: elementSelector,
     callback: function (mutation) {
         init(mutation.target)
     }
@@ -862,7 +907,7 @@ Observer.init({
 Observer.init({
     name: 'render',
     observe: ['addedNodes'],
-    target: '[render]',
+    selector: '[render]',
     callback: function (mutation) {
         if (mutation.target.hasAttribute('render-clone'))
             return
@@ -884,7 +929,7 @@ Observer.init({
 // Observer.init({
 //     name: 'render',
 //     observe: ['addedNodes'],
-//     target: '[render-clone]',
+//   selector: '[render-clone]',
 //     callback: function (mutation) {
 //         let renderedNode = renderedNodes.get(mutation.target)
 //         if (!renderedNode) return
@@ -917,7 +962,7 @@ Observer.init({
 Observer.init({
     name: 'renderNodesRemoved',
     observe: ['removedNodes'],
-    target: '[render-clone]',
+    selector: '[render-clone]',
     callback: function (mutation) {
         if (mutation.target.parentElement) return
         let renderedNode = renderedNodes.get(mutation.target)