feat(sdk,client): add edgeframe sdk api

pkg/sdk/client/dist/client.js

@@ -3785,7 +3785,8 @@ var Edge = (() => {
   // pkg/sdk/client/src/index.ts
   var src_exports = {};
   __export(src_exports, {
-    default: () => src_default
+    client: () => client,
+    crossFrameMessenger: () => crossFrameMessenger
   });
 
   // pkg/sdk/client/src/event-target.ts
@@ -4089,9 +4090,73 @@ var Edge = (() => {
     }
   };
 
+  // pkg/sdk/client/src/crossframe-messenger.ts
+  var CrossFrameMessenger = class extends EventTarget {
+    constructor() {
+      super();
+      this.debug = false;
+      this._initResizeObserver();
+      this._initTitleMutationObserver();
+      this._handleWindowMessage = this._handleWindowMessage.bind(this);
+      window.addEventListener("message", this._handleWindowMessage);
+    }
+    post(message, target = 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) {
+      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 title2 = mutations[0].target.textContent;
+        this.post({ type: "title_changed" /* TITLE_CHANGED */, data: { title: title2 } });
+      });
+      const title = document.querySelector("title");
+      if (!title)
+        return;
+      this.post({ type: "title_changed" /* 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: "size_changed" /* SIZE_CHANGED */, data: { height, width } });
+      });
+      resizeObserver.observe(document.body);
+    }
+  };
+
   // pkg/sdk/client/src/index.ts
-  var src_default = new Client();
+  var client = new Client();
+  var crossFrameMessenger = new CrossFrameMessenger();
   return __toCommonJS(src_exports);
 })();
-Edge=Edge.default;
+EdgeFrame=Edge.crossFrameMessenger;Edge=Edge.client
 //# sourceMappingURL=client.js.map

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();