@uphold/enterprise-widget-sdk-core 0.2.0

package/dist/constants.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Exports.
+ */
+export declare const logSymbol: unique symbol;
+//# sourceMappingURL=constants.d.ts.map

package/dist/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,eAAO,MAAM,SAAS,eAAgB,CAAC"}

package/dist/constants.js

@@ -0,0 +1,4 @@
+/**
+ * Exports.
+ */
+export const logSymbol = Symbol('log');

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Exports.
+ */
+export * from './constants';
+export * from './types';
+export * from './widget';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC"}

package/dist/index.js

@@ -0,0 +1,6 @@
+/**
+ * Exports.
+ */
+export * from './constants';
+export * from './types';
+export * from './widget';

package/dist/types/base.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Module dependencies.
+ */
+import type { WidgetCancelMessageEventData, WidgetCancelMessageType, WidgetCompleteMessageEventData, WidgetCompleteMessageType, WidgetError, WidgetErrorMessageEventData, WidgetErrorMessageType, WidgetMessageEvent, WidgetReadyMessageType } from '@uphold/enterprise-widget-messaging-types';
+/**
+ * External API Types.
+ */
+export type { WidgetError, WidgetErrorMessageEventData, WidgetCompleteMessageEventData, WidgetCancelMessageEventData };
+export type WidgetReadyEventType = WidgetReadyMessageType;
+export type WidgetCompleteEventType = WidgetCompleteMessageType;
+export type WidgetCancelEventType = WidgetCancelMessageType;
+export type WidgetErrorEventType = WidgetErrorMessageType;
+export type WidgetReadyEventDetail = {
+    type: WidgetReadyEventType;
+};
+export type WidgetCompleteEventDetail = {
+    type: WidgetCompleteEventType;
+};
+export type WidgetCancelEventDetail = {
+    type: WidgetCancelEventType;
+};
+export type WidgetErrorEventDetail = {
+    type: WidgetErrorEventType;
+    error: string;
+};
+export type ExtractMessageEventDataForType<TMessageEvent extends WidgetMessageEvent, TType extends TMessageEvent['data']['type']> = Extract<TMessageEvent, {
+    data: {
+        type: TType;
+    };
+}>['data'];
+export type WidgetLoadEvent<TMessageEvent extends WidgetMessageEvent> = CustomEvent<ExtractMessageEventDataForType<TMessageEvent, 'load'>>;
+export type WidgetReadyEvent<TMessageEvent extends WidgetMessageEvent> = CustomEvent<ExtractMessageEventDataForType<TMessageEvent, 'ready'>>;
+export type WidgetCompleteEvent<TMessageEvent extends WidgetMessageEvent> = CustomEvent<ExtractMessageEventDataForType<TMessageEvent, 'complete'>>;
+export type WidgetCancelEvent<TMessageEvent extends WidgetMessageEvent> = CustomEvent<ExtractMessageEventDataForType<TMessageEvent, 'cancel'>>;
+export type WidgetErrorEvent<TMessageEvent extends WidgetMessageEvent> = CustomEvent<ExtractMessageEventDataForType<TMessageEvent, 'error'>>;
+export type WidgetEvent<TMessageEvent extends WidgetMessageEvent = WidgetMessageEvent> = WidgetReadyEvent<TMessageEvent> | WidgetCompleteEvent<TMessageEvent> | WidgetCancelEvent<TMessageEvent> | WidgetErrorEvent<TMessageEvent>;
+export type WidgetMountIframeOptions = Record<string, unknown>;
+export type WidgetOptions = {
+    debug?: boolean;
+};
+export type PaymentWidgetOptions = WidgetOptions;
+//# sourceMappingURL=base.d.ts.map

package/dist/types/base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../src/types/base.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EACV,4BAA4B,EAC5B,uBAAuB,EACvB,8BAA8B,EAC9B,yBAAyB,EACzB,WAAW,EACX,2BAA2B,EAC3B,sBAAsB,EACtB,kBAAkB,EAClB,sBAAsB,EACvB,MAAM,2CAA2C,CAAC;AAEnD;;GAEG;AAEH,YAAY,EAAE,WAAW,EAAE,2BAA2B,EAAE,8BAA8B,EAAE,4BAA4B,EAAE,CAAC;AAEvH,MAAM,MAAM,oBAAoB,GAAG,sBAAsB,CAAC;AAC1D,MAAM,MAAM,uBAAuB,GAAG,yBAAyB,CAAC;AAChE,MAAM,MAAM,qBAAqB,GAAG,uBAAuB,CAAC;AAC5D,MAAM,MAAM,oBAAoB,GAAG,sBAAsB,CAAC;AAE1D,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,EAAE,oBAAoB,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,IAAI,EAAE,uBAAuB,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,IAAI,EAAE,qBAAqB,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,EAAE,oBAAoB,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,8BAA8B,CACxC,aAAa,SAAS,kBAAkB,EACxC,KAAK,SAAS,aAAa,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,IACzC,OAAO,CAAC,aAAa,EAAE;IAAE,IAAI,EAAE;QAAE,IAAI,EAAE,KAAK,CAAA;KAAE,CAAA;CAAE,CAAC,CAAC,MAAM,CAAC,CAAC;AAE9D,MAAM,MAAM,eAAe,CAAC,aAAa,SAAS,kBAAkB,IAAI,WAAW,CACjF,8BAA8B,CAAC,aAAa,EAAE,MAAM,CAAC,CACtD,CAAC;AACF,MAAM,MAAM,gBAAgB,CAAC,aAAa,SAAS,kBAAkB,IAAI,WAAW,CAClF,8BAA8B,CAAC,aAAa,EAAE,OAAO,CAAC,CACvD,CAAC;AACF,MAAM,MAAM,mBAAmB,CAAC,aAAa,SAAS,kBAAkB,IAAI,WAAW,CACrF,8BAA8B,CAAC,aAAa,EAAE,UAAU,CAAC,CAC1D,CAAC;AACF,MAAM,MAAM,iBAAiB,CAAC,aAAa,SAAS,kBAAkB,IAAI,WAAW,CACnF,8BAA8B,CAAC,aAAa,EAAE,QAAQ,CAAC,CACxD,CAAC;AACF,MAAM,MAAM,gBAAgB,CAAC,aAAa,SAAS,kBAAkB,IAAI,WAAW,CAClF,8BAA8B,CAAC,aAAa,EAAE,OAAO,CAAC,CACvD,CAAC;AAEF,MAAM,MAAM,WAAW,CAAC,aAAa,SAAS,kBAAkB,GAAG,kBAAkB,IACjF,gBAAgB,CAAC,aAAa,CAAC,GAC/B,mBAAmB,CAAC,aAAa,CAAC,GAClC,iBAAiB,CAAC,aAAa,CAAC,GAChC,gBAAgB,CAAC,aAAa,CAAC,CAAC;AAEpC,MAAM,MAAM,wBAAwB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE/D,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,aAAa,CAAC"}

package/dist/types/base.js

@@ -0,0 +1,4 @@
+/**
+ * Module dependencies.
+ */
+export {};

package/dist/types/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Exports.
+ */
+export * from './base';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,QAAQ,CAAC"}

package/dist/types/index.js

@@ -0,0 +1,4 @@
+/**
+ * Exports.
+ */
+export * from './base';

package/dist/widget.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Module dependencies.
+ */
+import type { WidgetEvent, WidgetMountIframeOptions, WidgetOptions } from './types/base';
+import type { WidgetMessageEvent, WidgetSession } from '@uphold/enterprise-widget-messaging-types';
+import { logSymbol } from './constants';
+/**
+ * Widget base class.
+ */
+declare class Widget<TSession extends WidgetSession, TMessageEvent extends WidgetMessageEvent, TEvent extends WidgetEvent<TMessageEvent>> extends EventTarget {
+    #private;
+    session: TSession;
+    mountOptions?: WidgetMountIframeOptions;
+    options?: WidgetOptions;
+    [logSymbol]: {
+        log: (message?: any, ...optionalParams: any[]) => void;
+        warn: (message?: any, ...optionalParams: any[]) => void;
+    };
+    constructor(session: TSession, options?: WidgetOptions);
+    on<T extends TEvent['detail']['type']>(event: T, listener: (event: Extract<TEvent, {
+        detail: {
+            type: T;
+        };
+    }>) => void): void;
+    off<T extends TEvent['detail']['type']>(event: T, listener: (event: Extract<TEvent, {
+        detail: {
+            type: T;
+        };
+    }>) => void): void;
+    mountIframe(element: HTMLElement, mountOptions?: WidgetMountIframeOptions): void;
+    unmount(): void;
+}
+/**
+ * Exports.
+ */
+export { Widget };
+//# sourceMappingURL=widget.d.ts.map

package/dist/widget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"widget.d.ts","sourceRoot":"","sources":["../src/widget.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,wBAAwB,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AACzF,OAAO,KAAK,EAEV,kBAAkB,EAClB,aAAa,EACd,MAAM,2CAA2C,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC;;GAEG;AAEH,cAAM,MAAM,CACV,QAAQ,SAAS,aAAa,EAC9B,aAAa,SAAS,kBAAkB,EACxC,MAAM,SAAS,WAAW,CAAC,aAAa,CAAC,CACzC,SAAQ,WAAW;;IAGnB,OAAO,EAAE,QAAQ,CAAC;IAClB,YAAY,CAAC,EAAE,wBAAwB,CAAC;IACxC,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,CAAC,SAAS,CAAC;wBAEO,GAAG,qBAAqB,GAAG,EAAE;yBAI5B,GAAG,qBAAqB,GAAG,EAAE;MAG9C;gBAEU,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC,EAAE,aAAa;IAWtD,EAAE,CAAC,CAAC,SAAS,MAAM,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,EACnC,KAAK,EAAE,CAAC,EACR,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,MAAM,EAAE;QAAE,MAAM,EAAE;YAAE,IAAI,EAAE,CAAC,CAAA;SAAE,CAAA;KAAE,CAAC,KAAK,IAAI;IAarE,GAAG,CAAC,CAAC,SAAS,MAAM,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,EACpC,KAAK,EAAE,CAAC,EACR,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,MAAM,EAAE;QAAE,MAAM,EAAE;YAAE,IAAI,EAAE,CAAC,CAAA;SAAE,CAAA;KAAE,CAAC,KAAK,IAAI;IAiBrE,WAAW,CAAC,OAAO,EAAE,WAAW,EAAE,YAAY,CAAC,EAAE,wBAAwB;IA4BzE,OAAO;CAsGR;AAED;;GAEG;AAEH,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/widget.js

@@ -0,0 +1,151 @@
+/**
+ * Module dependencies.
+ */
+import { logSymbol } from './constants';
+/**
+ * Widget base class.
+ */
+class Widget extends EventTarget {
+    #iframe;
+    #eventListeners = new Map();
+    session;
+    mountOptions;
+    options;
+    [logSymbol] = {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        log: (message, ...optionalParams) => {
+            this.#consoleWrapper('log', message, ...optionalParams);
+        },
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        warn: (message, ...optionalParams) => {
+            this.#consoleWrapper('warn', message, ...optionalParams);
+        }
+    };
+    constructor(session, options) {
+        super();
+        this.session = session;
+        this.options = options;
+        if (this.options?.debug) {
+            this[logSymbol].log('Debug mode is enabled.');
+        }
+    }
+    on(event, listener) {
+        this.addEventListener(event, listener);
+        if (!this.#eventListeners.has(event)) {
+            this.#eventListeners.set(event, []);
+        }
+        this.#eventListeners.get(event).push(listener);
+        this[logSymbol].log(`Added listener for event: '${event}'.`);
+    }
+    off(event, listener) {
+        this.removeEventListener(event, listener);
+        if (this.#eventListeners.has(event)) {
+            const listeners = this.#eventListeners.get(event).filter(currentListener => currentListener !== listener);
+            if (listeners.length > 0) {
+                this.#eventListeners.set(event, listeners);
+            }
+            else {
+                this.#eventListeners.delete(event);
+            }
+        }
+        this[logSymbol].log(`Removed listener for event: '${event}'.`);
+    }
+    mountIframe(element, mountOptions) {
+        this[logSymbol].log('Validating element and initializing iframe mounting.');
+        if (!element || !(element instanceof HTMLElement)) {
+            throw new TypeError(`Type of 'element' parameter is invalid`);
+        }
+        this.mountOptions = mountOptions;
+        try {
+            this[logSymbol].log('Starting widget event listener.');
+            this.#startWidgetEventsListener();
+            this[logSymbol].log('Creating and appending iframe to the DOM.');
+            this.#createIframe(element);
+            this[logSymbol].log('Widget successfully mounted.');
+        }
+        catch (e) {
+            this[logSymbol].log('Error occurred while mounting the widget in iframe: ', e);
+            this.unmount();
+            throw new Error('Unable to mount widget: ', { cause: e });
+        }
+    }
+    unmount() {
+        window.removeEventListener('message', this.#widgetEventListener);
+        this.#eventListeners.forEach((listeners, event) => {
+            listeners.forEach(listener => this.removeEventListener(event, listener));
+        });
+        this.#eventListeners.clear();
+        // Remove the iframe from the DOM
+        if (this.#iframe) {
+            this.#iframe.remove();
+            this.#iframe = undefined;
+        }
+    }
+    #createIframe(element) {
+        const iframe = document.createElement('iframe');
+        iframe.setAttribute('src', this.session.url);
+        iframe.setAttribute('allow', 'clipboard-write *; clipboard-read *');
+        iframe.style.width = '100%';
+        iframe.style.height = '100%';
+        iframe.style.border = 'none';
+        element.appendChild(iframe);
+        this.#iframe = iframe;
+    }
+    #emit(event, data) {
+        this[logSymbol].log(`'${event}' event raised. Details: `, data);
+        this.dispatchEvent(new CustomEvent(event, { detail: data }));
+    }
+    #sendMessageToWidget(message) {
+        this.#iframe?.contentWindow?.postMessage(message, '*');
+    }
+    #startWidgetEventsListener() {
+        window.addEventListener('message', this.#widgetEventListener);
+    }
+    #widgetEventListener = (event) => {
+        const eventOrigin = new URL(event.origin).origin;
+        if (eventOrigin !== this.session.url) {
+            this[logSymbol].warn(`[Widget -> Host] ⚠️ Discarding message from '${eventOrigin}' as it does not match widget URL '${this.session.url}' ⚠️`);
+            return;
+        }
+        this[logSymbol].log('[Widget -> Host] ', event.data);
+        switch (event.data.type) {
+            case 'load': {
+                const widgetInitMessage = {
+                    ...this.session,
+                    type: 'init'
+                };
+                this.#sendMessageToWidget(widgetInitMessage);
+                this[logSymbol].log('[Host -> Widget] ', widgetInitMessage);
+                break;
+            }
+            case 'complete': {
+                this.#emit('complete', event.data);
+                break;
+            }
+            case 'cancel': {
+                this.#emit('cancel');
+                break;
+            }
+            case 'error': {
+                this.#emit('error', event.data);
+                break;
+            }
+            case 'ready': {
+                this.#emit('ready');
+                break;
+            }
+            default:
+                break;
+        }
+    };
+    #consoleWrapper(prop, ...messages) {
+        if (this.options?.debug) {
+            // eslint-disable-next-line no-console
+            console[prop](`[${this.constructor.name}] `, ...messages);
+        }
+    }
+}
+/**
+ * Exports.
+ */
+export { Widget };

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@uphold/enterprise-widget-sdk-core",
+  "version": "0.2.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "description": "Enterprise Widget SDK Core",
+  "scripts": {
+    "build": "rm -rf dist && tsc -b tsconfig.build.json --force",
+    "lint": "eslint .",
+    "postinstall": "npm run build",
+    "release": "npx --yes release-it@^19 --config ../../.release-it.cjs",
+    "test": "vitest",
+    "typecheck": "tsc --noEmit"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/uphold/enterprise-widget-sdk",
+    "directory": "packages/core"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "lint-staged": {
+    "*.ts*": [
+      "eslint"
+    ]
+  },
+  "dependencies": {
+    "@uphold/enterprise-widget-messaging-types": "^0.7.0"
+  }
+}