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

import { __assign } from 'tslib';
import { useCallback, useEffect } from 'react';
import { WebVitals as WebVitals$1 } from '@shopify/app-bridge-core/actions';
import { useHostContext } from '../hooks/useHostContext.js';
import '@shopify/app-bridge-core/actions/Error';

function WebVitals(_a) {
    var dispatchWebVitalsMetrics = _a.dispatchWebVitalsMetrics;
    var hostContext = useHostContext();
    var subscribe = 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(__assign({ appId: appId, shopId: shopId, handleOrKey: handle || apiKey }, payload));
        });
    }, [hostContext]);
    useEffect(function () {
        var _a = WebVitals$1.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;
}

export { WebVitals as default };