@lytjs/devtools 4.0.5 → 4.1.0

package/dist/types/index.d.ts

@@ -0,0 +1,185 @@
+/**
+ * Lyt.js DevTools — 主入口
+ *
+ * DevTools 类是开发者工具的主入口，负责：
+ * - 连接到 Lyt.js 应用实例
+ * - 初始化所有子模块（组件树、状态检查器、事件追踪、时间旅行）
+ * - 创建 DevTools 面板 DOM（浮动面板，可拖拽）
+ * - 提供 show() / hide() 切换面板显示
+ *
+ * 使用方式：
+ * ```ts
+ * import { createDevTools } from '@lytjs/devtools'
+ * import { createApp } from '@lytjs/core'
+ *
+ * const app = createApp({ ... })
+ * app.use(createDevTools())
+ * app.mount('#app')
+ * ```
+ *
+ * 纯原生零依赖实现。
+ */
+import { DevToolsPanel } from './panel';
+import { ComponentTreeInspector } from './component-tree';
+import { StateInspector } from './state-inspector';
+import { EventTracker } from './event-tracker';
+import { TimeTravelDebugger } from './time-travel';
+import { type LytApp } from './hooks';
+/** DevTools 配置 */
+export interface DevToolsConfig {
+    /** 面板初始宽度 */
+    width?: number;
+    /** 面板初始高度 */
+    height?: number;
+    /** 面板初始 X 位置 */
+    x?: number;
+    /** 面板初始 Y 位置 */
+    y?: number;
+    /** 是否在启动时自动显示面板 */
+    autoShow?: boolean;
+    /** 面板标题 */
+    title?: string;
+}
+/** Lyt 应用 API 接口（插件系统使用） */
+interface AppAPI {
+    use: (plugin: any, ...options: any[]) => AppAPI;
+    provide: <T = any>(key: string | symbol, value: T) => void;
+    inject: <T = any>(key: string | symbol, defaultValue?: T) => T | undefined;
+    config: Record<string, any>;
+    globalProperties: Record<string, any>;
+}
+/**
+ * Lyt.js 开发者工具
+ *
+ * 提供浏览器端的调试能力，包括组件树检查、状态检查、事件追踪和时间旅行调试。
+ */
+export declare class DevTools {
+    /** 调试面板 */
+    private panel;
+    /** 组件树检查器 */
+    private componentTree;
+    /** 状态检查器 */
+    private stateInspector;
+    /** 事件追踪器 */
+    private eventTracker;
+    /** 时间旅行调试器 */
+    private timeTravel;
+    /** 是否已安装 */
+    private _installed;
+    /** 应用实例引用 */
+    private app;
+    /** 配置 */
+    private config;
+    constructor(config?: DevToolsConfig);
+    /**
+     * 安装到 Lyt.js 应用
+     *
+     * @param app - Lyt.js 应用实例
+     */
+    install(app: LytApp): void;
+    /**
+     * 显示面板
+     */
+    show(): void;
+    /**
+     * 隐藏面板
+     */
+    hide(): void;
+    /**
+     * 切换面板显示状态
+     */
+    toggle(): void;
+    /**
+     * 面板是否可见
+     */
+    isVisible(): boolean;
+    /**
+     * 渲染路由标签页内容
+     * 当前为占位实现，后续可集成 @lytjs/router
+     */
+    private renderRouterTab;
+    /**
+     * 刷新组件树
+     */
+    refreshTree(): void;
+    /**
+     * 清除所有记录（事件和状态变化）
+     */
+    clearAllRecords(): void;
+    /**
+     * 获取面板实例（高级用法）
+     */
+    getPanel(): DevToolsPanel;
+    /**
+     * 获取组件树检查器实例
+     */
+    getComponentTree(): ComponentTreeInspector;
+    /**
+     * 获取状态检查器实例
+     */
+    getStateInspector(): StateInspector;
+    /**
+     * 获取事件追踪器实例
+     */
+    getEventTracker(): EventTracker;
+    /**
+     * 获取时间旅行调试器实例
+     */
+    getTimeTravel(): TimeTravelDebugger;
+    /**
+     * 销毁 DevTools
+     * 清理所有子模块和 DOM 元素
+     */
+    destroy(): void;
+}
+/**
+ * 创建 DevTools 插件
+ *
+ * 返回一个符合 Lyt.js 插件接口的对象，可通过 app.use() 安装。
+ *
+ * @param config - DevTools 配置（可选）
+ * @returns DevTools 插件对象
+ *
+ * @example
+ * ```ts
+ * import { createDevTools } from '@lytjs/devtools'
+ * import { createApp } from '@lytjs/core'
+ *
+ * const app = createApp({ ... })
+ * app.use(createDevTools({ width: 480, height: 640 }))
+ * app.mount('#app')
+ * ```
+ */
+export declare function createDevTools(config?: DevToolsConfig): {
+    install: (app: AppAPI) => void;
+};
+export { DevToolsPanel } from './panel';
+export { ComponentTreeInspector } from './component-tree';
+export { StateInspector } from './state-inspector';
+export { EventTracker } from './event-tracker';
+export { TimeTravelDebugger } from './time-travel';
+export { RoutePanel } from './route-panel';
+export { PerfPanel } from './perf-panel';
+export { PerformanceCollector } from './perf-collector';
+export { ComponentProfiler } from './component-profiler';
+export { EventPanel } from './event-panel';
+export { RouterPanel } from './router-panel-enhanced';
+export { VirtualComponentTree } from './virtual-tree';
+export { MemoryTracker } from './memory-tracker';
+export { RenderTracker } from './render-tracker';
+export { BatchAnalyzer } from './batch-analyzer';
+export { connectToApp, disconnect, getAllComponents, getRootComponent, getComponentById, getChildComponents, getEventRecords, getStateChangeRecords, getComponentStateChanges, getComponentEvents, selectComponent, getSelectedComponent, getSelectedComponentId, setComponentState, refreshComponentTree, clearRecords, isAppConnected, getComponentCount, } from './hooks';
+export type { TabType } from './panel';
+export type { ComponentInfo, EventRecord, StateChangeRecord, DevToolsCallbacks, LytApp, } from './hooks';
+export type { StateSnapshot, } from './time-travel';
+export type { RouteHistoryEntry, RoutePanelConfig, } from './route-panel';
+export type { PerfEntry, EnhancedPerfPanelConfig, } from './perf-panel';
+export type { Metric, FCPMetric, INPMetric, RenderMetric, UpdateFrequencyMetric, MemoryMetric, CustomMarkMetric, FPSMetric, PerformanceReport, } from './perf-collector';
+export type { RenderRecord, ProfileResult, } from './component-profiler';
+export type { CapturedEvent, EventPanelConfig, } from './event-panel';
+export type { RouteLocation, RouteNavigation, RouterPanelConfig, } from './router-panel-enhanced';
+export type { ComponentTreeNode, VirtualTreeOptions, } from './virtual-tree';
+export type { MemorySnapshot, MemoryTrendPoint, MemoryLeakResult, MemoryReport, MemoryTrackerConfig, } from './memory-tracker';
+export type { RenderRecord as RenderTrackerRecord, SlowRenderEntry, RenderComponentStats, RenderStats as RenderTrackerStats, RenderTimelineEntry, RenderTrackerConfig, } from './render-tracker';
+export type { BatchRecord, BatchNameStats, BatchStats, AnomalousBatch, BatchAnalyzerConfig, } from './batch-analyzer';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}

package/dist/types/memory-tracker.d.ts

@@ -0,0 +1,148 @@
+/**
+ * Lyt.js DevTools - 内存使用追踪器
+ *
+ * 追踪内存使用情况，提供内存趋势分析、泄漏检测和内存报告生成。
+ * 使用环形缓冲区限制内存占用。
+ *
+ * 纯原生零依赖实现。
+ */
+/** 内存快照 */
+export interface MemorySnapshot {
+    /** 快照时间戳 */
+    timestamp: number;
+    /** 已使用堆大小 (bytes) */
+    usedJSHeapSize: number;
+    /** 总堆大小 (bytes) */
+    totalJSHeapSize: number;
+    /** 堆大小上限 (bytes) */
+    jsHeapSizeLimit: number;
+    /** 快照序号 */
+    index: number;
+}
+/** 内存趋势数据点 */
+export interface MemoryTrendPoint {
+    /** 时间戳 */
+    timestamp: number;
+    /** 已使用堆大小 (bytes) */
+    usedJSHeapSize: number;
+    /** 与前一个快照的变化量 (bytes) */
+    delta: number;
+    /** 使用率百分比 (0-100) */
+    usagePercent: number;
+}
+/** 内存泄漏检测结果 */
+export interface MemoryLeakResult {
+    /** 是否存在可能的内存泄漏 */
+    hasLeak: boolean;
+    /** 泄漏严重程度: 'none' | 'low' | 'medium' | 'high' */
+    severity: 'none' | 'low' | 'medium' | 'high';
+    /** 泄漏描述 */
+    description: string;
+    /** 分析的快照数量 */
+    snapshotCount: number;
+    /** 增长速率 (bytes/s) */
+    growthRate: number;
+    /** 线性回归 R^2 值（越接近 1 越可能是线性增长） */
+    rSquared: number;
+}
+/** 内存报告 */
+export interface MemoryReport {
+    /** 报告生成时间 */
+    generatedAt: number;
+    /** 当前快照 */
+    current: MemorySnapshot | null;
+    /** 峰值使用量 (bytes) */
+    peakUsage: number;
+    /** 峰值使用量时间戳 */
+    peakTimestamp: number;
+    /** 平均使用量 (bytes) */
+    averageUsage: number;
+    /** 最低使用量 (bytes) */
+    minUsage: number;
+    /** 总增长量 (bytes)，第一个快照到最后一个快照 */
+    totalGrowth: number;
+    /** 趋势数据 */
+    trend: MemoryTrendPoint[];
+    /** 泄漏检测结果 */
+    leakDetection: MemoryLeakResult;
+    /** 快照总数 */
+    snapshotCount: number;
+}
+/** 内存追踪器配置 */
+export interface MemoryTrackerConfig {
+    /** 环形缓冲区容量，默认 100 */
+    bufferSize?: number;
+    /** 泄漏检测的增长速率阈值 (bytes/s)，默认 1024 */
+    leakGrowthThreshold?: number;
+    /** 泄漏检测的 R^2 阈值，默认 0.7 */
+    leakRSquaredThreshold?: number;
+    /** 泄漏检测所需最少快照数，默认 5 */
+    leakMinSnapshots?: number;
+}
+/**
+ * 内存使用追踪器
+ *
+ * 追踪内存使用情况，提供趋势分析、泄漏检测和报告生成。
+ */
+export declare class MemoryTracker {
+    /** 内存快照缓冲区 */
+    private snapshots;
+    /** 快照计数器（单调递增） */
+    private counter;
+    /** 配置 */
+    private readonly config;
+    constructor(config?: MemoryTrackerConfig);
+    /**
+     * 记录内存快照
+     *
+     * 如果浏览器支持 performance.memory，则自动采集；
+     * 否则使用传入的值或返回 null。
+     *
+     * @param usedJSHeapSize - 已使用堆大小 (bytes)，可选
+     * @param totalJSHeapSize - 总堆大小 (bytes)，可选
+     * @param jsHeapSizeLimit - 堆大小上限 (bytes)，可选
+     * @returns 记录的快照，如果无法获取内存信息则返回 null
+     */
+    trackMemoryUsage(usedJSHeapSize?: number, totalJSHeapSize?: number, jsHeapSizeLimit?: number, timestamp?: number): MemorySnapshot | null;
+    /**
+     * 获取内存趋势数据
+     *
+     * @returns 趋势数据点数组
+     */
+    getMemoryTrend(): MemoryTrendPoint[];
+    /**
+     * 检测可能的内存泄漏
+     *
+     * 使用线性回归分析内存增长趋势，结合增长速率判断是否存在泄漏。
+     *
+     * @returns 泄漏检测结果
+     */
+    detectMemoryLeak(): MemoryLeakResult;
+    /**
+     * 生成内存报告
+     *
+     * @returns 内存报告
+     */
+    getMemoryReport(): MemoryReport;
+    /**
+     * 获取所有快照
+     *
+     * @returns 快照数组
+     */
+    getSnapshots(): MemorySnapshot[];
+    /**
+     * 获取快照数量
+     *
+     * @returns 快照数量
+     */
+    getSnapshotCount(): number;
+    /**
+     * 清除所有快照
+     */
+    clear(): void;
+    /**
+     * 销毁追踪器
+     */
+    destroy(): void;
+}
+//# sourceMappingURL=memory-tracker.d.ts.map

package/dist/types/memory-tracker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"memory-tracker.d.ts","sourceRoot":"","sources":["../../src/memory-tracker.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAMH,WAAW;AACX,MAAM,WAAW,cAAc;IAC7B,YAAY;IACZ,SAAS,EAAE,MAAM,CAAC;IAClB,qBAAqB;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,mBAAmB;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,oBAAoB;IACpB,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,cAAc;AACd,MAAM,WAAW,gBAAgB;IAC/B,UAAU;IACV,SAAS,EAAE,MAAM,CAAC;IAClB,qBAAqB;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,eAAe;AACf,MAAM,WAAW,gBAAgB;IAC/B,kBAAkB;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,iDAAiD;IACjD,QAAQ,EAAE,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC7C,WAAW;IACX,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc;IACd,aAAa,EAAE,MAAM,CAAC;IACtB,qBAAqB;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,iCAAiC;IACjC,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,WAAW;AACX,MAAM,WAAW,YAAY;IAC3B,aAAa;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW;IACX,OAAO,EAAE,cAAc,GAAG,IAAI,CAAC;IAC/B,oBAAoB;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe;IACf,aAAa,EAAE,MAAM,CAAC;IACtB,oBAAoB;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,oBAAoB;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,gCAAgC;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW;IACX,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,aAAa;IACb,aAAa,EAAE,gBAAgB,CAAC;IAChC,WAAW;IACX,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,cAAc;AACd,MAAM,WAAW,mBAAmB;IAClC,qBAAqB;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oCAAoC;IACpC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,0BAA0B;IAC1B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,uBAAuB;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAyED;;;;GAIG;AACH,qBAAa,aAAa;IACxB,cAAc;IACd,OAAO,CAAC,SAAS,CAA6B;IAC9C,kBAAkB;IAClB,OAAO,CAAC,OAAO,CAAa;IAC5B,SAAS;IACT,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAgC;gBAE3C,MAAM,CAAC,EAAE,mBAAmB;IAcxC;;;;;;;;;;OAUG;IACH,gBAAgB,CACd,cAAc,CAAC,EAAE,MAAM,EACvB,eAAe,CAAC,EAAE,MAAM,EACxB,eAAe,CAAC,EAAE,MAAM,EACxB,SAAS,CAAC,EAAE,MAAM,GACjB,cAAc,GAAG,IAAI;IA2BxB;;;;OAIG;IACH,cAAc,IAAI,gBAAgB,EAAE;IAqBpC;;;;;;OAMG;IACH,gBAAgB,IAAI,gBAAgB;IAmFpC;;;;OAIG;IACH,eAAe,IAAI,YAAY;IAmD/B;;;;OAIG;IACH,YAAY,IAAI,cAAc,EAAE;IAIhC;;;;OAIG;IACH,gBAAgB,IAAI,MAAM;IAI1B;;OAEG;IACH,KAAK,IAAI,IAAI;IAKb;;OAEG;IACH,OAAO,IAAI,IAAI;CAGhB"}

package/dist/types/panel.d.ts

@@ -0,0 +1,182 @@
+/**
+ * Lyt.js DevTools — 调试面板 UI
+ *
+ * 创建和管理浮动调试面板，纯 DOM 实现，不依赖任何 UI 框架。
+ *
+ * 核心功能：
+ * - DevToolsPanel 类：创建和管理调试面板
+ * - 浮动面板 UI（纯 DOM 创建）
+ * - 顶部标签栏：组件树 / 状态 / 事件 / 路由
+ * - 内容区域：根据选中标签显示不同内容
+ * - 底部状态栏：显示当前选中组件信息
+ * - 面板可拖拽（mousedown/mousemove/mouseup）
+ * - 面板可折叠/展开
+ * - 暗色主题样式（内联 CSS）
+ * - 面板大小可调整
+ *
+ * 纯原生零依赖实现。
+ */
+/** 标签页类型 */
+export type TabType = 'components' | 'state' | 'events' | 'router';
+/** 面板配置 */
+export interface PanelConfig {
+    /** 面板初始宽度 */
+    width?: number;
+    /** 面板初始高度 */
+    height?: number;
+    /** 面板初始 X 位置 */
+    x?: number;
+    /** 面板初始 Y 位置 */
+    y?: number;
+    /** 面板最小宽度 */
+    minWidth?: number;
+    /** 面板最小高度 */
+    minHeight?: number;
+    /** 面板标题 */
+    title?: string;
+}
+/** 标签页内容渲染器 */
+type TabContentRenderer = (container: HTMLElement) => void;
+/**
+ * DevTools 调试面板
+ *
+ * 创建和管理浮动调试面板，支持拖拽、折叠、大小调整等功能。
+ */
+export declare class DevToolsPanel {
+    /** 面板根 DOM 元素 */
+    private panelEl;
+    /** 标题栏元素 */
+    private headerEl;
+    /** 标签栏元素 */
+    private tabsEl;
+    /** 内容区域元素 */
+    private contentEl;
+    /** 底部状态栏元素 */
+    private statusbarEl;
+    /** 当前激活的标签 */
+    private activeTab;
+    /** 标签页内容渲染器映射 */
+    private tabRenderers;
+    /** 面板是否可见 */
+    private _visible;
+    /** 面板是否折叠 */
+    private _collapsed;
+    /** 面板配置 */
+    private config;
+    /** 拖拽状态 */
+    private dragState;
+    /** 调整大小状态 */
+    private resizeState;
+    /** 样式元素引用 */
+    private styleEl;
+    /** 状态栏左侧文本 */
+    private statusLeftEl;
+    /** 状态栏右侧文本 */
+    private statusRightEl;
+    /** 高亮覆盖层 */
+    private highlightOverlay;
+    /** 调整大小手柄 */
+    private _resizeHandle;
+    constructor(config?: PanelConfig);
+    /**
+     * 创建面板 DOM 结构，并返回所有元素的引用
+     */
+    private createPanelElementWithRefs;
+    /**
+     * 创建面板 DOM 结构（向后兼容）
+     */
+    private createPanelElement;
+    /**
+     * 创建非浏览器环境下的 mock 面板元素
+     */
+    /**
+     * 创建非浏览器环境下的 mock 面板元素
+     */
+    private createMockPanelElement;
+    /**
+     * 切换标签页
+     */
+    switchTab(tabId: TabType): void;
+    /**
+     * 注册标签页内容渲染器
+     */
+    registerTabRenderer(tabId: TabType, renderer: TabContentRenderer): void;
+    /**
+     * 渲染当前标签页内容
+     */
+    renderContent(): void;
+    /**
+     * 获取当前激活的标签页 ID
+     */
+    getActiveTab(): TabType;
+    /**
+     * 获取内容区域 DOM 元素
+     */
+    getContentElement(): HTMLElement;
+    /**
+     * 显示面板
+     */
+    show(): void;
+    /**
+     * 隐藏面板
+     */
+    hide(): void;
+    /**
+     * 切换面板显示状态
+     */
+    toggle(): void;
+    /**
+     * 面板是否可见
+     */
+    isVisible(): boolean;
+    /**
+     * 切换折叠状态
+     */
+    toggleCollapse(): void;
+    /**
+     * 是否折叠
+     */
+    isCollapsed(): boolean;
+    /**
+     * 绑定拖拽事件
+     */
+    private bindDragEvents;
+    /**
+     * 绑定调整大小事件
+     */
+    private bindResizeEvents;
+    /**
+     * 绑定键盘事件
+     */
+    private bindKeyboardEvents;
+    /**
+     * 窗口大小变化时调整面板位置
+     */
+    private onWindowResize;
+    /**
+     * 更新状态栏左侧文本
+     */
+    setStatusLeft(html: string): void;
+    /**
+     * 更新状态栏右侧文本
+     */
+    setStatusRight(text: string): void;
+    /**
+     * 设置连接状态
+     */
+    setConnected(connected: boolean): void;
+    /**
+     * 高亮指定 DOM 元素
+     */
+    highlightElement(el: Element | null): void;
+    /**
+     * 清除高亮
+     */
+    clearHighlight(): void;
+    /**
+     * 销毁面板，清理所有 DOM 和事件
+     */
+    destroy(): void;
+}
+export {};
+//# sourceMappingURL=panel.d.ts.map

package/dist/types/panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../src/panel.ts"],"names":[],"mappings":"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"}