import * as preact from 'preact'; import { ComponentType } from 'preact'; import { Signal } from '@preact/signals'; import { FiberRoot, Fiber } from 'bippy'; import { ReactNode } from 'preact/compat'; declare const enum ChangeReason { Props = 1, FunctionalState = 2, ClassState = 3, Context = 4 } interface AggregatedChange { type: number; unstable: boolean; } interface Render { phase: RenderPhase; componentName: string | null; time: number | null; count: number; forget: boolean; changes: Array; unnecessary: boolean | null; didCommit: boolean; fps: number; } type OnRenderHandler = (fiber: Fiber, renders: Array) => void; type OnCommitStartHandler = () => void; type OnCommitFinishHandler = () => void; type OnErrorHandler = (error: unknown) => void; type IsValidFiberHandler = (fiber: Fiber) => boolean; type OnActiveHandler = () => void; interface InstrumentationConfig { onCommitStart: OnCommitStartHandler; isValidFiber: IsValidFiberHandler; onRender: OnRenderHandler; onCommitFinish: OnCommitFinishHandler; onError: OnErrorHandler; onActive?: OnActiveHandler; onPostCommitFiberRoot: () => void; trackChanges: boolean; forceAlwaysTrackRenders?: boolean; } interface Instrumentation { isPaused: Signal; fiberRoots: WeakSet; } declare const createInstrumentation: (instanceKey: string, config: InstrumentationConfig) => Instrumentation; type ComponentName = string; interface Outline { domNode: Element; /** Aggregated render info */ aggregatedRender: AggregatedRender; alpha: number | null; totalFrames: number | null; groupedAggregatedRender: Map | null; current: DOMRect | null; target: DOMRect | null; estimatedTextWidth: number | null; } declare enum RenderPhase { Mount = 1, Update = 2, Unmount = 4 } interface AggregatedRender { name: ComponentName; frame: number | null; phase: number; time: number | null; aggregatedCount: number; forget: boolean; changes: AggregatedChange; unnecessary: boolean | null; didCommit: boolean; fps: number; computedKey: OutlineKey | null; computedCurrent: DOMRect | null; } interface RenderData { count: number; time: number; renders: Array; displayName: string | null; type: unknown; changes?: Array; } type States = { kind: 'inspecting'; hoveredDomElement: Element | null; } | { kind: 'inspect-off'; } | { kind: 'focused'; focusedDomElement: Element; fiber: Fiber; } | { kind: 'uninitialized'; }; declare enum Device { DESKTOP = 0, TABLET = 1, MOBILE = 2 } interface Session { id: string; device: Device; agent: string; wifi: string; cpu: number; gpu: string | null; mem: number; url: string; route: string | null; commit: string | null; branch: string | null; } interface InternalInteraction { componentName: string; url: string; route: string | null; commit: string | null; branch: string | null; uniqueInteractionId: string; componentPath: Array; performanceEntry: PerformanceInteraction; components: Map; } interface InternalComponentCollection { uniqueInteractionId: string; name: string; renders: number; totalTime?: number; selfTime?: number; fibers: Set; retiresAllowed: number; } interface PerformanceInteractionEntry extends PerformanceEntry { interactionId: string; target: Element; name: string; duration: number; startTime: number; processingStart: number; processingEnd: number; entryType: string; } interface PerformanceInteraction { id: string; latency: number; entries: Array; target: Element; type: 'pointer' | 'keyboard'; startTime: number; processingStart: number; processingEnd: number; duration: number; inputDelay: number; processingDuration: number; presentationDelay: number; timestamp: number; timeSinceTabInactive: number | 'never-hidden'; visibilityState: DocumentVisibilityState; timeOrigin: number; referrer: string; } declare const getSession: ({ commit, branch, }: { commit?: string | null; branch?: string | null; }) => Promise; interface Options { enabled?: boolean; dangerouslyForceRunInProduction?: boolean; log?: boolean; showToolbar?: boolean; animationSpeed?: 'slow' | 'fast' | 'off'; trackUnnecessaryRenders?: boolean; showFPS?: boolean; showNotificationCount?: boolean; _debug?: 'verbose' | false; onCommitStart?: () => void; onRender?: (fiber: Fiber, renders: Array) => void; onCommitFinish?: () => void; onPaintStart?: (outlines: Array) => void; onPaintFinish?: (outlines: Array) => void; } type MonitoringOptions = Pick; interface Monitor { pendingRequests: number; interactions: Array; session: ReturnType; url: string | null; route: string | null; apiKey: string | null; commit: string | null; branch: string | null; } interface StoreType { inspectState: Signal; wasDetailsOpen: Signal; lastReportTime: Signal; isInIframe: Signal; monitor: Signal; fiberRoots: WeakSet; reportData: Map; legacyReportData: Map; changesListeners: Map>; interactionListeningForRenders: ((fiber: Fiber, renders: Array) => void) | null; } type OutlineKey = `${string}-${string}`; interface Internals { instrumentation: ReturnType | null; componentAllowList: WeakMap, Options> | null; options: Signal; scheduledOutlines: Map; activeOutlines: Map; onRender: ((fiber: Fiber, renders: Array) => void) | null; Store: StoreType; version: string; } type FunctionalComponentStateChange = { type: ChangeReason.FunctionalState; value: unknown; prevValue?: unknown; count?: number | undefined; name: string; }; type ClassComponentStateChange = { type: ChangeReason.ClassState; value: unknown; prevValue?: unknown; count?: number | undefined; name: 'state'; }; type StateChange = FunctionalComponentStateChange | ClassComponentStateChange; type PropsChange = { type: ChangeReason.Props; name: string; value: unknown; prevValue?: unknown; count?: number | undefined; }; type ContextChange = { type: ChangeReason.Context; name: string; value: unknown; prevValue?: unknown; count?: number | undefined; contextType: number; }; type Change = StateChange | PropsChange | ContextChange; type ChangesPayload = { propsChanges: Array; stateChanges: Array; contextChanges: Array; }; type ChangesListener = (changes: ChangesPayload) => void; declare const Store: StoreType; declare const ReactScanInternals: Internals; type LocalStorageOptions = Omit; declare const getReport: (type?: ComponentType) => RenderData | Map | null; declare const setOptions: (userOptions: Partial) => Options; declare const getOptions: () => Signal; declare const getIsProduction: () => boolean; declare const start: () => void; declare const scan: (options?: Options) => void; declare const useScan: (options?: Options) => void; declare const onRender: (type: unknown, _onRender: (fiber: Fiber, renders: Array) => void) => void; declare const ignoredProps: WeakSet>; declare const ignoreScan: (node: ReactNode) => void; export { type Change, type ChangesListener, type ChangesPayload, type ClassComponentStateChange, type ContextChange, type FunctionalComponentStateChange, type Internals, type LocalStorageOptions, type MonitoringOptions, type Options, type OutlineKey, type PropsChange, ReactScanInternals, type StateChange, Store, type StoreType, getIsProduction, getOptions, getReport, ignoreScan, ignoredProps, onRender, scan, setOptions, start, useScan };