@qelos/web-sdk 3.1.27 → 3.1.30

package/README.md

@@ -1,47 +1,27 @@
-# @qelos/sdk
-
-SDK to use Qelos common API endpoints.
-
-Can be used for both backend and frontend applications.
+# @qelos/web-sdk
 
+A package to manage communication between a Plugin MFE to a QELOS application host.
 ## Installation
 
 ```shell
-npm install @qelos/sdk
+npm install @qelos/web-sdk
 ```
 
 ## Usage
 
 ```typescript
-// my-sdk.ts
-import QelosSDK from '@qelos/sdk';
+import { authorize, code } from "@qelos/web-sdk";
 
-const sdk = new QelosSDK({appUrl: 'https://yourdomain.com', fetch: window.fetch});
-export default sdk;
-```
-**Note:** You can inject a fetch-like function, such as `node-fetch` or any fetch equivalent.
-
-### Basic usage of SDK instance:
-```typescript jsx
-// MyPostsList.tsx
-import sdk from './my-sdk';
-
-function MyPostsList() {
-  const [posts, setPosts] = useState([]);
-  const [querySearch, setQuery] = useState([]);
-  useEffect(() => {
-    sdk.posts.getList({q: querySearch, limit: 50});
-  }, [querySearch]);
-
-  return (
-    <div>
-      <input type="text" placeholder="Search posts" onChange={e => setQuery(e.target.value)}/>
-      {
-        posts.map(post => <PostItem post={post} key={post._id}/>)
-      }
-    </div>
-  )
-}
+// authorize your micro-frontend application 
+// to recognize the user and tenant of host application:
+const { user, tenant } = authorize();
+
+
+// add the "code" parameter given from this web-sdk
+// it's a code created for this specific intercation with the user:
+fetch('/api/you-own-api', {
+  headers: { code }
+})
 ```
 
 Enjoy!

package/dist/qelos.js

@@ -1,26 +1,38 @@
 let qelosHostname = '*';
 const callbacks = new Map();
 const FROM = 'qelos-mfe';
-window.addEventListener('message', (event) => {
-    if (event.data.qelosHostname) {
-        qelosHostname = event.data.qelosHostname;
-    }
-    if (callbacks.has(event.data.eventName)) {
-        const eventCallbacks = callbacks.get(event.data.eventName);
+function onEventFromHost({ eventName, payload } = {}) {
+    if (callbacks.has(eventName)) {
+        const eventCallbacks = callbacks.get(eventName);
         eventCallbacks.forEach((item) => {
-            item.callback(event.data.payload);
+            item.callback(payload);
             if (item.once) {
                 eventCallbacks.delete(item);
             }
         });
     }
+}
+window.addEventListener('message', (event) => {
+    if (event.data.qelosHostname) {
+        qelosHostname = event.data.qelosHostname;
+    }
+    if (event.data.events instanceof Array) {
+        event.data.events.forEach(onEventFromHost);
+    }
 });
-export function dispatch(eventName, payload) {
+const events = [];
+function dispatchEvents() {
     window.parent.postMessage({
         from: FROM,
-        eventName,
-        payload
+        events
     }, qelosHostname);
+    events.length = 0;
+}
+export function dispatch(eventName, payload) {
+    if (!events.length) {
+        requestAnimationFrame(dispatchEvents);
+    }
+    events.push({ eventName, payload });
 }
 export function on(eventName, callback, { once } = { once: false }) {
     if (!callbacks.has(eventName)) {

package/dist/qelos.js.map

@@ -1 +1 @@
-{"version":3,"file":"qelos.js","sourceRoot":"","sources":["../src/qelos.ts"],"names":[],"mappings":"AAAA,IAAI,aAAa,GAAG,GAAG,CAAC;AAExB,MAAM,SAAS,GAAG,IAAI,GAAG,EAA4C,CAAC;AAEtE,MAAM,IAAI,GAAG,WAAW,CAAC;AAEzB,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE;IAC3C,IAAI,KAAK,CAAC,IAAI,CAAC,aAAa,EAAE;QAC5B,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC;KAC1C;IACD,IAAI,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE;QACvC,MAAM,cAAc,GAAG,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC3D,cAAc,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YAC9B,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAClC,IAAI,IAAI,CAAC,IAAI,EAAE;gBACb,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;aAC7B;QACH,CAAC,CAAC,CAAA;KACH;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,UAAU,QAAQ,CAAC,SAAiB,EAAE,OAAa;IACvD,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC;QACxB,IAAI,EAAE,IAAI;QACV,SAAS;QACT,OAAO;KACR,EAAE,aAAa,CAAC,CAAC;AACpB,CAAC;AAED,MAAM,UAAU,EAAE,CAAC,SAAiB,EAAE,QAAmC,EAAE,EAAC,IAAI,EAAC,GAAG,EAAC,IAAI,EAAE,KAAK,EAAC;IAC/F,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;QAC7B,SAAS,CAAC,GAAG,CAAC,SAAS,EAAE,IAAI,GAAG,EAAE,CAAC,CAAA;KACpC;IACD,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,EAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,IAAI,KAAK,EAAC,CAAC,CAAC;AAChE,CAAC"}
+{"version":3,"file":"qelos.js","sourceRoot":"","sources":["../src/qelos.ts"],"names":[],"mappings":"AAAA,IAAI,aAAa,GAAG,GAAG,CAAC;AAExB,MAAM,SAAS,GAAG,IAAI,GAAG,EAA4C,CAAC;AAEtE,MAAM,IAAI,GAAG,WAAW,CAAC;AAEzB,SAAS,eAAe,CAAC,EAAC,SAAS,EAAE,OAAO,KAAS,EAAE;IACrD,IAAI,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;QAC5B,MAAM,cAAc,GAAG,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;QAChD,cAAc,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YAC9B,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;YACvB,IAAI,IAAI,CAAC,IAAI,EAAE;gBACb,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;aAC7B;QACH,CAAC,CAAC,CAAA;KACH;AACH,CAAC;AAED,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE;IAC3C,IAAI,KAAK,CAAC,IAAI,CAAC,aAAa,EAAE;QAC5B,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC;KAC1C;IACD,IAAG,KAAK,CAAC,IAAI,CAAC,MAAM,YAAY,KAAK,EAAE;QACrC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;KAC5C;AACH,CAAC,CAAC,CAAC;AAEH,MAAM,MAAM,GAAG,EAAE,CAAC;AAElB,SAAS,cAAc;IACrB,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC;QACxB,IAAI,EAAE,IAAI;QACV,MAAM;KACP,EAAE,aAAa,CAAC,CAAC;IAClB,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;AACpB,CAAC;AAED,MAAM,UAAU,QAAQ,CAAC,SAAiB,EAAE,OAAa;IACvD,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE;QAClB,qBAAqB,CAAC,cAAc,CAAC,CAAA;KACtC;IACD,MAAM,CAAC,IAAI,CAAC,EAAC,SAAS,EAAE,OAAO,EAAC,CAAC,CAAC;AACpC,CAAC;AAED,MAAM,UAAU,EAAE,CAAC,SAAiB,EAAE,QAAmC,EAAE,EAAC,IAAI,EAAC,GAAG,EAAC,IAAI,EAAE,KAAK,EAAC;IAC/F,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;QAC7B,SAAS,CAAC,GAAG,CAAC,SAAS,EAAE,IAAI,GAAG,EAAE,CAAC,CAAA;KACpC;IACD,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,EAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,IAAI,KAAK,EAAC,CAAC,CAAC;AAChE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qelos/web-sdk",
-  "version": "3.1.27",
+  "version": "3.1.30",
   "description": "Frontend Web SDK for Qelos API",
   "main": "./dist/index.js",
   "scripts": {

package/src/qelos.ts

@@ -4,27 +4,42 @@ const callbacks = new Map<string, Set<{ callback, once: boolean }>>();
 
 const FROM = 'qelos-mfe';
 
-window.addEventListener('message', (event) => {
-  if (event.data.qelosHostname) {
-    qelosHostname = event.data.qelosHostname;
-  }
-  if (callbacks.has(event.data.eventName)) {
-    const eventCallbacks = callbacks.get(event.data.eventName);
+function onEventFromHost({eventName, payload}: any = {}) {
+  if (callbacks.has(eventName)) {
+    const eventCallbacks = callbacks.get(eventName);
     eventCallbacks.forEach((item) => {
-      item.callback(event.data.payload);
+      item.callback(payload);
       if (item.once) {
         eventCallbacks.delete(item);
       }
     })
   }
-})
+}
 
-export function dispatch(eventName: string, payload?: any) {
+window.addEventListener('message', (event) => {
+  if (event.data.qelosHostname) {
+    qelosHostname = event.data.qelosHostname;
+  }
+  if(event.data.events instanceof Array) {
+    event.data.events.forEach(onEventFromHost);
+  }
+});
+
+const events = [];
+
+function dispatchEvents() {
   window.parent.postMessage({
     from: FROM,
-    eventName,
-    payload
+    events
   }, qelosHostname);
+  events.length = 0;
+}
+
+export function dispatch(eventName: string, payload?: any) {
+  if (!events.length) {
+    requestAnimationFrame(dispatchEvents)
+  }
+  events.push({eventName, payload});
 }
 
 export function on(eventName: string, callback: (payload: any) => unknown, {once} = {once: false}) {