@atlaskit/react-ufo 3.14.5 → 3.14.7

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

@@ -495,7 +495,8 @@ export class VCObserver {
     this.oldDomUpdatesEnabled = options.oldDomUpdates || false;
     const {
       ssrEnablePageLayoutPlaceholder,
-      disableSizeAndPositionCheck
+      disableSizeAndPositionCheck,
+      ssrPlaceholderHandler
     } = options;
     this.observers = new Observers({
       selectorConfig: options.selectorConfig || {
@@ -508,7 +509,8 @@ export class VCObserver {
       SSRConfig: {
         enablePageLayoutPlaceholder: ssrEnablePageLayoutPlaceholder || false,
         disableSizeAndPositionCheck: disableSizeAndPositionCheck
-      }
+      },
+      ssrPlaceholderHandler: ssrPlaceholderHandler
     });
     this.heatmap = !isVCRevisionEnabled('fy25.01') ? [] : this.getCleanHeatmap();
     this.heatmapNext = this.getCleanHeatmap();
@@ -654,6 +656,10 @@ export class VCObserver {
   setReactRootRenderStop(stopTime = performance.now()) {
     this.observers.setReactRootRenderStop(stopTime);
   }
+  collectSSRPlaceholders() {
+    // This is handled by the shared SSRPlaceholderHandlers in VCObserverWrapper
+    // Individual observers don't need to implement this
+  }
   setAbortReason(abort, timestamp, info = '') {
     if (this.abortReason.reason === null || this.abortReason.blocking === false) {
       this.abortReason.reason = abort;

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

@@ -21,7 +21,6 @@ function isElementVisible(target) {
 }
 export class Observers {
   constructor(opts) {
-    var _opts$SSRConfig, _opts$SSRConfig2;
     _defineProperty(this, "observedMutations", new WeakMap());
     _defineProperty(this, "elementsInView", new Set());
     _defineProperty(this, "callbacks", new Set());
@@ -61,10 +60,17 @@ export class Observers {
     };
     this.intersectionObserver = this.getIntersectionObserver();
     this.mutationObserver = this.getMutationObserver();
-    this.ssrPlaceholderHandler = new SSRPlaceholderHandlers({
-      enablePageLayoutPlaceholder: (_opts$SSRConfig = opts.SSRConfig) === null || _opts$SSRConfig === void 0 ? void 0 : _opts$SSRConfig.enablePageLayoutPlaceholder,
-      disableSizeAndPositionCheck: (_opts$SSRConfig2 = opts.SSRConfig) === null || _opts$SSRConfig2 === void 0 ? void 0 : _opts$SSRConfig2.disableSizeAndPositionCheck
-    });
+
+    // Use shared SSR placeholder handler if provided, otherwise create new one
+    if (opts.ssrPlaceholderHandler) {
+      this.ssrPlaceholderHandler = opts.ssrPlaceholderHandler;
+    } else {
+      var _opts$SSRConfig, _opts$SSRConfig2;
+      this.ssrPlaceholderHandler = new SSRPlaceholderHandlers({
+        enablePageLayoutPlaceholder: (_opts$SSRConfig = opts.SSRConfig) === null || _opts$SSRConfig === void 0 ? void 0 : _opts$SSRConfig.enablePageLayoutPlaceholder,
+        disableSizeAndPositionCheck: (_opts$SSRConfig2 = opts.SSRConfig) === null || _opts$SSRConfig2 === void 0 ? void 0 : _opts$SSRConfig2.disableSizeAndPositionCheck
+      });
+    }
   }
   isBrowserSupported() {
     return typeof window.IntersectionObserver === 'function' && typeof window.MutationObserver === 'function';

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

@@ -96,32 +96,8 @@ export class SSRPlaceholderHandlers {
     this.disableSizeAndPositionCheck = disableSizeAndPositionCheck;
     if (window.document) {
       try {
-        const selector = this.enablePageLayoutPlaceholder ? '[data-ssr-placeholder],[data-testid="page-layout.root"]' : '[data-ssr-placeholder]';
-        const existingElements = document.querySelectorAll(selector);
-        existingElements.forEach(el => {
-          const placeholderId = el instanceof HTMLElement && this.getPlaceholderId(el);
-          if (placeholderId) {
-            var _window$__SSR_PLACEHO, _this$intersectionObs2;
-            let width = -1;
-            let height = -1;
-            let x = -1;
-            let y = -1;
-            const boundingClientRect = (_window$__SSR_PLACEHO = window.__SSR_PLACEHOLDERS_DIMENSIONS__) === null || _window$__SSR_PLACEHO === void 0 ? void 0 : _window$__SSR_PLACEHO[placeholderId];
-            if (boundingClientRect) {
-              width = boundingClientRect.width;
-              height = boundingClientRect.height;
-              x = boundingClientRect.x;
-              y = boundingClientRect.y;
-            }
-            this.staticPlaceholders.set(placeholderId, {
-              width,
-              height,
-              x,
-              y
-            });
-            (_this$intersectionObs2 = this.intersectionObserver) === null || _this$intersectionObs2 === void 0 ? void 0 : _this$intersectionObs2.observe(el);
-          }
-        });
+        // Collect initial placeholders using SSR dimensions
+        this.collectPlaceholdersInternal();
       } catch (e) {} finally {
         delete window.__SSR_PLACEHOLDERS_DIMENSIONS__;
       }
@@ -133,6 +109,61 @@ export class SSRPlaceholderHandlers {
     this.getSizeCallbacks = new Map();
     this.reactValidateCallbacks = new Map();
   }
+  collectPlaceholdersInternal() {
+    const selector = this.enablePageLayoutPlaceholder ? '[data-ssr-placeholder],[data-testid="page-layout.root"]' : '[data-ssr-placeholder]';
+    const existingElements = document.querySelectorAll(selector);
+    existingElements.forEach(el => {
+      const placeholderId = el instanceof HTMLElement && this.getPlaceholderId(el);
+      if (placeholderId && !this.staticPlaceholders.has(placeholderId)) {
+        var _window$__SSR_PLACEHO, _this$intersectionObs2;
+        let width = -1;
+        let height = -1;
+        let x = -1;
+        let y = -1;
+
+        // Use SSR dimensions from window global if available
+        const boundingClientRect = (_window$__SSR_PLACEHO = window.__SSR_PLACEHOLDERS_DIMENSIONS__) === null || _window$__SSR_PLACEHO === void 0 ? void 0 : _window$__SSR_PLACEHO[placeholderId];
+        if (boundingClientRect) {
+          width = boundingClientRect.width;
+          height = boundingClientRect.height;
+          x = boundingClientRect.x;
+          y = boundingClientRect.y;
+        } else {
+          // Fallback to current bounding rect if SSR dimensions not available
+          const rect = el.getBoundingClientRect();
+          width = rect.width;
+          height = rect.height;
+          x = rect.x;
+          y = rect.y;
+        }
+        this.staticPlaceholders.set(placeholderId, {
+          width,
+          height,
+          x,
+          y
+        });
+        (_this$intersectionObs2 = this.intersectionObserver) === null || _this$intersectionObs2 === void 0 ? void 0 : _this$intersectionObs2.observe(el);
+      }
+    });
+  }
+
+  /**
+   * Added this method to be utilised for testing purposes.
+   * In production it collection placeholder should only happens on constructor
+   */
+  collectExistingPlaceholders() {
+    if (!window.document) {
+      return;
+    }
+    try {
+      // Collect placeholders using SSR dimensions or fallback to live dimensions
+      this.collectPlaceholdersInternal();
+    } catch (e) {
+      // Silently fail if there are any issues
+    } finally {
+      delete window.__SSR_PLACEHOLDERS_DIMENSIONS__;
+    }
+  }
   isPlaceholder(element) {
     return Boolean(this.getPlaceholderId(element));
   }

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

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { fg } from '@atlaskit/platform-feature-flags';
+import { SSRPlaceholderHandlers } from '../vc-observer/observers/ssr-placeholders';
 import EntriesTimeline from './entries-timeline';
 import getElementName from './get-element-name';
 import VCCalculator_FY25_03 from './metric-calculator/fy25_03';
@@ -7,6 +8,11 @@ import getViewportHeight from './metric-calculator/utils/get-viewport-height';
 import getViewportWidth from './metric-calculator/utils/get-viewport-width';
 import ViewportObserver from './viewport-observer';
 import WindowEventObserver from './window-event-observer';
+const SSRState = {
+  normal: 1,
+  waitingForFirstRender: 2,
+  ignoring: 3
+};
 const DEFAULT_SELECTOR_CONFIG = {
   id: false,
   testId: true,
@@ -19,9 +25,31 @@ export default class VCObserverNew {
     var _config$isPostInterac, _config$selectorConfi;
     _defineProperty(this, "viewportObserver", null);
     _defineProperty(this, "windowEventObserver", null);
+    // SSR related properties
+    _defineProperty(this, "ssrPlaceholderHandler", null);
+    _defineProperty(this, "ssr", {
+      state: SSRState.normal,
+      reactRootElement: null,
+      renderStart: -1,
+      renderStop: -1
+    });
     this.entriesTimeline = new EntriesTimeline();
     this.isPostInteraction = (_config$isPostInterac = config.isPostInteraction) !== null && _config$isPostInterac !== void 0 ? _config$isPostInterac : false;
     this.selectorConfig = (_config$selectorConfi = config.selectorConfig) !== null && _config$selectorConfi !== void 0 ? _config$selectorConfi : DEFAULT_SELECTOR_CONFIG;
+
+    // Use shared SSR placeholder handler if provided, otherwise create new one if feature flag is enabled
+    if (config.ssrPlaceholderHandler) {
+      this.ssrPlaceholderHandler = config.ssrPlaceholderHandler;
+    } else {
+      var _config$SSRConfig$ena, _config$SSRConfig, _config$SSRConfig$dis, _config$SSRConfig2;
+      this.ssrPlaceholderHandler = new SSRPlaceholderHandlers({
+        enablePageLayoutPlaceholder: (_config$SSRConfig$ena = (_config$SSRConfig = config.SSRConfig) === null || _config$SSRConfig === void 0 ? void 0 : _config$SSRConfig.enablePageLayoutPlaceholder) !== null && _config$SSRConfig$ena !== void 0 ? _config$SSRConfig$ena : false,
+        disableSizeAndPositionCheck: (_config$SSRConfig$dis = (_config$SSRConfig2 = config.SSRConfig) === null || _config$SSRConfig2 === void 0 ? void 0 : _config$SSRConfig2.disableSizeAndPositionCheck) !== null && _config$SSRConfig$dis !== void 0 ? _config$SSRConfig$dis : {
+          v: false,
+          h: false
+        }
+      });
+    }
     this.viewportObserver = new ViewportObserver({
       onChange: onChangeArg => {
         const {
@@ -51,7 +79,10 @@ export default class VCObserverNew {
             newValue: mutationData === null || mutationData === void 0 ? void 0 : mutationData.newValue
           }
         });
-      }
+      },
+      // Pass SSR context to ViewportObserver
+      getSSRState: () => this.getSSRState(),
+      getSSRPlaceholderHandler: () => this.getSSRPlaceholderHandler()
     });
     this.windowEventObserver = new WindowEventObserver({
       onEvent: ({
@@ -72,6 +103,14 @@ export default class VCObserverNew {
     startTime
   }) {
     var _this$viewportObserve, _window, _this$windowEventObse;
+    // Reset SSR state on start (matches old VCObserver behavior)
+    this.ssr = {
+      state: SSRState.normal,
+      reactRootElement: null,
+      // Reset to null (matches old VCObserver)
+      renderStart: -1,
+      renderStop: -1
+    };
     (_this$viewportObserve = this.viewportObserver) === null || _this$viewportObserve === void 0 ? void 0 : _this$viewportObserve.start();
     if ((_window = window) !== null && _window !== void 0 && _window.__SSR_ABORT_LISTENERS__ && fg('platform_ufo_vc_observer_new_ssr_abort_listener')) {
       const abortListeners = window.__SSR_ABORT_LISTENERS__;
@@ -97,6 +136,33 @@ export default class VCObserverNew {
     var _this$viewportObserve2, _this$windowEventObse2;
     (_this$viewportObserve2 = this.viewportObserver) === null || _this$viewportObserve2 === void 0 ? void 0 : _this$viewportObserve2.stop();
     (_this$windowEventObse2 = this.windowEventObserver) === null || _this$windowEventObse2 === void 0 ? void 0 : _this$windowEventObse2.stop();
+
+    // Clear SSR state on stop (matches old VCObserver behavior)
+    this.ssr.reactRootElement = null;
+  }
+
+  // SSR related methods
+  setReactRootElement(element) {
+    this.ssr.reactRootElement = element;
+  }
+  setReactRootRenderStart(startTime = performance.now()) {
+    this.ssr.renderStart = startTime;
+    this.ssr.state = SSRState.waitingForFirstRender;
+  }
+  setReactRootRenderStop(stopTime = performance.now()) {
+    this.ssr.renderStop = stopTime;
+  }
+  collectSSRPlaceholders() {
+    // This is handled by the shared SSRPlaceholderHandlers in VCObserverWrapper
+    // Individual observers don't need to implement this
+  }
+
+  // Internal methods for ViewportObserver to access SSR state
+  getSSRState() {
+    return this.ssr;
+  }
+  getSSRPlaceholderHandler() {
+    return this.ssrPlaceholderHandler;
   }
   addSSR(ssr) {
     this.entriesTimeline.push({

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

@@ -1,4 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { fg } from '@atlaskit/platform-feature-flags';
 import { isContainedWithinMediaWrapper } from '../../vc-observer/media-wrapper/vc-utils';
 import isNonVisualStyleMutation from '../../vc-observer/observers/non-visual-styles/is-non-visual-style-mutation';
 import { RLLPlaceholderHandlers } from '../../vc-observer/observers/rll-placeholders';
@@ -6,13 +7,14 @@ import { createIntersectionObserver } from './intersection-observer';
 import createMutationObserver from './mutation-observer';
 import createPerformanceObserver from './performance-observer';
 import { checkThirdPartySegmentWithIgnoreReason, createMutationTypeWithIgnoredReason } from './utils/get-component-name-and-child-props';
+import isInVCIgnoreIfNoLayoutShiftMarker from './utils/is-in-vc-ignore-if-no-layout-shift-marker';
 function isElementVisible(element) {
   if (!(element instanceof HTMLElement)) {
     return true;
   }
   try {
     const visible = element.checkVisibility({
-      // @ts-expect-error
+      // @ts-ignore - visibilityProperty may not exist in all TS environments
       visibilityProperty: true,
       contentVisibilityAuto: true,
       opacityProperty: true
@@ -36,21 +38,33 @@ function sameRectDimensions(a, b) {
   return a.width === b.width && a.height === b.height && a.x === b.x && a.y === b.y;
 }
 const createElementMutationsWatcher = removedNodeRects => ({
+  target,
   rect
 }) => {
+  const isNoLsMarkerEnabled = fg('platform_vc_ignore_no_ls_mutation_marker');
+  const isInIgnoreLsMarker = isInVCIgnoreIfNoLayoutShiftMarker(target);
+  if (!isInIgnoreLsMarker && isNoLsMarkerEnabled) {
+    return 'mutation:element';
+  }
   const isRLLPlaceholder = RLLPlaceholderHandlers.getInstance().isRLLPlaceholderHydration(rect);
-  if (isRLLPlaceholder) {
+  if (isRLLPlaceholder && (!isNoLsMarkerEnabled || isInIgnoreLsMarker)) {
     return 'mutation:rll-placeholder';
   }
   const wasDeleted = removedNodeRects.some(nr => sameRectDimensions(nr, rect));
-  if (wasDeleted) {
+  // When fg('platform_vc_ignore_no_ls_mutation_marker') is not enabled,
+  // no layout shift mutation is excluded as per existing fy25.03 logic
+  if (wasDeleted && (!isNoLsMarkerEnabled || isInIgnoreLsMarker)) {
     return 'mutation:element-replacement';
   }
   return 'mutation:element';
 };
 export default class ViewportObserver {
+  // SSR context functions
+
   constructor({
-    onChange
+    onChange,
+    getSSRState,
+    getSSRPlaceholderHandler
   }) {
     _defineProperty(this, "handleIntersectionEntry", ({
       target,
@@ -75,9 +89,11 @@ export default class ViewportObserver {
         mutationData
       });
     });
-    _defineProperty(this, "handleChildListMutation", ({
+    _defineProperty(this, "handleChildListMutation", async ({
+      target,
       addedNodes,
-      removedNodes
+      removedNodes,
+      timestamp
     }) => {
       const removedNodeRects = removedNodes.map(ref => {
         const n = ref.deref();
@@ -86,11 +102,66 @@ export default class ViewportObserver {
         }
         return this.mapVisibleNodeRects.get(n);
       });
-      addedNodes.forEach(addedNodeRef => {
-        var _this$intersectionObs4;
+      const targetNode = target.deref();
+      for (const addedNodeRef of addedNodes) {
+        var _this$intersectionObs8;
         const addedNode = addedNodeRef.deref();
         if (!addedNode) {
-          return;
+          continue;
+        }
+
+        // SSR hydration logic
+        if (this.getSSRState && fg('platform_ufo_vc_v3_ssr_placeholder')) {
+          const ssrState = this.getSSRState();
+          const SSRStateEnum = {
+            normal: 1,
+            waitingForFirstRender: 2,
+            ignoring: 3
+          };
+          if (ssrState.state === SSRStateEnum.waitingForFirstRender && timestamp > ssrState.renderStart && targetNode === ssrState.reactRootElement) {
+            var _this$intersectionObs;
+            ssrState.state = SSRStateEnum.ignoring;
+            if (ssrState.renderStop === -1) {
+              // arbitrary 500ms DOM update window
+              ssrState.renderStop = timestamp + 500;
+            }
+            (_this$intersectionObs = this.intersectionObserver) === null || _this$intersectionObs === void 0 ? void 0 : _this$intersectionObs.watchAndTag(addedNode, 'ssr-hydration');
+            continue;
+          }
+          if (ssrState.state === SSRStateEnum.ignoring && timestamp > ssrState.renderStart && targetNode === ssrState.reactRootElement) {
+            if (timestamp <= ssrState.renderStop) {
+              var _this$intersectionObs2;
+              (_this$intersectionObs2 = this.intersectionObserver) === null || _this$intersectionObs2 === void 0 ? void 0 : _this$intersectionObs2.watchAndTag(addedNode, 'ssr-hydration');
+              continue;
+            } else {
+              ssrState.state = SSRStateEnum.normal;
+            }
+          }
+        }
+
+        // SSR placeholder logic - check and handle with await
+        if (this.getSSRPlaceholderHandler && fg('platform_ufo_vc_v3_ssr_placeholder')) {
+          const ssrPlaceholderHandler = this.getSSRPlaceholderHandler();
+          if (ssrPlaceholderHandler) {
+            if (ssrPlaceholderHandler.isPlaceholder(addedNode) || ssrPlaceholderHandler.isPlaceholderIgnored(addedNode)) {
+              const result = await ssrPlaceholderHandler.checkIfExistedAndSizeMatching(addedNode);
+              if (result !== false) {
+                var _this$intersectionObs3;
+                (_this$intersectionObs3 = this.intersectionObserver) === null || _this$intersectionObs3 === void 0 ? void 0 : _this$intersectionObs3.watchAndTag(addedNode, 'mutation:ssr-placeholder');
+                continue;
+              }
+              // If result is false, continue to normal mutation logic below
+            }
+            if (ssrPlaceholderHandler.isPlaceholderReplacement(addedNode) || ssrPlaceholderHandler.isPlaceholderIgnored(addedNode)) {
+              const result = await ssrPlaceholderHandler.validateReactComponentMatchToPlaceholder(addedNode);
+              if (result !== false) {
+                var _this$intersectionObs4;
+                (_this$intersectionObs4 = this.intersectionObserver) === null || _this$intersectionObs4 === void 0 ? void 0 : _this$intersectionObs4.watchAndTag(addedNode, 'mutation:ssr-placeholder');
+                continue;
+              }
+              // If result is false, continue to normal mutation logic below
+            }
+          }
         }
         const sameDeletedNode = removedNodes.find(ref => {
           const n = ref.deref();
@@ -99,28 +170,33 @@ export default class ViewportObserver {
           }
           return n.isEqualNode(addedNode);
         });
-        if (sameDeletedNode) {
-          var _this$intersectionObs;
-          (_this$intersectionObs = this.intersectionObserver) === null || _this$intersectionObs === void 0 ? void 0 : _this$intersectionObs.watchAndTag(addedNode, 'mutation:remount');
-          return;
+        const isInIgnoreLsMarker = isInVCIgnoreIfNoLayoutShiftMarker(addedNode);
+        const isNoLsMarkerEnabled = fg('platform_vc_ignore_no_ls_mutation_marker');
+
+        // When fg('platform_vc_ignore_no_ls_mutation_marker') is not enabled,
+        // no layout shift mutation is excluded as per existing fy25.03 logic
+        if (sameDeletedNode && (!isNoLsMarkerEnabled || isInIgnoreLsMarker)) {
+          var _this$intersectionObs5;
+          (_this$intersectionObs5 = this.intersectionObserver) === null || _this$intersectionObs5 === void 0 ? void 0 : _this$intersectionObs5.watchAndTag(addedNode, 'mutation:remount');
+          continue;
         }
         if (isContainedWithinMediaWrapper(addedNode)) {
-          var _this$intersectionObs2;
-          (_this$intersectionObs2 = this.intersectionObserver) === null || _this$intersectionObs2 === void 0 ? void 0 : _this$intersectionObs2.watchAndTag(addedNode, 'mutation:media');
-          return;
+          var _this$intersectionObs6;
+          (_this$intersectionObs6 = this.intersectionObserver) === null || _this$intersectionObs6 === void 0 ? void 0 : _this$intersectionObs6.watchAndTag(addedNode, 'mutation:media');
+          continue;
         }
         const {
           isWithinThirdPartySegment,
           ignoredReason
         } = checkThirdPartySegmentWithIgnoreReason(addedNode);
         if (isWithinThirdPartySegment) {
-          var _this$intersectionObs3;
+          var _this$intersectionObs7;
           const assignedReason = createMutationTypeWithIgnoredReason(ignoredReason || 'third-party-element');
-          (_this$intersectionObs3 = this.intersectionObserver) === null || _this$intersectionObs3 === void 0 ? void 0 : _this$intersectionObs3.watchAndTag(addedNode, assignedReason);
-          return;
+          (_this$intersectionObs7 = this.intersectionObserver) === null || _this$intersectionObs7 === void 0 ? void 0 : _this$intersectionObs7.watchAndTag(addedNode, assignedReason);
+          continue;
         }
-        (_this$intersectionObs4 = this.intersectionObserver) === null || _this$intersectionObs4 === void 0 ? void 0 : _this$intersectionObs4.watchAndTag(addedNode, createElementMutationsWatcher(removedNodeRects));
-      });
+        (_this$intersectionObs8 = this.intersectionObserver) === null || _this$intersectionObs8 === void 0 ? void 0 : _this$intersectionObs8.watchAndTag(addedNode, createElementMutationsWatcher(removedNodeRects));
+      }
     });
     _defineProperty(this, "handleAttributeMutation", ({
       target,
@@ -128,8 +204,8 @@ export default class ViewportObserver {
       oldValue,
       newValue
     }) => {
-      var _this$intersectionObs5;
-      (_this$intersectionObs5 = this.intersectionObserver) === null || _this$intersectionObs5 === void 0 ? void 0 : _this$intersectionObs5.watchAndTag(target, ({
+      var _this$intersectionObs9;
+      (_this$intersectionObs9 = this.intersectionObserver) === null || _this$intersectionObs9 === void 0 ? void 0 : _this$intersectionObs9.watchAndTag(target, ({
         target,
         rect
       }) => {
@@ -228,6 +304,10 @@ export default class ViewportObserver {
     this.intersectionObserver = null;
     this.mutationObserver = null;
     this.performanceObserver = null;
+
+    // Initialize SSR context functions
+    this.getSSRState = getSSRState;
+    this.getSSRPlaceholderHandler = getSSRPlaceholderHandler;
   }
   initializeObservers() {
     if (this.isStarted) {
@@ -265,12 +345,12 @@ export default class ViewportObserver {
     this.isStarted = true;
   }
   stop() {
-    var _this$mutationObserve2, _this$intersectionObs6, _this$performanceObse2;
+    var _this$mutationObserve2, _this$intersectionObs0, _this$performanceObse2;
     if (!this.isStarted) {
       return;
     }
     (_this$mutationObserve2 = this.mutationObserver) === null || _this$mutationObserve2 === void 0 ? void 0 : _this$mutationObserve2.disconnect();
-    (_this$intersectionObs6 = this.intersectionObserver) === null || _this$intersectionObs6 === void 0 ? void 0 : _this$intersectionObs6.disconnect();
+    (_this$intersectionObs0 = this.intersectionObserver) === null || _this$intersectionObs0 === void 0 ? void 0 : _this$intersectionObs0.disconnect();
     (_this$performanceObse2 = this.performanceObserver) === null || _this$performanceObse2 === void 0 ? void 0 : _this$performanceObse2.disconnect();
     this.isStarted = false;
   }

package/dist/es2019/vc/vc-observer-new/viewport-observer/mutation-observer/index.js

@@ -1,3 +1,5 @@
+// Batched mutation data for performance optimization
+
 function createMutationObserver({
   onAttributeMutation,
   onChildListMutation,
@@ -7,9 +9,10 @@ function createMutationObserver({
     return null;
   }
   const mutationObserverCallback = mutations => {
-    const addedNodes = [];
-    const removedNodes = [];
     const targets = [];
+    // Use nested Maps for O(1) batching performance
+    // Short-lived Maps are safe since they're discarded after each callback
+    const batchedMutations = new Map();
     for (const mut of mutations) {
       if (!(mut.target instanceof HTMLElement)) {
         continue;
@@ -38,23 +41,56 @@ function createMutationObserver({
         continue;
       } else if (mut.type === 'childList') {
         var _mut$addedNodes, _mut$removedNodes;
+        // In chromium browser MutationRecord has timestamp field, which we should use.
+        const timestamp = Math.round(mut.timestamp || performance.now());
+
+        // Get or create timestamp bucket
+        let timestampBucket = batchedMutations.get(timestamp);
+        if (!timestampBucket) {
+          timestampBucket = new Map();
+          batchedMutations.set(timestamp, timestampBucket);
+        }
+
+        // Get or create target batch within timestamp bucket
+        let batch = timestampBucket.get(mut.target);
+        if (!batch) {
+          batch = {
+            target: new WeakRef(mut.target),
+            addedNodes: [],
+            removedNodes: [],
+            timestamp
+          };
+          timestampBucket.set(mut.target, batch);
+        }
+
+        // Accumulate added nodes
         ((_mut$addedNodes = mut.addedNodes) !== null && _mut$addedNodes !== void 0 ? _mut$addedNodes : []).forEach(node => {
           if (node instanceof HTMLElement) {
-            addedNodes.push(new WeakRef(node));
+            batch.addedNodes.push(new WeakRef(node));
           }
         });
+
+        // Accumulate removed nodes
         ((_mut$removedNodes = mut.removedNodes) !== null && _mut$removedNodes !== void 0 ? _mut$removedNodes : []).forEach(node => {
           if (node instanceof HTMLElement) {
-            removedNodes.push(new WeakRef(node));
+            batch.removedNodes.push(new WeakRef(node));
           }
         });
       }
       targets.push(mut.target);
     }
-    onChildListMutation({
-      addedNodes,
-      removedNodes
-    });
+
+    // Process all batched childList mutations
+    for (const timestampBucket of batchedMutations.values()) {
+      for (const batch of timestampBucket.values()) {
+        onChildListMutation({
+          target: batch.target,
+          addedNodes: batch.addedNodes,
+          removedNodes: batch.removedNodes,
+          timestamp: batch.timestamp
+        });
+      }
+    }
     onMutationFinished === null || onMutationFinished === void 0 ? void 0 : onMutationFinished({
       targets
     });

package/dist/es2019/vc/vc-observer-new/viewport-observer/utils/is-in-vc-ignore-if-no-layout-shift-marker.js

@@ -0,0 +1,11 @@
+/**
+ * Check if the element is in the VC ignore if no layout shift marker.
+ * @param element - The element to check.
+ * @returns True if the element has the data-vc-ignore-if-no-layout-shift attribute == 'true or its parent has it, false otherwise.
+ */
+export default function isInVCIgnoreIfNoLayoutShiftMarker(element) {
+  if (!element) {
+    return false;
+  }
+  return element.getAttribute('data-vc-ignore-if-no-layout-shift') === 'true' || isInVCIgnoreIfNoLayoutShiftMarker(element.parentElement);
+}