@atlaskit/react-ufo 1.1.0 → 2.0.0

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

@@ -0,0 +1,201 @@
+import type { TraceIdContext } from '../../experience-trace-id-context';
+import type { LabelStack, UFOInteractionContextType } from '../../interaction-context';
+import { type VCRawDataType, type VCResult } from '../vc/types';
+export type LifecycleMarkType = 'render' | 'beforePaint' | 'afterPaint' | 'nextTick' | 'mount' | 'commit';
+export type MarkType = ('placeholder' | 'bm3_stop' | 'bundle_preload' | 'custom') | LifecycleMarkType;
+export type SpanType = 'placeholder' | 'relay' | 'hidden_timing' | 'bundle_load' | 'graphql' | 'fetch' | 'reducer' | 'custom';
+export type InteractionType = 'page_load' | 'press' | 'typing' | 'transition' | 'segment';
+export type AbortReasonType = 'new_interaction' | 'unload' | 'transition' | 'timeout' | 'excluded_by_sampling';
+export interface ReactProfilerTiming {
+    type: 'mount' | 'update' | 'nested-update';
+    actualDuration: number;
+    baseDuration: number;
+    startTime: number;
+    commitTime: number;
+    labelStack: LabelStack;
+}
+export interface Span {
+    type: SpanType;
+    name: string;
+    labelStack: LabelStack | null;
+    start: number;
+    end: number;
+    size?: number;
+}
+export interface Mark {
+    type: MarkType;
+    name: string;
+    labelStack: LabelStack | null;
+    time: number;
+}
+export interface InteractionError {
+    name: string;
+    labelStack: LabelStack | null;
+    errorType: string;
+    errorMessage: string;
+    errorStack?: string;
+    forcedError?: boolean;
+}
+interface FlushInfo {
+    label?: string;
+    size: number;
+    time: number;
+}
+export interface RequestInfo {
+    name: string;
+    start: number;
+    flushes: FlushInfo[];
+    networkStart?: number;
+    networkComplete?: number;
+    fetchStart?: number;
+    end?: number;
+    size?: number;
+    error?: Error;
+}
+type FeatureFlagValue = boolean | string | number | Record<any, any> | 'non_boolean';
+export interface ApdexType {
+    key: string;
+    startTime?: number;
+    stopTime: number;
+    labelStack?: LabelStack;
+}
+export interface SegmentInfo {
+    labelStack: LabelStack;
+}
+export interface CustomData {
+    [key: string]: null | undefined | string | number | boolean | undefined | CustomData | Record<string, CustomData>;
+}
+export type CustomTiming = Record<string, {
+    startTime: number;
+    endTime: number;
+}>;
+export interface HoldActive {
+    labelStack: LabelStack;
+    name: string;
+    start: number;
+    ignoreOnSubmit?: boolean;
+}
+export type HoldInfo = HoldActive & {
+    end: number;
+};
+export interface Redirect {
+    fromInteractionName: string;
+    time: number;
+}
+export interface InteractionMetrics {
+    id: string;
+    start: number;
+    end: number;
+    ufoName: string;
+    previousInteractionName?: string;
+    isPreviousInteractionAborted: boolean;
+    type: InteractionType;
+    marks: Mark[];
+    customData: {
+        labelStack: LabelStack;
+        data: CustomData;
+    }[];
+    customTimings: {
+        labelStack: LabelStack;
+        data: CustomTiming;
+    }[];
+    spans: Span[];
+    requestInfo: (RequestInfo & {
+        labelStack: LabelStack;
+    })[];
+    holdInfo: HoldInfo[];
+    holdActive: Map<string, HoldActive>;
+    reactProfilerTimings: ReactProfilerTiming[];
+    measureStart: number;
+    rate: number;
+    cancelCallbacks: (() => void)[];
+    cleanupCallbacks: (() => void)[];
+    metaData: Record<string, unknown>;
+    errors: InteractionError[];
+    abortReason?: AbortReasonType;
+    abortedByInteractionName?: string;
+    /**
+     * Apdex is legacy performance measurement where it is
+     * capturing TTI at arbitrary point in the code (bm3/UFOv1)
+     *
+     * We are intercepting its values now just so we can use it for
+     * topline metric, but should encourage teams adopt TTAI
+     *
+     * This field might be ignored/dropped in the future.
+     */
+    apdex: ApdexType[];
+    /**
+     * LabelStack is a stack of labels that are used to identify the
+     * breadcrumb of segments of the current interaction.
+     * For example, it could look something like:
+     * ```
+     * [
+     *  { name: 'product', segmentId: 'xxx' },
+     *  { name: 'issue-navigator', segmentId: 'xxx' },
+     *  { name: 'ui', segmentId: 'xxx' }
+     * ]
+     * ```
+     */
+    labelStack: LabelStack | null;
+    routeName: string | null;
+    featureFlags?: {
+        prior: Record<string, FeatureFlagValue>;
+        during: Record<string, FeatureFlagValue>;
+    };
+    knownSegments: SegmentInfo[];
+    awaitReactProfilerCount: number;
+    redirects: Redirect[];
+    timerID: ReturnType<typeof setInterval> | undefined;
+    changeTimeout: (newTime: number) => void;
+    trace: TraceIdContext | null;
+    legacyMetrics?: BM3Event[];
+    vc?: VCRawDataType | null;
+}
+export type LoadProfilerEventInfo = {
+    identifier: string;
+};
+export interface RelayMetricsRecorder {
+    retainQuery(info: RequestInfo): void;
+}
+export interface LazyLoadProfilerContext {
+    addPreload(moduleId: string, timestamp: number): void;
+    addLoad(identifier: string, start: number, end: number): void;
+}
+export interface EnhancedUFOInteractionContextType extends UFOInteractionContextType, RelayMetricsRecorder, LazyLoadProfilerContext {
+    _internalHold(labelStack: LabelStack, name: string): void | (() => void);
+    _internalHoldByID(labelStack: LabelStack, id: string, name: string, remove: boolean): void | (() => void);
+    addHoldByID(labelStack: LabelStack, id: string, name?: string): void;
+    removeHoldByID(labelStack: LabelStack, id: string, name?: string): void;
+    onRender: (phase: 'mount' | 'update' | 'nested-update', actualDuration: number, baseDuration: number, startTime: number, commitTime: number) => void;
+    complete(endTime?: number): void;
+}
+export type BM3Event = {
+    key: string;
+    custom: any;
+    config: {
+        timings?: {
+            key: string;
+            startMark?: string;
+            endMark?: string;
+            component?: string;
+        }[];
+        type: string;
+        reactUFOName?: string;
+    };
+    start: number | null;
+    stop: number | null;
+    marks?: {
+        [key: string]: number;
+    };
+    submetrics?: BM3Event[];
+    pageVisibleState?: string;
+    type: string;
+};
+export type LastInteractionFinishInfo = Pick<InteractionMetrics, 'ufoName' | 'start' | 'end' | 'id' | 'abortReason' | 'abortedByInteractionName' | 'routeName' | 'type'>;
+export type PostInteractionLogOutput = {
+    lastInteractionFinish: LastInteractionFinishInfo;
+    reactProfilerTimings?: ReactProfilerTiming[];
+    postInteractionFinishVCResult?: VCResult;
+    lastInteractionFinishVCResult?: VCResult;
+};
+export {};

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

@@ -0,0 +1 @@
+export declare const REACT_UFO_VERSION = "1.0.1";

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

@@ -0,0 +1,5 @@
+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';
+/**
+ * @deprecated Prefer import from @atlaskit/react-ufo/interaction-context
+ */
+export type { Label, SegmentLabel, LabelStack } from '../interaction-context';

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

@@ -0,0 +1,91 @@
+import type { UnbindFn } from 'bind-event-listener';
+export declare const AbortEvent: {
+    readonly wheel: "wheel";
+    readonly keydown: "keydown";
+    readonly resize: "resize";
+};
+export type VCAbortReason = 'scroll' | 'keypress' | 'resize' | 'error' | 'not-supported';
+export type VCAbortReasonType = {
+    reason: null | VCAbortReason;
+    info: string;
+    timestamp: number;
+    blocking: boolean;
+};
+export type VCRatioType = {
+    [elementName: string]: number;
+};
+export type VCRawDataType = {
+    abortReasonInfo: string | null;
+    abortReason: VCAbortReasonType;
+    heatmap: number[][];
+    oldHeatmap: number[][];
+    outOfBoundaryInfo: string;
+    totalTime: number;
+    componentsLog: ComponentsLogType;
+    viewport: {
+        w: number;
+        h: number;
+    };
+    oldDomUpdatesEnabled: boolean;
+    devToolsEnabled: boolean;
+    ratios: VCRatioType;
+};
+export type VCEntryType = {
+    time: number;
+    vc: number;
+    elements: string[];
+};
+export type VCIgnoreReason = 'image' | 'ssr-hydration' | '';
+export type ComponentsLogEntry = {
+    targetName: string;
+    __debug__element: Element | null;
+    intersectionRect: DOMRectReadOnly;
+    ignoreReason?: VCIgnoreReason;
+};
+export type VCIgnoredElement = Pick<ComponentsLogEntry, 'targetName' | 'ignoreReason'>;
+export type VCResult = {
+    [key: string]: boolean | number | string | null | VCEntryType[] | VCIgnoredElement[] | {
+        w: number;
+        h: number;
+    } | {
+        [key: string]: boolean | number | string[] | null | VCEntryType[];
+    };
+};
+export type MetricsDevToolsTypes = {
+    '75': number | null;
+    '80': number | null;
+    '85': number | null;
+    '90': number | null;
+    '95': number | null;
+    '98': number | null;
+    '99': number | null;
+    tti: number;
+    ttai: number;
+};
+export type ExperimentalVCDevToolsOptions = {
+    enableLog?: boolean;
+};
+export type ComponentsLogType = {
+    [timestamp: number]: ComponentsLogEntry[];
+};
+declare global {
+    interface Window {
+        __vc?: {
+            entries: VCEntryType[];
+            log: ComponentsLogType;
+            metrics: MetricsDevToolsTypes;
+            heatmap: number[][];
+            ratios: VCRatioType;
+        };
+        __vcNotAvailableReason?: string;
+        __SSR_PLACEHOLDERS_DIMENSIONS__?: {
+            [key: string]: DOMRectReadOnly;
+        };
+        __SSR_ABORT_LISTENERS__?: {
+            unbinds: UnbindFn[];
+            aborts: {
+                [key in keyof typeof AbortEvent]?: number;
+            };
+        };
+    }
+}

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

@@ -0,0 +1,91 @@
+import type { InteractionMetrics } from '../common';
+export interface AdditionalData {
+    [key: string]: null | undefined | string | number | boolean | undefined | AdditionalData | Record<string, AdditionalData> | Array<AdditionalData>;
+}
+export interface SSRTiming {
+    label: string;
+    data: {
+        startTime: number;
+        duration: number;
+    };
+}
+type Capability = 'feature_flag_access' | 'react_profiler';
+type InteractionKind = 'page_load' | 'transition' | 'press' | 'typing' | 'legacy' | 'hover';
+type UFONameOverride = {
+    readonly [ufoName: string]: {
+        readonly [metricKey: string]: string;
+    };
+};
+type ResourceType = 'script' | 'link' | 'fetch' | 'xmlhttprequest';
+type SelectorConfig = {
+    id: boolean;
+    testId: boolean;
+    role: boolean;
+    className: boolean;
+    dataVC?: boolean;
+};
+export type Config = {
+    readonly enabled?: boolean;
+    readonly doNotAbortActivePressInteraction?: string[];
+    readonly doNotAbortActivePressInteractionOnTransition?: string[];
+    readonly awaitBM3TTI?: string[];
+    readonly ufoNameOverrides?: UFONameOverride;
+    readonly namePrefix?: string;
+    readonly segmentPrefix?: string;
+    readonly rates?: {
+        readonly [key: string]: number;
+    };
+    readonly rules?: readonly {
+        readonly test?: string;
+        readonly rate?: number;
+    }[];
+    readonly killswitch?: readonly string[];
+    readonly killswitchNestedSegments?: boolean;
+    readonly typingMethod?: string;
+    readonly capability?: Record<Capability, number>;
+    readonly kind?: Record<InteractionKind, number>;
+    readonly allowedResources?: Array<ResourceType>;
+    readonly allowedResourcesParams?: Array<string>;
+    readonly autoGeneratedRate?: number;
+    readonly removePageSegmentsUFOPrefixes?: boolean;
+    readonly removeInteractionsUFOPrefixes?: boolean;
+    readonly product: string;
+    readonly region: string;
+    readonly additionalPayloadData?: (interaction: InteractionMetrics) => AdditionalData;
+    readonly ssr?: {
+        readonly getSSRTimings?: () => SSRTiming[];
+        readonly getSSRDoneTime?: () => number | undefined;
+    };
+    readonly enableBetterPageVisibilityApi?: boolean;
+    readonly vc?: {
+        readonly enabled?: boolean;
+        readonly heatmapSize?: number;
+        readonly oldDomUpdates?: boolean;
+        readonly devToolsEnabled?: boolean;
+        readonly selectorConfig?: SelectorConfig;
+        readonly ssr?: boolean;
+        readonly stopVCAtInteractionFinish?: boolean;
+    };
+    readonly captureLateReRenders?: boolean;
+    readonly enableSegmentHighlighting?: boolean;
+    readonly shouldCalculateLighthouseMetricsFromTTAI?: boolean;
+    readonly timeWindowForLateMutationsInMilliseconds?: number;
+    /**
+     * @deprecated setting this will do nothing now
+     */
+    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 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 {};

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

@@ -0,0 +1,4 @@
+export type OptimizedLabelStack = {
+    n: string;
+    s?: string;
+}[];

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

@@ -0,0 +1,3 @@
+import { type SegmentLabel } from '../../../interaction-context';
+export declare const sanitizeUfoName: (name: string) => string;
+export declare function isSegmentLabel(obj: any): obj is SegmentLabel;