@nebulaai/lumina-ui/src/utils/performance.ts

Enterprise-grade glass morphism UI components with neural-inspired design system

// Performance utilities for faster component rendering
export const memo = <T extends React.ComponentType<any>>(component: T): T => {
  return React.memo(component) as T;
};

export const lazyLoad = <T extends React.ComponentType<any>>(
  importFunc: () => Promise<{ default: T }>
): React.LazyExoticComponent<T> => {
  return React.lazy(importFunc);
};

export const debounce = <T extends (...args: any[]) => any>(
  func: T,
  wait: number
): ((...args: Parameters<T>) => void) => {
  let timeout: NodeJS.Timeout;
  return (...args: Parameters<T>) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => func(...args), wait);
  };
};

export const throttle = <T extends (...args: any[]) => any>(
  func: T,
  limit: number
): ((...args: Parameters<T>) => void) => {
  let inThrottle: boolean;
  return (...args: Parameters<T>) => {
    if (!inThrottle) {
      func(...args);
      inThrottle = true;
      setTimeout(() => (inThrottle = false), limit);
    }
  };
};

export const virtualizedRender = (
  items: any[],
  itemHeight: number,
  containerHeight: number,
  scrollTop: number
) => {
  const startIndex = Math.floor(scrollTop / itemHeight);
  const endIndex = Math.min(
    startIndex + Math.ceil(containerHeight / itemHeight) + 1,
    items.length
  );

  return {
    visibleItems: items.slice(startIndex, endIndex),
    startIndex,
    totalHeight: items.length * itemHeight,
    offsetY: startIndex * itemHeight
  };
};

// Performance measurement utilities
export const performance = {
  mark: (name: string) => {
    if (typeof window !== 'undefined' && window.performance) {
      window.performance.mark(name);
    }
  },

  measure: (name: string, startMark: string, endMark?: string) => {
    if (typeof window !== 'undefined' && window.performance) {
      window.performance.measure(name, startMark, endMark);
      const measure = window.performance.getEntriesByName(name)[0];
      return measure?.duration || 0;
    }
    return 0;
  },

  clearMarks: (name?: string) => {
    if (typeof window !== 'undefined' && window.performance) {
      window.performance.clearMarks(name);
    }
  }
};

// Bundle size monitoring
export const bundleAnalytics = {
  trackComponentLoad: (componentName: string) => {
    performance.mark(`${componentName}-load-start`);
    return () => {
      performance.mark(`${componentName}-load-end`);
      const duration = performance.measure(
        `${componentName}-load`,
        `${componentName}-load-start`,
        `${componentName}-load-end`
      );
      console.log(`[Lumina] ${componentName} loaded in ${duration}ms`);
    };
  }
};

// Memory usage tracking
export const memoryTracker = {
  getUsage: () => {
    if (typeof window !== 'undefined' && (window as any).performance?.memory) {
      const memory = (window as any).performance.memory;
      return {
        used: Math.round(memory.usedJSHeapSize / 1048576 * 100) / 100,
        total: Math.round(memory.totalJSHeapSize / 1048576 * 100) / 100,
        limit: Math.round(memory.jsHeapSizeLimit / 1048576 * 100) / 100
      };
    }
    return null;
  }
};

// Component performance wrapper
export function withPerformanceTracking<T extends object>(
  Component: React.ComponentType<T>,
  componentName: string
) {
  return function PerformanceTrackedComponent(props: T) {
    React.useEffect(() => {
      const stopTracking = bundleAnalytics.trackComponentLoad(componentName);
      return stopTracking;
    }, []);

    return React.createElement(Component, props);
  };
}