@lytjs/devtools 4.0.5 → 4.2.0

package/dist/types/time-travel.d.ts

@@ -0,0 +1,189 @@
+/**
+ * Lyt.js DevTools — 时间旅行调试
+ *
+ * 提供状态快照系统和时间轴控件，支持回到任意历史时间点查看和恢复状态。
+ *
+ * 核心功能：
+ * - TimeTravelDebugger 类
+ * - 状态快照系统（每次状态变化时保存快照）
+ * - 快照包含完整的组件状态树
+ * - 最多保存 100 个快照（内存限制）
+ * - 时间轴控件（滑块拖拽、播放/暂停、步进按钮）
+ * - 回到历史时间点时恢复状态并重新渲染
+ * - 快照列表显示
+ *
+ * 纯原生零依赖实现。
+ */
+import { type StateChangeRecord } from './hooks';
+import type { DevToolsPanel } from './panel';
+/** 状态快照 */
+export interface StateSnapshot {
+    /** 快照唯一 ID */
+    id: number;
+    /** 快照时间戳 */
+    timestamp: number;
+    /** 快照描述 */
+    description: string;
+    /** 所有组件的状态快照 */
+    components: Map<string, ComponentSnapshot>;
+    /** 触发此快照的状态变化记录（可选） */
+    trigger?: StateChangeRecord;
+}
+/** 单个组件的状态快照 */
+interface ComponentSnapshot {
+    /** 组件 ID */
+    id: string;
+    /** 组件名称 */
+    name: string;
+    /** 组件 state 深拷贝 */
+    state: Record<string, any>;
+    /** 组件 props 深拷贝 */
+    props: Record<string, any>;
+    /** 组件 computed 深拷贝 */
+    computed: Record<string, any>;
+    /** 是否已挂载 */
+    isMounted: boolean;
+}
+/** 播放状态 */
+type PlayState = 'stopped' | 'playing' | 'paused';
+/**
+ * 时间旅行调试器
+ *
+ * 通过状态快照系统记录应用状态变化历史，
+ * 提供时间轴控件让开发者回到任意时间点查看状态。
+ */
+export declare class TimeTravelDebugger {
+    /** 面板引用 */
+    private panel;
+    /** 当前内容容器 */
+    private container;
+    /** 快照列表 */
+    private snapshots;
+    /** 快照 ID 计数器 */
+    private snapshotCounter;
+    /** 最大快照数量 */
+    private maxSnapshots;
+    /** 当前查看的快照索引（-1 表示当前实时状态） */
+    private currentIndex;
+    /** 播放状态 */
+    private playState;
+    /** 播放速度（毫秒/步） */
+    private playSpeed;
+    /** 播放定时器 */
+    private playTimer;
+    /** 是否启用自动快照 */
+    private autoSnapshot;
+    /** 更新定时器 */
+    private updateTimer;
+    constructor(panel: DevToolsPanel);
+    /**
+     * 创建状态快照
+     *
+     * @param description - 快照描述
+     * @param trigger - 触发此快照的状态变化记录
+     */
+    takeSnapshot(description?: string, trigger?: StateChangeRecord): StateSnapshot;
+    /**
+     * 获取所有快照
+     */
+    getSnapshots(): StateSnapshot[];
+    /**
+     * 获取指定索引的快照
+     */
+    getSnapshot(index: number): StateSnapshot | null;
+    /**
+     * 获取当前快照索引
+     */
+    getCurrentIndex(): number;
+    /**
+     * 清空所有快照
+     */
+    clearSnapshots(): void;
+    /**
+     * 设置自动快照开关
+     */
+    setAutoSnapshot(enabled: boolean): void;
+    /**
+     * 跳转到指定快照
+     *
+     * @param index - 快照索引
+     */
+    travelTo(index: number): void;
+    /**
+     * 跳转到上一个快照
+     */
+    stepBack(): void;
+    /**
+     * 跳转到下一个快照
+     */
+    stepForward(): void;
+    /**
+     * 跳转到最新状态（实时）
+     */
+    goToLatest(): void;
+    /**
+     * 恢复指定快照的状态到实际组件
+     *
+     * 注意：这是一个破坏性操作，会修改组件的实际状态。
+     */
+    restoreSnapshot(index: number): boolean;
+    /**
+     * 开始自动回放
+     */
+    startPlayback(): void;
+    /**
+     * 暂停回放
+     */
+    pausePlayback(): void;
+    /**
+     * 停止回放
+     */
+    stopPlayback(): void;
+    /**
+     * 设置播放速度
+     */
+    setPlaySpeed(speed: number): void;
+    /**
+     * 获取播放状态
+     */
+    getPlayState(): PlayState;
+    /**
+     * 渲染时间旅行调试器到指定容器
+     */
+    render(container: HTMLElement): void;
+    /**
+     * 渲染时间旅行内容
+     */
+    private renderTimeTravel;
+    /**
+     * 渲染播放控制栏
+     */
+    private renderPlaybackControls;
+    /**
+     * 渲染快照列表
+     */
+    private renderSnapshotList;
+    /**
+     * 创建按钮样式
+     */
+    private createButtonStyle;
+    /**
+     * 创建小按钮样式
+     */
+    private createSmallButtonStyle;
+    /**
+     * 全局更新事件处理
+     * 自动创建快照
+     */
+    private onUpdate;
+    /**
+     * 强制刷新
+     */
+    refresh(): void;
+    /**
+     * 销毁调试器
+     */
+    destroy(): void;
+}
+export {};
+//# sourceMappingURL=time-travel.d.ts.map

package/dist/types/time-travel.d.ts.map

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

package/dist/types/virtual-tree.d.ts

@@ -0,0 +1,168 @@
+/**
+ * Lyt.js DevTools — 虚拟滚动组件树
+ *
+ * 使用虚拟滚动技术渲染组件树，仅渲染可见节点，
+ * 支持展开/折叠、搜索过滤、选中高亮等功能。
+ * 可处理 1000+ 组件节点而不卡顿。
+ *
+ * 纯原生零依赖实现。
+ */
+/** 组件树节点 */
+export interface ComponentTreeNode {
+    /** 组件唯一 ID */
+    id: string;
+    /** 组件名称 */
+    name: string;
+    /** 子节点 */
+    children?: ComponentTreeNode[];
+    /** 状态摘要 */
+    stateSummary?: string;
+    /** props 数量 */
+    propsCount?: number;
+    /** 是否活跃 */
+    active?: boolean;
+}
+/** 虚拟树选项 */
+export interface VirtualTreeOptions {
+    /** 节点高度（像素），默认 28 */
+    nodeHeight?: number;
+    /** 容器可见区域高度（像素），默认 400 */
+    visibleHeight?: number;
+    /** 缩进宽度（像素），默认 20 */
+    indentWidth?: number;
+    /** 是否默认展开所有节点，默认 false */
+    defaultExpandAll?: boolean;
+    /** 节点点击回调 */
+    onNodeClick?: (node: ComponentTreeNode) => void;
+}
+/** 内部扁平化节点 */
+interface FlatNode {
+    /** 原始节点数据 */
+    node: ComponentTreeNode;
+    /** 层级深度 */
+    depth: number;
+    /** 是否展开 */
+    expanded: boolean;
+    /** 是否可见（父节点全部展开） */
+    visible: boolean;
+    /** 在扁平列表中的索引 */
+    flatIndex: number;
+}
+/**
+ * 虚拟滚动组件树
+ *
+ * 仅渲染可见区域的节点，支持大量组件的高效展示。
+ */
+export declare class VirtualComponentTree {
+    /** 容器 DOM 元素 */
+    private container;
+    /** 节点高度 */
+    private nodeHeight;
+    /** 可见区域高度 */
+    private visibleHeight;
+    /** 缩进宽度 */
+    private indentWidth;
+    /** 节点点击回调 */
+    private onNodeClick?;
+    /** 原始组件树数据 */
+    private components;
+    /** 扁平化节点列表 */
+    private flatNodes;
+    /** 展开状态映射 */
+    private expandedMap;
+    /** 过滤查询 */
+    private filterQuery;
+    /** 选中的组件 ID */
+    private selectedId;
+    /** 当前滚动偏移 */
+    private scrollTop;
+    /** 内部滚动容器 */
+    private scrollContainer;
+    /** 内容容器（撑高） */
+    private contentContainer;
+    /** 可视节点容器 */
+    private viewportContainer;
+    /** 滚动事件处理器 */
+    private boundScrollHandler;
+    /** 是否已销毁 */
+    private destroyed;
+    /** 是否默认展开所有节点 */
+    private defaultExpandAll;
+    constructor(container: HTMLElement, options?: VirtualTreeOptions);
+    /**
+     * 设置组件数据
+     *
+     * @param components - 组件树节点数组
+     */
+    setComponents(components: ComponentTreeNode[]): void;
+    /**
+     * 设置选中的组件
+     *
+     * @param id - 组件 ID
+     */
+    setSelectedComponent(id: string): void;
+    /**
+     * 设置过滤查询
+     *
+     * @param query - 搜索字符串
+     */
+    setFilter(query: string): void;
+    /**
+     * 展开所有节点
+     */
+    expandAll(): void;
+    /**
+     * 折叠所有节点
+     */
+    collapseAll(): void;
+    /**
+     * 销毁虚拟树
+     */
+    destroy(): void;
+    /**
+     * 判断是否所有节点都已展开
+     */
+    private isAllExpanded;
+    /**
+     * 内部展开所有
+     */
+    private expandAllInternal;
+    /**
+     * 扁平化组件树
+     */
+    private flatten;
+    /**
+     * 获取可见节点列表
+     */
+    private getVisibleNodes;
+    /**
+     * 渲染容器结构
+     */
+    private renderContainer;
+    /**
+     * 渲染节点
+     */
+    private renderNodes;
+    /**
+     * 创建单个节点 DOM 元素
+     */
+    private createNodeElement;
+    /**
+     * 滚动事件处理
+     */
+    private handleScroll;
+    /**
+     * 获取扁平化节点列表（用于测试）
+     */
+    getFlatNodes(): FlatNode[];
+    /**
+     * 获取可见节点数量（用于测试）
+     */
+    getVisibleNodeCount(): number;
+    /**
+     * 获取总节点数量（包含不可见，用于测试）
+     */
+    getTotalNodeCount(): number;
+}
+export {};
+//# sourceMappingURL=virtual-tree.d.ts.map

package/dist/types/virtual-tree.d.ts.map

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

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "@lytjs/devtools",
-  "version": "4.0.5",
+  "version": "4.2.0",
   "description": "Lyt.js 浏览器开发者工具 - 提供组件树检查、状态查看、性能分析和时间旅行调试",
-  "main": "./dist/index.mjs",
+  "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
+  "types": "./dist/types/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/types/index.d.ts",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.mjs",
+      "require": "./dist/index.cjs",
       "default": "./dist/index.mjs"
     }
   },