@therealtinhtute/baroiplayer 1.0.0

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

@@ -0,0 +1,432 @@
+// 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();
+