@atlaskit/react-ufo 1.1.0 → 2.0.1

package/dist/esm/trace-transition/index.js

@@ -0,0 +1,49 @@
+import { useContext, useEffect } from 'react';
+import { v4 as createUUID } from 'uuid';
+import coinflip from '../coinflip';
+import { getDoNotAbortActivePressInteractionOnTransition, getInteractionRate } from '../config';
+import { getActiveTrace } from '../experience-trace-id-context';
+import UFOInteractionIDContext, { DefaultInteractionID } from '../interaction-id-context';
+import { abortAll, addNewInteraction, addOnCancelCallback, getActiveInteraction, tryComplete } from '../interaction-metrics';
+import UFORouteName from '../route-name-context';
+import { setInteractionActiveTrace } from './utils/set-interaction-active-trace';
+export default function traceUFOTransition(ufoName) {
+  var routeName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ufoName;
+  var pressInteractionsList = getDoNotAbortActivePressInteractionOnTransition();
+  var interaction = getActiveInteraction();
+  if (pressInteractionsList && interaction) {
+    if (pressInteractionsList.includes(interaction.ufoName)) {
+      return;
+    }
+  }
+  abortAll('transition', ufoName !== null && ufoName !== void 0 ? ufoName : undefined);
+  if (ufoName) {
+    UFORouteName.current = ufoName;
+    var rate = getInteractionRate(ufoName, 'transition');
+    if (coinflip(rate)) {
+      var newId = createUUID();
+      setInteractionActiveTrace(newId);
+      DefaultInteractionID.current = newId;
+      addNewInteraction(newId, ufoName, 'transition', performance.now(), rate, null, routeName, getActiveTrace());
+    }
+  }
+}
+export function useUFOTransitionCompleter() {
+  var interactionId = useContext(UFOInteractionIDContext);
+  var capturedInteractionId = interactionId.current;
+  useEffect(function () {
+    // If we have a current interaction set...
+    if (capturedInteractionId != null) {
+      var cancel = requestAnimationFrame(function () {
+        cancel = requestAnimationFrame(function () {
+          if (capturedInteractionId === interactionId.current) {
+            tryComplete(capturedInteractionId);
+          }
+        });
+      });
+      addOnCancelCallback(capturedInteractionId, function () {
+        cancelAnimationFrame(cancel);
+      });
+    }
+  }, [capturedInteractionId, interactionId]);
+}

package/dist/esm/trace-transition/utils/generate-span-id/index.js

@@ -0,0 +1,5 @@
+export var generateSpanId = function generateSpanId() {
+  return Array.from(new Array(16), function () {
+    return Math.floor(Math.random() * 16).toString(16);
+  }).join('');
+};

package/dist/esm/trace-transition/utils/set-interaction-active-trace/index.js

@@ -0,0 +1,5 @@
+import { setActiveTrace } from '../../../experience-trace-id-context';
+import { generateSpanId } from '../generate-span-id';
+export var setInteractionActiveTrace = function setInteractionActiveTrace(newId) {
+  setActiveTrace(newId.replace(/-/g, ''), generateSpanId(), 'transition');
+};

package/dist/esm/typing-performance-tracing/index.js

@@ -0,0 +1,255 @@
+import { useEffect, useRef } from 'react';
+import { unstable_IdlePriority as idlePriority, unstable_scheduleCallback as scheduleCallback } from 'scheduler';
+import { v4 as createUUID } from 'uuid';
+import coinflip from '../coinflip';
+import { getInteractionRate, getTypingPerformanceTracingMethod } from '../config';
+import { addMetadata, addNewInteraction, tryComplete } from '../interaction-metrics';
+var getTypingMetadata = function getTypingMetadata(times, computeStartTime, typingPerformanceTracingMethod) {
+  var min = 0;
+  var max = 0;
+  var avg = 0;
+  var index = 0;
+  var below50count = 0;
+  times.forEach(function (time) {
+    if (time !== 0) {
+      avg = (avg * index + time) / ++index;
+      if (time > max) {
+        max = time;
+      }
+      if (min === 0 || time < min) {
+        min = time;
+      }
+      if (time < 50) {
+        below50count++;
+      }
+    }
+  });
+  return {
+    typing: {
+      min: min,
+      max: max,
+      avg: avg,
+      count: index,
+      below50count: below50count,
+      compute: performance.now() - computeStartTime,
+      typeTracingMethod: typingPerformanceTracingMethod
+    }
+  };
+};
+function typingPerformanceTracingTimeout(element, name, rate) {
+  var tsubmit;
+  var times = [];
+  var isInteractionInitialised = false;
+  var id;
+  var start = function start() {
+    id = createUUID();
+    addNewInteraction(id, name, 'typing', performance.now(), rate, null, null);
+    isInteractionInitialised = true;
+  };
+  var end = function end() {
+    isInteractionInitialised = false;
+    var timesCopy = times;
+    times = [];
+    scheduleCallback(idlePriority, function () {
+      var computeStartTime = performance.now();
+      var data = getTypingMetadata(timesCopy, computeStartTime, 'timeout');
+      addMetadata(id, data);
+      tryComplete(id);
+    });
+  };
+  var onKeyPressHandler = function onKeyPressHandler(event) {
+    if (!isInteractionInitialised) {
+      start();
+    }
+    var startTime = event.timeStamp;
+    setTimeout(function () {
+      var endTime = performance.now();
+      var time = endTime - startTime;
+      times.push(time);
+      clearTimeout(tsubmit);
+      tsubmit = setTimeout(end, 2000); // debounce
+    }, 0);
+  };
+
+  // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+  element.addEventListener('keypress', onKeyPressHandler);
+  return function () {
+    // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+    element.removeEventListener('keypress', onKeyPressHandler);
+  };
+}
+function typingPerformanceTracingTimeoutNoAlloc(element, name, rate) {
+  var tsubmit;
+  var isInteractionInitialised = false;
+  var min = 0;
+  var max = 0;
+  var below50count = 0;
+  var avg = 0;
+  var count = 0;
+  var id;
+  var resetStats = function resetStats() {
+    min = 0;
+    max = 0;
+    below50count = 0;
+    avg = 0;
+    count = 0;
+  };
+  var start = function start() {
+    id = createUUID();
+    addNewInteraction(id, name, 'typing', performance.now(), rate, null, null);
+    isInteractionInitialised = true;
+  };
+  var end = function end() {
+    isInteractionInitialised = false;
+    var typingMetaData = {
+      typing: {
+        min: min,
+        max: max,
+        avg: avg,
+        count: count,
+        below50count: below50count,
+        typeTracingMethod: 'timeoutNoAlloc'
+      }
+    };
+    resetStats();
+    scheduleCallback(idlePriority, function () {
+      addMetadata(id, typingMetaData);
+      tryComplete(id);
+    });
+  };
+  var onKeyPressHandler = function onKeyPressHandler(event) {
+    if (!isInteractionInitialised) {
+      start();
+    }
+    var startTime = event.timeStamp;
+    setTimeout(function () {
+      var endTime = performance.now();
+      var time = endTime - startTime;
+      if (time !== 0) {
+        avg = (avg * count + time) / ++count;
+        if (time > max) {
+          max = time;
+        }
+        if (min === 0 || time < min) {
+          min = time;
+        }
+        if (time < 50) {
+          below50count++;
+        }
+      }
+      clearTimeout(tsubmit);
+      tsubmit = setTimeout(end, 2000); // debounce
+    }, 0);
+  };
+
+  // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+  element.addEventListener('keypress', onKeyPressHandler);
+  return function () {
+    // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+    element.removeEventListener('keypress', onKeyPressHandler);
+  };
+}
+function typingPerformanceTracingMutationObserver(element, name, rate) {
+  var eventTime = -1;
+  var isInteractionInitialised = false;
+  var count = 0;
+  var id;
+  var tsubmit;
+  var keyLimit = 20;
+  var times = new Float64Array(keyLimit);
+  var resetTimesArray = function resetTimesArray() {
+    times.fill(0);
+  };
+  var resetEventTime = function resetEventTime() {
+    eventTime = -1;
+  };
+  var start = function start() {
+    id = createUUID();
+    addNewInteraction(id, name, 'typing', performance.now(), rate, null, null);
+    isInteractionInitialised = true;
+  };
+  var end = function end() {
+    isInteractionInitialised = false;
+    if (count === 0) {
+      return;
+    }
+    var timesCopy = new Float64Array(times);
+    var countCopy = count;
+    resetTimesArray();
+    resetEventTime();
+    count = 0;
+    scheduleCallback(idlePriority, function () {
+      var computeStartTime = performance.now();
+      var timesSubarray = timesCopy.subarray(0, countCopy);
+      var data = getTypingMetadata(timesSubarray, computeStartTime, 'mutationObserver');
+      addMetadata(id, data);
+      tryComplete(id);
+    });
+  };
+  var onKeyPressHandler = function onKeyPressHandler(event) {
+    if (!isInteractionInitialised) {
+      start();
+    }
+    eventTime = event.timeStamp;
+    setTimeout(function () {
+      clearTimeout(tsubmit);
+      tsubmit = setTimeout(end, 2000); // debounce
+    }, 0);
+  };
+  var mo = new MutationObserver(function (events) {
+    var moTime = performance.now();
+    if (eventTime === -1) {
+      return;
+    }
+    if (count > keyLimit - 1) {
+      end();
+      return;
+    }
+    var startTime = eventTime;
+    resetEventTime();
+    events.forEach(function () {
+      requestAnimationFrame(function (firstFrameTime) {
+        if (firstFrameTime < moTime) {
+          requestAnimationFrame(function (secondFrameTime) {
+            times[count] = secondFrameTime - startTime;
+            count++;
+          });
+        } else {
+          times[count] = firstFrameTime - startTime;
+          count++;
+        }
+      });
+    });
+  });
+  mo.observe(element, {
+    attributeFilter: ['value'],
+    attributes: true,
+    characterData: true,
+    childList: true,
+    subtree: true
+  });
+
+  // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+  element.addEventListener('keypress', onKeyPressHandler);
+  return function () {
+    // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+    element.removeEventListener('keypress', onKeyPressHandler);
+    mo.disconnect();
+  };
+}
+var typingPerformanceTracingMethods = {
+  timeout: typingPerformanceTracingTimeout,
+  timeoutNoAlloc: typingPerformanceTracingTimeoutNoAlloc,
+  mutationObserver: typingPerformanceTracingMutationObserver
+};
+export default function useUFOTypingPerformanceTracing(name) {
+  var ref = useRef(null);
+  useEffect(function () {
+    var rate = getInteractionRate(name, 'typing');
+    if (coinflip(rate) && ref.current != null) {
+      var method = getTypingPerformanceTracingMethod();
+      return typingPerformanceTracingMethods[method](ref.current, name, rate);
+    }
+  }, [name]);
+  return ref;
+}

package/dist/esm/use-press-tracing/index.js

@@ -0,0 +1,12 @@
+import { useCallback, useContext } from 'react';
+import InteractionContext from '@atlaskit/interaction-context';
+export default function usePressTracing(name) {
+  var context = useContext(InteractionContext);
+  var handleClick = useCallback(function (timeStamp) {
+    if (context) {
+      var time = timeStamp || performance.now();
+      context.tracePress(name, time);
+    }
+  }, [context, name]);
+  return handleClick;
+}

package/dist/esm/vc/index.js

@@ -0,0 +1,9 @@
+import { VCObserver } from './vc-observer';
+var instance = null;
+export var getVCObserver = function getVCObserver() {
+  var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  if (instance === null) {
+    instance = new VCObserver(opts);
+  }
+  return instance;
+};

package/dist/esm/vc/vc-observer/attachAbortListeners.js

@@ -0,0 +1,34 @@
+import { bind } from 'bind-event-listener';
+import { AbortEvent } from '../../common/vc/types';
+import { getViewportHeight, getViewportWidth } from './getViewport';
+export var attachAbortListeners = function attachAbortListeners(window, initialViewPort, callback) {
+  var unbindWheel = bind(window, {
+    type: AbortEvent.wheel,
+    listener: function listener(e) {
+      callback(AbortEvent.wheel, e.timeStamp);
+    },
+    options: {
+      passive: true,
+      once: true
+    }
+  });
+  var unbindKeydown = bind(window, {
+    type: AbortEvent.keydown,
+    listener: function listener(e) {
+      callback(AbortEvent.keydown, e.timeStamp);
+    },
+    options: {
+      once: true
+    }
+  });
+  var unbindResize = bind(window, {
+    type: AbortEvent.resize,
+    listener: function listener(e) {
+      if (getViewportWidth() !== initialViewPort.w || getViewportHeight() !== initialViewPort.h) {
+        callback(AbortEvent.resize, e.timeStamp);
+        unbindResize();
+      }
+    }
+  });
+  return [unbindWheel, unbindKeydown, unbindResize];
+};

package/dist/esm/vc/vc-observer/getViewport.js

@@ -0,0 +1,20 @@
+export function getViewportWidth() {
+  var document = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window.document;
+  var documentWidth;
+  try {
+    documentWidth = document.documentElement.clientWidth || 0;
+  } catch (e) {
+    documentWidth = 0;
+  }
+  return Math.max(documentWidth, window.innerWidth || 0);
+}
+export function getViewportHeight() {
+  var document = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window.document;
+  var documentHeight;
+  try {
+    documentHeight = document.documentElement.clientHeight || 0;
+  } catch (e) {
+    documentHeight = 0;
+  }
+  return Math.max(documentHeight, window.innerHeight || 0);
+}