@atlaskit/react-ufo 2.11.0 → 2.12.1

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

@@ -1,6 +1,7 @@
 import { unstable_IdlePriority as idlePriority, unstable_scheduleCallback as scheduleCallback } from 'scheduler';
 import { startLighthouseObserver } from '../additional-payload';
 import { setUFOConfig } from '../config';
+import { experimentalVC, sinkExperimentalHandler } from '../create-experimental-interaction-metrics-payload';
 import { setupHiddenTimingCapture } from '../hidden-timing';
 import { postInteractionLog, sinkInteractionHandler, sinkPostInteractionLogHandler } from '../interaction-metrics';
 import { getVCObserver } from '../vc';
@@ -15,6 +16,16 @@ function sinkInteraction(instance, payloadPackage) {
     });
   });
 }
+function sinkExperimentalInteractionMetrics(instance, payloadPackage) {
+  sinkExperimentalHandler((interactionId, interaction) => {
+    scheduleCallback(idlePriority, () => {
+      const payload = payloadPackage.createExperimentalMetricsPayload(interactionId, interaction);
+      if (payload) {
+        instance.sendOperationalEvent(payload);
+      }
+    });
+  });
+}
 function sinkPostInteractionLog(instance, createPostInteractionLogPayload) {
   sinkPostInteractionLogHandler(logOutput => {
     scheduleCallback(idlePriority, () => {
@@ -32,6 +43,7 @@ export const init = (analyticsWebClientAsync, config) => {
   }
   setUFOConfig(config);
   if ((_config$vc = config.vc) !== null && _config$vc !== void 0 && _config$vc.enabled) {
+    var _config$experimentalI;
     const vcOptions = {
       heatmapSize: config.vc.heatmapSize,
       oldDomUpdates: config.vc.oldDomUpdates,
@@ -45,27 +57,34 @@ export const init = (analyticsWebClientAsync, config) => {
     postInteractionLog.startVCObserver({
       startTime: 0
     });
+    if (config !== null && config !== void 0 && (_config$experimentalI = config.experimentalInteractionMetrics) !== null && _config$experimentalI !== void 0 && _config$experimentalI.enabled) {
+      experimentalVC.initialize(vcOptions).start({
+        startTime: 0
+      });
+    }
   }
   setupHiddenTimingCapture();
   startLighthouseObserver();
   initialized = true;
-  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(([awc, payloadPackage, createPostInteractionLogPayloadPackage]) => {
+  Promise.all([analyticsWebClientAsync, import( /* webpackChunkName: "create-payloads" */'../create-payload'), import( /* webpackChunkName: "create-post-interaction-log-payload" */'../create-post-interaction-log-payload')]).then(([awc, payloadPackage, createPostInteractionLogPayloadPackage]) => {
     if (awc.getAnalyticsWebClientPromise) {
       awc.getAnalyticsWebClientPromise().then(client => {
-        var _config$postInteracti;
+        var _config$experimentalI2, _config$postInteracti;
         const instance = client.getInstance();
         sinkInteraction(instance, payloadPackage);
+        if (config !== null && config !== void 0 && (_config$experimentalI2 = config.experimentalInteractionMetrics) !== null && _config$experimentalI2 !== void 0 && _config$experimentalI2.enabled) {
+          sinkExperimentalInteractionMetrics(instance, payloadPackage);
+        }
         if ((_config$postInteracti = config.postInteractionLog) !== null && _config$postInteracti !== void 0 && _config$postInteracti.enabled) {
           sinkPostInteractionLog(instance, createPostInteractionLogPayloadPackage.default);
         }
       });
     } else if (awc.sendOperationalEvent) {
-      var _config$postInteracti2;
+      var _config$experimentalI3, _config$postInteracti2;
       sinkInteraction(awc, payloadPackage);
+      if (config !== null && config !== void 0 && (_config$experimentalI3 = config.experimentalInteractionMetrics) !== null && _config$experimentalI3 !== void 0 && _config$experimentalI3.enabled) {
+        sinkExperimentalInteractionMetrics(awc, payloadPackage);
+      }
       if ((_config$postInteracti2 = config.postInteractionLog) !== null && _config$postInteracti2 !== void 0 && _config$postInteracti2.enabled) {
         sinkPostInteractionLog(awc, createPostInteractionLogPayloadPackage.default);
       }

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

@@ -22,8 +22,7 @@ const useLayoutEffectSAFE = typeof window === 'undefined' ? useEffect : useLayou
  *   return (
  *     <>
  *       <Skeleton />
- *       <UFOLoadHold name="card">
- *     </UFOLoadHold>
+ *       <UFOLoadHold name="card" />
  *   )
  * }
  * ```
@@ -57,7 +56,10 @@ export default function UFOLoadHold({
   // react-18: useId instead
   const context = useContext(UFOInteractionContext);
   useLayoutEffectSAFE(() => {
-    if (hold && !experimental && context != null) {
+    if (hold && context != null) {
+      if (experimental && context.holdExperimental) {
+        return context.holdExperimental(name);
+      }
       return context.hold(name);
     }
   }, [hold, context, name]);

package/dist/es2019/segment/segment.js

@@ -67,15 +67,13 @@ export default function UFOSegment({
         }
       }
     }
-    function _internalHold(labelStack, name
-    // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
-    ) {
+    function _internalHold(labelStack, name, experimental = false) {
       if (interactionId.current != null) {
         if (parentContext) {
-          return parentContext._internalHold(labelStack, name);
+          return parentContext._internalHold(labelStack, name, experimental);
         } else {
           const capturedInteractionId = interactionId.current;
-          const disposeHold = addHold(interactionId.current, labelStack, name);
+          const disposeHold = addHold(interactionId.current, labelStack, name, experimental);
           return () => {
             if (capturedInteractionId === interactionId.current) {
               disposeHold();
@@ -84,9 +82,7 @@ export default function UFOSegment({
         }
       }
     }
-    function _internalHoldByID(labelStack, id, name, remove
-    // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
-    ) {
+    function _internalHoldByID(labelStack, id, name, remove) {
       if (interactionId.current != null) {
         if (parentContext) {
           parentContext._internalHoldByID(labelStack, name, id, remove);
@@ -108,11 +104,12 @@ export default function UFOSegment({
     }
     return {
       labelStack,
-      hold(name = 'unknown'
-      // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
-      ) {
+      hold(name = 'unknown') {
         return this._internalHold(this.labelStack, name);
       },
+      holdExperimental(name = 'unknown') {
+        return this._internalHold(this.labelStack, name, true);
+      },
       addHoldByID(labelStack, id, name = 'unknown') {
         this._internalHoldByID(labelStack, id, name, false);
       },

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

@@ -220,6 +220,7 @@ export class VCObserver {
         [`${fullPrefix}vc:ratios`]: ratios,
         ...outOfBoundary,
         [`${fullPrefix}vc:next`]: vcNext.VC,
+        [`${fullPrefix}vc:next:updates`]: vcNext.VCEntries.rel.slice(0, 50),
         //...oldDomUpdates,
         [`${fullPrefix}vc:ignored`]: this.getIgnoredElements(componentsLog)
       };

package/dist/esm/config/index.js

@@ -64,13 +64,34 @@ export function getInteractionRate(name, interactionKind) {
     return 0;
   }
 }
-export function getPostInteractionRate(name, interactionType) {
+export function getExperimentalInteractionRate(name, interactionType) {
   try {
     if (!config) {
       return 0;
     }
     var _config2 = config,
-      postInteractionLog = _config2.postInteractionLog;
+      experimentalInteractionMetrics = _config2.experimentalInteractionMetrics;
+    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) {
+      return 0;
+    }
+    var _config3 = config,
+      postInteractionLog = _config3.postInteractionLog;
     if (!(postInteractionLog !== null && postInteractionLog !== void 0 && postInteractionLog.enabled)) {
       return 0;
     }
@@ -90,8 +111,8 @@ export function getCapabilityRate(capability) {
     if (!config) {
       return 0;
     }
-    var _config3 = config,
-      capabilityRate = _config3.capability;
+    var _config4 = config,
+      capabilityRate = _config4.capability;
     if (capabilityRate != null) {
       var rate = capabilityRate[capability];
       if (rate != null) {
@@ -110,8 +131,8 @@ export function getTypingPerformanceTracingMethod() {
     if (!config) {
       return defaultMethod;
     }
-    var _config4 = config,
-      typingMethod = _config4.typingMethod;
+    var _config5 = config,
+      typingMethod = _config5.typingMethod;
     if (typingMethod != null && validTypingMethods.find(function (m) {
       return m === typingMethod;
     })) {
@@ -130,8 +151,8 @@ export function getAwaitBM3TTIList() {
     if (!config) {
       return [];
     }
-    var _config5 = config,
-      awaitBM3TTI = _config5.awaitBM3TTI;
+    var _config6 = config,
+      awaitBM3TTI = _config6.awaitBM3TTI;
     if (awaitBM3TTI != null) {
       return awaitBM3TTI;
     } else {
@@ -148,8 +169,8 @@ export function getRemovePageSegmentsUFOPrefixes() {
     if (!config) {
       return false;
     }
-    var _config6 = config,
-      removePageSegmentsUFOPrefixes = _config6.removePageSegmentsUFOPrefixes;
+    var _config7 = config,
+      removePageSegmentsUFOPrefixes = _config7.removePageSegmentsUFOPrefixes;
     if (removePageSegmentsUFOPrefixes != null) {
       return removePageSegmentsUFOPrefixes;
     } else {
@@ -166,8 +187,8 @@ export function getRemoveInteractionsUFOPrefixes() {
     if (!config) {
       return false;
     }
-    var _config7 = config,
-      removeInteractionsUFOPrefixes = _config7.removeInteractionsUFOPrefixes;
+    var _config8 = config,
+      removeInteractionsUFOPrefixes = _config8.removeInteractionsUFOPrefixes;
     if (removeInteractionsUFOPrefixes != null) {
       return removeInteractionsUFOPrefixes;
     } else {
@@ -187,8 +208,8 @@ export function getUfoNameOverrides() {
     if (!config) {
       return undefined;
     }
-    var _config8 = config,
-      ufoNameOverrides = _config8.ufoNameOverrides;
+    var _config9 = config,
+      ufoNameOverrides = _config9.ufoNameOverrides;
     if (ufoNameOverrides != null) {
       return ufoNameOverrides;
     }
@@ -204,8 +225,8 @@ export function getDoNotAbortActivePressInteraction() {
     if (!config) {
       return undefined;
     }
-    var _config9 = config,
-      doNotAbortActivePressInteraction = _config9.doNotAbortActivePressInteraction;
+    var _config10 = config,
+      doNotAbortActivePressInteraction = _config10.doNotAbortActivePressInteraction;
     return doNotAbortActivePressInteraction;
   } catch (e) {
     return undefined;
@@ -218,8 +239,8 @@ export function getDoNotAbortActivePressInteractionOnTransition() {
     if (!config) {
       return undefined;
     }
-    var _config10 = config,
-      doNotAbortActivePressInteractionOnTransition = _config10.doNotAbortActivePressInteractionOnTransition;
+    var _config11 = config,
+      doNotAbortActivePressInteractionOnTransition = _config11.doNotAbortActivePressInteractionOnTransition;
     return doNotAbortActivePressInteractionOnTransition;
   } catch (e) {
     return undefined;
@@ -227,8 +248,8 @@ export function getDoNotAbortActivePressInteractionOnTransition() {
 }
 export function shouldHandleEditorLnv() {
   try {
-    var _config$enableEditorL, _config11;
-    return (_config$enableEditorL = (_config11 = config) === null || _config11 === void 0 ? void 0 : _config11.enableEditorLnvHandler) !== null && _config$enableEditorL !== void 0 ? _config$enableEditorL : false;
+    var _config$enableEditorL, _config12;
+    return (_config$enableEditorL = (_config12 = config) === null || _config12 === void 0 ? void 0 : _config12.enableEditorLnvHandler) !== null && _config$enableEditorL !== void 0 ? _config$enableEditorL : false;
   } catch (e) {
     return false;
   }

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

@@ -0,0 +1,104 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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; }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+import { getPageVisibilityState } from '../hidden-timing';
+import { VCObserver } from '../vc/vc-observer';
+var interactionBuffer = [];
+var bufferInteractionData = function bufferInteractionData(interactionId, data) {
+  interactionBuffer.push({
+    interactionId: interactionId,
+    data: data
+  });
+};
+function clearInteractionBuffer() {
+  interactionBuffer.length = 0;
+}
+function appendInteractionData(interactionId, data) {
+  bufferInteractionData(interactionId, data);
+}
+export function installInteractionSink(handler) {
+  var _iterator = _createForOfIteratorHelper(interactionBuffer),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var _step$value = _step.value,
+        _interactionId = _step$value.interactionId,
+        data = _step$value.data;
+      handler(_interactionId, data);
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  clearInteractionBuffer();
+  bufferInteractionData = handler;
+}
+export function sinkExperimentalHandler(sinkFn) {
+  installInteractionSink(sinkFn);
+}
+export function onExperimentalInteractionComplete(interactionId, data) {
+  var endTime = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : performance.now();
+  if (data.ufoName) {
+    data.end = endTime;
+    appendInteractionData(interactionId, data);
+    clearInteractionBuffer();
+  }
+}
+export var ExperimentalVCMetrics = /*#__PURE__*/function () {
+  function ExperimentalVCMetrics() {
+    _classCallCheck(this, ExperimentalVCMetrics);
+    _defineProperty(this, "vcObserver", null);
+  }
+  return _createClass(ExperimentalVCMetrics, [{
+    key: "initialize",
+    value: function initialize(options) {
+      if (this.vcObserver === null) {
+        this.vcObserver = new VCObserver(_objectSpread(_objectSpread({}, options), {}, {
+          isPostInteraction: true
+        }));
+      }
+      return this;
+    }
+  }, {
+    key: "start",
+    value: function start(_ref) {
+      var _this$vcObserver;
+      var startTime = _ref.startTime;
+      (_this$vcObserver = this.vcObserver) === null || _this$vcObserver === void 0 || _this$vcObserver.start({
+        startTime: startTime
+      });
+    }
+  }]);
+}();
+export var experimentalVC = new ExperimentalVCMetrics();
+export var getExperimentalVCMetrics = function getExperimentalVCMetrics(interaction) {
+  if (experimentalVC.vcObserver) {
+    var _interaction$apdex;
+    var prefix = 'ufo-experimental';
+    var result = experimentalVC.vcObserver.getVCResult({
+      start: interaction.start,
+      stop: interaction.end,
+      tti: (_interaction$apdex = interaction.apdex) === null || _interaction$apdex === void 0 || (_interaction$apdex = _interaction$apdex[0]) === null || _interaction$apdex === void 0 ? void 0 : _interaction$apdex.stopTime,
+      prefix: prefix,
+      vc: interaction.vc
+    });
+    var VC = result === null || result === void 0 ? void 0 : result['metrics:vc'];
+    if (!VC || !(result !== null && result !== void 0 && result["".concat(prefix, ":vc:clean")])) {
+      return result;
+    }
+    var pageVisibilityUpToTTAI = getPageVisibilityState(interaction.start, interaction.end);
+    if (interaction.abortReason || pageVisibilityUpToTTAI !== 'visible') {
+      return result;
+    }
+    return _objectSpread(_objectSpread({}, result), {}, {
+      'metric:experimental:vc90': VC['90']
+    });
+  }
+  return null;
+};

package/dist/esm/create-payload/index.js

@@ -12,8 +12,10 @@ import Bowser from 'bowser-ultralight';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { getLighthouseMetrics } from '../additional-payload';
 import * as bundleEvalTiming from '../bundle-eval-timing';
+import coinflip from '../coinflip';
 import { REACT_UFO_VERSION } from '../common/constants';
-import { getConfig, getUfoNameOverrides } from '../config';
+import { getConfig, getExperimentalInteractionRate, getUfoNameOverrides } from '../config';
+import { getExperimentalVCMetrics } from '../create-experimental-interaction-metrics-payload';
 import { getBm3Timings } from '../custom-timings';
 import { getGlobalErrorCount } from '../global-error-handler';
 import { getPageVisibilityState } from '../hidden-timing';
@@ -36,7 +38,6 @@ function getUfoNameOverride(interaction) {
       }
     }
     return ufoName;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
   } catch (e) {
     return ufoName;
   }
@@ -168,8 +169,14 @@ var getPaintMetrics = function getPaintMetrics(type) {
   });
   return metrics;
 };
+var getTTAI = function getTTAI(interaction) {
+  var start = interaction.start,
+    end = interaction.end;
+  var pageVisibilityUpToTTAI = getPageVisibilityUpToTTAI(interaction);
+  return !interaction.abortReason && pageVisibilityUpToTTAI === 'visible' ? Math.round(end - start) : undefined;
+};
 var getVCMetrics = function getVCMetrics(interaction) {
-  var _config$vc, _config$vc$ssrWhiteli, _interaction$apdex;
+  var _config$vc, _config$vc$ssrWhiteli, _interaction$apdex, _config$experimentalI;
   var config = getConfig();
   if (!(config !== null && config !== void 0 && (_config$vc = config.vc) !== null && _config$vc !== void 0 && _config$vc.enabled)) {
     return {};
@@ -191,6 +198,9 @@ var getVCMetrics = function getVCMetrics(interaction) {
     prefix: prefix,
     vc: interaction.vc
   }, ssr));
+  if ((_config$experimentalI = config.experimentalInteractionMetrics) !== null && _config$experimentalI !== void 0 && _config$experimentalI.enabled) {
+    getVCObserver().stop();
+  }
   postInteractionLog.setLastInteractionFinishVCResult(result);
   var VC = result === null || result === void 0 ? void 0 : result['metrics:vc'];
   if (!VC || !(result !== null && result !== void 0 && result["".concat(prefix, ":vc:clean")])) {
@@ -639,13 +649,15 @@ function getStylesheetMetrics() {
     return {};
   }
 }
+var regularTTAI;
+var expTTAI;
 function getErrorCounts(interaction) {
   return {
     'ufo:errors:globalCount': getGlobalErrorCount(),
     'ufo:errors:count': interaction.errors.length
   };
 }
-function createInteractionMetricsPayload(interaction, interactionId) {
+function createInteractionMetricsPayload(interaction, interactionId, experimental) {
   var _window$location, _config$additionalPay;
   var interactionPayloadStart = performance.now();
   var config = getConfig();
@@ -696,7 +708,7 @@ function createInteractionMetricsPayload(interaction, interactionId) {
   };
   // Detailed payload. Page visibility = visible
   var getDetailedInteractionMetrics = function getDetailedInteractionMetrics() {
-    if (window.__UFO_COMPACT_PAYLOAD__ || !isDetailedPayload) {
+    if (experimental || window.__UFO_COMPACT_PAYLOAD__ || !isDetailedPayload) {
       return {};
     }
     var spans = [].concat(_toConsumableArray(interaction.spans), _toConsumableArray(atlaskitInteractionSpans));
@@ -711,7 +723,7 @@ function createInteractionMetricsPayload(interaction, interactionId) {
       }),
       holdActive: _toConsumableArray(interaction.holdActive.values()),
       redirects: optimizeRedirects(interaction.redirects, start),
-      holdInfo: optimizeHoldInfo(interaction.holdInfo, start),
+      holdInfo: optimizeHoldInfo(experimental ? interaction.holdExpInfo : interaction.holdInfo, start),
       spans: optimizeSpans(spans, start),
       requestInfo: optimizeRequestInfo(interaction.requestInfo, start),
       customTimings: optimizeCustomTimings(interaction.customTimings, start),
@@ -731,6 +743,11 @@ function createInteractionMetricsPayload(interaction, interactionId) {
       SSRTimings: config !== null && config !== void 0 && (_config$ssr4 = config.ssr) !== null && _config$ssr4 !== void 0 && _config$ssr4.getSSRTimings ? config.ssr.getSSRTimings() : objectToArray(ssr.getSSRTimings())
     };
   };
+  if (experimental) {
+    expTTAI = getTTAI(interaction);
+  } else {
+    regularTTAI = getTTAI(interaction);
+  }
   var newUFOName = sanitizeUfoName(ufoName);
   var payload = {
     actionSubject: 'experience',
@@ -739,7 +756,7 @@ function createInteractionMetricsPayload(interaction, interactionId) {
     source: 'measured',
     tags: ['observability'],
     attributes: {
-      properties: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+      properties: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
         // basic
         'event:hostname': ((_window$location = window.location) === null || _window$location === void 0 ? void 0 : _window$location.hostname) || 'unknown',
         'event:product': config.product,
@@ -751,10 +768,10 @@ function createInteractionMetricsPayload(interaction, interactionId) {
           payloadSource: 'platform'
         },
         'event:region': config.region || 'unknown',
-        'experience:key': 'custom.interaction-metrics',
+        'experience:key': experimental ? 'custom.experimental-interaction-metrics' : 'custom.interaction-metrics',
         'experience:name': newUFOName
-      }, getBrowserMetadata()), getSSRProperties(type)), getPPSMetrics(interaction)), getPaintMetrics(type)), getNavigationMetrics(type)), getVCMetrics(interaction)), (_config$additionalPay = config.additionalPayloadData) === null || _config$additionalPay === void 0 ? void 0 : _config$additionalPay.call(config, interaction)), getTracingContextData(interaction)), getStylesheetMetrics()), getErrorCounts(interaction)), {}, {
-        interactionMetrics: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+      }, getBrowserMetadata()), getSSRProperties(type)), getPPSMetrics(interaction)), getPaintMetrics(type)), getNavigationMetrics(type)), getVCMetrics(interaction)), experimental ? getExperimentalVCMetrics(interaction) : undefined), (_config$additionalPay = config.additionalPayloadData) === null || _config$additionalPay === void 0 ? void 0 : _config$additionalPay.call(config, interaction)), getTracingContextData(interaction)), getStylesheetMetrics()), getErrorCounts(interaction)), {}, {
+        interactionMetrics: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
           namePrefix: config.namePrefix || '',
           segmentPrefix: config.segmentPrefix || '',
           interactionId: interactionId,
@@ -785,11 +802,18 @@ function createInteractionMetricsPayload(interaction, interactionId) {
           marks: optimizeMarks(interaction.marks),
           customData: optimizeCustomData(interaction),
           reactProfilerTimings: optimizeReactProfilerTimings(interaction.reactProfilerTimings, start)
-        }, labelStack), getPageLoadInteractionMetrics()), getDetailedInteractionMetrics()), getPageLoadDetailedInteractionMetrics()), getBm3TrackerTimings(interaction)),
+        }, labelStack), getPageLoadInteractionMetrics()), getDetailedInteractionMetrics()), getPageLoadDetailedInteractionMetrics()), getBm3TrackerTimings(interaction)), {}, {
+          'metric:ttai': experimental ? regularTTAI || expTTAI : undefined,
+          'metric:experimental:ttai': expTTAI
+        }),
         'ufo:payloadTime': roundEpsilon(performance.now() - interactionPayloadStart)
       })
     }
   };
+  if (experimental) {
+    regularTTAI = undefined;
+    expTTAI = undefined;
+  }
   payload.attributes.properties['event:sizeInKb'] = getPayloadSize(payload.attributes.properties);
   return payload;
 }
@@ -800,4 +824,20 @@ export function createPayloads(interactionId, interaction) {
   });
   var interactionMetricsPayload = createInteractionMetricsPayload(modifiedInteraction, interactionId);
   return [interactionMetricsPayload];
+}
+export function createExperimentalMetricsPayload(interactionId, interaction) {
+  var config = getConfig();
+  if (!config) {
+    throw Error('UFO Configuration not provided');
+  }
+  var ufoName = sanitizeUfoName(interaction.ufoName);
+  var rate = getExperimentalInteractionRate(ufoName, interaction.type);
+  if (!coinflip(rate)) {
+    return null;
+  }
+  var pageVisibilityState = getPageVisibilityState(interaction.start, interaction.end);
+  if (pageVisibilityState !== 'visible') {
+    return null;
+  }
+  return createInteractionMetricsPayload(interaction, interactionId, true);
 }

package/dist/esm/interaction-metrics/common/constants.js

@@ -1,2 +1 @@
-var interactions = new Map();
-export default interactions;
+export var interactions = new Map();