@atlaskit/react-ufo 2.0.1 → 2.0.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 2.0.3
+
+### Patch Changes
+
+- [#157758](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/157758)
+  [`0a582096048e6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0a582096048e6) -
+  add vc clean field to post interaction log
+
+## 2.0.2
+
+### Patch Changes
+
+- [#157063](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/157063)
+  [`e710d292f8921`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e710d292f8921) -
+  manually track mount phase in UFO segments
+
 ## 2.0.1
 
 ### Patch Changes

package/dist/cjs/create-post-interaction-log-payload/index.js

@@ -138,15 +138,19 @@ function createPostInteractionLogPayload(_ref2) {
   var lastInteractionFinishEnd = Math.round(lastInteractionFinish.end);
   var lastInteractionFinishTTAI = Math.round(lastInteractionFinish.end - lastInteractionFinish.start);
   var lastInteractionFinishVC90 = null;
+  var lastInteractionFinishVCClean = false;
   if (lastInteractionFinishVCResult !== null && lastInteractionFinishVCResult !== void 0 && lastInteractionFinishVCResult['ufo:vc:state']) {
     var _lastInteractionFinis;
+    lastInteractionFinishVCClean = true;
     var lastInteractionFinishVCMetrics = lastInteractionFinishVCResult === null || lastInteractionFinishVCResult === void 0 ? void 0 : lastInteractionFinishVCResult['metrics:vc'];
     lastInteractionFinishVC90 = (_lastInteractionFinis = lastInteractionFinishVCMetrics[90]) !== null && _lastInteractionFinis !== void 0 ? _lastInteractionFinis : null;
   }
   var postInteractionFinishVCRatios = {};
   var revisedVC90 = null;
   var postInteractionFinishVCUpdates = [];
+  var postInteractionFinishVCClean = false;
   if (postInteractionFinishVCResult !== null && postInteractionFinishVCResult !== void 0 && postInteractionFinishVCResult['ufo:vc:state']) {
+    postInteractionFinishVCClean = true;
     postInteractionFinishVCRatios = postInteractionFinishVCResult === null || postInteractionFinishVCResult === void 0 ? void 0 : postInteractionFinishVCResult['ufo:vc:ratios'];
     postInteractionFinishVCUpdates = postInteractionFinishVCResult === null || postInteractionFinishVCResult === void 0 ? void 0 : postInteractionFinishVCResult['ufo:vc:updates'];
     var postInteractionFinishVCMetrics = postInteractionFinishVCResult === null || postInteractionFinishVCResult === void 0 ? void 0 : postInteractionFinishVCResult['metrics:vc'];
@@ -193,11 +197,13 @@ function createPostInteractionLogPayload(_ref2) {
             start: lastInteractionFinishStart,
             end: lastInteractionFinishEnd,
             ttai: lastInteractionFinishTTAI,
-            vc90: lastInteractionFinishVC90
+            vc90: lastInteractionFinishVC90,
+            vcClean: lastInteractionFinishVCClean
           }),
           revisedEndTime: revisedEndTime,
           revisedTtai: revisedTtai,
           revisedVC90: revisedVC90,
+          vcClean: postInteractionFinishVCClean,
           lateMutations: lateMutations,
           reactProfilerTimings: transformReactProfilerTimings(reactProfilerTimings)
         }

package/dist/cjs/segment/segment.js

@@ -36,7 +36,7 @@ var AsyncSegmentHighlight = /*#__PURE__*/(0, _react.lazy)(function () {
 
 /** A portion of the page we apply measurement to */
 function UFOSegment(_ref) {
-  var _getConfig;
+  var _getConfig2;
   var segmentName = _ref.name,
     children = _ref.children;
   var parentContext = (0, _react.useContext)(_interactionContext.default);
@@ -220,8 +220,16 @@ function UFOSegment(_ref) {
       complete: complete
     };
   }, [parentContext, labelStack, interactionId]);
+  var hasMounted = (0, _react.useRef)(false);
   var onRender = (0, _react.useCallback)(function (_id, phase, actualDuration, baseDuration, startTime, commitTime) {
-    interactionContext.onRender(phase, actualDuration, baseDuration, startTime, commitTime);
+    var _getConfig;
+    // Manually keep track of mount-phase, and ensure that every segment is always mounted at least once
+    if ((_getConfig = (0, _config.getConfig)()) !== null && _getConfig !== void 0 && _getConfig.manuallyTrackReactProfilerMounts && !hasMounted.current) {
+      interactionContext.onRender('mount', actualDuration, baseDuration, startTime, commitTime);
+      hasMounted.current = true;
+    } else {
+      interactionContext.onRender(phase, actualDuration, baseDuration, startTime, commitTime);
+    }
   }, [interactionContext]);
   (0, _react.useEffect)(function () {
     return function () {
@@ -233,7 +241,7 @@ function UFOSegment(_ref) {
       return l.name;
     }).join('/');
   }, [labelStack]);
-  var enableSegmentHighlighting = (_getConfig = (0, _config.getConfig)()) === null || _getConfig === void 0 ? void 0 : _getConfig.enableSegmentHighlighting;
+  var enableSegmentHighlighting = (_getConfig2 = (0, _config.getConfig)()) === null || _getConfig2 === void 0 ? void 0 : _getConfig2.enableSegmentHighlighting;
   return /*#__PURE__*/_react.default.createElement(_interactionContext.default.Provider, {
     value: interactionContext
   }, /*#__PURE__*/_react.default.createElement(_react.Profiler, {

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

@@ -8,7 +8,6 @@ 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 () {
@@ -55,9 +54,9 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
       }
     });
     this.intersectionObserver = new IntersectionObserver(function (entries) {
-      return (0, _platformFeatureFlags.fg)('no_ssr_placeholder_check_when_not_intersecting') ? entries.filter(function (entry) {
+      return entries.filter(function (entry) {
         return entry.intersectionRatio > 0;
-      }).forEach(_this.intersectionObserverCallback) : entries.forEach(_this.intersectionObserverCallback);
+      }).forEach(_this.intersectionObserverCallback);
     });
     if (window.document) {
       try {

package/dist/es2019/create-post-interaction-log-payload/index.js

@@ -123,15 +123,19 @@ export default function createPostInteractionLogPayload({
   const lastInteractionFinishEnd = Math.round(lastInteractionFinish.end);
   const lastInteractionFinishTTAI = Math.round(lastInteractionFinish.end - lastInteractionFinish.start);
   let lastInteractionFinishVC90 = null;
+  let lastInteractionFinishVCClean = false;
   if (lastInteractionFinishVCResult !== null && lastInteractionFinishVCResult !== void 0 && lastInteractionFinishVCResult['ufo:vc:state']) {
     var _lastInteractionFinis;
+    lastInteractionFinishVCClean = true;
     const lastInteractionFinishVCMetrics = lastInteractionFinishVCResult === null || lastInteractionFinishVCResult === void 0 ? void 0 : lastInteractionFinishVCResult['metrics:vc'];
     lastInteractionFinishVC90 = (_lastInteractionFinis = lastInteractionFinishVCMetrics[90]) !== null && _lastInteractionFinis !== void 0 ? _lastInteractionFinis : null;
   }
   let postInteractionFinishVCRatios = {};
   let revisedVC90 = null;
   let postInteractionFinishVCUpdates = [];
+  let postInteractionFinishVCClean = false;
   if (postInteractionFinishVCResult !== null && postInteractionFinishVCResult !== void 0 && postInteractionFinishVCResult['ufo:vc:state']) {
+    postInteractionFinishVCClean = true;
     postInteractionFinishVCRatios = postInteractionFinishVCResult === null || postInteractionFinishVCResult === void 0 ? void 0 : postInteractionFinishVCResult['ufo:vc:ratios'];
     postInteractionFinishVCUpdates = postInteractionFinishVCResult === null || postInteractionFinishVCResult === void 0 ? void 0 : postInteractionFinishVCResult['ufo:vc:updates'];
     const postInteractionFinishVCMetrics = postInteractionFinishVCResult === null || postInteractionFinishVCResult === void 0 ? void 0 : postInteractionFinishVCResult['metrics:vc'];
@@ -174,11 +178,13 @@ export default function createPostInteractionLogPayload({
             start: lastInteractionFinishStart,
             end: lastInteractionFinishEnd,
             ttai: lastInteractionFinishTTAI,
-            vc90: lastInteractionFinishVC90
+            vc90: lastInteractionFinishVC90,
+            vcClean: lastInteractionFinishVCClean
           },
           revisedEndTime,
           revisedTtai,
           revisedVC90,
+          vcClean: postInteractionFinishVCClean,
           lateMutations,
           reactProfilerTimings: transformReactProfilerTimings(reactProfilerTimings)
         }

package/dist/es2019/segment/segment.js

@@ -1,4 +1,4 @@
-import React, { lazy, Profiler, Suspense, useCallback, useContext, useEffect, useMemo } from 'react';
+import React, { lazy, Profiler, Suspense, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
 import { unstable_NormalPriority as NormalPriority, unstable_scheduleCallback as scheduleCallback } from 'scheduler';
 import { v4 as createUUID } from 'uuid';
 import coinflip from '../coinflip';
@@ -19,7 +19,7 @@ export default function UFOSegment({
   name: segmentName,
   children
 }) {
-  var _getConfig;
+  var _getConfig2;
   const parentContext = useContext(UFOInteractionContext);
   const segmentId = useMemo(() => generateId(), []);
   const labelStack = useMemo(() => parentContext !== null && parentContext !== void 0 && parentContext.labelStack ? [...parentContext.labelStack, {
@@ -197,14 +197,22 @@ export default function UFOSegment({
       complete
     };
   }, [parentContext, labelStack, interactionId]);
+  const hasMounted = useRef(false);
   const onRender = useCallback((_id, phase, actualDuration, baseDuration, startTime, commitTime) => {
-    interactionContext.onRender(phase, actualDuration, baseDuration, startTime, commitTime);
+    var _getConfig;
+    // Manually keep track of mount-phase, and ensure that every segment is always mounted at least once
+    if ((_getConfig = getConfig()) !== null && _getConfig !== void 0 && _getConfig.manuallyTrackReactProfilerMounts && !hasMounted.current) {
+      interactionContext.onRender('mount', actualDuration, baseDuration, startTime, commitTime);
+      hasMounted.current = true;
+    } else {
+      interactionContext.onRender(phase, actualDuration, baseDuration, startTime, commitTime);
+    }
   }, [interactionContext]);
   useEffect(() => () => {
     removeSegment(labelStack);
   }, [interactionId, parentContext, interactionContext, labelStack]);
   const reactProfilerId = useMemo(() => labelStack.map(l => l.name).join('/'), [labelStack]);
-  const enableSegmentHighlighting = (_getConfig = getConfig()) === null || _getConfig === void 0 ? void 0 : _getConfig.enableSegmentHighlighting;
+  const enableSegmentHighlighting = (_getConfig2 = getConfig()) === null || _getConfig2 === void 0 ? void 0 : _getConfig2.enableSegmentHighlighting;
   return /*#__PURE__*/React.createElement(UFOInteractionContext.Provider, {
     value: interactionContext
   }, /*#__PURE__*/React.createElement(Profiler, {

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

@@ -1,5 +1,4 @@
 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 {
@@ -44,7 +43,7 @@ export class SSRPlaceholderHandlers {
         this.reactValidateCallbacks.delete(staticKey);
       }
     });
-    this.intersectionObserver = new IntersectionObserver(entries => fg('no_ssr_placeholder_check_when_not_intersecting') ? entries.filter(entry => entry.intersectionRatio > 0).forEach(this.intersectionObserverCallback) : entries.forEach(this.intersectionObserverCallback));
+    this.intersectionObserver = new IntersectionObserver(entries => entries.filter(entry => entry.intersectionRatio > 0).forEach(this.intersectionObserverCallback));
     if (window.document) {
       try {
         const existingElements = document.querySelectorAll('[data-ssr-placeholder]');

package/dist/esm/create-post-interaction-log-payload/index.js

@@ -131,15 +131,19 @@ export default function createPostInteractionLogPayload(_ref2) {
   var lastInteractionFinishEnd = Math.round(lastInteractionFinish.end);
   var lastInteractionFinishTTAI = Math.round(lastInteractionFinish.end - lastInteractionFinish.start);
   var lastInteractionFinishVC90 = null;
+  var lastInteractionFinishVCClean = false;
   if (lastInteractionFinishVCResult !== null && lastInteractionFinishVCResult !== void 0 && lastInteractionFinishVCResult['ufo:vc:state']) {
     var _lastInteractionFinis;
+    lastInteractionFinishVCClean = true;
     var lastInteractionFinishVCMetrics = lastInteractionFinishVCResult === null || lastInteractionFinishVCResult === void 0 ? void 0 : lastInteractionFinishVCResult['metrics:vc'];
     lastInteractionFinishVC90 = (_lastInteractionFinis = lastInteractionFinishVCMetrics[90]) !== null && _lastInteractionFinis !== void 0 ? _lastInteractionFinis : null;
   }
   var postInteractionFinishVCRatios = {};
   var revisedVC90 = null;
   var postInteractionFinishVCUpdates = [];
+  var postInteractionFinishVCClean = false;
   if (postInteractionFinishVCResult !== null && postInteractionFinishVCResult !== void 0 && postInteractionFinishVCResult['ufo:vc:state']) {
+    postInteractionFinishVCClean = true;
     postInteractionFinishVCRatios = postInteractionFinishVCResult === null || postInteractionFinishVCResult === void 0 ? void 0 : postInteractionFinishVCResult['ufo:vc:ratios'];
     postInteractionFinishVCUpdates = postInteractionFinishVCResult === null || postInteractionFinishVCResult === void 0 ? void 0 : postInteractionFinishVCResult['ufo:vc:updates'];
     var postInteractionFinishVCMetrics = postInteractionFinishVCResult === null || postInteractionFinishVCResult === void 0 ? void 0 : postInteractionFinishVCResult['metrics:vc'];
@@ -186,11 +190,13 @@ export default function createPostInteractionLogPayload(_ref2) {
             start: lastInteractionFinishStart,
             end: lastInteractionFinishEnd,
             ttai: lastInteractionFinishTTAI,
-            vc90: lastInteractionFinishVC90
+            vc90: lastInteractionFinishVC90,
+            vcClean: lastInteractionFinishVCClean
           }),
           revisedEndTime: revisedEndTime,
           revisedTtai: revisedTtai,
           revisedVC90: revisedVC90,
+          vcClean: postInteractionFinishVCClean,
           lateMutations: lateMutations,
           reactProfilerTimings: transformReactProfilerTimings(reactProfilerTimings)
         }

package/dist/esm/segment/segment.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 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) { _defineProperty(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; }
-import React, { lazy, Profiler, Suspense, useCallback, useContext, useEffect, useMemo } from 'react';
+import React, { lazy, Profiler, Suspense, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
 import { unstable_NormalPriority as NormalPriority, unstable_scheduleCallback as scheduleCallback } from 'scheduler';
 import { v4 as createUUID } from 'uuid';
 import coinflip from '../coinflip';
@@ -24,7 +24,7 @@ var AsyncSegmentHighlight = /*#__PURE__*/lazy(function () {
 
 /** A portion of the page we apply measurement to */
 export default function UFOSegment(_ref) {
-  var _getConfig;
+  var _getConfig2;
   var segmentName = _ref.name,
     children = _ref.children;
   var parentContext = useContext(UFOInteractionContext);
@@ -208,8 +208,16 @@ export default function UFOSegment(_ref) {
       complete: complete
     };
   }, [parentContext, labelStack, interactionId]);
+  var hasMounted = useRef(false);
   var onRender = useCallback(function (_id, phase, actualDuration, baseDuration, startTime, commitTime) {
-    interactionContext.onRender(phase, actualDuration, baseDuration, startTime, commitTime);
+    var _getConfig;
+    // Manually keep track of mount-phase, and ensure that every segment is always mounted at least once
+    if ((_getConfig = getConfig()) !== null && _getConfig !== void 0 && _getConfig.manuallyTrackReactProfilerMounts && !hasMounted.current) {
+      interactionContext.onRender('mount', actualDuration, baseDuration, startTime, commitTime);
+      hasMounted.current = true;
+    } else {
+      interactionContext.onRender(phase, actualDuration, baseDuration, startTime, commitTime);
+    }
   }, [interactionContext]);
   useEffect(function () {
     return function () {
@@ -221,7 +229,7 @@ export default function UFOSegment(_ref) {
       return l.name;
     }).join('/');
   }, [labelStack]);
-  var enableSegmentHighlighting = (_getConfig = getConfig()) === null || _getConfig === void 0 ? void 0 : _getConfig.enableSegmentHighlighting;
+  var enableSegmentHighlighting = (_getConfig2 = getConfig()) === null || _getConfig2 === void 0 ? void 0 : _getConfig2.enableSegmentHighlighting;
   return /*#__PURE__*/React.createElement(UFOInteractionContext.Provider, {
     value: interactionContext
   }, /*#__PURE__*/React.createElement(Profiler, {

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

@@ -1,7 +1,6 @@
 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 () {
@@ -48,9 +47,9 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
       }
     });
     this.intersectionObserver = new IntersectionObserver(function (entries) {
-      return fg('no_ssr_placeholder_check_when_not_intersecting') ? entries.filter(function (entry) {
+      return entries.filter(function (entry) {
         return entry.intersectionRatio > 0;
-      }).forEach(_this.intersectionObserverCallback) : entries.forEach(_this.intersectionObserverCallback);
+      }).forEach(_this.intersectionObserverCallback);
     });
     if (window.document) {
       try {

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

@@ -70,6 +70,7 @@ export type Config = {
     readonly enableSegmentHighlighting?: boolean;
     readonly shouldCalculateLighthouseMetricsFromTTAI?: boolean;
     readonly timeWindowForLateMutationsInMilliseconds?: number;
+    readonly manuallyTrackReactProfilerMounts?: boolean;
     /**
      * @deprecated setting this will do nothing now
      */

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

@@ -24,6 +24,7 @@ export default function createPostInteractionLogPayload({ lastInteractionFinish,
                     end: number;
                     ttai: number;
                     vc90: number | null;
+                    vcClean: boolean;
                     type: import("../common").InteractionType;
                     id: string;
                     abortReason?: import("../common").AbortReasonType | undefined;
@@ -33,6 +34,7 @@ export default function createPostInteractionLogPayload({ lastInteractionFinish,
                 revisedEndTime: number;
                 revisedTtai: number;
                 revisedVC90: number | null;
+                vcClean: boolean;
                 lateMutations: {
                     time: number;
                     element: string;

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

@@ -70,6 +70,7 @@ export type Config = {
     readonly enableSegmentHighlighting?: boolean;
     readonly shouldCalculateLighthouseMetricsFromTTAI?: boolean;
     readonly timeWindowForLateMutationsInMilliseconds?: number;
+    readonly manuallyTrackReactProfilerMounts?: boolean;
     /**
      * @deprecated setting this will do nothing now
      */

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

@@ -24,6 +24,7 @@ export default function createPostInteractionLogPayload({ lastInteractionFinish,
                     end: number;
                     ttai: number;
                     vc90: number | null;
+                    vcClean: boolean;
                     type: import("../common").InteractionType;
                     id: string;
                     abortReason?: import("../common").AbortReasonType | undefined;
@@ -33,6 +34,7 @@ export default function createPostInteractionLogPayload({ lastInteractionFinish,
                 revisedEndTime: number;
                 revisedTtai: number;
                 revisedVC90: number | null;
+                vcClean: boolean;
                 lateMutations: {
                     time: number;
                     element: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-ufo",
-	"version": "2.0.1",
+	"version": "2.0.3",
 	"description": "Parts of React UFO that are publicly available",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",