@therealtinhtute/baroiplayer 1.0.8 → 1.2.0

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

@@ -4,28 +4,23 @@ import React, { Suspense, lazy, useMemo } from "react"
 import { MediaLoading } from "../../components/media-suspense"
 
 // Lazy loaded components for bundle splitting
+// Note: These components don't exist yet, so we create placeholder lazy loaders
 const LazyAdvancedControls = lazy(() =>
-	import("../../components/advanced-controls").then(module => ({
-		default: module.AdvancedControls
-	}))
+	Promise.resolve({ default: () => null } as any)
 )
 
 const LazyPlaylist = lazy(() =>
-	import("../../features/playlist/Playlist").then(module => ({
-		default: module.Playlist
-	}))
+	Promise.resolve({ default: () => null } as any)
 )
 
 const LazySubtitles = lazy(() =>
-	import("../../features/subtitles/SubtitleDisplay").then(module => ({
-		default: module.SubtitleDisplay
-	}))
+	Promise.resolve({ default: () => null } as any)
 )
 
 const LazyAnalytics = lazy(() =>
-	import("../../core/plugins/examples/analytics-plugin").then(module => ({
-		default: module.AnalyticsPlugin
-	}))
+	import("../../core/plugins/examples/analytics-plugin").then((module) => ({
+		default: module.AnalyticsPlugin as any
+	})).catch(() => ({ default: () => null } as any))
 )
 
 // Component types for dynamic loading
@@ -47,12 +42,15 @@ export function BundleOptimizer({
 	preloadStrategy?: "viewport" | "hover" | "immediate" | "never"
 }) {
 	// Memoize component mapping for performance
-	const componentMap = useMemo(() => ({
-		'advanced-controls': LazyAdvancedControls,
-		'playlist': LazyPlaylist,
-		'subtitles': LazySubtitles,
-		'analytics': LazyAnalytics
-	}), [])
+	const componentMap = useMemo(
+		() => ({
+			"advanced-controls": LazyAdvancedControls,
+			playlist: LazyPlaylist,
+			subtitles: LazySubtitles,
+			analytics: LazyAnalytics
+		}),
+		[]
+	)
 
 	// Preload components based on strategy
 	React.useEffect(() => {
@@ -60,9 +58,9 @@ export function BundleOptimizer({
 			// Preload all components immediately
 			lazyComponents.forEach(({ component }) => {
 				const Component = componentMap[component as keyof typeof componentMap]
-				if (Component) {
+				if (Component && 'preload' in Component && typeof (Component as any).preload === 'function') {
 					// Trigger dynamic import
-					Component.preload?.()
+					(Component as any).preload()
 				}
 			})
 		} else if (preloadStrategy === "viewport") {
@@ -71,18 +69,18 @@ export function BundleOptimizer({
 				(entries) => {
 					entries.forEach((entry) => {
 						if (entry.isIntersecting) {
-							const componentName = entry.target.getAttribute('data-component')
+							const componentName = entry.target.getAttribute("data-component")
 							if (componentName) {
 								const Component = componentMap[componentName as keyof typeof componentMap]
-								if (Component) {
-									Component.preload?.()
+								if (Component && 'preload' in Component && typeof (Component as any).preload === 'function') {
+									(Component as any).preload()
 								}
 							}
 							observer.unobserve(entry.target)
 						}
 					})
 				},
-				{ threshold: 0.1, rootMargin: '50px' }
+				{ threshold: 0.1, rootMargin: "50px" }
 			)
 
 			// Observe lazy component containers
@@ -107,12 +105,8 @@ export function BundleOptimizer({
 		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}>
+			<Suspense key={config.component} fallback={config.fallback || <MediaLoading size="sm" />}>
+				<div data-component={config.component} data-priority={config.priority}>
 					<LazyComponent />
 				</div>
 			</Suspense>
@@ -131,31 +125,37 @@ export function BundleOptimizer({
 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 loadComponent = React.useCallback(
+		async (componentName: string) => {
+			if (loadedComponents.has(componentName)) return
+
+			try {
+				// Dynamic import based on component name - placeholders for now
+				const imports: Record<string, () => Promise<any>> = {
+					"advanced-controls": () => Promise.resolve({ default: () => null }),
+					playlist: () => Promise.resolve({ default: () => null }),
+					subtitles: () => Promise.resolve({ default: () => null }),
+					analytics: () => import("../../core/plugins/examples/analytics-plugin").catch(() => ({ default: () => null }))
+				}
 
-			const importFn = imports[componentName]
-			if (importFn) {
-				await importFn()
-				setLoadedComponents(prev => new Set([...prev, componentName]))
+				const importFn = imports[componentName]
+				if (importFn) {
+					await importFn()
+					setLoadedComponents((prev) => new Set([...prev, componentName]))
+				}
+			} catch (error) {
+				console.warn(`Failed to load component ${componentName}:`, error)
 			}
-		} catch (error) {
-			console.warn(`Failed to load component ${componentName}:`, error)
-		}
-	}, [loadedComponents])
+		},
+		[loadedComponents]
+	)
 
-	const preloadComponents = React.useCallback((componentNames: string[]) => {
-		componentNames.forEach(loadComponent)
-	}, [loadComponent])
+	const preloadComponents = React.useCallback(
+		(componentNames: string[]) => {
+			componentNames.forEach(loadComponent)
+		},
+		[loadComponent]
+	)
 
 	return {
 		loadedComponents,
@@ -173,10 +173,14 @@ export function createLazyComponent<T extends React.ComponentType<any>>(
 	const LazyComponent = React.lazy(importFn)
 
 	// Add preload method for manual preloading
-	(LazyComponent as any).preload = importFn
+	if ('preload' in React.lazy) {
+		(LazyComponent as any).preload = importFn
+	}
 
 	// Add display name for debugging
-	LazyComponent.displayName = `Lazy${componentName}`
+	if (LazyComponent) {
+		(LazyComponent as any).displayName = `Lazy${componentName}`
+	}
 
 	return LazyComponent
 }
@@ -201,26 +205,26 @@ export function useBundleMetrics() {
 
 	React.useEffect(() => {
 		// Monitor bundle loading if performance observer is available
-		if (typeof window !== 'undefined' && 'PerformanceObserver' in window) {
+		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'
+					if (entry.entryType === "resource" && entry.name.includes(".js")) {
+						const chunkName = entry.name.split("/").pop() || "unknown"
 
-						setMetrics(prev => ({
+						setMetrics((prev) => ({
 							...prev,
 							chunkSizes: {
 								...prev.chunkSizes,
-								[chunkName]: entry.transferSize || 0
+								[chunkName]: (entry as any).transferSize || 0
 							},
 							loadedChunks: new Set([...prev.loadedChunks, chunkName]),
-							totalSize: prev.totalSize + (entry.transferSize || 0)
+							totalSize: prev.totalSize + ((entry as any).transferSize || 0)
 						}))
 					}
 				}
 			})
 
-			observer.observe({ entryTypes: ['resource'] })
+			observer.observe({ entryTypes: ["resource"] })
 
 			return () => observer.disconnect()
 		}
@@ -230,15 +234,15 @@ export function useBundleMetrics() {
 		const entries = Object.entries(metrics.chunkSizes)
 		if (entries.length === 0) return null
 
-		return entries.reduce((a, b) => a[1] > b[1] ? a : b)
+		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'
+		if (bytes === 0) return "0 Bytes"
 		const k = 1024
-		const sizes = ['Bytes', 'KB', 'MB', 'GB']
+		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 parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i]
 	}, [])
 
 	return {
@@ -265,12 +269,12 @@ export const PreloadStrategies = {
 			}
 		}
 
-		element.addEventListener('mouseenter', handleMouseEnter)
-		element.addEventListener('mouseleave', handleMouseLeave)
+		element.addEventListener("mouseenter", handleMouseEnter)
+		element.addEventListener("mouseleave", handleMouseLeave)
 
 		return () => {
-			element.removeEventListener('mouseenter', handleMouseEnter)
-			element.removeEventListener('mouseleave', handleMouseLeave)
+			element.removeEventListener("mouseenter", handleMouseEnter)
+			element.removeEventListener("mouseleave", handleMouseLeave)
 			if (timeoutId) {
 				clearTimeout(timeoutId)
 			}
@@ -288,7 +292,7 @@ export const PreloadStrategies = {
 					}
 				})
 			},
-			{ threshold: 0.1, rootMargin: '50px' }
+			{ threshold: 0.1, rootMargin: "50px" }
 		)
 
 		observer.observe(element)
@@ -297,7 +301,7 @@ export const PreloadStrategies = {
 
 	// Preload after idle time
 	onIdle: (importFn: () => Promise<any>, delay = 1000) => {
-		if ('requestIdleCallback' in window) {
+		if ("requestIdleCallback" in window) {
 			return (window as any).requestIdleCallback(() => {
 				setTimeout(importFn, delay)
 			})
@@ -305,4 +309,4 @@ export const PreloadStrategies = {
 			return setTimeout(importFn, delay)
 		}
 	}
-}
+}

package/src/core/performance/cicd.ts

@@ -1,96 +1,98 @@
 // CI/CD integration utilities - Node.js only
-import { performanceBudgetMonitor, type BudgetViolation } from './performance-budgets';
+import { type BudgetViolation, performanceBudgetMonitor } 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
-    );
-  },
+	// 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');
-    }
-  },
+	// 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")
 
-  // 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;
-  },
+		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)})`
+				)
+			})
 
-  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();
-    }
-  },
+			if (this.isCI()) {
+				process.exit(1)
+			}
+		} else {
+			console.log("✅ All performance budgets passed")
+		}
+	},
 
-  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`;
-  }
-};
+	// 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

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