@atlaskit/react-ufo 2.14.2 → 2.15.0

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

@@ -2,7 +2,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { fg } from '@atlaskit/platform-feature-flags';
 import { attachAbortListeners } from './attachAbortListeners';
 import { getViewportHeight, getViewportWidth } from './getViewport';
+import { MultiRevisionHeatmap } from './heatmap/heatmap';
 import { Observers } from './observers';
+import { getRevisions } from './revisions/revisions';
 const abortReason = {
   scroll: 'scroll',
   keypress: 'keypress',
@@ -35,6 +37,7 @@ export class VCObserver {
     });
     /* heatmap */
     _defineProperty(this, "arraySize", 0);
+    _defineProperty(this, "multiHeatmap", null);
     _defineProperty(this, "componentsLog", {});
     _defineProperty(this, "vcRatios", {});
     _defineProperty(this, "active", false);
@@ -68,6 +71,7 @@ export class VCObserver {
         },
         heatmap: this.heatmap,
         heatmapNext: this.heatmapNext,
+        multiHeatmap: this.multiHeatmap,
         outOfBoundaryInfo: this.outOfBoundaryInfo,
         totalTime: Math.round(this.totalTime + this.observers.getTotalTime()),
         componentsLog: {
@@ -106,7 +110,8 @@ export class VCObserver {
         componentsLog,
         viewport,
         devToolsEnabled,
-        ratios
+        ratios,
+        multiHeatmap
       } = rawData;
       if (abortReasonInfo !== null && abortReason.blocking) {
         // exposing data to devtools
@@ -150,6 +155,7 @@ export class VCObserver {
         /* empty */
       }
       let _componentsLog = {};
+      // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
       if (fg('ufo-remove-vc-component-observations-after-ttai')) {
         Object.entries(this.componentsLog).forEach(([_timestamp, value]) => {
           const timestamp = Number(_timestamp);
@@ -207,9 +213,30 @@ export class VCObserver {
               tti,
               ttai: stop - start
             },
+            start,
+            stop,
             heatmap,
             ratios
           };
+          window.__vcNext = {
+            entries: vcNext.VCEntries.rel,
+            log: componentsLog,
+            metrics: {
+              '75': vcNext.VC['75'],
+              '80': vcNext.VC['80'],
+              '85': vcNext.VC['85'],
+              '90': vcNext.VC['90'],
+              '95': vcNext.VC['95'],
+              '98': vcNext.VC['98'],
+              '99': vcNext.VC['99'],
+              tti,
+              ttai: stop - start
+            },
+            start,
+            stop,
+            heatmap: heatmapNext,
+            ratios
+          };
 
           // Emitting a custom event to make it available in the Chrome extension
           window.dispatchEvent(new CustomEvent('vcReady', {
@@ -222,6 +249,16 @@ export class VCObserver {
       } catch (e) {
         /*  do nothing */
       }
+      const isMultiHeatmapEnabled = fg('ufo_vc_multiheatmap');
+      const revisionsData = isMultiHeatmapEnabled && multiHeatmap !== null ? {
+        [`${fullPrefix}vc:rev`]: multiHeatmap.getPayloadShapedData({
+          VCParts: VCObserver.VCParts.map(v => parseInt(v)),
+          ssr,
+          clean: !abortReasonInfo
+        })
+      } : null;
+      // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+      const isCalcSpeedIndexEnabled = fg('ufo-calc-speed-index');
       return {
         'metrics:vc': VC,
         [`${fullPrefix}vc:state`]: true,
@@ -238,11 +275,28 @@ export class VCObserver {
         [`${fullPrefix}vc:next:updates`]: vcNext.VCEntries.rel.slice(0, 50),
         [`${fullPrefix}vc:next:dom`]: vcNext.VCBox,
         //...oldDomUpdates,
-        [`${fullPrefix}vc:ignored`]: this.getIgnoredElements(componentsLog)
+        [`${fullPrefix}vc:ignored`]: this.getIgnoredElements(componentsLog),
+        ...revisionsData,
+        [`ufo:speedIndex`]: isCalcSpeedIndexEnabled ? VCEntries.speedIndex : undefined,
+        [`ufo:next:speedIndex`]: isCalcSpeedIndexEnabled ? vcNext.VCEntries.speedIndex : undefined
       };
     });
     _defineProperty(this, "handleUpdate", (rawTime, intersectionRect, targetName, element, type, ignoreReason) => {
       this.measureStart();
+      this.legacyHandleUpdate(rawTime, intersectionRect, targetName, element, type, ignoreReason);
+      if (fg('ufo_vc_multiheatmap')) {
+        this.onViewportChangeDetected({
+          timestamp: rawTime,
+          intersectionRect,
+          targetName,
+          element,
+          type,
+          ignoreReason
+        });
+      }
+      this.measureStop();
+    });
+    _defineProperty(this, "legacyHandleUpdate", (rawTime, intersectionRect, targetName, element, type, ignoreReason) => {
       if (this.abortReason.reason === null || this.abortReason.blocking === false) {
         const time = Math.round(rawTime - this.startTime);
         const mappedValues = this.mapPixelsToHeatmap(intersectionRect.left, intersectionRect.top, intersectionRect.width, intersectionRect.height);
@@ -263,8 +317,39 @@ export class VCObserver {
           ignoreReason
         });
       }
-      // devtools export
-      this.measureStop();
+    });
+    _defineProperty(this, "onViewportChangeDetected", ({
+      element,
+      type,
+      ignoreReason,
+      timestamp,
+      targetName,
+      intersectionRect
+    }) => {
+      if (this.multiHeatmap === null) {
+        return;
+      }
+      // @todo add abort reason handling
+      const time = Math.round(timestamp - this.startTime);
+      const revisions = getRevisions();
+      const revisionsClassification = revisions.map(revision => {
+        return revision.classifier.classifyUpdate({
+          element,
+          type,
+          ignoreReason
+        });
+      }, []);
+      this.multiHeatmap.handleUpdate({
+        time,
+        targetName,
+        intersectionRect,
+        type,
+        element,
+        classification: revisionsClassification,
+        onError: error => {
+          this.setAbortReason(abortReason.error, error.time, error.error);
+        }
+      });
     });
     _defineProperty(this, "mapPixelsToHeatmap", (left, top, width, height) => {
       const {
@@ -349,6 +434,13 @@ export class VCObserver {
     });
     this.heatmap = this.getCleanHeatmap();
     this.heatmapNext = this.getCleanHeatmap();
+    if (fg('ufo_vc_multiheatmap')) {
+      this.multiHeatmap = new MultiRevisionHeatmap({
+        viewport: this.viewport,
+        revisions: getRevisions(),
+        devToolsEnabled: this.devToolsEnabled
+      });
+    }
     this.isPostInteraction = options.isPostInteraction || false;
   }
   start({
@@ -425,8 +517,17 @@ export class VCObserver {
     const entries = Object.entries(lastUpdate).map(a => [parseInt(a[0], 10), a[1]]).sort((a, b) => a[0] > b[0] ? 1 : -1);
     const VC = VCObserver.makeVCReturnObj();
     const VCBox = VCObserver.makeVCReturnObj();
+
+    // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+    const isCalcSpeedIndexEnabled = fg('ufo-calc-speed-index');
     entries.reduce((acc = 0, v) => {
-      const VCRatio = v[1] / totalPainted + acc;
+      const currRatio = v[1] / totalPainted;
+      let VCRatio = currRatio + acc;
+      if (fg('platform_ufo_fix_vc_observer_rounding_error')) {
+        const preciseCurrRatio = Math.round(100 * (v[1] / totalPainted));
+        const preciseAccRatio = Math.round(acc * 100);
+        VCRatio = (preciseCurrRatio + preciseAccRatio) / 100;
+      }
       const time = v[0];
       VCObserver.VCParts.forEach(key => {
         const value = parseInt(key, 10);
@@ -439,10 +540,15 @@ export class VCObserver {
       return VCRatio;
     }, 0);
     const VCEntries = entries.reduce((acc, [timestamp, entryPainted], i) => {
-      var _acc$abs, _componentsLog$timest;
+      var _acc$abs, _componentsLog$timest, _acc$rel$vc, _acc$rel;
       const currentlyPainted = entryPainted + (((_acc$abs = acc.abs[i - 1]) === null || _acc$abs === void 0 ? void 0 : _acc$abs[1]) || 0);
       const currentlyPaintedRatio = Math.round(currentlyPainted / totalPainted * 1000) / 10;
       const logEntry = (_componentsLog$timest = componentsLog[timestamp]) === null || _componentsLog$timest === void 0 ? void 0 : _componentsLog$timest.map(v => v.targetName);
+      const ratioDelta = (currentlyPaintedRatio - ((_acc$rel$vc = (_acc$rel = acc.rel[i - 1]) === null || _acc$rel === void 0 ? void 0 : _acc$rel.vc) !== null && _acc$rel$vc !== void 0 ? _acc$rel$vc : 0)) / 100;
+      if (isCalcSpeedIndexEnabled) {
+        const speedIndex = timestamp * ratioDelta;
+        acc.speedIndex += speedIndex;
+      }
       acc.abs.push([timestamp, currentlyPainted]);
       acc.rel.push({
         time: timestamp,
@@ -452,8 +558,10 @@ export class VCObserver {
       return acc;
     }, {
       abs: [],
-      rel: []
+      rel: [],
+      speedIndex: 0
     });
+    VCEntries.speedIndex = Math.round(VCEntries.speedIndex);
     return {
       VC,
       VCBox,

package/dist/es2019/vc/vc-observer/observers/ssr-placeholders/index.js

@@ -1,5 +1,4 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { fg } from '@atlaskit/platform-feature-flags';
 const EQUALITY_THRESHOLD = 0.1;
 const ANCESTOR_LOOKUP_LIMIT = 10;
 export class SSRPlaceholderHandlers {
@@ -26,20 +25,15 @@ export class SSRPlaceholderHandlers {
             return;
           }
           const rect = this.staticPlaceholders.get(staticKey);
-          if (fg('platform_ufo_ssr_ttvc_use_target_rect')) {
-            const hasSameSizePosition = this.hasSameSizePosition(rect, boundingClientRect);
-            if (hasSameSizePosition || this.isDummyRect(rect)) {
-              resolve(hasSameSizePosition);
-            } else {
-              requestAnimationFrame(() => {
-                const targetRect = target.getBoundingClientRect();
-                const hasSameSizePosition = this.hasSameSizePosition(rect, targetRect);
-                resolve(hasSameSizePosition);
-              });
-            }
-          } else {
-            const hasSameSizePosition = this.hasSameSizePosition(rect, boundingClientRect);
+          const hasSameSizePosition = this.hasSameSizePosition(rect, boundingClientRect);
+          if (hasSameSizePosition || this.isDummyRect(rect)) {
             resolve(hasSameSizePosition);
+          } else {
+            requestAnimationFrame(() => {
+              const targetRect = target.getBoundingClientRect();
+              const hasSameSizePosition = this.hasSameSizePosition(rect, targetRect);
+              resolve(hasSameSizePosition);
+            });
           }
           this.callbacks.delete(staticKey);
         }
@@ -50,20 +44,15 @@ export class SSRPlaceholderHandlers {
           return;
         }
         const rect = this.staticPlaceholders.get(key);
-        if (fg('platform_ufo_ssr_ttvc_use_target_rect')) {
-          const hasSameSizePosition = this.hasSameSizePosition(rect, boundingClientRect);
-          if (hasSameSizePosition || this.isDummyRect(rect)) {
-            resolve(hasSameSizePosition);
-          } else {
-            requestAnimationFrame(() => {
-              const targetRect = target.getBoundingClientRect();
-              const hasSameSizePosition = this.hasSameSizePosition(rect, targetRect);
-              resolve(hasSameSizePosition);
-            });
-          }
-        } else {
-          const hasSameSizePosition = this.hasSameSizePosition(rect, boundingClientRect);
+        const hasSameSizePosition = this.hasSameSizePosition(rect, boundingClientRect);
+        if (hasSameSizePosition || this.isDummyRect(rect)) {
           resolve(hasSameSizePosition);
+        } else {
+          requestAnimationFrame(() => {
+            const targetRect = target.getBoundingClientRect();
+            const hasSameSizePosition = this.hasSameSizePosition(rect, targetRect);
+            resolve(hasSameSizePosition);
+          });
         }
         this.staticPlaceholders.delete(staticKey);
         this.reactValidateCallbacks.delete(staticKey);

package/dist/es2019/vc/vc-observer/revisions/ViewportUpdateClassifier.js

@@ -0,0 +1,35 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+export class ViewportUpdateClassifier {
+  constructor() {
+    _defineProperty(this, "types", []);
+    _defineProperty(this, "filters", []);
+    _defineProperty(this, "removedFilters", []);
+    _defineProperty(this, "__combinedTypes", []);
+    _defineProperty(this, "__combinedFilters", []);
+  }
+  mergeConfig() {
+    this.__combinedTypes = [...this.types, ...((this === null || this === void 0 ? void 0 : this.__combinedTypes) || [])];
+    const previousFilters = this.removedFilters.length === 0 ? this.__combinedFilters : this.__combinedFilters.filter(filter => !this.removedFilters.includes(filter.name));
+    this.__combinedFilters = [...this.filters, ...previousFilters];
+  }
+  classifyUpdate({
+    element,
+    type,
+    tags,
+    ignoreReason
+  }) {
+    if (!this.__combinedTypes.includes(type)) {
+      return false;
+    }
+    return this.__combinedFilters.every(({
+      filter,
+      name
+    }) => {
+      return filter({
+        type,
+        tags,
+        ignoreReason
+      });
+    });
+  }
+}

package/dist/es2019/vc/vc-observer/revisions/fy24_01.js

@@ -0,0 +1,21 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { ViewportUpdateClassifier } from './ViewportUpdateClassifier';
+const legacyIgnoreReasons = ['image', 'ssr-hydration', 'editor-lazy-node-view', 'editor-container-mutation'];
+export class FY24_01Classifier extends ViewportUpdateClassifier {
+  constructor() {
+    super();
+    _defineProperty(this, "revision", 'fy24.01');
+    _defineProperty(this, "types", ['html', 'text']);
+    _defineProperty(this, "filters", [{
+      name: 'default-ignore-reasons',
+      filter: ({
+        type,
+        ignoreReason
+      }) => {
+        return !ignoreReason || !legacyIgnoreReasons.includes(ignoreReason);
+      }
+    }]);
+    this.mergeConfig();
+  }
+}
+export const revFY24_01Classifier = new FY24_01Classifier();

package/dist/es2019/vc/vc-observer/revisions/fy25_01.js

@@ -0,0 +1,21 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { FY24_01Classifier } from './fy24_01';
+export class FY25_01Classifier extends FY24_01Classifier {
+  constructor() {
+    super();
+    _defineProperty(this, "revision", 'fy25.01');
+    _defineProperty(this, "types", ['attr']);
+    _defineProperty(this, "filters", [{
+      name: 'not-visible',
+      filter: ({
+        type,
+        ignoreReason
+      }) => {
+        return !(ignoreReason !== null && ignoreReason !== void 0 && ignoreReason.includes('not-visible'));
+      }
+    }]);
+    _defineProperty(this, "removedFilters", []);
+    this.mergeConfig();
+  }
+}
+export const revFY25_01Classifier = new FY25_01Classifier();

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

@@ -0,0 +1,19 @@
+import { revFY24_01Classifier } from './fy24_01';
+import { revFY25_01Classifier } from './fy25_01';
+const Revisions = [{
+  name: 'fy24.01',
+  classifier: revFY24_01Classifier
+}, {
+  name: 'fy25.01',
+  classifier: revFY25_01Classifier
+}];
+let revisionResultCache = null;
+export const getRevisions = () => {
+  if (revisionResultCache !== null) {
+    return revisionResultCache;
+  }
+  revisionResultCache = [...Revisions
+  //...(fg('next_available') ? [{name: 'next', classifier:NEXT}] : [])
+  ];
+  return revisionResultCache;
+};

package/dist/es2019/vc/vc-observer/revisions/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -211,6 +211,16 @@ var getVCMetrics = function getVCMetrics(interaction) {
   if (interactionStatus.originalInteractionStatus !== 'SUCCEEDED' || pageVisibilityUpToTTAI !== 'visible') {
     return result;
   }
+  if (fg('ufo_vc_multiheatmap')) {
+    var _result;
+    (_result = result["".concat(prefix, ":vc:rev")]) === null || _result === void 0 || _result.forEach(function (element) {
+      var _element$vcDetails;
+      if ((_element$vcDetails = element.vcDetails) !== null && _element$vcDetails !== void 0 && (_element$vcDetails = _element$vcDetails['90']) !== null && _element$vcDetails !== void 0 && _element$vcDetails.t) {
+        var _element$vcDetails$;
+        element['metric:vc90'] = (_element$vcDetails$ = element.vcDetails['90']) === null || _element$vcDetails$ === void 0 ? void 0 : _element$vcDetails$.t;
+      }
+    });
+  }
   return _objectSpread(_objectSpread({}, result), {}, {
     'metric:vc90': VC['90']
   });
@@ -611,6 +621,7 @@ function getPayloadSize(payload) {
   return Math.round(new TextEncoder().encode(JSON.stringify(payload)).length / 1024);
 }
 function getStylesheetMetrics() {
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
   if (!fg('ufo_capture_stylesheet_metrics')) {
     return {};
   }

package/dist/esm/experience-trace-id-context/index.js

@@ -31,4 +31,8 @@ export var getActiveTraceHttpRequestHeaders = function getActiveTraceHttpRequest
     traceId = _state$context.traceId,
     spanId = _state$context.spanId;
   return makeTraceHttpRequestHeaders(traceId, spanId);
+};
+export var getActiveTraceAsQueryParams = function getActiveTraceAsQueryParams(_url) {
+  var traceHeaders = getActiveTraceHttpRequestHeaders(_url);
+  return traceHeaders ? new URLSearchParams(traceHeaders).toString().toLowerCase() : null;
 };

package/dist/esm/segment/segment.js

@@ -5,6 +5,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import React, { lazy, Profiler, Suspense, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
 import { unstable_NormalPriority as NormalPriority, unstable_scheduleCallback as scheduleCallback } from 'scheduler';
 import { v4 as createUUID } from 'uuid';
+import { fg } from '@atlaskit/platform-feature-flags';
 import coinflip from '../coinflip';
 import { getConfig, getInteractionRate } from '../config';
 import { getActiveTrace, setInteractionActiveTrace } from '../experience-trace-id-context';
@@ -42,7 +43,9 @@ export default function UFOSegment(_ref) {
   }, [parentContext, segmentName, segmentId]);
   var interactionId = useContext(UFOInteractionIDContext);
   var interactionContext = useMemo(function () {
-    addSegment(labelStack);
+    if (!fg('platform-ufo-add-segment-use-effect')) {
+      addSegment(labelStack);
+    }
     var lastCompleteEndTime = 0;
     function complete() {
       var endTime = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : performance.now();
@@ -221,6 +224,9 @@ export default function UFOSegment(_ref) {
     }
   }, [interactionContext]);
   useEffect(function () {
+    if (fg('platform-ufo-add-segment-use-effect')) {
+      addSegment(labelStack);
+    }
     return function () {
       removeSegment(labelStack);
     };