@shopify/app-bridge-host/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

'use strict';

var tslib = require('tslib');
var React = require('react');
var appBridgeCore = require('@shopify/app-bridge-core');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);

/**
 * 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) {
    tslib.__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 = appBridgeCore.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 = tslib.__rest(_a, ["app", "config", "title", "url", "style", "onUrlChange", "onInit"]);
        return (React__default.default.createElement("iframe", tslib.__assign({ style: style, title: title, src: this.src }, props, { ref: function (element) { return (element ? (_this.iframe = element) : undefined); } })));
    };
    Frame.defaultProps = {
        context: appBridgeCore.Context.Main,
    };
    return Frame;
}(React__default.default.Component));

module.exports = Frame;