@cocreate/api 1.19.2 → 1.20.1

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+## [1.20.1](https://github.com/CoCreate-app/CoCreate-api/compare/v1.20.0...v1.20.1) (2024-02-05)
+
+
+### Bug Fixes
+
+* Removed https://cdn.cocreate.app/latest/CoCreate.min.css ([cde1867](https://github.com/CoCreate-app/CoCreate-api/commit/cde1867f966c6dfdc7d9e3042c8130baafa3c65e))
+
+# [1.20.0](https://github.com/CoCreate-app/CoCreate-api/compare/v1.19.2...v1.20.0) (2024-02-03)
+
+
+### Bug Fixes
+
+* now used in client only ([bad8ddd](https://github.com/CoCreate-app/CoCreate-api/commit/bad8ddd4aac147056e59255ef5de5af984ece845))
+
+
+### Features
+
+* init a module and its attributes using ([1238015](https://github.com/CoCreate-app/CoCreate-api/commit/1238015b42861f3be0488efcf950f5f3717f55e1))
+
 ## [1.19.2](https://github.com/CoCreate-app/CoCreate-api/compare/v1.19.1...v1.19.2) (2024-02-02)
 
 

package/docs/form.html

@@ -11,9 +11,7 @@
 		<meta name="keywords" content="drag and drop, colaboration, dnd utility, drag and drop utility" />
 		<meta name="robots" content="index,follow" />
 		<meta property="og:image" content="https://cdn.cocreate.app/docs/api.png">
-		<!-- CoCreate CSS -->
-		<!-- CoCreate CSS -->
-		<link rel="stylesheet" href="https://cdn.cocreate.app/latest/CoCreate.min.css" type="text/css" />
+		
 		<link rel="stylesheet" href="/docs/index.css" array="files" object="60888216117c640e7596303f" key="src" type="text/css" save="true" />
 		<link rel="manifest" href="/manifest.webmanifest" />
 	</head>

package/docs/index.html

@@ -11,9 +11,6 @@
 		<meta name="keywords" content="drag and drop, collaboration, dnd utility, drag and drop utility" />
 		<meta name="robots" content="index,follow" />
 		<meta property="og:image" content="https://cdn.cocreate.app/docs/api.png">
-
-		<!-- CoCreate CSS -->
-		<link rel="stylesheet" href="https://cdn.cocreate.app/latest/CoCreate.min.css" type="text/css" />
 		<link rel="stylesheet" href="/docs/index.css" array="files" object="60888216117c640e7596303f" key="src" type="text/css" save="true" />
 
 		<link rel="manifest" href="/manifest.webmanifest" />

package/docs/module.html

@@ -13,7 +13,7 @@
 	<meta property="og:image" content="https://cdn.cocreate.app/docs/api.png">
 
 	<!-- CoCreate CSS -->
-	<link rel="stylesheet" href="https://cdn.cocreate.app/latest/CoCreate.min.css" type="text/css" />
+	<link rel="stylesheet" href="" type="text/css" />
 	<link rel="stylesheet" href="/docs/index.css" array="files" object="60888216117c640e7596303f" key="src" type="text/css" save="true" />
     <link rel="manifest" href="/manifest.webmanifest">
 </head>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/api",
-  "version": "1.19.2",
+  "version": "1.20.1",
   "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

@@ -1,14 +1,198 @@
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(["./client"], function(CoCreateApi) {
-        	return factory(CoCreateApi)
-        });
-    } else if (typeof module === 'object' && module.exports) {
-      const CoCreateApi = require("./server.js")
-      module.exports = factory(CoCreateApi);
-    } else {
-        root.returnExports = factory(root["./client.js"]);
-  }
-}(typeof self !== 'undefined' ? self : this, function (CoCreateApi) {
-  return CoCreateApi;
-}));
+/*globals CustomEvent, config*/
+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';
+
+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 };
+
+            Socket.listen(name, (data) => {
+                self.response(name, data);
+            });
+
+            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'],
+                target: `[${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.name, object.method, data);
+        }
+    },
+
+    response: function (name, data) {
+        const method = data.method.substring(name.length + 1);
+        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({ name, method, data })
+
+            document.dispatchEvent(new CustomEvent(name, {
+                detail: {
+                    data: data[name]
+                }
+            }));
+        }
+    },
+
+    send: function (name, method, data) {
+        Socket.send({ method: name + '.' + method, [name]: data, broadcastBrowser: false, status: 'await' });
+    },
+
+    // TODO: handle $param operator
+    getData: async function ({ name, method, element, form }) {
+        const data = {}
+
+        if (!form && element)
+            form = element.closest('form');
+
+        let elements
+        if (form)
+            elements = form.querySelectorAll(`[${name}="${method}"]`);
+        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) {
+                data[key] = await elements[i].getValue()
+            }
+        }
+
+        return dotNotationToObject(data);
+    },
+
+    // TODO: handle $param operator
+    setData: function ({ name, method, data, form }) {
+        if (!form)
+            form = document;
+
+        let elements = form.querySelectorAll(`[${name}="${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`)
+                    let value = getValueFromObject(data[name], key);
+                    elements[i].setValue(value);
+                }
+            }
+        }
+
+    }
+
+};
+
+Observer.init({
+    name: `apiNodeObserver`,
+    observe: ['addedNodes'],
+    target: '[module], [api]',
+    callback: function (mutation) {
+        let name = mutation.target.getAttribute('api') || mutation.target.getAttribute('module')
+        CoCreateApi.register({ name, endPoints: {} });
+    }
+});
+
+CoCreateApi.init()
+
+export default CoCreateApi;

package/src/client.js

@@ -1,215 +0,0 @@
-/*globals CustomEvent, config*/
-import { getAttributes, getValueFromObject, dotNotationToObject } from "@cocreate/utils";
-import observer from "@cocreate/observer";
-import socket from "@cocreate/socket-client";
-import action from '@cocreate/actions';
-import { render } from '@cocreate/render';
-import '@cocreate/element-prototype';
-
-const CoCreateApi = {
-    components: {},
-
-    init: function ({ name, endPoints, options }) {
-        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.components[name] === 'undefined') {
-            this.components[name] = { name, endPoints, options };
-
-            socket.listen(name, (data) => {
-                self.__response(name, data);
-            });
-
-            for (const endPoint of Object.keys(endPoints)) {
-                socket.listen(name + '.' + endPoint, (data) => {
-                    self.__response(name, data);
-                });
-
-                let functions = endPoints[endPoint]
-                if (typeof functions.request !== 'function') {
-                    functions.request = self.__request;
-                }
-                action.init({
-                    name: endPoint,
-                    endEvent: endPoint,
-                    callback: (data) => {
-                        const element = data.element
-                        let form = data.form || document
-                        const selector = `[${name}^="${endPoint}."]`
-                        let el = form.querySelector(selector)
-                        if (!el) return
-                        let 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: async function (object) {
-        if (object.type !== 'action')
-            return
-        if (!object.form)
-            object.form = element.closest('form');
-        let data = await CoCreateApi.getData(object);
-        CoCreateApi.send(object.name, object.endPoint, data);
-    },
-
-    __response: function (name, data) {
-        const endPoint = data.method.substring(name.length + 1);
-        const component = this.components[name];
-        const functions = component.endPoints[endPoint]
-        if (functions.listen !== false) {
-            if (typeof functions.response === 'function') {
-                functions.response(data[name]);
-            } else if (data.error) {
-                render({
-                    selector: `[template*='${name}']`,
-                    data: [{
-                        type: name,
-                        status: 'failed',
-                        message: data.error
-                    }]
-                });
-            } else {
-                CoCreateApi.setData({ name, endPoint, data })
-
-                document.dispatchEvent(new CustomEvent(endPoint, {
-                    detail: {
-                        data: data[name]
-                    }
-                }));
-            }
-        }
-    },
-
-    send: function (name, endPoint, data) {
-        let method = name + '.' + endPoint
-        socket.send({ method, endPoint, [name]: data, broadcastBrowser: false, status: 'await' });
-    },
-
-    parseParams: function ({ name, endPoint, element }) {
-        let attribute = element.getAttribute(name)
-        if (!attribute)
-            return false
-
-        let endPoints = this.components[name].endPoints
-        for (let k of Object.keys(endPoints)) {
-            if (attribute.startsWith(k)) {
-                endPoint = k
-                break;
-            }
-        }
-
-        let key = attribute.substring(endPoint.length + 1);
-        return { endPoint, key, dotNotation: attribute }
-
-    },
-
-
-    getData: async 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) {
-            if (!el || el.closest('[template]')) continue
-            let params = this.parseParams({ name, element: el })
-            if (params.key) {
-                data[params.key] = await el.getValue()
-            }
-        }
-
-        return dotNotationToObject(data);
-    },
-
-    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 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({
-                        selector: `[template="${templateid}"]`,
-                        data
-                    });
-                } else {
-                    let value = getValueFromObject(data, attribute);
-                    el.setValue(value);
-                }
-            }
-        }
-
-    }
-
-};
-
-export default CoCreateApi;

package/src/server.js

@@ -1,20 +0,0 @@
-class CoCreateApi {
-    constructor(crud) {
-        this.wsManager = crud.wsManager
-        this.crud = crud
-        this.init()
-    }
-
-    async getOrganization(config, component) {
-
-        let organization = await this.crud.getOrganization(config);
-
-        if (!organization.error)
-            return false;
-
-        return organization
-    }
-}
-
-
-module.exports = CoCreateApi;