@therealtinhtute/baroiplayer 1.0.7 → 1.1.0

package/dist/src/core/performance/performance-budgets.ts

@@ -1,432 +0,0 @@
-// Performance budget configuration
-export interface PerformanceBudget {
-  name: string;
-  category: 'bundle' | 'runtime' | 'network' | 'memory';
-  limit: number;
-  unit: 'bytes' | 'ms' | 'score' | 'percent';
-  severity: 'error' | 'warning' | 'info';
-  description: string;
-}
-
-// Performance budget violation
-export interface BudgetViolation {
-  budget: PerformanceBudget;
-  actualValue: number;
-  overageAmount: number;
-  overagePercentage: number;
-  timestamp: number;
-}
-
-// Alert configuration
-export interface AlertConfig {
-  enabled: boolean;
-  channels: AlertChannel[];
-  threshold: number; // Number of violations before alerting
-  cooldown: number; // Minimum time between alerts (ms)
-}
-
-export interface AlertChannel {
-  type: 'console' | 'webhook' | 'email' | 'slack';
-  config: {
-    url?: string;
-    email?: string;
-    token?: string;
-    channel?: string;
-  };
-}
-
-// Default performance budgets for media player
-export const defaultPerformanceBudgets: PerformanceBudget[] = [
-  // Bundle size budgets
-  {
-    name: 'Main Bundle Size (ESM)',
-    category: 'bundle',
-    limit: 250 * 1024, // 250KB
-    unit: 'bytes',
-    severity: 'error',
-    description: 'Main bundle should stay under 250KB for fast initial loading'
-  },
-  {
-    name: 'Main Bundle Size (CJS)',
-    category: 'bundle', 
-    limit: 200 * 1024, // 200KB
-    unit: 'bytes',
-    severity: 'error',
-    description: 'CJS bundle should be smaller due to better compression'
-  },
-  {
-    name: 'Core Module Size',
-    category: 'bundle',
-    limit: 15 * 1024, // 15KB
-    unit: 'bytes',
-    severity: 'warning',
-    description: 'Core architecture should remain lightweight'
-  },
-  {
-    name: 'Enhanced Components Size',
-    category: 'bundle',
-    limit: 40 * 1024, // 40KB
-    unit: 'bytes',
-    severity: 'warning',
-    description: 'Enhanced components bundle size'
-  },
-  
-  // Runtime performance budgets
-  {
-    name: 'Component Render Time',
-    category: 'runtime',
-    limit: 16, // 16ms for 60fps
-    unit: 'ms',
-    severity: 'error',
-    description: 'Component rendering should complete within one frame'
-  },
-  {
-    name: 'First Input Delay',
-    category: 'runtime',
-    limit: 100, // 100ms
-    unit: 'ms',
-    severity: 'error',
-    description: 'First Input Delay should be under 100ms for good UX'
-  },
-  {
-    name: 'Largest Contentful Paint',
-    category: 'runtime',
-    limit: 2500, // 2.5s
-    unit: 'ms',
-    severity: 'warning',
-    description: 'LCP should be under 2.5s for good Core Web Vitals score'
-  },
-  {
-    name: 'Cumulative Layout Shift',
-    category: 'runtime',
-    limit: 0.1,
-    unit: 'score',
-    severity: 'warning',
-    description: 'CLS should be under 0.1 for good visual stability'
-  },
-  
-  // Memory budgets
-  {
-    name: 'Memory Usage',
-    category: 'memory',
-    limit: 50 * 1024 * 1024, // 50MB
-    unit: 'bytes',
-    severity: 'warning',
-    description: 'Memory usage should stay under 50MB for good performance'
-  },
-  {
-    name: 'Memory Increase Per Operation',
-    category: 'memory',
-    limit: 1024 * 1024, // 1MB
-    unit: 'bytes',
-    severity: 'error',
-    description: 'Each operation should not increase memory by more than 1MB'
-  },
-  
-  // Network budgets (for media loading)
-  {
-    name: 'Media Load Time',
-    category: 'network',
-    limit: 3000, // 3s
-    unit: 'ms',
-    severity: 'warning',
-    description: 'Media should start loading within 3 seconds'
-  }
-];
-
-// Performance budget monitor
-export class PerformanceBudgetMonitor {
-  private budgets: Map<string, PerformanceBudget> = new Map();
-  private violations: BudgetViolation[] = [];
-  private alertConfig: AlertConfig;
-  private lastAlertTime = 0;
-
-  constructor(
-    budgets: PerformanceBudget[] = defaultPerformanceBudgets,
-    alertConfig: AlertConfig = {
-      enabled: true,
-      channels: [{ type: 'console', config: {} }],
-      threshold: 1,
-      cooldown: 5 * 60 * 1000 // 5 minutes
-    }
-  ) {
-    budgets.forEach(budget => {
-      this.budgets.set(budget.name, budget);
-    });
-    this.alertConfig = alertConfig;
-  }
-
-  // Check a single metric against budgets
-  checkMetric(
-    metricName: string,
-    value: number,
-    category: PerformanceBudget['category'] = 'runtime'
-  ): BudgetViolation[] {
-    const violations: BudgetViolation[] = [];
-    
-    for (const [name, budget] of this.budgets) {
-      if (budget.category === category && 
-          (name.includes(metricName) || metricName.includes(name.split(' ')[0]?.toLowerCase() || ''))) {
-        
-        if (value > budget.limit) {
-          const violation: BudgetViolation = {
-            budget,
-            actualValue: value,
-            overageAmount: value - budget.limit,
-            overagePercentage: ((value - budget.limit) / budget.limit) * 100,
-            timestamp: Date.now()
-          };
-          
-          violations.push(violation);
-          this.violations.push(violation);
-        }
-      }
-    }
-
-    if (violations.length > 0) {
-      this.handleViolations(violations);
-    }
-
-    return violations;
-  }
-
-  // Check bundle sizes
-  async checkBundleSizes(distPath: string): Promise<BudgetViolation[]> {
-    const violations: BudgetViolation[] = [];
-    
-    // Only check bundle sizes in Node.js environment
-    if (typeof window !== 'undefined' || typeof process === 'undefined') {
-      console.warn('Bundle size checking is only available in Node.js environment');
-      return violations;
-    }
-    
-    // Bundle size checking is disabled in browser environments
-    console.warn('Bundle size checking disabled - use Node.js cicdIntegration from @rp/baroiplayer/core/performance/cicd for CI/CD environments');
-
-    return violations;
-  }
-
-  // Check runtime performance
-  checkRuntimeMetrics(metrics: {
-    renderTime?: number;
-    fid?: number;
-    lcp?: number;
-    cls?: number;
-    memoryUsage?: number;
-    mediaLoadTime?: number;
-  }): BudgetViolation[] {
-    const allViolations: BudgetViolation[] = [];
-
-    if (metrics.renderTime !== undefined) {
-      allViolations.push(...this.checkMetric('Component Render Time', metrics.renderTime, 'runtime'));
-    }
-    
-    if (metrics.fid !== undefined) {
-      allViolations.push(...this.checkMetric('First Input Delay', metrics.fid, 'runtime'));
-    }
-    
-    if (metrics.lcp !== undefined) {
-      allViolations.push(...this.checkMetric('Largest Contentful Paint', metrics.lcp, 'runtime'));
-    }
-    
-    if (metrics.cls !== undefined) {
-      allViolations.push(...this.checkMetric('Cumulative Layout Shift', metrics.cls, 'runtime'));
-    }
-    
-    if (metrics.memoryUsage !== undefined) {
-      allViolations.push(...this.checkMetric('Memory Usage', metrics.memoryUsage, 'memory'));
-    }
-    
-    if (metrics.mediaLoadTime !== undefined) {
-      allViolations.push(...this.checkMetric('Media Load Time', metrics.mediaLoadTime, 'network'));
-    }
-
-    return allViolations;
-  }
-
-  // Handle budget violations
-  private async handleViolations(violations: BudgetViolation[]) {
-    if (!this.alertConfig.enabled) return;
-    
-    const now = Date.now();
-    const errorViolations = violations.filter(v => v.budget.severity === 'error');
-    
-    // Check if we should send an alert based on threshold and cooldown
-    if (errorViolations.length >= this.alertConfig.threshold &&
-        now - this.lastAlertTime >= this.alertConfig.cooldown) {
-      
-      await this.sendAlerts(violations);
-      this.lastAlertTime = now;
-    }
-  }
-
-  // Send alerts through configured channels
-  private async sendAlerts(violations: BudgetViolation[]) {
-    const message = this.formatAlertMessage(violations);
-    
-    for (const channel of this.alertConfig.channels) {
-      try {
-        await this.sendAlert(channel, message);
-      } catch (error) {
-        console.error(`Failed to send alert via ${channel.type}:`, error);
-      }
-    }
-  }
-
-  // Format alert message
-  private formatAlertMessage(violations: BudgetViolation[]): string {
-    let message = `🚨 Performance Budget Violations Detected!\n\n`;
-    
-    violations.forEach(violation => {
-      const { budget, actualValue, overageAmount, overagePercentage } = violation;
-      const unit = this.getUnitDisplay(budget.unit);
-      
-      message += `❌ ${budget.name}\n`;
-      message += `   Limit: ${this.formatValue(budget.limit, budget.unit)}\n`;
-      message += `   Actual: ${this.formatValue(actualValue, budget.unit)}\n`;
-      message += `   Overage: ${this.formatValue(overageAmount, budget.unit)} (+${overagePercentage.toFixed(1)}%)\n`;
-      message += `   Severity: ${budget.severity.toUpperCase()}\n\n`;
-    });
-    
-    message += `Time: ${new Date().toISOString()}\n`;
-    message += `Total Violations: ${violations.length}`;
-    
-    return message;
-  }
-
-  // Send alert to specific channel
-  private async sendAlert(channel: AlertChannel, message: string) {
-    switch (channel.type) {
-      case 'console':
-        console.error(message);
-        break;
-        
-      case 'webhook':
-        if (channel.config.url) {
-          const response = await fetch(channel.config.url, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ text: message, timestamp: Date.now() })
-          });
-          if (!response.ok) {
-            throw new Error(`Webhook failed: ${response.status}`);
-          }
-        }
-        break;
-        
-      case 'slack':
-        if (channel.config.url) {
-          const response = await fetch(channel.config.url, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-              text: message,
-              channel: channel.config.channel,
-              username: 'BaroiPlayer Performance Monitor'
-            })
-          });
-          if (!response.ok) {
-            throw new Error(`Slack webhook failed: ${response.status}`);
-          }
-        }
-        break;
-        
-      default:
-        console.warn(`Unsupported alert channel: ${channel.type}`);
-    }
-  }
-
-  // Helper methods
-  private formatValue(value: number, unit: PerformanceBudget['unit']): string {
-    switch (unit) {
-      case 'bytes':
-        return this.formatBytes(value);
-      case 'ms':
-        return `${value.toFixed(2)}ms`;
-      case 'score':
-        return value.toFixed(3);
-      case 'percent':
-        return `${value.toFixed(1)}%`;
-      default:
-        return value.toString();
-    }
-  }
-
-  private formatBytes(bytes: number): string {
-    if (bytes >= 1024 * 1024) {
-      return `${(bytes / 1024 / 1024).toFixed(2)}MB`;
-    }
-    if (bytes >= 1024) {
-      return `${(bytes / 1024).toFixed(2)}KB`;
-    }
-    return `${bytes}B`;
-  }
-
-  private getUnitDisplay(unit: PerformanceBudget['unit']): string {
-    const displays = {
-      'bytes': 'bytes',
-      'ms': 'milliseconds', 
-      'score': 'score',
-      'percent': 'percent'
-    };
-    return displays[unit] || unit;
-  }
-
-  // Management methods
-  addBudget(budget: PerformanceBudget) {
-    this.budgets.set(budget.name, budget);
-  }
-
-  removeBudget(name: string) {
-    this.budgets.delete(name);
-  }
-
-  updateBudget(name: string, updates: Partial<PerformanceBudget>) {
-    const existing = this.budgets.get(name);
-    if (existing) {
-      this.budgets.set(name, { ...existing, ...updates });
-    }
-  }
-
-  getBudgets(): PerformanceBudget[] {
-    return Array.from(this.budgets.values());
-  }
-
-  getViolations(since?: number): BudgetViolation[] {
-    if (since) {
-      return this.violations.filter(v => v.timestamp >= since);
-    }
-    return [...this.violations];
-  }
-
-  clearViolations() {
-    this.violations = [];
-  }
-
-  getViolationSummary(): {
-    total: number;
-    byCategory: Record<string, number>;
-    bySeverity: Record<string, number>;
-  } {
-    const byCategory: Record<string, number> = {};
-    const bySeverity: Record<string, number> = {};
-
-    this.violations.forEach(violation => {
-      const category = violation.budget.category;
-      const severity = violation.budget.severity;
-      
-      byCategory[category] = (byCategory[category] || 0) + 1;
-      bySeverity[severity] = (bySeverity[severity] || 0) + 1;
-    });
-
-    return {
-      total: this.violations.length,
-      byCategory,
-      bySeverity
-    };
-  }
-}
-
-// Global performance budget monitor
-export const performanceBudgetMonitor = new PerformanceBudgetMonitor();
-

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

@@ -1,95 +0,0 @@
-import React from 'react';
-export interface PerformanceMetrics {
-    lcp?: number;
-    fid?: number;
-    cls?: number;
-    fcp?: number;
-    ttfb?: number;
-    inp?: number;
-    componentRenderTime: number;
-    bundleLoadTime: number;
-    mediaLoadTime: number;
-    memoryUsage: number;
-    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 declare const defaultThresholds: PerformanceThresholds;
-export declare class PerformanceMonitor {
-    private metrics;
-    private listeners;
-    private thresholds;
-    private observer?;
-    private isMonitoring;
-    constructor(thresholds?: PerformanceThresholds);
-    private initializeWebVitals;
-    private initializePerformanceObserver;
-    private handlePerformanceEntry;
-    private updateMetric;
-    private getCurrentMetrics;
-    private getMemoryUsage;
-    private calculatePerformanceScore;
-    startMonitoring(): void;
-    stopMonitoring(): void;
-    private startMemoryMonitoring;
-    measureComponentRender(componentName: string, renderFn: () => any): any;
-    subscribe(listener: (metrics: PerformanceMetrics) => void): () => void;
-    getLatestMetrics(): PerformanceMetrics | null;
-    getAllMetrics(): PerformanceMetrics[];
-    getAverageMetrics(count?: number): Partial<PerformanceMetrics>;
-    getThresholds(): PerformanceThresholds;
-    updateThresholds(newThresholds: Partial<PerformanceThresholds>): void;
-}
-export declare const performanceMonitor: PerformanceMonitor;
-export declare function usePerformanceMonitor(): {
-    metrics: PerformanceMetrics | null;
-    isSupported: boolean;
-    measureRender: (componentName: string, renderFn: () => any) => any;
-    averageMetrics: Partial<PerformanceMetrics>;
-    allMetrics: PerformanceMetrics[];
-    thresholds: PerformanceThresholds;
-};
-export declare function withPerformanceMonitoring(WrappedComponent: React.ComponentType<any>, componentName?: string): {
-    (props: any): any;
-    displayName: string;
-};
-export declare class PerformanceRegressionDetector {
-    private baselineMetrics;
-    private regressionThreshold;
-    setBaseline(metrics: PerformanceMetrics): void;
-    detectRegression(currentMetrics: PerformanceMetrics): Array<{
-        metric: keyof PerformanceMetrics;
-        baseline: number;
-        current: number;
-        degradation: number;
-    }>;
-    setRegressionThreshold(threshold: number): void;
-}
-export interface PerformanceDashboardProps {
-    className?: string;
-    showAdvanced?: boolean;
-}
-export declare function PerformanceDashboard({ className, showAdvanced }: PerformanceDashboardProps): import("react/jsx-runtime").JSX.Element;
-export default PerformanceMonitor;
-//# sourceMappingURL=performance-monitor.d.ts.map