@atlaskit/react-ufo 3.12.5 → 3.13.1

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

@@ -16,9 +16,7 @@ import { attachAbortListeners } from './attachAbortListeners';
 import { getVCRevisionDebugDetails } from './getVCRevisionDebugDetails';
 import { getVCRevisionsData } from './getVCRevisionsData';
 import { getViewportHeight, getViewportWidth } from './getViewport';
-import { MultiRevisionHeatmap } from './heatmap/heatmap';
 import { Observers } from './observers';
-import { getRevisions } from './revisions/revisions';
 var abortReason = {
   scroll: 'scroll',
   keypress: 'keypress',
@@ -56,7 +54,6 @@ export var VCObserver = /*#__PURE__*/function () {
     });
     /* heatmap */
     _defineProperty(this, "arraySize", 0);
-    _defineProperty(this, "multiHeatmap", null);
     _defineProperty(this, "componentsLog", {});
     _defineProperty(this, "vcRatios", {});
     _defineProperty(this, "active", false);
@@ -88,7 +85,6 @@ export var VCObserver = /*#__PURE__*/function () {
         abortReason: _objectSpread({}, _this.abortReason),
         heatmap: _this.heatmap,
         heatmapNext: _this.heatmapNext,
-        multiHeatmap: _this.multiHeatmap,
         outOfBoundaryInfo: _this.outOfBoundaryInfo,
         totalTime: Math.round(_this.totalTime + _this.observers.getTotalTime()),
         componentsLog: _objectSpread({}, _this.componentsLog),
@@ -100,7 +96,7 @@ export var VCObserver = /*#__PURE__*/function () {
     });
     _defineProperty(this, "getVCResult", /*#__PURE__*/function () {
       var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref3) {
-        var start, stop, tti, prefix, ssr, vc, isEventAborted, experienceKey, interactionId, startTime, fullPrefix, rawData, abortReason, abortReasonInfo, heatmap, heatmapNext, outOfBoundaryInfo, totalTime, componentsLog, viewport, devToolsEnabled, ratios, multiHeatmap, isTTVCv1Disabled, vcAbortedResultWithRevisions, ttvcV1Result, VC, VCBox, VCEntries, totalPainted, _componentsLog, vcNext, outOfBoundary, stopTime, ttvcV1DevToolInfo, ttvcV2DevToolInfo, _ufo_devtool_onVCRev2, _ref10, _ufo_devtool_onVCRev, _ref9, isVCClean, revisionsData, speedIndex, isTTVCv3Enabled;
+        var start, stop, tti, prefix, ssr, vc, isEventAborted, experienceKey, interactionId, startTime, fullPrefix, rawData, abortReason, abortReasonInfo, heatmap, heatmapNext, outOfBoundaryInfo, totalTime, componentsLog, viewport, devToolsEnabled, ratios, isTTVCv1Disabled, vcAbortedResultWithRevisions, ttvcV1Result, VC, VCBox, VCEntries, totalPainted, _componentsLog, vcNext, outOfBoundary, stopTime, ttvcV1DevToolInfo, ttvcV2DevToolInfo, _ufo_devtool_onVCRev2, _ref10, _ufo_devtool_onVCRev, _ref9, isVCClean, revisionsData, speedIndex, isTTVCv3Enabled;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -114,8 +110,8 @@ export var VCObserver = /*#__PURE__*/function () {
               }
               return _context.abrupt("return", {});
             case 6:
-              abortReason = rawData.abortReason, abortReasonInfo = rawData.abortReasonInfo, heatmap = rawData.heatmap, heatmapNext = rawData.heatmapNext, outOfBoundaryInfo = rawData.outOfBoundaryInfo, totalTime = rawData.totalTime, componentsLog = rawData.componentsLog, viewport = rawData.viewport, devToolsEnabled = rawData.devToolsEnabled, ratios = rawData.ratios, multiHeatmap = rawData.multiHeatmap;
-              isTTVCv1Disabled = fg('platform_ufo_vc_enable_revisions_by_experience') ? !isVCRevisionEnabled('fy25.01', experienceKey) : !isVCRevisionEnabled('fy25.01'); // NOTE: as part of platform_ufo_add_vc_abort_reason_by_revisions feature,
+              abortReason = rawData.abortReason, abortReasonInfo = rawData.abortReasonInfo, heatmap = rawData.heatmap, heatmapNext = rawData.heatmapNext, outOfBoundaryInfo = rawData.outOfBoundaryInfo, totalTime = rawData.totalTime, componentsLog = rawData.componentsLog, viewport = rawData.viewport, devToolsEnabled = rawData.devToolsEnabled, ratios = rawData.ratios;
+              isTTVCv1Disabled = !isVCRevisionEnabled('fy25.01', experienceKey); // NOTE: as part of platform_ufo_add_vc_abort_reason_by_revisions feature,
               // we want to report abort by scroll events the same way as other abort reasons
               // i.e. not have the concept of `abortReason.blocking` anymore
               if (!(abortReasonInfo !== null && fg('platform_ufo_add_vc_abort_reason_by_revisions'))) {
@@ -318,8 +314,6 @@ export var VCObserver = /*#__PURE__*/function () {
                   end: stop
                 },
                 isVCClean: isVCClean,
-                multiHeatmap: multiHeatmap,
-                ssr: ssr,
                 calculatedVC: {
                   VC: VC,
                   VCBox: VCBox
@@ -338,7 +332,7 @@ export var VCObserver = /*#__PURE__*/function () {
               }
               return _context.abrupt("return", _objectSpread(_objectSpread(_objectSpread(_defineProperty(_defineProperty(_defineProperty({}, "".concat(fullPrefix, "vc:size"), viewport), "".concat(fullPrefix, "vc:time"), Math.round(totalTime + (stopTime - startTime))), "".concat(fullPrefix, "vc:ratios"), ratios), outOfBoundary), {}, _defineProperty({}, "".concat(fullPrefix, "vc:ignored"), _this.getIgnoredElements(componentsLog)), revisionsData), speedIndex));
             case 32:
-              isTTVCv3Enabled = fg('platform_ufo_vc_enable_revisions_by_experience') ? isVCRevisionEnabled('fy25.03', experienceKey) : isVCRevisionEnabled('fy25.03');
+              isTTVCv3Enabled = isVCRevisionEnabled('fy25.03', experienceKey);
               return _context.abrupt("return", _objectSpread(_objectSpread(_objectSpread(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
                 'metrics:vc': VC
               }, "".concat(fullPrefix, "vc:state"), true), "".concat(fullPrefix, "vc:clean"), isVCClean), "".concat(fullPrefix, "vc:dom"), VCBox), "".concat(fullPrefix, "vc:updates"), isTTVCv3Enabled ? undefined : VCEntries.rel.slice(0, 50)), "".concat(fullPrefix, "vc:size"), viewport), "".concat(fullPrefix, "vc:time"), Math.round(totalTime + (stopTime - startTime))), "".concat(fullPrefix, "vc:total"), totalPainted), "".concat(fullPrefix, "vc:ratios"), ratios), outOfBoundary), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(fullPrefix, "vc:next"), vcNext.VC), "".concat(fullPrefix, "vc:next:updates"), isTTVCv3Enabled ? undefined : vcNext.VCEntries.rel.slice(0, 50)), "".concat(fullPrefix, "vc:next:dom"), vcNext.VCBox), "".concat(fullPrefix, "vc:ignored"), _this.getIgnoredElements(componentsLog)), revisionsData), speedIndex));
@@ -353,29 +347,6 @@ export var VCObserver = /*#__PURE__*/function () {
       };
     }());
     _defineProperty(this, "handleUpdate", function (rawTime, intersectionRect, targetName, element, type, ignoreReason, attributeName, oldValue, newValue) {
-      _this.measureStart();
-      _this.legacyHandleUpdate(rawTime, intersectionRect, targetName, element, type, ignoreReason, attributeName, oldValue, newValue);
-      var isTTVCv3Disabled = !isVCRevisionEnabled('fy25.03');
-      if (fg('platform_ufo_vc_enable_revisions_by_experience')) {
-        var interaction = getActiveInteraction();
-        isTTVCv3Disabled = !isVCRevisionEnabled('fy25.03', interaction === null || interaction === void 0 ? void 0 : interaction.ufoName);
-      }
-      if (isTTVCv3Disabled) {
-        _this.onViewportChangeDetected({
-          timestamp: rawTime,
-          intersectionRect: intersectionRect,
-          targetName: targetName,
-          element: element,
-          type: type,
-          ignoreReason: ignoreReason,
-          attributeName: attributeName,
-          oldValue: oldValue,
-          newValue: newValue
-        });
-      }
-      _this.measureStop();
-    });
-    _defineProperty(this, "legacyHandleUpdate", function (rawTime, intersectionRect, targetName, element, type, ignoreReason, attributeName, oldValue, newValue) {
       if (_this.abortReason.reason === null || _this.abortReason.blocking === false) {
         var time = Math.round(rawTime - _this.startTime);
         var mappedValues = _this.mapPixelsToHeatmap(intersectionRect.left, intersectionRect.top, intersectionRect.width, intersectionRect.height);
@@ -383,11 +354,8 @@ export var VCObserver = /*#__PURE__*/function () {
         if (!ignoreReason) {
           _this.applyChangesToHeatMap(mappedValues, time, _this.heatmapNext);
         }
-        var isTTVCv1Disabled = !isVCRevisionEnabled('fy25.01');
-        if (fg('platform_ufo_vc_enable_revisions_by_experience')) {
-          var interaction = getActiveInteraction();
-          isTTVCv1Disabled = !isVCRevisionEnabled('fy25.01', interaction === null || interaction === void 0 ? void 0 : interaction.ufoName);
-        }
+        var interaction = getActiveInteraction();
+        var isTTVCv1Disabled = !isVCRevisionEnabled('fy25.01', interaction === null || interaction === void 0 ? void 0 : interaction.ufoName);
         if (!isTTVCv1Disabled && (!ignoreReason || ignoreReason === 'not-visible') && type !== 'attr') {
           _this.applyChangesToHeatMap(mappedValues, time, _this.heatmap);
         }
@@ -406,44 +374,6 @@ export var VCObserver = /*#__PURE__*/function () {
         });
       }
     });
-    _defineProperty(this, "onViewportChangeDetected", function (_ref11) {
-      var element = _ref11.element,
-        type = _ref11.type,
-        ignoreReason = _ref11.ignoreReason,
-        timestamp = _ref11.timestamp,
-        targetName = _ref11.targetName,
-        intersectionRect = _ref11.intersectionRect,
-        attributeName = _ref11.attributeName,
-        oldValue = _ref11.oldValue,
-        newValue = _ref11.newValue;
-      if (_this.multiHeatmap === null) {
-        return;
-      }
-      // @todo add abort reason handling
-      var time = Math.round(timestamp - _this.startTime);
-      var revisions = getRevisions();
-      var revisionsClassification = revisions.map(function (revision) {
-        return revision.classifier.classifyUpdate({
-          element: element,
-          type: type,
-          ignoreReason: ignoreReason
-        });
-      }, []);
-      _this.multiHeatmap.handleUpdate({
-        time: time,
-        targetName: targetName,
-        intersectionRect: intersectionRect,
-        type: type,
-        element: element,
-        classification: revisionsClassification,
-        onError: function onError(error) {
-          _this.setAbortReason(abortReason.error, error.time, error.error);
-        },
-        attributeName: attributeName,
-        oldValue: oldValue,
-        newValue: newValue
-      });
-    });
     _defineProperty(this, "mapPixelsToHeatmap", function (left, top, width, height) {
       var _this$viewport = _this.viewport,
         w = _this$viewport.w,
@@ -500,10 +430,10 @@ export var VCObserver = /*#__PURE__*/function () {
       var unbinds = attachAbortListeners(window, _this.viewport, _this.abortReasonCallback);
       if ((_window = window) !== null && _window !== void 0 && _window.__SSR_ABORT_LISTENERS__) {
         var _window2;
-        Object.entries(window.__SSR_ABORT_LISTENERS__.aborts).forEach(function (_ref12) {
-          var _ref13 = _slicedToArray(_ref12, 2),
-            key = _ref13[0],
-            time = _ref13[1];
+        Object.entries(window.__SSR_ABORT_LISTENERS__.aborts).forEach(function (_ref11) {
+          var _ref12 = _slicedToArray(_ref11, 2),
+            key = _ref12[0],
+            time = _ref12[1];
           if (time) {
             _this.abortReasonCallback(key, time);
           }
@@ -516,6 +446,7 @@ export var VCObserver = /*#__PURE__*/function () {
     this.arraySize = options.heatmapSize || 200;
     this.devToolsEnabled = options.devToolsEnabled || false;
     this.oldDomUpdatesEnabled = options.oldDomUpdates || false;
+    var ssrEnablePageLayoutPlaceholder = options.ssrEnablePageLayoutPlaceholder;
     this.observers = new Observers({
       selectorConfig: options.selectorConfig || {
         id: false,
@@ -523,21 +454,19 @@ export var VCObserver = /*#__PURE__*/function () {
         role: false,
         className: true,
         dataVC: true
+      },
+      SSRConfig: {
+        enablePageLayoutPlaceholder: ssrEnablePageLayoutPlaceholder || false
       }
     });
     this.heatmap = !isVCRevisionEnabled('fy25.01') ? [] : this.getCleanHeatmap();
     this.heatmapNext = this.getCleanHeatmap();
-    this.multiHeatmap = new MultiRevisionHeatmap({
-      viewport: this.viewport,
-      revisions: getRevisions(),
-      devToolsEnabled: this.devToolsEnabled
-    });
     this.isPostInteraction = options.isPostInteraction || false;
   }
   return _createClass(VCObserver, [{
     key: "start",
-    value: function start(_ref14) {
-      var startTime = _ref14.startTime;
+    value: function start(_ref13) {
+      var startTime = _ref13.startTime;
       this.active = true;
       if (this.observers.isBrowserSupported()) {
         this.setViewportSize();
@@ -559,12 +488,12 @@ export var VCObserver = /*#__PURE__*/function () {
   }, {
     key: "getIgnoredElements",
     value: function getIgnoredElements(componentsLog) {
-      return Object.values(componentsLog).flat().filter(function (_ref15) {
-        var ignoreReason = _ref15.ignoreReason;
+      return Object.values(componentsLog).flat().filter(function (_ref14) {
+        var ignoreReason = _ref14.ignoreReason;
         return Boolean(ignoreReason);
-      }).map(function (_ref16) {
-        var targetName = _ref16.targetName,
-          ignoreReason = _ref16.ignoreReason;
+      }).map(function (_ref15) {
+        var targetName = _ref15.targetName,
+          ignoreReason = _ref15.ignoreReason;
         return {
           targetName: targetName,
           ignoreReason: ignoreReason
@@ -614,11 +543,6 @@ export var VCObserver = /*#__PURE__*/function () {
       this.detachAbortListeners();
       this.heatmap = !isVCRevisionEnabled('fy25.01') ? [] : this.getCleanHeatmap();
       this.heatmapNext = this.getCleanHeatmap();
-      this.multiHeatmap = new MultiRevisionHeatmap({
-        viewport: this.viewport,
-        revisions: getRevisions(),
-        devToolsEnabled: this.devToolsEnabled
-      });
       this.totalTime = 0;
       this.componentsLog = {};
       this.vcRatios = {};
@@ -687,12 +611,12 @@ export var VCObserver = /*#__PURE__*/function () {
     }
   }], [{
     key: "calculateVC",
-    value: function calculateVC(_ref17) {
-      var heatmap = _ref17.heatmap,
-        _ref17$ssr = _ref17.ssr,
-        ssr = _ref17$ssr === void 0 ? UNUSED_SECTOR : _ref17$ssr,
-        componentsLog = _ref17.componentsLog,
-        viewport = _ref17.viewport;
+    value: function calculateVC(_ref16) {
+      var heatmap = _ref16.heatmap,
+        _ref16$ssr = _ref16.ssr,
+        ssr = _ref16$ssr === void 0 ? UNUSED_SECTOR : _ref16$ssr,
+        componentsLog = _ref16.componentsLog,
+        viewport = _ref16.viewport;
       var lastUpdate = {};
       var totalPainted = 0;
       if (ssr !== UNUSED_SECTOR) {
@@ -758,11 +682,11 @@ export var VCObserver = /*#__PURE__*/function () {
         });
         return VCRatio;
       }, 0);
-      var VCEntries = entries.reduce(function (acc, _ref18, i) {
+      var VCEntries = entries.reduce(function (acc, _ref17, i) {
         var _acc$abs, _componentsLog$timest, _acc$rel$vc, _acc$rel;
-        var _ref19 = _slicedToArray(_ref18, 2),
-          timestamp = _ref19[0],
-          entryPainted = _ref19[1];
+        var _ref18 = _slicedToArray(_ref17, 2),
+          timestamp = _ref18[0],
+          entryPainted = _ref18[1];
         var currentlyPainted = entryPainted + (((_acc$abs = acc.abs[i - 1]) === null || _acc$abs === void 0 ? void 0 : _acc$abs[1]) || 0);
         var currentlyPaintedRatio = Math.round(currentlyPainted / totalPainted * 1000) / 10;
         var logEntry = _toConsumableArray(new Set((_componentsLog$timest = componentsLog[timestamp]) === null || _componentsLog$timest === void 0 ? void 0 : _componentsLog$timest.filter(function (v) {

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

@@ -24,7 +24,8 @@ function isElementVisible(target) {
 }
 export var Observers = /*#__PURE__*/function () {
   function Observers(opts) {
-    var _this = this;
+    var _this = this,
+      _opts$SSRConfig;
     _classCallCheck(this, Observers);
     _defineProperty(this, "observedMutations", new WeakMap());
     _defineProperty(this, "elementsInView", new Set());
@@ -64,7 +65,7 @@ export var Observers = /*#__PURE__*/function () {
     this.selectorConfig = _objectSpread(_objectSpread({}, this.selectorConfig), opts.selectorConfig);
     this.intersectionObserver = this.getIntersectionObserver();
     this.mutationObserver = this.getMutationObserver();
-    this.ssrPlaceholderHandler = new SSRPlaceholderHandlers();
+    this.ssrPlaceholderHandler = new SSRPlaceholderHandlers((_opts$SSRConfig = opts.SSRConfig) === null || _opts$SSRConfig === void 0 ? void 0 : _opts$SSRConfig.enablePageLayoutPlaceholder);
   }
   return _createClass(Observers, [{
     key: "isBrowserSupported",

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

@@ -2,15 +2,39 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var ANCESTOR_LOOKUP_LIMIT = 10;
+var PAGE_LAYOUT_ID = 'page-layout.root';
 export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
   function SSRPlaceholderHandlers() {
     var _this = this;
+    var enablePageLayoutPlaceholder = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     _classCallCheck(this, SSRPlaceholderHandlers);
     _defineProperty(this, "staticPlaceholders", new Map());
     _defineProperty(this, "callbacks", new Map());
     _defineProperty(this, "getSizeCallbacks", new Map());
     _defineProperty(this, "reactValidateCallbacks", new Map());
     _defineProperty(this, "EQUALITY_THRESHOLD", 1);
+    _defineProperty(this, "getPlaceholderId", function (el) {
+      var _el$dataset;
+      var ssrPlaceholderId = el === null || el === void 0 || (_el$dataset = el.dataset) === null || _el$dataset === void 0 ? void 0 : _el$dataset.ssrPlaceholder;
+      if (!!ssrPlaceholderId) {
+        return ssrPlaceholderId;
+      }
+      if (_this.enablePageLayoutPlaceholder && (el === null || el === void 0 ? void 0 : el.dataset.testid) === PAGE_LAYOUT_ID) {
+        return PAGE_LAYOUT_ID;
+      }
+      return '';
+    });
+    _defineProperty(this, "getPlaceholderReplacementId", function (el) {
+      var _el$dataset2;
+      var ssrPlaceholderReplaceId = el === null || el === void 0 || (_el$dataset2 = el.dataset) === null || _el$dataset2 === void 0 ? void 0 : _el$dataset2.ssrPlaceholderReplace;
+      if (!!ssrPlaceholderReplaceId) {
+        return ssrPlaceholderReplaceId;
+      }
+      if (_this.enablePageLayoutPlaceholder && (el === null || el === void 0 ? void 0 : el.dataset.testid) === PAGE_LAYOUT_ID) {
+        return PAGE_LAYOUT_ID;
+      }
+      return '';
+    });
     _defineProperty(this, "intersectionObserverCallback", function (_ref) {
       var _this$intersectionObs;
       var target = _ref.target,
@@ -20,7 +44,7 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
         // impossible case - keep typescript healthy
         return;
       }
-      var staticKey = target.dataset.ssrPlaceholder || '';
+      var staticKey = _this.getPlaceholderId(target);
       if (staticKey) {
         if (_this.staticPlaceholders.has(staticKey) && _this.callbacks.has(staticKey)) {
           // validation
@@ -42,7 +66,7 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
           _this.callbacks.delete(staticKey);
         }
       } else {
-        var key = target.dataset.ssrPlaceholderReplace || '';
+        var key = _this.getPlaceholderReplacementId(target);
         var _resolve2 = _this.reactValidateCallbacks.get(key);
         if (!_resolve2) {
           return;
@@ -70,25 +94,27 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
         }).forEach(_this.intersectionObserverCallback);
       });
     }
+    this.enablePageLayoutPlaceholder = enablePageLayoutPlaceholder;
     if (window.document) {
       try {
-        var existingElements = document.querySelectorAll('[data-ssr-placeholder]');
+        var selector = this.enablePageLayoutPlaceholder ? '[data-ssr-placeholder],[data-testid="page-layout.root"]' : '[data-ssr-placeholder]';
+        var existingElements = document.querySelectorAll(selector);
         existingElements.forEach(function (el) {
-          var _el$dataset;
-          if (el instanceof HTMLElement && el !== null && el !== void 0 && (_el$dataset = el.dataset) !== null && _el$dataset !== void 0 && _el$dataset.ssrPlaceholder) {
+          var placeholderId = el instanceof HTMLElement && _this.getPlaceholderId(el);
+          if (placeholderId) {
             var _window$__SSR_PLACEHO, _this$intersectionObs2;
             var width = -1;
             var height = -1;
             var x = -1;
             var y = -1;
-            var boundingClientRect = (_window$__SSR_PLACEHO = window.__SSR_PLACEHOLDERS_DIMENSIONS__) === null || _window$__SSR_PLACEHO === void 0 ? void 0 : _window$__SSR_PLACEHO[el.dataset.ssrPlaceholder];
+            var 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(el.dataset.ssrPlaceholder, {
+            _this.staticPlaceholders.set(placeholderId, {
               width: width,
               height: height,
               x: x,
@@ -113,12 +139,12 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
   }, {
     key: "isPlaceholder",
     value: function isPlaceholder(element) {
-      return Boolean(element.dataset.ssrPlaceholder);
+      return Boolean(this.getPlaceholderId(element));
     }
   }, {
     key: "isPlaceholderReplacement",
     value: function isPlaceholderReplacement(element) {
-      return Boolean(element.dataset.ssrPlaceholderReplace);
+      return Boolean(this.getPlaceholderReplacementId(element));
     }
   }, {
     key: "isPlaceholderIgnored",
@@ -148,7 +174,7 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
     value: function checkIfExistedAndSizeMatching(el) {
       var _this2 = this;
       el = this.findNearestPlaceholderContainerIfIgnored(el);
-      var id = el.dataset.ssrPlaceholder || '';
+      var id = this.getPlaceholderId(el);
       return new Promise(function (resolve) {
         if (!_this2.staticPlaceholders.has(id)) {
           resolve(false);
@@ -166,7 +192,7 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
       var _this3 = this;
       return new Promise(function (resolve) {
         var _this3$intersectionOb;
-        _this3.getSizeCallbacks.set(el.dataset.ssrPlaceholder || '', resolve);
+        _this3.getSizeCallbacks.set(_this3.getPlaceholderId(el), resolve);
         (_this3$intersectionOb = _this3.intersectionObserver) === null || _this3$intersectionOb === void 0 || _this3$intersectionOb.observe(el);
       });
     }
@@ -175,7 +201,7 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
     value: function validateReactComponentMatchToPlaceholder(el) {
       var _this4 = this;
       el = this.findNearestPlaceholderContainerIfIgnored(el);
-      var id = el.dataset.ssrPlaceholderReplace || '';
+      var id = this.getPlaceholderReplacementId(el);
       return new Promise(function (resolve) {
         if (!_this4.staticPlaceholders.has(id)) {
           resolve(false);

package/dist/esm/vc/vc-observer/observers/ssr-placeholders/ssr-scripts/collectSSRPlaceholderDimensions.js

@@ -2,6 +2,7 @@
 // and save their size/positions in a map __SSR_PLACEHOLDERS_DIMENSIONS__ on the Window object. Each placeholderId is
 // unique and maps to its corresponding elements bounding client rectangle dimensions.
 export function collectSSRPlaceholderDimensions(document, window) {
+  var enablePageLayoutPlaceholder = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   var ssrPlaceholders = document === null || document === void 0 ? void 0 : document.querySelectorAll('[data-ssr-placeholder]');
   ssrPlaceholders.forEach(function (elem) {
     var placeholderId = elem.getAttribute('data-ssr-placeholder');
@@ -11,4 +12,12 @@ export function collectSSRPlaceholderDimensions(document, window) {
       window.__SSR_PLACEHOLDERS_DIMENSIONS__[placeholderId] = boundingClient;
     }
   });
+  if (enablePageLayoutPlaceholder) {
+    var pageLayoutRoot = document === null || document === void 0 ? void 0 : document.getElementById('unsafe-design-system-page-layout-root');
+    if (pageLayoutRoot) {
+      var boundingClient = pageLayoutRoot.getBoundingClientRect();
+      window.__SSR_PLACEHOLDERS_DIMENSIONS__ = window.__SSR_PLACEHOLDERS_DIMENSIONS__ || {};
+      window.__SSR_PLACEHOLDERS_DIMENSIONS__['page-layout.root'] = boundingClient;
+    }
+  }
 }

package/dist/types/common/vc/types.d.ts

@@ -1,5 +1,4 @@
 import type { UnbindFn } from 'bind-event-listener';
-import { MultiRevisionHeatmap } from '../../vc/vc-observer/heatmap/heatmap';
 export declare const AbortEvent: {
     readonly wheel: "wheel";
     readonly keydown: "keydown";
@@ -30,7 +29,6 @@ export type VCRawDataType = {
     oldDomUpdatesEnabled: boolean;
     devToolsEnabled: boolean;
     ratios: VCRatioType;
-    multiHeatmap: MultiRevisionHeatmap | null;
 };
 export type VCEntryType = {
     time: number;

package/dist/types/config/index.d.ts

@@ -73,6 +73,7 @@ export type Config = {
         readonly selectorConfig?: SelectorConfig;
         readonly ssr?: boolean;
         readonly ssrWhitelist?: string[];
+        readonly ssrEnablePageLayoutPlaceholder?: boolean;
         readonly stopVCAtInteractionFinish?: boolean;
         /**
          * The revisions of TTVC that will be calculated

package/dist/types/create-post-interaction-log-payload/index.d.ts

@@ -26,8 +26,8 @@ declare function createPostInteractionLogPayload({ lastInteractionFinish, reactP
                     vc90: number | null;
                     vcClean: boolean;
                     type: import("../common").InteractionType;
-                    abortReason?: import("../common").AbortReasonType | undefined;
                     id: string;
+                    abortReason?: import("../common").AbortReasonType | undefined;
                     abortedByInteractionName?: string | undefined;
                     routeName: string | null;
                     experimentalVC90?: number | undefined;

package/dist/types/vc/types.d.ts

@@ -23,6 +23,7 @@ export type VCObserverOptions = {
     devToolsEnabled?: boolean | undefined;
     selectorConfig?: SelectorConfig | undefined;
     isPostInteraction?: boolean;
+    ssrEnablePageLayoutPlaceholder?: boolean;
 };
 export interface VCObserverInterface {
     start(startArg: {

package/dist/types/vc/vc-observer/getVCRevisionsData.d.ts

@@ -1,6 +1,5 @@
 import type { InteractionMetrics } from '../../common/common/types';
 import type { RevisionPayload } from '../../common/vc/types';
-import type { MultiRevisionHeatmap } from './heatmap/heatmap';
 type CalculatedVC = {
     VC: {
         [key: string]: number | null;
@@ -9,29 +8,15 @@ type CalculatedVC = {
         [key: string]: string[] | null;
     };
 };
-export declare function getVCRevisionsData({ fullPrefix, interaction, isVCClean, isEventAborted, multiHeatmap, ssr, calculatedVC, calculatedVCNext, experienceKey, }: {
+export declare function getVCRevisionsData({ fullPrefix, interaction, isVCClean, isEventAborted, calculatedVC, calculatedVCNext, experienceKey, }: {
     fullPrefix?: string;
     interaction: Pick<InteractionMetrics, 'start' | 'end'>;
     isVCClean: boolean;
     isEventAborted: boolean;
-    multiHeatmap: MultiRevisionHeatmap | null;
     calculatedVC: CalculatedVC;
     calculatedVCNext: CalculatedVC;
     experienceKey: string;
-    ssr?: number;
 }): {
     [x: string]: RevisionPayload;
-} | {
-    [x: string]: {
-        revision: string;
-        clean: boolean;
-        'metric:vc90': number | null;
-        vcDetails: {
-            [key: string]: {
-                t: number;
-                e: string[];
-            };
-        };
-    }[];
-} | null;
+};
 export {};

package/dist/types/vc/vc-observer/index.d.ts

@@ -1,7 +1,6 @@
 import { type UnbindFn } from 'bind-event-listener';
 import type { ComponentsLogType, VCAbortReasonType, VCEntryType, VCIgnoreReason, VCRatioType, VCRawDataType, VCResult } from '../../common/vc/types';
 import type { GetVCResultType, VCObserverInterface, VCObserverOptions } from '../types';
-import { MultiRevisionHeatmap } from './heatmap/heatmap';
 import { Observers } from './observers';
 export declare class VCObserver implements VCObserverInterface {
     abortReason: VCAbortReasonType;
@@ -15,7 +14,6 @@ export declare class VCObserver implements VCObserverInterface {
     arraySize: number;
     heatmap: number[][];
     heatmapNext: number[][];
-    multiHeatmap: MultiRevisionHeatmap | null;
     componentsLog: ComponentsLogType;
     vcRatios: VCRatioType;
     active: boolean;
@@ -68,8 +66,6 @@ export declare class VCObserver implements VCObserverInterface {
     setReactRootRenderStart(startTime?: number): void;
     setReactRootRenderStop(stopTime?: number): void;
     private handleUpdate;
-    private legacyHandleUpdate;
-    private onViewportChangeDetected;
     private setAbortReason;
     private resetState;
     private getCleanHeatmap;

package/dist/types/vc/vc-observer/observers/index.d.ts

@@ -9,6 +9,9 @@ export type SelectorConfig = {
 };
 type ConstructorOptions = {
     selectorConfig: SelectorConfig;
+    SSRConfig?: {
+        enablePageLayoutPlaceholder: boolean;
+    };
 };
 export declare class Observers implements BrowserObservers {
     private intersectionObserver;

package/dist/types/vc/vc-observer/observers/ssr-placeholders/index.d.ts

@@ -11,7 +11,10 @@ export declare class SSRPlaceholderHandlers {
     private reactValidateCallbacks;
     private intersectionObserver;
     private EQUALITY_THRESHOLD;
-    constructor();
+    private enablePageLayoutPlaceholder;
+    constructor(enablePageLayoutPlaceholder?: boolean);
+    private getPlaceholderId;
+    private getPlaceholderReplacementId;
     clear(): void;
     isPlaceholder(element: HTMLElement): boolean;
     isPlaceholderReplacement(element: HTMLElement): boolean;

package/dist/types/vc/vc-observer/observers/ssr-placeholders/ssr-scripts/collectSSRPlaceholderDimensions.d.ts

@@ -1 +1 @@
-export declare function collectSSRPlaceholderDimensions(document: Document, window: Window): void;
+export declare function collectSSRPlaceholderDimensions(document: Document, window: Window, enablePageLayoutPlaceholder?: boolean): void;

package/dist/types-ts4.5/common/vc/types.d.ts

@@ -1,5 +1,4 @@
 import type { UnbindFn } from 'bind-event-listener';
-import { MultiRevisionHeatmap } from '../../vc/vc-observer/heatmap/heatmap';
 export declare const AbortEvent: {
     readonly wheel: "wheel";
     readonly keydown: "keydown";
@@ -30,7 +29,6 @@ export type VCRawDataType = {
     oldDomUpdatesEnabled: boolean;
     devToolsEnabled: boolean;
     ratios: VCRatioType;
-    multiHeatmap: MultiRevisionHeatmap | null;
 };
 export type VCEntryType = {
     time: number;

package/dist/types-ts4.5/config/index.d.ts

@@ -73,6 +73,7 @@ export type Config = {
         readonly selectorConfig?: SelectorConfig;
         readonly ssr?: boolean;
         readonly ssrWhitelist?: string[];
+        readonly ssrEnablePageLayoutPlaceholder?: boolean;
         readonly stopVCAtInteractionFinish?: boolean;
         /**
          * The revisions of TTVC that will be calculated

package/dist/types-ts4.5/create-post-interaction-log-payload/index.d.ts

@@ -26,8 +26,8 @@ declare function createPostInteractionLogPayload({ lastInteractionFinish, reactP
                     vc90: number | null;
                     vcClean: boolean;
                     type: import("../common").InteractionType;
-                    abortReason?: import("../common").AbortReasonType | undefined;
                     id: string;
+                    abortReason?: import("../common").AbortReasonType | undefined;
                     abortedByInteractionName?: string | undefined;
                     routeName: string | null;
                     experimentalVC90?: number | undefined;

package/dist/types-ts4.5/vc/types.d.ts

@@ -23,6 +23,7 @@ export type VCObserverOptions = {
     devToolsEnabled?: boolean | undefined;
     selectorConfig?: SelectorConfig | undefined;
     isPostInteraction?: boolean;
+    ssrEnablePageLayoutPlaceholder?: boolean;
 };
 export interface VCObserverInterface {
     start(startArg: {