@atlaskit/react-ufo 3.14.6 → 3.14.7

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

@@ -14,7 +14,7 @@ function isElementVisible(element) {
   }
   try {
     const visible = element.checkVisibility({
-      // @ts-expect-error
+      // @ts-ignore - visibilityProperty may not exist in all TS environments
       visibilityProperty: true,
       contentVisibilityAuto: true,
       opacityProperty: true
@@ -59,8 +59,12 @@ const createElementMutationsWatcher = removedNodeRects => ({
   return 'mutation:element';
 };
 export default class ViewportObserver {
+  // SSR context functions
+
   constructor({
-    onChange
+    onChange,
+    getSSRState,
+    getSSRPlaceholderHandler
   }) {
     _defineProperty(this, "handleIntersectionEntry", ({
       target,
@@ -85,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();
@@ -96,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();
@@ -115,27 +176,27 @@ export default class ViewportObserver {
         // 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$intersectionObs;
-          (_this$intersectionObs = this.intersectionObserver) === null || _this$intersectionObs === void 0 ? void 0 : _this$intersectionObs.watchAndTag(addedNode, 'mutation:remount');
-          return;
+          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,
@@ -143,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
       }) => {
@@ -243,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) {
@@ -280,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,4 +1,5 @@
-import { fg } from '@atlaskit/platform-feature-flags';
+// Batched mutation data for performance optimization
+
 function createMutationObserver({
   onAttributeMutation,
   onChildListMutation,
@@ -8,10 +9,10 @@ function createMutationObserver({
     return null;
   }
   const mutationObserverCallback = mutations => {
-    const addedNodes = [];
-    const removedNodes = [];
-    const attributeMutations = [];
     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;
@@ -29,51 +30,66 @@ function createMutationObserver({
         const oldValue = (_mut$oldValue = mut.oldValue) !== null && _mut$oldValue !== void 0 ? _mut$oldValue : undefined;
         const newValue = mut.attributeName ? mut.target.getAttribute(mut.attributeName) : undefined;
         if (oldValue !== newValue) {
-          if (fg('platform_vc_ignore_no_ls_mutation_marker')) {
-            var _mut$attributeName;
-            attributeMutations.push({
-              target: new WeakRef(mut.target),
-              attributeName: (_mut$attributeName = mut.attributeName) !== null && _mut$attributeName !== void 0 ? _mut$attributeName : 'unknown',
-              oldValue,
-              newValue
-            });
-          } else {
-            var _mut$attributeName2;
-            onAttributeMutation({
-              target: mut.target,
-              attributeName: (_mut$attributeName2 = mut.attributeName) !== null && _mut$attributeName2 !== void 0 ? _mut$attributeName2 : 'unknown',
-              oldValue,
-              newValue
-            });
-          }
+          var _mut$attributeName;
+          onAttributeMutation({
+            target: mut.target,
+            attributeName: (_mut$attributeName = mut.attributeName) !== null && _mut$attributeName !== void 0 ? _mut$attributeName : 'unknown',
+            oldValue,
+            newValue
+          });
         }
         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
-    });
-    for (const mut of attributeMutations) {
-      onAttributeMutation({
-        target: mut.target.deref(),
-        attributeName: mut.attributeName,
-        oldValue: mut.oldValue,
-        newValue: mut.newValue
-      });
+
+    // 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/esm/vc/index.js

@@ -1,6 +1,6 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 var _process;
@@ -12,19 +12,42 @@ import { VCObserverNOOP } from './no-op-vc-observer';
 import { VCObserver } from './vc-observer';
 import VCObserverNew from './vc-observer-new';
 import { RLLPlaceholderHandlers } from './vc-observer/observers/rll-placeholders';
+import { SSRPlaceholderHandlers } from './vc-observer/observers/ssr-placeholders';
 export var VCObserverWrapper = /*#__PURE__*/function () {
   function VCObserverWrapper() {
+    var _opts$ssrEnablePageLa, _opts$disableSizeAndP;
     var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     _classCallCheck(this, VCObserverWrapper);
     this.newVCObserver = null;
     this.oldVCObserver = null;
+
+    // Initialize SSR placeholder handler once
+    this.ssrPlaceholderHandler = new SSRPlaceholderHandlers({
+      enablePageLayoutPlaceholder: (_opts$ssrEnablePageLa = opts.ssrEnablePageLayoutPlaceholder) !== null && _opts$ssrEnablePageLa !== void 0 ? _opts$ssrEnablePageLa : false,
+      disableSizeAndPositionCheck: (_opts$disableSizeAndP = opts.disableSizeAndPositionCheck) !== null && _opts$disableSizeAndP !== void 0 ? _opts$disableSizeAndP : {
+        v: false,
+        h: false
+      }
+    });
     if (isVCRevisionEnabled('fy25.03')) {
+      var _opts$ssrEnablePageLa2, _opts$disableSizeAndP2;
       this.newVCObserver = new VCObserverNew({
-        selectorConfig: opts.selectorConfig
+        selectorConfig: opts.selectorConfig,
+        isPostInteraction: opts.isPostInteraction,
+        SSRConfig: {
+          enablePageLayoutPlaceholder: (_opts$ssrEnablePageLa2 = opts.ssrEnablePageLayoutPlaceholder) !== null && _opts$ssrEnablePageLa2 !== void 0 ? _opts$ssrEnablePageLa2 : false,
+          disableSizeAndPositionCheck: (_opts$disableSizeAndP2 = opts.disableSizeAndPositionCheck) !== null && _opts$disableSizeAndP2 !== void 0 ? _opts$disableSizeAndP2 : {
+            v: false,
+            h: false
+          }
+        },
+        ssrPlaceholderHandler: this.ssrPlaceholderHandler
       });
     }
     if (isVCRevisionEnabled('fy25.01') || isVCRevisionEnabled('fy25.02')) {
-      this.oldVCObserver = new VCObserver(opts);
+      this.oldVCObserver = new VCObserver(_objectSpread(_objectSpread({}, opts), {}, {
+        ssrPlaceholderHandler: this.ssrPlaceholderHandler
+      }));
     }
   }
 
@@ -83,6 +106,8 @@ export var VCObserverWrapper = /*#__PURE__*/function () {
         (_this$newVCObserver2 = this.newVCObserver) === null || _this$newVCObserver2 === void 0 || _this$newVCObserver2.stop();
       }
       RLLPlaceholderHandlers.getInstance().reset();
+      // Clear shared SSR placeholder handler
+      this.ssrPlaceholderHandler.clear();
     }
   }, {
     key: "getVCRawData",
@@ -156,20 +181,28 @@ export var VCObserverWrapper = /*#__PURE__*/function () {
   }, {
     key: "setSSRElement",
     value: function setSSRElement(element) {
-      var _this$oldVCObserver5;
+      var _this$oldVCObserver5, _this$newVCObserver4;
       (_this$oldVCObserver5 = this.oldVCObserver) === null || _this$oldVCObserver5 === void 0 || _this$oldVCObserver5.setSSRElement(element);
+      (_this$newVCObserver4 = this.newVCObserver) === null || _this$newVCObserver4 === void 0 || _this$newVCObserver4.setReactRootElement(element);
     }
   }, {
     key: "setReactRootRenderStart",
     value: function setReactRootRenderStart(startTime) {
-      var _this$oldVCObserver6;
+      var _this$oldVCObserver6, _this$newVCObserver5;
       (_this$oldVCObserver6 = this.oldVCObserver) === null || _this$oldVCObserver6 === void 0 || _this$oldVCObserver6.setReactRootRenderStart(startTime || performance.now());
+      (_this$newVCObserver5 = this.newVCObserver) === null || _this$newVCObserver5 === void 0 || _this$newVCObserver5.setReactRootRenderStart(startTime || performance.now());
     }
   }, {
     key: "setReactRootRenderStop",
     value: function setReactRootRenderStop(stopTime) {
-      var _this$oldVCObserver7;
+      var _this$oldVCObserver7, _this$newVCObserver6;
       (_this$oldVCObserver7 = this.oldVCObserver) === null || _this$oldVCObserver7 === void 0 || _this$oldVCObserver7.setReactRootRenderStop(stopTime || performance.now());
+      (_this$newVCObserver6 = this.newVCObserver) === null || _this$newVCObserver6 === void 0 || _this$newVCObserver6.setReactRootRenderStop(stopTime || performance.now());
+    }
+  }, {
+    key: "collectSSRPlaceholders",
+    value: function collectSSRPlaceholders() {
+      this.ssrPlaceholderHandler.collectExistingPlaceholders();
     }
   }]);
 }();

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

@@ -448,7 +448,8 @@ export var VCObserver = /*#__PURE__*/function () {
     this.devToolsEnabled = options.devToolsEnabled || false;
     this.oldDomUpdatesEnabled = options.oldDomUpdates || false;
     var ssrEnablePageLayoutPlaceholder = options.ssrEnablePageLayoutPlaceholder,
-      disableSizeAndPositionCheck = options.disableSizeAndPositionCheck;
+      disableSizeAndPositionCheck = options.disableSizeAndPositionCheck,
+      ssrPlaceholderHandler = options.ssrPlaceholderHandler;
     this.observers = new Observers({
       selectorConfig: options.selectorConfig || {
         id: false,
@@ -460,7 +461,8 @@ export var VCObserver = /*#__PURE__*/function () {
       SSRConfig: {
         enablePageLayoutPlaceholder: ssrEnablePageLayoutPlaceholder || false,
         disableSizeAndPositionCheck: disableSizeAndPositionCheck
-      }
+      },
+      ssrPlaceholderHandler: ssrPlaceholderHandler
     });
     this.heatmap = !isVCRevisionEnabled('fy25.01') ? [] : this.getCleanHeatmap();
     this.heatmapNext = this.getCleanHeatmap();
@@ -520,6 +522,12 @@ export var VCObserver = /*#__PURE__*/function () {
       var stopTime = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : performance.now();
       this.observers.setReactRootRenderStop(stopTime);
     }
+  }, {
+    key: "collectSSRPlaceholders",
+    value: function collectSSRPlaceholders() {
+      // This is handled by the shared SSRPlaceholderHandlers in VCObserverWrapper
+      // Individual observers don't need to implement this
+    }
   }, {
     key: "setAbortReason",
     value: function setAbortReason(abort, timestamp) {