@open-iframe-resizer/vue 2.1.0 → 2.2.0

package/README.md

@@ -0,0 +1,34 @@
+# Open Iframe Resizer Vue
+
+## Overview
+
+`iframe-resizer` is a modern, lightweight library for resizing iframes dynamically. It is shipped under the MIT license, making it usable in commercial projects.
+
+If you found this plugin helpful, please consider starring the repository!
+
+## Getting Started
+
+
+Install the package:
+```bash
+npm install @vvopen-iframe-resizer/vue
+```
+
+Wrap your iframes with it to resize them automatically:
+```js
+import { createApp } from "vue";
+import { IframeResizer } from "@vvopen-iframe-resizer/vue";
+
+const app = createApp({
+  components: {
+    IframeResizer,
+  },
+  template: `
+      <div>
+        <IframeResizer src=""https://github.com" />
+      </div>
+    `,
+}).mount("#app");
+```
+
+

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

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@open-iframe-resizer/vue",
   "private": false,
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Open-source modern iframe resizer component",
   "license": "MIT",
   "repository": {
@@ -43,7 +43,7 @@
     "test": "npx playwright install --with-deps && npx playwright test"
   },
   "dependencies": {
-    "@open-iframe-resizer/core": "2.1.0"
+    "@open-iframe-resizer/core": "2.2.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.1",