@open-iframe-resizer/vue 1.4.1 → 1.4.3

package/dist/open-iframe-resizer-vue.es.js

@@ -1,4 +1,4 @@
-import { defineComponent as k, ref as M, onMounted as O, onBeforeUnmount as P, createElementBlock as A, openBlock as B, mergeProps as _ } from "vue";
+import { defineComponent as O, ref as k, onMounted as M, onBeforeUnmount as P, createElementBlock as A, openBlock as B, mergeProps as _ } from "vue";
 const S = () => typeof window < "u", D = () => window.self !== window.top, v = (e) => e instanceof HTMLIFrameElement, H = (e) => {
   window.document.readyState === "complete" ? e() : window.addEventListener("load", e);
 }, T = (e, t) => {
@@ -7,13 +7,13 @@ const S = () => typeof window < "u", D = () => window.self !== window.top, v = (
   var n, r;
   const i = ((n = e.contentWindow) == null ? void 0 : n.document.readyState) === "complete";
   return e.src !== "about:blank" && ((r = e.contentWindow) == null ? void 0 : r.location.href) !== "about:blank" && i ? t() : e.addEventListener("load", t);
-}, C = () => ({ offsetSize: 0, checkOrigin: !0, enableLegacyLibSupport: !1 }), $ = (e) => {
+}, C = () => ({ offsetSize: 0, checkOrigin: !0, enableLegacyLibSupport: !1 }), W = (e) => {
   try {
     return new URL(e.src).origin === window.location.origin;
   } catch {
     return !1;
   }
-}, F = (e) => {
+}, $ = (e) => {
   try {
     const t = new URL(e.src).origin;
     if (t !== "about:blank")
@@ -21,25 +21,24 @@ const S = () => typeof window < "u", D = () => window.self !== window.top, v = (
   } catch {
   }
   return null;
-}, W = (e) => (Object.keys(e).forEach((t) => e[t] === void 0 && delete e[t]), e), E = (e) => {
+}, F = (e) => (Object.keys(e).forEach((t) => e[t] === void 0 && delete e[t]), e), E = (e) => {
   const { height: t, width: n } = e.getBoundingClientRect();
   return { height: Math.ceil(t), width: Math.ceil(n) };
 }, f = (e, t) => e ? t ? e.querySelector(t) : e.documentElement : null, z = (e, t) => {
   e && (t.bodyPadding && (e.body.style.padding = t.bodyPadding), t.bodyMargin && (e.body.style.margin = t.bodyMargin));
 }, g = (e) => e <= 100 ? 100 : e <= 120 ? 1e3 : 1e4, N = () => "[iFrameSizer]ID:0:false:false:32:true:true::auto:::0:false:child:auto:true:::true:::false";
 function U(e) {
-  if (typeof e.data == "string" && e.data.startsWith("[iFrameSizer]")) {
-    const [t, n] = e.data.split(":"), r = +n;
-    return r > 0 ? r : null;
-  }
-  return null;
+  if (typeof e.data != "string" || !e.data.startsWith("[iFrameSizer]") || !e.data.endsWith("mutationObserver") && !e.data.endsWith("resizeObserver"))
+    return null;
+  const [t, n] = e.data.split(":"), r = +n;
+  return r > 0 ? r : null;
 }
 const w = X();
 let l = [];
 const j = (e, t) => {
   if (!S())
     return [];
-  const n = { ...C(), ...W(e ?? {}) }, r = q(t), i = G(n, r);
+  const n = { ...C(), ...F(e ?? {}) }, r = q(t), i = G(n, r);
   return r.map((o) => {
     const a = {
       iframe: o,
@@ -49,7 +48,7 @@ const j = (e, t) => {
     }, s = K(a, i);
     return l.push(a), {
       unsubscribe: () => {
-        s(), l = l.filter((u) => u.iframe !== o);
+        s(), l = l.filter((d) => d.iframe !== o);
       }
     };
   });
@@ -64,13 +63,13 @@ function G(e, t) {
     return [];
   const n = [];
   for (const r of t) {
-    const i = F(r);
+    const i = $(r);
     i && n.push(i);
   }
   return n;
 }
 function K(e, t) {
-  const n = $(e.iframe) ? J(e) : V(e, t), r = Q(e);
+  const n = W(e.iframe) ? J(e) : V(e, t), r = Q(e);
   return () => {
     n(), r();
   };
@@ -79,31 +78,31 @@ function V(e, t) {
   const {
     iframe: n,
     initContext: r,
-    settings: { checkOrigin: i, enableLegacyLibSupport: o, targetElementSelector: a, bodyPadding: s, bodyMargin: u }
-  } = e, y = (c) => {
+    settings: { checkOrigin: i, enableLegacyLibSupport: o, targetElementSelector: a, bodyPadding: s, bodyMargin: d }
+  } = e, b = (c) => {
     var h;
     const I = !i || t.includes(c.origin);
     if (!(n.contentWindow !== c.source || !I)) {
       if (((h = c.data) == null ? void 0 : h.type) === "iframe-resized") {
-        const { height: d } = c.data;
-        d && m({ newHeight: d, registeredElement: e });
+        const { height: u } = c.data;
+        u && m({ newHeight: u, registeredElement: e });
         return;
       }
       if (o) {
-        const d = U(c);
-        d !== null && m({ newHeight: d, registeredElement: e });
+        const u = U(c);
+        u !== null && m({ newHeight: u, registeredElement: e });
         return;
       }
     }
   };
-  window.addEventListener("message", y);
-  const R = o ? N() : { type: "iframe-child-init", targetElementSelector: a, bodyPadding: s, bodyMargin: u }, b = () => {
+  window.addEventListener("message", b);
+  const R = o ? N() : { type: "iframe-child-init", targetElementSelector: a, bodyPadding: s, bodyMargin: d }, y = () => {
     T(n, () => {
       var c;
       return (c = n.contentWindow) == null ? void 0 : c.postMessage(R, "*");
-    }), r.retryAttempts++, r.retryTimeoutId = window.setTimeout(b, g(r.retryAttempts));
+    }), r.retryAttempts++, r.retryTimeoutId = window.setTimeout(y, g(r.retryAttempts));
   };
-  return b(), () => window.removeEventListener("message", y);
+  return y(), () => window.removeEventListener("message", b);
 }
 function J(e) {
   const { iframe: t, settings: n } = e, { targetElementSelector: r } = n;
@@ -134,7 +133,7 @@ function X() {
   return () => {
     if (!e) {
       const t = ({ target: n }) => {
-        const r = l.find(({ iframe: u }) => u.contentDocument === n.ownerDocument);
+        const r = l.find(({ iframe: d }) => d.contentDocument === n.ownerDocument);
         if (!r)
           return;
         const { iframe: i, settings: o } = r, a = f(i.contentDocument, o.targetElementSelector);
@@ -154,14 +153,14 @@ function m({ registeredElement: e, newHeight: t }) {
   const a = n.getBoundingClientRect(), s = t + r.offsetSize;
   if (n.style.height = `${s}px`, !r.onIframeResize)
     return;
-  const u = {
+  const d = {
     iframe: n,
     settings: { ...r },
     interactionState: { ...i },
     previousRenderState: { rect: a },
     nextRenderState: { rect: n.getBoundingClientRect() }
   };
-  r.onIframeResize(u);
+  r.onIframeResize(d);
 }
 const Y = ee();
 let p = !1;
@@ -195,7 +194,7 @@ function ee() {
     window.parent.postMessage(i, "*");
   })), e);
 }
-const te = k({
+const te = O({
   name: "ResizableIframe",
   props: {
     offsetSize: [String, Number, Object],
@@ -207,7 +206,7 @@ const te = k({
     enableLegacyLibSupport: Boolean
   },
   setup(e, { attrs: t }) {
-    const n = M(null);
+    const n = k(null);
     let r = [];
     const i = (o) => {
       const a = {
@@ -223,7 +222,7 @@ const te = k({
         a[s] === void 0 && delete a[s];
       }), r = j(a, o);
     };
-    return O(() => {
+    return M(() => {
       n.value && i(n.value);
     }), P(() => {
       r.forEach((o) => o.unsubscribe()), r = [];

package/dist/open-iframe-resizer-vue.umd.js

@@ -1 +1 @@
-(function(d,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],s):(d=typeof globalThis<"u"?globalThis:d||self,s(d["open-iframe-resizer-vue"]={},d.Vue))})(this,function(d,s){"use strict";const h=()=>typeof window<"u",k=()=>window.self!==window.top,p=e=>e instanceof HTMLIFrameElement,O=e=>{window.document.readyState==="complete"?e():window.addEventListener("load",e)},P=(e,t)=>{t(),e.addEventListener("load",t)},T=(e,t)=>{var n,r;const i=((n=e.contentWindow)==null?void 0:n.document.readyState)==="complete";return e.src!=="about:blank"&&((r=e.contentWindow)==null?void 0:r.location.href)!=="about:blank"&&i?t():e.addEventListener("load",t)},A=()=>({offsetSize:0,checkOrigin:!0,enableLegacyLibSupport:!1}),B=e=>{try{return new URL(e.src).origin===window.location.origin}catch{return!1}},_=e=>{try{const t=new URL(e.src).origin;if(t!=="about:blank")return t}catch{}return null},D=e=>(Object.keys(e).forEach(t=>e[t]===void 0&&delete e[t]),e),w=e=>{const{height:t,width:n}=e.getBoundingClientRect();return{height:Math.ceil(t),width:Math.ceil(n)}},m=(e,t)=>e?t?e.querySelector(t):e.documentElement:null,v=(e,t)=>{e&&(t.bodyPadding&&(e.body.style.padding=t.bodyPadding),t.bodyMargin&&(e.body.style.margin=t.bodyMargin))},y=e=>e<=100?100:e<=120?1e3:1e4,H=()=>"[iFrameSizer]ID:0:false:false:32:true:true::auto:::0:false:child:auto:true:::true:::false";function x(e){if(typeof e.data=="string"&&e.data.startsWith("[iFrameSizer]")){const[t,n]=e.data.split(":"),r=+n;return r>0?r:null}return null}const S=U();let g=[];const C=(e,t)=>{if(!h())return[];const n={...A(),...D(e??{})},r=$(t),i=F(n,r);return r.map(o=>{const a={iframe:o,settings:n,interactionState:{isHovered:!1},initContext:{isInitialized:!1,retryAttempts:0}},c=W(a,i);return g.push(a),{unsubscribe:()=>{c(),g=g.filter(l=>l.iframe!==o)}}})};function $(e){return typeof e=="string"?Array.from(document.querySelectorAll(e)).filter(p):e?p(e)?[e]:[]:Array.from(document.getElementsByTagName("iframe"))}function F(e,t){if(Array.isArray(e.checkOrigin))return e.checkOrigin;if(!e.checkOrigin)return[];const n=[];for(const r of t){const i=_(r);i&&n.push(i)}return n}function W(e,t){const n=B(e.iframe)?N(e):j(e,t),r=q(e);return()=>{n(),r()}}function j(e,t){const{iframe:n,initContext:r,settings:{checkOrigin:i,enableLegacyLibSupport:o,targetElementSelector:a,bodyPadding:c,bodyMargin:l}}=e,R=u=>{var M;const ee=!i||t.includes(u.origin);if(!(n.contentWindow!==u.source||!ee)){if(((M=u.data)==null?void 0:M.type)==="iframe-resized"){const{height:f}=u.data;f&&b({newHeight:f,registeredElement:e});return}if(o){const f=x(u);f!==null&&b({newHeight:f,registeredElement:e});return}}};window.addEventListener("message",R);const Z=o?H():{type:"iframe-child-init",targetElementSelector:a,bodyPadding:c,bodyMargin:l},I=()=>{P(n,()=>{var u;return(u=n.contentWindow)==null?void 0:u.postMessage(Z,"*")}),r.retryAttempts++,r.retryTimeoutId=window.setTimeout(I,y(r.retryAttempts))};return I(),()=>window.removeEventListener("message",R)}function N(e){const{iframe:t,settings:n}=e,{targetElementSelector:r}=n;let i=0;const o=()=>{const a=m(t.contentDocument,r);if(!t.contentDocument||!a)return i++,setTimeout(o,y(i));v(t.contentDocument,n),S().observe(a)};return T(t,o),()=>{const a=m(t.contentDocument,r);a&&S().unobserve(a),t.removeEventListener("load",o)}}function q({iframe:e,interactionState:t}){const n=()=>{t.isHovered=!0},r=()=>{t.isHovered=!1};return e.addEventListener("mouseenter",n),e.addEventListener("mouseleave",r),()=>{e.removeEventListener("mouseenter",n),e.removeEventListener("mouseleave",r)}}function U(){let e=null;return()=>{if(!e){const t=({target:n})=>{const r=g.find(({iframe:l})=>l.contentDocument===n.ownerDocument);if(!r)return;const{iframe:i,settings:o}=r,a=m(i.contentDocument,o.targetElementSelector);if(!a)return;const{height:c}=w(a);c&&b({newHeight:c,registeredElement:r})};e=new ResizeObserver(n=>n.forEach(t))}return e}}function b({registeredElement:e,newHeight:t}){const{iframe:n,settings:r,interactionState:i,initContext:o}=e;o.isInitialized||(o.isInitialized=!0,clearTimeout(o.retryTimeoutId));const a=n.getBoundingClientRect(),c=t+r.offsetSize;if(n.style.height=`${c}px`,!r.onIframeResize)return;const l={iframe:n,settings:{...r},interactionState:{...i},previousRenderState:{rect:a},nextRenderState:{rect:n.getBoundingClientRect()}};r.onIframeResize(l)}const V=K();let E=!1;G();function G(){!h()||!k()||window.addEventListener("message",e=>{var t;((t=e.data)==null?void 0:t.type)==="iframe-child-init"&&O(()=>z(e))})}function z(e,t=0){const{targetElementSelector:n,bodyPadding:r,bodyMargin:i}=e.data,o=m(document,n);if(E||window.parent!==e.source)return;if(!o)return setTimeout(()=>z(e,t+1),y(t));v(document,{bodyMargin:i,bodyPadding:r});const a=V();a.disconnect(),a.observe(o),E=!0}function K(){let e=null;return()=>(e||(e=new ResizeObserver(t=>{if(!t[0].target)return;const{height:n,width:r}=w(t[0].target),i={type:"iframe-resized",width:r,height:n};window.parent.postMessage(i,"*")})),e)}const J=s.defineComponent({name:"ResizableIframe",props:{offsetSize:[String,Number,Object],checkOrigin:[Boolean,Array],onIframeResize:Function,targetElementSelector:[String],bodyMargin:[String,Number],bodyPadding:[String,Number],enableLegacyLibSupport:Boolean},setup(e,{attrs:t}){const n=s.ref(null);let r=[];const i=o=>{const a={offsetSize:e.offsetSize,enableLegacyLibSupport:e.enableLegacyLibSupport,checkOrigin:e.checkOrigin,onIframeResize:e.onIframeResize,targetElementSelector:e.targetElementSelector,bodyMargin:e.bodyMargin,bodyPadding:e.bodyPadding};Object.keys(a).forEach(c=>{a[c]===void 0&&delete a[c]}),r=C(a,o)};return s.onMounted(()=>{n.value&&i(n.value)}),s.onBeforeUnmount(()=>{r.forEach(o=>o.unsubscribe()),r=[]}),{iframeRef:n,attrs:t}}}),Q=(e,t)=>{const n=e.__vccOpts||e;for(const[r,i]of t)n[r]=i;return n};function X(e,t,n,r,i,o){return s.openBlock(),s.createElementBlock("iframe",s.mergeProps({ref:"iframeRef"},e.$attrs),null,16)}const L=Q(J,[["render",X]]),Y={install(e){e.component("IframeResizer",L)}};d.IframeResizer=L,d.IframeResizerPlugin=Y,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});
+(function(d,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],s):(d=typeof globalThis<"u"?globalThis:d||self,s(d["open-iframe-resizer-vue"]={},d.Vue))})(this,function(d,s){"use strict";const h=()=>typeof window<"u",M=()=>window.self!==window.top,p=e=>e instanceof HTMLIFrameElement,k=e=>{window.document.readyState==="complete"?e():window.addEventListener("load",e)},P=(e,t)=>{t(),e.addEventListener("load",t)},T=(e,t)=>{var n,r;const i=((n=e.contentWindow)==null?void 0:n.document.readyState)==="complete";return e.src!=="about:blank"&&((r=e.contentWindow)==null?void 0:r.location.href)!=="about:blank"&&i?t():e.addEventListener("load",t)},A=()=>({offsetSize:0,checkOrigin:!0,enableLegacyLibSupport:!1}),B=e=>{try{return new URL(e.src).origin===window.location.origin}catch{return!1}},_=e=>{try{const t=new URL(e.src).origin;if(t!=="about:blank")return t}catch{}return null},D=e=>(Object.keys(e).forEach(t=>e[t]===void 0&&delete e[t]),e),v=e=>{const{height:t,width:n}=e.getBoundingClientRect();return{height:Math.ceil(t),width:Math.ceil(n)}},m=(e,t)=>e?t?e.querySelector(t):e.documentElement:null,w=(e,t)=>{e&&(t.bodyPadding&&(e.body.style.padding=t.bodyPadding),t.bodyMargin&&(e.body.style.margin=t.bodyMargin))},y=e=>e<=100?100:e<=120?1e3:1e4,H=()=>"[iFrameSizer]ID:0:false:false:32:true:true::auto:::0:false:child:auto:true:::true:::false";function x(e){if(typeof e.data!="string"||!e.data.startsWith("[iFrameSizer]")||!e.data.endsWith("mutationObserver")&&!e.data.endsWith("resizeObserver"))return null;const[t,n]=e.data.split(":"),r=+n;return r>0?r:null}const S=U();let g=[];const C=(e,t)=>{if(!h())return[];const n={...A(),...D(e??{})},r=W(t),i=$(n,r);return r.map(o=>{const a={iframe:o,settings:n,interactionState:{isHovered:!1},initContext:{isInitialized:!1,retryAttempts:0}},c=F(a,i);return g.push(a),{unsubscribe:()=>{c(),g=g.filter(l=>l.iframe!==o)}}})};function W(e){return typeof e=="string"?Array.from(document.querySelectorAll(e)).filter(p):e?p(e)?[e]:[]:Array.from(document.getElementsByTagName("iframe"))}function $(e,t){if(Array.isArray(e.checkOrigin))return e.checkOrigin;if(!e.checkOrigin)return[];const n=[];for(const r of t){const i=_(r);i&&n.push(i)}return n}function F(e,t){const n=B(e.iframe)?N(e):j(e,t),r=q(e);return()=>{n(),r()}}function j(e,t){const{iframe:n,initContext:r,settings:{checkOrigin:i,enableLegacyLibSupport:o,targetElementSelector:a,bodyPadding:c,bodyMargin:l}}=e,R=u=>{var O;const ee=!i||t.includes(u.origin);if(!(n.contentWindow!==u.source||!ee)){if(((O=u.data)==null?void 0:O.type)==="iframe-resized"){const{height:f}=u.data;f&&b({newHeight:f,registeredElement:e});return}if(o){const f=x(u);f!==null&&b({newHeight:f,registeredElement:e});return}}};window.addEventListener("message",R);const Z=o?H():{type:"iframe-child-init",targetElementSelector:a,bodyPadding:c,bodyMargin:l},I=()=>{P(n,()=>{var u;return(u=n.contentWindow)==null?void 0:u.postMessage(Z,"*")}),r.retryAttempts++,r.retryTimeoutId=window.setTimeout(I,y(r.retryAttempts))};return I(),()=>window.removeEventListener("message",R)}function N(e){const{iframe:t,settings:n}=e,{targetElementSelector:r}=n;let i=0;const o=()=>{const a=m(t.contentDocument,r);if(!t.contentDocument||!a)return i++,setTimeout(o,y(i));w(t.contentDocument,n),S().observe(a)};return T(t,o),()=>{const a=m(t.contentDocument,r);a&&S().unobserve(a),t.removeEventListener("load",o)}}function q({iframe:e,interactionState:t}){const n=()=>{t.isHovered=!0},r=()=>{t.isHovered=!1};return e.addEventListener("mouseenter",n),e.addEventListener("mouseleave",r),()=>{e.removeEventListener("mouseenter",n),e.removeEventListener("mouseleave",r)}}function U(){let e=null;return()=>{if(!e){const t=({target:n})=>{const r=g.find(({iframe:l})=>l.contentDocument===n.ownerDocument);if(!r)return;const{iframe:i,settings:o}=r,a=m(i.contentDocument,o.targetElementSelector);if(!a)return;const{height:c}=v(a);c&&b({newHeight:c,registeredElement:r})};e=new ResizeObserver(n=>n.forEach(t))}return e}}function b({registeredElement:e,newHeight:t}){const{iframe:n,settings:r,interactionState:i,initContext:o}=e;o.isInitialized||(o.isInitialized=!0,clearTimeout(o.retryTimeoutId));const a=n.getBoundingClientRect(),c=t+r.offsetSize;if(n.style.height=`${c}px`,!r.onIframeResize)return;const l={iframe:n,settings:{...r},interactionState:{...i},previousRenderState:{rect:a},nextRenderState:{rect:n.getBoundingClientRect()}};r.onIframeResize(l)}const V=K();let E=!1;G();function G(){!h()||!M()||window.addEventListener("message",e=>{var t;((t=e.data)==null?void 0:t.type)==="iframe-child-init"&&k(()=>z(e))})}function z(e,t=0){const{targetElementSelector:n,bodyPadding:r,bodyMargin:i}=e.data,o=m(document,n);if(E||window.parent!==e.source)return;if(!o)return setTimeout(()=>z(e,t+1),y(t));w(document,{bodyMargin:i,bodyPadding:r});const a=V();a.disconnect(),a.observe(o),E=!0}function K(){let e=null;return()=>(e||(e=new ResizeObserver(t=>{if(!t[0].target)return;const{height:n,width:r}=v(t[0].target),i={type:"iframe-resized",width:r,height:n};window.parent.postMessage(i,"*")})),e)}const J=s.defineComponent({name:"ResizableIframe",props:{offsetSize:[String,Number,Object],checkOrigin:[Boolean,Array],onIframeResize:Function,targetElementSelector:[String],bodyMargin:[String,Number],bodyPadding:[String,Number],enableLegacyLibSupport:Boolean},setup(e,{attrs:t}){const n=s.ref(null);let r=[];const i=o=>{const a={offsetSize:e.offsetSize,enableLegacyLibSupport:e.enableLegacyLibSupport,checkOrigin:e.checkOrigin,onIframeResize:e.onIframeResize,targetElementSelector:e.targetElementSelector,bodyMargin:e.bodyMargin,bodyPadding:e.bodyPadding};Object.keys(a).forEach(c=>{a[c]===void 0&&delete a[c]}),r=C(a,o)};return s.onMounted(()=>{n.value&&i(n.value)}),s.onBeforeUnmount(()=>{r.forEach(o=>o.unsubscribe()),r=[]}),{iframeRef:n,attrs:t}}}),Q=(e,t)=>{const n=e.__vccOpts||e;for(const[r,i]of t)n[r]=i;return n};function X(e,t,n,r,i,o){return s.openBlock(),s.createElementBlock("iframe",s.mergeProps({ref:"iframeRef"},e.$attrs),null,16)}const L=Q(J,[["render",X]]),Y={install(e){e.component("IframeResizer",L)}};d.IframeResizer=L,d.IframeResizerPlugin=Y,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@open-iframe-resizer/vue",
   "private": false,
-  "version": "1.4.1",
+  "version": "1.4.3",
   "description": "Open-source modern iframe resizer component",
   "license": "MIT",
   "repository": {
@@ -42,8 +42,10 @@
     "serve": "concurrently \"vite --port 5552\" \"vite --port 5553\"",
     "test": "npx playwright install --with-deps && npx playwright test"
   },
+  "dependencies": {
+    "@open-iframe-resizer/core": "1.4.3"
+  },
   "devDependencies": {
-    "@open-iframe-resizer/core": "1.4.1",
     "@vitejs/plugin-vue": "^5.2.3",
     "@vue/tsconfig": "^0.7.0",
     "vue": "^3.5.13",