@atlaskit/react-ufo 2.5.1 → 2.5.3

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 2.5.3
+
+### Patch Changes
+
+- [#179859](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/179859)
+  [`3685feff446c1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3685feff446c1) -
+  Use getBoundingClientRect instead of value from intersectionObserver for the purpose of checking
+  layout shift for SSR placeholders.
+
+## 2.5.2
+
+### Patch Changes
+
+- [#179378](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/179378)
+  [`0c54148687bda`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0c54148687bda) -
+  move filtering of components log to allow for ufo:vc:next observation
+
 ## 2.5.1
 
 ### Patch Changes

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

@@ -482,7 +482,7 @@ var finishInteraction = function finishInteraction(id, data) {
   (0, _experienceTraceIdContext.clearActiveTrace)();
   callCleanUpCallbacks(data);
   if ((_getConfig3 = (0, _config.getConfig)()) !== null && _getConfig3 !== void 0 && (_getConfig3 = _getConfig3.vc) !== null && _getConfig3 !== void 0 && _getConfig3.stopVCAtInteractionFinish) {
-    data.vc = (0, _vc.getVCObserver)().getVCRawData(data.end);
+    data.vc = (0, _vc.getVCObserver)().getVCRawData();
   }
   remove(id);
   PreviousInteractionLog.name = data.ufoName || 'unknown';

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

@@ -71,7 +71,7 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
       var info = _this.abortReason.info !== '' ? " ".concat(_this.abortReason.info) : '';
       return "".concat(_this.abortReason.reason).concat(info);
     });
-    (0, _defineProperty2.default)(this, "getVCRawData", function (stopTime) {
+    (0, _defineProperty2.default)(this, "getVCRawData", function () {
       _this.measureStart();
       if (!_this.active) {
         _this.measureStop();
@@ -80,20 +80,6 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
       _this.stop();
       var abortReasonInfo = _this.getAbortReasonInfo();
       _this.measureStop();
-      var componentsLog = {};
-      if (stopTime && (0, _platformFeatureFlags.fg)('ufo-remove-vc-component-observations-after-ttai')) {
-        Object.entries(_this.componentsLog).forEach(function (_ref3) {
-          var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
-            _timestamp = _ref4[0],
-            value = _ref4[1];
-          var timestamp = Number(_timestamp);
-          if (stopTime > timestamp) {
-            componentsLog[timestamp] = value;
-          }
-        });
-      } else {
-        componentsLog = _objectSpread({}, _this.componentsLog);
-      }
       return {
         abortReasonInfo: abortReasonInfo,
         abortReason: _objectSpread({}, _this.abortReason),
@@ -101,24 +87,24 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
         heatmapNext: _this.heatmapNext,
         outOfBoundaryInfo: _this.outOfBoundaryInfo,
         totalTime: Math.round(_this.totalTime + _this.observers.getTotalTime()),
-        componentsLog: componentsLog,
+        componentsLog: _objectSpread({}, _this.componentsLog),
         viewport: _objectSpread({}, _this.viewport),
         oldDomUpdatesEnabled: _this.oldDomUpdatesEnabled,
         devToolsEnabled: _this.devToolsEnabled,
         ratios: _this.vcRatios
       };
     });
-    (0, _defineProperty2.default)(this, "getVCResult", function (_ref5) {
-      var start = _ref5.start,
-        stop = _ref5.stop,
-        tti = _ref5.tti,
-        prefix = _ref5.prefix,
-        ssr = _ref5.ssr,
-        vc = _ref5.vc;
+    (0, _defineProperty2.default)(this, "getVCResult", function (_ref3) {
+      var start = _ref3.start,
+        stop = _ref3.stop,
+        tti = _ref3.tti,
+        prefix = _ref3.prefix,
+        ssr = _ref3.ssr,
+        vc = _ref3.vc;
       var startTime = performance.now();
       // add local measurement
       var fullPrefix = prefix !== undefined && prefix !== '' ? "".concat(prefix, ":") : '';
-      var rawData = vc !== undefined ? vc : _this.getVCRawData(stop);
+      var rawData = vc !== undefined ? vc : _this.getVCRawData();
       if (rawData === null) {
         return {};
       }
@@ -166,10 +152,24 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
       } catch (e) {
         /* empty */
       }
+      var _componentsLog = {};
+      if ((0, _platformFeatureFlags.fg)('ufo-remove-vc-component-observations-after-ttai')) {
+        Object.entries(_this.componentsLog).forEach(function (_ref5) {
+          var _ref6 = (0, _slicedToArray2.default)(_ref5, 2),
+            _timestamp = _ref6[0],
+            value = _ref6[1];
+          var timestamp = Number(_timestamp);
+          if (stop > timestamp) {
+            _componentsLog[timestamp] = value;
+          }
+        });
+      } else {
+        _componentsLog = _objectSpread({}, componentsLog);
+      }
       var vcNext = VCObserver.calculateVC({
         heatmap: heatmapNext,
         ssr: ssr,
-        componentsLog: _objectSpread({}, componentsLog),
+        componentsLog: _componentsLog,
         viewport: viewport
       });
       var outOfBoundary = outOfBoundaryInfo ? (0, _defineProperty2.default)({}, "".concat(fullPrefix, "vc:oob"), outOfBoundaryInfo) : {};

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

@@ -8,6 +8,7 @@ exports.SSRPlaceholderHandlers = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var EQUALITY_THRESHOLD = 0.1;
 var ANCESTOR_LOOKUP_LIMIT = 10;
 var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/function () {
@@ -35,8 +36,16 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
             return;
           }
           var rect = _this.staticPlaceholders.get(staticKey);
-          var hasSameSizePosition = _this.hasSameSizePosition(rect, boundingClientRect);
-          _resolve(hasSameSizePosition);
+          if ((0, _platformFeatureFlags.fg)('platform_ufo_ssr_ttvc_use_target_rect')) {
+            requestAnimationFrame(function () {
+              var targetRect = target.getBoundingClientRect();
+              var hasSameSizePosition = _this.hasSameSizePosition(rect, targetRect);
+              _resolve(hasSameSizePosition);
+            });
+          } else {
+            var hasSameSizePosition = _this.hasSameSizePosition(rect, boundingClientRect);
+            _resolve(hasSameSizePosition);
+          }
           _this.callbacks.delete(staticKey);
         }
       } else {
@@ -46,8 +55,16 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
           return;
         }
         var _rect = _this.staticPlaceholders.get(key);
-        var _hasSameSizePosition = _this.hasSameSizePosition(_rect, boundingClientRect);
-        _resolve2(_hasSameSizePosition);
+        if ((0, _platformFeatureFlags.fg)('platform_ufo_ssr_ttvc_use_target_rect')) {
+          requestAnimationFrame(function () {
+            var targetRect = target.getBoundingClientRect();
+            var hasSameSizePosition = _this.hasSameSizePosition(_rect, targetRect);
+            _resolve2(hasSameSizePosition);
+          });
+        } else {
+          var _hasSameSizePosition = _this.hasSameSizePosition(_rect, boundingClientRect);
+          _resolve2(_hasSameSizePosition);
+        }
         _this.staticPlaceholders.delete(staticKey);
         _this.reactValidateCallbacks.delete(staticKey);
       }

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

@@ -411,7 +411,7 @@ const finishInteraction = (id, data, endTime = performance.now()) => {
   clearActiveTrace();
   callCleanUpCallbacks(data);
   if ((_getConfig3 = getConfig()) !== null && _getConfig3 !== void 0 && (_getConfig3$vc = _getConfig3.vc) !== null && _getConfig3$vc !== void 0 && _getConfig3$vc.stopVCAtInteractionFinish) {
-    data.vc = getVCObserver().getVCRawData(data.end);
+    data.vc = getVCObserver().getVCRawData();
   }
   remove(id);
   PreviousInteractionLog.name = data.ufoName || 'unknown';

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

@@ -52,7 +52,7 @@ export class VCObserver {
       const info = this.abortReason.info !== '' ? ` ${this.abortReason.info}` : '';
       return `${this.abortReason.reason}${info}`;
     });
-    _defineProperty(this, "getVCRawData", stopTime => {
+    _defineProperty(this, "getVCRawData", () => {
       this.measureStart();
       if (!this.active) {
         this.measureStop();
@@ -61,19 +61,6 @@ export class VCObserver {
       this.stop();
       const abortReasonInfo = this.getAbortReasonInfo();
       this.measureStop();
-      let componentsLog = {};
-      if (stopTime && fg('ufo-remove-vc-component-observations-after-ttai')) {
-        Object.entries(this.componentsLog).forEach(([_timestamp, value]) => {
-          const timestamp = Number(_timestamp);
-          if (stopTime > timestamp) {
-            componentsLog[timestamp] = value;
-          }
-        });
-      } else {
-        componentsLog = {
-          ...this.componentsLog
-        };
-      }
       return {
         abortReasonInfo,
         abortReason: {
@@ -83,7 +70,9 @@ export class VCObserver {
         heatmapNext: this.heatmapNext,
         outOfBoundaryInfo: this.outOfBoundaryInfo,
         totalTime: Math.round(this.totalTime + this.observers.getTotalTime()),
-        componentsLog,
+        componentsLog: {
+          ...this.componentsLog
+        },
         viewport: {
           ...this.viewport
         },
@@ -103,7 +92,7 @@ export class VCObserver {
       const startTime = performance.now();
       // add local measurement
       const fullPrefix = prefix !== undefined && prefix !== '' ? `${prefix}:` : '';
-      const rawData = vc !== undefined ? vc : this.getVCRawData(stop);
+      const rawData = vc !== undefined ? vc : this.getVCRawData();
       if (rawData === null) {
         return {};
       }
@@ -160,12 +149,23 @@ export class VCObserver {
       } catch (e) {
         /* empty */
       }
+      let _componentsLog = {};
+      if (fg('ufo-remove-vc-component-observations-after-ttai')) {
+        Object.entries(this.componentsLog).forEach(([_timestamp, value]) => {
+          const timestamp = Number(_timestamp);
+          if (stop > timestamp) {
+            _componentsLog[timestamp] = value;
+          }
+        });
+      } else {
+        _componentsLog = {
+          ...componentsLog
+        };
+      }
       const vcNext = VCObserver.calculateVC({
         heatmap: heatmapNext,
         ssr,
-        componentsLog: {
-          ...componentsLog
-        },
+        componentsLog: _componentsLog,
         viewport
       });
       const outOfBoundary = outOfBoundaryInfo ? {

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

@@ -1,4 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { fg } from '@atlaskit/platform-feature-flags';
 const EQUALITY_THRESHOLD = 0.1;
 const ANCESTOR_LOOKUP_LIMIT = 10;
 export class SSRPlaceholderHandlers {
@@ -25,8 +26,16 @@ export class SSRPlaceholderHandlers {
             return;
           }
           const rect = this.staticPlaceholders.get(staticKey);
-          const hasSameSizePosition = this.hasSameSizePosition(rect, boundingClientRect);
-          resolve(hasSameSizePosition);
+          if (fg('platform_ufo_ssr_ttvc_use_target_rect')) {
+            requestAnimationFrame(() => {
+              const targetRect = target.getBoundingClientRect();
+              const hasSameSizePosition = this.hasSameSizePosition(rect, targetRect);
+              resolve(hasSameSizePosition);
+            });
+          } else {
+            const hasSameSizePosition = this.hasSameSizePosition(rect, boundingClientRect);
+            resolve(hasSameSizePosition);
+          }
           this.callbacks.delete(staticKey);
         }
       } else {
@@ -36,8 +45,16 @@ export class SSRPlaceholderHandlers {
           return;
         }
         const rect = this.staticPlaceholders.get(key);
-        const hasSameSizePosition = this.hasSameSizePosition(rect, boundingClientRect);
-        resolve(hasSameSizePosition);
+        if (fg('platform_ufo_ssr_ttvc_use_target_rect')) {
+          requestAnimationFrame(() => {
+            const targetRect = target.getBoundingClientRect();
+            const hasSameSizePosition = this.hasSameSizePosition(rect, targetRect);
+            resolve(hasSameSizePosition);
+          });
+        } else {
+          const hasSameSizePosition = this.hasSameSizePosition(rect, boundingClientRect);
+          resolve(hasSameSizePosition);
+        }
         this.staticPlaceholders.delete(staticKey);
         this.reactValidateCallbacks.delete(staticKey);
       }

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

@@ -439,7 +439,7 @@ var finishInteraction = function finishInteraction(id, data) {
   clearActiveTrace();
   callCleanUpCallbacks(data);
   if ((_getConfig3 = getConfig()) !== null && _getConfig3 !== void 0 && (_getConfig3 = _getConfig3.vc) !== null && _getConfig3 !== void 0 && _getConfig3.stopVCAtInteractionFinish) {
-    data.vc = getVCObserver().getVCRawData(data.end);
+    data.vc = getVCObserver().getVCRawData();
   }
   remove(id);
   PreviousInteractionLog.name = data.ufoName || 'unknown';

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

@@ -64,7 +64,7 @@ export var VCObserver = /*#__PURE__*/function () {
       var info = _this.abortReason.info !== '' ? " ".concat(_this.abortReason.info) : '';
       return "".concat(_this.abortReason.reason).concat(info);
     });
-    _defineProperty(this, "getVCRawData", function (stopTime) {
+    _defineProperty(this, "getVCRawData", function () {
       _this.measureStart();
       if (!_this.active) {
         _this.measureStop();
@@ -73,20 +73,6 @@ export var VCObserver = /*#__PURE__*/function () {
       _this.stop();
       var abortReasonInfo = _this.getAbortReasonInfo();
       _this.measureStop();
-      var componentsLog = {};
-      if (stopTime && fg('ufo-remove-vc-component-observations-after-ttai')) {
-        Object.entries(_this.componentsLog).forEach(function (_ref3) {
-          var _ref4 = _slicedToArray(_ref3, 2),
-            _timestamp = _ref4[0],
-            value = _ref4[1];
-          var timestamp = Number(_timestamp);
-          if (stopTime > timestamp) {
-            componentsLog[timestamp] = value;
-          }
-        });
-      } else {
-        componentsLog = _objectSpread({}, _this.componentsLog);
-      }
       return {
         abortReasonInfo: abortReasonInfo,
         abortReason: _objectSpread({}, _this.abortReason),
@@ -94,24 +80,24 @@ export var VCObserver = /*#__PURE__*/function () {
         heatmapNext: _this.heatmapNext,
         outOfBoundaryInfo: _this.outOfBoundaryInfo,
         totalTime: Math.round(_this.totalTime + _this.observers.getTotalTime()),
-        componentsLog: componentsLog,
+        componentsLog: _objectSpread({}, _this.componentsLog),
         viewport: _objectSpread({}, _this.viewport),
         oldDomUpdatesEnabled: _this.oldDomUpdatesEnabled,
         devToolsEnabled: _this.devToolsEnabled,
         ratios: _this.vcRatios
       };
     });
-    _defineProperty(this, "getVCResult", function (_ref5) {
-      var start = _ref5.start,
-        stop = _ref5.stop,
-        tti = _ref5.tti,
-        prefix = _ref5.prefix,
-        ssr = _ref5.ssr,
-        vc = _ref5.vc;
+    _defineProperty(this, "getVCResult", function (_ref3) {
+      var start = _ref3.start,
+        stop = _ref3.stop,
+        tti = _ref3.tti,
+        prefix = _ref3.prefix,
+        ssr = _ref3.ssr,
+        vc = _ref3.vc;
       var startTime = performance.now();
       // add local measurement
       var fullPrefix = prefix !== undefined && prefix !== '' ? "".concat(prefix, ":") : '';
-      var rawData = vc !== undefined ? vc : _this.getVCRawData(stop);
+      var rawData = vc !== undefined ? vc : _this.getVCRawData();
       if (rawData === null) {
         return {};
       }
@@ -159,10 +145,24 @@ export var VCObserver = /*#__PURE__*/function () {
       } catch (e) {
         /* empty */
       }
+      var _componentsLog = {};
+      if (fg('ufo-remove-vc-component-observations-after-ttai')) {
+        Object.entries(_this.componentsLog).forEach(function (_ref5) {
+          var _ref6 = _slicedToArray(_ref5, 2),
+            _timestamp = _ref6[0],
+            value = _ref6[1];
+          var timestamp = Number(_timestamp);
+          if (stop > timestamp) {
+            _componentsLog[timestamp] = value;
+          }
+        });
+      } else {
+        _componentsLog = _objectSpread({}, componentsLog);
+      }
       var vcNext = VCObserver.calculateVC({
         heatmap: heatmapNext,
         ssr: ssr,
-        componentsLog: _objectSpread({}, componentsLog),
+        componentsLog: _componentsLog,
         viewport: viewport
       });
       var outOfBoundary = outOfBoundaryInfo ? _defineProperty({}, "".concat(fullPrefix, "vc:oob"), outOfBoundaryInfo) : {};

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

@@ -1,6 +1,7 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { fg } from '@atlaskit/platform-feature-flags';
 var EQUALITY_THRESHOLD = 0.1;
 var ANCESTOR_LOOKUP_LIMIT = 10;
 export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
@@ -28,8 +29,16 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
             return;
           }
           var rect = _this.staticPlaceholders.get(staticKey);
-          var hasSameSizePosition = _this.hasSameSizePosition(rect, boundingClientRect);
-          _resolve(hasSameSizePosition);
+          if (fg('platform_ufo_ssr_ttvc_use_target_rect')) {
+            requestAnimationFrame(function () {
+              var targetRect = target.getBoundingClientRect();
+              var hasSameSizePosition = _this.hasSameSizePosition(rect, targetRect);
+              _resolve(hasSameSizePosition);
+            });
+          } else {
+            var hasSameSizePosition = _this.hasSameSizePosition(rect, boundingClientRect);
+            _resolve(hasSameSizePosition);
+          }
           _this.callbacks.delete(staticKey);
         }
       } else {
@@ -39,8 +48,16 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
           return;
         }
         var _rect = _this.staticPlaceholders.get(key);
-        var _hasSameSizePosition = _this.hasSameSizePosition(_rect, boundingClientRect);
-        _resolve2(_hasSameSizePosition);
+        if (fg('platform_ufo_ssr_ttvc_use_target_rect')) {
+          requestAnimationFrame(function () {
+            var targetRect = target.getBoundingClientRect();
+            var hasSameSizePosition = _this.hasSameSizePosition(_rect, targetRect);
+            _resolve2(hasSameSizePosition);
+          });
+        } else {
+          var _hasSameSizePosition = _this.hasSameSizePosition(_rect, boundingClientRect);
+          _resolve2(_hasSameSizePosition);
+        }
         _this.staticPlaceholders.delete(staticKey);
         _this.reactValidateCallbacks.delete(staticKey);
       }

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

@@ -48,7 +48,7 @@ export declare class VCObserver {
     }): void;
     stop(): void;
     getAbortReasonInfo: () => string | null;
-    getVCRawData: (stopTime?: number) => VCRawDataType | null;
+    getVCRawData: () => VCRawDataType | null;
     getIgnoredElements(componentsLog: ComponentsLogType): {
         targetName: string;
         ignoreReason: VCIgnoreReason | undefined;

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

@@ -48,7 +48,7 @@ export declare class VCObserver {
     }): void;
     stop(): void;
     getAbortReasonInfo: () => string | null;
-    getVCRawData: (stopTime?: number) => VCRawDataType | null;
+    getVCRawData: () => VCRawDataType | null;
     getIgnoredElements(componentsLog: ComponentsLogType): {
         targetName: string;
         ignoreReason: VCIgnoreReason | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-ufo",
-	"version": "2.5.1",
+	"version": "2.5.3",
 	"description": "Parts of React UFO that are publicly available",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -129,6 +129,9 @@
 		"platform_editor_ed-25937_ignore_mutations_for_ttvc": {
 			"type": "boolean"
 		},
+		"platform_ufo_ssr_ttvc_use_target_rect": {
+			"type": "boolean"
+		},
 		"platform-ufo-invisible-element-vc-calculations": {
 			"type": "boolean"
 		},