@data-fair/frame 0.2.0 → 0.3.0

package/dist/d-frame.min.js

@@ -1,4 +1,4 @@
-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>
+var H=Object.defineProperty;var M=(d,c,p)=>c in d?H(d,c,{enumerable:!0,configurable:!0,writable:!0,value:p}):d[c]=p;var o=(d,c,p)=>M(d,typeof c!="symbol"?c+"":c,p);(function(){"use strict";function d(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 y(e){return e[0]==="df-child"&&e[1]==="custom"}function b(e){return e[0]==="df-child"&&e[1]==="notif"}function w(e){return e.endsWith("/")?e:e===""?"/":e.slice(0,e.lastIndexOf("/")+1)}function A(e,a){if(a.origin!==e.origin)return a.href;if(a.pathname===e.pathname)return"";const t=w(e.pathname);return a.pathname.startsWith(t)?a.pathname.replace(t,"./"):a.pathname}const E=e=>e.replace(/[-[\]/{}()*+?.\\^$|]/g,"\\$&");function S(e){const a=[];for(const t of e.split(",")){const[s="*",i]=t.split(":"),r="^"+E(s).replace(/\\\*/g,"(.*)")+"$";a.push({regexp:new RegExp(r),append:i})}return a}function P(e,a,t,s){if(!t&&!s)return e.href;const i=new URL(a);if(t&&i.searchParams.forEach((r,u)=>{for(const n of t){if(n.append&&!u.startsWith(n.append)||u===s)continue;const h=n.append?u.replace(n.append,""):u;if(h.match(n.regexp)){e.searchParams.set(h,r);break}}}),s!==null){const r=i.searchParams.get(s);r&&(e.pathname=new URL(r,e).pathname)}return e.href}function z(e,a,t,s,i){const r=new URL(t),u=new URL(a);if(s&&(r.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)){u.searchParams.get(f)===null&&r.searchParams.delete(h);break}}}),u.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;r.searchParams.set(f,n);break}})),i!==null&&e){const n=A(e,u);n?r.searchParams.set(i,n):r.searchParams.delete(i)}return r}function R(e){return e.vIframe===!0&&e.uiNotification!==void 0}function g(e){if(typeof e=="string")return{type:"default",title:e};if(e.error&&!e.errorMsg){const a=e.error.response&&(e.error.response.data||e.error.response.status)||e.error.message||e.error;return e.msg?{type:"error",title:e.msg,detail:a}:{type:"error",title:a}}return e.type==="error"?{type:e.clientError?"warning":"error",title:e.msg,detail:e.errorMsg}:{type:e.type??"default",title:e.msg}}class C{stateChange(a,t){a==="replace"&&window.history.replaceState(null,"",t),a==="push"&&window.history.pushState(null,"",t)}}const m=document.createElement("template");m.innerHTML=`<style>
   :host {
     display: block;
   }
@@ -8,5 +8,5 @@ var C=Object.defineProperty;var H=(u,c,p)=>c in u?C(u,c,{enumerable:!0,configura
     border: none;
     max-height: 100%;
   }
-</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)})();
+</style><slot name="loader"></slot><iframe class="d-frame-iframe" frameborder="0">`;class v 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=m.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(r=>{this.width!==r[0].contentRect.width&&(this.width=r[0].contentRect.width,this.updateAspectRatioHeight())}).observe(this),this.adapter=new C,window.addEventListener("message",r=>this.onMessage(r))}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)){const i=t.data;if(this.log("debug","received message from child",i),Array.isArray(t.data)){if(d(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 r=z(this.srcUrl,i[3],window.location.href,this.parsedSyncParams,this.syncPath);r.href!==window.location.href&&this.adapter.stateChange(i[2],r)}y(i)&&this.dispatchEvent(new CustomEvent("message",{detail:i[2]})),b(i)&&this.dispatchEvent(new CustomEvent("notif",{detail:i[2]}))}else R(i)&&(console.log("v-iframe notification",i.uiNotification,g(i.uiNotification)),this.dispatchEvent(new CustomEvent("notif",{detail:g(i.uiNotification)})))}}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=P(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=S(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",v)})();
 //# sourceMappingURL=d-frame.min.js.map

package/{src → lib}/DFrameElement.js

@@ -1,6 +1,7 @@
 // this is a good doc about writing web components https://web.dev/articles/custom-elements-best-practices
 import { isCustomMessage, isHeightMessage, isInitChildMessage, isNotifMessage, isStateChangeMessage } from './messages.js';
 import { parseSyncParams, getChildSrc, getParentUrl } from './utils/sync-params.js';
+import { isVIframeUiNotif, convertVIframeUiNotif } from './v-iframe-compat/ui-notif.js';
 class WindowStateChangeAdapter {
     stateChange(action, newUrl) {
         if (action === 'replace')
@@ -120,34 +121,41 @@ export default class DFrameElement extends HTMLElement {
         window.addEventListener('message', (e) => this.onMessage(e));
     }
     onMessage(e) {
-        if (e.source === this.iframeElement?.contentWindow && Array.isArray(e.data)) {
+        if (e.source === this.iframeElement?.contentWindow) {
             const message = e.data;
             this.log('debug', 'received message from child', message);
-            if (isInitChildMessage(message)) {
-                // simple handshake for initialization
-                this.postMessageToChild(['df-parent', 'init', {
-                        debug: this.debug,
-                        resize: this.resize,
-                        syncParams: this.syncParams !== null,
-                        syncPath: this.syncPath !== null
-                    }]);
-                this.init();
-            }
-            if (isHeightMessage(message)) {
-                this.resizedHeight = message[2];
-                this.updateStyle();
-            }
-            if (isStateChangeMessage(message) && (this.parsedSyncParams || this.syncPath)) {
-                const newParentHUrl = getParentUrl(this.srcUrl, message[3], window.location.href, this.parsedSyncParams, this.syncPath);
-                if (newParentHUrl.href !== window.location.href) {
-                    this.adapter.stateChange(message[2], newParentHUrl);
+            if (Array.isArray(e.data)) {
+                if (isInitChildMessage(message)) {
+                    // simple handshake for initialization
+                    this.postMessageToChild(['df-parent', 'init', {
+                            debug: this.debug,
+                            resize: this.resize,
+                            syncParams: this.syncParams !== null,
+                            syncPath: this.syncPath !== null
+                        }]);
+                    this.init();
+                }
+                if (isHeightMessage(message)) {
+                    this.resizedHeight = message[2];
+                    this.updateStyle();
+                }
+                if (isStateChangeMessage(message) && (this.parsedSyncParams || this.syncPath)) {
+                    const newParentHUrl = getParentUrl(this.srcUrl, message[3], window.location.href, this.parsedSyncParams, this.syncPath);
+                    if (newParentHUrl.href !== window.location.href) {
+                        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] }));
                 }
             }
-            if (isCustomMessage(message)) {
-                this.dispatchEvent(new CustomEvent('message', { detail: message[2] }));
-            }
-            if (isNotifMessage(message)) {
-                this.dispatchEvent(new CustomEvent('notif', { detail: message[2] }));
+            else if (isVIframeUiNotif(message)) {
+                console.log('v-iframe notification', message.uiNotification, convertVIframeUiNotif(message.uiNotification));
+                // maintain compatibility with v-iframe notifications sent through postMessage
+                this.dispatchEvent(new CustomEvent('notif', { detail: convertVIframeUiNotif(message.uiNotification) }));
             }
         }
     }

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/v-iframe-compat/d-frame-content.d.ts

@@ -0,0 +1,8 @@
+import DFrameContent from '../DFrameContent.js';
+import type { Router } from 'vue-router';
+export type VIframeOptions = {
+    router?: Router;
+    reactiveParams?: Record<string, string>;
+};
+declare const dFrameContent: DFrameContent;
+export default dFrameContent;

package/lib/v-iframe-compat/d-frame-content.js

@@ -0,0 +1,31 @@
+import DFrameContent from '../DFrameContent.js';
+const dFrameContent = new DFrameContent({
+    updateSrc: (src) => {
+        const vIframeOptions = window.vIframeOptions;
+        const reactiveParams = vIframeOptions?.reactiveParams;
+        if (reactiveParams) {
+            const srcUrl = new URL(src);
+            if (srcUrl.origin === window.location.origin && srcUrl.pathname === window.location.pathname) {
+                const existingKeys = Object.keys(reactiveParams);
+                srcUrl.searchParams.forEach((value, key) => {
+                    reactiveParams[key] = value;
+                    existingKeys.splice(existingKeys.indexOf(key), 1);
+                });
+                existingKeys.forEach(key => {
+                    delete reactiveParams[key];
+                });
+                return;
+            }
+        }
+        if (vIframeOptions?.router) {
+            const urlPrefix = window.location.origin + vIframeOptions.router.options.history.base;
+            if (src.startsWith(urlPrefix)) {
+                vIframeOptions.router.replace(src.replace(urlPrefix, ''));
+                return;
+            }
+        }
+        window.location.href = src;
+    }
+});
+window.dFrameContent = dFrameContent;
+export default dFrameContent;

package/lib/v-iframe-compat/ui-notif.d.ts

@@ -0,0 +1,16 @@
+import type { Notif } from '../messages.ts';
+type NotifType = 'default' | 'info' | 'success' | 'warning' | 'error';
+export type PartialUiNotif = string | {
+    type?: NotifType;
+    msg: string;
+    error?: any;
+    errorMsg?: string;
+    clientError?: boolean;
+};
+export type VIframeUiNotif = {
+    vIframe: true;
+    uiNotification: PartialUiNotif;
+};
+export declare function isVIframeUiNotif(message: any): message is VIframeUiNotif;
+export declare function convertVIframeUiNotif(notif: PartialUiNotif): Notif;
+export {};

package/lib/v-iframe-compat/ui-notif.js

@@ -0,0 +1,34 @@
+export function isVIframeUiNotif(message) {
+    return message.vIframe === true && message.uiNotification !== undefined;
+}
+export function convertVIframeUiNotif(notif) {
+    if (typeof notif === 'string')
+        return { type: 'default', title: notif };
+    if (notif.error && !notif.errorMsg) {
+        const errorMsg = (notif.error.response && (notif.error.response.data || notif.error.response.status)) || notif.error.message || notif.error;
+        if (notif.msg) {
+            return {
+                type: 'error',
+                title: notif.msg,
+                detail: errorMsg
+            };
+        }
+        else {
+            return {
+                type: 'error',
+                title: errorMsg
+            };
+        }
+    }
+    if (notif.type === 'error') {
+        return {
+            type: notif.clientError ? 'warning' : 'error',
+            title: notif.msg,
+            detail: notif.errorMsg
+        };
+    }
+    return {
+        type: notif.type ?? 'default',
+        title: notif.msg
+    };
+}

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,16 @@
+import DFrameContent from '../DFrameContent.js';
+export function vueRouterDFrameContent(router, options) {
+    return new DFrameContent({
+        ...options,
+        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.2.0",
+  "version": "0.3.0",
   "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"
   ]
 }