@therealtinhtute/baroiplayer 1.0.6 → 1.0.7

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

@@ -1,326 +0,0 @@
-// 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.js

@@ -1,297 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useRef, useCallback } from 'react';
-export const defaultThresholds = {
-    lcp: { good: 2500, poor: 4000 },
-    fid: { good: 100, poor: 300 },
-    cls: { good: 0.1, poor: 0.25 },
-    renderTime: { good: 16, poor: 100 }, // Target 60fps = 16.67ms per frame
-    memoryUsage: { good: 50 * 1024 * 1024, poor: 100 * 1024 * 1024 } // 50MB good, 100MB poor
-};
-// Performance monitoring class
-export class PerformanceMonitor {
-    metrics = [];
-    listeners = new Set();
-    thresholds;
-    observer;
-    isMonitoring = false;
-    constructor(thresholds = defaultThresholds) {
-        this.thresholds = thresholds;
-        this.initializeWebVitals();
-        this.initializePerformanceObserver();
-    }
-    async initializeWebVitals() {
-        if (typeof window === 'undefined')
-            return;
-        try {
-            // Try to import web-vitals dynamically and handle different versions
-            const webVitals = await import('web-vitals').catch(() => null);
-            if (!webVitals) {
-                console.warn('web-vitals package not available, Core Web Vitals tracking disabled');
-                return;
-            }
-            const reportHandler = (metric) => {
-                this.updateMetric(metric.name.toLowerCase(), metric.value);
-            };
-            // Handle different web-vitals versions safely
-            const vitalsAny = webVitals;
-            if (vitalsAny.getCLS)
-                vitalsAny.getCLS(reportHandler);
-            if (vitalsAny.getFID)
-                vitalsAny.getFID(reportHandler);
-            if (vitalsAny.getFCP)
-                vitalsAny.getFCP(reportHandler);
-            if (vitalsAny.getLCP)
-                vitalsAny.getLCP(reportHandler);
-            if (vitalsAny.getTTFB)
-                vitalsAny.getTTFB(reportHandler);
-            if (vitalsAny.onINP)
-                vitalsAny.onINP(reportHandler);
-        }
-        catch (error) {
-            console.warn('Web Vitals initialization failed:', error);
-        }
-    }
-    initializePerformanceObserver() {
-        if (typeof window === 'undefined' || !('PerformanceObserver' in window))
-            return;
-        try {
-            this.observer = new PerformanceObserver((list) => {
-                for (const entry of list.getEntries()) {
-                    this.handlePerformanceEntry(entry);
-                }
-            });
-            this.observer.observe({ entryTypes: ['measure', 'navigation', 'resource', 'paint'] });
-        }
-        catch (error) {
-            console.warn('PerformanceObserver not supported:', error);
-        }
-    }
-    handlePerformanceEntry(entry) {
-        switch (entry.entryType) {
-            case 'measure':
-                if (entry.name.startsWith('baroiplayer-render')) {
-                    this.updateMetric('componentRenderTime', entry.duration);
-                }
-                break;
-            case 'resource':
-                if (entry.name.includes('.js') || entry.name.includes('.css')) {
-                    this.updateMetric('bundleLoadTime', entry.duration);
-                }
-                break;
-            case 'paint':
-                if (entry.name === 'first-contentful-paint') {
-                    this.updateMetric('fcp', entry.startTime);
-                }
-                break;
-        }
-    }
-    updateMetric(key, value) {
-        const currentMetrics = this.getCurrentMetrics();
-        const updatedMetrics = {
-            ...currentMetrics,
-            [key]: value,
-            timestamp: Date.now(),
-            performanceScore: this.calculatePerformanceScore({ ...currentMetrics, [key]: value })
-        };
-        this.metrics.push(updatedMetrics);
-        // Keep only last 100 metrics
-        if (this.metrics.length > 100) {
-            this.metrics = this.metrics.slice(-100);
-        }
-        this.listeners.forEach(listener => listener(updatedMetrics));
-    }
-    getCurrentMetrics() {
-        const latest = this.metrics[this.metrics.length - 1];
-        return latest || {
-            componentRenderTime: 0,
-            bundleLoadTime: 0,
-            mediaLoadTime: 0,
-            memoryUsage: this.getMemoryUsage(),
-            performanceScore: 0,
-            timestamp: Date.now()
-        };
-    }
-    getMemoryUsage() {
-        if ('memory' in performance) {
-            return performance.memory.usedJSHeapSize || 0;
-        }
-        return 0;
-    }
-    calculatePerformanceScore(metrics) {
-        let score = 100;
-        // Penalize based on thresholds
-        if (metrics.lcp && metrics.lcp > this.thresholds.lcp.good) {
-            score -= metrics.lcp > this.thresholds.lcp.poor ? 30 : 15;
-        }
-        if (metrics.fid && metrics.fid > this.thresholds.fid.good) {
-            score -= metrics.fid > this.thresholds.fid.poor ? 25 : 10;
-        }
-        if (metrics.cls && metrics.cls > this.thresholds.cls.good) {
-            score -= metrics.cls > this.thresholds.cls.poor ? 20 : 10;
-        }
-        if (metrics.componentRenderTime > this.thresholds.renderTime.good) {
-            score -= metrics.componentRenderTime > this.thresholds.renderTime.poor ? 20 : 10;
-        }
-        if (metrics.memoryUsage > this.thresholds.memoryUsage.good) {
-            score -= metrics.memoryUsage > this.thresholds.memoryUsage.poor ? 15 : 5;
-        }
-        return Math.max(0, score);
-    }
-    // Public API
-    startMonitoring() {
-        this.isMonitoring = true;
-        this.startMemoryMonitoring();
-    }
-    stopMonitoring() {
-        this.isMonitoring = false;
-        if (this.observer) {
-            this.observer.disconnect();
-        }
-    }
-    startMemoryMonitoring() {
-        if (!this.isMonitoring)
-            return;
-        this.updateMetric('memoryUsage', this.getMemoryUsage());
-        setTimeout(() => this.startMemoryMonitoring(), 5000); // Check every 5 seconds
-    }
-    measureComponentRender(componentName, renderFn) {
-        const startMark = `baroiplayer-render-${componentName}-start`;
-        const endMark = `baroiplayer-render-${componentName}-end`;
-        const measureName = `baroiplayer-render-${componentName}`;
-        performance.mark(startMark);
-        const result = renderFn();
-        performance.mark(endMark);
-        try {
-            performance.measure(measureName, startMark, endMark);
-        }
-        catch (error) {
-            console.warn('Performance measurement failed:', error);
-        }
-        return result;
-    }
-    subscribe(listener) {
-        this.listeners.add(listener);
-        return () => this.listeners.delete(listener);
-    }
-    getLatestMetrics() {
-        return this.metrics[this.metrics.length - 1] || null;
-    }
-    getAllMetrics() {
-        return [...this.metrics];
-    }
-    getAverageMetrics(count = 10) {
-        const recentMetrics = this.metrics.slice(-count);
-        if (recentMetrics.length === 0)
-            return {};
-        const averages = {};
-        const keys = [
-            'lcp', 'fid', 'cls', 'fcp', 'ttfb', 'inp',
-            'componentRenderTime', 'bundleLoadTime', 'mediaLoadTime',
-            'memoryUsage', 'performanceScore'
-        ];
-        keys.forEach(key => {
-            const values = recentMetrics
-                .map(m => m[key])
-                .filter(v => typeof v === 'number' && !isNaN(v));
-            if (values.length > 0) {
-                averages[key] = values.reduce((sum, v) => sum + v, 0) / values.length;
-            }
-        });
-        return averages;
-    }
-    getThresholds() {
-        return this.thresholds;
-    }
-    updateThresholds(newThresholds) {
-        this.thresholds = { ...this.thresholds, ...newThresholds };
-    }
-}
-// Global performance monitor instance
-export const performanceMonitor = new PerformanceMonitor();
-// React hook for performance monitoring
-export function usePerformanceMonitor() {
-    const [metrics, setMetrics] = useState(null);
-    const [isSupported, setIsSupported] = useState(true);
-    useEffect(() => {
-        setIsSupported(typeof window !== 'undefined' && 'performance' in window);
-        if (!isSupported)
-            return;
-        performanceMonitor.startMonitoring();
-        const unsubscribe = performanceMonitor.subscribe(setMetrics);
-        return () => {
-            unsubscribe();
-            performanceMonitor.stopMonitoring();
-        };
-    }, [isSupported]);
-    const measureRender = useCallback((componentName, renderFn) => {
-        return performanceMonitor.measureComponentRender(componentName, renderFn);
-    }, []);
-    return {
-        metrics,
-        isSupported,
-        measureRender,
-        averageMetrics: performanceMonitor.getAverageMetrics(),
-        allMetrics: performanceMonitor.getAllMetrics(),
-        thresholds: performanceMonitor.getThresholds()
-    };
-}
-// HOC for performance monitoring
-export function withPerformanceMonitoring(WrappedComponent, componentName) {
-    const displayName = componentName || WrappedComponent.displayName || WrappedComponent.name || 'Component';
-    function PerformanceMonitoredComponent(props) {
-        const renderRef = useRef(0);
-        const { measureRender } = usePerformanceMonitor();
-        return measureRender(`${displayName}-${renderRef.current++}`, () => (_jsx(WrappedComponent, { ...props })));
-    }
-    PerformanceMonitoredComponent.displayName = `withPerformanceMonitoring(${displayName})`;
-    return PerformanceMonitoredComponent;
-}
-// Performance regression detector
-export class PerformanceRegressionDetector {
-    baselineMetrics = null;
-    regressionThreshold = 0.2; // 20% degradation threshold
-    setBaseline(metrics) {
-        this.baselineMetrics = metrics;
-    }
-    detectRegression(currentMetrics) {
-        if (!this.baselineMetrics)
-            return [];
-        const regressions = [];
-        const metricsToCheck = [
-            'componentRenderTime', 'bundleLoadTime', 'mediaLoadTime', 'memoryUsage'
-        ];
-        metricsToCheck.forEach(metric => {
-            const baseline = this.baselineMetrics[metric];
-            const current = currentMetrics[metric];
-            if (baseline && current && baseline > 0) {
-                const degradation = (current - baseline) / baseline;
-                if (degradation > this.regressionThreshold) {
-                    regressions.push({ metric, baseline, current, degradation });
-                }
-            }
-        });
-        return regressions;
-    }
-    setRegressionThreshold(threshold) {
-        this.regressionThreshold = Math.max(0, Math.min(1, threshold));
-    }
-}
-export function PerformanceDashboard({ className = '', showAdvanced = false }) {
-    const { metrics, averageMetrics, thresholds, isSupported } = usePerformanceMonitor();
-    if (!isSupported || !metrics) {
-        return (_jsx("div", { className: `performance-dashboard ${className}`, children: _jsx("p", { children: "Performance monitoring not supported in this environment" }) }));
-    }
-    const getScoreColor = (score) => {
-        if (score >= 90)
-            return 'text-green-600';
-        if (score >= 70)
-            return 'text-yellow-600';
-        return 'text-red-600';
-    };
-    const formatBytes = (bytes) => {
-        return `${(bytes / 1024 / 1024).toFixed(2)} MB`;
-    };
-    return (_jsxs("div", { className: `performance-dashboard rounded-lg bg-white p-4 shadow ${className}`, children: [_jsx("h3", { className: "mb-4 font-semibold text-lg", children: "Performance Dashboard" }), _jsxs("div", { className: "mb-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { children: "Performance Score" }), _jsx("span", { className: `font-bold ${getScoreColor(metrics.performanceScore)}`, children: metrics.performanceScore.toFixed(0) })] }), _jsx("div", { className: "mt-1 h-2 w-full rounded-full bg-gray-200", children: _jsx("div", { className: `h-2 rounded-full transition-all duration-300 ${metrics.performanceScore >= 90 ? 'bg-green-500' :
-                                metrics.performanceScore >= 70 ? 'bg-yellow-500' : 'bg-red-500'}`, style: { width: `${metrics.performanceScore}%` } }) })] }), _jsxs("div", { className: "mb-4 grid grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx("h4", { className: "mb-2 font-medium", children: "Core Web Vitals" }), _jsxs("div", { className: "space-y-1 text-sm", children: [metrics.lcp && (_jsxs("div", { children: ["LCP: ", metrics.lcp.toFixed(0), "ms"] })), metrics.fid && (_jsxs("div", { children: ["FID: ", metrics.fid.toFixed(0), "ms"] })), metrics.cls && (_jsxs("div", { children: ["CLS: ", metrics.cls.toFixed(3)] }))] })] }), _jsxs("div", { children: [_jsx("h4", { className: "mb-2 font-medium", children: "Custom Metrics" }), _jsxs("div", { className: "space-y-1 text-sm", children: [_jsxs("div", { children: ["Render: ", metrics.componentRenderTime.toFixed(2), "ms"] }), _jsxs("div", { children: ["Memory: ", formatBytes(metrics.memoryUsage)] }), metrics.bundleLoadTime > 0 && (_jsxs("div", { children: ["Bundle: ", metrics.bundleLoadTime.toFixed(0), "ms"] }))] })] })] }), showAdvanced && (_jsxs("div", { children: [_jsx("h4", { className: "mb-2 font-medium", children: "Advanced Metrics" }), _jsxs("div", { className: "space-y-1 text-sm", children: [_jsxs("div", { children: ["Average Render Time: ", (averageMetrics.componentRenderTime || 0).toFixed(2), "ms"] }), _jsxs("div", { children: ["Average Memory: ", formatBytes(averageMetrics.memoryUsage || 0)] }), _jsxs("div", { children: ["Average Score: ", (averageMetrics.performanceScore || 0).toFixed(0)] })] })] }))] }));
-}
-export default PerformanceMonitor;