@shopify/app-bridge/actions/WebVitals/actions.js

> **Maintenance Mode:** Although apps using this package will continue to function, it is no longer receiving updates. For new projects, please use the [CDN version of App Bridge](https://shopify.dev/docs/api/app-home?accordionItem=getting-started-build-y

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.initializeWebVitals = exports.interactionToNextPaint = exports.timeToFirstByte = exports.firstContentfulPaint = exports.cumulativeLayoutShift = exports.firstInputDelay = exports.largestContentfulPaint = exports.Action = void 0;
var web_vitals_1 = require("web-vitals");
var WebVitals_1 = require("@shopify/app-bridge-core/actions/WebVitals");
Object.defineProperty(exports, "Action", { enumerable: true, get: function () { return WebVitals_1.Action; } });
var env_1 = require("../../util/env");
var types_1 = require("../types");
var helper_1 = require("../helper");
var platform_1 = require("../../utilities/platform");
function largestContentfulPaint(payload) {
    return (0, helper_1.actionWrapper)({
        group: types_1.Group.WebVitals,
        type: WebVitals_1.Action.LARGEST_CONTENTFUL_PAINT,
        payload: payload,
    });
}
exports.largestContentfulPaint = largestContentfulPaint;
function firstInputDelay(payload) {
    return (0, helper_1.actionWrapper)({
        group: types_1.Group.WebVitals,
        type: WebVitals_1.Action.FIRST_INPUT_DELAY,
        payload: payload,
    });
}
exports.firstInputDelay = firstInputDelay;
function cumulativeLayoutShift(payload) {
    return (0, helper_1.actionWrapper)({
        group: types_1.Group.WebVitals,
        type: WebVitals_1.Action.CUMULATIVE_LAYOUT_SHIFT,
        payload: payload,
    });
}
exports.cumulativeLayoutShift = cumulativeLayoutShift;
function firstContentfulPaint(payload) {
    return (0, helper_1.actionWrapper)({
        group: types_1.Group.WebVitals,
        type: WebVitals_1.Action.FIRST_CONTENTFUL_PAINT,
        payload: payload,
    });
}
exports.firstContentfulPaint = firstContentfulPaint;
function timeToFirstByte(payload) {
    return (0, helper_1.actionWrapper)({
        group: types_1.Group.WebVitals,
        type: WebVitals_1.Action.TIME_TO_FIRST_BYTE,
        payload: payload,
    });
}
exports.timeToFirstByte = timeToFirstByte;
function interactionToNextPaint(payload) {
    return (0, helper_1.actionWrapper)({
        group: types_1.Group.WebVitals,
        type: WebVitals_1.Action.INTERACTION_TO_NEXT_PAINT,
        payload: payload,
    });
}
exports.interactionToNextPaint = interactionToNextPaint;
function initializeWebVitals(app) {
    function onReport(cb) {
        return function (data) {
            var id = data.id, metricName = data.name, value = data.value;
            var payload = { id: id, metricName: metricName, value: value };
            var event = cb(payload);
            app.dispatch(event);
        };
    }
    var untypedWindow = window;
    if (env_1.isServer || (env_1.isClient && untypedWindow.__is_web_vitals_initialized__) || (0, platform_1.isMobile)()) {
        // We need to prevent the Web Vitals functions from being called more than once per page load,
        // which can cause a memory leak as per the web-vitals docs.
        return;
    }
    untypedWindow.__is_web_vitals_initialized__ = true;
    (0, web_vitals_1.onLCP)(onReport(largestContentfulPaint));
    (0, web_vitals_1.onFID)(onReport(firstInputDelay));
    (0, web_vitals_1.onCLS)(onReport(cumulativeLayoutShift));
    (0, web_vitals_1.onFCP)(onReport(firstContentfulPaint));
    (0, web_vitals_1.onTTFB)(onReport(timeToFirstByte));
    (0, web_vitals_1.onINP)(onReport(interactionToNextPaint));
}
exports.initializeWebVitals = initializeWebVitals;