@atlaskit/react-ufo 3.12.3 → 3.12.5

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 3.12.5
+
+### Patch Changes
+
+- [#156815](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/156815)
+  [`a6856b45ef58f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a6856b45ef58f) -
+  make ttvc v3 more debugable
+
+## 3.12.4
+
+### Patch Changes
+
+- [#156458](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/156458)
+  [`98659a9117f77`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/98659a9117f77) -
+  FG cleanup - platform_ufo_post_interaction_use_vc_rev
+
 ## 3.12.3
 
 ### Patch Changes

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

@@ -112,7 +112,8 @@ function _getExperimentalVCMetrics() {
             isEventAborted: !!interaction.abortReason,
             prefix: prefix,
             vc: interaction.vc,
-            experienceKey: interaction.ufoName
+            experienceKey: interaction.ufoName,
+            interactionId: interaction.id
           });
         case 4:
           result = _context.sent;

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

@@ -65,7 +65,8 @@ function _getVCMetrics() {
             prefix: prefix,
             vc: interaction.vc,
             isEventAborted: interactionStatus.originalInteractionStatus !== 'SUCCEEDED',
-            experienceKey: interaction.ufoName
+            experienceKey: interaction.ufoName,
+            interactionId: interaction.id
           }, ssr));
         case 18:
           result = _context.sent;

package/dist/cjs/create-post-interaction-log-payload/index.js

@@ -136,13 +136,12 @@ function createPostInteractionLogPayload(_ref2) {
 
   // Align post-interaction-logs closer to UFO event behaviour,
   // e.g. also check for aborted or failed events
-  if ((0, _platformFeatureFlags.fg)('platform_ufo_vc_align_revisions_on_watchdog_event')) {
-    if (lastInteractionFinish.abortReason) {
-      return null;
-    }
-    if (lastInteractionFinish.errors.length > 0) {
-      return null;
-    }
+
+  if (lastInteractionFinish.abortReason) {
+    return null;
+  }
+  if (lastInteractionFinish.errors.length > 0) {
+    return null;
   }
   var maxEndTimeFromProfiler = reactProfilerTimings ? Math.max.apply(Math, (0, _toConsumableArray2.default)(reactProfilerTimings.map(function (t) {
     return t.commitTime;

package/dist/cjs/interaction-metrics/post-interaction-log.js

@@ -10,10 +10,8 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _config = require("../config");
 var _vc = require("../vc");
-var _vcObserver = require("../vc/vc-observer");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var POST_INTERACTION_LOG_SEND_DEFAULT_TIMEOUT = 3000;
@@ -45,15 +43,9 @@ var PostInteractionLog = exports.default = /*#__PURE__*/function () {
   return (0, _createClass2.default)(PostInteractionLog, [{
     key: "initializeVCObserver",
     value: function initializeVCObserver(options) {
-      if ((0, _platformFeatureFlags.fg)('platform_ufo_vc_align_revisions_on_watchdog_event')) {
-        this.vcObserver = new _vc.VCObserverWrapper(_objectSpread(_objectSpread({}, options), {}, {
-          isPostInteraction: true
-        }));
-      } else if (this.vcObserver === null) {
-        this.vcObserver = new _vcObserver.VCObserver(_objectSpread(_objectSpread({}, options), {}, {
-          isPostInteraction: true
-        }));
-      }
+      this.vcObserver = new _vc.VCObserverWrapper(_objectSpread(_objectSpread({}, options), {}, {
+        isPostInteraction: true
+      }));
     }
   }, {
     key: "startVCObserver",

package/dist/cjs/vc/index.js

@@ -131,7 +131,8 @@ var VCObserverWrapper = exports.VCObserverWrapper = /*#__PURE__*/function () {
               _context.next = 13;
               return (_this$newVCObserver5 = this.newVCObserver) === null || _this$newVCObserver5 === void 0 ? void 0 : _this$newVCObserver5.getVCResult({
                 start: param.start,
-                stop: param.stop
+                stop: param.stop,
+                interactionId: param.interactionId
               });
             case 13:
               _context.t1 = _context.sent;
@@ -158,7 +159,8 @@ var VCObserverWrapper = exports.VCObserverWrapper = /*#__PURE__*/function () {
               _context.next = 28;
               return (_this$newVCObserver6 = this.newVCObserver) === null || _this$newVCObserver6 === void 0 ? void 0 : _this$newVCObserver6.getVCResult({
                 start: param.start,
-                stop: param.stop
+                stop: param.stop,
+                interactionId: param.interactionId
               });
             case 28:
               newResult = _context.sent;

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

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getVCRevisionDebugDetails = getVCRevisionDebugDetails;
+function getVCRevisionDebugDetails(_ref) {
+  var revision = _ref.revision,
+    isClean = _ref.isClean,
+    abortReason = _ref.abortReason,
+    VCEntries = _ref.VCEntries,
+    componentsLog = _ref.componentsLog,
+    interactionId = _ref.interactionId;
+  return {
+    revision: revision,
+    isClean: isClean,
+    abortReason: abortReason,
+    vcLogs: VCEntries.map(function (entry) {
+      return {
+        time: entry.time,
+        viewportPercentage: entry.vc,
+        entries: entry.elements.map(function (element) {
+          var _componentsLog$entry$;
+          var logEntry = (_componentsLog$entry$ = componentsLog[entry.time]) === null || _componentsLog$entry$ === void 0 ? void 0 : _componentsLog$entry$.find(function (log) {
+            return log.targetName === element;
+          });
+          return {
+            elementName: element,
+            type: logEntry === null || logEntry === void 0 ? void 0 : logEntry.type,
+            rect: logEntry === null || logEntry === void 0 ? void 0 : logEntry.intersectionRect,
+            visible: true,
+            attributeName: logEntry === null || logEntry === void 0 ? void 0 : logEntry.attributeName,
+            oldValue: logEntry === null || logEntry === void 0 ? void 0 : logEntry.oldValue,
+            newValue: logEntry === null || logEntry === void 0 ? void 0 : logEntry.newValue
+          };
+        })
+      };
+    }),
+    interactionId: interactionId
+  };
+}

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

@@ -17,6 +17,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _config = require("../../config");
 var _interactionMetrics = require("../../interaction-metrics");
 var _attachAbortListeners = require("./attachAbortListeners");
+var _getVCRevisionDebugDetails = require("./getVCRevisionDebugDetails");
 var _getVCRevisionsData = require("./getVCRevisionsData");
 var _getViewport = require("./getViewport");
 var _heatmap = require("./heatmap/heatmap");
@@ -106,11 +107,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, 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;
+        var start, stop, tti, prefix, ssr, vc, isEventAborted, experienceKey, interactionId, 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, _ufo_devtool_onVCRev2, _ref10, _ufo_devtool_onVCRev, _ref9, 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, experienceKey = _ref3.experienceKey;
+              start = _ref3.start, stop = _ref3.stop, tti = _ref3.tti, prefix = _ref3.prefix, ssr = _ref3.ssr, vc = _ref3.vc, isEventAborted = _ref3.isEventAborted, experienceKey = _ref3.experienceKey, interactionId = _ref3.interactionId;
               startTime = performance.now(); // add local measurement
               fullPrefix = prefix !== undefined && prefix !== '' ? "".concat(prefix, ":") : '';
               rawData = vc !== undefined ? vc : _this.getVCRawData();
@@ -287,6 +288,31 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
                       entries: isTTVCv1Disabled ? vcNext.VCEntries.rel : VCEntries.rel
                     }
                   }));
+
+                  // Add devtool callback for both v1 and v2
+                  if (typeof window.__ufo_devtool_onVCRevisionReady__ === 'function' && (0, _platformFeatureFlags.fg)('platform_ufo_ttvc_v3_devtool')) {
+                    // Handle v1 if not disabled
+                    if (!isTTVCv1Disabled) {
+                      (_ufo_devtool_onVCRev = (_ref9 = window).__ufo_devtool_onVCRevisionReady__) === null || _ufo_devtool_onVCRev === void 0 || _ufo_devtool_onVCRev.call(_ref9, (0, _getVCRevisionDebugDetails.getVCRevisionDebugDetails)({
+                        revision: 'fy25.01',
+                        isClean: !abortReasonInfo,
+                        abortReason: abortReason.reason,
+                        VCEntries: VCEntries.rel,
+                        componentsLog: componentsLog,
+                        interactionId: interactionId
+                      }));
+                    }
+
+                    // Handle v2
+                    (_ufo_devtool_onVCRev2 = (_ref10 = window).__ufo_devtool_onVCRevisionReady__) === null || _ufo_devtool_onVCRev2 === void 0 || _ufo_devtool_onVCRev2.call(_ref10, (0, _getVCRevisionDebugDetails.getVCRevisionDebugDetails)({
+                      revision: 'fy25.02',
+                      isClean: !abortReasonInfo,
+                      abortReason: abortReason.reason,
+                      VCEntries: vcNext.VCEntries.rel,
+                      componentsLog: componentsLog,
+                      interactionId: interactionId
+                    }));
+                  }
                 }
               } catch (e) {
                 /*  do nothing */
@@ -387,16 +413,16 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
         });
       }
     });
-    (0, _defineProperty2.default)(this, "onViewportChangeDetected", function (_ref9) {
-      var element = _ref9.element,
-        type = _ref9.type,
-        ignoreReason = _ref9.ignoreReason,
-        timestamp = _ref9.timestamp,
-        targetName = _ref9.targetName,
-        intersectionRect = _ref9.intersectionRect,
-        attributeName = _ref9.attributeName,
-        oldValue = _ref9.oldValue,
-        newValue = _ref9.newValue;
+    (0, _defineProperty2.default)(this, "onViewportChangeDetected", function (_ref11) {
+      var element = _ref11.element,
+        type = _ref11.type,
+        ignoreReason = _ref11.ignoreReason,
+        timestamp = _ref11.timestamp,
+        targetName = _ref11.targetName,
+        intersectionRect = _ref11.intersectionRect,
+        attributeName = _ref11.attributeName,
+        oldValue = _ref11.oldValue,
+        newValue = _ref11.newValue;
       if (_this.multiHeatmap === null) {
         return;
       }
@@ -481,10 +507,10 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
       var unbinds = (0, _attachAbortListeners.attachAbortListeners)(window, _this.viewport, _this.abortReasonCallback);
       if ((_window = window) !== null && _window !== void 0 && _window.__SSR_ABORT_LISTENERS__) {
         var _window2;
-        Object.entries(window.__SSR_ABORT_LISTENERS__.aborts).forEach(function (_ref10) {
-          var _ref11 = (0, _slicedToArray2.default)(_ref10, 2),
-            key = _ref11[0],
-            time = _ref11[1];
+        Object.entries(window.__SSR_ABORT_LISTENERS__.aborts).forEach(function (_ref12) {
+          var _ref13 = (0, _slicedToArray2.default)(_ref12, 2),
+            key = _ref13[0],
+            time = _ref13[1];
           if (time) {
             _this.abortReasonCallback(key, time);
           }
@@ -517,8 +543,8 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
   }
   return (0, _createClass2.default)(VCObserver, [{
     key: "start",
-    value: function start(_ref12) {
-      var startTime = _ref12.startTime;
+    value: function start(_ref14) {
+      var startTime = _ref14.startTime;
       this.active = true;
       if (this.observers.isBrowserSupported()) {
         this.setViewportSize();
@@ -540,12 +566,12 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
   }, {
     key: "getIgnoredElements",
     value: function getIgnoredElements(componentsLog) {
-      return Object.values(componentsLog).flat().filter(function (_ref13) {
-        var ignoreReason = _ref13.ignoreReason;
+      return Object.values(componentsLog).flat().filter(function (_ref15) {
+        var ignoreReason = _ref15.ignoreReason;
         return Boolean(ignoreReason);
-      }).map(function (_ref14) {
-        var targetName = _ref14.targetName,
-          ignoreReason = _ref14.ignoreReason;
+      }).map(function (_ref16) {
+        var targetName = _ref16.targetName,
+          ignoreReason = _ref16.ignoreReason;
         return {
           targetName: targetName,
           ignoreReason: ignoreReason
@@ -668,12 +694,12 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
     }
   }], [{
     key: "calculateVC",
-    value: function calculateVC(_ref15) {
-      var heatmap = _ref15.heatmap,
-        _ref15$ssr = _ref15.ssr,
-        ssr = _ref15$ssr === void 0 ? UNUSED_SECTOR : _ref15$ssr,
-        componentsLog = _ref15.componentsLog,
-        viewport = _ref15.viewport;
+    value: function calculateVC(_ref17) {
+      var heatmap = _ref17.heatmap,
+        _ref17$ssr = _ref17.ssr,
+        ssr = _ref17$ssr === void 0 ? UNUSED_SECTOR : _ref17$ssr,
+        componentsLog = _ref17.componentsLog,
+        viewport = _ref17.viewport;
       var lastUpdate = {};
       var totalPainted = 0;
       if (ssr !== UNUSED_SECTOR) {
@@ -739,11 +765,11 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
         });
         return VCRatio;
       }, 0);
-      var VCEntries = entries.reduce(function (acc, _ref16, i) {
+      var VCEntries = entries.reduce(function (acc, _ref18, i) {
         var _acc$abs, _componentsLog$timest, _acc$rel$vc, _acc$rel;
-        var _ref17 = (0, _slicedToArray2.default)(_ref16, 2),
-          timestamp = _ref17[0],
-          entryPainted = _ref17[1];
+        var _ref19 = (0, _slicedToArray2.default)(_ref18, 2),
+          timestamp = _ref19[0],
+          entryPainted = _ref19[1];
         var currentlyPainted = entryPainted + (((_acc$abs = acc.abs[i - 1]) === null || _acc$abs === void 0 ? void 0 : _acc$abs[1]) || 0);
         var currentlyPaintedRatio = Math.round(currentlyPainted / totalPainted * 1000) / 10;
         var logEntry = (0, _toConsumableArray2.default)(new Set((_componentsLog$timest = componentsLog[timestamp]) === null || _componentsLog$timest === void 0 ? void 0 : _componentsLog$timest.filter(function (v) {

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

@@ -24,12 +24,14 @@ var DEFAULT_SELECTOR_CONFIG = {
 };
 var VCObserverNew = exports.default = /*#__PURE__*/function () {
   function VCObserverNew(config) {
-    var _config$selectorConfi,
+    var _config$isPostInterac,
+      _config$selectorConfi,
       _this = this;
     (0, _classCallCheck2.default)(this, VCObserverNew);
     (0, _defineProperty2.default)(this, "viewportObserver", null);
     (0, _defineProperty2.default)(this, "windowEventObserver", null);
     this.entriesTimeline = new _entriesTimeline.default();
+    this.isPostInteraction = (_config$isPostInterac = config.isPostInteraction) !== null && _config$isPostInterac !== void 0 ? _config$isPostInterac : false;
     this.selectorConfig = (_config$selectorConfi = config.selectorConfig) !== null && _config$selectorConfi !== void 0 ? _config$selectorConfi : DEFAULT_SELECTOR_CONFIG;
     this.viewportObserver = new _viewportObserver.default({
       onChange: function onChange(onChangeArg) {
@@ -47,13 +49,15 @@ var VCObserverNew = exports.default = /*#__PURE__*/function () {
         }
         _this.entriesTimeline.push({
           time: time,
-          type: type,
           data: {
+            type: type,
             elementName: elementName,
             rect: rect,
             previousRect: previousRect,
             visible: visible,
-            attributeName: mutationData === null || mutationData === void 0 ? void 0 : mutationData.attributeName
+            attributeName: mutationData === null || mutationData === void 0 ? void 0 : mutationData.attributeName,
+            oldValue: mutationData === null || mutationData === void 0 ? void 0 : mutationData.oldValue,
+            newValue: mutationData === null || mutationData === void 0 ? void 0 : mutationData.newValue
           }
         });
       }
@@ -64,8 +68,8 @@ var VCObserverNew = exports.default = /*#__PURE__*/function () {
           type = _ref.type;
         _this.entriesTimeline.push({
           time: time,
-          type: 'window:event',
           data: {
+            type: 'window:event',
             eventType: type
           }
         });
@@ -92,11 +96,11 @@ var VCObserverNew = exports.default = /*#__PURE__*/function () {
     key: "getVCResult",
     value: function () {
       var _getVCResult = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(param) {
-        var start, stop, results, calculator_fy25_03, orderedEntries, fy25_03;
+        var start, stop, interactionId, results, calculator_fy25_03, orderedEntries, fy25_03;
         return _regenerator.default.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
-              start = param.start, stop = param.stop;
+              start = param.start, stop = param.stop, interactionId = param.interactionId;
               results = [];
               calculator_fy25_03 = new _fy25_.default();
               orderedEntries = this.entriesTimeline.getOrderedEntries({
@@ -107,7 +111,9 @@ var VCObserverNew = exports.default = /*#__PURE__*/function () {
               return calculator_fy25_03.calculate({
                 orderedEntries: orderedEntries,
                 startTime: start,
-                stopTime: stop
+                stopTime: stop,
+                interactionId: interactionId,
+                isPostInteraction: this.isPostInteraction
               });
             case 6:
               fy25_03 = _context.sent;