lazy-render-virtual-scroll 1.12.0 → 1.13.0

package/dist/cjs/adapters/react/index.js

@@ -3248,9 +3248,291 @@ const SmartInfiniteScroll = ({ fetchMore, renderItem, initialPageSize = 50, minP
       `)));
 };
 
+/**
+ * Performance Dashboard
+ * Real-time performance monitoring and bottleneck identification
+ */
+class PerformanceDashboard {
+    constructor(analytics) {
+        this.updateInterval = 1000; // 1 second
+        this.listeners = [];
+        this.intervalId = null;
+        this.isMonitoring = false;
+        this.analytics = analytics;
+    }
+    /**
+     * Start real-time monitoring
+     */
+    startMonitoring() {
+        if (this.isMonitoring)
+            return;
+        this.isMonitoring = true;
+        this.intervalId = window.setInterval(() => {
+            const data = this.getDashboardData();
+            this.notifyListeners(data);
+        }, this.updateInterval);
+    }
+    /**
+     * Stop monitoring
+     */
+    stopMonitoring() {
+        if (!this.isMonitoring)
+            return;
+        this.isMonitoring = false;
+        if (this.intervalId !== null) {
+            clearInterval(this.intervalId);
+            this.intervalId = null;
+        }
+    }
+    /**
+     * Get current dashboard data
+     */
+    getDashboardData() {
+        const metrics = this.analytics.getMetrics();
+        const score = this.analytics.getPerformanceScore();
+        const recommendations = this.analytics.getRecommendations();
+        // Identify bottlenecks
+        const bottlenecks = this.identifyBottlenecks(metrics);
+        return {
+            overallScore: score,
+            fps: metrics.scrollPerformance.averageFPS,
+            renderTime: metrics.renderTime.average,
+            memoryUsage: metrics.memoryUsage.current,
+            networkLatency: metrics.networkPerformance.averageLatency,
+            recommendations,
+            bottlenecks
+        };
+    }
+    /**
+     * Identify performance bottlenecks
+     */
+    identifyBottlenecks(metrics) {
+        const bottlenecks = [];
+        // FPS bottleneck
+        if (metrics.scrollPerformance.averageFPS < 30) {
+            bottlenecks.push('CRITICAL: Low FPS - Rendering is the bottleneck');
+        }
+        else if (metrics.scrollPerformance.averageFPS < 60) {
+            bottlenecks.push('WARNING: Below 60 FPS - Consider optimizing renders');
+        }
+        // Render time bottleneck
+        if (metrics.renderTime.average > 50) {
+            bottlenecks.push('HIGH: Slow render times - Simplify item components');
+        }
+        else if (metrics.renderTime.average > 16) {
+            bottlenecks.push('MEDIUM: Render time above frame budget');
+        }
+        // Memory bottleneck
+        if (metrics.memoryUsage.trend === 'increasing') {
+            bottlenecks.push('WARNING: Memory leak detected - Check cleanup logic');
+        }
+        // Network bottleneck
+        if (metrics.networkPerformance.averageLatency > 500) {
+            bottlenecks.push('HIGH: Network latency - Implement better caching');
+        }
+        // Jank bottleneck
+        if (metrics.scrollPerformance.jankCount > 20) {
+            bottlenecks.push('CRITICAL: Frequent jank - Smooth scroll performance');
+        }
+        if (bottlenecks.length === 0) {
+            bottlenecks.push('No bottlenecks detected - Performance is optimal');
+        }
+        return bottlenecks;
+    }
+    /**
+     * Add listener for dashboard updates
+     */
+    addListener(callback) {
+        this.listeners.push(callback);
+    }
+    /**
+     * Remove listener
+     */
+    removeListener(callback) {
+        const index = this.listeners.indexOf(callback);
+        if (index > -1) {
+            this.listeners.splice(index, 1);
+        }
+    }
+    /**
+     * Notify all listeners
+     */
+    notifyListeners(data) {
+        this.listeners.forEach(listener => {
+            try {
+                listener(data);
+            }
+            catch (error) {
+                console.error('Dashboard listener error:', error);
+            }
+        });
+    }
+    /**
+     * Export metrics as JSON
+     */
+    exportMetrics() {
+        const metrics = this.analytics.getMetrics();
+        return JSON.stringify(metrics, null, 2);
+    }
+    /**
+     * Get performance report
+     */
+    getPerformanceReport() {
+        const data = this.getDashboardData();
+        let report = '=== PERFORMANCE REPORT ===\n\n';
+        report += `Overall Score: ${data.overallScore}/100\n`;
+        report += `FPS: ${data.fps}\n`;
+        report += `Average Render Time: ${data.renderTime.toFixed(2)}ms\n`;
+        report += `Memory Usage: ${data.memoryUsage.toFixed(2)}MB\n`;
+        report += `Network Latency: ${data.networkLatency.toFixed(2)}ms\n\n`;
+        report += 'BOTTLENECKS:\n';
+        data.bottlenecks.forEach(b => {
+            report += `  - ${b}\n`;
+        });
+        report += '\nRECOMMENDATIONS:\n';
+        data.recommendations.forEach(r => {
+            report += `  - ${r}\n`;
+        });
+        return report;
+    }
+}
+
+const PerformanceMonitor = ({ analytics, showOverlay = false, position = 'bottom-right' }) => {
+    const dashboardRef = React.useRef(null);
+    const [dashboardData, setDashboardData] = React.useState(null);
+    React.useEffect(() => {
+        // Initialize dashboard
+        dashboardRef.current = new PerformanceDashboard(analytics);
+        // Add listener for updates
+        dashboardRef.current.addListener((data) => {
+            setDashboardData(data);
+        });
+        // Start monitoring
+        dashboardRef.current.startMonitoring();
+        // Cleanup
+        return () => {
+            if (dashboardRef.current) {
+                dashboardRef.current.stopMonitoring();
+            }
+        };
+    }, [analytics]);
+    // Get position styles
+    const getPositionStyles = () => {
+        const baseStyle = {
+            position: 'fixed',
+            zIndex: 9999,
+            background: 'rgba(0, 0, 0, 0.9)',
+            color: 'white',
+            padding: '12px',
+            borderRadius: '8px',
+            fontSize: '12px',
+            fontFamily: 'monospace',
+            minWidth: '250px',
+            maxWidth: '350px'
+        };
+        switch (position) {
+            case 'top-left':
+                return { ...baseStyle, top: '10px', left: '10px' };
+            case 'top-right':
+                return { ...baseStyle, top: '10px', right: '10px' };
+            case 'bottom-left':
+                return { ...baseStyle, bottom: '10px', left: '10px' };
+            case 'bottom-right':
+                return { ...baseStyle, bottom: '10px', right: '10px' };
+        }
+    };
+    // Get score color
+    const getScoreColor = (score) => {
+        if (score >= 90)
+            return '#4CAF50';
+        if (score >= 70)
+            return '#FFC107';
+        return '#F44336';
+    };
+    // Get FPS color
+    const getFPSColor = (fps) => {
+        if (fps >= 60)
+            return '#4CAF50';
+        if (fps >= 30)
+            return '#FFC107';
+        return '#F44336';
+    };
+    if (!dashboardData) {
+        return null;
+    }
+    if (!showOverlay) {
+        // Return data only, no UI
+        return (React.createElement("div", { style: { padding: '10px', background: '#f0f0f0', borderRadius: '4px' } },
+            React.createElement("h3", null, "Performance Metrics"),
+            React.createElement("div", null,
+                "Score: ",
+                React.createElement("strong", { style: { color: getScoreColor(dashboardData.overallScore) } },
+                    dashboardData.overallScore,
+                    "/100")),
+            React.createElement("div", null,
+                "FPS: ",
+                React.createElement("strong", { style: { color: getFPSColor(dashboardData.fps) } }, dashboardData.fps)),
+            React.createElement("div", null,
+                "Render Time: ",
+                React.createElement("strong", null,
+                    dashboardData.renderTime.toFixed(2),
+                    "ms")),
+            React.createElement("div", null,
+                "Memory: ",
+                React.createElement("strong", null,
+                    dashboardData.memoryUsage.toFixed(2),
+                    "MB")),
+            React.createElement("div", null,
+                "Network Latency: ",
+                React.createElement("strong", null,
+                    dashboardData.networkLatency.toFixed(2),
+                    "ms")),
+            React.createElement("h4", null, "Bottlenecks:"),
+            React.createElement("ul", null, dashboardData.bottlenecks.map((b, i) => (React.createElement("li", { key: i, style: { color: b.includes('CRITICAL') ? '#F44336' : '#FFC107' } }, b)))),
+            React.createElement("h4", null, "Recommendations:"),
+            React.createElement("ul", null, dashboardData.recommendations.map((r, i) => (React.createElement("li", { key: i }, r))))));
+    }
+    return (React.createElement("div", { style: getPositionStyles() },
+        React.createElement("div", { style: { marginBottom: '8px', fontWeight: 'bold', borderBottom: '1px solid #444', paddingBottom: '4px' } }, "\uD83D\uDCCA Performance Monitor"),
+        React.createElement("div", { style: { marginBottom: '4px' } },
+            "Score: ",
+            React.createElement("span", { style: { color: getScoreColor(dashboardData.overallScore), fontWeight: 'bold' } },
+                dashboardData.overallScore,
+                "/100")),
+        React.createElement("div", { style: { marginBottom: '4px' } },
+            "FPS: ",
+            React.createElement("span", { style: { color: getFPSColor(dashboardData.fps), fontWeight: 'bold' } }, dashboardData.fps)),
+        React.createElement("div", { style: { marginBottom: '4px' } },
+            "Render: ",
+            React.createElement("span", { style: { fontWeight: 'bold' } },
+                dashboardData.renderTime.toFixed(2),
+                "ms")),
+        React.createElement("div", { style: { marginBottom: '4px' } },
+            "Memory: ",
+            React.createElement("span", { style: { fontWeight: 'bold' } },
+                dashboardData.memoryUsage.toFixed(2),
+                "MB")),
+        React.createElement("div", { style: { marginBottom: '8px' } },
+            "Network: ",
+            React.createElement("span", { style: { fontWeight: 'bold' } },
+                dashboardData.networkLatency.toFixed(2),
+                "ms")),
+        dashboardData.bottlenecks.length > 0 && (React.createElement("div", { style: {
+                marginBottom: '8px',
+                padding: '4px',
+                background: 'rgba(255, 0, 0, 0.2)',
+                borderRadius: '4px',
+                fontSize: '10px'
+            } },
+            React.createElement("div", { style: { fontWeight: 'bold', marginBottom: '2px' } }, "\u26A0\uFE0F Bottlenecks:"),
+            dashboardData.bottlenecks.slice(0, 2).map((b, i) => (React.createElement("div", { key: i, style: { color: b.includes('CRITICAL') ? '#FF6B6B' : '#FFD93D' } }, b.length > 50 ? b.substring(0, 50) + '...' : b))))),
+        React.createElement("div", { style: { fontSize: '10px', color: '#888' } }, dashboardData.recommendations[0])));
+};
+
 exports.AdaptiveScrollView = AdaptiveScrollView;
 exports.IntelligentLazyList = IntelligentLazyList;
 exports.LazyList = LazyList;
+exports.PerformanceMonitor = PerformanceMonitor;
 exports.SmartInfiniteScroll = SmartInfiniteScroll;
 exports.useAdaptiveLoading = useAdaptiveLoading;
 exports.useIntelligentScroll = useIntelligentScroll;