creatr-devtools/dist/index.d.ts

Mini-Sentry + DOM Inspector toolkit for any React/Next app

import { JSX } from 'react';

interface SentryStackFrame {
    file: string;
    lineNumber: number | null;
    column: number | null;
    methodName: string;
}
interface RuntimeErrorEvent {
    type: 'runtime-error';
    name: string;
    message: string;
    stack: string;
    frames: SentryStackFrame[];
    snippet: CodeFrameString | null;
    buildId: string;
    ts: number;
}
interface NetworkErrorEvent {
    type: 'network-error';
    url: string;
    method: string;
    status?: number;
    reason: string;
    buildId: string;
    ts: number;
}
type MiniSentryEvent = RuntimeErrorEvent | NetworkErrorEvent;
interface ElementMetadata {
    tagName: string;
    classNames: string;
    elementId: string | null;
    textContent: string | null;
    boundingBox: DOMRect;
    attributes: {
        name: string;
        value: string;
    }[];
    uniqueId: string;
}
type InspectorCommand = {
    type: "TOGGLE_INSPECTOR";
    enabled: boolean;
} | {
    type: "TOGGLE_IMAGE_INSPECTOR";
    enabled: boolean;
} | {
    type: "UPDATE_IMAGE_URL";
    url: string;
} | {
    type: "GET_ELEMENT_STYLES";
    targetId: string;
} | {
    type: "GET_ELEMENT_TEXT";
    targetId: string;
} | {
    type: "UPDATE_ELEMENT_STYLES";
    targetId: string;
    styles: Record<string, string>;
} | {
    type: "UPDATE_ELEMENT_TEXT";
    targetId: string;
    text: string;
} | {
    type: "DELETE_ELEMENT";
    targetId: string;
};
type InspectorEvent = {
    type: "ELEMENT_INSPECTED";
    metadata: ElementMetadata | null;
    isShiftPressed: boolean;
} | {
    type: "URL_CHANGE";
    url: string;
} | {
    type: "ELEMENT_STYLES_RETRIEVED";
    targetId: string;
    metadata: any;
} | {
    type: "ELEMENT_TEXT_RETRIEVED";
    targetId: string;
    metadata: any;
};
type IframeMessage = InspectorEvent | MiniSentryEvent;
interface CodeFrameString {
    file: string;
    line: number;
    column: number;
    snippet: string;
}

interface MiniSentryOptions {
    parentOrigin?: string;
    snippetContext?: number;
    rateLimit?: {
        max: number;
        per: number;
    };
    beforeSend?(evt: MiniSentryEvent): MiniSentryEvent | null;
}
declare function initMiniSentry(opts?: MiniSentryOptions): void;

/* packages/creatr-devtools/react-compat.d.ts */

/**
 * Generic helper that mirrors React’s own `PropsWithChildren`,
 * but keeps us independent of whatever shape `ReactNode`
 * happens to have in the host app’s @types/react version.
 */
type PropsWithChildren<P = unknown> = P & { children?: any };

interface DevtoolsProviderProps {
    inspector?: {
        highlightColor?: string;
        highlightWidth?: number;
        containerSelector?: string;
    };
    sentry?: Parameters<typeof initMiniSentry>[0];
    hideBranding?: boolean;
}
declare function DevtoolsProvider({ children, inspector, sentry, hideBranding }: PropsWithChildren<DevtoolsProviderProps>): JSX.Element;

declare function createIframeProxy(target: Window): Record<InspectorCommand["type"], (p?: any) => void>;

export { DevtoolsProvider, type ElementMetadata, type IframeMessage, type InspectorCommand, type InspectorEvent, type MiniSentryEvent, createIframeProxy, initMiniSentry };