@open-iframe-resizer/core 1.0.0-rc4 → 1.0.0

package/LICENSE.md

@@ -1,20 +1,20 @@
-Copyright (c) 2012-2024 Scott Chacon and others
-
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of this software and associated documentation files (the
-"Software"), to deal in the Software without restriction, including
-without limitation the rights to use, copy, modify, merge, publish,
-distribute, sublicense, and/or sell copies of the Software, and to
-permit persons to whom the Software is furnished to do so, subject to
-the following conditions:
-
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+Copyright (c) 2012-2024 Scott Chacon and others
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -1,18 +1,41 @@
-# Open Iframe Resizer
+# Open Iframe Resizer 
 
 ## 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.
+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
 
-### Browser
-#### ES6 Modules
+### Browser (ES6 modules)
 
 ```html
 <script type="module">
-  import { initialize } from "/dist/index.js";
+  import { initialize } from "https://cdn.jsdelivr.net/npm/@open-iframe-resizer/core@latest/dist/index.js";
 
-  initialize({}, "#iframe-id");
+  initialize({}, "#my-iframe");
 </script>
 ```
+
+You can found a working example [here](https://codesandbox.io/p/sandbox/open-iframe-resize-browser-m655zt)
+
+### Package
+Note you can also install the package through npm:
+```bash
+npm install @open-iframe-resizer/core
+```
+
+## Notes
+
+### Retro-compatibility
+I decided to replicate the API from the well-known iframe-resizer library, as it may facilitate migration to this project (you only need to change the script).
+
+### Resize cross-origin iframes
+To resize iframes from a different origin, you also need to load the script on your child page to enable messaging between the two windows (you do not need to call the initialize function in the child; loading the module is sufficient).
+
+## Browser support
+
+| Chrome | Safari | Firefox | Opera | IE        |
+|--------|--------|---------|-------|-----------|
+| 64+    | 13.1+  | 69+     | 51+   | 🙅‍♂️ |

package/dist/common.d.ts

@@ -4,9 +4,8 @@ declare const isSameOriginIframe: (iframe: HTMLIFrameElement) => iframe is HTMLI
     contentDocument: Document;
 };
 declare const isHtmlIframeElement: (element: Element) => element is HTMLIFrameElement;
-declare const deferWhenDomContentIsLoaded: (document: Document, executable: () => void) => void;
-declare const deferWhenPageIsLoaded: (document: Document, executable: () => void) => void;
+declare const deferWhenWindowIsLoaded: (_window: Window, executable: () => void) => void;
+declare const deferWhenIframeIsLoaded: (iframe: HTMLIFrameElement, executable: () => void) => void;
 declare const getDefaultSettings: () => Settings;
 declare const isIframeSameOrigin: (iframe: HTMLIFrameElement) => boolean;
-declare function debounce<T extends (...args: any[]) => any>(f: T, delay: number): (...args: unknown[]) => void;
-export { isInIframe, isSameOriginIframe, deferWhenDomContentIsLoaded, isHtmlIframeElement, deferWhenPageIsLoaded, isIframeSameOrigin, debounce, getDefaultSettings, };
+export { isInIframe, isSameOriginIframe, isHtmlIframeElement, deferWhenIframeIsLoaded, isIframeSameOrigin, deferWhenWindowIsLoaded, getDefaultSettings };

package/dist/index.js

@@ -1,23 +1,22 @@
-const w = () => window && window.self !== window.top, l = (e) => e instanceof HTMLIFrameElement, b = () => ({ offsetSize: 0, checkOrigin: !0 }), y = (e) => {
+const g = () => window && window.self !== window.top, l = (e) => e instanceof HTMLIFrameElement, h = (e, n) => {
+  e.document.readyState === "complete" ? n() : e.addEventListener("load", n);
+}, w = (e, n) => {
+  var i, o;
+  const t = ((i = e.contentWindow) == null ? void 0 : i.document.readyState) === "complete";
+  return e.src !== "about:blank" && ((o = e.contentWindow) == null ? void 0 : o.location.href) !== "about:blank" && t ? n() : e.addEventListener("load", n);
+}, b = () => ({ offsetSize: 0, checkOrigin: !0 }), y = (e) => {
   try {
     return new URL(e.src, window.location.origin).origin === window.location.origin;
   } catch {
     return !1;
   }
-};
-function m(e, t) {
-  let n;
-  return (...i) => {
-    clearTimeout(n), n = setTimeout(() => e.apply(void 0, i), t);
-  };
-}
-const f = I(), d = [], S = (e, t) => {
-  const n = { ...b(), ...e }, i = O(t), r = v(n, i);
-  return i.map((c) => {
-    const o = d.push({ iframe: c, settings: n }), s = p(c, n, r);
+}, u = E(), a = [], k = (e, n) => {
+  const t = { ...b(), ...e }, r = O(n), i = v(t, r);
+  return r.map((o) => {
+    const s = a.push({ iframe: o, settings: t }), c = L(o, t, i);
     return {
       unsubscribe: () => {
-        s(), d.splice(o - 1, 1);
+        c(), a.splice(s - 1, 1);
       }
     };
   });
@@ -25,87 +24,87 @@ const f = I(), d = [], S = (e, t) => {
 function O(e) {
   return typeof e == "string" ? Array.from(document.querySelectorAll(e)).filter(l) : e ? l(e) ? [e] : [] : Array.from(document.getElementsByTagName("iframe"));
 }
-function v(e, t) {
+function v(e, n) {
   if (Array.isArray(e.checkOrigin))
     return e.checkOrigin;
   if (!e.checkOrigin)
     return [];
-  const n = [];
-  for (const i of t) {
-    const r = z(i);
-    r && n.push(r);
+  const t = [];
+  for (const r of n) {
+    const i = z(r);
+    i && t.push(i);
   }
-  return n;
+  return t;
 }
 function z(e) {
   try {
-    const t = new URL(e.src).origin;
-    if (t !== "about:blank")
-      return t;
+    const n = new URL(e.src).origin;
+    if (n !== "about:blank")
+      return n;
   } catch {
   }
   return null;
 }
-function p(e, t, n) {
-  return y(e) ? E(e) : L(e, t, n);
+function L(e, n, t) {
+  return y(e) ? I(e) : p(e, n, t);
 }
-function L(e, t, n) {
-  const i = (r) => {
-    var o;
-    if ((!t.checkOrigin || n.includes(r.origin)) && ((o = r.data) == null ? void 0 : o.type) === "iframe-resized" && e.contentWindow === r.source) {
-      const { width: s, height: a } = r.data;
-      g({ width: s, height: a, iframe: e, settings: t });
+function p(e, n, t) {
+  const r = (i) => {
+    var s;
+    if ((!n.checkOrigin || t.includes(i.origin)) && ((s = i.data) == null ? void 0 : s.type) === "iframe-resized" && e.contentWindow === i.source) {
+      const { height: c } = i.data;
+      f({ height: c, iframe: e, settings: n });
     }
   };
-  return window.addEventListener("message", i, !1), () => window.removeEventListener("message", i, !1);
+  return window.addEventListener("message", r, !1), () => window.removeEventListener("message", r, !1);
 }
-function E(e) {
-  const t = () => {
-    var i;
-    const n = (i = e.contentDocument) == null ? void 0 : i.body;
-    if (!n) {
+function I(e) {
+  const n = () => {
+    var r;
+    const t = (r = e.contentDocument) == null ? void 0 : r.body;
+    if (!t) {
       console.error("Unable to observe the iframe content document body");
       return;
     }
-    f.observe(n);
+    u.observe(t);
   };
-  return e.addEventListener("load", t), () => {
-    var n;
-    (n = e.contentDocument) != null && n.body && f.unobserve(e.contentDocument.body), e.removeEventListener("load", t);
+  return w(e, n), () => {
+    var t;
+    (t = e.contentDocument) != null && t.body && u.unobserve(e.contentDocument.body), e.removeEventListener("load", n);
   };
 }
-function I() {
+function E() {
   const e = ({ target: n }) => {
-    var a;
-    const i = d.find((h) => {
-      var u;
-      return ((u = h.iframe.contentDocument) == null ? void 0 : u.body) === n;
+    var c;
+    const t = a.find((m) => {
+      var d;
+      return ((d = m.iframe.contentDocument) == null ? void 0 : d.body) === n;
     });
-    if (!i)
+    if (!t)
       return;
-    const { iframe: r, settings: c } = i, { scrollHeight: o, scrollWidth: s } = ((a = r.contentDocument) == null ? void 0 : a.documentElement) ?? {};
-    o !== void 0 && s !== void 0 && g({ width: s, height: o, iframe: r, settings: c });
-  }, t = m((n) => n.forEach(e), 10);
-  return new ResizeObserver(t);
+    const { iframe: r, settings: i } = t, { scrollHeight: o, scrollWidth: s } = ((c = r.contentDocument) == null ? void 0 : c.documentElement) ?? {};
+    o !== void 0 && s !== void 0 && f({ height: o, iframe: r, settings: i });
+  };
+  return new ResizeObserver((n) => n.forEach(e));
 }
-function g({ width: e, height: t, iframe: n, settings: i }) {
-  n.style.width = `${e}px`, n.style.height = `${t + i.offsetSize}px`;
+function f({ height: e, iframe: n, settings: t }) {
+  n.style.height = `${e + t.offsetSize}px`;
 }
-w() && R();
+g() && R();
 function R() {
-  window.addEventListener("load", () => {
-    const e = m(() => {
-      const n = {
+  h(window, () => {
+    const e = () => {
+      const t = {
         type: "iframe-resized",
         width: document.documentElement.scrollWidth,
         height: document.documentElement.scrollHeight
       };
-      window.parent.postMessage(n, "*");
-    }, 10);
+      window.parent.postMessage(t, "*");
+    };
     new ResizeObserver(e).observe(document.body);
   });
 }
 export {
-  S as initialize,
+  k as initialize,
   R as initializeChildListener
 };

package/dist/index.umd.cjs

@@ -1 +1 @@
-(function(o,d){typeof exports=="object"&&typeof module<"u"?d(exports):typeof define=="function"&&define.amd?define(["exports"],d):(o=typeof globalThis<"u"?globalThis:o||self,d(o.iframeResizer={}))})(this,function(o){"use strict";const d=()=>window&&window.self!==window.top,f=e=>e instanceof HTMLIFrameElement,y=()=>({offsetSize:0,checkOrigin:!0}),O=e=>{try{return new URL(e.src,window.location.origin).origin===window.location.origin}catch{return!1}};function m(e,i){let n;return(...t)=>{clearTimeout(n),n=setTimeout(()=>e.apply(void 0,t),i)}}const g=S(),l=[],z=(e,i)=>{const n={...y(),...e},t=p(i),r=v(n,t);return t.map(a=>{const s=l.push({iframe:a,settings:n}),c=E(a,n,r);return{unsubscribe:()=>{c(),l.splice(s-1,1)}}})};function p(e){return typeof e=="string"?Array.from(document.querySelectorAll(e)).filter(f):e?f(e)?[e]:[]:Array.from(document.getElementsByTagName("iframe"))}function v(e,i){if(Array.isArray(e.checkOrigin))return e.checkOrigin;if(!e.checkOrigin)return[];const n=[];for(const t of i){const r=L(t);r&&n.push(r)}return n}function L(e){try{const i=new URL(e.src).origin;if(i!=="about:blank")return i}catch{}return null}function E(e,i,n){return O(e)?I(e):R(e,i,n)}function R(e,i,n){const t=r=>{var s;if((!i.checkOrigin||n.includes(r.origin))&&((s=r.data)==null?void 0:s.type)==="iframe-resized"&&e.contentWindow===r.source){const{width:c,height:u}=r.data;h({width:c,height:u,iframe:e,settings:i})}};return window.addEventListener("message",t,!1),()=>window.removeEventListener("message",t,!1)}function I(e){const i=()=>{var t;const n=(t=e.contentDocument)==null?void 0:t.body;if(!n){console.error("Unable to observe the iframe content document body");return}g.observe(n)};return e.addEventListener("load",i),()=>{var n;(n=e.contentDocument)!=null&&n.body&&g.unobserve(e.contentDocument.body),e.removeEventListener("load",i)}}function S(){const e=({target:n})=>{var u;const t=l.find(k=>{var w;return((w=k.iframe.contentDocument)==null?void 0:w.body)===n});if(!t)return;const{iframe:r,settings:a}=t,{scrollHeight:s,scrollWidth:c}=((u=r.contentDocument)==null?void 0:u.documentElement)??{};s!==void 0&&c!==void 0&&h({width:c,height:s,iframe:r,settings:a})},i=m(n=>n.forEach(e),10);return new ResizeObserver(i)}function h({width:e,height:i,iframe:n,settings:t}){n.style.width=`${e}px`,n.style.height=`${i+t.offsetSize}px`}d()&&b();function b(){window.addEventListener("load",()=>{const e=m(()=>{const n={type:"iframe-resized",width:document.documentElement.scrollWidth,height:document.documentElement.scrollHeight};window.parent.postMessage(n,"*")},10);new ResizeObserver(e).observe(document.body)})}o.initialize=z,o.initializeChildListener=b,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});
+(function(s,a){typeof exports=="object"&&typeof module<"u"?a(exports):typeof define=="function"&&define.amd?define(["exports"],a):(s=typeof globalThis<"u"?globalThis:s||self,a(s.iframeResizer={}))})(this,function(s){"use strict";const a=()=>window&&window.self!==window.top,l=e=>e instanceof HTMLIFrameElement,b=(e,n)=>{e.document.readyState==="complete"?n():e.addEventListener("load",n)},w=(e,n)=>{var r,o;const t=((r=e.contentWindow)==null?void 0:r.document.readyState)==="complete";return e.src!=="about:blank"&&((o=e.contentWindow)==null?void 0:o.location.href)!=="about:blank"&&t?n():e.addEventListener("load",n)},y=()=>({offsetSize:0,checkOrigin:!0}),O=e=>{try{return new URL(e.src,window.location.origin).origin===window.location.origin}catch{return!1}},f=S(),u=[],p=(e,n)=>{const t={...y(),...e},i=z(n),r=v(t,i);return i.map(o=>{const c=u.push({iframe:o,settings:t}),d=I(o,t,r);return{unsubscribe:()=>{d(),u.splice(c-1,1)}}})};function z(e){return typeof e=="string"?Array.from(document.querySelectorAll(e)).filter(l):e?l(e)?[e]:[]:Array.from(document.getElementsByTagName("iframe"))}function v(e,n){if(Array.isArray(e.checkOrigin))return e.checkOrigin;if(!e.checkOrigin)return[];const t=[];for(const i of n){const r=L(i);r&&t.push(r)}return t}function L(e){try{const n=new URL(e.src).origin;if(n!=="about:blank")return n}catch{}return null}function I(e,n,t){return O(e)?R(e):E(e,n,t)}function E(e,n,t){const i=r=>{var c;if((!n.checkOrigin||t.includes(r.origin))&&((c=r.data)==null?void 0:c.type)==="iframe-resized"&&e.contentWindow===r.source){const{height:d}=r.data;m({height:d,iframe:e,settings:n})}};return window.addEventListener("message",i,!1),()=>window.removeEventListener("message",i,!1)}function R(e){const n=()=>{var i;const t=(i=e.contentDocument)==null?void 0:i.body;if(!t){console.error("Unable to observe the iframe content document body");return}f.observe(t)};return w(e,n),()=>{var t;(t=e.contentDocument)!=null&&t.body&&f.unobserve(e.contentDocument.body),e.removeEventListener("load",n)}}function S(){const e=({target:n})=>{var d;const t=u.find(k=>{var h;return((h=k.iframe.contentDocument)==null?void 0:h.body)===n});if(!t)return;const{iframe:i,settings:r}=t,{scrollHeight:o,scrollWidth:c}=((d=i.contentDocument)==null?void 0:d.documentElement)??{};o!==void 0&&c!==void 0&&m({height:o,iframe:i,settings:r})};return new ResizeObserver(n=>n.forEach(e))}function m({height:e,iframe:n,settings:t}){n.style.height=`${e+t.offsetSize}px`}a()&&g();function g(){b(window,()=>{const e=()=>{const t={type:"iframe-resized",width:document.documentElement.scrollWidth,height:document.documentElement.scrollHeight};window.parent.postMessage(t,"*")};new ResizeObserver(e).observe(document.body)})}s.initialize=p,s.initializeChildListener=g,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});

package/dist/type.d.ts

@@ -1,21 +1,27 @@
 interface Window {
-	iframeResizer: {
-		initialize: InitializeFunction;
-	};
+  iframeResizer: {
+    initialize: InitializeFunction;
+  };
 }
 
+/**
+ * Automatically resizes the selected iframes.
+ * @param settings The settings for the selected iframes. The default settings properties are picked if empty.
+ * @param selector The selector for the iframe(s) or the HTMLIFrameElement to be resized. If empty, all document iframe elements will be selected.
+ * @returns A result array, which can be used to clean up the listeners if you often remove iframes from the document.
+ */
 export type InitializeFunction = (settings?: Partial<Settings>, selector?: string | HTMLIFrameElement) => InitializeResult[];
 export type InitializeResult = { unsubscribe: () => void };
 
 export type Settings = {
-	offsetSize: number;
-	checkOrigin: string[] | boolean;
+  offsetSize: number;
+  checkOrigin: string[] | boolean;
 };
 
 export type IframeResizeEventData = {
-	type: "iframe-resized";
-	width: number;
-	height: number;
+  type: "iframe-resized";
+  width: number;
+  height: number;
 };
 
 export type IframeResizeEvent = MessageEvent<IframeResizeEventData>;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@open-iframe-resizer/core",
 	"private": false,
-	"version": "1.0.0-rc4",
+	"version": "1.0.0",
 	"description": "Open-source modern iframe resizer",
 	"license": "MIT",
 	"repository": {
@@ -11,7 +11,18 @@
 	"engines": {
 		"node": ">=20.0.0"
 	},
-	"keywords": ["iframe", "Resizing", "Resizer", "resize", "cross", "same", "domain", "width", "height", "responsive"],
+	"keywords": [
+		"iframe",
+		"Resizing",
+		"Resizer",
+		"resize",
+		"cross",
+		"same",
+		"domain",
+		"width",
+		"height",
+		"responsive"
+	],
 	"type": "module",
 	"main": "./dist/index.cjs",
 	"module": "./dist/index.js",
@@ -23,7 +34,10 @@
 			"require": "./dist/index.cjs"
 		}
 	},
-	"files": ["dist", "README.md", "LICENSE.md"],
+	"files": [
+		"dist",
+		"README.md"
+	],
 	"scripts": {
 		"docs": "npm run typedoc",
 		"lint": "biome lint ./src",
@@ -34,10 +48,10 @@
 		"serve": "concurrently \"vite --port 5550\" \"vite --port 5551\"",
 		"test": "npm run test:unit && npm run test:e2e",
 		"test:e2e": "npx playwright install --with-deps && npx playwright test",
-		"test:unit": "vitest run"
+		"test:unit": "vitest run",
+		"prepare": "copyfiles -V ../../README.md packages/core"
 	},
 	"devDependencies": {
-		"@microsoft/tsdoc": "^0.14.1",
-		"picocolors": "^1.0.1"
+		"@microsoft/tsdoc": "^0.15.0"
 	}
 }