@atlaskit/react-ufo 3.14.6 → 3.14.8

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

@@ -4,10 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+// Batched mutation data for performance optimization
+
 function createMutationObserver(_ref) {
   var onAttributeMutation = _ref.onAttributeMutation,
     onChildListMutation = _ref.onChildListMutation,
@@ -16,82 +17,119 @@ function createMutationObserver(_ref) {
     return null;
   }
   var mutationObserverCallback = function mutationObserverCallback(mutations) {
-    var addedNodes = [];
-    var removedNodes = [];
-    var attributeMutations = [];
     var targets = [];
+    // Use nested Maps for O(1) batching performance
+    // Short-lived Maps are safe since they're discarded after each callback
+    var batchedMutations = new Map();
     var _iterator = _createForOfIteratorHelper(mutations),
       _step;
     try {
-      for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        var _mut = _step.value;
-        if (!(_mut.target instanceof HTMLElement)) {
-          continue;
-        }
-        if (_mut.type === 'attributes') {
-          var _mut$oldValue;
-          /*
-          			"MutationObserver was explicitly designed to work that way, but I can't now recall the reasoning.
-          			I think it might have been something along the lines that for consistency every setAttribute call should create a record.
-          			Conceptually there is after all a mutation: there is an old value replaced with a new one,
-          			and whether or not they are the same doesn't really matter.
-          			And Custom elements should work the same way as MutationObserver."
-          			https://github.com/whatwg/dom/issues/520#issuecomment-336574796
-          		*/
-          var oldValue = (_mut$oldValue = _mut.oldValue) !== null && _mut$oldValue !== void 0 ? _mut$oldValue : undefined;
-          var newValue = _mut.attributeName ? _mut.target.getAttribute(_mut.attributeName) : undefined;
-          if (oldValue !== newValue) {
-            if ((0, _platformFeatureFlags.fg)('platform_vc_ignore_no_ls_mutation_marker')) {
+      var _loop = function _loop() {
+          var mut = _step.value;
+          if (!(mut.target instanceof HTMLElement)) {
+            return 0; // continue
+          }
+          if (mut.type === 'attributes') {
+            var _mut$oldValue;
+            /*
+            			"MutationObserver was explicitly designed to work that way, but I can't now recall the reasoning.
+            			I think it might have been something along the lines that for consistency every setAttribute call should create a record.
+            			Conceptually there is after all a mutation: there is an old value replaced with a new one,
+            			and whether or not they are the same doesn't really matter.
+            			And Custom elements should work the same way as MutationObserver."
+            			https://github.com/whatwg/dom/issues/520#issuecomment-336574796
+            		*/
+            var oldValue = (_mut$oldValue = mut.oldValue) !== null && _mut$oldValue !== void 0 ? _mut$oldValue : undefined;
+            var newValue = mut.attributeName ? mut.target.getAttribute(mut.attributeName) : undefined;
+            if (oldValue !== newValue) {
               var _mut$attributeName;
-              attributeMutations.push({
-                target: new WeakRef(_mut.target),
-                attributeName: (_mut$attributeName = _mut.attributeName) !== null && _mut$attributeName !== void 0 ? _mut$attributeName : 'unknown',
-                oldValue: oldValue,
-                newValue: newValue
-              });
-            } else {
-              var _mut$attributeName2;
               onAttributeMutation({
-                target: _mut.target,
-                attributeName: (_mut$attributeName2 = _mut.attributeName) !== null && _mut$attributeName2 !== void 0 ? _mut$attributeName2 : 'unknown',
+                target: mut.target,
+                attributeName: (_mut$attributeName = mut.attributeName) !== null && _mut$attributeName !== void 0 ? _mut$attributeName : 'unknown',
                 oldValue: oldValue,
                 newValue: newValue
               });
             }
-          }
-          continue;
-        } else if (_mut.type === 'childList') {
-          var _mut$addedNodes, _mut$removedNodes;
-          ((_mut$addedNodes = _mut.addedNodes) !== null && _mut$addedNodes !== void 0 ? _mut$addedNodes : []).forEach(function (node) {
-            if (node instanceof HTMLElement) {
-              addedNodes.push(new WeakRef(node));
+            return 0; // continue
+          } else if (mut.type === 'childList') {
+            var _mut$addedNodes, _mut$removedNodes;
+            // In chromium browser MutationRecord has timestamp field, which we should use.
+            var timestamp = Math.round(mut.timestamp || performance.now());
+
+            // Get or create timestamp bucket
+            var timestampBucket = batchedMutations.get(timestamp);
+            if (!timestampBucket) {
+              timestampBucket = new Map();
+              batchedMutations.set(timestamp, timestampBucket);
             }
-          });
-          ((_mut$removedNodes = _mut.removedNodes) !== null && _mut$removedNodes !== void 0 ? _mut$removedNodes : []).forEach(function (node) {
-            if (node instanceof HTMLElement) {
-              removedNodes.push(new WeakRef(node));
+
+            // Get or create target batch within timestamp bucket
+            var batch = timestampBucket.get(mut.target);
+            if (!batch) {
+              batch = {
+                target: new WeakRef(mut.target),
+                addedNodes: [],
+                removedNodes: [],
+                timestamp: timestamp
+              };
+              timestampBucket.set(mut.target, batch);
             }
-          });
-        }
-        targets.push(_mut.target);
+
+            // Accumulate added nodes
+            ((_mut$addedNodes = mut.addedNodes) !== null && _mut$addedNodes !== void 0 ? _mut$addedNodes : []).forEach(function (node) {
+              if (node instanceof HTMLElement) {
+                batch.addedNodes.push(new WeakRef(node));
+              }
+            });
+
+            // Accumulate removed nodes
+            ((_mut$removedNodes = mut.removedNodes) !== null && _mut$removedNodes !== void 0 ? _mut$removedNodes : []).forEach(function (node) {
+              if (node instanceof HTMLElement) {
+                batch.removedNodes.push(new WeakRef(node));
+              }
+            });
+          }
+          targets.push(mut.target);
+        },
+        _ret;
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        _ret = _loop();
+        if (_ret === 0) continue;
       }
+
+      // Process all batched childList mutations
     } catch (err) {
       _iterator.e(err);
     } finally {
       _iterator.f();
     }
-    onChildListMutation({
-      addedNodes: addedNodes,
-      removedNodes: removedNodes
-    });
-    for (var _i = 0, _attributeMutations = attributeMutations; _i < _attributeMutations.length; _i++) {
-      var mut = _attributeMutations[_i];
-      onAttributeMutation({
-        target: mut.target.deref(),
-        attributeName: mut.attributeName,
-        oldValue: mut.oldValue,
-        newValue: mut.newValue
-      });
+    var _iterator2 = _createForOfIteratorHelper(batchedMutations.values()),
+      _step2;
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var timestampBucket = _step2.value;
+        var _iterator3 = _createForOfIteratorHelper(timestampBucket.values()),
+          _step3;
+        try {
+          for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+            var batch = _step3.value;
+            onChildListMutation({
+              target: batch.target,
+              addedNodes: batch.addedNodes,
+              removedNodes: batch.removedNodes,
+              timestamp: batch.timestamp
+            });
+          }
+        } catch (err) {
+          _iterator3.e(err);
+        } finally {
+          _iterator3.f();
+        }
+      }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
     }
     onMutationFinished === null || onMutationFinished === void 0 || onMutationFinished({
       targets: targets

package/dist/es2019/create-experimental-interaction-metrics-payload/index.js

@@ -58,10 +58,12 @@ export class ExperimentalVCMetrics {
 }
 export const experimentalVC = new ExperimentalVCMetrics();
 export async function getExperimentalVCMetrics(interaction) {
-  if (experimentalVC.vcObserver) {
+  // Use per-interaction VC observer if available, otherwise fall back to global experimentalVC
+  const vcObserver = interaction.experimentalVCObserver || experimentalVC.vcObserver;
+  if (vcObserver) {
     var _interaction$apdex, _interaction$apdex$;
     const prefix = 'ufo-experimental';
-    const result = await experimentalVC.vcObserver.getVCResult({
+    const result = await vcObserver.getVCResult({
       start: interaction.start,
       stop: interaction.end,
       tti: (_interaction$apdex = interaction.apdex) === null || _interaction$apdex === void 0 ? void 0 : (_interaction$apdex$ = _interaction$apdex[0]) === null || _interaction$apdex$ === void 0 ? void 0 : _interaction$apdex$.stopTime,

package/dist/es2019/create-payload/utils/get-vc-metrics.js

@@ -11,7 +11,7 @@ async function getVCMetrics(interaction) {
   if (!(config !== null && config !== void 0 && (_config$vc = config.vc) !== null && _config$vc !== void 0 && _config$vc.enabled)) {
     return {};
   }
-  if (fg('platform_ufo_enable_interactions_vc') || fg('platform_ufo_enable_interactivity_jsm')) {
+  if (fg('platform_ufo_enable_vc_press_interactions')) {
     if (interaction.type !== 'page_load' && interaction.type !== 'transition' && interaction.type !== 'press') {
       return {};
     }
@@ -23,8 +23,11 @@ async function getVCMetrics(interaction) {
   const interactionStatus = getInteractionStatus(interaction);
   const pageVisibilityUpToTTAI = getPageVisibilityUpToTTAI(interaction);
   const shouldReportVCMetrics = interactionStatus.originalInteractionStatus === 'SUCCEEDED' && pageVisibilityUpToTTAI === 'visible';
+
+  // Use per-interaction VC observer if available, otherwise fall back to global
+  const observer = interaction.vcObserver || getVCObserver();
   if (!shouldReportVCMetrics && fg('platform_ufo_no_vc_on_aborted')) {
-    getVCObserver().stop(interaction.ufoName);
+    observer.stop(interaction.ufoName);
     return {};
   }
   const isSSREnabled = interaction.type === 'page_load' && ((config === null || config === void 0 ? void 0 : config.ssr) || (config === null || config === void 0 ? void 0 : (_config$vc$ssrWhiteli = config.vc.ssrWhitelist) === null || _config$vc$ssrWhiteli === void 0 ? void 0 : _config$vc$ssrWhiteli.includes(interaction.ufoName)));
@@ -34,7 +37,7 @@ async function getVCMetrics(interaction) {
   postInteractionLog.setVCObserverSSRConfig(ssr);
   const tti = (_interaction$apdex = interaction.apdex) === null || _interaction$apdex === void 0 ? void 0 : (_interaction$apdex$ = _interaction$apdex[0]) === null || _interaction$apdex$ === void 0 ? void 0 : _interaction$apdex$.stopTime;
   const prefix = 'ufo';
-  const result = await getVCObserver().getVCResult({
+  const result = await observer.getVCResult({
     start: interaction.start,
     stop: interaction.end,
     tti,
@@ -47,8 +50,11 @@ async function getVCMetrics(interaction) {
     includeSSRRatio: (_config$vc3 = config.vc) === null || _config$vc3 === void 0 ? void 0 : _config$vc3.includeSSRRatio,
     ...ssr
   });
+  if (fg('platform_ufo_enable_vc_observer_per_interaction')) {
+    observer.stop(interaction.ufoName);
+  }
   if ((_config$experimentalI = config.experimentalInteractionMetrics) !== null && _config$experimentalI !== void 0 && _config$experimentalI.enabled) {
-    getVCObserver().stop(interaction.ufoName);
+    observer.stop(interaction.ufoName);
   }
   postInteractionLog.setLastInteractionFinishVCResult(result);
   const mostRecentVCRevision = getMostRecentVCRevision(interaction.ufoName);

package/dist/es2019/interaction-metrics/index.js

@@ -6,7 +6,7 @@ import { experimentalVC, getExperimentalVCMetrics, onExperimentalInteractionComp
 import { clearActiveTrace } from '../experience-trace-id-context';
 import { allFeatureFlagsAccessed, currentFeatureFlagsAccessed } from '../feature-flags-accessed';
 import { getInteractionId } from '../interaction-id-context';
-import { getVCObserver } from '../vc';
+import { getVCObserver, newVCObserver } from '../vc';
 import { interactions } from './common/constants';
 import PostInteractionLog from './post-interaction-log';
 const PreviousInteractionLog = {
@@ -487,7 +487,9 @@ function finishInteraction(id, data, endTime = performance.now()) {
   clearActiveTrace();
   callCleanUpCallbacks(data);
   if ((_getConfig4 = getConfig()) !== null && _getConfig4 !== void 0 && (_getConfig4$vc = _getConfig4.vc) !== null && _getConfig4$vc !== void 0 && _getConfig4$vc.stopVCAtInteractionFinish) {
-    data.vc = getVCObserver().getVCRawData();
+    // Use per-interaction VC observer if available, otherwise fall back to global
+    const observer = data.vcObserver || getVCObserver();
+    data.vc = observer.getVCRawData();
   }
   if (!((_getConfig5 = getConfig()) !== null && _getConfig5 !== void 0 && (_getConfig5$experimen = _getConfig5.experimentalInteractionMetrics) !== null && _getConfig5$experimen !== void 0 && _getConfig5$experimen.enabled)) {
     remove(id);
@@ -656,6 +658,7 @@ export function addNewInteraction(interactionId, ufoName, type, startTime, rate,
   if ((_getConfig11 = getConfig()) !== null && _getConfig11 !== void 0 && (_getConfig11$postInte = _getConfig11.postInteractionLog) !== null && _getConfig11$postInte !== void 0 && _getConfig11$postInte.enabled) {
     postInteractionLog.reset();
   }
+  let vcObserver;
   let previousTime = startTime;
   let timeoutTime = fg('platform_ufo_enable_timeout_config') ? getInteractionTimeout(ufoName) : CLEANUP_TIMEOUT;
   const timerID = setTimeout(() => {
@@ -678,6 +681,21 @@ export function addNewInteraction(interactionId, ufoName, type, startTime, rate,
     this.timerID = newTimerID;
   }
   const addFeatureFlagsToInteraction = coinflip(getCapabilityRate('feature_flag_access'));
+  const config = getConfig();
+  if (config && config.vc) {
+    const vcOptions = {
+      heatmapSize: config.vc.heatmapSize,
+      oldDomUpdates: config.vc.oldDomUpdates,
+      devToolsEnabled: config.vc.devToolsEnabled,
+      selectorConfig: config.vc.selectorConfig,
+      ssrEnablePageLayoutPlaceholder: config.vc.ssrEnablePageLayoutPlaceholder,
+      disableSizeAndPositionCheck: config.vc.disableSizeAndPositionCheck
+    };
+    vcObserver = fg('platform_ufo_enable_vc_observer_per_interaction') ? newVCObserver(vcOptions) : undefined;
+  }
+
+  // Create per-interaction VC observer when feature flag is enabled
+
   const metrics = {
     id: interactionId,
     start: startTime,
@@ -718,7 +736,8 @@ export function addNewInteraction(interactionId, ufoName, type, startTime, rate,
     redirects: [],
     timerID,
     changeTimeout,
-    trace
+    trace,
+    vcObserver
   };
   if (addFeatureFlagsToInteraction) {
     currentFeatureFlagsAccessed.clear();
@@ -737,13 +756,21 @@ export function addNewInteraction(interactionId, ufoName, type, startTime, rate,
   metrics.cleanupCallbacks.push(() => {
     clearTimeout(metrics.timerID);
   });
+  // Add cleanup for per-interaction VC observer
+  if (vcObserver) {
+    metrics.cleanupCallbacks.push(() => {
+      vcObserver.stop(ufoName);
+    });
+  }
   const awaitBM3TTIList = getAwaitBM3TTIList();
   if (awaitBM3TTIList.includes(ufoName)) {
     addHoldByID(interactionId, [], ufoName, ufoName, true);
   }
-  if (type === 'transition') {
+  if (type === 'transition' || type === 'page_load') {
     var _getConfig12, _getConfig12$experime;
-    getVCObserver().start({
+    // Use per-interaction VC observer if available, otherwise fall back to global
+    const observer = vcObserver || getVCObserver();
+    observer.start({
       startTime,
       experienceKey: ufoName
     });
@@ -756,20 +783,13 @@ export function addNewInteraction(interactionId, ufoName, type, startTime, rate,
       });
     }
   }
-  if (type === 'press' && (fg('platform_ufo_enable_interactions_vc') || fg('platform_ufo_enable_interactivity_jsm'))) {
-    var _getConfig13, _getConfig13$experime;
-    getVCObserver().start({
+  if (type === 'press' && fg('platform_ufo_enable_vc_press_interactions')) {
+    // Use per-interaction VC observer if available, otherwise fall back to global
+    const observer = vcObserver || getVCObserver();
+    observer.start({
       startTime,
       experienceKey: ufoName
     });
-    postInteractionLog.startVCObserver({
-      startTime
-    });
-    if ((_getConfig13 = getConfig()) !== null && _getConfig13 !== void 0 && (_getConfig13$experime = _getConfig13.experimentalInteractionMetrics) !== null && _getConfig13$experime !== void 0 && _getConfig13$experime.enabled) {
-      experimentalVC.start({
-        startTime
-      });
-    }
   }
 }
 export function addBrowserMetricEvent(event) {

package/dist/es2019/interaction-metrics-init/index.js

@@ -91,9 +91,11 @@ export function init(analyticsWebClientAsync, config) {
       ssrEnablePageLayoutPlaceholder: config.vc.ssrEnablePageLayoutPlaceholder,
       disableSizeAndPositionCheck: config.vc.disableSizeAndPositionCheck
     };
-    getVCObserver(vcOptions).start({
-      startTime: 0
-    });
+    if (!fg('platform_ufo_enable_vc_observer_per_interaction')) {
+      getVCObserver(vcOptions).start({
+        startTime: 0
+      });
+    }
     postInteractionLog.initializeVCObserver(vcOptions);
     postInteractionLog.startVCObserver({
       startTime: 0

package/dist/es2019/vc/index.js

@@ -4,17 +4,41 @@ 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 class VCObserverWrapper {
   constructor(opts = {}) {
+    var _opts$ssrEnablePageLa, _opts$disableSizeAndP;
     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({
+        ...opts,
+        ssrPlaceholderHandler: this.ssrPlaceholderHandler
+      });
     }
   }
 
@@ -68,6 +92,8 @@ export class VCObserverWrapper {
       (_this$newVCObserver2 = this.newVCObserver) === null || _this$newVCObserver2 === void 0 ? void 0 : _this$newVCObserver2.stop();
     }
     RLLPlaceholderHandlers.getInstance().reset();
+    // Clear shared SSR placeholder handler
+    this.ssrPlaceholderHandler.clear();
   }
   getVCRawData() {
     var _this$oldVCObserver$g, _this$oldVCObserver3;
@@ -94,16 +120,22 @@ export class VCObserverWrapper {
     };
   }
   setSSRElement(element) {
-    var _this$oldVCObserver5;
+    var _this$oldVCObserver5, _this$newVCObserver4;
     (_this$oldVCObserver5 = this.oldVCObserver) === null || _this$oldVCObserver5 === void 0 ? void 0 : _this$oldVCObserver5.setSSRElement(element);
+    (_this$newVCObserver4 = this.newVCObserver) === null || _this$newVCObserver4 === void 0 ? void 0 : _this$newVCObserver4.setReactRootElement(element);
   }
   setReactRootRenderStart(startTime) {
-    var _this$oldVCObserver6;
+    var _this$oldVCObserver6, _this$newVCObserver5;
     (_this$oldVCObserver6 = this.oldVCObserver) === null || _this$oldVCObserver6 === void 0 ? void 0 : _this$oldVCObserver6.setReactRootRenderStart(startTime || performance.now());
+    (_this$newVCObserver5 = this.newVCObserver) === null || _this$newVCObserver5 === void 0 ? void 0 : _this$newVCObserver5.setReactRootRenderStart(startTime || performance.now());
   }
   setReactRootRenderStop(stopTime) {
-    var _this$oldVCObserver7;
+    var _this$oldVCObserver7, _this$newVCObserver6;
     (_this$oldVCObserver7 = this.oldVCObserver) === null || _this$oldVCObserver7 === void 0 ? void 0 : _this$oldVCObserver7.setReactRootRenderStop(stopTime || performance.now());
+    (_this$newVCObserver6 = this.newVCObserver) === null || _this$newVCObserver6 === void 0 ? void 0 : _this$newVCObserver6.setReactRootRenderStop(stopTime || performance.now());
+  }
+  collectSSRPlaceholders() {
+    this.ssrPlaceholderHandler.collectExistingPlaceholders();
   }
 }
 
@@ -133,4 +165,9 @@ export function getVCObserver(opts = {}) {
     globalThis.__vcObserver = shouldMockVCObserver ? new VCObserverNOOP() : new VCObserverWrapper(opts);
   }
   return globalThis.__vcObserver;
+}
+export function newVCObserver(opts = {}) {
+  const shouldMockVCObserver = !isEnvironmentSupported();
+  const observer = shouldMockVCObserver ? new VCObserverNOOP() : new VCObserverWrapper(opts);
+  return observer;
 }

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));
   }