@atlaskit/react-ufo 1.1.0 → 2.0.0

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

@@ -0,0 +1,158 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { getConfig } from '../config';
+import { VCObserver } from '../vc/vc-observer';
+const POST_INTERACTION_LOG_SEND_DEFAULT_TIMEOUT = 3000;
+export default class PostInteractionLog {
+  constructor() {
+    /**
+     * 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", () => {});
+  }
+  initializeVCObserver(options) {
+    if (this.vcObserver === null) {
+      this.vcObserver = new VCObserver({
+        ...options,
+        isPostInteraction: true
+      });
+    }
+  }
+  startVCObserver({
+    startTime
+  }) {
+    var _this$vcObserver;
+    (_this$vcObserver = this.vcObserver) === null || _this$vcObserver === void 0 ? void 0 : _this$vcObserver.start({
+      startTime
+    });
+  }
+  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
+   */
+  setLastInteractionFinishVCResult(result) {
+    this.lastInteractionFinishVCResult = result;
+  }
+  /**
+   * Set the fn that would be invoked to process / send the observation data
+   */
+  sinkHandler(sinkHandlerFn) {
+    this.sinkHandlerFn = sinkHandlerFn;
+  }
+
+  /**
+   * Reset state of the log
+   */
+  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
+   */
+  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
+   */
+  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({
+        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.
+   */
+  onInteractionComplete({
+    ufoName,
+    start,
+    end,
+    id,
+    abortReason,
+    abortedByInteractionName,
+    routeName,
+    type
+  }) {
+    var _getConfig;
+    this.lastInteractionFinish = {
+      ufoName,
+      start,
+      end,
+      id,
+      abortReason,
+      abortedByInteractionName,
+      routeName,
+      type
+    };
+    const timeout = ((_getConfig = getConfig()) === null || _getConfig === void 0 ? void 0 : _getConfig.timeWindowForLateMutationsInMilliseconds) || POST_INTERACTION_LOG_SEND_DEFAULT_TIMEOUT;
+    this.sinkTimeoutId = window.setTimeout(() => {
+      this.sendPostInteractionLog();
+    }, timeout);
+  }
+
+  /**
+   * This fn should be invoked when a React render happens after interaction has finished
+   */
+  addProfilerTimings(labelStack, type, actualDuration, baseDuration, startTime, commitTime) {
+    if (this.lastInteractionFinish != null) {
+      this.reactProfilerTimings.push({
+        type,
+        actualDuration,
+        baseDuration,
+        startTime,
+        commitTime,
+        labelStack
+      });
+    }
+  }
+}

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

@@ -0,0 +1,72 @@
+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';
+let initialized = false;
+function sinkInteraction(instance, payloadPackage) {
+  sinkInteractionHandler((interactionId, interaction) => {
+    scheduleCallback(idlePriority, () => {
+      const payloads = payloadPackage.createPayloads(interactionId, interaction);
+      payloads === null || payloads === void 0 ? void 0 : payloads.forEach(payload => {
+        instance.sendOperationalEvent(payload);
+      });
+    });
+  });
+}
+function sinkPostInteractionLog(instance, createPostInteractionLogPayload) {
+  sinkPostInteractionLogHandler(logOutput => {
+    scheduleCallback(idlePriority, () => {
+      const payload = createPostInteractionLogPayload(logOutput);
+      if (payload) {
+        instance.sendOperationalEvent(payload);
+      }
+    });
+  });
+}
+export const init = (analyticsWebClientAsync, config) => {
+  var _config$vc;
+  if (initialized) {
+    return;
+  }
+  setUFOConfig(config);
+  if ((_config$vc = config.vc) !== null && _config$vc !== void 0 && _config$vc.enabled) {
+    const 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(([awc, payloadPackage, createPostInteractionLogPayloadPackage]) => {
+    if (awc.getAnalyticsWebClientPromise) {
+      awc.getAnalyticsWebClientPromise().then(client => {
+        const 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/es2019/label/UFOLabel.js

@@ -0,0 +1,34 @@
+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({
+  name,
+  children
+}) {
+  const context = useInteractionContext();
+  const newContext = useMemo(() => {
+    if (context) {
+      return {
+        ...context,
+        labelStack: context.labelStack == null ? [{
+          name
+        }] : [...context.labelStack, {
+          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/es2019/label/index.js

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

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

@@ -0,0 +1,66 @@
+import React, { useContext, useEffect, useLayoutEffect } from 'react';
+import UFOInteractionContext from '../interaction-context';
+const 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({
+  children,
+  name,
+  hold = true
+}) {
+  // react-18: useId instead
+  const context = useContext(UFOInteractionContext);
+  useLayoutEffectSAFE(() => {
+    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/es2019/load-hold/index.js

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

package/dist/es2019/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({
+  name,
+  children,
+  fallback = null
+}) {
+  const waitContext = useContext(WaitContext);
+  const 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/es2019/placeholder/index.js

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

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

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

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

@@ -0,0 +1,63 @@
+import React, { createContext, Fragment, Suspense, useLayoutEffect, useMemo, useRef, useState } from 'react';
+const isNodeEnvironment = () => {
+  return typeof window === 'undefined' || window.name === 'nodejs';
+};
+const LazySuspenseContext = /*#__PURE__*/createContext({
+  fallback: /*#__PURE__*/React.createElement(Fragment, null),
+  setFallback: () => {
+    // eslint-disable-next-line no-console
+    console.warn('Missing <LooselySuspense /> boundary');
+  },
+  name: ''
+});
+const DynamicFallback = ({
+  children,
+  outsideSuspense
+}) => {
+  const {
+    fallback,
+    setFallback
+  } = React.useContext(LazySuspenseContext);
+  useLayoutEffect(() => {
+    return () => {
+      if (!outsideSuspense) {
+        setFallback(null);
+      }
+    };
+  }, [outsideSuspense, setFallback]);
+  return children(outsideSuspense ? null : fallback);
+};
+DynamicFallback.displayName = 'DynamicFallback';
+export const LazySuspense = ({
+  fallback,
+  children,
+  name
+}) => {
+  const [hydrationFallback, setHydrationFallback] = useState(null);
+  const mountedRef = useRef(false);
+  useLayoutEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  const contextValue = useMemo(() => ({
+    fallback,
+    setFallback: newFallback => {
+      if (hydrationFallback === newFallback) {
+        return;
+      }
+      setHydrationFallback(newFallback);
+    },
+    name
+  }), [fallback, hydrationFallback, name]);
+  const renderFallback = outsideSuspense => /*#__PURE__*/React.createElement(DynamicFallback, {
+    outsideSuspense: outsideSuspense
+  }, resolvedFallback => 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/es2019/placeholder/loosely-lazy/types.js

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

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

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+export const WaitContext = /*#__PURE__*/createContext({
+  subscribe: () => () => {},
+  currentValue: () => 1
+});

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

@@ -0,0 +1,44 @@
+import { getConfig as getConfigUFO } from '../../../config';
+const defaultAllowedParams = ['operationName', 'operation', 'q'];
+const getAllowedParams = () => {
+  const config = getConfigUFO();
+  return (config === null || config === void 0 ? void 0 : config.allowedResourcesParams) || defaultAllowedParams;
+};
+const handleQueryParams = urlString => {
+  try {
+    if (typeof urlString !== 'string') {
+      return urlString;
+    }
+    const url = new URL(urlString);
+    const params = new URLSearchParams(url.search);
+    const allowedParams = getAllowedParams();
+    for (const [key] of params) {
+      if (!allowedParams.includes(key)) {
+        url.searchParams.delete(key);
+      }
+    }
+    return url.toString();
+  } catch (e) {
+    return urlString;
+  }
+};
+let config = {
+  mapResources: url => url,
+  sanitiseEndpoints: url => {
+    return handleQueryParams(url);
+  }
+};
+export function configure(resourceTimingConfig) {
+  const newConfig = {
+    mapResources: resourceTimingConfig.mapResources,
+    sanitiseEndpoints: url => {
+      const sanitised = resourceTimingConfig.sanitiseEndpoints(url);
+      if (sanitised) {
+        return handleQueryParams(sanitised);
+      }
+      return sanitised;
+    }
+  };
+  config = newConfig;
+}
+export const getConfig = () => config;

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

@@ -0,0 +1,88 @@
+import { roundEpsilon } from '../../../round-number';
+const getPerformanceObject = () => {
+  var _window;
+  return ((_window = window) !== null && _window !== void 0 ? _window : {}).performance;
+};
+const getPerformanceObserverObject = () => {
+  var _window2;
+  return ((_window2 = window) !== null && _window2 !== void 0 ? _window2 : {}).PerformanceObserver;
+};
+export const resourceTimingBuffer = {
+  timings: [],
+  maxSize: 1000,
+  observer: null,
+  transformResource: entry => {
+    var _entry$serverTiming, _entry$serverTiming2;
+    const duration = roundEpsilon(entry.duration);
+
+    // prioritising atl-edge
+    const totalBackendTimeEntry = ((_entry$serverTiming = entry.serverTiming) === null || _entry$serverTiming === void 0 ? void 0 : _entry$serverTiming.find(timing => 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
+    timing => timing.name === 'total' || timing.name === 'filter-request-papi'));
+    const serverTime = totalBackendTimeEntry ? roundEpsilon(totalBackendTimeEntry.duration) : undefined;
+    const 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,
+      networkTime,
+      encodedSize: roundEpsilon(entry.encodedBodySize),
+      decodedSize: roundEpsilon(entry.decodedBodySize)
+    };
+  },
+  start: () => {
+    var _performance$getEntri;
+    const performance = getPerformanceObject();
+    const PerformanceObserver = getPerformanceObserverObject();
+    if (!PerformanceObserver || !performance || typeof PerformanceObserver === 'undefined') {
+      return;
+    }
+    if (resourceTimingBuffer.observer) {
+      return;
+    }
+    const resources = (_performance$getEntri = performance.getEntriesByType) === null || _performance$getEntri === void 0 ? void 0 : _performance$getEntri.call(performance, 'resource');
+    if (resources) {
+      resourceTimingBuffer.timings = resources.map(resource => resourceTimingBuffer.transformResource(resource));
+    }
+    resourceTimingBuffer.observer = new PerformanceObserver(resourceTimingBuffer.addTimings);
+    resourceTimingBuffer.observer.observe({
+      entryTypes: ['resource']
+    });
+  },
+  stop: () => {
+    if (resourceTimingBuffer.observer) {
+      resourceTimingBuffer.observer.disconnect();
+      resourceTimingBuffer.observer = null;
+    }
+    resourceTimingBuffer.timings = [];
+  },
+  addTimings: list => {
+    const entries = list.getEntries().map(entry => resourceTimingBuffer.transformResource(entry));
+    const overflow = resourceTimingBuffer.timings.length + entries.length;
+    if (overflow > resourceTimingBuffer.maxSize) {
+      const fieldsToRemove = overflow - resourceTimingBuffer.maxSize;
+      resourceTimingBuffer.timings.splice(0, fieldsToRemove);
+    }
+    resourceTimingBuffer.timings.push(...entries);
+  }
+};
+const isValidTiming = (timing, startTime, endTime) => timing.startTime >= startTime && timing.startTime + timing.duration <= endTime;
+export const filterResourceTimings = (startTime, endTime) => {
+  const performance = getPerformanceObject();
+  const PerformanceObserver = getPerformanceObserverObject();
+  if (!PerformanceObserver || !resourceTimingBuffer.observer) {
+    const resources = performance === null || performance === void 0 ? void 0 : performance.getEntriesByType('resource');
+    if (resources) {
+      return resources.filter(timing => isValidTiming(timing, startTime, endTime));
+    }
+    return null;
+  }
+  return resourceTimingBuffer.timings.filter(timing => isValidTiming(timing, startTime, endTime));
+};

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

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