@cocreate/api - npm Package Compare versions

Comparing version 1.19.2 to 1.20.0

package.json

 {
   "name": "@cocreate/api",
-  "version": "1.19.2",
+  "version": "1.20.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. ",
@@ -5,0 +5,0 @@ "keywords": [

src/index.js

@@ -1,14 +0,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;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

187853

decreased by-0.75%

Number of package files

18

decreased by-10%

Lines of code

323

decreased by-11.99%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes