@stacksjs/stx
Version:
A performant UI Framework. Powered by Bun.
142 lines • 3.8 kB
TypeScript
/**
* Enable STX DevTools.
*/
export declare function enableDevTools(options?: {
maxEvents?: number
maxPerformance?: number
}): void;
/**
* Disable STX DevTools.
*/
export declare function disableDevTools(): void;
/**
* Register a component with DevTools.
*/
export declare function registerComponent(name: string, element: HTMLElement, props?: Record<string, unknown>, state?: Record<string, unknown>, file?: string): string;
/**
* Update component state in DevTools.
*/
export declare function updateComponentState(id: string, state: Record<string, unknown>): void;
/**
* Update component props in DevTools.
*/
export declare function updateComponentProps(id: string, props: Record<string, unknown>): void;
/**
* Unregister a component from DevTools.
*/
export declare function unregisterComponent(id: string): void;
/**
* Register a store with DevTools.
*/
export declare function registerStore(id: string, initialState: Record<string, unknown>, getters?: Record<string, unknown>, actions?: string[]): void;
/**
* Record a store mutation.
*/
export declare function recordStoreMutation(storeId: string, name: string, oldValue: unknown, newValue: unknown, type?: 'state' | 'action'): void;
/**
* Update store getters.
*/
export declare function updateStoreGetters(storeId: string, getters: Record<string, unknown>): void;
/**
* Record an event in the timeline.
*/
export declare function recordEvent(event: EventRecord): void;
/**
* Record a performance metric.
*/
export declare function recordPerformance(metric: PerformanceMetric): void;
/**
* Measure execution time of a function.
*/
export declare function measurePerformance<T>(name: string, fn: () => T, componentId?: string): T;
/**
* Measure async execution time.
*/
export declare function measurePerformanceAsync<T>(name: string, fn: () => Promise<T>, componentId?: string): Promise<T>;
/**
* STX DevTools Integration
*
* Provides debugging and inspection tools for STX applications.
*
* @module devtools
*
* @example
* ```html
* <script>
* import { enableDevTools } from 'stx'
*
* // Enable DevTools in development
* if (process.env.NODE_ENV === 'development') {
* enableDevTools()
* }
* </script>
* ```
*/
// =============================================================================
// Types
// =============================================================================
export declare interface ComponentInfo {
id: string
name: string
file?: string
parentId?: string
children: string[]
props: Record<string, unknown>
state: Record<string, unknown>
exposed: string[]
element?: HTMLElement
renderCount: number
lastRenderTime: number
createdAt: number
}
export declare interface StoreInfo {
id: string
state: Record<string, unknown>
getters: Record<string, unknown>
actions: string[]
history: MutationRecord[]
}
export declare interface MutationRecord {
timestamp: number
type: 'state' | 'action'
name: string
oldValue?: unknown
newValue?: unknown
stack?: string
}
export declare interface EventRecord {
timestamp: number
type: string
componentId?: string
payload: unknown
target?: string
}
export declare interface PerformanceMetric {
name: string
duration: number
timestamp: number
componentId?: string
metadata?: Record<string, unknown>
}
export declare interface DevToolsState {
enabled: boolean
components: Map<string, ComponentInfo>
stores: Map<string, StoreInfo>
events: EventRecord[]
performance: PerformanceMetric[]
selectedComponent: string | null
selectedStore: string | null
maxEvents: number
maxPerformance: number
}
export {
devToolsState,
selectComponent,
selectStore,
inspectElement,
highlightComponent,
clearHighlight,
logComponentTree,
logStoreState,
timeTravel,
};