@atlaskit/react-ufo 3.4.14 → 3.5.0

package/dist/esm/vc/vc-observer-new/viewport-observer/performance-observer/index.js

@@ -1,8 +1,10 @@
 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 { withProfiling } from '../../../../self-measurements';
+
 // The LayoutShiftAttribution API is returning the numbers on physical dimension
-export function convertPhysicalToLogicalResolution(rect) {
+export var convertPhysicalToLogicalResolution = withProfiling(function convertPhysicalToLogicalResolution(rect) {
   if (typeof window.devicePixelRatio !== 'number') {
     return rect;
   }
@@ -12,13 +14,13 @@ export function convertPhysicalToLogicalResolution(rect) {
 
   // eslint-disable-next-line compat/compat
   return new DOMRect(rect.x / window.devicePixelRatio, rect.y / window.devicePixelRatio, rect.width / window.devicePixelRatio, rect.height / window.devicePixelRatio);
-}
-export default function createPerformanceObserver(args) {
+}, ['vc']);
+var createPerformanceObserver = withProfiling(function createPerformanceObserver(args) {
   if (!window || typeof window.PerformanceObserver !== 'function') {
     return null;
   }
-  var onLayoutShift = args.onLayoutShift;
-  var observer = new PerformanceObserver(function (entries) {
+  var onLayoutShift = withProfiling(args.onLayoutShift, ['vc']);
+  var performanceObserverCallback = withProfiling(function performanceObserverCallback(entries) {
     var _iterator = _createForOfIteratorHelper(entries.getEntries()),
       _step;
     try {
@@ -46,6 +48,8 @@ export default function createPerformanceObserver(args) {
     } finally {
       _iterator.f();
     }
-  });
+  }, ['vc']);
+  var observer = new PerformanceObserver(performanceObserverCallback);
   return observer;
-}
+}, ['vc']);
+export default createPerformanceObserver;

package/dist/esm/vc/vc-observer-new/window-event-observer/index.js

@@ -2,11 +2,17 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { bind } from 'bind-event-listener';
+import { markProfilingEnd, markProfilingStart, withProfiling } from '../../../self-measurements';
 var WindowEventObserver = /*#__PURE__*/function () {
   function WindowEventObserver(opts) {
     _classCallCheck(this, WindowEventObserver);
     _defineProperty(this, "unbindFns", []);
-    this.onEvent = opts.onEvent;
+    var operationTimer = markProfilingStart('WindowEventObserver constructor');
+    this.onEvent = withProfiling(opts.onEvent, ['vc']);
+    this.bindEvent = withProfiling(this.bindEvent.bind(this), ['vc']);
+    this.start = withProfiling(this.start.bind(this), ['vc']);
+    this.stop = withProfiling(this.stop.bind(this), ['vc']);
+    markProfilingEnd(operationTimer);
   }
   return _createClass(WindowEventObserver, [{
     key: "bindEvent",

package/dist/types/additional-payload/utils/cache-hit-ratio/index.d.ts

@@ -2,7 +2,7 @@ type CacheHitRatio = {
     cacheHitRatio?: number;
     preloadCacheHitRatio?: number;
 };
-export declare const getCacheHitRatio: ({ start }: {
+export declare const getCacheHitRatio: (args_0: {
     start: number;
 }) => CacheHitRatio;
 export {};

package/dist/types/additional-payload/utils/lighthouse-metrics/index.d.ts

@@ -1,5 +1,5 @@
-export declare function startLighthouseObserver(): void;
-export declare const getLighthouseMetrics: ({ start, stop, }: {
+export declare const startLighthouseObserver: () => void;
+export declare const getLighthouseMetrics: (args_0: {
     start: number;
     stop: number;
 }) => {

package/dist/types/assets/index.d.ts

@@ -13,13 +13,15 @@ export declare class CHRSummary {
         net: number;
     };
     sizeTotal: number;
+    constructor();
     add(asset: ResourceEntry): void;
-    static makePayload(summary: CHRSummary): AssetsReporter;
+    static makePayload: (summary: CHRSummary) => AssetsReporter;
 }
 export declare class CHRReporter {
     all: CHRSummary;
     allAtlassian: CHRSummary;
     preloaded: CHRSummary;
     defaultAllowedTypes: string[];
+    constructor();
     get(resourceTimings: ResourceEntry[] | null, assetsConfig: AssetsConfig, SSRDoneTime: number | undefined): AssetsData | null;
 }

package/dist/types/assets/utils.d.ts

@@ -4,6 +4,6 @@ export declare const MEMORY_KEY = "mem";
 export declare const DISK_KEY = "disk";
 export declare const NETWORK_KEY = "net";
 export declare const calculateTransferType: (name: string, type: string, duration: number, size: number | undefined) => "disk" | "mem" | "net" | null;
-export declare const getTypeOfRequest: ({ name, initiatorType: type }: ResourceEntry) => string;
+export declare const getTypeOfRequest: (args_0: ResourceEntry) => string;
 export declare const checkIfTimingsAvailable: (entry: ResourceEntry) => boolean;
 export declare const round: (n: number) => number;

package/dist/types/bundle-eval-timing/index.d.ts

@@ -11,6 +11,6 @@ type ReportedTimings = {
         duration: number;
     };
 };
-export declare function configure(bundleEvalTimingConfiguration: BundleEvalTimingsConfig): void;
-export declare function getBundleEvalTimings(interactionStartTime: number): ReportedTimings;
+export declare const configure: (bundleEvalTimingConfiguration: BundleEvalTimingsConfig) => void;
+export declare const getBundleEvalTimings: (interactionStartTime: number) => ReportedTimings;
 export {};

package/dist/types/coinflip/index.d.ts

@@ -5,4 +5,5 @@
  * @param rate The change that it will pass (1 in <rate> times)
  * @returns bool, if it passes or not
  */
-export default function coinflip(rate: number): boolean;
+declare const coinflip: (rate: number) => boolean;
+export default coinflip;

package/dist/types/common/index.d.ts

@@ -10,8 +10,9 @@ export type AssetResourceEntry = any;
 export type AssetsClassification = any;
 export type { AssetsConfig, AssetsData, AssetsReporter, AssetsConfigAllAtlassianArgs, AssetsConfigPreloadedArgs, } from './assets/types';
 export type { LifecycleMarkType, MarkType, SpanType, InteractionType, AbortReasonType, CustomTiming, HoldInfo, LoadProfilerEventInfo, ReactProfilerTiming, Span, Mark, InteractionError, RequestInfo, ApdexType, SegmentInfo, CustomData, HoldActive, Redirect, InteractionMetrics, EnhancedUFOInteractionContextType, BM3Event, PostInteractionLogOutput, LastInteractionFinishInfo, } from './common/types';
-export type { MultiHeatmapPayload } from './vc/types';
+export type { RevisionPayload, RevisionPayloadVCDetails } from './vc/types';
 /**
+ * @private
  * @deprecated Prefer import from @atlaskit/react-ufo/interaction-context
  */
 export type { Label, SegmentLabel, LabelStack } from '../interaction-context';

package/dist/types/common/react-ufo-payload-schema.d.ts

@@ -0,0 +1,175 @@
+import { createPayloads } from '../create-payload';
+import { LabelStack } from '../interaction-context';
+import { VCObserver } from '../vc/vc-observer';
+import type { AbortReasonType, ApdexType, InteractionType, SegmentInfo } from './common/types';
+import type { RevisionPayload } from './vc/types';
+type ExtractPromise<T> = T extends Promise<infer U> ? U : never;
+export type PageVisibility = 'hidden' | 'mixed' | 'visible';
+type ReactUFOAttributesProperties = ExtractPromise<ReturnType<typeof createPayloads>>[number]['attributes']['properties'];
+export type ResourceTiming = {
+    label: string;
+    data: {
+        startTime: number;
+        duration: number;
+        workerStart: number;
+        fetchStart: number;
+        type: 'script' | 'link';
+        ttfb: number;
+        transferType: 'network' | 'memory' | 'disk';
+        serverTime?: number;
+        networkTime?: number;
+        encodedSize?: number;
+        decodedSize?: number;
+        size: number;
+    };
+};
+export type ReactProfilerTiming = {
+    labelStack: LabelStack;
+    startTime: number;
+    endTime: number;
+    mountCount: number;
+    rerenderCount: number;
+    renderDuration: number;
+};
+export type HoldInfo = {
+    labelStack: LabelStack;
+    startTime: number;
+    endTime: number;
+};
+export type VCParts = (typeof VCObserver.VCParts)[number];
+export type LeafSegment = {
+    n: string;
+};
+export interface ParentSegment {
+    n: string;
+    c: {
+        [segmentId: string]: ParentSegment | LeafSegment;
+    };
+}
+export type RootSegment = {
+    r: ParentSegment;
+};
+export type ReactUFOPayload = {
+    action: 'measured';
+    actionSubject: 'experience';
+    eventType: 'operational';
+    source: 'measured';
+    tags: ['observability'];
+    attributes: {
+        properties: ReactUFOAttributesProperties & {
+            'event:hostname': string;
+            'event:product': string;
+            'event:schema': '1.0.0';
+            'event:sizeInKb': number;
+            'event:source': {
+                name: 'react-ufo/web';
+                version: '1.0.1' | '2.0.0';
+            };
+            'event:region': string;
+            'experience:key': 'custom.interaction-metrics' | 'custom.experimental-interaction-metrics';
+            'experience:name': string;
+            'event:localHour': number;
+            'event:localDayOfWeek': number;
+            'event:localTimezoneOffset': number;
+            'event:browser:name': string;
+            'event:browser:version': string;
+            'event:cpus': number;
+            'event:memory': 0.25 | 0.5 | 1 | 2 | 4 | 8;
+            'event:network:effectiveType': 'slow-2g' | '2g' | '3g' | '4g';
+            'event:network:rtt': number;
+            'event:network:downlink': number;
+            'ssr:success': boolean;
+            'ssr:featureFlags?': Record<string, boolean | string | number>;
+            'metric:fp': number;
+            'metric:fcp': number;
+            'metric:lcp': number;
+            'metrics:navigation': {
+                redirectStart: number;
+                redirectEnd: number;
+                fetchStart: number;
+                domainLookupStart: number;
+                domainLookupEnd: number;
+                connectStart: number;
+                connectEnd: number;
+                secureConnectionStart: number;
+                requestStart: number;
+                responseStart: number;
+                responseEnd: number;
+                encodedBodySize: number;
+                decodedBodySize: number;
+                transferSize: number;
+                redirectCount: number;
+                type: 'navigate' | 'reload' | 'back_forward' | 'prerender';
+                unloadEventEnd: number;
+                unloadEventStart: number;
+                workerStart: number;
+                nextHopProtocol: 'http/0.9' | 'http/1.0' | 'http/1.1' | 'h2' | 'h2c' | 'h3';
+            };
+            'ufo:errors:globalCount': number;
+            'ufo:errors:count': number;
+            interactionMetrics: {
+                namePrefix: string;
+                segmentPrefix: string;
+                interactionId: string;
+                pageVisibilityAtTTI: PageVisibility;
+                pageVisibilityAtTTAI: PageVisibility;
+                experimental__pageVisibilityAtTTI: PageVisibility;
+                experimental__pageVisibilityAtTTAI: PageVisibility;
+                rate: number;
+                routeName: string;
+                type: InteractionType;
+                abortReason: AbortReasonType;
+                featureFlags?: {
+                    prior: Record<string, boolean | string | number>;
+                    during: Record<string, boolean | string | number>;
+                };
+                previousInteractionName?: string;
+                isPreviousInteractionAborted: boolean;
+                abortedByInteractionName?: string;
+                apdex: ApdexType[];
+                end: number;
+                start: number;
+                isBM3ConfigSSRDoneAsFmp: boolean;
+                isUFOConfigSSRDoneAsFmp: boolean;
+                resourceTimings: ResourceTiming[];
+                segments: SegmentInfo[] | RootSegment;
+                reactProfilerTimings: ReactProfilerTiming[];
+                holdInfo: HoldInfo[];
+            };
+            'ufo:vc:rev': RevisionPayload;
+            'ufo:vc:ratios': Record<string, number>;
+            'ufo:vc:size': {
+                w: number;
+                h: number;
+            };
+            'ufo:vc:time': number;
+            'ufo:vc:state'?: boolean;
+            'ufo:vc:clean'?: boolean;
+            'metrics:vc'?: Record<VCParts, number>;
+            'ufo:vc:dom'?: Record<VCParts, string[]>;
+            'ufo:vc:updates'?: Array<{
+                time: number;
+                vc: number;
+                elements: string[];
+            }>;
+            'ufo:vc:total'?: number;
+            'ufo:vc:next'?: Record<VCParts, number>;
+            'ufo:vc:next:updates'?: Array<{
+                time: number;
+                vc: number;
+                elements: string[];
+            }>;
+            'ufo:vc:next:dom'?: Record<VCParts, string[]>;
+            'ufo:vc:ignored'?: string[];
+            'metric:vc90'?: number;
+            'ufo:speedIndex'?: number;
+            'ufo:next:speedIndex'?: number;
+            'ufo:vc:updates:next'?: Array<{
+                time: number;
+                vc: number;
+                elements: string[];
+            }>;
+        };
+    };
+};
+export {};

package/dist/types/common/vc/types.d.ts

@@ -39,10 +39,21 @@ export type VCEntryType = {
 };
 export type VCIgnoreReason = 'image' | 'ssr-hydration' | 'editor-lazy-node-view' | 'not-visible' | 'editor-container-mutation' | 'non-visual-style' | '';
 export type ComponentsLogEntry = {
+    type?: string;
     targetName: string;
     __debug__element: WeakRef<Element> | null;
-    intersectionRect: DOMRectReadOnly;
+    intersectionRect: {
+        width: number;
+        height: number;
+        top: number;
+        bottom: number;
+        left: number;
+        right: number;
+    };
     ignoreReason?: VCIgnoreReason;
+    attributeName?: string | null;
+    oldValue?: string | null;
+    newValue?: string | null;
 };
 export type VCIgnoredElement = Pick<ComponentsLogEntry, 'targetName' | 'ignoreReason'>;
 export type VCResult = {
@@ -51,7 +62,7 @@ export type VCResult = {
         h: number;
     } | {
         [key: string]: boolean | number | string[] | null | VCEntryType[];
-    } | MultiHeatmapPayload;
+    } | RevisionPayload;
 };
 export type MetricsDevToolsTypes = {
     '75': number | null;
@@ -95,16 +106,15 @@ declare global {
         };
     }
 }
-type MultiHeatmapRevisionPayload = {
+export type RevisionPayloadVCDetails = Record<string, {
+    t: number;
+    e: string[];
+}>;
+export type RevisionPayloadEntry = {
     'metric:vc90': number | null;
     revision: string;
     clean: boolean;
-    vcDetails?: {
-        [key: string]: {
-            t: number;
-            e: string[];
-        };
-    };
+    vcDetails?: RevisionPayloadVCDetails;
 };
-export type MultiHeatmapPayload = MultiHeatmapRevisionPayload[];
+export type RevisionPayload = RevisionPayloadEntry[];
 export {};

package/dist/types/config/index.d.ts

@@ -97,20 +97,18 @@ export type Config = {
      */
     readonly enableCompleteUsingDoubleRAF?: boolean;
 };
-export declare function setUFOConfig(newConfig: Config): void;
-export declare function getConfig(): Config | undefined;
-export declare function getInteractionRate(name: string, interactionKind: InteractionKind): number;
-export declare function getExperimentalInteractionRate(name: string, interactionType: InteractionType): number;
-export declare function getPostInteractionRate(name: string, interactionType: InteractionType): number;
-export declare function getCapabilityRate(capability: Capability): number;
-declare const validTypingMethods: readonly ["timeout", "timeoutNoAlloc", "mutationObserver"];
-type ValidTypingMethod = (typeof validTypingMethods)[number];
-export declare function getTypingPerformanceTracingMethod(): ValidTypingMethod;
-export declare function getAwaitBM3TTIList(): string[];
-export declare function getRemovePageSegmentsUFOPrefixes(): boolean;
-export declare function getRemoveInteractionsUFOPrefixes(): boolean;
-export declare function getUfoNameOverrides(): UFONameOverride | undefined;
-export declare function getDoNotAbortActivePressInteraction(): string[] | undefined;
-export declare function getDoNotAbortActivePressInteractionOnTransition(): string[] | undefined;
-export declare function shouldHandleEditorLnv(): boolean;
+export declare const setUFOConfig: (newConfig: Config) => void;
+export declare const getConfig: () => Config | undefined;
+export declare const getInteractionRate: (name: string, interactionKind: InteractionKind) => number;
+export declare const getExperimentalInteractionRate: (name: string, interactionType: InteractionType) => number;
+export declare const getPostInteractionRate: (name: string, interactionType: InteractionType) => number;
+export declare const getCapabilityRate: (capability: Capability) => number;
+export declare const getTypingPerformanceTracingMethod: () => "timeout" | "timeoutNoAlloc" | "mutationObserver";
+export declare const getAwaitBM3TTIList: () => string[];
+export declare const getRemovePageSegmentsUFOPrefixes: () => boolean;
+export declare const getRemoveInteractionsUFOPrefixes: () => boolean;
+export declare const getUfoNameOverrides: () => UFONameOverride | undefined;
+export declare const getDoNotAbortActivePressInteraction: () => string[] | undefined;
+export declare const getDoNotAbortActivePressInteractionOnTransition: () => string[] | undefined;
+export declare const shouldHandleEditorLnv: () => boolean;
 export {};

package/dist/types/create-experimental-interaction-metrics-payload/index.d.ts

@@ -2,11 +2,12 @@ import type { InteractionMetrics } from '../common';
 import type { VCObserverOptions } from '../vc/types';
 import { VCObserver } from '../vc/vc-observer';
 type InteractionMetricsHandler = (interactionId: string, interaction: InteractionMetrics) => void | Promise<void>;
-export declare function installInteractionSink(handler: InteractionMetricsHandler): void;
-export declare function sinkExperimentalHandler(sinkFn: (interactionId: string, interaction: InteractionMetrics) => void | Promise<void>): void;
-export declare function onExperimentalInteractionComplete(interactionId: string, data: InteractionMetrics, endTime?: number): void;
+export declare const installInteractionSink: (handler: InteractionMetricsHandler) => void;
+export declare const sinkExperimentalHandler: (sinkFn: (interactionId: string, interaction: InteractionMetrics) => void | Promise<void>) => void;
+export declare const onExperimentalInteractionComplete: (interactionId: string, data: InteractionMetrics, endTime?: any) => void;
 export declare class ExperimentalVCMetrics {
     vcObserver: VCObserver | null;
+    constructor();
     initialize(options: VCObserverOptions): this;
     start({ startTime }: {
         startTime: number;

package/dist/types/create-payload/common/utils/index.d.ts

@@ -1,5 +1,4 @@
-import { getReactUFOVersion } from '../../../common/constants';
-import type { LabelStack, SegmentLabel } from '../../../interaction-context';
+import type { LabelStack } from '../../../interaction-context';
 export type SegmentItem = {
     n: string;
     c?: Record<string, SegmentItem>;
@@ -8,11 +7,11 @@ export type SegmentTree = {
     r: SegmentItem;
 };
 export declare const sanitizeUfoName: (name: string) => string;
-export declare function isSegmentLabel(obj: any): obj is SegmentLabel;
-export declare function buildSegmentTree(labelStacks: LabelStack[]): SegmentTree;
-export declare function stringifyLabelStackFully(labelStack: LabelStack): string;
-export declare function labelStackStartWith(labelStack: LabelStack, startWith: LabelStack): boolean;
-export declare function optimizeLabelStack(labelStack: LabelStack, reactUFOVersion: ReturnType<typeof getReactUFOVersion>): string | {
+export declare const isSegmentLabel: (obj: any) => boolean;
+export declare const buildSegmentTree: (labelStacks: LabelStack[]) => SegmentTree;
+export declare const stringifyLabelStackFully: (labelStack: LabelStack) => string;
+export declare const labelStackStartWith: (labelStack: LabelStack, startWith: LabelStack) => boolean;
+export declare const optimizeLabelStack: (labelStack: LabelStack, reactUFOVersion: "1.0.1" | "2.0.0") => string | {
     s?: string | undefined;
     n: string;
 }[];