@atlaskit/react-ufo 2.5.3 → 2.7.0

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

@@ -0,0 +1,103 @@
+import { getConfig } from '../../config';
+import { interactionQueue, segmentCache, segmentObservers } from './constants';
+export function isPerformanceTracingEnabled() {
+  var _getConfig;
+  return ((_getConfig = getConfig()) === null || _getConfig === void 0 ? void 0 : _getConfig.enableAdditionalPerformanceMarks) || window.__REACT_UFO_ENABLE_PERF_TRACING || process.env.NODE_ENV !== 'production';
+}
+export function labelStackToString(labelStack, name) {
+  var _stack$map;
+  const stack = [...(labelStack !== null && labelStack !== void 0 ? labelStack : [])];
+  if (name) {
+    stack.push({
+      name
+    });
+  }
+  return (_stack$map = stack.map(l => l.name)) === null || _stack$map === void 0 ? void 0 : _stack$map.join('/');
+}
+export function labelStackToIdString(labelStack) {
+  var _labelStack$map;
+  return labelStack === null || labelStack === void 0 ? void 0 : (_labelStack$map = labelStack.map(l => 'segmentId' in l ? `${l.name}:${l.segmentId}` : `${l.name}`)) === null || _labelStack$map === void 0 ? void 0 : _labelStack$map.join('/');
+}
+export function addSegmentObserver(observer) {
+  segmentObservers.push(observer);
+  for (const segmentInfo of segmentCache.values()) {
+    observer.onAdd(segmentInfo);
+  }
+}
+export function removeSegmentObserver(observer) {
+  const index = segmentObservers.findIndex(obs => obs === observer);
+  if (index !== -1) {
+    segmentObservers.splice(index, 1);
+  }
+}
+export function addHoldCriterion(id, labelStack, name, startTime) {
+  var _window$__CRITERION__;
+  if (!((_window$__CRITERION__ = window.__CRITERION__) !== null && _window$__CRITERION__ !== void 0 && _window$__CRITERION__.addUFOHold)) {
+    return;
+  }
+  window.__CRITERION__.addUFOHold(id, labelStackToString(labelStack), name, startTime);
+}
+export function removeHoldCriterion(id) {
+  var _window$__CRITERION__2;
+  if (!((_window$__CRITERION__2 = window.__CRITERION__) !== null && _window$__CRITERION__2 !== void 0 && _window$__CRITERION__2.removeUFOHold)) {
+    return;
+  }
+  window.__CRITERION__.removeUFOHold(id);
+}
+export const pushToQueue = (id, data) => {
+  interactionQueue.push({
+    id,
+    data
+  });
+};
+export function callCleanUpCallbacks(interaction) {
+  interaction.cleanupCallbacks.reverse().forEach(cleanUpCallback => {
+    cleanUpCallback();
+  });
+}
+export function reactProfilerTimingMap(data) {
+  const profilerTimingMap = new Map();
+  data.reactProfilerTimings.forEach(profilerTiming => {
+    const labelStackId = labelStackToIdString(profilerTiming.labelStack);
+    if (labelStackId) {
+      var _profilerTimingMap$ge, _timing$start, _timing$end;
+      const timing = (_profilerTimingMap$ge = profilerTimingMap.get(labelStackId)) !== null && _profilerTimingMap$ge !== void 0 ? _profilerTimingMap$ge : {
+        labelStack: profilerTiming.labelStack
+      };
+      timing.start = profilerTiming.startTime < ((_timing$start = timing.start) !== null && _timing$start !== void 0 ? _timing$start : Number.MAX_SAFE_INTEGER) ? profilerTiming.startTime : timing.start;
+      timing.end = profilerTiming.commitTime > ((_timing$end = timing.end) !== null && _timing$end !== void 0 ? _timing$end : Number.MIN_SAFE_INTEGER) ? profilerTiming.commitTime : timing.end;
+      profilerTimingMap.set(labelStackId, timing);
+    }
+  });
+  try {
+    // for Firefox 102 and older
+    for (const [, {
+      labelStack,
+      start,
+      end
+    }] of profilerTimingMap.entries()) {
+      performance.measure(`🛸 ${labelStackToString(labelStack)} [segment_ttai]`, {
+        start,
+        end
+      });
+    }
+  } catch (e) {
+    // do nothing
+  }
+}
+export function callCancelCallbacks(interaction) {
+  interaction.cancelCallbacks.reverse().forEach(cancelCallback => {
+    cancelCallback();
+  });
+}
+export function isSegmentLabel(obj) {
+  return obj && typeof obj.name === 'string' && typeof obj.segmentId === 'string';
+}
+export function getSegmentCacheKey(labelStack) {
+  return labelStack.map(l => {
+    if (isSegmentLabel(l)) {
+      return `${l.name}_${l.segmentId}`;
+    }
+    return l.name;
+  }).join('|');
+}

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

@@ -1,22 +1,18 @@
 import { v4 as createUUID } from 'uuid';
 import coinflip from '../coinflip';
 import { getAwaitBM3TTIList, getCapabilityRate, getConfig } from '../config';
+import { experimentalVC, getExperimentalVCMetrics, onExperimentalInteractionComplete } from '../create-experimental-interaction-metrics-payload';
+import { getTTAI, postInteractionLog } from '../create-payload/common/utils';
 import { clearActiveTrace } from '../experience-trace-id-context';
 import { allFeatureFlagsAccessed, currentFeatureFlagsAccessed } from '../feature-flags-accessed';
 import { getInteractionId } from '../interaction-id-context';
 import { getVCObserver } from '../vc';
-import interactions from './common/constants';
-import PostInteractionLog from './post-interaction-log';
+import { addHoldCriterion, addSegmentObserver, callCancelCallbacks, callCleanUpCallbacks, getSegmentCacheKey, isPerformanceTracingEnabled, labelStackToString, pushToQueue, reactProfilerTimingMap, removeHoldCriterion, removeSegmentObserver } from './common';
+import { CLEANUP_TIMEOUT, CLEANUP_TIMEOUT_AFTER_APDEX, interactionQueue, interactions, moduleLoadingRequests, segmentCache, segmentObservers } from './common/constants';
 const PreviousInteractionLog = {
   name: undefined,
   isAborted: undefined
 };
-export const postInteractionLog = new PostInteractionLog();
-const interactionQueue = [];
-const segmentCache = new Map();
-const CLEANUP_TIMEOUT = 60 * 1000;
-const CLEANUP_TIMEOUT_AFTER_APDEX = 15 * 1000;
-const segmentObservers = [];
 export function getActiveInteraction() {
   const interactionId = getInteractionId();
   if (!interactionId.current) {
@@ -24,36 +20,6 @@ export function getActiveInteraction() {
   }
   return interactions.get(interactionId.current);
 }
-function isPerformanceTracingEnabled() {
-  var _getConfig;
-  return ((_getConfig = getConfig()) === null || _getConfig === void 0 ? void 0 : _getConfig.enableAdditionalPerformanceMarks) || window.__REACT_UFO_ENABLE_PERF_TRACING || process.env.NODE_ENV !== 'production';
-}
-function labelStackToString(labelStack, name) {
-  var _stack$map;
-  const stack = [...(labelStack !== null && labelStack !== void 0 ? labelStack : [])];
-  if (name) {
-    stack.push({
-      name
-    });
-  }
-  return (_stack$map = stack.map(l => l.name)) === null || _stack$map === void 0 ? void 0 : _stack$map.join('/');
-}
-function labelStackToIdString(labelStack) {
-  var _labelStack$map;
-  return labelStack === null || labelStack === void 0 ? void 0 : (_labelStack$map = labelStack.map(l => 'segmentId' in l ? `${l.name}:${l.segmentId}` : `${l.name}`)) === null || _labelStack$map === void 0 ? void 0 : _labelStack$map.join('/');
-}
-function addSegmentObserver(observer) {
-  segmentObservers.push(observer);
-  for (const segmentInfo of segmentCache.values()) {
-    observer.onAdd(segmentInfo);
-  }
-}
-function removeSegmentObserver(observer) {
-  const index = segmentObservers.findIndex(obs => obs === observer);
-  if (index !== -1) {
-    segmentObservers.splice(index, 1);
-  }
-}
 export function remove(interactionId) {
   interactions.delete(interactionId);
 }
@@ -196,7 +162,6 @@ export function addPreload(moduleId, timestamp) {
 export function addLoad(identifier, start, end) {
   addSpanToAll('bundle_load', identifier, null, start, end - start);
 }
-const moduleLoadingRequests = {};
 export function extractModuleName(input) {
   let result = input !== null && input !== void 0 ? input : '';
   result = result.replace(/^\.\/src\/packages\//, '');
@@ -204,30 +169,29 @@ export function extractModuleName(input) {
   result = result.replace(/(\/src)?\/(index|main)\.(tsx|ts|js|jsx)$/, '');
   return result;
 }
-function addHoldCriterion(id, labelStack, name, startTime) {
-  var _window$__CRITERION__;
-  if (!((_window$__CRITERION__ = window.__CRITERION__) !== null && _window$__CRITERION__ !== void 0 && _window$__CRITERION__.addUFOHold)) {
-    return;
-  }
-  window.__CRITERION__.addUFOHold(id, labelStackToString(labelStack), name, startTime);
-}
-function removeHoldCriterion(id) {
-  var _window$__CRITERION__2;
-  if (!((_window$__CRITERION__2 = window.__CRITERION__) !== null && _window$__CRITERION__2 !== void 0 && _window$__CRITERION__2.removeUFOHold)) {
-    return;
-  }
-  window.__CRITERION__.removeUFOHold(id);
-}
-export function addHold(interactionId, labelStack, name) {
+export function addHold(interactionId, labelStack, name, experimental) {
   const interaction = interactions.get(interactionId);
   const id = createUUID();
   if (interaction != null) {
-    const start = performance.now();
-    interaction.holdActive.set(id, {
+    var _getConfig, _getConfig$experiment;
+    const holdActive = {
       labelStack,
       name,
-      start
-    });
+      start: 0
+    };
+    const start = performance.now();
+    if ((_getConfig = getConfig()) !== null && _getConfig !== void 0 && (_getConfig$experiment = _getConfig.experimentalInteractionMetrics) !== null && _getConfig$experiment !== void 0 && _getConfig$experiment.enabled && experimental) {
+      interaction.holdExpActive.set(id, {
+        ...holdActive,
+        start
+      });
+    }
+    if (!experimental) {
+      interaction.holdActive.set(id, {
+        ...holdActive,
+        start
+      });
+    }
     addHoldCriterion(id, labelStack, name, start);
     return () => {
       const end = performance.now();
@@ -245,12 +209,22 @@ export function addHold(interactionId, labelStack, name) {
       removeHoldCriterion(id);
       const currentInteraction = interactions.get(interactionId);
       const currentHold = interaction.holdActive.get(id);
-      if (currentInteraction != null && currentHold != null) {
-        currentInteraction.holdInfo.push({
-          ...currentHold,
-          end
-        });
-        interaction.holdActive.delete(id);
+      const expHold = interaction.holdExpActive.get(id);
+      if (currentInteraction != null) {
+        if (currentHold != null) {
+          currentInteraction.holdInfo.push({
+            ...currentHold,
+            end
+          });
+          interaction.holdActive.delete(id);
+        }
+        if (expHold != null) {
+          currentInteraction.holdExpInfo.push({
+            ...expHold,
+            end
+          });
+          interaction.holdExpActive.delete(id);
+        }
       }
     };
   }
@@ -379,21 +353,9 @@ export const addProfilerTimings = (interactionId, labelStack, type, actualDurati
     postInteractionLog.addProfilerTimings(labelStack, type, actualDuration, baseDuration, startTime, commitTime);
   }
 };
-const pushToQueue = (id, data) => {
-  interactionQueue.push({
-    id,
-    data
-  });
-};
 let handleInteraction = pushToQueue;
-function callCleanUpCallbacks(interaction) {
-  interaction.cleanupCallbacks.reverse().forEach(cleanUpCallback => {
-    cleanUpCallback();
-  });
-}
 const finishInteraction = (id, data, endTime = performance.now()) => {
   var _getConfig3, _getConfig3$vc;
-  // eslint-disable-next-line no-param-reassign
   data.end = endTime;
   try {
     // for Firefox 102 and older
@@ -405,7 +367,6 @@ const finishInteraction = (id, data, endTime = performance.now()) => {
     // do nothing
   }
   if (data.featureFlags) {
-    // eslint-disable-next-line no-param-reassign
     data.featureFlags.during = Object.fromEntries(currentFeatureFlagsAccessed);
   }
   clearActiveTrace();
@@ -413,41 +374,13 @@ const finishInteraction = (id, data, endTime = performance.now()) => {
   if ((_getConfig3 = getConfig()) !== null && _getConfig3 !== void 0 && (_getConfig3$vc = _getConfig3.vc) !== null && _getConfig3$vc !== void 0 && _getConfig3$vc.stopVCAtInteractionFinish) {
     data.vc = getVCObserver().getVCRawData();
   }
-  remove(id);
   PreviousInteractionLog.name = data.ufoName || 'unknown';
   PreviousInteractionLog.isAborted = data.abortReason != null;
   if (data.ufoName) {
     handleInteraction(id, data);
   }
   if (isPerformanceTracingEnabled()) {
-    const profilerTimingMap = new Map();
-    data.reactProfilerTimings.forEach(profilerTiming => {
-      const labelStackId = labelStackToIdString(profilerTiming.labelStack);
-      if (labelStackId) {
-        var _profilerTimingMap$ge, _timing$start, _timing$end;
-        const timing = (_profilerTimingMap$ge = profilerTimingMap.get(labelStackId)) !== null && _profilerTimingMap$ge !== void 0 ? _profilerTimingMap$ge : {
-          labelStack: profilerTiming.labelStack
-        };
-        timing.start = profilerTiming.startTime < ((_timing$start = timing.start) !== null && _timing$start !== void 0 ? _timing$start : Number.MAX_SAFE_INTEGER) ? profilerTiming.startTime : timing.start;
-        timing.end = profilerTiming.commitTime > ((_timing$end = timing.end) !== null && _timing$end !== void 0 ? _timing$end : Number.MIN_SAFE_INTEGER) ? profilerTiming.commitTime : timing.end;
-        profilerTimingMap.set(labelStackId, timing);
-      }
-    });
-    try {
-      // for Firefox 102 and older
-      for (const [, {
-        labelStack,
-        start,
-        end
-      }] of profilerTimingMap.entries()) {
-        performance.measure(`🛸 ${labelStackToString(labelStack)} [segment_ttai]`, {
-          start,
-          end
-        });
-      }
-    } catch (e) {
-      // do nothing
-    }
+    reactProfilerTimingMap(data);
   }
   try {
     // dispatch a global window event to notify the measure is completed
@@ -470,54 +403,86 @@ export const sinkInteractionHandler = sinkFn => {
 export const sinkPostInteractionLogHandler = sinkFn => {
   postInteractionLog.sinkHandler(sinkFn);
 };
+
+// a flag to prevent multiple submitting
+let activeSubmitted = false;
 export function tryComplete(interactionId, endTime) {
   const interaction = interactions.get(interactionId);
   if (interaction != null) {
-    const noMoreHolds = interaction.holdActive.size === 0;
-    if (noMoreHolds) {
+    const noMoreActiveHolds = interaction.holdActive.size === 0;
+    const noMoreExpHolds = interaction.holdExpActive.size === 0;
+    const postInteraction = () => {
       var _getConfig4, _getConfig4$postInter;
-      finishInteraction(interactionId, interaction, endTime);
       if ((_getConfig4 = getConfig()) !== null && _getConfig4 !== void 0 && (_getConfig4$postInter = _getConfig4.postInteractionLog) !== null && _getConfig4$postInter !== void 0 && _getConfig4$postInter.enabled) {
-        postInteractionLog.onInteractionComplete(interaction);
+        var _getExperimentalVCMet;
+        const experimentalVC90 = (_getExperimentalVCMet = getExperimentalVCMetrics(interaction)) === null || _getExperimentalVCMet === void 0 ? void 0 : _getExperimentalVCMet['metric:experimental:vc90'];
+        const experimentalTTAI = getTTAI(interaction);
+        postInteractionLog.onInteractionComplete({
+          ...interaction,
+          experimentalTTAI,
+          experimentalVC90
+        });
+      }
+      remove(interactionId);
+    };
+    if (noMoreActiveHolds) {
+      if (!activeSubmitted) {
+        finishInteraction(interactionId, interaction, endTime);
+        activeSubmitted = true;
+      }
+      if (noMoreExpHolds) {
+        var _getConfig5, _getConfig5$experimen;
+        if ((_getConfig5 = getConfig()) !== null && _getConfig5 !== void 0 && (_getConfig5$experimen = _getConfig5.experimentalInteractionMetrics) !== null && _getConfig5$experimen !== void 0 && _getConfig5$experimen.enabled) {
+          onExperimentalInteractionComplete(interactionId, interaction, endTime);
+        }
+        postInteraction();
       }
     }
   }
 }
-function callCancelCallbacks(interaction) {
-  interaction.cancelCallbacks.reverse().forEach(cancelCallback => {
-    cancelCallback();
-  });
-}
 export function abort(interactionId, abortReason) {
   const interaction = interactions.get(interactionId);
   if (interaction != null) {
+    var _getConfig6, _getConfig6$experimen;
     callCancelCallbacks(interaction);
     interaction.abortReason = abortReason;
     finishInteraction(interactionId, interaction);
+    if ((_getConfig6 = getConfig()) !== null && _getConfig6 !== void 0 && (_getConfig6$experimen = _getConfig6.experimentalInteractionMetrics) !== null && _getConfig6$experimen !== void 0 && _getConfig6$experimen.enabled) {
+      onExperimentalInteractionComplete(interactionId, interaction);
+    }
+    remove(interactionId);
   }
 }
 export function abortByNewInteraction(interactionId, interactionName) {
   const interaction = interactions.get(interactionId);
   if (interaction != null) {
+    var _getConfig7, _getConfig7$experimen;
     callCancelCallbacks(interaction);
     interaction.abortReason = 'new_interaction';
     interaction.abortedByInteractionName = interactionName;
     finishInteraction(interactionId, interaction);
+    if ((_getConfig7 = getConfig()) !== null && _getConfig7 !== void 0 && (_getConfig7$experimen = _getConfig7.experimentalInteractionMetrics) !== null && _getConfig7$experimen !== void 0 && _getConfig7$experimen.enabled) {
+      onExperimentalInteractionComplete(interactionId, interaction);
+    }
+    remove(interactionId);
   }
 }
 export function abortAll(abortReason, abortedByInteractionName) {
   interactions.forEach((interaction, interactionId) => {
+    var _getConfig8, _getConfig8$experimen;
     const noMoreHolds = interaction.holdActive.size === 0;
     if (!noMoreHolds) {
       callCancelCallbacks(interaction);
-      // eslint-disable-next-line no-param-reassign
       interaction.abortReason = abortReason;
       if (abortedByInteractionName != null) {
-        // eslint-disable-next-line no-param-reassign
         interaction.abortedByInteractionName = abortedByInteractionName;
       }
     }
     finishInteraction(interactionId, interaction);
+    if ((_getConfig8 = getConfig()) !== null && _getConfig8 !== void 0 && (_getConfig8$experimen = _getConfig8.experimentalInteractionMetrics) !== null && _getConfig8$experimen !== void 0 && _getConfig8$experimen.enabled) {
+      onExperimentalInteractionComplete(interactionId, interaction);
+    }
+    remove(interactionId);
   });
 }
 export function addOnCancelCallback(id, cancelCallback) {
@@ -525,8 +490,8 @@ export function addOnCancelCallback(id, cancelCallback) {
   interaction === null || interaction === void 0 ? void 0 : interaction.cancelCallbacks.push(cancelCallback);
 }
 export function addNewInteraction(interactionId, ufoName, type, startTime, rate, labelStack, routeName, trace = null) {
-  var _getConfig5, _getConfig5$postInter;
-  if ((_getConfig5 = getConfig()) !== null && _getConfig5 !== void 0 && (_getConfig5$postInter = _getConfig5.postInteractionLog) !== null && _getConfig5$postInter !== void 0 && _getConfig5$postInter.enabled) {
+  var _getConfig9, _getConfig9$postInter;
+  if ((_getConfig9 = getConfig()) !== null && _getConfig9 !== void 0 && (_getConfig9$postInter = _getConfig9.postInteractionLog) !== null && _getConfig9$postInter !== void 0 && _getConfig9$postInter.enabled) {
     postInteractionLog.reset();
   }
   let previousTime = startTime;
@@ -566,9 +531,11 @@ export function addNewInteraction(interactionId, ufoName, type, startTime, rate,
     requestInfo: [],
     reactProfilerTimings: [],
     holdInfo: [],
+    holdExpInfo: [],
     holdActive: new Map(),
+    holdExpActive: new Map(),
     // measure when we execute this code
-    // from this we can measure the input delay -
+    // from this, we can measure the input delay -
     // how long the browser took to hand execution back to JS)
     measureStart: performance.now(),
     rate,
@@ -618,6 +585,10 @@ export function addNewInteraction(interactionId, ufoName, type, startTime, rate,
     postInteractionLog.startVCObserver({
       startTime
     });
+    experimentalVC.start({
+      startTime
+    });
+    activeSubmitted = false;
   }
 }
 export function addBrowserMetricEvent(event) {
@@ -680,17 +651,6 @@ export function addRequestInfo(interactionId, labelStack, requestInfo) {
     });
   }
 }
-function isSegmentLabel(obj) {
-  return obj && typeof obj.name === 'string' && typeof obj.segmentId === 'string';
-}
-function getSegmentCacheKey(labelStack) {
-  return labelStack.map(l => {
-    if (isSegmentLabel(l)) {
-      return `${l.name}_${l.segmentId}`;
-    }
-    return l.name;
-  }).join('|');
-}
 export function addSegment(labelStack) {
   const key = getSegmentCacheKey(labelStack);
   const existingSegment = segmentCache.get(key);

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

@@ -1,8 +1,10 @@
 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 { postInteractionLog } from '../create-payload/common/utils';
 import { setupHiddenTimingCapture } from '../hidden-timing';
-import { postInteractionLog, sinkInteractionHandler, sinkPostInteractionLogHandler } from '../interaction-metrics';
+import { sinkInteractionHandler, sinkPostInteractionLogHandler } from '../interaction-metrics';
 import { getVCObserver } from '../vc';
 let initialized = false;
 function sinkInteraction(instance, payloadPackage) {
@@ -15,6 +17,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 +44,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 +58,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);
       },