@atlaskit/react-ufo 2.0.1 → 2.0.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 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/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/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/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/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-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/package.json

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