@atlaskit/react-ufo 3.4.14 → 3.5.0

package/dist/es2019/trace-redirect/index.js

@@ -1,10 +1,12 @@
 import { DefaultInteractionID } from '../interaction-id-context';
 import { addRedirect } from '../interaction-metrics';
 import UFORouteName from '../route-name-context';
-export default function traceUFORedirect(fromUfoName, nextUfoName, nextRouteName, time) {
+import { withProfiling } from '../self-measurements';
+const traceUFORedirect = withProfiling(function traceUFORedirect(fromUfoName, nextUfoName, nextRouteName, time) {
   UFORouteName.current = nextUfoName;
   const interactionId = DefaultInteractionID.current;
   if (interactionId) {
     addRedirect(interactionId, fromUfoName, nextUfoName, nextRouteName, time);
   }
-}
+});
+export default traceUFORedirect;

package/dist/es2019/trace-transition/index.js

@@ -6,8 +6,9 @@ import { getActiveTrace } from '../experience-trace-id-context';
 import UFOInteractionIDContext, { DefaultInteractionID } from '../interaction-id-context';
 import { abortAll, addNewInteraction, addOnCancelCallback, getActiveInteraction, tryComplete } from '../interaction-metrics';
 import UFORouteName from '../route-name-context';
+import { withProfiling } from '../self-measurements';
 import { setInteractionActiveTrace } from './utils/set-interaction-active-trace';
-export default function traceUFOTransition(ufoName, routeName = ufoName) {
+const traceUFOTransition = withProfiling(function traceUFOTransition(ufoName, routeName = ufoName) {
   const pressInteractionsList = getDoNotAbortActivePressInteractionOnTransition();
   const interaction = getActiveInteraction();
   if (pressInteractionsList && interaction) {
@@ -26,7 +27,7 @@ export default function traceUFOTransition(ufoName, routeName = ufoName) {
       addNewInteraction(newId, ufoName, 'transition', performance.now(), rate, null, routeName, getActiveTrace());
     }
   }
-}
+});
 export function useUFOTransitionCompleter() {
   const interactionId = useContext(UFOInteractionIDContext);
   const capturedInteractionId = interactionId.current;
@@ -45,4 +46,5 @@ export function useUFOTransitionCompleter() {
       });
     }
   }, [capturedInteractionId, interactionId]);
-}
+}
+export default traceUFOTransition;

package/dist/es2019/trace-transition/utils/generate-span-id/index.js

@@ -1 +1,4 @@
-export const generateSpanId = () => Array.from(new Array(16), () => Math.floor(Math.random() * 16).toString(16)).join('');
+import { withProfiling } from '../../../self-measurements';
+export const generateSpanId = withProfiling(function generateSpanId() {
+  return Array.from(new Array(16), () => Math.floor(Math.random() * 16).toString(16)).join('');
+});

package/dist/es2019/trace-transition/utils/set-interaction-active-trace/index.js

@@ -1,5 +1,6 @@
 import { setActiveTrace } from '../../../experience-trace-id-context';
+import { withProfiling } from '../../../self-measurements';
 import { generateSpanId } from '../generate-span-id';
-export const setInteractionActiveTrace = newId => {
+export const setInteractionActiveTrace = withProfiling(function setInteractionActiveTrace(newId) {
   setActiveTrace(newId.replace(/-/g, ''), generateSpanId(), 'transition');
-};
+});

package/dist/es2019/vc/index.js

@@ -1,12 +1,14 @@
 var _process, _process$env;
 import { fg } from '@atlaskit/platform-feature-flags';
 import { getConfig } from '../config';
+import { markProfilingEnd, markProfilingStart, withProfiling } from '../self-measurements';
 import { VCObserverNOOP } from './no-op-vc-observer';
 import { VCObserver } from './vc-observer';
 import VCObserverNew from './vc-observer-new';
 class VCObserverWrapper {
   constructor(opts = {}) {
     var _getConfig, _getConfig$vc;
+    const operationTimer = markProfilingStart('VCObserverWrapper constructor');
     this.newVCObserver = null;
     const isNewVCObserverEnabled = fg('platform_ufo_vc_observer_new') || ((_getConfig = getConfig()) === null || _getConfig === void 0 ? void 0 : (_getConfig$vc = _getConfig.vc) === null || _getConfig$vc === void 0 ? void 0 : _getConfig$vc.enableVCObserverNew);
     if (isNewVCObserverEnabled) {
@@ -15,6 +17,16 @@ class VCObserverWrapper {
       });
     }
     this.oldVCObserver = new VCObserver(opts);
+    this.start = withProfiling(this.start.bind(this), ['vc']);
+    this.stop = withProfiling(this.stop.bind(this), ['vc']);
+    this.getVCRawData = withProfiling(this.getVCRawData.bind(this), ['vc']);
+    this.getVCResult = withProfiling(this.getVCResult.bind(this), ['vc']);
+    this.setSSRElement = withProfiling(this.setSSRElement.bind(this), ['vc']);
+    this.setReactRootRenderStart = withProfiling(this.setReactRootRenderStart.bind(this), ['vc']);
+    this.setReactRootRenderStop = withProfiling(this.setReactRootRenderStop.bind(this), ['vc']);
+    markProfilingEnd(operationTimer, {
+      tags: ['vc']
+    });
   }
   start(startArg) {
     var _this$oldVCObserver, _this$newVCObserver;
@@ -65,7 +77,7 @@ class VCObserverWrapper {
 let isServer = Boolean(globalThis === null || globalThis === void 0 ? void 0 : globalThis.__SERVER__);
 // Other products set this other variable to indicate it is running in SSR
 let isReactSSR = typeof process !== 'undefined' && Boolean(((_process = process) === null || _process === void 0 ? void 0 : (_process$env = _process.env) === null || _process$env === void 0 ? void 0 : _process$env.REACT_SSR) || false);
-export function isEnvironmentSupported() {
+export const isEnvironmentSupported = withProfiling(function isEnvironmentSupported() {
   // SSR environment aren't supported
   if (isReactSSR || isServer) {
     return false;
@@ -80,11 +92,11 @@ export function isEnvironmentSupported() {
     return false;
   }
   return true;
-}
-export const getVCObserver = (opts = {}) => {
+}, ['vc']);
+export const getVCObserver = withProfiling(function getVCObserver(opts = {}) {
   if (!globalThis.__vcObserver) {
     const shouldMockVCObserver = !isEnvironmentSupported();
     globalThis.__vcObserver = shouldMockVCObserver ? new VCObserverNOOP() : new VCObserverWrapper(opts);
   }
   return globalThis.__vcObserver;
-};
+}, ['vc']);

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

@@ -1,7 +1,8 @@
 import { bind } from 'bind-event-listener';
 import { AbortEvent } from '../../common/vc/types';
+import { withProfiling } from '../../self-measurements';
 import { getViewportHeight, getViewportWidth } from './getViewport';
-export const attachAbortListeners = (window, initialViewPort, callback) => {
+export const attachAbortListeners = withProfiling(function attachAbortListeners(window, initialViewPort, callback) {
   const unbindWheel = bind(window, {
     type: AbortEvent.wheel,
     listener: e => {
@@ -31,4 +32,4 @@ export const attachAbortListeners = (window, initialViewPort, callback) => {
     }
   });
   return [unbindWheel, unbindKeydown, unbindResize];
-};
+}, ['vc']);

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

@@ -1,8 +1,34 @@
 import { fg } from '@atlaskit/platform-feature-flags';
 import { getPageVisibilityState } from '../../hidden-timing';
+import { withProfiling } from '../../self-measurements';
 import { getRevisions } from './revisions/revisions';
 const VCParts = ['25', '50', '75', '80', '85', '90', '95', '98', '99'];
-export function getVCRevisionsData({
+const READONLY_EMPTY_ARRAY = Array.from({
+  length: 0
+});
+
+// Helper function to create vcDetails object to avoid code duplication
+const createVCDetails = withProfiling(function createVCDetails(calculatedVC, shouldHaveVCmetric) {
+  if (!shouldHaveVCmetric || !calculatedVC || !calculatedVC.VC || !calculatedVC.VCBox) {
+    return {};
+  }
+  const details = {};
+  const {
+    VC,
+    VCBox
+  } = calculatedVC; // Destructure once to avoid repeated property access
+
+  for (const key of VCParts) {
+    details[key] = {
+      t: VC[key],
+      e: VCBox[key] || READONLY_EMPTY_ARRAY
+    };
+  }
+  return details;
+}, ['vc']);
+
+// Optimized implementation (current one)
+export const getVCRevisionsData = withProfiling(function getVCRevisionsData({
   fullPrefix,
   interaction,
   isVCClean,
@@ -37,39 +63,33 @@ export function getVCRevisionsData({
       })
     };
   }
+
+  // Calculate these conditions once
   const pageVisibilityUpToTTAI = getPageVisibilityState(interaction.start, interaction.end);
   const isVisiblePageVisibleUpToTTAI = pageVisibilityUpToTTAI === 'visible';
   const shouldHaveVCmetric = isVCClean && !isEventAborted && isVisiblePageVisibleUpToTTAI;
-  const ttvcV1Revision = {
-    revision: 'fy25.01',
-    clean: isVCClean,
-    'metric:vc90': shouldHaveVCmetric ? calculatedVC.VC['90'] : null,
-    vcDetails: shouldHaveVCmetric ? Object.fromEntries(VCParts.map(key => {
-      var _calculatedVC$VCBox$k;
-      return [key, {
-        t: calculatedVC.VC[key],
-        e: (_calculatedVC$VCBox$k = calculatedVC.VCBox[key]) !== null && _calculatedVC$VCBox$k !== void 0 ? _calculatedVC$VCBox$k : []
-      }];
-    })) : {}
-  };
+
+  // Create the V2 revision object which is always needed
   const ttvcV2Revision = {
     revision: 'fy25.02',
     clean: isVCClean,
     'metric:vc90': shouldHaveVCmetric ? calculatedVCNext.VC['90'] : null,
-    vcDetails: shouldHaveVCmetric ? Object.fromEntries(VCParts.map(key => {
-      var _calculatedVCNext$VCB;
-      return [key, {
-        t: calculatedVCNext.VC[key],
-        e: (_calculatedVCNext$VCB = calculatedVCNext.VCBox[key]) !== null && _calculatedVCNext$VCB !== void 0 ? _calculatedVCNext$VCB : []
-      }];
-    })) : {}
+    vcDetails: createVCDetails(calculatedVCNext, shouldHaveVCmetric)
   };
   if (fg('platform_ufo_disable_ttvc_v1')) {
     return {
       [`${fullPrefix}vc:rev`]: [ttvcV2Revision]
     };
   }
+
+  // Only create ttvcV1Revision when we're actually going to use it
+  const ttvcV1Revision = {
+    revision: 'fy25.01',
+    clean: isVCClean,
+    'metric:vc90': shouldHaveVCmetric ? calculatedVC.VC['90'] : null,
+    vcDetails: createVCDetails(calculatedVC, shouldHaveVCmetric)
+  };
   return {
     [`${fullPrefix}vc:rev`]: [ttvcV1Revision, ttvcV2Revision]
   };
-}
+}, ['vc']);

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

@@ -1,4 +1,5 @@
-export function getViewportWidth(document = window.document) {
+import { withProfiling } from '../../self-measurements';
+export const getViewportWidth = withProfiling(function getViewportWidth(document = window.document) {
   let documentWidth;
   try {
     documentWidth = document.documentElement.clientWidth || 0;
@@ -6,8 +7,8 @@ export function getViewportWidth(document = window.document) {
     documentWidth = 0;
   }
   return Math.max(documentWidth, window.innerWidth || 0);
-}
-export function getViewportHeight(document = window.document) {
+}, ['vc']);
+export const getViewportHeight = withProfiling(function getViewportHeight(document = window.document) {
   let documentHeight;
   try {
     documentHeight = document.documentElement.clientHeight || 0;
@@ -15,4 +16,4 @@ export function getViewportHeight(document = window.document) {
     documentHeight = 0;
   }
   return Math.max(documentHeight, window.innerHeight || 0);
-}
+}, ['vc']);

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

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { getPageVisibilityState } from '../../../hidden-timing';
+import { markProfilingEnd, markProfilingStart, withProfiling } from '../../../self-measurements';
 const UNUSED_SECTOR = 0;
 export class MultiRevisionHeatmap {
   constructor({
@@ -40,6 +41,7 @@ export class MultiRevisionHeatmap {
       } = mappedValues;
       return (r - l) * (b - t) / (this.arraySize.w * this.arraySize.h);
     });
+    const operationTimer = markProfilingStart('MultiRevisionHeatmap constructor');
     this.viewport = viewport;
     this.revisions = revisions;
     if (arraySize) {
@@ -54,6 +56,16 @@ export class MultiRevisionHeatmap {
       this.componentsLogs[i] = {};
       this.vcRatios[i] = {};
     });
+    this.handleUpdate = withProfiling(this.handleUpdate.bind(this), ['vc']);
+    this.getData = withProfiling(this.getData.bind(this), ['vc']);
+    this.getPayloadShapedData = withProfiling(this.getPayloadShapedData.bind(this), ['vc']);
+    this.processData = withProfiling(this.processData.bind(this), ['vc']);
+    this.mapPixelsToHeatmap = withProfiling(this.mapPixelsToHeatmap.bind(this), ['vc']);
+    this.getElementRatio = withProfiling(this.getElementRatio.bind(this), ['vc']);
+    this.applyChangesToHeatMap = withProfiling(this.applyChangesToHeatMap.bind(this), ['vc']);
+    this.getIndex = withProfiling(this.getIndex.bind(this), ['vc']);
+    this.getCleanHeatmap = withProfiling(this.getCleanHeatmap.bind(this), ['vc']);
+    markProfilingEnd(operationTimer);
   }
   handleUpdate({
     time,
@@ -63,7 +75,10 @@ export class MultiRevisionHeatmap {
     element,
     targetName,
     ignoreReason,
-    onError
+    onError,
+    attributeName,
+    oldValue,
+    newValue
   }) {
     const mappedValues = this.mapPixelsToHeatmap(intersectionRect.left, intersectionRect.top, intersectionRect.width, intersectionRect.height);
     const result = this.applyChangesToHeatMap(mappedValues, time, classification);
@@ -82,7 +97,10 @@ export class MultiRevisionHeatmap {
         __debug__element: this.devToolsEnabled ? new WeakRef(element) : null,
         intersectionRect,
         targetName,
-        ignoreReason
+        ignoreReason,
+        attributeName,
+        oldValue,
+        newValue
       });
     });
   }
@@ -231,11 +249,11 @@ export class MultiRevisionHeatmap {
   getCleanHeatmap() {
     return new Int32Array(this.arraySize.w * this.arraySize.h);
   }
-  static makeVCReturnObj(VCParts) {
-    const vc = {};
-    VCParts.forEach(v => {
-      vc[v] = null;
-    });
-    return vc;
-  }
-}
+}
+_defineProperty(MultiRevisionHeatmap, "makeVCReturnObj", withProfiling(function makeVCReturnObj(VCParts) {
+  const vc = {};
+  VCParts.forEach(v => {
+    vc[v] = null;
+  });
+  return vc;
+}, ['vc']));