@atlaskit/editor-plugin-interactivity/dist/esm/collector/long-animation-frame-observer.js

Interactivity plugin for @atlaskit/editor-core

import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
/**
 * Reports the frames the browser took longer than 50 ms to render to `onFrames`. They are what says
 * where the time of a slow interaction went — which script ran the longest while the user waited,
 * and how much of the wait was style and layout — which Event Timing cannot answer.
 *
 * What they say about an interaction is `SlowInteractionList`'s to work out; this only observes.
 */
export var LongAnimationFrameObserver = /*#__PURE__*/function () {
  function LongAnimationFrameObserver(onFrames) {
    _classCallCheck(this, LongAnimationFrameObserver);
    this.onFrames = onFrames;
  }
  return _createClass(LongAnimationFrameObserver, [{
    key: "start",
    value: function start() {
      var _this = this;
      if (this.observer || !LongAnimationFrameObserver.isSupported()) {
        return;
      }
      this.observer = new PerformanceObserver(function (list) {
        _this.onFrames(list.getEntries());
      });

      // Buffered, as `web-vitals` observes them: a frame reported before the editor mounted can
      // still be the one an interaction right after it ran in.
      this.observer.observe({
        type: 'long-animation-frame',
        buffered: true
      });
    }
  }, {
    key: "drain",
    value: function drain() {
      var _this$observer;
      var frames = (_this$observer = this.observer) === null || _this$observer === void 0 ? void 0 : _this$observer.takeRecords();
      if (frames) {
        this.onFrames(frames);
      }
    }
  }, {
    key: "stop",
    value: function stop() {
      var _this$observer2;
      (_this$observer2 = this.observer) === null || _this$observer2 === void 0 || _this$observer2.disconnect();
      this.observer = undefined;
    }
  }], [{
    key: "isSupported",
    value: function isSupported() {
      return typeof PerformanceObserver !== 'undefined' && PerformanceObserver.supportedEntryTypes.includes('long-animation-frame');
    }
  }]);
}();