lazy-render-virtual-scroll 1.0.7 → 1.0.8

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import { OnInit, OnDestroy, ElementRef, AfterViewInit, TemplateRef } from '@angular/core';
 import React from 'react';
 
 interface EngineConfig {
@@ -38,6 +39,9 @@ declare class Engine {
     private networkAwarePrefetchManager;
     private networkAwareRequestQueue;
     private adaptiveBufferCalculator;
+    private performanceOptimizer;
+    private memoryManager;
+    private gpuAccelerator;
     private state;
     private fetchMoreCallback;
     private totalItems;
@@ -286,6 +290,449 @@ declare class ContentComplexityAnalyzer {
     };
 }
 
+declare class PerformanceOptimizer {
+    private frameBudget;
+    private lastFrameTime;
+    private animationFrameId;
+    private isOptimizing;
+    private lastUpdate;
+    private minUpdateInterval;
+    private updateQueue;
+    private isProcessingQueue;
+    private cleanupThreshold;
+    private gcInterval;
+    constructor();
+    scheduleOptimizedUpdate(updateFn: () => void): void;
+    private processUpdateQueue;
+    private getTimeRemaining;
+    optimizeMemory(cleanupFn: (startIndex: number, endIndex: number) => void, visibleRange: {
+        start: number;
+        end: number;
+    }): void;
+    enableGPUCssAcceleration(element: HTMLElement): void;
+    disableGPUCssAcceleration(element: HTMLElement): void;
+    getOptimizationProfile(): {
+        frameRate: number;
+        batchSize: number;
+        bufferMultiplier: number;
+        updateInterval: number;
+    };
+    private isLowEndDevice;
+    private setupPerformanceMonitoring;
+    getPerformanceInsights(): {
+        frameRate: number;
+        memoryUsage: number | null;
+        updateFrequency: number;
+        optimizationActive: boolean;
+    };
+    private getMemoryUsage;
+    cleanup(): void;
+}
+
+declare class MemoryManager {
+    private itemCache;
+    private maxCacheSize;
+    private cleanupThreshold;
+    private visibleRange;
+    private totalItems;
+    constructor(maxCacheSize?: number);
+    setVisibleRange(range: {
+        start: number;
+        end: number;
+    }): void;
+    setTotalItems(total: number): void;
+    get(key: number): any | null;
+    set(key: number, value: any): void;
+    has(key: number): boolean;
+    delete(key: number): boolean;
+    clear(): void;
+    cleanupCache(): void;
+    private getDistanceFromVisible;
+    getStats(): {
+        size: number;
+        maxCacheSize: number;
+        visibleItems: number;
+        offScreenItems: number;
+        memoryEstimate: number;
+    };
+    private estimateObjectSize;
+    pruneEssential(): void;
+    private isEssential;
+    getSize(): number;
+    getKeys(): number[];
+}
+
+declare class GPUAccelerator {
+    private gpuAccelerationEnabled;
+    private gpuElements;
+    private animationFrameId;
+    constructor();
+    private isGPUSupported;
+    enableForElement(element: HTMLElement): void;
+    disableForElement(element: HTMLElement): void;
+    enableForElements(elements: HTMLElement[]): void;
+    batchUpdate(elements: HTMLElement[], enable: boolean): void;
+    optimizeScrollContainer(container: HTMLElement): void;
+    optimizeItem(item: HTMLElement): void;
+    getStatus(): {
+        enabled: boolean;
+        supported: boolean;
+        elementCount: number;
+    };
+    optimizeForScenario(scenario: 'scrolling' | 'animation' | 'static'): void;
+    cleanup(): void;
+    isAccelerated(element: HTMLElement): boolean;
+    getRecommendations(): string[];
+}
+
+interface LazyScrollConfig$1 extends EngineConfig {
+    fetchMore: FetchMoreCallback;
+}
+declare const useLazyScroll: (config: LazyScrollConfig$1) => {
+    visibleRange: any;
+    loadedItems: any;
+    isLoading: any;
+    containerRef: any;
+    refresh: () => void;
+};
+
+declare class LazyScrollDirective implements OnInit, OnDestroy {
+    private el;
+    items: any[];
+    itemHeight: number;
+    viewportHeight: number;
+    bufferSize: number;
+    fetchMore: FetchMoreCallback;
+    visibleRangeChange: any;
+    loadingChange: any;
+    private engine;
+    private scrollListener;
+    constructor(el: ElementRef);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    private onScroll;
+    refresh(): void;
+    getVisibleRange(): VisibleRange;
+}
+
+declare class LazyScrollComponent implements AfterViewInit, OnDestroy {
+    items: any[];
+    itemHeight: number;
+    viewportHeight: number;
+    bufferSize: number;
+    fetchMore: () => Promise<any>;
+    visibleRangeChange: any;
+    loadingChange: any;
+    itemTemplate: TemplateRef<any>;
+    visibleRange: {
+        start: number;
+        end: number;
+    };
+    isLoading: boolean;
+    get topPadding(): number;
+    get bottomPadding(): number;
+    get visibleItems(): any[];
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    onVisibleRangeChange(range: {
+        start: number;
+        end: number;
+    }): void;
+    onLoadingChange(loading: boolean): void;
+    trackByFn(index: number, item: any): any;
+}
+
+interface LazyScrollConfig {
+    itemHeight: number;
+    viewportHeight: number;
+    bufferSize?: number;
+    fetchMore: FetchMoreCallback;
+}
+declare function lazyScroll(node: HTMLElement, config: LazyScrollConfig): {
+    update(newConfig: LazyScrollConfig): void;
+    destroy(): void;
+};
+
+class LazyScroll {
+  constructor(container, config) {
+    this.container = container;
+    this.config = {
+      itemHeight: config.itemHeight || 50,
+      viewportHeight: config.viewportHeight || 400,
+      bufferSize: config.bufferSize || 5,
+      fetchMore: config.fetchMore || (() => Promise.resolve([]))
+    };
+
+    this.engine = new Engine(this.config);
+    this.engine.setFetchMoreCallback(this.config.fetchMore);
+
+    this.visibleRange = { start: 0, end: 0 };
+    this.isLoading = false;
+    this.items = [];
+    this.visibleItems = [];
+
+    this.scrollHandler = this.onScroll.bind(this);
+    this.container.addEventListener('scroll', this.scrollHandler, { passive: true });
+  }
+
+  onScroll() {
+    const scrollTop = this.container.scrollTop;
+    this.engine.updateScrollPosition(scrollTop);
+
+    const state = this.engine.getState();
+    this.visibleRange = state.visibleRange;
+    this.isLoading = state.isLoading;
+
+    this.render();
+  }
+
+  setItems(items) {
+    this.items = items;
+    this.render();
+  }
+
+  render() {
+    // Calculate paddings
+    const topPadding = this.visibleRange.start * this.config.itemHeight;
+    const bottomPadding = Math.max(0, (this.items.length - this.visibleRange.end) * this.config.itemHeight);
+
+    // Get visible items
+    this.visibleItems = this.items.slice(this.visibleRange.start, this.visibleRange.end);
+
+    // Clear container except for paddings and content
+    const existingContent = this.container.querySelector('.lazy-scroll-content');
+    if (existingContent) {
+      existingContent.remove();
+    }
+
+    // Create content wrapper
+    const contentWrapper = document.createElement('div');
+    contentWrapper.className = 'lazy-scroll-content';
+
+    // Add top padding
+    const topPaddingDiv = document.createElement('div');
+    topPaddingDiv.style.height = `${topPadding}px`;
+    contentWrapper.appendChild(topPaddingDiv);
+
+    // Add visible items
+    this.visibleItems.forEach((item, index) => {
+      const itemElement = this.createItemElement(item, this.visibleRange.start + index);
+      contentWrapper.appendChild(itemElement);
+    });
+
+    // Add bottom padding
+    const bottomPaddingDiv = document.createElement('div');
+    bottomPaddingDiv.style.height = `${bottomPadding}px`;
+    contentWrapper.appendChild(bottomPaddingDiv);
+
+    // Add loading indicator if needed
+    if (this.isLoading) {
+      const loadingElement = document.createElement('div');
+      loadingElement.className = 'lazy-loading';
+      loadingElement.textContent = 'Loading more items...';
+      contentWrapper.appendChild(loadingElement);
+    }
+
+    this.container.appendChild(contentWrapper);
+  }
+
+  createItemElement(item, index) {
+    const itemElement = document.createElement('div');
+    itemElement.style.height = `${this.config.itemHeight}px`;
+    itemElement.className = 'lazy-item';
+
+    // Default content - can be customized
+    itemElement.textContent = `Item ${index}: ${item.text || item.id || 'Content'}`;
+
+    return itemElement;
+  }
+
+  updateConfig(newConfig) {
+    if (newConfig.itemHeight !== undefined) this.config.itemHeight = newConfig.itemHeight;
+    if (newConfig.viewportHeight !== undefined) this.config.viewportHeight = newConfig.viewportHeight;
+    if (newConfig.bufferSize !== undefined) this.config.bufferSize = newConfig.bufferSize;
+    if (newConfig.fetchMore !== undefined) {
+      this.config.fetchMore = newConfig.fetchMore;
+      this.engine.setFetchMoreCallback(newConfig.fetchMore);
+    }
+
+    // Re-render with new config
+    this.render();
+  }
+
+  destroy() {
+    this.container.removeEventListener('scroll', this.scrollHandler);
+    this.engine.cleanup();
+  }
+
+  // Public methods
+  getVisibleRange() {
+    return { ...this.visibleRange };
+  }
+
+  refresh() {
+    this.onScroll();
+  }
+}
+
+// Factory function for easier usage
+function createLazyScroll(container, config) {
+  return new LazyScroll(container, config);
+}
+
+class LazyScrollElement extends HTMLElement {
+  constructor() {
+    super();
+    this.shadow = this.attachShadow({ mode: 'open' });
+    
+    // Default values
+    this.itemHeight = 50;
+    this.viewportHeight = 400;
+    this.bufferSize = 5;
+    this.items = [];
+    
+    // Styles
+    const style = document.createElement('style');
+    style.textContent = `
+      :host {
+        display: block;
+      }
+      
+      .lazy-scroll-container {
+        position: relative;
+        overflow-y: auto;
+      }
+      
+      .lazy-item {
+        width: 100%;
+      }
+      
+      .lazy-loading {
+        text-align: center;
+        padding: 20px;
+        color: #666;
+      }
+    `;
+    
+    this.shadow.appendChild(style);
+  }
+
+  static get observedAttributes() {
+    return ['item-height', 'viewport-height', 'buffer-size'];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    switch (name) {
+      case 'item-height':
+        this.itemHeight = parseInt(newValue) || 50;
+        break;
+      case 'viewport-height':
+        this.viewportHeight = parseInt(newValue) || 400;
+        break;
+      case 'buffer-size':
+        this.bufferSize = parseInt(newValue) || 5;
+        break;
+    }
+    
+    if (this.lazyScrollInstance) {
+      this.lazyScrollInstance.updateConfig({
+        itemHeight: this.itemHeight,
+        viewportHeight: this.viewportHeight,
+        bufferSize: this.bufferSize
+      });
+    }
+  }
+
+  connectedCallback() {
+    // Create container
+    this.container = document.createElement('div');
+    this.container.className = 'lazy-scroll-container';
+    this.container.style.height = `${this.viewportHeight}px`;
+    this.container.style.overflowY = 'auto';
+    
+    this.shadow.appendChild(this.container);
+
+    // Get fetchMore function from attribute or slot
+    const fetchMoreAttr = this.getAttribute('fetch-more');
+    let fetchMoreFn = () => Promise.resolve([]);
+    
+    if (fetchMoreAttr) {
+      try {
+        // If fetchMore is a function name in global scope
+        fetchMoreFn = window[fetchMoreAttr] || (() => Promise.resolve([]));
+      } catch (e) {
+        console.warn('Could not find fetchMore function:', fetchMoreAttr);
+      }
+    }
+
+    // Initialize lazy scroll
+    this.lazyScrollInstance = createLazyScroll(this.container, {
+      itemHeight: this.itemHeight,
+      viewportHeight: this.viewportHeight,
+      bufferSize: this.bufferSize,
+      fetchMore: fetchMoreFn
+    });
+
+    // Handle items from light DOM
+    this.updateItemsFromSlot();
+    
+    // Observe child changes
+    this.mutationObserver = new MutationObserver(() => {
+      this.updateItemsFromSlot();
+    });
+    
+    this.mutationObserver.observe(this, { childList: true, subtree: true });
+  }
+
+  disconnectedCallback() {
+    if (this.lazyScrollInstance) {
+      this.lazyScrollInstance.destroy();
+    }
+    
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+    }
+  }
+
+  updateItemsFromSlot() {
+    // Get items from light DOM or data attribute
+    const itemsData = this.getAttribute('items');
+    if (itemsData) {
+      try {
+        const items = JSON.parse(itemsData);
+        if (this.lazyScrollInstance) {
+          this.lazyScrollInstance.setItems(items);
+        }
+      } catch (e) {
+        console.warn('Could not parse items data:', itemsData);
+      }
+    }
+  }
+
+  // Public methods
+  setItems(items) {
+    if (this.lazyScrollInstance) {
+      this.lazyScrollInstance.setItems(items);
+    }
+  }
+
+  refresh() {
+    if (this.lazyScrollInstance) {
+      this.lazyScrollInstance.refresh();
+    }
+  }
+
+  getVisibleRange() {
+    if (this.lazyScrollInstance) {
+      return this.lazyScrollInstance.getVisibleRange();
+    }
+    return { start: 0, end: 0 };
+  }
+}
+
+// Register the custom element
+customElements.define('lazy-scroll-element', LazyScrollElement);
+
 declare class ScrollObserver {
     private container;
     private callback;
@@ -350,5 +797,5 @@ declare function debounce<T extends (...args: any[]) => any>(func: T, wait: numb
  */
 declare function throttle<T extends (...args: any[]) => any>(func: T, limit: number): (...args: Parameters<T>) => void;
 
-export { AdaptiveBufferCalculator, ContentComplexityAnalyzer, DevicePerformanceMonitor, Engine, IntelligentScrollDetector, LazyList, NetworkAwarePrefetchManager, NetworkAwareRequestQueue, NetworkSpeedDetector, PrefetchManager, RequestQueue, ScrollObserver, WindowManager, debounce, throttle, useLazyList };
+export { AdaptiveBufferCalculator, ContentComplexityAnalyzer, DevicePerformanceMonitor, Engine, GPUAccelerator, IntelligentScrollDetector, LazyList, LazyScroll, LazyScrollComponent, LazyScrollDirective, LazyScrollElement, MemoryManager, NetworkAwarePrefetchManager, NetworkAwareRequestQueue, NetworkSpeedDetector, PerformanceOptimizer, PrefetchManager, RequestQueue, ScrollObserver, WindowManager, createLazyScroll, debounce, lazyScroll, throttle, useLazyList, useLazyScroll };
 export type { EngineConfig, EngineState, FetchMoreCallback, ScrollAnalysis, VisibleRange };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lazy-render-virtual-scroll",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "A framework-agnostic virtual scrolling and lazy rendering solution",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",