@atlaskit/react-ufo 3.1.4 → 3.3.0

package/dist/es2019/vc/vc-observer-new/metric-calculator/percentile-calc/heatmap/index.js

@@ -0,0 +1,261 @@
+import isViewportEntryData from '../../utils/is-viewport-entry-data';
+import taskYield from '../../utils/task-yield';
+const MAX_HEATMAP_SIZE = 1000;
+function createEmptyHeatmapEntry() {
+  return {
+    head: null,
+    previousEntries: []
+  };
+}
+function createEmptyMap(heatmapWidth, heatmapHeight) {
+  return Array.from({
+    length: heatmapHeight
+  }).map(() => Array.from({
+    length: heatmapWidth
+  }).map(createEmptyHeatmapEntry));
+}
+function isRectInside(a, b) {
+  if (!a || !b) {
+    return false;
+  }
+
+  // Check if all corners of rectangle a are within the bounds of rectangle b
+  return a.left >= b.left && a.right <= b.right && a.top >= b.top && a.bottom <= b.bottom;
+}
+class Heatmap {
+  /**
+   * Heatmap Width
+   */
+
+  /**
+   * Heatmap Height
+   */
+
+  /**
+   * Heatmap Area (width * height)
+   */
+
+  constructor({
+    viewport,
+    heatmapSize
+  }) {
+    // TODO timeOrigin? do we need? for SSR??
+    this.viewport = viewport;
+    const safeSize = Math.min(heatmapSize, MAX_HEATMAP_SIZE);
+    if (viewport.width === 0 || viewport.height === 0) {
+      this.width = safeSize;
+      this.height = safeSize;
+      this.scaleX = 1;
+      this.scaleY = 1;
+      this.heatmapAreaSize = 0;
+      this.map = createEmptyMap(safeSize, safeSize);
+      return;
+    }
+    const aspectRatio = viewport.width / viewport.height;
+    if (aspectRatio > 1) {
+      // Landscape orientation
+      this.width = safeSize;
+      this.height = Math.round(safeSize / aspectRatio);
+    } else {
+      // Portrait orientation
+      this.width = safeSize;
+      this.height = Math.round(safeSize * aspectRatio);
+    }
+    this.scaleX = this.width / viewport.width;
+    this.scaleY = this.height / viewport.height;
+    this.heatmapAreaSize = this.width * this.height;
+    this.map = createEmptyMap(this.width, this.height);
+  }
+  getHeatmap() {
+    return this.map;
+  }
+  getCell(row, col) {
+    var _this$map$row;
+    return (_this$map$row = this.map[row]) === null || _this$map$row === void 0 ? void 0 : _this$map$row[col];
+  }
+
+  /**
+   * Map Dom Rect to Heatmap Rect, rounded up to occupy full cell.
+   * @param rect DOM Rect
+   * @returns
+   */
+  mapDOMRectToHeatmap(rect) {
+    const scaledX = rect.x * this.scaleX;
+    const scaledY = rect.y * this.scaleY;
+    const scaledWidth = rect.width * this.scaleX;
+    const scaledHeight = rect.height * this.scaleY;
+    return {
+      left: Math.floor(scaledX),
+      right: Math.ceil(scaledX + scaledWidth),
+      top: Math.floor(scaledY),
+      bottom: Math.ceil(scaledY + scaledHeight)
+    };
+  }
+
+  /**
+   * Calculate the ratio of a HeatmapRect compared to the full heatmap
+   *
+   * This function determines what fraction of the heatmap is covered by the given heatmap rectangle.
+   *
+   * @param rect
+   */
+  getRatio(rect) {
+    if (this.viewport.width === 0 || this.viewport.height === 0) {
+      return 0;
+    }
+    const {
+      right,
+      left,
+      bottom,
+      top
+    } = rect;
+    const rectWidth = right - left;
+    const rectHeight = bottom - top;
+    const rectArea = rectWidth * rectHeight;
+    const ratio = rectArea / this.heatmapAreaSize;
+    if (ratio > 1) {
+      return 1;
+    }
+    return ratio;
+  }
+  async applyEntriesToHeatmap(entries) {
+    for (let i = 0; i < entries.length; i++) {
+      const entry = entries[i];
+      const {
+        time,
+        type,
+        data
+      } = entry;
+      if (isViewportEntryData(data)) {
+        const rect = this.mapDOMRectToHeatmap(data.rect);
+        const ratio = this.getRatio(rect);
+        const heatmapEntryData = {
+          time,
+          elementName: data.elementName,
+          ratio: ratio !== null && ratio !== void 0 ? ratio : null,
+          rect,
+          source: type
+        };
+        const roundedTop = Math.floor(rect.top);
+        const roundedBottom = Math.min(rect.bottom, this.height);
+        const roundedLeft = Math.floor(rect.left);
+        const roundedRight = Math.min(rect.right, this.width);
+        for (let row = roundedTop; row < roundedBottom; row++) {
+          for (let col = roundedLeft; col < roundedRight; col++) {
+            const cell = this.getCell(row, col);
+            if (!cell) {
+              continue;
+            }
+            const previousEntry = cell.head;
+
+            // When elements are added at the same time
+            // we try to keep the inner element changes as the head
+            if ((previousEntry === null || previousEntry === void 0 ? void 0 : previousEntry.time) === entry.time && isRectInside(previousEntry.rect, heatmapEntryData.rect)) {
+              cell.previousEntries.push({
+                ...heatmapEntryData,
+                source: 'mutation:parent-mounted'
+              });
+              continue;
+            }
+            cell.head = {
+              ...heatmapEntryData,
+              source: heatmapEntryData.source || null
+            };
+            if (previousEntry !== null) {
+              cell.previousEntries.push(previousEntry);
+            }
+          }
+        }
+      }
+      // Every 100 events processed
+      // we give the browser the power
+      // to process any other high priority task
+      if (i % 100 === 0) {
+        await taskYield();
+      }
+    }
+  }
+  async getVCPercentMetrics(vcPercentCheckpoint) {
+    const sortedCheckpoints = [...vcPercentCheckpoint].sort((a, b) => a - b);
+    const flattenHeatmap = this.map.flat();
+    const totalCells = flattenHeatmap.length;
+    const timestampMap = new Map();
+    for (let i = 0; i < flattenHeatmap.length; i++) {
+      var _cellHead$time, _timestampMap$get;
+      const cell = flattenHeatmap[i];
+      const cellHead = cell.head;
+      const timestamp = Math.trunc((_cellHead$time = cellHead === null || cellHead === void 0 ? void 0 : cellHead.time) !== null && _cellHead$time !== void 0 ? _cellHead$time : 0);
+      const elementName = cellHead === null || cellHead === void 0 ? void 0 : cellHead.elementName;
+      const curr = (_timestampMap$get = timestampMap.get(timestamp)) !== null && _timestampMap$get !== void 0 ? _timestampMap$get : {
+        cellCount: 0,
+        domElements: new Set()
+      };
+      curr.cellCount += 1;
+      if (elementName) {
+        curr.domElements.add(elementName);
+      }
+      timestampMap.set(timestamp, curr);
+
+      // Every 10000 heatmap entries processed
+      // we give the browser the power
+      // to process any other high priority task
+      if (i > 10000 && i % 10000 === 0) {
+        await taskYield();
+      }
+    }
+    const sortedTimings = [...timestampMap.keys()].sort((a, b) => a - b);
+    let totalCellPainted = 0;
+    const result = {};
+    let domElementsBuffer = new Set();
+    for (let i = 0; i < sortedTimings.length; i++) {
+      const timestamp = sortedTimings[i];
+      const timestampInfo = timestampMap.get(timestamp);
+      if (!timestampInfo) {
+        throw new Error('unexpected timestampInfo not found');
+      }
+      const {
+        cellCount,
+        domElements
+      } = timestampInfo;
+      totalCellPainted += cellCount;
+      const currVCRatio = totalCellPainted / totalCells;
+      const currVCPercent = Math.round(currVCRatio * 100);
+      domElements.forEach(domElement => {
+        domElementsBuffer.add(domElement);
+      });
+      let matchesAnyCheckpoints = false;
+      while (sortedCheckpoints.length > 0 && currVCPercent >= sortedCheckpoints[0]) {
+        const checkpoint = sortedCheckpoints.shift();
+        const domElements = [...domElementsBuffer];
+        if (!checkpoint) {
+          break;
+        }
+        matchesAnyCheckpoints = true;
+        result[checkpoint.toString()] = {
+          t: timestamp,
+          e: domElements
+        };
+      }
+      if (matchesAnyCheckpoints) {
+        domElementsBuffer.clear();
+      }
+      if (i % 500 === 0) {
+        await taskYield();
+      }
+    }
+    return result;
+  }
+}
+export default async function calculateTTVCPercentiles({
+  orderedEntries,
+  viewport,
+  percentiles
+}) {
+  const heatmap = new Heatmap({
+    viewport,
+    heatmapSize: 200
+  });
+  await heatmap.applyEntriesToHeatmap(orderedEntries);
+  const vcDetails = await heatmap.getVCPercentMetrics(percentiles);
+  return vcDetails;
+}

package/dist/es2019/vc/vc-observer-new/metric-calculator/percentile-calc/heatmap/types.js

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

package/dist/es2019/vc/vc-observer-new/metric-calculator/percentile-calc/index.js

@@ -0,0 +1,19 @@
+import calcUsingCanvas from './canvas-heatmap';
+import caclUsingOldHeatmap from './heatmap';
+import calcUsingRectSweepingLine from './rect-sweeping-line';
+export default async function calculateTTVCPercentiles(arg) {
+  const algo = 'canvas_heatmap';
+  if (algo === 'canvas_heatmap') {
+    const vcDetails = await calcUsingCanvas(arg);
+    return vcDetails;
+  }
+  if (algo === 'rect_sweeping') {
+    const vcDetails = await calcUsingRectSweepingLine(arg);
+    return vcDetails;
+  }
+  if (algo === 'old_heatmap') {
+    const vcDetails = await caclUsingOldHeatmap(arg);
+    return vcDetails;
+  }
+  throw new Error('unexpected Error algo not chosen correctly');
+}

package/dist/es2019/vc/vc-observer-new/metric-calculator/percentile-calc/rect-sweeping-line/calc-union-area.js

@@ -0,0 +1,98 @@
+/**
+ * Calculate the union areas of all rectangles using Sweep Line Algorithm
+ *
+ * Reference:
+ * 	https://en.wikipedia.org/wiki/Sweep_line_algorithm
+ *  https://www.hackerearth.com/practice/math/geometry/line-sweep-technique/tutorial/#:~:text=A%20sweep%20line%20is%20an,order%20to%20discretize%20the%20sweep.
+ *
+ * @param rectangles
+ * @returns
+ */
+export default function calculateUnionArea(rectangles) {
+  // Step 1: Create sweep line events
+  const events = createSweepLineEvents(rectangles);
+
+  // Step 2: Process events to calculate total area
+  const activeIntervals = new Map();
+  let totalArea = 0;
+  let previousX = 0;
+  for (const event of events) {
+    // Calculate height at current x-position
+    const currentHeight = calculateActiveHeight(activeIntervals);
+    // Add area since last x-position
+    totalArea += currentHeight * (event.x - previousX);
+    // Update x-position
+    previousX = event.x;
+    // Update active intervals
+    updateActiveIntervals(activeIntervals, event);
+  }
+  return totalArea;
+}
+function createSweepLineEvents(rectangles) {
+  const events = [];
+  for (const rect of rectangles) {
+    // Create start and end events for each rectangle
+    events.push({
+      x: rect.left,
+      type: 'start',
+      top: rect.top,
+      bottom: rect.bottom
+    });
+    events.push({
+      x: rect.right,
+      type: 'end',
+      top: rect.top,
+      bottom: rect.bottom
+    });
+  }
+  // Sort events by x-coordinate (and type as tiebreaker)
+  return events.sort((a, b) => a.x === b.x ? a.type === 'end' ? 1 : -1 : a.x - b.x);
+}
+function calculateActiveHeight(intervals) {
+  if (intervals.size === 0) {
+    return 0;
+  }
+  // Get all unique y-coordinates
+  const coordinates = [];
+  for (const [key] of intervals) {
+    const [start, end] = key.split(',').map(Number);
+    coordinates.push(start, end);
+  }
+  // Sort coordinates
+  const sortedCoords = [...new Set(coordinates)].sort((a, b) => a - b);
+  let totalHeight = 0;
+  // Check each segment between consecutive coordinates
+  for (let i = 0; i < sortedCoords.length; i++) {
+    const y1 = sortedCoords[i];
+    const y2 = sortedCoords[i + 1];
+    // Check if this segment is covered by any active interval
+    let covered = false;
+    for (const [key, count] of intervals) {
+      if (count <= 0) {
+        continue;
+      }
+      const [start, end] = key.split(',').map(Number);
+      if (start <= y1 && end >= y2) {
+        covered = true;
+        break;
+      }
+    }
+    if (covered) {
+      totalHeight += y2 - y1;
+    }
+  }
+  return totalHeight;
+}
+function updateActiveIntervals(intervals, event) {
+  const key = `${event.top},${event.bottom}`;
+  if (event.type === 'start') {
+    intervals.set(key, (intervals.get(key) || 0) + 1);
+  } else {
+    const count = intervals.get(key) || 0;
+    if (count > 1) {
+      intervals.set(key, count - 1);
+    } else {
+      intervals.delete(key);
+    }
+  }
+}

package/dist/es2019/vc/vc-observer-new/metric-calculator/percentile-calc/rect-sweeping-line/index.js

@@ -0,0 +1,58 @@
+import isViewportEntryData from '../../utils/is-viewport-entry-data';
+import taskYield from '../../utils/task-yield';
+import calculateUnionArea from './calc-union-area';
+export default async function calculateTTVCPercentiles({
+  orderedEntries,
+  viewport,
+  percentiles
+}) {
+  const sortedPercentiles = [...percentiles].sort((a, b) => a - b);
+  const viewportArea = viewport.width * viewport.height;
+  const checkpoints = {};
+  let activeRects = orderedEntries.filter(e => isViewportEntryData(e.data)).map(e => e.data.rect);
+  const removeActiveRect = rectToRemove => {
+    const index = activeRects.indexOf(rectToRemove);
+    // Check if the element exists in the array
+    if (index !== -1) {
+      // Remove the element at the found index
+      activeRects.splice(index, 1);
+    }
+  };
+  let domElementsBuffer = new Set();
+  for (let i = 0; i < orderedEntries.length; i++) {
+    const iEntry = orderedEntries[i];
+    const iEntryData = iEntry.data;
+    if (!isViewportEntryData(iEntryData)) {
+      continue;
+    }
+    const {
+      rect,
+      elementName
+    } = iEntryData;
+    domElementsBuffer.add(elementName);
+    removeActiveRect(rect);
+    const exclusionArea = calculateUnionArea(activeRects);
+    const currentArea = viewportArea - exclusionArea;
+    const currVCPercent = Math.round(currentArea / viewportArea * 100);
+    let matchesAnyCheckpoints = false;
+    while (sortedPercentiles.length > 0 && currVCPercent >= sortedPercentiles[0]) {
+      const checkpoint = sortedPercentiles.shift();
+      const domElements = [...domElementsBuffer];
+      if (!checkpoint) {
+        break;
+      }
+      matchesAnyCheckpoints = true;
+      checkpoints[checkpoint.toString()] = {
+        t: iEntry.time,
+        e: domElements
+      };
+    }
+    if (matchesAnyCheckpoints) {
+      domElementsBuffer.clear();
+    }
+    if (i % 500 === 0) {
+      await taskYield();
+    }
+  }
+  return checkpoints;
+}

package/dist/es2019/vc/vc-observer-new/metric-calculator/percentile-calc/types.js

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

package/dist/es2019/vc/vc-observer-new/metric-calculator/types.js

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

package/dist/es2019/vc/vc-observer-new/metric-calculator/utils/get-viewport-height.js

@@ -0,0 +1,9 @@
+export default function getViewportHeight(document = window.document) {
+  let documentHeight;
+  try {
+    documentHeight = document.documentElement.clientHeight || 0;
+  } catch (e) {
+    documentHeight = 0;
+  }
+  return Math.max(documentHeight, window.innerHeight || 0);
+}

package/dist/es2019/vc/vc-observer-new/metric-calculator/utils/get-viewport-width.js

@@ -0,0 +1,9 @@
+export default function getViewportWidth(document = window.document) {
+  let documentWidth;
+  try {
+    documentWidth = document.documentElement.clientWidth || 0;
+  } catch (e) {
+    documentWidth = 0;
+  }
+  return Math.max(documentWidth, window.innerWidth || 0);
+}

package/dist/es2019/vc/vc-observer-new/metric-calculator/utils/is-viewport-entry-data.js

@@ -0,0 +1,10 @@
+export default function isViewportEntryData(data) {
+  if (data) {
+    const hasElementName = typeof data.elementName === 'string';
+    const hasRect = typeof data.rect !== 'undefined';
+    if (hasRect && hasElementName) {
+      return true;
+    }
+  }
+  return false;
+}

package/dist/es2019/vc/vc-observer-new/metric-calculator/utils/task-yield.js

@@ -0,0 +1,17 @@
+// See https://developer.mozilla.org/en-US/docs/Web/API/Prioritized_Task_Scheduling_API
+export default async function taskYield() {
+  // This is using globalThis to allow the yield task to be used outside of a browser env
+  if ('scheduler' in globalThis &&
+  // @ts-ignore
+  'yield' in globalThis.scheduler) {
+    // @ts-ignore
+    await scheduler.yield();
+    return;
+  }
+  let resolve = () => {};
+  const p = new Promise(a => {
+    resolve = a;
+  });
+  setTimeout(resolve, 0);
+  await p;
+}

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

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

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

@@ -0,0 +1,168 @@
+import { isContainedWithinMediaWrapper } from '../../vc-observer/media-wrapper/vc-utils';
+import { createIntersectionObserver } from './intersection-observer';
+import createMutationObserver from './mutation-observer';
+import createPerformanceObserver from './performance-observer';
+function isElementVisible(element) {
+  if (!(element instanceof HTMLElement)) {
+    return true;
+  }
+  try {
+    const visible = element.checkVisibility({
+      // @ts-expect-error
+      visibilityProperty: true
+    });
+    return visible;
+  } catch (e) {
+    // there is no support for checkVisibility
+    return true;
+  }
+}
+function sameRectSize(a, b) {
+  if (!a || !b) {
+    return false;
+  }
+  return a.width === b.width && a.height === b.height;
+}
+function sameRectDimensions(a, b) {
+  if (!a || !b) {
+    return false;
+  }
+  return a.width === b.width && a.height === b.height && a.x === b.x && a.y === b.y;
+}
+export default class ViewportObserver {
+  constructor({
+    onChange
+  }) {
+    this.mapVisibleNodeRects = new WeakMap();
+    this.intersectionObserver = createIntersectionObserver({
+      onEntry: ({
+        target,
+        rect,
+        time,
+        type,
+        mutationData
+      }) => {
+        const visible = isElementVisible(target);
+        const lastElementRect = this.mapVisibleNodeRects.get(target);
+        this.mapVisibleNodeRects.set(target, rect);
+        onChange({
+          time,
+          type,
+          elementRef: new WeakRef(target),
+          visible,
+          rect,
+          previousRect: lastElementRect,
+          mutationData
+        });
+      }
+    });
+    this.mutationObserver = createMutationObserver({
+      onChildListMutation: ({
+        addedNodes,
+        removedNodes
+      }) => {
+        var _removedNodes$map;
+        const removedNodeRects = (_removedNodes$map = removedNodes === null || removedNodes === void 0 ? void 0 : removedNodes.map(n => this.mapVisibleNodeRects.get(n))) !== null && _removedNodes$map !== void 0 ? _removedNodes$map : [];
+        addedNodes.forEach(addedNode => {
+          var _this$intersectionObs3;
+          // for (const elem of addedNode.querySelectorAll('*')) {
+          // 	this.intersectionObserver?.watchAndTag(elem, 'mutation:child-element');
+          // }
+
+          const sameDeletedNode = removedNodes.find(n => n.isEqualNode(addedNode));
+          if (sameDeletedNode) {
+            var _this$intersectionObs;
+            (_this$intersectionObs = this.intersectionObserver) === null || _this$intersectionObs === void 0 ? void 0 : _this$intersectionObs.watchAndTag(addedNode, 'mutation:remount');
+            return;
+          }
+          if (isContainedWithinMediaWrapper(addedNode)) {
+            var _this$intersectionObs2;
+            (_this$intersectionObs2 = this.intersectionObserver) === null || _this$intersectionObs2 === void 0 ? void 0 : _this$intersectionObs2.watchAndTag(addedNode, 'mutation:media');
+            return;
+          }
+          (_this$intersectionObs3 = this.intersectionObserver) === null || _this$intersectionObs3 === void 0 ? void 0 : _this$intersectionObs3.watchAndTag(addedNode, ({
+            rect
+          }) => {
+            const wasDeleted = removedNodeRects.some(nr => sameRectDimensions(nr, rect));
+            if (wasDeleted) {
+              return 'mutation:element-replacement';
+            }
+            return 'mutation:element';
+          });
+        });
+      },
+      onAttributeMutation: ({
+        target,
+        attributeName
+      }) => {
+        var _this$intersectionObs4;
+        (_this$intersectionObs4 = this.intersectionObserver) === null || _this$intersectionObs4 === void 0 ? void 0 : _this$intersectionObs4.watchAndTag(target, ({
+          target,
+          rect
+        }) => {
+          if (isContainedWithinMediaWrapper(target)) {
+            return {
+              type: 'mutation:media',
+              mutationData: {
+                attributeName
+              }
+            };
+          }
+          const lastElementRect = this.mapVisibleNodeRects.get(target);
+          if (lastElementRect && sameRectSize(rect, lastElementRect)) {
+            return {
+              type: 'mutation:attribute:no-layout-shift',
+              mutationData: {
+                attributeName
+              }
+            };
+          }
+          return {
+            type: 'mutation:attribute',
+            mutationData: {
+              attributeName
+            }
+          };
+        });
+      }
+    });
+    this.performanceObserver = createPerformanceObserver({
+      onLayoutShift: ({
+        time,
+        changedRects
+      }) => {
+        for (const changedRect of changedRects) {
+          onChange({
+            time,
+            elementRef: new WeakRef(changedRect.node),
+            visible: true,
+            rect: changedRect.rect,
+            previousRect: changedRect.previousRect,
+            type: 'layout-shift'
+          });
+        }
+      }
+    });
+  }
+  start() {
+    var _this$mutationObserve, _this$performanceObse;
+    (_this$mutationObserve = this.mutationObserver) === null || _this$mutationObserve === void 0 ? void 0 : _this$mutationObserve.observe(document.body, {
+      attributeOldValue: true,
+      attributes: true,
+      childList: true,
+      subtree: true
+    });
+    (_this$performanceObse = this.performanceObserver) === null || _this$performanceObse === void 0 ? void 0 : _this$performanceObse.observe({
+      type: 'layout-shift',
+      buffered: true,
+      // @ts-ignore-error
+      durationThreshold: 30
+    });
+  }
+  stop() {
+    var _this$mutationObserve2, _this$intersectionObs5, _this$performanceObse2;
+    (_this$mutationObserve2 = this.mutationObserver) === null || _this$mutationObserve2 === void 0 ? void 0 : _this$mutationObserve2.disconnect();
+    (_this$intersectionObs5 = this.intersectionObserver) === null || _this$intersectionObs5 === void 0 ? void 0 : _this$intersectionObs5.disconnect();
+    (_this$performanceObse2 = this.performanceObserver) === null || _this$performanceObse2 === void 0 ? void 0 : _this$performanceObse2.disconnect();
+  }
+}