hy-virtual-tree 1.1.17 → 1.1.19

package/CHANGELOG.md

@@ -1,11 +1,26 @@
 ## Changelog
 
+### 1.1.19
+
+_2025-09-10_
+
+- 扩展[VirtualTree] 功能
+（1）引入 js-booster 代码到本地，并添加 onRender 回调函数
+（2）CustomRenderFn 函数类型添加 { el: Element, $destroy: Function } 返回类型，其中 $destroy 在节点销毁时调用
+
+### 1.1.18
+
+_2025-09-10_
+
+- 扩展[VirtualTree] 功能
+（1）修复CustomRenderFn 函数类型内置一层dom元素bug
+
 ### 1.1.17
 
 _2025-09-10_
 
 - 扩展[VirtualTree] 功能
-（1）CustomRenderFn 内置一层dom元素，兼容vue2的new Vue()挂载问题
+（1）CustomRenderFn 函数类型内置一层dom元素，兼容vue2的new Vue()挂载问题
 
 ### 1.1.16
 

package/dist/index.js

@@ -1,259 +1,218 @@
-/**
- * js-booster - High-performance frontend library
- * VirtualScroll - Virtual scrolling implementation
- * @version "1.1.4"
- * @author https://cg-zhou.top/
- * @license MIT
- */
-
 class VirtualScroll {
-  /**
-   * Create a virtual scroll instance
-   * @param {Object} options Configuration options
-   * @param {HTMLElement} options.container Scroll container element
-   * @param {Array} options.items Data items to display
-   * @param {number} [options.itemHeight=20] Height of each list item (pixels)
-   * @param {number} [options.bufferSize=10] Number of buffer items outside the visible area
-   * @param {Function} [options.renderItem] Custom item rendering function
-   * @param {Function} [options.renderHeader] Custom header rendering function
-   * @param {number} [options.maxHeight=26840000] Maximum height in pixels for the content wrapper
-   */
-  constructor(options) {
-    this.container = options.container;
-    this.items = options.items || [];
-    this.itemHeight = options.itemHeight || 20;
-    this.bufferSize = options.bufferSize || 10;
-    this.customRenderItem = options.renderItem;
-    this.customRenderHeader = options.renderHeader;
-    this.maxHeight = options.maxHeight || 26840000; // Add maximum height limit to prevent DOM height overflow
-
-    this.visibleStartIndex = 0;
-    this.visibleEndIndex = 0;
-    this.scrollContainer = null;
-    this.contentWrapper = null;
-    this.contentContainer = null;
-    this.totalHeight = this.items.length * this.itemHeight;
-    this.heightScale = 1; // Height scaling factor
-
-    // If total height exceeds maximum height, calculate scaling factor
-    if (this.totalHeight > this.maxHeight) {
-      this.heightScale = this.maxHeight / this.totalHeight;
-    }
-    this.initialize();
-  }
-
-  /**
-   * Initialize virtual scroll component
-   * @private
-   */
-  initialize() {
-    // Clear container
-    this.container.innerHTML = '';
-
-    // Create scroll container
-    this.scrollContainer = document.createElement('div');
-    // Add inline styles
-    Object.assign(this.scrollContainer.style, {
-      flex: '1',
-      overflow: 'auto',
-      position: 'relative',
-      minHeight: '0',
-      height: '100%',
-      boxSizing: 'border-box'
-    });
-
-    // If there's a custom header render function, render the header
-    if (this.customRenderHeader) {
-      const header = this.customRenderHeader();
-      if (header) {
-        this.scrollContainer.appendChild(header);
-      }
-    }
-
-    // Create content wrapper
-    this.contentWrapper = document.createElement('div');
-    // Add inline styles
-    Object.assign(this.contentWrapper.style, {
-      position: 'relative',
-      width: '100%'
-    });
-
-    // Use scaled height to ensure it doesn't exceed browser limits
-    const scaledHeight = this.totalHeight * this.heightScale;
-    this.contentWrapper.style.height = `${scaledHeight}px`;
-
-    // Create content container
-    this.contentContainer = document.createElement('div');
-    // Add inline styles
-    Object.assign(this.contentContainer.style, {
-      position: 'absolute',
-      width: '100%',
-      left: '0'
-    });
-
-    // Add scroll event listener
-    this.scrollContainer.addEventListener('scroll', this.handleScroll.bind(this));
-
-    // Assemble DOM
-    this.contentWrapper.appendChild(this.contentContainer);
-    this.scrollContainer.appendChild(this.contentWrapper);
-    this.container.appendChild(this.scrollContainer);
-
-    // Render initial visible items
-    this.renderVisibleItems(0, Math.min(100, this.items.length));
-  }
-
-  /**
-   * Handle scroll event
-   * @private
-   */
-  handleScroll() {
-    const scrollTop = this.scrollContainer.scrollTop;
-    const containerHeight = this.scrollContainer.clientHeight;
-
-    // Consider scaling factor in calculations
-    const realScrollTop = scrollTop / this.heightScale;
-
-    // Calculate visible range
-    const startIndex = Math.max(0, Math.floor(realScrollTop / this.itemHeight) - this.bufferSize);
-    const endIndex = Math.min(this.items.length, Math.ceil((realScrollTop + containerHeight / this.heightScale) / this.itemHeight) + this.bufferSize);
-
-    // Only update when visible range changes
-    if (startIndex !== this.visibleStartIndex || endIndex !== this.visibleEndIndex || endIndex === 0) {
-      this.renderVisibleItems(startIndex, endIndex);
-      this.visibleStartIndex = startIndex;
-      this.visibleEndIndex = endIndex;
-    }
-  }
-
-  /**
-   * Render visible items
-   * @param {number} startIndex Start index
-   * @param {number} endIndex End index
-   * @private
-   */
-  renderVisibleItems(startIndex, endIndex) {
-    // Clear content container
-    this.contentContainer.innerHTML = '';
-
-    // Set position considering scaling factor
-    this.contentContainer.style.transform = `translateY(${startIndex * this.itemHeight * this.heightScale}px)`;
-
-    // Render visible items
-    for (let i = startIndex; i < endIndex; i++) {
-      const item = this.items[i];
-      if (this.customRenderItem) {
-        // Use custom render function
-        const itemElement = this.customRenderItem(item, i);
-        if (itemElement) {
-          // Only set necessary height styles, other styles are determined by the caller
-          itemElement.style.height = `${this.itemHeight * this.heightScale}px`;
-          itemElement.style.boxSizing = 'border-box';
-          itemElement.style.width = '100%';
-          this.contentContainer.appendChild(itemElement);
+    /**
+     * Create a virtual scroll instance
+     * @param {Object} options Configuration options
+     * @param {HTMLElement} options.container Scroll container element
+     * @param {Array} options.items Data items to display
+     * @param {number} [options.itemHeight=20] Height of each list item (pixels)
+     * @param {number} [options.bufferSize=10] Number of buffer items outside the visible area
+     * @param {Function} [options.renderItem] Custom item rendering function
+     * @param {Function} [options.renderHeader] Custom header rendering function
+     * @param {number} [options.maxHeight=26840000] Maximum height in pixels for the content wrapper
+     * @param {Function} [options.onRender] 节点刷新回调
+     */
+    constructor(options) {
+        this.container = options.container;
+        this.items = options.items || [];
+        this.itemHeight = options.itemHeight || 20;
+        this.bufferSize = options.bufferSize || 10;
+        this.customRenderItem = options.renderItem;
+        this.customRenderHeader = options.renderHeader;
+        this.maxHeight = options.maxHeight || 26840000; // Add maximum height limit to prevent DOM height overflow
+        this.visibleStartIndex = 0;
+        this.visibleEndIndex = 0;
+        this.scrollContainer = null;
+        this.contentWrapper = null;
+        this.contentContainer = null;
+        this.totalHeight = this.items.length * this.itemHeight;
+        this.heightScale = 1; // Height scaling factor
+        this._onRender = options.onRender;
+        // If total height exceeds maximum height, calculate scaling factor
+        if (this.totalHeight > this.maxHeight) {
+            this.heightScale = this.maxHeight / this.totalHeight;
+        }
+        this.initialize();
+    }
+    /**
+     * Initialize virtual scroll component
+     * @private
+     */
+    initialize() {
+        // Clear container
+        this.container.innerHTML = '';
+        // Create scroll container
+        this.scrollContainer = document.createElement('div');
+        // Add inline styles
+        Object.assign(this.scrollContainer.style, {
+            flex: '1',
+            overflow: 'auto',
+            position: 'relative',
+            minHeight: '0',
+            height: '100%',
+            boxSizing: 'border-box'
+        });
+        // If there's a custom header render function, render the header
+        if (this.customRenderHeader) {
+            const header = this.customRenderHeader();
+            if (header) {
+                this.scrollContainer.appendChild(header);
+            }
         }
-      } else {
-        // Use default rendering - very simple default implementation
-        const row = document.createElement('div');
-        Object.assign(row.style, {
-          height: `${this.itemHeight * this.heightScale}px`,
-          width: '100%',
-          boxSizing: 'border-box',
-          padding: '8px',
-          borderBottom: '1px solid #eee'
+        // Create content wrapper
+        this.contentWrapper = document.createElement('div');
+        // Add inline styles
+        Object.assign(this.contentWrapper.style, {
+            position: 'relative',
+            width: '100%'
+        });
+        // Use scaled height to ensure it doesn't exceed browser limits
+        const scaledHeight = this.totalHeight * this.heightScale;
+        this.contentWrapper.style.height = `${scaledHeight}px`;
+        // Create content container
+        this.contentContainer = document.createElement('div');
+        // Add inline styles
+        Object.assign(this.contentContainer.style, {
+            position: 'absolute',
+            width: '100%',
+            left: '0'
         });
-        row.textContent = JSON.stringify(item);
-        this.contentContainer.appendChild(row);
-      }
+        // Add scroll event listener
+        this.scrollContainer.addEventListener('scroll', this.handleScroll.bind(this));
+        // Assemble DOM
+        this.contentWrapper.appendChild(this.contentContainer);
+        this.scrollContainer.appendChild(this.contentWrapper);
+        this.container.appendChild(this.scrollContainer);
+        // Render initial visible items
+        this.renderVisibleItems(0, Math.min(100, this.items.length));
+    }
+    /**
+     * Handle scroll event
+     * @private
+     */
+    handleScroll() {
+        const scrollTop = this.scrollContainer.scrollTop;
+        const containerHeight = this.scrollContainer.clientHeight;
+        // Consider scaling factor in calculations
+        const realScrollTop = scrollTop / this.heightScale;
+        // Calculate visible range
+        const startIndex = Math.max(0, Math.floor(realScrollTop / this.itemHeight) - this.bufferSize);
+        const endIndex = Math.min(this.items.length, Math.ceil((realScrollTop + containerHeight / this.heightScale) / this.itemHeight) + this.bufferSize);
+        // Only update when visible range changes
+        if (startIndex !== this.visibleStartIndex ||
+            endIndex !== this.visibleEndIndex ||
+            endIndex === 0) {
+            this.renderVisibleItems(startIndex, endIndex);
+            this.visibleStartIndex = startIndex;
+            this.visibleEndIndex = endIndex;
+        }
     }
-  }
-
-  /**
-   * Update data items and re-render
-   * @param {Array} items New data items array
-   * @public
-   */
-  updateItems(items) {
-    this.items = items || [];
-    this.totalHeight = this.items.length * this.itemHeight;
-
-    // Recalculate scaling factor
-    this.heightScale = 1;
-    if (this.totalHeight > this.maxHeight) {
-      this.heightScale = this.maxHeight / this.totalHeight;
+    /**
+     * Render visible items
+     * @param {number} startIndex Start index
+     * @param {number} endIndex End index
+     * @private
+     */
+    renderVisibleItems(startIndex, endIndex) {
+        this._onRender && this._onRender();
+        // Clear content container
+        this.contentContainer.innerHTML = '';
+        // Set position considering scaling factor
+        this.contentContainer.style.transform = `translateY(${startIndex * this.itemHeight * this.heightScale}px)`;
+        // Render visible items
+        for (let i = startIndex; i < endIndex; i++) {
+            const item = this.items[i];
+            if (this.customRenderItem) {
+                // Use custom render function
+                const itemElement = this.customRenderItem(item, i);
+                if (itemElement) {
+                    // Only set necessary height styles, other styles are determined by the caller
+                    itemElement.style.height = `${this.itemHeight * this.heightScale}px`;
+                    itemElement.style.boxSizing = 'border-box';
+                    itemElement.style.width = '100%';
+                    this.contentContainer.appendChild(itemElement);
+                }
+            }
+            else {
+                // Use default rendering - very simple default implementation
+                const row = document.createElement('div');
+                Object.assign(row.style, {
+                    height: `${this.itemHeight * this.heightScale}px`,
+                    width: '100%',
+                    boxSizing: 'border-box',
+                    padding: '8px',
+                    borderBottom: '1px solid #eee'
+                });
+                row.textContent = JSON.stringify(item);
+                this.contentContainer.appendChild(row);
+            }
+        }
     }
-
-    // Ensure height is set correctly
-    if (this.contentWrapper) {
-      this.contentWrapper.style.height = `${this.totalHeight * this.heightScale}px`;
+    /**
+     * Update data items and re-render
+     * @param {Array} items New data items array
+     * @public
+     */
+    updateItems(items) {
+        this.items = items || [];
+        this.totalHeight = this.items.length * this.itemHeight;
+        // Recalculate scaling factor
+        this.heightScale = 1;
+        if (this.totalHeight > this.maxHeight) {
+            this.heightScale = this.maxHeight / this.totalHeight;
+        }
+        // Ensure height is set correctly
+        if (this.contentWrapper) {
+            this.contentWrapper.style.height = `${this.totalHeight * this.heightScale}px`;
+        }
+        this.visibleStartIndex = 0;
+        this.visibleEndIndex = 0;
+        // Force recalculation of visible items
+        this.handleScroll();
+    }
+    /**
+     * Scroll to specified index
+     * @param {number} index Index of the item to scroll to
+     * @public
+     */
+    scrollToIndex(index) {
+        if (index >= 0 && index < this.items.length) {
+            // Apply scaling factor when scrolling
+            this.scrollContainer.scrollTop =
+                index * this.itemHeight * this.heightScale;
+        }
+    }
+    /**
+     * Destroy component, remove event listeners, etc.
+     * @public
+     */
+    destroy() {
+        if (this.scrollContainer) {
+            this.scrollContainer.removeEventListener('scroll', this.handleScroll);
+        }
+        if (this.container) {
+            this.container.innerHTML = '';
+        }
+        this.items = null;
+        this.container = null;
+        this.scrollContainer = null;
+        this.contentWrapper = null;
+        this.contentContainer = null;
+    }
+    /**
+     * Refresh virtual scroll, re-render current visible items
+     * @public
+     */
+    refresh() {
+        this.handleScroll();
+    }
+    /**
+     * Get scroll container element
+     * @returns {HTMLElement} Scroll container element
+     * @public
+     */
+    getScrollContainer() {
+        return this.scrollContainer;
     }
-    this.visibleStartIndex = 0;
-    this.visibleEndIndex = 0;
-
-    // Force recalculation of visible items
-    this.handleScroll();
-  }
-
-  /**
-   * Scroll to specified index
-   * @param {number} index Index of the item to scroll to
-   * @public
-   */
-  scrollToIndex(index) {
-    if (index >= 0 && index < this.items.length) {
-      // Apply scaling factor when scrolling
-      this.scrollContainer.scrollTop = index * this.itemHeight * this.heightScale;
-    }
-  }
-
-  /**
-   * Destroy component, remove event listeners, etc.
-   * @public
-   */
-  destroy() {
-    if (this.scrollContainer) {
-      this.scrollContainer.removeEventListener('scroll', this.handleScroll);
-    }
-    if (this.container) {
-      this.container.innerHTML = '';
-    }
-    this.items = null;
-    this.container = null;
-    this.scrollContainer = null;
-    this.contentWrapper = null;
-    this.contentContainer = null;
-  }
-
-  /**
-   * Refresh virtual scroll, re-render current visible items
-   * @public
-   */
-  refresh() {
-    this.handleScroll();
-  }
-
-  /**
-   * Get scroll container element
-   * @returns {HTMLElement} Scroll container element
-   * @public
-   */
-  getScrollContainer() {
-    return this.scrollContainer;
-  }
-}
-
-/**
- * js-booster - High-performance frontend library
- * @version "1.1.4"
- * @author https://cg-zhou.top/
- * @license MIT
- */
-
-// If in browser environment, add to global object
-if (typeof window !== 'undefined') {
-  window.JsBooster = {
-    VirtualScroll
-  };
 }
 
 const isString = (e) => typeof e === 'string';
@@ -1399,44 +1358,6 @@ function getContainer(config) {
     }
     return el;
 }
-/** 获取自定义元素函数的值 */
-function customRender(fn, node, options) {
-    const { parent, className, defaultFn } = options || {};
-    let value;
-    if (!fn || !isFunction(fn)) {
-        value = defaultFn && isFunction(defaultFn) && defaultFn(node.data, node);
-    }
-    else {
-        const dom = fn(node.data, node);
-        if (isBoolean(dom) && dom) {
-            value = defaultFn && isFunction(defaultFn) && defaultFn(node.data, node);
-        }
-        else if (isElement(dom)) {
-            value = document.createElement('div');
-            className && value.classList.add(className);
-            value.appendChild(dom);
-        }
-        else {
-            value = dom;
-        }
-    }
-    if (isEmpty(value))
-        return;
-    if (isElement(value)) {
-        className && value.classList.add(className);
-        if (parent) {
-            parent.appendChild(value);
-        }
-        return value;
-    }
-    const el = document.createElement('div');
-    el.innerHTML = value;
-    className && el.classList.add(className);
-    if (parent) {
-        parent.appendChild(el);
-    }
-    return el;
-}
 class VirtualTree {
     _virtualScroll;
     _el = null;
@@ -1462,6 +1383,7 @@ class VirtualTree {
     _hiddenExpandIconKeySet = new Set(); // 隐藏展开图标
     _hiddenNodeKeySet = new Set(); // 隐藏的key
     _flattenTree = []; // 平铺树列表
+    _destroyDomSet = new Set();
     _handleMethod;
     _filterMethod;
     _isForceHiddenExpandIcon;
@@ -1750,6 +1672,54 @@ class VirtualTree {
             this._onNodeExpand && this._onNodeExpand(node.data, node);
         }
     }
+    /** 获取自定义元素函数的值 */
+    _customRender(fn, node, options) {
+        const { parent, className, defaultFn, inset = false } = options || {};
+        let value, el, $destroy;
+        if (!fn || !isFunction(fn)) {
+            value = defaultFn && isFunction(defaultFn) && defaultFn(node.data, node);
+        }
+        else {
+            const dom = fn(node.data, node);
+            if (isBoolean(dom) && dom) {
+                value = defaultFn && isFunction(defaultFn) && defaultFn(node.data, node);
+            }
+            else if (isElement(dom) && inset) {
+                value = document.createElement('div');
+                className && value.classList.add(className);
+                value.appendChild(dom);
+            }
+            else {
+                value = dom;
+            }
+        }
+        if (isObject(value) && value.el) {
+            $destroy = value.$destroy;
+            value = value.el;
+        }
+        if (isEmpty(value))
+            return;
+        this._destroyDomSet.add(() => {
+            $destroy && $destroy();
+            $destroy = null;
+            value = null;
+            el = null;
+        });
+        if (isElement(value)) {
+            className && value.classList.add(className);
+            if (parent) {
+                parent.appendChild(value);
+            }
+            return value;
+        }
+        el = document.createElement('div');
+        el.innerHTML = value;
+        className && el.classList.add(className);
+        if (parent) {
+            parent.appendChild(el);
+        }
+        return el;
+    }
     /** 渲染 */
     async _render(config) {
         if (this._virtualScroll)
@@ -1837,15 +1807,14 @@ class VirtualTree {
                 let statusSlot, rightSlot;
                 // 是否显示状态
                 if (this._props.showStatus) {
-                    statusSlot = customRender(config.renderStatus, item, {
+                    statusSlot = this._customRender(config.renderStatus, item, {
+                        inset: true,
                         className: 'hy-tree-node__status',
                         defaultFn: (data, node) => useStatus(config, data)
                     });
                 }
                 // 右侧内容
-                if (config.renderRight) {
-                    rightSlot = customRender(config.renderRight, item, { className: 'hy-tree-node__right-content' });
-                }
+                rightSlot = this._customRender(config.renderRight, item, { inset: true, className: 'hy-tree-node__right-content' });
                 if (!isElement(statusSlot) && !isElement(rightSlot))
                     return;
                 const el = document.createElement('div');
@@ -1938,18 +1907,19 @@ class VirtualTree {
                     }
                 }
                 // 整个节点内容
-                customRender(config.renderItem, item, {
+                this._customRender(config.renderItem, item, {
+                    inset: true,
                     parent: content,
                     className: 'hy-tree-node__node-content',
                     defaultFn: (data, node) => {
                         // 图标
-                        customRender(config.renderIcon, node, { parent: content, className: 'hy-tree-icon', defaultFn: generateIcon });
+                        this._customRender(config.renderIcon, node, { inset: true, parent: content, className: 'hy-tree-icon', defaultFn: generateIcon });
                         // 内容
-                        customRender(config.renderContent, node, { parent: content, className: 'hy-tree-node__content', defaultFn: generateContent });
+                        this._customRender(config.renderContent, node, { inset: true, parent: content, className: 'hy-tree-node__content', defaultFn: generateContent });
                         // 统计
-                        customRender(generateStats, node, { parent: content });
+                        this._customRender(generateStats, node, { parent: content });
                         // 右侧内容
-                        customRender(generateRight, node, { parent: content });
+                        this._customRender(generateRight, node, { parent: content });
                     }
                 });
                 nodeContainer.appendChild(content);
@@ -2030,7 +2000,13 @@ class VirtualTree {
             items: this._flattenTree,
             itemHeight: config.itemHeight + (config.itemGap || 0),
             bufferSize: config.bufferSize,
-            renderItem
+            renderItem,
+            onRender: () => {
+                for (const $destroy of this._destroyDomSet) {
+                    $destroy && $destroy();
+                }
+                this._destroyDomSet.clear();
+            }
         });
         config.onLoad && config.onLoad();
     }
@@ -2176,4 +2152,4 @@ class VirtualTree {
     };
 }
 
-export { VirtualTree, isArray, isBoolean, isElement, isEmpty, isFunction, isNull, isNumber, isObject, isString, isUndefined };
+export { VirtualScroll, VirtualTree, isArray, isBoolean, isElement, isEmpty, isFunction, isNull, isNumber, isObject, isString, isUndefined };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hy-virtual-tree",
-  "version": "1.1.17",
+  "version": "1.1.19",
   "type": "module",
   "scripts": {
     "dev": "vite",