@atlaskit/react-ufo 3.4.1 → 3.4.3

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

@@ -130,7 +130,37 @@ const getResourceTimings = (start, end) => {
 const getBundleEvalTimings = start => bundleEvalTiming.getBundleEvalTimings(start);
 const getSSRSuccess = type => type === 'page_load' ? ssr.getSSRSuccess() : undefined;
 const getSSRFeatureFlags = type => type === 'page_load' ? ssr.getSSRFeatureFlags() : undefined;
-const getPaintMetrics = type => {
+const getLCP = end => {
+  return new Promise(resolve => {
+    let observer;
+    const timeout = setTimeout(() => {
+      var _observer;
+      (_observer = observer) === null || _observer === void 0 ? void 0 : _observer.disconnect();
+      resolve(null);
+    }, 200);
+    observer = new PerformanceObserver(list => {
+      const entries = Array.from(list.getEntries());
+      const lastEntry = entries.reduce((agg, entry) => {
+        // Use the latest LCP candidate before TTAI
+        if (entry.startTime <= end && (agg === null || agg.startTime < entry.startTime)) {
+          return entry;
+        }
+        return agg;
+      }, null);
+      clearTimeout(timeout);
+      if (!lastEntry || lastEntry === null) {
+        resolve(null);
+      } else {
+        resolve(lastEntry.startTime);
+      }
+    });
+    observer.observe({
+      type: 'largest-contentful-paint',
+      buffered: true
+    });
+  });
+};
+const getPaintMetrics = async (type, end) => {
   if (type !== 'page_load') {
     return {};
   }
@@ -143,6 +173,12 @@ const getPaintMetrics = type => {
       metrics['metric:fcp'] = Math.round(entry.startTime);
     }
   });
+  if (fg('ufo_lcp')) {
+    const lcp = await getLCP(end);
+    if (lcp) {
+      metrics['metric:lcp'] = Math.round(lcp);
+    }
+  }
   return metrics;
 };
 const getTTAI = interaction => {
@@ -728,7 +764,7 @@ async function createInteractionMetricsPayload(interaction, interactionId, exper
   }
   const newUFOName = sanitizeUfoName(ufoName);
   const resourceTimings = getResourceTimings(start, end);
-  const [vcMetrics, experimentalMetrics] = await Promise.all([getVCMetrics(interaction), experimental ? getExperimentalVCMetrics(interaction) : Promise.resolve(undefined)]);
+  const [vcMetrics, experimentalMetrics, paintMetrics] = await Promise.all([getVCMetrics(interaction), experimental ? getExperimentalVCMetrics(interaction) : Promise.resolve(undefined), getPaintMetrics(type, end)]);
   const payload = {
     actionSubject: 'experience',
     action: 'measured',
@@ -754,7 +790,7 @@ async function createInteractionMetricsPayload(interaction, interactionId, exper
         ...getSSRProperties(type),
         ...getAssetsMetrics(interaction, pageLoadInteractionMetrics === null || pageLoadInteractionMetrics === void 0 ? void 0 : pageLoadInteractionMetrics.SSRDoneTime),
         ...getPPSMetrics(interaction),
-        ...getPaintMetrics(type),
+        ...paintMetrics,
         ...getNavigationMetrics(type),
         ...vcMetrics,
         ...experimentalMetrics,

package/dist/es2019/segment/segment.js

@@ -15,15 +15,40 @@ let tryCompleteHandle;
 const AsyncSegmentHighlight = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-internal_ufo-segment-highlight" */'./segment-highlight').then(module => ({
   default: module.SegmentHighlight
 })));
+const noopIdMap = new Map();
 
 /** A portion of the page we apply measurement to */
 export default function UFOSegment({
   name: segmentName,
-  children
+  children,
+  mode = 'single'
 }) {
   var _getConfig2;
   const parentContext = useContext(UFOInteractionContext);
-  const segmentId = useMemo(() => generateId(), []);
+  const segmentIdMap = useMemo(() => {
+    if (!fg('platform_ufo_segment_list_mode')) {
+      // just in case we cause rerender issues, use noop map
+      return noopIdMap;
+    }
+    if (!(parentContext !== null && parentContext !== void 0 && parentContext.segmentIdMap)) {
+      return new Map();
+    }
+    return parentContext.segmentIdMap;
+  }, [parentContext]);
+  const segmentId = useMemo(() => {
+    if (!fg('platform_ufo_segment_list_mode')) {
+      return generateId();
+    }
+    if (mode === 'single') {
+      return generateId();
+    }
+    if (segmentIdMap.has(segmentName)) {
+      return segmentIdMap.get(segmentName);
+    }
+    const newSegmentId = generateId();
+    segmentIdMap.set(segmentName, newSegmentId);
+    return newSegmentId;
+  }, [mode, segmentName, segmentIdMap]);
   const labelStack = useMemo(() => parentContext !== null && parentContext !== void 0 && parentContext.labelStack ? [...parentContext.labelStack, {
     name: segmentName,
     segmentId
@@ -108,6 +133,7 @@ export default function UFOSegment({
     }
     return {
       labelStack,
+      segmentIdMap: segmentIdMap,
       hold(name = 'unknown') {
         return this._internalHold(this.labelStack, name);
       },
@@ -204,7 +230,7 @@ export default function UFOSegment({
       _internalHoldByID,
       complete
     };
-  }, [parentContext, labelStack, interactionId]);
+  }, [parentContext, labelStack, segmentIdMap, interactionId]);
   const hasMounted = useRef(false);
   const onRender = useCallback((_id, phase, actualDuration, baseDuration, startTime, commitTime) => {
     var _getConfig;

package/dist/es2019/vc/index.js

@@ -1,11 +1,11 @@
 import { fg } from '@atlaskit/platform-feature-flags';
 import { getConfig } from '../config';
+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;
-    this.oldVCObserver = new VCObserver(opts);
     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) {
@@ -13,6 +13,7 @@ class VCObserverWrapper {
         selectorConfig: opts.selectorConfig
       });
     }
+    this.oldVCObserver = new VCObserver(opts);
   }
   start(startArg) {
     var _this$oldVCObserver, _this$newVCObserver;
@@ -58,9 +59,28 @@ class VCObserverWrapper {
     (_this$oldVCObserver7 = this.oldVCObserver) === null || _this$oldVCObserver7 === void 0 ? void 0 : _this$oldVCObserver7.setReactRootRenderStop(stopTime || performance.now());
   }
 }
+const isReactSSR = Boolean(process.env.REACT_SSR);
+const isServer = Boolean(globalThis === null || globalThis === void 0 ? void 0 : globalThis.__SERVER__);
+function isEnvironmentSupported() {
+  // SSR environment aren't supported
+  if (isReactSSR || isServer) {
+    return false;
+  }
+
+  // Legacy browsers that doesn't support WeakRef
+  // aren't valid
+  if (typeof (globalThis === null || globalThis === void 0 ? void 0 : globalThis.WeakRef) !== 'function') {
+    return false;
+  }
+  if (typeof (globalThis === null || globalThis === void 0 ? void 0 : globalThis.MutationObserver) !== 'function' || typeof (globalThis === null || globalThis === void 0 ? void 0 : globalThis.IntersectionObserver) !== 'function' || typeof (globalThis === null || globalThis === void 0 ? void 0 : globalThis.PerformanceObserver) !== 'function') {
+    return false;
+  }
+  return true;
+}
 export const getVCObserver = (opts = {}) => {
   if (!globalThis.__vcObserver) {
-    globalThis.__vcObserver = new VCObserverWrapper(opts);
+    const shouldMockVCObserver = !isEnvironmentSupported();
+    globalThis.__vcObserver = shouldMockVCObserver ? new VCObserverNOOP() : new VCObserverWrapper(opts);
   }
   return globalThis.__vcObserver;
 };

package/dist/es2019/vc/no-op-vc-observer.js

@@ -0,0 +1,17 @@
+// This class should be used on scenarios where VC can not be calculate
+// such as: SSR environment and legacy browsers
+export class VCObserverNOOP {
+  start(startArg) {}
+  stop() {}
+  getVCRawData() {
+    return null;
+  }
+  getVCResult(param) {
+    return Promise.resolve({
+      'ufo:vc:noop': true
+    });
+  }
+  setSSRElement(element) {}
+  setReactRootRenderStart(startTime) {}
+  setReactRootRenderStop(stopTime) {}
+}

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

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { fg } from '@atlaskit/platform-feature-flags';
+import { getPageVisibilityState } from '../../hidden-timing';
 import { attachAbortListeners } from './attachAbortListeners';
 import { getViewportHeight, getViewportWidth } from './getViewport';
 import { MultiRevisionHeatmap } from './heatmap/heatmap';
@@ -250,8 +251,35 @@ export class VCObserver {
       } catch (e) {
         /*  do nothing */
       }
+      const isVCClean = !abortReasonInfo;
       const isMultiHeatmapEnabled = !fg('platform_ufo_multiheatmap_killswitch');
-      const revisionsData = isMultiHeatmapEnabled && multiHeatmap !== null ? {
+      const pageVisibilityUpToTTAI = getPageVisibilityState(start, stop);
+      const shouldHaveVCmetric = isVCClean && !isEventAborted && pageVisibilityUpToTTAI;
+      const revisionsData = isMultiHeatmapEnabled ? fg('platform_ufo_vc_observer_new') ? {
+        [`${fullPrefix}vc:rev`]: [{
+          revision: 'fy25.01',
+          clean: isVCClean,
+          'metric:vc90': shouldHaveVCmetric ? VC['90'] : null,
+          vcDetails: shouldHaveVCmetric ? Object.fromEntries(VCObserver.VCParts.map(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(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 ? {
         [`${fullPrefix}vc:rev`]: multiHeatmap === null || multiHeatmap === void 0 ? void 0 : multiHeatmap.getPayloadShapedData({
           VCParts: VCObserver.VCParts.map(v => parseInt(v)),
           VCCalculationMethods: getRevisions().map(({
@@ -264,9 +292,9 @@ export class VCObserver {
           interactionStart: start,
           ttai: stop,
           ssr,
-          clean: !abortReasonInfo
+          clean: isVCClean
         })
-      } : null;
+      } : null : null;
       // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
       const isCalcSpeedIndexEnabled = fg('ufo-calc-speed-index');
       const speedIndex = {
@@ -276,7 +304,7 @@ export class VCObserver {
       return {
         'metrics:vc': VC,
         [`${fullPrefix}vc:state`]: true,
-        [`${fullPrefix}vc:clean`]: !abortReasonInfo,
+        [`${fullPrefix}vc:clean`]: isVCClean,
         [`${fullPrefix}vc:dom`]: VCBox,
         [`${fullPrefix}vc:updates`]: VCEntries.rel.slice(0, 50),
         // max 50
@@ -297,14 +325,16 @@ export class VCObserver {
     _defineProperty(this, "handleUpdate", (rawTime, intersectionRect, targetName, element, type, ignoreReason) => {
       this.measureStart();
       this.legacyHandleUpdate(rawTime, intersectionRect, targetName, element, type, ignoreReason);
-      this.onViewportChangeDetected({
-        timestamp: rawTime,
-        intersectionRect,
-        targetName,
-        element,
-        type,
-        ignoreReason
-      });
+      if (!fg('platform_ufo_vc_observer_new')) {
+        this.onViewportChangeDetected({
+          timestamp: rawTime,
+          intersectionRect,
+          targetName,
+          element,
+          type,
+          ignoreReason
+        });
+      }
       this.measureStop();
     });
     _defineProperty(this, "legacyHandleUpdate", (rawTime, intersectionRect, targetName, element, type, ignoreReason) => {

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

@@ -11,7 +11,8 @@ export class SSRPlaceholderHandlers {
       target,
       boundingClientRect
     }) => {
-      this.intersectionObserver.unobserve(target);
+      var _this$intersectionObs;
+      (_this$intersectionObs = this.intersectionObserver) === null || _this$intersectionObs === void 0 ? void 0 : _this$intersectionObs.unobserve(target);
       if (!(target instanceof HTMLElement)) {
         // impossible case - keep typescript healthy
         return;
@@ -58,14 +59,17 @@ export class SSRPlaceholderHandlers {
         this.reactValidateCallbacks.delete(staticKey);
       }
     });
-    this.intersectionObserver = new IntersectionObserver(entries => entries.filter(entry => entry.intersectionRatio > 0).forEach(this.intersectionObserverCallback));
+    if (typeof IntersectionObserver === 'function') {
+      // Only instantiate the IntersectionObserver if it's supported
+      this.intersectionObserver = new IntersectionObserver(entries => entries.filter(entry => entry.intersectionRatio > 0).forEach(this.intersectionObserverCallback));
+    }
     if (window.document) {
       try {
         const existingElements = document.querySelectorAll('[data-ssr-placeholder]');
         existingElements.forEach(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;
             let width = -1;
             let height = -1;
             let x = -1;
@@ -83,7 +87,7 @@ export class SSRPlaceholderHandlers {
               x,
               y
             });
-            this.intersectionObserver.observe(el);
+            (_this$intersectionObs2 = this.intersectionObserver) === null || _this$intersectionObs2 === void 0 ? void 0 : _this$intersectionObs2.observe(el);
           }
         });
       } catch (e) {} finally {
@@ -130,15 +134,17 @@ export class SSRPlaceholderHandlers {
         resolve(false);
         return;
       } else {
+        var _this$intersectionObs3;
         this.callbacks.set(id, resolve);
-        this.intersectionObserver.observe(el);
+        (_this$intersectionObs3 = this.intersectionObserver) === null || _this$intersectionObs3 === void 0 ? void 0 : _this$intersectionObs3.observe(el);
       }
     });
   }
   getSize(el) {
     return new Promise(resolve => {
+      var _this$intersectionObs4;
       this.getSizeCallbacks.set(el.dataset.ssrPlaceholder || '', resolve);
-      this.intersectionObserver.observe(el);
+      (_this$intersectionObs4 = this.intersectionObserver) === null || _this$intersectionObs4 === void 0 ? void 0 : _this$intersectionObs4.observe(el);
     });
   }
   validateReactComponentMatchToPlaceholder(el) {
@@ -149,8 +155,9 @@ export class SSRPlaceholderHandlers {
         resolve(false);
         return;
       } else {
+        var _this$intersectionObs5;
         this.reactValidateCallbacks.set(id, resolve);
-        this.intersectionObserver.observe(el);
+        (_this$intersectionObs5 = this.intersectionObserver) === null || _this$intersectionObs5 === void 0 ? void 0 : _this$intersectionObs5.observe(el);
       }
     });
   }

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

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

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

@@ -0,0 +1,74 @@
+const nameCache = new WeakMap();
+function getAttributeSelector(element, attributeName) {
+  const attrValue = element.getAttribute(attributeName);
+  if (!attrValue) {
+    return '';
+  }
+  return `[${attributeName}="${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) {
+  let currentElement = element;
+  const parts = [];
+  const MAX_DEPTH = 3;
+  let currentDepth = 0;
+  while (currentElement && currentElement.localName !== 'body' && currentDepth <= MAX_DEPTH) {
+    const tagName = currentElement.localName;
+    let selectorPart = tagName;
+    if (selectorConfig.id && currentElement.id && isValidSelector(`#${currentElement.id}`)) {
+      selectorPart += `#${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) {
+      const classNames = Array.from(currentElement.classList).join('.');
+      if (classNames) {
+        if (isValidSelector(`.${classNames}`)) {
+          selectorPart += `.${classNames}`;
+        }
+      }
+    }
+    parts.unshift(selectorPart);
+    const potentialSelector = parts.join(' > ').trim();
+    if (potentialSelector && isSelectorUnique(potentialSelector)) {
+      return potentialSelector;
+    }
+    currentElement = currentElement.parentElement;
+    currentDepth++;
+  }
+  const potentialSelector = parts.join(' > ').trim();
+  if (!potentialSelector) {
+    return 'unknown';
+  } else if (!isSelectorUnique(potentialSelector)) {
+    const parentElement = element.parentElement;
+    if (parentElement) {
+      return `${potentialSelector}:nth-child`; // NOTE: invalid DOM selector, but enough information for VC
+    }
+  }
+  return potentialSelector;
+}
+export default function getElementName(selectorConfig, element) {
+  if (!(element instanceof HTMLElement)) {
+    return 'error';
+  }
+  const cachedName = nameCache.get(element);
+  if (cachedName) {
+    return cachedName;
+  }
+  const uniqueSelector = getUniqueSelector(selectorConfig, element);
+  nameCache.set(element, uniqueSelector);
+  return uniqueSelector;
+}

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

@@ -3,6 +3,11 @@ import isViewportEntryData from '../utils/is-viewport-entry-data';
 const ABORTING_WINDOW_EVENT = ['wheel', 'scroll', 'keydown', 'resize'];
 const REVISION_NO = 'fy25.03';
 const 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
+export const KNOWN_ATTRIBUTES_THAT_DOES_NOT_CAUSE_LAYOUT_SHIFTS = ['data-drop-target-for-element', 'draggable'];
 export default class VCCalculator_FY25_03 extends AbstractVCCalculatorBase {
   constructor() {
     super(REVISION_NO);
@@ -14,7 +19,7 @@ export default class VCCalculator_FY25_03 extends AbstractVCCalculatorBase {
     if (entry.type === 'mutation:attribute') {
       const entryData = entry.data;
       const attributeName = entryData.attributeName;
-      if (!attributeName) {
+      if (!attributeName || KNOWN_ATTRIBUTES_THAT_DOES_NOT_CAUSE_LAYOUT_SHIFTS.includes(attributeName)) {
         return false;
       }
       return true;

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

@@ -28,12 +28,14 @@ export class ViewportCanvas {
     this.scaleFactor = scaleFactor;
     this.colorCounter = 1;
     this.colorTimeMap = new Map();
+    const safeViewportWidth = Math.max(viewport.width, 1);
+    const 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/es2019/vc/vc-observer-new/viewport-observer/index.js

@@ -9,7 +9,9 @@ function isElementVisible(element) {
   try {
     const visible = element.checkVisibility({
       // @ts-expect-error
-      visibilityProperty: true
+      visibilityProperty: true,
+      contentVisibilityAuto: true,
+      opacityProperty: true
     });
     return visible;
   } catch (e) {
@@ -42,6 +44,9 @@ export default class ViewportObserver {
         type,
         mutationData
       }) => {
+        if (!target) {
+          return;
+        }
         const visible = isElementVisible(target);
         const lastElementRect = this.mapVisibleNodeRects.get(target);
         this.mapVisibleNodeRects.set(target, rect);
@@ -132,14 +137,17 @@ export default class ViewportObserver {
         changedRects
       }) => {
         for (const changedRect of changedRects) {
-          onChange({
-            time,
-            elementRef: new WeakRef(changedRect.node),
-            visible: true,
-            rect: changedRect.rect,
-            previousRect: changedRect.previousRect,
-            type: 'layout-shift'
-          });
+          const target = changedRect.node;
+          if (target) {
+            onChange({
+              time,
+              elementRef: new WeakRef(target),
+              visible: true,
+              rect: changedRect.rect,
+              previousRect: changedRect.previousRect,
+              type: 'layout-shift'
+            });
+          }
         }
       }
     });

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

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