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

function WebVitals(_a) {
    var dispatchWebVitalsMetrics = _a.dispatchWebVitalsMetrics;
    var hostContext = useHostContext.useHostContext();
    var subscribe = React.useCallback(function (actionType) {
        var app = hostContext.app, _a = hostContext.config, appId = _a.appId, shopId = _a.shopId, apiKey = _a.apiKey, handle = _a.handle;
        return app.subscribe(actionType, function (payload) {
            // handle app_bridge_embedded_apps_performance_metrics/1.0 events
            dispatchWebVitalsMetrics(tslib.__assign({ appId: appId, shopId: shopId, handleOrKey: handle || apiKey }, payload));
        });
    }, [hostContext]);
    React.useEffect(function () {
        var _a = Actions.WebVitals.Action, LARGEST_CONTENTFUL_PAINT = _a.LARGEST_CONTENTFUL_PAINT, FIRST_INPUT_DELAY = _a.FIRST_INPUT_DELAY, CUMULATIVE_LAYOUT_SHIFT = _a.CUMULATIVE_LAYOUT_SHIFT, FIRST_CONTENTFUL_PAINT = _a.FIRST_CONTENTFUL_PAINT, TIME_TO_FIRST_BYTE = _a.TIME_TO_FIRST_BYTE, INTERACTION_TO_NEXT_PAINT = _a.INTERACTION_TO_NEXT_PAINT;
        var unsubscribeLCP = subscribe(LARGEST_CONTENTFUL_PAINT);
        var unsubscribeFID = subscribe(FIRST_INPUT_DELAY);
        var unsubscribeCLS = subscribe(CUMULATIVE_LAYOUT_SHIFT);
        var unsubscribeFCP = subscribe(FIRST_CONTENTFUL_PAINT);
        var unsubscribeTTFB = subscribe(TIME_TO_FIRST_BYTE);
        var unsubscribeINP = subscribe(INTERACTION_TO_NEXT_PAINT);
        return function () {
            unsubscribeLCP();
            unsubscribeFID();
            unsubscribeCLS();
            unsubscribeFCP();
            unsubscribeTTFB();
            unsubscribeINP();
        };
    }, [subscribe]);
    return null;
}

module.exports = WebVitals;