@data-fair/frame - npm Package Compare versions

Comparing version 0.2.1 to 0.3.0

dist/d-frame.min.js

@@ -1,2 +0,2 @@
-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 {
@@ -11,3 +11,3 @@ display: block;
   }
-</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

lib/DFrameElement.js

 // 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 {
@@ -123,31 +124,38 @@ stateChange(action, newUrl) {
     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] }));
+            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) }));
             }
-            if (isNotifMessage(message)) {
-                this.dispatchEvent(new CustomEvent('notif', { detail: message[2] }));
-            }
         }
@@ -154,0 +162,0 @@ }

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

 import DFrameContent from '../DFrameContent.js';
 export function vueRouterDFrameContent(router, options) {
     return new DFrameContent({
+        ...options,
         updateSrc: (src) => {
@@ -5,0 +6,0 @@ const urlPrefix = window.location.origin + router.options.history.base;

package.json

 {
   "name": "@data-fair/frame",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "An iframe wrapper for powerful web app integrations.",
@@ -5,0 +5,0 @@ "main": "dist/frame.min.js",

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

44023

increased by10.95%

Number of package files

27

increased by17.39%

Lines of code

840

increased by13.67%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes