@atlaskit/react-ufo 3.4.1 → 3.4.3

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

@@ -14,6 +14,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _hiddenTiming = require("../../hidden-timing");
 var _attachAbortListeners = require("./attachAbortListeners");
 var _getViewport = require("./getViewport");
 var _heatmap = require("./heatmap/heatmap");
@@ -103,7 +104,7 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
     });
     (0, _defineProperty2.default)(this, "getVCResult", /*#__PURE__*/function () {
       var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref3) {
-        var start, stop, tti, prefix, ssr, vc, isEventAborted, startTime, fullPrefix, rawData, abortReason, abortReasonInfo, heatmap, heatmapNext, outOfBoundaryInfo, totalTime, componentsLog, viewport, devToolsEnabled, ratios, multiHeatmap, _VCObserver$calculate, VC, VCBox, VCEntries, totalPainted, _componentsLog, vcNext, outOfBoundary, stopTime, isMultiHeatmapEnabled, revisionsData, isCalcSpeedIndexEnabled, speedIndex;
+        var start, stop, tti, prefix, ssr, vc, isEventAborted, startTime, fullPrefix, rawData, abortReason, abortReasonInfo, heatmap, heatmapNext, outOfBoundaryInfo, totalTime, componentsLog, viewport, devToolsEnabled, ratios, multiHeatmap, _VCObserver$calculate, VC, VCBox, VCEntries, totalPainted, _componentsLog, vcNext, outOfBoundary, stopTime, isVCClean, isMultiHeatmapEnabled, pageVisibilityUpToTTAI, shouldHaveVCmetric, revisionsData, isCalcSpeedIndexEnabled, speedIndex;
         return _regenerator.default.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -240,31 +241,56 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
               } catch (e) {
                 /*  do nothing */
               }
+              isVCClean = !abortReasonInfo;
               isMultiHeatmapEnabled = !(0, _platformFeatureFlags.fg)('platform_ufo_multiheatmap_killswitch');
-              revisionsData = isMultiHeatmapEnabled && multiHeatmap !== null ? (0, _defineProperty2.default)({}, "".concat(fullPrefix, "vc:rev"), multiHeatmap === null || multiHeatmap === void 0 ? void 0 : multiHeatmap.getPayloadShapedData({
+              pageVisibilityUpToTTAI = (0, _hiddenTiming.getPageVisibilityState)(start, stop);
+              shouldHaveVCmetric = isVCClean && !isEventAborted && pageVisibilityUpToTTAI;
+              revisionsData = isMultiHeatmapEnabled ? (0, _platformFeatureFlags.fg)('platform_ufo_vc_observer_new') ? (0, _defineProperty2.default)({}, "".concat(fullPrefix, "vc:rev"), [{
+                revision: 'fy25.01',
+                clean: isVCClean,
+                'metric:vc90': shouldHaveVCmetric ? VC['90'] : null,
+                vcDetails: shouldHaveVCmetric ? Object.fromEntries(VCObserver.VCParts.map(function (key) {
+                  var _VCBox$key;
+                  return [key, {
+                    t: VC[key],
+                    e: (_VCBox$key = VCBox[key]) !== null && _VCBox$key !== void 0 ? _VCBox$key : []
+                  }];
+                })) : []
+              }, {
+                revision: 'fy25.02',
+                clean: isVCClean,
+                'metric:vc90': shouldHaveVCmetric ? VC['90'] : null,
+                vcDetails: shouldHaveVCmetric ? Object.fromEntries(VCObserver.VCParts.map(function (key) {
+                  var _vcNext$VCBox$key;
+                  return [key, {
+                    t: vcNext.VC[key],
+                    e: (_vcNext$VCBox$key = vcNext.VCBox[key]) !== null && _vcNext$VCBox$key !== void 0 ? _vcNext$VCBox$key : []
+                  }];
+                })) : []
+              }]) : multiHeatmap !== null ? (0, _defineProperty2.default)({}, "".concat(fullPrefix, "vc:rev"), multiHeatmap === null || multiHeatmap === void 0 ? void 0 : multiHeatmap.getPayloadShapedData({
                 VCParts: VCObserver.VCParts.map(function (v) {
                   return parseInt(v);
                 }),
-                VCCalculationMethods: (0, _revisions.getRevisions)().map(function (_ref9) {
-                  var classifier = _ref9.classifier;
+                VCCalculationMethods: (0, _revisions.getRevisions)().map(function (_ref10) {
+                  var classifier = _ref10.classifier;
                   return classifier.VCCalculationMethod;
                 }),
-                filterComponentsLog: (0, _revisions.getRevisions)().map(function (_ref10) {
-                  var classifier = _ref10.classifier;
+                filterComponentsLog: (0, _revisions.getRevisions)().map(function (_ref11) {
+                  var classifier = _ref11.classifier;
                   return classifier.filterComponentsLog;
                 }),
                 isEventAborted: isEventAborted,
                 interactionStart: start,
                 ttai: stop,
                 ssr: ssr,
-                clean: !abortReasonInfo
-              })) : null; // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+                clean: isVCClean
+              })) : null : null; // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
               isCalcSpeedIndexEnabled = (0, _platformFeatureFlags.fg)('ufo-calc-speed-index');
               speedIndex = (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "ufo:speedIndex", VCEntries.speedIndex), "ufo:next:speedIndex", vcNext.VCEntries.speedIndex);
               return _context.abrupt("return", _objectSpread(_objectSpread(_objectSpread((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
                 'metrics:vc': VC
-              }, "".concat(fullPrefix, "vc:state"), true), "".concat(fullPrefix, "vc:clean"), !abortReasonInfo), "".concat(fullPrefix, "vc:dom"), VCBox), "".concat(fullPrefix, "vc:updates"), VCEntries.rel.slice(0, 50)), "".concat(fullPrefix, "vc:size"), viewport), "".concat(fullPrefix, "vc:time"), Math.round(totalTime + (stopTime - startTime))), "".concat(fullPrefix, "vc:total"), totalPainted), "".concat(fullPrefix, "vc:ratios"), ratios), outOfBoundary), {}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(fullPrefix, "vc:next"), vcNext.VC), "".concat(fullPrefix, "vc:next:updates"), vcNext.VCEntries.rel.slice(0, 50)), "".concat(fullPrefix, "vc:next:dom"), vcNext.VCBox), "".concat(fullPrefix, "vc:ignored"), _this.getIgnoredElements(componentsLog)), revisionsData), isCalcSpeedIndexEnabled ? speedIndex : {}));
-            case 24:
+              }, "".concat(fullPrefix, "vc:state"), true), "".concat(fullPrefix, "vc:clean"), isVCClean), "".concat(fullPrefix, "vc:dom"), VCBox), "".concat(fullPrefix, "vc:updates"), VCEntries.rel.slice(0, 50)), "".concat(fullPrefix, "vc:size"), viewport), "".concat(fullPrefix, "vc:time"), Math.round(totalTime + (stopTime - startTime))), "".concat(fullPrefix, "vc:total"), totalPainted), "".concat(fullPrefix, "vc:ratios"), ratios), outOfBoundary), {}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(fullPrefix, "vc:next"), vcNext.VC), "".concat(fullPrefix, "vc:next:updates"), vcNext.VCEntries.rel.slice(0, 50)), "".concat(fullPrefix, "vc:next:dom"), vcNext.VCBox), "".concat(fullPrefix, "vc:ignored"), _this.getIgnoredElements(componentsLog)), revisionsData), isCalcSpeedIndexEnabled ? speedIndex : {}));
+            case 27:
             case "end":
               return _context.stop();
           }
@@ -277,14 +303,16 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
     (0, _defineProperty2.default)(this, "handleUpdate", function (rawTime, intersectionRect, targetName, element, type, ignoreReason) {
       _this.measureStart();
       _this.legacyHandleUpdate(rawTime, intersectionRect, targetName, element, type, ignoreReason);
-      _this.onViewportChangeDetected({
-        timestamp: rawTime,
-        intersectionRect: intersectionRect,
-        targetName: targetName,
-        element: element,
-        type: type,
-        ignoreReason: ignoreReason
-      });
+      if (!(0, _platformFeatureFlags.fg)('platform_ufo_vc_observer_new')) {
+        _this.onViewportChangeDetected({
+          timestamp: rawTime,
+          intersectionRect: intersectionRect,
+          targetName: targetName,
+          element: element,
+          type: type,
+          ignoreReason: ignoreReason
+        });
+      }
       _this.measureStop();
     });
     (0, _defineProperty2.default)(this, "legacyHandleUpdate", function (rawTime, intersectionRect, targetName, element, type, ignoreReason) {
@@ -309,13 +337,13 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
         });
       }
     });
-    (0, _defineProperty2.default)(this, "onViewportChangeDetected", function (_ref12) {
-      var element = _ref12.element,
-        type = _ref12.type,
-        ignoreReason = _ref12.ignoreReason,
-        timestamp = _ref12.timestamp,
-        targetName = _ref12.targetName,
-        intersectionRect = _ref12.intersectionRect;
+    (0, _defineProperty2.default)(this, "onViewportChangeDetected", function (_ref13) {
+      var element = _ref13.element,
+        type = _ref13.type,
+        ignoreReason = _ref13.ignoreReason,
+        timestamp = _ref13.timestamp,
+        targetName = _ref13.targetName,
+        intersectionRect = _ref13.intersectionRect;
       if (_this.multiHeatmap === null) {
         return;
       }
@@ -397,10 +425,10 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
       var unbinds = (0, _attachAbortListeners.attachAbortListeners)(window, _this.viewport, _this.abortReasonCallback);
       if ((_window = window) !== null && _window !== void 0 && _window.__SSR_ABORT_LISTENERS__) {
         var _window2;
-        Object.entries(window.__SSR_ABORT_LISTENERS__.aborts).forEach(function (_ref13) {
-          var _ref14 = (0, _slicedToArray2.default)(_ref13, 2),
-            key = _ref14[0],
-            time = _ref14[1];
+        Object.entries(window.__SSR_ABORT_LISTENERS__.aborts).forEach(function (_ref14) {
+          var _ref15 = (0, _slicedToArray2.default)(_ref14, 2),
+            key = _ref15[0],
+            time = _ref15[1];
           if (time) {
             _this.abortReasonCallback(key, time);
           }
@@ -433,8 +461,8 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
   }
   return (0, _createClass2.default)(VCObserver, [{
     key: "start",
-    value: function start(_ref15) {
-      var startTime = _ref15.startTime;
+    value: function start(_ref16) {
+      var startTime = _ref16.startTime;
       this.active = true;
       if (this.observers.isBrowserSupported()) {
         this.setViewportSize();
@@ -456,12 +484,12 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
   }, {
     key: "getIgnoredElements",
     value: function getIgnoredElements(componentsLog) {
-      return Object.values(componentsLog).flat().filter(function (_ref16) {
-        var ignoreReason = _ref16.ignoreReason;
+      return Object.values(componentsLog).flat().filter(function (_ref17) {
+        var ignoreReason = _ref17.ignoreReason;
         return Boolean(ignoreReason);
-      }).map(function (_ref17) {
-        var targetName = _ref17.targetName,
-          ignoreReason = _ref17.ignoreReason;
+      }).map(function (_ref18) {
+        var targetName = _ref18.targetName,
+          ignoreReason = _ref18.ignoreReason;
         return {
           targetName: targetName,
           ignoreReason: ignoreReason
@@ -581,12 +609,12 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
     }
   }], [{
     key: "calculateVC",
-    value: function calculateVC(_ref18) {
-      var heatmap = _ref18.heatmap,
-        _ref18$ssr = _ref18.ssr,
-        ssr = _ref18$ssr === void 0 ? UNUSED_SECTOR : _ref18$ssr,
-        componentsLog = _ref18.componentsLog,
-        viewport = _ref18.viewport;
+    value: function calculateVC(_ref19) {
+      var heatmap = _ref19.heatmap,
+        _ref19$ssr = _ref19.ssr,
+        ssr = _ref19$ssr === void 0 ? UNUSED_SECTOR : _ref19$ssr,
+        componentsLog = _ref19.componentsLog,
+        viewport = _ref19.viewport;
       var lastUpdate = {};
       var totalPainted = 0;
       if (ssr !== UNUSED_SECTOR) {
@@ -655,11 +683,11 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
         });
         return VCRatio;
       }, 0);
-      var VCEntries = entries.reduce(function (acc, _ref19, i) {
+      var VCEntries = entries.reduce(function (acc, _ref20, i) {
         var _acc$abs, _componentsLog$timest, _acc$rel$vc, _acc$rel;
-        var _ref20 = (0, _slicedToArray2.default)(_ref19, 2),
-          timestamp = _ref20[0],
-          entryPainted = _ref20[1];
+        var _ref21 = (0, _slicedToArray2.default)(_ref20, 2),
+          timestamp = _ref21[0],
+          entryPainted = _ref21[1];
         var currentlyPainted = entryPainted + (((_acc$abs = acc.abs[i - 1]) === null || _acc$abs === void 0 ? void 0 : _acc$abs[1]) || 0);
         var currentlyPaintedRatio = Math.round(currentlyPainted / totalPainted * 1000) / 10;
         var logEntry = (0, _toConsumableArray2.default)(new Set((_componentsLog$timest = componentsLog[timestamp]) === null || _componentsLog$timest === void 0 ? void 0 : _componentsLog$timest.map(function (v) {

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

@@ -19,9 +19,10 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
     (0, _defineProperty2.default)(this, "getSizeCallbacks", new Map());
     (0, _defineProperty2.default)(this, "reactValidateCallbacks", new Map());
     (0, _defineProperty2.default)(this, "intersectionObserverCallback", function (_ref) {
+      var _this$intersectionObs;
       var target = _ref.target,
         boundingClientRect = _ref.boundingClientRect;
-      _this.intersectionObserver.unobserve(target);
+      (_this$intersectionObs = _this.intersectionObserver) === null || _this$intersectionObs === void 0 || _this$intersectionObs.unobserve(target);
       if (!(target instanceof HTMLElement)) {
         // impossible case - keep typescript healthy
         return;
@@ -68,18 +69,21 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
         _this.reactValidateCallbacks.delete(staticKey);
       }
     });
-    this.intersectionObserver = new IntersectionObserver(function (entries) {
-      return entries.filter(function (entry) {
-        return entry.intersectionRatio > 0;
-      }).forEach(_this.intersectionObserverCallback);
-    });
+    if (typeof IntersectionObserver === 'function') {
+      // Only instantiate the IntersectionObserver if it's supported
+      this.intersectionObserver = new IntersectionObserver(function (entries) {
+        return entries.filter(function (entry) {
+          return entry.intersectionRatio > 0;
+        }).forEach(_this.intersectionObserverCallback);
+      });
+    }
     if (window.document) {
       try {
         var existingElements = document.querySelectorAll('[data-ssr-placeholder]');
         existingElements.forEach(function (el) {
           var _el$dataset;
           if (el instanceof HTMLElement && el !== null && el !== void 0 && (_el$dataset = el.dataset) !== null && _el$dataset !== void 0 && _el$dataset.ssrPlaceholder) {
-            var _window$__SSR_PLACEHO;
+            var _window$__SSR_PLACEHO, _this$intersectionObs2;
             var width = -1;
             var height = -1;
             var x = -1;
@@ -97,7 +101,7 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
               x: x,
               y: y
             });
-            _this.intersectionObserver.observe(el);
+            (_this$intersectionObs2 = _this.intersectionObserver) === null || _this$intersectionObs2 === void 0 || _this$intersectionObs2.observe(el);
           }
         });
       } catch (e) {} finally {
@@ -157,8 +161,9 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
           resolve(false);
           return;
         } else {
+          var _this2$intersectionOb;
           _this2.callbacks.set(id, resolve);
-          _this2.intersectionObserver.observe(el);
+          (_this2$intersectionOb = _this2.intersectionObserver) === null || _this2$intersectionOb === void 0 || _this2$intersectionOb.observe(el);
         }
       });
     }
@@ -167,8 +172,9 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
     value: function getSize(el) {
       var _this3 = this;
       return new Promise(function (resolve) {
+        var _this3$intersectionOb;
         _this3.getSizeCallbacks.set(el.dataset.ssrPlaceholder || '', resolve);
-        _this3.intersectionObserver.observe(el);
+        (_this3$intersectionOb = _this3.intersectionObserver) === null || _this3$intersectionOb === void 0 || _this3$intersectionOb.observe(el);
       });
     }
   }, {
@@ -182,8 +188,9 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
           resolve(false);
           return;
         } else {
+          var _this4$intersectionOb;
           _this4.reactValidateCallbacks.set(id, resolve);
-          _this4.intersectionObserver.observe(el);
+          (_this4$intersectionOb = _this4.intersectionObserver) === null || _this4$intersectionOb === void 0 || _this4$intersectionOb.observe(el);
         }
       });
     }

package/dist/cjs/vc/vc-observer-new/get-element-name.js

@@ -5,67 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = getElementName;
 var nameCache = new WeakMap();
-function getAttributeSelector(element, attributeName) {
-  var attrValue = element.getAttribute(attributeName);
-  if (!attrValue) {
-    return '';
-  }
-  return "[".concat(attributeName, "=\"").concat(attrValue, "\"]");
-}
-function isValidSelector(selector) {
-  try {
-    document.querySelector(selector);
-    return true;
-  } catch (err) {
-    return false;
-  }
-}
-function isSelectorUnique(selector) {
-  return document.querySelectorAll(selector).length === 1;
-}
-function getUniqueSelector(selectorConfig, element) {
-  var currentElement = element;
-  var parts = [];
-  var MAX_DEPTH = 3;
-  var currentDepth = 0;
-  while (currentElement && currentElement.localName !== 'body' && currentDepth <= MAX_DEPTH) {
-    var tagName = currentElement.localName;
-    var selectorPart = tagName;
-    if (selectorConfig.id && currentElement.id && isValidSelector("#".concat(currentElement.id))) {
-      selectorPart += "#".concat(currentElement.id);
-    } else if (selectorConfig.dataVC) {
-      selectorPart += getAttributeSelector(currentElement, 'data-vc');
-    } else if (selectorConfig.testId) {
-      selectorPart += getAttributeSelector(currentElement, 'data-testid') || getAttributeSelector(currentElement, 'data-test-id');
-    } else if (selectorConfig.role) {
-      selectorPart += getAttributeSelector(currentElement, 'role');
-    } else if (selectorConfig.className && currentElement.className) {
-      var classNames = Array.from(currentElement.classList).join('.');
-      if (classNames) {
-        if (isValidSelector(".".concat(classNames))) {
-          selectorPart += ".".concat(classNames);
-        }
-      }
-    }
-    parts.unshift(selectorPart);
-    var _potentialSelector = parts.join(' > ').trim();
-    if (_potentialSelector && isSelectorUnique(_potentialSelector)) {
-      return _potentialSelector;
-    }
-    currentElement = currentElement.parentElement;
-    currentDepth++;
-  }
-  var potentialSelector = parts.join(' > ').trim();
-  if (!potentialSelector) {
-    return 'unknown';
-  } else if (!isSelectorUnique(potentialSelector)) {
-    var parentElement = element.parentElement;
-    if (parentElement) {
-      return "".concat(potentialSelector, ":nth-child"); // NOTE: invalid DOM selector, but enough information for VC
-    }
-  }
-  return potentialSelector;
-}
 function getElementName(selectorConfig, element) {
   if (!(element instanceof HTMLElement)) {
     return 'error';
@@ -74,7 +13,56 @@ function getElementName(selectorConfig, element) {
   if (cachedName) {
     return cachedName;
   }
-  var uniqueSelector = getUniqueSelector(selectorConfig, element);
-  nameCache.set(element, uniqueSelector);
-  return uniqueSelector;
+  // Get the tag name of the element.
+  var tagName = element.localName;
+  var encodeValue = function encodeValue(s) {
+    try {
+      return encodeURIComponent(s);
+    } catch (e) {
+      return 'malformed_value';
+    }
+  };
+
+  // Helper function to construct attribute selectors.
+  var getAttributeSelector = function getAttributeSelector(attributeName) {
+    var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+    var attrValue = element.getAttribute(attributeName);
+    if (!attrValue) {
+      return '';
+    }
+    var encondedAttrValue = encodeValue(attrValue);
+    return "".concat(prefix, "[").concat(attributeName, "=\"").concat(encondedAttrValue, "\"]");
+  };
+
+  // Construct the data-vc attribute selector if specified in the config.
+  var dataVC = selectorConfig.dataVC ? getAttributeSelector('data-vc') : '';
+
+  // Construct the ID selector if specified in the config and the element has an ID.
+  var id = selectorConfig.id && element.id ? "#".concat(encodeValue(element.id)) : '';
+
+  // Construct the test ID selector if specified in the config.
+  var testId = selectorConfig.testId ? getAttributeSelector('data-testid') || getAttributeSelector('data-test-id') : '';
+
+  // Construct the role selector if specified in the config.
+  var role = selectorConfig.role ? getAttributeSelector('role') : '';
+  var classNames = Array.from(element.classList).map(encodeValue).join('.');
+  // Construct the class list selector if specified in the config.
+  var classList = selectorConfig.className && classNames ? ".".concat(classNames) : '';
+
+  // Combine primary attribute selectors (id, testId, role) into a single string.
+  var primaryAttributes = [id, testId, role].filter(Boolean).join('');
+
+  // Use dataVC if available, otherwise use the primary attributes.
+  var attributes = dataVC || primaryAttributes;
+
+  // If no attributes or class list, recursively get the parent's name.
+  if (!attributes && !classList) {
+    var parentName = element.parentElement ? getElementName(selectorConfig, element.parentElement) : 'unknown';
+    return "".concat(parentName, " > ").concat(tagName);
+  }
+
+  // Return the final constructed name: tagName + attributes or classList.
+  var name = "".concat(tagName).concat(attributes || classList);
+  nameCache.set(element, name);
+  return name;
 }

package/dist/cjs/vc/vc-observer-new/get-unique-element-name.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getElementName;
+var nameCache = new WeakMap();
+function getAttributeSelector(element, attributeName) {
+  var attrValue = element.getAttribute(attributeName);
+  if (!attrValue) {
+    return '';
+  }
+  return "[".concat(attributeName, "=\"").concat(attrValue, "\"]");
+}
+function isValidSelector(selector) {
+  try {
+    document.querySelector(selector);
+    return true;
+  } catch (err) {
+    return false;
+  }
+}
+function isSelectorUnique(selector) {
+  return document.querySelectorAll(selector).length === 1;
+}
+function getUniqueSelector(selectorConfig, element) {
+  var currentElement = element;
+  var parts = [];
+  var MAX_DEPTH = 3;
+  var currentDepth = 0;
+  while (currentElement && currentElement.localName !== 'body' && currentDepth <= MAX_DEPTH) {
+    var tagName = currentElement.localName;
+    var selectorPart = tagName;
+    if (selectorConfig.id && currentElement.id && isValidSelector("#".concat(currentElement.id))) {
+      selectorPart += "#".concat(currentElement.id);
+    } else if (selectorConfig.dataVC) {
+      selectorPart += getAttributeSelector(currentElement, 'data-vc');
+    } else if (selectorConfig.testId) {
+      selectorPart += getAttributeSelector(currentElement, 'data-testid') || getAttributeSelector(currentElement, 'data-test-id');
+    } else if (selectorConfig.role) {
+      selectorPart += getAttributeSelector(currentElement, 'role');
+    } else if (selectorConfig.className && currentElement.className) {
+      var classNames = Array.from(currentElement.classList).join('.');
+      if (classNames) {
+        if (isValidSelector(".".concat(classNames))) {
+          selectorPart += ".".concat(classNames);
+        }
+      }
+    }
+    parts.unshift(selectorPart);
+    var _potentialSelector = parts.join(' > ').trim();
+    if (_potentialSelector && isSelectorUnique(_potentialSelector)) {
+      return _potentialSelector;
+    }
+    currentElement = currentElement.parentElement;
+    currentDepth++;
+  }
+  var potentialSelector = parts.join(' > ').trim();
+  if (!potentialSelector) {
+    return 'unknown';
+  } else if (!isSelectorUnique(potentialSelector)) {
+    var parentElement = element.parentElement;
+    if (parentElement) {
+      return "".concat(potentialSelector, ":nth-child"); // NOTE: invalid DOM selector, but enough information for VC
+    }
+  }
+  return potentialSelector;
+}
+function getElementName(selectorConfig, element) {
+  if (!(element instanceof HTMLElement)) {
+    return 'error';
+  }
+  var cachedName = nameCache.get(element);
+  if (cachedName) {
+    return cachedName;
+  }
+  var uniqueSelector = getUniqueSelector(selectorConfig, element);
+  nameCache.set(element, uniqueSelector);
+  return uniqueSelector;
+}

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.KNOWN_ATTRIBUTES_THAT_DOES_NOT_CAUSE_LAYOUT_SHIFTS = 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"));
@@ -17,6 +17,11 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 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'];
+
+// TODO: AFO-3523
+// Those are the attributes we have found when testing the 'fy25.03' manually.
+// We still need to replace this hardcoded list with a proper automation
+var KNOWN_ATTRIBUTES_THAT_DOES_NOT_CAUSE_LAYOUT_SHIFTS = exports.KNOWN_ATTRIBUTES_THAT_DOES_NOT_CAUSE_LAYOUT_SHIFTS = ['data-drop-target-for-element', 'draggable'];
 var VCCalculator_FY25_03 = exports.default = /*#__PURE__*/function (_AbstractVCCalculator) {
   function VCCalculator_FY25_03() {
     (0, _classCallCheck2.default)(this, VCCalculator_FY25_03);
@@ -32,7 +37,7 @@ var VCCalculator_FY25_03 = exports.default = /*#__PURE__*/function (_AbstractVCC
       if (entry.type === 'mutation:attribute') {
         var entryData = entry.data;
         var attributeName = entryData.attributeName;
-        if (!attributeName) {
+        if (!attributeName || KNOWN_ATTRIBUTES_THAT_DOES_NOT_CAUSE_LAYOUT_SHIFTS.includes(attributeName)) {
           return false;
         }
         return true;

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

@@ -41,12 +41,14 @@ var ViewportCanvas = exports.ViewportCanvas = /*#__PURE__*/function () {
     this.scaleFactor = scaleFactor;
     this.colorCounter = 1;
     this.colorTimeMap = new Map();
+    var safeViewportWidth = Math.max(viewport.width, 1);
+    var safeViewportHeight = Math.max(viewport.height, 1);
 
     // 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;
+    this.scaledWidth = Math.max(Math.ceil(safeViewportWidth * scaleFactor), 1);
+    this.scaledHeight = Math.max(Math.ceil(safeViewportHeight * scaleFactor), 1);
+    this.scaleX = this.scaledWidth / safeViewportWidth;
+    this.scaleY = this.scaledHeight / safeViewportHeight;
 
     // Initialize OffscreenCanvas with scaled dimensions
     this.canvas = document.createElement('canvas');

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

@@ -21,7 +21,9 @@ function isElementVisible(element) {
   try {
     var visible = element.checkVisibility({
       // @ts-expect-error
-      visibilityProperty: true
+      visibilityProperty: true,
+      contentVisibilityAuto: true,
+      opacityProperty: true
     });
     return visible;
   } catch (e) {
@@ -54,6 +56,9 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
           time = _ref2.time,
           type = _ref2.type,
           mutationData = _ref2.mutationData;
+        if (!target) {
+          return;
+        }
         var visible = isElementVisible(target);
         var lastElementRect = _this.mapVisibleNodeRects.get(target);
         _this.mapVisibleNodeRects.set(target, rect);
@@ -149,14 +154,17 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
         try {
           for (_iterator.s(); !(_step = _iterator.n()).done;) {
             var changedRect = _step.value;
-            onChange({
-              time: time,
-              elementRef: new WeakRef(changedRect.node),
-              visible: true,
-              rect: changedRect.rect,
-              previousRect: changedRect.previousRect,
-              type: 'layout-shift'
-            });
+            var target = changedRect.node;
+            if (target) {
+              onChange({
+                time: time,
+                elementRef: new WeakRef(target),
+                visible: true,
+                rect: changedRect.rect,
+                previousRect: changedRect.previousRect,
+                type: 'layout-shift'
+              });
+            }
           }
         } catch (err) {
           _iterator.e(err);

package/dist/es2019/additional-payload/utils/lighthouse-metrics/utils/observer/index.js

@@ -2,6 +2,10 @@ import { PerformanceObserverEntryTypes } from '../../const';
 import { EntriesBuffer } from '../buffer';
 let pe = null;
 const getObserver = () => {
+  if (typeof PerformanceObserver !== 'function') {
+    // Only instantiate the IntersectionObserver if it's supported
+    return null;
+  }
   if (pe !== null) {
     return pe;
   }
@@ -18,13 +22,15 @@ const getObserver = () => {
   return pe;
 };
 export const startLSObserver = () => {
-  getObserver().observe({
+  var _getObserver;
+  (_getObserver = getObserver()) === null || _getObserver === void 0 ? void 0 : _getObserver.observe({
     type: PerformanceObserverEntryTypes.LayoutShift,
     buffered: true
   });
 };
 export const startLTObserver = () => {
-  getObserver().observe({
+  var _getObserver2;
+  (_getObserver2 = getObserver()) === null || _getObserver2 === void 0 ? void 0 : _getObserver2.observe({
     type: PerformanceObserverEntryTypes.LongTask,
     buffered: true
   });