@pexip-engage-public/plugin 1.1.23 → 1.1.25-canary-20250708143730

package/dist/resizer/parent.js

@@ -0,0 +1,185 @@
+import { applyStyleSettings, deferWhenSameOriginIframeIsLoaded, extractIframeOrigin, getBoundingRectSize, getDefaultSettings, getExponentialBackoffDelay, isBrowser, isHtmlIframeElement, isIframeSameOrigin, postMessageSafelyToCrossOriginIframe, removeUndefinedProperties, resolveElementToObserve, } from "./common.js";
+const getResizeObserverInstance = createResizerObserverLazyFactory();
+let registeredElements = [];
+const initialize = (clientSettings, selector) => {
+    if (!isBrowser()) {
+        return [];
+    }
+    const finalSettings = {
+        ...getDefaultSettings(),
+        ...removeUndefinedProperties(clientSettings ?? {}),
+    };
+    const iframes = resolveIframesToRegister(selector);
+    const allowedOrigins = registerIframesAllowOrigins(finalSettings, iframes);
+    return iframes.map((iframe) => {
+        const registeredElement = {
+            iframe,
+            initContext: { isInitialized: false, retryAttempts: 0 },
+            interactionState: { isHovered: false },
+            settings: finalSettings,
+        };
+        const unsubscribe = addChildResizeListener(registeredElement, allowedOrigins);
+        registeredElements.push(registeredElement);
+        return {
+            unsubscribe: () => {
+                unsubscribe();
+                registeredElements = registeredElements.filter((entry) => entry.iframe !== iframe);
+            },
+        };
+    });
+};
+function resolveIframesToRegister(selector) {
+    if (typeof selector === "string") {
+        return Array.from(document.querySelectorAll(selector)).filter(isHtmlIframeElement);
+    }
+    if (selector) {
+        return isHtmlIframeElement(selector) ? [selector] : [];
+    }
+    return Array.from(document.getElementsByTagName("iframe"));
+}
+function registerIframesAllowOrigins(settings, iframes) {
+    if (Array.isArray(settings.checkOrigin)) {
+        return settings.checkOrigin;
+    }
+    if (!settings.checkOrigin) {
+        return [];
+    }
+    const allowedOrigins = [];
+    for (const iframe of iframes) {
+        const origin = extractIframeOrigin(iframe);
+        if (origin) {
+            allowedOrigins.push(origin);
+        }
+    }
+    return allowedOrigins;
+}
+function addChildResizeListener(registeredElement, allowedOrigins) {
+    const removeResizeListener = isIframeSameOrigin(registeredElement.iframe)
+        ? addSameOriginChildResizeListener(registeredElement)
+        : addCrossOriginChildResizeListener(registeredElement, allowedOrigins);
+    const removeInteractionListeners = addInteractionListeners(registeredElement);
+    return () => {
+        removeResizeListener();
+        removeInteractionListeners();
+    };
+}
+function addCrossOriginChildResizeListener(registeredElement, allowedOrigins) {
+    const { iframe, initContext, settings: { checkOrigin, targetElementSelector, bodyPadding, bodyMargin }, } = registeredElement;
+    const handleIframeResizedMessage = (event) => {
+        const isOriginValid = !checkOrigin || allowedOrigins.includes(event.origin);
+        const isIframeTarget = iframe.contentWindow === event.source;
+        if (!isIframeTarget || !isOriginValid) {
+            return;
+        }
+        if (event.data?.type === "iframe-resized") {
+            const { height } = event.data;
+            height && resizeIframe({ newHeight: height, registeredElement });
+            return;
+        }
+    };
+    window.addEventListener("message", handleIframeResizedMessage);
+    const initMessage = {
+        bodyMargin,
+        bodyPadding,
+        targetElementSelector,
+        type: "iframe-child-init",
+    };
+    const sendInitializationMessageToChild = () => {
+        postMessageSafelyToCrossOriginIframe(iframe, () => iframe.contentWindow?.postMessage(initMessage, "*"));
+        initContext.retryAttempts++;
+        initContext.retryTimeoutId = window.setTimeout(sendInitializationMessageToChild, getExponentialBackoffDelay(initContext.retryAttempts));
+    };
+    sendInitializationMessageToChild();
+    return () => window.removeEventListener("message", handleIframeResizedMessage);
+}
+function addSameOriginChildResizeListener(registeredElement) {
+    const { iframe, settings } = registeredElement;
+    const { targetElementSelector } = settings;
+    let nthRetry = 0;
+    const initialize = () => {
+        const elementToObserve = resolveElementToObserve(iframe.contentDocument, targetElementSelector);
+        if (!iframe.contentDocument || !elementToObserve) {
+            nthRetry++;
+            return setTimeout(initialize, getExponentialBackoffDelay(nthRetry));
+        }
+        applyStyleSettings(iframe.contentDocument, settings);
+        getResizeObserverInstance().observe(elementToObserve);
+    };
+    deferWhenSameOriginIframeIsLoaded(iframe, initialize);
+    return () => {
+        const elementToObserve = resolveElementToObserve(iframe.contentDocument, targetElementSelector);
+        if (elementToObserve) {
+            getResizeObserverInstance().unobserve(elementToObserve);
+        }
+        iframe.removeEventListener("load", initialize);
+    };
+}
+function addInteractionListeners({ iframe, interactionState }) {
+    const onMouseEnter = () => {
+        interactionState.isHovered = true;
+    };
+    const onMouseLeave = () => {
+        interactionState.isHovered = false;
+    };
+    iframe.addEventListener("mouseenter", onMouseEnter);
+    iframe.addEventListener("mouseleave", onMouseLeave);
+    return () => {
+        iframe.removeEventListener("mouseenter", onMouseEnter);
+        iframe.removeEventListener("mouseleave", onMouseLeave);
+    };
+}
+function createResizerObserverLazyFactory() {
+    let resizeObserver = null;
+    return () => {
+        if (!resizeObserver) {
+            const handleEntry = ({ target }) => {
+                const matchingRegisteredElement = registeredElements.find(({ iframe }) => iframe.contentDocument === target.ownerDocument);
+                if (!matchingRegisteredElement) {
+                    return;
+                }
+                const { iframe, settings } = matchingRegisteredElement;
+                const observedElement = resolveElementToObserve(iframe.contentDocument, settings.targetElementSelector);
+                if (!observedElement) {
+                    return;
+                }
+                const { height } = getBoundingRectSize(observedElement);
+                if (!height) {
+                    return;
+                }
+                resizeIframe({ newHeight: height, registeredElement: matchingRegisteredElement });
+            };
+            resizeObserver = new ResizeObserver((entries) => entries.forEach(handleEntry));
+        }
+        return resizeObserver;
+    };
+}
+function resizeIframe({ registeredElement, newHeight, }) {
+    const { iframe, settings, interactionState, initContext } = registeredElement;
+    if (!initContext.isInitialized) {
+        initContext.isInitialized = true;
+        clearTimeout(initContext.retryTimeoutId);
+    }
+    if (settings.onBeforeIframeResize?.({
+        iframe,
+        observedHeight: newHeight,
+        settings: { ...settings },
+    }) === false) {
+        return;
+    }
+    const previousBoundingRect = iframe.getBoundingClientRect();
+    const newCalculatedHeight = newHeight + settings.offsetSize;
+    iframe.style.height = `${newCalculatedHeight}px`;
+    if (!settings.onIframeResize) {
+        return;
+    }
+    const resizeContext = {
+        iframe,
+        interactionState: { ...interactionState },
+        nextRenderState: { rect: iframe.getBoundingClientRect() },
+        previousRenderState: { rect: previousBoundingRect },
+        settings: { ...settings },
+    };
+    settings.onIframeResize(resizeContext);
+}
+export { initialize };
+//# sourceMappingURL=parent.js.map

package/dist/resizer/parent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parent.js","sourceRoot":"","sources":["../../src/resizer/parent.ts"],"names":[],"mappings":"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"}

package/dist/resizer/types.d.ts

@@ -0,0 +1,101 @@
+/**
+ * Automatically resize the selected iframes when their inner content grows.
+ * @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 = {
+    /**
+     * 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;
+    /**
+     * By default, the root element observed for resizing is the <html> document.
+     * In more complex layouts, the scrolling container may be elsewhere.
+     * This setting allows you to customize the root element that should be observed for resize events.
+     *
+     * Default: `undefined`
+     */
+    targetElementSelector?: string;
+    /**
+     * Customize the padding style of the iframe body.
+     *
+     * Default: `undefined`
+     */
+    bodyPadding?: string;
+    /**
+     * Customize the margin style of the iframe body.
+     *
+     * Default: `undefined`
+     */
+    bodyMargin?: string;
+    /**
+     * Called whenever the observed content size changes and the iframe is about to be resized.
+     * Return `false` to cancel the resize; returning `true` or nothing will allow it.
+     *
+     * Default: `undefined`
+     */
+    onBeforeIframeResize?: (context: BeforeResizeContext) => boolean | undefined;
+    /**
+     * Listener that is called after the iframe has been resized.
+     * You can use a predefined handler like `updateParentScrollOnResize` or create your own custom handler.
+     *
+     * Default: `undefined`
+     */
+    onIframeResize?: (context: ResizeContext) => void;
+};
+export type IframeResizeEventData = {
+    type: "iframe-resized";
+    width: number;
+    height?: number;
+};
+export type IframeChildInitEventData = {
+    type: "iframe-child-init";
+    targetElementSelector?: string;
+    bodyPadding?: string;
+    bodyMargin?: string;
+};
+export type IframeResizeEvent = MessageEvent<IframeResizeEventData>;
+export type InteractionState = {
+    isHovered: boolean;
+};
+export type ResizeRenderState = {
+    rect: DOMRect;
+};
+export type ResizeContext = {
+    iframe: HTMLIFrameElement;
+    settings: Settings;
+    interactionState: InteractionState;
+    previousRenderState: ResizeRenderState;
+    nextRenderState: ResizeRenderState;
+};
+export type BeforeResizeContext = {
+    iframe: HTMLIFrameElement;
+    settings: Settings;
+    observedHeight: number;
+};
+export type RegisteredElement = {
+    iframe: HTMLIFrameElement;
+    settings: Settings;
+    interactionState: InteractionState;
+    initContext: {
+        isInitialized: boolean;
+        retryAttempts: number;
+        retryTimeoutId?: number;
+    };
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/resizer/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/resizer/types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,MAAM,kBAAkB,GAAG,CAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,EAC5B,QAAQ,CAAC,EAAE,MAAM,GAAG,iBAAiB,KAClC,gBAAgB,EAAE,CAAC;AACxB,MAAM,MAAM,gBAAgB,GAAG;IAAE,WAAW,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC;AAE3D,MAAM,MAAM,QAAQ,GAAG;IACrB;;;;OAIG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;;;;;OAMG;IACH,WAAW,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC;IAChC;;;;;;OAMG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAE/B;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,OAAO,GAAG,SAAS,CAAC;IAE7E;;;;;OAKG;IACH,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;CACnD,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,IAAI,EAAE,gBAAgB,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,IAAI,EAAE,mBAAmB,CAAC;IAC1B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,qBAAqB,CAAC,CAAC;AAEpE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC;AAElD,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,EAAE,iBAAiB,CAAC;IAC1B,QAAQ,EAAE,QAAQ,CAAC;IACnB,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,mBAAmB,EAAE,iBAAiB,CAAC;IACvC,eAAe,EAAE,iBAAiB,CAAC;CACpC,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,MAAM,EAAE,iBAAiB,CAAC;IAC1B,QAAQ,EAAE,QAAQ,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,iBAAiB,CAAC;IAC1B,QAAQ,EAAE,QAAQ,CAAC;IACnB,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,WAAW,EAAE;QAAE,aAAa,EAAE,OAAO,CAAC;QAAC,aAAa,EAAE,MAAM,CAAC;QAAC,cAAc,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACzF,CAAC"}

package/dist/resizer/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/resizer/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/resizer/types.ts"],"names":[],"mappings":""}

package/dist/state/PluginState.schema.d.ts

@@ -675,15 +675,15 @@ export declare const PluginStateSchema: z.ZodObject<{
         subject: z.ZodOptional<z.ZodLiteral<true>>;
     }, "strip", z.ZodTypeAny, {
         questions?: true | undefined;
+        office?: true | undefined;
         meetingType?: true | undefined;
         employee?: true | undefined;
-        office?: true | undefined;
         subject?: true | undefined;
     }, {
         questions?: true | undefined;
+        office?: true | undefined;
         meetingType?: true | undefined;
         employee?: true | undefined;
-        office?: true | undefined;
         subject?: true | undefined;
     }>>;
     subjectGroups: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
@@ -858,9 +858,9 @@ export declare const PluginStateSchema: z.ZodObject<{
     schedulable: boolean;
     skipped: {
         questions?: true | undefined;
+        office?: true | undefined;
         meetingType?: true | undefined;
         employee?: true | undefined;
-        office?: true | undefined;
         subject?: true | undefined;
     };
     customer?: {
@@ -896,6 +896,7 @@ export declare const PluginStateSchema: z.ZodObject<{
     questions?: Record<string, string | string[]> | undefined;
     subjectGroups?: string[] | undefined;
     subjects?: string[] | undefined;
+    metadata?: Record<string, unknown> | undefined;
     appointmentId?: string | undefined;
     callbackRequestId?: string | undefined;
     employeeId?: string | undefined;
@@ -907,7 +908,6 @@ export declare const PluginStateSchema: z.ZodObject<{
     leadSegmentId?: string | undefined;
     listingId?: string | undefined;
     meetingType?: "VIDEO" | "PHONE" | "ON_LOCATION" | "OFFICE" | undefined;
-    metadata?: Record<string, unknown> | undefined;
     officeId?: string | undefined;
     subjectId?: string | undefined;
     warning?: string | undefined;
@@ -1067,6 +1067,7 @@ export declare const PluginStateSchema: z.ZodObject<{
     }) & {
         timeZone?: string | undefined;
     }) | undefined;
+    metadata?: Record<string, unknown> | undefined;
     appointmentId?: string | undefined;
     callbackRequestId?: string | undefined;
     employeeId?: string | undefined;
@@ -1081,14 +1082,13 @@ export declare const PluginStateSchema: z.ZodObject<{
     leadSegmentId?: string | undefined;
     listingId?: string | undefined;
     meetingType?: "VIDEO" | "PHONE" | "ON_LOCATION" | "OFFICE" | undefined;
-    metadata?: Record<string, unknown> | undefined;
     officeId?: string | undefined;
     schedulable?: boolean | undefined;
     skipped?: {
         questions?: true | undefined;
+        office?: true | undefined;
         meetingType?: true | undefined;
         employee?: true | undefined;
-        office?: true | undefined;
         subject?: true | undefined;
     } | undefined;
     subjectId?: string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pexip-engage-public/plugin",
-  "version": "1.1.23",
+  "version": "1.1.25-canary-20250708143730",
   "homepage": "https://github.com/skedify/frontend-mono/tree/develop/apps/booking-plugin/packages/plugin-public#readme",
   "bugs": {
     "url": "https://github.com/skedify/frontend-mono/issues"
@@ -22,12 +22,14 @@
     "./configuration": "./dist/configuration/index.js",
     "./configuration-parser": "./dist/configuration-parser/index.js",
     "./configuration-parser/migrate": "./dist/configuration-parser/migrate-legacy-configuration.js",
-    "./events": "./dist/events/index.js",
-    "./instance": "./dist/instance/index.js",
-    "./state": "./dist/state/index.js",
     "./constants": "./dist/constants.js",
     "./encoding": "./dist/encoding.js",
-    "./logger": "./dist/logger.js"
+    "./events": "./dist/events/index.js",
+    "./instance": "./dist/instance/index.js",
+    "./logger": "./dist/logger.js",
+    "./resizer-child": "./dist/resizer/child.js",
+    "./resizer-parent": "./dist/resizer/parent.js",
+    "./state": "./dist/state/index.js"
   },
   "files": [
     "dist",
@@ -35,10 +37,9 @@
     "src"
   ],
   "dependencies": {
-    "iframe-resizer": "4.3.11",
     "skedify-uri-encoding": "^2.1.2",
-    "zod": "^3.25.67",
-    "@pexip-engage-public/graphql": "1.1.6",
+    "zod": "^3.25.75",
+    "@pexip-engage-public/graphql": "1.1.7",
     "@pexip-engage-public/utils": "0.1.46"
   },
   "devDependencies": {
@@ -46,7 +47,7 @@
     "happy-dom": "^18.0.1",
     "vitest": "^3.2.4",
     "@pexip-engage/tsconfig": "0.1.1",
-    "eslint-config-pexip-engage": "1.1.24"
+    "eslint-config-pexip-engage": "1.1.25"
   },
   "volta": {
     "extends": "../../../../package.json"

package/src/events/index.ts

@@ -1,2 +1,16 @@
+import type { IFrameMessage, IFrameObjectMessage } from "./event-types.js";
+
 // biome-ignore lint/performance/noReExportAll: types only, ignore
 export * from "./event-types.js";
+export const IFRAME_CHILD_MESSAGE = "iframe-child-message";
+export const IFRAME_PARENT_MESSAGE = "iframe-parent-message";
+
+export type IframeChildMessageEventData = {
+  type: typeof IFRAME_CHILD_MESSAGE;
+  message: IFrameObjectMessage;
+};
+
+export type IframeParentMessageEventData = {
+  type: typeof IFRAME_PARENT_MESSAGE;
+  message: IFrameMessage;
+};

package/src/instance/PluginInstance.ts

@@ -1,18 +1,19 @@
 import { getCurrentPosition } from "@pexip-engage-public/utils/get-current-position";
-import resizer, {
-  type IFrameComponent,
-  type IFrameMessageData,
-} from "iframe-resizer/js/iframeResizer.js";
-
 import { parsePluginConfiguration } from "../configuration-parser/index.js";
 import { encodeURIParameters, pluginSearchParams } from "../encoding.js";
-import type {
-  PluginEventMessage,
-  PressedExternalLinkMessage,
-  StateUpdateMessage,
-  StepShownMessage,
+import {
+  IFRAME_CHILD_MESSAGE,
+  IFRAME_PARENT_MESSAGE,
+  type IFrameMessage,
+  type IFrameObjectMessage,
+  type PluginEventMessage,
+  type PressedExternalLinkMessage,
+  type StateUpdateMessage,
+  type StepShownMessage,
 } from "../events/index.js";
 import { logger } from "../logger.js";
+import { initialize } from "../resizer/parent.js";
+import type { InitializeResult } from "../resizer/types.js";
 import type { PluginIntent } from "../state/index.js";
 import {
   type CustomEventPayload,
@@ -30,8 +31,9 @@ type PluginEventListener = (event: PluginCustomEvent) => unknown;
 const PexipEngagePluginFrame = getPexipEngagePluginFrame();
 
 export class PluginInstance {
-  #instance: IFrameComponent;
+  #instance: InitializeResult;
   readonly #target: HTMLElement;
+  #iframe: HTMLIFrameElement | null = null;
   #state: StateUpdateMessage["payload"] | null = null;
   #meta: Record<string, unknown> = {};
   #status: "pending" | "success" | "error" | "disposed" = "pending";
@@ -76,7 +78,16 @@ export class PluginInstance {
     });
   }
 
-  #handleMessage = async ({ message }: IFrameMessageData) => {
+  #sendMessage = (message: IFrameObjectMessage) => {
+    this.#iframe?.contentWindow?.postMessage({ message, type: IFRAME_CHILD_MESSAGE }, "*");
+  };
+
+  #handleMessage = async (event: MessageEvent) => {
+    const isIframeTarget = this.#iframe && this.#iframe.contentWindow === event.source;
+    if (!isIframeTarget || event.data.type !== IFRAME_PARENT_MESSAGE) return;
+
+    const message = event.data.message as IFrameMessage;
+
     if (message.type === "STATE_UPDATE") {
       this.#state = message.payload;
 
@@ -114,7 +125,7 @@ export class PluginInstance {
         });
       }
 
-      this.#instance.iFrameResizer.sendMessage({
+      this.#sendMessage({
         payload: { meta: this.#meta },
         type: "PRE_APPOINTMENT_REQUEST",
       });
@@ -123,7 +134,7 @@ export class PluginInstance {
     }
 
     if (message.type === "REQUEST_ORIGIN_URL") {
-      this.#instance.iFrameResizer.sendMessage({
+      this.#sendMessage({
         payload: { href: window.location.href },
         type: "REQUEST_ORIGIN_URL",
       });
@@ -134,7 +145,7 @@ export class PluginInstance {
     if (message.type === "REQUEST_GEOLOCATION") {
       const geolocation = getCurrentPosition();
 
-      this.#instance.iFrameResizer.sendMessage({
+      this.#sendMessage({
         payload: await geolocation.catch((error) =>
           typeof error === "string" ? { error } : { error: "Unknown error" },
         ),
@@ -181,36 +192,26 @@ export class PluginInstance {
     const searchParams = pluginSearchParams.encode(this.#config.config);
     const src = `${PluginInstance.#url}/plugin?${searchParams}`;
 
-    const iframe = container.createPexipPlugin(src);
-    const self = this;
-    const [instance] = resizer(
-      {
-        checkOrigin: false,
-        heightCalculationMethod: "taggedElement",
-        log: false,
-        onInit() {
-          self.#status = "success";
-          dispatchEvent({
-            bubbles: true,
-            cancelable: true,
-            detail: { instance: self, type: PluginInstance.EVENT_LOADED },
-            target: self.#target,
-          });
-        },
-        onMessage: this.#handleMessage,
-        resizeFrom: "child",
-      },
-      iframe,
-    );
+    this.#iframe = container.createPexipPlugin(src);
+    const [instance] = initialize({ checkOrigin: false }, this.#iframe);
+    this.#status = "success";
+    dispatchEvent({
+      bubbles: true,
+      cancelable: true,
+      detail: { instance: this, type: PluginInstance.EVENT_LOADED },
+      target: this.#target,
+    });
 
+    window.addEventListener("message", this.#handleMessage);
     if (!instance) throw new Error("Failed to create resizer instance");
 
     return instance;
   }
 
   #restart = () => {
+    window.removeEventListener("message", this.#handleMessage);
     // leave event listeners intact.
-    this.#instance.iFrameResizer.close();
+    this.#instance.unsubscribe();
     this.#instance = this.#createInstance();
   };
 
@@ -226,7 +227,8 @@ export class PluginInstance {
       window.clearTimeout(this.#fallbackTimeoutId);
     }
 
-    this.#instance.iFrameResizer.close();
+    window.addEventListener("message", this.#handleMessage);
+    this.#instance.unsubscribe();
     const idx = PluginInstance.#instances.indexOf(this);
     if (idx !== -1) {
       PluginInstance.#instances.splice(idx, 1);
@@ -238,11 +240,11 @@ export class PluginInstance {
   setCSSVariable = (name: string, value: string) => {
     warnPrivate({ name: "setCSSVariable", type: "function" });
 
-    this.#instance.iFrameResizer.sendMessage({ payload: { name, value }, type: "CSS_VAR_UPDATE" });
+    this.#sendMessage({ payload: { name, value }, type: "CSS_VAR_UPDATE" });
   };
 
   setCustomCSS = (css: string) => {
-    this.#instance.iFrameResizer.sendMessage({ payload: { css }, type: "CUSTOM_CSS_UPDATE" });
+    this.#sendMessage({ payload: { css }, type: "CUSTOM_CSS_UPDATE" });
   };
 
   #listeners = new Set<EventListener>();

package/src/resizer/api-resize-handlers.ts

@@ -0,0 +1,17 @@
+import type { ResizeContext } from "./types.js";
+
+/**
+ * Resize handler that scrolls to restore the iframe's position in the viewport as it was before the resize.
+ *
+ * *Note:* This behavior only triggers if the iframe currently has focus,
+ * in order to try to limit the number of scroll as it can affect the user experience.
+ */
+export const updateParentScrollOnResize = ({
+  previousRenderState,
+  nextRenderState,
+  iframe,
+}: ResizeContext) => {
+  if (document.activeElement === iframe) {
+    window.scrollBy(0, nextRenderState.rect.bottom - previousRenderState.rect.bottom);
+  }
+};