@cocreate/render 1.33.0 → 1.35.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+# [1.35.0](https://github.com/CoCreate-app/CoCreate-render/compare/v1.34.0...v1.35.0) (2023-11-25)
+
+
+### Bug Fixes
+
+* pass attributes renamed to state ([c3c96d7](https://github.com/CoCreate-app/CoCreate-render/commit/c3c96d795b405054a8669b4d05cd69b89d103cc6))
+* update nav, edit button and css path ([5b6cad4](https://github.com/CoCreate-app/CoCreate-render/commit/5b6cad4d112d736b1fec04a7bc897f22b961e086))
+
+
+### Features
+
+* upgrade dependencies for latest features and fixes ([18468c3](https://github.com/CoCreate-app/CoCreate-render/commit/18468c3992d47414e1ffa9ae27a60abed0cf9a8e))
+
+# [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)
 
 

package/docs/index.html

@@ -28,7 +28,7 @@
             type="text/css" />
         <link
             rel="stylesheet"
-            href="/docs/index.css"
+            href="../index.css"
             array="files"
             object="60888216117c640e7596303f"
             key="src"
@@ -38,15 +38,15 @@
     </head>
 
     <body>
+        <!-- Navbar  -->
         <nav
-            class="nav display:flex align-items:center left:0px background:whitesmoke padding-top:10px padding-bottom:10px"
+            class="width:100% display:flex align-items:center background:transparent padding-top:10px padding-bottom:10px"
             content_id="content"
-            scroll="sticky-nav,hide-nav"
-            scroll-up="10"
-            scroll-down="10"
-            array="files"
-            object="60395ef42b3ac232657040fd"
-            key="src"></nav>
+            scroll="sticky-nav,"
+            scroll-up="5"
+            scroll-down="5"
+            path="../"
+            src="../components/navbar.html"></nav>
         <sidenav
             id="menuL"
             class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:0px width:300px@xl"
@@ -333,7 +333,7 @@
                         <li
                             class="padding:15px_0px border-bottom:1px_solid_lightgrey">
                             <h4>
-                                <span>setValue(elements, data, [passTo])</span>
+                                <span>setValue(elements, data, [stateTo])</span>
                             </h4>
                             <p>This is main function.</p>
                             <div>
@@ -360,7 +360,7 @@
                             </div>
                             <div>
                                 <p>
-                                    <strong>passTo</strong
+                                    <strong>stateTo</strong
                                     ><span class="cocreate-badge warning"
                                         >Type:string</span
                                     ><span class="cocreate-badge warning"
@@ -566,10 +566,8 @@
             <button
                 href="https://github.com/CoCreate-app/CoCreate-render/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..."
                 target="_blank"
-                class="position:fixed bottom:15px right:15px padding:15px background:dodgerblue color:#fff font-size:1.5rem grow-hover border-radius:50% border-width:0 box-shadow:0px_2px_10px_0px_rgba(0,_0,_0,_0.4)">
-                <i
-                    class="height:20px fill:#505050"
-                    src="/assets/svg/pencil-alt.svg"></i>
+                class="display:flex justify-content:center align-items:center position:fixed bottom:15px right:15px height:50px width:50px border-radius:50% box-shadow:0px_2px_10px_0px_rgba(0,_0,_0,_0.4)">
+                <i class="height:20px" src="../assets/svg/pencil-alt.svg"></i>
             </button>
         </main>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/render",
-  "version": "1.33.0",
+  "version": "1.35.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.4",
-    "@cocreate/api": "^1.15.12",
-    "@cocreate/element-prototype": "^1.13.2",
-    "@cocreate/observer": "^1.12.0",
-    "@cocreate/utils": "^1.27.4"
+    "@cocreate/actions": "^1.13.0",
+    "@cocreate/api": "^1.16.0",
+    "@cocreate/element-prototype": "^1.14.1",
+    "@cocreate/observer": "^1.13.0",
+    "@cocreate/utils": "^1.28.0"
   }
 }

package/src/index.js

@@ -32,6 +32,23 @@ const sources = new Map()
 const renderedNodes = new Map()
 const elementSelector = '[render-selector], [render-closest], [render-parent], [render-next], [render-previous]'
 
+
+/**
+ * Initializes elements based on specified rendering attributes. If a specific element is provided, it initializes that element.
+ * If no element is provided, it queries and initializes all elements matching the defined selector criteria for rendering attributes.
+ *
+ * Supported rendering attributes:
+ * - render-selector: [Describe what this attribute does]
+ * - render-closest: [Describe what this attribute does]
+ * - render-parent: [Describe what this attribute does]
+ * - render-next: [Describe what this attribute does]
+ * - render-previous: [Describe what this attribute does]
+ *
+ * @param {(Element|Element[]|HTMLCollection|null)} [element] - Optional. A single element, an array of elements, an HTMLCollection, or null.
+ *     - If an HTMLCollection or an array of elements is provided, each element in the collection/array is initialized.
+ *     - If a single element is provided, only that element is initialized.
+ *     - If null or omitted, the function queries and initializes all elements matching the 'elementSelector'.
+ */
 function init(element) {
     if (element && !(element instanceof HTMLCollection) && !Array.isArray(element))
         element = [element]
@@ -48,6 +65,21 @@ function init(element) {
     }
 }
 
+/**
+ * Asynchronously renders content based on the provided parameters. This function handles the rendering logic for elements
+ * based on data sources, selectors, and other options.
+ *
+ * @param {Object} options - An object containing the parameters for rendering.
+ * @param {Object} options.source - The data source used for rendering.
+ * @param {Element} options.element - The DOM element where content will be rendered.
+ * @param {string} options.selector - CSS selector to specify target elements for rendering.
+ * @param {Object} options.data - Data to be used in rendering.
+ * @param {string} [options.key] - Optional key to reference specific parts of the data.
+ * @param {number} [options.index] - Optional index, typically used when rendering lists or arrays.
+ * @param {number} [options.currentIndex] - The current index in a list or array rendering process.
+ * @param {boolean} [options.update] - Flag to indicate if the rendering should update existing content.
+ * @param {boolean} [options.remove] - Flag to indicate if the rendering should remove elements instead of updating or appending.
+ */
 async function render({ source, element, selector, data, key, index, currentIndex, update, remove }) {
     if (!element) {
         if (source) {
@@ -453,9 +485,9 @@ async function renderValues(node, data, key, renderAs, keyPath, parent) {
         }
         // });
 
-        if (CoCreate.pass) {
-            if (node.hasAttribute('[pass_id]'))
-                CoCreate.pass.initElement(node)
+        if (CoCreate.state) {
+            if (node.hasAttribute('[state_id]'))
+                CoCreate.state.initElement(node)
         }
 
         if (node.tagName === 'SCRIPT' && node.src) {
@@ -534,52 +566,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)
+                    }
+                } 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)
                     }
-                } 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);
 
@@ -777,4 +831,4 @@ Observer.init({
 
 init()
 
-export default { render, sources, renderedNodes }
+export default { render, renderValue, sources, renderedNodes }