@atlaskit/react-ufo 4.15.3 → 4.15.5

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 4.15.5
+
+### Patch Changes
+
+- [`80ea06acdd0ac`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/80ea06acdd0ac) -
+  Add entrypoints framework detection for TTVC observer
+- [`c4c9659ad7ccd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c4c9659ad7ccd) -
+  refactor display:contents element detection
+
+## 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/cjs/vc/vc-observer/observers/ssr-placeholders/index.js

@@ -273,6 +273,13 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
         }
       });
     }
+  }, {
+    key: "validateReactComponentMatchToPlaceholderV4",
+    value: function validateReactComponentMatchToPlaceholderV4(el) {
+      el = this.findNearestPlaceholderContainerIfIgnored(el);
+      var id = this.getPlaceholderReplacementId(el);
+      return this.staticPlaceholders.has(id);
+    }
   }, {
     key: "hasSameSizePosition",
     value: function hasSameSizePosition(rect, boundingClientRect) {

package/dist/cjs/vc/vc-observer-new/metric-calculator/vcnext/index.js

@@ -23,7 +23,10 @@ var getConsideredEntryTypes = function getConsideredEntryTypes() {
   if ((0, _platformFeatureFlags.fg)('platform_ufo_remove_ssr_placeholder_in_ttvc_v4')) {
     consideredEntryTypes.push('mutation:ssr-placeholder');
   }
-  return ['mutation:display-contents-children-element'];
+  if ((0, _platformFeatureFlags.fg)('platform_ufo_detect_zero_dimension_rectangles')) {
+    consideredEntryTypes.push('mutation:display-contents-children-attribute');
+  }
+  return consideredEntryTypes;
 };
 var getExcludedEntryTypes = function getExcludedEntryTypes() {
   var excludedEntryTypes = ['layout-shift:same-rect'];