@atlaskit/react-ufo 1.0.1 → 2.0.0

package/dist/es2019/vc/vc-observer/observers/index.js

@@ -0,0 +1,231 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { isContainedWithinMediaWrapper } from '../media-wrapper/vc-utils';
+import { SSRPlaceholderHandlers } from './ssr-placeholders';
+const state = {
+  normal: 1,
+  waitingForFirstRender: 2,
+  ignoring: 3
+};
+export class Observers {
+  constructor(opts) {
+    _defineProperty(this, "observedMutations", new WeakMap());
+    _defineProperty(this, "elementsInView", new Set());
+    _defineProperty(this, "callbacks", new Set());
+    _defineProperty(this, "totalTime", 0);
+    _defineProperty(this, "_startMeasureTimestamp", -1);
+    _defineProperty(this, "ssr", {
+      state: state.normal,
+      reactRootElement: null,
+      renderStart: -1,
+      renderStop: -1
+    });
+    _defineProperty(this, "selectorConfig", {
+      id: false,
+      testId: false,
+      role: false,
+      className: true,
+      dataVC: true
+    });
+    _defineProperty(this, "subscribeResults", cb => {
+      this.callbacks.add(cb);
+    });
+    _defineProperty(this, "observeElement", (node, mutation, _type, ignoreReason) => {
+      var _this$intersectionObs;
+      (_this$intersectionObs = this.intersectionObserver) === null || _this$intersectionObs === void 0 ? void 0 : _this$intersectionObs.observe(node);
+      this.observedMutations.set(node, {
+        mutation,
+        ignoreReason
+      });
+    });
+    this.selectorConfig = {
+      ...this.selectorConfig,
+      ...opts.selectorConfig
+    };
+    this.intersectionObserver = this.getIntersectionObserver();
+    this.mutationObserver = this.getMutationObserver();
+    this.ssrPlaceholderHandler = new SSRPlaceholderHandlers();
+  }
+  isBrowserSupported() {
+    return typeof window.IntersectionObserver === 'function' && typeof window.MutationObserver === 'function';
+  }
+  observe() {
+    var _this$mutationObserve;
+    this.totalTime = 0;
+    this.ssr = {
+      state: state.normal,
+      reactRootElement: null,
+      renderStart: -1,
+      renderStop: -1
+    };
+    (_this$mutationObserve = this.mutationObserver) === null || _this$mutationObserve === void 0 ? void 0 : _this$mutationObserve.observe(document.body, {
+      attributeFilter: ['hidden', 'style', 'src'],
+      attributeOldValue: true,
+      attributes: true,
+      childList: true,
+      subtree: true
+    });
+  }
+  disconnect() {
+    var _this$mutationObserve2, _this$intersectionObs2;
+    (_this$mutationObserve2 = this.mutationObserver) === null || _this$mutationObserve2 === void 0 ? void 0 : _this$mutationObserve2.disconnect();
+    (_this$intersectionObs2 = this.intersectionObserver) === null || _this$intersectionObs2 === void 0 ? void 0 : _this$intersectionObs2.disconnect();
+    this.observedMutations = new WeakMap();
+    this.elementsInView = new Set();
+    this.callbacks = new Set();
+    this.ssr.reactRootElement = null;
+    this.ssrPlaceholderHandler.clear();
+  }
+  getTotalTime() {
+    return this.totalTime;
+  }
+  setReactRootElement(element) {
+    this.ssr.reactRootElement = element;
+  }
+  setReactRootRenderStart(startTime = performance.now()) {
+    this.ssr.renderStart = startTime;
+    this.ssr.state = state.waitingForFirstRender;
+  }
+  setReactRootRenderStop(stopTime = performance.now()) {
+    this.ssr.renderStop = stopTime;
+  }
+  getMutationObserver() {
+    return this.isBrowserSupported() ? new MutationObserver(mutations => {
+      this.measureStart();
+      mutations.forEach(mutation => {
+        // patching element if timestamp not automatically added
+        // eslint-disable-next-line no-param-reassign
+        mutation.timestamp = mutation.timestamp === undefined ? performance.now() : mutation.timestamp;
+        let ignoreReason = '';
+        if (this.ssr.state === state.waitingForFirstRender && mutation.timestamp > this.ssr.renderStart && mutation.target === this.ssr.reactRootElement) {
+          this.ssr.state = state.ignoring;
+          if (this.ssr.renderStop === -1) {
+            // arbitrary 500ms DOM update window
+            this.ssr.renderStop = mutation.timestamp + 500;
+          }
+          ignoreReason = 'ssr-hydration';
+        }
+        if (this.ssr.state === state.ignoring && mutation.timestamp > this.ssr.renderStart && mutation.target === this.ssr.reactRootElement) {
+          if (mutation.timestamp <= this.ssr.renderStop) {
+            ignoreReason = 'ssr-hydration';
+          } else {
+            this.ssr.state = state.normal;
+          }
+        }
+        if (mutation.type === 'childList') {
+          mutation.addedNodes.forEach(node => {
+            if (isContainedWithinMediaWrapper(node)) {
+              ignoreReason = 'image';
+            }
+            if (node instanceof HTMLElement
+            /* && !node instanceof HTMLStyleElement && !node instanceof HTMLScriptElement && !node instanceof HTMLLinkElement */) {
+              if (this.ssrPlaceholderHandler.isPlaceholder(node) || this.ssrPlaceholderHandler.isPlaceholderIgnored(node)) {
+                this.ssrPlaceholderHandler.checkIfExistedAndSizeMatching(node).then(result => {
+                  if (result === false) {
+                    this.observeElement(node, mutation, 'html', ignoreReason);
+                  }
+                });
+                return;
+              }
+              if (this.ssrPlaceholderHandler.isPlaceholderReplacement(node) || this.ssrPlaceholderHandler.isPlaceholderIgnored(node)) {
+                this.ssrPlaceholderHandler.validateReactComponentMatchToPlaceholder(node).then(result => {
+                  if (result === false) {
+                    this.observeElement(node, mutation, 'html', ignoreReason);
+                  }
+                });
+                return;
+              }
+              this.observeElement(node, mutation, 'html', ignoreReason);
+            }
+            if (node instanceof Text && node.parentElement != null) {
+              this.observeElement(node.parentElement, mutation, 'text', ignoreReason);
+            }
+          });
+          mutation.removedNodes.forEach(node => {
+            if (node instanceof Element) {
+              var _this$intersectionObs3;
+              this.elementsInView.delete(node);
+              (_this$intersectionObs3 = this.intersectionObserver) === null || _this$intersectionObs3 === void 0 ? void 0 : _this$intersectionObs3.unobserve(node);
+            }
+          });
+        } else if (mutation.type === 'attributes') {
+          mutation.addedNodes.forEach(node => {
+            if (node instanceof HTMLElement) {
+              this.observeElement(node, mutation, 'attr', ignoreReason);
+            }
+          });
+        }
+      });
+      this.measureStop();
+    }) : null;
+  }
+  getElementName(element) {
+    try {
+      const tagName = element.localName;
+      const dataVCAttr = element.getAttribute('data-vc');
+      const dataVC = this.selectorConfig.dataVC && dataVCAttr ? `[data-vc="${dataVCAttr}"]` : '';
+      const id = this.selectorConfig.id && element.id ? `#${element.id}` : '';
+      let testId = this.selectorConfig.testId ? element.getAttribute('data-testid') || element.getAttribute('data-test-id') : '';
+      testId = testId ? `[testid=${testId}]` : '';
+      let role = this.selectorConfig.role ? element.getAttribute('role') : '';
+      role = role ? `[role=${role}]` : '';
+      let classList = this.selectorConfig.className ? Array.from(element.classList).join('.') : '';
+      classList = classList === '' ? '' : `.${classList}`;
+      const attrs = dataVC ? dataVC : [id, testId, role].join('');
+      let idString = '';
+      if (attrs === '' && classList === '') {
+        const parent = element.parentElement ? this.getElementName(element.parentElement) : 'unknown';
+        idString = `${parent} > ${tagName}`;
+      } else {
+        idString = [tagName, attrs || classList].join('');
+      }
+      return idString;
+    } catch (e) {
+      return 'error';
+    }
+  }
+  getIntersectionObserver() {
+    return this.isBrowserSupported() ? new IntersectionObserver(entries => {
+      this.measureStart();
+      entries.forEach(({
+        isIntersecting,
+        intersectionRect: ir,
+        target
+      }) => {
+        const data = this.observedMutations.get(target);
+        this.observedMutations.delete(target);
+        if (isIntersecting && ir.width > 0 && ir.height > 0) {
+          if (!(target instanceof HTMLElement)) {
+            return;
+          }
+          if (!(data !== null && data !== void 0 && data.mutation)) {
+            // ignore intersection report without recent mutation
+            return;
+          }
+          this.callbacks.forEach(callback => {
+            let elementName;
+            try {
+              elementName = this.getElementName(target);
+            } catch (e) {
+              elementName = 'error';
+            }
+            callback(data.mutation.timestamp || performance.now(), ir, elementName, target, data.ignoreReason);
+          });
+          this.elementsInView.add(target);
+        } else {
+          this.elementsInView.delete(target);
+        }
+      });
+      this.measureStop();
+    }) : null;
+  }
+  measureStart() {
+    this._startMeasureTimestamp = performance.now();
+  }
+  measureStop() {
+    if (this._startMeasureTimestamp === -1) {
+      return;
+    }
+    this.totalTime += performance.now() - this._startMeasureTimestamp;
+    this._startMeasureTimestamp = -1;
+  }
+}

package/dist/es2019/vc/vc-observer/observers/ssr-placeholders/index.js

@@ -0,0 +1,146 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { fg } from '@atlaskit/platform-feature-flags';
+const EQUALITY_THRESHOLD = 0.1;
+const ANCESTOR_LOOKUP_LIMIT = 10;
+export class SSRPlaceholderHandlers {
+  constructor() {
+    _defineProperty(this, "staticPlaceholders", new Map());
+    _defineProperty(this, "callbacks", new Map());
+    _defineProperty(this, "getSizeCallbacks", new Map());
+    _defineProperty(this, "reactValidateCallbacks", new Map());
+    _defineProperty(this, "intersectionObserverCallback", ({
+      target,
+      boundingClientRect
+    }) => {
+      this.intersectionObserver.unobserve(target);
+      if (!(target instanceof HTMLElement)) {
+        // impossible case - keep typescript healthy
+        return;
+      }
+      const staticKey = target.dataset.ssrPlaceholder || '';
+      if (staticKey) {
+        if (this.staticPlaceholders.has(staticKey) && this.callbacks.has(staticKey)) {
+          // validation
+          const resolve = this.callbacks.get(staticKey);
+          if (!resolve) {
+            return;
+          }
+          const rect = this.staticPlaceholders.get(staticKey);
+          const hasSameSizePosition = this.hasSameSizePosition(rect, boundingClientRect);
+          resolve(hasSameSizePosition);
+          this.callbacks.delete(staticKey);
+        }
+      } else {
+        // react component check
+        const key = target.dataset.ssrPlaceholderReplace || '';
+        const resolve = this.reactValidateCallbacks.get(key);
+        if (!resolve) {
+          return;
+        }
+        const rect = this.staticPlaceholders.get(key);
+        const hasSameSizePosition = this.hasSameSizePosition(rect, boundingClientRect);
+        resolve(hasSameSizePosition);
+        this.staticPlaceholders.delete(staticKey);
+        this.reactValidateCallbacks.delete(staticKey);
+      }
+    });
+    this.intersectionObserver = new IntersectionObserver(entries => fg('no_ssr_placeholder_check_when_not_intersecting') ? entries.filter(entry => entry.intersectionRatio > 0).forEach(this.intersectionObserverCallback) : entries.forEach(this.intersectionObserverCallback));
+    if (window.document) {
+      try {
+        const existingElements = document.querySelectorAll('[data-ssr-placeholder]');
+        existingElements.forEach(el => {
+          var _el$dataset;
+          if (el instanceof HTMLElement && el !== null && el !== void 0 && (_el$dataset = el.dataset) !== null && _el$dataset !== void 0 && _el$dataset.ssrPlaceholder) {
+            var _window$__SSR_PLACEHO;
+            let width = -1;
+            let height = -1;
+            let x = -1;
+            let y = -1;
+            const boundingClientRect = (_window$__SSR_PLACEHO = window.__SSR_PLACEHOLDERS_DIMENSIONS__) === null || _window$__SSR_PLACEHO === void 0 ? void 0 : _window$__SSR_PLACEHO[el.dataset.ssrPlaceholder];
+            if (boundingClientRect) {
+              width = boundingClientRect.width;
+              height = boundingClientRect.height;
+              x = boundingClientRect.x;
+              y = boundingClientRect.y;
+            }
+            this.staticPlaceholders.set(el.dataset.ssrPlaceholder, {
+              width,
+              height,
+              x,
+              y
+            });
+            this.intersectionObserver.observe(el);
+          }
+        });
+      } catch (e) {} finally {
+        delete window.__SSR_PLACEHOLDERS_DIMENSIONS__;
+      }
+    }
+  }
+  clear() {
+    this.staticPlaceholders = new Map();
+    this.callbacks = new Map();
+    this.getSizeCallbacks = new Map();
+    this.reactValidateCallbacks = new Map();
+  }
+  isPlaceholder(element) {
+    return Boolean(element.dataset.ssrPlaceholder);
+  }
+  isPlaceholderReplacement(element) {
+    return Boolean(element.dataset.ssrPlaceholderReplace);
+  }
+  isPlaceholderIgnored(element) {
+    // data-ssr-placeholder-ignored doesn't have a value.
+    return 'ssrPlaceholderIgnored' in element.dataset;
+  }
+  findNearestPlaceholderContainerIfIgnored(element) {
+    if (!this.isPlaceholderIgnored(element)) {
+      return element;
+    }
+    let ancestor = element.parentElement;
+    let i = 0;
+    while (ancestor && i < ANCESTOR_LOOKUP_LIMIT) {
+      if (this.isPlaceholder(ancestor) || this.isPlaceholderReplacement(ancestor)) {
+        return ancestor;
+      }
+      ancestor = ancestor.parentElement;
+      i++;
+    }
+    return element;
+  }
+  checkIfExistedAndSizeMatching(el) {
+    el = this.findNearestPlaceholderContainerIfIgnored(el);
+    const id = el.dataset.ssrPlaceholder || '';
+    return new Promise(resolve => {
+      if (!this.staticPlaceholders.has(id)) {
+        resolve(false);
+        return;
+      } else {
+        this.callbacks.set(id, resolve);
+        this.intersectionObserver.observe(el);
+      }
+    });
+  }
+  getSize(el) {
+    return new Promise(resolve => {
+      this.getSizeCallbacks.set(el.dataset.ssrPlaceholder || '', resolve);
+      this.intersectionObserver.observe(el);
+    });
+  }
+  validateReactComponentMatchToPlaceholder(el) {
+    el = this.findNearestPlaceholderContainerIfIgnored(el);
+    const id = el.dataset.ssrPlaceholderReplace || '';
+    return new Promise(resolve => {
+      if (!this.staticPlaceholders.has(id)) {
+        resolve(false);
+        return;
+      } else {
+        this.reactValidateCallbacks.set(id, resolve);
+        this.intersectionObserver.observe(el);
+      }
+    });
+  }
+  hasSameSizePosition(rect, boundingClientRect) {
+    return rect && Math.abs(rect.x - boundingClientRect.x) < EQUALITY_THRESHOLD && Math.abs(rect.y - boundingClientRect.y) < EQUALITY_THRESHOLD && Math.abs(rect.width - boundingClientRect.width) < EQUALITY_THRESHOLD && Math.abs(rect.height - boundingClientRect.height) < EQUALITY_THRESHOLD || false;
+  }
+}

package/dist/es2019/vc/vc-observer/observers/ssr-placeholders/ssr-scripts/bindAbortListeners.js

@@ -0,0 +1,16 @@
+import { attachAbortListeners } from '../../../attachAbortListeners';
+import { getViewportHeight, getViewportWidth } from '../../../getViewport';
+export function bindAbortListeners(document, window) {
+  const viewport = {
+    w: getViewportWidth(document),
+    h: getViewportHeight(document)
+  };
+  const aborts = {};
+  const unbinds = attachAbortListeners(window, viewport, (key, time) => {
+    aborts[key] = time;
+  });
+  window.__SSR_ABORT_LISTENERS__ = {
+    unbinds,
+    aborts
+  };
+}

package/dist/es2019/vc/vc-observer/observers/ssr-placeholders/ssr-scripts/collectSSRPlaceholderDimensions.js

@@ -0,0 +1,14 @@
+// lightweight script to scan the SSR response and collect all elements with data-ssr-placeholder attribute
+// and save their size/positions in a map __SSR_PLACEHOLDERS_DIMENSIONS__ on the Window object. Each placeholderId is
+// unique and maps to its corresponding elements bounding client rectangle dimensions.
+export function collectSSRPlaceholderDimensions(document, window) {
+  const ssrPlaceholders = document === null || document === void 0 ? void 0 : document.querySelectorAll('[data-ssr-placeholder]');
+  ssrPlaceholders.forEach(elem => {
+    const placeholderId = elem.getAttribute('data-ssr-placeholder');
+    const boundingClient = elem.getBoundingClientRect();
+    if (placeholderId) {
+      window.__SSR_PLACEHOLDERS_DIMENSIONS__ = window.__SSR_PLACEHOLDERS_DIMENSIONS__ || {};
+      window.__SSR_PLACEHOLDERS_DIMENSIONS__[placeholderId] = boundingClient;
+    }
+  });
+}

package/dist/es2019/vc/vc-observer/observers/ssr-placeholders/ssr-scripts/index.js

@@ -0,0 +1,2 @@
+export { collectSSRPlaceholderDimensions } from './collectSSRPlaceholderDimensions';
+export { bindAbortListeners } from './bindAbortListeners';

package/dist/es2019/vc/vc-observer/observers/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/additional-payload/index.js

@@ -0,0 +1,2 @@
+export { startLighthouseObserver, getLighthouseMetrics } from './utils/lighthouse-metrics';
+export { getCacheHitRatio } from './utils/cache-hit-ratio';

package/dist/esm/additional-payload/utils/cache-hit-ratio/index.js

@@ -0,0 +1,63 @@
+/* Borrowed from https://bitbucket.org/atlassian/atlassian-frontend/src/master/packages/performance/browser-metrics/src/plugins/timings/resource.ts */
+var cacheableTypes = ['script', 'link'];
+var CACHE_NETWORK = 'network';
+var CACHE_MEMORY = 'memory';
+var CACHE_DISK = 'disk';
+var calculateTransferType = function calculateTransferType(type, duration, size) {
+  if (!cacheableTypes.includes(type)) {
+    return CACHE_NETWORK;
+  }
+  if ((size === undefined || size === 0) && duration === 0) {
+    return CACHE_MEMORY;
+  }
+  if (size === 0 && duration > 0) {
+    return CACHE_DISK;
+  }
+  if (size === undefined) {
+    return null;
+  }
+  return CACHE_NETWORK;
+};
+export var getCacheHitRatio = function getCacheHitRatio(_ref) {
+  var start = _ref.start;
+  var fromCache = 0;
+  var preloadFromCache = 0;
+  var total = 0;
+  var totalPreload = 0;
+
+  // initial load only
+  if (start !== 0) {
+    return {};
+  }
+  try {
+    for (var _i = 0, _arr = performance.getEntriesByType('resource'); _i < _arr.length; _i++) {
+      var entry = _arr[_i];
+      // The BM3 resource timing collector checks for whether the timing information is available,
+      // but we can make the assumption that it is for this Jira specific collector.
+      var transferType = calculateTransferType(entry.initiatorType, entry.duration, entry.transferSize);
+      var isPreload = entry.initiatorType === 'link';
+      if (transferType === 'disk' || transferType === 'memory') {
+        fromCache += 1;
+        if (isPreload) {
+          preloadFromCache += 1;
+        }
+      }
+      if (transferType !== null) {
+        total += 1;
+        if (isPreload) {
+          totalPreload += 1;
+        }
+      }
+    }
+    var result = {};
+    if (total > 0) {
+      result.cacheHitRatio = fromCache / total;
+    }
+    if (totalPreload > 0) {
+      result.preloadCacheHitRatio = preloadFromCache / totalPreload;
+    }
+    return result;
+  } catch (e) {
+    return {};
+  }
+};

package/dist/esm/additional-payload/utils/lighthouse-metrics/cls/index.js

@@ -0,0 +1,47 @@
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+export var getCLS = function getCLS(start, stop, buffer) {
+  var layoutShifts = buffer.getAll().filter(function (entry) {
+    return entry.startTime >= start && entry.startTime <= stop;
+  });
+  var sessionWindows = [];
+  var currentWindow = null;
+
+  // Group layout shifts into session windows
+  var _iterator = _createForOfIteratorHelper(layoutShifts),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var shift = _step.value;
+      var startTime = shift.startTime;
+      var endTime = shift.startTime + shift.duration;
+      var score = shift.value;
+      if (currentWindow === null || startTime - currentWindow.endTime > 1000 || endTime - currentWindow.startTime > 5000) {
+        // Start a new session window
+        currentWindow = {
+          startTime: startTime,
+          endTime: endTime,
+          score: score
+        };
+        sessionWindows.push(currentWindow);
+      } else {
+        // Add layout shift to current session window
+        currentWindow.endTime = endTime;
+        currentWindow.score += score;
+      }
+    }
+
+    // Find session window with highest cumulative score
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  var maxScore = sessionWindows.reduce(function (max, sessionWindow) {
+    return sessionWindow.score > max ? sessionWindow.score : max;
+  }, 0);
+
+  // Return score of largest burst as CLS metric
+  return Math.round(maxScore * 10000) / 10000;
+};

package/dist/esm/additional-payload/utils/lighthouse-metrics/const.js

@@ -0,0 +1,4 @@
+export var PerformanceObserverEntryTypes = {
+  LayoutShift: 'layout-shift',
+  LongTask: 'longtask'
+};

package/dist/esm/additional-payload/utils/lighthouse-metrics/index.js

@@ -0,0 +1,22 @@
+import { getCLS } from './cls';
+import { PerformanceObserverEntryTypes } from './const';
+import { getTBT } from './tbt';
+import { EntriesBuffer } from './utils/buffer';
+import { startLSObserver, startLTObserver } from './utils/observer';
+export function startLighthouseObserver() {
+  startLSObserver();
+  startLTObserver();
+}
+export var getLighthouseMetrics = function getLighthouseMetrics(_ref) {
+  var start = _ref.start,
+    stop = _ref.stop;
+  var tbt = getTBT(start, stop, EntriesBuffer[PerformanceObserverEntryTypes.LongTask]);
+
+  // no round as CLS is usually 0-1
+  var cls = getCLS(start, stop, EntriesBuffer[PerformanceObserverEntryTypes.LayoutShift]);
+  return {
+    'metric:tbt': Math.round(tbt.total),
+    'metric:tbt:observed': Math.round(tbt.observed),
+    'metric:cls': cls
+  };
+};

package/dist/esm/additional-payload/utils/lighthouse-metrics/tbt/index.js

@@ -0,0 +1,19 @@
+var MAX_ACCEPTABLE_TASK_DURATION = 50;
+export var getTBT = function getTBT(start, stop, buffer) {
+  return buffer.getAll().filter(function (entry) {
+    return entry.startTime <= stop && entry.duration > MAX_ACCEPTABLE_TASK_DURATION && (entry.startTime >= start || entry.startTime + entry.duration >= start || entry.startTime <= start && entry.startTime + entry.duration >= stop);
+  }).reduce(function (tbt, entry) {
+    var longTaskStop = entry.startTime + entry.duration;
+    var intersectStart = Math.max(entry.startTime + MAX_ACCEPTABLE_TASK_DURATION, start);
+    var intersectStop = Math.min(longTaskStop, stop);
+    var longTaskIncluded = Math.max(intersectStop - intersectStart, 0);
+    // eslint-disable-next-line no-param-reassign
+    tbt.observed += entry.duration - MAX_ACCEPTABLE_TASK_DURATION;
+    // eslint-disable-next-line no-param-reassign
+    tbt.total += longTaskIncluded;
+    return tbt;
+  }, {
+    total: 0,
+    observed: 0
+  });
+};

package/dist/esm/additional-payload/utils/lighthouse-metrics/utils/buffer/index.js

@@ -0,0 +1,31 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _EntriesBuffer;
+import { PerformanceObserverEntryTypes } from '../../const';
+export var BufferWithMaxLength = /*#__PURE__*/function () {
+  function BufferWithMaxLength() {
+    var maxLength = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1000;
+    _classCallCheck(this, BufferWithMaxLength);
+    _defineProperty(this, "buffer", []);
+    _defineProperty(this, "full", false);
+    this.maxLength = maxLength;
+  }
+  _createClass(BufferWithMaxLength, [{
+    key: "push",
+    value: function push(item) {
+      if (this.full || this.maxLength === this.buffer.length) {
+        this.full = true;
+        this.buffer.shift();
+      }
+      this.buffer.push(item);
+    }
+  }, {
+    key: "getAll",
+    value: function getAll() {
+      return this.buffer;
+    }
+  }]);
+  return BufferWithMaxLength;
+}();
+export var EntriesBuffer = (_EntriesBuffer = {}, _defineProperty(_EntriesBuffer, PerformanceObserverEntryTypes.LongTask, new BufferWithMaxLength()), _defineProperty(_EntriesBuffer, PerformanceObserverEntryTypes.LayoutShift, new BufferWithMaxLength()), _EntriesBuffer);

package/dist/esm/additional-payload/utils/lighthouse-metrics/utils/observer/index.js

@@ -0,0 +1,31 @@
+import { PerformanceObserverEntryTypes } from '../../const';
+import { EntriesBuffer } from '../buffer';
+var pe = null;
+var getObserver = function getObserver() {
+  if (pe !== null) {
+    return pe;
+  }
+  pe = new PerformanceObserver(function (list) {
+    list.getEntries().forEach(function (entry) {
+      if (entry.entryType === PerformanceObserverEntryTypes.LayoutShift) {
+        EntriesBuffer[PerformanceObserverEntryTypes.LayoutShift].push(entry);
+      }
+      if (entry.entryType === PerformanceObserverEntryTypes.LongTask) {
+        EntriesBuffer[PerformanceObserverEntryTypes.LongTask].push(entry);
+      }
+    });
+  });
+  return pe;
+};
+export var startLSObserver = function startLSObserver() {
+  getObserver().observe({
+    type: PerformanceObserverEntryTypes.LayoutShift,
+    buffered: true
+  });
+};
+export var startLTObserver = function startLTObserver() {
+  getObserver().observe({
+    type: PerformanceObserverEntryTypes.LongTask,
+    buffered: true
+  });
+};