@atlaskit/react-ufo 3.14.6 → 3.14.8

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/create-experimental-interaction-metrics-payload/index.js

@@ -84,17 +84,19 @@ export function getExperimentalVCMetrics(_x) {
 }
 function _getExperimentalVCMetrics() {
   _getExperimentalVCMetrics = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(interaction) {
-    var _interaction$apdex, prefix, result, VC, pageVisibilityUpToTTAI;
+    var vcObserver, _interaction$apdex, prefix, result, VC, pageVisibilityUpToTTAI;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          if (!experimentalVC.vcObserver) {
-            _context.next = 12;
+          // Use per-interaction VC observer if available, otherwise fall back to global experimentalVC
+          vcObserver = interaction.experimentalVCObserver || experimentalVC.vcObserver;
+          if (!vcObserver) {
+            _context.next = 13;
             break;
           }
           prefix = 'ufo-experimental';
-          _context.next = 4;
-          return experimentalVC.vcObserver.getVCResult({
+          _context.next = 5;
+          return vcObserver.getVCResult({
             start: interaction.start,
             stop: interaction.end,
             tti: (_interaction$apdex = interaction.apdex) === null || _interaction$apdex === void 0 || (_interaction$apdex = _interaction$apdex[0]) === null || _interaction$apdex === void 0 ? void 0 : _interaction$apdex.stopTime,
@@ -104,28 +106,28 @@ function _getExperimentalVCMetrics() {
             experienceKey: interaction.ufoName,
             interactionId: interaction.id
           });
-        case 4:
+        case 5:
           result = _context.sent;
           VC = result === null || result === void 0 ? void 0 : result['metrics:vc'];
           if (!(!VC || !(result !== null && result !== void 0 && result["".concat(prefix, ":vc:clean")]))) {
-            _context.next = 8;
+            _context.next = 9;
             break;
           }
           return _context.abrupt("return", result);
-        case 8:
+        case 9:
           pageVisibilityUpToTTAI = getPageVisibilityState(interaction.start, interaction.end);
           if (!(interaction.abortReason || pageVisibilityUpToTTAI !== 'visible')) {
-            _context.next = 11;
+            _context.next = 12;
             break;
           }
           return _context.abrupt("return", result);
-        case 11:
+        case 12:
           return _context.abrupt("return", _objectSpread(_objectSpread({}, result), {}, {
             'metric:experimental:vc90': VC['90']
           }));
-        case 12:
-          return _context.abrupt("return", null);
         case 13:
+          return _context.abrupt("return", null);
+        case 14:
         case "end":
           return _context.stop();
       }

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

@@ -16,7 +16,7 @@ function getVCMetrics(_x) {
 function _getVCMetrics() {
   _getVCMetrics = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(interaction) {
     var _config$vc, _config$vc$ssrWhiteli, _interaction$apdex, _config$vc2, _config$vc3, _config$experimentalI, _result$ufoVcRev;
-    var config, interactionStatus, pageVisibilityUpToTTAI, shouldReportVCMetrics, isSSREnabled, ssr, tti, prefix, result, mostRecentVCRevision, mostRecentVCRevisionPayload;
+    var config, interactionStatus, pageVisibilityUpToTTAI, shouldReportVCMetrics, observer, isSSREnabled, ssr, tti, prefix, result, mostRecentVCRevision, mostRecentVCRevisionPayload;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
@@ -27,7 +27,7 @@ function _getVCMetrics() {
           }
           return _context.abrupt("return", {});
         case 3:
-          if (!(fg('platform_ufo_enable_interactions_vc') || fg('platform_ufo_enable_interactivity_jsm'))) {
+          if (!fg('platform_ufo_enable_vc_press_interactions')) {
             _context.next = 8;
             break;
           }
@@ -48,14 +48,15 @@ function _getVCMetrics() {
         case 10:
           interactionStatus = getInteractionStatus(interaction);
           pageVisibilityUpToTTAI = getPageVisibilityUpToTTAI(interaction);
-          shouldReportVCMetrics = interactionStatus.originalInteractionStatus === 'SUCCEEDED' && pageVisibilityUpToTTAI === 'visible';
+          shouldReportVCMetrics = interactionStatus.originalInteractionStatus === 'SUCCEEDED' && pageVisibilityUpToTTAI === 'visible'; // Use per-interaction VC observer if available, otherwise fall back to global
+          observer = interaction.vcObserver || getVCObserver();
           if (!(!shouldReportVCMetrics && fg('platform_ufo_no_vc_on_aborted'))) {
-            _context.next = 16;
+            _context.next = 17;
             break;
           }
-          getVCObserver().stop(interaction.ufoName);
+          observer.stop(interaction.ufoName);
           return _context.abrupt("return", {});
-        case 16:
+        case 17:
           isSSREnabled = interaction.type === 'page_load' && ((config === null || config === void 0 ? void 0 : config.ssr) || (config === null || config === void 0 || (_config$vc$ssrWhiteli = config.vc.ssrWhitelist) === null || _config$vc$ssrWhiteli === void 0 ? void 0 : _config$vc$ssrWhiteli.includes(interaction.ufoName)));
           ssr = interaction.type === 'page_load' && isSSREnabled ? {
             ssr: getSSRDoneTimeValue(config)
@@ -63,8 +64,8 @@ function _getVCMetrics() {
           postInteractionLog.setVCObserverSSRConfig(ssr);
           tti = (_interaction$apdex = interaction.apdex) === null || _interaction$apdex === void 0 || (_interaction$apdex = _interaction$apdex[0]) === null || _interaction$apdex === void 0 ? void 0 : _interaction$apdex.stopTime;
           prefix = 'ufo';
-          _context.next = 23;
-          return getVCObserver().getVCResult(_objectSpread({
+          _context.next = 24;
+          return observer.getVCResult(_objectSpread({
             start: interaction.start,
             stop: interaction.end,
             tti: tti,
@@ -76,10 +77,13 @@ function _getVCMetrics() {
             interactionId: interaction.id,
             includeSSRRatio: (_config$vc3 = config.vc) === null || _config$vc3 === void 0 ? void 0 : _config$vc3.includeSSRRatio
           }, ssr));
-        case 23:
+        case 24:
           result = _context.sent;
+          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);
           mostRecentVCRevision = getMostRecentVCRevision(interaction.ufoName);
@@ -88,15 +92,15 @@ function _getVCMetrics() {
             return revision === mostRecentVCRevision;
           });
           if (!(!shouldReportVCMetrics || !(mostRecentVCRevisionPayload !== null && mostRecentVCRevisionPayload !== void 0 && mostRecentVCRevisionPayload.clean))) {
-            _context.next = 30;
+            _context.next = 32;
             break;
           }
           return _context.abrupt("return", result);
-        case 30:
+        case 32:
           return _context.abrupt("return", _objectSpread(_objectSpread({}, result), {}, {
             'metric:vc90': mostRecentVCRevisionPayload['metric:vc90']
           }));
-        case 31:
+        case 33:
         case "end":
           return _context.stop();
       }

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

@@ -16,7 +16,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';
 var PreviousInteractionLog = {
@@ -523,7 +523,9 @@ function finishInteraction(id, data) {
   clearActiveTrace();
   callCleanUpCallbacks(data);
   if ((_getConfig4 = getConfig()) !== null && _getConfig4 !== void 0 && (_getConfig4 = _getConfig4.vc) !== null && _getConfig4 !== void 0 && _getConfig4.stopVCAtInteractionFinish) {
-    data.vc = getVCObserver().getVCRawData();
+    // Use per-interaction VC observer if available, otherwise fall back to global
+    var observer = data.vcObserver || getVCObserver();
+    data.vc = observer.getVCRawData();
   }
   if (!((_getConfig5 = getConfig()) !== null && _getConfig5 !== void 0 && (_getConfig5 = _getConfig5.experimentalInteractionMetrics) !== null && _getConfig5 !== void 0 && _getConfig5.enabled)) {
     remove(id);
@@ -735,6 +737,7 @@ export function addNewInteraction(interactionId, ufoName, type, startTime, rate,
   if ((_getConfig11 = getConfig()) !== null && _getConfig11 !== void 0 && (_getConfig11 = _getConfig11.postInteractionLog) !== null && _getConfig11 !== void 0 && _getConfig11.enabled) {
     postInteractionLog.reset();
   }
+  var vcObserver;
   var previousTime = startTime;
   var timeoutTime = fg('platform_ufo_enable_timeout_config') ? getInteractionTimeout(ufoName) : CLEANUP_TIMEOUT;
   var timerID = setTimeout(function () {
@@ -757,6 +760,21 @@ export function addNewInteraction(interactionId, ufoName, type, startTime, rate,
     this.timerID = newTimerID;
   }
   var addFeatureFlagsToInteraction = coinflip(getCapabilityRate('feature_flag_access'));
+  var config = getConfig();
+  if (config && config.vc) {
+    var 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
+
   var metrics = {
     id: interactionId,
     start: startTime,
@@ -797,7 +815,8 @@ export function addNewInteraction(interactionId, ufoName, type, startTime, rate,
     redirects: [],
     timerID: timerID,
     changeTimeout: changeTimeout,
-    trace: trace
+    trace: trace,
+    vcObserver: vcObserver
   };
   if (addFeatureFlagsToInteraction) {
     currentFeatureFlagsAccessed.clear();
@@ -816,13 +835,21 @@ export function addNewInteraction(interactionId, ufoName, type, startTime, rate,
   metrics.cleanupCallbacks.push(function () {
     clearTimeout(metrics.timerID);
   });
+  // Add cleanup for per-interaction VC observer
+  if (vcObserver) {
+    metrics.cleanupCallbacks.push(function () {
+      vcObserver.stop(ufoName);
+    });
+  }
   var awaitBM3TTIList = getAwaitBM3TTIList();
   if (awaitBM3TTIList.includes(ufoName)) {
     addHoldByID(interactionId, [], ufoName, ufoName, true);
   }
-  if (type === 'transition') {
+  if (type === 'transition' || type === 'page_load') {
     var _getConfig12;
-    getVCObserver().start({
+    // Use per-interaction VC observer if available, otherwise fall back to global
+    var observer = vcObserver || getVCObserver();
+    observer.start({
       startTime: startTime,
       experienceKey: ufoName
     });
@@ -835,20 +862,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;
-    getVCObserver().start({
+  if (type === 'press' && fg('platform_ufo_enable_vc_press_interactions')) {
+    // Use per-interaction VC observer if available, otherwise fall back to global
+    var _observer = vcObserver || getVCObserver();
+    _observer.start({
       startTime: startTime,
       experienceKey: ufoName
     });
-    postInteractionLog.startVCObserver({
-      startTime: startTime
-    });
-    if ((_getConfig13 = getConfig()) !== null && _getConfig13 !== void 0 && (_getConfig13 = _getConfig13.experimentalInteractionMetrics) !== null && _getConfig13 !== void 0 && _getConfig13.enabled) {
-      experimentalVC.start({
-        startTime: startTime
-      });
-    }
   }
 }
 export function addBrowserMetricEvent(event) {