@atlaskit/react-ufo 1.1.0 → 2.0.0

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

@@ -0,0 +1,522 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { attachAbortListeners } from './attachAbortListeners';
+import { getViewportHeight, getViewportWidth } from './getViewport';
+import { Observers } from './observers';
+const abortReason = {
+  scroll: 'scroll',
+  keypress: 'keypress',
+  resize: 'resize',
+  error: 'error'
+};
+const UNUSED_SECTOR = 0;
+function filterComponentsLog(log) {
+  return Object.fromEntries(Object.entries(log).map(([timestamp, entries]) => [Number(timestamp), entries.map(entry => {
+    const {
+      __debug__element,
+      ...rest
+    } = entry;
+    return rest;
+  })]));
+}
+export class VCObserver {
+  constructor(options) {
+    /* 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", () => {
+      if (this.abortReason.reason === null) {
+        return null;
+      }
+      const info = this.abortReason.info !== '' ? ` ${this.abortReason.info}` : '';
+      return `${this.abortReason.reason}${info}`;
+    });
+    _defineProperty(this, "getVCRawData", () => {
+      this.measureStart();
+      if (!this.active) {
+        this.measureStop();
+        return null;
+      }
+      this.stop();
+      const abortReasonInfo = this.getAbortReasonInfo();
+      this.measureStop();
+      return {
+        abortReasonInfo,
+        abortReason: {
+          ...this.abortReason
+        },
+        heatmap: this.ssrInclusiveHeatmap,
+        oldHeatmap: this.heatmap,
+        outOfBoundaryInfo: this.outOfBoundaryInfo,
+        totalTime: Math.round(this.totalTime + this.observers.getTotalTime()),
+        componentsLog: {
+          ...this.componentsLog
+        },
+        viewport: {
+          ...this.viewport
+        },
+        oldDomUpdatesEnabled: this.oldDomUpdatesEnabled,
+        devToolsEnabled: this.devToolsEnabled,
+        ratios: this.vcRatios
+      };
+    });
+    _defineProperty(this, "getVCResult", ({
+      start,
+      stop,
+      tti,
+      prefix,
+      ssr,
+      vc
+    }) => {
+      const startTime = performance.now();
+      // add local measurement
+      const fullPrefix = prefix !== undefined && prefix !== '' ? `${prefix}:` : '';
+      const rawData = vc !== undefined ? vc : this.getVCRawData();
+      if (rawData === null) {
+        return {};
+      }
+      const {
+        abortReason,
+        abortReasonInfo,
+        heatmap,
+        oldHeatmap,
+        outOfBoundaryInfo,
+        totalTime,
+        componentsLog,
+        viewport,
+        oldDomUpdatesEnabled,
+        devToolsEnabled,
+        ratios
+      } = rawData;
+      if (abortReasonInfo !== null && abortReason.blocking) {
+        // exposing data to devtools
+        try {
+          if (devToolsEnabled && !this.isPostInteraction) {
+            window.__vcNotAvailableReason = abortReasonInfo;
+          }
+        } catch (e) {}
+        return {
+          [`${fullPrefix}vc:state`]: false,
+          [`${fullPrefix}vc:abort:reason`]: abortReasonInfo,
+          [`${fullPrefix}vc:abort:timestamp`]: abortReason.timestamp
+        };
+      }
+      const {
+        VC,
+        VCBox,
+        VCEntries,
+        totalPainted
+      } = VCObserver.calculateVC({
+        heatmap,
+        ssr,
+        componentsLog: {
+          ...componentsLog
+        },
+        viewport
+      });
+      try {
+        if (!this.isPostInteraction) {
+          VCObserver.VCParts.forEach(key => {
+            const duration = VC[key];
+            if (duration !== null && duration !== undefined) {
+              performance.measure(`VC${key}`, {
+                start,
+                duration
+              });
+            }
+          });
+        }
+      } catch (e) {
+        /* empty */
+      }
+      const ssrVC = VCObserver.calculateVC({
+        heatmap: oldHeatmap,
+        ssr,
+        componentsLog: {
+          ...componentsLog
+        },
+        viewport
+      });
+      const outOfBoundary = outOfBoundaryInfo ? {
+        [`${fullPrefix}vc:oob`]: outOfBoundaryInfo
+      } : {};
+      const oldDomUpdates = oldDomUpdatesEnabled ? {
+        [`${fullPrefix}vc:old:dom`]: ssrVC.VCBox
+      } : {};
+      const 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,
+              ttai: stop - start
+            },
+            heatmap,
+            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 {
+        'metrics:vc': VC,
+        [`${fullPrefix}vc:state`]: true,
+        [`${fullPrefix}vc:clean`]: !abortReasonInfo,
+        [`${fullPrefix}vc:dom`]: VCBox,
+        [`${fullPrefix}vc:updates`]: VCEntries.rel.slice(0, 50),
+        // max 50
+        [`${fullPrefix}vc:size`]: viewport,
+        [`${fullPrefix}vc:time`]: Math.round(totalTime + (stopTime - startTime)),
+        [`${fullPrefix}vc:total`]: totalPainted,
+        [`${fullPrefix}vc:ratios`]: ratios,
+        ...outOfBoundary,
+        [`${fullPrefix}vc:old`]: ssrVC.VC,
+        ...oldDomUpdates,
+        [`${fullPrefix}vc:ignored`]: this.getIgnoredElements(componentsLog)
+      };
+    });
+    _defineProperty(this, "handleUpdate", (rawTime, intersectionRect, targetName, element, ignoreReason) => {
+      this.measureStart();
+      if (this.abortReason.reason === null || this.abortReason.blocking === false) {
+        const time = Math.round(rawTime - this.startTime);
+        const 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,
+          targetName,
+          ignoreReason
+        });
+      }
+      // devtools export
+      this.measureStop();
+    });
+    _defineProperty(this, "mapPixelsToHeatmap", (left, top, width, height) => {
+      const {
+        w,
+        h
+      } = this.viewport;
+      const l = Math.floor(left / w * this.arraySize);
+      const t = Math.floor(top / h * this.arraySize);
+      const r = Math.ceil((left + width) / w * this.arraySize);
+      const b = Math.ceil((top + height) / h * this.arraySize);
+
+      // that info is temporary to get info why it goes over boundary
+      if (this.outOfBoundaryInfo === '') {
+        let outOfBoundaryInfo = '';
+        if (r > this.arraySize) {
+          outOfBoundaryInfo += ` r ${r} ! ${left} ${width}`;
+        }
+        if (b > this.arraySize) {
+          outOfBoundaryInfo += ` r ${r} ! ${top} ${height}`;
+        }
+        this.outOfBoundaryInfo = outOfBoundaryInfo;
+      }
+
+      // correct values to min - 0, max - arraySize
+      const 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", mappedValues => {
+      const {
+        r,
+        l,
+        b,
+        t
+      } = mappedValues;
+      return (r - l) * (b - t) / (this.arraySize * this.arraySize);
+    });
+    _defineProperty(this, "abortReasonCallback", (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", () => {
+      var _window;
+      this.detachAbortListeners();
+      let 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(([key, time]) => {
+          if (time) {
+            this.abortReasonCallback(key, time);
+          }
+        });
+        unbinds = unbinds.concat(window.__SSR_ABORT_LISTENERS__.unbinds);
+        (_window2 = window) === null || _window2 === void 0 ? true : 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;
+  }
+  start({
+    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);
+    }
+  }
+  stop() {
+    this.observers.disconnect();
+    this.detachAbortListeners();
+  }
+  getIgnoredElements(componentsLog) {
+    return Object.values(componentsLog).flat().filter(({
+      ignoreReason
+    }) => Boolean(ignoreReason)).map(({
+      targetName,
+      ignoreReason
+    }) => ({
+      targetName,
+      ignoreReason
+    }));
+  }
+  static calculateVC({
+    heatmap,
+    ssr = UNUSED_SECTOR,
+    componentsLog,
+    viewport
+  }) {
+    const lastUpdate = {};
+    let totalPainted = 0;
+    if (ssr !== UNUSED_SECTOR) {
+      var _window$document;
+      const 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() {
+            return {};
+          }
+        },
+        targetName: 'SSR'
+      };
+      if (!componentsLog[ssr]) {
+        componentsLog[ssr] = [];
+      }
+      componentsLog[ssr].push(element);
+    }
+    heatmap.forEach(line => {
+      line.forEach(entry => {
+        const 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;
+        }
+      });
+    });
+    const entries = Object.entries(lastUpdate).map(a => [parseInt(a[0], 10), a[1]]).sort((a, b) => a[0] > b[0] ? 1 : -1);
+    const VC = VCObserver.makeVCReturnObj();
+    const VCBox = VCObserver.makeVCReturnObj();
+    entries.reduce((acc = 0, v) => {
+      const VCRatio = v[1] / totalPainted + acc;
+      const time = v[0];
+      VCObserver.VCParts.forEach(key => {
+        const 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(v => v.targetName);
+        }
+      });
+      return VCRatio;
+    }, 0);
+    const VCEntries = entries.reduce((acc, [timestamp, entryPainted], i) => {
+      var _acc$abs, _componentsLog$timest;
+      const currentlyPainted = entryPainted + (((_acc$abs = acc.abs[i - 1]) === null || _acc$abs === void 0 ? void 0 : _acc$abs[1]) || 0);
+      const currentlyPaintedRatio = Math.round(currentlyPainted / totalPainted * 1000) / 10;
+      const logEntry = (_componentsLog$timest = componentsLog[timestamp]) === null || _componentsLog$timest === void 0 ? void 0 : _componentsLog$timest.map(v => v.targetName);
+      acc.abs.push([timestamp, currentlyPainted]);
+      acc.rel.push({
+        time: timestamp,
+        vc: currentlyPaintedRatio,
+        elements: logEntry
+      });
+      return acc;
+    }, {
+      abs: [],
+      rel: []
+    });
+    return {
+      VC,
+      VCBox,
+      VCEntries,
+      totalPainted
+    };
+  }
+  setSSRElement(element) {
+    this.observers.setReactRootElement(element);
+  }
+  setReactRootRenderStart(startTime = performance.now()) {
+    this.observers.setReactRootRenderStart(startTime);
+  }
+  setReactRootRenderStop(stopTime = performance.now()) {
+    this.observers.setReactRootRenderStop(stopTime);
+  }
+  setAbortReason(abort, timestamp, info = '') {
+    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();
+      }
+    }
+  }
+  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 = {};
+  }
+  getCleanHeatmap() {
+    return Array(this.arraySize).fill('').map(() => Array(this.arraySize).fill(UNUSED_SECTOR));
+  }
+  setViewportSize() {
+    this.viewport.w = getViewportWidth();
+    this.viewport.h = getViewportHeight();
+  }
+  applyChangesToHeatMap(a, time, heatmap) {
+    const {
+      l,
+      t,
+      r,
+      b
+    } = a;
+    const localHeatmap = heatmap;
+    for (let row = t; row < b; row++) {
+      for (let col = l; col < r; col++) {
+        if (localHeatmap[row] === undefined) {
+          try {
+            this.setAbortReason(abortReason.error, time, `index - ${row}`);
+          } catch (e) {
+            this.setAbortReason(abortReason.error, time, 'row error');
+          }
+          return;
+        } else {
+          localHeatmap[row][col] = time;
+        }
+      }
+    }
+  }
+  static makeVCReturnObj() {
+    const vc = {};
+    VCObserver.VCParts.forEach(v => {
+      vc[v] = null;
+    });
+    return vc;
+  }
+  detachAbortListeners() {
+    this.unbind.forEach(fn => fn());
+    this.unbind = [];
+  }
+  measureStart() {
+    this._startMeasureTimestamp = performance.now();
+  }
+  measureStop() {
+    if (this._startMeasureTimestamp === -1) {
+      return;
+    }
+    this.totalTime += performance.now() - this._startMeasureTimestamp;
+    this._startMeasureTimestamp = -1;
+  }
+}
+/** config * */
+_defineProperty(VCObserver, "VCParts", ['25', '50', '75', '80', '85', '90', '95', '98', '99']);

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

@@ -0,0 +1,9 @@
+import React from 'react';
+export const MEDIA_WRAPPER_TAG = 'data-media-vc-wrapper';
+export default function MediaWrapper({
+  children
+}) {
+  return /*#__PURE__*/React.createElement("div", {
+    [MEDIA_WRAPPER_TAG]: true
+  }, children);
+}

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

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