lazy-render-virtual-scroll 1.0.1 → 1.0.2

package/package.json

@@ -1,11 +1,16 @@
 {
   "name": "lazy-render-virtual-scroll",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "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",
+  "files": [
+    "dist/",
+    "README.md",
+    "LICENSE"
+  ],
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",
@@ -52,4 +57,4 @@
   "dependencies": {
     "tsx": "^4.0.0"
   }
-}
+}

package/examples/chat-ui/Chat.jsx

@@ -1,158 +0,0 @@
-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

@@ -1,97 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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/rollup.config.js

@@ -1,39 +0,0 @@
-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

@@ -1,92 +0,0 @@
-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';

package/src/adapters/react/useLazyList.ts

@@ -1,87 +0,0 @@
-import { useState, useEffect, useRef, useCallback } from 'react';
-import { Engine } from '../../core/Engine';
-import { EngineConfig, VisibleRange, FetchMoreCallback } from '../../core/types';
-
-interface LazyListConfig extends EngineConfig {
-  fetchMore: FetchMoreCallback;
-}
-
-export const useLazyList = (config: LazyListConfig) => {
-  const { fetchMore, ...engineConfig } = config;
-  const engineRef = useRef<Engine | null>(null);
-  const containerRef = useRef<HTMLElement | null>(null);
-  
-  const [visibleRange, setVisibleRange] = useState<VisibleRange>({ start: 0, end: 0 });
-  const [loadedItems, setLoadedItems] = useState<any[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-
-  // Initialize engine
-  useEffect(() => {
-    engineRef.current = new Engine(engineConfig);
-    engineRef.current.setFetchMoreCallback(fetchMore);
-
-    return () => {
-      if (engineRef.current) {
-        engineRef.current.cleanup();
-      }
-    };
-  }, []);
-
-  // Update engine when config changes
-  useEffect(() => {
-    if (engineRef.current) {
-      engineRef.current.updateDimensions(
-        engineConfig.viewportHeight,
-        engineConfig.itemHeight
-      );
-    }
-  }, [engineConfig.viewportHeight, engineConfig.itemHeight]);
-
-  // Handle scroll events
-  const handleScroll = useCallback((scrollTop: number) => {
-    if (engineRef.current) {
-      engineRef.current.updateScrollPosition(scrollTop);
-      
-      // Update state based on engine
-      const state = engineRef.current.getState();
-      setVisibleRange(state.visibleRange);
-      setIsLoading(state.isLoading);
-    }
-  }, []);
-
-  // Set container reference
-  const setContainerRef = (element: HTMLElement | null) => {
-    if (element) {
-      containerRef.current = element;
-      
-      // Initialize scroll observer when container is available
-      if (typeof window !== 'undefined' && element) {
-        // In a real implementation, we would use ScrollObserver here
-        // For now, we'll just attach a basic scroll listener
-        const handleScrollEvent = () => {
-          handleScroll(element.scrollTop);
-        };
-        
-        element.addEventListener('scroll', handleScrollEvent, { passive: true });
-        
-        // Cleanup
-        return () => {
-          element.removeEventListener('scroll', handleScrollEvent);
-        };
-      }
-    }
-  };
-
-  return {
-    visibleRange,
-    loadedItems,
-    isLoading,
-    setContainerRef,
-    // Helper function to trigger manual refresh
-    refresh: () => {
-      if (engineRef.current) {
-        engineRef.current.updateScrollPosition(containerRef.current?.scrollTop || 0);
-      }
-    }
-  };
-};

package/src/core/Engine.ts

@@ -1,134 +0,0 @@
-import { EngineConfig, VisibleRange, FetchMoreCallback, EngineState } from './types';
-import { WindowManager } from './WindowManager';
-import { PrefetchManager } from './PrefetchManager';
-import { RequestQueue } from './RequestQueue';
-
-export class Engine {
-  private config: EngineConfig;
-  private windowManager: WindowManager;
-  private prefetchManager: PrefetchManager;
-  private requestQueue: RequestQueue;
-  
-  private state: EngineState;
-  private fetchMoreCallback: FetchMoreCallback | null = null;
-  private totalItems: number;
-
-  constructor(config: EngineConfig) {
-    this.config = {
-      ...config,
-      bufferSize: config.bufferSize || 5
-    };
-    
-    this.windowManager = new WindowManager(
-      this.config.itemHeight,
-      this.config.viewportHeight,
-      this.config.bufferSize
-    );
-    
-    this.prefetchManager = new PrefetchManager(this.config.bufferSize);
-    this.requestQueue = new RequestQueue(1); // Single request at a time
-    
-    this.totalItems = this.config.totalItems || Number.MAX_SAFE_INTEGER;
-    
-    this.state = {
-      scrollTop: 0,
-      visibleRange: { start: 0, end: 0 },
-      loadedItems: 0,
-      isLoading: false
-    };
-  }
-
-  /**
-   * Update scroll position and recalculate visible range
-   */
-  updateScrollPosition(scrollTop: number): void {
-    this.state.scrollTop = scrollTop;
-    this.state.visibleRange = this.windowManager.calculateVisibleRange(scrollTop);
-    
-    // Check if we need to fetch more items
-    if (this.shouldFetchMore()) {
-      this.fetchMore();
-    }
-  }
-
-  /**
-   * Get the current visible range
-   */
-  getVisibleRange(): VisibleRange {
-    return this.state.visibleRange;
-  }
-
-  /**
-   * Check if more items should be fetched
-   */
-  shouldFetchMore(): boolean {
-    if (!this.fetchMoreCallback) return false;
-    if (this.state.isLoading) return false;
-    if (this.state.loadedItems >= this.totalItems) return false;
-    
-    return this.prefetchManager.shouldPrefetch(
-      this.state.visibleRange.end,
-      this.state.loadedItems
-    );
-  }
-
-  /**
-   * Fetch more items
-   */
-  async fetchMore(): Promise<void> {
-    if (!this.fetchMoreCallback || this.state.isLoading) return;
-    
-    this.state.isLoading = true;
-    
-    try {
-      const result = await this.requestQueue.add(this.fetchMoreCallback);
-      // Assuming the result contains new items
-      // In a real implementation, this would update the loaded items count
-      this.state.loadedItems += Array.isArray(result) ? result.length : 1;
-    } catch (error) {
-      console.error('Error fetching more items:', error);
-    } finally {
-      this.state.isLoading = false;
-    }
-  }
-
-  /**
-   * Set the fetchMore callback function
-   */
-  setFetchMoreCallback(callback: FetchMoreCallback): void {
-    this.fetchMoreCallback = callback;
-  }
-
-  /**
-   * Update total items count
-   */
-  updateTotalItems(count: number): void {
-    this.totalItems = count;
-  }
-
-  /**
-   * Get current engine state
-   */
-  getState(): EngineState {
-    return { ...this.state };
-  }
-
-  /**
-   * Update viewport dimensions
-   */
-  updateDimensions(viewportHeight: number, itemHeight: number): void {
-    this.windowManager.updateViewportHeight(viewportHeight);
-    this.windowManager.updateItemHeight(itemHeight);
-    
-    // Recalculate visible range with new dimensions
-    this.state.visibleRange = this.windowManager.calculateVisibleRange(this.state.scrollTop);
-  }
-
-  /**
-   * Cleanup resources
-   */
-  cleanup(): void {
-    this.requestQueue.clear();
-    this.fetchMoreCallback = null;
-  }
-}