@atlaskit/react-ufo 2.4.7 → 2.5.0

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

@@ -3,7 +3,7 @@ import { unstable_IdlePriority as idlePriority, unstable_scheduleCallback as sch
 import { startLighthouseObserver } from '../additional-payload';
 import { setUFOConfig } from '../config';
 import { setupHiddenTimingCapture } from '../hidden-timing';
-import { experimentalInteractionLog, postInteractionLog, sinkExperimentalHandler, sinkInteractionHandler, sinkPostInteractionLogHandler } from '../interaction-metrics';
+import { postInteractionLog, sinkInteractionHandler, sinkPostInteractionLogHandler } from '../interaction-metrics';
 import { getVCObserver } from '../vc';
 var initialized = false;
 function sinkInteraction(instance, payloadPackage) {
@@ -16,14 +16,6 @@ function sinkInteraction(instance, payloadPackage) {
     });
   });
 }
-function sinkExperimentalInteractionMetrics(instance, payloadPackage) {
-  sinkExperimentalHandler(function (interactionId, interaction) {
-    scheduleCallback(idlePriority, function () {
-      var payload = payloadPackage.createExperimentalInteractionMetricsPayload(interactionId, interaction);
-      instance.sendOperationalEvent(payload);
-    });
-  });
-}
 function sinkPostInteractionLog(instance, createPostInteractionLogPayload) {
   sinkPostInteractionLogHandler(function (logOutput) {
     scheduleCallback(idlePriority, function () {
@@ -54,37 +46,31 @@ export var init = function init(analyticsWebClientAsync, config) {
     postInteractionLog.startVCObserver({
       startTime: 0
     });
-    experimentalInteractionLog.initializeVCObserver(vcOptions).startVCObserver({
-      startTime: 0
-    });
   }
   setupHiddenTimingCapture();
   startLighthouseObserver();
   initialized = true;
-  Promise.all([analyticsWebClientAsync, import( /* webpackChunkName: "create-payloads" */'../create-payload'), import( /* webpackChunkName: "create-experimental-interaction-metrics-payload" */'../create-experimental-interaction-metrics-payload'), import( /* webpackChunkName: "create-post-interaction-log-payload" */'../create-post-interaction-log-payload')]).then(function (_ref) {
-    var _ref2 = _slicedToArray(_ref, 4),
+  Promise.all([analyticsWebClientAsync,
+  // eslint-disable-next-line import/dynamic-import-chunkname
+  import( /* webpackChunkName: "create-payloads" */'../create-payload'),
+  // eslint-disable-next-line import/dynamic-import-chunkname
+  import( /* webpackChunkName: "create-post-intreaction-log-payload" */'../create-post-interaction-log-payload')]).then(function (_ref) {
+    var _ref2 = _slicedToArray(_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/esm/load-hold/UFOLoadHold.js

@@ -22,7 +22,8 @@ var useLayoutEffectSAFE = typeof window === 'undefined' ? useEffect : useLayoutE
  *   return (
  *     <>
  *       <Skeleton />
- *       <UFOLoadHold name="card" />
+ *       <UFOLoadHold name="card">
+ *     </UFOLoadHold>
  *   )
  * }
  * ```
@@ -57,8 +58,8 @@ export default function UFOLoadHold(_ref) {
   // react-18: useId instead
   var context = useContext(UFOInteractionContext);
   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/esm/segment/segment.js

@@ -79,14 +79,15 @@ export default 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 = addHold(interactionId.current, labelStack, name, experimental);
+          var disposeHold = addHold(interactionId.current, labelStack, name);
           return function () {
             if (capturedInteractionId === interactionId.current) {
               disposeHold();
@@ -95,7 +96,9 @@ export default 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);
@@ -118,8 +121,7 @@ export default 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/esm/trace-pageload/index.js

@@ -5,7 +5,7 @@ import { getActiveTrace } from '../experience-trace-id-context';
 import { DefaultInteractionID } from '../interaction-id-context';
 import { abort, addHoldByID, addNewInteraction, getActiveInteraction, removeHoldByID, updatePageLoadInteractionName } from '../interaction-metrics';
 import UFORouteName from '../route-name-context';
-export var AWAITING_PAGELOAD_NAME = 'awaiting_pageload_name';
+var AWAITING_PAGELOAD_NAME = 'awaiting_pageload_name';
 export default function traceUFOPageLoad(ufoName) {
   var routeName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ufoName;
   var activeInteraction = getActiveInteraction();

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

@@ -6,6 +6,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["__debug__element"];
 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 { attachAbortListeners } from './attachAbortListeners';
 import { getViewportHeight, getViewportWidth } from './getViewport';
 import { Observers } from './observers';
@@ -63,7 +64,7 @@ export var VCObserver = /*#__PURE__*/function () {
       var info = _this.abortReason.info !== '' ? " ".concat(_this.abortReason.info) : '';
       return "".concat(_this.abortReason.reason).concat(info);
     });
-    _defineProperty(this, "getVCRawData", function () {
+    _defineProperty(this, "getVCRawData", function (stopTime) {
       _this.measureStart();
       if (!_this.active) {
         _this.measureStop();
@@ -72,6 +73,20 @@ export var VCObserver = /*#__PURE__*/function () {
       _this.stop();
       var abortReasonInfo = _this.getAbortReasonInfo();
       _this.measureStop();
+      var componentsLog = {};
+      if (stopTime && fg('ufo-remove-vc-component-observations-after-ttai')) {
+        Object.entries(_this.componentsLog).forEach(function (_ref3) {
+          var _ref4 = _slicedToArray(_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),
@@ -79,25 +94,25 @@ export var 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
       };
     });
-    _defineProperty(this, "getVCResult", function (_ref3) {
+    _defineProperty(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 {};
       }
@@ -112,14 +127,14 @@ export var 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 = {}, _defineProperty(_ref4, "".concat(fullPrefix, "vc:state"), false), _defineProperty(_ref4, "".concat(fullPrefix, "vc:abort:reason"), abortReasonInfo), _defineProperty(_ref4, "".concat(fullPrefix, "vc:abort:timestamp"), abortReason.timestamp), _ref4;
+        return _ref6 = {}, _defineProperty(_ref6, "".concat(fullPrefix, "vc:state"), false), _defineProperty(_ref6, "".concat(fullPrefix, "vc:abort:reason"), abortReasonInfo), _defineProperty(_ref6, "".concat(fullPrefix, "vc:abort:timestamp"), abortReason.timestamp), _ref6;
       }
       var _VCObserver$calculate = VCObserver.calculateVC({
           heatmap: heatmap,
@@ -274,10 +289,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 (_ref6) {
-          var _ref7 = _slicedToArray(_ref6, 2),
-            key = _ref7[0],
-            time = _ref7[1];
+        Object.entries(window.__SSR_ABORT_LISTENERS__.aborts).forEach(function (_ref8) {
+          var _ref9 = _slicedToArray(_ref8, 2),
+            key = _ref9[0],
+            time = _ref9[1];
           if (time) {
             _this.abortReasonCallback(key, time);
           }
@@ -305,8 +320,8 @@ export var VCObserver = /*#__PURE__*/function () {
   }
   _createClass(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();
@@ -328,12 +343,12 @@ export var 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
@@ -454,12 +469,12 @@ export var 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) {
@@ -519,11 +534,11 @@ export var 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 = _slicedToArray(_ref12, 2),
-          timestamp = _ref13[0],
-          entryPainted = _ref13[1];
+        var _ref15 = _slicedToArray(_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/types/common/common/types.d.ts

@@ -63,7 +63,7 @@ export interface SegmentInfo {
     labelStack: LabelStack;
 }
 export interface CustomData {
-    [key: string]: null | string | number | boolean | undefined | CustomData | Record<string, CustomData>;
+    [key: string]: null | undefined | string | number | boolean | undefined | CustomData | Record<string, CustomData>;
 }
 export type CustomTiming = Record<string, {
     startTime: number;
@@ -104,9 +104,7 @@ export interface InteractionMetrics {
         labelStack: LabelStack;
     })[];
     holdInfo: HoldInfo[];
-    holdExpInfo: HoldInfo[];
     holdActive: Map<string, HoldActive>;
-    holdExpActive: Map<string, HoldActive>;
     reactProfilerTimings: ReactProfilerTiming[];
     measureStart: number;
     rate: number;
@@ -117,11 +115,11 @@ export interface InteractionMetrics {
     abortReason?: AbortReasonType;
     abortedByInteractionName?: string;
     /**
-     * Apdex is a legacy performance measurement where it is
+     * Apdex is legacy performance measurement where it is
      * capturing TTI at arbitrary point in the code (bm3/UFOv1)
      *
      * We are intercepting its values now just so we can use it for
-     * topline metric, but should encourage teams to adopt TTAI
+     * topline metric, but should encourage teams adopt TTAI
      *
      * This field might be ignored/dropped in the future.
      */
@@ -166,7 +164,7 @@ export interface LazyLoadProfilerContext {
     addLoad(identifier: string, start: number, end: number): void;
 }
 export interface EnhancedUFOInteractionContextType extends UFOInteractionContextType, RelayMetricsRecorder, LazyLoadProfilerContext {
-    _internalHold(labelStack: LabelStack, name: string, experimental: boolean): void | (() => void);
+    _internalHold(labelStack: LabelStack, name: string): void | (() => void);
     _internalHoldByID(labelStack: LabelStack, id: string, name: string, remove: boolean): void | (() => void);
     addHoldByID(labelStack: LabelStack, id: string, name?: string): void;
     removeHoldByID(labelStack: LabelStack, id: string, name?: string): void;

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

@@ -72,11 +72,6 @@ export type Config = {
         readonly rates?: Rates;
         readonly kind?: Record<InteractionType, number>;
     };
-    readonly experimentalInteractionMetrics?: {
-        readonly enabled?: boolean;
-        readonly rates?: Rates;
-        readonly kind?: Record<InteractionType, number>;
-    };
     readonly enableSegmentHighlighting?: boolean;
     readonly enableAdditionalPerformanceMarks?: boolean;
     readonly shouldCalculateLighthouseMetricsFromTTAI?: boolean;
@@ -90,7 +85,6 @@ export type Config = {
 export declare function setUFOConfig(newConfig: Config): void;
 export declare function getConfig(): Config | undefined;
 export declare function getInteractionRate(name: string, interactionKind: InteractionKind): number;
-export declare function getExperimentalInteractionRate(name: string, interactionType: InteractionType): number;
 export declare function getPostInteractionRate(name: string, interactionType: InteractionType): number;
 export declare function getCapabilityRate(capability: Capability): number;
 declare const validTypingMethods: readonly ["timeout", "timeoutNoAlloc", "mutationObserver"];

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

@@ -1,5 +1,3 @@
-import type { InteractionMetrics } from '../../../common';
-import { type Config } from '../../../config';
 import type { LabelStack, SegmentLabel } from '../../../interaction-context';
 export type SegmentItem = {
     n: string;
@@ -17,13 +15,3 @@ export declare function optimizeLabelStack(labelStack: LabelStack): string | {
     s?: string | undefined;
     n: string;
 }[];
-export declare const getInteractionStatus: (interaction: InteractionMetrics) => {
-    readonly originalInteractionStatus: "ABORTED" | "SUCCEEDED";
-    readonly overrideStatus: "ABORTED" | "SUCCEEDED";
-};
-export declare const getPageVisibilityUpToTTAI: (interaction: InteractionMetrics) => import("../../../hidden-timing").PageVisibility;
-export declare const calculateVCMetrics: (interaction: InteractionMetrics, prefix: string, getVCResultFn: (props: any) => any) => any;
-export declare function getSSRDoneTimeValue(config: Config | undefined): number | undefined;
-export declare const getVCMetrics: (interaction: InteractionMetrics) => any;
-export declare const getExperimentalVCMetrics: (interaction: InteractionMetrics) => any;
-export declare const getTTAI: (interaction: InteractionMetrics) => number | undefined;