@atlaskit/react-ufo 4.1.12 → 4.2.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 4.2.0
+
+### Minor Changes
+
+- [#195899](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/195899)
+  [`ab2e2b57fa3fc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ab2e2b57fa3fc) -
+  Deprecating optional, experimental API about disabling SSR placeholder check of size and position
+
+## 4.1.13
+
+### Patch Changes
+
+- [#195513](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/195513)
+  [`49b7bf5d4e698`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/49b7bf5d4e698) -
+  Added reactUFO as marks to Dev Tools
+
 ## 4.1.12
 
 ### Patch Changes

package/dist/cjs/create-payload/index.js

@@ -33,6 +33,7 @@ var _roundNumber = require("../round-number");
 var ssr = _interopRequireWildcard(require("../ssr"));
 var _utils = require("./common/utils");
 var _criticalMetricsPayload = require("./critical-metrics-payload");
+var _addPerformanceMeasures = require("./utils/add-performance-measures");
 var _getBrowserMetadata = require("./utils/get-browser-metadata");
 var _getInteractionStatus = _interopRequireDefault(require("./utils/get-interaction-status"));
 var _getNavigationMetrics = require("./utils/get-navigation-metrics");
@@ -201,7 +202,7 @@ function getPPSMetrics(interaction) {
 function getSSRProperties(type) {
   var ssrPhases = getSSRPhaseSuccess(type);
   return _objectSpread(_objectSpread({
-    'ssr:success': (0, _getSsrSuccess.default)(type),
+    'ssr:success': (ssrPhases === null || ssrPhases === void 0 ? void 0 : ssrPhases.done) != null ? ssrPhases.done : (0, _getSsrSuccess.default)(type),
     'ssr:featureFlags': getSSRFeatureFlags(type)
   }, (ssrPhases === null || ssrPhases === void 0 ? void 0 : ssrPhases.earlyFlush) != null ? {
     'ssr:earlyflush:success': ssrPhases.earlyFlush
@@ -619,9 +620,23 @@ function _createInteractionMetricsPayload() {
             var SSRDoneTime = SSRDoneTimeValue !== undefined ? {
               SSRDoneTime: Math.round(SSRDoneTimeValue)
             } : {};
+            var isBM3ConfigSSRDoneAsFmp = interaction.metaData.__legacy__bm3ConfigSSRDoneAsFmp;
+            var isUFOConfigSSRDoneAsFmp = interaction.metaData.__legacy__bm3ConfigSSRDoneAsFmp || !!(config !== null && config !== void 0 && (_config$ssr = config.ssr) !== null && _config$ssr !== void 0 && _config$ssr.getSSRDoneTime);
+            if (!experimental && (isBM3ConfigSSRDoneAsFmp || isUFOConfigSSRDoneAsFmp) && SSRDoneTimeValue !== undefined && (0, _platformFeatureFlags.fg)('ufo_chrome_devtools_uplift')) {
+              try {
+                performance.mark("FMP", {
+                  startTime: SSRDoneTimeValue,
+                  detail: {
+                    devtools: {
+                      dataType: 'marker'
+                    }
+                  }
+                });
+              } catch (e) {}
+            }
             return _objectSpread(_objectSpread({}, SSRDoneTime), {}, {
-              isBM3ConfigSSRDoneAsFmp: interaction.metaData.__legacy__bm3ConfigSSRDoneAsFmp,
-              isUFOConfigSSRDoneAsFmp: interaction.metaData.__legacy__bm3ConfigSSRDoneAsFmp || !!(config !== null && config !== void 0 && (_config$ssr = config.ssr) !== null && _config$ssr !== void 0 && _config$ssr.getSSRDoneTime)
+              isBM3ConfigSSRDoneAsFmp: isBM3ConfigSSRDoneAsFmp,
+              isUFOConfigSSRDoneAsFmp: isUFOConfigSSRDoneAsFmp
             });
           };
           pageLoadInteractionMetrics = getInitialPageLoadSSRMetrics(); // Detailed payload. Page visibility = visible
@@ -690,6 +705,9 @@ function _createInteractionMetricsPayload() {
           finalVCMetrics = _yield$Promise$all2[0];
           experimentalMetrics = _yield$Promise$all2[1];
           paintMetrics = _yield$Promise$all2[2];
+          if (!experimental) {
+            (0, _platformFeatureFlags.fg)('ufo_chrome_devtools_uplift') && (0, _addPerformanceMeasures.addPerformanceMeasures)(interaction.start, (0, _toConsumableArray2.default)((finalVCMetrics === null || finalVCMetrics === void 0 ? void 0 : finalVCMetrics['ufo:vc:rev']) || []));
+          }
           payload = {
             actionSubject: 'experience',
             action: 'measured',
@@ -768,7 +786,7 @@ function _createInteractionMetricsPayload() {
           }
           payload.attributes.properties['event:sizeInKb'] = (0, _getPayloadSize.default)(payload.attributes.properties);
           return _context.abrupt("return", payload);
-        case 43:
+        case 44:
         case "end":
           return _context.stop();
       }

package/dist/cjs/create-payload/utils/add-performance-measures.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.addPerformanceMeasures = void 0;
+var addPerformanceMeasures = exports.addPerformanceMeasures = function addPerformanceMeasures(start, measures) {
+  try {
+    measures.sort(function (a, b) {
+      return b.revision.localeCompare(a.revision);
+    }).slice(0, 2).forEach(function (entry) {
+      var _entry$vcDetails;
+      if (((_entry$vcDetails = entry.vcDetails) === null || _entry$vcDetails === void 0 || (_entry$vcDetails = _entry$vcDetails['90']) === null || _entry$vcDetails === void 0 ? void 0 : _entry$vcDetails.t) !== undefined) {
+        var _entry$vcDetails2;
+        performance.mark("VC90 (".concat(entry.revision, ")"), {
+          startTime: start + ((_entry$vcDetails2 = entry.vcDetails) === null || _entry$vcDetails2 === void 0 || (_entry$vcDetails2 = _entry$vcDetails2['90']) === null || _entry$vcDetails2 === void 0 ? void 0 : _entry$vcDetails2.t),
+          detail: {
+            devtools: {
+              dataType: 'marker'
+            }
+          }
+        });
+      }
+    });
+    measures.forEach(function (entry) {
+      var _entry$vcDetails3;
+      if (!entry || !entry.vcDetails) {
+        return;
+      }
+      var VCParts = Object.keys(entry.vcDetails);
+      performance.measure("VC90 (".concat(entry.revision, ")"), {
+        start: start,
+        duration: (_entry$vcDetails3 = entry.vcDetails) === null || _entry$vcDetails3 === void 0 || (_entry$vcDetails3 = _entry$vcDetails3['90']) === null || _entry$vcDetails3 === void 0 ? void 0 : _entry$vcDetails3.t,
+        detail: {
+          devtools: {
+            track: "main metrics",
+            trackGroup: '🛸 reactUFO metrics',
+            color: 'tertiary'
+          }
+        }
+      });
+      VCParts.forEach(function (key) {
+        var _entry$vcDetails4;
+        var duration = (_entry$vcDetails4 = entry.vcDetails) === null || _entry$vcDetails4 === void 0 ? void 0 : _entry$vcDetails4[key].t;
+        if (typeof duration !== 'number') {
+          return;
+        }
+        performance.measure("VC".concat(key), {
+          start: start,
+          duration: duration,
+          detail: {
+            devtools: {
+              track: "VC ".concat(entry.revision),
+              trackGroup: '🛸 reactUFO metrics',
+              color: key === '90' ? 'tertiary' : 'primary-light'
+            }
+          }
+        });
+      });
+    });
+  } catch (error) {}
+};

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

@@ -621,6 +621,7 @@ function finishInteraction(id, data) {
   data.end = endTime;
   try {
     // for Firefox 102 and older
+
     if ((0, _platformFeatureFlags.fg)('ufo_chrome_devtools_uplift')) {
       performance.measure("\uD83D\uDEF8 [".concat(data.type, "] ").concat(data.ufoName, " [ttai]"), {
         start: data.start,
@@ -633,6 +634,14 @@ function finishInteraction(id, data) {
           }
         }
       });
+      performance.mark("TTAI", {
+        startTime: data.end,
+        detail: {
+          devtools: {
+            dataType: 'marker'
+          }
+        }
+      });
     } else {
       performance.measure("\uD83D\uDEF8 [".concat(data.type, "] ").concat(data.ufoName, " [ttai]"), {
         start: data.start,
@@ -925,8 +934,7 @@ function addNewInteraction(interactionId, ufoName, type, startTime, rate, labelS
       oldDomUpdates: config.vc.oldDomUpdates,
       devToolsEnabled: config.vc.devToolsEnabled,
       selectorConfig: config.vc.selectorConfig,
-      ssrEnablePageLayoutPlaceholder: config.vc.ssrEnablePageLayoutPlaceholder,
-      disableSizeAndPositionCheck: config.vc.disableSizeAndPositionCheck
+      ssrEnablePageLayoutPlaceholder: config.vc.ssrEnablePageLayoutPlaceholder
     };
     vcObserver = (0, _vc.newVCObserver)(vcOptions);
   }
@@ -1074,6 +1082,14 @@ function addApdexToAll(apdex) {
             }
           }
         });
+        performance.mark("[bm3] TTI", {
+          startTime: apdex.stopTime,
+          detail: {
+            devtools: {
+              dataType: 'marker'
+            }
+          }
+        });
       } else {
         var _apdex$startTime2;
         performance.measure("\uD83D\uDEF8 ".concat(apdex.key, " [bm3_tti]"), {
@@ -1108,6 +1124,14 @@ function addApdex(interactionId, apdexInfo) {
             }
           }
         });
+        performance.mark("[bm3] TTI", {
+          startTime: apdexInfo.stopTime,
+          detail: {
+            devtools: {
+              dataType: 'marker'
+            }
+          }
+        });
       } else {
         var _apdexInfo$startTime2;
         performance.measure("\uD83D\uDEF8 ".concat(apdexInfo.key, " [bm3_tti]"), {

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

@@ -95,8 +95,7 @@ function init(analyticsWebClientAsync, config) {
       oldDomUpdates: config.vc.oldDomUpdates,
       devToolsEnabled: config.vc.devToolsEnabled,
       selectorConfig: config.vc.selectorConfig,
-      ssrEnablePageLayoutPlaceholder: config.vc.ssrEnablePageLayoutPlaceholder,
-      disableSizeAndPositionCheck: config.vc.disableSizeAndPositionCheck
+      ssrEnablePageLayoutPlaceholder: config.vc.ssrEnablePageLayoutPlaceholder
     };
     _interactionMetrics.postInteractionLog.initializeVCObserver(vcOptions);
     if (config !== null && config !== void 0 && (_config$experimentalI = config.experimentalInteractionMetrics) !== null && _config$experimentalI !== void 0 && _config$experimentalI.enabled) {

package/dist/cjs/vc/index.js

@@ -14,7 +14,6 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _config = require("../config");
 var _noOpVcObserver = require("./no-op-vc-observer");
 var _vcObserver = require("./vc-observer");
@@ -26,7 +25,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var VCObserverWrapper = exports.VCObserverWrapper = /*#__PURE__*/function () {
   function VCObserverWrapper() {
-    var _opts$ssrEnablePageLa, _opts$disableSizeAndP;
+    var _opts$ssrEnablePageLa;
     var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     (0, _classCallCheck2.default)(this, VCObserverWrapper);
     this.newVCObserver = null;
@@ -34,23 +33,15 @@ var VCObserverWrapper = exports.VCObserverWrapper = /*#__PURE__*/function () {
 
     // Initialize SSR placeholder handler once
     this.ssrPlaceholderHandler = new _ssrPlaceholders.SSRPlaceholderHandlers({
-      enablePageLayoutPlaceholder: (_opts$ssrEnablePageLa = opts.ssrEnablePageLayoutPlaceholder) !== null && _opts$ssrEnablePageLa !== void 0 ? _opts$ssrEnablePageLa : false,
-      disableSizeAndPositionCheck: (_opts$disableSizeAndP = opts.disableSizeAndPositionCheck) !== null && _opts$disableSizeAndP !== void 0 ? _opts$disableSizeAndP : {
-        v: false,
-        h: false
-      }
+      enablePageLayoutPlaceholder: (_opts$ssrEnablePageLa = opts.ssrEnablePageLayoutPlaceholder) !== null && _opts$ssrEnablePageLa !== void 0 ? _opts$ssrEnablePageLa : false
     });
     if ((0, _config.isVCRevisionEnabled)('fy25.03')) {
-      var _opts$ssrEnablePageLa2, _opts$disableSizeAndP2;
+      var _opts$ssrEnablePageLa2;
       this.newVCObserver = new _vcObserverNew.default({
         selectorConfig: opts.selectorConfig,
         isPostInteraction: opts.isPostInteraction,
         SSRConfig: {
-          enablePageLayoutPlaceholder: (_opts$ssrEnablePageLa2 = opts.ssrEnablePageLayoutPlaceholder) !== null && _opts$ssrEnablePageLa2 !== void 0 ? _opts$ssrEnablePageLa2 : false,
-          disableSizeAndPositionCheck: (_opts$disableSizeAndP2 = opts.disableSizeAndPositionCheck) !== null && _opts$disableSizeAndP2 !== void 0 ? _opts$disableSizeAndP2 : {
-            v: false,
-            h: false
-          }
+          enablePageLayoutPlaceholder: (_opts$ssrEnablePageLa2 = opts.ssrEnablePageLayoutPlaceholder) !== null && _opts$ssrEnablePageLa2 !== void 0 ? _opts$ssrEnablePageLa2 : false
         },
         ssrPlaceholderHandler: this.ssrPlaceholderHandler
       });
@@ -169,17 +160,16 @@ var VCObserverWrapper = exports.VCObserverWrapper = /*#__PURE__*/function () {
               _context.t1 = [];
             case 16:
               v3Result = _context.t1;
-              (0, _platformFeatureFlags.fg)('ufo_chrome_devtools_uplift') && this.addPerformanceMeasures(param.start, [].concat((0, _toConsumableArray2.default)((v1v2Result === null || v1v2Result === void 0 ? void 0 : v1v2Result['ufo:vc:rev']) || []), (0, _toConsumableArray2.default)(v3Result !== null && v3Result !== void 0 ? v3Result : [])));
               if (v3Result) {
-                _context.next = 20;
+                _context.next = 19;
                 break;
               }
               return _context.abrupt("return", v1v2Result !== null && v1v2Result !== void 0 ? v1v2Result : {});
-            case 20:
+            case 19:
               return _context.abrupt("return", _objectSpread(_objectSpread({}, v1v2Result), {}, {
                 'ufo:vc:rev': [].concat((0, _toConsumableArray2.default)((_ref2 = v1v2Result === null || v1v2Result === void 0 ? void 0 : v1v2Result['ufo:vc:rev']) !== null && _ref2 !== void 0 ? _ref2 : []), (0, _toConsumableArray2.default)(v3Result !== null && v3Result !== void 0 ? v3Result : []))
               }));
-            case 21:
+            case 20:
             case "end":
               return _context.stop();
           }
@@ -216,48 +206,6 @@ var VCObserverWrapper = exports.VCObserverWrapper = /*#__PURE__*/function () {
     value: function collectSSRPlaceholders() {
       this.ssrPlaceholderHandler.collectExistingPlaceholders();
     }
-  }, {
-    key: "addPerformanceMeasures",
-    value: function addPerformanceMeasures(start, measures) {
-      try {
-        measures.forEach(function (entry) {
-          var _entry$vcDetails;
-          if (!entry || !entry.vcDetails) {
-            return;
-          }
-          var VCParts = Object.keys(entry.vcDetails);
-          performance.measure("VC90 (".concat(entry.revision, ")"), {
-            start: start,
-            duration: (_entry$vcDetails = entry.vcDetails) === null || _entry$vcDetails === void 0 || (_entry$vcDetails = _entry$vcDetails['90']) === null || _entry$vcDetails === void 0 ? void 0 : _entry$vcDetails.t,
-            detail: {
-              devtools: {
-                track: "main metrics",
-                trackGroup: '🛸 reactUFO metrics',
-                color: 'tertiary'
-              }
-            }
-          });
-          VCParts.forEach(function (key) {
-            var _entry$vcDetails2;
-            var duration = (_entry$vcDetails2 = entry.vcDetails) === null || _entry$vcDetails2 === void 0 ? void 0 : _entry$vcDetails2[key].t;
-            if (typeof duration !== 'number') {
-              return;
-            }
-            performance.measure("VC".concat(key), {
-              start: start,
-              duration: duration,
-              detail: {
-                devtools: {
-                  track: "VC ".concat(entry.revision),
-                  trackGroup: '🛸 reactUFO metrics',
-                  color: key === '90' ? 'tertiary' : 'primary-light'
-                }
-              }
-            });
-          });
-        });
-      } catch (error) {}
-    }
   }]);
 }(); // Some products set this variable to indicate it is running in SSR
 var isServer = Boolean(globalThis === null || globalThis === void 0 ? void 0 : globalThis.__SERVER__);

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

@@ -461,7 +461,6 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
     this.devToolsEnabled = options.devToolsEnabled || false;
     this.oldDomUpdatesEnabled = options.oldDomUpdates || false;
     var ssrEnablePageLayoutPlaceholder = options.ssrEnablePageLayoutPlaceholder,
-      disableSizeAndPositionCheck = options.disableSizeAndPositionCheck,
       ssrPlaceholderHandler = options.ssrPlaceholderHandler;
     this.observers = new _observers.Observers({
       selectorConfig: options.selectorConfig || {
@@ -472,8 +471,7 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
         dataVC: true
       },
       SSRConfig: {
-        enablePageLayoutPlaceholder: ssrEnablePageLayoutPlaceholder || false,
-        disableSizeAndPositionCheck: disableSizeAndPositionCheck
+        enablePageLayoutPlaceholder: ssrEnablePageLayoutPlaceholder || false
       },
       ssrPlaceholderHandler: ssrPlaceholderHandler
     });

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

@@ -77,10 +77,9 @@ var Observers = exports.Observers = /*#__PURE__*/function () {
     if (opts.ssrPlaceholderHandler) {
       this.ssrPlaceholderHandler = opts.ssrPlaceholderHandler;
     } else {
-      var _opts$SSRConfig, _opts$SSRConfig2;
+      var _opts$SSRConfig;
       this.ssrPlaceholderHandler = new _ssrPlaceholders.SSRPlaceholderHandlers({
-        enablePageLayoutPlaceholder: (_opts$SSRConfig = opts.SSRConfig) === null || _opts$SSRConfig === void 0 ? void 0 : _opts$SSRConfig.enablePageLayoutPlaceholder,
-        disableSizeAndPositionCheck: (_opts$SSRConfig2 = opts.SSRConfig) === null || _opts$SSRConfig2 === void 0 ? void 0 : _opts$SSRConfig2.disableSizeAndPositionCheck
+        enablePageLayoutPlaceholder: (_opts$SSRConfig = opts.SSRConfig) === null || _opts$SSRConfig === void 0 ? void 0 : _opts$SSRConfig.enablePageLayoutPlaceholder
       });
     }
   }

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

@@ -14,12 +14,7 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
   function SSRPlaceholderHandlers(_ref) {
     var _this = this;
     var _ref$enablePageLayout = _ref.enablePageLayoutPlaceholder,
-      enablePageLayoutPlaceholder = _ref$enablePageLayout === void 0 ? false : _ref$enablePageLayout,
-      _ref$disableSizeAndPo = _ref.disableSizeAndPositionCheck,
-      disableSizeAndPositionCheck = _ref$disableSizeAndPo === void 0 ? {
-        v: false,
-        h: false
-      } : _ref$disableSizeAndPo;
+      enablePageLayoutPlaceholder = _ref$enablePageLayout === void 0 ? false : _ref$enablePageLayout;
     (0, _classCallCheck2.default)(this, SSRPlaceholderHandlers);
     (0, _defineProperty2.default)(this, "staticPlaceholders", new Map());
     (0, _defineProperty2.default)(this, "callbacks", new Map());
@@ -108,7 +103,6 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
       });
     }
     this.enablePageLayoutPlaceholder = enablePageLayoutPlaceholder;
-    this.disableSizeAndPositionCheck = disableSizeAndPositionCheck;
     if (window.document) {
       try {
         // Collect initial placeholders using SSR dimensions
@@ -266,15 +260,11 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
   }, {
     key: "hasSameSizePosition",
     value: function hasSameSizePosition(rect, boundingClientRect) {
-      var _this$disableSizeAndP, _this$disableSizeAndP2;
-      if ((_this$disableSizeAndP = this.disableSizeAndPositionCheck) !== null && _this$disableSizeAndP !== void 0 && _this$disableSizeAndP.v && (_this$disableSizeAndP2 = this.disableSizeAndPositionCheck) !== null && _this$disableSizeAndP2 !== void 0 && _this$disableSizeAndP2.h) {
-        return true;
-      }
       if (!rect) {
         return false;
       }
-      var horizontalCheck = this.disableSizeAndPositionCheck.h ? true : Math.abs(rect.x - boundingClientRect.x) < this.EQUALITY_THRESHOLD && Math.abs(rect.width - boundingClientRect.width) < this.EQUALITY_THRESHOLD;
-      var verticalCheck = this.disableSizeAndPositionCheck.v ? true : Math.abs(rect.y - boundingClientRect.y) < this.EQUALITY_THRESHOLD && Math.abs(rect.height - boundingClientRect.height) < this.EQUALITY_THRESHOLD;
+      var horizontalCheck = Math.abs(rect.x - boundingClientRect.x) < this.EQUALITY_THRESHOLD && Math.abs(rect.width - boundingClientRect.width) < this.EQUALITY_THRESHOLD;
+      var verticalCheck = Math.abs(rect.y - boundingClientRect.y) < this.EQUALITY_THRESHOLD && Math.abs(rect.height - boundingClientRect.height) < this.EQUALITY_THRESHOLD;
       return horizontalCheck && verticalCheck || false;
     }
   }, {

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

@@ -56,13 +56,9 @@ var VCObserverNew = exports.default = /*#__PURE__*/function () {
     if (config.ssrPlaceholderHandler) {
       this.ssrPlaceholderHandler = config.ssrPlaceholderHandler;
     } else {
-      var _config$SSRConfig$ena, _config$SSRConfig, _config$SSRConfig$dis, _config$SSRConfig2;
+      var _config$SSRConfig$ena, _config$SSRConfig;
       this.ssrPlaceholderHandler = new _ssrPlaceholders.SSRPlaceholderHandlers({
-        enablePageLayoutPlaceholder: (_config$SSRConfig$ena = (_config$SSRConfig = config.SSRConfig) === null || _config$SSRConfig === void 0 ? void 0 : _config$SSRConfig.enablePageLayoutPlaceholder) !== null && _config$SSRConfig$ena !== void 0 ? _config$SSRConfig$ena : false,
-        disableSizeAndPositionCheck: (_config$SSRConfig$dis = (_config$SSRConfig2 = config.SSRConfig) === null || _config$SSRConfig2 === void 0 ? void 0 : _config$SSRConfig2.disableSizeAndPositionCheck) !== null && _config$SSRConfig$dis !== void 0 ? _config$SSRConfig$dis : {
-          v: false,
-          h: false
-        }
+        enablePageLayoutPlaceholder: (_config$SSRConfig$ena = (_config$SSRConfig = config.SSRConfig) === null || _config$SSRConfig === void 0 ? void 0 : _config$SSRConfig.enablePageLayoutPlaceholder) !== null && _config$SSRConfig$ena !== void 0 ? _config$SSRConfig$ena : false
       });
     }
     this.viewportObserver = new _viewportObserver.default({

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

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -16,8 +17,9 @@ var _rllPlaceholders = require("../../vc-observer/observers/rll-placeholders");
 var _intersectionObserver = require("./intersection-observer");
 var _mutationObserver = _interopRequireDefault(require("./mutation-observer"));
 var _performanceObserver = _interopRequireDefault(require("./performance-observer"));
-var _checkWithinComponentAndExtractChildProps = _interopRequireDefault(require("./utils/check-within-component-and-extract-child-props"));
+var _checkWithinComponent2 = _interopRequireWildcard(require("./utils/check-within-component"));
 var _isInVcIgnoreIfNoLayoutShiftMarker = _interopRequireDefault(require("./utils/is-in-vc-ignore-if-no-layout-shift-marker"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
@@ -229,7 +231,7 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
                       (_this$intersectionObs6 = _this.intersectionObserver) === null || _this$intersectionObs6 === void 0 || _this$intersectionObs6.watchAndTag(addedNode, 'mutation:media');
                       return _context.abrupt("return", 0);
                     case 44:
-                      _checkWithinComponent = (0, _checkWithinComponentAndExtractChildProps.default)(addedNode, 'UFOThirdPartySegment'), isWithinThirdPartySegment = _checkWithinComponent.isWithin;
+                      _checkWithinComponent = (0, _checkWithinComponent2.default)(addedNode, 'UFOThirdPartySegment', _this.mapIs3pResult), isWithinThirdPartySegment = _checkWithinComponent.isWithin;
                       if (!isWithinThirdPartySegment) {
                         _context.next = 48;
                         break;
@@ -326,18 +328,6 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
             }
           };
         }
-        var _checkWithinComponent2 = (0, _checkWithinComponentAndExtractChildProps.default)(target, 'UFOThirdPartySegment'),
-          isWithinThirdPartySegment = _checkWithinComponent2.isWithin;
-        if (isWithinThirdPartySegment) {
-          return {
-            type: 'mutation:third-party-element',
-            mutationData: {
-              attributeName: attributeName,
-              oldValue: oldValue,
-              newValue: newValue
-            }
-          };
-        }
         var lastElementRect = _this.mapVisibleNodeRects.get(target);
         if (lastElementRect && sameRectSize(rect, lastElementRect)) {
           return {
@@ -358,6 +348,7 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
           }
         };
       });
+      // }
     });
     (0, _defineProperty2.default)(this, "handleLayoutShift", function (_ref8) {
       var time = _ref8.time,
@@ -386,6 +377,7 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
       }
     });
     this.mapVisibleNodeRects = new WeakMap();
+    this.mapIs3pResult = new WeakMap();
     this.onChange = onChange;
     this.isStarted = false;
     this.intersectionObserver = null;
@@ -446,6 +438,8 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
       (_this$intersectionObs0 = this.intersectionObserver) === null || _this$intersectionObs0 === void 0 || _this$intersectionObs0.disconnect();
       (_this$performanceObse2 = this.performanceObserver) === null || _this$performanceObse2 === void 0 || _this$performanceObse2.disconnect();
       this.isStarted = false;
+      // Clean up caches when stopping
+      (0, _checkWithinComponent2.cleanupCaches)(this.mapIs3pResult);
     }
   }]);
 }();

package/dist/cjs/vc/vc-observer-new/viewport-observer/utils/check-fiber-within-component.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = checkFiberWithinComponent;
+var _getComponentName = _interopRequireDefault(require("./get-component-name"));
+// Helper to check fiber within component
+function checkFiberWithinComponent(fiber, targetComponentName, maxLevel) {
+  // Stop when no more levels to traverse
+  if (maxLevel <= 0) {
+    return false;
+  }
+  if (!fiber) {
+    return false;
+  }
+  var componentName = (0, _getComponentName.default)(fiber);
+  if (componentName === targetComponentName) {
+    return true;
+  }
+
+  // Recursively traverse up the fiber tree
+  return checkFiberWithinComponent(fiber.return, targetComponentName, maxLevel - 1);
+}

package/dist/cjs/vc/vc-observer-new/viewport-observer/utils/check-within-component.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.cleanupCaches = cleanupCaches;
+exports.default = checkWithinComponent;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _coinflip = _interopRequireDefault(require("../../../../coinflip"));
+var _checkFiberWithinComponent = _interopRequireDefault(require("./check-fiber-within-component"));
+var _findFiberWithCache = _interopRequireDefault(require("./find-fiber-with-cache"));
+var _findReactFiber = _interopRequireDefault(require("./find-react-fiber"));
+var DEFAULT_MAX_LEVEL = 20;
+
+// Cache cleanup
+var callCount = 0;
+var CLEANUP_THRESHOLD = 50;
+function maybeCleanup(resultCache) {
+  callCount++;
+  if (callCount >= CLEANUP_THRESHOLD && (0, _coinflip.default)(0.3)) {
+    cleanupCaches(resultCache);
+  }
+}
+function cleanupCaches(resultCache) {
+  resultCache = new WeakMap();
+  callCount = 0;
+}
+function checkWithinComponent(node, targetComponentName, resultCache) {
+  maybeCleanup(resultCache);
+  if (resultCache.has(node)) {
+    var _resultCache$get;
+    return {
+      isWithin: (_resultCache$get = resultCache.get(node)) !== null && _resultCache$get !== void 0 ? _resultCache$get : false
+    };
+  }
+  var fiber = null;
+  var checkedNodes = [];
+  if ((0, _platformFeatureFlags.fg)('platform_ufo_handle_non_react_element_for_3p')) {
+    fiber = (0, _findFiberWithCache.default)(node, DEFAULT_MAX_LEVEL, checkedNodes);
+  } else {
+    fiber = (0, _findReactFiber.default)(node);
+  }
+  if (!fiber) {
+    if ((0, _platformFeatureFlags.fg)('platform_ufo_handle_non_react_element_for_3p')) {
+      checkedNodes.forEach(function (checkedNode) {
+        resultCache.set(checkedNode, false);
+      });
+    }
+    return {
+      isWithin: false
+    };
+  }
+  var isWithin = (0, _checkFiberWithinComponent.default)(fiber, targetComponentName, DEFAULT_MAX_LEVEL);
+  if ((0, _platformFeatureFlags.fg)('platform_ufo_handle_non_react_element_for_3p')) {
+    checkedNodes.forEach(function (checkedNode) {
+      resultCache.set(checkedNode, isWithin);
+    });
+  }
+  return {
+    isWithin: isWithin
+  };
+}

package/dist/cjs/vc/vc-observer-new/viewport-observer/utils/find-fiber-with-cache.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = findFiberWithCache;
+var _findReactFiber = _interopRequireDefault(require("./find-react-fiber"));
+function findFiberWithCache(element, maxLevel, checkedNodes) {
+  // Stop when no more levels to traverse
+  if (maxLevel <= 0) {
+    return null;
+  }
+  checkedNodes.push(element);
+  var fiber = (0, _findReactFiber.default)(element);
+  if (fiber) {
+    return fiber;
+  }
+
+  // Walk up the DOM tree to find the fiber
+  var parent = element.parentElement;
+  if (!parent) {
+    return null;
+  }
+
+  // Recursively check parent
+  return findFiberWithCache(parent, maxLevel - 1, checkedNodes);
+}