@atlaskit/react-ufo 2.3.3 → 2.4.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 2.4.1
+
+### Patch Changes
+
+- [#170689](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/170689)
+  [`960d36f94739d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/960d36f94739d) -
+  [React UFO] Fix sessionStorage no access error
+
+## 2.4.0
+
+### Minor Changes
+
+- [#169410](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/169410)
+  [`70969d8e13353`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/70969d8e13353) -
+  Optimising React UFO payload size by referncing segments tree
+
 ## 2.3.3
 
 ### Patch Changes

package/dist/cjs/common/constants.js

@@ -4,4 +4,5 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.REACT_UFO_VERSION = void 0;
-var REACT_UFO_VERSION = exports.REACT_UFO_VERSION = '1.0.1';
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var REACT_UFO_VERSION = exports.REACT_UFO_VERSION = (0, _platformFeatureFlags.fg)('react-ufo-payload-segment-compressed') ? '2.0.0' : '1.0.1';

package/dist/cjs/create-payload/common/utils/index.js

@@ -1,15 +1,74 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.buildSegmentTree = buildSegmentTree;
 exports.isSegmentLabel = isSegmentLabel;
+exports.labelStackStartWith = labelStackStartWith;
+exports.optimizeLabelStack = optimizeLabelStack;
 exports.sanitizeUfoName = void 0;
+exports.stringifyLabelStackFully = stringifyLabelStackFully;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _constants = require("../../../common/constants");
+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 @typescript-eslint/no-non-null-asserted-optional-chain */
 var sanitizeUfoName = exports.sanitizeUfoName = function sanitizeUfoName(name) {
   return name.replace(/_/g, '-');
 };
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function isSegmentLabel(obj) {
   return obj && typeof obj.name === 'string' && typeof obj.segmentId === 'string';
+}
+function buildSegmentTree(labelStacks) {
+  var r = {
+    n: 'segment-tree-root',
+    c: {}
+  };
+  labelStacks.forEach(function (labelStack) {
+    var currentNode = r;
+    labelStack.forEach(function (label, index) {
+      var _currentNode$c;
+      var name = label.name;
+      var id = isSegmentLabel(label) ? label.segmentId : undefined;
+      var key = id !== undefined ? id.toString() : name;
+      if (currentNode.c && !currentNode.c[key]) {
+        currentNode.c[key] = {
+          n: name
+        };
+      }
+      currentNode = (_currentNode$c = currentNode.c) === null || _currentNode$c === void 0 ? void 0 : _currentNode$c[key];
+      if (index < labelStack.length - 1) {
+        currentNode.c = _objectSpread({}, currentNode.c || {});
+      }
+    });
+  });
+  return {
+    r: r
+  };
+}
+function stringifyLabelStackFully(labelStack) {
+  return labelStack.map(function (l) {
+    if (isSegmentLabel(l)) {
+      return "".concat(l.name, ":").concat(l.segmentId);
+    }
+    return l.name;
+  }).join('/');
+}
+function getLabelStackReference(labelStack) {
+  return labelStack.map(function (l) {
+    return isSegmentLabel(l) ? l.segmentId : l.name;
+  }).join('/');
+}
+function labelStackStartWith(labelStack, startWith) {
+  return stringifyLabelStackFully(labelStack).startsWith(stringifyLabelStackFully(startWith));
+}
+function optimizeLabelStack(labelStack) {
+  return _constants.REACT_UFO_VERSION === '2.0.0' ? getLabelStackReference(labelStack) : labelStack.map(function (ls) {
+    return _objectSpread({
+      n: ls.name
+    }, ls.segmentId ? {
+      s: ls.segmentId
+    } : {});
+  });
 }

package/dist/cjs/create-payload/index.js

@@ -11,11 +11,13 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _bowserUltralight = _interopRequireDefault(require("bowser-ultralight"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _additionalPayload = require("../additional-payload");
 var bundleEvalTiming = _interopRequireWildcard(require("../bundle-eval-timing"));
 var _constants = require("../common/constants");
 var _config = require("../config");
 var _customTimings = require("../custom-timings");
+var _globalErrorHandler = require("../global-error-handler");
 var _hiddenTiming = require("../hidden-timing");
 var initialPageLoadExtraTiming = _interopRequireWildcard(require("../initial-page-load-extra-timing"));
 var _interactionMetrics = require("../interaction-metrics");
@@ -49,17 +51,6 @@ function getUfoNameOverride(interaction) {
     return ufoName;
   }
 }
-function stringifyLabelStackFully(labelStack) {
-  return labelStack.map(function (l) {
-    if ((0, _utils.isSegmentLabel)(l)) {
-      return "".concat(l.name, ":").concat(l.segmentId);
-    }
-    return l.name;
-  }).join('/');
-}
-function labelStackStartWith(labelStack, startWith) {
-  return stringifyLabelStackFully(labelStack).startsWith(stringifyLabelStackFully(startWith));
-}
 function getEarliestLegacyStopTime(interaction, labelStack) {
   var earliestLegacyStopTime = null;
   interaction.apdex.forEach(function (a) {
@@ -67,7 +58,7 @@ function getEarliestLegacyStopTime(interaction, labelStack) {
     if (!(a !== null && a !== void 0 && a.stopTime)) {
       return;
     }
-    if (!labelStackStartWith((_a$labelStack = a.labelStack) !== null && _a$labelStack !== void 0 ? _a$labelStack : [], labelStack)) {
+    if (!(0, _utils.labelStackStartWith)((_a$labelStack = a.labelStack) !== null && _a$labelStack !== void 0 ? _a$labelStack : [], labelStack)) {
       return;
     }
     if (a.stopTime > interaction.start && ((_earliestLegacyStopTi = earliestLegacyStopTime) !== null && _earliestLegacyStopTi !== void 0 ? _earliestLegacyStopTi : a.stopTime) >= a.stopTime) {
@@ -345,18 +336,6 @@ var getTracingContextData = function getTracingContextData(interaction) {
   }
   return tracingContextData;
 };
-
-// interaction metric
-
-function optimizeLabelStack(labelStack) {
-  return labelStack.map(function (ls) {
-    return _objectSpread({
-      n: ls.name
-    }, ls.segmentId ? {
-      s: ls.segmentId
-    } : {});
-  });
-}
 function optimizeCustomData(interaction) {
   var customData = interaction.customData,
     legacyMetrics = interaction.legacyMetrics;
@@ -364,10 +343,10 @@ function optimizeCustomData(interaction) {
     var _result$get$data, _result$get;
     var labelStack = _ref2.labelStack,
       data = _ref2.data;
-    var label = stringifyLabelStackFully(labelStack);
+    var label = (0, _utils.stringifyLabelStackFully)(labelStack);
     var value = (_result$get$data = (_result$get = result.get(label)) === null || _result$get === void 0 ? void 0 : _result$get.data) !== null && _result$get$data !== void 0 ? _result$get$data : {};
     result.set(label, {
-      labelStack: optimizeLabelStack(labelStack),
+      labelStack: (0, _utils.optimizeLabelStack)(labelStack),
       data: Object.assign(value, data)
     });
     return result;
@@ -381,10 +360,10 @@ function optimizeCustomData(interaction) {
         var _Object$entries$_i = (0, _slicedToArray2.default)(_Object$entries[_i], 2),
           _key = _Object$entries$_i[0],
           value = _Object$entries$_i[1];
-        var label = stringifyLabelStackFully([]);
+        var label = (0, _utils.stringifyLabelStackFully)([]);
         var labelValue = (_result$get$data2 = (_result$get2 = result.get(label)) === null || _result$get2 === void 0 ? void 0 : _result$get2.data) !== null && _result$get$data2 !== void 0 ? _result$get$data2 : {};
         result.set(label, {
-          labelStack: optimizeLabelStack([]),
+          labelStack: (0, _utils.optimizeLabelStack)([]),
           data: Object.assign(labelValue, (0, _defineProperty2.default)({}, _key, value))
         });
       }
@@ -402,11 +381,11 @@ function optimizeReactProfilerTimings(reactProfilerTimings, interactionStart) {
       actualDuration = _ref3.actualDuration,
       type = _ref3.type;
     if (labelStack && startTime >= interactionStart) {
-      var label = stringifyLabelStackFully(labelStack);
+      var label = (0, _utils.stringifyLabelStackFully)(labelStack);
       var start = Math.round(startTime);
       var end = Math.round(commitTime);
       var timing = result.get(label) || {
-        labelStack: optimizeLabelStack(labelStack),
+        labelStack: (0, _utils.optimizeLabelStack)(labelStack),
         startTime: start,
         endTime: end,
         mountCount: 0,
@@ -461,13 +440,13 @@ function optimizeHoldInfo(holdInfo, interactionStart) {
       end = hold.end,
       ignoreOnSubmit = hold.ignoreOnSubmit;
     if (labelStack && !ignoreOnSubmit && start >= interactionStart) {
-      var label = stringifyLabelStackFully([].concat((0, _toConsumableArray2.default)(labelStack), [{
+      var label = (0, _utils.stringifyLabelStackFully)([].concat((0, _toConsumableArray2.default)(labelStack), [{
         name: name
       }]));
       var startTime = Math.round(start);
       var endTime = Math.round(end);
       var timing = result.get(label) || {
-        labelStack: optimizeLabelStack([].concat((0, _toConsumableArray2.default)(labelStack), [{
+        labelStack: (0, _utils.optimizeLabelStack)([].concat((0, _toConsumableArray2.default)(labelStack), [{
           name: name
         }])),
         startTime: startTime,
@@ -494,7 +473,7 @@ function optimizeSpans(spans, interactionStart) {
       end = span.end;
     if (labelStack && start >= interactionStart) {
       result.push({
-        labelStack: optimizeLabelStack([].concat((0, _toConsumableArray2.default)(labelStack), [{
+        labelStack: (0, _utils.optimizeLabelStack)([].concat((0, _toConsumableArray2.default)(labelStack), [{
           name: name
         }])),
         startTime: Math.round(start),
@@ -518,7 +497,7 @@ function optimizeRequestInfo(requestInfo, interactionStart) {
     var endTime = networkComplete !== null && networkComplete !== void 0 ? networkComplete : end;
     if (labelStack && start >= interactionStart && endTime) {
       result.push({
-        labelStack: optimizeLabelStack([].concat((0, _toConsumableArray2.default)(labelStack), [{
+        labelStack: (0, _utils.optimizeLabelStack)([].concat((0, _toConsumableArray2.default)(labelStack), [{
           name: name
         }])),
         startTime: Math.round(startTime),
@@ -530,7 +509,7 @@ function optimizeRequestInfo(requestInfo, interactionStart) {
   return updatedRequestInfo;
 }
 function optimizeCustomTimings(customTimings, interactionStart) {
-  var updatedCustomTimings = customTimings.reduce(function (result, item) {
+  return customTimings.reduce(function (result, item) {
     Object.keys(item.data).forEach(function (key) {
       if (item.data[key].startTime >= interactionStart) {
         result.push({
@@ -544,7 +523,6 @@ function optimizeCustomTimings(customTimings, interactionStart) {
     });
     return result;
   }, []);
-  return updatedCustomTimings;
 }
 function optimizeMarks(marks) {
   return marks.map(function (_ref4) {
@@ -552,7 +530,7 @@ function optimizeMarks(marks) {
       time = _ref4.time,
       others = (0, _objectWithoutProperties2.default)(_ref4, _excluded);
     return _objectSpread(_objectSpread({}, others), {}, {
-      labelStack: labelStack && optimizeLabelStack(labelStack),
+      labelStack: labelStack && (0, _utils.optimizeLabelStack)(labelStack),
       time: Math.round(time)
     });
   });
@@ -565,12 +543,10 @@ function optimizeApdex(apdex) {
     return _objectSpread(_objectSpread({}, others), {}, {
       stopTime: Math.round(stopTime)
     }, labelStack ? {
-      labelStack: optimizeLabelStack(labelStack)
+      labelStack: (0, _utils.optimizeLabelStack)(labelStack)
     } : {});
   });
 }
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function objectToArray() {
   var obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return Object.keys(obj).reduce(function (result, key) {
@@ -579,9 +555,7 @@ function objectToArray() {
       data: obj[key]
     });
     return result;
-  },
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  []);
+  }, []);
 }
 function getBM3SubmetricsTimings(submetrics) {
   if (!submetrics) {
@@ -635,6 +609,45 @@ function getSSRDoneTimeValue(config) {
 function getPayloadSize(payload) {
   return Math.round(new TextEncoder().encode(JSON.stringify(payload)).length / 1024);
 }
+function getStylesheetMetrics() {
+  if (!(0, _platformFeatureFlags.fg)('ufo_capture_stylesheet_metrics')) {
+    return {};
+  }
+  try {
+    var stylesheets = Array.from(document.styleSheets);
+    var stylesheetCount = stylesheets.length;
+    var cssrules = Array.from(document.styleSheets).reduce(function (acc, item) {
+      // Other domain stylesheets throw a SecurityError
+      try {
+        return acc + item.cssRules.length;
+      } catch (e) {
+        return acc;
+      }
+    }, 0);
+    var styleElements = document.querySelectorAll('style').length;
+    var styleProps = document.querySelectorAll('[style]');
+    var styleDeclarations = Array.from(document.querySelectorAll('[style]')).reduce(function (acc, item) {
+      try {
+        if ('style' in item) {
+          return acc + item.style.length;
+        } else {
+          return acc;
+        }
+      } catch (e) {
+        return acc;
+      }
+    }, 0);
+    return {
+      stylesheets: stylesheetCount,
+      styleElements: styleElements,
+      styleProps: styleProps.length,
+      styleDeclarations: styleDeclarations,
+      cssrules: cssrules
+    };
+  } catch (e) {
+    return {};
+  }
+}
 function createInteractionMetricsPayload(interaction, interactionId) {
   var _window$location, _config$additionalPay;
   var interactionPayloadStart = performance.now();
@@ -657,13 +670,16 @@ function createInteractionMetricsPayload(interaction, interactionId) {
   var pageVisibilityAtTTI = getPageVisibilityUpToTTI(interaction);
   var pageVisibilityAtTTAI = getPageVisibilityUpToTTAI(interaction);
   var segments = config.killswitchNestedSegments ? [] : knownSegments;
+  var segmentTree = (0, _utils.buildSegmentTree)(segments.map(function (segment) {
+    return segment.labelStack;
+  }));
   var isDetailedPayload = pageVisibilityAtTTAI === 'visible';
   var isPageLoad = type === 'page_load';
   var calculatePageVisibilityFromTheStartOfPageLoad = config.enableBetterPageVisibilityApi && isPageLoad;
   var moreAccuratePageVisibilityAtTTI = calculatePageVisibilityFromTheStartOfPageLoad ? getMoreAccuratePageVisibilityUpToTTI(interaction) : null;
   var moreAccuratePageVisibilityAtTTAI = calculatePageVisibilityFromTheStartOfPageLoad ? getMoreAccuratePageVisibilityUpToTTAI(interaction) : null;
   var labelStack = interaction.labelStack ? {
-    labelStack: optimizeLabelStack(interaction.labelStack)
+    labelStack: (0, _utils.optimizeLabelStack)(interaction.labelStack)
   } : {};
   // Page Load
   var getPageLoadInteractionMetrics = function getPageLoadInteractionMetrics() {
@@ -693,7 +709,7 @@ function createInteractionMetricsPayload(interaction, interactionId) {
         var labelStack = _ref6.labelStack,
           others = (0, _objectWithoutProperties2.default)(_ref6, _excluded3);
         return _objectSpread(_objectSpread({}, others), {}, {
-          labelStack: labelStack && optimizeLabelStack(labelStack)
+          labelStack: labelStack && (0, _utils.optimizeLabelStack)(labelStack)
         });
       }),
       holdActive: (0, _toConsumableArray2.default)(interaction.holdActive.values()),
@@ -726,7 +742,7 @@ function createInteractionMetricsPayload(interaction, interactionId) {
     source: 'measured',
     tags: ['observability'],
     attributes: {
-      properties: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+      properties: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
         // basic
         'event:hostname': ((_window$location = window.location) === null || _window$location === void 0 ? void 0 : _window$location.hostname) || 'unknown',
         'event:product': config.product,
@@ -740,7 +756,8 @@ function createInteractionMetricsPayload(interaction, interactionId) {
         'event:region': config.region || 'unknown',
         'experience:key': 'custom.interaction-metrics',
         'experience:name': newUFOName
-      }, getBrowserMetadata()), getSSRProperties(type)), getPPSMetrics(interaction)), getPaintMetrics(type)), getNavigationMetrics(type)), getVCMetrics(interaction)), (_config$additionalPay = config.additionalPayloadData) === null || _config$additionalPay === void 0 ? void 0 : _config$additionalPay.call(config, interaction)), getTracingContextData(interaction)), {}, {
+      }, getBrowserMetadata()), getSSRProperties(type)), getPPSMetrics(interaction)), getPaintMetrics(type)), getNavigationMetrics(type)), getVCMetrics(interaction)), (_config$additionalPay = config.additionalPayloadData) === null || _config$additionalPay === void 0 ? void 0 : _config$additionalPay.call(config, interaction)), getTracingContextData(interaction)), getStylesheetMetrics()), {}, {
+        errorCount: (0, _globalErrorHandler.getGlobalErrorCount)(),
         interactionMetrics: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
           namePrefix: config.namePrefix || '',
           segmentPrefix: config.segmentPrefix || '',
@@ -762,16 +779,17 @@ function createInteractionMetricsPayload(interaction, interactionId) {
           apdex: optimizeApdex(interaction.apdex),
           end: Math.round(end),
           start: Math.round(start),
-          segments: segments.map(function (_ref7) {
+          segments: _constants.REACT_UFO_VERSION === '2.0.0' ? segmentTree : segments.map(function (_ref7) {
             var labelStack = _ref7.labelStack,
               others = (0, _objectWithoutProperties2.default)(_ref7, _excluded4);
             return _objectSpread(_objectSpread({}, others), {}, {
-              labelStack: optimizeLabelStack(labelStack)
+              labelStack: (0, _utils.optimizeLabelStack)(labelStack)
             });
           }),
           marks: optimizeMarks(interaction.marks),
           customData: optimizeCustomData(interaction),
-          reactProfilerTimings: optimizeReactProfilerTimings(interaction.reactProfilerTimings, start)
+          reactProfilerTimings: optimizeReactProfilerTimings(interaction.reactProfilerTimings, start),
+          errorCount: interaction.errors.length
         }, labelStack), getPageLoadInteractionMetrics()), getDetailedInteractionMetrics()), getPageLoadDetailedInteractionMetrics()), getBm3TrackerTimings(interaction)),
         'ufo:payloadTime': (0, _roundNumber.roundEpsilon)(performance.now() - interactionPayloadStart)
       })

package/dist/cjs/global-error-handler/index.js

@@ -4,10 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sinkErrorHandler = exports.default = void 0;
+exports.sinkErrorHandler = exports.getGlobalErrorCount = exports.default = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _bindEventListener = require("bind-event-listener");
 var shouldInitilizeGlobalErrorHandler = true;
+var globalCount = 0;
 var errors = [];
 var push = function push(name, labelStack, errorType, errorMessage, errorStack) {
   errors.push({
@@ -25,8 +26,12 @@ var sinkErrorHandler = exports.sinkErrorHandler = function sinkErrorHandler(sink
   });
   errors.length = 0;
 };
+var getGlobalErrorCount = exports.getGlobalErrorCount = function getGlobalErrorCount() {
+  return globalCount;
+};
 var handleError = function handleError(e) {
   var _e$error;
+  globalCount++;
   if (((_e$error = e.error) === null || _e$error === void 0 ? void 0 : _e$error.UFOhasCaught) === undefined) {
     try {
       if (e.error instanceof Error) {
@@ -46,6 +51,7 @@ var handleError = function handleError(e) {
   }
 };
 var handlePromiseRejection = function handlePromiseRejection(e) {
+  globalCount++;
   if (e.reason instanceof Error) {
     push('GlobalErrorHandler', null, e.reason.name, e.reason.message, e.reason.stack);
   } else if (e.reason) {

package/dist/cjs/interaction-metrics-init/index.js

@@ -41,13 +41,6 @@ var init = exports.init = function init(analyticsWebClientAsync, config) {
   if (initialized) {
     return;
   }
-  try {
-    if (window !== undefined) {
-      window.__REACT_UFO_ENABLE_PERF_TRACING = Boolean(sessionStorage.getItem('additionalPerfMarks') === 'true');
-    }
-  } catch (err) {
-    /* do nothing */
-  }
   (0, _config.setUFOConfig)(config);
   if ((_config$vc = config.vc) !== null && _config$vc !== void 0 && _config$vc.enabled) {
     var vcOptions = {

package/dist/es2019/common/constants.js

@@ -1 +1,2 @@
-export const REACT_UFO_VERSION = '1.0.1';
+import { fg } from '@atlaskit/platform-feature-flags';
+export const REACT_UFO_VERSION = fg('react-ufo-payload-segment-compressed') ? '2.0.0' : '1.0.1';

package/dist/es2019/create-payload/common/utils/index.js

@@ -1,8 +1,59 @@
+/* eslint-disable @typescript-eslint/no-non-null-asserted-optional-chain */
+import { REACT_UFO_VERSION } from '../../../common/constants';
 export const sanitizeUfoName = name => {
   return name.replace(/_/g, '-');
 };
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function isSegmentLabel(obj) {
   return obj && typeof obj.name === 'string' && typeof obj.segmentId === 'string';
+}
+export function buildSegmentTree(labelStacks) {
+  const r = {
+    n: 'segment-tree-root',
+    c: {}
+  };
+  labelStacks.forEach(labelStack => {
+    let currentNode = r;
+    labelStack.forEach((label, index) => {
+      var _currentNode$c;
+      const name = label.name;
+      const id = isSegmentLabel(label) ? label.segmentId : undefined;
+      const key = id !== undefined ? id.toString() : name;
+      if (currentNode.c && !currentNode.c[key]) {
+        currentNode.c[key] = {
+          n: name
+        };
+      }
+      currentNode = (_currentNode$c = currentNode.c) === null || _currentNode$c === void 0 ? void 0 : _currentNode$c[key];
+      if (index < labelStack.length - 1) {
+        currentNode.c = {
+          ...(currentNode.c || {})
+        };
+      }
+    });
+  });
+  return {
+    r
+  };
+}
+export function stringifyLabelStackFully(labelStack) {
+  return labelStack.map(l => {
+    if (isSegmentLabel(l)) {
+      return `${l.name}:${l.segmentId}`;
+    }
+    return l.name;
+  }).join('/');
+}
+function getLabelStackReference(labelStack) {
+  return labelStack.map(l => isSegmentLabel(l) ? l.segmentId : l.name).join('/');
+}
+export function labelStackStartWith(labelStack, startWith) {
+  return stringifyLabelStackFully(labelStack).startsWith(stringifyLabelStackFully(startWith));
+}
+export function optimizeLabelStack(labelStack) {
+  return REACT_UFO_VERSION === '2.0.0' ? getLabelStackReference(labelStack) : labelStack.map(ls => ({
+    n: ls.name,
+    ...(ls.segmentId ? {
+      s: ls.segmentId
+    } : {})
+  }));
 }