@atlaskit/react-ufo 3.10.3 → 3.11.0

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

@@ -15,6 +15,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 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");
 var _getVCRevisionsData = require("./getVCRevisionsData");
 var _getViewport = require("./getViewport");
@@ -105,11 +106,11 @@ 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, startTime, fullPrefix, rawData, abortReason, abortReasonInfo, heatmap, heatmapNext, outOfBoundaryInfo, totalTime, componentsLog, viewport, devToolsEnabled, ratios, multiHeatmap, isTTVCv1Disabled, vcAbortedResultWithRevisions, ttvcV1Result, VC, VCBox, VCEntries, totalPainted, _componentsLog, vcNext, outOfBoundary, stopTime, ttvcV1DevToolInfo, ttvcV2DevToolInfo, isVCClean, revisionsData, speedIndex, isTTVCv3Enabled;
+        var start, stop, tti, prefix, ssr, vc, isEventAborted, experienceKey, startTime, fullPrefix, rawData, abortReason, abortReasonInfo, heatmap, heatmapNext, outOfBoundaryInfo, totalTime, componentsLog, viewport, devToolsEnabled, ratios, multiHeatmap, isTTVCv1Disabled, vcAbortedResultWithRevisions, ttvcV1Result, VC, VCBox, VCEntries, totalPainted, _componentsLog, vcNext, outOfBoundary, stopTime, ttvcV1DevToolInfo, ttvcV2DevToolInfo, isVCClean, revisionsData, speedIndex, isTTVCv3Enabled;
         return _regenerator.default.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
-              start = _ref3.start, stop = _ref3.stop, tti = _ref3.tti, prefix = _ref3.prefix, ssr = _ref3.ssr, vc = _ref3.vc, isEventAborted = _ref3.isEventAborted;
+              start = _ref3.start, stop = _ref3.stop, tti = _ref3.tti, prefix = _ref3.prefix, ssr = _ref3.ssr, vc = _ref3.vc, isEventAborted = _ref3.isEventAborted, experienceKey = _ref3.experienceKey;
               startTime = performance.now(); // add local measurement
               fullPrefix = prefix !== undefined && prefix !== '' ? "".concat(prefix, ":") : '';
               rawData = vc !== undefined ? vc : _this.getVCRawData();
@@ -120,7 +121,7 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
               return _context.abrupt("return", {});
             case 6:
               abortReason = rawData.abortReason, abortReasonInfo = rawData.abortReasonInfo, heatmap = rawData.heatmap, heatmapNext = rawData.heatmapNext, outOfBoundaryInfo = rawData.outOfBoundaryInfo, totalTime = rawData.totalTime, componentsLog = rawData.componentsLog, viewport = rawData.viewport, devToolsEnabled = rawData.devToolsEnabled, ratios = rawData.ratios, multiHeatmap = rawData.multiHeatmap;
-              isTTVCv1Disabled = !(0, _config.isVCRevisionEnabled)('fy25.01'); // NOTE: as part of platform_ufo_add_vc_abort_reason_by_revisions feature,
+              isTTVCv1Disabled = (0, _platformFeatureFlags.fg)('platform_ufo_vc_enable_revisions_by_experience') ? !(0, _config.isVCRevisionEnabled)('fy25.01', experienceKey) : !(0, _config.isVCRevisionEnabled)('fy25.01'); // NOTE: as part of platform_ufo_add_vc_abort_reason_by_revisions feature,
               // we want to report abort by scroll events the same way as other abort reasons
               // i.e. not have the concept of `abortReason.blocking` anymore
               if (!(abortReasonInfo !== null && (0, _platformFeatureFlags.fg)('platform_ufo_add_vc_abort_reason_by_revisions'))) {
@@ -308,7 +309,8 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
                   VC: vcNext.VC,
                   VCBox: vcNext.VCBox
                 },
-                isEventAborted: isEventAborted
+                isEventAborted: isEventAborted,
+                experienceKey: experienceKey
               });
               speedIndex = (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "ufo:speedIndex", isTTVCv1Disabled ? vcNext.VCEntries.speedIndex : VCEntries.speedIndex), "ufo:next:speedIndex", vcNext.VCEntries.speedIndex);
               if (!isTTVCv1Disabled) {
@@ -317,7 +319,7 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
               }
               return _context.abrupt("return", _objectSpread(_objectSpread(_objectSpread((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(fullPrefix, "vc:size"), viewport), "".concat(fullPrefix, "vc:time"), Math.round(totalTime + (stopTime - startTime))), "".concat(fullPrefix, "vc:ratios"), ratios), outOfBoundary), {}, (0, _defineProperty2.default)({}, "".concat(fullPrefix, "vc:ignored"), _this.getIgnoredElements(componentsLog)), revisionsData), speedIndex));
             case 32:
-              isTTVCv3Enabled = (0, _config.isVCRevisionEnabled)('fy25.03');
+              isTTVCv3Enabled = (0, _platformFeatureFlags.fg)('platform_ufo_vc_enable_revisions_by_experience') ? (0, _config.isVCRevisionEnabled)('fy25.03', experienceKey) : (0, _config.isVCRevisionEnabled)('fy25.03');
               return _context.abrupt("return", _objectSpread(_objectSpread(_objectSpread((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
                 'metrics:vc': VC
               }, "".concat(fullPrefix, "vc:state"), true), "".concat(fullPrefix, "vc:clean"), isVCClean), "".concat(fullPrefix, "vc:dom"), VCBox), "".concat(fullPrefix, "vc:updates"), isTTVCv3Enabled ? undefined : VCEntries.rel.slice(0, 50)), "".concat(fullPrefix, "vc:size"), viewport), "".concat(fullPrefix, "vc:time"), Math.round(totalTime + (stopTime - startTime))), "".concat(fullPrefix, "vc:total"), totalPainted), "".concat(fullPrefix, "vc:ratios"), ratios), outOfBoundary), {}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(fullPrefix, "vc:next"), vcNext.VC), "".concat(fullPrefix, "vc:next:updates"), isTTVCv3Enabled ? undefined : vcNext.VCEntries.rel.slice(0, 50)), "".concat(fullPrefix, "vc:next:dom"), vcNext.VCBox), "".concat(fullPrefix, "vc:ignored"), _this.getIgnoredElements(componentsLog)), revisionsData), speedIndex));
@@ -334,7 +336,12 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
     (0, _defineProperty2.default)(this, "handleUpdate", function (rawTime, intersectionRect, targetName, element, type, ignoreReason, attributeName, oldValue, newValue) {
       _this.measureStart();
       _this.legacyHandleUpdate(rawTime, intersectionRect, targetName, element, type, ignoreReason, attributeName, oldValue, newValue);
-      if (!(0, _config.isVCRevisionEnabled)('fy25.03')) {
+      var isTTVCv3Disabled = !(0, _config.isVCRevisionEnabled)('fy25.03');
+      if ((0, _platformFeatureFlags.fg)('platform_ufo_vc_enable_revisions_by_experience')) {
+        var interaction = (0, _interactionMetrics.getActiveInteraction)();
+        isTTVCv3Disabled = !(0, _config.isVCRevisionEnabled)('fy25.03', interaction === null || interaction === void 0 ? void 0 : interaction.ufoName);
+      }
+      if (isTTVCv3Disabled) {
         _this.onViewportChangeDetected({
           timestamp: rawTime,
           intersectionRect: intersectionRect,
@@ -358,6 +365,10 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
           _this.applyChangesToHeatMap(mappedValues, time, _this.heatmapNext);
         }
         var isTTVCv1Disabled = !(0, _config.isVCRevisionEnabled)('fy25.01');
+        if ((0, _platformFeatureFlags.fg)('platform_ufo_vc_enable_revisions_by_experience')) {
+          var interaction = (0, _interactionMetrics.getActiveInteraction)();
+          isTTVCv1Disabled = !(0, _config.isVCRevisionEnabled)('fy25.01', interaction === null || interaction === void 0 ? void 0 : interaction.ufoName);
+        }
         if (!isTTVCv1Disabled && (!ignoreReason || ignoreReason === 'not-visible') && type !== 'attr') {
           _this.applyChangesToHeatMap(mappedValues, time, _this.heatmap);
         }

package/dist/cjs/vc/vc-observer-new/entries-timeline/index.js

@@ -7,13 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 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 EntriesTimeline = exports.default = /*#__PURE__*/function () {
   function EntriesTimeline() {
     (0, _classCallCheck2.default)(this, EntriesTimeline);
-    (0, _defineProperty2.default)(this, "unorderedEntries", []);
-    (0, _defineProperty2.default)(this, "sortedEntriesCache", new Map());
     this.unorderedEntries = [];
+    this.sortedEntriesCache = new Map();
   }
   return (0, _createClass2.default)(EntriesTimeline, [{
     key: "push",

package/dist/cjs/vc/vc-observer-new/metric-calculator/percentile-calc/canvas-heatmap/canvas-pixel.js

@@ -11,15 +11,16 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _taskYield = _interopRequireDefault(require("../../utils/task-yield"));
 // 24-bit color value
 /**
  * Class responsible for managing a scaled canvas and tracking pixel drawing operations.
- * It uses an OffscreenCanvas for better performance and maintains a mapping between
- * colors and timestamps for pixel counting purposes.
+ * It uses either an OffscreenCanvas (if available) or a regular HTML Canvas for better performance
+ * and maintains a mapping between colors and timestamps for pixel counting purposes.
  */
 var ViewportCanvas = exports.ViewportCanvas = /*#__PURE__*/function () {
-  /** The underlying OffscreenCanvas instance */
+  /** The underlying Canvas instance (either OffscreenCanvas or HTMLCanvasElement) */
 
   /** The 2D rendering context of the canvas */
 
@@ -50,10 +51,8 @@ var ViewportCanvas = exports.ViewportCanvas = /*#__PURE__*/function () {
     this.scaleX = this.scaledWidth / safeViewportWidth;
     this.scaleY = this.scaledHeight / safeViewportHeight;
 
-    // Initialize OffscreenCanvas with scaled dimensions
-    this.canvas = document.createElement('canvas');
-    this.canvas.width = this.scaledWidth;
-    this.canvas.height = this.scaledHeight;
+    // Initialize canvas with scaled dimensions
+    this.canvas = this.createCanvas(this.scaledWidth, this.scaledHeight);
     var ctx = this.canvas.getContext('2d', {
       alpha: false,
       // Disable alpha channel for better performance
@@ -66,9 +65,28 @@ var ViewportCanvas = exports.ViewportCanvas = /*#__PURE__*/function () {
     }
     this.ctx = ctx;
     this.ctx.globalCompositeOperation = 'source-over';
+    if ((0, _platformFeatureFlags.fg)('platform_ufo_use_offscreen_canvas')) {
+      this.ctx.imageSmoothingEnabled = false; // Disable image smoothing for better performance
+    }
     this.clear();
   }
+
+  /**
+   * Creates a canvas instance, falling back to HTMLCanvasElement if OffscreenCanvas is not available
+   * or if the feature flag is disabled
+   */
   return (0, _createClass2.default)(ViewportCanvas, [{
+    key: "createCanvas",
+    value: function createCanvas(width, height) {
+      if (typeof OffscreenCanvas !== 'undefined' && (0, _platformFeatureFlags.fg)('platform_ufo_use_offscreen_canvas')) {
+        return new OffscreenCanvas(width, height);
+      }
+      var canvas = document.createElement('canvas');
+      canvas.width = width;
+      canvas.height = height;
+      return canvas;
+    }
+  }, {
     key: "getScaledDimensions",
     value: function getScaledDimensions() {
       return {

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 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 _vcUtils = require("../../vc-observer/media-wrapper/vc-utils");
 var _isNonVisualStyleMutation = _interopRequireDefault(require("../../vc-observer/observers/non-visual-styles/is-non-visual-style-mutation"));
 var _intersectionObserver = require("./intersection-observer");
@@ -61,139 +62,154 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
     var _this = this;
     var onChange = _ref2.onChange;
     (0, _classCallCheck2.default)(this, ViewportObserver);
-    this.mapVisibleNodeRects = new WeakMap();
-    this.intersectionObserver = (0, _intersectionObserver.createIntersectionObserver)({
-      onEntry: function onEntry(_ref3) {
-        var target = _ref3.target,
-          rect = _ref3.rect,
-          time = _ref3.time,
-          type = _ref3.type,
-          mutationData = _ref3.mutationData;
-        if (!target) {
-          return;
-        }
-        var visible = isElementVisible(target);
-        var lastElementRect = _this.mapVisibleNodeRects.get(target);
-        _this.mapVisibleNodeRects.set(target, rect);
-        onChange({
-          time: time,
-          type: type,
-          elementRef: new WeakRef(target),
-          visible: visible,
-          rect: rect,
-          previousRect: lastElementRect,
-          mutationData: mutationData
-        });
+    (0, _defineProperty2.default)(this, "handleIntersectionEntry", function (_ref3) {
+      var target = _ref3.target,
+        rect = _ref3.rect,
+        time = _ref3.time,
+        type = _ref3.type,
+        mutationData = _ref3.mutationData;
+      if (!target) {
+        return;
       }
+      var visible = isElementVisible(target);
+      var lastElementRect = _this.mapVisibleNodeRects.get(target);
+      _this.mapVisibleNodeRects.set(target, rect);
+      _this.onChange({
+        time: time,
+        type: type,
+        elementRef: new WeakRef(target),
+        visible: visible,
+        rect: rect,
+        previousRect: lastElementRect,
+        mutationData: mutationData
+      });
     });
-    this.mutationObserver = (0, _mutationObserver.default)({
-      onChildListMutation: function onChildListMutation(_ref4) {
-        var _removedNodes$map;
-        var addedNodes = _ref4.addedNodes,
-          removedNodes = _ref4.removedNodes;
-        var removedNodeRects = (_removedNodes$map = removedNodes === null || removedNodes === void 0 ? void 0 : removedNodes.map(function (n) {
-          return _this.mapVisibleNodeRects.get(n);
-        })) !== null && _removedNodes$map !== void 0 ? _removedNodes$map : [];
-        addedNodes.forEach(function (addedNode) {
-          var _this$intersectionObs3;
-          // for (const elem of addedNode.querySelectorAll('*')) {
-          // 	this.intersectionObserver?.watchAndTag(elem, 'mutation:child-element');
-          // }
-
-          var sameDeletedNode = removedNodes.find(function (n) {
-            return n.isEqualNode(addedNode);
-          });
-          if (sameDeletedNode) {
-            var _this$intersectionObs;
-            (_this$intersectionObs = _this.intersectionObserver) === null || _this$intersectionObs === void 0 || _this$intersectionObs.watchAndTag(addedNode, 'mutation:remount');
-            return;
-          }
-          if ((0, _vcUtils.isContainedWithinMediaWrapper)(addedNode)) {
-            var _this$intersectionObs2;
-            (_this$intersectionObs2 = _this.intersectionObserver) === null || _this$intersectionObs2 === void 0 || _this$intersectionObs2.watchAndTag(addedNode, 'mutation:media');
-            return;
-          }
-          (_this$intersectionObs3 = _this.intersectionObserver) === null || _this$intersectionObs3 === void 0 || _this$intersectionObs3.watchAndTag(addedNode, createElementMutationsWatcher(removedNodeRects));
+    (0, _defineProperty2.default)(this, "handleChildListMutation", function (_ref4) {
+      var addedNodes = _ref4.addedNodes,
+        removedNodes = _ref4.removedNodes;
+      var removedNodeRects = removedNodes.map(function (n) {
+        return _this.mapVisibleNodeRects.get(n);
+      });
+      addedNodes.forEach(function (addedNode) {
+        var _this$intersectionObs3;
+        var sameDeletedNode = removedNodes.find(function (n) {
+          return n.isEqualNode(addedNode);
         });
-      },
-      onAttributeMutation: function onAttributeMutation(_ref5) {
-        var _this$intersectionObs4;
-        var target = _ref5.target,
-          attributeName = _ref5.attributeName;
-        (_this$intersectionObs4 = _this.intersectionObserver) === null || _this$intersectionObs4 === void 0 || _this$intersectionObs4.watchAndTag(target, function (_ref6) {
-          var target = _ref6.target,
-            rect = _ref6.rect;
-          if ((0, _vcUtils.isContainedWithinMediaWrapper)(target)) {
-            return {
-              type: 'mutation:media',
-              mutationData: {
-                attributeName: attributeName
-              }
-            };
-          }
-          if ((0, _isNonVisualStyleMutation.default)({
-            target: target,
-            attributeName: attributeName,
-            type: 'attributes'
-          })) {
-            return {
-              type: 'mutation:attribute:non-visual-style',
-              mutationData: {
-                attributeName: attributeName
-              }
-            };
-          }
-          var lastElementRect = _this.mapVisibleNodeRects.get(target);
-          if (lastElementRect && sameRectSize(rect, lastElementRect)) {
-            return {
-              type: 'mutation:attribute:no-layout-shift',
-              mutationData: {
-                attributeName: attributeName
-              }
-            };
-          }
+        if (sameDeletedNode) {
+          var _this$intersectionObs;
+          (_this$intersectionObs = _this.intersectionObserver) === null || _this$intersectionObs === void 0 || _this$intersectionObs.watchAndTag(addedNode, 'mutation:remount');
+          return;
+        }
+        if ((0, _vcUtils.isContainedWithinMediaWrapper)(addedNode)) {
+          var _this$intersectionObs2;
+          (_this$intersectionObs2 = _this.intersectionObserver) === null || _this$intersectionObs2 === void 0 || _this$intersectionObs2.watchAndTag(addedNode, 'mutation:media');
+          return;
+        }
+        (_this$intersectionObs3 = _this.intersectionObserver) === null || _this$intersectionObs3 === void 0 || _this$intersectionObs3.watchAndTag(addedNode, createElementMutationsWatcher(removedNodeRects));
+      });
+    });
+    (0, _defineProperty2.default)(this, "handleAttributeMutation", function (_ref5) {
+      var _this$intersectionObs4;
+      var target = _ref5.target,
+        attributeName = _ref5.attributeName;
+      (_this$intersectionObs4 = _this.intersectionObserver) === null || _this$intersectionObs4 === void 0 || _this$intersectionObs4.watchAndTag(target, function (_ref6) {
+        var target = _ref6.target,
+          rect = _ref6.rect;
+        if ((0, _vcUtils.isContainedWithinMediaWrapper)(target)) {
           return {
-            type: 'mutation:attribute',
+            type: 'mutation:media',
             mutationData: {
               attributeName: attributeName
             }
           };
-        });
-      }
-    });
-    this.performanceObserver = (0, _performanceObserver.default)({
-      onLayoutShift: function onLayoutShift(_ref7) {
-        var time = _ref7.time,
-          changedRects = _ref7.changedRects;
-        var _iterator = _createForOfIteratorHelper(changedRects),
-          _step;
-        try {
-          for (_iterator.s(); !(_step = _iterator.n()).done;) {
-            var changedRect = _step.value;
-            var target = changedRect.node;
-            if (target) {
-              onChange({
-                time: time,
-                elementRef: new WeakRef(target),
-                visible: true,
-                rect: changedRect.rect,
-                previousRect: changedRect.previousRect,
-                type: 'layout-shift'
-              });
+        }
+        if ((0, _isNonVisualStyleMutation.default)({
+          target: target,
+          attributeName: attributeName,
+          type: 'attributes'
+        })) {
+          return {
+            type: 'mutation:attribute:non-visual-style',
+            mutationData: {
+              attributeName: attributeName
+            }
+          };
+        }
+        var lastElementRect = _this.mapVisibleNodeRects.get(target);
+        if (lastElementRect && sameRectSize(rect, lastElementRect)) {
+          return {
+            type: 'mutation:attribute:no-layout-shift',
+            mutationData: {
+              attributeName: attributeName
             }
+          };
+        }
+        return {
+          type: 'mutation:attribute',
+          mutationData: {
+            attributeName: attributeName
+          }
+        };
+      });
+    });
+    (0, _defineProperty2.default)(this, "handleLayoutShift", function (_ref7) {
+      var time = _ref7.time,
+        changedRects = _ref7.changedRects;
+      var _iterator = _createForOfIteratorHelper(changedRects),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var changedRect = _step.value;
+          var target = changedRect.node;
+          if (target) {
+            _this.onChange({
+              time: time,
+              elementRef: new WeakRef(target),
+              visible: true,
+              rect: changedRect.rect,
+              previousRect: changedRect.previousRect,
+              type: 'layout-shift'
+            });
           }
-        } catch (err) {
-          _iterator.e(err);
-        } finally {
-          _iterator.f();
         }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
       }
     });
+    this.mapVisibleNodeRects = new WeakMap();
+    this.onChange = onChange;
+    this.isStarted = false;
+    this.intersectionObserver = null;
+    this.mutationObserver = null;
+    this.performanceObserver = null;
   }
   return (0, _createClass2.default)(ViewportObserver, [{
+    key: "initializeObservers",
+    value: function initializeObservers() {
+      if (this.isStarted) {
+        return;
+      }
+      this.intersectionObserver = (0, _intersectionObserver.createIntersectionObserver)({
+        onEntry: this.handleIntersectionEntry
+      });
+      this.mutationObserver = (0, _mutationObserver.default)({
+        onChildListMutation: this.handleChildListMutation,
+        onAttributeMutation: this.handleAttributeMutation
+      });
+      this.performanceObserver = (0, _performanceObserver.default)({
+        onLayoutShift: this.handleLayoutShift
+      });
+    }
+  }, {
     key: "start",
     value: function start() {
       var _this$mutationObserve, _this$performanceObse;
+      if (this.isStarted) {
+        return;
+      }
+      this.initializeObservers();
       (_this$mutationObserve = this.mutationObserver) === null || _this$mutationObserve === void 0 || _this$mutationObserve.observe(document.body, {
         attributeOldValue: true,
         attributes: true,
@@ -206,14 +222,19 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
         // @ts-ignore-error
         durationThreshold: 30
       });
+      this.isStarted = true;
     }
   }, {
     key: "stop",
     value: function stop() {
       var _this$mutationObserve2, _this$intersectionObs5, _this$performanceObse2;
+      if (!this.isStarted) {
+        return;
+      }
       (_this$mutationObserve2 = this.mutationObserver) === null || _this$mutationObserve2 === void 0 || _this$mutationObserve2.disconnect();
       (_this$intersectionObs5 = this.intersectionObserver) === null || _this$intersectionObs5 === void 0 || _this$intersectionObs5.disconnect();
       (_this$performanceObse2 = this.performanceObserver) === null || _this$performanceObse2 === void 0 || _this$performanceObse2.disconnect();
+      this.isStarted = false;
     }
   }]);
 }();

package/dist/es2019/config/index.js

@@ -1,3 +1,4 @@
+import { fg } from '@atlaskit/platform-feature-flags';
 let config;
 const DEFAULT_TTVC_REVISION = 'fy25.02';
 
@@ -5,28 +6,70 @@ const DEFAULT_TTVC_REVISION = 'fy25.02';
 // and they could delete empty members
 
 export function setUFOConfig(newConfig) {
-  config = newConfig;
+  if (fg('platform_ufo_vc_enable_revisions_by_experience')) {
+    var _newConfig$vc;
+    // Handle edge cases with `enabledVCRevisions`
+    const {
+      enabledVCRevisions
+    } = (_newConfig$vc = newConfig === null || newConfig === void 0 ? void 0 : newConfig.vc) !== null && _newConfig$vc !== void 0 ? _newConfig$vc : {};
+    if (typeof (enabledVCRevisions === null || enabledVCRevisions === void 0 ? void 0 : enabledVCRevisions.byExperience) === 'object') {
+      config = {
+        ...newConfig,
+        vc: {
+          ...newConfig.vc,
+          enabledVCRevisions: {
+            // enforce axiom about `enabledVCRevisions.all` config
+            all: Array.from(new Set([DEFAULT_TTVC_REVISION, ...(enabledVCRevisions === null || enabledVCRevisions === void 0 ? void 0 : enabledVCRevisions.all), ...Object.values(enabledVCRevisions === null || enabledVCRevisions === void 0 ? void 0 : enabledVCRevisions.byExperience).flat()])),
+            byExperience: {
+              ...(enabledVCRevisions === null || enabledVCRevisions === void 0 ? void 0 : enabledVCRevisions.byExperience)
+            }
+          }
+        }
+      };
+    } else {
+      config = newConfig;
+    }
+  } else {
+    config = newConfig;
+  }
 }
 export function getConfig() {
   return config;
 }
-export function getEnabledVCRevisions() {
+const isValidConfigArray = array => {
+  return Array.isArray(array) && array.length > 0;
+};
+export function getEnabledVCRevisions(experienceKey = '') {
   try {
     var _config$vc;
     if (!config) {
       return [];
     }
     if ((_config$vc = config.vc) !== null && _config$vc !== void 0 && _config$vc.enabled) {
-      var _config$vc2, _config$vc3;
-      return Array.isArray((_config$vc2 = config.vc) === null || _config$vc2 === void 0 ? void 0 : _config$vc2.enabledVCRevisions) && ((_config$vc3 = config.vc) === null || _config$vc3 === void 0 ? void 0 : _config$vc3.enabledVCRevisions.length) > 0 ? config.vc.enabledVCRevisions : [DEFAULT_TTVC_REVISION];
+      var _config$vc2, _enabledVCRevisions$b;
+      const {
+        enabledVCRevisions
+      } = (_config$vc2 = config.vc) !== null && _config$vc2 !== void 0 ? _config$vc2 : {};
+      if (isValidConfigArray(enabledVCRevisions === null || enabledVCRevisions === void 0 ? void 0 : (_enabledVCRevisions$b = enabledVCRevisions.byExperience) === null || _enabledVCRevisions$b === void 0 ? void 0 : _enabledVCRevisions$b[experienceKey]) && fg('platform_ufo_vc_enable_revisions_by_experience')) {
+        var _enabledVCRevisions$b2;
+        return (_enabledVCRevisions$b2 = enabledVCRevisions.byExperience) === null || _enabledVCRevisions$b2 === void 0 ? void 0 : _enabledVCRevisions$b2[experienceKey];
+      }
+      if (isValidConfigArray(enabledVCRevisions === null || enabledVCRevisions === void 0 ? void 0 : enabledVCRevisions.all)) {
+        return enabledVCRevisions.all;
+      }
+      return [DEFAULT_TTVC_REVISION];
     }
     return [];
   } catch {
     return [];
   }
 }
-export function isVCRevisionEnabled(revision) {
-  return getEnabledVCRevisions().includes(revision);
+export function isVCRevisionEnabled(revision, experienceKey) {
+  return getEnabledVCRevisions(experienceKey).includes(revision);
+}
+export function getMostRecentVCRevision(experienceKey = '') {
+  const enabledVCRevisions = getEnabledVCRevisions(experienceKey);
+  return enabledVCRevisions[enabledVCRevisions.length - 1];
 }
 export function getInteractionRate(name, interactionKind) {
   try {

package/dist/es2019/create-experimental-interaction-metrics-payload/index.js

@@ -67,7 +67,8 @@ export async function getExperimentalVCMetrics(interaction) {
       tti: (_interaction$apdex = interaction.apdex) === null || _interaction$apdex === void 0 ? void 0 : (_interaction$apdex$ = _interaction$apdex[0]) === null || _interaction$apdex$ === void 0 ? void 0 : _interaction$apdex$.stopTime,
       isEventAborted: !!interaction.abortReason,
       prefix,
-      vc: interaction.vc
+      vc: interaction.vc,
+      experienceKey: interaction.ufoName
     });
     const VC = result === null || result === void 0 ? void 0 : result['metrics:vc'];
     if (!VC || !(result !== null && result !== void 0 && result[`${prefix}:vc:clean`])) {

package/dist/es2019/create-payload/utils/get-vc-metrics.js

@@ -1,5 +1,5 @@
 import { fg } from '@atlaskit/platform-feature-flags';
-import { getConfig, isVCRevisionEnabled } from '../../config';
+import { getConfig, getMostRecentVCRevision, isVCRevisionEnabled } from '../../config';
 import { postInteractionLog } from '../../interaction-metrics';
 import { getVCObserver } from '../../vc';
 import getInteractionStatus from './get-interaction-status';
@@ -16,8 +16,9 @@ async function getVCMetrics(interaction) {
   }
   const interactionStatus = getInteractionStatus(interaction);
   const pageVisibilityUpToTTAI = getPageVisibilityUpToTTAI(interaction);
-  if ((interactionStatus.originalInteractionStatus !== 'SUCCEEDED' || pageVisibilityUpToTTAI !== 'visible') && fg('platform_ufo_no_vc_on_aborted')) {
-    getVCObserver().stop();
+  const shouldReportVCMetrics = interactionStatus.originalInteractionStatus === 'SUCCEEDED' && pageVisibilityUpToTTAI === 'visible';
+  if (!shouldReportVCMetrics && fg('platform_ufo_no_vc_on_aborted')) {
+    getVCObserver().stop(interaction.ufoName);
     return {};
   }
   const isSSREnabled = (config === null || config === void 0 ? void 0 : config.ssr) || (config === null || config === void 0 ? void 0 : (_config$vc$ssrWhiteli = config.vc.ssrWhitelist) === null || _config$vc$ssrWhiteli === void 0 ? void 0 : _config$vc$ssrWhiteli.includes(interaction.ufoName));
@@ -34,36 +35,52 @@ async function getVCMetrics(interaction) {
     prefix,
     vc: interaction.vc,
     isEventAborted: interactionStatus.originalInteractionStatus !== 'SUCCEEDED',
+    experienceKey: interaction.ufoName,
     ...ssr
   });
   if ((_config$experimentalI = config.experimentalInteractionMetrics) !== null && _config$experimentalI !== void 0 && _config$experimentalI.enabled) {
-    getVCObserver().stop();
+    getVCObserver().stop(interaction.ufoName);
   }
   postInteractionLog.setLastInteractionFinishVCResult(result);
-  if (!isVCRevisionEnabled('fy25.01')) {
+  if (fg('platform_ufo_vc_enable_revisions_by_experience')) {
     var _result$ufoVcRev;
-    const ttvcV2Revision = result === null || result === void 0 ? void 0 : (_result$ufoVcRev = result['ufo:vc:rev']) === null || _result$ufoVcRev === void 0 ? void 0 : _result$ufoVcRev.find(({
+    const mostRecentVCRevision = getMostRecentVCRevision(interaction.ufoName);
+    const mostRecentVCRevisionPayload = result === null || result === void 0 ? void 0 : (_result$ufoVcRev = result['ufo:vc:rev']) === null || _result$ufoVcRev === void 0 ? void 0 : _result$ufoVcRev.find(({
       revision
-    }) => revision === 'fy25.02');
-    if (!(ttvcV2Revision !== null && ttvcV2Revision !== void 0 && ttvcV2Revision.clean)) {
+    }) => revision === mostRecentVCRevision);
+    if (!shouldReportVCMetrics || !(mostRecentVCRevisionPayload !== null && mostRecentVCRevisionPayload !== void 0 && mostRecentVCRevisionPayload.clean)) {
       return result;
     }
     return {
       ...result,
-      'metric:vc90': ttvcV2Revision['metric:vc90']
+      'metric:vc90': mostRecentVCRevisionPayload['metric:vc90']
     };
   } else {
-    const VC = result === null || result === void 0 ? void 0 : result['metrics:vc'];
-    if (!VC || !(result !== null && result !== void 0 && result[`${prefix}:vc:clean`])) {
-      return result;
-    }
-    if (interactionStatus.originalInteractionStatus !== 'SUCCEEDED' || pageVisibilityUpToTTAI !== 'visible') {
-      return result;
+    if (!isVCRevisionEnabled('fy25.01')) {
+      var _result$ufoVcRev2;
+      const ttvcV2Revision = result === null || result === void 0 ? void 0 : (_result$ufoVcRev2 = result['ufo:vc:rev']) === null || _result$ufoVcRev2 === void 0 ? void 0 : _result$ufoVcRev2.find(({
+        revision
+      }) => revision === 'fy25.02');
+      if (!(ttvcV2Revision !== null && ttvcV2Revision !== void 0 && ttvcV2Revision.clean)) {
+        return result;
+      }
+      return {
+        ...result,
+        'metric:vc90': ttvcV2Revision['metric:vc90']
+      };
+    } else {
+      const VC = result === null || result === void 0 ? void 0 : result['metrics:vc'];
+      if (!VC || !(result !== null && result !== void 0 && result[`${prefix}:vc:clean`])) {
+        return result;
+      }
+      if (interactionStatus.originalInteractionStatus !== 'SUCCEEDED' || pageVisibilityUpToTTAI !== 'visible') {
+        return result;
+      }
+      return {
+        ...result,
+        'metric:vc90': VC['90']
+      };
     }
-    return {
-      ...result,
-      'metric:vc90': VC['90']
-    };
   }
 }
 export default getVCMetrics;

package/dist/es2019/interaction-metrics/index.js

@@ -719,7 +719,8 @@ export function addNewInteraction(interactionId, ufoName, type, startTime, rate,
   if (type === 'transition') {
     var _getConfig14, _getConfig14$experime;
     getVCObserver().start({
-      startTime
+      startTime,
+      experienceKey: ufoName
     });
     postInteractionLog.startVCObserver({
       startTime