@atlaskit/react-ufo 4.15.4 → 4.15.5

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 4.15.5
+
+### Patch Changes
+
+- [`80ea06acdd0ac`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/80ea06acdd0ac) -
+  Add entrypoints framework detection for TTVC observer
+- [`c4c9659ad7ccd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c4c9659ad7ccd) -
+  refactor display:contents element detection
+
 ## 4.15.4
 
 ### Patch Changes

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

@@ -273,6 +273,13 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
         }
       });
     }
+  }, {
+    key: "validateReactComponentMatchToPlaceholderV4",
+    value: function validateReactComponentMatchToPlaceholderV4(el) {
+      el = this.findNearestPlaceholderContainerIfIgnored(el);
+      var id = this.getPlaceholderReplacementId(el);
+      return this.staticPlaceholders.has(id);
+    }
   }, {
     key: "hasSameSizePosition",
     value: function hasSameSizePosition(rect, boundingClientRect) {

package/dist/cjs/vc/vc-observer-new/metric-calculator/vcnext/index.js

@@ -23,7 +23,10 @@ var getConsideredEntryTypes = function getConsideredEntryTypes() {
   if ((0, _platformFeatureFlags.fg)('platform_ufo_remove_ssr_placeholder_in_ttvc_v4')) {
     consideredEntryTypes.push('mutation:ssr-placeholder');
   }
-  return ['mutation:display-contents-children-element'];
+  if ((0, _platformFeatureFlags.fg)('platform_ufo_detect_zero_dimension_rectangles')) {
+    consideredEntryTypes.push('mutation:display-contents-children-attribute');
+  }
+  return consideredEntryTypes;
 };
 var getExcludedEntryTypes = function getExcludedEntryTypes() {
   var excludedEntryTypes = ['layout-shift:same-rect'];

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

@@ -19,7 +19,7 @@ var _rllPlaceholders = require("../../vc-observer/observers/rll-placeholders");
 var _intersectionObserver = require("./intersection-observer");
 var _mutationObserver = _interopRequireDefault(require("./mutation-observer"));
 var _performanceObserver = _interopRequireDefault(require("./performance-observer"));
-var _checkWithinComponent2 = _interopRequireWildcard(require("./utils/check-within-component"));
+var _checkWithinComponent3 = _interopRequireWildcard(require("./utils/check-within-component"));
 var _getMutatedElements = require("./utils/get-mutated-elements");
 var _isElementVisible = require("./utils/is-element-visible");
 var _isInVcIgnoreIfNoLayoutShiftMarker = _interopRequireDefault(require("./utils/is-in-vc-ignore-if-no-layout-shift-marker"));
@@ -50,21 +50,85 @@ var createElementMutationsWatcher = function createElementMutationsWatcher(remov
     return 'mutation:element';
   };
 };
+var createElementMutationsWatcherV4 = function createElementMutationsWatcherV4(removedNodeRects, isWithinThirdPartySegment, hasSameDeletedNode, timestamp, isTargetReactRoot, getSSRState, getSSRPlaceholderHandler) {
+  return function (_ref2) {
+    var target = _ref2.target,
+      rect = _ref2.rect;
+    if (getSSRState) {
+      var ssrState = getSSRState();
+      var SSRStateEnum = {
+        normal: 1,
+        waitingForFirstRender: 2,
+        ignoring: 3
+      };
+      if (ssrState.state === SSRStateEnum.waitingForFirstRender && timestamp > ssrState.renderStart && isTargetReactRoot) {
+        ssrState.state = SSRStateEnum.ignoring;
+        if (ssrState.renderStop === -1) {
+          // arbitrary 500ms DOM update window
+          ssrState.renderStop = timestamp + 500;
+        }
+        return 'ssr-hydration';
+      }
+      if (ssrState.state === SSRStateEnum.ignoring && timestamp > ssrState.renderStart && isTargetReactRoot) {
+        if (timestamp <= ssrState.renderStop) {
+          return 'ssr-hydration';
+        } else {
+          ssrState.state = SSRStateEnum.normal;
+        }
+      }
+    }
+    if (getSSRPlaceholderHandler) {
+      var ssrPlaceholderHandler = getSSRPlaceholderHandler();
+      if (ssrPlaceholderHandler) {
+        if ((ssrPlaceholderHandler.isPlaceholder(target) || ssrPlaceholderHandler.isPlaceholderIgnored(target)) && ssrPlaceholderHandler.checkIfExistedAndSizeMatchingV3(target)) {
+          return 'mutation:ssr-placeholder';
+        }
+        if ((ssrPlaceholderHandler.isPlaceholderReplacement(target) || ssrPlaceholderHandler.isPlaceholderIgnored(target)) && ssrPlaceholderHandler.validateReactComponentMatchToPlaceholderV4(target)) {
+          return 'mutation:ssr-placeholder';
+        }
+      }
+    }
+    if (hasSameDeletedNode && (0, _isInVcIgnoreIfNoLayoutShiftMarker.default)(target)) {
+      return 'mutation:remount';
+    }
+    if ((0, _vcUtils.isContainedWithinMediaWrapper)(target)) {
+      return 'mutation:media';
+    }
+    if (isWithinThirdPartySegment) {
+      return 'mutation:third-party-element';
+    }
+    var isInIgnoreLsMarker = (0, _isInVcIgnoreIfNoLayoutShiftMarker.default)(target);
+    if (!isInIgnoreLsMarker) {
+      return 'mutation:element';
+    }
+    var isRLLPlaceholder = _rllPlaceholders.RLLPlaceholderHandlers.getInstance().isRLLPlaceholderHydration(rect);
+    if (isRLLPlaceholder && isInIgnoreLsMarker) {
+      return 'mutation:rll-placeholder';
+    }
+    var wasDeleted = removedNodeRects.some(function (nr) {
+      return (0, _isSameRectDimensions.isSameRectDimensions)(nr, rect);
+    });
+    if (wasDeleted && isInIgnoreLsMarker) {
+      return 'mutation:element-replacement';
+    }
+    return 'mutation:element';
+  };
+};
 var ViewportObserver = exports.default = /*#__PURE__*/function () {
   // SSR context functions
 
-  function ViewportObserver(_ref2) {
+  function ViewportObserver(_ref3) {
     var _this = this;
-    var onChange = _ref2.onChange,
-      getSSRState = _ref2.getSSRState,
-      getSSRPlaceholderHandler = _ref2.getSSRPlaceholderHandler;
+    var onChange = _ref3.onChange,
+      getSSRState = _ref3.getSSRState,
+      getSSRPlaceholderHandler = _ref3.getSSRPlaceholderHandler;
     (0, _classCallCheck2.default)(this, ViewportObserver);
-    (0, _defineProperty2.default)(this, "handleIntersectionEntry", function (_ref3) {
-      var target = _ref3.target,
-        rect = _ref3.rect,
-        time = _ref3.time,
-        type = _ref3.type,
-        mutationData = _ref3.mutationData;
+    (0, _defineProperty2.default)(this, "handleIntersectionEntry", function (_ref4) {
+      var target = _ref4.target,
+        rect = _ref4.rect,
+        time = _ref4.time,
+        type = _ref4.type,
+        mutationData = _ref4.mutationData;
       if (!target) {
         return;
       }
@@ -82,12 +146,12 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
       });
     });
     (0, _defineProperty2.default)(this, "handleChildListMutation", /*#__PURE__*/function () {
-      var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref4) {
-        var target, addedNodes, removedNodes, timestamp, removedNodeRects, targetNode, _iterator, _step, addedNodeRef, addedNode, _iterator2, _step2, _loop, _ret;
-        return _regenerator.default.wrap(function _callee$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
+      var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref5) {
+        var target, addedNodes, removedNodes, timestamp, removedNodeRects, targetNode, _iterator, _step, _loop;
+        return _regenerator.default.wrap(function _callee$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
             case 0:
-              target = _ref4.target, addedNodes = _ref4.addedNodes, removedNodes = _ref4.removedNodes, timestamp = _ref4.timestamp;
+              target = _ref5.target, addedNodes = _ref5.addedNodes, removedNodes = _ref5.removedNodes, timestamp = _ref5.timestamp;
               removedNodeRects = removedNodes.map(function (ref) {
                 var n = ref.deref();
                 if (!n) {
@@ -97,203 +161,238 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
               });
               targetNode = target.deref();
               _iterator = _createForOfIteratorHelper(addedNodes);
-              _context2.prev = 4;
-              _iterator.s();
-            case 6:
-              if ((_step = _iterator.n()).done) {
-                _context2.next = 32;
-                break;
-              }
-              addedNodeRef = _step.value;
-              addedNode = addedNodeRef.deref();
-              if (addedNode) {
-                _context2.next = 11;
-                break;
-              }
-              return _context2.abrupt("continue", 30);
-            case 11:
-              _iterator2 = _createForOfIteratorHelper((0, _getMutatedElements.getMutatedElements)(addedNode));
-              _context2.prev = 12;
+              _context3.prev = 4;
               _loop = /*#__PURE__*/_regenerator.default.mark(function _loop() {
-                var _step2$value, isDisplayContentsElementChildren, element, ssrState, SSRStateEnum, _this$intersectionObs, _this$intersectionObs2, ssrPlaceholderHandler, _this$intersectionObs3, result, _this$intersectionObs4, sameDeletedNode, isInIgnoreLsMarker, _this$intersectionObs5, _this$intersectionObs6, _ref6, isWithinThirdPartySegment, _this$intersectionObs7, _this$intersectionObs8, _this$intersectionObs9;
-                return _regenerator.default.wrap(function _loop$(_context) {
-                  while (1) switch (_context.prev = _context.next) {
+                var addedNodeRef, addedNode, _this$getSSRState, _this$intersectionObs, hasSameDeletedNode, _checkWithinComponent, isWithinThirdPartySegment, isTargetReactRoot, _iterator2, _step2, _loop2, _ret;
+                return _regenerator.default.wrap(function _loop$(_context2) {
+                  while (1) switch (_context2.prev = _context2.next) {
                     case 0:
-                      _step2$value = _step2.value, isDisplayContentsElementChildren = _step2$value.isDisplayContentsElementChildren, element = _step2$value.element;
-                      if (!_this.getSSRState) {
-                        _context.next = 16;
-                        break;
-                      }
-                      ssrState = _this.getSSRState();
-                      SSRStateEnum = {
-                        normal: 1,
-                        waitingForFirstRender: 2,
-                        ignoring: 3
-                      };
-                      if (!(ssrState.state === SSRStateEnum.waitingForFirstRender && timestamp > ssrState.renderStart && targetNode === ssrState.reactRootElement)) {
-                        _context.next = 9;
-                        break;
-                      }
-                      ssrState.state = SSRStateEnum.ignoring;
-                      if (ssrState.renderStop === -1) {
-                        // arbitrary 500ms DOM update window
-                        ssrState.renderStop = timestamp + 500;
-                      }
-                      (_this$intersectionObs = _this.intersectionObserver) === null || _this$intersectionObs === void 0 || _this$intersectionObs.watchAndTag(element, 'ssr-hydration');
-                      return _context.abrupt("return", 0);
-                    case 9:
-                      if (!(ssrState.state === SSRStateEnum.ignoring && timestamp > ssrState.renderStart && targetNode === ssrState.reactRootElement)) {
-                        _context.next = 16;
-                        break;
-                      }
-                      if (!(timestamp <= ssrState.renderStop)) {
-                        _context.next = 15;
-                        break;
-                      }
-                      (_this$intersectionObs2 = _this.intersectionObserver) === null || _this$intersectionObs2 === void 0 || _this$intersectionObs2.watchAndTag(element, 'ssr-hydration');
-                      return _context.abrupt("return", 0);
-                    case 15:
-                      ssrState.state = SSRStateEnum.normal;
-                    case 16:
-                      if (!_this.getSSRPlaceholderHandler) {
-                        _context.next = 30;
-                        break;
-                      }
-                      ssrPlaceholderHandler = _this.getSSRPlaceholderHandler();
-                      if (!ssrPlaceholderHandler) {
-                        _context.next = 30;
-                        break;
-                      }
-                      if (!(ssrPlaceholderHandler.isPlaceholder(element) || ssrPlaceholderHandler.isPlaceholderIgnored(element))) {
-                        _context.next = 23;
-                        break;
-                      }
-                      if (!ssrPlaceholderHandler.checkIfExistedAndSizeMatchingV3(element)) {
-                        _context.next = 23;
-                        break;
-                      }
-                      (_this$intersectionObs3 = _this.intersectionObserver) === null || _this$intersectionObs3 === void 0 || _this$intersectionObs3.watchAndTag(element, 'mutation:ssr-placeholder');
-                      return _context.abrupt("return", 0);
-                    case 23:
-                      if (!(ssrPlaceholderHandler.isPlaceholderReplacement(element) || ssrPlaceholderHandler.isPlaceholderIgnored(element))) {
-                        _context.next = 30;
+                      addedNodeRef = _step.value;
+                      addedNode = addedNodeRef.deref();
+                      if (addedNode) {
+                        _context2.next = 4;
                         break;
                       }
-                      _context.next = 26;
-                      return ssrPlaceholderHandler.validateReactComponentMatchToPlaceholder(element);
-                    case 26:
-                      result = _context.sent;
-                      if (!(result !== false)) {
-                        _context.next = 30;
+                      return _context2.abrupt("return", 1);
+                    case 4:
+                      if (!(0, _platformFeatureFlags.fg)('platform_ufo_detect_zero_dimension_rectangles')) {
+                        _context2.next = 11;
                         break;
                       }
-                      (_this$intersectionObs4 = _this.intersectionObserver) === null || _this$intersectionObs4 === void 0 || _this$intersectionObs4.watchAndTag(element, 'mutation:ssr-placeholder');
-                      return _context.abrupt("return", 0);
-                    case 30:
-                      sameDeletedNode = removedNodes.find(function (ref) {
+                      hasSameDeletedNode = removedNodes.find(function (ref) {
                         var n = ref.deref();
-                        if (!n || !element) {
+                        if (!n || !addedNode) {
                           return false;
                         }
-                        return n.isEqualNode(element);
+                        return n.isEqualNode(addedNode);
                       });
-                      isInIgnoreLsMarker = element instanceof HTMLElement ? (0, _isInVcIgnoreIfNoLayoutShiftMarker.default)(element) : false;
-                      if (!(sameDeletedNode && isInIgnoreLsMarker)) {
-                        _context.next = 35;
-                        break;
-                      }
-                      (_this$intersectionObs5 = _this.intersectionObserver) === null || _this$intersectionObs5 === void 0 || _this$intersectionObs5.watchAndTag(element, 'mutation:remount');
-                      return _context.abrupt("return", 0);
-                    case 35:
-                      if (!(0, _vcUtils.isContainedWithinMediaWrapper)(element)) {
-                        _context.next = 38;
+                      _checkWithinComponent = (0, _checkWithinComponent3.default)(addedNode, 'UFOThirdPartySegment', _this.mapIs3pResult), isWithinThirdPartySegment = _checkWithinComponent.isWithin;
+                      isTargetReactRoot = targetNode === ((_this$getSSRState = _this.getSSRState) === null || _this$getSSRState === void 0 || (_this$getSSRState = _this$getSSRState.call(_this)) === null || _this$getSSRState === void 0 ? void 0 : _this$getSSRState.reactRootElement);
+                      (_this$intersectionObs = _this.intersectionObserver) === null || _this$intersectionObs === void 0 || _this$intersectionObs.watchAndTag(addedNode, createElementMutationsWatcherV4(removedNodeRects, isWithinThirdPartySegment, !!hasSameDeletedNode, timestamp, isTargetReactRoot, _this.getSSRState, _this.getSSRPlaceholderHandler));
+                      _context2.next = 30;
+                      break;
+                    case 11:
+                      _iterator2 = _createForOfIteratorHelper((0, _getMutatedElements.getMutatedElements)(addedNode));
+                      _context2.prev = 12;
+                      _loop2 = /*#__PURE__*/_regenerator.default.mark(function _loop2() {
+                        var _step2$value, isDisplayContentsElementChildren, element, ssrState, SSRStateEnum, _this$intersectionObs2, _this$intersectionObs3, ssrPlaceholderHandler, _this$intersectionObs4, result, _this$intersectionObs5, sameDeletedNode, isInIgnoreLsMarker, _this$intersectionObs6, _this$intersectionObs7, _ref7, isWithinThirdPartySegment, _this$intersectionObs8, _this$intersectionObs9, _this$intersectionObs0;
+                        return _regenerator.default.wrap(function _loop2$(_context) {
+                          while (1) switch (_context.prev = _context.next) {
+                            case 0:
+                              _step2$value = _step2.value, isDisplayContentsElementChildren = _step2$value.isDisplayContentsElementChildren, element = _step2$value.element;
+                              if (!_this.getSSRState) {
+                                _context.next = 16;
+                                break;
+                              }
+                              ssrState = _this.getSSRState();
+                              SSRStateEnum = {
+                                normal: 1,
+                                waitingForFirstRender: 2,
+                                ignoring: 3
+                              };
+                              if (!(ssrState.state === SSRStateEnum.waitingForFirstRender && timestamp > ssrState.renderStart && targetNode === ssrState.reactRootElement)) {
+                                _context.next = 9;
+                                break;
+                              }
+                              ssrState.state = SSRStateEnum.ignoring;
+                              if (ssrState.renderStop === -1) {
+                                // arbitrary 500ms DOM update window
+                                ssrState.renderStop = timestamp + 500;
+                              }
+                              (_this$intersectionObs2 = _this.intersectionObserver) === null || _this$intersectionObs2 === void 0 || _this$intersectionObs2.watchAndTag(element, 'ssr-hydration');
+                              return _context.abrupt("return", 0);
+                            case 9:
+                              if (!(ssrState.state === SSRStateEnum.ignoring && timestamp > ssrState.renderStart && targetNode === ssrState.reactRootElement)) {
+                                _context.next = 16;
+                                break;
+                              }
+                              if (!(timestamp <= ssrState.renderStop)) {
+                                _context.next = 15;
+                                break;
+                              }
+                              (_this$intersectionObs3 = _this.intersectionObserver) === null || _this$intersectionObs3 === void 0 || _this$intersectionObs3.watchAndTag(element, 'ssr-hydration');
+                              return _context.abrupt("return", 0);
+                            case 15:
+                              ssrState.state = SSRStateEnum.normal;
+                            case 16:
+                              if (!_this.getSSRPlaceholderHandler) {
+                                _context.next = 30;
+                                break;
+                              }
+                              ssrPlaceholderHandler = _this.getSSRPlaceholderHandler();
+                              if (!ssrPlaceholderHandler) {
+                                _context.next = 30;
+                                break;
+                              }
+                              if (!(ssrPlaceholderHandler.isPlaceholder(element) || ssrPlaceholderHandler.isPlaceholderIgnored(element))) {
+                                _context.next = 23;
+                                break;
+                              }
+                              if (!ssrPlaceholderHandler.checkIfExistedAndSizeMatchingV3(element)) {
+                                _context.next = 23;
+                                break;
+                              }
+                              (_this$intersectionObs4 = _this.intersectionObserver) === null || _this$intersectionObs4 === void 0 || _this$intersectionObs4.watchAndTag(element, 'mutation:ssr-placeholder');
+                              return _context.abrupt("return", 0);
+                            case 23:
+                              if (!(ssrPlaceholderHandler.isPlaceholderReplacement(element) || ssrPlaceholderHandler.isPlaceholderIgnored(element))) {
+                                _context.next = 30;
+                                break;
+                              }
+                              _context.next = 26;
+                              return ssrPlaceholderHandler.validateReactComponentMatchToPlaceholder(element);
+                            case 26:
+                              result = _context.sent;
+                              if (!(result !== false)) {
+                                _context.next = 30;
+                                break;
+                              }
+                              (_this$intersectionObs5 = _this.intersectionObserver) === null || _this$intersectionObs5 === void 0 || _this$intersectionObs5.watchAndTag(element, 'mutation:ssr-placeholder');
+                              return _context.abrupt("return", 0);
+                            case 30:
+                              sameDeletedNode = removedNodes.find(function (ref) {
+                                var n = ref.deref();
+                                if (!n || !element) {
+                                  return false;
+                                }
+                                return n.isEqualNode(element);
+                              });
+                              isInIgnoreLsMarker = element instanceof HTMLElement ? (0, _isInVcIgnoreIfNoLayoutShiftMarker.default)(element) : false;
+                              if (!(sameDeletedNode && isInIgnoreLsMarker)) {
+                                _context.next = 35;
+                                break;
+                              }
+                              (_this$intersectionObs6 = _this.intersectionObserver) === null || _this$intersectionObs6 === void 0 || _this$intersectionObs6.watchAndTag(element, 'mutation:remount');
+                              return _context.abrupt("return", 0);
+                            case 35:
+                              if (!(0, _vcUtils.isContainedWithinMediaWrapper)(element)) {
+                                _context.next = 38;
+                                break;
+                              }
+                              (_this$intersectionObs7 = _this.intersectionObserver) === null || _this$intersectionObs7 === void 0 || _this$intersectionObs7.watchAndTag(element, 'mutation:media');
+                              return _context.abrupt("return", 0);
+                            case 38:
+                              _ref7 = element instanceof HTMLElement ? (0, _checkWithinComponent3.default)(element, 'UFOThirdPartySegment', _this.mapIs3pResult) : {
+                                isWithin: false
+                              }, isWithinThirdPartySegment = _ref7.isWithin;
+                              if (!isWithinThirdPartySegment) {
+                                _context.next = 42;
+                                break;
+                              }
+                              (_this$intersectionObs8 = _this.intersectionObserver) === null || _this$intersectionObs8 === void 0 || _this$intersectionObs8.watchAndTag(element, 'mutation:third-party-element');
+                              return _context.abrupt("return", 0);
+                            case 42:
+                              if (isDisplayContentsElementChildren) {
+                                (_this$intersectionObs9 = _this.intersectionObserver) === null || _this$intersectionObs9 === void 0 || _this$intersectionObs9.watchAndTag(element, 'mutation:display-contents-children-element');
+                              } else {
+                                (_this$intersectionObs0 = _this.intersectionObserver) === null || _this$intersectionObs0 === void 0 || _this$intersectionObs0.watchAndTag(element, createElementMutationsWatcher(removedNodeRects));
+                              }
+                            case 43:
+                            case "end":
+                              return _context.stop();
+                          }
+                        }, _loop2);
+                      });
+                      _iterator2.s();
+                    case 15:
+                      if ((_step2 = _iterator2.n()).done) {
+                        _context2.next = 22;
                         break;
                       }
-                      (_this$intersectionObs6 = _this.intersectionObserver) === null || _this$intersectionObs6 === void 0 || _this$intersectionObs6.watchAndTag(element, 'mutation:media');
-                      return _context.abrupt("return", 0);
-                    case 38:
-                      _ref6 = element instanceof HTMLElement ? (0, _checkWithinComponent2.default)(element, 'UFOThirdPartySegment', _this.mapIs3pResult) : {
-                        isWithin: false
-                      }, isWithinThirdPartySegment = _ref6.isWithin;
-                      if (!isWithinThirdPartySegment) {
-                        _context.next = 42;
+                      return _context2.delegateYield(_loop2(), "t0", 17);
+                    case 17:
+                      _ret = _context2.t0;
+                      if (!(_ret === 0)) {
+                        _context2.next = 20;
                         break;
                       }
-                      (_this$intersectionObs7 = _this.intersectionObserver) === null || _this$intersectionObs7 === void 0 || _this$intersectionObs7.watchAndTag(element, 'mutation:third-party-element');
-                      return _context.abrupt("return", 0);
-                    case 42:
-                      if (isDisplayContentsElementChildren) {
-                        (_this$intersectionObs8 = _this.intersectionObserver) === null || _this$intersectionObs8 === void 0 || _this$intersectionObs8.watchAndTag(element, 'mutation:display-contents-children-element');
-                      } else {
-                        (_this$intersectionObs9 = _this.intersectionObserver) === null || _this$intersectionObs9 === void 0 || _this$intersectionObs9.watchAndTag(element, createElementMutationsWatcher(removedNodeRects));
-                      }
-                    case 43:
+                      return _context2.abrupt("continue", 20);
+                    case 20:
+                      _context2.next = 15;
+                      break;
+                    case 22:
+                      _context2.next = 27;
+                      break;
+                    case 24:
+                      _context2.prev = 24;
+                      _context2.t1 = _context2["catch"](12);
+                      _iterator2.e(_context2.t1);
+                    case 27:
+                      _context2.prev = 27;
+                      _iterator2.f();
+                      return _context2.finish(27);
+                    case 30:
                     case "end":
-                      return _context.stop();
+                      return _context2.stop();
                   }
-                }, _loop);
+                }, _loop, null, [[12, 24, 27, 30]]);
               });
-              _iterator2.s();
-            case 15:
-              if ((_step2 = _iterator2.n()).done) {
-                _context2.next = 22;
+              _iterator.s();
+            case 7:
+              if ((_step = _iterator.n()).done) {
+                _context3.next = 13;
                 break;
               }
-              return _context2.delegateYield(_loop(), "t0", 17);
-            case 17:
-              _ret = _context2.t0;
-              if (!(_ret === 0)) {
-                _context2.next = 20;
+              return _context3.delegateYield(_loop(), "t0", 9);
+            case 9:
+              if (!_context3.t0) {
+                _context3.next = 11;
                 break;
               }
-              return _context2.abrupt("continue", 20);
-            case 20:
-              _context2.next = 15;
-              break;
-            case 22:
-              _context2.next = 27;
-              break;
-            case 24:
-              _context2.prev = 24;
-              _context2.t1 = _context2["catch"](12);
-              _iterator2.e(_context2.t1);
-            case 27:
-              _context2.prev = 27;
-              _iterator2.f();
-              return _context2.finish(27);
-            case 30:
-              _context2.next = 6;
+              return _context3.abrupt("continue", 11);
+            case 11:
+              _context3.next = 7;
               break;
-            case 32:
-              _context2.next = 37;
+            case 13:
+              _context3.next = 18;
               break;
-            case 34:
-              _context2.prev = 34;
-              _context2.t2 = _context2["catch"](4);
-              _iterator.e(_context2.t2);
-            case 37:
-              _context2.prev = 37;
+            case 15:
+              _context3.prev = 15;
+              _context3.t1 = _context3["catch"](4);
+              _iterator.e(_context3.t1);
+            case 18:
+              _context3.prev = 18;
               _iterator.f();
-              return _context2.finish(37);
-            case 40:
+              return _context3.finish(18);
+            case 21:
             case "end":
-              return _context2.stop();
+              return _context3.stop();
           }
-        }, _callee, null, [[4, 34, 37, 40], [12, 24, 27, 30]]);
+        }, _callee, null, [[4, 15, 18, 21]]);
       }));
       return function (_x) {
-        return _ref5.apply(this, arguments);
+        return _ref6.apply(this, arguments);
       };
     }());
-    (0, _defineProperty2.default)(this, "handleAttributeMutation", function (_ref7) {
-      var _this$intersectionObs0;
-      var target = _ref7.target,
-        attributeName = _ref7.attributeName,
-        oldValue = _ref7.oldValue,
-        newValue = _ref7.newValue;
-      (_this$intersectionObs0 = _this.intersectionObserver) === null || _this$intersectionObs0 === void 0 || _this$intersectionObs0.watchAndTag(target, function (_ref8) {
-        var target = _ref8.target,
-          rect = _ref8.rect;
+    (0, _defineProperty2.default)(this, "handleAttributeMutation", function (_ref8) {
+      var _this$intersectionObs1;
+      var target = _ref8.target,
+        attributeName = _ref8.attributeName,
+        oldValue = _ref8.oldValue,
+        newValue = _ref8.newValue;
+      (_this$intersectionObs1 = _this.intersectionObserver) === null || _this$intersectionObs1 === void 0 || _this$intersectionObs1.watchAndTag(target, function (_ref9) {
+        var target = _ref9.target,
+          rect = _ref9.rect;
         if ((0, _vcUtils.isContainedWithinMediaWrapper)(target)) {
           return {
             type: 'mutation:media',
@@ -305,8 +404,8 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
           };
         }
         if ((0, _platformFeatureFlags.fg)('platform_ufo_exclude_3p_attribute_changes')) {
-          var _checkWithinComponent = (0, _checkWithinComponent2.default)(target, 'UFOThirdPartySegment', _this.mapIs3pResult),
-            isWithinThirdPartySegment = _checkWithinComponent.isWithin;
+          var _checkWithinComponent2 = (0, _checkWithinComponent3.default)(target, 'UFOThirdPartySegment', _this.mapIs3pResult),
+            isWithinThirdPartySegment = _checkWithinComponent2.isWithin;
           if (isWithinThirdPartySegment) {
             return {
               type: 'mutation:third-party-attribute',
@@ -379,9 +478,9 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
         };
       });
     });
-    (0, _defineProperty2.default)(this, "handleLayoutShift", function (_ref9) {
-      var time = _ref9.time,
-        changedRects = _ref9.changedRects;
+    (0, _defineProperty2.default)(this, "handleLayoutShift", function (_ref0) {
+      var time = _ref0.time,
+        changedRects = _ref0.changedRects;
       var _iterator3 = _createForOfIteratorHelper(changedRects),
         _step3;
       try {
@@ -460,16 +559,16 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
   }, {
     key: "stop",
     value: function stop() {
-      var _this$mutationObserve2, _this$intersectionObs1, _this$performanceObse2;
+      var _this$mutationObserve2, _this$intersectionObs10, _this$performanceObse2;
       if (!this.isStarted) {
         return;
       }
       (_this$mutationObserve2 = this.mutationObserver) === null || _this$mutationObserve2 === void 0 || _this$mutationObserve2.disconnect();
-      (_this$intersectionObs1 = this.intersectionObserver) === null || _this$intersectionObs1 === void 0 || _this$intersectionObs1.disconnect();
+      (_this$intersectionObs10 = this.intersectionObserver) === null || _this$intersectionObs10 === void 0 || _this$intersectionObs10.disconnect();
       (_this$performanceObse2 = this.performanceObserver) === null || _this$performanceObse2 === void 0 || _this$performanceObse2.disconnect();
       this.isStarted = false;
       // Clean up caches when stopping
-      (0, _checkWithinComponent2.cleanupCaches)(this.mapIs3pResult);
+      (0, _checkWithinComponent3.cleanupCaches)(this.mapIs3pResult);
     }
   }]);
 }();