@therealtinhtute/baroiplayer 1.0.0 → 1.0.2

package/dist/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();
+

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"performance-monitor.d.ts","sourceRoot":"","sources":["performance-monitor.tsx"],"names":[],"mappings":"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"}