@cocreate/elements 1.25.2 → 1.26.0

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+# [1.26.0](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.25.2...v1.26.0) (2023-11-03)
+
+
+### Bug Fixes
+
+* favicon.ico path ([16da6e6](https://github.com/CoCreate-app/CoCreate-elements/commit/16da6e69bc2ee467694631f09e7efd2696e28aec))
+* init new elements only ([1228c4c](https://github.com/CoCreate-app/CoCreate-elements/commit/1228c4cfd3a2c4a0a4274191efd6be36a267951e))
+* map elements to prevent duplicate reads ([81c3101](https://github.com/CoCreate-app/CoCreate-elements/commit/81c31018a62555ccfa02e973b667ed8ee59fa584))
+* update dependencies to the lates versions ([82c04cf](https://github.com/CoCreate-app/CoCreate-elements/commit/82c04cf2996090be0caee092de95d1080953c4b1))
+* update method to use object.update etc ([575d800](https://github.com/CoCreate-app/CoCreate-elements/commit/575d80021bd6e0e169e7da7a3e9f4139b1277333))
+
+
+### Features
+
+* get attribute path and replace {{path}} ([c48878b](https://github.com/CoCreate-app/CoCreate-elements/commit/c48878b7c8467ba70314846d3d22cb90c9195f34))
+
 ## [1.25.2](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.25.1...v1.25.2) (2023-10-25)
 
 

package/demo/index.html

@@ -5,9 +5,9 @@
         <!-- CoCreate Favicon -->
         <link
             rel="icon"
-            href="https://cdn.cocreate.app/favicon.ico"
-            type="image/ico"
-            sizes="16x16" />
+            type="image/png"
+            sizes="32x32"
+            href="../assets/favicon.ico" />
         <link rel="manifest" href="/manifest.webmanifest" />
     </head>
     <body class="padding:20px">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/elements",
-  "version": "1.25.2",
+  "version": "1.26.0",
   "description": "Fetch content into any html element by using html5 attributes to query data stored in CoCreate headless CMS. If data is changed it will instantly reflect in html tags as changes are broadcasted in realtime",
   "keywords": [
     "elements",
@@ -58,12 +58,12 @@
     "webpack-log": "^3.0.1"
   },
   "dependencies": {
-    "@cocreate/actions": "^1.12.0",
-    "@cocreate/crud-client": "^1.28.10",
-    "@cocreate/element-prototype": "^1.11.7",
-    "@cocreate/filter": "^1.23.5",
-    "@cocreate/observer": "^1.11.6",
-    "@cocreate/render": "^1.29.0",
-    "@cocreate/utils": "^1.26.1"
+    "@cocreate/actions": "^1.12.1",
+    "@cocreate/crud-client": "^1.28.12",
+    "@cocreate/element-prototype": "^1.11.8",
+    "@cocreate/filter": "^1.23.6",
+    "@cocreate/observer": "^1.11.7",
+    "@cocreate/render": "^1.29.1",
+    "@cocreate/utils": "^1.26.2"
   }
 }

package/src/fetchSrc.js

@@ -20,13 +20,16 @@ async function initElement(element) {
     if (!src || /{{\s*([\w\W]+)\s*}}/g.test(src))
         return;
     let initialize = initializing.get(element)
-    if (!initialize || initialize.src != src){
-        initializing.set(element, {src});
+    if (!initialize || initialize.src != src) {
+        initializing.set(element, { src });
         if (src) {
             try {
-                let response = await fetch(src); 
+                let response = await fetch(src);
                 let text = await response.text();
                 if (text) {
+                    let path = element.getAttribute('path')
+                    if (path)
+                        text = text.replaceAll('{{path}}', path)
                     element.setValue(text);
                     initializing.delete(element)
                 }
@@ -34,26 +37,26 @@ async function initElement(element) {
                 console.log('FetchSrc error:' + err);
             }
         }
-    }   
+    }
 };
 
 observer.init({
-	name: 'CoCreateSrc',
-	observe: ['addedNodes'],
-	target: selector,
-	callback: function(mutation) {
-		initElement(mutation.target);
-	}
+    name: 'CoCreateSrc',
+    observe: ['addedNodes'],
+    target: selector,
+    callback: function (mutation) {
+        initElement(mutation.target);
+    }
 });
 
 observer.init({
-	name: 'CoCreateSrcAttributes',
-	observe: ['attributes'],
-	attributeName: ['src'],
-	target: selector,
-	callback: function(mutation) {
-		initElement(mutation.target);
-	}
+    name: 'CoCreateSrcAttributes',
+    observe: ['attributes'],
+    attributeName: ['src'],
+    target: selector,
+    callback: function (mutation) {
+        initElement(mutation.target);
+    }
 });
 
 init()

package/src/index.js

@@ -21,7 +21,6 @@
  * you must obtain a commercial license from CoCreate LLC.
  * For details, visit <https://cocreate.app/licenses/> or contact us at sales@cocreate.app.
  */
-/** */
 
 import Observer from '@cocreate/observer';
 import Actions from '@cocreate/actions';
@@ -36,9 +35,10 @@ import { reset } from './form'
 const selector = "[storage], [database], [array], [render-json]";
 const elements = new Map();
 const keys = new Map();
-const forms = new Map(); // form, [elements]
+const forms = new Map();
 const debounce = new Map();
 
+/** */
 async function init(element) {
     if (element && !(element instanceof HTMLCollection) && !Array.isArray(element))
         element = [element]
@@ -61,8 +61,8 @@ async function init(element) {
 
     if (dataObjects && dataObjects.size > 0) {
         for (let key of dataObjects.keys()) {
-            let { elements, data } = keys.get(key)
-            read(Array.from(elements.keys()), data, { string: key });
+            let { data } = keys.get(key)
+            read(Array.from(element), data, { string: key });
         }
     }
 }
@@ -91,7 +91,7 @@ async function initElement(el) {
         // }
 
         // let Data = JSON.parse(match[1]);
-        // Data.method = read.object
+        // Data.method = object.read
         // CRUD.send(Data)
 
     }
@@ -224,10 +224,21 @@ async function read(element, data, dataKey) {
     if (!data)
         data = { ...keys.get(dataKey).dataKey.object }
 
-    let delayTimer = debounce.get(dataKey.string)
-    clearTimeout(delayTimer);
-    delayTimer = setTimeout(function () {
-        debounce.delete(dataKey.string)
+    if (!(element instanceof HTMLCollection) && !Array.isArray(element))
+        element = [element]
+
+    let delay = debounce.get(dataKey.string)
+    if (!delay)
+        debounce.set(dataKey.string, delay = {})
+
+    if (!delay.elements)
+        delay.elements = new Map()
+
+    for (let el of element)
+        delay.elements.set(el, true)
+
+    clearTimeout(delay.timer);
+    delay.timer = setTimeout(function () {
         // TODO: should server support string and string array for type object, methods create, read, delete
         if (!data.$filter && data.type === 'object') {
             if (!data.object)
@@ -241,13 +252,18 @@ async function read(element, data, dataKey) {
                 return
         }
 
-        data.method = 'read.' + data.type
+        data.method = data.type + '.read'
 
         CRUD.send(data).then((data) => {
-            setData(element, data);
+            debounce.delete(dataKey.string)
+            let els = Array.from(delay.elements.keys())
+            clearTimeout(delay.timer);
+            delete delay.elements
+            delete delay.timer
+
+            setData(els, data);
         })
     }, 500);
-    debounce.set(dataKey.string, delayTimer)
 }
 
 async function setData(element, data) {
@@ -255,13 +271,12 @@ async function setData(element, data) {
         element = getDataElements(data)
         if (!element.length) return
     }
-
     if (!(element instanceof HTMLCollection) && !Array.isArray(element))
         element = [element]
 
     let type = data.type
     if (!type && data.method) {
-        type = data.method.split('.')[1]
+        type = data.method.split('.')[0]
     } else if (type == 'key')
         type = 'object'
 
@@ -284,7 +299,7 @@ async function setData(element, data) {
             if (key) {
                 if (!data[type].length) continue;
                 if (isRead == "false" || isCrdt == "true") continue;
-                if (isListen == "false" && !data.method.startsWith('read.')) continue;
+                if (isListen == "false" && !data.method.endsWith('.read')) continue;
             }
             // TODO: update.object data returned from server will not include $operator
             el.setValue(value);
@@ -294,7 +309,7 @@ async function setData(element, data) {
 
 async function filterData(element, data, type, key) {
     if (key) {
-        if (!data.type) return
+        if (!data || !type) return
         if (Array.isArray(data[type])) {
             let Data = []
             for (let doc of data[type]) {
@@ -305,13 +320,16 @@ async function filterData(element, data, type, key) {
                         Data.push(doc[key])
                 }
             }
-            let data = Data
+            if (Data.length === 1) {
+                data = { [key]: Data[0] }
+            } else
+                data = Data
         } else {
             data = { [key]: data[type][key] }
         }
     }
 
-    if (element.getFilter && data.method && !data.method.startsWith('read.'))
+    if (element.getFilter && data.method && !data.method.endsWith('.read'))
         await checkFilters(element, data, type)
     else if (element.renderValue)
         element.renderValue(data);
@@ -384,12 +402,12 @@ function checkIndex(element, data, Data, newData, type, filter) {
     if (!data.$filter)
         data.$filter = {}
 
-    if (data.method.startsWith('delete.')) {
+    if (data.method.endsWith('.delete')) {
         if (!index && index !== 0)
             return
         data.$filter.remove = true
     } else {
-        if (data.method.startsWith('create.')) {
+        if (data.method.endsWith('.create')) {
             if (index === -1) {
                 data.$filter.create = true
                 if (filter && filter.sort)
@@ -521,7 +539,7 @@ async function getData(form) {
 
             // console.log(type, value, data)
             if (!Data[Data.type] && Data.key) {
-                Data.method = 'create.' + Data.type
+                Data.method = Data.type + '.create'
                 if (Data.type === 'object') {
                     if (typeof Data.object === 'string')
                         Data.object = { _id: Data.object }
@@ -557,7 +575,7 @@ async function getData(form) {
                         else {
                             Data[Data.type][Data.key] = value
                             if (!Data[Data.type]._id)
-                                Data.method = 'create.' + Data.type
+                                Data.method = Data.type + '.create'
                         }
                 } else {
                     Data[Data.type] = { [Data[Data.type]]: value }
@@ -567,11 +585,11 @@ async function getData(form) {
                     if (!Data.key) return
                     delete Data.isUpdate
                     Data.updateKey = { [Data.key]: value }
-                    Data.method = 'update.' + Data.type
+                    Data.method = Data.type + '.update'
                 } else if (Data.isDelete || Data.isDelete === '') {
                     delete Data.isDelete
                     if (Data.type == 'object' && Data.key) {
-                        Data.method = 'update.' + Data.type
+                        Data.method = Data.type + '.update'
                         // TODO: Data.type can be a string _id or an array for string _id needs to be converted to object
                         if (typeof Data[Data.type] === 'string')
                             Data[Data.type] = { _id: Data[Data.type], [Data.key]: undefined }
@@ -580,16 +598,16 @@ async function getData(form) {
                         } else if (typeof Data[Data.type] === 'object')
                             Data[Data.type][Data.key] = undefined
                     } else {
-                        Data.method = 'delete.' + Data.type
+                        Data.method = Data.type + '.delete'
                     }
                 } else if (Data.type !== 'object' && Data[Data.type] === '') {
                     // if (!Data.key)
-                    //     Data.method = 'read.' + Data.type
+                    //     Data.method = Data.type + '.read'
                     // else if (Data.key === 'name')
-                    //     Data.method = 'create.' + Data.type
+                    //     Data.method = Data.type + '.create'
                 } else if (Data.type !== 'object' && Data[Data.type]) {
                     // if (Data.key)
-                    //     Data.method = 'update.' + Data.type
+                    //     Data.method = Data.type + '.update'
                 }
 
             }
@@ -672,34 +690,34 @@ async function save(element) {
         if (data[i].type === 'object' && !data[i].method) {
             if (typeof data[i].object === 'string') {
                 if (!data[i]._id)
-                    data[i].method = 'create.object'
+                    data[i].method = 'object.create'
                 else {
-                    data[i].method = 'update.object'
+                    data[i].method = 'object.update'
                     if (upsert)
                         data[i].upsert = true
                 }
             } else if (Array.isArray(data[i].object)) {
                 if (!data[i].object[0]._id)
-                    data[i].method = 'create.object'
+                    data[i].method = 'object.create'
                 else {
-                    data[i].method = 'update.object'
+                    data[i].method = 'object.update'
                     if (upsert)
                         data[i].upsert = true
                 }
             } else if (typeof data[i].object === 'object') {
                 if (!data[i].object._id)
-                    data[i].method = 'create.object'
+                    data[i].method = 'object.create'
                 else {
-                    data[i].method = 'update.object'
+                    data[i].method = 'object.update'
                     if (upsert)
                         data[i].upsert = true
                 }
             }
         }
 
-        if (data[i].method && data[i].method.startsWith('create.')) {
+        if (data[i].method && data[i].method.endsWith('.create')) {
             element.setAttribute(data[i].type, 'pending');
-        } else if (data[i].method && data[i].method.startsWith('update.') && data[i].type == 'object' && typeof value == 'string' && window.CoCreate.crdt && !'crdt') {
+        } else if (data[i].method && data[i].method.endsWith('.update') && data[i].type == 'object' && typeof value == 'string' && window.CoCreate.crdt && !'crdt') {
             return window.CoCreate.crdt.replaceText({
                 array: data[i].array,
                 key: data[i].key,
@@ -713,7 +731,7 @@ async function save(element) {
 
         Data.push(data[i])
 
-        if (data[i] && (data[i].method.startsWith('create.') || data[i].type !== 'object' && data[i].method.startsWith('update.'))) {
+        if (data[i] && (data[i].method.endsWith('.create') || data[i].type !== 'object' && data[i].method.endsWith('.update'))) {
             setTypeValue(element, data[i])
         } else if (data[i])
             document.dispatchEvent(new CustomEvent('saved', {
@@ -1067,7 +1085,7 @@ Actions.init([
             for (let i = 0; i < elements.length; i++) {
                 const data = getObject(elements[i]);
                 if (!data) return
-                data.method = 'delete.' + data.type
+                data.method = data.type + '.delete'
 
                 if (elements[i].renderValue) {
                     let selected = elements[i].querySelectorAll('.selected')