@cocreate/render 1.32.0 → 1.34.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+# [1.34.0](https://github.com/CoCreate-app/CoCreate-render/compare/v1.33.0...v1.34.0) (2023-11-22)
+
+
+### Features
+
+* improved placeholder support ([165c450](https://github.com/CoCreate-app/CoCreate-render/commit/165c450b833c317ce5b55f9d2fc9d9de16d68f69))
+
+# [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)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/render",
-  "version": "1.32.0",
+  "version": "1.34.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

@@ -534,52 +534,74 @@ async function renderValues(node, data, key, renderAs, keyPath, parent) {
 
 async function renderValue(node, data, placeholder, renderAs, renderedNode) {
     let output = placeholder;
-
-    if (placeholder.match(/{{(.*?)}}/)) {
-        if (renderedNode) {
-            renderedNodes.set(node, renderedNode)
-        }
-
-        let match
-        do {
-            match = output.match(/{{([A-Za-z0-9_.,\[\]\- ]*)}}/); // works by getting inner matches first
-            // match = output.match(/{{([^}]*)}}/);
-            // match = output.match(/{{(.*?)}}/);
-            if (match) {
-                let value
-                try {
-                    let Data = JSON.parse('{' + match[1].replace(/'/g, '"') + '}');
-                    if (Data.storage || Data.database || Data.array || Data.object || Data.index) {
-                        Data.method = 'object.read'
-                        value = await CoCreate.crud.send(Data)
-                        value = value.object[0][Data.key]
+    let regex = /\{([^{}]+)\}/
+    let match;
+    do {
+        match = output.match(regex);
+        if (match) {
+            let value;
+            try {
+                if (match[1].startsWith('[') && match[1].endsWith(']')) {  // {[]} - Dot-notation
+                    match[1] = match[1].slice(1, -1);
+                    value = getRenderValue(node, data, match[1], renderAs);
+                } else if (match[1].startsWith('(') && match[1].endsWith(')')) { // {()} - CSS Selector and JSON Structure
+                    match[1] = match[1].slice(1, -1);
+                    // TODO: utils.queryElements(match[1])
+                    // element.getValue()
+                } else if (output.includes('{(' + match[0] + ')}')) { // {()} - JSON Structure
+                    match[0] = '{(' + match[0] + ')}'
+                    try {
+                        let Data = JSON.parse('{' + match[1].replace(/'/g, '"') + '}');
+                        if (Data.storage || Data.database || Data.array || Data.object || Data.index) {
+                            Data.method = 'object.read'
+                            value = await CoCreate.crud.send(Data)
+                            value = value.object[0][Data.key]
+                        }
+                    } catch (error) {
+                        value = getRenderValue(node, data, match[1], renderAs)
                     }
-                } catch (error) {
-                    value = getRenderValue(node, data, match[1], renderAs)
+                } else if (output.includes('{{' + match[1] + '}}')) {  // {{}} - Dot-notation && JSON Structure
+                    match[0] = '{{' + match[1] + '}}'
+                    try {
+                        let Data = JSON.parse('{' + match[1].replace(/'/g, '"') + '}');
+                        if (Data.storage || Data.database || Data.array || Data.object || Data.index) {
+                            Data.method = 'object.read'
+                            value = await CoCreate.crud.send(Data)
+                            value = value.object[0][Data.key]
+                        }
+                    } catch (error) {
+                        value = getRenderValue(node, data, match[1], renderAs)
+                    }
+                } else {
+                    // Otherwise, retun original ouptut
+                    return output
                 }
 
-                if (value || value === "") {
-                    if (typeof value === "object")
-                        value = JSON.stringify(value, null, 2)
+            } catch (error) {
+                console.error(error)
+            }
 
-                    output = output.replace(match[0], value);
-                } else if (renderAs) {
-                    if (match[0].startsWith(`{{${renderAs}.`)) {
-                        output = output.replace(match[0], "");
-                    } else {
-                        match = null
-                    }
+            if (value || value === "") {
+                if (typeof value === "object") {
+                    value = JSON.stringify(value, null, 2);
+                }
+                output = output.replace(match[0], value);
+            } else if (renderAs) {
+                if (match[0].startsWith(`{{${renderAs}.`)) {
+                    output = output.replace(match[0], "");
                 } else {
-                    match = null
+                    match = null;
                 }
-
+            } else {
+                match = null;
             }
+        }
+    } while (match);
 
-        } while (match)
-    }
     return output;
 }
 
+
 function getRenderValue(node, data, key, renderAs) {
     let value = getValueFromObject(data, key);
 
@@ -652,9 +674,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'
 
@@ -683,7 +708,7 @@ async function renderKey(element, params) {
 Actions.init({
     name: "renderKey",
     callback: (action) => {
-        renderKey(action.element, action.params);
+        renderKey(action);
     }
 });
 
@@ -774,4 +799,4 @@ Observer.init({
 
 init()
 
-export default { render, sources, renderedNodes }
+export default { render, renderValue, sources, renderedNodes }