lazy-render-virtual-scroll 1.0.7 → 1.0.9

package/dist/vanilla/index.d.ts

@@ -0,0 +1,356 @@
+interface EngineConfig {
+    itemHeight: number;
+    viewportHeight: number;
+    bufferSize?: number;
+    totalItems?: number;
+}
+interface VisibleRange {
+    start: number;
+    end: number;
+}
+interface FetchMoreCallback {
+    (): Promise<any>;
+}
+interface EngineState {
+    scrollTop: number;
+    visibleRange: VisibleRange;
+    loadedItems: number;
+    isLoading: boolean;
+}
+
+declare class Engine {
+    private config;
+    private windowManager;
+    private prefetchManager;
+    private requestQueue;
+    private intelligentScrollDetector;
+    private networkDetector;
+    private networkAwarePrefetchManager;
+    private networkAwareRequestQueue;
+    private adaptiveBufferCalculator;
+    private performanceOptimizer;
+    private memoryManager;
+    private gpuAccelerator;
+    private state;
+    private fetchMoreCallback;
+    private totalItems;
+    constructor(config: EngineConfig);
+    /**
+     * Update scroll position and recalculate visible range with intelligent detection
+     */
+    updateScrollPosition(scrollTop: number): Promise<void>;
+    /**
+     * Get the current visible range
+     */
+    getVisibleRange(): VisibleRange;
+    /**
+     * Check if more items should be fetched with intelligent and network-aware detection
+     */
+    shouldFetchMore(): Promise<boolean>;
+    /**
+     * Fetch more items with network awareness
+     */
+    fetchMore(): Promise<void>;
+    /**
+     * Set the fetchMore callback function
+     */
+    setFetchMoreCallback(callback: FetchMoreCallback): void;
+    /**
+     * Update total items count
+     */
+    updateTotalItems(count: number): void;
+    /**
+     * Get current engine state
+     */
+    getState(): EngineState;
+    /**
+     * Update viewport dimensions
+     */
+    updateDimensions(viewportHeight: number, itemHeight: number): void;
+    /**
+     * Cleanup resources
+     */
+    cleanup(): 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);
+
+export { LazyScroll, LazyScrollElement, createLazyScroll };

package/dist/vue/index.d.ts

@@ -0,0 +1,22 @@
+interface EngineConfig {
+    itemHeight: number;
+    viewportHeight: number;
+    bufferSize?: number;
+    totalItems?: number;
+}
+interface FetchMoreCallback {
+    (): Promise<any>;
+}
+
+interface LazyScrollConfig extends EngineConfig {
+    fetchMore: FetchMoreCallback;
+}
+declare const useLazyScroll: (config: LazyScrollConfig) => {
+    visibleRange: any;
+    loadedItems: any;
+    isLoading: any;
+    containerRef: any;
+    refresh: () => void;
+};
+
+export { useLazyScroll };

package/package.json

@@ -1,11 +1,38 @@
 {
   "name": "lazy-render-virtual-scroll",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "A framework-agnostic virtual scrolling and lazy rendering solution",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
   "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./vue": {
+      "import": "./dist/esm/vue/index.js",
+      "require": "./dist/cjs/vue/index.js",
+      "types": "./dist/vue/index.d.ts"
+    },
+    "./angular": {
+      "import": "./dist/esm/angular/index.js",
+      "require": "./dist/cjs/angular/index.js",
+      "types": "./dist/angular/index.d.ts"
+    },
+    "./svelte": {
+      "import": "./dist/esm/svelte/index.js",
+      "require": "./dist/cjs/svelte/index.js",
+      "types": "./dist/svelte/index.d.ts"
+    },
+    "./vanilla": {
+      "import": "./dist/esm/vanilla/index.js",
+      "require": "./dist/cjs/vanilla/index.js",
+      "types": "./dist/vanilla/index.d.ts"
+    }
+  },
   "files": [
     "dist/",
     "README.md",