@therealtinhtute/baroiplayer 1.0.0 → 1.0.1

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

@@ -0,0 +1,326 @@
+// Default performance budgets for media player
+export const defaultPerformanceBudgets = [
+    // 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 {
+    budgets = new Map();
+    violations = [];
+    alertConfig;
+    lastAlertTime = 0;
+    constructor(budgets = defaultPerformanceBudgets, 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, value, category = 'runtime') {
+        const violations = [];
+        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 = {
+                        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) {
+        const violations = [];
+        // 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) {
+        const allViolations = [];
+        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
+    async handleViolations(violations) {
+        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
+    async sendAlerts(violations) {
+        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
+    formatAlertMessage(violations) {
+        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
+    async sendAlert(channel, message) {
+        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
+    formatValue(value, unit) {
+        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();
+        }
+    }
+    formatBytes(bytes) {
+        if (bytes >= 1024 * 1024) {
+            return `${(bytes / 1024 / 1024).toFixed(2)}MB`;
+        }
+        if (bytes >= 1024) {
+            return `${(bytes / 1024).toFixed(2)}KB`;
+        }
+        return `${bytes}B`;
+    }
+    getUnitDisplay(unit) {
+        const displays = {
+            'bytes': 'bytes',
+            'ms': 'milliseconds',
+            'score': 'score',
+            'percent': 'percent'
+        };
+        return displays[unit] || unit;
+    }
+    // Management methods
+    addBudget(budget) {
+        this.budgets.set(budget.name, budget);
+    }
+    removeBudget(name) {
+        this.budgets.delete(name);
+    }
+    updateBudget(name, updates) {
+        const existing = this.budgets.get(name);
+        if (existing) {
+            this.budgets.set(name, { ...existing, ...updates });
+        }
+    }
+    getBudgets() {
+        return Array.from(this.budgets.values());
+    }
+    getViolations(since) {
+        if (since) {
+            return this.violations.filter(v => v.timestamp >= since);
+        }
+        return [...this.violations];
+    }
+    clearViolations() {
+        this.violations = [];
+    }
+    getViolationSummary() {
+        const byCategory = {};
+        const bySeverity = {};
+        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();