@atlaskit/react-ufo 1.1.0 → 2.0.1

package/dist/esm/interaction-metrics/post-interaction-log.js

@@ -0,0 +1,184 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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 { getConfig } from '../config';
+import { VCObserver } from '../vc/vc-observer';
+var POST_INTERACTION_LOG_SEND_DEFAULT_TIMEOUT = 3000;
+var PostInteractionLog = /*#__PURE__*/function () {
+  function PostInteractionLog() {
+    _classCallCheck(this, PostInteractionLog);
+    /**
+     * Basic info about interaction that has just finished
+     */
+    _defineProperty(this, "lastInteractionFinish", null);
+    /**
+     * Array of observed react render timings
+     */
+    _defineProperty(this, "reactProfilerTimings", []);
+    /**
+     * Store the scheduled sink timeout Id so that it can be cancelled when needed
+     */
+    _defineProperty(this, "sinkTimeoutId", null);
+    /**
+     * independent VC observer, that observes until `custom.post-interaction-logs` event is sent
+     */
+    _defineProperty(this, "vcObserver", null);
+    _defineProperty(this, "vcObserverSSRConfig", null);
+    /**
+     * Handler function to process / send the observation data
+     */
+    _defineProperty(this, "sinkHandlerFn", function () {});
+  }
+  _createClass(PostInteractionLog, [{
+    key: "initializeVCObserver",
+    value: function initializeVCObserver(options) {
+      if (this.vcObserver === null) {
+        this.vcObserver = new VCObserver(_objectSpread(_objectSpread({}, options), {}, {
+          isPostInteraction: true
+        }));
+      }
+    }
+  }, {
+    key: "startVCObserver",
+    value: function startVCObserver(_ref) {
+      var _this$vcObserver;
+      var startTime = _ref.startTime;
+      (_this$vcObserver = this.vcObserver) === null || _this$vcObserver === void 0 || _this$vcObserver.start({
+        startTime: startTime
+      });
+    }
+  }, {
+    key: "setVCObserverSSRConfig",
+    value: function setVCObserverSSRConfig(vcObserverSSRConfig) {
+      this.vcObserverSSRConfig = vcObserverSSRConfig;
+    }
+
+    /**
+     * Set the VC result as per the last interaction
+     * Used to compare diffs of VC updates vs post interaction VC observer
+     * @param result - VC result as calculated by UFO create payload
+     */
+  }, {
+    key: "setLastInteractionFinishVCResult",
+    value: function setLastInteractionFinishVCResult(result) {
+      this.lastInteractionFinishVCResult = result;
+    }
+  }, {
+    key: "sinkHandler",
+    value:
+    /**
+     * Set the fn that would be invoked to process / send the observation data
+     */
+    function sinkHandler(sinkHandlerFn) {
+      this.sinkHandlerFn = sinkHandlerFn;
+    }
+
+    /**
+     * Reset state of the log
+     */
+  }, {
+    key: "reset",
+    value: function reset() {
+      this.lastInteractionFinish = null;
+      this.reactProfilerTimings = [];
+      if (this.sinkTimeoutId != null) {
+        clearTimeout(this.sinkTimeoutId);
+        this.sinkTimeoutId = null;
+      }
+      this.setVCObserverSSRConfig(null);
+    }
+
+    /**
+     * Check if there is data in the log
+     */
+  }, {
+    key: "hasData",
+    value: function hasData() {
+      var _this$reactProfilerTi;
+      return ((_this$reactProfilerTi = this.reactProfilerTimings) === null || _this$reactProfilerTi === void 0 ? void 0 : _this$reactProfilerTi.length) > 0;
+    }
+
+    /**
+     * Send the log if there is data
+     */
+  }, {
+    key: "sendPostInteractionLog",
+    value: function sendPostInteractionLog() {
+      var _this$vcObserver2;
+      if (!this.hasData() || !this.lastInteractionFinish || !this.sinkHandlerFn) {
+        this.reset();
+        return;
+      }
+      this.sinkHandlerFn({
+        lastInteractionFinish: this.lastInteractionFinish,
+        reactProfilerTimings: this.reactProfilerTimings,
+        // NOTE: invoking `getVCResult` at latest possible point in time here (not earlier) to get the most accurate result (from performance.now())
+        postInteractionFinishVCResult: (_this$vcObserver2 = this.vcObserver) === null || _this$vcObserver2 === void 0 ? void 0 : _this$vcObserver2.getVCResult(_objectSpread({
+          start: this.lastInteractionFinish.start,
+          stop: performance.now(),
+          tti: -1,
+          // no need for TTI value here
+          prefix: 'ufo'
+        }, this.vcObserverSSRConfig)),
+        lastInteractionFinishVCResult: this.lastInteractionFinishVCResult
+      });
+      this.reset();
+    }
+
+    /**
+     * This fn should be invoked when an interaction has finished
+     * Basic details about the finished interaction will be recorded
+     * A timeout will be setup to send the post interaction observation after some time.
+     */
+  }, {
+    key: "onInteractionComplete",
+    value: function onInteractionComplete(_ref2) {
+      var _getConfig,
+        _this = this;
+      var ufoName = _ref2.ufoName,
+        start = _ref2.start,
+        end = _ref2.end,
+        id = _ref2.id,
+        abortReason = _ref2.abortReason,
+        abortedByInteractionName = _ref2.abortedByInteractionName,
+        routeName = _ref2.routeName,
+        type = _ref2.type;
+      this.lastInteractionFinish = {
+        ufoName: ufoName,
+        start: start,
+        end: end,
+        id: id,
+        abortReason: abortReason,
+        abortedByInteractionName: abortedByInteractionName,
+        routeName: routeName,
+        type: type
+      };
+      var timeout = ((_getConfig = getConfig()) === null || _getConfig === void 0 ? void 0 : _getConfig.timeWindowForLateMutationsInMilliseconds) || POST_INTERACTION_LOG_SEND_DEFAULT_TIMEOUT;
+      this.sinkTimeoutId = window.setTimeout(function () {
+        _this.sendPostInteractionLog();
+      }, timeout);
+    }
+
+    /**
+     * This fn should be invoked when a React render happens after interaction has finished
+     */
+  }, {
+    key: "addProfilerTimings",
+    value: function addProfilerTimings(labelStack, type, actualDuration, baseDuration, startTime, commitTime) {
+      if (this.lastInteractionFinish != null) {
+        this.reactProfilerTimings.push({
+          type: type,
+          actualDuration: actualDuration,
+          baseDuration: baseDuration,
+          startTime: startTime,
+          commitTime: commitTime,
+          labelStack: labelStack
+        });
+      }
+    }
+  }]);
+  return PostInteractionLog;
+}();
+export { PostInteractionLog as default };

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

@@ -0,0 +1,77 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { unstable_IdlePriority as idlePriority, unstable_scheduleCallback as scheduleCallback } from 'scheduler';
+import { startLighthouseObserver } from '../additional-payload';
+import { setUFOConfig } from '../config';
+import { setupHiddenTimingCapture } from '../hidden-timing';
+import { postInteractionLog, sinkInteractionHandler, sinkPostInteractionLogHandler } from '../interaction-metrics';
+import { getVCObserver } from '../vc';
+var initialized = false;
+function sinkInteraction(instance, payloadPackage) {
+  sinkInteractionHandler(function (interactionId, interaction) {
+    scheduleCallback(idlePriority, function () {
+      var payloads = payloadPackage.createPayloads(interactionId, interaction);
+      payloads === null || payloads === void 0 || payloads.forEach(function (payload) {
+        instance.sendOperationalEvent(payload);
+      });
+    });
+  });
+}
+function sinkPostInteractionLog(instance, createPostInteractionLogPayload) {
+  sinkPostInteractionLogHandler(function (logOutput) {
+    scheduleCallback(idlePriority, function () {
+      var payload = createPostInteractionLogPayload(logOutput);
+      if (payload) {
+        instance.sendOperationalEvent(payload);
+      }
+    });
+  });
+}
+export var init = function init(analyticsWebClientAsync, config) {
+  var _config$vc;
+  if (initialized) {
+    return;
+  }
+  setUFOConfig(config);
+  if ((_config$vc = config.vc) !== null && _config$vc !== void 0 && _config$vc.enabled) {
+    var vcOptions = {
+      heatmapSize: config.vc.heatmapSize,
+      oldDomUpdates: config.vc.oldDomUpdates,
+      devToolsEnabled: config.vc.devToolsEnabled,
+      selectorConfig: config.vc.selectorConfig
+    };
+    getVCObserver(vcOptions).start({
+      startTime: 0
+    });
+    postInteractionLog.initializeVCObserver(vcOptions);
+    postInteractionLog.startVCObserver({
+      startTime: 0
+    });
+  }
+  setupHiddenTimingCapture();
+  startLighthouseObserver();
+  initialized = true;
+  Promise.all([analyticsWebClientAsync,
+  // eslint-disable-next-line import/dynamic-import-chunkname
+  import( /* webpackChunkName: "create-payloads" */'../create-payload'),
+  // eslint-disable-next-line import/dynamic-import-chunkname
+  import( /* webpackChunkName: "create-post-intreaction-log-payload" */'../create-post-interaction-log-payload')]).then(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 3),
+      awc = _ref2[0],
+      payloadPackage = _ref2[1],
+      createPostInteractionLogPayloadPackage = _ref2[2];
+    if (awc.getAnalyticsWebClientPromise) {
+      awc.getAnalyticsWebClientPromise().then(function (client) {
+        var instance = client.getInstance();
+        sinkInteraction(instance, payloadPackage);
+        if (config.captureLateReRenders) {
+          sinkPostInteractionLog(instance, createPostInteractionLogPayloadPackage.default);
+        }
+      });
+    } else if (awc.sendOperationalEvent) {
+      sinkInteraction(awc, payloadPackage);
+      if (config.captureLateReRenders) {
+        sinkPostInteractionLog(awc, createPostInteractionLogPayloadPackage.default);
+      }
+    }
+  });
+};

package/dist/esm/label/UFOLabel.js

@@ -0,0 +1,36 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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, { useMemo } from 'react';
+import InteractionContext, { useInteractionContext } from '../interaction-context';
+
+/**
+ * Annotate part of the react tree with a product name
+ * ```
+ * <UFOLabel name="card">
+ *   <Card card={data} />
+ * </UFOLabel>
+ * ```
+ */
+export default function UFOLabel(_ref) {
+  var name = _ref.name,
+    children = _ref.children;
+  var context = useInteractionContext();
+  var newContext = useMemo(function () {
+    if (context) {
+      return _objectSpread(_objectSpread({}, context), {}, {
+        labelStack: context.labelStack == null ? [{
+          name: name
+        }] : [].concat(_toConsumableArray(context.labelStack), [{
+          name: name
+        }])
+      });
+    } else {
+      return context;
+    }
+  }, [context, name]);
+  return context ? /*#__PURE__*/React.createElement(InteractionContext.Provider, {
+    value: newContext
+  }, children) : /*#__PURE__*/React.createElement(React.Fragment, null, children);
+}

package/dist/esm/label/index.js

@@ -0,0 +1,2 @@
+import UFOLabel from './UFOLabel';
+export default UFOLabel;

package/dist/esm/load-hold/UFOLoadHold.js

@@ -0,0 +1,66 @@
+import React, { useContext, useEffect, useLayoutEffect } from 'react';
+import UFOInteractionContext from '../interaction-context';
+var useLayoutEffectSAFE = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+
+/**
+ * Render this whenever you're loading.
+ *
+ * Wrap loading elements
+ * ```js
+ * if (isLoading){
+ *   return (
+ *     <UFOLoadHold name="card">
+ *       <Skeleton />
+ *     </UFOLoadHold>
+ *   )
+ * }
+ * ```
+ *
+ * Or render it as a sibling
+ * ```
+ * if (isLoading){
+ *   return (
+ *     <>
+ *       <Skeleton />
+ *       <UFOLoadHold name="card">
+ *     </UFOLoadHold>
+ *   )
+ * }
+ * ```
+ *
+ * Or wrap your content conditionally
+ * ```
+ * return (
+ *   <UFOLoadHold name="card" hold={isLoading}>
+ *     <Card />
+ *   </UFOLoadHold>
+ * )
+ * ```
+ *
+ * Or render as a sibling conditionally
+ * ```
+ * return (
+ *   <>
+ *     <Card />
+ *     <UFOLoadHold name="card" hold={isLoading} />
+ *   </>
+ * )
+ * ```
+ */
+
+export default function UFOLoadHold(_ref) {
+  var children = _ref.children,
+    name = _ref.name,
+    _ref$hold = _ref.hold,
+    hold = _ref$hold === void 0 ? true : _ref$hold;
+  // react-18: useId instead
+  var context = useContext(UFOInteractionContext);
+  useLayoutEffectSAFE(function () {
+    if (hold && context != null) {
+      return context.hold(name);
+    }
+  }, [hold, context, name]);
+
+  // react-18: can return children directly
+  return children != null ? /*#__PURE__*/React.createElement(React.Fragment, null, children) : null;
+}

package/dist/esm/load-hold/index.js

@@ -0,0 +1,2 @@
+import UFOLoadHold from './UFOLoadHold';
+export default UFOLoadHold;

package/dist/esm/placeholder/Placeholder.js

@@ -0,0 +1,25 @@
+import React, { useContext } from 'react';
+import UFOLoadHold from '../load-hold';
+import { LazySuspense, WaitContext } from './loosely-lazy';
+
+/**
+ * Provides a placeholder for lazily loaded content, improving perceived performance.
+ *
+ * Named placeholders are especially useful for analyzing page load breakdowns
+ * in performance monitoring tools like Performance Portal.
+ */
+export default function Placeholder(_ref) {
+  var name = _ref.name,
+    children = _ref.children,
+    _ref$fallback = _ref.fallback,
+    fallback = _ref$fallback === void 0 ? null : _ref$fallback;
+  var waitContext = useContext(WaitContext);
+  var shouldHold = !waitContext || !!waitContext.currentValue();
+  return /*#__PURE__*/React.createElement(LazySuspense, {
+    fallback: /*#__PURE__*/React.createElement(React.Fragment, null, fallback, /*#__PURE__*/React.createElement(UFOLoadHold, {
+      name: name,
+      hold: shouldHold
+    })),
+    name: name
+  }, children);
+}

package/dist/esm/placeholder/index.js

@@ -0,0 +1,2 @@
+import Placeholder from './Placeholder';
+export default Placeholder;

package/dist/esm/placeholder/loosely-lazy/index.js

@@ -0,0 +1,2 @@
+export { WaitContext } from './wait-context';
+export { LazySuspense } from './lazy-suspense';

package/dist/esm/placeholder/loosely-lazy/lazy-suspense.js

@@ -0,0 +1,70 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { createContext, Fragment, Suspense, useLayoutEffect, useMemo, useRef, useState } from 'react';
+var isNodeEnvironment = function isNodeEnvironment() {
+  return typeof window === 'undefined' || window.name === 'nodejs';
+};
+var LazySuspenseContext = /*#__PURE__*/createContext({
+  fallback: /*#__PURE__*/React.createElement(Fragment, null),
+  setFallback: function setFallback() {
+    // eslint-disable-next-line no-console
+    console.warn('Missing <LooselySuspense /> boundary');
+  },
+  name: ''
+});
+var DynamicFallback = function DynamicFallback(_ref) {
+  var children = _ref.children,
+    outsideSuspense = _ref.outsideSuspense;
+  var _React$useContext = React.useContext(LazySuspenseContext),
+    fallback = _React$useContext.fallback,
+    setFallback = _React$useContext.setFallback;
+  useLayoutEffect(function () {
+    return function () {
+      if (!outsideSuspense) {
+        setFallback(null);
+      }
+    };
+  }, [outsideSuspense, setFallback]);
+  return children(outsideSuspense ? null : fallback);
+};
+DynamicFallback.displayName = 'DynamicFallback';
+export var LazySuspense = function LazySuspense(_ref2) {
+  var fallback = _ref2.fallback,
+    children = _ref2.children,
+    name = _ref2.name;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    hydrationFallback = _useState2[0],
+    setHydrationFallback = _useState2[1];
+  var mountedRef = useRef(false);
+  useLayoutEffect(function () {
+    mountedRef.current = true;
+    return function () {
+      mountedRef.current = false;
+    };
+  }, []);
+  var contextValue = useMemo(function () {
+    return {
+      fallback: fallback,
+      setFallback: function setFallback(newFallback) {
+        if (hydrationFallback === newFallback) {
+          return;
+        }
+        setHydrationFallback(newFallback);
+      },
+      name: name
+    };
+  }, [fallback, hydrationFallback, name]);
+  var renderFallback = function renderFallback(outsideSuspense) {
+    return /*#__PURE__*/React.createElement(DynamicFallback, {
+      outsideSuspense: outsideSuspense
+    }, function (resolvedFallback) {
+      return outsideSuspense && hydrationFallback ? hydrationFallback : resolvedFallback;
+    });
+  };
+  return /*#__PURE__*/React.createElement(LazySuspenseContext.Provider, {
+    value: contextValue
+  }, isNodeEnvironment() ? children : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Suspense, {
+    fallback: renderFallback(false)
+  }, children), (!mountedRef.current || hydrationFallback) && renderFallback(true)));
+};
+LazySuspense.displayName = 'LazySuspense';

package/dist/esm/placeholder/loosely-lazy/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/placeholder/loosely-lazy/wait-context.js

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+export var WaitContext = /*#__PURE__*/createContext({
+  subscribe: function subscribe() {
+    return function () {};
+  },
+  currentValue: function currentValue() {
+    return 1;
+  }
+});

package/dist/esm/resource-timing/common/utils/config.js

@@ -0,0 +1,62 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+import { getConfig as getConfigUFO } from '../../../config';
+var defaultAllowedParams = ['operationName', 'operation', 'q'];
+var getAllowedParams = function getAllowedParams() {
+  var config = getConfigUFO();
+  return (config === null || config === void 0 ? void 0 : config.allowedResourcesParams) || defaultAllowedParams;
+};
+var handleQueryParams = function handleQueryParams(urlString) {
+  try {
+    if (typeof urlString !== 'string') {
+      return urlString;
+    }
+    var url = new URL(urlString);
+    var params = new URLSearchParams(url.search);
+    var allowedParams = getAllowedParams();
+    var _iterator = _createForOfIteratorHelper(params),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var _step$value = _slicedToArray(_step.value, 1),
+          key = _step$value[0];
+        if (!allowedParams.includes(key)) {
+          url.searchParams.delete(key);
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    return url.toString();
+  } catch (e) {
+    return urlString;
+  }
+};
+var config = {
+  mapResources: function mapResources(url) {
+    return url;
+  },
+  sanitiseEndpoints: function sanitiseEndpoints(url) {
+    return handleQueryParams(url);
+  }
+};
+export function configure(resourceTimingConfig) {
+  var newConfig = {
+    mapResources: resourceTimingConfig.mapResources,
+    sanitiseEndpoints: function sanitiseEndpoints(url) {
+      var sanitised = resourceTimingConfig.sanitiseEndpoints(url);
+      if (sanitised) {
+        return handleQueryParams(sanitised);
+      }
+      return sanitised;
+    }
+  };
+  config = newConfig;
+}
+export var getConfig = function getConfig() {
+  return config;
+};

package/dist/esm/resource-timing/common/utils/resource-timing-buffer.js

@@ -0,0 +1,104 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { roundEpsilon } from '../../../round-number';
+var getPerformanceObject = function getPerformanceObject() {
+  var _window;
+  return ((_window = window) !== null && _window !== void 0 ? _window : {}).performance;
+};
+var getPerformanceObserverObject = function getPerformanceObserverObject() {
+  var _window2;
+  return ((_window2 = window) !== null && _window2 !== void 0 ? _window2 : {}).PerformanceObserver;
+};
+export var resourceTimingBuffer = {
+  timings: [],
+  maxSize: 1000,
+  observer: null,
+  transformResource: function transformResource(entry) {
+    var _entry$serverTiming, _entry$serverTiming2;
+    var duration = roundEpsilon(entry.duration);
+
+    // prioritising atl-edge
+    var totalBackendTimeEntry = ((_entry$serverTiming = entry.serverTiming) === null || _entry$serverTiming === void 0 ? void 0 : _entry$serverTiming.find(function (timing) {
+      return timing.name === 'atl-edge';
+    })) || ((_entry$serverTiming2 = entry.serverTiming) === null || _entry$serverTiming2 === void 0 ? void 0 : _entry$serverTiming2.find(
+    // timing name should come from per-product config in the future
+    function (timing) {
+      return timing.name === 'total' || timing.name === 'filter-request-papi';
+    }));
+    var serverTime = totalBackendTimeEntry ? roundEpsilon(totalBackendTimeEntry.duration) : undefined;
+    var networkTime = serverTime ? duration - serverTime : undefined;
+    return {
+      name: entry.name,
+      initiatorType: entry.initiatorType,
+      transferSize: entry.transferSize,
+      startTime: roundEpsilon(entry.startTime),
+      duration: roundEpsilon(entry.duration),
+      fetchStart: roundEpsilon(entry.fetchStart || 0),
+      workerStart: roundEpsilon(entry.workerStart || 0),
+      responseStart: roundEpsilon(entry.responseStart || 0),
+      requestStart: roundEpsilon(entry.requestStart || 0),
+      serverTime: serverTime,
+      networkTime: networkTime,
+      encodedSize: roundEpsilon(entry.encodedBodySize),
+      decodedSize: roundEpsilon(entry.decodedBodySize)
+    };
+  },
+  start: function start() {
+    var _performance$getEntri;
+    var performance = getPerformanceObject();
+    var PerformanceObserver = getPerformanceObserverObject();
+    if (!PerformanceObserver || !performance || typeof PerformanceObserver === 'undefined') {
+      return;
+    }
+    if (resourceTimingBuffer.observer) {
+      return;
+    }
+    var resources = (_performance$getEntri = performance.getEntriesByType) === null || _performance$getEntri === void 0 ? void 0 : _performance$getEntri.call(performance, 'resource');
+    if (resources) {
+      resourceTimingBuffer.timings = resources.map(function (resource) {
+        return resourceTimingBuffer.transformResource(resource);
+      });
+    }
+    resourceTimingBuffer.observer = new PerformanceObserver(resourceTimingBuffer.addTimings);
+    resourceTimingBuffer.observer.observe({
+      entryTypes: ['resource']
+    });
+  },
+  stop: function stop() {
+    if (resourceTimingBuffer.observer) {
+      resourceTimingBuffer.observer.disconnect();
+      resourceTimingBuffer.observer = null;
+    }
+    resourceTimingBuffer.timings = [];
+  },
+  addTimings: function addTimings(list) {
+    var _resourceTimingBuffer;
+    var entries = list.getEntries().map(function (entry) {
+      return resourceTimingBuffer.transformResource(entry);
+    });
+    var overflow = resourceTimingBuffer.timings.length + entries.length;
+    if (overflow > resourceTimingBuffer.maxSize) {
+      var fieldsToRemove = overflow - resourceTimingBuffer.maxSize;
+      resourceTimingBuffer.timings.splice(0, fieldsToRemove);
+    }
+    (_resourceTimingBuffer = resourceTimingBuffer.timings).push.apply(_resourceTimingBuffer, _toConsumableArray(entries));
+  }
+};
+var isValidTiming = function isValidTiming(timing, startTime, endTime) {
+  return timing.startTime >= startTime && timing.startTime + timing.duration <= endTime;
+};
+export var filterResourceTimings = function filterResourceTimings(startTime, endTime) {
+  var performance = getPerformanceObject();
+  var PerformanceObserver = getPerformanceObserverObject();
+  if (!PerformanceObserver || !resourceTimingBuffer.observer) {
+    var resources = performance === null || performance === void 0 ? void 0 : performance.getEntriesByType('resource');
+    if (resources) {
+      return resources.filter(function (timing) {
+        return isValidTiming(timing, startTime, endTime);
+      });
+    }
+    return null;
+  }
+  return resourceTimingBuffer.timings.filter(function (timing) {
+    return isValidTiming(timing, startTime, endTime);
+  });
+};

package/dist/esm/resource-timing/index.js

@@ -0,0 +1,3 @@
+export { configure } from './common/utils/config';
+export { getResourceTimings } from './main';
+export { startResourceTimingBuffer } from './utils';