@atlaskit/react-ufo 2.0.0 → 2.0.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @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
+
+- [#156904](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/156904)
+  [`285da5f8a4b0b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/285da5f8a4b0b) -
+  use weakref for VC observer debug elements
+
 ## 2.0.0
 
 ### Major 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/cjs/vc/vc-observer/index.js

@@ -214,7 +214,7 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
           _this.componentsLog[time] = [];
         }
         _this.componentsLog[time].push({
-          __debug__element: _this.devToolsEnabled ? element : null,
+          __debug__element: _this.devToolsEnabled ? new WeakRef(element) : null,
           intersectionRect: intersectionRect,
           targetName: targetName,
           ignoreReason: ignoreReason
@@ -464,7 +464,7 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
       if (ssr !== UNUSED_SECTOR) {
         var _window$document;
         var element = {
-          __debug__element: (_window$document = window.document) === null || _window$document === void 0 ? void 0 : _window$document.body,
+          __debug__element: new WeakRef((_window$document = window.document) === null || _window$document === void 0 ? void 0 : _window$document.body),
           intersectionRect: {
             top: 0,
             left: 0,

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/index.js

@@ -228,7 +228,7 @@ export class VCObserver {
           this.componentsLog[time] = [];
         }
         this.componentsLog[time].push({
-          __debug__element: this.devToolsEnabled ? element : null,
+          __debug__element: this.devToolsEnabled ? new WeakRef(element) : null,
           intersectionRect,
           targetName,
           ignoreReason
@@ -363,7 +363,7 @@ export class VCObserver {
     if (ssr !== UNUSED_SECTOR) {
       var _window$document;
       const element = {
-        __debug__element: (_window$document = window.document) === null || _window$document === void 0 ? void 0 : _window$document.body,
+        __debug__element: new WeakRef((_window$document = window.document) === null || _window$document === void 0 ? void 0 : _window$document.body),
         intersectionRect: {
           top: 0,
           left: 0,

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/index.js

@@ -207,7 +207,7 @@ export var VCObserver = /*#__PURE__*/function () {
           _this.componentsLog[time] = [];
         }
         _this.componentsLog[time].push({
-          __debug__element: _this.devToolsEnabled ? element : null,
+          __debug__element: _this.devToolsEnabled ? new WeakRef(element) : null,
           intersectionRect: intersectionRect,
           targetName: targetName,
           ignoreReason: ignoreReason
@@ -457,7 +457,7 @@ export var VCObserver = /*#__PURE__*/function () {
       if (ssr !== UNUSED_SECTOR) {
         var _window$document;
         var element = {
-          __debug__element: (_window$document = window.document) === null || _window$document === void 0 ? void 0 : _window$document.body,
+          __debug__element: new WeakRef((_window$document = window.document) === null || _window$document === void 0 ? void 0 : _window$document.body),
           intersectionRect: {
             top: 0,
             left: 0,

package/dist/types/common/vc/types.d.ts

@@ -38,7 +38,7 @@ export type VCEntryType = {
 export type VCIgnoreReason = 'image' | 'ssr-hydration' | '';
 export type ComponentsLogEntry = {
     targetName: string;
-    __debug__element: Element | null;
+    __debug__element: WeakRef<Element> | null;
     intersectionRect: DOMRectReadOnly;
     ignoreReason?: VCIgnoreReason;
 };

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/common/vc/types.d.ts

@@ -38,7 +38,7 @@ export type VCEntryType = {
 export type VCIgnoreReason = 'image' | 'ssr-hydration' | '';
 export type ComponentsLogEntry = {
     targetName: string;
-    __debug__element: Element | null;
+    __debug__element: WeakRef<Element> | null;
     intersectionRect: DOMRectReadOnly;
     ignoreReason?: VCIgnoreReason;
 };

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.0",
+	"version": "2.0.2",
 	"description": "Parts of React UFO that are publicly available",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",