@atlaskit/editor-core/dist/cjs/composable-editor/editor-inp-metrics.js

A package contains Atlassian editor core functionality

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.EditorINPMetrics = void 0;
var _react = require("react");
var _debounce = _interopRequireDefault(require("lodash/debounce"));
var _useAnalyticsEvents = require("@atlaskit/analytics-next/useAnalyticsEvents");
var _analytics = require("@atlaskit/editor-common/analytics");
var _inp = require("@atlaskit/editor-performance-metrics/inp");
var _interactionMetrics = require("@atlaskit/react-ufo/interaction-metrics");
var EditorINPMetrics = exports.EditorINPMetrics = function EditorINPMetrics() {
  var analyticsEvents = (0, _useAnalyticsEvents.useAnalyticsEvents)();

  // onMount lifecycle hook
  (0, _react.useEffect)(function () {
    var cleanupFn;
    var cleanupIdleCallback = createIdleCallback(function () {
      cleanupFn = (0, _inp.setupINPTracking)(function (_ref) {
        var value = _ref.value;
        var interaction = (0, _interactionMetrics.getActiveInteraction)();
        var ufoName = interaction === null || interaction === void 0 ? void 0 : interaction.ufoName;
        sendAnalytics(analyticsEvents.createAnalyticsEvent, value, ufoName);
      });
    });

    // Cleanup function that will be called when the component unmounts
    return function () {
      var _cleanupFn;
      cleanupIdleCallback();
      (_cleanupFn = cleanupFn) === null || _cleanupFn === void 0 || _cleanupFn();
    };
    // Using hook as mount lifecycle hook.
    // We do not need to set dependency on analyticsEvents since we are using the analyticsEvents object reference
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // This component doesn't render anything
  return null;
};
var sendAnalytics = (0, _debounce.default)(function (createAnalyticsEvent, value, ufoName) {
  (0, _analytics.fireAnalyticsEvent)(createAnalyticsEvent)({
    payload: {
      // @ts-expect-error Temporary data
      action: 'inp',
      actionSubject: _analytics.ACTION_SUBJECT.EDITOR,
      eventType: _analytics.EVENT_TYPE.TRACK,
      attributes: {
        inp: value,
        ufoName: ufoName
      }
    }
  });
}, 1000, {
  trailing: true
});
var createIdleCallback = function createIdleCallback(callback) {
  if (typeof window.requestIdleCallback === 'function') {
    var _id = window.requestIdleCallback(callback);
    return function () {
      return window.cancelIdleCallback(_id);
    };
  }
  // Fallback to setTimeout with 0 delay if requestIdleCallback is not available
  var id = window.setTimeout(callback, 0);
  return function () {
    return window.clearTimeout(id);
  };
};