@cocreate/api 1.7.3 → 1.8.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [1.8.0](https://github.com/CoCreate-app/CoCreate-api/compare/v1.7.3...v1.8.0) (2023-03-15)
+
+
+### Features
+
+* type param to define an interaction. onload, input, action, attributeObserver and nodeObserver ([c2ecede](https://github.com/CoCreate-app/CoCreate-api/commit/c2ecedeae6911210e36d148319085c0a1d1c8443))
+
 ## [1.7.3](https://github.com/CoCreate-app/CoCreate-api/compare/v1.7.2...v1.7.3) (2023-02-12)
 
 

package/demo/client.js

@@ -2,15 +2,33 @@ import api from "@cocreate/api";
 
 const CoCreateExample = {
     name: "example",
-    actions: {
+    endPoints: {
         'tokens.create':{},
-        create:{	
-            realtime: true,		
-            request: function (data) {
-            }, 
-            response: function (data) {
+        create: {	
+            onload: function (name, endPoint, element) {
+            
+            },
+            input: function (name, endPoint, element) {
+
+            },
+            action: function (name, endPoint, element){
+
+            },
+            observer: function (name, endPoint, element) {
+
+            },
+            request: function (name, endPoint, element) {
+
+            },
+            response: function (name, endPoint, element) {
 
             }, 
+            read: true,
+            realtime: true,
+            save: true,
+            update: true,
+            listen: true
+
         }
     }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/api",
-  "version": "1.7.3",
+  "version": "1.8.0",
   "description": "A simple api helper component in vanilla javascript used by JavaScript developers to create thirdparty api intergrations. CoCreate-api includes the client component and server side for api processing. Thirdparty apis can be accessible using HTML5 attributes and/or JavaScript API. ",
   "keywords": [
     "thirdparty-api-intergration",

package/src/client.js

@@ -1,128 +1,186 @@
 /*globals CustomEvent, config*/
 import {getAttributes, getValueFromObject, dotNotationToObject} from "@cocreate/utils";
+import observer from "@cocreate/observer";
 import socket from "@cocreate/socket-client";
-import CoCreateAction from '@cocreate/actions';
-import CoCreateRender from '@cocreate/render';
+import action from '@cocreate/actions';
+import render from '@cocreate/render';
 import '@cocreate/element-prototype';
-import utils from "@cocreate/utils/src/utils";
 
 const CoCreateApi = { 
 	components: {},
- 
-	init: function({name, actions, realtime}) {
-		this.register({name, actions});
-		if (!socket.sockets.size)
+	
+	init: function({name, endPoints, options}) {
+		this.register({name, endPoints, options});
+		if (options.socket !== false && !socket.sockets.size)
 			socket.create({prefix: 'api'});
-		document.addEventListener('input', (e)=> {
-			let action = e.target.getAttribute(name)
-			if (action) {
-				action = action.split('.', 1)
-				action = action[0]
-				if (actions[action].realtime !== false) {
-					if (realtime !== false && actions[action].realtime !== undefined) {
-						let functions = actions[action]
-						if (typeof functions.request === 'function') {
-							functions.request(name, action, e.target)
-						}
-					}
-				}
-			}
-
-		})
 	},
 	
-	register: function({name, actions}) {
+	register: function({name, endPoints, options}) {
 		const self = this;
 		if (typeof this.components[name] === 'undefined') {
-			this.components[name] = {name, actions};
+			this.components[name] = {name, endPoints, options};
 
 			socket.listen(name, (data) => {
 				self.__response(name, data);
 			});
 			
-			for (const action of Object.keys(actions)) {
-				let functions = actions[action]
+			for (const endPoint of Object.keys(endPoints)) {
+				let functions = endPoints[endPoint]
 				if (typeof functions.request !== 'function') {
 					functions.request = self.__request;
 				} 
-				CoCreateAction.init({
-					name: action,
-					endEvent: action,
+				action.init({
+					name: endPoint,
+					endEvent: endPoint,
 					callback: (element) => {
-						functions.request(name, action, element);
+						let params
+						let form = element.closest('form') || document
+						const selector = `[${name}^="${endPoint}."]`
+						let el = form.querySelector(selector)
+						if (!el) return
+							params = self.parseParams({name, element: el})
+						if (params) {
+							functions.request({name, ...params, element, form, type: 'action'})
+						}
 					},
 				});
 			}
+
+			const inputEvent = (element) => {
+				const self = this
+				element.addEventListener('input', (e) => {
+					if (element.hasAttribute(name)) {
+						let params = self.parseParams({name, element})
+						if (params) {
+							if (!e.detail || e.detail && e.detail.skip != true) {
+								endPoints[params.endPoint].request({name, ...params, element, type: 'input'})
+							}
+						}
+					}
+				});	
+			}		
+
+			let elements = document.querySelectorAll(`[${name}]`)
+			for (let element of elements) {
+				let params = this.parseParams({name, element})
+				if (params) {
+					endPoints[params.endPoint].request({name, ...params, element, type:'onload'})
+					inputEvent(element)
+				}
+			}
+
+			observer.init({ 
+				name:  `${name}NodeObserver`,
+				observe: ['addedNodes'],
+				target: `[${name}]`,
+				callback: function(mutation) {
+					let params = self.parseParams({name, element: mutation.target})
+					if (params) {
+						endPoints[params.endPoint].request({name, ...params, element: mutation.target, type: 'nodeObserver'});
+						inputEvent(mutation.target)
+					}
+				}
+			});
+	
+			observer.init({
+				name:  `${name}AttributeObserver`,
+				observe: ['attributes'],
+				attributeName: [name],
+				callback: function(mutation) {
+					let params = self.parseParams({name, element: mutation.target})
+					if (params) {
+						endPoints[params.endPoint].request({name, ...params, element: mutation.target, type: 'attributeObserver'});
+					}
+				}
+			});									
 		}
 	},
 
-	__request: function(name, action, element) {
+	__request: function({name, endPoint, element}) {
 		let form = element.closest('form');
-		let data = this.getData(name, action, form);
-		this.send(name, action, data[action]);
+		let data = this.getData({name, endPoint, form});
+		this.send(name, endPoint, data[endPoint]);
 	},
 
 	__response: function(name, data) {
-		const {action, response} = data;
+		const {endPoint, response} = data;
 		const component = this.components[name];
-		const functions = component.actions[action]
-		if (typeof functions.response === 'function') {
-			functions.response(response);
+		const functions = component.endPoints[endPoint]
+		if (functions.listen !== false) {
+			if (typeof functions.response === 'function') {
+				functions.response(response);
+			} else
+				this.setData({name, endPoint, data})
+			
+			document.dispatchEvent(new CustomEvent(endPoint, {
+				detail: {
+					data: response
+				}
+			}));
 		}
-		else
-			this.render(action, response);
-		
-		document.dispatchEvent(new CustomEvent(action, {
-			detail: {
-				data: response
-			}
-		}));
 	},
 
-	send: function(name, action, data) { 
-		socket.send(name, {action, data, broadcastBrowser: false});
+	send: function(name, endPoint, data) { 
+		socket.send(name, {endPoint, data, broadcastBrowser: false});
 	},
 	
-	render: function(action, data) {
-		CoCreateRender.data({
-			selector: `[template="${action}"]`, 
-			data: data
-		});
-	},
+	parseParams: function({name, endPoint, element}) {
+		let attribute = element.getAttribute(name)
+		if (!attribute)
+			return false
+
+		let dotNotation = attribute
+		let params = attribute.split('.')
+		endPoint = params[0]
+		let key = params[1]
+		return {endPoint, key, dotNotation, params}
 	
-	getData: function(attribute, action, form) {
-		let data = {}
-		const selector = `[${attribute}^="${action}."]`
-		if (!form)
-			form = document;
-		let elements = form.querySelectorAll(selector);
-		if (!elements || elements.length == 0) return
+	},
+
 	
+	getData: function({name, endPoint, element, form}) {
+		const data = {}
+		const selector = `[${name}^="${endPoint}."]`
+		let elements
+		if (form)
+			elements = form.querySelectorAll(selector);
+		if (!elements || elements.length == 0)
+			elements = [element]
 		for (let el of elements) {
-			let name = el.getAttribute(attribute)
-			let value = el.getValue();
-			if (name)
-				data[name] = value
-		}
+			if (el.closest('[template]')) continue
+			let attribute = el.getAttribute(name)
+			if (attribute)
+				data[attribute] = el.getValue()
+		}	
+
 		return dotNotationToObject(data);
 	},
 
-	setData: function(attribute, action, data, form) {
-		const selector = `[${attribute}^="${action}."]`
+	setData: function({name, endPoint, data, form}) {
+		const selector = `[${name}^="${endPoint}."]`
 		if (!form)
 			form = document;
 		let elements = form.querySelectorAll(selector);
 		if (!elements || elements.length == 0) return
 	
 		for (let el of elements) {
-			let name = el.getAttribute(attribute)
-			const { isRead, isUpdate, isCrdt } = getAttributes(el);
-			if (!name || isRead == "false" || isUpdate == "false" || isCrdt == "true") continue;
-			
-			if (el.hasAttribute('actions')) continue;
-
-			let value = getValueFromObject({[action]: {[name]: data}}, name);
-			el.setValue(value);
+			let attribute = el.getAttribute(name)
+			if (attribute) {
+				if (el.hasAttribute('actions')) continue;
+				let templateid = el.getAttribute('template_id')
+				if (templateid) {
+					let items = document.querySelectorAll(`[templateid="${templateid}"]`)
+					for (let item of items)
+						item.remove()
+					render.data({
+						selector: `[template="${templateid}"]`, 
+						data
+					});
+				} else {
+					let value = getValueFromObject(data, attribute);
+					el.setValue(value);
+				}
+			}
 		}
 
 	}