@open-iframe-resizer/core 1.0.0 → 1.1.0

package/README.md

@@ -2,7 +2,7 @@
 
 ## Overview
 
-A modern, lightweight library for resizing iframes dynamically. It is shipped under the MIT license, making it usable in commercial projects.
+A modern, lightweight alternative 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! 
 
@@ -21,18 +21,33 @@ If you found this plugin helpful, please consider starring the repository!
 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:
+Note you can also install the core package through [npm](https://www.npmjs.com/package/@open-iframe-resizer/core):
 ```bash
 npm install @open-iframe-resizer/core
 ```
 
+### React
+A React component is also available:
+```bash
+npm install @open-iframe-resizer/react
+```
+
 ## 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).
+### Comparison with iframe-resizer
+This library is very good, but it has changed its license, so it is no longer usable in closed-source projects for free.
+I decided to replicate some parts of the API, as it may facilitate migration to this project.
+
+Some features from this library are missing, but they could be implemented in future versions.
 
-### 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).
+### Resize iframes from a different origin
+- If you have control over the embedded page, you 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).
+
+- If you have no control over the child iframe domain, and, by chance, the child page loads the legacy *iframe-resizer* script, you can initialize the library with the compatibility mode; it will try to connect to the child iframe:
+
+```javascript
+initialize({ enableLegacyLibSupport: true }, "#my-iframe");
+```
 
 ## Browser support
 

package/dist/common.d.ts

@@ -1,11 +1,18 @@
 import { Settings } from './type';
-declare const isInIframe: () => boolean;
-declare const isSameOriginIframe: (iframe: HTMLIFrameElement) => iframe is HTMLIFrameElement & {
+export declare const isInIframe: () => boolean;
+export declare const isSameOriginIframe: (iframe: HTMLIFrameElement) => iframe is HTMLIFrameElement & {
     contentDocument: Document;
 };
-declare const isHtmlIframeElement: (element: Element) => element is HTMLIFrameElement;
-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;
-export { isInIframe, isSameOriginIframe, isHtmlIframeElement, deferWhenIframeIsLoaded, isIframeSameOrigin, deferWhenWindowIsLoaded, getDefaultSettings };
+export declare const isHtmlIframeElement: (element: Element) => element is HTMLIFrameElement;
+export declare const deferWhenWindowIsLoaded: (_window: Window, executable: () => void) => void;
+/**
+ * Post the message twice, it assures the target to receive the message at least once
+ */
+export declare const safePostMessageToCrossOriginIframe: (iframe: HTMLIFrameElement, executable: () => void) => void;
+export declare const deferWhenSameOriginIframeIsLoaded: (iframe: HTMLIFrameElement, executable: () => void) => void;
+export declare const getDefaultSettings: () => Settings;
+export declare const isIframeSameOrigin: (iframe: HTMLIFrameElement) => boolean;
+export declare const extractIframeOrigin: (iframe: HTMLIFrameElement) => string | null;
+export declare const removeUndefinedProperties: <T extends {
+    [key: string]: unknown;
+}>(object: T) => T;

package/dist/compat.d.ts

@@ -0,0 +1,2 @@
+export declare function sendLegacyLibInitMessageOnIframeLoad(iframe: HTMLIFrameElement): void;
+export declare function handleLegacyLibResizeMessage(event: MessageEvent): number | null;

package/dist/index.js

@@ -1,98 +1,128 @@
-const g = () => window && window.self !== window.top, l = (e) => e instanceof HTMLIFrameElement, h = (e, n) => {
+const h = () => window && window.self !== window.top, f = (e) => e instanceof HTMLIFrameElement, b = (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";
+  n(), e.addEventListener("load", n);
+}, L = (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);
-}, b = () => ({ offsetSize: 0, checkOrigin: !0 }), y = (e) => {
+}, y = () => ({ offsetSize: 0, checkOrigin: !0, enableLegacyLibSupport: !1 }), p = (e) => {
   try {
     return new URL(e.src, window.location.origin).origin === window.location.origin;
   } catch {
     return !1;
   }
-}, 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);
+}, m = (e) => {
+  try {
+    const n = new URL(e.src).origin;
+    if (n !== "about:blank")
+      return n;
+  } catch {
+  }
+  return null;
+}, O = (e) => (Object.keys(e).forEach((n) => e[n] === void 0 && delete e[n]), e);
+function z(e) {
+  w(
+    e,
+    () => {
+      var n;
+      return (n = e.contentWindow) == null ? void 0 : n.postMessage(
+        "[iFrameSizer]ID:0:false:false:32:true:true::auto:::0:false:child:auto:true:::true:::false",
+        m(e) ?? "*"
+      );
+    }
+  );
+}
+function I(e) {
+  if (typeof e.data == "string" && e.data.startsWith("[iFrameSizer]")) {
+    const [n, t] = e.data.split(":");
+    return +t;
+  }
+  return null;
+}
+const g = W(), d = [], D = (e, n) => {
+  const t = { ...y(), ...O(e ?? {}) }, i = v(n), r = S(t, i);
+  return i.map((o) => {
+    const c = d.push({ iframe: o, settings: t }), s = E(o, t, r);
     return {
       unsubscribe: () => {
-        c(), a.splice(s - 1, 1);
+        s(), d.splice(c - 1, 1);
       }
     };
   });
 };
-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) {
+  return typeof e == "string" ? Array.from(document.querySelectorAll(e)).filter(f) : e ? f(e) ? [e] : [] : Array.from(document.getElementsByTagName("iframe"));
 }
-function v(e, n) {
+function S(e, n) {
   if (Array.isArray(e.checkOrigin))
     return e.checkOrigin;
   if (!e.checkOrigin)
     return [];
   const t = [];
-  for (const r of n) {
-    const i = z(r);
-    i && t.push(i);
+  for (const i of n) {
+    const r = m(i);
+    r && t.push(r);
   }
   return t;
 }
-function z(e) {
-  try {
-    const n = new URL(e.src).origin;
-    if (n !== "about:blank")
-      return n;
-  } catch {
-  }
-  return null;
-}
-function L(e, n, t) {
-  return y(e) ? I(e) : p(e, n, t);
+function E(e, n, t) {
+  return p(e) ? k(e) : R(e, n, t);
 }
-function p(e, n, t) {
-  const r = (i) => {
+function R(e, n, t) {
+  const i = (r) => {
     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 });
+    const o = !n.checkOrigin || t.includes(r.origin);
+    if (!(!(e.contentWindow === r.source) || !o)) {
+      if (((s = r.data) == null ? void 0 : s.type) === "iframe-resized") {
+        const { height: a } = r.data;
+        u({ height: a, iframe: e, settings: n });
+        return;
+      }
+      if (n.enableLegacyLibSupport) {
+        const a = I(r);
+        a !== null && u({ height: a, iframe: e, settings: n });
+        return;
+      }
     }
   };
-  return window.addEventListener("message", r, !1), () => window.removeEventListener("message", r, !1);
+  return window.addEventListener("message", i), n.enableLegacyLibSupport && z(e), () => window.removeEventListener("message", i);
 }
-function I(e) {
+function k(e) {
   const n = () => {
-    var r;
-    const t = (r = e.contentDocument) == null ? void 0 : r.body;
+    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;
     }
-    u.observe(t);
+    g.observe(t);
   };
-  return w(e, n), () => {
+  return L(e, n), () => {
     var t;
-    (t = e.contentDocument) != null && t.body && u.unobserve(e.contentDocument.body), e.removeEventListener("load", n);
+    (t = e.contentDocument) != null && t.body && g.unobserve(e.contentDocument.body), e.removeEventListener("load", n);
   };
 }
-function E() {
+function W() {
   const e = ({ target: n }) => {
-    var c;
-    const t = a.find((m) => {
-      var d;
-      return ((d = m.iframe.contentDocument) == null ? void 0 : d.body) === n;
+    var s;
+    const t = d.find((a) => {
+      var l;
+      return ((l = a.iframe.contentDocument) == null ? void 0 : l.body) === n;
     });
     if (!t)
       return;
-    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 });
+    const { iframe: i, settings: r } = t, { scrollHeight: o, scrollWidth: c } = ((s = i.contentDocument) == null ? void 0 : s.documentElement) ?? {};
+    o !== void 0 && c !== void 0 && u({ height: o, iframe: i, settings: r });
   };
   return new ResizeObserver((n) => n.forEach(e));
 }
-function f({ height: e, iframe: n, settings: t }) {
-  n.style.height = `${e + t.offsetSize}px`;
+function u({ height: e, iframe: n, settings: t }) {
+  n.style.height = `${e + t.offsetSize + 1}px`;
 }
-g() && R();
-function R() {
-  h(window, () => {
+h() && C();
+function C() {
+  b(window, () => {
     const e = () => {
       const t = {
         type: "iframe-resized",
@@ -105,6 +135,6 @@ function R() {
   });
 }
 export {
-  k as initialize,
-  R as initializeChildListener
+  D as initialize,
+  C as initializeChildListener
 };

package/dist/index.umd.cjs

@@ -1 +1 @@
-(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"})});
+(function(s,d){typeof exports=="object"&&typeof module<"u"?d(exports):typeof define=="function"&&define.amd?define(["exports"],d):(s=typeof globalThis<"u"?globalThis:s||self,d(s.iframeResizer={}))})(this,function(s){"use strict";const d=()=>window&&window.self!==window.top,g=e=>e instanceof HTMLIFrameElement,p=(e,n)=>{e.document.readyState==="complete"?n():e.addEventListener("load",n)},L=(e,n)=>{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)},O=()=>({offsetSize:0,checkOrigin:!0,enableLegacyLibSupport:!1}),z=e=>{try{return new URL(e.src,window.location.origin).origin===window.location.origin}catch{return!1}},m=e=>{try{const n=new URL(e.src).origin;if(n!=="about:blank")return n}catch{}return null},I=e=>(Object.keys(e).forEach(n=>e[n]===void 0&&delete e[n]),e);function v(e){L(e,()=>{var n;return(n=e.contentWindow)==null?void 0:n.postMessage("[iFrameSizer]ID:0:false:false:32:true:true::auto:::0:false:child:auto:true:::true:::false",m(e)??"*")})}function S(e){if(typeof e.data=="string"&&e.data.startsWith("[iFrameSizer]")){const[n,t]=e.data.split(":");return+t}return null}const h=D(),l=[],E=(e,n)=>{const t={...O(),...I(e??{})},r=R(n),i=k(t,r);return r.map(o=>{const u=l.push({iframe:o,settings:t}),a=W(o,t,i);return{unsubscribe:()=>{a(),l.splice(u-1,1)}}})};function R(e){return typeof e=="string"?Array.from(document.querySelectorAll(e)).filter(g):e?g(e)?[e]:[]:Array.from(document.getElementsByTagName("iframe"))}function k(e,n){if(Array.isArray(e.checkOrigin))return e.checkOrigin;if(!e.checkOrigin)return[];const t=[];for(const r of n){const i=m(r);i&&t.push(i)}return t}function W(e,n,t){return z(e)?T(e):C(e,n,t)}function C(e,n,t){const r=i=>{var a;const o=!n.checkOrigin||t.includes(i.origin);if(!(!(e.contentWindow===i.source)||!o)){if(((a=i.data)==null?void 0:a.type)==="iframe-resized"){const{height:c}=i.data;f({height:c,iframe:e,settings:n});return}if(n.enableLegacyLibSupport){const c=S(i);c!==null&&f({height:c,iframe:e,settings:n});return}}};return window.addEventListener("message",r),n.enableLegacyLibSupport&&v(e),()=>window.removeEventListener("message",r)}function T(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}h.observe(t)};return w(e,n),()=>{var t;(t=e.contentDocument)!=null&&t.body&&h.unobserve(e.contentDocument.body),e.removeEventListener("load",n)}}function D(){const e=({target:n})=>{var a;const t=l.find(c=>{var y;return((y=c.iframe.contentDocument)==null?void 0:y.body)===n});if(!t)return;const{iframe:r,settings:i}=t,{scrollHeight:o,scrollWidth:u}=((a=r.contentDocument)==null?void 0:a.documentElement)??{};o!==void 0&&u!==void 0&&f({height:o,iframe:r,settings:i})};return new ResizeObserver(n=>n.forEach(e))}function f({height:e,iframe:n,settings:t}){n.style.height=`${e+t.offsetSize+1}px`}d()&&b();function b(){p(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=E,s.initializeChildListener=b,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});

package/dist/type.d.ts

@@ -14,8 +14,28 @@ export type InitializeFunction = (settings?: Partial<Settings>, selector?: strin
 export type InitializeResult = { unsubscribe: () => void };
 
 export type Settings = {
+  /**
+   * Offset added to the resize size (in pixels).
+   *
+   * Default: 0
+   */
   offsetSize: number;
+  /**
+   * Specifies whether to check the origin of incoming messages.
+   * Accepts an array of allowed origins or a boolean.
+   * If true, incoming messages are allowed from the origins of the registered iframes.
+   *
+   * Default: true
+   */
   checkOrigin: string[] | boolean;
+  /**
+   * Allows the library to communicate with a cross-origin child iframe
+   * containing the original "iframe-resizer" script.
+   * Useful if you do not control the child domain.
+   *
+   * Default: false
+   */
+  enableLegacyLibSupport: boolean;
 };
 
 export type IframeResizeEventData = {

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@open-iframe-resizer/core",
 	"private": false,
-	"version": "1.0.0",
+	"version": "1.1.0",
 	"description": "Open-source modern iframe resizer",
 	"license": "MIT",
 	"repository": {
@@ -43,7 +43,6 @@
 		"lint": "biome lint ./src",
 		"build": "tsc && npm run lint && vite build && typedoc",
 		"build:watch": "vite build --watch && typedoc",
-		"build:usecases-html": "node scripts/generate-use-cases-html.js",
 		"dev": "concurrently \"vite build --watch\" \"npm run serve\"",
 		"serve": "concurrently \"vite --port 5550\" \"vite --port 5551\"",
 		"test": "npm run test:unit && npm run test:e2e",