@shopify/app-bridge-host/esm/Frame.js

App Bridge Host contains components and middleware to be consumed by the app's host, as well as the host itself. The middleware and `Frame` component are responsible for facilitating communication between the client and host, and used to act on actions se

import { __extends, __rest, __assign } from 'tslib';
import React from 'react';
import { fromFrame, Context } from '@shopify/app-bridge-core';

/**
 * Renders an iframe and sets up a `MessageTransport` between
 * the iframe and the parent window
 * @public
 * @remarks The iframe is never updated to prevent duplicated browser history entries
 * When a new url is received the `onUrlChange` is called with the iframe and the new url
 * */
var Frame = /** @class */ (function (_super) {
    __extends(Frame, _super);
    function Frame(props) {
        var _this = _super.call(this, props) || this;
        _this.src = props.url;
        return _this;
    }
    Frame.prototype.componentDidMount = function () {
        var _a = this.props, context = _a.context, onInit = _a.onInit, url = _a.url;
        var frameOrigin = new URL(url).origin;
        var iframe = this.iframe;
        if (!iframe) {
            return;
        }
        var transport = fromFrame({
            window: iframe.contentWindow,
            host: iframe.ownerDocument.defaultView,
        }, frameOrigin, context);
        this.detach = this.props.app.attach(transport);
        if (!onInit) {
            return;
        }
        onInit(this);
    };
    Frame.prototype.componentWillUnmount = function () {
        if (this.detach) {
            this.detach();
        }
    };
    Frame.prototype.componentDidUpdate = function (prevProps) {
        var _a = this.props, url = _a.url, onUrlChange = _a.onUrlChange;
        if (url !== prevProps.url && onUrlChange && this.iframe) {
            onUrlChange(this.iframe, url);
        }
    };
    Frame.prototype.render = function () {
        var _this = this;
        var _a = this.props; _a.app; _a.config; var title = _a.title; _a.url; var style = _a.style; _a.onUrlChange; _a.onInit; var props = __rest(_a, ["app", "config", "title", "url", "style", "onUrlChange", "onInit"]);
        return (React.createElement("iframe", __assign({ style: style, title: title, src: this.src }, props, { ref: function (element) { return (element ? (_this.iframe = element) : undefined); } })));
    };
    Frame.defaultProps = {
        context: Context.Main,
    };
    return Frame;
}(React.Component));

export { Frame as default };