@atlaskit/react-ufo 3.13.17 → 3.13.19

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 3.13.19
+
+### Patch Changes
+
+- [#166738](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/166738)
+  [`0a681029d17a9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0a681029d17a9) -
+  AFO-3998 TTVC ignore RLL hydration
+
+## 3.13.18
+
+### Patch Changes
+
+- [#167243](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/167243)
+  [`63819af8c6eca`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/63819af8c6eca) -
+  emit TTVC debug data from UFO
+
 ## 3.13.17
 
 ### Patch Changes

package/dist/cjs/ssr/index.js

@@ -9,16 +9,22 @@ exports.getSSRDoneTime = getSSRDoneTime;
 exports.getSSRFeatureFlags = getSSRFeatureFlags;
 exports.getSSRSuccess = getSSRSuccess;
 exports.getSSRTimings = getSSRTimings;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+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 NESTED_METRIC_SEPARATOR = '/';
 function filterEntry(entry) {
   return !(!entry || (0, _typeof2.default)(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 && (0, _platformFeatureFlags.fg)('platform_ufo_ssr_size_field') ? {
+    size: Math.round(entry.size)
+  } : {});
 }
 var SSR_PREFIX = 'ssr';
 function mapKey(key) {

package/dist/cjs/vc/index.js

@@ -17,6 +17,7 @@ var _config = require("../config");
 var _noOpVcObserver = require("./no-op-vc-observer");
 var _vcObserver = require("./vc-observer");
 var _vcObserverNew = _interopRequireDefault(require("./vc-observer-new"));
+var _rllPlaceholders = require("./vc-observer/observers/rll-placeholders");
 var _process;
 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; }
@@ -90,6 +91,7 @@ var VCObserverWrapper = exports.VCObserverWrapper = /*#__PURE__*/function () {
         var _this$newVCObserver2;
         (_this$newVCObserver2 = this.newVCObserver) === null || _this$newVCObserver2 === void 0 || _this$newVCObserver2.stop();
       }
+      _rllPlaceholders.RLLPlaceholderHandlers.getInstance().reset();
     }
   }, {
     key: "getVCRawData",

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

@@ -1,9 +1,15 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getVCRevisionDebugDetails = getVCRevisionDebugDetails;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _toConsumableArray2 = _interopRequireDefault(require("@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; }
 function getVCRevisionDebugDetails(_ref) {
   var revision = _ref.revision,
     isClean = _ref.isClean,
@@ -11,17 +17,59 @@ 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 = (0, _toConsumableArray2.default)(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 {
@@ -31,11 +79,61 @@ 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 = (0, _slicedToArray2.default)(_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
   };
 }

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

@@ -13,6 +13,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _config = require("../../config");
 var _interactionMetrics = require("../../interaction-metrics");
 var _attachAbortListeners = require("./attachAbortListeners");
@@ -102,7 +103,7 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
     });
     (0, _defineProperty2.default)(this, "getVCResult", /*#__PURE__*/function () {
       var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref3) {
-        var start, stop, tti, prefix, ssr, vc, isEventAborted, experienceKey, interactionId, includeSSRRatio, startTime, fullPrefix, rawData, abortReason, abortReasonInfo, heatmap, heatmapNext, outOfBoundaryInfo, totalTime, componentsLog, viewport, devToolsEnabled, ratios, isTTVCv1Disabled, vcAbortedResultWithRevisions, ttvcV1Result, VC, VCBox, VCEntries, totalPainted, _componentsLog, vcNext, outOfBoundary, stopTime, ttvcV1DevToolInfo, ttvcV2DevToolInfo, _ufo_devtool_onVCRev2, _ref9, _ufo_devtool_onVCRev, _ref8, isVCClean, revisionsData, speedIndex, SSRRatio, SSRRatioNext, SSRRatioPayload, isTTVCv3Enabled;
+        var start, stop, tti, prefix, ssr, vc, isEventAborted, experienceKey, interactionId, includeSSRRatio, startTime, fullPrefix, rawData, abortReason, abortReasonInfo, heatmap, heatmapNext, outOfBoundaryInfo, totalTime, componentsLog, viewport, devToolsEnabled, ratios, isTTVCv1Disabled, vcAbortedResultWithRevisions, ttvcV1Result, VC, VCBox, VCEntries, totalPainted, _componentsLog, vcNext, outOfBoundary, stopTime, ttvcV1DevToolInfo, ttvcV2DevToolInfo, shouldCreateDebugDetails, v1RevisionDebugDetails, v2RevisionDebugDetails, _window$__ufo_devtool2, _window2, _window$__ufo_devtool, _window, _window$__on_ufo_vc_d2, _window4, _window$__on_ufo_vc_d, _window3, isVCClean, revisionsData, speedIndex, SSRRatio, SSRRatioNext, SSRRatioPayload, isTTVCv3Enabled;
         return _regenerator.default.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -271,30 +272,42 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
                       entries: isTTVCv1Disabled ? vcNext.VCEntries.rel : VCEntries.rel
                     }
                   }));
-
-                  // Add devtool callback for both v1 and v2
-                  if (typeof window.__ufo_devtool_onVCRevisionReady__ === 'function') {
-                    // Handle v1 if not disabled
-                    if (!isTTVCv1Disabled) {
-                      (_ufo_devtool_onVCRev = (_ref8 = window).__ufo_devtool_onVCRevisionReady__) === null || _ufo_devtool_onVCRev === void 0 || _ufo_devtool_onVCRev.call(_ref8, (0, _getVCRevisionDebugDetails.getVCRevisionDebugDetails)({
-                        revision: 'fy25.01',
-                        isClean: !abortReasonInfo,
-                        abortReason: abortReason.reason,
-                        VCEntries: VCEntries.rel,
-                        componentsLog: componentsLog,
-                        interactionId: interactionId
-                      }));
-                    }
-
-                    // Handle v2
-                    (_ufo_devtool_onVCRev2 = (_ref9 = window).__ufo_devtool_onVCRevisionReady__) === null || _ufo_devtool_onVCRev2 === void 0 || _ufo_devtool_onVCRev2.call(_ref9, (0, _getVCRevisionDebugDetails.getVCRevisionDebugDetails)({
+                }
+                if (!_this.isPostInteraction) {
+                  // Only create revision debug details if callbacks exist
+                  shouldCreateDebugDetails = typeof window.__ufo_devtool_onVCRevisionReady__ === 'function' || typeof window.__on_ufo_vc_debug_data_ready === 'function' && (0, _platformFeatureFlags.fg)('platform_ufo_emit_vc_debug_data');
+                  if (shouldCreateDebugDetails) {
+                    v1RevisionDebugDetails = (0, _getVCRevisionDebugDetails.getVCRevisionDebugDetails)({
+                      revision: 'fy25.01',
+                      isClean: !abortReasonInfo,
+                      abortReason: abortReason.reason,
+                      VCEntries: VCEntries.rel,
+                      componentsLog: componentsLog,
+                      interactionId: interactionId
+                    });
+                    v2RevisionDebugDetails = (0, _getVCRevisionDebugDetails.getVCRevisionDebugDetails)({
                       revision: 'fy25.02',
                       isClean: !abortReasonInfo,
                       abortReason: abortReason.reason,
                       VCEntries: vcNext.VCEntries.rel,
                       componentsLog: componentsLog,
                       interactionId: interactionId
-                    }));
+                    }); // Add devtool callback for both v1 and v2
+                    if (typeof window.__ufo_devtool_onVCRevisionReady__ === 'function') {
+                      // Handle v1 if not disabled
+                      if (!isTTVCv1Disabled) {
+                        (_window$__ufo_devtool = (_window = window).__ufo_devtool_onVCRevisionReady__) === null || _window$__ufo_devtool === void 0 || _window$__ufo_devtool.call(_window, v1RevisionDebugDetails);
+                      }
+
+                      // Handle v2
+                      (_window$__ufo_devtool2 = (_window2 = window).__ufo_devtool_onVCRevisionReady__) === null || _window$__ufo_devtool2 === void 0 || _window$__ufo_devtool2.call(_window2, v2RevisionDebugDetails);
+                    }
+                    if (typeof window.__on_ufo_vc_debug_data_ready === 'function' && (0, _platformFeatureFlags.fg)('platform_ufo_emit_vc_debug_data')) {
+                      if (!isTTVCv1Disabled) {
+                        (_window$__on_ufo_vc_d = (_window3 = window).__on_ufo_vc_debug_data_ready) === null || _window$__on_ufo_vc_d === void 0 || _window$__on_ufo_vc_d.call(_window3, v1RevisionDebugDetails);
+                      }
+                      (_window$__on_ufo_vc_d2 = (_window4 = window).__on_ufo_vc_debug_data_ready) === null || _window$__on_ufo_vc_d2 === void 0 || _window$__on_ufo_vc_d2.call(_window4, v2RevisionDebugDetails);
+                    }
                   }
                 }
               } catch (e) {
@@ -423,14 +436,14 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
       }
     });
     (0, _defineProperty2.default)(this, "attachAbortListeners", function () {
-      var _window;
+      var _window5;
       _this.detachAbortListeners();
       var unbinds = (0, _attachAbortListeners.attachAbortListeners)(window, _this.viewport, _this.abortReasonCallback);
-      if ((_window = window) !== null && _window !== void 0 && _window.__SSR_ABORT_LISTENERS__) {
-        Object.entries(window.__SSR_ABORT_LISTENERS__.aborts).forEach(function (_ref1) {
-          var _ref10 = (0, _slicedToArray2.default)(_ref1, 2),
-            key = _ref10[0],
-            time = _ref10[1];
+      if ((_window5 = window) !== null && _window5 !== void 0 && _window5.__SSR_ABORT_LISTENERS__) {
+        Object.entries(window.__SSR_ABORT_LISTENERS__.aborts).forEach(function (_ref9) {
+          var _ref0 = (0, _slicedToArray2.default)(_ref9, 2),
+            key = _ref0[0],
+            time = _ref0[1];
           if (time) {
             _this.abortReasonCallback(key, time);
           }
@@ -460,8 +473,8 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
   }
   return (0, _createClass2.default)(VCObserver, [{
     key: "start",
-    value: function start(_ref11) {
-      var startTime = _ref11.startTime;
+    value: function start(_ref1) {
+      var startTime = _ref1.startTime;
       this.active = true;
       if (this.observers.isBrowserSupported()) {
         this.setViewportSize();
@@ -483,12 +496,12 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
   }, {
     key: "getIgnoredElements",
     value: function getIgnoredElements(componentsLog) {
-      return Object.values(componentsLog).flat().filter(function (_ref12) {
-        var ignoreReason = _ref12.ignoreReason;
+      return Object.values(componentsLog).flat().filter(function (_ref10) {
+        var ignoreReason = _ref10.ignoreReason;
         return Boolean(ignoreReason);
-      }).map(function (_ref13) {
-        var targetName = _ref13.targetName,
-          ignoreReason = _ref13.ignoreReason;
+      }).map(function (_ref11) {
+        var targetName = _ref11.targetName,
+          ignoreReason = _ref11.ignoreReason;
         return {
           targetName: targetName,
           ignoreReason: ignoreReason
@@ -618,13 +631,13 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
     }
   }, {
     key: "calculateVC",
-    value: function calculateVC(_ref14) {
-      var heatmap = _ref14.heatmap,
-        _ref14$ssr = _ref14.ssr,
-        ssr = _ref14$ssr === void 0 ? UNUSED_SECTOR : _ref14$ssr,
-        componentsLog = _ref14.componentsLog,
-        viewport = _ref14.viewport,
-        fixSSRAttribution = _ref14.fixSSRAttribution;
+    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,
+        fixSSRAttribution = _ref12.fixSSRAttribution;
       var lastUpdate = {};
       var totalPainted = 0;
       var ssrTime = fixSSRAttribution ? Math.floor(ssr) : ssr;
@@ -691,11 +704,11 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
         });
         return VCRatio;
       }, 0);
-      var VCEntries = entries.reduce(function (acc, _ref15, i) {
+      var VCEntries = entries.reduce(function (acc, _ref13, i) {
         var _acc$abs, _componentsLog$timest, _acc$rel$vc, _acc$rel;
-        var _ref16 = (0, _slicedToArray2.default)(_ref15, 2),
-          timestamp = _ref16[0],
-          entryPainted = _ref16[1];
+        var _ref14 = (0, _slicedToArray2.default)(_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 = (0, _toConsumableArray2.default)(new Set((_componentsLog$timest = componentsLog[timestamp]) === null || _componentsLog$timest === void 0 ? void 0 : _componentsLog$timest.filter(function (v) {

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

@@ -10,6 +10,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _vcUtils = require("../media-wrapper/vc-utils");
 var _isNonVisualStyleMutation = _interopRequireDefault(require("./non-visual-styles/is-non-visual-style-mutation"));
+var _rllPlaceholders = require("./rll-placeholders");
 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; }
@@ -279,6 +280,9 @@ var Observers = exports.Observers = /*#__PURE__*/function () {
             if (!isElementVisible(target)) {
               data.ignoreReason = 'not-visible';
             }
+            if (_rllPlaceholders.RLLPlaceholderHandlers.getInstance().isRLLPlaceholderHydration(ir)) {
+              data.ignoreReason = 'rll-placeholder';
+            }
             _this3.callbacks.forEach(function (callback) {
               var elementName;
               try {

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

@@ -0,0 +1,208 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RLLPlaceholderHandlers = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+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 GLOBAL_RLL_HANDLERS_KEY = '__REACT_UFO_RLL_PLACEHOLDER_HANDLERS__';
+var RLLPlaceholderHandlers = exports.RLLPlaceholderHandlers = /*#__PURE__*/function () {
+  function RLLPlaceholderHandlers() {
+    (0, _classCallCheck2.default)(this, RLLPlaceholderHandlers);
+    (0, _defineProperty2.default)(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
+   */
+  return (0, _createClass2.default)(RLLPlaceholderHandlers, [{
+    key: "reset",
+    value: function 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.
+     */
+  }, {
+    key: "collectRLLPlaceholders",
+    value: function collectRLLPlaceholders() {
+      if (typeof window === 'undefined' || typeof document === 'undefined' || typeof window.document === 'undefined') {
+        return;
+      }
+      if (!(0, _platformFeatureFlags.fg)('platform_ufo_rll_placeholder_ignore')) {
+        return;
+      }
+      var beginElements = document.querySelectorAll('input[data-lazy-begin]');
+      var beginCount = beginElements.length;
+      if (beginCount === 0) {
+        return;
+      }
+
+      // Performance optimization: pre-allocate array with estimated size
+      var allElements = [];
+
+      // Performance optimization: use traditional for loop instead of forEach
+      for (var i = 0; i < beginCount; i++) {
+        var beginEl = beginElements[i];
+        var id = beginEl.getAttribute('data-lazy-begin');
+        if (!id) {
+          continue;
+        }
+        var elements = this.refElements(beginEl, id);
+        if (elements.length > 0) {
+          allElements.push.apply(allElements, (0, _toConsumableArray2.default)(elements));
+        }
+      }
+
+      // Second pass: batch all getBoundingClientRect calls to minimize reflow cycles
+      var allElementsLength = allElements.length;
+      if (allElementsLength > 0) {
+        // Performance optimization: pre-allocate array with exact size
+        var intersectingRects = [];
+        var windowWidth = window.innerWidth;
+        var windowHeight = window.innerHeight;
+        for (var _i = 0; _i < allElementsLength; _i++) {
+          var rect = allElements[_i].getBoundingClientRect();
+
+          // Performance optimization: inline intersection calculation to avoid function call overhead
+          var left = Math.max(rect.left, 0);
+          var top = Math.max(rect.top, 0);
+          var right = Math.min(rect.right, windowWidth);
+          var 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
+     */
+  }, {
+    key: "refElements",
+    value: function refElements(fromEl, id) {
+      var result = [];
+      var 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
+     */
+  }, {
+    key: "getPlaceholders",
+    value: function 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
+     */
+  }, {
+    key: "isRLLPlaceholderHydration",
+    value: function isRLLPlaceholderHydration(intersectingRect) {
+      var placeholdersLength = this.placeholders.length;
+      if (placeholdersLength === 0) {
+        return false;
+      }
+
+      // Performance optimization: cache array length and use traditional for loop
+      for (var i = 0; i < placeholdersLength; i++) {
+        var 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
+     */
+  }, {
+    key: "areRectsEqual",
+    value: function 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
+      var leftDiff = rect1.left - rect2.left;
+      if (leftDiff > 1 || leftDiff < -1) {
+        return false;
+      }
+      var rightDiff = rect1.right - rect2.right;
+      if (rightDiff > 1 || rightDiff < -1) {
+        return false;
+      }
+      var topDiff = rect1.top - rect2.top;
+      if (topDiff > 1 || topDiff < -1) {
+        return false;
+      }
+      var bottomDiff = rect1.bottom - rect2.bottom;
+      if (bottomDiff > 1 || bottomDiff < -1) {
+        return false;
+      }
+      return true;
+    }
+  }], [{
+    key: "getInstance",
+    value: function 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();
+    }
+  }]);
+}();