UNPKG

@shopify/app-bridge-host

Version:

App Bridge Host contains middleware and components that are meant to be consumed by the app's host. The middleware and `Frame` component are responsible for facilitating messages posted between the client and host, and used to act on actions sent from the

90 lines (89 loc) 4.28 kB
"use strict"; var __extends = (this && this.__extends) || (function () { var extendStatics = function (d, b) { extendStatics = Object.setPrototypeOf || ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; return extendStatics(d, b); }; return function (d, b) { extendStatics(d, b); function __() { this.constructor = d; } d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); }; })(); var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { s = arguments[i]; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; } return t; }; return __assign.apply(this, arguments); }; var __importDefault = (this && this.__importDefault) || function (mod) { return (mod && mod.__esModule) ? mod : { "default": mod }; }; Object.defineProperty(exports, "__esModule", { value: true }); var hoist_non_react_statics_1 = __importDefault(require("hoist-non-react-statics")); var react_1 = __importDefault(require("react")); var Error_1 = require("@shopify/app-bridge/actions/Error"); var _1 = require("./"); function getComponentName(component) { return (component && (component.displayName || component.name)) || 'Component'; } function withApp(storeToProps, dispatchToProps) { return function (WrappedComponent) { var AppBridgeConnector = /** @class */ (function (_super) { __extends(AppBridgeConnector, _super); function AppBridgeConnector(props, context) { var _this = _super.call(this, props, context) || this; _this.state = { mounted: false, }; return _this; } AppBridgeConnector.prototype.augmentProps = function () { var _a = this, props = _a.props, app = _a.app, mappedProps = _a.mappedProps; var appState = app.getState(); var store = storeToProps ? storeToProps(appState) : appState; var augmented = __assign({}, props, { app: app, store: store }); if (mappedProps) { return __assign({}, mappedProps, augmented); } return augmented; }; AppBridgeConnector.prototype.componentDidMount = function () { var config = this.props.config; var appBridgeMiddleware = this.context.appBridgeMiddleware; if (!config) { Error_1.throwError(Error_1.AppActionType.MISSING_CONFIG, 'Missing required prop `config`'); } if (!appBridgeMiddleware || typeof appBridgeMiddleware.load !== 'function') { Error_1.throwError(Error_1.AppActionType.MISSING_APP_BRIDGE_MIDDLEWARE, 'Missing required context `appBridgeMiddleware`. Maybe you forgot the App Bridge `<Provider>` component?'); } this.app = this.context.appBridgeMiddleware.load({ config: config, type: 'application', }); if (dispatchToProps) { this.mappedProps = dispatchToProps(this.app); } this.setState({ mounted: true }); }; AppBridgeConnector.prototype.render = function () { return this.state.mounted ? react_1.default.createElement(WrappedComponent, __assign({}, this.augmentProps())) : null; }; AppBridgeConnector.contextTypes = { appBridgeMiddleware: _1.appBridgeMiddlewareProptype, }; AppBridgeConnector.displayName = "AppBridge(" + getComponentName(WrappedComponent) + ")"; AppBridgeConnector.WrappedComponent = WrappedComponent; return AppBridgeConnector; }(react_1.default.Component)); return hoist_non_react_statics_1.default(AppBridgeConnector, WrappedComponent); }; } exports.withApp = withApp;