@data-fair/frame 0.1.0 → 0.2.0

package/README.md

@@ -4,8 +4,8 @@ An iframe wrapper for powerful web app integrations.
 Lightweight, vanilla JS, no dependency.
 
 Supports:
+  - dynamic resizing
   - navigation syncing
-  - aspect ratio management
-  - dynamic resize
+  - notification passing
 
 See [the documentation](https://data-fair.github.io/frame/latest/).

package/dist/d-frame-content.min.js

@@ -1,2 +1,2 @@
-var DFrameContent=function(){"use strict";var u=Object.defineProperty;var g=(n,i,a)=>i in n?u(n,i,{enumerable:!0,configurable:!0,writable:!0,value:a}):n[i]=a;var c=(n,i,a)=>g(n,typeof i!="symbol"?i+"":i,a);function n(s){return s[0]==="df-parent"&&s[1]==="init"}function i(s){return s[0]==="df-parent"&&s[1]==="updateSrc"}const a=["animationstart","webkitAnimationStart","animationiteration","webkitAnimationIteration","animationend","webkitAnimationEnd","input","mouseup","mousedown","orientationchange","afterprint","beforeprint","readystatechange","touchstart","touchend","touchcancel","transitionstart","webkitTransitionStart","MSTransitionStart","oTransitionStart","otransitionstart","transitioniteration","webkitTransitionIteration","MSTransitionIteration","oTransitionIteration","otransitioniteration","transitionend","webkitTransitionEnd","MSTransitionEnd","oTransitionEnd","otransitionend","resize"];class d{constructor(e){c(this,"options");c(this,"pendingCheckHeight",!1);c(this,"debug",!1);c(this,"throttledCheckHeight");c(this,"lastHeight",0);this.options=e??{};const t=()=>{this.checkHeight(),this.pendingCheckHeight=!1};this.throttledCheckHeight=()=>{this.pendingCheckHeight||(this.pendingCheckHeight=!0,requestAnimationFrame(t))},!(typeof window>"u")&&(window.addEventListener("message",o=>this.onMessage(o)),this.postMessageToParent(["df-child","init"]))}log(e,...t){e==="debug"&&!this.debug||(e==="debug"&&console.debug("d-frame-content",...t),e==="info"&&console.info("d-frame-content",...t))}onMessage(e){if(e.source===window.parent&&Array.isArray(e.data)){const t=e.data;n(t)&&(this.debug=!!t[2].debug,t[2].resize!=="no"&&this.initResize(),(t[2].syncParams||t[2].syncPath)&&this.initSyncParams()),i(t)&&(this.options.updateSrc?this.options.updateSrc(t[2].startsWith("/")?window.location.origin+t[2]:t[2]):window.location.href=t[2])}}postMessageToParent(e){window.parent.postMessage(e)}initResize(){this.log("debug","initResize"),this.checkHeight(),this.createMutationObserver(),this.createWindowEventListeners()}initSyncParams(){this.log("debug","initSyncParams");const e=window.history.replaceState,t=(...r)=>{const h=e.apply(window.history,r);return this.postMessageToParent(["df-child","stateChange","push",window.location.href]),h};window.history.pushState=t;const o=(...r)=>{const h=e.apply(window.history,r);return this.postMessageToParent(["df-child","stateChange","replace",window.location.href]),h};window.history.replaceState=o}createMutationObserver(){const e=document.querySelector("body");if(!e)throw new Error("DFrameContentManager was initialized before the HTML body");new window.MutationObserver(this.throttledCheckHeight).observe(e,{attributes:!1,attributeOldValue:!1,characterData:!1,characterDataOldValue:!1,childList:!0,subtree:!0})}createWindowEventListeners(){for(const e of a)window.addEventListener(e,this.throttledCheckHeight,{passive:!0})}checkHeight(){const e=document.querySelectorAll("[data-iframe-height]");let t=0;for(const o of e){const r=o.getAttribute("data-iframe-height"),h=o.getBoundingClientRect().bottom+parseFloat(getComputedStyle(o).getPropertyValue("margin-bottom"))+(r?parseFloat(r):0);h>t&&(t=h)}t!==this.lastHeight&&(this.postMessageToParent(["df-child","height",t]),this.lastHeight=t)}}return new d}();
+var DFrameContent=function(){"use strict";var u=Object.defineProperty;var l=(n,i,s)=>i in n?u(n,i,{enumerable:!0,configurable:!0,writable:!0,value:s}):n[i]=s;var a=(n,i,s)=>l(n,typeof i!="symbol"?i+"":i,s);function n(r){return r[0]==="df-parent"&&r[1]==="init"}function i(r){return r[0]==="df-parent"&&r[1]==="updateSrc"}const s=["animationstart","webkitAnimationStart","animationiteration","webkitAnimationIteration","animationend","webkitAnimationEnd","input","mouseup","mousedown","orientationchange","afterprint","beforeprint","readystatechange","touchstart","touchend","touchcancel","transitionstart","webkitTransitionStart","MSTransitionStart","oTransitionStart","otransitionstart","transitioniteration","webkitTransitionIteration","MSTransitionIteration","oTransitionIteration","otransitioniteration","transitionend","webkitTransitionEnd","MSTransitionEnd","oTransitionEnd","otransitionend","resize"];class c{constructor(t){a(this,"initialized",!1);a(this,"options");a(this,"pendingCheckHeight",!1);a(this,"debug",!1);a(this,"throttledCheckHeight");a(this,"lastHeight",0);this.options=t??{};const e=()=>{this.checkHeight(),this.pendingCheckHeight=!1};this.throttledCheckHeight=()=>{this.pendingCheckHeight||(this.pendingCheckHeight=!0,requestAnimationFrame(e))},!(typeof window>"u")&&(window.addEventListener("message",o=>this.onMessage(o)),this.postMessageToParent(["df-child","init"]))}log(t,...e){t==="debug"&&!this.debug||(t==="debug"&&console.debug("d-frame-content",...e),t==="info"&&console.info("d-frame-content",...e))}onMessage(t){if(t.source===window.parent&&Array.isArray(t.data)){const e=t.data;n(e)&&(this.debug=!!e[2].debug,e[2].resize!=="no"&&this.initResize(),(e[2].syncParams||e[2].syncPath)&&this.initSyncParams(),this.initialized=!0),i(e)&&(this.options.updateSrc?this.options.updateSrc(e[2].startsWith("/")?window.location.origin+e[2]:e[2]):window.location.href=e[2])}}postMessageToParent(t){window.parent.postMessage(t)}sendNotif(t){this.postMessageToParent(["df-child","notif",t])}sendMessage(t){this.postMessageToParent(["df-child","custom",t])}initResize(){this.log("debug","initResize"),this.checkHeight(),this.createMutationObserver(),this.createWindowEventListeners()}initSyncParams(){this.log("debug","initSyncParams");const t=window.history.replaceState,e=(...h)=>{const d=t.apply(window.history,h);return this.postMessageToParent(["df-child","stateChange","push",window.location.href]),d};window.history.pushState=e;const o=(...h)=>{const d=t.apply(window.history,h);return this.postMessageToParent(["df-child","stateChange","replace",window.location.href]),d};window.history.replaceState=o}createMutationObserver(){const t=document.querySelector("body");if(!t)throw new Error("DFrameContentManager was initialized before the HTML body");new window.MutationObserver(this.throttledCheckHeight).observe(t,{attributes:!1,attributeOldValue:!1,characterData:!1,characterDataOldValue:!1,childList:!0,subtree:!0})}createWindowEventListeners(){for(const t of s)window.addEventListener(t,this.throttledCheckHeight,{passive:!0})}checkHeight(){const t=document.querySelectorAll("[data-iframe-height]");let e=0;for(const o of t){const h=o.getAttribute("data-iframe-height"),d=o.getBoundingClientRect().bottom+parseFloat(getComputedStyle(o).getPropertyValue("margin-bottom"))+(h?parseFloat(h):0);d>e&&(e=d)}e!==this.lastHeight&&(this.postMessageToParent(["df-child","height",e]),this.lastHeight=e)}}return new c}();
 //# sourceMappingURL=d-frame-content.min.js.map

package/dist/d-frame.min.js

@@ -1,4 +1,4 @@
-var E=Object.defineProperty;var R=(u,c,p)=>c in u?E(u,c,{enumerable:!0,configurable:!0,writable:!0,value:p}):u[c]=p;var o=(u,c,p)=>R(u,typeof c!="symbol"?c+"":c,p);(function(){"use strict";function u(e){return e[0]==="df-child"&&e[1]==="init"}function c(e){return e[0]==="df-child"&&e[1]==="height"}function p(e){return e[0]==="df-child"&&e[1]==="stateChange"}function m(e){return e.endsWith("/")?e:e===""?"/":e.slice(0,e.lastIndexOf("/")+1)}function b(e,r){if(r.origin!==e.origin)return r.href;if(r.pathname===e.pathname)return"";const t=m(e.pathname);return r.pathname.startsWith(t)?r.pathname.replace(t,"./"):r.pathname}const y=e=>e.replace(/[-[\]/{}()*+?.\\^$|]/g,"\\$&");function w(e){const r=[];for(const t of e.split(",")){const[i="*",s]=t.split(":"),a="^"+y(i).replace(/\\\*/g,"(.*)")+"$";r.push({regexp:new RegExp(a),append:s})}return r}function A(e,r,t,i){if(!t&&!i)return e.href;const s=new URL(r);if(t&&s.searchParams.forEach((a,d)=>{for(const n of t){if(n.append&&!d.startsWith(n.append)||d===i)continue;const h=n.append?d.replace(n.append,""):d;if(h.match(n.regexp)){e.searchParams.set(h,a);break}}}),i!==null){const a=s.searchParams.get(i);a&&(e.pathname=new URL(a,e).pathname)}return e.href}function S(e,r,t,i,s){const a=new URL(t),d=new URL(r);if(i&&(a.searchParams.forEach((n,h)=>{for(const l of i){if(l.append&&!h.startsWith(l.append))continue;const f=l.append?h.replace(l.append,""):h;if(f.match(l.regexp)){d.searchParams.get(f)===null&&a.searchParams.delete(h);break}}}),d.searchParams.forEach((n,h)=>{for(const l of i){if(!h.match(l.regexp)||(e==null?void 0:e.searchParams.get(h))===n)continue;const f=l.append?l.append+h:h;a.searchParams.set(f,n);break}})),s!==null&&e){const n=b(e,d);n?a.searchParams.set(s,n):a.searchParams.delete(s)}return a}class P{stateChange(r,t){r==="replace"&&window.history.replaceState(null,"",t),r==="push"&&window.history.pushState(null,"",t)}}const g=document.createElement("template");g.innerHTML=`<style>
+var C=Object.defineProperty;var H=(u,c,p)=>c in u?C(u,c,{enumerable:!0,configurable:!0,writable:!0,value:p}):u[c]=p;var o=(u,c,p)=>H(u,typeof c!="symbol"?c+"":c,p);(function(){"use strict";function u(e){return e[0]==="df-child"&&e[1]==="init"}function c(e){return e[0]==="df-child"&&e[1]==="height"}function p(e){return e[0]==="df-child"&&e[1]==="stateChange"}function m(e){return e[0]==="df-child"&&e[1]==="custom"}function b(e){return e[0]==="df-child"&&e[1]==="notif"}function y(e){return e.endsWith("/")?e:e===""?"/":e.slice(0,e.lastIndexOf("/")+1)}function w(e,r){if(r.origin!==e.origin)return r.href;if(r.pathname===e.pathname)return"";const t=y(e.pathname);return r.pathname.startsWith(t)?r.pathname.replace(t,"./"):r.pathname}const A=e=>e.replace(/[-[\]/{}()*+?.\\^$|]/g,"\\$&");function E(e){const r=[];for(const t of e.split(",")){const[s="*",i]=t.split(":"),a="^"+A(s).replace(/\\\*/g,"(.*)")+"$";r.push({regexp:new RegExp(a),append:i})}return r}function S(e,r,t,s){if(!t&&!s)return e.href;const i=new URL(r);if(t&&i.searchParams.forEach((a,d)=>{for(const n of t){if(n.append&&!d.startsWith(n.append)||d===s)continue;const h=n.append?d.replace(n.append,""):d;if(h.match(n.regexp)){e.searchParams.set(h,a);break}}}),s!==null){const a=i.searchParams.get(s);a&&(e.pathname=new URL(a,e).pathname)}return e.href}function P(e,r,t,s,i){const a=new URL(t),d=new URL(r);if(s&&(a.searchParams.forEach((n,h)=>{for(const l of s){if(l.append&&!h.startsWith(l.append))continue;const f=l.append?h.replace(l.append,""):h;if(f.match(l.regexp)){d.searchParams.get(f)===null&&a.searchParams.delete(h);break}}}),d.searchParams.forEach((n,h)=>{for(const l of s){if(!h.match(l.regexp)||(e==null?void 0:e.searchParams.get(h))===n)continue;const f=l.append?l.append+h:h;a.searchParams.set(f,n);break}})),i!==null&&e){const n=w(e,d);n?a.searchParams.set(i,n):a.searchParams.delete(i)}return a}class z{stateChange(r,t){r==="replace"&&window.history.replaceState(null,"",t),r==="push"&&window.history.pushState(null,"",t)}}const g=document.createElement("template");g.innerHTML=`<style>
   :host {
     display: block;
   }
@@ -8,5 +8,5 @@ var E=Object.defineProperty;var R=(u,c,p)=>c in u?E(u,c,{enumerable:!0,configura
     border: none;
     max-height: 100%;
   }
-</style><slot name="loader"></slot><iframe class="d-frame-iframe" frameborder="0">`;class z extends HTMLElement{constructor(){super();o(this,"adapter");o(this,"connected",!1);o(this,"initialSrc");o(this,"srcUrl");o(this,"parsedSyncParams");o(this,"iframeElement");o(this,"slotElement");o(this,"width");o(this,"aspectRatioHeight");o(this,"resizedHeight");const t=g.content.cloneNode(!0);this.slotElement=t.childNodes[1],this.resize!=="yes"&&(this.slotElement.style.display="none"),this.iframeElement=t.childNodes[2],this.iframeElement.setAttribute("scrolling",this.resize==="yes"?"no":"auto"),this.iframeElement.setAttribute("loading",this.lazy?"lazy":"eager"),this.attachShadow({mode:"open"}).appendChild(t),new ResizeObserver(a=>{this.width!==a[0].contentRect.width&&(this.width=a[0].contentRect.width,this.updateAspectRatioHeight())}).observe(this),this.adapter=new P,window.addEventListener("message",a=>this.onMessage(a))}get debug(){return this.hasAttribute("debug")}set debug(t){t?this.setAttribute("debug",""):this.removeAttribute("debug")}get lazy(){return this.hasAttribute("lazy")}set lazy(t){t?this.setAttribute("lazy",""):this.removeAttribute("lazy")}get src(){return this.getAttribute("src")}set src(t){this.setAttribute("src",t)}get aspectRatio(){return this.getAttribute("aspect-ratio")??"auto"}set aspectRatio(t){this.setAttribute("aspect-ratio",t)}get height(){return this.getAttribute("height")}set height(t){t?this.setAttribute("height",t):this.removeAttribute("height")}set resize(t){this.setAttribute("resize",t)}get resize(){const t=this.getAttribute("resize");return t===null?"auto":t===""?"yes":t}get syncParams(){return this.getAttribute("sync-params")}set syncParams(t){t!==null?this.setAttribute("sync-params",t):this.removeAttribute("sync-params")}get syncPath(){const t=this.getAttribute("sync-path");return t===null?null:t||"p"}set syncPath(t){t!==null?this.setAttribute("sync-params",t):this.removeAttribute("sync-params")}get actualAspectRatio(){return this.aspectRatio!=="auto"?Number(this.aspectRatio):!this.width||this.width<500?1:this.width<800?4/3:this.width<1200?16/9:21/9}onMessage(t){var i;if(t.source===((i=this.iframeElement)==null?void 0:i.contentWindow)&&Array.isArray(t.data)){const s=t.data;if(this.log("debug","received message from child",s),u(s)&&(this.postMessageToChild(["df-parent","init",{debug:this.debug,resize:this.resize,syncParams:this.syncParams!==null,syncPath:this.syncPath!==null}]),this.init()),c(s)&&(this.resizedHeight=s[2],this.updateStyle()),p(s)&&(this.parsedSyncParams||this.syncPath)){const a=S(this.srcUrl,s[3],window.location.href,this.parsedSyncParams,this.syncPath);a.href!==window.location.href&&this.adapter.stateChange(s[2],a)}}}init(){this.initialSrc=this.src}postMessageToChild(t){var i,s;this.log("debug","send message to child",t),(s=(i=this.iframeElement)==null?void 0:i.contentWindow)==null||s.postMessage(t)}updateSrc(){if(!this.connected)return;this.srcUrl=new URL(this.src.startsWith("/")?window.location.origin+this.src:this.src);const t=A(this.srcUrl,window.location.href,this.parsedSyncParams,this.syncPath);this.initialSrc?this.postMessageToChild(["df-parent","updateSrc",t]):this.iframeElement.setAttribute("src",t)}updateStyle(){let t="";(this.resize==="yes"||this.resize==="auto"&&this.resizedHeight)&&(this.iframeElement.setAttribute("scrolling","no"),this.resizedHeight?(this.slotElement.style.display="none",t+=`height:${this.resizedHeight}px;`):this.height?(this.slotElement.style.display="none",t+=`height:${this.height};`):this.aspectRatio!=="auto"?(this.slotElement.style.display="none",t+=`height:${this.aspectRatioHeight}px;`):(this.slotElement.style.display="block",t+="height:0;")),(this.resize==="no"||this.resize==="auto"&&!this.resizedHeight)&&(this.iframeElement.setAttribute("scrolling","auto"),this.height?t+=`height:${this.height};`:t+=`height:${this.aspectRatioHeight}px;`),this.iframeElement.setAttribute("style",t)}updateAspectRatioHeight(){this.width&&(this.resizedHeight||this.height||(this.aspectRatioHeight=this.width/this.actualAspectRatio,this.updateStyle()))}log(t,...i){t==="debug"&&!this.debug||(t==="debug"&&console.debug("d-frame",...i),t==="info"&&console.info("d-frame",...i))}connectedCallback(){if(!this.hasAttribute("src"))throw new Error("src is a required attribute");this.log("debug","connected"),this.connected=!0,this.adapter.onStateChange&&this.adapter.onStateChange(()=>{this.updateSrc()}),this.syncParams!==null&&(this.parsedSyncParams=w(this.syncParams||"*")),this.updateStyle(),this.updateSrc()}static get observedAttributes(){return["src","aspect-ratio","height","sync-params","sync-path"]}attributeChangedCallback(t,i,s){this.log("debug","attribute change",t,i,s),t==="aspect-ratio"&&this.updateAspectRatioHeight(),t==="src"&&this.updateSrc(),t==="height"&&this.updateStyle(),t==="sync-params"&&this.updateSrc(),t==="sync-path"&&this.updateSrc()}}customElements.define("d-frame",z)})();
+</style><slot name="loader"></slot><iframe class="d-frame-iframe" frameborder="0">`;class R extends HTMLElement{constructor(){super();o(this,"adapter");o(this,"connected",!1);o(this,"initialSrc");o(this,"srcUrl");o(this,"parsedSyncParams");o(this,"iframeElement");o(this,"slotElement");o(this,"width");o(this,"aspectRatioHeight");o(this,"resizedHeight");const t=g.content.cloneNode(!0);this.slotElement=t.childNodes[1],this.resize!=="yes"&&(this.slotElement.style.display="none"),this.iframeElement=t.childNodes[2],this.iframeElement.setAttribute("scrolling",this.resize==="yes"?"no":"auto"),this.iframeElement.setAttribute("loading",this.lazy?"lazy":"eager"),this.attachShadow({mode:"open"}).appendChild(t),new ResizeObserver(a=>{this.width!==a[0].contentRect.width&&(this.width=a[0].contentRect.width,this.updateAspectRatioHeight())}).observe(this),this.adapter=new z,window.addEventListener("message",a=>this.onMessage(a))}get debug(){return this.hasAttribute("debug")}set debug(t){t?this.setAttribute("debug",""):this.removeAttribute("debug")}get lazy(){return this.hasAttribute("lazy")}set lazy(t){t?this.setAttribute("lazy",""):this.removeAttribute("lazy")}get src(){return this.getAttribute("src")}set src(t){this.setAttribute("src",t)}get aspectRatio(){return this.getAttribute("aspect-ratio")??"auto"}set aspectRatio(t){this.setAttribute("aspect-ratio",t)}get height(){return this.getAttribute("height")}set height(t){t?this.setAttribute("height",t):this.removeAttribute("height")}set resize(t){this.setAttribute("resize",t)}get resize(){const t=this.getAttribute("resize");return t===null?"auto":t===""?"yes":t}get syncParams(){return this.getAttribute("sync-params")}set syncParams(t){t!==null?this.setAttribute("sync-params",t):this.removeAttribute("sync-params")}get syncPath(){const t=this.getAttribute("sync-path");return t===null?null:t||"p"}set syncPath(t){t!==null?this.setAttribute("sync-params",t):this.removeAttribute("sync-params")}get actualAspectRatio(){return this.aspectRatio!=="auto"?Number(this.aspectRatio):!this.width||this.width<500?1:this.width<800?4/3:this.width<1200?16/9:21/9}onMessage(t){var s;if(t.source===((s=this.iframeElement)==null?void 0:s.contentWindow)&&Array.isArray(t.data)){const i=t.data;if(this.log("debug","received message from child",i),u(i)&&(this.postMessageToChild(["df-parent","init",{debug:this.debug,resize:this.resize,syncParams:this.syncParams!==null,syncPath:this.syncPath!==null}]),this.init()),c(i)&&(this.resizedHeight=i[2],this.updateStyle()),p(i)&&(this.parsedSyncParams||this.syncPath)){const a=P(this.srcUrl,i[3],window.location.href,this.parsedSyncParams,this.syncPath);a.href!==window.location.href&&this.adapter.stateChange(i[2],a)}m(i)&&this.dispatchEvent(new CustomEvent("message",{detail:i[2]})),b(i)&&this.dispatchEvent(new CustomEvent("notif",{detail:i[2]}))}}init(){this.initialSrc=this.src}postMessageToChild(t){var s,i;this.log("debug","send message to child",t),(i=(s=this.iframeElement)==null?void 0:s.contentWindow)==null||i.postMessage(t)}updateSrc(){if(!this.connected)return;this.srcUrl=new URL(this.src.startsWith("/")?window.location.origin+this.src:this.src);const t=S(this.srcUrl,window.location.href,this.parsedSyncParams,this.syncPath);this.initialSrc?this.postMessageToChild(["df-parent","updateSrc",t]):this.iframeElement.setAttribute("src",t)}updateStyle(){let t="";(this.resize==="yes"||this.resize==="auto"&&this.resizedHeight)&&(this.iframeElement.setAttribute("scrolling","no"),this.resizedHeight?(this.slotElement.style.display="none",t+=`height:${this.resizedHeight}px;`):this.height?(this.slotElement.style.display="none",t+=`height:${this.height};`):this.aspectRatio!=="auto"?(this.slotElement.style.display="none",t+=`height:${this.aspectRatioHeight}px;`):(this.slotElement.style.display="block",t+="height:0;")),(this.resize==="no"||this.resize==="auto"&&!this.resizedHeight)&&(this.iframeElement.setAttribute("scrolling","auto"),this.height?t+=`height:${this.height};`:t+=`height:${this.aspectRatioHeight}px;`),this.iframeElement.setAttribute("style",t)}updateAspectRatioHeight(){this.width&&(this.resizedHeight||this.height||(this.aspectRatioHeight=this.width/this.actualAspectRatio,this.updateStyle()))}log(t,...s){t==="debug"&&!this.debug||(t==="debug"&&console.debug("d-frame",...s),t==="info"&&console.info("d-frame",...s))}connectedCallback(){if(!this.hasAttribute("src"))throw new Error("src is a required attribute");this.log("debug","connected"),this.connected=!0,this.adapter.onStateChange&&this.adapter.onStateChange(()=>{this.updateSrc()}),this.syncParams!==null&&(this.parsedSyncParams=E(this.syncParams||"*")),this.updateStyle(),this.updateSrc()}static get observedAttributes(){return["src","aspect-ratio","height","sync-params","sync-path"]}attributeChangedCallback(t,s,i){this.log("debug","attribute change",t,s,i),t==="aspect-ratio"&&this.updateAspectRatioHeight(),t==="src"&&this.updateSrc(),t==="height"&&this.updateStyle(),t==="sync-params"&&this.updateSrc(),t==="sync-path"&&this.updateSrc()}}customElements.define("d-frame",R)})();
 //# sourceMappingURL=d-frame.min.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-fair/frame",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "An iframe wrapper for powerful web app integrations.",
   "main": "dist/frame.min.js",
   "directories": {

package/src/DFrameContent.d.ts

@@ -1,20 +1,23 @@
-import { ChildMessage } from './messages.js';
+import { type Notif } from './messages.js';
 export type DFrameContentOptions = {
     updateSrc?: (src: string) => void;
 };
 export default class DFrameContent {
-    private options;
+    initialized: boolean;
+    options: DFrameContentOptions;
     private pendingCheckHeight;
-    private debug;
+    debug: boolean;
     private throttledCheckHeight;
     private lastHeight;
     constructor(options?: DFrameContentOptions);
-    log(level: 'debug' | 'info', ...args: any[]): void;
-    onMessage(e: MessageEvent): void;
-    postMessageToParent(message: ChildMessage): void;
-    initResize(): void;
-    initSyncParams(): void;
-    createMutationObserver(): void;
-    createWindowEventListeners(): void;
-    checkHeight(): void;
+    private log;
+    private onMessage;
+    private postMessageToParent;
+    sendNotif(notif: Notif): void;
+    sendMessage(msg: any): void;
+    private initResize;
+    private initSyncParams;
+    private createMutationObserver;
+    private createWindowEventListeners;
+    private checkHeight;
 }

package/src/DFrameContent.js

@@ -31,6 +31,7 @@ const windowEventTypes = [
     'otransitionend', 'resize'
 ];
 export default class DFrameContent {
+    initialized = false;
     options;
     pendingCheckHeight = false;
     debug = false;
@@ -71,6 +72,7 @@ export default class DFrameContent {
                     this.initResize();
                 if (message[2].syncParams || message[2].syncPath)
                     this.initSyncParams();
+                this.initialized = true;
             }
             if (isUpdateSrcMessage(message)) {
                 if (this.options.updateSrc) {
@@ -85,6 +87,12 @@ export default class DFrameContent {
     postMessageToParent(message) {
         window.parent.postMessage(message);
     }
+    sendNotif(notif) {
+        this.postMessageToParent(['df-child', 'notif', notif]);
+    }
+    sendMessage(msg) {
+        this.postMessageToParent(['df-child', 'custom', msg]);
+    }
     initResize() {
         this.log('debug', 'initResize');
         this.checkHeight();

package/src/DFrameElement.js

@@ -1,5 +1,5 @@
 // this is a good doc about writing web components https://web.dev/articles/custom-elements-best-practices
-import { isHeightMessage, isInitChildMessage, isStateChangeMessage } from './messages.js';
+import { isCustomMessage, isHeightMessage, isInitChildMessage, isNotifMessage, isStateChangeMessage } from './messages.js';
 import { parseSyncParams, getChildSrc, getParentUrl } from './utils/sync-params.js';
 class WindowStateChangeAdapter {
     stateChange(action, newUrl) {
@@ -143,6 +143,12 @@ export default class DFrameElement extends HTMLElement {
                     this.adapter.stateChange(message[2], newParentHUrl);
                 }
             }
+            if (isCustomMessage(message)) {
+                this.dispatchEvent(new CustomEvent('message', { detail: message[2] }));
+            }
+            if (isNotifMessage(message)) {
+                this.dispatchEvent(new CustomEvent('notif', { detail: message[2] }));
+            }
         }
     }
     init() {

package/src/messages.d.ts

@@ -1,10 +1,19 @@
 export type InitChildMessage = ['df-child', 'init'];
 export type HeightMessage = ['df-child', 'height', number];
 export type StateChangeMessage = ['df-child', 'stateChange', 'replace' | 'push', string];
-export type ChildMessage = InitChildMessage | HeightMessage | StateChangeMessage;
-export declare function isInitChildMessage(message: any[]): message is InitChildMessage;
-export declare function isHeightMessage(message: any[]): message is HeightMessage;
-export declare function isStateChangeMessage(message: any[]): message is StateChangeMessage;
+export type CustomMessage = ['df-child', 'custom', any];
+export type NotifMessage = ['df-child', 'notif', Notif];
+export type ChildMessage = InitChildMessage | HeightMessage | StateChangeMessage | CustomMessage | NotifMessage;
+export type Notif = {
+    type: 'default' | 'info' | 'success' | 'warning' | 'error';
+    title: string;
+    detail?: string;
+};
+export declare function isInitChildMessage(message: any): message is InitChildMessage;
+export declare function isHeightMessage(message: any): message is HeightMessage;
+export declare function isStateChangeMessage(message: any): message is StateChangeMessage;
+export declare function isCustomMessage(message: any): message is CustomMessage;
+export declare function isNotifMessage(message: any): message is NotifMessage;
 export type InitParentMessage = ['df-parent', 'init', {
     debug?: boolean;
     resize: 'yes' | 'no' | 'auto';

package/src/messages.js

@@ -7,6 +7,12 @@ export function isHeightMessage(message) {
 export function isStateChangeMessage(message) {
     return message[0] === 'df-child' && message[1] === 'stateChange';
 }
+export function isCustomMessage(message) {
+    return message[0] === 'df-child' && message[1] === 'custom';
+}
+export function isNotifMessage(message) {
+    return message[0] === 'df-child' && message[1] === 'notif';
+}
 export function isInitParentMessage(message) {
     return message[0] === 'df-parent' && message[1] === 'init';
 }