@atlaskit/react-ufo 3.3.2 → 3.4.0

package/dist/esm/vc/vc-observer-new/metric-calculator/percentile-calc/canvas-heatmap/canvas-pixel.js

@@ -222,17 +222,16 @@ export function calculateDrawnPixelsRaw(_x, _x2, _x3) {
 }
 function _calculateDrawnPixelsRaw() {
   _calculateDrawnPixelsRaw = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(imageData, scaleFactor, arraySize) {
-    var data, scaleCompensation, arr, i, color, colorIndex;
+    var data, arr, i, color, colorIndex;
     return _regeneratorRuntime.wrap(function _callee2$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
           data = imageData.data;
-          scaleCompensation = Math.round(1 / (scaleFactor * scaleFactor));
           arr = new Uint32Array(arraySize);
           i = 0;
-        case 4:
+        case 3:
           if (!(i < data.length)) {
-            _context2.next = 12;
+            _context2.next = 11;
             break;
           }
           // Check alpha
@@ -244,21 +243,21 @@ function _calculateDrawnPixelsRaw() {
             // The | operator combines all bits together
             color = data[i] << 16 | data[i + 1] << 8 | data[i + 2];
             colorIndex = color - 1;
-            arr[colorIndex] = (arr[colorIndex] || 0) + scaleCompensation;
+            arr[colorIndex] = (arr[colorIndex] || 0) + 1;
           }
           if (!(i % 10000 === 0)) {
-            _context2.next = 9;
+            _context2.next = 8;
             break;
           }
-          _context2.next = 9;
+          _context2.next = 8;
           return taskYield();
-        case 9:
+        case 8:
           i += 4;
-          _context2.next = 4;
+          _context2.next = 3;
           break;
-        case 12:
+        case 11:
           return _context2.abrupt("return", arr);
-        case 13:
+        case 12:
         case "end":
           return _context2.stop();
       }

package/dist/esm/vc/vc-observer-new/metric-calculator/percentile-calc/canvas-heatmap/index.js

@@ -11,22 +11,22 @@ export default function calculateTTVCPercentiles(_x) {
 }
 function _calculateTTVCPercentiles() {
   _calculateTTVCPercentiles = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref) {
-    var viewport, orderedEntries, percentiles, canvas, elementMap, _iterator3, _step3, entry, rect, elementName, timePixelCounts, viewportTotalPixels;
+    var viewport, orderedEntries, percentiles, startTime, canvas, elementMap, _iterator2, _step2, entry, rect, elementName, timePixelCounts, canvasDimenstions, totalPixels;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          viewport = _ref.viewport, orderedEntries = _ref.orderedEntries, percentiles = _ref.percentiles;
+          viewport = _ref.viewport, orderedEntries = _ref.orderedEntries, percentiles = _ref.percentiles, startTime = _ref.startTime;
           canvas = new ViewportCanvas(viewport, fg('platform_ufo_canvas_heatmap_full_precision') ? 1 : 0.25);
           elementMap = new Map();
-          _iterator3 = _createForOfIteratorHelper(orderedEntries);
+          _iterator2 = _createForOfIteratorHelper(orderedEntries);
           _context.prev = 4;
-          _iterator3.s();
+          _iterator2.s();
         case 6:
-          if ((_step3 = _iterator3.n()).done) {
+          if ((_step2 = _iterator2.n()).done) {
             _context.next = 17;
             break;
           }
-          entry = _step3.value;
+          entry = _step2.value;
           if ('rect' in entry.data) {
             _context.next = 10;
             break;
@@ -49,19 +49,20 @@ function _calculateTTVCPercentiles() {
         case 19:
           _context.prev = 19;
           _context.t0 = _context["catch"](4);
-          _iterator3.e(_context.t0);
+          _iterator2.e(_context.t0);
         case 22:
           _context.prev = 22;
-          _iterator3.f();
+          _iterator2.f();
           return _context.finish(22);
         case 25:
           _context.next = 27;
           return canvas.getPixelCounts();
         case 27:
           timePixelCounts = _context.sent;
-          viewportTotalPixels = viewport.width * viewport.height;
-          return _context.abrupt("return", calculatePercentiles(timePixelCounts, elementMap, percentiles, viewportTotalPixels));
-        case 30:
+          canvasDimenstions = canvas.getScaledDimensions();
+          totalPixels = canvasDimenstions.width * canvasDimenstions.height;
+          return _context.abrupt("return", calculatePercentiles(timePixelCounts, elementMap, percentiles, totalPixels, startTime));
+        case 31:
         case "end":
           return _context.stop();
       }
@@ -69,7 +70,7 @@ function _calculateTTVCPercentiles() {
   }));
   return _calculateTTVCPercentiles.apply(this, arguments);
 }
-export function calculatePercentiles(timePixelCounts, elementMap, unorderedPercentiles, totalPixels) {
+export function calculatePercentiles(timePixelCounts, elementMap, unorderedPercentiles, totalPixels, startTime) {
   var results = {};
   var cumulativePixels = 0;
   var percentiles = unorderedPercentiles.sort(function (a, b) {
@@ -102,7 +103,7 @@ export function calculatePercentiles(timePixelCounts, elementMap, unorderedPerce
       var matchesAnyCheckpoints = false;
       while (percentileIndex < percentiles.length && percentCovered >= percentiles[percentileIndex]) {
         results["".concat(percentiles[percentileIndex])] = {
-          t: Number(time),
+          t: Math.round(Number(time - startTime)),
           e: Array.from(domElementsBuffer)
         };
         percentileIndex++;
@@ -115,29 +116,21 @@ export function calculatePercentiles(timePixelCounts, elementMap, unorderedPerce
         break;
       }
     }
-
-    // Fill in any missing percentiles
   } catch (err) {
     _iterator.e(err);
   } finally {
     _iterator.f();
   }
-  var _iterator2 = _createForOfIteratorHelper(percentiles),
-    _step2;
-  try {
-    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-      var percentile = _step2.value;
-      if (!(percentile in results)) {
-        results["".concat(percentile)] = {
-          t: 0,
-          e: []
-        };
-      }
+  var previousResult = {
+    t: 0,
+    e: []
+  };
+  for (var i = 0; i < percentiles.length; i++) {
+    var percentile = percentiles[i];
+    if (!(percentile in results)) {
+      results["".concat(percentile)] = previousResult;
     }
-  } catch (err) {
-    _iterator2.e(err);
-  } finally {
-    _iterator2.f();
+    previousResult = results["".concat(percentile)];
   }
   return results;
 }

package/dist/esm/vc/vc-observer-new/metric-calculator/percentile-calc/heatmap/index.js

@@ -236,7 +236,7 @@ var Heatmap = /*#__PURE__*/function () {
   }, {
     key: "getVCPercentMetrics",
     value: function () {
-      var _getVCPercentMetrics = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(vcPercentCheckpoint) {
+      var _getVCPercentMetrics = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(vcPercentCheckpoint, startTime) {
         var sortedCheckpoints, flattenHeatmap, totalCells, timestampMap, i, _cellHead$time, _timestampMap$get, cell, cellHead, timestamp, elementName, curr, sortedTimings, totalCellPainted, result, domElementsBuffer, _i, _timestamp, timestampInfo, cellCount, domElements, currVCRatio, currVCPercent, matchesAnyCheckpoints, checkpoint, _domElements;
         return _regeneratorRuntime.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
@@ -324,7 +324,7 @@ var Heatmap = /*#__PURE__*/function () {
             case 41:
               matchesAnyCheckpoints = true;
               result[checkpoint.toString()] = {
-                t: _timestamp,
+                t: Math.round(_timestamp - startTime),
                 e: _domElements
               };
               _context2.next = 36;
@@ -351,23 +351,23 @@ var Heatmap = /*#__PURE__*/function () {
           }
         }, _callee2, this);
       }));
-      function getVCPercentMetrics(_x2) {
+      function getVCPercentMetrics(_x2, _x3) {
         return _getVCPercentMetrics.apply(this, arguments);
       }
       return getVCPercentMetrics;
     }()
   }]);
 }();
-export default function calculateTTVCPercentiles(_x3) {
+export default function calculateTTVCPercentiles(_x4) {
   return _calculateTTVCPercentiles.apply(this, arguments);
 }
 function _calculateTTVCPercentiles() {
   _calculateTTVCPercentiles = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(_ref2) {
-    var orderedEntries, viewport, percentiles, heatmap, vcDetails;
+    var orderedEntries, viewport, percentiles, startTime, heatmap, vcDetails;
     return _regeneratorRuntime.wrap(function _callee3$(_context3) {
       while (1) switch (_context3.prev = _context3.next) {
         case 0:
-          orderedEntries = _ref2.orderedEntries, viewport = _ref2.viewport, percentiles = _ref2.percentiles;
+          orderedEntries = _ref2.orderedEntries, viewport = _ref2.viewport, percentiles = _ref2.percentiles, startTime = _ref2.startTime;
           heatmap = new Heatmap({
             viewport: viewport,
             heatmapSize: 200
@@ -376,7 +376,7 @@ function _calculateTTVCPercentiles() {
           return heatmap.applyEntriesToHeatmap(orderedEntries);
         case 4:
           _context3.next = 6;
-          return heatmap.getVCPercentMetrics(percentiles);
+          return heatmap.getVCPercentMetrics(percentiles, startTime);
         case 6:
           vcDetails = _context3.sent;
           return _context3.abrupt("return", vcDetails);

package/dist/esm/vc/vc-observer-new/metric-calculator/percentile-calc/rect-sweeping-line/index.js

@@ -9,11 +9,11 @@ export default function calculateTTVCPercentiles(_x) {
 }
 function _calculateTTVCPercentiles() {
   _calculateTTVCPercentiles = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref) {
-    var orderedEntries, viewport, percentiles, sortedPercentiles, viewportArea, checkpoints, activeRects, removeActiveRect, domElementsBuffer, i, iEntry, iEntryData, rect, elementName, exclusionArea, currentArea, currVCPercent, matchesAnyCheckpoints, _checkpoint, domElements;
+    var orderedEntries, viewport, percentiles, startTime, sortedPercentiles, viewportArea, checkpoints, activeRects, removeActiveRect, domElementsBuffer, i, iEntry, iEntryData, rect, elementName, exclusionArea, currentArea, currVCPercent, matchesAnyCheckpoints, _checkpoint, domElements;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          orderedEntries = _ref.orderedEntries, viewport = _ref.viewport, percentiles = _ref.percentiles;
+          orderedEntries = _ref.orderedEntries, viewport = _ref.viewport, percentiles = _ref.percentiles, startTime = _ref.startTime;
           sortedPercentiles = _toConsumableArray(percentiles).sort(function (a, b) {
             return a - b;
           });
@@ -69,7 +69,7 @@ function _calculateTTVCPercentiles() {
         case 25:
           matchesAnyCheckpoints = true;
           checkpoints[_checkpoint.toString()] = {
-            t: iEntry.time,
+            t: Math.round(iEntry.time - startTime),
             e: domElements
           };
           _context.next = 20;

package/dist/esm/vc/vc-observer-new/window-event-observer/index.js

@@ -15,6 +15,9 @@ var WindowEventObserver = /*#__PURE__*/function () {
       var unbindCallback = bind(window, {
         type: type,
         listener: function listener(event) {
+          if (!event.isTrusted) {
+            return;
+          }
           _this.onEvent({
             time: event.timeStamp,
             type: type,
@@ -22,7 +25,8 @@ var WindowEventObserver = /*#__PURE__*/function () {
           });
         },
         options: {
-          passive: true
+          passive: true,
+          once: true
         }
       });
       this.unbindFns.push(unbindCallback);

package/dist/types/assets/index.d.ts

@@ -1,5 +1,5 @@
-import type { AssetsClassification, AssetsData, AssetsReporter } from '../common';
-import type { ResourceTiming, ResourceTimings } from '../resource-timing';
+import type { AssetsConfig, AssetsData, AssetsReporter } from '../common';
+import type { ResourceEntry } from '../resource-timing/common/types';
 export declare class CHRSummary {
     bundles: {
         mem: number;
@@ -13,13 +13,13 @@ export declare class CHRSummary {
         net: number;
     };
     sizeTotal: number;
-    add(asset: ResourceTiming): void;
+    add(asset: ResourceEntry): void;
     static makePayload(summary: CHRSummary): AssetsReporter;
 }
 export declare class CHRReporter {
     all: CHRSummary;
     allAtlassian: CHRSummary;
     preloaded: CHRSummary;
-    constructor();
-    get(resourceTimings: ResourceTimings, assetsClassification: AssetsClassification): AssetsData | null;
+    defaultAllowedTypes: string[];
+    get(resourceTimings: ResourceEntry[] | null, assetsConfig: AssetsConfig, SSRDoneTime: number | undefined): AssetsData | null;
 }

package/dist/types/assets/utils.d.ts

@@ -1,6 +1,9 @@
+import type { ResourceEntry } from "../resource-timing/common/types";
 export declare const cacheableTypes: string[];
 export declare const MEMORY_KEY = "mem";
 export declare const DISK_KEY = "disk";
 export declare const NETWORK_KEY = "net";
-export declare const calculateTransferType: (type: string, duration: number, size: number | undefined) => "disk" | "mem" | "net" | null;
+export declare const calculateTransferType: (name: string, type: string, duration: number, size: number | undefined) => "disk" | "mem" | "net" | null;
+export declare const getTypeOfRequest: ({ name, initiatorType: type }: ResourceEntry) => string;
+export declare const checkIfTimingsAvailable: (entry: ResourceEntry) => boolean;
 export declare const round: (n: number) => number;

package/dist/types/common/assets/types.d.ts

@@ -1,12 +1,18 @@
-import type { ResourceTiming } from '../../resource-timing';
-export type AssetResourceEntry = {
-    label: string;
-    entry: ResourceTiming;
+import type { ResourceEntry } from '../../resource-timing/common/types';
+export type AssetsConfigAllAtlassianArgs = {
+    entry: ResourceEntry;
 };
-export type AssetsClassification = {
-    all: boolean;
-    allAtlassian: (entry: AssetResourceEntry) => boolean;
-    preloaded: (entry: AssetResourceEntry) => boolean;
+export type AssetsConfigPreloadedArgs = {
+    entry: ResourceEntry;
+    SSRDoneTime?: number;
+};
+export type AssetsConfig = {
+    allowedTypes: string[];
+    classification: {
+        all: boolean;
+        allAtlassian: (args: AssetsConfigAllAtlassianArgs) => boolean;
+        preloaded: (args: AssetsConfigPreloadedArgs) => boolean;
+    };
 };
 export type AssetsReporter = {
     size: number | null;

package/dist/types/common/index.d.ts

@@ -1,4 +1,14 @@
-export type { AssetResourceEntry, AssetsClassification, AssetsData, AssetsReporter, } from './assets/types';
+/**
+ * @private
+ * @deprecated API - clean up with next reactUFO major version
+ */
+export type AssetResourceEntry = any;
+/**
+ * @private
+ * @deprecated API - clean up with next reactUFO major version
+ */
+export type AssetsClassification = any;
+export type { AssetsConfig, AssetsData, AssetsReporter, AssetsConfigAllAtlassianArgs, AssetsConfigPreloadedArgs, } from './assets/types';
 export type { LifecycleMarkType, MarkType, SpanType, InteractionType, AbortReasonType, CustomTiming, HoldInfo, LoadProfilerEventInfo, ReactProfilerTiming, Span, Mark, InteractionError, RequestInfo, ApdexType, SegmentInfo, CustomData, HoldActive, Redirect, InteractionMetrics, EnhancedUFOInteractionContextType, BM3Event, PostInteractionLogOutput, LastInteractionFinishInfo, } from './common/types';
 export type { MultiHeatmapPayload } from './vc/types';
 /**

package/dist/types/config/index.d.ts

@@ -57,7 +57,12 @@ export type Config = {
         readonly getSSRTimings?: () => SSRTiming[];
         readonly getSSRDoneTime?: () => number | undefined;
     };
+    /**
+     * @private
+     * @deprecated remove me with next major release
+     */
     readonly assetsClassification?: AssetsClassification;
+    readonly assetsConfig?: AssetsClassification;
     readonly enableBetterPageVisibilityApi?: boolean;
     readonly vc?: {
         readonly enabled?: boolean;
@@ -68,6 +73,7 @@ export type Config = {
         readonly ssr?: boolean;
         readonly ssrWhitelist?: string[];
         readonly stopVCAtInteractionFinish?: boolean;
+        readonly enableVCObserverNew?: boolean;
     };
     readonly postInteractionLog?: {
         readonly enabled?: boolean;