@cocreate/render 1.40.2 → 1.40.3

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## [1.40.3](https://github.com/CoCreate-app/CoCreate-render/compare/v1.40.2...v1.40.3) (2024-03-18)
+
+
+### Bug Fixes
+
+* handling of placeholder matching ([b80be78](https://github.com/CoCreate-app/CoCreate-render/commit/b80be78f2026c4a438115366e5dbc90faf323c2a))
+* if key and data[key] is an array ([4478c11](https://github.com/CoCreate-app/CoCreate-render/commit/4478c116507b490a334e1010a2037ee6c12531c4))
+* omit matches that do not match the if conditions ([b589020](https://github.com/CoCreate-app/CoCreate-render/commit/b5890205eeae38e5be1f4cdf4d48eed6da211afb))
+
 ## [1.40.2](https://github.com/CoCreate-app/CoCreate-render/compare/v1.40.1...v1.40.2) (2024-02-13)
 
 

package/package.json

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

package/src/index.js

@@ -171,7 +171,7 @@ async function render({ source, element, selector, data, key, index, currentInde
                 renderedNodes.delete(clone)
                 clone.remove()
             }
-        } else if (key || Array.isArray(data)) {
+        } else if (key && Array.isArray(data[key]) || Array.isArray(data)) {
             if (update) {
                 for (let j = 0; j < data[key].length; j++) {
                     let clone
@@ -200,8 +200,10 @@ async function render({ source, element, selector, data, key, index, currentInde
 
                 await renderTemplate(element[i], data, key, index);
             }
-        } else
-            await renderValues(element[i], data);
+        } else {
+            let renderAs = element[i].getAttribute('render-as') || key;
+            await renderValues(element[i], data, key, renderAs);
+        }
 
     }
 
@@ -583,6 +585,8 @@ async function renderValues(node, data, key, renderAs, keyPath, parent) {
 async function renderValue(node, data, placeholder, renderAs, renderedNode) {
     let output = placeholder;
     let regex = /\{([^{}]+)\}/
+    let omitted = {}
+
     let match;
     do {
         match = output.match(regex);
@@ -621,8 +625,7 @@ async function renderValue(node, data, placeholder, renderAs, renderedNode) {
                         value = getRenderValue(node, data, match[1], renderAs)
                     }
                 } else {
-                    // Otherwise, retun original ouptut
-                    return output
+                    omitted[`<|${match[1]}|>`] = match[0]
                 }
 
             } catch (error) {
@@ -633,19 +636,25 @@ async function renderValue(node, data, placeholder, renderAs, renderedNode) {
                 if (typeof value === "object") {
                     value = JSON.stringify(value, null, 2);
                 }
-                output = output.replace(match[0], value);
+                output = output.replaceAll(match[0], value);
             } else if (renderAs) {
                 if (match[0].startsWith(`{{${renderAs}.`)) {
-                    output = output.replace(match[0], "");
+                    output = output.replaceAll(match[0], "");
                 } else {
-                    match = null;
+                    output = output.replaceAll(match[0], `<|${match[1]}|>`);
+                    omitted[`<|${match[1]}|>`] = match[0]
                 }
             } else {
+                // output = output.replace(match[0], `<|${match[1]}|>`);
                 match = null;
             }
         }
     } while (match);
 
+    for (let key of Object.keys(omitted)) {
+        output = output.replaceAll(key, omitted[key]);
+    }
+
     return output;
 }
 
@@ -760,6 +769,28 @@ Actions.init({
     }
 });
 
+Actions.init({
+    name: "render",
+    callback: async (action) => {
+        if (!action.form)
+            return
+
+        let elements
+        if (action.params)
+            elements = queryElements({ element: action.element, selector: action.params, type: 'selector' })
+        else
+            elements = queryElements({ element: action.element, prefix: 'render' })
+
+        let data = await action.form.getData()
+        for (let i = 0; i < elements.length; i++)
+            render({ source: elements[i], data: data[0] });
+
+        document.dispatchEvent(new CustomEvent('render', {
+            detail: {}
+        }));
+    }
+});
+
 Observer.init({
     name: 'render',
     observe: ['addedNodes'],