@atlaskit/react-ufo 3.12.4 → 3.13.0

package/dist/es2019/vc/vc-observer-new/metric-calculator/percentile-calc/canvas-heatmap/index.js

@@ -27,6 +27,31 @@ async function calculateTTVCPercentiles({
   const totalPixels = canvasDimenstions.width * canvasDimenstions.height;
   return calculatePercentiles(timePixelCounts, elementMap, percentiles, totalPixels, startTime);
 }
+async function calculateTTVCPercentilesWithDebugInfo({
+  viewport,
+  orderedEntries,
+  startTime
+}) {
+  const canvas = new ViewportCanvas(viewport, fg('platform_ufo_canvas_heatmap_full_precision') ? 1 : 0.25);
+  const elementMap = new Map();
+  for (const entry of orderedEntries) {
+    if (!('rect' in entry.data)) {
+      continue;
+    }
+    const rect = entry.data.rect;
+    canvas.drawRect(rect, entry.time);
+    if (!elementMap.has(entry.time)) {
+      elementMap.set(entry.time, []);
+    }
+    elementMap.get(entry.time).push(entry.data);
+  }
+
+  // Get pixel counts
+  const timePixelCounts = await canvas.getPixelCounts();
+  const canvasDimensions = canvas.getScaledDimensions();
+  const totalPixels = canvasDimensions.width * canvasDimensions.height;
+  return calculatePercentilesWithDebugInfo(timePixelCounts, elementMap, totalPixels, startTime);
+}
 export default calculateTTVCPercentiles;
 export function calculatePercentiles(timePixelCounts, elementMap, unorderedPercentiles, totalPixels, startTime) {
   const results = {};
@@ -70,4 +95,22 @@ export function calculatePercentiles(timePixelCounts, elementMap, unorderedPerce
     previousResult = results[`${percentile}`];
   }
   return results;
-}
+}
+export function calculatePercentilesWithDebugInfo(timePixelCounts, elementMap, totalPixels, startTime) {
+  const results = new Array(elementMap.size);
+  let cumulativePixels = 0;
+  const sortedEntries = Array.from(timePixelCounts.entries()).sort(([timeA], [timeB]) => Number(timeA) - Number(timeB));
+  for (let i = 0; i < sortedEntries.length; i++) {
+    const [time, pixelCount] = sortedEntries[i];
+    cumulativePixels += pixelCount;
+    const percentCovered = cumulativePixels / totalPixels * 100;
+    const entryDatas = elementMap.get(time) || [];
+    results[i] = {
+      time: Math.round(Number(time - startTime)),
+      viewportPercentage: percentCovered,
+      entries: Array.from(entryDatas)
+    };
+  }
+  return results;
+}
+export { calculateTTVCPercentilesWithDebugInfo };

package/dist/es2019/vc/vc-observer-new/metric-calculator/percentile-calc/canvas-heatmap/test-with-debug-info.js

@@ -0,0 +1,75 @@
+import { calculatePercentilesWithDebugInfo } from './index';
+
+// Test utilities
+const createMockRect = (x = 0, y = 0, width = 100, height = 100) => new MockDOMRect(x, y, width, height);
+const createViewportEntry = (elementName, rect = createMockRect(), visible = true, type = 'mutation:element') => ({
+  elementName,
+  rect,
+  visible,
+  type
+});
+const createTimePixelCounts = counts => new Map(counts);
+const createElementMap = entries => new Map(entries);
+const createExpectedResult = (time, viewportPercentage, entries) => ({
+  time,
+  viewportPercentage,
+  entries
+});
+class MockDOMRect {
+  constructor(x, y, width, height) {
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+  }
+  get bottom() {
+    return this.y + this.height;
+  }
+  get left() {
+    return this.x;
+  }
+  get right() {
+    return this.x + this.width;
+  }
+  get top() {
+    return this.y;
+  }
+  toJSON() {
+    return {
+      x: this.x,
+      y: this.y,
+      width: this.width,
+      height: this.height
+    };
+  }
+}
+describe('calculatePercentilesWithDebugInfo', () => {
+  it('should correctly calculate percentiles with accumulated elements from timestamps', () => {
+    const timePixelCounts = createTimePixelCounts([[100, 10], [200, 20], [300, 10], [400, 10]]);
+    const elementMap = createElementMap([[100, [createViewportEntry('div'), createViewportEntry('span')]], [200, [createViewportEntry('img')]], [300, [createViewportEntry('p'), createViewportEntry('a')]], [400, [createViewportEntry('img')]]]);
+    const expected = [createExpectedResult(100, 20, [createViewportEntry('div'), createViewportEntry('span')]), createExpectedResult(200, 60, [createViewportEntry('img')]), createExpectedResult(300, 80, [createViewportEntry('p'), createViewportEntry('a')]), createExpectedResult(400, 100, [createViewportEntry('img')])];
+    const result = calculatePercentilesWithDebugInfo(timePixelCounts, elementMap, 50, 0);
+    expect(result).toEqual(expected);
+  });
+  it('should handle empty entries gracefully', () => {
+    const timePixelCounts = new Map();
+    const elementMap = new Map();
+    const expected = [];
+    const result = calculatePercentilesWithDebugInfo(timePixelCounts, elementMap, 100, 0);
+    expect(result).toEqual(expected);
+  });
+  it('should handle non-sequential timestamps', () => {
+    const timePixelCounts = createTimePixelCounts([[300, 70], [100, 30]]);
+    const elementMap = createElementMap([[300, [createViewportEntry('p'), createViewportEntry('a')]], [100, [createViewportEntry('div')]]]);
+    const expected = [createExpectedResult(100, 30, [createViewportEntry('div')]), createExpectedResult(300, 100, [createViewportEntry('p'), createViewportEntry('a')])];
+    const result = calculatePercentilesWithDebugInfo(timePixelCounts, elementMap, 100, 0);
+    expect(result).toEqual(expected);
+  });
+  it('should correctly calculate percentiles with startTime offset', () => {
+    const timePixelCounts = createTimePixelCounts([[100, 10], [200, 20], [300, 10], [400, 10]]);
+    const elementMap = createElementMap([[100, [createViewportEntry('div'), createViewportEntry('span')]], [200, [createViewportEntry('img')]], [300, [createViewportEntry('p'), createViewportEntry('a')]], [400, [createViewportEntry('img')]]]);
+    const expected = [createExpectedResult(50, 20, [createViewportEntry('div'), createViewportEntry('span')]), createExpectedResult(150, 60, [createViewportEntry('img')]), createExpectedResult(250, 80, [createViewportEntry('p'), createViewportEntry('a')]), createExpectedResult(350, 100, [createViewportEntry('img')])];
+    const result = calculatePercentilesWithDebugInfo(timePixelCounts, elementMap, 50, 50);
+    expect(result).toEqual(expected);
+  });
+});

package/dist/es2019/vc/vc-observer-new/metric-calculator/percentile-calc/index.js

@@ -1,20 +1,2 @@
-import calcUsingCanvas from './canvas-heatmap';
-import calcUsingOldHeatmap from './heatmap';
-import calcUsingRectSweepingLine from './rect-sweeping-line';
-async function calculateTTVCPercentiles(arg) {
-  const algo = 'canvas_heatmap';
-  if (algo === 'canvas_heatmap') {
-    const vcDetails = await calcUsingCanvas(arg);
-    return vcDetails;
-  }
-  if (algo === 'rect_sweeping') {
-    const vcDetails = await calcUsingRectSweepingLine(arg);
-    return vcDetails;
-  }
-  if (algo === 'old_heatmap') {
-    const vcDetails = await calcUsingOldHeatmap(arg);
-    return vcDetails;
-  }
-  throw new Error('unexpected Error algo not chosen correctly');
-}
-export default calculateTTVCPercentiles;
+export { default as calculateTTVCPercentiles } from './canvas-heatmap';
+export { calculateTTVCPercentilesWithDebugInfo } from './canvas-heatmap';

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

@@ -108,7 +108,9 @@ export default class ViewportObserver {
     });
     _defineProperty(this, "handleAttributeMutation", ({
       target,
-      attributeName
+      attributeName,
+      oldValue,
+      newValue
     }) => {
       var _this$intersectionObs4;
       (_this$intersectionObs4 = this.intersectionObserver) === null || _this$intersectionObs4 === void 0 ? void 0 : _this$intersectionObs4.watchAndTag(target, ({
@@ -119,7 +121,9 @@ export default class ViewportObserver {
           return {
             type: 'mutation:media',
             mutationData: {
-              attributeName
+              attributeName,
+              oldValue,
+              newValue
             }
           };
         }
@@ -131,7 +135,9 @@ export default class ViewportObserver {
           return {
             type: 'mutation:attribute:non-visual-style',
             mutationData: {
-              attributeName
+              attributeName,
+              oldValue,
+              newValue
             }
           };
         }
@@ -140,14 +146,18 @@ export default class ViewportObserver {
           return {
             type: 'mutation:attribute:no-layout-shift',
             mutationData: {
-              attributeName
+              attributeName,
+              oldValue,
+              newValue
             }
           };
         }
         return {
           type: 'mutation:attribute',
           mutationData: {
-            attributeName
+            attributeName,
+            oldValue,
+            newValue
           }
         };
       });

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

@@ -30,7 +30,9 @@ function createMutationObserver({
           var _mut$attributeName;
           onAttributeMutation({
             target: mut.target,
-            attributeName: (_mut$attributeName = mut.attributeName) !== null && _mut$attributeName !== void 0 ? _mut$attributeName : 'unknown'
+            attributeName: (_mut$attributeName = mut.attributeName) !== null && _mut$attributeName !== void 0 ? _mut$attributeName : 'unknown',
+            oldValue,
+            newValue
           });
         }
         continue;

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

@@ -101,7 +101,8 @@ function _getExperimentalVCMetrics() {
             isEventAborted: !!interaction.abortReason,
             prefix: prefix,
             vc: interaction.vc,
-            experienceKey: interaction.ufoName
+            experienceKey: interaction.ufoName,
+            interactionId: interaction.id
           });
         case 4:
           result = _context.sent;

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

@@ -58,7 +58,8 @@ function _getVCMetrics() {
             prefix: prefix,
             vc: interaction.vc,
             isEventAborted: interactionStatus.originalInteractionStatus !== 'SUCCEEDED',
-            experienceKey: interaction.ufoName
+            experienceKey: interaction.ufoName,
+            interactionId: interaction.id
           }, ssr));
         case 18:
           result = _context.sent;

package/dist/esm/vc/index.js

@@ -122,7 +122,8 @@ export var VCObserverWrapper = /*#__PURE__*/function () {
               _context.next = 13;
               return (_this$newVCObserver5 = this.newVCObserver) === null || _this$newVCObserver5 === void 0 ? void 0 : _this$newVCObserver5.getVCResult({
                 start: param.start,
-                stop: param.stop
+                stop: param.stop,
+                interactionId: param.interactionId
               });
             case 13:
               _context.t1 = _context.sent;
@@ -149,7 +150,8 @@ export var VCObserverWrapper = /*#__PURE__*/function () {
               _context.next = 28;
               return (_this$newVCObserver6 = this.newVCObserver) === null || _this$newVCObserver6 === void 0 ? void 0 : _this$newVCObserver6.getVCResult({
                 start: param.start,
-                stop: param.stop
+                stop: param.stop,
+                interactionId: param.interactionId
               });
             case 28:
               newResult = _context.sent;

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

@@ -0,0 +1,35 @@
+export function getVCRevisionDebugDetails(_ref) {
+  var revision = _ref.revision,
+    isClean = _ref.isClean,
+    abortReason = _ref.abortReason,
+    VCEntries = _ref.VCEntries,
+    componentsLog = _ref.componentsLog,
+    interactionId = _ref.interactionId;
+  return {
+    revision: revision,
+    isClean: isClean,
+    abortReason: abortReason,
+    vcLogs: VCEntries.map(function (entry) {
+      return {
+        time: entry.time,
+        viewportPercentage: entry.vc,
+        entries: entry.elements.map(function (element) {
+          var _componentsLog$entry$;
+          var logEntry = (_componentsLog$entry$ = componentsLog[entry.time]) === null || _componentsLog$entry$ === void 0 ? void 0 : _componentsLog$entry$.find(function (log) {
+            return log.targetName === element;
+          });
+          return {
+            elementName: element,
+            type: logEntry === null || logEntry === void 0 ? void 0 : logEntry.type,
+            rect: logEntry === null || logEntry === void 0 ? void 0 : logEntry.intersectionRect,
+            visible: true,
+            attributeName: logEntry === null || logEntry === void 0 ? void 0 : logEntry.attributeName,
+            oldValue: logEntry === null || logEntry === void 0 ? void 0 : logEntry.oldValue,
+            newValue: logEntry === null || logEntry === void 0 ? void 0 : logEntry.newValue
+          };
+        })
+      };
+    }),
+    interactionId: interactionId
+  };
+}

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

@@ -13,6 +13,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { isVCRevisionEnabled } from '../../config';
 import { getActiveInteraction } from '../../interaction-metrics';
 import { attachAbortListeners } from './attachAbortListeners';
+import { getVCRevisionDebugDetails } from './getVCRevisionDebugDetails';
 import { getVCRevisionsData } from './getVCRevisionsData';
 import { getViewportHeight, getViewportWidth } from './getViewport';
 import { MultiRevisionHeatmap } from './heatmap/heatmap';
@@ -99,11 +100,11 @@ 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, 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, 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, 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;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
-              start = _ref3.start, stop = _ref3.stop, tti = _ref3.tti, prefix = _ref3.prefix, ssr = _ref3.ssr, vc = _ref3.vc, isEventAborted = _ref3.isEventAborted, experienceKey = _ref3.experienceKey;
+              start = _ref3.start, stop = _ref3.stop, tti = _ref3.tti, prefix = _ref3.prefix, ssr = _ref3.ssr, vc = _ref3.vc, isEventAborted = _ref3.isEventAborted, experienceKey = _ref3.experienceKey, interactionId = _ref3.interactionId;
               startTime = performance.now(); // add local measurement
               fullPrefix = prefix !== undefined && prefix !== '' ? "".concat(prefix, ":") : '';
               rawData = vc !== undefined ? vc : _this.getVCRawData();
@@ -280,6 +281,31 @@ export var VCObserver = /*#__PURE__*/function () {
                       entries: isTTVCv1Disabled ? vcNext.VCEntries.rel : VCEntries.rel
                     }
                   }));
+
+                  // Add devtool callback for both v1 and v2
+                  if (typeof window.__ufo_devtool_onVCRevisionReady__ === 'function' && fg('platform_ufo_ttvc_v3_devtool')) {
+                    // Handle v1 if not disabled
+                    if (!isTTVCv1Disabled) {
+                      (_ufo_devtool_onVCRev = (_ref9 = window).__ufo_devtool_onVCRevisionReady__) === null || _ufo_devtool_onVCRev === void 0 || _ufo_devtool_onVCRev.call(_ref9, getVCRevisionDebugDetails({
+                        revision: 'fy25.01',
+                        isClean: !abortReasonInfo,
+                        abortReason: abortReason.reason,
+                        VCEntries: VCEntries.rel,
+                        componentsLog: componentsLog,
+                        interactionId: interactionId
+                      }));
+                    }
+
+                    // Handle v2
+                    (_ufo_devtool_onVCRev2 = (_ref10 = window).__ufo_devtool_onVCRevisionReady__) === null || _ufo_devtool_onVCRev2 === void 0 || _ufo_devtool_onVCRev2.call(_ref10, getVCRevisionDebugDetails({
+                      revision: 'fy25.02',
+                      isClean: !abortReasonInfo,
+                      abortReason: abortReason.reason,
+                      VCEntries: vcNext.VCEntries.rel,
+                      componentsLog: componentsLog,
+                      interactionId: interactionId
+                    }));
+                  }
                 }
               } catch (e) {
                 /*  do nothing */
@@ -380,16 +406,16 @@ export var VCObserver = /*#__PURE__*/function () {
         });
       }
     });
-    _defineProperty(this, "onViewportChangeDetected", function (_ref9) {
-      var element = _ref9.element,
-        type = _ref9.type,
-        ignoreReason = _ref9.ignoreReason,
-        timestamp = _ref9.timestamp,
-        targetName = _ref9.targetName,
-        intersectionRect = _ref9.intersectionRect,
-        attributeName = _ref9.attributeName,
-        oldValue = _ref9.oldValue,
-        newValue = _ref9.newValue;
+    _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;
       }
@@ -474,10 +500,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 (_ref10) {
-          var _ref11 = _slicedToArray(_ref10, 2),
-            key = _ref11[0],
-            time = _ref11[1];
+        Object.entries(window.__SSR_ABORT_LISTENERS__.aborts).forEach(function (_ref12) {
+          var _ref13 = _slicedToArray(_ref12, 2),
+            key = _ref13[0],
+            time = _ref13[1];
           if (time) {
             _this.abortReasonCallback(key, time);
           }
@@ -490,6 +516,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,
@@ -497,6 +524,9 @@ export var VCObserver = /*#__PURE__*/function () {
         role: false,
         className: true,
         dataVC: true
+      },
+      SSRConfig: {
+        enablePageLayoutPlaceholder: ssrEnablePageLayoutPlaceholder || false
       }
     });
     this.heatmap = !isVCRevisionEnabled('fy25.01') ? [] : this.getCleanHeatmap();
@@ -510,8 +540,8 @@ export var VCObserver = /*#__PURE__*/function () {
   }
   return _createClass(VCObserver, [{
     key: "start",
-    value: function start(_ref12) {
-      var startTime = _ref12.startTime;
+    value: function start(_ref14) {
+      var startTime = _ref14.startTime;
       this.active = true;
       if (this.observers.isBrowserSupported()) {
         this.setViewportSize();
@@ -533,12 +563,12 @@ export var VCObserver = /*#__PURE__*/function () {
   }, {
     key: "getIgnoredElements",
     value: function getIgnoredElements(componentsLog) {
-      return Object.values(componentsLog).flat().filter(function (_ref13) {
-        var ignoreReason = _ref13.ignoreReason;
+      return Object.values(componentsLog).flat().filter(function (_ref15) {
+        var ignoreReason = _ref15.ignoreReason;
         return Boolean(ignoreReason);
-      }).map(function (_ref14) {
-        var targetName = _ref14.targetName,
-          ignoreReason = _ref14.ignoreReason;
+      }).map(function (_ref16) {
+        var targetName = _ref16.targetName,
+          ignoreReason = _ref16.ignoreReason;
         return {
           targetName: targetName,
           ignoreReason: ignoreReason
@@ -661,12 +691,12 @@ export var VCObserver = /*#__PURE__*/function () {
     }
   }], [{
     key: "calculateVC",
-    value: function calculateVC(_ref15) {
-      var heatmap = _ref15.heatmap,
-        _ref15$ssr = _ref15.ssr,
-        ssr = _ref15$ssr === void 0 ? UNUSED_SECTOR : _ref15$ssr,
-        componentsLog = _ref15.componentsLog,
-        viewport = _ref15.viewport;
+    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;
       var lastUpdate = {};
       var totalPainted = 0;
       if (ssr !== UNUSED_SECTOR) {
@@ -732,11 +762,11 @@ export var VCObserver = /*#__PURE__*/function () {
         });
         return VCRatio;
       }, 0);
-      var VCEntries = entries.reduce(function (acc, _ref16, i) {
+      var VCEntries = entries.reduce(function (acc, _ref18, i) {
         var _acc$abs, _componentsLog$timest, _acc$rel$vc, _acc$rel;
-        var _ref17 = _slicedToArray(_ref16, 2),
-          timestamp = _ref17[0],
-          entryPainted = _ref17[1];
+        var _ref19 = _slicedToArray(_ref18, 2),
+          timestamp = _ref19[0],
+          entryPainted = _ref19[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;
+    }
+  }
 }