@therealtinhtute/baroiplayer 1.0.8 → 1.2.0

package/dist/src/core/performance/performance-monitor.tsx

@@ -1,476 +0,0 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
-// Import type safely with fallback
-type ReportHandler = (metric: { name: string; value: number }) => void;
-
-// Performance metrics types
-export interface PerformanceMetrics {
-  // Core Web Vitals
-  lcp?: number; // Largest Contentful Paint
-  fid?: number; // First Input Delay  
-  cls?: number; // Cumulative Layout Shift
-  fcp?: number; // First Contentful Paint
-  ttfb?: number; // Time to First Byte
-  inp?: number; // Interaction to Next Paint
-
-  // Custom metrics
-  componentRenderTime: number;
-  bundleLoadTime: number;
-  mediaLoadTime: number;
-  memoryUsage: number;
-  
-  // Performance scores
-  performanceScore: number;
-  timestamp: number;
-}
-
-export interface PerformanceThresholds {
-  lcp: { good: number; poor: number };
-  fid: { good: number; poor: number };
-  cls: { good: number; poor: number };
-  renderTime: { good: number; poor: number };
-  memoryUsage: { good: number; poor: number };
-}
-
-export const defaultThresholds: PerformanceThresholds = {
-  lcp: { good: 2500, poor: 4000 },
-  fid: { good: 100, poor: 300 },
-  cls: { good: 0.1, poor: 0.25 },
-  renderTime: { good: 16, poor: 100 }, // Target 60fps = 16.67ms per frame
-  memoryUsage: { good: 50 * 1024 * 1024, poor: 100 * 1024 * 1024 } // 50MB good, 100MB poor
-};
-
-// Performance monitoring class
-export class PerformanceMonitor {
-  private metrics: PerformanceMetrics[] = [];
-  private listeners: Set<(metrics: PerformanceMetrics) => void> = new Set();
-  private thresholds: PerformanceThresholds;
-  private observer?: PerformanceObserver;
-  private isMonitoring = false;
-
-  constructor(thresholds: PerformanceThresholds = defaultThresholds) {
-    this.thresholds = thresholds;
-    this.initializeWebVitals();
-    this.initializePerformanceObserver();
-  }
-
-  private async initializeWebVitals() {
-    if (typeof window === 'undefined') return;
-    
-    try {
-      // Try to import web-vitals dynamically and handle different versions
-      const webVitals = await import('web-vitals').catch(() => null);
-      
-      if (!webVitals) {
-        console.warn('web-vitals package not available, Core Web Vitals tracking disabled');
-        return;
-      }
-      
-      const reportHandler: ReportHandler = (metric) => {
-        this.updateMetric(metric.name.toLowerCase() as keyof PerformanceMetrics, metric.value);
-      };
-
-      // Handle different web-vitals versions safely
-      const vitalsAny = webVitals as any;
-      if (vitalsAny.getCLS) vitalsAny.getCLS(reportHandler);
-      if (vitalsAny.getFID) vitalsAny.getFID(reportHandler);
-      if (vitalsAny.getFCP) vitalsAny.getFCP(reportHandler);
-      if (vitalsAny.getLCP) vitalsAny.getLCP(reportHandler);
-      if (vitalsAny.getTTFB) vitalsAny.getTTFB(reportHandler);
-      if (vitalsAny.onINP) vitalsAny.onINP(reportHandler);
-    } catch (error) {
-      console.warn('Web Vitals initialization failed:', error);
-    }
-  }
-
-  private initializePerformanceObserver() {
-    if (typeof window === 'undefined' || !('PerformanceObserver' in window)) return;
-
-    try {
-      this.observer = new PerformanceObserver((list) => {
-        for (const entry of list.getEntries()) {
-          this.handlePerformanceEntry(entry);
-        }
-      });
-
-      this.observer.observe({ entryTypes: ['measure', 'navigation', 'resource', 'paint'] });
-    } catch (error) {
-      console.warn('PerformanceObserver not supported:', error);
-    }
-  }
-
-  private handlePerformanceEntry(entry: PerformanceEntry) {
-    switch (entry.entryType) {
-      case 'measure':
-        if (entry.name.startsWith('baroiplayer-render')) {
-          this.updateMetric('componentRenderTime', entry.duration);
-        }
-        break;
-        
-      case 'resource':
-        if (entry.name.includes('.js') || entry.name.includes('.css')) {
-          this.updateMetric('bundleLoadTime', entry.duration);
-        }
-        break;
-        
-      case 'paint':
-        if (entry.name === 'first-contentful-paint') {
-          this.updateMetric('fcp', entry.startTime);
-        }
-        break;
-    }
-  }
-
-  private updateMetric(key: keyof PerformanceMetrics, value: number) {
-    const currentMetrics = this.getCurrentMetrics();
-    const updatedMetrics = {
-      ...currentMetrics,
-      [key]: value,
-      timestamp: Date.now(),
-      performanceScore: this.calculatePerformanceScore({ ...currentMetrics, [key]: value })
-    };
-
-    this.metrics.push(updatedMetrics);
-    
-    // Keep only last 100 metrics
-    if (this.metrics.length > 100) {
-      this.metrics = this.metrics.slice(-100);
-    }
-
-    this.listeners.forEach(listener => listener(updatedMetrics));
-  }
-
-  private getCurrentMetrics(): PerformanceMetrics {
-    const latest = this.metrics[this.metrics.length - 1];
-    return latest || {
-      componentRenderTime: 0,
-      bundleLoadTime: 0,
-      mediaLoadTime: 0,
-      memoryUsage: this.getMemoryUsage(),
-      performanceScore: 0,
-      timestamp: Date.now()
-    };
-  }
-
-  private getMemoryUsage(): number {
-    if ('memory' in performance) {
-      return (performance as any).memory.usedJSHeapSize || 0;
-    }
-    return 0;
-  }
-
-  private calculatePerformanceScore(metrics: PerformanceMetrics): number {
-    let score = 100;
-    
-    // Penalize based on thresholds
-    if (metrics.lcp && metrics.lcp > this.thresholds.lcp.good) {
-      score -= metrics.lcp > this.thresholds.lcp.poor ? 30 : 15;
-    }
-    
-    if (metrics.fid && metrics.fid > this.thresholds.fid.good) {
-      score -= metrics.fid > this.thresholds.fid.poor ? 25 : 10;
-    }
-    
-    if (metrics.cls && metrics.cls > this.thresholds.cls.good) {
-      score -= metrics.cls > this.thresholds.cls.poor ? 20 : 10;
-    }
-    
-    if (metrics.componentRenderTime > this.thresholds.renderTime.good) {
-      score -= metrics.componentRenderTime > this.thresholds.renderTime.poor ? 20 : 10;
-    }
-    
-    if (metrics.memoryUsage > this.thresholds.memoryUsage.good) {
-      score -= metrics.memoryUsage > this.thresholds.memoryUsage.poor ? 15 : 5;
-    }
-
-    return Math.max(0, score);
-  }
-
-  // Public API
-  public startMonitoring() {
-    this.isMonitoring = true;
-    this.startMemoryMonitoring();
-  }
-
-  public stopMonitoring() {
-    this.isMonitoring = false;
-    if (this.observer) {
-      this.observer.disconnect();
-    }
-  }
-
-  private startMemoryMonitoring() {
-    if (!this.isMonitoring) return;
-    
-    this.updateMetric('memoryUsage', this.getMemoryUsage());
-    setTimeout(() => this.startMemoryMonitoring(), 5000); // Check every 5 seconds
-  }
-
-  public measureComponentRender(componentName: string, renderFn: () => any): any {
-    const startMark = `baroiplayer-render-${componentName}-start`;
-    const endMark = `baroiplayer-render-${componentName}-end`;
-    const measureName = `baroiplayer-render-${componentName}`;
-
-    performance.mark(startMark);
-    const result = renderFn();
-    performance.mark(endMark);
-    
-    try {
-      performance.measure(measureName, startMark, endMark);
-    } catch (error) {
-      console.warn('Performance measurement failed:', error);
-    }
-
-    return result;
-  }
-
-  public subscribe(listener: (metrics: PerformanceMetrics) => void): () => void {
-    this.listeners.add(listener);
-    return () => this.listeners.delete(listener);
-  }
-
-  public getLatestMetrics(): PerformanceMetrics | null {
-    return this.metrics[this.metrics.length - 1] || null;
-  }
-
-  public getAllMetrics(): PerformanceMetrics[] {
-    return [...this.metrics];
-  }
-
-  public getAverageMetrics(count = 10): Partial<PerformanceMetrics> {
-    const recentMetrics = this.metrics.slice(-count);
-    if (recentMetrics.length === 0) return {};
-
-    const averages: Partial<PerformanceMetrics> = {};
-    const keys: Array<keyof PerformanceMetrics> = [
-      'lcp', 'fid', 'cls', 'fcp', 'ttfb', 'inp',
-      'componentRenderTime', 'bundleLoadTime', 'mediaLoadTime',
-      'memoryUsage', 'performanceScore'
-    ];
-
-    keys.forEach(key => {
-      const values = recentMetrics
-        .map(m => m[key] as number)
-        .filter(v => typeof v === 'number' && !isNaN(v));
-      
-      if (values.length > 0) {
-        (averages as any)[key] = values.reduce((sum, v) => sum + v, 0) / values.length;
-      }
-    });
-
-    return averages;
-  }
-
-  public getThresholds(): PerformanceThresholds {
-    return this.thresholds;
-  }
-
-  public updateThresholds(newThresholds: Partial<PerformanceThresholds>) {
-    this.thresholds = { ...this.thresholds, ...newThresholds };
-  }
-}
-
-// Global performance monitor instance
-export const performanceMonitor = new PerformanceMonitor();
-
-// React hook for performance monitoring
-export function usePerformanceMonitor() {
-  const [metrics, setMetrics] = useState<PerformanceMetrics | null>(null);
-  const [isSupported, setIsSupported] = useState(true);
-
-  useEffect(() => {
-    setIsSupported(typeof window !== 'undefined' && 'performance' in window);
-    
-    if (!isSupported) return;
-
-    performanceMonitor.startMonitoring();
-    const unsubscribe = performanceMonitor.subscribe(setMetrics);
-
-    return () => {
-      unsubscribe();
-      performanceMonitor.stopMonitoring();
-    };
-  }, [isSupported]);
-
-  const measureRender = useCallback(
-    (componentName: string, renderFn: () => any): any => {
-      return performanceMonitor.measureComponentRender(componentName, renderFn);
-    },
-    []
-  );
-
-  return {
-    metrics,
-    isSupported,
-    measureRender,
-    averageMetrics: performanceMonitor.getAverageMetrics(),
-    allMetrics: performanceMonitor.getAllMetrics(),
-    thresholds: performanceMonitor.getThresholds()
-  };
-}
-
-// HOC for performance monitoring
-export function withPerformanceMonitoring(
-  WrappedComponent: React.ComponentType<any>,
-  componentName?: string
-) {
-  const displayName = componentName || WrappedComponent.displayName || WrappedComponent.name || 'Component';
-  
-  function PerformanceMonitoredComponent(props: any) {
-    const renderRef = useRef(0);
-    const { measureRender } = usePerformanceMonitor();
-
-    return measureRender(`${displayName}-${renderRef.current++}`, () => (
-      <WrappedComponent {...props} />
-    ));
-  }
-
-  PerformanceMonitoredComponent.displayName = `withPerformanceMonitoring(${displayName})`;
-  return PerformanceMonitoredComponent;
-}
-
-// Performance regression detector
-export class PerformanceRegressionDetector {
-  private baselineMetrics: PerformanceMetrics | null = null;
-  private regressionThreshold = 0.2; // 20% degradation threshold
-
-  setBaseline(metrics: PerformanceMetrics) {
-    this.baselineMetrics = metrics;
-  }
-
-  detectRegression(currentMetrics: PerformanceMetrics): Array<{
-    metric: keyof PerformanceMetrics;
-    baseline: number;
-    current: number;
-    degradation: number;
-  }> {
-    if (!this.baselineMetrics) return [];
-
-    const regressions: Array<{
-      metric: keyof PerformanceMetrics;
-      baseline: number;
-      current: number;
-      degradation: number;
-    }> = [];
-
-    const metricsToCheck: Array<keyof PerformanceMetrics> = [
-      'componentRenderTime', 'bundleLoadTime', 'mediaLoadTime', 'memoryUsage'
-    ];
-
-    metricsToCheck.forEach(metric => {
-      const baseline = this.baselineMetrics![metric] as number;
-      const current = currentMetrics[metric] as number;
-      
-      if (baseline && current && baseline > 0) {
-        const degradation = (current - baseline) / baseline;
-        if (degradation > this.regressionThreshold) {
-          regressions.push({ metric, baseline, current, degradation });
-        }
-      }
-    });
-
-    return regressions;
-  }
-
-  setRegressionThreshold(threshold: number) {
-    this.regressionThreshold = Math.max(0, Math.min(1, threshold));
-  }
-}
-
-// Development dashboard component
-export interface PerformanceDashboardProps {
-  className?: string;
-  showAdvanced?: boolean;
-}
-
-export function PerformanceDashboard({ 
-  className = '', 
-  showAdvanced = false 
-}: PerformanceDashboardProps) {
-  const { metrics, averageMetrics, thresholds, isSupported } = usePerformanceMonitor();
-
-  if (!isSupported || !metrics) {
-    return (
-      <div className={`performance-dashboard ${className}`}>
-        <p>Performance monitoring not supported in this environment</p>
-      </div>
-    );
-  }
-
-  const getScoreColor = (score: number) => {
-    if (score >= 90) return 'text-green-600';
-    if (score >= 70) return 'text-yellow-600';
-    return 'text-red-600';
-  };
-
-  const formatBytes = (bytes: number) => {
-    return `${(bytes / 1024 / 1024).toFixed(2)} MB`;
-  };
-
-  return (
-    <div className={`performance-dashboard rounded-lg bg-white p-4 shadow ${className}`}>
-      <h3 className="mb-4 font-semibold text-lg">Performance Dashboard</h3>
-      
-      {/* Performance Score */}
-      <div className="mb-4">
-        <div className="flex items-center justify-between">
-          <span>Performance Score</span>
-          <span className={`font-bold ${getScoreColor(metrics.performanceScore)}`}>
-            {metrics.performanceScore.toFixed(0)}
-          </span>
-        </div>
-        <div className="mt-1 h-2 w-full rounded-full bg-gray-200">
-          <div 
-            className={`h-2 rounded-full transition-all duration-300 ${
-              metrics.performanceScore >= 90 ? 'bg-green-500' :
-              metrics.performanceScore >= 70 ? 'bg-yellow-500' : 'bg-red-500'
-            }`}
-            style={{ width: `${metrics.performanceScore}%` }}
-          />
-        </div>
-      </div>
-
-      {/* Core Web Vitals */}
-      <div className="mb-4 grid grid-cols-2 gap-4">
-        <div>
-          <h4 className="mb-2 font-medium">Core Web Vitals</h4>
-          <div className="space-y-1 text-sm">
-            {metrics.lcp && (
-              <div>LCP: {metrics.lcp.toFixed(0)}ms</div>
-            )}
-            {metrics.fid && (
-              <div>FID: {metrics.fid.toFixed(0)}ms</div>
-            )}
-            {metrics.cls && (
-              <div>CLS: {metrics.cls.toFixed(3)}</div>
-            )}
-          </div>
-        </div>
-        
-        <div>
-          <h4 className="mb-2 font-medium">Custom Metrics</h4>
-          <div className="space-y-1 text-sm">
-            <div>Render: {metrics.componentRenderTime.toFixed(2)}ms</div>
-            <div>Memory: {formatBytes(metrics.memoryUsage)}</div>
-            {metrics.bundleLoadTime > 0 && (
-              <div>Bundle: {metrics.bundleLoadTime.toFixed(0)}ms</div>
-            )}
-          </div>
-        </div>
-      </div>
-
-      {/* Advanced metrics */}
-      {showAdvanced && (
-        <div>
-          <h4 className="mb-2 font-medium">Advanced Metrics</h4>
-          <div className="space-y-1 text-sm">
-            <div>Average Render Time: {(averageMetrics.componentRenderTime || 0).toFixed(2)}ms</div>
-            <div>Average Memory: {formatBytes(averageMetrics.memoryUsage || 0)}</div>
-            <div>Average Score: {(averageMetrics.performanceScore || 0).toFixed(0)}</div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default PerformanceMonitor;

package/dist/src/core/performance/performance-testing.d.ts

@@ -1,69 +0,0 @@
-import { PerformanceRegressionDetector } from './performance-monitor';
-import type { PerformanceMetrics } from './performance-monitor';
-export interface PerformanceTestConfig {
-    name: string;
-    iterations: number;
-    warmupIterations: number;
-    timeout: number;
-    expectedThreshold: {
-        renderTime: number;
-        memoryUsage: number;
-    };
-}
-export interface PerformanceTestResult {
-    testName: string;
-    passed: boolean;
-    metrics: {
-        averageRenderTime: number;
-        minRenderTime: number;
-        maxRenderTime: number;
-        memoryUsage: number;
-        iterations: number;
-    };
-    threshold: PerformanceTestConfig['expectedThreshold'];
-    error?: string;
-}
-export declare class PerformanceBenchmark {
-    private results;
-    private regressionDetector;
-    runTest(config: PerformanceTestConfig, testFunction: () => any | Promise<any>): Promise<PerformanceTestResult>;
-    private getMemoryUsage;
-    testComponentRender(componentName: string, renderFunction: () => any, expectedRenderTime?: number): Promise<PerformanceTestResult>;
-    testBundleLoading(bundlePath: string, expectedLoadTime?: number): Promise<PerformanceTestResult>;
-    testMemoryLeaks(testFunction: () => any, iterations?: number): Promise<PerformanceTestResult>;
-    testInteractionDelay(interactionFunction: () => any, expectedDelay?: number): Promise<PerformanceTestResult>;
-    runRegressionTests(currentMetrics: PerformanceMetrics, baselineMetrics?: PerformanceMetrics): Promise<{
-        passed: boolean;
-        regressions: ReturnType<PerformanceRegressionDetector['detectRegression']>;
-    }>;
-    getResults(): PerformanceTestResult[];
-    getSummary(): {
-        totalTests: number;
-        passedTests: number;
-        failedTests: number;
-        passRate: number;
-    };
-    clearResults(): void;
-    generateReport(): string;
-}
-export declare const performanceBenchmark: PerformanceBenchmark;
-export declare const performanceTestUtils: {
-    testComponent(Component: any, props?: any, expectedRenderTime?: number): Promise<PerformanceTestResult>;
-    testHook(hookFunction: () => any, hookName: string, expectedExecutionTime?: number): Promise<PerformanceTestResult>;
-    testAsyncOperation(operation: () => Promise<any>, operationName: string, expectedTime?: number): Promise<PerformanceTestResult>;
-    measureBundleImpact(beforeFunction: () => void, afterFunction: () => void, featureName: string): Promise<{
-        bundleIncrease: number;
-        memoryIncrease: number;
-        renderTimeImpact: number;
-    }>;
-};
-export declare class PerformanceTestFramework {
-    private benchmark;
-    private suites;
-    registerSuite(suiteName: string, tests: PerformanceTestConfig[]): void;
-    runSuite(suiteName: string, testImplementations: Map<string, () => any>): Promise<PerformanceTestResult[]>;
-    runAllSuites(implementations: Map<string, Map<string, () => any>>): Promise<Map<string, PerformanceTestResult[]>>;
-    generateComprehensiveReport(): string;
-}
-export declare const performanceTestFramework: PerformanceTestFramework;
-//# sourceMappingURL=performance-testing.d.ts.map