@therealtinhtute/baroiplayer 1.0.0 → 1.0.2

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

package/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/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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"}