@atlaskit/react-ufo 1.1.0 → 2.0.0

package/dist/esm/vc/vc-observer/index.js

@@ -0,0 +1,555 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _excluded = ["__debug__element"];
+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) { _defineProperty(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; }
+import { attachAbortListeners } from './attachAbortListeners';
+import { getViewportHeight, getViewportWidth } from './getViewport';
+import { Observers } from './observers';
+var abortReason = {
+  scroll: 'scroll',
+  keypress: 'keypress',
+  resize: 'resize',
+  error: 'error'
+};
+var UNUSED_SECTOR = 0;
+function filterComponentsLog(log) {
+  return Object.fromEntries(Object.entries(log).map(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      timestamp = _ref2[0],
+      entries = _ref2[1];
+    return [Number(timestamp), entries.map(function (entry) {
+      var __debug__element = entry.__debug__element,
+        rest = _objectWithoutProperties(entry, _excluded);
+      return rest;
+    })];
+  }));
+}
+export var VCObserver = /*#__PURE__*/function () {
+  function VCObserver(options) {
+    var _this = this;
+    _classCallCheck(this, VCObserver);
+    /* abort logic */
+    _defineProperty(this, "abortReason", {
+      reason: null,
+      info: '',
+      timestamp: -1,
+      blocking: false
+    });
+    _defineProperty(this, "outOfBoundaryInfo", '');
+    _defineProperty(this, "viewport", {
+      w: 0,
+      h: 0
+    });
+    /* heatmap */
+    _defineProperty(this, "arraySize", 0);
+    _defineProperty(this, "componentsLog", {});
+    _defineProperty(this, "vcRatios", {});
+    _defineProperty(this, "active", false);
+    _defineProperty(this, "totalTime", 0);
+    _defineProperty(this, "startTime", 0);
+    _defineProperty(this, "_startMeasureTimestamp", -1);
+    _defineProperty(this, "ssr", {
+      reactRendered: -1
+    });
+    _defineProperty(this, "unbind", []);
+    _defineProperty(this, "getAbortReasonInfo", function () {
+      if (_this.abortReason.reason === null) {
+        return null;
+      }
+      var info = _this.abortReason.info !== '' ? " ".concat(_this.abortReason.info) : '';
+      return "".concat(_this.abortReason.reason).concat(info);
+    });
+    _defineProperty(this, "getVCRawData", function () {
+      _this.measureStart();
+      if (!_this.active) {
+        _this.measureStop();
+        return null;
+      }
+      _this.stop();
+      var abortReasonInfo = _this.getAbortReasonInfo();
+      _this.measureStop();
+      return {
+        abortReasonInfo: abortReasonInfo,
+        abortReason: _objectSpread({}, _this.abortReason),
+        heatmap: _this.ssrInclusiveHeatmap,
+        oldHeatmap: _this.heatmap,
+        outOfBoundaryInfo: _this.outOfBoundaryInfo,
+        totalTime: Math.round(_this.totalTime + _this.observers.getTotalTime()),
+        componentsLog: _objectSpread({}, _this.componentsLog),
+        viewport: _objectSpread({}, _this.viewport),
+        oldDomUpdatesEnabled: _this.oldDomUpdatesEnabled,
+        devToolsEnabled: _this.devToolsEnabled,
+        ratios: _this.vcRatios
+      };
+    });
+    _defineProperty(this, "getVCResult", function (_ref3) {
+      var _objectSpread2;
+      var start = _ref3.start,
+        stop = _ref3.stop,
+        tti = _ref3.tti,
+        prefix = _ref3.prefix,
+        ssr = _ref3.ssr,
+        vc = _ref3.vc;
+      var startTime = performance.now();
+      // add local measurement
+      var fullPrefix = prefix !== undefined && prefix !== '' ? "".concat(prefix, ":") : '';
+      var rawData = vc !== undefined ? vc : _this.getVCRawData();
+      if (rawData === null) {
+        return {};
+      }
+      var abortReason = rawData.abortReason,
+        abortReasonInfo = rawData.abortReasonInfo,
+        heatmap = rawData.heatmap,
+        oldHeatmap = rawData.oldHeatmap,
+        outOfBoundaryInfo = rawData.outOfBoundaryInfo,
+        totalTime = rawData.totalTime,
+        componentsLog = rawData.componentsLog,
+        viewport = rawData.viewport,
+        oldDomUpdatesEnabled = rawData.oldDomUpdatesEnabled,
+        devToolsEnabled = rawData.devToolsEnabled,
+        ratios = rawData.ratios;
+      if (abortReasonInfo !== null && abortReason.blocking) {
+        var _ref4;
+        // exposing data to devtools
+        try {
+          if (devToolsEnabled && !_this.isPostInteraction) {
+            window.__vcNotAvailableReason = abortReasonInfo;
+          }
+        } catch (e) {}
+        return _ref4 = {}, _defineProperty(_ref4, "".concat(fullPrefix, "vc:state"), false), _defineProperty(_ref4, "".concat(fullPrefix, "vc:abort:reason"), abortReasonInfo), _defineProperty(_ref4, "".concat(fullPrefix, "vc:abort:timestamp"), abortReason.timestamp), _ref4;
+      }
+      var _VCObserver$calculate = VCObserver.calculateVC({
+          heatmap: heatmap,
+          ssr: ssr,
+          componentsLog: _objectSpread({}, componentsLog),
+          viewport: viewport
+        }),
+        VC = _VCObserver$calculate.VC,
+        VCBox = _VCObserver$calculate.VCBox,
+        VCEntries = _VCObserver$calculate.VCEntries,
+        totalPainted = _VCObserver$calculate.totalPainted;
+      try {
+        if (!_this.isPostInteraction) {
+          VCObserver.VCParts.forEach(function (key) {
+            var duration = VC[key];
+            if (duration !== null && duration !== undefined) {
+              performance.measure("VC".concat(key), {
+                start: start,
+                duration: duration
+              });
+            }
+          });
+        }
+      } catch (e) {
+        /* empty */
+      }
+      var ssrVC = VCObserver.calculateVC({
+        heatmap: oldHeatmap,
+        ssr: ssr,
+        componentsLog: _objectSpread({}, componentsLog),
+        viewport: viewport
+      });
+      var outOfBoundary = outOfBoundaryInfo ? _defineProperty({}, "".concat(fullPrefix, "vc:oob"), outOfBoundaryInfo) : {};
+      var oldDomUpdates = oldDomUpdatesEnabled ? _defineProperty({}, "".concat(fullPrefix, "vc:old:dom"), ssrVC.VCBox) : {};
+      var stopTime = performance.now();
+
+      // exposing data to devtools
+      try {
+        if (!_this.isPostInteraction && devToolsEnabled) {
+          window.__vc = {
+            entries: VCEntries.rel,
+            log: componentsLog,
+            metrics: {
+              '75': VC['75'],
+              '80': VC['80'],
+              '85': VC['85'],
+              '90': VC['90'],
+              '95': VC['95'],
+              '98': VC['98'],
+              '99': VC['99'],
+              tti: tti,
+              ttai: stop - start
+            },
+            heatmap: heatmap,
+            ratios: ratios
+          };
+
+          // Emitting a custom event to make it available in the Chrome extension
+          window.dispatchEvent(new CustomEvent('vcReady', {
+            detail: {
+              log: filterComponentsLog(componentsLog),
+              entries: VCEntries.rel
+            }
+          }));
+        }
+      } catch (e) {
+        /*  do nothing */
+      }
+      return _objectSpread(_objectSpread(_objectSpread((_objectSpread2 = {
+        'metrics:vc': VC
+      }, _defineProperty(_objectSpread2, "".concat(fullPrefix, "vc:state"), true), _defineProperty(_objectSpread2, "".concat(fullPrefix, "vc:clean"), !abortReasonInfo), _defineProperty(_objectSpread2, "".concat(fullPrefix, "vc:dom"), VCBox), _defineProperty(_objectSpread2, "".concat(fullPrefix, "vc:updates"), VCEntries.rel.slice(0, 50)), _defineProperty(_objectSpread2, "".concat(fullPrefix, "vc:size"), viewport), _defineProperty(_objectSpread2, "".concat(fullPrefix, "vc:time"), Math.round(totalTime + (stopTime - startTime))), _defineProperty(_objectSpread2, "".concat(fullPrefix, "vc:total"), totalPainted), _defineProperty(_objectSpread2, "".concat(fullPrefix, "vc:ratios"), ratios), _objectSpread2), outOfBoundary), {}, _defineProperty({}, "".concat(fullPrefix, "vc:old"), ssrVC.VC), oldDomUpdates), {}, _defineProperty({}, "".concat(fullPrefix, "vc:ignored"), _this.getIgnoredElements(componentsLog)));
+    });
+    _defineProperty(this, "handleUpdate", function (rawTime, intersectionRect, targetName, element, ignoreReason) {
+      _this.measureStart();
+      if (_this.abortReason.reason === null || _this.abortReason.blocking === false) {
+        var time = Math.round(rawTime - _this.startTime);
+        var mappedValues = _this.mapPixelsToHeatmap(intersectionRect.left, intersectionRect.top, intersectionRect.width, intersectionRect.height);
+        _this.vcRatios[targetName] = _this.getElementRatio(mappedValues);
+        _this.applyChangesToHeatMap(mappedValues, time, _this.heatmap);
+        if (!ignoreReason) {
+          _this.applyChangesToHeatMap(mappedValues, time, _this.ssrInclusiveHeatmap);
+        }
+        if (!_this.componentsLog[time]) {
+          _this.componentsLog[time] = [];
+        }
+        _this.componentsLog[time].push({
+          __debug__element: _this.devToolsEnabled ? element : null,
+          intersectionRect: intersectionRect,
+          targetName: targetName,
+          ignoreReason: ignoreReason
+        });
+      }
+      // devtools export
+      _this.measureStop();
+    });
+    _defineProperty(this, "mapPixelsToHeatmap", function (left, top, width, height) {
+      var _this$viewport = _this.viewport,
+        w = _this$viewport.w,
+        h = _this$viewport.h;
+      var l = Math.floor(left / w * _this.arraySize);
+      var t = Math.floor(top / h * _this.arraySize);
+      var r = Math.ceil((left + width) / w * _this.arraySize);
+      var b = Math.ceil((top + height) / h * _this.arraySize);
+
+      // that info is temporary to get info why it goes over boundary
+      if (_this.outOfBoundaryInfo === '') {
+        var outOfBoundaryInfo = '';
+        if (r > _this.arraySize) {
+          outOfBoundaryInfo += " r ".concat(r, " ! ").concat(left, " ").concat(width);
+        }
+        if (b > _this.arraySize) {
+          outOfBoundaryInfo += " r ".concat(r, " ! ").concat(top, " ").concat(height);
+        }
+        _this.outOfBoundaryInfo = outOfBoundaryInfo;
+      }
+
+      // correct values to min - 0, max - arraySize
+      var result = {
+        l: Math.max(0, l),
+        t: Math.max(0, t),
+        r: Math.min(_this.arraySize, r),
+        b: Math.min(_this.arraySize, b)
+      };
+      return result;
+    });
+    _defineProperty(this, "getElementRatio", function (mappedValues) {
+      var r = mappedValues.r,
+        l = mappedValues.l,
+        b = mappedValues.b,
+        t = mappedValues.t;
+      return (r - l) * (b - t) / (_this.arraySize * _this.arraySize);
+    });
+    _defineProperty(this, "abortReasonCallback", function (key, time) {
+      switch (key) {
+        case 'wheel':
+          _this.setAbortReason(abortReason.scroll, time);
+          break;
+        case 'keydown':
+          _this.setAbortReason(abortReason.keypress, time);
+          break;
+        case 'resize':
+          _this.setAbortReason(abortReason.resize, time);
+          break;
+      }
+    });
+    _defineProperty(this, "attachAbortListeners", function () {
+      var _window;
+      _this.detachAbortListeners();
+      var unbinds = attachAbortListeners(window, _this.viewport, _this.abortReasonCallback);
+      if ((_window = window) !== null && _window !== void 0 && _window.__SSR_ABORT_LISTENERS__) {
+        var _window2;
+        Object.entries(window.__SSR_ABORT_LISTENERS__.aborts).forEach(function (_ref7) {
+          var _ref8 = _slicedToArray(_ref7, 2),
+            key = _ref8[0],
+            time = _ref8[1];
+          if (time) {
+            _this.abortReasonCallback(key, time);
+          }
+        });
+        unbinds = unbinds.concat(window.__SSR_ABORT_LISTENERS__.unbinds);
+        (_window2 = window) === null || _window2 === void 0 || delete _window2.__SSR_ABORT_LISTENERS__;
+      }
+      _this.unbind = unbinds;
+    });
+    this.arraySize = options.heatmapSize || 200;
+    this.devToolsEnabled = options.devToolsEnabled || false;
+    this.oldDomUpdatesEnabled = options.oldDomUpdates || false;
+    this.observers = new Observers({
+      selectorConfig: options.selectorConfig || {
+        id: false,
+        testId: false,
+        role: false,
+        className: true,
+        dataVC: true
+      }
+    });
+    this.heatmap = this.getCleanHeatmap();
+    this.ssrInclusiveHeatmap = this.getCleanHeatmap();
+    this.isPostInteraction = options.isPostInteraction || false;
+  }
+  _createClass(VCObserver, [{
+    key: "start",
+    value: function start(_ref9) {
+      var startTime = _ref9.startTime;
+      this.active = true;
+      if (this.observers.isBrowserSupported()) {
+        this.setViewportSize();
+        this.resetState();
+        this.startTime = startTime;
+        this.attachAbortListeners();
+        this.observers.subscribeResults(this.handleUpdate);
+        this.observers.observe();
+      } else {
+        this.setAbortReason('not-supported', startTime);
+      }
+    }
+  }, {
+    key: "stop",
+    value: function stop() {
+      this.observers.disconnect();
+      this.detachAbortListeners();
+    }
+  }, {
+    key: "getIgnoredElements",
+    value: function getIgnoredElements(componentsLog) {
+      return Object.values(componentsLog).flat().filter(function (_ref10) {
+        var ignoreReason = _ref10.ignoreReason;
+        return Boolean(ignoreReason);
+      }).map(function (_ref11) {
+        var targetName = _ref11.targetName,
+          ignoreReason = _ref11.ignoreReason;
+        return {
+          targetName: targetName,
+          ignoreReason: ignoreReason
+        };
+      });
+    }
+  }, {
+    key: "setSSRElement",
+    value: function setSSRElement(element) {
+      this.observers.setReactRootElement(element);
+    }
+  }, {
+    key: "setReactRootRenderStart",
+    value: function setReactRootRenderStart() {
+      var startTime = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : performance.now();
+      this.observers.setReactRootRenderStart(startTime);
+    }
+  }, {
+    key: "setReactRootRenderStop",
+    value: function setReactRootRenderStop() {
+      var stopTime = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : performance.now();
+      this.observers.setReactRootRenderStop(stopTime);
+    }
+  }, {
+    key: "setAbortReason",
+    value: function setAbortReason(abort, timestamp) {
+      var info = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+      if (this.abortReason.reason === null || this.abortReason.blocking === false) {
+        this.abortReason.reason = abort;
+        this.abortReason.info = info;
+        this.abortReason.timestamp = timestamp;
+        this.abortReason.blocking = abort !== abortReason.scroll;
+        if (this.abortReason.blocking) {
+          this.detachAbortListeners();
+        }
+      }
+    }
+  }, {
+    key: "resetState",
+    value: function resetState() {
+      this.abortReason = {
+        reason: null,
+        info: '',
+        timestamp: -1,
+        blocking: false
+      };
+      this.detachAbortListeners();
+      this.heatmap = this.getCleanHeatmap();
+      this.ssrInclusiveHeatmap = this.getCleanHeatmap();
+      this.totalTime = 0;
+      this.componentsLog = {};
+      this.vcRatios = {};
+    }
+  }, {
+    key: "getCleanHeatmap",
+    value: function getCleanHeatmap() {
+      var _this2 = this;
+      return Array(this.arraySize).fill('').map(function () {
+        return Array(_this2.arraySize).fill(UNUSED_SECTOR);
+      });
+    }
+  }, {
+    key: "setViewportSize",
+    value: function setViewportSize() {
+      this.viewport.w = getViewportWidth();
+      this.viewport.h = getViewportHeight();
+    }
+  }, {
+    key: "applyChangesToHeatMap",
+    value: function applyChangesToHeatMap(a, time, heatmap) {
+      var l = a.l,
+        t = a.t,
+        r = a.r,
+        b = a.b;
+      var localHeatmap = heatmap;
+      for (var row = t; row < b; row++) {
+        for (var col = l; col < r; col++) {
+          if (localHeatmap[row] === undefined) {
+            try {
+              this.setAbortReason(abortReason.error, time, "index - ".concat(row));
+            } catch (e) {
+              this.setAbortReason(abortReason.error, time, 'row error');
+            }
+            return;
+          } else {
+            localHeatmap[row][col] = time;
+          }
+        }
+      }
+    }
+  }, {
+    key: "detachAbortListeners",
+    value: function detachAbortListeners() {
+      this.unbind.forEach(function (fn) {
+        return fn();
+      });
+      this.unbind = [];
+    }
+  }, {
+    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;
+    }
+  }], [{
+    key: "calculateVC",
+    value: function calculateVC(_ref12) {
+      var heatmap = _ref12.heatmap,
+        _ref12$ssr = _ref12.ssr,
+        ssr = _ref12$ssr === void 0 ? UNUSED_SECTOR : _ref12$ssr,
+        componentsLog = _ref12.componentsLog,
+        viewport = _ref12.viewport;
+      var lastUpdate = {};
+      var totalPainted = 0;
+      if (ssr !== UNUSED_SECTOR) {
+        var _window$document;
+        var element = {
+          __debug__element: (_window$document = window.document) === null || _window$document === void 0 ? void 0 : _window$document.body,
+          intersectionRect: {
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            x: 0,
+            y: 0,
+            width: viewport.w,
+            height: viewport.h,
+            toJSON: function toJSON() {
+              return {};
+            }
+          },
+          targetName: 'SSR'
+        };
+        if (!componentsLog[ssr]) {
+          componentsLog[ssr] = [];
+        }
+        componentsLog[ssr].push(element);
+      }
+      heatmap.forEach(function (line) {
+        line.forEach(function (entry) {
+          var rounded = Math.floor(entry === UNUSED_SECTOR && ssr !== UNUSED_SECTOR ? ssr : entry);
+          totalPainted += rounded !== UNUSED_SECTOR ? 1 : 0;
+          if (rounded !== UNUSED_SECTOR) {
+            lastUpdate[rounded] = lastUpdate[rounded] ? lastUpdate[rounded] + 1 : 1;
+          }
+        });
+      });
+      var entries = Object.entries(lastUpdate).map(function (a) {
+        return [parseInt(a[0], 10), a[1]];
+      }).sort(function (a, b) {
+        return a[0] > b[0] ? 1 : -1;
+      });
+      var VC = VCObserver.makeVCReturnObj();
+      var VCBox = VCObserver.makeVCReturnObj();
+      entries.reduce(function () {
+        var acc = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+        var v = arguments.length > 1 ? arguments[1] : undefined;
+        var VCRatio = v[1] / totalPainted + acc;
+        var time = v[0];
+        VCObserver.VCParts.forEach(function (key) {
+          var value = parseInt(key, 10);
+          if ((VC[key] === null || VC[key] === undefined) && VCRatio >= value / 100) {
+            var _componentsLog$time;
+            VC[key] = time;
+            VCBox[key] = (_componentsLog$time = componentsLog[time]) === null || _componentsLog$time === void 0 ? void 0 : _componentsLog$time.map(function (v) {
+              return v.targetName;
+            });
+          }
+        });
+        return VCRatio;
+      }, 0);
+      var VCEntries = entries.reduce(function (acc, _ref13, i) {
+        var _acc$abs, _componentsLog$timest;
+        var _ref14 = _slicedToArray(_ref13, 2),
+          timestamp = _ref14[0],
+          entryPainted = _ref14[1];
+        var currentlyPainted = entryPainted + (((_acc$abs = acc.abs[i - 1]) === null || _acc$abs === void 0 ? void 0 : _acc$abs[1]) || 0);
+        var currentlyPaintedRatio = Math.round(currentlyPainted / totalPainted * 1000) / 10;
+        var logEntry = (_componentsLog$timest = componentsLog[timestamp]) === null || _componentsLog$timest === void 0 ? void 0 : _componentsLog$timest.map(function (v) {
+          return v.targetName;
+        });
+        acc.abs.push([timestamp, currentlyPainted]);
+        acc.rel.push({
+          time: timestamp,
+          vc: currentlyPaintedRatio,
+          elements: logEntry
+        });
+        return acc;
+      }, {
+        abs: [],
+        rel: []
+      });
+      return {
+        VC: VC,
+        VCBox: VCBox,
+        VCEntries: VCEntries,
+        totalPainted: totalPainted
+      };
+    }
+  }, {
+    key: "makeVCReturnObj",
+    value: function makeVCReturnObj() {
+      var vc = {};
+      VCObserver.VCParts.forEach(function (v) {
+        vc[v] = null;
+      });
+      return vc;
+    }
+  }]);
+  return VCObserver;
+}();
+/** config * */
+_defineProperty(VCObserver, "VCParts", ['25', '50', '75', '80', '85', '90', '95', '98', '99']);

package/dist/esm/vc/vc-observer/media-wrapper/index.js

@@ -0,0 +1,7 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+export var MEDIA_WRAPPER_TAG = 'data-media-vc-wrapper';
+export default function MediaWrapper(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", _defineProperty({}, MEDIA_WRAPPER_TAG, true), children);
+}

package/dist/esm/vc/vc-observer/media-wrapper/vc-utils.js

@@ -0,0 +1,10 @@
+import { MEDIA_WRAPPER_TAG } from './index';
+export var isContainedWithinMediaWrapper = function isContainedWithinMediaWrapper(node) {
+  while (node) {
+    if (node instanceof Element && node.hasAttribute(MEDIA_WRAPPER_TAG)) {
+      return true;
+    }
+    node = node.parentNode;
+  }
+  return false;
+};