@atlaskit/react-ufo 4.15.3 → 4.15.4

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 4.15.4
+
+### Patch Changes
+
+- [`81a0f341fac4f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/81a0f341fac4f) -
+  Platformise Jira's SSR Render Profiler timings
+
 ## 4.15.3
 
 ### Patch Changes

package/dist/cjs/segment/segment.js

@@ -11,6 +11,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _react = _interopRequireWildcard(require("react"));
 var _scheduler = require("scheduler");
 var _uuid = require("uuid");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _coinflip = _interopRequireDefault(require("../coinflip"));
 var _config = require("../config");
 var _experienceTraceIdContext = require("../experience-trace-id-context");
@@ -20,6 +21,7 @@ var _interactionMetrics = require("../interaction-metrics");
 var _routeNameContext = _interopRequireDefault(require("../route-name-context"));
 var _shortId = _interopRequireDefault(require("../short-id"));
 var _scheduleOnPaint = _interopRequireDefault(require("./schedule-on-paint"));
+var _ssrRenderProfiler = _interopRequireDefault(require("./ssr-render-profiler"));
 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 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) { (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; } // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
@@ -277,11 +279,18 @@ function UFOSegment(_ref) {
       return l.name;
     }).join('/');
   }, [labelStack]);
-  return /*#__PURE__*/_react.default.createElement(_interactionContext.default.Provider, {
+  var ufoSegment = /*#__PURE__*/_react.default.createElement(_interactionContext.default.Provider, {
     value: interactionContext
   }, /*#__PURE__*/_react.default.createElement(_react.Profiler, {
     id: reactProfilerId,
     onRender: onRender
   }, children));
+  if ((0, _platformFeatureFlags.fg)('platform_ufo_ssr_render_profiler')) {
+    return /*#__PURE__*/_react.default.createElement(_ssrRenderProfiler.default, {
+      labelStack: labelStack,
+      onRender: interactionContext.onRender
+    }, ufoSegment);
+  }
+  return ufoSegment;
 }
 UFOSegment.displayName = 'UFOSegment';

package/dist/cjs/segment/ssr-render-profiler.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SsrRenderProfilerInner = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _interactionMetrics = require("../interaction-metrics");
+var _process;
+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); }
+// These are stored outside react context to be resilient to concurrent mode
+// restarting the start marker from a suspense and losing the initial render
+var startTimes = new Map();
+// Keep track of the last interaction id and reset the start timers if it ever changes.
+// This is to allow multi-step ssr to track the render timers from different "interaction"s seperately
+var lastActiveInteraction;
+function checkActiveInteractionAndResetStartMarksIfSet() {
+  var _getActiveInteraction;
+  var activeInteractionId = (_getActiveInteraction = (0, _interactionMetrics.getActiveInteraction)()) === null || _getActiveInteraction === void 0 ? void 0 : _getActiveInteraction.id;
+  if (!!lastActiveInteraction && lastActiveInteraction !== activeInteractionId) {
+    startTimes.clear();
+  }
+  lastActiveInteraction = activeInteractionId;
+}
+var onStartRender = function onStartRender(id) {
+  var _startTimes$get;
+  if (!startTimes.has(id)) {
+    startTimes.set(id, []);
+  }
+  (_startTimes$get = startTimes.get(id)) === null || _startTimes$get === void 0 || _startTimes$get.push(performance.now());
+};
+var isInSSR = Boolean(globalThis === null || globalThis === void 0 ? void 0 : globalThis.__SERVER__) || typeof process !== 'undefined' && Boolean(((_process = process) === null || _process === void 0 || (_process = _process.env) === null || _process === void 0 ? void 0 : _process.REACT_SSR) || false);
+var ProfilerMarker = function ProfilerMarker(_ref) {
+  var onRender = _ref.onRender;
+  if (isInSSR) {
+    onRender === null || onRender === void 0 || onRender();
+  }
+  return null;
+};
+var SsrRenderProfilerInner = exports.SsrRenderProfilerInner = function SsrRenderProfilerInner(_ref2) {
+  var children = _ref2.children,
+    labelStack = _ref2.labelStack,
+    _onRender = _ref2.onRender;
+  var reactProfilerId = (0, _react.useMemo)(function () {
+    return labelStack.map(function (l) {
+      return l.name;
+    }).join('/');
+  }, [labelStack]);
+  checkActiveInteractionAndResetStartMarksIfSet();
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ProfilerMarker, {
+    onRender: function onRender() {
+      return onStartRender(reactProfilerId);
+    }
+  }), children, /*#__PURE__*/_react.default.createElement(ProfilerMarker, {
+    onRender: function onRender() {
+      var startTimesForId = startTimes.get(reactProfilerId);
+      if (startTimesForId !== null && startTimesForId !== void 0 && startTimesForId.length) {
+        var endTime = performance.now();
+        var firstStartTime = startTimesForId[0];
+        var lastStartTime = startTimesForId[startTimesForId.length - 1];
+        var baseDuration = endTime - lastStartTime;
+        var actualDuration = endTime - firstStartTime;
+        _onRender('mount',
+        // this is incorrect, but on the server there is no mount phase
+        actualDuration, baseDuration, firstStartTime, endTime);
+      }
+    }
+  }));
+};
+var SsrRenderProfiler = function SsrRenderProfiler(props) {
+  if (isInSSR) {
+    return /*#__PURE__*/_react.default.createElement(SsrRenderProfilerInner, props);
+  }
+
+  // ensure structure similar to SSR implementation
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ProfilerMarker, null), props.children);
+};
+var _default = exports.default = SsrRenderProfiler;

package/dist/es2019/segment/segment.js

@@ -2,6 +2,7 @@ import React, { Profiler, useCallback, useContext, useEffect, useMemo, useRef }
 import { unstable_NormalPriority as NormalPriority, unstable_scheduleCallback as scheduleCallback } from 'scheduler';
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import { v4 as createUUID } from 'uuid';
+import { fg } from '@atlaskit/platform-feature-flags';
 import coinflip from '../coinflip';
 import { getConfig, getDoNotAbortActivePressInteraction, getInteractionRate, getMinorInteractions } from '../config';
 import { getActiveTrace, setInteractionActiveTrace } from '../experience-trace-id-context';
@@ -11,6 +12,7 @@ import { abortByNewInteraction, addApdex, addCustomData, addCustomTiming, addHol
 import UFORouteName from '../route-name-context';
 import generateId from '../short-id';
 import scheduleOnPaint from './schedule-on-paint';
+import SsrRenderProfiler from './ssr-render-profiler';
 let tryCompleteHandle;
 let hasMarkedFirstSegmentLoad = false;
 
@@ -255,11 +257,18 @@ export default function UFOSegment({
     };
   }, [interactionId, parentContext, interactionContext, labelStack]);
   const reactProfilerId = useMemo(() => labelStack.map(l => l.name).join('/'), [labelStack]);
-  return /*#__PURE__*/React.createElement(UFOInteractionContext.Provider, {
+  const ufoSegment = /*#__PURE__*/React.createElement(UFOInteractionContext.Provider, {
     value: interactionContext
   }, /*#__PURE__*/React.createElement(Profiler, {
     id: reactProfilerId,
     onRender: onRender
   }, children));
+  if (fg('platform_ufo_ssr_render_profiler')) {
+    return /*#__PURE__*/React.createElement(SsrRenderProfiler, {
+      labelStack: labelStack,
+      onRender: interactionContext.onRender
+    }, ufoSegment);
+  }
+  return ufoSegment;
 }
 UFOSegment.displayName = 'UFOSegment';

package/dist/es2019/segment/ssr-render-profiler.js

@@ -0,0 +1,68 @@
+var _process, _process$env;
+import React, { useMemo } from 'react';
+import { getActiveInteraction } from '../interaction-metrics';
+
+// These are stored outside react context to be resilient to concurrent mode
+// restarting the start marker from a suspense and losing the initial render
+const startTimes = new Map();
+// Keep track of the last interaction id and reset the start timers if it ever changes.
+// This is to allow multi-step ssr to track the render timers from different "interaction"s seperately
+let lastActiveInteraction;
+function checkActiveInteractionAndResetStartMarksIfSet() {
+  var _getActiveInteraction;
+  const activeInteractionId = (_getActiveInteraction = getActiveInteraction()) === null || _getActiveInteraction === void 0 ? void 0 : _getActiveInteraction.id;
+  if (!!lastActiveInteraction && lastActiveInteraction !== activeInteractionId) {
+    startTimes.clear();
+  }
+  lastActiveInteraction = activeInteractionId;
+}
+const onStartRender = id => {
+  var _startTimes$get;
+  if (!startTimes.has(id)) {
+    startTimes.set(id, []);
+  }
+  (_startTimes$get = startTimes.get(id)) === null || _startTimes$get === void 0 ? void 0 : _startTimes$get.push(performance.now());
+};
+const isInSSR = Boolean(globalThis === null || globalThis === void 0 ? void 0 : globalThis.__SERVER__) || typeof process !== 'undefined' && Boolean(((_process = process) === null || _process === void 0 ? void 0 : (_process$env = _process.env) === null || _process$env === void 0 ? void 0 : _process$env.REACT_SSR) || false);
+const ProfilerMarker = ({
+  onRender
+}) => {
+  if (isInSSR) {
+    onRender === null || onRender === void 0 ? void 0 : onRender();
+  }
+  return null;
+};
+export const SsrRenderProfilerInner = ({
+  children,
+  labelStack,
+  onRender
+}) => {
+  const reactProfilerId = useMemo(() => labelStack.map(l => l.name).join('/'), [labelStack]);
+  checkActiveInteractionAndResetStartMarksIfSet();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ProfilerMarker, {
+    onRender: () => onStartRender(reactProfilerId)
+  }), children, /*#__PURE__*/React.createElement(ProfilerMarker, {
+    onRender: () => {
+      const startTimesForId = startTimes.get(reactProfilerId);
+      if (startTimesForId !== null && startTimesForId !== void 0 && startTimesForId.length) {
+        const endTime = performance.now();
+        const firstStartTime = startTimesForId[0];
+        const lastStartTime = startTimesForId[startTimesForId.length - 1];
+        const baseDuration = endTime - lastStartTime;
+        const actualDuration = endTime - firstStartTime;
+        onRender('mount',
+        // this is incorrect, but on the server there is no mount phase
+        actualDuration, baseDuration, firstStartTime, endTime);
+      }
+    }
+  }));
+};
+const SsrRenderProfiler = props => {
+  if (isInSSR) {
+    return /*#__PURE__*/React.createElement(SsrRenderProfilerInner, props);
+  }
+
+  // ensure structure similar to SSR implementation
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ProfilerMarker, null), props.children);
+};
+export default SsrRenderProfiler;

package/dist/esm/segment/segment.js

@@ -6,6 +6,7 @@ import React, { Profiler, useCallback, useContext, useEffect, useMemo, useRef }
 import { unstable_NormalPriority as NormalPriority, unstable_scheduleCallback as scheduleCallback } from 'scheduler';
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import { v4 as createUUID } from 'uuid';
+import { fg } from '@atlaskit/platform-feature-flags';
 import coinflip from '../coinflip';
 import { getConfig, getDoNotAbortActivePressInteraction, getInteractionRate, getMinorInteractions } from '../config';
 import { getActiveTrace, setInteractionActiveTrace } from '../experience-trace-id-context';
@@ -15,6 +16,7 @@ import { abortByNewInteraction, addApdex as _addApdex, addCustomData as _addCust
 import UFORouteName from '../route-name-context';
 import generateId from '../short-id';
 import scheduleOnPaint from './schedule-on-paint';
+import SsrRenderProfiler from './ssr-render-profiler';
 var tryCompleteHandle;
 var hasMarkedFirstSegmentLoad = false;
 
@@ -269,11 +271,18 @@ export default function UFOSegment(_ref) {
       return l.name;
     }).join('/');
   }, [labelStack]);
-  return /*#__PURE__*/React.createElement(UFOInteractionContext.Provider, {
+  var ufoSegment = /*#__PURE__*/React.createElement(UFOInteractionContext.Provider, {
     value: interactionContext
   }, /*#__PURE__*/React.createElement(Profiler, {
     id: reactProfilerId,
     onRender: onRender
   }, children));
+  if (fg('platform_ufo_ssr_render_profiler')) {
+    return /*#__PURE__*/React.createElement(SsrRenderProfiler, {
+      labelStack: labelStack,
+      onRender: interactionContext.onRender
+    }, ufoSegment);
+  }
+  return ufoSegment;
 }
 UFOSegment.displayName = 'UFOSegment';

package/dist/esm/segment/ssr-render-profiler.js

@@ -0,0 +1,72 @@
+var _process;
+import React, { useMemo } from 'react';
+import { getActiveInteraction } from '../interaction-metrics';
+
+// These are stored outside react context to be resilient to concurrent mode
+// restarting the start marker from a suspense and losing the initial render
+var startTimes = new Map();
+// Keep track of the last interaction id and reset the start timers if it ever changes.
+// This is to allow multi-step ssr to track the render timers from different "interaction"s seperately
+var lastActiveInteraction;
+function checkActiveInteractionAndResetStartMarksIfSet() {
+  var _getActiveInteraction;
+  var activeInteractionId = (_getActiveInteraction = getActiveInteraction()) === null || _getActiveInteraction === void 0 ? void 0 : _getActiveInteraction.id;
+  if (!!lastActiveInteraction && lastActiveInteraction !== activeInteractionId) {
+    startTimes.clear();
+  }
+  lastActiveInteraction = activeInteractionId;
+}
+var onStartRender = function onStartRender(id) {
+  var _startTimes$get;
+  if (!startTimes.has(id)) {
+    startTimes.set(id, []);
+  }
+  (_startTimes$get = startTimes.get(id)) === null || _startTimes$get === void 0 || _startTimes$get.push(performance.now());
+};
+var isInSSR = Boolean(globalThis === null || globalThis === void 0 ? void 0 : globalThis.__SERVER__) || typeof process !== 'undefined' && Boolean(((_process = process) === null || _process === void 0 || (_process = _process.env) === null || _process === void 0 ? void 0 : _process.REACT_SSR) || false);
+var ProfilerMarker = function ProfilerMarker(_ref) {
+  var onRender = _ref.onRender;
+  if (isInSSR) {
+    onRender === null || onRender === void 0 || onRender();
+  }
+  return null;
+};
+export var SsrRenderProfilerInner = function SsrRenderProfilerInner(_ref2) {
+  var children = _ref2.children,
+    labelStack = _ref2.labelStack,
+    _onRender = _ref2.onRender;
+  var reactProfilerId = useMemo(function () {
+    return labelStack.map(function (l) {
+      return l.name;
+    }).join('/');
+  }, [labelStack]);
+  checkActiveInteractionAndResetStartMarksIfSet();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ProfilerMarker, {
+    onRender: function onRender() {
+      return onStartRender(reactProfilerId);
+    }
+  }), children, /*#__PURE__*/React.createElement(ProfilerMarker, {
+    onRender: function onRender() {
+      var startTimesForId = startTimes.get(reactProfilerId);
+      if (startTimesForId !== null && startTimesForId !== void 0 && startTimesForId.length) {
+        var endTime = performance.now();
+        var firstStartTime = startTimesForId[0];
+        var lastStartTime = startTimesForId[startTimesForId.length - 1];
+        var baseDuration = endTime - lastStartTime;
+        var actualDuration = endTime - firstStartTime;
+        _onRender('mount',
+        // this is incorrect, but on the server there is no mount phase
+        actualDuration, baseDuration, firstStartTime, endTime);
+      }
+    }
+  }));
+};
+var SsrRenderProfiler = function SsrRenderProfiler(props) {
+  if (isInSSR) {
+    return /*#__PURE__*/React.createElement(SsrRenderProfilerInner, props);
+  }
+
+  // ensure structure similar to SSR implementation
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ProfilerMarker, null), props.children);
+};
+export default SsrRenderProfiler;

package/dist/types/segment/ssr-render-profiler.d.ts

@@ -0,0 +1,9 @@
+import React, { type ReactNode } from 'react';
+import type { EnhancedUFOInteractionContextType, ReactProfilerTiming } from '../common';
+export declare const SsrRenderProfilerInner: ({ children, labelStack, onRender, }: {
+    children?: ReactNode | undefined;
+    labelStack: ReactProfilerTiming["labelStack"];
+    onRender: EnhancedUFOInteractionContextType["onRender"];
+}) => React.JSX.Element;
+declare const SsrRenderProfiler: (props: Parameters<typeof SsrRenderProfilerInner>[0]) => React.JSX.Element;
+export default SsrRenderProfiler;

package/dist/types-ts4.5/segment/ssr-render-profiler.d.ts

@@ -0,0 +1,9 @@
+import React, { type ReactNode } from 'react';
+import type { EnhancedUFOInteractionContextType, ReactProfilerTiming } from '../common';
+export declare const SsrRenderProfilerInner: ({ children, labelStack, onRender, }: {
+    children?: ReactNode | undefined;
+    labelStack: ReactProfilerTiming["labelStack"];
+    onRender: EnhancedUFOInteractionContextType["onRender"];
+}) => React.JSX.Element;
+declare const SsrRenderProfiler: (props: Parameters<typeof SsrRenderProfilerInner>[0]) => React.JSX.Element;
+export default SsrRenderProfiler;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-ufo",
-	"version": "4.15.3",
+	"version": "4.15.4",
 	"description": "Parts of React UFO that are publicly available",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -149,6 +149,9 @@
 		"platform_editor_exclude_dnd_anchor_name_from_ttvc": {
 			"type": "boolean"
 		},
+		"platform_ufo_ssr_render_profiler": {
+			"type": "boolean"
+		},
 		"platform_ufo_enable_finish_interaction_transition": {
 			"type": "boolean"
 		},