feat(sdk,client): add edgeframe sdk api

pkg/sdk/client/src/client.ts

@@ -19,15 +19,16 @@ export class Client extends EventTarget {
   constructor(autoReconnect = true) {
     super();
     this._conn = null;
+    
     this._onConnectionClose = this._onConnectionClose.bind(this);
     this._onConnectionMessage = this._onConnectionMessage.bind(this);
     this._handleRPCResponse = this._handleRPCResponse.bind(this);
+
     this._rpcID = 0;
     this._pendingRPC = {};
     this._queue = [];
     this._reconnectionDelay = 250;
     this._autoReconnect = autoReconnect;
-
     this.debug = false;
     
     this.connect = this.connect.bind(this);

pkg/sdk/client/src/crossframe-messenger.ts

@@ -0,0 +1,80 @@
+import { EventTarget } from "./event-target";
+
+enum CrossFrameMessageType {
+    SIZE_CHANGED = "size_changed",
+    TITLE_CHANGED = "title_changed"
+}
+
+interface CrossFrameMessage {
+    type: CrossFrameMessageType
+    data: { [key: string]: any }
+}
+
+export class CrossFrameMessenger extends EventTarget {
+    debug: boolean;
+
+    constructor() {
+        super()
+        this.debug = false;
+
+        this._initResizeObserver();
+        this._initTitleMutationObserver();
+
+        this._handleWindowMessage = this._handleWindowMessage.bind(this);
+
+        window.addEventListener('message', this._handleWindowMessage)
+    }
+
+    post(message: CrossFrameMessage, target: Window = window.parent) {
+        if (!target) return;
+        this._log("sending crossframe message", message);
+        target.postMessage(message)
+    }
+
+    _log(...args) {
+        if (!this.debug) return;
+        console.log(...args);
+    }
+
+    _handleWindowMessage(evt: MessageEvent) {
+        const message = evt.data;
+        const event = new CustomEvent(message.type, {
+            cancelable: true,
+            detail: message.data
+        });
+        
+        this.dispatchEvent(event);
+    }
+
+    _initTitleMutationObserver() {
+        const titleObserver = new MutationObserver((mutations) => {
+            const title = mutations[0].target.textContent;
+            this.post({ type: CrossFrameMessageType.TITLE_CHANGED, data: { title }});
+        });
+
+        const title = document.querySelector('title');
+
+        if (!title) return;
+
+        this.post({ type: CrossFrameMessageType.TITLE_CHANGED, data: { title: title.textContent }});
+        
+        titleObserver.observe(title, { subtree: true, characterData: true, childList: true });
+    }
+
+    _initResizeObserver() {
+        const resizeObserver = new ResizeObserver(() => {
+            const body = document.body,
+                html = document.documentElement;
+
+            const height = Math.max( body.scrollHeight, body.offsetHeight, 
+                html.clientHeight, html.scrollHeight, html.offsetHeight );
+            
+            const width = Math.max( body.scrollWidth, body.offsetWidth, 
+                html.clientWidth, html.scrollWidth, html.offsetWidth );
+
+            this.post({ type: CrossFrameMessageType.SIZE_CHANGED, data: { height, width }});
+        });
+
+        resizeObserver.observe(document.body);
+    }
+}

pkg/sdk/client/src/index.ts

@@ -1,3 +1,5 @@
 import { Client } from './client.js';
+import { CrossFrameMessenger } from './crossframe-messenger.js';
 
-export default new Client();
+export const client = new Client();
+export const crossFrameMessenger = new CrossFrameMessenger();