lazy-render-virtual-scroll 1.0.1

package/dist/index.d.ts

@@ -0,0 +1,181 @@
+import React from 'react';
+
+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 state;
+    private fetchMoreCallback;
+    private totalItems;
+    constructor(config: EngineConfig);
+    /**
+     * Update scroll position and recalculate visible range
+     */
+    updateScrollPosition(scrollTop: number): void;
+    /**
+     * Get the current visible range
+     */
+    getVisibleRange(): VisibleRange;
+    /**
+     * Check if more items should be fetched
+     */
+    shouldFetchMore(): boolean;
+    /**
+     * Fetch more items
+     */
+    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;
+}
+
+declare class WindowManager {
+    private itemHeight;
+    private viewportHeight;
+    private bufferSize;
+    constructor(itemHeight: number, viewportHeight: number, bufferSize?: number);
+    /**
+     * Calculate the visible range based on scroll position
+     */
+    calculateVisibleRange(scrollTop: number): VisibleRange;
+    /**
+     * Update viewport height if it changes
+     */
+    updateViewportHeight(height: number): void;
+    /**
+     * Update item height if it changes
+     */
+    updateItemHeight(height: number): void;
+}
+
+declare class PrefetchManager {
+    private bufferSize;
+    constructor(bufferSize?: number);
+    /**
+     * Determine if more items should be fetched based on visible range and loaded items
+     */
+    shouldPrefetch(visibleEnd: number, totalLoaded: number): boolean;
+    /**
+     * Update buffer size if it changes
+     */
+    updateBufferSize(size: number): void;
+}
+
+declare class RequestQueue {
+    private queue;
+    private processing;
+    private maxConcurrent;
+    constructor(maxConcurrent?: number);
+    /**
+     * Add a request to the queue
+     */
+    add(requestFn: () => Promise<any>): Promise<any>;
+    /**
+     * Process the queue
+     */
+    private processQueue;
+    /**
+     * Clear the queue
+     */
+    clear(): void;
+    /**
+     * Get the current queue length
+     */
+    getLength(): number;
+}
+
+declare class ScrollObserver {
+    private container;
+    private callback;
+    private options;
+    private observer;
+    private sentinelElement;
+    constructor(container: HTMLElement, callback: (scrollTop: number) => void, options?: Partial<IntersectionObserverInit>);
+    /**
+     * Start observing scroll events
+     */
+    observe(): void;
+    /**
+     * Handle scroll events
+     */
+    private onScroll;
+    /**
+     * Debounce function for scroll events
+     */
+    private debounce;
+    /**
+     * Disconnect observer and clean up
+     */
+    disconnect(): void;
+}
+
+interface LazyListConfig extends EngineConfig {
+    fetchMore: FetchMoreCallback;
+}
+declare const useLazyList: (config: LazyListConfig) => {
+    visibleRange: VisibleRange;
+    loadedItems: any[];
+    isLoading: boolean;
+    setContainerRef: (element: HTMLElement | null) => (() => void) | undefined;
+    refresh: () => void;
+};
+
+interface LazyListProps extends EngineConfig {
+    fetchMore: FetchMoreCallback;
+    renderItem: (item: any, index: number) => React.ReactNode;
+    items: any[];
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const LazyList: React.ForwardRefExoticComponent<LazyListProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Debounce function to limit the rate at which a function is called
+ */
+declare function debounce<T extends (...args: any[]) => any>(func: T, wait: number): (...args: Parameters<T>) => void;
+
+/**
+ * Throttle function to limit the rate at which a function is called
+ */
+declare function throttle<T extends (...args: any[]) => any>(func: T, limit: number): (...args: Parameters<T>) => void;
+
+export { Engine, LazyList, PrefetchManager, RequestQueue, ScrollObserver, WindowManager, debounce, throttle, useLazyList };
+export type { EngineConfig, EngineState, FetchMoreCallback, VisibleRange };

package/examples/chat-ui/Chat.jsx

@@ -0,0 +1,158 @@
+import React, { useState, useRef } from 'react';
+import { LazyList, useLazyList } from 'lazy-render';
+
+const ChatUI = () => {
+  const [messages, setMessages] = useState([]);
+  const [inputText, setInputText] = useState('');
+  const [userId] = useState('user_' + Math.random().toString(36).substr(2, 9));
+  const messagesEndRef = useRef(null);
+  
+  // Initialize with some messages
+  React.useEffect(() => {
+    const initialMessages = Array.from({ length: 100 }, (_, i) => ({
+      id: i,
+      text: `Initial message ${i} - Lorem ipsum dolor sit amet, consectetur adipiscing elit.`,
+      sender: i % 3 === 0 ? 'other' : 'self',
+      timestamp: new Date(Date.now() - (100 - i) * 60000).toLocaleTimeString(),
+      avatar: `https://i.pravatar.cc/32?img=${i % 5 + 1}`
+    }));
+    setMessages(initialMessages);
+  }, []);
+
+  const sendMessage = () => {
+    if (inputText.trim() === '') return;
+    
+    const newMessage = {
+      id: messages.length,
+      text: inputText,
+      sender: 'self',
+      timestamp: new Date().toLocaleTimeString(),
+      avatar: `https://i.pravatar.cc/32?img=6`
+    };
+    
+    setMessages(prev => [...prev, newMessage]);
+    setInputText('');
+  };
+
+  const handleKeyPress = (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      sendMessage();
+    }
+  };
+
+  // Custom hook usage for advanced control
+  const { 
+    visibleRange, 
+    setContainerRef, 
+    scrollToIndex 
+  } = useLazyList({
+    itemHeight: 80, // Average message height
+    viewportHeight: 500,
+    bufferSize: 5,
+    overscan: 3,
+    fetchMore: async () => {
+      // In a real app, this would fetch older messages
+      return [];
+    }
+  });
+
+  const renderMessage = (msg, index) => (
+    <div 
+      key={msg.id}
+      style={{ 
+        minHeight: '60px', 
+        borderBottom: '1px solid #eee',
+        padding: '12px 16px',
+        display: 'flex',
+        alignItems: 'flex-start',
+        backgroundColor: msg.sender === 'self' ? '#e3f2fd' : '#fff'
+      }}
+    >
+      <img 
+        src={msg.avatar} 
+        alt="Avatar" 
+        style={{ 
+          width: '32px', 
+          height: '32px', 
+          borderRadius: '50%', 
+          marginRight: '12px',
+          flexShrink: 0
+        }} 
+      />
+      <div style={{ flex: 1 }}>
+        <div style={{ fontWeight: 'bold', fontSize: '12px', marginBottom: '4px' }}>
+          {msg.sender === 'self' ? 'You' : 'Other User'} • {msg.timestamp}
+        </div>
+        <div style={{ fontSize: '14px' }}>
+          {msg.text}
+        </div>
+      </div>
+    </div>
+  );
+
+  return (
+    <div style={{ width: '100%', maxWidth: '600px', margin: '0 auto', height: '100vh', display: 'flex', flexDirection: 'column' }}>
+      <h1 style={{ textAlign: 'center', margin: '10px 0' }}>Chat UI Example</h1>
+      
+      {/* Messages container */}
+      <div 
+        ref={setContainerRef}
+        style={{ 
+          flex: 1, 
+          overflowY: 'auto', 
+          border: '1px solid #ddd', 
+          borderRadius: '8px',
+          marginBottom: '10px'
+        }}
+      >
+        <div style={{ height: `${visibleRange.start * 80}px` }} />
+        
+        {messages
+          .slice(visibleRange.start, visibleRange.end)
+          .map((msg, idx) => renderMessage(msg, visibleRange.start + idx))}
+          
+        <div style={{ height: `${Math.max(0, (messages.length - visibleRange.end) * 80)}px` }} />
+      </div>
+      
+      {/* Input area */}
+      <div style={{ display: 'flex', gap: '8px', padding: '8px' }}>
+        <textarea
+          value={inputText}
+          onChange={(e) => setInputText(e.target.value)}
+          onKeyPress={handleKeyPress}
+          placeholder="Type a message..."
+          style={{ 
+            flex: 1, 
+            padding: '10px', 
+            border: '1px solid #ddd', 
+            borderRadius: '4px',
+            resize: 'none',
+            minHeight: '40px',
+            maxHeight: '100px'
+          }}
+        />
+        <button
+          onClick={sendMessage}
+          disabled={!inputText.trim()}
+          style={{
+            padding: '10px 16px',
+            backgroundColor: inputText.trim() ? '#2196f3' : '#ccc',
+            color: 'white',
+            border: 'none',
+            borderRadius: '4px',
+            cursor: inputText.trim() ? 'pointer' : 'not-allowed'
+          }}
+        >
+          Send
+        </button>
+      </div>
+      
+      <div style={{ fontSize: '12px', textAlign: 'center', color: '#666' }}>
+        Showing {visibleRange.start}-{visibleRange.end} of {messages.length} messages
+      </div>
+    </div>
+  );
+};
+
+export default ChatUI;

package/examples/infinite-feed/Feed.jsx

@@ -0,0 +1,97 @@
+import React, { useState } from 'react';
+import { LazyList } from 'lazy-render';
+
+const InfiniteFeed = () => {
+  const [posts, setPosts] = useState([]);
+  const [page, setPage] = useState(1);
+  const [hasMore, setHasMore] = useState(true);
+  const [loading, setLoading] = useState(false);
+
+  const fetchMorePosts = async () => {
+    if (loading || !hasMore) return;
+    
+    setLoading(true);
+    
+    // Simulate API call
+    try {
+      await new Promise(resolve => setTimeout(resolve, 800)); // Simulate network delay
+      
+      // Generate new posts
+      const newPosts = Array.from({ length: 10 }, (_, i) => ({
+        id: (page * 10) + i,
+        title: `Post Title ${page * 10 + i}`,
+        content: `This is the content for post number ${page * 10 + i}. It contains some interesting information.`,
+        author: `Author ${(page * 10) + i % 5}`,
+        timestamp: new Date(Date.now() - Math.random() * 10000000000).toISOString(),
+        likes: Math.floor(Math.random() * 100),
+        comments: Math.floor(Math.random() * 50)
+      }));
+      
+      setPosts(prev => [...prev, ...newPosts]);
+      setPage(prev => prev + 1);
+      
+      // Stop after 100 posts for demo purposes
+      if (page >= 10) {
+        setHasMore(false);
+      }
+    } catch (error) {
+      console.error('Error fetching posts:', error);
+    } finally {
+      setLoading(false);
+    }
+    
+    return newPosts;
+  };
+
+  const renderPost = (post, index) => (
+    <div 
+      key={post.id}
+      style={{ 
+        height: '120px', 
+        borderBottom: '1px solid #eee',
+        padding: '16px',
+        backgroundColor: '#fafafa'
+      }}
+    >
+      <h3>{post.title}</h3>
+      <p style={{ fontSize: '14px', color: '#666', margin: '4px 0' }}>
+        by {post.author} • {post.timestamp.substring(0, 10)}
+      </p>
+      <p style={{ margin: '8px 0' }}>{post.content}</p>
+      <div style={{ fontSize: '12px', color: '#888' }}>
+        {post.likes} likes • {post.comments} comments
+      </div>
+    </div>
+  );
+
+  return (
+    <div style={{ width: '100%', maxWidth: '600px', margin: '0 auto' }}>
+      <h1>Infinite Feed Example</h1>
+      <p>{posts.length} posts loaded</p>
+      
+      <LazyList
+        items={posts}
+        itemHeight={120}
+        viewportHeight={500}
+        fetchMore={fetchMorePosts}
+        renderItem={renderPost}
+        bufferSize={3}
+        overscan={2}
+      />
+      
+      {loading && (
+        <div style={{ textAlign: 'center', padding: '20px', color: '#666' }}>
+          Loading more posts...
+        </div>
+      )}
+      
+      {!hasMore && (
+        <div style={{ textAlign: 'center', padding: '20px', color: '#666' }}>
+          You've reached the end!
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default InfiniteFeed;

package/examples/react-basic/App.jsx

@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import { LazyList } from 'lazy-render';
+
+const App = () => {
+  // Generate 10000 sample items
+  const [items] = useState(() => 
+    Array.from({ length: 10000 }, (_, i) => ({
+      id: i,
+      text: `Item ${i}`,
+      timestamp: new Date(Date.now() - Math.random() * 10000000000).toISOString()
+    }))
+  );
+  
+  const [loadedItems, setLoadedItems] = useState(items.slice(0, 100)); // Initially load 100 items
+  const [hasMore, setHasMore] = useState(true);
+
+  const fetchMore = async () => {
+    if (loadedItems.length >= items.length) {
+      setHasMore(false);
+      return [];
+    }
+    
+    // Simulate API delay
+    await new Promise(resolve => setTimeout(resolve, 500));
+    
+    const nextBatch = items.slice(loadedItems.length, loadedItems.length + 50);
+    setLoadedItems(prev => [...prev, ...nextBatch]);
+    return nextBatch;
+  };
+
+  const renderItem = (item, index) => (
+    <div 
+      key={item.id}
+      style={{ 
+        height: '60px', 
+        borderBottom: '1px solid #eee',
+        display: 'flex',
+        alignItems: 'center',
+        paddingLeft: '16px'
+      }}
+    >
+      {item.text} - {item.timestamp.substring(0, 10)}
+    </div>
+  );
+
+  return (
+    <div style={{ width: '100%', height: '100vh' }}>
+      <h1>Basic Lazy Render Example</h1>
+      <p>Loading {loadedItems.length} of {items.length} items</p>
+      
+      <LazyList
+        items={loadedItems}
+        itemHeight={60}
+        viewportHeight={400}
+        fetchMore={fetchMore}
+        renderItem={renderItem}
+        bufferSize={5}
+        overscan={2}
+      />
+    </div>
+  );
+};
+
+export default App;

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "lazy-render-virtual-scroll",
+  "version": "1.0.1",
+  "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",
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "test": "npx tsx test/testRunner.ts",
+    "test:verbose": "npx tsx test/testRunner.ts",
+    "lint": "eslint src --ext .ts,.tsx",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "virtual-scrolling",
+    "lazy-rendering",
+    "performance",
+    "react",
+    "vue",
+    "angular",
+    "scrolling",
+    "infinite-scroll",
+    "pagination"
+  ],
+  "author": "Sannu",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sannuk79/lezzyrender.git"
+  },
+  "bugs": {
+    "url": "https://github.com/sannuk79/lezzyrender/issues"
+  },
+  "homepage": "https://github.com/sannuk79/lezzyrender#readme",
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@rollup/plugin-node-resolve": "^15.0.0",
+    "@rollup/plugin-typescript": "^11.0.0",
+    "@types/react": "^18.3.28",
+    "@types/react-dom": "^18.3.7",
+    "rollup": "^3.0.0",
+    "rollup-plugin-dts": "^6.0.0",
+    "tslib": "^2.4.0",
+    "typescript": "^5.0.0"
+  },
+  "dependencies": {
+    "tsx": "^4.0.0"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,39 @@
+import resolve from '@rollup/plugin-node-resolve';
+import typescript from '@rollup/plugin-typescript';
+import dts from 'rollup-plugin-dts';
+import fs from 'fs';
+
+const packageJson = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
+
+export default [
+  {
+    input: 'src/index.ts',
+    output: [
+      {
+        file: packageJson.main,
+        format: 'cjs',
+        sourcemap: true
+      },
+      {
+        file: packageJson.module,
+        format: 'esm',
+        sourcemap: true
+      }
+    ],
+    plugins: [
+      resolve({
+        browser: true,
+      }),
+      typescript({ 
+        tsconfig: './tsconfig.json',
+        jsx: 'react' // Use classic JSX transform
+      })
+    ],
+    external: ['react', 'react-dom']
+  },
+  {
+    input: 'src/index.ts',
+    output: [{ file: 'dist/index.d.ts', format: 'es' }],
+    plugins: [dts()],
+  }
+];

package/src/adapters/react/LazyList.tsx

@@ -0,0 +1,92 @@
+import React, { forwardRef } from 'react';
+import { useLazyList } from './useLazyList';
+import { EngineConfig, FetchMoreCallback } from '../../core/types';
+
+interface LazyListProps extends EngineConfig {
+  fetchMore: FetchMoreCallback;
+  renderItem: (item: any, index: number) => React.ReactNode;
+  items: any[];
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export const LazyList = forwardRef<HTMLDivElement, LazyListProps>((props, ref) => {
+  const {
+    fetchMore,
+    renderItem,
+    items,
+    itemHeight,
+    viewportHeight,
+    bufferSize,
+    className = '',
+    style = {},
+    ...rest
+  } = props;
+
+  const { visibleRange, setContainerRef, isLoading } = useLazyList({
+    fetchMore,
+    itemHeight,
+    viewportHeight,
+    bufferSize,
+    ...rest
+  });
+
+  // Calculate container height to simulate infinite scroll
+  const containerHeight = items.length * itemHeight;
+  const visibleItems = items.slice(visibleRange.start, visibleRange.end);
+
+  // Calculate top padding to maintain scroll position
+  const paddingTop = visibleRange.start * itemHeight;
+
+  return (
+    <div
+      ref={(el) => {
+        setContainerRef(el);
+        if (ref) {
+          if (typeof ref === 'function') {
+            ref(el);
+          } else {
+            ref.current = el;
+          }
+        }
+      }}
+      className={`lazy-list ${className}`}
+      style={{
+        height: `${viewportHeight}px`,
+        overflowY: 'auto',
+        ...style
+      }}
+      {...rest}
+    >
+      {/* Top padding to maintain scroll position */}
+      <div style={{ height: `${paddingTop}px` }} />
+      
+      {/* Visible items */}
+      {visibleItems.map((item, index) => (
+        <div
+          key={visibleRange.start + index}
+          style={{ height: `${itemHeight}px` }}
+          className="lazy-item"
+        >
+          {renderItem(item, visibleRange.start + index)}
+        </div>
+      ))}
+      
+      {/* Bottom padding */}
+      <div 
+        style={{ 
+          height: `${Math.max(0, containerHeight - (visibleRange.end * itemHeight))}px` 
+        }} 
+      />
+      
+      {/* Loading indicator */}
+      {isLoading && (
+        <div className="lazy-loading">
+          Loading more items...
+        </div>
+      )}
+    </div>
+  );
+});
+
+LazyList.displayName = 'LazyList';