@anymux/ui-kit 0.1.0

package/src/file-browser/utils/performance.ts

@@ -0,0 +1,563 @@
+// Simple debounce implementation
+const debounce = <T extends (...args: any[]) => void>(
+  func: T,
+  wait: number
+): ((...args: Parameters<T>) => void) => {
+  let timeout: NodeJS.Timeout;
+  return (...args: Parameters<T>) => {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func(...args), wait);
+  };
+};
+
+// Simple throttle implementation
+const throttle = <T extends (...args: any[]) => void>(
+  func: T,
+  wait: number
+): ((...args: Parameters<T>) => void) => {
+  let lastRun = 0;
+  return (...args: Parameters<T>) => {
+    if (Date.now() - lastRun >= wait) {
+      func(...args);
+      lastRun = Date.now();
+    }
+  };
+};
+
+/**
+ * Performance optimization utilities for FileBrowser responsive design
+ */
+
+export interface PerformanceMetrics {
+  renderTime: number;
+  interactionLatency: number;
+  memoryUsage: number;
+  bundleSize: number;
+  frameRate: number;
+  touchLatency: number;
+}
+
+export interface PerformanceThresholds {
+  maxRenderTime: number;
+  maxInteractionLatency: number;
+  maxMemoryUsage: number;
+  minFrameRate: number;
+  maxTouchLatency: number;
+}
+
+export class PerformanceMonitor {
+  private metrics: Partial<PerformanceMetrics> = {};
+  private thresholds: PerformanceThresholds;
+  private warnings: string[] = [];
+  private observers: PerformanceObserver[] = [];
+
+  constructor(thresholds: Partial<PerformanceThresholds> = {}) {
+    this.thresholds = {
+      maxRenderTime: 100, // 100ms
+      maxInteractionLatency: 50, // 50ms
+      maxMemoryUsage: 100 * 1024 * 1024, // 100MB
+      minFrameRate: 30, // 30fps
+      maxTouchLatency: 16, // 16ms for 60fps
+      ...thresholds
+    };
+
+    this.setupPerformanceObservers();
+  }
+
+  private setupPerformanceObservers() {
+    if (typeof PerformanceObserver !== 'undefined') {
+      // Monitor paint metrics
+      const paintObserver = new PerformanceObserver((list) => {
+        for (const entry of list.getEntries()) {
+          if (entry.name === 'first-contentful-paint') {
+            this.metrics.renderTime = entry.startTime;
+            this.checkThreshold('renderTime', entry.startTime, this.thresholds.maxRenderTime);
+          }
+        }
+      });
+
+      paintObserver.observe({ entryTypes: ['paint'] });
+      this.observers.push(paintObserver);
+
+      // Monitor user interactions
+      const eventObserver = new PerformanceObserver((list) => {
+        for (const entry of list.getEntries()) {
+          const latency = entry.processingEnd - entry.startTime;
+          this.metrics.interactionLatency = latency;
+          this.checkThreshold('interactionLatency', latency, this.thresholds.maxInteractionLatency);
+        }
+      });
+
+      try {
+        eventObserver.observe({ entryTypes: ['event'] });
+        this.observers.push(eventObserver);
+      } catch (e) {
+        // Event timing API not supported
+      }
+    }
+  }
+
+  private checkThreshold(metric: keyof PerformanceMetrics, value: number, threshold: number) {
+    if (value > threshold) {
+      const warning = `Performance warning: ${metric} (${value.toFixed(2)}) exceeds threshold (${threshold})`;
+      this.warnings.push(warning);
+      console.warn(warning);
+    }
+  }
+
+  recordMetric(name: keyof PerformanceMetrics, value: number) {
+    this.metrics[name] = value;
+    
+    const threshold = this.getThresholdForMetric(name);
+    if (threshold !== undefined) {
+      this.checkThreshold(name, value, threshold);
+    }
+  }
+
+  private getThresholdForMetric(name: keyof PerformanceMetrics): number | undefined {
+    switch (name) {
+      case 'renderTime': return this.thresholds.maxRenderTime;
+      case 'interactionLatency': return this.thresholds.maxInteractionLatency;
+      case 'memoryUsage': return this.thresholds.maxMemoryUsage;
+      case 'touchLatency': return this.thresholds.maxTouchLatency;
+      case 'frameRate': return this.thresholds.minFrameRate;
+      default: return undefined;
+    }
+  }
+
+  getMetrics(): Partial<PerformanceMetrics> {
+    return { ...this.metrics };
+  }
+
+  getWarnings(): string[] {
+    return [...this.warnings];
+  }
+
+  getRecommendations(): string[] {
+    const recommendations: string[] = [];
+
+    if (this.metrics.renderTime && this.metrics.renderTime > this.thresholds.maxRenderTime) {
+      recommendations.push('Enable virtualization for large lists');
+      recommendations.push('Implement React.memo for expensive components');
+      recommendations.push('Use code splitting for heavy components');
+    }
+
+    if (this.metrics.interactionLatency && this.metrics.interactionLatency > this.thresholds.maxInteractionLatency) {
+      recommendations.push('Debounce rapid user interactions');
+      recommendations.push('Use requestAnimationFrame for smooth animations');
+      recommendations.push('Optimize event handlers');
+    }
+
+    if (this.metrics.memoryUsage && this.metrics.memoryUsage > this.thresholds.maxMemoryUsage) {
+      recommendations.push('Implement LRU cache with size limits');
+      recommendations.push('Clean up event listeners on unmount');
+      recommendations.push('Use weak references for large objects');
+    }
+
+    if (this.metrics.touchLatency && this.metrics.touchLatency > this.thresholds.maxTouchLatency) {
+      recommendations.push('Optimize touch event handlers');
+      recommendations.push('Use passive event listeners');
+      recommendations.push('Reduce touch target processing time');
+    }
+
+    return recommendations;
+  }
+
+  dispose() {
+    this.observers.forEach(observer => observer.disconnect());
+    this.observers = [];
+    this.warnings = [];
+    this.metrics = {};
+  }
+}
+
+/**
+ * Debounced resize handler for responsive layouts
+ */
+export const createDebouncedResizeHandler = (
+  handler: (width: number, height: number) => void,
+  delay = 250
+) => {
+  return debounce((event: Event) => {
+    const width = window.innerWidth;
+    const height = window.innerHeight;
+    handler(width, height);
+  }, delay);
+};
+
+/**
+ * Throttled scroll handler for efficient scrolling
+ */
+export const createThrottledScrollHandler = (
+  handler: (scrollTop: number, scrollLeft: number) => void,
+  delay = 16 // 60fps
+) => {
+  return throttle((event: Event) => {
+    const target = event.target as HTMLElement;
+    handler(target.scrollTop, target.scrollLeft);
+  }, delay);
+};
+
+/**
+ * Intersection Observer for lazy loading
+ */
+export class LazyLoadManager {
+  private observer: IntersectionObserver;
+  private loadedItems = new Set<string>();
+
+  constructor(
+    private loadCallback: (element: Element) => void,
+    options: IntersectionObserverInit = {}
+  ) {
+    const defaultOptions: IntersectionObserverInit = {
+      root: null,
+      rootMargin: '50px',
+      threshold: 0.1,
+      ...options
+    };
+
+    this.observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting && !this.loadedItems.has(entry.target.id)) {
+          this.loadedItems.add(entry.target.id);
+          this.loadCallback(entry.target);
+          this.observer.unobserve(entry.target);
+        }
+      });
+    }, defaultOptions);
+  }
+
+  observe(element: Element) {
+    if (!this.loadedItems.has(element.id)) {
+      this.observer.observe(element);
+    }
+  }
+
+  unobserve(element: Element) {
+    this.observer.unobserve(element);
+    this.loadedItems.delete(element.id);
+  }
+
+  disconnect() {
+    this.observer.disconnect();
+    this.loadedItems.clear();
+  }
+}
+
+/**
+ * Memory management utilities
+ */
+export class MemoryManager {
+  private caches = new Map<string, Map<string, any>>();
+  private maxCacheSize = 100;
+
+  createLRUCache<T>(name: string, maxSize = this.maxCacheSize): LRUCache<T> {
+    const cache = new LRUCache<T>(maxSize);
+    this.caches.set(name, cache.storage);
+    return cache;
+  }
+
+  clearCaches() {
+    this.caches.forEach(cache => cache.clear());
+  }
+
+  getCacheStats() {
+    const stats: Record<string, { size: number; maxSize: number }> = {};
+    
+    this.caches.forEach((cache, name) => {
+      stats[name] = {
+        size: cache.size,
+        maxSize: this.maxCacheSize
+      };
+    });
+
+    return stats;
+  }
+
+  getMemoryUsage(): number {
+    if ('memory' in performance) {
+      return (performance as any).memory.usedJSHeapSize;
+    }
+    return 0;
+  }
+
+  onMemoryPressure(callback: () => void) {
+    if ('memory' in performance) {
+      // Monitor memory usage and trigger callback when high
+      const checkMemory = () => {
+        const usage = this.getMemoryUsage();
+        const limit = 50 * 1024 * 1024; // 50MB threshold
+        
+        if (usage > limit) {
+          callback();
+        }
+      };
+
+      setInterval(checkMemory, 5000); // Check every 5 seconds
+    }
+  }
+}
+
+/**
+ * LRU Cache implementation
+ */
+export class LRUCache<T> {
+  public storage = new Map<string, T>();
+  private accessOrder = new Map<string, number>();
+  private accessCounter = 0;
+
+  constructor(private maxSize: number) {}
+
+  get(key: string): T | undefined {
+    const value = this.storage.get(key);
+    if (value !== undefined) {
+      this.accessOrder.set(key, ++this.accessCounter);
+    }
+    return value;
+  }
+
+  set(key: string, value: T): void {
+    if (this.storage.size >= this.maxSize && !this.storage.has(key)) {
+      this.evictLeastRecentlyUsed();
+    }
+
+    this.storage.set(key, value);
+    this.accessOrder.set(key, ++this.accessCounter);
+  }
+
+  has(key: string): boolean {
+    return this.storage.has(key);
+  }
+
+  delete(key: string): boolean {
+    this.accessOrder.delete(key);
+    return this.storage.delete(key);
+  }
+
+  clear(): void {
+    this.storage.clear();
+    this.accessOrder.clear();
+    this.accessCounter = 0;
+  }
+
+  private evictLeastRecentlyUsed(): void {
+    let oldestKey = '';
+    let oldestAccess = Infinity;
+
+    for (const [key, access] of this.accessOrder) {
+      if (access < oldestAccess) {
+        oldestAccess = access;
+        oldestKey = key;
+      }
+    }
+
+    if (oldestKey) {
+      this.delete(oldestKey);
+    }
+  }
+
+  get size(): number {
+    return this.storage.size;
+  }
+}
+
+/**
+ * Bundle size optimization utilities
+ */
+export class BundleOptimizer {
+  private loadedModules = new Set<string>();
+  private modulePromises = new Map<string, Promise<any>>();
+
+  async loadModule<T>(
+    moduleName: string,
+    importFunction: () => Promise<{ default: T }>
+  ): Promise<T> {
+    if (this.loadedModules.has(moduleName)) {
+      return (await this.modulePromises.get(moduleName)!).default;
+    }
+
+    if (!this.modulePromises.has(moduleName)) {
+      const promise = importFunction();
+      this.modulePromises.set(moduleName, promise);
+      
+      promise.then(() => {
+        this.loadedModules.add(moduleName);
+      });
+    }
+
+    const module = await this.modulePromises.get(moduleName)!;
+    return module.default;
+  }
+
+  getLoadedModules(): string[] {
+    return Array.from(this.loadedModules);
+  }
+
+  preloadModule(moduleName: string, importFunction: () => Promise<any>): void {
+    if (!this.loadedModules.has(moduleName) && !this.modulePromises.has(moduleName)) {
+      this.loadModule(moduleName, importFunction);
+    }
+  }
+}
+
+/**
+ * Touch performance optimization
+ */
+export class TouchOptimizer {
+  private lastTouchTime = 0;
+  private touchLatencies: number[] = [];
+
+  createOptimizedTouchHandler<T extends Event>(
+    handler: (event: T) => void,
+    options: { passive?: boolean; capture?: boolean } = {}
+  ) {
+    const optimizedHandler = (event: T) => {
+      const startTime = performance.now();
+      
+      // Throttle rapid touch events
+      if (startTime - this.lastTouchTime < 16) {
+        return;
+      }
+      
+      this.lastTouchTime = startTime;
+      
+      // Execute handler
+      handler(event);
+      
+      // Track latency
+      const latency = performance.now() - startTime;
+      this.touchLatencies.push(latency);
+      
+      // Keep only recent latencies
+      if (this.touchLatencies.length > 100) {
+        this.touchLatencies.shift();
+      }
+    };
+
+    return {
+      handler: optimizedHandler,
+      options: {
+        passive: true,
+        capture: false,
+        ...options
+      }
+    };
+  }
+
+  getAverageTouchLatency(): number {
+    if (this.touchLatencies.length === 0) return 0;
+    
+    const sum = this.touchLatencies.reduce((a, b) => a + b, 0);
+    return sum / this.touchLatencies.length;
+  }
+
+  clearLatencyData(): void {
+    this.touchLatencies = [];
+  }
+}
+
+/**
+ * Device-specific optimizations
+ */
+export class DeviceOptimizer {
+  private deviceInfo = this.getDeviceInfo();
+
+  private getDeviceInfo() {
+    const userAgent = navigator.userAgent;
+    const isMobile = /Mobile|Android|iPhone|iPad/.test(userAgent);
+    const isTablet = /iPad|Tablet/.test(userAgent);
+    const isLowEnd = this.isLowEndDevice();
+
+    return {
+      isMobile,
+      isTablet,
+      isDesktop: !isMobile && !isTablet,
+      isLowEnd,
+      pixelRatio: window.devicePixelRatio || 1,
+      connectionType: this.getConnectionType()
+    };
+  }
+
+  private isLowEndDevice(): boolean {
+    // Detect low-end devices based on available metrics
+    if ('memory' in navigator) {
+      return (navigator as any).memory.deviceMemory < 4; // Less than 4GB RAM
+    }
+    
+    if ('hardwareConcurrency' in navigator) {
+      return navigator.hardwareConcurrency < 4; // Less than 4 CPU cores
+    }
+
+    return false;
+  }
+
+  private getConnectionType(): string {
+    if ('connection' in navigator) {
+      return (navigator as any).connection.effectiveType || 'unknown';
+    }
+    return 'unknown';
+  }
+
+  getOptimizationStrategy() {
+    const { isMobile, isTablet, isLowEnd, connectionType } = this.deviceInfo;
+
+    return {
+      // Rendering optimizations
+      enableVirtualization: isLowEnd || isMobile,
+      reduceAnimations: isLowEnd || connectionType === 'slow-2g',
+      lazyLoadImages: isMobile || connectionType === 'slow-2g',
+      
+      // Interaction optimizations
+      debounceDelay: isLowEnd ? 500 : 250,
+      throttleDelay: isLowEnd ? 32 : 16,
+      
+      // Memory optimizations
+      maxCacheSize: isLowEnd ? 20 : 100,
+      enableImageCompression: isMobile || connectionType === 'slow-2g',
+      
+      // Bundle optimizations
+      enableCodeSplitting: true,
+      preloadCriticalModules: !isLowEnd,
+      
+      // Touch optimizations
+      enablePassiveListeners: isMobile,
+      optimizeTouchTargets: isMobile || isTablet
+    };
+  }
+
+  getDeviceInfo() {
+    return { ...this.deviceInfo };
+  }
+}
+
+/**
+ * Performance optimization hook factory
+ */
+export const createPerformanceOptimizations = () => {
+  const monitor = new PerformanceMonitor();
+  const memoryManager = new MemoryManager();
+  const bundleOptimizer = new BundleOptimizer();
+  const touchOptimizer = new TouchOptimizer();
+  const deviceOptimizer = new DeviceOptimizer();
+
+  const strategy = deviceOptimizer.getOptimizationStrategy();
+
+  return {
+    monitor,
+    memoryManager,
+    bundleOptimizer,
+    touchOptimizer,
+    deviceOptimizer,
+    strategy,
+    
+    // Utility functions
+    debouncedResize: createDebouncedResizeHandler,
+    throttledScroll: createThrottledScrollHandler,
+    
+    // Cleanup function
+    dispose: () => {
+      monitor.dispose();
+      memoryManager.clearCaches();
+    }
+  };
+};