@shopify/app-bridge-host/components/Performance.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 React = require('react');
var Actions = require('@shopify/app-bridge-core/actions');
var useHostContext = require('../hooks/useHostContext.js');
require('@shopify/app-bridge-core/actions/Error');

function Performance(_a) {
    var initialLoadState = _a.initialLoadState, dispatchPerformanceMetrics = _a.dispatchPerformanceMetrics;
    var hostContext = useHostContext.useHostContext();
    var _b = React.useState(null), lastDispatchedLoadTypeMetric = _b[0], setLastDispatchedLoadTypeMetric = _b[1];
    var allowedDispatch = React.useCallback(function (incomingAppLoadType) {
        var alreadyProccessedIncomingAppLoadType = incomingAppLoadType === lastDispatchedLoadTypeMetric;
        var noFurtherDispatchesAllowed = lastDispatchedLoadTypeMetric === Actions.Performance.Action.FULL_PAGE_LOAD;
        if (noFurtherDispatchesAllowed || alreadyProccessedIncomingAppLoadType) {
            return false;
        }
        return true;
    }, [lastDispatchedLoadTypeMetric]);
    var subscribe = React.useCallback(function (actionType) {
        var app = hostContext.app, _a = hostContext.config, appId = _a.appId, shopId = _a.shopId;
        return app.subscribe(actionType, function () {
            // handle shopify_admin_app_load_event_timing/4.0 events
            // check if metrics can be dispatched and if the time origin at initial load is set
            if (allowedDispatch(actionType) && typeof (initialLoadState === null || initialLoadState === void 0 ? void 0 : initialLoadState.timeOrigin) === 'number') {
                setLastDispatchedLoadTypeMetric(actionType);
                dispatchPerformanceMetrics({
                    appId: appId,
                    shopId: shopId,
                    isFullPageNavigation: initialLoadState.isFullPageNavigation,
                    loadTime: Date.now() - initialLoadState.timeOrigin,
                    appLoadType: actionType,
                });
            }
            else {
                // eslint-disable-next-line no-console
                console.warn('Not allowed to dispatch further load metrics.');
            }
        });
    }, [hostContext, allowedDispatch, initialLoadState]);
    React.useEffect(function () {
        var _a = Actions.Performance.Action, SKELETON_PAGE_LOAD = _a.SKELETON_PAGE_LOAD, FULL_PAGE_LOAD = _a.FULL_PAGE_LOAD;
        var unsubscribeSkeletonLoad = subscribe(SKELETON_PAGE_LOAD);
        var unsubscribeFullLoad = subscribe(FULL_PAGE_LOAD);
        return function () {
            unsubscribeSkeletonLoad();
            unsubscribeFullLoad();
        };
    }, [subscribe]);
    return null;
}

module.exports = Performance;