@atlaskit/react-ufo 3.12.5 → 3.13.1

package/dist/es2019/vc/index.js

@@ -1,5 +1,4 @@
 var _process, _process$env;
-import { fg } from '@atlaskit/platform-feature-flags';
 import { isVCRevisionEnabled } from '../config';
 import { VCObserverNOOP } from './no-op-vc-observer';
 import { VCObserver } from './vc-observer';
@@ -7,22 +6,13 @@ import VCObserverNew from './vc-observer-new';
 export class VCObserverWrapper {
   constructor(opts = {}) {
     this.newVCObserver = null;
-    if (fg('platform_ufo_vc_enable_revisions_by_experience')) {
-      this.oldVCObserver = null;
-      if (isVCRevisionEnabled('fy25.03')) {
-        this.newVCObserver = new VCObserverNew({
-          selectorConfig: opts.selectorConfig
-        });
-      }
-      if (isVCRevisionEnabled('fy25.01') || isVCRevisionEnabled('fy25.02')) {
-        this.oldVCObserver = new VCObserver(opts);
-      }
-    } else {
-      if (isVCRevisionEnabled('fy25.03')) {
-        this.newVCObserver = new VCObserverNew({
-          selectorConfig: opts.selectorConfig
-        });
-      }
+    this.oldVCObserver = null;
+    if (isVCRevisionEnabled('fy25.03')) {
+      this.newVCObserver = new VCObserverNew({
+        selectorConfig: opts.selectorConfig
+      });
+    }
+    if (isVCRevisionEnabled('fy25.01') || isVCRevisionEnabled('fy25.02')) {
       this.oldVCObserver = new VCObserver(opts);
     }
   }
@@ -30,96 +20,62 @@ export class VCObserverWrapper {
     startTime,
     experienceKey
   }) {
-    if (fg('platform_ufo_vc_enable_revisions_by_experience')) {
-      if (isVCRevisionEnabled('fy25.01', experienceKey) || isVCRevisionEnabled('fy25.02', experienceKey)) {
-        var _this$oldVCObserver;
-        (_this$oldVCObserver = this.oldVCObserver) === null || _this$oldVCObserver === void 0 ? void 0 : _this$oldVCObserver.start({
-          startTime
-        });
-      }
-      if (isVCRevisionEnabled('fy25.03', experienceKey)) {
-        var _this$newVCObserver;
-        (_this$newVCObserver = this.newVCObserver) === null || _this$newVCObserver === void 0 ? void 0 : _this$newVCObserver.start({
-          startTime
-        });
-      }
-    } else {
-      var _this$oldVCObserver2, _this$newVCObserver2;
-      (_this$oldVCObserver2 = this.oldVCObserver) === null || _this$oldVCObserver2 === void 0 ? void 0 : _this$oldVCObserver2.start({
+    if (isVCRevisionEnabled('fy25.01', experienceKey) || isVCRevisionEnabled('fy25.02', experienceKey)) {
+      var _this$oldVCObserver;
+      (_this$oldVCObserver = this.oldVCObserver) === null || _this$oldVCObserver === void 0 ? void 0 : _this$oldVCObserver.start({
         startTime
       });
-      (_this$newVCObserver2 = this.newVCObserver) === null || _this$newVCObserver2 === void 0 ? void 0 : _this$newVCObserver2.start({
+    }
+    if (isVCRevisionEnabled('fy25.03', experienceKey)) {
+      var _this$newVCObserver;
+      (_this$newVCObserver = this.newVCObserver) === null || _this$newVCObserver === void 0 ? void 0 : _this$newVCObserver.start({
         startTime
       });
     }
   }
   stop(experienceKey) {
-    if (fg('platform_ufo_vc_enable_revisions_by_experience')) {
-      if (isVCRevisionEnabled('fy25.01', experienceKey) || isVCRevisionEnabled('fy25.02', experienceKey)) {
-        var _this$oldVCObserver3;
-        (_this$oldVCObserver3 = this.oldVCObserver) === null || _this$oldVCObserver3 === void 0 ? void 0 : _this$oldVCObserver3.stop();
-      }
-      if (isVCRevisionEnabled('fy25.03', experienceKey)) {
-        var _this$newVCObserver3;
-        (_this$newVCObserver3 = this.newVCObserver) === null || _this$newVCObserver3 === void 0 ? void 0 : _this$newVCObserver3.stop();
-      }
-    } else {
-      var _this$oldVCObserver4, _this$newVCObserver4;
-      (_this$oldVCObserver4 = this.oldVCObserver) === null || _this$oldVCObserver4 === void 0 ? void 0 : _this$oldVCObserver4.stop();
-      (_this$newVCObserver4 = this.newVCObserver) === null || _this$newVCObserver4 === void 0 ? void 0 : _this$newVCObserver4.stop();
+    if (isVCRevisionEnabled('fy25.01', experienceKey) || isVCRevisionEnabled('fy25.02', experienceKey)) {
+      var _this$oldVCObserver2;
+      (_this$oldVCObserver2 = this.oldVCObserver) === null || _this$oldVCObserver2 === void 0 ? void 0 : _this$oldVCObserver2.stop();
+    }
+    if (isVCRevisionEnabled('fy25.03', experienceKey)) {
+      var _this$newVCObserver2;
+      (_this$newVCObserver2 = this.newVCObserver) === null || _this$newVCObserver2 === void 0 ? void 0 : _this$newVCObserver2.stop();
     }
   }
   getVCRawData() {
-    var _this$oldVCObserver$g, _this$oldVCObserver5;
-    return (_this$oldVCObserver$g = (_this$oldVCObserver5 = this.oldVCObserver) === null || _this$oldVCObserver5 === void 0 ? void 0 : _this$oldVCObserver5.getVCRawData()) !== null && _this$oldVCObserver$g !== void 0 ? _this$oldVCObserver$g : null;
+    var _this$oldVCObserver$g, _this$oldVCObserver3;
+    return (_this$oldVCObserver$g = (_this$oldVCObserver3 = this.oldVCObserver) === null || _this$oldVCObserver3 === void 0 ? void 0 : _this$oldVCObserver3.getVCRawData()) !== null && _this$oldVCObserver$g !== void 0 ? _this$oldVCObserver$g : null;
   }
   async getVCResult(param) {
-    if (fg('platform_ufo_vc_enable_revisions_by_experience')) {
-      var _this$oldVCObserver6, _this$newVCObserver5, _ref;
-      const {
-        experienceKey
-      } = param;
-      const v1v2Result = isVCRevisionEnabled('fy25.01', experienceKey) || isVCRevisionEnabled('fy25.02', experienceKey) ? await ((_this$oldVCObserver6 = this.oldVCObserver) === null || _this$oldVCObserver6 === void 0 ? void 0 : _this$oldVCObserver6.getVCResult(param)) : {};
-      const v3Result = isVCRevisionEnabled('fy25.03', experienceKey) ? await ((_this$newVCObserver5 = this.newVCObserver) === null || _this$newVCObserver5 === void 0 ? void 0 : _this$newVCObserver5.getVCResult({
-        start: param.start,
-        stop: param.stop,
-        interactionId: param.interactionId
-      })) : [];
-      if (!v3Result) {
-        return v1v2Result !== null && v1v2Result !== void 0 ? v1v2Result : {};
-      }
-      return {
-        ...v1v2Result,
-        'ufo:vc:rev': [...((_ref = v1v2Result === null || v1v2Result === void 0 ? void 0 : v1v2Result['ufo:vc:rev']) !== null && _ref !== void 0 ? _ref : []), ...(v3Result !== null && v3Result !== void 0 ? v3Result : [])]
-      };
-    } else {
-      var _this$oldVCObserver7, _this$newVCObserver6, _ref2;
-      const oldResult = await ((_this$oldVCObserver7 = this.oldVCObserver) === null || _this$oldVCObserver7 === void 0 ? void 0 : _this$oldVCObserver7.getVCResult(param));
-      const newResult = await ((_this$newVCObserver6 = this.newVCObserver) === null || _this$newVCObserver6 === void 0 ? void 0 : _this$newVCObserver6.getVCResult({
-        start: param.start,
-        stop: param.stop,
-        interactionId: param.interactionId
-      }));
-      if (oldResult && !newResult) {
-        return oldResult;
-      }
-      return {
-        ...(oldResult !== null && oldResult !== void 0 ? oldResult : {}),
-        'ufo:vc:rev': [...((_ref2 = oldResult === null || oldResult === void 0 ? void 0 : oldResult['ufo:vc:rev']) !== null && _ref2 !== void 0 ? _ref2 : []), ...(newResult !== null && newResult !== void 0 ? newResult : [])]
-      };
+    var _this$oldVCObserver4, _this$newVCObserver3, _ref;
+    const {
+      experienceKey
+    } = param;
+    const v1v2Result = isVCRevisionEnabled('fy25.01', experienceKey) || isVCRevisionEnabled('fy25.02', experienceKey) ? await ((_this$oldVCObserver4 = this.oldVCObserver) === null || _this$oldVCObserver4 === void 0 ? void 0 : _this$oldVCObserver4.getVCResult(param)) : {};
+    const v3Result = isVCRevisionEnabled('fy25.03', experienceKey) ? await ((_this$newVCObserver3 = this.newVCObserver) === null || _this$newVCObserver3 === void 0 ? void 0 : _this$newVCObserver3.getVCResult({
+      start: param.start,
+      stop: param.stop
+    })) : [];
+    if (!v3Result) {
+      return v1v2Result !== null && v1v2Result !== void 0 ? v1v2Result : {};
     }
+    return {
+      ...v1v2Result,
+      'ufo:vc:rev': [...((_ref = v1v2Result === null || v1v2Result === void 0 ? void 0 : v1v2Result['ufo:vc:rev']) !== null && _ref !== void 0 ? _ref : []), ...(v3Result !== null && v3Result !== void 0 ? v3Result : [])]
+    };
   }
   setSSRElement(element) {
-    var _this$oldVCObserver8;
-    (_this$oldVCObserver8 = this.oldVCObserver) === null || _this$oldVCObserver8 === void 0 ? void 0 : _this$oldVCObserver8.setSSRElement(element);
+    var _this$oldVCObserver5;
+    (_this$oldVCObserver5 = this.oldVCObserver) === null || _this$oldVCObserver5 === void 0 ? void 0 : _this$oldVCObserver5.setSSRElement(element);
   }
   setReactRootRenderStart(startTime) {
-    var _this$oldVCObserver9;
-    (_this$oldVCObserver9 = this.oldVCObserver) === null || _this$oldVCObserver9 === void 0 ? void 0 : _this$oldVCObserver9.setReactRootRenderStart(startTime || performance.now());
+    var _this$oldVCObserver6;
+    (_this$oldVCObserver6 = this.oldVCObserver) === null || _this$oldVCObserver6 === void 0 ? void 0 : _this$oldVCObserver6.setReactRootRenderStart(startTime || performance.now());
   }
   setReactRootRenderStop(stopTime) {
-    var _this$oldVCObserver10;
-    (_this$oldVCObserver10 = this.oldVCObserver) === null || _this$oldVCObserver10 === void 0 ? void 0 : _this$oldVCObserver10.setReactRootRenderStop(stopTime || performance.now());
+    var _this$oldVCObserver7;
+    (_this$oldVCObserver7 = this.oldVCObserver) === null || _this$oldVCObserver7 === void 0 ? void 0 : _this$oldVCObserver7.setReactRootRenderStop(stopTime || performance.now());
   }
 }
 

package/dist/es2019/vc/vc-observer/getVCRevisionsData.js

@@ -1,7 +1,5 @@
-import { fg } from '@atlaskit/platform-feature-flags';
 import { isVCRevisionEnabled } from '../../config';
 import { getPageVisibilityState } from '../../hidden-timing';
-import { getRevisions } from './revisions/revisions';
 const VCParts = ['25', '50', '75', '80', '85', '90', '95', '98', '99'];
 const READONLY_EMPTY_ARRAY = Array.from({
   length: 0
@@ -33,85 +31,31 @@ export function getVCRevisionsData({
   interaction,
   isVCClean,
   isEventAborted,
-  multiHeatmap,
-  ssr,
   calculatedVC,
   calculatedVCNext,
   experienceKey
 }) {
-  const isTTVCv3Enabled = fg('platform_ufo_vc_enable_revisions_by_experience') ? isVCRevisionEnabled('fy25.03', experienceKey) : isVCRevisionEnabled('fy25.03');
-
-  // As part of `platform_ufo_vc_enable_revisions_by_experience`, we are looking to turn off the `multiHeatmap` branch of code
-  // for calculating TTVC, and instead rely on existing values already available, e.g. `calculatedVC` and `calculatedVCNext`
-  if (!isTTVCv3Enabled && !fg('platform_ufo_vc_enable_revisions_by_experience')) {
-    if (!multiHeatmap) {
-      return null;
-    }
-    return {
-      [`${fullPrefix}vc:rev`]: multiHeatmap === null || multiHeatmap === void 0 ? void 0 : multiHeatmap.getPayloadShapedData({
-        VCParts: VCParts.map(v => parseInt(v)),
-        VCCalculationMethods: getRevisions().map(({
-          classifier
-        }) => classifier.VCCalculationMethod),
-        filterComponentsLog: getRevisions().map(({
-          classifier
-        }) => classifier.filterComponentsLog),
-        isEventAborted,
-        interactionStart: interaction.start,
-        ttai: interaction.end,
-        ssr,
-        clean: isVCClean
-      })
-    };
-  }
   const pageVisibilityUpToTTAI = getPageVisibilityState(interaction.start, interaction.end);
   const isVisiblePageVisibleUpToTTAI = pageVisibilityUpToTTAI === 'visible';
   const shouldHaveVCmetric = isVCClean && !isEventAborted && isVisiblePageVisibleUpToTTAI;
-  if (fg('platform_ufo_vc_enable_revisions_by_experience')) {
-    const availableVCRevisionPayloads = [];
-    if (isVCRevisionEnabled('fy25.01', experienceKey)) {
-      availableVCRevisionPayloads.push({
-        revision: 'fy25.01',
-        clean: isVCClean,
-        'metric:vc90': shouldHaveVCmetric ? calculatedVC.VC['90'] : null,
-        vcDetails: createVCDetails(calculatedVC, shouldHaveVCmetric)
-      });
-    }
-    if (isVCRevisionEnabled('fy25.02', experienceKey)) {
-      availableVCRevisionPayloads.push({
-        revision: 'fy25.02',
-        clean: isVCClean,
-        'metric:vc90': shouldHaveVCmetric ? calculatedVCNext.VC['90'] : null,
-        vcDetails: createVCDetails(calculatedVCNext, shouldHaveVCmetric)
-      });
-    }
-    return {
-      [`${fullPrefix}vc:rev`]: availableVCRevisionPayloads
-    };
-  } else {
-    // Create the V2 revision object which is always needed
-    const ttvcV2Revision = {
-      revision: 'fy25.02',
-      clean: isVCClean,
-      'metric:vc90': shouldHaveVCmetric ? calculatedVCNext.VC['90'] : null,
-      vcDetails: createVCDetails(calculatedVCNext, shouldHaveVCmetric)
-    };
-    const isTTVCv1Disabled = !isVCRevisionEnabled('fy25.01');
-    if (isTTVCv1Disabled) {
-      return {
-        [`${fullPrefix}vc:rev`]: [ttvcV2Revision]
-      };
-    }
-
-    // Only create ttvcV1Revision when we're actually going to use it
-    const ttvcV1Revision = {
+  const availableVCRevisionPayloads = [];
+  if (isVCRevisionEnabled('fy25.01', experienceKey)) {
+    availableVCRevisionPayloads.push({
       revision: 'fy25.01',
       clean: isVCClean,
       'metric:vc90': shouldHaveVCmetric ? calculatedVC.VC['90'] : null,
       vcDetails: createVCDetails(calculatedVC, shouldHaveVCmetric)
-    };
-    return {
-      [`${fullPrefix}vc:rev`]: [ttvcV1Revision, ttvcV2Revision]
-    };
+    });
+  }
+  if (isVCRevisionEnabled('fy25.02', experienceKey)) {
+    availableVCRevisionPayloads.push({
+      revision: 'fy25.02',
+      clean: isVCClean,
+      'metric:vc90': shouldHaveVCmetric ? calculatedVCNext.VC['90'] : null,
+      vcDetails: createVCDetails(calculatedVCNext, shouldHaveVCmetric)
+    });
   }
+  return {
+    [`${fullPrefix}vc:rev`]: availableVCRevisionPayloads
+  };
 }

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

@@ -6,9 +6,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';
 const abortReason = {
   scroll: 'scroll',
   keypress: 'keypress',
@@ -41,7 +39,6 @@ export class VCObserver {
     });
     /* heatmap */
     _defineProperty(this, "arraySize", 0);
-    _defineProperty(this, "multiHeatmap", null);
     _defineProperty(this, "componentsLog", {});
     _defineProperty(this, "vcRatios", {});
     _defineProperty(this, "active", false);
@@ -75,7 +72,6 @@ export class VCObserver {
         },
         heatmap: this.heatmap,
         heatmapNext: this.heatmapNext,
-        multiHeatmap: this.multiHeatmap,
         outOfBoundaryInfo: this.outOfBoundaryInfo,
         totalTime: Math.round(this.totalTime + this.observers.getTotalTime()),
         componentsLog: {
@@ -117,10 +113,9 @@ export class VCObserver {
         componentsLog,
         viewport,
         devToolsEnabled,
-        ratios,
-        multiHeatmap
+        ratios
       } = rawData;
-      const isTTVCv1Disabled = fg('platform_ufo_vc_enable_revisions_by_experience') ? !isVCRevisionEnabled('fy25.01', experienceKey) : !isVCRevisionEnabled('fy25.01');
+      const 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
@@ -339,8 +334,6 @@ export class VCObserver {
           end: stop
         },
         isVCClean,
-        multiHeatmap,
-        ssr,
         calculatedVC: {
           VC,
           VCBox
@@ -367,7 +360,7 @@ export class VCObserver {
           ...speedIndex
         };
       }
-      const isTTVCv3Enabled = fg('platform_ufo_vc_enable_revisions_by_experience') ? isVCRevisionEnabled('fy25.03', experienceKey) : isVCRevisionEnabled('fy25.03');
+      const isTTVCv3Enabled = isVCRevisionEnabled('fy25.03', experienceKey);
       return {
         'metrics:vc': VC,
         [`${fullPrefix}vc:state`]: true,
@@ -390,29 +383,6 @@ export class VCObserver {
       };
     });
     _defineProperty(this, "handleUpdate", (rawTime, intersectionRect, targetName, element, type, ignoreReason, attributeName, oldValue, newValue) => {
-      this.measureStart();
-      this.legacyHandleUpdate(rawTime, intersectionRect, targetName, element, type, ignoreReason, attributeName, oldValue, newValue);
-      let isTTVCv3Disabled = !isVCRevisionEnabled('fy25.03');
-      if (fg('platform_ufo_vc_enable_revisions_by_experience')) {
-        const interaction = getActiveInteraction();
-        isTTVCv3Disabled = !isVCRevisionEnabled('fy25.03', interaction === null || interaction === void 0 ? void 0 : interaction.ufoName);
-      }
-      if (isTTVCv3Disabled) {
-        this.onViewportChangeDetected({
-          timestamp: rawTime,
-          intersectionRect,
-          targetName,
-          element,
-          type,
-          ignoreReason,
-          attributeName,
-          oldValue,
-          newValue
-        });
-      }
-      this.measureStop();
-    });
-    _defineProperty(this, "legacyHandleUpdate", (rawTime, intersectionRect, targetName, element, type, ignoreReason, attributeName, oldValue, newValue) => {
       if (this.abortReason.reason === null || this.abortReason.blocking === false) {
         const time = Math.round(rawTime - this.startTime);
         const mappedValues = this.mapPixelsToHeatmap(intersectionRect.left, intersectionRect.top, intersectionRect.width, intersectionRect.height);
@@ -420,11 +390,8 @@ export class VCObserver {
         if (!ignoreReason) {
           this.applyChangesToHeatMap(mappedValues, time, this.heatmapNext);
         }
-        let isTTVCv1Disabled = !isVCRevisionEnabled('fy25.01');
-        if (fg('platform_ufo_vc_enable_revisions_by_experience')) {
-          const interaction = getActiveInteraction();
-          isTTVCv1Disabled = !isVCRevisionEnabled('fy25.01', interaction === null || interaction === void 0 ? void 0 : interaction.ufoName);
-        }
+        const interaction = getActiveInteraction();
+        const 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);
         }
@@ -443,45 +410,6 @@ export class VCObserver {
         });
       }
     });
-    _defineProperty(this, "onViewportChangeDetected", ({
-      element,
-      type,
-      ignoreReason,
-      timestamp,
-      targetName,
-      intersectionRect,
-      attributeName,
-      oldValue,
-      newValue
-    }) => {
-      if (this.multiHeatmap === null) {
-        return;
-      }
-      // @todo add abort reason handling
-      const time = Math.round(timestamp - this.startTime);
-      const revisions = getRevisions();
-      const revisionsClassification = revisions.map(revision => {
-        return revision.classifier.classifyUpdate({
-          element,
-          type,
-          ignoreReason
-        });
-      }, []);
-      this.multiHeatmap.handleUpdate({
-        time,
-        targetName,
-        intersectionRect,
-        type,
-        element,
-        classification: revisionsClassification,
-        onError: error => {
-          this.setAbortReason(abortReason.error, error.time, error.error);
-        },
-        attributeName,
-        oldValue,
-        newValue
-      });
-    });
     _defineProperty(this, "mapPixelsToHeatmap", (left, top, width, height) => {
       const {
         w,
@@ -554,6 +482,9 @@ export class VCObserver {
     this.arraySize = options.heatmapSize || 200;
     this.devToolsEnabled = options.devToolsEnabled || false;
     this.oldDomUpdatesEnabled = options.oldDomUpdates || false;
+    const {
+      ssrEnablePageLayoutPlaceholder
+    } = options;
     this.observers = new Observers({
       selectorConfig: options.selectorConfig || {
         id: false,
@@ -561,15 +492,13 @@ export class VCObserver {
         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;
   }
   start({
@@ -721,11 +650,6 @@ export class VCObserver {
     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 = {};

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

@@ -20,6 +20,7 @@ function isElementVisible(target) {
 }
 export class Observers {
   constructor(opts) {
+    var _opts$SSRConfig;
     _defineProperty(this, "observedMutations", new WeakMap());
     _defineProperty(this, "elementsInView", new Set());
     _defineProperty(this, "callbacks", new Set());
@@ -59,7 +60,7 @@ export class Observers {
     };
     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);
   }
   isBrowserSupported() {
     return typeof window.IntersectionObserver === 'function' && typeof window.MutationObserver === 'function';

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

@@ -1,12 +1,35 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const ANCESTOR_LOOKUP_LIMIT = 10;
+const PAGE_LAYOUT_ID = 'page-layout.root';
 export class SSRPlaceholderHandlers {
-  constructor() {
+  constructor(enablePageLayoutPlaceholder = false) {
     _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", el => {
+      var _el$dataset;
+      const ssrPlaceholderId = el === null || el === void 0 ? 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", el => {
+      var _el$dataset2;
+      const ssrPlaceholderReplaceId = el === null || el === void 0 ? 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", ({
       target,
       boundingClientRect
@@ -17,7 +40,7 @@ export class SSRPlaceholderHandlers {
         // impossible case - keep typescript healthy
         return;
       }
-      const staticKey = target.dataset.ssrPlaceholder || '';
+      const staticKey = this.getPlaceholderId(target);
       if (staticKey) {
         if (this.staticPlaceholders.has(staticKey) && this.callbacks.has(staticKey)) {
           // validation
@@ -39,7 +62,7 @@ export class SSRPlaceholderHandlers {
           this.callbacks.delete(staticKey);
         }
       } else {
-        const key = target.dataset.ssrPlaceholderReplace || '';
+        const key = this.getPlaceholderReplacementId(target);
         const resolve = this.reactValidateCallbacks.get(key);
         if (!resolve) {
           return;
@@ -63,25 +86,27 @@ export class SSRPlaceholderHandlers {
       // Only instantiate the IntersectionObserver if it's supported
       this.intersectionObserver = new IntersectionObserver(entries => entries.filter(entry => entry.intersectionRatio > 0).forEach(this.intersectionObserverCallback));
     }
+    this.enablePageLayoutPlaceholder = enablePageLayoutPlaceholder;
     if (window.document) {
       try {
-        const existingElements = document.querySelectorAll('[data-ssr-placeholder]');
+        const selector = this.enablePageLayoutPlaceholder ? '[data-ssr-placeholder],[data-testid="page-layout.root"]' : '[data-ssr-placeholder]';
+        const existingElements = document.querySelectorAll(selector);
         existingElements.forEach(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) {
+          const placeholderId = el instanceof HTMLElement && this.getPlaceholderId(el);
+          if (placeholderId) {
             var _window$__SSR_PLACEHO, _this$intersectionObs2;
             let width = -1;
             let height = -1;
             let x = -1;
             let y = -1;
-            const boundingClientRect = (_window$__SSR_PLACEHO = window.__SSR_PLACEHOLDERS_DIMENSIONS__) === null || _window$__SSR_PLACEHO === void 0 ? void 0 : _window$__SSR_PLACEHO[el.dataset.ssrPlaceholder];
+            const boundingClientRect = (_window$__SSR_PLACEHO = window.__SSR_PLACEHOLDERS_DIMENSIONS__) === null || _window$__SSR_PLACEHO === void 0 ? void 0 : _window$__SSR_PLACEHO[placeholderId];
             if (boundingClientRect) {
               width = boundingClientRect.width;
               height = boundingClientRect.height;
               x = boundingClientRect.x;
               y = boundingClientRect.y;
             }
-            this.staticPlaceholders.set(el.dataset.ssrPlaceholder, {
+            this.staticPlaceholders.set(placeholderId, {
               width,
               height,
               x,
@@ -102,10 +127,10 @@ export class SSRPlaceholderHandlers {
     this.reactValidateCallbacks = new Map();
   }
   isPlaceholder(element) {
-    return Boolean(element.dataset.ssrPlaceholder);
+    return Boolean(this.getPlaceholderId(element));
   }
   isPlaceholderReplacement(element) {
-    return Boolean(element.dataset.ssrPlaceholderReplace);
+    return Boolean(this.getPlaceholderReplacementId(element));
   }
   isPlaceholderIgnored(element) {
     // data-ssr-placeholder-ignored doesn't have a value.
@@ -128,7 +153,7 @@ export class SSRPlaceholderHandlers {
   }
   checkIfExistedAndSizeMatching(el) {
     el = this.findNearestPlaceholderContainerIfIgnored(el);
-    const id = el.dataset.ssrPlaceholder || '';
+    const id = this.getPlaceholderId(el);
     return new Promise(resolve => {
       if (!this.staticPlaceholders.has(id)) {
         resolve(false);
@@ -143,13 +168,13 @@ export class SSRPlaceholderHandlers {
   getSize(el) {
     return new Promise(resolve => {
       var _this$intersectionObs4;
-      this.getSizeCallbacks.set(el.dataset.ssrPlaceholder || '', resolve);
+      this.getSizeCallbacks.set(this.getPlaceholderId(el), resolve);
       (_this$intersectionObs4 = this.intersectionObserver) === null || _this$intersectionObs4 === void 0 ? void 0 : _this$intersectionObs4.observe(el);
     });
   }
   validateReactComponentMatchToPlaceholder(el) {
     el = this.findNearestPlaceholderContainerIfIgnored(el);
-    const id = el.dataset.ssrPlaceholderReplace || '';
+    const id = this.getPlaceholderReplacementId(el);
     return new Promise(resolve => {
       if (!this.staticPlaceholders.has(id)) {
         resolve(false);

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

@@ -1,7 +1,7 @@
 // lightweight script to scan the SSR response and collect all elements with data-ssr-placeholder attribute
 // 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) {
+export function collectSSRPlaceholderDimensions(document, window, enablePageLayoutPlaceholder = false) {
   const ssrPlaceholders = document === null || document === void 0 ? void 0 : document.querySelectorAll('[data-ssr-placeholder]');
   ssrPlaceholders.forEach(elem => {
     const placeholderId = elem.getAttribute('data-ssr-placeholder');
@@ -11,4 +11,12 @@ export function collectSSRPlaceholderDimensions(document, window) {
       window.__SSR_PLACEHOLDERS_DIMENSIONS__[placeholderId] = boundingClient;
     }
   });
+  if (enablePageLayoutPlaceholder) {
+    const pageLayoutRoot = document === null || document === void 0 ? void 0 : document.getElementById('unsafe-design-system-page-layout-root');
+    if (pageLayoutRoot) {
+      const boundingClient = pageLayoutRoot.getBoundingClientRect();
+      window.__SSR_PLACEHOLDERS_DIMENSIONS__ = window.__SSR_PLACEHOLDERS_DIMENSIONS__ || {};
+      window.__SSR_PLACEHOLDERS_DIMENSIONS__['page-layout.root'] = boundingClient;
+    }
+  }
 }