@atlaskit/react-ufo 2.4.5 → 2.4.7

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

@@ -26,6 +26,14 @@ 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 () {
@@ -56,33 +64,43 @@ 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, // eslint-disable-next-line import/dynamic-import-chunkname
-  Promise.resolve().then(function () {
+  Promise.all([analyticsWebClientAsync, Promise.resolve().then(function () {
     return _interopRequireWildcard(require( /* webpackChunkName: "create-payloads" */'../create-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'));
+  }), 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'));
   })]).then(function (_ref) {
-    var _ref2 = (0, _slicedToArray2.default)(_ref, 3),
+    var _ref2 = (0, _slicedToArray2.default)(_ref, 4),
       awc = _ref2[0],
       payloadPackage = _ref2[1],
-      createPostInteractionLogPayloadPackage = _ref2[2];
+      createExperimentalInteractionMetricsPayload = _ref2[2],
+      createPostInteractionLogPayloadPackage = _ref2[3];
     if (awc.getAnalyticsWebClientPromise) {
       awc.getAnalyticsWebClientPromise().then(function (client) {
-        var _config$postInteracti;
+        var _config$experimentalI, _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$postInteracti2;
+      var _config$experimentalI2, _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,8 +32,7 @@ var useLayoutEffectSAFE = typeof window === 'undefined' ? _react.useEffect : _re
  *   return (
  *     <>
  *       <Skeleton />
- *       <UFOLoadHold name="card">
- *     </UFOLoadHold>
+ *       <UFOLoadHold name="card" />
  *   )
  * }
  * ```
@@ -68,8 +67,8 @@ function UFOLoadHold(_ref) {
   // react-18: useId instead
   var context = (0, _react.useContext)(_interactionContext.default);
   useLayoutEffectSAFE(function () {
-    if (hold && !experimental && context != null) {
-      return context.hold(name);
+    if (hold && context != null) {
+      return context.hold(name, experimental);
     }
   }, [hold, context, name]);
 

package/dist/cjs/segment/segment.js

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

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

@@ -4,6 +4,7 @@ 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");
@@ -13,7 +14,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 = 'awaiting_pageload_name';
+var AWAITING_PAGELOAD_NAME = exports.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/observers/index.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Observers = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -13,9 +12,6 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _vcUtils = require("../media-wrapper/vc-utils");
 var _editorLnv = require("./editor-lnv");
 var _ssrPlaceholders = require("./ssr-placeholders");
-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; }
 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) { (0, _defineProperty2.default)(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; }
 var state = {
@@ -202,8 +198,7 @@ var Observers = exports.Observers = /*#__PURE__*/function () {
             });
           } else if (mutation.type === 'attributes') {
             if (mutation.target instanceof HTMLElement) {
-              var isDisplayStyleAttributeMutation = mutation.attributeName === 'style' && _this2.getStyleDisplay(mutation.target.getAttribute('style')) !== _this2.getStyleDisplay(mutation.oldValue);
-              if ((0, _platformFeatureFlags.fg)('platform-ufo-vc-observe-attributes') || isDisplayStyleAttributeMutation) {
+              if ((0, _platformFeatureFlags.fg)('platform-ufo-vc-observe-attributes')) {
                 _this2.observeElement(mutation.target, mutation, 'attr', ignoreReason);
               }
             }
@@ -212,40 +207,6 @@ var Observers = exports.Observers = /*#__PURE__*/function () {
         _this2.measureStop();
       }) : null;
     }
-  }, {
-    key: "getStyleDisplay",
-    value: function getStyleDisplay(styleAttributeValue) {
-      if (!styleAttributeValue) {
-        return undefined;
-      }
-
-      // Split the style string into individual declarations
-      var declarations = styleAttributeValue.split(';');
-      // Iterate over each declaration
-      var _iterator = _createForOfIteratorHelper(declarations),
-        _step;
-      try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var declaration = _step.value;
-          // Trim whitespace and split into property and value
-          var _declaration$split$ma = declaration.split(':').map(function (part) {
-              return part.trim();
-            }),
-            _declaration$split$ma2 = (0, _slicedToArray2.default)(_declaration$split$ma, 2),
-            property = _declaration$split$ma2[0],
-            value = _declaration$split$ma2[1];
-          // Check if the property is 'display'
-          if (property && property.toLowerCase() === 'display') {
-            return value;
-          }
-        }
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
-      }
-      return undefined;
-    }
   }, {
     key: "getElementName",
     value: function getElementName(element) {

package/dist/es2019/config/index.js

@@ -67,6 +67,28 @@ 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-experimental-interaction-metrics-payload/index.js

@@ -0,0 +1,67 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import coinflip from '../coinflip';
+import { getConfig, getExperimentalInteractionRate } from '../config';
+import { createInteractionMetricsPayload, getUfoNameOverride } from '../create-payload';
+import { getPageVisibilityState } from '../hidden-timing';
+import { VCObserver } from '../vc/vc-observer';
+export class ExperimentalInteractionMetrics {
+  constructor() {
+    /**
+     * Handler function to process / send the observation data
+     */
+    _defineProperty(this, "sinkHandlerFn", () => {});
+    /**
+     * independent VC observer that observes until `custom.post-interaction-logs` event is sent
+     */
+    _defineProperty(this, "vcObserver", null);
+  }
+  /**
+   * Set the fn that would be invoked to process / send the observation data
+   */
+  sinkHandler(sinkHandlerFn) {
+    this.sinkHandlerFn = sinkHandlerFn;
+  }
+  onInteractionComplete(interactionId, data, endTime = performance.now()) {
+    if (data.ufoName) {
+      data.end = endTime;
+      this.sinkHandlerFn(interactionId, data);
+    }
+  }
+  initializeVCObserver(options) {
+    if (this.vcObserver === null) {
+      this.vcObserver = new VCObserver({
+        ...options,
+        isPostInteraction: true
+      });
+    }
+    return this;
+  }
+  startVCObserver({
+    startTime
+  }) {
+    var _this$vcObserver;
+    (_this$vcObserver = this.vcObserver) === null || _this$vcObserver === void 0 ? void 0 : _this$vcObserver.start({
+      startTime
+    });
+  }
+}
+export function createExperimentalInteractionMetricsPayload(interactionId, interaction) {
+  const config = getConfig();
+  if (!config) {
+    throw Error('UFO Configuration not provided');
+  }
+  const ufoName = getUfoNameOverride(interaction);
+  const modifiedInteraction = {
+    ...interaction,
+    ufoName
+  };
+  const rate = getExperimentalInteractionRate(ufoName, interaction.type);
+  if (!coinflip(rate)) {
+    return null;
+  }
+  const pageVisibilityState = getPageVisibilityState(interaction.start, interaction.end);
+  if (pageVisibilityState !== 'visible') {
+    return null;
+  }
+  return createInteractionMetricsPayload(modifiedInteraction, interactionId, true);
+}

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

@@ -1,5 +1,11 @@
 /* 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, '-');
 };
@@ -53,4 +59,83 @@ 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;
+};