@lytjs/devtools 4.0.5 → 4.1.0

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.1.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"
     }
   },