@atlaskit/react-ufo 3.1.3 → 3.2.0

package/dist/cjs/vc/vc-observer-new/index.js

@@ -0,0 +1,132 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _entriesTimeline = _interopRequireDefault(require("./entries-timeline"));
+var _getElementName2 = _interopRequireDefault(require("./get-element-name"));
+var _fy25_ = _interopRequireDefault(require("./metric-calculator/fy25_03"));
+var _viewportObserver = _interopRequireDefault(require("./viewport-observer"));
+var _windowEventObserver = _interopRequireDefault(require("./window-event-observer"));
+var DEFAULT_SELECTOR_CONFIG = {
+  id: false,
+  testId: true,
+  role: false,
+  className: false,
+  dataVC: true
+};
+var VCObserverNew = exports.default = /*#__PURE__*/function () {
+  function VCObserverNew(config) {
+    var _config$selectorConfi,
+      _this = this;
+    (0, _classCallCheck2.default)(this, VCObserverNew);
+    (0, _defineProperty2.default)(this, "startTime", 0);
+    (0, _defineProperty2.default)(this, "viewportObserver", null);
+    (0, _defineProperty2.default)(this, "windowEventObserver", null);
+    this.entriesTimeline = new _entriesTimeline.default();
+    this.selectorConfig = (_config$selectorConfi = config.selectorConfig) !== null && _config$selectorConfi !== void 0 ? _config$selectorConfi : DEFAULT_SELECTOR_CONFIG;
+    this.viewportObserver = new _viewportObserver.default({
+      onChange: function onChange(onChangeArg) {
+        var time = onChangeArg.time,
+          type = onChangeArg.type,
+          elementRef = onChangeArg.elementRef,
+          visible = onChangeArg.visible,
+          rect = onChangeArg.rect,
+          previousRect = onChangeArg.previousRect,
+          mutationData = onChangeArg.mutationData;
+        var elementName = 'unknown';
+        var element = elementRef.deref();
+        if (element) {
+          elementName = _this.getElementName(element);
+        }
+        _this.entriesTimeline.push({
+          time: time,
+          type: type,
+          data: {
+            elementName: elementName,
+            rect: rect,
+            previousRect: previousRect,
+            visible: visible,
+            attributeName: mutationData === null || mutationData === void 0 ? void 0 : mutationData.attributeName
+          }
+        });
+      }
+    });
+    this.windowEventObserver = new _windowEventObserver.default({
+      onEvent: function onEvent(_ref) {
+        var time = _ref.time,
+          type = _ref.type;
+        _this.entriesTimeline.push({
+          time: time,
+          type: 'window:event',
+          data: {
+            eventType: type
+          }
+        });
+      }
+    });
+  }
+  return (0, _createClass2.default)(VCObserverNew, [{
+    key: "start",
+    value: function start() {
+      var _this$viewportObserve, _this$windowEventObse;
+      (_this$viewportObserve = this.viewportObserver) === null || _this$viewportObserve === void 0 || _this$viewportObserve.start();
+      (_this$windowEventObse = this.windowEventObserver) === null || _this$windowEventObse === void 0 || _this$windowEventObse.start();
+    }
+  }, {
+    key: "stop",
+    value: function stop() {
+      var _this$viewportObserve2, _this$windowEventObse2;
+      (_this$viewportObserve2 = this.viewportObserver) === null || _this$viewportObserve2 === void 0 || _this$viewportObserve2.stop();
+      (_this$windowEventObse2 = this.windowEventObserver) === null || _this$windowEventObse2 === void 0 || _this$windowEventObse2.stop();
+    }
+  }, {
+    key: "getVCResult",
+    value: function () {
+      var _getVCResult = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(param) {
+        var start, stop, results, calculator_fy25_03, orderedEntries, fy25_03;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              start = param.start, stop = param.stop;
+              results = [];
+              calculator_fy25_03 = new _fy25_.default();
+              orderedEntries = this.entriesTimeline.getOrderedEntries({
+                start: start,
+                stop: stop
+              });
+              _context.next = 6;
+              return calculator_fy25_03.calculate({
+                orderedEntries: orderedEntries
+              });
+            case 6:
+              fy25_03 = _context.sent;
+              if (fy25_03) {
+                results.push(fy25_03);
+              }
+              return _context.abrupt("return", results);
+            case 9:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this);
+      }));
+      function getVCResult(_x) {
+        return _getVCResult.apply(this, arguments);
+      }
+      return getVCResult;
+    }()
+  }, {
+    key: "getElementName",
+    value: function getElementName(element) {
+      return (0, _getElementName2.default)(this.selectorConfig, element);
+    }
+  }]);
+}();

package/dist/cjs/vc/vc-observer-new/metric-calculator/abstract-base-vc-calculator.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _percentileCalc = _interopRequireDefault(require("./percentile-calc"));
+var _getViewportHeight = _interopRequireDefault(require("./utils/get-viewport-height"));
+var _getViewportWidth = _interopRequireDefault(require("./utils/get-viewport-width"));
+var AbstractVCCalculatorBase = exports.default = /*#__PURE__*/function () {
+  function AbstractVCCalculatorBase(revisionNo) {
+    (0, _classCallCheck2.default)(this, AbstractVCCalculatorBase);
+    this.revisionNo = revisionNo;
+  }
+  return (0, _createClass2.default)(AbstractVCCalculatorBase, [{
+    key: "calculate",
+    value: function () {
+      var _calculate = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref) {
+        var _this = this,
+          _vcDetails$90$t,
+          _vcDetails$;
+        var orderedEntries, filteredEntries, isVCClean, vcDetails;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              orderedEntries = _ref.orderedEntries;
+              filteredEntries = orderedEntries.filter(function (entry) {
+                return _this.isEntryIncluded(entry);
+              });
+              isVCClean = this.isVCClean(filteredEntries);
+              if (isVCClean) {
+                _context.next = 5;
+                break;
+              }
+              return _context.abrupt("return", {
+                revision: this.revisionNo,
+                'metric:vc90': null,
+                clean: false
+              });
+            case 5:
+              _context.next = 7;
+              return (0, _percentileCalc.default)({
+                viewport: {
+                  width: (0, _getViewportWidth.default)(),
+                  height: (0, _getViewportHeight.default)()
+                },
+                orderedEntries: filteredEntries,
+                percentiles: [25, 50, 75, 80, 85, 90, 95, 98, 99]
+              });
+            case 7:
+              vcDetails = _context.sent;
+              return _context.abrupt("return", {
+                revision: this.revisionNo,
+                vcDetails: vcDetails !== null && vcDetails !== void 0 ? vcDetails : undefined,
+                clean: isVCClean,
+                'metric:vc90': (_vcDetails$90$t = vcDetails === null || vcDetails === void 0 || (_vcDetails$ = vcDetails['90']) === null || _vcDetails$ === void 0 ? void 0 : _vcDetails$.t) !== null && _vcDetails$90$t !== void 0 ? _vcDetails$90$t : null
+              });
+            case 9:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this);
+      }));
+      function calculate(_x) {
+        return _calculate.apply(this, arguments);
+      }
+      return calculate;
+    }()
+  }]);
+}();

package/dist/cjs/vc/vc-observer-new/metric-calculator/fy25_03/index.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _abstractBaseVcCalculator = _interopRequireDefault(require("../abstract-base-vc-calculator"));
+var _isViewportEntryData = _interopRequireDefault(require("../utils/is-viewport-entry-data"));
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var ABORTING_WINDOW_EVENT = ['wheel', 'scroll', 'keydown', 'resize'];
+var REVISION_NO = 'fy25.03';
+var CONSIDERED_ENTRY_TYPE = ['mutation:child-element', 'mutation:element', 'mutation:attribute', 'layout-shift', 'window:event'];
+var VCCalculator_FY25_03 = exports.default = /*#__PURE__*/function (_AbstractVCCalculator) {
+  function VCCalculator_FY25_03() {
+    (0, _classCallCheck2.default)(this, VCCalculator_FY25_03);
+    return _callSuper(this, VCCalculator_FY25_03, [REVISION_NO]);
+  }
+  (0, _inherits2.default)(VCCalculator_FY25_03, _AbstractVCCalculator);
+  return (0, _createClass2.default)(VCCalculator_FY25_03, [{
+    key: "isEntryIncluded",
+    value: function isEntryIncluded(entry) {
+      if (!CONSIDERED_ENTRY_TYPE.includes(entry.type)) {
+        return false;
+      }
+      if (entry.type === 'mutation:attribute') {
+        var entryData = entry.data;
+        var attributeName = entryData.attributeName;
+        if (!attributeName) {
+          return false;
+        }
+        return true;
+      }
+      if ((0, _isViewportEntryData.default)(entry.data) && !entry.data.visible) {
+        return false;
+      }
+      return true;
+    }
+  }, {
+    key: "isVCClean",
+    value: function isVCClean(filteredEntries) {
+      var hasAbortEvent = filteredEntries.some(function (entry) {
+        if (entry.type === 'window:event') {
+          var data = entry.data;
+          if (ABORTING_WINDOW_EVENT.includes(data.eventType)) {
+            return true;
+          }
+        }
+        return false;
+      });
+      return !hasAbortEvent;
+    }
+  }]);
+}(_abstractBaseVcCalculator.default);

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

@@ -0,0 +1,274 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ViewportCanvas = void 0;
+exports.calculateDrawnPixelsRaw = calculateDrawnPixelsRaw;
+exports.getRGBComponents = getRGBComponents;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _taskYield = _interopRequireDefault(require("../../utils/task-yield"));
+// 24-bit color value
+/**
+ * Class responsible for managing a scaled canvas and tracking pixel drawing operations.
+ * It uses an OffscreenCanvas for better performance and maintains a mapping between
+ * colors and timestamps for pixel counting purposes.
+ */
+var ViewportCanvas = exports.ViewportCanvas = /*#__PURE__*/function () {
+  /** The underlying OffscreenCanvas instance */
+
+  /** The 2D rendering context of the canvas */
+
+  /** Scale factor applied to the canvas (affects final pixel counts) */
+
+  /** Maps unique colors to their corresponding timestamps */
+
+  /** Counter used to generate unique colors */
+
+  /**
+   * Creates a new ViewportCanvas instance.
+   * @param viewport - The dimensions of the viewport
+   * @param scaleFactor - Scale factor to apply to the canvas (default: 0.5)
+   * @throws {Error} If canvas context cannot be obtained
+   */
+  function ViewportCanvas(viewport) {
+    var scaleFactor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+    (0, _classCallCheck2.default)(this, ViewportCanvas);
+    this.scaleFactor = scaleFactor;
+    this.colorCounter = 1;
+    this.colorTimeMap = new Map();
+
+    // Calculate scaled dimensions
+    this.scaledWidth = Math.ceil(viewport.width * scaleFactor);
+    this.scaledHeight = Math.ceil(viewport.height * scaleFactor);
+    this.scaleX = this.scaledWidth / viewport.width;
+    this.scaleY = this.scaledHeight / viewport.height;
+
+    // Initialize OffscreenCanvas with scaled dimensions
+    this.canvas = document.createElement('canvas');
+    this.canvas.width = this.scaledWidth;
+    this.canvas.height = this.scaledHeight;
+    var ctx = this.canvas.getContext('2d', {
+      alpha: false,
+      // Disable alpha channel for better performance
+      willReadFrequently: true,
+      // Optimize for frequent pixel reading
+      colorSpace: 'srgb' // Use standard RGB color space
+    });
+    if (!ctx) {
+      throw new Error('Could not get canvas context');
+    }
+    this.ctx = ctx;
+    this.ctx.globalCompositeOperation = "source-over";
+    this.clear();
+  }
+  return (0, _createClass2.default)(ViewportCanvas, [{
+    key: "getScaledDimensions",
+    value: function getScaledDimensions() {
+      return {
+        width: this.scaledWidth,
+        height: this.scaledHeight
+      };
+    }
+
+    /**
+     * Clears the entire canvas by removing all drawn content.
+     * @private
+     */
+  }, {
+    key: "clear",
+    value: function clear() {
+      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    }
+
+    /**
+     * Generates a unique RGB color from an incrementing counter.
+     * Uses a 24-bit color space (16,777,216 possible colors).
+     *
+     * @private
+     * @returns A unique RGB color string
+     *
+     * @example
+     * // Example bit operations for color 0x00FF8040:
+     * // Red:   (0x00FF8040 >> 16) & 0xFF = 0xFF = 255
+     * // Green: (0x00FF8040 >> 8) & 0xFF  = 0x80 = 128
+     * // Blue:   0x00FF8040 & 0xFF        = 0x40 = 64
+     */
+  }, {
+    key: "generateColor",
+    value: function generateColor() {
+      // Wrap around at 16,777,215 (0x00FFFFFF) to stay within 24-bit color space
+      var rgbColor = this.colorCounter++ % 0x00ffffff;
+      return getRGBComponents(rgbColor);
+    }
+
+    /**
+     * Draws a rectangle on the canvas with a unique color and associates it with a timestamp.
+     * Each drawn rectangle gets a unique color which is mapped to the provided timestamp.
+     *
+     * @param rect - The rectangle dimensions to draw
+     * @param timestamp - The timestamp to associate with this drawing operation
+     */
+  }, {
+    key: "drawRect",
+    value: function drawRect(rect, timestamp) {
+      var color = this.generateColor();
+      this.colorTimeMap.set(color, timestamp);
+      this.ctx.fillStyle = color;
+      if (this.scaleFactor === 1) {
+        return this.ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
+      }
+      var scaledX = rect.x * this.scaleX;
+      var scaledY = rect.y * this.scaleY;
+      var scaledWidth = rect.width * this.scaleX;
+      var scaledHeight = rect.height * this.scaleY;
+      this.ctx.fillRect(Math.floor(scaledX), Math.ceil(scaledY), Math.max(scaledWidth, 1), Math.max(scaledHeight, 1));
+    }
+
+    /**
+     * Calculates the number of pixels drawn for each timestamp.
+     * This method:
+     * 1. Reads the pixel data from the canvas
+     * 2. Counts pixels of each unique color
+     * 3. Maps colors back to their timestamps
+     * 4. Adjusts counts based on the scale factor
+     *
+     * @returns A Map containing timestamp to pixel count mappings
+     */
+  }, {
+    key: "getPixelCounts",
+    value: (function () {
+      var _getPixelCounts = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+        var imageData, timestampsAmount, pixelCounts, timePixelCounts, i, count, color, rgbColor, timestamp;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              imageData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
+              timestampsAmount = this.colorTimeMap.size;
+              _context.next = 4;
+              return calculateDrawnPixelsRaw(imageData, this.scaleFactor, timestampsAmount);
+            case 4:
+              pixelCounts = _context.sent;
+              // Convert color counts to timestamp counts
+              timePixelCounts = new Map();
+              i = 0;
+            case 7:
+              if (!(i < pixelCounts.length)) {
+                _context.next = 18;
+                break;
+              }
+              count = pixelCounts[i];
+              if (!(typeof count !== 'number')) {
+                _context.next = 11;
+                break;
+              }
+              return _context.abrupt("continue", 15);
+            case 11:
+              color = i + 1;
+              rgbColor = getRGBComponents(color);
+              timestamp = this.colorTimeMap.get(rgbColor);
+              if (timestamp !== undefined) {
+                timePixelCounts.set(timestamp, (timePixelCounts.get(timestamp) || 0) + count);
+              }
+            case 15:
+              i++;
+              _context.next = 7;
+              break;
+            case 18:
+              return _context.abrupt("return", timePixelCounts);
+            case 19:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this);
+      }));
+      function getPixelCounts() {
+        return _getPixelCounts.apply(this, arguments);
+      }
+      return getPixelCounts;
+    }())
+  }]);
+}();
+/**
+ * Converts a number into RGB components in such a way that they can be recombined
+ * to form the original number using bitwise operations.
+ * @param number - The input number to be split into RGB components.
+ * @returns The RGB color string in the format "rgb(r, g, b)".
+ */
+function getRGBComponents(n) {
+  // Ensure the input is within the valid range for a 24-bit color
+  if (n < 0 || n > 0xffffff) {
+    throw new Error('Input number must be between 0 and 16777215 (inclusive).');
+  }
+
+  // Extract blue component (bits 0-7)
+  var blue = n & 0xff;
+
+  // Extract green component (bits 8-15)
+  var green = n >> 8 & 0xff;
+
+  // Extract red component (bits 16-23)
+  var red = n >> 16 & 0xff;
+  return "rgb(".concat(red, ", ").concat(green, ", ").concat(blue, ")");
+}
+
+/**
+ * Calculates the number of pixels drawn for each color in the image data.
+ * @param imageData - The image data to analyze.
+ * @param scaleFactor - The scale factor applied to the canvas.
+ * @param arraySize - The amount of timestamps that were drawn in the viewport
+ * @returns A Map containing color to pixel count mappings.
+ */
+function calculateDrawnPixelsRaw(_x, _x2, _x3) {
+  return _calculateDrawnPixelsRaw.apply(this, arguments);
+}
+function _calculateDrawnPixelsRaw() {
+  _calculateDrawnPixelsRaw = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(imageData, scaleFactor, arraySize) {
+    var data, scaleCompensation, arr, i, color, colorIndex;
+    return _regenerator.default.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:
+          if (!(i < data.length)) {
+            _context2.next = 12;
+            break;
+          }
+          // Check alpha
+          if (data[i + 3] !== 0) {
+            // Combine RGB components into a single 24-bit color value:
+            // (data[i] << 16)   - Shift red component left 16 bits   (bits 16-23)
+            // (data[i + 1] << 8) - Shift green component left 8 bits (bits 8-15)
+            // data[i + 2]       - Blue component stays as is         (bits 0-7)
+            // 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;
+          }
+          if (!(i % 10000 === 0)) {
+            _context2.next = 9;
+            break;
+          }
+          _context2.next = 9;
+          return (0, _taskYield.default)();
+        case 9:
+          i += 4;
+          _context2.next = 4;
+          break;
+        case 12:
+          return _context2.abrupt("return", arr);
+        case 13:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  }));
+  return _calculateDrawnPixelsRaw.apply(this, arguments);
+}