@mxenabled/web-connect-widget-sdk 0.0.2 → 0.0.4

package/README.md

@@ -0,0 +1,25 @@
+# MX Web Connect Widget SDK
+
+## Purpose
+
+The purpose of this project is to be able to easily integrate the MX connect widget into a web app.
+
+## Implementation guide
+
+The implementation guide lives in the MX docs [here](Add something here when it exists).
+
+## How it works
+
+This package mounts an connect widget iframe to the DOM, listens for post messages, and provides callbacks for handling MX events.
+
+## API Documentation
+
+The api documentation is [here](./API.md)
+
+## Contributing
+
+Read the [contributing guide](./CONTRIBUTING.md) to learn about the development process.
+
+## License
+
+This project is lincensed under the terms of the [MIT license](LICENSE).

package/dist/ConnectWidget.d.ts

@@ -1,9 +1,11 @@
+import { Event } from './consts';
 interface ConnectWidgetProps {
     containerSelector: string;
     iframeProps?: Record<string, unknown>;
+    onEvent: (event: Event) => void;
     url: string;
 }
-export declare const ConnectWidget: ({ containerSelector, iframeProps, url, }: ConnectWidgetProps) => {
+export declare const ConnectWidget: ({ containerSelector, iframeProps, onEvent, url, }: ConnectWidgetProps) => {
     mount: () => void;
     unmount: () => void;
 };

package/dist/consts.d.ts

@@ -0,0 +1,4 @@
+export type Event = {
+    metadata: Record<string, unknown>;
+    type: string;
+};

package/dist/index.d.ts

@@ -1 +1,2 @@
 export { ConnectWidget } from './ConnectWidget';
+export type { Event } from './consts';

package/dist/index.js

@@ -1,30 +1,37 @@
-const m = ({
-  containerSelector: n,
-  iframeProps: o,
-  url: s
+const g = ({
+  containerSelector: s,
+  iframeProps: i,
+  onEvent: a,
+  url: o
 }) => {
-  const t = document.createElement("iframe"), { style: i, ...c } = o || {}, a = {
-    height: "100%",
-    width: "100%",
-    ...i ?? {}
+  const t = document.createElement("iframe"), { style: c, ...d } = i || {}, m = c || { height: "100%", width: "100%" };
+  Object.assign(t.style, m);
+  for (const [e, n] of Object.entries(d))
+    e.startsWith("data-") ? t.setAttribute(e, String(n)) : Object.assign(t, { [e]: n });
+  t.src = o;
+  const r = (e) => {
+    if (e.origin !== new URL(o).origin)
+      return;
+    const { data: n } = e, { metadata: f, type: u } = n;
+    a({
+      metadata: f,
+      type: u
+    });
   };
-  Object.assign(t.style, a);
-  for (const [e, r] of Object.entries(c))
-    e.startsWith("data-") ? t.setAttribute(e, String(r)) : Object.assign(t, { [e]: r });
-  return t.src = s, {
+  return {
     mount: () => {
-      const e = document.querySelector(n);
+      const e = document.querySelector(s);
       if (!e)
         throw new Error(
-          `Container with selector "${n}" not found.`
+          `Container with selector "${s}" not found.`
         );
-      e.appendChild(t);
+      e.appendChild(t), window.addEventListener("message", r);
     },
     unmount: () => {
-      t.remove();
+      t.remove(), window.removeEventListener("message", r);
     }
   };
 };
 export {
-  m as ConnectWidget
+  g as ConnectWidget
 };

package/dist/index.umd.cjs

@@ -1 +1 @@
-(function(e,o){typeof exports=="object"&&typeof module<"u"?o(exports):typeof define=="function"&&define.amd?define(["exports"],o):(e=typeof globalThis<"u"?globalThis:e||self,o(e.index={}))})(this,(function(e){"use strict";const o=({containerSelector:i,iframeProps:r,url:d})=>{const t=document.createElement("iframe"),{style:f,...c}=r||{},u={height:"100%",width:"100%",...f??{}};Object.assign(t.style,u);for(const[n,s]of Object.entries(c))n.startsWith("data-")?t.setAttribute(n,String(s)):Object.assign(t,{[n]:s});return t.src=d,{mount:()=>{const n=document.querySelector(i);if(!n)throw new Error(`Container with selector "${i}" not found.`);n.appendChild(t)},unmount:()=>{t.remove()}}};e.ConnectWidget=o,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}));
+(function(t,o){typeof exports=="object"&&typeof module<"u"?o(exports):typeof define=="function"&&define.amd?define(["exports"],o):(t=typeof globalThis<"u"?globalThis:t||self,o(t.index={}))})(this,(function(t){"use strict";const o=({containerSelector:s,iframeProps:a,onEvent:c,url:r})=>{const n=document.createElement("iframe"),{style:f,...u}=a||{},m=f||{height:"100%",width:"100%"};Object.assign(n.style,m);for(const[e,i]of Object.entries(u))e.startsWith("data-")?n.setAttribute(e,String(i)):Object.assign(n,{[e]:i});n.src=r;const d=e=>{if(e.origin!==new URL(r).origin)return;const{data:i}=e,{metadata:l,type:g}=i;c({metadata:l,type:g})};return{mount:()=>{const e=document.querySelector(s);if(!e)throw new Error(`Container with selector "${s}" not found.`);e.appendChild(n),window.addEventListener("message",d)},unmount:()=>{n.remove(),window.removeEventListener("message",d)}}};t.ConnectWidget=o,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mxenabled/web-connect-widget-sdk",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "MX Connect Web Widget SDK",
   "files": [
     "dist"