@atlaskit/react-ufo 4.2.2 → 4.2.4

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

@@ -1,4 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { fg } from '@atlaskit/platform-feature-flags';
 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';
@@ -100,7 +101,7 @@ export default class ViewportObserver {
       });
       const targetNode = target.deref();
       for (const addedNodeRef of addedNodes) {
-        var _this$intersectionObs8;
+        var _this$intersectionObs9;
         const addedNode = addedNodeRef.deref();
         if (!addedNode) {
           continue;
@@ -140,19 +141,27 @@ export default class ViewportObserver {
           const ssrPlaceholderHandler = this.getSSRPlaceholderHandler();
           if (ssrPlaceholderHandler) {
             if (ssrPlaceholderHandler.isPlaceholder(addedNode) || ssrPlaceholderHandler.isPlaceholderIgnored(addedNode)) {
-              const result = await ssrPlaceholderHandler.checkIfExistedAndSizeMatching(addedNode);
-              if (result !== false) {
-                var _this$intersectionObs3;
-                (_this$intersectionObs3 = this.intersectionObserver) === null || _this$intersectionObs3 === void 0 ? void 0 : _this$intersectionObs3.watchAndTag(addedNode, 'mutation:ssr-placeholder');
-                continue;
+              if (fg('platform_ufo_ssr_placeholder_resolution_ttvc_v3')) {
+                if (ssrPlaceholderHandler.checkIfExistedAndSizeMatchingV3(addedNode)) {
+                  var _this$intersectionObs3;
+                  (_this$intersectionObs3 = this.intersectionObserver) === null || _this$intersectionObs3 === void 0 ? void 0 : _this$intersectionObs3.watchAndTag(addedNode, 'mutation:ssr-placeholder');
+                  continue;
+                }
+              } else {
+                const result = await ssrPlaceholderHandler.checkIfExistedAndSizeMatching(addedNode);
+                if (result !== false) {
+                  var _this$intersectionObs4;
+                  (_this$intersectionObs4 = this.intersectionObserver) === null || _this$intersectionObs4 === void 0 ? void 0 : _this$intersectionObs4.watchAndTag(addedNode, 'mutation:ssr-placeholder');
+                  continue;
+                }
               }
               // If result is false, continue to normal mutation logic below
             }
             if (ssrPlaceholderHandler.isPlaceholderReplacement(addedNode) || ssrPlaceholderHandler.isPlaceholderIgnored(addedNode)) {
               const result = await ssrPlaceholderHandler.validateReactComponentMatchToPlaceholder(addedNode);
               if (result !== false) {
-                var _this$intersectionObs4;
-                (_this$intersectionObs4 = this.intersectionObserver) === null || _this$intersectionObs4 === void 0 ? void 0 : _this$intersectionObs4.watchAndTag(addedNode, 'mutation:ssr-placeholder');
+                var _this$intersectionObs5;
+                (_this$intersectionObs5 = this.intersectionObserver) === null || _this$intersectionObs5 === void 0 ? void 0 : _this$intersectionObs5.watchAndTag(addedNode, 'mutation:ssr-placeholder');
                 continue;
               }
               // If result is false, continue to normal mutation logic below
@@ -168,24 +177,24 @@ export default class ViewportObserver {
         });
         const isInIgnoreLsMarker = isInVCIgnoreIfNoLayoutShiftMarker(addedNode);
         if (sameDeletedNode && isInIgnoreLsMarker) {
-          var _this$intersectionObs5;
-          (_this$intersectionObs5 = this.intersectionObserver) === null || _this$intersectionObs5 === void 0 ? void 0 : _this$intersectionObs5.watchAndTag(addedNode, 'mutation:remount');
+          var _this$intersectionObs6;
+          (_this$intersectionObs6 = this.intersectionObserver) === null || _this$intersectionObs6 === void 0 ? void 0 : _this$intersectionObs6.watchAndTag(addedNode, 'mutation:remount');
           continue;
         }
         if (isContainedWithinMediaWrapper(addedNode)) {
-          var _this$intersectionObs6;
-          (_this$intersectionObs6 = this.intersectionObserver) === null || _this$intersectionObs6 === void 0 ? void 0 : _this$intersectionObs6.watchAndTag(addedNode, 'mutation:media');
+          var _this$intersectionObs7;
+          (_this$intersectionObs7 = this.intersectionObserver) === null || _this$intersectionObs7 === void 0 ? void 0 : _this$intersectionObs7.watchAndTag(addedNode, 'mutation:media');
           continue;
         }
         const {
           isWithin: isWithinThirdPartySegment
         } = checkWithinComponent(addedNode, 'UFOThirdPartySegment', this.mapIs3pResult);
         if (isWithinThirdPartySegment) {
-          var _this$intersectionObs7;
-          (_this$intersectionObs7 = this.intersectionObserver) === null || _this$intersectionObs7 === void 0 ? void 0 : _this$intersectionObs7.watchAndTag(addedNode, 'mutation:third-party-element');
+          var _this$intersectionObs8;
+          (_this$intersectionObs8 = this.intersectionObserver) === null || _this$intersectionObs8 === void 0 ? void 0 : _this$intersectionObs8.watchAndTag(addedNode, 'mutation:third-party-element');
           continue;
         }
-        (_this$intersectionObs8 = this.intersectionObserver) === null || _this$intersectionObs8 === void 0 ? void 0 : _this$intersectionObs8.watchAndTag(addedNode, createElementMutationsWatcher(removedNodeRects));
+        (_this$intersectionObs9 = this.intersectionObserver) === null || _this$intersectionObs9 === void 0 ? void 0 : _this$intersectionObs9.watchAndTag(addedNode, createElementMutationsWatcher(removedNodeRects));
       }
     });
     _defineProperty(this, "handleAttributeMutation", ({
@@ -194,8 +203,8 @@ export default class ViewportObserver {
       oldValue,
       newValue
     }) => {
-      var _this$intersectionObs9;
-      (_this$intersectionObs9 = this.intersectionObserver) === null || _this$intersectionObs9 === void 0 ? void 0 : _this$intersectionObs9.watchAndTag(target, ({
+      var _this$intersectionObs0;
+      (_this$intersectionObs0 = this.intersectionObserver) === null || _this$intersectionObs0 === void 0 ? void 0 : _this$intersectionObs0.watchAndTag(target, ({
         target,
         rect
       }) => {
@@ -322,12 +331,12 @@ export default class ViewportObserver {
     this.isStarted = true;
   }
   stop() {
-    var _this$mutationObserve2, _this$intersectionObs0, _this$performanceObse2;
+    var _this$mutationObserve2, _this$intersectionObs1, _this$performanceObse2;
     if (!this.isStarted) {
       return;
     }
     (_this$mutationObserve2 = this.mutationObserver) === null || _this$mutationObserve2 === void 0 ? void 0 : _this$mutationObserve2.disconnect();
-    (_this$intersectionObs0 = this.intersectionObserver) === null || _this$intersectionObs0 === void 0 ? void 0 : _this$intersectionObs0.disconnect();
+    (_this$intersectionObs1 = this.intersectionObserver) === null || _this$intersectionObs1 === void 0 ? void 0 : _this$intersectionObs1.disconnect();
     (_this$performanceObse2 = this.performanceObserver) === null || _this$performanceObse2 === void 0 ? void 0 : _this$performanceObse2.disconnect();
     this.isStarted = false;
     // Clean up caches when stopping

package/dist/esm/create-payload/common/utils/index.js

@@ -1,7 +1,15 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["labelStack"],
+  _excluded2 = ["labelStack"];
 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; }
+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; }
 import { fg } from '@atlaskit/platform-feature-flags';
+import { getConfig } from '../../../config';
+import { getReactUFOPayloadVersion } from '../../utils/get-react-ufo-payload-version';
 export function sanitizeUfoName(name) {
   return name.replace(/_/g, '-');
 }
@@ -13,26 +21,72 @@ export function buildSegmentTree(labelStacks) {
     n: 'segment-tree-root',
     c: {}
   };
-  labelStacks.forEach(function (labelStack) {
-    var currentNode = r;
-    labelStack.forEach(function (label) {
-      var name = label.name;
-      var id = isSegmentLabel(label) ? label.segmentId : undefined;
-      var key = id !== undefined ? id : name;
-      var type = isSegmentLabel(label) ? label.type : undefined;
-      if (!currentNode.c) {
-        currentNode.c = {};
+  var config = getConfig();
+  var segmentThreshold = config === null || config === void 0 ? void 0 : config.segmentsThreshold;
+  var addSegmentsMap = new Map();
+  if (fg('platform_ufo_add_segments_count_threshold')) {
+    labelStacks.forEach(function (labelStack) {
+      var stringifiedLabelStack = stringifyLabelStackWithoutId(labelStack);
+      var currentNode = r;
+      var _iterator = _createForOfIteratorHelper(labelStack),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var label = _step.value;
+          var isSegment = isSegmentLabel(label);
+          var name = label.name;
+          if (isSegment && segmentThreshold && segmentThreshold[name]) {
+            var threshold = segmentThreshold[name];
+            var count = addSegmentsMap.get(stringifiedLabelStack) || 0;
+            if (count < threshold) {
+              addSegmentsMap.set(stringifiedLabelStack, count + 1);
+            } else {
+              break;
+            }
+          }
+          var id = isSegment ? label.segmentId : undefined;
+          var key = id !== undefined ? id : name;
+          var type = isSegment ? label.type : undefined;
+          if (!currentNode.c) {
+            currentNode.c = {};
+          }
+          if (!currentNode.c[key]) {
+            currentNode.c[key] = _objectSpread({
+              n: name
+            }, type && fg('platform_ufo_add_type_for_3p_segments') ? {
+              t: type
+            } : {});
+          }
+          currentNode = currentNode.c[key];
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
       }
-      if (!currentNode.c[key]) {
-        currentNode.c[key] = _objectSpread({
-          n: name
-        }, type && fg('platform_ufo_add_type_for_3p_segments') ? {
-          t: type
-        } : {});
-      }
-      currentNode = currentNode.c[key];
     });
-  });
+  } else {
+    labelStacks.forEach(function (labelStack) {
+      var currentNode = r;
+      labelStack.forEach(function (label) {
+        var name = label.name;
+        var id = isSegmentLabel(label) ? label.segmentId : undefined;
+        var key = id !== undefined ? id : name;
+        var type = isSegmentLabel(label) ? label.type : undefined;
+        if (!currentNode.c) {
+          currentNode.c = {};
+        }
+        if (!currentNode.c[key]) {
+          currentNode.c[key] = _objectSpread({
+            n: name
+          }, type && fg('platform_ufo_add_type_for_3p_segments') ? {
+            t: type
+          } : {});
+        }
+        currentNode = currentNode.c[key];
+      });
+    });
+  }
   return {
     r: r
   };
@@ -45,6 +99,14 @@ export function stringifyLabelStackFully(labelStack) {
     return l.name;
   }).join('/');
 }
+export function stringifyLabelStackWithoutId(labelStack) {
+  return labelStack.map(function (l) {
+    if (isSegmentLabel(l)) {
+      return "".concat(l.name, ":segment");
+    }
+    return l.name;
+  }).join('/');
+}
 function getLabelStackReference(labelStack) {
   return labelStack.map(function (l) {
     return isSegmentLabel(l) ? l.segmentId : l.name;
@@ -63,4 +125,55 @@ export function optimizeLabelStack(labelStack, reactUFOVersion) {
       t: ls.type
     } : {});
   });
+}
+export function getOldSegmentsLabelStack(segments, interactionType) {
+  if (fg('platform_ufo_add_segments_count_threshold')) {
+    var config = getConfig();
+    var addSegmentsMap = new Map();
+    var segmentThreshold = config === null || config === void 0 ? void 0 : config.segmentsThreshold;
+    return segments.map(function (_ref) {
+      var labelStack = _ref.labelStack,
+        others = _objectWithoutProperties(_ref, _excluded);
+      var stringifiedLabelStack = stringifyLabelStackWithoutId(labelStack);
+      var segmentsInfo = [];
+      var _iterator2 = _createForOfIteratorHelper(labelStack),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var ls = _step2.value;
+          var isSegment = isSegmentLabel(ls);
+          if (isSegment && segmentThreshold && segmentThreshold[ls.name]) {
+            var threshold = segmentThreshold[ls.name];
+            var count = addSegmentsMap.get(stringifiedLabelStack) || 0;
+            if (count < threshold) {
+              addSegmentsMap.set(stringifiedLabelStack, count + 1);
+            } else {
+              break;
+            }
+          }
+          segmentsInfo.push(_objectSpread(_objectSpread({
+            n: ls.name
+          }, ls.segmentId ? {
+            s: ls.segmentId
+          } : {}), ls.type && fg('platform_ufo_add_type_for_3p_segments') ? {
+            t: ls.type
+          } : {}));
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+      return _objectSpread(_objectSpread({}, others), {}, {
+        labelStack: segmentsInfo
+      });
+    });
+  }
+  return segments.map(function (_ref2) {
+    var labelStack = _ref2.labelStack,
+      others = _objectWithoutProperties(_ref2, _excluded2);
+    return _objectSpread(_objectSpread({}, others), {}, {
+      labelStack: optimizeLabelStack(labelStack, getReactUFOPayloadVersion(interactionType))
+    });
+  });
 }

package/dist/esm/create-payload/index.js

@@ -5,8 +5,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["labelStack", "time"],
   _excluded2 = ["stopTime", "labelStack"],
-  _excluded3 = ["labelStack"],
-  _excluded4 = ["labelStack"];
+  _excluded3 = ["labelStack"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 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; }
@@ -31,7 +30,7 @@ import * as resourceTiming from '../resource-timing';
 import { filterResourceTimings } from '../resource-timing/common/utils/resource-timing-buffer';
 import { roundEpsilon } from '../round-number';
 import * as ssr from '../ssr';
-import { buildSegmentTree, labelStackStartWith, optimizeLabelStack, sanitizeUfoName, stringifyLabelStackFully } from './common/utils';
+import { buildSegmentTree, getOldSegmentsLabelStack, labelStackStartWith, optimizeLabelStack, sanitizeUfoName, stringifyLabelStackFully } from './common/utils';
 import { createCriticalMetricsPayloads } from './critical-metrics-payload';
 import { addPerformanceMeasures } from './utils/add-performance-measures';
 import { getBrowserMetadataToLegacyFormat } from './utils/get-browser-metadata';
@@ -749,13 +748,7 @@ function _createInteractionMetricsPayload() {
                   apdex: optimizeApdex(interaction.apdex, getReactUFOPayloadVersion(interaction.type)),
                   end: Math.round(end),
                   start: Math.round(start),
-                  segments: getReactUFOPayloadVersion(interaction.type) === '2.0.0' ? segmentTree : segments.map(function (_ref7) {
-                    var labelStack = _ref7.labelStack,
-                      others = _objectWithoutProperties(_ref7, _excluded4);
-                    return _objectSpread(_objectSpread({}, others), {}, {
-                      labelStack: optimizeLabelStack(labelStack, getReactUFOPayloadVersion(interaction.type))
-                    });
-                  }),
+                  segments: getReactUFOPayloadVersion(interaction.type) === '2.0.0' ? segmentTree : getOldSegmentsLabelStack(segments, interaction.type),
                   marks: optimizeMarks(interaction.marks, getReactUFOPayloadVersion(interaction.type)),
                   customData: optimizeCustomData(interaction),
                   reactProfilerTimings: optimizeReactProfilerTimings(interaction.reactProfilerTimings, start, getReactUFOPayloadVersion(interaction.type))

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

@@ -206,6 +206,8 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
       }
       return element;
     }
+
+    // NOTE - for use when the FG `platform_ufo_ssr_placeholder_resolution_ttvc_v3` is disabled
   }, {
     key: "checkIfExistedAndSizeMatching",
     value: function checkIfExistedAndSizeMatching(el) {
@@ -223,6 +225,15 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
         }
       });
     }
+
+    // NOTE - for use when the FG `platform_ufo_ssr_placeholder_resolution_ttvc_v3` is enabled
+  }, {
+    key: "checkIfExistedAndSizeMatchingV3",
+    value: function checkIfExistedAndSizeMatchingV3(el) {
+      el = this.findNearestPlaceholderContainerIfIgnored(el);
+      var id = this.getPlaceholderId(el);
+      return this.staticPlaceholders.has(id);
+    }
   }, {
     key: "getSize",
     value: function getSize(el) {

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

@@ -6,6 +6,7 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 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; }
+import { fg } from '@atlaskit/platform-feature-flags';
 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';
@@ -113,8 +114,8 @@ var ViewportObserver = /*#__PURE__*/function () {
               _iterator = _createForOfIteratorHelper(addedNodes);
               _context2.prev = 4;
               _loop = /*#__PURE__*/_regeneratorRuntime.mark(function _loop() {
-                var _this$intersectionObs8;
-                var addedNodeRef, addedNode, ssrState, SSRStateEnum, _this$intersectionObs, _this$intersectionObs2, ssrPlaceholderHandler, result, _this$intersectionObs3, _result, _this$intersectionObs4, sameDeletedNode, isInIgnoreLsMarker, _this$intersectionObs5, _this$intersectionObs6, _checkWithinComponent, isWithinThirdPartySegment, _this$intersectionObs7;
+                var _this$intersectionObs9;
+                var addedNodeRef, addedNode, ssrState, SSRStateEnum, _this$intersectionObs, _this$intersectionObs2, ssrPlaceholderHandler, _this$intersectionObs3, result, _this$intersectionObs4, _result, _this$intersectionObs5, sameDeletedNode, isInIgnoreLsMarker, _this$intersectionObs6, _this$intersectionObs7, _checkWithinComponent, isWithinThirdPartySegment, _this$intersectionObs8;
                 return _regeneratorRuntime.wrap(function _loop$(_context) {
                   while (1) switch (_context.prev = _context.next) {
                     case 0:
@@ -162,44 +163,58 @@ var ViewportObserver = /*#__PURE__*/function () {
                       ssrState.state = SSRStateEnum.normal;
                     case 19:
                       if (!_this.getSSRPlaceholderHandler) {
-                        _context.next = 36;
+                        _context.next = 42;
                         break;
                       }
                       ssrPlaceholderHandler = _this.getSSRPlaceholderHandler();
                       if (!ssrPlaceholderHandler) {
-                        _context.next = 36;
+                        _context.next = 42;
                         break;
                       }
                       if (!(ssrPlaceholderHandler.isPlaceholder(addedNode) || ssrPlaceholderHandler.isPlaceholderIgnored(addedNode))) {
+                        _context.next = 35;
+                        break;
+                      }
+                      if (!fg('platform_ufo_ssr_placeholder_resolution_ttvc_v3')) {
                         _context.next = 29;
                         break;
                       }
-                      _context.next = 25;
+                      if (!ssrPlaceholderHandler.checkIfExistedAndSizeMatchingV3(addedNode)) {
+                        _context.next = 27;
+                        break;
+                      }
+                      (_this$intersectionObs3 = _this.intersectionObserver) === null || _this$intersectionObs3 === void 0 || _this$intersectionObs3.watchAndTag(addedNode, 'mutation:ssr-placeholder');
+                      return _context.abrupt("return", 0);
+                    case 27:
+                      _context.next = 35;
+                      break;
+                    case 29:
+                      _context.next = 31;
                       return ssrPlaceholderHandler.checkIfExistedAndSizeMatching(addedNode);
-                    case 25:
+                    case 31:
                       result = _context.sent;
                       if (!(result !== false)) {
-                        _context.next = 29;
+                        _context.next = 35;
                         break;
                       }
-                      (_this$intersectionObs3 = _this.intersectionObserver) === null || _this$intersectionObs3 === void 0 || _this$intersectionObs3.watchAndTag(addedNode, 'mutation:ssr-placeholder');
+                      (_this$intersectionObs4 = _this.intersectionObserver) === null || _this$intersectionObs4 === void 0 || _this$intersectionObs4.watchAndTag(addedNode, 'mutation:ssr-placeholder');
                       return _context.abrupt("return", 0);
-                    case 29:
+                    case 35:
                       if (!(ssrPlaceholderHandler.isPlaceholderReplacement(addedNode) || ssrPlaceholderHandler.isPlaceholderIgnored(addedNode))) {
-                        _context.next = 36;
+                        _context.next = 42;
                         break;
                       }
-                      _context.next = 32;
+                      _context.next = 38;
                       return ssrPlaceholderHandler.validateReactComponentMatchToPlaceholder(addedNode);
-                    case 32:
+                    case 38:
                       _result = _context.sent;
                       if (!(_result !== false)) {
-                        _context.next = 36;
+                        _context.next = 42;
                         break;
                       }
-                      (_this$intersectionObs4 = _this.intersectionObserver) === null || _this$intersectionObs4 === void 0 || _this$intersectionObs4.watchAndTag(addedNode, 'mutation:ssr-placeholder');
+                      (_this$intersectionObs5 = _this.intersectionObserver) === null || _this$intersectionObs5 === void 0 || _this$intersectionObs5.watchAndTag(addedNode, 'mutation:ssr-placeholder');
                       return _context.abrupt("return", 0);
-                    case 36:
+                    case 42:
                       sameDeletedNode = removedNodes.find(function (ref) {
                         var n = ref.deref();
                         if (!n || !addedNode) {
@@ -209,29 +224,29 @@ var ViewportObserver = /*#__PURE__*/function () {
                       });
                       isInIgnoreLsMarker = isInVCIgnoreIfNoLayoutShiftMarker(addedNode);
                       if (!(sameDeletedNode && isInIgnoreLsMarker)) {
-                        _context.next = 41;
+                        _context.next = 47;
                         break;
                       }
-                      (_this$intersectionObs5 = _this.intersectionObserver) === null || _this$intersectionObs5 === void 0 || _this$intersectionObs5.watchAndTag(addedNode, 'mutation:remount');
+                      (_this$intersectionObs6 = _this.intersectionObserver) === null || _this$intersectionObs6 === void 0 || _this$intersectionObs6.watchAndTag(addedNode, 'mutation:remount');
                       return _context.abrupt("return", 0);
-                    case 41:
+                    case 47:
                       if (!isContainedWithinMediaWrapper(addedNode)) {
-                        _context.next = 44;
+                        _context.next = 50;
                         break;
                       }
-                      (_this$intersectionObs6 = _this.intersectionObserver) === null || _this$intersectionObs6 === void 0 || _this$intersectionObs6.watchAndTag(addedNode, 'mutation:media');
+                      (_this$intersectionObs7 = _this.intersectionObserver) === null || _this$intersectionObs7 === void 0 || _this$intersectionObs7.watchAndTag(addedNode, 'mutation:media');
                       return _context.abrupt("return", 0);
-                    case 44:
+                    case 50:
                       _checkWithinComponent = checkWithinComponent(addedNode, 'UFOThirdPartySegment', _this.mapIs3pResult), isWithinThirdPartySegment = _checkWithinComponent.isWithin;
                       if (!isWithinThirdPartySegment) {
-                        _context.next = 48;
+                        _context.next = 54;
                         break;
                       }
-                      (_this$intersectionObs7 = _this.intersectionObserver) === null || _this$intersectionObs7 === void 0 || _this$intersectionObs7.watchAndTag(addedNode, 'mutation:third-party-element');
+                      (_this$intersectionObs8 = _this.intersectionObserver) === null || _this$intersectionObs8 === void 0 || _this$intersectionObs8.watchAndTag(addedNode, 'mutation:third-party-element');
                       return _context.abrupt("return", 0);
-                    case 48:
-                      (_this$intersectionObs8 = _this.intersectionObserver) === null || _this$intersectionObs8 === void 0 || _this$intersectionObs8.watchAndTag(addedNode, createElementMutationsWatcher(removedNodeRects));
-                    case 49:
+                    case 54:
+                      (_this$intersectionObs9 = _this.intersectionObserver) === null || _this$intersectionObs9 === void 0 || _this$intersectionObs9.watchAndTag(addedNode, createElementMutationsWatcher(removedNodeRects));
+                    case 55:
                     case "end":
                       return _context.stop();
                   }
@@ -276,12 +291,12 @@ var ViewportObserver = /*#__PURE__*/function () {
       };
     }());
     _defineProperty(this, "handleAttributeMutation", function (_ref6) {
-      var _this$intersectionObs9;
+      var _this$intersectionObs0;
       var target = _ref6.target,
         attributeName = _ref6.attributeName,
         oldValue = _ref6.oldValue,
         newValue = _ref6.newValue;
-      (_this$intersectionObs9 = _this.intersectionObserver) === null || _this$intersectionObs9 === void 0 || _this$intersectionObs9.watchAndTag(target, function (_ref7) {
+      (_this$intersectionObs0 = _this.intersectionObserver) === null || _this$intersectionObs0 === void 0 || _this$intersectionObs0.watchAndTag(target, function (_ref7) {
         var target = _ref7.target,
           rect = _ref7.rect;
         if (isContainedWithinMediaWrapper(target)) {
@@ -421,12 +436,12 @@ var ViewportObserver = /*#__PURE__*/function () {
   }, {
     key: "stop",
     value: function stop() {
-      var _this$mutationObserve2, _this$intersectionObs0, _this$performanceObse2;
+      var _this$mutationObserve2, _this$intersectionObs1, _this$performanceObse2;
       if (!this.isStarted) {
         return;
       }
       (_this$mutationObserve2 = this.mutationObserver) === null || _this$mutationObserve2 === void 0 || _this$mutationObserve2.disconnect();
-      (_this$intersectionObs0 = this.intersectionObserver) === null || _this$intersectionObs0 === void 0 || _this$intersectionObs0.disconnect();
+      (_this$intersectionObs1 = this.intersectionObserver) === null || _this$intersectionObs1 === void 0 || _this$intersectionObs1.disconnect();
       (_this$performanceObse2 = this.performanceObserver) === null || _this$performanceObse2 === void 0 || _this$performanceObse2.disconnect();
       this.isStarted = false;
       // Clean up caches when stopping

package/dist/types/config/index.d.ts

@@ -24,6 +24,9 @@ type SelectorConfig = {
     className: boolean;
     dataVC?: boolean;
 };
+type SegmentThreshold = {
+    readonly [key: string]: number;
+};
 type Rates = {
     readonly [key: string]: number;
 };
@@ -68,6 +71,7 @@ export type Config = {
     };
     readonly assetsConfig?: AssetsConfig;
     readonly enableBetterPageVisibilityApi?: boolean;
+    readonly segmentsThreshold?: SegmentThreshold;
     readonly vc?: {
         readonly enabled?: boolean;
         readonly heatmapSize?: number;

package/dist/types/create-payload/common/utils/index.d.ts

@@ -1,6 +1,7 @@
+import type { InteractionType, SegmentInfo } from '../../../common';
 import type { LabelStack, SegmentLabel } from '../../../interaction-context';
 import { type UFOSegmentType } from '../../../segment/segment';
-import { type getReactUFOPayloadVersion } from '../../utils/get-react-ufo-payload-version';
+import { getReactUFOPayloadVersion } from '../../utils/get-react-ufo-payload-version';
 export type SegmentItem = {
     n: string;
     c?: Record<string, SegmentItem>;
@@ -13,9 +14,19 @@ export declare function sanitizeUfoName(name: string): string;
 export declare function isSegmentLabel(obj: any): obj is SegmentLabel;
 export declare function buildSegmentTree(labelStacks: LabelStack[]): SegmentTree;
 export declare function stringifyLabelStackFully(labelStack: LabelStack): string;
+export declare function stringifyLabelStackWithoutId(labelStack: LabelStack): string;
 export declare function labelStackStartWith(labelStack: LabelStack, startWith: LabelStack): boolean;
 export declare function optimizeLabelStack(labelStack: LabelStack, reactUFOVersion: ReturnType<typeof getReactUFOPayloadVersion>): string | {
     t?: UFOSegmentType | undefined;
     s?: string | undefined;
     n: string;
 }[];
+export declare function getOldSegmentsLabelStack(segments: SegmentInfo[], interactionType: InteractionType): {
+    labelStack: any[];
+}[] | {
+    labelStack: string | {
+        t?: UFOSegmentType | undefined;
+        s?: string | undefined;
+        n: string;
+    }[];
+}[];

package/dist/types/vc/vc-observer/observers/ssr-placeholders/index.d.ts

@@ -30,6 +30,7 @@ export declare class SSRPlaceholderHandlers {
     isPlaceholderIgnored(element: HTMLElement): boolean;
     findNearestPlaceholderContainerIfIgnored(element: HTMLElement): HTMLElement;
     checkIfExistedAndSizeMatching(el: HTMLElement): Promise<unknown>;
+    checkIfExistedAndSizeMatchingV3(el: HTMLElement): boolean;
     getSize(el: HTMLElement): Promise<Rect>;
     validateReactComponentMatchToPlaceholder(el: HTMLElement): Promise<unknown>;
     hasSameSizePosition(rect: Rect | undefined, boundingClientRect: DOMRectReadOnly): boolean;

package/dist/types-ts4.5/config/index.d.ts

@@ -24,6 +24,9 @@ type SelectorConfig = {
     className: boolean;
     dataVC?: boolean;
 };
+type SegmentThreshold = {
+    readonly [key: string]: number;
+};
 type Rates = {
     readonly [key: string]: number;
 };
@@ -68,6 +71,7 @@ export type Config = {
     };
     readonly assetsConfig?: AssetsConfig;
     readonly enableBetterPageVisibilityApi?: boolean;
+    readonly segmentsThreshold?: SegmentThreshold;
     readonly vc?: {
         readonly enabled?: boolean;
         readonly heatmapSize?: number;

package/dist/types-ts4.5/create-payload/common/utils/index.d.ts

@@ -1,6 +1,7 @@
+import type { InteractionType, SegmentInfo } from '../../../common';
 import type { LabelStack, SegmentLabel } from '../../../interaction-context';
 import { type UFOSegmentType } from '../../../segment/segment';
-import { type getReactUFOPayloadVersion } from '../../utils/get-react-ufo-payload-version';
+import { getReactUFOPayloadVersion } from '../../utils/get-react-ufo-payload-version';
 export type SegmentItem = {
     n: string;
     c?: Record<string, SegmentItem>;
@@ -13,9 +14,19 @@ export declare function sanitizeUfoName(name: string): string;
 export declare function isSegmentLabel(obj: any): obj is SegmentLabel;
 export declare function buildSegmentTree(labelStacks: LabelStack[]): SegmentTree;
 export declare function stringifyLabelStackFully(labelStack: LabelStack): string;
+export declare function stringifyLabelStackWithoutId(labelStack: LabelStack): string;
 export declare function labelStackStartWith(labelStack: LabelStack, startWith: LabelStack): boolean;
 export declare function optimizeLabelStack(labelStack: LabelStack, reactUFOVersion: ReturnType<typeof getReactUFOPayloadVersion>): string | {
     t?: UFOSegmentType | undefined;
     s?: string | undefined;
     n: string;
 }[];
+export declare function getOldSegmentsLabelStack(segments: SegmentInfo[], interactionType: InteractionType): {
+    labelStack: any[];
+}[] | {
+    labelStack: string | {
+        t?: UFOSegmentType | undefined;
+        s?: string | undefined;
+        n: string;
+    }[];
+}[];

package/dist/types-ts4.5/vc/vc-observer/observers/ssr-placeholders/index.d.ts

@@ -30,6 +30,7 @@ export declare class SSRPlaceholderHandlers {
     isPlaceholderIgnored(element: HTMLElement): boolean;
     findNearestPlaceholderContainerIfIgnored(element: HTMLElement): HTMLElement;
     checkIfExistedAndSizeMatching(el: HTMLElement): Promise<unknown>;
+    checkIfExistedAndSizeMatchingV3(el: HTMLElement): boolean;
     getSize(el: HTMLElement): Promise<Rect>;
     validateReactComponentMatchToPlaceholder(el: HTMLElement): Promise<unknown>;
     hasSameSizePosition(rect: Rect | undefined, boundingClientRect: DOMRectReadOnly): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-ufo",
-	"version": "4.2.2",
+	"version": "4.2.4",
 	"description": "Parts of React UFO that are publicly available",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -197,6 +197,12 @@
 		},
 		"platform_ufo_report_non_htmlelement_selectors": {
 			"type": "boolean"
+		},
+		"platform_ufo_add_segments_count_threshold": {
+			"type": "boolean"
+		},
+		"platform_ufo_ssr_placeholder_resolution_ttvc_v3": {
+			"type": "boolean"
 		}
 	}
 }