@data-fair/frame 0.1.0 → 0.2.1

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/lib/DFrameContent.d.ts

@@ -0,0 +1,23 @@
+import { type Notif } from './messages.js';
+export type DFrameContentOptions = {
+    updateSrc?: (src: string) => void;
+};
+export default class DFrameContent {
+    initialized: boolean;
+    options: DFrameContentOptions;
+    private pendingCheckHeight;
+    debug: boolean;
+    private throttledCheckHeight;
+    private lastHeight;
+    constructor(options?: DFrameContentOptions);
+    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 → lib}/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 → lib}/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 → lib}/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 → lib}/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';
 }

package/lib/utils/sync-params.d.ts

@@ -0,0 +1,7 @@
+export type ParsedSyncParams = {
+    regexp: RegExp;
+    append?: string;
+}[];
+export declare function parseSyncParams(syncParamsStr: string): ParsedSyncParams;
+export declare function getChildSrc(srcUrl: URL, parentHref: string, syncParams: ParsedSyncParams | undefined, syncPath: null | string): string;
+export declare function getParentUrl(srcUrl: URL | undefined, childHref: string, currentParentHref: string, syncParams: ParsedSyncParams | undefined, syncPath: null | string): URL;

package/lib/utils/sync-params.js

@@ -0,0 +1,80 @@
+import { getUrlRelativePath } from './url.js';
+const escapeRegExp = (str) => str.replace(/[-[\]/{}()*+?.\\^$|]/g, '\\$&');
+export function parseSyncParams(syncParamsStr) {
+    const syncParams = [];
+    for (const syncParam of syncParamsStr.split(',')) {
+        const [pattern = '*', append] = syncParam.split(':');
+        const regexpStr = '^' + escapeRegExp(pattern).replace(/\\\*/g, '(.*)') + '$';
+        syncParams.push({
+            regexp: new RegExp(regexpStr),
+            append
+        });
+    }
+    return syncParams;
+}
+export function getChildSrc(srcUrl, parentHref, syncParams, syncPath) {
+    if (!syncParams && !syncPath)
+        return srcUrl.href;
+    const parentUrl = new URL(parentHref);
+    if (syncParams) {
+        parentUrl.searchParams.forEach((value, key) => {
+            for (const syncParam of syncParams) {
+                if (syncParam.append && !key.startsWith(syncParam.append))
+                    continue;
+                if (key === syncPath)
+                    continue;
+                const childKey = syncParam.append ? key.replace(syncParam.append, '') : key;
+                if (!childKey.match(syncParam.regexp))
+                    continue;
+                srcUrl.searchParams.set(childKey, value);
+                break;
+            }
+        });
+    }
+    if (syncPath !== null) {
+        const path = parentUrl.searchParams.get(syncPath);
+        if (path) {
+            srcUrl.pathname = new URL(path, srcUrl).pathname;
+        }
+    }
+    return srcUrl.href;
+}
+export function getParentUrl(srcUrl, childHref, currentParentHref, syncParams, syncPath) {
+    const parentUrl = new URL(currentParentHref);
+    const childUrl = new URL(childHref);
+    if (syncParams) {
+        // remove existing keys that were deleted from the child
+        parentUrl.searchParams.forEach((value, key) => {
+            for (const syncParam of syncParams) {
+                if (syncParam.append && !key.startsWith(syncParam.append))
+                    continue;
+                const childKey = syncParam.append ? key.replace(syncParam.append, '') : key;
+                if (!childKey.match(syncParam.regexp))
+                    continue;
+                if (childUrl.searchParams.get(childKey) === null)
+                    parentUrl.searchParams.delete(key);
+                break;
+            }
+        });
+        // apply params from child to parent
+        childUrl.searchParams.forEach((value, key) => {
+            for (const syncParam of syncParams) {
+                if (!key.match(syncParam.regexp))
+                    continue;
+                if (srcUrl?.searchParams.get(key) === value)
+                    continue;
+                const parentKey = syncParam.append ? (syncParam.append + key) : key;
+                parentUrl.searchParams.set(parentKey, value);
+                break;
+            }
+        });
+    }
+    if (syncPath !== null && srcUrl) {
+        const path = getUrlRelativePath(srcUrl, childUrl);
+        if (path)
+            parentUrl.searchParams.set(syncPath, path);
+        else
+            parentUrl.searchParams.delete(syncPath);
+    }
+    return parentUrl;
+}

package/lib/utils/url.d.ts

@@ -0,0 +1,2 @@
+export declare function getPathDirectory(path: string): string;
+export declare function getUrlRelativePath(srcUrl: URL, currentUrl: URL): string;

package/lib/utils/url.js

@@ -0,0 +1,17 @@
+export function getPathDirectory(path) {
+    if (path.endsWith('/'))
+        return path;
+    if (path === '')
+        return '/';
+    return path.slice(0, path.lastIndexOf('/') + 1);
+}
+export function getUrlRelativePath(srcUrl, currentUrl) {
+    if (currentUrl.origin !== srcUrl.origin)
+        return currentUrl.href;
+    if (currentUrl.pathname === srcUrl.pathname)
+        return '';
+    const srcDirectory = getPathDirectory(srcUrl.pathname);
+    if (!currentUrl.pathname.startsWith(srcDirectory))
+        return currentUrl.pathname;
+    return currentUrl.pathname.replace(srcDirectory, './');
+}

package/lib/vue-router/d-frame-content.d.ts

@@ -0,0 +1,5 @@
+import DFrameContent, { type DFrameContentOptions } from '../DFrameContent.js';
+import type { Router } from 'vue-router';
+type VueRouterDFrameContentOptions = Omit<DFrameContentOptions, 'updateSrc'>;
+export declare function vueRouterDFrameContent(router: Router, options?: VueRouterDFrameContentOptions): DFrameContent;
+export default vueRouterDFrameContent;

package/lib/vue-router/d-frame-content.js

@@ -0,0 +1,15 @@
+import DFrameContent from '../DFrameContent.js';
+export function vueRouterDFrameContent(router, options) {
+    return new DFrameContent({
+        updateSrc: (src) => {
+            const urlPrefix = window.location.origin + router.options.history.base;
+            if (src.startsWith(urlPrefix)) {
+                router.replace(src.replace(urlPrefix, ''));
+            }
+            else {
+                window.location.href = src;
+            }
+        }
+    });
+}
+export default vueRouterDFrameContent;

package/lib/vue-router/state-change-adapter.d.ts

@@ -0,0 +1,10 @@
+import { type StateChangeAdapter } from '../DFrameElement.js';
+import type { Router } from 'vue-router';
+declare class VueRouterDFrameStateChangeAdapter implements StateChangeAdapter {
+    router: Router;
+    constructor(router: Router);
+    stateChange(action: 'push' | 'replace', newUrl: URL): void;
+    onStateChange(callback: () => void): void;
+}
+declare const _default: (router: Router) => VueRouterDFrameStateChangeAdapter;
+export default _default;

package/lib/vue-router/state-change-adapter.js

@@ -0,0 +1,16 @@
+class VueRouterDFrameStateChangeAdapter {
+    router;
+    constructor(router) {
+        this.router = router;
+    }
+    stateChange(action, newUrl) {
+        if (action === 'push')
+            this.router.push({ query: Object.fromEntries(newUrl.searchParams) });
+        if (action === 'replace')
+            this.router.replace({ query: Object.fromEntries(newUrl.searchParams) });
+    }
+    onStateChange(callback) {
+        this.router.afterEach(callback);
+    }
+}
+export default (router) => new VueRouterDFrameStateChangeAdapter(router);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-fair/frame",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "An iframe wrapper for powerful web app integrations.",
   "main": "dist/frame.min.js",
   "directories": {
@@ -23,7 +23,7 @@
     "dev-zellij": "zellij --layout .zellij.kdl",
     "prepare": "husky",
     "test": "node --test tests/*.js",
-    "build": "rm -f src/*.d.ts && rm -f src/*.js && tsc -p tsconfig.json && rm -rf dist && vite -c vite.config.d-frame.js build && vite -c vite.config.d-frame-content.js build",
+    "build": "rm -f lib/*.d.ts && rm -f lib/*.js && tsc -p tsconfig.json && rm -rf dist && vite -c vite.config.d-frame.js build && vite -c vite.config.d-frame-content.js build",
     "prepublishOnly": "npm run lint && npm run test && npm run build",
     "publish:main": "cd doc && npm run build:main && cd .. && gh-pages-multi deploy -v -s doc/.output/public -t main",
     "publish:latest": "cd doc && npm run build:latest && cd .. && gh-pages-multi deploy -v -s doc/.output/public -t latest"
@@ -37,8 +37,8 @@
   "license": "MIT",
   "type": "module",
   "files": [
-    "src/*.js",
-    "src/*.d.ts",
+    "lib/**/*.js",
+    "lib/**/*.d.ts",
     "dist/*.js"
   ]
 }

package/src/DFrameContent.d.ts

@@ -1,20 +0,0 @@
-import { ChildMessage } from './messages.js';
-export type DFrameContentOptions = {
-    updateSrc?: (src: string) => void;
-};
-export default class DFrameContent {
-    private options;
-    private pendingCheckHeight;
-    private debug;
-    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;
-}