@dynamic-labs/iframe-setup 4.8.6 → 4.9.1-preview.0

package/CHANGELOG.md

@@ -1,4 +1,19 @@
 
+### [4.9.1-preview.0](https://github.com/dynamic-labs/dynamic-auth/compare/v4.9.0...v4.9.1-preview.0) (2025-03-07)
+
+
+### Bug Fixes
+
+* 7702 on sepolia ([#8242](https://github.com/dynamic-labs/dynamic-auth/issues/8242)) ([8e1c63f](https://github.com/dynamic-labs/dynamic-auth/commit/8e1c63f240024f419e12787636dd2ebaacf8da94))
+* embedded widget race condition that would show both embedded and non-embedded widgets at the same time ([8a52778](https://github.com/dynamic-labs/dynamic-auth/commit/8a5277888489e03871532331760c197aa6216495))
+
+## [4.9.0](https://github.com/dynamic-labs/dynamic-auth/compare/v4.8.6...v4.9.0) (2025-03-07)
+
+
+### Features
+
+* add utility to use sdk-react-core in iframe ([#8219](https://github.com/dynamic-labs/dynamic-auth/issues/8219)) ([b7b0429](https://github.com/dynamic-labs/dynamic-auth/commit/b7b04292b18085d9cc95edae80100fd8dd667ed6))
+
 ### [4.8.6](https://github.com/dynamic-labs/dynamic-auth/compare/v4.8.5...v4.8.6) (2025-03-07)
 
 

package/README.md

@@ -1,3 +1,226 @@
 # @dynamic-labs/iframe-setup
 
-Collection of utilities to use the Dynamic SDK in an iframe
+A utility package that enables the Dynamic SDK (@dynamic-labs/sdk-react-core) to work seamlessly within an iframe environment.
+
+## Installation
+
+```bash
+npm install @dynamic-labs/iframe-setup
+```
+
+## Features
+
+This package provides two essential methods:
+
+1. `setupIframe`: Configures an iframe element with the necessary event listeners to support the SDK
+2. `setupInsideIframe`: Prepares the sdk-react-core services to operate within an iframe
+
+## Implementation Guide
+
+### Step 1: Parent Page Setup
+
+Configure the parent page that will contain the iframe:
+
+```tsx
+const iframeURL = new URL('https://iframe.com');
+
+const App = () => {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  useEffect(() => {
+    const cleanUp = setupIframe(iframeRef.current!, iframeURL.origin);
+
+    return () => {
+      cleanUp();
+    };
+  }, []);
+
+  return (
+    <div>
+      <iframe ref={iframeRef} src={iframeURL.toString()} />
+    </div>
+  );
+};
+```
+
+### Step 2: Iframe Application Setup
+
+Inside your iframe application, initialize the SDK:
+
+```tsx
+import { DynamicContextProvider } from '@dynamic-labs/sdk-react-core';
+import { setupInsideIframe } from '@dynamic-labs/iframe-setup';
+
+// Initialize as early as possible in your iframe application
+setupInsideIframe();
+
+const App = () => {
+  return (
+    <DynamicContextProvider>{/* Your application */}</DynamicContextProvider>
+  );
+};
+```
+
+Once both steps are completed, the Dynamic SDK will be fully operational within your iframe environment.
+
+---
+
+## Alternative Implementation
+
+### Manual Setup (Without Package Installation in Parent App)
+
+If you're unable to install the package in the parent application, you can directly implement the `setupIframe` functionality by copying the code below:
+
+```ts
+/**
+ * Setup an iframe to comunicate with the Dynamic SDK
+ * running inside the iframe
+ *
+ * This file is self contained and should not import or dependend on any
+ * other file or package.
+ *
+ * @see https://www.npmjs.com/package/@dynamic-labs/iframe-setup
+ */
+/* eslint no-restricted-syntax: ["error", "ImportDeclaration"] */
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type MESSAGE_HANDLER = (...params: any[]) => Promise<any> | void;
+
+export type IFRAME_EVENTS = {
+  OPEN_URL: (args: {
+    url: string;
+    target?: 'self' | 'blank';
+    features?: string;
+  }) => void;
+  UPDATE_PARENT_URL: (args: { url: string }) => void;
+  APP_FOCUS: () => void;
+};
+
+/**
+ * Setup an iframe to comunicate with the Dynamic SDK
+ * running inside the iframe
+ *
+ * @returns a function to teardown the iframe setup
+ */
+export const setupIframe = (
+  iframe: HTMLIFrameElement,
+  origin: string,
+): VoidFunction => {
+  const messageHandler = createMessageHandler<IFRAME_EVENTS>(window, origin);
+  const messageSender = createMessageSender<IFRAME_EVENTS>(iframe);
+
+  // Add initial parent url to iframe src
+  const applyInitialParentUrlToIframeSrc = () => {
+    const iframeURL = new URL(iframe.src);
+
+    iframeURL.searchParams.set('initial-parent-url', window.location.href);
+
+    iframe.src = iframeURL.toString();
+  };
+
+  // Add event listener to handle deeplink
+  const setupOpenUrlHandler = () =>
+    messageHandler('OPEN_URL', ({ url, target = 'self', features }) => {
+      if (target === 'blank') {
+        window.open(url, '_blank', features);
+      } else {
+        window.location.assign(url);
+      }
+    });
+
+  // Watch for url changes and update Dynamic SDK in iframe
+  const setupUrlUpdateHandler = (): VoidFunction => {
+    const onPopState = () => {
+      const url = window.location.href;
+
+      messageSender('UPDATE_PARENT_URL', { url });
+    };
+
+    window.addEventListener('popstate', onPopState);
+
+    return () => {
+      window.removeEventListener('popstate', onPopState);
+    };
+  };
+
+  /**
+   * Watch for app focus and send event to Dynamic SDK in iframe
+   */
+  const watchForAppVisibilityChange = (): VoidFunction => {
+    let lastFired = false;
+
+    const onVisibilityOrFocus = () => {
+      if (!lastFired && document.visibilityState === 'visible') {
+        lastFired = true;
+        messageSender('APP_FOCUS');
+
+        // Reset flag after a short delay to allow next valid trigger
+        setTimeout(() => (lastFired = false), 100);
+      }
+    };
+
+    document.addEventListener('visibilitychange', onVisibilityOrFocus);
+    window.addEventListener('focus', onVisibilityOrFocus);
+
+    return () => {
+      document.removeEventListener('visibilitychange', onVisibilityOrFocus);
+      window.removeEventListener('focus', onVisibilityOrFocus);
+    };
+  };
+
+  applyInitialParentUrlToIframeSrc();
+
+  // Holds all the cleanup handlers
+  const cleanupHandlers: VoidFunction[] = [];
+
+  cleanupHandlers.push(setupUrlUpdateHandler());
+  cleanupHandlers.push(setupOpenUrlHandler());
+  cleanupHandlers.push(watchForAppVisibilityChange());
+
+  return () => cleanupHandlers.forEach((offHandler) => offHandler());
+};
+
+// Utils
+
+/**
+ * Create a message handler for the iframe
+ */
+const createMessageHandler =
+  <T extends Record<string, MESSAGE_HANDLER>>(window: Window, origin: string) =>
+  <EVENT_NAME extends Extract<keyof T, string>>(
+    eventName: EVENT_NAME,
+    handler: T[EVENT_NAME],
+  ): VoidFunction => {
+    const messageHandler = (event: MessageEvent) => {
+      if (event.origin !== origin) return;
+
+      const { eventName: incomingEventName, args } = event.data;
+
+      if (eventName === incomingEventName) {
+        handler(...args);
+      }
+    };
+
+    window.addEventListener('message', messageHandler);
+
+    return () => {
+      window.removeEventListener('message', messageHandler);
+    };
+  };
+
+/**
+ * Create a function to send messages to the iframe
+ */
+const createMessageSender =
+  <T extends Record<string, MESSAGE_HANDLER>>(iframe: HTMLIFrameElement) =>
+  <EVENT_NAME extends Extract<keyof T, string>>(
+    eventName: EVENT_NAME,
+    ...args: Parameters<T[EVENT_NAME]>
+  ) => {
+    iframe.contentWindow?.postMessage(
+      { args, eventName },
+      new URL(iframe.src).origin,
+    );
+  };
+
+```

package/_virtual/_tslib.cjs

@@ -0,0 +1,36 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+exports.__awaiter = __awaiter;

package/_virtual/_tslib.js

@@ -0,0 +1,32 @@
+'use client'
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+export { __awaiter };

package/package.cjs

@@ -3,6 +3,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "4.8.6";
+var version = "4.9.1-preview.0";
 
 exports.version = version;

package/package.js

@@ -1,4 +1,4 @@
 'use client'
-var version = "4.8.6";
+var version = "4.9.1-preview.0";
 
 export { version };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-labs/iframe-setup",
-  "version": "4.8.6",
+  "version": "4.9.1-preview.0",
   "description": "Collection of utilities to use the Dynamic SDK in an iframe",
   "author": "Dynamic Labs, Inc.",
   "license": "MIT",
@@ -18,7 +18,10 @@
   },
   "homepage": "https://www.dynamic.xyz/",
   "dependencies": {
-    "@dynamic-labs/assert-package-version": "4.8.6"
+    "@dynamic-labs/assert-package-version": "4.9.1-preview.0",
+    "@dynamic-labs/logger": "4.9.1-preview.0",
+    "@dynamic-labs/utils": "4.9.1-preview.0",
+    "eventemitter3": "5.0.1"
   },
   "peerDependencies": {}
 }

package/src/index.cjs

@@ -1,7 +1,14 @@
 'use client'
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var assertPackageVersion = require('@dynamic-labs/assert-package-version');
 var _package = require('../package.cjs');
+var setupIframe = require('./lib/setupIframe/setupIframe.cjs');
+var setupInsideIframe = require('./lib/setupInsideIframe/setupInsideIframe.cjs');
 
 assertPackageVersion.assertPackageVersion('@dynamic-labs/iframe-setup', _package.version);
+
+exports.setupIframe = setupIframe.setupIframe;
+exports.setupInsideIframe = setupInsideIframe.setupInsideIframe;

package/src/index.d.ts

@@ -1 +1,2 @@
-export {};
+export { setupIframe } from './lib/setupIframe';
+export { setupInsideIframe } from './lib/setupInsideIframe';

package/src/index.js

@@ -1,5 +1,7 @@
 'use client'
 import { assertPackageVersion } from '@dynamic-labs/assert-package-version';
 import { version } from '../package.js';
+export { setupIframe } from './lib/setupIframe/setupIframe.js';
+export { setupInsideIframe } from './lib/setupInsideIframe/setupInsideIframe.js';
 
 assertPackageVersion('@dynamic-labs/iframe-setup', version);

package/src/lib/setupIframe/index.d.ts

@@ -0,0 +1 @@
+export { setupIframe } from './setupIframe';

package/src/lib/setupIframe/setupIframe.cjs

@@ -0,0 +1,105 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * Setup an iframe to comunicate with the Dynamic SDK
+ * running inside the iframe
+ *
+ * This file is self contained and should not import or dependend on any
+ * other file or package.
+ *
+ * @see https://www.npmjs.com/package/@dynamic-labs/iframe-setup
+ */
+/* eslint no-restricted-syntax: ["error", "ImportDeclaration"] */
+/**
+ * Setup an iframe to comunicate with the Dynamic SDK
+ * running inside the iframe
+ *
+ * @returns a function to teardown the iframe setup
+ */
+const setupIframe = (iframe, origin) => {
+    const messageHandler = createMessageHandler(window, origin);
+    const messageSender = createMessageSender(iframe);
+    // Add initial parent url to iframe src
+    const applyInitialParentUrlToIframeSrc = () => {
+        const iframeURL = new URL(iframe.src);
+        iframeURL.searchParams.set('initial-parent-url', window.location.href);
+        iframe.src = iframeURL.toString();
+    };
+    // Add event listener to handle deeplink
+    const setupOpenUrlHandler = () => messageHandler('OPEN_URL', ({ url, target = 'self', features }) => {
+        if (target === 'blank') {
+            window.open(url, '_blank', features);
+        }
+        else {
+            window.location.assign(url);
+        }
+    });
+    // Watch for url changes and update Dynamic SDK in iframe
+    const setupUrlUpdateHandler = () => {
+        const onPopState = () => {
+            const url = window.location.href;
+            messageSender('UPDATE_PARENT_URL', { url });
+        };
+        window.addEventListener('popstate', onPopState);
+        return () => {
+            window.removeEventListener('popstate', onPopState);
+        };
+    };
+    /**
+     * Watch for app focus and send event to Dynamic SDK in iframe
+     */
+    const watchForAppVisibilityChange = () => {
+        let lastFired = false;
+        const onVisibilityOrFocus = () => {
+            if (!lastFired && document.visibilityState === 'visible') {
+                lastFired = true;
+                messageSender('APP_FOCUS');
+                // Reset flag after a short delay to allow next valid trigger
+                setTimeout(() => (lastFired = false), 100);
+            }
+        };
+        document.addEventListener('visibilitychange', onVisibilityOrFocus);
+        window.addEventListener('focus', onVisibilityOrFocus);
+        return () => {
+            document.removeEventListener('visibilitychange', onVisibilityOrFocus);
+            window.removeEventListener('focus', onVisibilityOrFocus);
+        };
+    };
+    applyInitialParentUrlToIframeSrc();
+    // Holds all the cleanup handlers
+    const cleanupHandlers = [];
+    cleanupHandlers.push(setupUrlUpdateHandler());
+    cleanupHandlers.push(setupOpenUrlHandler());
+    cleanupHandlers.push(watchForAppVisibilityChange());
+    return () => cleanupHandlers.forEach((offHandler) => offHandler());
+};
+// Utils
+/**
+ * Create a message handler for the iframe
+ */
+const createMessageHandler = (window, origin) => (eventName, handler) => {
+    const messageHandler = (event) => {
+        if (event.origin !== origin)
+            return;
+        const { eventName: incomingEventName, args } = event.data;
+        if (eventName === incomingEventName) {
+            handler(...args);
+        }
+    };
+    window.addEventListener('message', messageHandler);
+    return () => {
+        window.removeEventListener('message', messageHandler);
+    };
+};
+/**
+ * Create a function to send messages to the iframe
+ */
+const createMessageSender = (iframe) => (eventName, ...args) => {
+    var _a;
+    (_a = iframe.contentWindow) === null || _a === void 0 ? void 0 : _a.postMessage({ args, eventName }, new URL(iframe.src).origin);
+};
+
+exports.setupIframe = setupIframe;

package/src/lib/setupIframe/setupIframe.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Setup an iframe to comunicate with the Dynamic SDK
+ * running inside the iframe
+ *
+ * This file is self contained and should not import or dependend on any
+ * other file or package.
+ *
+ * @see https://www.npmjs.com/package/@dynamic-labs/iframe-setup
+ */
+export type MESSAGE_HANDLER = (...params: any[]) => Promise<any> | void;
+export type IFRAME_EVENTS = {
+    OPEN_URL: (args: {
+        url: string;
+        target?: 'self' | 'blank';
+        features?: string;
+    }) => void;
+    UPDATE_PARENT_URL: (args: {
+        url: string;
+    }) => void;
+    APP_FOCUS: () => void;
+};
+/**
+ * Setup an iframe to comunicate with the Dynamic SDK
+ * running inside the iframe
+ *
+ * @returns a function to teardown the iframe setup
+ */
+export declare const setupIframe: (iframe: HTMLIFrameElement, origin: string) => VoidFunction;

package/src/lib/setupIframe/setupIframe.js

@@ -0,0 +1,101 @@
+'use client'
+/**
+ * Setup an iframe to comunicate with the Dynamic SDK
+ * running inside the iframe
+ *
+ * This file is self contained and should not import or dependend on any
+ * other file or package.
+ *
+ * @see https://www.npmjs.com/package/@dynamic-labs/iframe-setup
+ */
+/* eslint no-restricted-syntax: ["error", "ImportDeclaration"] */
+/**
+ * Setup an iframe to comunicate with the Dynamic SDK
+ * running inside the iframe
+ *
+ * @returns a function to teardown the iframe setup
+ */
+const setupIframe = (iframe, origin) => {
+    const messageHandler = createMessageHandler(window, origin);
+    const messageSender = createMessageSender(iframe);
+    // Add initial parent url to iframe src
+    const applyInitialParentUrlToIframeSrc = () => {
+        const iframeURL = new URL(iframe.src);
+        iframeURL.searchParams.set('initial-parent-url', window.location.href);
+        iframe.src = iframeURL.toString();
+    };
+    // Add event listener to handle deeplink
+    const setupOpenUrlHandler = () => messageHandler('OPEN_URL', ({ url, target = 'self', features }) => {
+        if (target === 'blank') {
+            window.open(url, '_blank', features);
+        }
+        else {
+            window.location.assign(url);
+        }
+    });
+    // Watch for url changes and update Dynamic SDK in iframe
+    const setupUrlUpdateHandler = () => {
+        const onPopState = () => {
+            const url = window.location.href;
+            messageSender('UPDATE_PARENT_URL', { url });
+        };
+        window.addEventListener('popstate', onPopState);
+        return () => {
+            window.removeEventListener('popstate', onPopState);
+        };
+    };
+    /**
+     * Watch for app focus and send event to Dynamic SDK in iframe
+     */
+    const watchForAppVisibilityChange = () => {
+        let lastFired = false;
+        const onVisibilityOrFocus = () => {
+            if (!lastFired && document.visibilityState === 'visible') {
+                lastFired = true;
+                messageSender('APP_FOCUS');
+                // Reset flag after a short delay to allow next valid trigger
+                setTimeout(() => (lastFired = false), 100);
+            }
+        };
+        document.addEventListener('visibilitychange', onVisibilityOrFocus);
+        window.addEventListener('focus', onVisibilityOrFocus);
+        return () => {
+            document.removeEventListener('visibilitychange', onVisibilityOrFocus);
+            window.removeEventListener('focus', onVisibilityOrFocus);
+        };
+    };
+    applyInitialParentUrlToIframeSrc();
+    // Holds all the cleanup handlers
+    const cleanupHandlers = [];
+    cleanupHandlers.push(setupUrlUpdateHandler());
+    cleanupHandlers.push(setupOpenUrlHandler());
+    cleanupHandlers.push(watchForAppVisibilityChange());
+    return () => cleanupHandlers.forEach((offHandler) => offHandler());
+};
+// Utils
+/**
+ * Create a message handler for the iframe
+ */
+const createMessageHandler = (window, origin) => (eventName, handler) => {
+    const messageHandler = (event) => {
+        if (event.origin !== origin)
+            return;
+        const { eventName: incomingEventName, args } = event.data;
+        if (eventName === incomingEventName) {
+            handler(...args);
+        }
+    };
+    window.addEventListener('message', messageHandler);
+    return () => {
+        window.removeEventListener('message', messageHandler);
+    };
+};
+/**
+ * Create a function to send messages to the iframe
+ */
+const createMessageSender = (iframe) => (eventName, ...args) => {
+    var _a;
+    (_a = iframe.contentWindow) === null || _a === void 0 ? void 0 : _a.postMessage({ args, eventName }, new URL(iframe.src).origin);
+};
+
+export { setupIframe };

package/src/lib/setupInsideIframe/index.d.ts

@@ -0,0 +1 @@
+export { setupInsideIframe } from './setupInsideIframe';

package/src/lib/setupInsideIframe/setupInsideIframe.cjs

@@ -0,0 +1,18 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var setupPlatformService = require('./utils/setupPlatformService/setupPlatformService.cjs');
+var getInitialParentURL = require('./utils/getInitialParentURL/getInitialParentURL.cjs');
+var setupPlatformEventsService = require('./utils/setupPlatformEventsService/setupPlatformEventsService.cjs');
+
+const setupInsideIframe = () => {
+    // Get the initial parent URL
+    const initialParentURL = getInitialParentURL.getInitialParentURL();
+    // Setup services
+    setupPlatformService.setupPlatformService(initialParentURL);
+    setupPlatformEventsService.setupPlatformEventsService(initialParentURL);
+};
+
+exports.setupInsideIframe = setupInsideIframe;

package/src/lib/setupInsideIframe/setupInsideIframe.d.ts

@@ -0,0 +1 @@
+export declare const setupInsideIframe: () => void;

package/src/lib/setupInsideIframe/setupInsideIframe.js

@@ -0,0 +1,14 @@
+'use client'
+import { setupPlatformService } from './utils/setupPlatformService/setupPlatformService.js';
+import { getInitialParentURL } from './utils/getInitialParentURL/getInitialParentURL.js';
+import { setupPlatformEventsService } from './utils/setupPlatformEventsService/setupPlatformEventsService.js';
+
+const setupInsideIframe = () => {
+    // Get the initial parent URL
+    const initialParentURL = getInitialParentURL();
+    // Setup services
+    setupPlatformService(initialParentURL);
+    setupPlatformEventsService(initialParentURL);
+};
+
+export { setupInsideIframe };

package/src/lib/setupInsideIframe/utils/createMessageHandler/createMessageHandler.cjs

@@ -0,0 +1,30 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var logger = require('../logger.cjs');
+
+const createMessageHandler = (parentOrigin) => (eventName, handler) => {
+    window.addEventListener('message', (event) => {
+        if (event.origin !== parentOrigin) {
+            return;
+        }
+        try {
+            if (!Object.prototype.hasOwnProperty.call(event.data, 'eventName') ||
+                !Object.prototype.hasOwnProperty.call(event.data, 'args') ||
+                !Array.isArray(event.data.args)) {
+                return;
+            }
+            const { eventName: incomingEventName, args } = event.data;
+            if (incomingEventName === eventName) {
+                handler(...args);
+            }
+        }
+        catch (error) {
+            logger.logger.error('Failed to parse message', error);
+        }
+    });
+};
+
+exports.createMessageHandler = createMessageHandler;

package/src/lib/setupInsideIframe/utils/createMessageHandler/createMessageHandler.d.ts

@@ -0,0 +1,2 @@
+import { MESSAGE_HANDLER } from '../../../setupIframe/setupIframe';
+export declare const createMessageHandler: <T extends Record<string, MESSAGE_HANDLER>>(parentOrigin: string) => <K extends Extract<keyof T, string>>(eventName: K, handler: T[K]) => void;

package/src/lib/setupInsideIframe/utils/createMessageHandler/createMessageHandler.js

@@ -0,0 +1,26 @@
+'use client'
+import { logger } from '../logger.js';
+
+const createMessageHandler = (parentOrigin) => (eventName, handler) => {
+    window.addEventListener('message', (event) => {
+        if (event.origin !== parentOrigin) {
+            return;
+        }
+        try {
+            if (!Object.prototype.hasOwnProperty.call(event.data, 'eventName') ||
+                !Object.prototype.hasOwnProperty.call(event.data, 'args') ||
+                !Array.isArray(event.data.args)) {
+                return;
+            }
+            const { eventName: incomingEventName, args } = event.data;
+            if (incomingEventName === eventName) {
+                handler(...args);
+            }
+        }
+        catch (error) {
+            logger.error('Failed to parse message', error);
+        }
+    });
+};
+
+export { createMessageHandler };

package/src/lib/setupInsideIframe/utils/createMessageHandler/index.d.ts

@@ -0,0 +1 @@
+export { createMessageHandler } from './createMessageHandler';

package/src/lib/setupInsideIframe/utils/createMessageSender/createMessageSender.cjs

@@ -0,0 +1,8 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const createMessageSender = (parentOrigin) => (eventName, ...args) => window.parent.postMessage({ args, eventName }, parentOrigin);
+
+exports.createMessageSender = createMessageSender;

package/src/lib/setupInsideIframe/utils/createMessageSender/createMessageSender.d.ts

@@ -0,0 +1,2 @@
+import { MESSAGE_HANDLER } from '../../../setupIframe/setupIframe';
+export declare const createMessageSender: <T extends Record<string, MESSAGE_HANDLER>>(parentOrigin: string) => <EVENT_NAME extends Extract<keyof T, string>>(eventName: EVENT_NAME, ...args: Parameters<T[EVENT_NAME]>) => void;

package/src/lib/setupInsideIframe/utils/createMessageSender/createMessageSender.js

@@ -0,0 +1,4 @@
+'use client'
+const createMessageSender = (parentOrigin) => (eventName, ...args) => window.parent.postMessage({ args, eventName }, parentOrigin);
+
+export { createMessageSender };

package/src/lib/setupInsideIframe/utils/createMessageSender/index.d.ts

@@ -0,0 +1 @@
+export { createMessageSender } from './createMessageSender';

package/src/lib/setupInsideIframe/utils/getInitialParentURL/getInitialParentURL.cjs

@@ -0,0 +1,14 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const getInitialParentURL = () => {
+    const initialParentURL = new URLSearchParams(window.location.search).get('initial-parent-url');
+    if (!initialParentURL) {
+        throw new Error('Parent URL is required');
+    }
+    return new URL(decodeURIComponent(initialParentURL));
+};
+
+exports.getInitialParentURL = getInitialParentURL;

package/src/lib/setupInsideIframe/utils/getInitialParentURL/getInitialParentURL.d.ts

@@ -0,0 +1 @@
+export declare const getInitialParentURL: () => URL;

package/src/lib/setupInsideIframe/utils/getInitialParentURL/getInitialParentURL.js

@@ -0,0 +1,10 @@
+'use client'
+const getInitialParentURL = () => {
+    const initialParentURL = new URLSearchParams(window.location.search).get('initial-parent-url');
+    if (!initialParentURL) {
+        throw new Error('Parent URL is required');
+    }
+    return new URL(decodeURIComponent(initialParentURL));
+};
+
+export { getInitialParentURL };

package/src/lib/setupInsideIframe/utils/getInitialParentURL/index.d.ts

@@ -0,0 +1 @@
+export { getInitialParentURL } from './getInitialParentURL';

package/src/lib/setupInsideIframe/utils/logger.cjs

@@ -0,0 +1,10 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var logger$1 = require('@dynamic-labs/logger');
+
+const logger = new logger$1.Logger('@dynamic-labs/iframe-setup');
+
+exports.logger = logger;

package/src/lib/setupInsideIframe/utils/logger.d.ts

@@ -0,0 +1,2 @@
+import { Logger } from '@dynamic-labs/logger';
+export declare const logger: Logger;

package/src/lib/setupInsideIframe/utils/logger.js

@@ -0,0 +1,6 @@
+'use client'
+import { Logger } from '@dynamic-labs/logger';
+
+const logger = new Logger('@dynamic-labs/iframe-setup');
+
+export { logger };

package/src/lib/setupInsideIframe/utils/setupPlatformEventsService/index.d.ts

@@ -0,0 +1 @@
+export { setupPlatformEventsService } from './setupPlatformEventsService';

package/src/lib/setupInsideIframe/utils/setupPlatformEventsService/setupPlatformEventsService.cjs

@@ -0,0 +1,23 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var EventEmitter = require('eventemitter3');
+var utils = require('@dynamic-labs/utils');
+var createMessageHandler = require('../createMessageHandler/createMessageHandler.cjs');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var EventEmitter__default = /*#__PURE__*/_interopDefaultLegacy(EventEmitter);
+
+const setupPlatformEventsService = (initialParentURL) => {
+    const emitter = new EventEmitter__default["default"]();
+    const messageHandler = createMessageHandler.createMessageHandler(initialParentURL.origin);
+    utils.PlatformEventsService.implementation = emitter;
+    messageHandler('APP_FOCUS', () => {
+        emitter.emit('appFocused');
+    });
+};
+
+exports.setupPlatformEventsService = setupPlatformEventsService;

package/src/lib/setupInsideIframe/utils/setupPlatformEventsService/setupPlatformEventsService.d.ts

@@ -0,0 +1 @@
+export declare const setupPlatformEventsService: (initialParentURL: URL) => void;

package/src/lib/setupInsideIframe/utils/setupPlatformEventsService/setupPlatformEventsService.js

@@ -0,0 +1,15 @@
+'use client'
+import EventEmitter from 'eventemitter3';
+import { PlatformEventsService } from '@dynamic-labs/utils';
+import { createMessageHandler } from '../createMessageHandler/createMessageHandler.js';
+
+const setupPlatformEventsService = (initialParentURL) => {
+    const emitter = new EventEmitter();
+    const messageHandler = createMessageHandler(initialParentURL.origin);
+    PlatformEventsService.implementation = emitter;
+    messageHandler('APP_FOCUS', () => {
+        emitter.emit('appFocused');
+    });
+};
+
+export { setupPlatformEventsService };

package/src/lib/setupInsideIframe/utils/setupPlatformService/index.d.ts

@@ -0,0 +1 @@
+export { setupPlatformService } from './setupPlatformService';

package/src/lib/setupInsideIframe/utils/setupPlatformService/setupPlatformService.cjs

@@ -0,0 +1,36 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../../_virtual/_tslib.cjs');
+var utils = require('@dynamic-labs/utils');
+var createMessageSender = require('../createMessageSender/createMessageSender.cjs');
+var createMessageHandler = require('../createMessageHandler/createMessageHandler.cjs');
+
+const setupPlatformService = (initialParentURL) => {
+    let parentURL = new URL(initialParentURL);
+    const messageHandler = createMessageHandler.createMessageHandler(initialParentURL.origin);
+    const messageSender = createMessageSender.createMessageSender(initialParentURL.origin);
+    utils.PlatformService.implementation = {
+        getDisplayOrigin: () => parentURL.origin,
+        getHost: () => parentURL.host,
+        getHostname: () => parentURL.hostname,
+        getOrigin: () => parentURL.origin,
+        getTLD: () => parentURL.hostname,
+        getUrl: () => parentURL,
+        isNativeMobile: false,
+        openURL: (url_1, ...args_1) => _tslib.__awaiter(void 0, [url_1, ...args_1], void 0, function* (url, target = 'self', features = '') {
+            return messageSender('OPEN_URL', {
+                features,
+                target,
+                url,
+            });
+        }),
+    };
+    messageHandler('UPDATE_PARENT_URL', ({ url }) => {
+        parentURL = new URL(url);
+    });
+};
+
+exports.setupPlatformService = setupPlatformService;

package/src/lib/setupInsideIframe/utils/setupPlatformService/setupPlatformService.d.ts

@@ -0,0 +1 @@
+export declare const setupPlatformService: (initialParentURL: URL) => void;

package/src/lib/setupInsideIframe/utils/setupPlatformService/setupPlatformService.js

@@ -0,0 +1,32 @@
+'use client'
+import { __awaiter } from '../../../../../_virtual/_tslib.js';
+import { PlatformService } from '@dynamic-labs/utils';
+import { createMessageSender } from '../createMessageSender/createMessageSender.js';
+import { createMessageHandler } from '../createMessageHandler/createMessageHandler.js';
+
+const setupPlatformService = (initialParentURL) => {
+    let parentURL = new URL(initialParentURL);
+    const messageHandler = createMessageHandler(initialParentURL.origin);
+    const messageSender = createMessageSender(initialParentURL.origin);
+    PlatformService.implementation = {
+        getDisplayOrigin: () => parentURL.origin,
+        getHost: () => parentURL.host,
+        getHostname: () => parentURL.hostname,
+        getOrigin: () => parentURL.origin,
+        getTLD: () => parentURL.hostname,
+        getUrl: () => parentURL,
+        isNativeMobile: false,
+        openURL: (url_1, ...args_1) => __awaiter(void 0, [url_1, ...args_1], void 0, function* (url, target = 'self', features = '') {
+            return messageSender('OPEN_URL', {
+                features,
+                target,
+                url,
+            });
+        }),
+    };
+    messageHandler('UPDATE_PARENT_URL', ({ url }) => {
+        parentURL = new URL(url);
+    });
+};
+
+export { setupPlatformService };