@atlaskit/react-ufo 1.1.0 → 2.0.0

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

@@ -0,0 +1,270 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Observers = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _vcUtils = require("../media-wrapper/vc-utils");
+var _ssrPlaceholders = require("./ssr-placeholders");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var state = {
+  normal: 1,
+  waitingForFirstRender: 2,
+  ignoring: 3
+};
+var Observers = exports.Observers = /*#__PURE__*/function () {
+  function Observers(opts) {
+    var _this = this;
+    (0, _classCallCheck2.default)(this, Observers);
+    (0, _defineProperty2.default)(this, "observedMutations", new WeakMap());
+    (0, _defineProperty2.default)(this, "elementsInView", new Set());
+    (0, _defineProperty2.default)(this, "callbacks", new Set());
+    (0, _defineProperty2.default)(this, "totalTime", 0);
+    (0, _defineProperty2.default)(this, "_startMeasureTimestamp", -1);
+    (0, _defineProperty2.default)(this, "ssr", {
+      state: state.normal,
+      reactRootElement: null,
+      renderStart: -1,
+      renderStop: -1
+    });
+    (0, _defineProperty2.default)(this, "selectorConfig", {
+      id: false,
+      testId: false,
+      role: false,
+      className: true,
+      dataVC: true
+    });
+    (0, _defineProperty2.default)(this, "subscribeResults", function (cb) {
+      _this.callbacks.add(cb);
+    });
+    (0, _defineProperty2.default)(this, "observeElement", function (node, mutation, _type, ignoreReason) {
+      var _this$intersectionObs;
+      (_this$intersectionObs = _this.intersectionObserver) === null || _this$intersectionObs === void 0 || _this$intersectionObs.observe(node);
+      _this.observedMutations.set(node, {
+        mutation: mutation,
+        ignoreReason: ignoreReason
+      });
+    });
+    this.selectorConfig = _objectSpread(_objectSpread({}, this.selectorConfig), opts.selectorConfig);
+    this.intersectionObserver = this.getIntersectionObserver();
+    this.mutationObserver = this.getMutationObserver();
+    this.ssrPlaceholderHandler = new _ssrPlaceholders.SSRPlaceholderHandlers();
+  }
+  (0, _createClass2.default)(Observers, [{
+    key: "isBrowserSupported",
+    value: function isBrowserSupported() {
+      return typeof window.IntersectionObserver === 'function' && typeof window.MutationObserver === 'function';
+    }
+  }, {
+    key: "observe",
+    value: 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 || _this$mutationObserve.observe(document.body, {
+        attributeFilter: ['hidden', 'style', 'src'],
+        attributeOldValue: true,
+        attributes: true,
+        childList: true,
+        subtree: true
+      });
+    }
+  }, {
+    key: "disconnect",
+    value: function disconnect() {
+      var _this$mutationObserve2, _this$intersectionObs2;
+      (_this$mutationObserve2 = this.mutationObserver) === null || _this$mutationObserve2 === void 0 || _this$mutationObserve2.disconnect();
+      (_this$intersectionObs2 = this.intersectionObserver) === null || _this$intersectionObs2 === void 0 || _this$intersectionObs2.disconnect();
+      this.observedMutations = new WeakMap();
+      this.elementsInView = new Set();
+      this.callbacks = new Set();
+      this.ssr.reactRootElement = null;
+      this.ssrPlaceholderHandler.clear();
+    }
+  }, {
+    key: "getTotalTime",
+    value: function getTotalTime() {
+      return this.totalTime;
+    }
+  }, {
+    key: "setReactRootElement",
+    value: function setReactRootElement(element) {
+      this.ssr.reactRootElement = element;
+    }
+  }, {
+    key: "setReactRootRenderStart",
+    value: function setReactRootRenderStart() {
+      var startTime = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : performance.now();
+      this.ssr.renderStart = startTime;
+      this.ssr.state = state.waitingForFirstRender;
+    }
+  }, {
+    key: "setReactRootRenderStop",
+    value: function setReactRootRenderStop() {
+      var stopTime = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : performance.now();
+      this.ssr.renderStop = stopTime;
+    }
+  }, {
+    key: "getMutationObserver",
+    value: function getMutationObserver() {
+      var _this2 = this;
+      return this.isBrowserSupported() ? new MutationObserver(function (mutations) {
+        _this2.measureStart();
+        mutations.forEach(function (mutation) {
+          // patching element if timestamp not automatically added
+          // eslint-disable-next-line no-param-reassign
+          mutation.timestamp = mutation.timestamp === undefined ? performance.now() : mutation.timestamp;
+          var ignoreReason = '';
+          if (_this2.ssr.state === state.waitingForFirstRender && mutation.timestamp > _this2.ssr.renderStart && mutation.target === _this2.ssr.reactRootElement) {
+            _this2.ssr.state = state.ignoring;
+            if (_this2.ssr.renderStop === -1) {
+              // arbitrary 500ms DOM update window
+              _this2.ssr.renderStop = mutation.timestamp + 500;
+            }
+            ignoreReason = 'ssr-hydration';
+          }
+          if (_this2.ssr.state === state.ignoring && mutation.timestamp > _this2.ssr.renderStart && mutation.target === _this2.ssr.reactRootElement) {
+            if (mutation.timestamp <= _this2.ssr.renderStop) {
+              ignoreReason = 'ssr-hydration';
+            } else {
+              _this2.ssr.state = state.normal;
+            }
+          }
+          if (mutation.type === 'childList') {
+            mutation.addedNodes.forEach(function (node) {
+              if ((0, _vcUtils.isContainedWithinMediaWrapper)(node)) {
+                ignoreReason = 'image';
+              }
+              if (node instanceof HTMLElement
+              /* && !node instanceof HTMLStyleElement && !node instanceof HTMLScriptElement && !node instanceof HTMLLinkElement */) {
+                if (_this2.ssrPlaceholderHandler.isPlaceholder(node) || _this2.ssrPlaceholderHandler.isPlaceholderIgnored(node)) {
+                  _this2.ssrPlaceholderHandler.checkIfExistedAndSizeMatching(node).then(function (result) {
+                    if (result === false) {
+                      _this2.observeElement(node, mutation, 'html', ignoreReason);
+                    }
+                  });
+                  return;
+                }
+                if (_this2.ssrPlaceholderHandler.isPlaceholderReplacement(node) || _this2.ssrPlaceholderHandler.isPlaceholderIgnored(node)) {
+                  _this2.ssrPlaceholderHandler.validateReactComponentMatchToPlaceholder(node).then(function (result) {
+                    if (result === false) {
+                      _this2.observeElement(node, mutation, 'html', ignoreReason);
+                    }
+                  });
+                  return;
+                }
+                _this2.observeElement(node, mutation, 'html', ignoreReason);
+              }
+              if (node instanceof Text && node.parentElement != null) {
+                _this2.observeElement(node.parentElement, mutation, 'text', ignoreReason);
+              }
+            });
+            mutation.removedNodes.forEach(function (node) {
+              if (node instanceof Element) {
+                var _this2$intersectionOb;
+                _this2.elementsInView.delete(node);
+                (_this2$intersectionOb = _this2.intersectionObserver) === null || _this2$intersectionOb === void 0 || _this2$intersectionOb.unobserve(node);
+              }
+            });
+          } else if (mutation.type === 'attributes') {
+            mutation.addedNodes.forEach(function (node) {
+              if (node instanceof HTMLElement) {
+                _this2.observeElement(node, mutation, 'attr', ignoreReason);
+              }
+            });
+          }
+        });
+        _this2.measureStop();
+      }) : null;
+    }
+  }, {
+    key: "getElementName",
+    value: function getElementName(element) {
+      try {
+        var tagName = element.localName;
+        var dataVCAttr = element.getAttribute('data-vc');
+        var dataVC = this.selectorConfig.dataVC && dataVCAttr ? "[data-vc=\"".concat(dataVCAttr, "\"]") : '';
+        var id = this.selectorConfig.id && element.id ? "#".concat(element.id) : '';
+        var testId = this.selectorConfig.testId ? element.getAttribute('data-testid') || element.getAttribute('data-test-id') : '';
+        testId = testId ? "[testid=".concat(testId, "]") : '';
+        var role = this.selectorConfig.role ? element.getAttribute('role') : '';
+        role = role ? "[role=".concat(role, "]") : '';
+        var classList = this.selectorConfig.className ? Array.from(element.classList).join('.') : '';
+        classList = classList === '' ? '' : ".".concat(classList);
+        var attrs = dataVC ? dataVC : [id, testId, role].join('');
+        var idString = '';
+        if (attrs === '' && classList === '') {
+          var parent = element.parentElement ? this.getElementName(element.parentElement) : 'unknown';
+          idString = "".concat(parent, " > ").concat(tagName);
+        } else {
+          idString = [tagName, attrs || classList].join('');
+        }
+        return idString;
+      } catch (e) {
+        return 'error';
+      }
+    }
+  }, {
+    key: "getIntersectionObserver",
+    value: function getIntersectionObserver() {
+      var _this3 = this;
+      return this.isBrowserSupported() ? new IntersectionObserver(function (entries) {
+        _this3.measureStart();
+        entries.forEach(function (_ref) {
+          var isIntersecting = _ref.isIntersecting,
+            ir = _ref.intersectionRect,
+            target = _ref.target;
+          var data = _this3.observedMutations.get(target);
+          _this3.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;
+            }
+            _this3.callbacks.forEach(function (callback) {
+              var elementName;
+              try {
+                elementName = _this3.getElementName(target);
+              } catch (e) {
+                elementName = 'error';
+              }
+              callback(data.mutation.timestamp || performance.now(), ir, elementName, target, data.ignoreReason);
+            });
+            _this3.elementsInView.add(target);
+          } else {
+            _this3.elementsInView.delete(target);
+          }
+        });
+        _this3.measureStop();
+      }) : null;
+    }
+  }, {
+    key: "measureStart",
+    value: function measureStart() {
+      this._startMeasureTimestamp = performance.now();
+    }
+  }, {
+    key: "measureStop",
+    value: function measureStop() {
+      if (this._startMeasureTimestamp === -1) {
+        return;
+      }
+      this.totalTime += performance.now() - this._startMeasureTimestamp;
+      this._startMeasureTimestamp = -1;
+    }
+  }]);
+  return Observers;
+}();

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

@@ -0,0 +1,183 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SSRPlaceholderHandlers = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var EQUALITY_THRESHOLD = 0.1;
+var ANCESTOR_LOOKUP_LIMIT = 10;
+var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/function () {
+  function SSRPlaceholderHandlers() {
+    var _this = this;
+    (0, _classCallCheck2.default)(this, SSRPlaceholderHandlers);
+    (0, _defineProperty2.default)(this, "staticPlaceholders", new Map());
+    (0, _defineProperty2.default)(this, "callbacks", new Map());
+    (0, _defineProperty2.default)(this, "getSizeCallbacks", new Map());
+    (0, _defineProperty2.default)(this, "reactValidateCallbacks", new Map());
+    (0, _defineProperty2.default)(this, "intersectionObserverCallback", function (_ref) {
+      var target = _ref.target,
+        boundingClientRect = _ref.boundingClientRect;
+      _this.intersectionObserver.unobserve(target);
+      if (!(target instanceof HTMLElement)) {
+        // impossible case - keep typescript healthy
+        return;
+      }
+      var staticKey = target.dataset.ssrPlaceholder || '';
+      if (staticKey) {
+        if (_this.staticPlaceholders.has(staticKey) && _this.callbacks.has(staticKey)) {
+          // validation
+          var _resolve = _this.callbacks.get(staticKey);
+          if (!_resolve) {
+            return;
+          }
+          var rect = _this.staticPlaceholders.get(staticKey);
+          var hasSameSizePosition = _this.hasSameSizePosition(rect, boundingClientRect);
+          _resolve(hasSameSizePosition);
+          _this.callbacks.delete(staticKey);
+        }
+      } else {
+        // react component check
+        var key = target.dataset.ssrPlaceholderReplace || '';
+        var _resolve2 = _this.reactValidateCallbacks.get(key);
+        if (!_resolve2) {
+          return;
+        }
+        var _rect = _this.staticPlaceholders.get(key);
+        var _hasSameSizePosition = _this.hasSameSizePosition(_rect, boundingClientRect);
+        _resolve2(_hasSameSizePosition);
+        _this.staticPlaceholders.delete(staticKey);
+        _this.reactValidateCallbacks.delete(staticKey);
+      }
+    });
+    this.intersectionObserver = new IntersectionObserver(function (entries) {
+      return (0, _platformFeatureFlags.fg)('no_ssr_placeholder_check_when_not_intersecting') ? entries.filter(function (entry) {
+        return entry.intersectionRatio > 0;
+      }).forEach(_this.intersectionObserverCallback) : entries.forEach(_this.intersectionObserverCallback);
+    });
+    if (window.document) {
+      try {
+        var existingElements = document.querySelectorAll('[data-ssr-placeholder]');
+        existingElements.forEach(function (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;
+            var width = -1;
+            var height = -1;
+            var x = -1;
+            var y = -1;
+            var 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: width,
+              height: height,
+              x: x,
+              y: y
+            });
+            _this.intersectionObserver.observe(el);
+          }
+        });
+      } catch (e) {} finally {
+        delete window.__SSR_PLACEHOLDERS_DIMENSIONS__;
+      }
+    }
+  }
+  (0, _createClass2.default)(SSRPlaceholderHandlers, [{
+    key: "clear",
+    value: function clear() {
+      this.staticPlaceholders = new Map();
+      this.callbacks = new Map();
+      this.getSizeCallbacks = new Map();
+      this.reactValidateCallbacks = new Map();
+    }
+  }, {
+    key: "isPlaceholder",
+    value: function isPlaceholder(element) {
+      return Boolean(element.dataset.ssrPlaceholder);
+    }
+  }, {
+    key: "isPlaceholderReplacement",
+    value: function isPlaceholderReplacement(element) {
+      return Boolean(element.dataset.ssrPlaceholderReplace);
+    }
+  }, {
+    key: "isPlaceholderIgnored",
+    value: function isPlaceholderIgnored(element) {
+      // data-ssr-placeholder-ignored doesn't have a value.
+      return 'ssrPlaceholderIgnored' in element.dataset;
+    }
+  }, {
+    key: "findNearestPlaceholderContainerIfIgnored",
+    value: function findNearestPlaceholderContainerIfIgnored(element) {
+      if (!this.isPlaceholderIgnored(element)) {
+        return element;
+      }
+      var ancestor = element.parentElement;
+      var i = 0;
+      while (ancestor && i < ANCESTOR_LOOKUP_LIMIT) {
+        if (this.isPlaceholder(ancestor) || this.isPlaceholderReplacement(ancestor)) {
+          return ancestor;
+        }
+        ancestor = ancestor.parentElement;
+        i++;
+      }
+      return element;
+    }
+  }, {
+    key: "checkIfExistedAndSizeMatching",
+    value: function checkIfExistedAndSizeMatching(el) {
+      var _this2 = this;
+      el = this.findNearestPlaceholderContainerIfIgnored(el);
+      var id = el.dataset.ssrPlaceholder || '';
+      return new Promise(function (resolve) {
+        if (!_this2.staticPlaceholders.has(id)) {
+          resolve(false);
+          return;
+        } else {
+          _this2.callbacks.set(id, resolve);
+          _this2.intersectionObserver.observe(el);
+        }
+      });
+    }
+  }, {
+    key: "getSize",
+    value: function getSize(el) {
+      var _this3 = this;
+      return new Promise(function (resolve) {
+        _this3.getSizeCallbacks.set(el.dataset.ssrPlaceholder || '', resolve);
+        _this3.intersectionObserver.observe(el);
+      });
+    }
+  }, {
+    key: "validateReactComponentMatchToPlaceholder",
+    value: function validateReactComponentMatchToPlaceholder(el) {
+      var _this4 = this;
+      el = this.findNearestPlaceholderContainerIfIgnored(el);
+      var id = el.dataset.ssrPlaceholderReplace || '';
+      return new Promise(function (resolve) {
+        if (!_this4.staticPlaceholders.has(id)) {
+          resolve(false);
+          return;
+        } else {
+          _this4.reactValidateCallbacks.set(id, resolve);
+          _this4.intersectionObserver.observe(el);
+        }
+      });
+    }
+  }, {
+    key: "hasSameSizePosition",
+    value: function 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;
+    }
+  }]);
+  return SSRPlaceholderHandlers;
+}();

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

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.bindAbortListeners = bindAbortListeners;
+var _attachAbortListeners = require("../../../attachAbortListeners");
+var _getViewport = require("../../../getViewport");
+function bindAbortListeners(document, window) {
+  var viewport = {
+    w: (0, _getViewport.getViewportWidth)(document),
+    h: (0, _getViewport.getViewportHeight)(document)
+  };
+  var aborts = {};
+  var unbinds = (0, _attachAbortListeners.attachAbortListeners)(window, viewport, function (key, time) {
+    aborts[key] = time;
+  });
+  window.__SSR_ABORT_LISTENERS__ = {
+    unbinds: unbinds,
+    aborts: aborts
+  };
+}

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.collectSSRPlaceholderDimensions = collectSSRPlaceholderDimensions;
+// 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.
+function collectSSRPlaceholderDimensions(document, window) {
+  var ssrPlaceholders = document === null || document === void 0 ? void 0 : document.querySelectorAll('[data-ssr-placeholder]');
+  ssrPlaceholders.forEach(function (elem) {
+    var placeholderId = elem.getAttribute('data-ssr-placeholder');
+    var boundingClient = elem.getBoundingClientRect();
+    if (placeholderId) {
+      window.__SSR_PLACEHOLDERS_DIMENSIONS__ = window.__SSR_PLACEHOLDERS_DIMENSIONS__ || {};
+      window.__SSR_PLACEHOLDERS_DIMENSIONS__[placeholderId] = boundingClient;
+    }
+  });
+}

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

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "bindAbortListeners", {
+  enumerable: true,
+  get: function get() {
+    return _bindAbortListeners.bindAbortListeners;
+  }
+});
+Object.defineProperty(exports, "collectSSRPlaceholderDimensions", {
+  enumerable: true,
+  get: function get() {
+    return _collectSSRPlaceholderDimensions.collectSSRPlaceholderDimensions;
+  }
+});
+var _collectSSRPlaceholderDimensions = require("./collectSSRPlaceholderDimensions");
+var _bindAbortListeners = require("./bindAbortListeners");

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

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

package/dist/es2019/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 */
+const cacheableTypes = ['script', 'link'];
+const CACHE_NETWORK = 'network';
+const CACHE_MEMORY = 'memory';
+const CACHE_DISK = 'disk';
+const 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 const getCacheHitRatio = ({
+  start
+}) => {
+  let fromCache = 0;
+  let preloadFromCache = 0;
+  let total = 0;
+  let totalPreload = 0;
+
+  // initial load only
+  if (start !== 0) {
+    return {};
+  }
+  try {
+    for (const entry of performance.getEntriesByType('resource')) {
+      // 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.
+      const transferType = calculateTransferType(entry.initiatorType, entry.duration, entry.transferSize);
+      const isPreload = entry.initiatorType === 'link';
+      if (transferType === 'disk' || transferType === 'memory') {
+        fromCache += 1;
+        if (isPreload) {
+          preloadFromCache += 1;
+        }
+      }
+      if (transferType !== null) {
+        total += 1;
+        if (isPreload) {
+          totalPreload += 1;
+        }
+      }
+    }
+    const result = {};
+    if (total > 0) {
+      result.cacheHitRatio = fromCache / total;
+    }
+    if (totalPreload > 0) {
+      result.preloadCacheHitRatio = preloadFromCache / totalPreload;
+    }
+    return result;
+  } catch (e) {
+    return {};
+  }
+};

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

@@ -0,0 +1,33 @@
+export const getCLS = (start, stop, buffer) => {
+  const layoutShifts = buffer.getAll().filter(entry => entry.startTime >= start && entry.startTime <= stop);
+  const sessionWindows = [];
+  let currentWindow = null;
+
+  // Group layout shifts into session windows
+  for (const shift of layoutShifts) {
+    const {
+      startTime
+    } = shift;
+    const endTime = shift.startTime + shift.duration;
+    const score = shift.value;
+    if (currentWindow === null || startTime - currentWindow.endTime > 1000 || endTime - currentWindow.startTime > 5000) {
+      // Start a new session window
+      currentWindow = {
+        startTime,
+        endTime,
+        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
+  const maxScore = sessionWindows.reduce((max, sessionWindow) => sessionWindow.score > max ? sessionWindow.score : max, 0);
+
+  // Return score of largest burst as CLS metric
+  return Math.round(maxScore * 10000) / 10000;
+};

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

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

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

@@ -0,0 +1,23 @@
+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 const getLighthouseMetrics = ({
+  start,
+  stop
+}) => {
+  const tbt = getTBT(start, stop, EntriesBuffer[PerformanceObserverEntryTypes.LongTask]);
+
+  // no round as CLS is usually 0-1
+  const 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/es2019/additional-payload/utils/lighthouse-metrics/tbt/index.js

@@ -0,0 +1,15 @@
+const MAX_ACCEPTABLE_TASK_DURATION = 50;
+export const getTBT = (start, stop, buffer) => buffer.getAll().filter(entry => 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((tbt, entry) => {
+  const longTaskStop = entry.startTime + entry.duration;
+  const intersectStart = Math.max(entry.startTime + MAX_ACCEPTABLE_TASK_DURATION, start);
+  const intersectStop = Math.min(longTaskStop, stop);
+  const 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
+});