@cocreate/api 1.22.0 → 1.22.2

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## [1.22.2](https://github.com/CoCreate-app/CoCreate-api/compare/v1.22.1...v1.22.2) (2025-04-11)
+
+
+### Bug Fixes
+
+* dispatch end event on action element rather than document ([805bb62](https://github.com/CoCreate-app/CoCreate-api/commit/805bb627f7de7dc918ca41ea57bfde1e82407e4e))
+* update observer observe param to type and and attributeName to attributeFilter ([ea6ab8d](https://github.com/CoCreate-app/CoCreate-api/commit/ea6ab8d8408696fdcc8959ea7fc199d706a5c05b))
+
+## [1.22.1](https://github.com/CoCreate-app/CoCreate-api/compare/v1.22.0...v1.22.1) (2025-01-18)
+
+
+### Bug Fixes
+
+* Call the function and assign its return value ([5102f60](https://github.com/CoCreate-app/CoCreate-api/commit/5102f60e13b07f4bcb6d84be18ae629489656cc7))
+* moved data in to object ([168bb0a](https://github.com/CoCreate-app/CoCreate-api/commit/168bb0a5694dec3feb5d14b67e4ff911cfd88c9c))
+
 # [1.22.0](https://github.com/CoCreate-app/CoCreate-api/compare/v1.21.3...v1.22.0) (2024-11-04)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/api",
-  "version": "1.22.0",
+  "version": "1.22.2",
   "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/index.js

@@ -2,233 +2,275 @@
 import { getValueFromObject, dotNotationToObject } from "@cocreate/utils";
 import Observer from "@cocreate/observer";
 import Socket from "@cocreate/socket-client";
-import Actions from '@cocreate/actions';
-import { render } from '@cocreate/render';
-import '@cocreate/element-prototype';
+import Actions from "@cocreate/actions";
+import { render } from "@cocreate/render";
+import "@cocreate/element-prototype";
 
 const CoCreateApi = {
-    modules: {},
-
-    init: function (moduleConfig) {
-        if (!moduleConfig) {
-            let elements = document.querySelectorAll('[api], [module]')
-            for (let i = 0; i < elements.length; i++) {
-                let name = elements[i].getAttribute('api') || elements[i].getAttribute('module')
-                this.register({ name, endPoints: {} });
-            }
-        } else {
-            let { name, endPoints, options } = moduleConfig
-            this.register({ name, endPoints, options });
-            if (options && options.socket !== false && !Socket.sockets.size)
-                Socket.create({ prefix: 'api' });
-        }
-    },
-
-    register: function ({ name, endPoints, options }) {
-        const self = this;
-        if (typeof this.modules[name] === 'undefined') {
-            this.modules[name] = { name, endPoints, options };
-
-            Actions.init({
-                name,
-                callback: (action) => {
-                    action.form = action.form || document
-                    self.request({ ...action, type: 'action' })
-                }
-            });
-
-            const inputEvent = (element) => {
-                element.addEventListener('input', (e) => {
-                    if (!e.detail || e.detail && e.detail.skip != true) {
-                        self.request({ name, element, type: 'input' })
-                    }
-                });
-            }
-
-            let elements = document.querySelectorAll(`[${name}]`)
-            for (let i = 0; i < elements.length; i++) {
-                inputEvent(elements[i])
-                this.request({ name, element: elements[i], type: 'onload' })
-            }
-
-            Observer.init({
-                name: `${name}NodeObserver`,
-                observe: ['addedNodes'],
-                selector: `[${name}]`,
-                callback: function (mutation) {
-                    inputEvent(mutation.target)
-                    self.request({ name, element: mutation.target, type: 'nodeObserver' })
-                }
-            });
-
-            Observer.init({
-                name: `${name}AttributeObserver`,
-                observe: ['attributes'],
-                attributeName: [name],
-                callback: function (mutation) {
-                    self.request({ name, element: mutation.target, type: 'attributeObserver' })
-                }
-            });
-        }
-    },
-
-
-    request: async function (object) {
-        if (object.element) {
-            if (!object.method)
-                object.method = object.element.getAttribute(object.name)
-            if (!object.key)
-                object.key = object.element.getAttribute(`${object.name}-key`)
-            if (!object.event)
-                object.event = object.element.getAttribute(`${object.name}-event`)
-        }
-
-        if (this.modules[object.name][object.method] && this.modules[object.name][object.method].request)
-            this.modules[object.name][object.method].request(object)
-        else if (!object.event && object.type === 'action' || object.event && object.event.includes(object.type)) {
-            let data = await CoCreateApi.getData(object);
-            CoCreateApi.send(object, data);
-        }
-    },
-
-    response: function (object, data) {
-        const name = object.name
-        const method = object.method;
-        if (this.modules[name][method] && this.modules[name][method].response)
-            this.modules[name][method].response(data[name])
-        else if (data.error) {
-            render({
-                selector: `[template*='${name}']`,
-                data: [{
-                    type: name,
-                    method,
-                    status: 'failed',
-                    message: data.error
-                }]
-            });
-        } else {
-            CoCreateApi.setData(object, data)
-
-            document.dispatchEvent(new CustomEvent(object.endEvent, {
-                detail: {
-                    data: data[name]
-                }
-            }));
-        }
-    },
-
-    send: async function (object, data) {
-        data = await Socket.send({ method: object.name + '.' + object.method, [object.name]: data, broadcast: false, broadcastBrowser: false, status: 'await' });
-        this.response(object, data);
-    },
-
-    getData: async function ({ name, method, element, form }) {
-        let data = {}
-
-        if (!form && element)
-            form = element.closest('form');
-
-        let elements
-        if (form)
-            elements = form.querySelectorAll(`[${name}="${method}"]:not([${name}-request="false"])`);
-        if (!elements || elements.length == 0)
-            elements = [element]
-
-        for (let i = 0; i < elements.length; i++) {
-            if (!elements[i] || elements[i].closest('[template]'))
-                continue
-            let key = elements[i].getAttribute(`${name}-key`)
-            if (key) {
-                let value = await elements[i].getValue()
-                if (key.endsWith('[]')) {
-                    if (!data[key])
-                        data[key] = [];
-
-                    if (Array.isArray(value))
-                        data[key].push(...value);
-                    else
-                        data[key].push(value);
-                } else
-                    data[key] = await elements[i].getValue()
-
-            }
-
-            let endpoint = elements[i].getAttribute('endpoint')
-            if (endpoint) {
-                data.endpoint = endpoint
-            }
-
-            if (elements[i].getAttribute('query') && elements[i].getAttribute('query') !== 'false') {
-                data.query = true
-            }
-        }
-
-        let params = {}, hasParams = false
-        for (let i = 0; true; i++) {
-            if (`$param[${i}]` in data) {
-                params[`$param[${i}]`] = data[`$param[${i}]`]
-                delete data[`$param[${i}]`]
-                hasParams = true
-            } else {
-                break;
-            }
-        }
-        data = dotNotationToObject(data);
-        if (hasParams)
-            data = { ...params, ...data }
-
-        return data
-    },
-
-    setData: function (object, data) {
-        const name = object.name
-        let form = object.form
-        if (!form)
-            form = document;
-
-        let elements = form.querySelectorAll(`[${name}="${object.method}"]`);
-        if (!elements || elements.length == 0)
-            return
-
-        for (let i = 0; i < elements.length; i++) {
-            let attribute = elements[i].getAttribute(name)
-            if (attribute) {
-                if (elements[i].hasAttribute('actions')) continue;
-                let templateid = elements[i].getAttribute('template_id')
-                if (templateid) {
-                    let items = document.querySelectorAll(`[templateid="${templateid}"]`)
-                    for (let item of items)
-                        item.remove()
-                    render({
-                        selector: `[template="${templateid}"]`,
-                        data
-                    });
-                } else {
-                    let key = elements[i].getAttribute(`${name}-key`)
-                    if (key === '{}')
-                        elements[i].setValue(data[name])
-                    else {
-                        let value = getValueFromObject(data[name], key);
-                        elements[i].setValue(value);
-                    }
-                }
-            }
-        }
-
-    }
-
+	modules: {},
+
+	init: function (moduleConfig) {
+		if (!moduleConfig) {
+			let elements = document.querySelectorAll("[api], [module]");
+			for (let i = 0; i < elements.length; i++) {
+				let name =
+					elements[i].getAttribute("api") ||
+					elements[i].getAttribute("module");
+				this.register({ name, endPoints: {} });
+			}
+		} else {
+			let { name, endPoints, options } = moduleConfig;
+			this.register({ name, endPoints, options });
+			if (options && options.socket !== false && !Socket.sockets.size)
+				Socket.create({ prefix: "api" });
+		}
+	},
+
+	register: function ({ name, endPoints, options }) {
+		const self = this;
+		if (typeof this.modules[name] === "undefined") {
+			this.modules[name] = { name, endPoints, options };
+
+			Actions.init({
+				name,
+				callback: (action) => {
+					action.form = action.form || document;
+					self.request({ ...action, type: "action" });
+				}
+			});
+
+			const inputEvent = (element) => {
+				element.addEventListener("input", (e) => {
+					if (!e.detail || (e.detail && e.detail.skip != true)) {
+						self.request({ name, element, type: "input" });
+					}
+				});
+			};
+
+			let elements = document.querySelectorAll(`[${name}]`);
+			for (let i = 0; i < elements.length; i++) {
+				inputEvent(elements[i]);
+				this.request({ name, element: elements[i], type: "onload" });
+			}
+
+			Observer.init({
+				name: `${name}NodeObserver`,
+				types: ["addedNodes"],
+				selector: `[${name}]`,
+				callback: function (mutation) {
+					inputEvent(mutation.target);
+					self.request({
+						name,
+						element: mutation.target,
+						type: "nodeObserver"
+					});
+				}
+			});
+
+			Observer.init({
+				name: `${name}AttributeObserver`,
+				types: ["attributes"],
+				attributeFilter: [name],
+				callback: function (mutation) {
+					self.request({
+						name,
+						element: mutation.target,
+						type: "attributeObserver"
+					});
+				}
+			});
+		}
+	},
+
+	request: async function (object) {
+		if (object.element) {
+			if (!object.method)
+				object.method = object.element.getAttribute(object.name);
+			if (!object.key)
+				object.key = object.element.getAttribute(`${object.name}-key`);
+			if (!object.event)
+				object.event = object.element.getAttribute(
+					`${object.name}-event`
+				);
+		}
+
+		if (
+			this.modules[object.name][object.method] &&
+			this.modules[object.name][object.method].request
+		)
+			this.modules[object.name][object.method].request(object);
+		else if (
+			(!object.event && object.type === "action") ||
+			(object.event && object.event.includes(object.type))
+		) {
+			object.data = await CoCreateApi.getData(object);
+			if (Object.keys(object.data).length) CoCreateApi.send(object);
+		}
+	},
+
+	response: function (object) {
+		const name = object.name;
+		const method = object.method;
+		const data = object.data;
+		if (this.modules[name][method] && this.modules[name][method].response)
+			this.modules[name][method].response(data[name]);
+		else if (data.error) {
+			render({
+				selector: `[template*='${name}']`,
+				data: [
+					{
+						type: name,
+						method,
+						status: "failed",
+						message: data.error
+					}
+				]
+			});
+		} else {
+			CoCreateApi.setData(object);
+
+			object.element.dispatchEvent(
+				new CustomEvent(object.endEvent, {
+					detail: {
+						data: object
+					}
+				})
+			);
+		}
+	},
+
+	send: async function (object) {
+		object.data = await Socket.send({
+			method: object.name + "." + object.method,
+			[object.name]: object.data,
+			broadcast: false,
+			broadcastBrowser: false,
+			status: "await"
+		});
+		this.response(object);
+	},
+
+	getData: async function ({ name, method, element, form }) {
+		let data = {};
+
+		if (!form && element) form = element.closest("form");
+		if (!form) form = document;
+
+		let elements;
+		if (form)
+			elements = form.querySelectorAll(
+				`[${name}="${method}"]:not([${name}-request="false"])`
+			);
+		if (!elements || elements.length == 0) elements = [element];
+
+		for (let i = 0; i < elements.length; i++) {
+			if (!elements[i] || elements[i].closest("[template]")) continue;
+			let key = elements[i].getAttribute(`${name}-key`);
+			if (key) {
+				let value =
+					elements[i].stripeElement || (await elements[i].getValue());
+				if (key.endsWith("[]")) {
+					if (!data[key]) data[key] = [];
+
+					if (Array.isArray(value)) data[key].push(...value);
+					else data[key].push(value);
+				} else data[key] = value;
+			}
+
+			let endpoint = elements[i].getAttribute("endpoint");
+			if (endpoint) {
+				data.endpoint = endpoint;
+			}
+
+			if (
+				elements[i].getAttribute("query") &&
+				elements[i].getAttribute("query") !== "false"
+			) {
+				data.query = true;
+			}
+		}
+
+		let params = {},
+			hasParams = false;
+		for (let i = 0; true; i++) {
+			if (`$param[${i}]` in data) {
+				params[`$param[${i}]`] = data[`$param[${i}]`];
+				delete data[`$param[${i}]`];
+				hasParams = true;
+			} else {
+				break;
+			}
+		}
+		data = dotNotationToObject(data);
+		if (hasParams) data = { ...params, ...data };
+
+		return data;
+	},
+
+	setData: function (object) {
+		const name = object.name;
+		const data = object.data;
+		let form = object.form;
+		if (!form) form = document;
+
+		let elements = form.querySelectorAll(
+			`[${name}="${object.method}"]:not([${name}-response="false"])`
+		);
+		if (!elements || elements.length == 0) return;
+
+		for (let i = 0; i < elements.length; i++) {
+			let attribute = elements[i].getAttribute(name);
+			if (attribute) {
+				if (elements[i].hasAttribute("actions")) continue;
+				let templateid = elements[i].getAttribute("template_id");
+				if (templateid) {
+					let items = document.querySelectorAll(
+						`[templateid="${templateid}"]`
+					);
+					for (let item of items) item.remove();
+					render({
+						selector: `[template="${templateid}"]`,
+						data
+					});
+				} else if (elements[i].renderValue) {
+					let key = elements[i].getAttribute(`${name}-key`);
+					if (key === "{}") {
+						elements[i].renderValue(data[name]);
+					} else {
+						let value = getValueFromObject(data[name], key);
+						if (typeof value === "function") {
+							value = value(); // Call the function and assign its return value.
+						}
+						elements[i].renderValue(value);
+					}
+				} else {
+					let key = elements[i].getAttribute(`${name}-key`);
+					if (key === "{}") elements[i].setValue(data[name]);
+					else {
+						let value = getValueFromObject(data[name], key);
+						if (typeof value === "function") {
+							value = value(); // Call the function and assign its return value.
+						}
+						elements[i].setValue(value);
+					}
+				}
+			}
+		}
+	}
 };
 
 Observer.init({
-    name: `apiNodeObserver`,
-    observe: ['addedNodes'],
-    selector: '[module], [api]',
-    callback: function (mutation) {
-        let name = mutation.target.getAttribute('api') || mutation.target.getAttribute('module')
-        CoCreateApi.register({ name, endPoints: {} });
-    }
+	name: `apiNodeObserver`,
+	types: ["addedNodes"],
+	selector: "[module], [api]",
+	callback: function (mutation) {
+		let name =
+			mutation.target.getAttribute("api") ||
+			mutation.target.getAttribute("module");
+		CoCreateApi.register({ name, endPoints: {} });
+	}
 });
 
-CoCreateApi.init()
+CoCreateApi.init();
 
-export default CoCreateApi;
+export default CoCreateApi;