@therealtinhtute/baroiplayer 1.0.0

package/src/core/optimization/bundle-optimizer.tsx

@@ -0,0 +1,308 @@
+"use client"
+
+import React, { Suspense, lazy, useMemo } from "react"
+import { MediaLoading } from "../../components/media-suspense"
+
+// Lazy loaded components for bundle splitting
+const LazyAdvancedControls = lazy(() =>
+	import("../../components/advanced-controls").then(module => ({
+		default: module.AdvancedControls
+	}))
+)
+
+const LazyPlaylist = lazy(() =>
+	import("../../features/playlist/Playlist").then(module => ({
+		default: module.Playlist
+	}))
+)
+
+const LazySubtitles = lazy(() =>
+	import("../../features/subtitles/SubtitleDisplay").then(module => ({
+		default: module.SubtitleDisplay
+	}))
+)
+
+const LazyAnalytics = lazy(() =>
+	import("../../core/plugins/examples/analytics-plugin").then(module => ({
+		default: module.AnalyticsPlugin
+	}))
+)
+
+// Component types for dynamic loading
+export interface LazyComponentConfig {
+	component: string
+	fallback?: React.ReactNode
+	preload?: boolean
+	priority?: "high" | "normal" | "low"
+}
+
+// Bundle optimization component
+export function BundleOptimizer({
+	children,
+	lazyComponents = [],
+	preloadStrategy = "viewport"
+}: {
+	children: React.ReactNode
+	lazyComponents?: LazyComponentConfig[]
+	preloadStrategy?: "viewport" | "hover" | "immediate" | "never"
+}) {
+	// Memoize component mapping for performance
+	const componentMap = useMemo(() => ({
+		'advanced-controls': LazyAdvancedControls,
+		'playlist': LazyPlaylist,
+		'subtitles': LazySubtitles,
+		'analytics': LazyAnalytics
+	}), [])
+
+	// Preload components based on strategy
+	React.useEffect(() => {
+		if (preloadStrategy === "immediate") {
+			// Preload all components immediately
+			lazyComponents.forEach(({ component }) => {
+				const Component = componentMap[component as keyof typeof componentMap]
+				if (Component) {
+					// Trigger dynamic import
+					Component.preload?.()
+				}
+			})
+		} else if (preloadStrategy === "viewport") {
+			// Preload when component is likely to enter viewport
+			const observer = new IntersectionObserver(
+				(entries) => {
+					entries.forEach((entry) => {
+						if (entry.isIntersecting) {
+							const componentName = entry.target.getAttribute('data-component')
+							if (componentName) {
+								const Component = componentMap[componentName as keyof typeof componentMap]
+								if (Component) {
+									Component.preload?.()
+								}
+							}
+							observer.unobserve(entry.target)
+						}
+					})
+				},
+				{ threshold: 0.1, rootMargin: '50px' }
+			)
+
+			// Observe lazy component containers
+			lazyComponents.forEach(({ component, priority }) => {
+				if (priority === "high") {
+					const element = document.querySelector(`[data-component="${component}"]`)
+					if (element) {
+						observer.observe(element)
+					}
+				}
+			})
+
+			return () => observer.disconnect()
+		}
+	}, [preloadStrategy, lazyComponents, componentMap])
+
+	// Render lazy components with suspense boundaries
+	const renderLazyComponent = (config: LazyComponentConfig) => {
+		const Component = componentMap[config.component as keyof typeof componentMap]
+		if (!Component) return null
+
+		const LazyComponent = Component as React.ComponentType<any>
+
+		return (
+			<Suspense
+				key={config.component}
+				fallback={config.fallback || <MediaLoading size="sm" />}>
+				<div
+					data-component={config.component}
+					data-priority={config.priority}>
+					<LazyComponent />
+				</div>
+			</Suspense>
+		)
+	}
+
+	return (
+		<>
+			{children}
+			{lazyComponents.map(renderLazyComponent)}
+		</>
+	)
+}
+
+// Progressive loading hook
+export function useProgressiveLoading() {
+	const [loadedComponents, setLoadedComponents] = React.useState<Set<string>>(new Set())
+
+	const loadComponent = React.useCallback(async (componentName: string) => {
+		if (loadedComponents.has(componentName)) return
+
+		try {
+			// Dynamic import based on component name
+			const imports: Record<string, () => Promise<any>> = {
+				'advanced-controls': () => import("../../components/advanced-controls"),
+				'playlist': () => import("../../features/playlist/Playlist"),
+				'subtitles': () => import("../../features/subtitles/SubtitleDisplay"),
+				'analytics': () => import("../../core/plugins/examples/analytics-plugin")
+			}
+
+			const importFn = imports[componentName]
+			if (importFn) {
+				await importFn()
+				setLoadedComponents(prev => new Set([...prev, componentName]))
+			}
+		} catch (error) {
+			console.warn(`Failed to load component ${componentName}:`, error)
+		}
+	}, [loadedComponents])
+
+	const preloadComponents = React.useCallback((componentNames: string[]) => {
+		componentNames.forEach(loadComponent)
+	}, [loadComponent])
+
+	return {
+		loadedComponents,
+		loadComponent,
+		preloadComponents,
+		isComponentLoaded: (componentName: string) => loadedComponents.has(componentName)
+	}
+}
+
+// Tree shaking utilities
+export function createLazyComponent<T extends React.ComponentType<any>>(
+	importFn: () => Promise<{ default: T }>,
+	componentName: string
+) {
+	const LazyComponent = React.lazy(importFn)
+
+	// Add preload method for manual preloading
+	(LazyComponent as any).preload = importFn
+
+	// Add display name for debugging
+	LazyComponent.displayName = `Lazy${componentName}`
+
+	return LazyComponent
+}
+
+// Bundle analyzer utilities
+export interface BundleMetrics {
+	totalSize: number
+	chunkSizes: Record<string, number>
+	loadedChunks: Set<string>
+	pendingChunks: Set<string>
+	compressionRatio: number
+}
+
+export function useBundleMetrics() {
+	const [metrics, setMetrics] = React.useState<BundleMetrics>({
+		totalSize: 0,
+		chunkSizes: {},
+		loadedChunks: new Set(),
+		pendingChunks: new Set(),
+		compressionRatio: 1
+	})
+
+	React.useEffect(() => {
+		// Monitor bundle loading if performance observer is available
+		if (typeof window !== 'undefined' && 'PerformanceObserver' in window) {
+			const observer = new PerformanceObserver((list) => {
+				for (const entry of list.getEntries()) {
+					if (entry.entryType === 'resource' && entry.name.includes('.js')) {
+						const chunkName = entry.name.split('/').pop() || 'unknown'
+
+						setMetrics(prev => ({
+							...prev,
+							chunkSizes: {
+								...prev.chunkSizes,
+								[chunkName]: entry.transferSize || 0
+							},
+							loadedChunks: new Set([...prev.loadedChunks, chunkName]),
+							totalSize: prev.totalSize + (entry.transferSize || 0)
+						}))
+					}
+				}
+			})
+
+			observer.observe({ entryTypes: ['resource'] })
+
+			return () => observer.disconnect()
+		}
+	}, [])
+
+	const getLargestChunk = React.useCallback(() => {
+		const entries = Object.entries(metrics.chunkSizes)
+		if (entries.length === 0) return null
+
+		return entries.reduce((a, b) => a[1] > b[1] ? a : b)
+	}, [metrics.chunkSizes])
+
+	const formatBytes = React.useCallback((bytes: number) => {
+		if (bytes === 0) return '0 Bytes'
+		const k = 1024
+		const sizes = ['Bytes', 'KB', 'MB', 'GB']
+		const i = Math.floor(Math.log(bytes) / Math.log(k))
+		return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+	}, [])
+
+	return {
+		...metrics,
+		largestChunk: getLargestChunk(),
+		formatBytes,
+		totalSizeFormatted: formatBytes(metrics.totalSize)
+	}
+}
+
+// Preloading strategies
+export const PreloadStrategies = {
+	// Preload when user hovers over trigger element
+	onHover: (element: HTMLElement, importFn: () => Promise<any>) => {
+		let timeoutId: NodeJS.Timeout
+
+		const handleMouseEnter = () => {
+			timeoutId = setTimeout(importFn, 200) // 200ms delay
+		}
+
+		const handleMouseLeave = () => {
+			if (timeoutId) {
+				clearTimeout(timeoutId)
+			}
+		}
+
+		element.addEventListener('mouseenter', handleMouseEnter)
+		element.addEventListener('mouseleave', handleMouseLeave)
+
+		return () => {
+			element.removeEventListener('mouseenter', handleMouseEnter)
+			element.removeEventListener('mouseleave', handleMouseLeave)
+			if (timeoutId) {
+				clearTimeout(timeoutId)
+			}
+		}
+	},
+
+	// Preload when component enters viewport
+	onViewport: (element: HTMLElement, importFn: () => Promise<any>) => {
+		const observer = new IntersectionObserver(
+			(entries) => {
+				entries.forEach((entry) => {
+					if (entry.isIntersecting) {
+						importFn()
+						observer.unobserve(entry.target)
+					}
+				})
+			},
+			{ threshold: 0.1, rootMargin: '50px' }
+		)
+
+		observer.observe(element)
+		return () => observer.disconnect()
+	},
+
+	// Preload after idle time
+	onIdle: (importFn: () => Promise<any>, delay = 1000) => {
+		if ('requestIdleCallback' in window) {
+			return (window as any).requestIdleCallback(() => {
+				setTimeout(importFn, delay)
+			})
+		} else {
+			return setTimeout(importFn, delay)
+		}
+	}
+}

package/src/core/performance/cicd.ts

@@ -0,0 +1,96 @@
+// CI/CD integration utilities - Node.js only
+import { performanceBudgetMonitor, type BudgetViolation } from './performance-budgets';
+
+export const cicdIntegration = {
+  // Check if running in CI environment
+  isCI(): boolean {
+    return !!(
+      process.env.CI ||
+      process.env.CONTINUOUS_INTEGRATION ||
+      process.env.BUILD_NUMBER ||
+      process.env.GITHUB_ACTIONS ||
+      process.env.GITLAB_CI ||
+      process.env.CIRCLE_CI
+    );
+  },
+
+  // Exit with error code if budget violations found
+  async enforcebudgets(distPath: string): Promise<void> {
+    const violations = await performanceBudgetMonitor.checkBundleSizes(distPath);
+    const errorViolations = violations.filter(v => v.budget.severity === 'error');
+    
+    if (errorViolations.length > 0) {
+      console.error(`❌ Performance budget violations detected: ${errorViolations.length} errors`);
+      errorViolations.forEach(violation => {
+        console.error(`  - ${violation.budget.name}: ${this.formatValue(violation.actualValue, violation.budget.unit)} (limit: ${this.formatValue(violation.budget.limit, violation.budget.unit)})`);
+      });
+      
+      if (this.isCI()) {
+        process.exit(1);
+      }
+    } else {
+      console.log('✅ All performance budgets passed');
+    }
+  },
+
+  // Generate budget report for CI
+  generateCIReport(): string {
+    const summary = performanceBudgetMonitor.getViolationSummary();
+    const violations = performanceBudgetMonitor.getViolations();
+    
+    let report = '## Performance Budget Report\n\n';
+    
+    if (summary.total === 0) {
+      report += '✅ **All performance budgets passed!**\n\n';
+    } else {
+      report += `❌ **${summary.total} budget violations detected**\n\n`;
+      
+      report += '### Violations by Category\n';
+      Object.entries(summary.byCategory).forEach(([category, count]) => {
+        report += `- ${category}: ${count}\n`;
+      });
+      
+      report += '\n### Violations by Severity\n';
+      Object.entries(summary.bySeverity).forEach(([severity, count]) => {
+        const emoji = severity === 'error' ? '🔴' : severity === 'warning' ? '🟡' : '🔵';
+        report += `- ${emoji} ${severity}: ${count}\n`;
+      });
+      
+      report += '\n### Detailed Violations\n';
+      violations.forEach(violation => {
+        const emoji = violation.budget.severity === 'error' ? '🔴' : '🟡';
+        report += `${emoji} **${violation.budget.name}**\n`;
+        report += `- Limit: ${this.formatValue(violation.budget.limit, violation.budget.unit)}\n`;
+        report += `- Actual: ${this.formatValue(violation.actualValue, violation.budget.unit)}\n`;
+        report += `- Overage: +${violation.overagePercentage.toFixed(1)}%\n\n`;
+      });
+    }
+    
+    return report;
+  },
+
+  formatValue(value: number, unit: 'bytes' | 'ms' | 'score' | 'percent'): 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();
+    }
+  },
+
+  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`;
+  }
+};

package/src/core/performance/index.ts

@@ -0,0 +1,38 @@
+// Performance Monitoring
+export * from './performance-monitor';
+export { default as PerformanceMonitor } from './performance-monitor';
+
+// Performance Testing
+export * from './performance-testing';
+
+// Performance Budgets and CI/CD
+export * from './performance-budgets';
+
+// Media Loading Optimization
+export * from './media-loading-optimizer';
+
+// Re-export key classes and utilities for convenience
+export {
+  performanceMonitor,
+  PerformanceDashboard,
+  usePerformanceMonitor,
+  withPerformanceMonitoring
+} from './performance-monitor';
+
+export {
+  performanceBenchmark,
+  performanceTestUtils,
+  performanceTestFramework
+} from './performance-testing';
+
+export {
+  performanceBudgetMonitor,
+  defaultPerformanceBudgets
+} from './performance-budgets';
+
+export {
+  mediaLoadingOptimizer,
+  useMediaLoadingOptimizer,
+  NetworkMonitor,
+  MediaLoadingOptimizer
+} from './media-loading-optimizer';