@atlaskit/react-ufo 2.4.7 → 2.5.0

package/dist/cjs/interaction-metrics-init/index.js

@@ -26,14 +26,6 @@ function sinkInteraction(instance, payloadPackage) {
     });
   });
 }
-function sinkExperimentalInteractionMetrics(instance, payloadPackage) {
-  (0, _interactionMetrics.sinkExperimentalHandler)(function (interactionId, interaction) {
-    (0, _scheduler.unstable_scheduleCallback)(_scheduler.unstable_IdlePriority, function () {
-      var payload = payloadPackage.createExperimentalInteractionMetricsPayload(interactionId, interaction);
-      instance.sendOperationalEvent(payload);
-    });
-  });
-}
 function sinkPostInteractionLog(instance, createPostInteractionLogPayload) {
   (0, _interactionMetrics.sinkPostInteractionLogHandler)(function (logOutput) {
     (0, _scheduler.unstable_scheduleCallback)(_scheduler.unstable_IdlePriority, function () {
@@ -64,43 +56,33 @@ var init = exports.init = function init(analyticsWebClientAsync, config) {
     _interactionMetrics.postInteractionLog.startVCObserver({
       startTime: 0
     });
-    _interactionMetrics.experimentalInteractionLog.initializeVCObserver(vcOptions).startVCObserver({
-      startTime: 0
-    });
   }
   (0, _hiddenTiming.setupHiddenTimingCapture)();
   (0, _additionalPayload.startLighthouseObserver)();
   initialized = true;
-  Promise.all([analyticsWebClientAsync, Promise.resolve().then(function () {
+  Promise.all([analyticsWebClientAsync, // eslint-disable-next-line import/dynamic-import-chunkname
+  Promise.resolve().then(function () {
     return _interopRequireWildcard(require( /* webpackChunkName: "create-payloads" */'../create-payload'));
-  }), Promise.resolve().then(function () {
-    return _interopRequireWildcard(require( /* webpackChunkName: "create-experimental-interaction-metrics-payload" */'../create-experimental-interaction-metrics-payload'));
-  }), Promise.resolve().then(function () {
-    return _interopRequireWildcard(require( /* webpackChunkName: "create-post-interaction-log-payload" */'../create-post-interaction-log-payload'));
+  }), // eslint-disable-next-line import/dynamic-import-chunkname
+  Promise.resolve().then(function () {
+    return _interopRequireWildcard(require( /* webpackChunkName: "create-post-intreaction-log-payload" */'../create-post-interaction-log-payload'));
   })]).then(function (_ref) {
-    var _ref2 = (0, _slicedToArray2.default)(_ref, 4),
+    var _ref2 = (0, _slicedToArray2.default)(_ref, 3),
       awc = _ref2[0],
       payloadPackage = _ref2[1],
-      createExperimentalInteractionMetricsPayload = _ref2[2],
-      createPostInteractionLogPayloadPackage = _ref2[3];
+      createPostInteractionLogPayloadPackage = _ref2[2];
     if (awc.getAnalyticsWebClientPromise) {
       awc.getAnalyticsWebClientPromise().then(function (client) {
-        var _config$experimentalI, _config$postInteracti;
+        var _config$postInteracti;
         var instance = client.getInstance();
         sinkInteraction(instance, payloadPackage);
-        if (config !== null && config !== void 0 && (_config$experimentalI = config.experimentalInteractionMetrics) !== null && _config$experimentalI !== void 0 && _config$experimentalI.enabled) {
-          sinkExperimentalInteractionMetrics(instance, createExperimentalInteractionMetricsPayload);
-        }
         if ((_config$postInteracti = config.postInteractionLog) !== null && _config$postInteracti !== void 0 && _config$postInteracti.enabled) {
           sinkPostInteractionLog(instance, createPostInteractionLogPayloadPackage.default);
         }
       });
     } else if (awc.sendOperationalEvent) {
-      var _config$experimentalI2, _config$postInteracti2;
+      var _config$postInteracti2;
       sinkInteraction(awc, payloadPackage);
-      if (config !== null && config !== void 0 && (_config$experimentalI2 = config.experimentalInteractionMetrics) !== null && _config$experimentalI2 !== void 0 && _config$experimentalI2.enabled) {
-        sinkExperimentalInteractionMetrics(awc, createExperimentalInteractionMetricsPayload);
-      }
       if ((_config$postInteracti2 = config.postInteractionLog) !== null && _config$postInteracti2 !== void 0 && _config$postInteracti2.enabled) {
         sinkPostInteractionLog(awc, createPostInteractionLogPayloadPackage.default);
       }

package/dist/cjs/load-hold/UFOLoadHold.js

@@ -32,7 +32,8 @@ var useLayoutEffectSAFE = typeof window === 'undefined' ? _react.useEffect : _re
  *   return (
  *     <>
  *       <Skeleton />
- *       <UFOLoadHold name="card" />
+ *       <UFOLoadHold name="card">
+ *     </UFOLoadHold>
  *   )
  * }
  * ```
@@ -67,8 +68,8 @@ function UFOLoadHold(_ref) {
   // react-18: useId instead
   var context = (0, _react.useContext)(_interactionContext.default);
   useLayoutEffectSAFE(function () {
-    if (hold && context != null) {
-      return context.hold(name, experimental);
+    if (hold && !experimental && context != null) {
+      return context.hold(name);
     }
   }, [hold, context, name]);
 

package/dist/cjs/segment/segment.js

@@ -91,14 +91,15 @@ function UFOSegment(_ref) {
         }
       }
     }
-    function _internalHold(labelStack, name) {
-      var experimental = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    function _internalHold(labelStack, name
+    // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+    ) {
       if (interactionId.current != null) {
         if (parentContext) {
-          return parentContext._internalHold(labelStack, name, experimental);
+          return parentContext._internalHold(labelStack, name);
         } else {
           var capturedInteractionId = interactionId.current;
-          var disposeHold = (0, _interactionMetrics.addHold)(interactionId.current, labelStack, name, experimental);
+          var disposeHold = (0, _interactionMetrics.addHold)(interactionId.current, labelStack, name);
           return function () {
             if (capturedInteractionId === interactionId.current) {
               disposeHold();
@@ -107,7 +108,9 @@ function UFOSegment(_ref) {
         }
       }
     }
-    function _internalHoldByID(labelStack, id, name, remove) {
+    function _internalHoldByID(labelStack, id, name, remove
+    // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+    ) {
       if (interactionId.current != null) {
         if (parentContext) {
           parentContext._internalHoldByID(labelStack, name, id, remove);
@@ -130,8 +133,7 @@ function UFOSegment(_ref) {
       labelStack: labelStack,
       hold: function hold() {
         var name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'unknown';
-        var experimental = arguments.length > 1 ? arguments[1] : undefined;
-        return this._internalHold(this.labelStack, name, experimental);
+        return this._internalHold(this.labelStack, name);
       },
       addHoldByID: function addHoldByID(labelStack, id) {
         var name = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'unknown';

package/dist/cjs/trace-pageload/index.js

@@ -4,7 +4,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.AWAITING_PAGELOAD_NAME = void 0;
 exports.default = traceUFOPageLoad;
 exports.updatePageloadName = updatePageloadName;
 var _uuid = require("uuid");
@@ -14,7 +13,7 @@ var _experienceTraceIdContext = require("../experience-trace-id-context");
 var _interactionIdContext = require("../interaction-id-context");
 var _interactionMetrics = require("../interaction-metrics");
 var _routeNameContext = _interopRequireDefault(require("../route-name-context"));
-var AWAITING_PAGELOAD_NAME = exports.AWAITING_PAGELOAD_NAME = 'awaiting_pageload_name';
+var AWAITING_PAGELOAD_NAME = 'awaiting_pageload_name';
 function traceUFOPageLoad(ufoName) {
   var routeName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ufoName;
   var activeInteraction = (0, _interactionMetrics.getActiveInteraction)();

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

@@ -10,6 +10,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _attachAbortListeners = require("./attachAbortListeners");
 var _getViewport = require("./getViewport");
 var _observers = require("./observers");
@@ -70,7 +71,7 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
       var info = _this.abortReason.info !== '' ? " ".concat(_this.abortReason.info) : '';
       return "".concat(_this.abortReason.reason).concat(info);
     });
-    (0, _defineProperty2.default)(this, "getVCRawData", function () {
+    (0, _defineProperty2.default)(this, "getVCRawData", function (stopTime) {
       _this.measureStart();
       if (!_this.active) {
         _this.measureStop();
@@ -79,6 +80,20 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
       _this.stop();
       var abortReasonInfo = _this.getAbortReasonInfo();
       _this.measureStop();
+      var componentsLog = {};
+      if (stopTime && (0, _platformFeatureFlags.fg)('ufo-remove-vc-component-observations-after-ttai')) {
+        Object.entries(_this.componentsLog).forEach(function (_ref3) {
+          var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
+            _timestamp = _ref4[0],
+            value = _ref4[1];
+          var timestamp = Number(_timestamp);
+          if (stopTime > timestamp) {
+            componentsLog[timestamp] = value;
+          }
+        });
+      } else {
+        componentsLog = _objectSpread({}, _this.componentsLog);
+      }
       return {
         abortReasonInfo: abortReasonInfo,
         abortReason: _objectSpread({}, _this.abortReason),
@@ -86,25 +101,25 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
         heatmapNext: _this.heatmapNext,
         outOfBoundaryInfo: _this.outOfBoundaryInfo,
         totalTime: Math.round(_this.totalTime + _this.observers.getTotalTime()),
-        componentsLog: _objectSpread({}, _this.componentsLog),
+        componentsLog: componentsLog,
         viewport: _objectSpread({}, _this.viewport),
         oldDomUpdatesEnabled: _this.oldDomUpdatesEnabled,
         devToolsEnabled: _this.devToolsEnabled,
         ratios: _this.vcRatios
       };
     });
-    (0, _defineProperty2.default)(this, "getVCResult", function (_ref3) {
+    (0, _defineProperty2.default)(this, "getVCResult", function (_ref5) {
       var _objectSpread2, _objectSpread3;
-      var start = _ref3.start,
-        stop = _ref3.stop,
-        tti = _ref3.tti,
-        prefix = _ref3.prefix,
-        ssr = _ref3.ssr,
-        vc = _ref3.vc;
+      var start = _ref5.start,
+        stop = _ref5.stop,
+        tti = _ref5.tti,
+        prefix = _ref5.prefix,
+        ssr = _ref5.ssr,
+        vc = _ref5.vc;
       var startTime = performance.now();
       // add local measurement
       var fullPrefix = prefix !== undefined && prefix !== '' ? "".concat(prefix, ":") : '';
-      var rawData = vc !== undefined ? vc : _this.getVCRawData();
+      var rawData = vc !== undefined ? vc : _this.getVCRawData(stop);
       if (rawData === null) {
         return {};
       }
@@ -119,14 +134,14 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
         devToolsEnabled = rawData.devToolsEnabled,
         ratios = rawData.ratios;
       if (abortReasonInfo !== null && abortReason.blocking) {
-        var _ref4;
+        var _ref6;
         // exposing data to devtools
         try {
           if (devToolsEnabled && !_this.isPostInteraction) {
             window.__vcNotAvailableReason = abortReasonInfo;
           }
         } catch (e) {}
-        return _ref4 = {}, (0, _defineProperty2.default)(_ref4, "".concat(fullPrefix, "vc:state"), false), (0, _defineProperty2.default)(_ref4, "".concat(fullPrefix, "vc:abort:reason"), abortReasonInfo), (0, _defineProperty2.default)(_ref4, "".concat(fullPrefix, "vc:abort:timestamp"), abortReason.timestamp), _ref4;
+        return _ref6 = {}, (0, _defineProperty2.default)(_ref6, "".concat(fullPrefix, "vc:state"), false), (0, _defineProperty2.default)(_ref6, "".concat(fullPrefix, "vc:abort:reason"), abortReasonInfo), (0, _defineProperty2.default)(_ref6, "".concat(fullPrefix, "vc:abort:timestamp"), abortReason.timestamp), _ref6;
       }
       var _VCObserver$calculate = VCObserver.calculateVC({
           heatmap: heatmap,
@@ -281,10 +296,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 (_ref6) {
-          var _ref7 = (0, _slicedToArray2.default)(_ref6, 2),
-            key = _ref7[0],
-            time = _ref7[1];
+        Object.entries(window.__SSR_ABORT_LISTENERS__.aborts).forEach(function (_ref8) {
+          var _ref9 = (0, _slicedToArray2.default)(_ref8, 2),
+            key = _ref9[0],
+            time = _ref9[1];
           if (time) {
             _this.abortReasonCallback(key, time);
           }
@@ -312,8 +327,8 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
   }
   (0, _createClass2.default)(VCObserver, [{
     key: "start",
-    value: function start(_ref8) {
-      var startTime = _ref8.startTime;
+    value: function start(_ref10) {
+      var startTime = _ref10.startTime;
       this.active = true;
       if (this.observers.isBrowserSupported()) {
         this.setViewportSize();
@@ -335,12 +350,12 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
   }, {
     key: "getIgnoredElements",
     value: function getIgnoredElements(componentsLog) {
-      return Object.values(componentsLog).flat().filter(function (_ref9) {
-        var ignoreReason = _ref9.ignoreReason;
+      return Object.values(componentsLog).flat().filter(function (_ref11) {
+        var ignoreReason = _ref11.ignoreReason;
         return Boolean(ignoreReason);
-      }).map(function (_ref10) {
-        var targetName = _ref10.targetName,
-          ignoreReason = _ref10.ignoreReason;
+      }).map(function (_ref12) {
+        var targetName = _ref12.targetName,
+          ignoreReason = _ref12.ignoreReason;
         return {
           targetName: targetName,
           ignoreReason: ignoreReason
@@ -461,12 +476,12 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
     }
   }], [{
     key: "calculateVC",
-    value: function calculateVC(_ref11) {
-      var heatmap = _ref11.heatmap,
-        _ref11$ssr = _ref11.ssr,
-        ssr = _ref11$ssr === void 0 ? UNUSED_SECTOR : _ref11$ssr,
-        componentsLog = _ref11.componentsLog,
-        viewport = _ref11.viewport;
+    value: function calculateVC(_ref13) {
+      var heatmap = _ref13.heatmap,
+        _ref13$ssr = _ref13.ssr,
+        ssr = _ref13$ssr === void 0 ? UNUSED_SECTOR : _ref13$ssr,
+        componentsLog = _ref13.componentsLog,
+        viewport = _ref13.viewport;
       var lastUpdate = {};
       var totalPainted = 0;
       if (ssr !== UNUSED_SECTOR) {
@@ -526,11 +541,11 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
         });
         return VCRatio;
       }, 0);
-      var VCEntries = entries.reduce(function (acc, _ref12, i) {
+      var VCEntries = entries.reduce(function (acc, _ref14, i) {
         var _acc$abs, _componentsLog$timest;
-        var _ref13 = (0, _slicedToArray2.default)(_ref12, 2),
-          timestamp = _ref13[0],
-          entryPainted = _ref13[1];
+        var _ref15 = (0, _slicedToArray2.default)(_ref14, 2),
+          timestamp = _ref15[0],
+          entryPainted = _ref15[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 = (_componentsLog$timest = componentsLog[timestamp]) === null || _componentsLog$timest === void 0 ? void 0 : _componentsLog$timest.map(function (v) {

package/dist/es2019/common/constants.js

@@ -1,2 +1,2 @@
 import { fg } from '@atlaskit/platform-feature-flags';
-export const REACT_UFO_VERSION = fg('react-ufo-payload-segment-compressed') ? '2.0.0' : '1.0.1';
+export const REACT_UFO_VERSION = fg('enable-react-ufo-payload-segment-compressed') ? '2.0.0' : '1.0.1';

package/dist/es2019/config/index.js

@@ -67,28 +67,6 @@ export function getInteractionRate(name, interactionKind) {
     return 0;
   }
 }
-export function getExperimentalInteractionRate(name, interactionType) {
-  try {
-    if (!config) {
-      return 0;
-    }
-    const {
-      experimentalInteractionMetrics
-    } = config;
-    if (!(experimentalInteractionMetrics !== null && experimentalInteractionMetrics !== void 0 && experimentalInteractionMetrics.enabled)) {
-      return 0;
-    }
-    if (experimentalInteractionMetrics.rates && typeof experimentalInteractionMetrics.rates[name] === 'number') {
-      return experimentalInteractionMetrics.rates[name];
-    }
-    if (experimentalInteractionMetrics.kind && typeof experimentalInteractionMetrics.kind[interactionType] === 'number') {
-      return experimentalInteractionMetrics.kind[interactionType];
-    }
-    return 0;
-  } catch (e) {
-    return 0;
-  }
-}
 export function getPostInteractionRate(name, interactionType) {
   try {
     if (!config) {

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

@@ -1,11 +1,5 @@
 /* eslint-disable @typescript-eslint/no-non-null-asserted-optional-chain */
-
 import { REACT_UFO_VERSION } from '../../../common/constants';
-import { getConfig } from '../../../config';
-import { getPageVisibilityState } from '../../../hidden-timing';
-import { experimentalInteractionLog, postInteractionLog } from '../../../interaction-metrics';
-import * as ssr from '../../../ssr';
-import { getVCObserver } from '../../../vc';
 export const sanitizeUfoName = name => {
   return name.replace(/_/g, '-');
 };
@@ -59,83 +53,4 @@ export function optimizeLabelStack(labelStack) {
       s: ls.segmentId
     } : {})
   }));
-}
-export const getInteractionStatus = interaction => {
-  const originalInteractionStatus = interaction.abortReason ? 'ABORTED' : 'SUCCEEDED';
-  const hasBm3TTI = interaction.apdex.length > 0;
-  const overrideStatus = hasBm3TTI ? 'SUCCEEDED' : originalInteractionStatus;
-  return {
-    originalInteractionStatus,
-    overrideStatus
-  };
-};
-export const getPageVisibilityUpToTTAI = interaction => {
-  const {
-    start,
-    end
-  } = interaction;
-  return getPageVisibilityState(start, end);
-};
-export const calculateVCMetrics = (interaction, prefix, getVCResultFn) => {
-  var _interaction$apdex, _interaction$apdex$;
-  const result = getVCResultFn({
-    start: interaction.start,
-    stop: interaction.end,
-    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,
-    prefix,
-    vc: interaction.vc
-  });
-  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;
-  }
-  const interactionStatus = getInteractionStatus(interaction);
-  const pageVisibilityUpToTTAI = getPageVisibilityUpToTTAI(interaction);
-  if (interactionStatus.originalInteractionStatus !== 'SUCCEEDED' || pageVisibilityUpToTTAI !== 'visible') {
-    return result;
-  }
-  return result;
-};
-export function getSSRDoneTimeValue(config) {
-  var _config$ssr, _config$ssr2;
-  return config !== null && config !== void 0 && (_config$ssr = config.ssr) !== null && _config$ssr !== void 0 && _config$ssr.getSSRDoneTime ? config === null || config === void 0 ? void 0 : (_config$ssr2 = config.ssr) === null || _config$ssr2 === void 0 ? void 0 : _config$ssr2.getSSRDoneTime() : ssr.getSSRDoneTime();
-}
-export const getVCMetrics = interaction => {
-  var _config$vc, _result$metricsVc;
-  const config = getConfig();
-  if (!(config !== null && config !== void 0 && (_config$vc = config.vc) !== null && _config$vc !== void 0 && _config$vc.enabled)) {
-    return {};
-  }
-  if (interaction.type !== 'page_load' && interaction.type !== 'transition') {
-    return {};
-  }
-  const ssr = interaction.type === 'page_load' && config !== null && config !== void 0 && config.ssr ? {
-    ssr: getSSRDoneTimeValue(config)
-  } : null;
-  postInteractionLog.setVCObserverSSRConfig(ssr);
-  const result = calculateVCMetrics(interaction, 'ufo', getVCObserver().getVCResult);
-  return {
-    ...result,
-    'metric:vc90': result === null || result === void 0 ? void 0 : (_result$metricsVc = result['metrics:vc']) === null || _result$metricsVc === void 0 ? void 0 : _result$metricsVc['90']
-  };
-};
-export const getExperimentalVCMetrics = interaction => {
-  if (experimentalInteractionLog.vcObserver) {
-    var _result$metricsVc2;
-    const result = calculateVCMetrics(interaction, 'ufo-experimental', experimentalInteractionLog.vcObserver.getVCResult);
-    return {
-      ...result,
-      'metric:experimental:vc90': result === null || result === void 0 ? void 0 : (_result$metricsVc2 = result['metrics:vc']) === null || _result$metricsVc2 === void 0 ? void 0 : _result$metricsVc2['90']
-    };
-  }
-  return null;
-};
-export const getTTAI = interaction => {
-  const {
-    start,
-    end
-  } = interaction;
-  const interactionStatus = getInteractionStatus(interaction);
-  const pageVisibilityUpToTTAI = getPageVisibilityUpToTTAI(interaction);
-  return interactionStatus.originalInteractionStatus === 'SUCCEEDED' && pageVisibilityUpToTTAI === 'visible' ? Math.round(end - start) : undefined;
-};
+}