@atlaskit/react-ufo 3.13.17 → 3.13.19

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

@@ -0,0 +1,182 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { fg } from '@atlaskit/platform-feature-flags';
+const GLOBAL_RLL_HANDLERS_KEY = '__REACT_UFO_RLL_PLACEHOLDER_HANDLERS__';
+export class RLLPlaceholderHandlers {
+  constructor() {
+    _defineProperty(this, "placeholders", []);
+    if (typeof window !== 'undefined' && typeof document !== 'undefined' && typeof window.document !== 'undefined') {
+      this.collectRLLPlaceholders();
+    }
+  }
+
+  /**
+   * Gets the global singleton instance of RLLPlaceholderHandlers.
+   * Creates the instance if it doesn't exist and stores it in globalThis.
+   * @returns The singleton instance of RLLPlaceholderHandlers
+   */
+  static getInstance() {
+    if (typeof globalThis !== 'undefined') {
+      if (!globalThis[GLOBAL_RLL_HANDLERS_KEY]) {
+        globalThis[GLOBAL_RLL_HANDLERS_KEY] = new RLLPlaceholderHandlers();
+      }
+      return globalThis[GLOBAL_RLL_HANDLERS_KEY];
+    }
+
+    // Fallback for environments without globalThis (should be rare)
+    return new RLLPlaceholderHandlers();
+  }
+  reset() {
+    this.placeholders = [];
+  }
+
+  /**
+   * Collects all React Loosely Lazy (RLL) placeholders from the DOM and caches their viewport intersecting rectangles.
+   * RLL placeholders are marked with data-lazy-begin and data-lazy-end attributes on hidden input elements.
+   * Performance optimized to batch getBoundingClientRect calls and minimize layout thrashing.
+   * Only stores the intersecting portions of rectangles that are currently visible in the viewport.
+   */
+  collectRLLPlaceholders() {
+    if (typeof window === 'undefined' || typeof document === 'undefined' || typeof window.document === 'undefined') {
+      return;
+    }
+    if (!fg('platform_ufo_rll_placeholder_ignore')) {
+      return;
+    }
+    const beginElements = document.querySelectorAll('input[data-lazy-begin]');
+    const beginCount = beginElements.length;
+    if (beginCount === 0) {
+      return;
+    }
+
+    // Performance optimization: pre-allocate array with estimated size
+    const allElements = [];
+
+    // Performance optimization: use traditional for loop instead of forEach
+    for (let i = 0; i < beginCount; i++) {
+      const beginEl = beginElements[i];
+      const id = beginEl.getAttribute('data-lazy-begin');
+      if (!id) {
+        continue;
+      }
+      const elements = this.refElements(beginEl, id);
+      if (elements.length > 0) {
+        allElements.push(...elements);
+      }
+    }
+
+    // Second pass: batch all getBoundingClientRect calls to minimize reflow cycles
+    const allElementsLength = allElements.length;
+    if (allElementsLength > 0) {
+      // Performance optimization: pre-allocate array with exact size
+      const intersectingRects = [];
+      const windowWidth = window.innerWidth;
+      const windowHeight = window.innerHeight;
+      for (let i = 0; i < allElementsLength; i++) {
+        const rect = allElements[i].getBoundingClientRect();
+
+        // Performance optimization: inline intersection calculation to avoid function call overhead
+        const left = Math.max(rect.left, 0);
+        const top = Math.max(rect.top, 0);
+        const right = Math.min(rect.right, windowWidth);
+        const bottom = Math.min(rect.bottom, windowHeight);
+
+        // Check if there's a valid intersection with non-zero width and height
+        if (left < right && top < bottom) {
+          intersectingRects.push(new DOMRect(left, top, right - left, bottom - top));
+        }
+      }
+      this.placeholders = intersectingRects;
+    }
+  }
+
+  /**
+   * Traverses DOM siblings to find all elements between RLL begin and end markers.
+   * Based on the refElements pattern from react-loosely-lazy's platform/packages/async/react-loosely-lazy/src/collect/hydrate.ts
+   * Performance optimized to minimize iterations and early exit conditions.
+   *
+   * @param fromEl - The input element with data-lazy-begin attribute
+   * @param id - The placeholder ID to match against data-lazy-end
+   * @returns Array of DOM elements between the begin/end markers
+   */
+  refElements(fromEl, id) {
+    const result = [];
+    let el = fromEl.nextSibling;
+
+    // Performance optimization: use while loop instead of recursive calls
+    while (el) {
+      var _el$dataset;
+      if (((_el$dataset = el.dataset) === null || _el$dataset === void 0 ? void 0 : _el$dataset.lazyEnd) === id) {
+        break;
+      }
+      if (el.nodeType === Node.ELEMENT_NODE) {
+        result.push(el);
+      }
+      el = el.nextSibling;
+    }
+    return result;
+  }
+
+  /**
+   * Returns the cached intersecting viewport rectangles for all RLL placeholder elements.
+   * @returns Array of DOMRect objects representing the intersecting portions of placeholders within the viewport
+   */
+  getPlaceholders() {
+    return this.placeholders;
+  }
+
+  /**
+   * Checks if the given intersecting rectangle matches any of the cached RLL placeholder intersecting rectangles.
+   * This is designed to be called from IntersectionObserver with the intersectionRect.
+   * Performance optimized with early exits and minimal calculations.
+   * @param intersectingRect - The intersecting rectangle from IntersectionObserver
+   * @returns true if the intersecting rectangle matches a cached placeholder rectangle and hasn't exceeded match limit, false otherwise
+   */
+  isRLLPlaceholderHydration(intersectingRect) {
+    const placeholdersLength = this.placeholders.length;
+    if (placeholdersLength === 0) {
+      return false;
+    }
+
+    // Performance optimization: cache array length and use traditional for loop
+    for (let i = 0; i < placeholdersLength; i++) {
+      const placeholderRect = this.placeholders[i];
+      if (this.areRectsEqual(intersectingRect, placeholderRect)) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  /**
+   * Compares two DOMRect objects for equality with ±1 pixel tolerance.
+   * Performance optimized to minimize calculations and early exit on major differences.
+   * @param rect1 - First rectangle to compare
+   * @param rect2 - Second rectangle to compare
+   * @returns true if rectangles are within 1 pixel tolerance for all properties
+   */
+  areRectsEqual(rect1, rect2) {
+    // Early exit for exact matches (most common case)
+    if (rect1.left === rect2.left && rect1.top === rect2.top && rect1.right === rect2.right && rect1.bottom === rect2.bottom) {
+      return true;
+    }
+
+    // Performance optimization: check largest differences first for early exit
+    const leftDiff = rect1.left - rect2.left;
+    if (leftDiff > 1 || leftDiff < -1) {
+      return false;
+    }
+    const rightDiff = rect1.right - rect2.right;
+    if (rightDiff > 1 || rightDiff < -1) {
+      return false;
+    }
+    const topDiff = rect1.top - rect2.top;
+    if (topDiff > 1 || topDiff < -1) {
+      return false;
+    }
+    const bottomDiff = rect1.bottom - rect2.bottom;
+    if (bottomDiff > 1 || bottomDiff < -1) {
+      return false;
+    }
+    return true;
+  }
+}

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

@@ -2,6 +2,9 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { calculateTTVCPercentilesWithDebugInfo } from './percentile-calc';
 import getViewportHeight from './utils/get-viewport-height';
 import getViewportWidth from './utils/get-viewport-width';
+
+// Create comprehensive debug details including ignored entries
+
 export default class AbstractVCCalculatorBase {
   constructor(revisionNo) {
     this.revisionNo = revisionNo;
@@ -36,7 +39,8 @@ export default class AbstractVCCalculatorBase {
     }
     return ratios;
   }
-  async calculateWithDebugInfo(filteredEntries, startTime, stopTime, isPostInteraction, isVCClean, interactionId, dirtyReason) {
+  async calculateWithDebugInfo(filteredEntries, startTime, stopTime, isPostInteraction, isVCClean, interactionId, dirtyReason, allEntries) {
+    var _window, _window2, _window3, _window5;
     const percentiles = [25, 50, 75, 80, 85, 90, 95, 98, 99];
     const viewportEntries = this.filterViewportEntries(filteredEntries);
     const vcLogs = await calculateTTVCPercentilesWithDebugInfo({
@@ -99,24 +103,111 @@ export default class AbstractVCCalculatorBase {
         previousResult = vcDetails[`${percentile}`];
       }
     }
+    let enhancedVcLogs = vcLogs ? vcLogs.map(log => ({
+      ...log,
+      viewportPercentage: log.viewportPercentage
+    })) : [];
+
+    // Only calculate enhanced debug details if devtool callbacks exist
+    const shouldCalculateDebugDetails = !isPostInteraction && (typeof ((_window = window) === null || _window === void 0 ? void 0 : _window.__ufo_devtool_onVCRevisionReady__) === 'function' || typeof ((_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.__on_ufo_vc_debug_data_ready) === 'function' && fg('platform_ufo_emit_vc_debug_data'));
+    if (shouldCalculateDebugDetails && allEntries && vcLogs) {
+      // Pre-sort vcLogs by time for efficient lookups
+      const sortedVcLogs = [...vcLogs].sort((a, b) => a.time - b.time);
+
+      // Pre-calculate max viewport percentage up to each time for efficient lookups
+      const maxViewportPercentageAtTime = new Map();
+      let maxSoFar = 0;
+      for (const log of sortedVcLogs) {
+        if (log.viewportPercentage !== null) {
+          maxSoFar = Math.max(maxSoFar, log.viewportPercentage);
+          maxViewportPercentageAtTime.set(log.time, maxSoFar);
+        }
+      }
+
+      // Helper function to find the biggest previous viewport percentage
+      const getBiggestPreviousViewportPercentage = targetTime => {
+        // Binary search for the largest time <= targetTime
+        let left = 0;
+        let right = sortedVcLogs.length - 1;
+        let result = -1;
+        while (left <= right) {
+          const mid = Math.floor((left + right) / 2);
+          if (sortedVcLogs[mid].time <= targetTime) {
+            result = mid;
+            left = mid + 1;
+          } else {
+            right = mid - 1;
+          }
+        }
+        return result >= 0 ? maxViewportPercentageAtTime.get(sortedVcLogs[result].time) || null : null;
+      };
+
+      // Group ignored entries by timestamp
+      const ignoredEntriesByTime = new Map();
+      for (const entry of allEntries) {
+        if ('rect' in entry.data && !this.isEntryIncluded(entry)) {
+          var _ignoredEntriesByTime;
+          const viewportData = entry.data;
+          const timestamp = Math.round(entry.time);
+          if (!ignoredEntriesByTime.has(timestamp)) {
+            ignoredEntriesByTime.set(timestamp, []);
+          }
+          (_ignoredEntriesByTime = ignoredEntriesByTime.get(timestamp)) === null || _ignoredEntriesByTime === void 0 ? void 0 : _ignoredEntriesByTime.push({
+            ...viewportData,
+            ignoreReason: viewportData.visible ? viewportData.type : 'not-visible'
+          });
+        }
+      }
+
+      // Add ignored entries to vcLogs
+      const additionalVcLogs = [];
+      for (const [timestamp, ignoredEntries] of ignoredEntriesByTime) {
+        if (ignoredEntries.length > 0) {
+          const viewportPercentage = getBiggestPreviousViewportPercentage(timestamp);
+          additionalVcLogs.push({
+            time: timestamp,
+            viewportPercentage,
+            entries: ignoredEntries
+          });
+        }
+      }
+
+      // Combine and sort all vcLogs
+      enhancedVcLogs = [...enhancedVcLogs, ...additionalVcLogs].sort((a, b) => a.time - b.time);
+    }
+
+    // Only create debug details if callbacks exist
+    let v3RevisionDebugDetails = null;
+    if (shouldCalculateDebugDetails) {
+      v3RevisionDebugDetails = {
+        revision: this.revisionNo,
+        isClean: isVCClean,
+        abortReason: dirtyReason,
+        vcLogs: enhancedVcLogs,
+        interactionId
+      };
+    }
 
     // Handle devtool callback
-    if (!isPostInteraction && typeof window !== 'undefined' && typeof window.__ufo_devtool_onVCRevisionReady__ === 'function') {
+    if (v3RevisionDebugDetails && typeof ((_window3 = window) === null || _window3 === void 0 ? void 0 : _window3.__ufo_devtool_onVCRevisionReady__) === 'function') {
       try {
-        var _ufo_devtool_onVCRev, _ref;
-        (_ufo_devtool_onVCRev = (_ref = window).__ufo_devtool_onVCRevisionReady__) === null || _ufo_devtool_onVCRev === void 0 ? void 0 : _ufo_devtool_onVCRev.call(_ref, {
-          revision: this.revisionNo,
-          isClean: isVCClean,
-          abortReason: dirtyReason,
-          vcLogs,
-          interactionId
-        });
+        var _window4, _window4$__ufo_devtoo;
+        (_window4 = window) === null || _window4 === void 0 ? void 0 : (_window4$__ufo_devtoo = _window4.__ufo_devtool_onVCRevisionReady__) === null || _window4$__ufo_devtoo === void 0 ? void 0 : _window4$__ufo_devtoo.call(_window4, v3RevisionDebugDetails);
       } catch (e) {
         // if any error communicating with devtool, we don't want to break the app
         // eslint-disable-next-line no-console
         console.error('Error in onVCRevisionReady', e);
       }
     }
+    if (v3RevisionDebugDetails && typeof ((_window5 = window) === null || _window5 === void 0 ? void 0 : _window5.__on_ufo_vc_debug_data_ready) === 'function' && fg('platform_ufo_emit_vc_debug_data')) {
+      try {
+        var _window6, _window6$__on_ufo_vc_;
+        (_window6 = window) === null || _window6 === void 0 ? void 0 : (_window6$__on_ufo_vc_ = _window6.__on_ufo_vc_debug_data_ready) === null || _window6$__on_ufo_vc_ === void 0 ? void 0 : _window6$__on_ufo_vc_.call(_window6, v3RevisionDebugDetails);
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error('Error in onVCRevisionReady', e);
+      }
+    }
     return vcDetails;
   }
   async calculate({
@@ -143,7 +234,7 @@ export default class AbstractVCCalculatorBase {
         abortReason: dirtyReason
       };
     }
-    const vcDetails = await this.calculateWithDebugInfo(filteredEntries, startTime, stopTime, isPostInteraction, isVCClean, interactionId, dirtyReason);
+    const vcDetails = await this.calculateWithDebugInfo(filteredEntries, startTime, stopTime, isPostInteraction, isVCClean, interactionId, dirtyReason, orderedEntries);
     const result = {
       revision: this.revisionNo,
       clean: true,

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

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { isContainedWithinMediaWrapper } from '../../vc-observer/media-wrapper/vc-utils';
 import isNonVisualStyleMutation from '../../vc-observer/observers/non-visual-styles/is-non-visual-style-mutation';
+import { RLLPlaceholderHandlers } from '../../vc-observer/observers/rll-placeholders';
 import { createIntersectionObserver } from './intersection-observer';
 import createMutationObserver from './mutation-observer';
 import createPerformanceObserver from './performance-observer';
@@ -36,6 +37,10 @@ function sameRectDimensions(a, b) {
 const createElementMutationsWatcher = removedNodeRects => ({
   rect
 }) => {
+  const isRLLPlaceholder = RLLPlaceholderHandlers.getInstance().isRLLPlaceholderHydration(rect);
+  if (isRLLPlaceholder) {
+    return 'mutation:rll-placeholder';
+  }
   const wasDeleted = removedNodeRects.some(nr => sameRectDimensions(nr, rect));
   if (wasDeleted) {
     return 'mutation:element-replacement';
@@ -141,6 +146,17 @@ export default class ViewportObserver {
             }
           };
         }
+        const isRLLPlaceholder = RLLPlaceholderHandlers.getInstance().isRLLPlaceholderHydration(rect);
+        if (isRLLPlaceholder) {
+          return {
+            type: 'mutation:rll-placeholder',
+            mutationData: {
+              attributeName,
+              oldValue,
+              newValue
+            }
+          };
+        }
         const lastElementRect = this.mapVisibleNodeRects.get(target);
         if (lastElementRect && sameRectSize(rect, lastElementRect)) {
           return {

package/dist/esm/ssr/index.js

@@ -1,13 +1,19 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _typeof from "@babel/runtime/helpers/typeof";
+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 { fg } from '@atlaskit/platform-feature-flags';
 var NESTED_METRIC_SEPARATOR = '/';
 function filterEntry(entry) {
   return !(!entry || _typeof(entry) !== 'object' || entry.startTime < 0 || entry.duration < 0);
 }
 function mapEntry(entry) {
-  return {
+  return _objectSpread({
     startTime: Math.round(entry.startTime),
     duration: Math.round(entry.duration)
-  };
+  }, entry.size && fg('platform_ufo_ssr_size_field') ? {
+    size: Math.round(entry.size)
+  } : {});
 }
 var SSR_PREFIX = 'ssr';
 function mapKey(key) {

package/dist/esm/vc/index.js

@@ -11,6 +11,7 @@ import { isVCRevisionEnabled } from '../config';
 import { VCObserverNOOP } from './no-op-vc-observer';
 import { VCObserver } from './vc-observer';
 import VCObserverNew from './vc-observer-new';
+import { RLLPlaceholderHandlers } from './vc-observer/observers/rll-placeholders';
 export var VCObserverWrapper = /*#__PURE__*/function () {
   function VCObserverWrapper() {
     var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -81,6 +82,7 @@ export var VCObserverWrapper = /*#__PURE__*/function () {
         var _this$newVCObserver2;
         (_this$newVCObserver2 = this.newVCObserver) === null || _this$newVCObserver2 === void 0 || _this$newVCObserver2.stop();
       }
+      RLLPlaceholderHandlers.getInstance().reset();
     }
   }, {
     key: "getVCRawData",

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

@@ -1,3 +1,8 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+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 function getVCRevisionDebugDetails(_ref) {
   var revision = _ref.revision,
     isClean = _ref.isClean,
@@ -5,17 +10,59 @@ export function getVCRevisionDebugDetails(_ref) {
     VCEntries = _ref.VCEntries,
     componentsLog = _ref.componentsLog,
     interactionId = _ref.interactionId;
-  return {
-    revision: revision,
-    isClean: isClean,
-    abortReason: abortReason,
-    vcLogs: VCEntries.map(function (entry) {
-      return {
+  // Pre-sort VCEntries by time for efficient lookups
+  var sortedVCEntries = _toConsumableArray(VCEntries).sort(function (a, b) {
+    return a.time - b.time;
+  });
+
+  // Pre-calculate max viewport percentage up to each time for efficient lookups
+  var maxViewportPercentageAtTime = new Map();
+  var maxSoFar = 0;
+  var _iterator = _createForOfIteratorHelper(sortedVCEntries),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var entry = _step.value;
+      maxSoFar = Math.max(maxSoFar, entry.vc);
+      maxViewportPercentageAtTime.set(entry.time, maxSoFar);
+    }
+
+    // Helper function to find the biggest previous viewport percentage
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  var getBiggestPreviousViewportPercentage = function getBiggestPreviousViewportPercentage(targetTime) {
+    // Binary search for the largest time <= targetTime
+    var left = 0;
+    var right = sortedVCEntries.length - 1;
+    var result = -1;
+    while (left <= right) {
+      var mid = Math.floor((left + right) / 2);
+      if (sortedVCEntries[mid].time <= targetTime) {
+        result = mid;
+        left = mid + 1;
+      } else {
+        right = mid - 1;
+      }
+    }
+    return result >= 0 ? maxViewportPercentageAtTime.get(sortedVCEntries[result].time) || null : null;
+  };
+  var allVcLogs = [];
+
+  // Add regular VC entries
+  var _iterator2 = _createForOfIteratorHelper(VCEntries),
+    _step2;
+  try {
+    var _loop = function _loop() {
+      var entry = _step2.value;
+      var timeLogEntries = componentsLog[entry.time];
+      allVcLogs.push({
         time: entry.time,
         viewportPercentage: entry.vc,
         entries: entry.elements.map(function (element) {
-          var _componentsLog$entry$;
-          var logEntry = (_componentsLog$entry$ = componentsLog[entry.time]) === null || _componentsLog$entry$ === void 0 ? void 0 : _componentsLog$entry$.find(function (log) {
+          var logEntry = timeLogEntries === null || timeLogEntries === void 0 ? void 0 : timeLogEntries.find(function (log) {
             return log.targetName === element;
           });
           return {
@@ -25,11 +72,61 @@ export function getVCRevisionDebugDetails(_ref) {
             visible: true,
             attributeName: logEntry === null || logEntry === void 0 ? void 0 : logEntry.attributeName,
             oldValue: logEntry === null || logEntry === void 0 ? void 0 : logEntry.oldValue,
-            newValue: logEntry === null || logEntry === void 0 ? void 0 : logEntry.newValue
+            newValue: logEntry === null || logEntry === void 0 ? void 0 : logEntry.newValue,
+            ignoreReason: logEntry === null || logEntry === void 0 ? void 0 : logEntry.ignoreReason
           };
         })
-      };
-    }),
+      });
+    };
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      _loop();
+    }
+
+    // Add ignored elements - only process timestamps that have ignored elements
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  for (var _i = 0, _Object$entries = Object.entries(componentsLog); _i < _Object$entries.length; _i++) {
+    var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
+      timestamp = _Object$entries$_i[0],
+      timeLogEntries = _Object$entries$_i[1];
+    var ignoredElements = timeLogEntries.filter(function (log) {
+      return log.ignoreReason;
+    });
+    if (ignoredElements.length === 0) {
+      continue;
+    }
+    var time = Number(timestamp);
+    var viewportPercentage = getBiggestPreviousViewportPercentage(time);
+    allVcLogs.push({
+      time: time,
+      viewportPercentage: viewportPercentage,
+      entries: ignoredElements.map(function (logEntry) {
+        return {
+          elementName: logEntry.targetName,
+          type: logEntry.type,
+          rect: logEntry.intersectionRect,
+          visible: false,
+          attributeName: logEntry.attributeName,
+          oldValue: logEntry.oldValue,
+          newValue: logEntry.newValue,
+          ignoreReason: logEntry.ignoreReason
+        };
+      })
+    });
+  }
+
+  // Sort once at the end
+  allVcLogs.sort(function (a, b) {
+    return a.time - b.time;
+  });
+  return {
+    revision: revision,
+    isClean: isClean,
+    abortReason: abortReason,
+    vcLogs: allVcLogs,
     interactionId: interactionId
   };
 }