@atlaskit/react-ufo 3.12.3 → 3.12.5

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

@@ -108,7 +108,9 @@ export default class ViewportObserver {
     });
     _defineProperty(this, "handleAttributeMutation", ({
       target,
-      attributeName
+      attributeName,
+      oldValue,
+      newValue
     }) => {
       var _this$intersectionObs4;
       (_this$intersectionObs4 = this.intersectionObserver) === null || _this$intersectionObs4 === void 0 ? void 0 : _this$intersectionObs4.watchAndTag(target, ({
@@ -119,7 +121,9 @@ export default class ViewportObserver {
           return {
             type: 'mutation:media',
             mutationData: {
-              attributeName
+              attributeName,
+              oldValue,
+              newValue
             }
           };
         }
@@ -131,7 +135,9 @@ export default class ViewportObserver {
           return {
             type: 'mutation:attribute:non-visual-style',
             mutationData: {
-              attributeName
+              attributeName,
+              oldValue,
+              newValue
             }
           };
         }
@@ -140,14 +146,18 @@ export default class ViewportObserver {
           return {
             type: 'mutation:attribute:no-layout-shift',
             mutationData: {
-              attributeName
+              attributeName,
+              oldValue,
+              newValue
             }
           };
         }
         return {
           type: 'mutation:attribute',
           mutationData: {
-            attributeName
+            attributeName,
+            oldValue,
+            newValue
           }
         };
       });

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

@@ -30,7 +30,9 @@ function createMutationObserver({
           var _mut$attributeName;
           onAttributeMutation({
             target: mut.target,
-            attributeName: (_mut$attributeName = mut.attributeName) !== null && _mut$attributeName !== void 0 ? _mut$attributeName : 'unknown'
+            attributeName: (_mut$attributeName = mut.attributeName) !== null && _mut$attributeName !== void 0 ? _mut$attributeName : 'unknown',
+            oldValue,
+            newValue
           });
         }
         continue;

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

@@ -101,7 +101,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/esm/create-payload/utils/get-vc-metrics.js

@@ -58,7 +58,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/esm/create-post-interaction-log-payload/index.js

@@ -129,13 +129,12 @@ function createPostInteractionLogPayload(_ref2) {
 
   // Align post-interaction-logs closer to UFO event behaviour,
   // e.g. also check for aborted or failed events
-  if (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, _toConsumableArray(reactProfilerTimings.map(function (t) {
     return t.commitTime;

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

@@ -5,10 +5,8 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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; }
-import { fg } from '@atlaskit/platform-feature-flags';
 import { getConfig } from '../config';
 import { VCObserverWrapper } from '../vc';
-import { VCObserver } from '../vc/vc-observer';
 var POST_INTERACTION_LOG_SEND_DEFAULT_TIMEOUT = 3000;
 var PostInteractionLog = /*#__PURE__*/function () {
   function PostInteractionLog() {
@@ -38,15 +36,9 @@ var PostInteractionLog = /*#__PURE__*/function () {
   return _createClass(PostInteractionLog, [{
     key: "initializeVCObserver",
     value: function initializeVCObserver(options) {
-      if (fg('platform_ufo_vc_align_revisions_on_watchdog_event')) {
-        this.vcObserver = new VCObserverWrapper(_objectSpread(_objectSpread({}, options), {}, {
-          isPostInteraction: true
-        }));
-      } else if (this.vcObserver === null) {
-        this.vcObserver = new VCObserver(_objectSpread(_objectSpread({}, options), {}, {
-          isPostInteraction: true
-        }));
-      }
+      this.vcObserver = new VCObserverWrapper(_objectSpread(_objectSpread({}, options), {}, {
+        isPostInteraction: true
+      }));
     }
   }, {
     key: "startVCObserver",

package/dist/esm/vc/index.js

@@ -122,7 +122,8 @@ export var 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;
@@ -149,7 +150,8 @@ export var 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/esm/vc/vc-observer/getVCRevisionDebugDetails.js

@@ -0,0 +1,35 @@
+export 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/esm/vc/vc-observer/index.js

@@ -13,6 +13,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { isVCRevisionEnabled } from '../../config';
 import { getActiveInteraction } from '../../interaction-metrics';
 import { attachAbortListeners } from './attachAbortListeners';
+import { getVCRevisionDebugDetails } from './getVCRevisionDebugDetails';
 import { getVCRevisionsData } from './getVCRevisionsData';
 import { getViewportHeight, getViewportWidth } from './getViewport';
 import { MultiRevisionHeatmap } from './heatmap/heatmap';
@@ -99,11 +100,11 @@ export var VCObserver = /*#__PURE__*/function () {
     });
     _defineProperty(this, "getVCResult", /*#__PURE__*/function () {
       var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.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 _regeneratorRuntime.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();
@@ -280,6 +281,31 @@ export var 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' && 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, 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, getVCRevisionDebugDetails({
+                      revision: 'fy25.02',
+                      isClean: !abortReasonInfo,
+                      abortReason: abortReason.reason,
+                      VCEntries: vcNext.VCEntries.rel,
+                      componentsLog: componentsLog,
+                      interactionId: interactionId
+                    }));
+                  }
                 }
               } catch (e) {
                 /*  do nothing */
@@ -380,16 +406,16 @@ export var VCObserver = /*#__PURE__*/function () {
         });
       }
     });
-    _defineProperty(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;
+    _defineProperty(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;
       }
@@ -474,10 +500,10 @@ export var VCObserver = /*#__PURE__*/function () {
       var unbinds = 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 = _slicedToArray(_ref10, 2),
-            key = _ref11[0],
-            time = _ref11[1];
+        Object.entries(window.__SSR_ABORT_LISTENERS__.aborts).forEach(function (_ref12) {
+          var _ref13 = _slicedToArray(_ref12, 2),
+            key = _ref13[0],
+            time = _ref13[1];
           if (time) {
             _this.abortReasonCallback(key, time);
           }
@@ -510,8 +536,8 @@ export var VCObserver = /*#__PURE__*/function () {
   }
   return _createClass(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();
@@ -533,12 +559,12 @@ export var 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
@@ -661,12 +687,12 @@ export var 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) {
@@ -732,11 +758,11 @@ export var 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 = _slicedToArray(_ref16, 2),
-          timestamp = _ref17[0],
-          entryPainted = _ref17[1];
+        var _ref19 = _slicedToArray(_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 = _toConsumableArray(new Set((_componentsLog$timest = componentsLog[timestamp]) === null || _componentsLog$timest === void 0 ? void 0 : _componentsLog$timest.filter(function (v) {

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

@@ -17,12 +17,14 @@ var DEFAULT_SELECTOR_CONFIG = {
 };
 var VCObserverNew = /*#__PURE__*/function () {
   function VCObserverNew(config) {
-    var _config$selectorConfi,
+    var _config$isPostInterac,
+      _config$selectorConfi,
       _this = this;
     _classCallCheck(this, VCObserverNew);
     _defineProperty(this, "viewportObserver", null);
     _defineProperty(this, "windowEventObserver", null);
     this.entriesTimeline = new EntriesTimeline();
+    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({
       onChange: function onChange(onChangeArg) {
@@ -40,13 +42,15 @@ var VCObserverNew = /*#__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
           }
         });
       }
@@ -57,8 +61,8 @@ var VCObserverNew = /*#__PURE__*/function () {
           type = _ref.type;
         _this.entriesTimeline.push({
           time: time,
-          type: 'window:event',
           data: {
+            type: 'window:event',
             eventType: type
           }
         });
@@ -85,11 +89,11 @@ var VCObserverNew = /*#__PURE__*/function () {
     key: "getVCResult",
     value: function () {
       var _getVCResult = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.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 _regeneratorRuntime.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 VCCalculator_FY25_03();
               orderedEntries = this.entriesTimeline.getOrderedEntries({
@@ -100,7 +104,9 @@ var VCObserverNew = /*#__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;