@umituz/web-design-system 1.0.4 → 1.3.1

package/src/infrastructure/performance/useLazyLoading.ts

@@ -0,0 +1,342 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+
+export const useIntersectionObserver = (
+  options: IntersectionObserverInit = {}
+) => {
+  const [isIntersecting, setIsIntersecting] = useState(false);
+  const [hasIntersected, setHasIntersected] = useState(false);
+  const targetRef = useRef<HTMLElement>(null);
+
+  const defaultOptions = React.useMemo(() => ({
+    threshold: 0.1,
+    rootMargin: '50px',
+    ...options,
+  }), [options]);
+
+  useEffect(() => {
+    const target = targetRef.current;
+    if (!target) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        const isVisible = entry.isIntersecting;
+        setIsIntersecting(isVisible);
+
+        if (isVisible && !hasIntersected) {
+          setHasIntersected(true);
+        }
+      },
+      defaultOptions
+    );
+
+    observer.observe(target);
+
+    return () => {
+      observer.unobserve(target);
+    };
+  }, [defaultOptions, hasIntersected]);
+
+  return {
+    targetRef,
+    isIntersecting,
+    hasIntersected,
+  };
+};
+
+export const useLazyImage = (src: string, placeholder?: string) => {
+  const [imageSrc, setImageSrc] = useState(placeholder || '');
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [isError, setIsError] = useState(false);
+  const { targetRef, hasIntersected } = useIntersectionObserver();
+
+  useEffect(() => {
+    if (!hasIntersected || !src) return;
+
+    const img = new Image();
+
+    img.onload = () => {
+      setImageSrc(src);
+      setIsLoaded(true);
+      setIsError(false);
+    };
+
+    img.onerror = () => {
+      setIsError(true);
+      setIsLoaded(false);
+    };
+
+    img.src = src;
+
+    return () => {
+      img.onload = null;
+      img.onerror = null;
+    };
+  }, [hasIntersected, src]);
+
+  return {
+    targetRef,
+    imageSrc,
+    isLoaded,
+    isError,
+    hasIntersected,
+  };
+};
+
+export const useVirtualList = <T>(
+  items: T[],
+  options: {
+    itemHeight: number;
+    containerHeight: number;
+    overscan?: number;
+  }
+) => {
+  const { itemHeight, containerHeight, overscan = 5 } = options;
+  const [scrollTop, setScrollTop] = useState(0);
+  const scrollElementRef = useRef<HTMLDivElement>(null);
+
+  const totalHeight = items.length * itemHeight;
+  const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
+  const endIndex = Math.min(
+    items.length - 1,
+    Math.ceil((scrollTop + containerHeight) / itemHeight) + overscan
+  );
+
+  const visibleItems = items.slice(startIndex, endIndex + 1).map((item, index) => ({
+    item,
+    index: startIndex + index,
+    style: {
+      position: 'absolute' as const,
+      top: (startIndex + index) * itemHeight,
+      height: itemHeight,
+      width: '100%',
+    },
+  }));
+
+  const handleScroll = useCallback((event: React.UIEvent<HTMLDivElement>) => {
+    setScrollTop(event.currentTarget.scrollTop);
+  }, []);
+
+  return {
+    scrollElementRef,
+    visibleItems,
+    totalHeight,
+    handleScroll,
+    startIndex,
+    endIndex,
+  };
+};
+
+export const useResourcePreloader = () => {
+  const [preloadedResources, setPreloadedResources] = useState<Set<string>>(new Set());
+  const [loadingResources, setLoadingResources] = useState<Set<string>>(new Set());
+
+  const preloadImage = useCallback(async (src: string): Promise<void> => {
+    if (preloadedResources.has(src) || loadingResources.has(src)) {
+      return;
+    }
+
+    setLoadingResources(prev => new Set(prev).add(src));
+
+    return new Promise((resolve, reject) => {
+      const img = new Image();
+
+      img.onload = () => {
+        setPreloadedResources(prev => new Set(prev).add(src));
+        setLoadingResources(prev => {
+          const newSet = new Set(prev);
+          newSet.delete(src);
+          return newSet;
+        });
+        resolve();
+      };
+
+      img.onerror = () => {
+        setLoadingResources(prev => {
+          const newSet = new Set(prev);
+          newSet.delete(src);
+          return newSet;
+        });
+        reject(new Error(`Failed to preload image: ${src}`));
+      };
+
+      img.src = src;
+    });
+  }, [preloadedResources, loadingResources]);
+
+  return {
+    preloadImage,
+    preloadedResources: Array.from(preloadedResources),
+    loadingResources: Array.from(loadingResources),
+    isPreloaded: (src: string) => preloadedResources.has(src),
+    isLoading: (src: string) => loadingResources.has(src),
+  };
+};
+
+export const useLazyComponent = <TProps = Record<string, unknown>>(
+  importFunc: () => Promise<{ default: React.ComponentType<TProps> }>,
+  fallback?: React.ComponentType<TProps>
+) => {
+  const [Component, setComponent] = useState<React.ComponentType<TProps> | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  const { targetRef, hasIntersected } = useIntersectionObserver();
+
+  const loadComponent = useCallback(async () => {
+    if (Component || isLoading) return;
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const module = await importFunc();
+      setComponent(() => module.default);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error('Failed to load component'));
+    } finally {
+      setIsLoading(false);
+    }
+  }, [importFunc, Component, isLoading]);
+
+  useEffect(() => {
+    if (hasIntersected) {
+      loadComponent();
+    }
+  }, [hasIntersected, loadComponent]);
+
+  const LazyComponent = useCallback((props: TProps) => {
+    if (error) {
+      return fallback ? React.createElement(fallback as React.ElementType, props) : null;
+    }
+
+    if (isLoading || !Component) {
+      return fallback ? React.createElement(fallback as React.ElementType, props) : null;
+    }
+
+    return React.createElement(Component as React.ElementType, props);
+  }, [Component, isLoading, error, fallback]);
+
+  return {
+    targetRef,
+    LazyComponent,
+    isLoading,
+    error,
+    hasIntersected,
+    loadComponent,
+  };
+};
+
+export const useProgressiveEnhancement = () => {
+  const [isOnline, setIsOnline] = useState(navigator.onLine);
+  const [connectionType, setConnectionType] = useState<'slow' | 'fast' | 'unknown'>('unknown');
+
+  const handleOnline = useCallback(() => {
+    setIsOnline(true);
+  }, []);
+
+  const handleOffline = useCallback(() => {
+    setIsOnline(false);
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener('online', handleOnline);
+    window.addEventListener('offline', handleOffline);
+
+    interface NetworkInformation {
+      effectiveType?: string;
+      addEventListener?: (type: string, listener: () => void) => void;
+      removeEventListener?: (type: string, listener: () => void) => void;
+    }
+
+    function getConnection(): NetworkInformation | undefined {
+      const nav = navigator as unknown as {
+        connection?: unknown;
+        mozConnection?: unknown;
+        webkitConnection?: unknown;
+      };
+      const conn = nav.connection || nav.mozConnection || nav.webkitConnection;
+      if (
+        conn &&
+        (typeof conn === 'object') &&
+        ('effectiveType' in conn)
+      ) {
+        return conn as NetworkInformation;
+      }
+      return undefined;
+    }
+
+    const connection = getConnection();
+
+    if (connection) {
+      const updateConnectionType = () => {
+        const effectiveType = connection.effectiveType;
+        if (effectiveType === 'slow-2g' || effectiveType === '2g') {
+          setConnectionType('slow');
+        } else if (effectiveType === '3g' || effectiveType === '4g') {
+          setConnectionType('fast');
+        } else {
+          setConnectionType('unknown');
+        }
+      };
+
+      updateConnectionType();
+      connection.addEventListener?.('change', updateConnectionType);
+
+      return () => {
+        window.removeEventListener('online', handleOnline);
+        window.removeEventListener('offline', handleOffline);
+        connection.removeEventListener?.('change', updateConnectionType);
+      };
+    }
+
+    return () => {
+      window.removeEventListener('online', handleOnline);
+      window.removeEventListener('offline', handleOffline);
+    };
+  }, [handleOnline, handleOffline]);
+
+  const shouldLoadHeavyContent = useCallback(() => {
+    return isOnline && connectionType !== 'slow';
+  }, [isOnline, connectionType]);
+
+  const shouldPreloadContent = useCallback(() => {
+    return isOnline && connectionType === 'fast';
+  }, [isOnline, connectionType]);
+
+  return {
+    isOnline,
+    connectionType,
+    shouldLoadHeavyContent,
+    shouldPreloadContent,
+  };
+};
+
+export const useLazyLoading = (options: {
+  enableImageLazyLoading?: boolean;
+  enableComponentLazyLoading?: boolean;
+  enableVirtualization?: boolean;
+  enablePreloading?: boolean;
+  enableProgressiveEnhancement?: boolean;
+} = {}) => {
+  const {
+    enableImageLazyLoading = true,
+    enableComponentLazyLoading = true,
+    enableVirtualization = true,
+    enablePreloading = true,
+    enableProgressiveEnhancement = true,
+  } = options;
+
+  const resourcePreloader = useResourcePreloader();
+  const progressiveEnhancement = useProgressiveEnhancement();
+
+  return {
+    useIntersectionObserver,
+    useLazyImage: enableImageLazyLoading ? useLazyImage : null,
+    useLazyComponent: enableComponentLazyLoading ? useLazyComponent : null,
+    useVirtualList: enableVirtualization ? useVirtualList : null,
+    preloadImage: enablePreloading ? resourcePreloader.preloadImage : undefined,
+    shouldLoadHeavyContent: enableProgressiveEnhancement ? progressiveEnhancement.shouldLoadHeavyContent : undefined,
+    shouldPreloadContent: enableProgressiveEnhancement ? progressiveEnhancement.shouldPreloadContent : undefined,
+    isOnline: enableProgressiveEnhancement ? progressiveEnhancement.isOnline : undefined,
+    connectionType: enableProgressiveEnhancement ? progressiveEnhancement.connectionType : undefined,
+  };
+};

package/src/infrastructure/performance/useMemoryOptimization.ts

@@ -0,0 +1,293 @@
+import { useEffect, useRef, useCallback, useState } from 'react';
+
+export interface MemoryOptimizationConfig {
+  enableCleanupLogging?: boolean;
+  trackEventListeners?: boolean;
+  trackTimers?: boolean;
+  trackSubscriptions?: boolean;
+}
+
+export interface CleanupFunction {
+  (): void;
+}
+
+export const useMemoryOptimization = (config: MemoryOptimizationConfig = {}) => {
+  const {
+    enableCleanupLogging = import.meta.env.DEV,
+    trackEventListeners = true,
+    trackTimers = true,
+    trackSubscriptions = true
+  } = config;
+
+  const cleanupFunctions = useRef<CleanupFunction[]>([]);
+  const eventListeners = useRef<Array<{
+    element: EventTarget;
+    event: string;
+    handler: EventListener;
+    options?: AddEventListenerOptions;
+  }>>([]);
+  const timers = useRef<Array<{
+    id: number;
+    type: 'timeout' | 'interval';
+  }>>([]);
+  const subscriptions = useRef<Array<{
+    name: string;
+    unsubscribe: () => void;
+  }>>([]);
+
+  const addCleanup = useCallback((cleanup: CleanupFunction, name?: string) => {
+    cleanupFunctions.current.push(cleanup);
+
+    if (enableCleanupLogging && name) {
+      console.log(`[Memory] Added cleanup: ${name}`);
+    }
+
+    return () => {
+      const index = cleanupFunctions.current.indexOf(cleanup);
+      if (index > -1) {
+        cleanupFunctions.current.splice(index, 1);
+      }
+    };
+  }, [enableCleanupLogging]);
+
+  const addEventListener = useCallback((
+    element: EventTarget,
+    event: string,
+    handler: EventListener,
+    options?: AddEventListenerOptions
+  ) => {
+    if (!trackEventListeners) {
+      element.addEventListener(event, handler, options);
+      return () => element.removeEventListener(event, handler, options);
+    }
+
+    element.addEventListener(event, handler, options);
+
+    const listenerInfo = { element, event, handler, options };
+    eventListeners.current.push(listenerInfo);
+
+    if (enableCleanupLogging) {
+      console.log(`[Memory] Added event listener: ${event}`);
+    }
+
+    return () => {
+      element.removeEventListener(event, handler, options);
+      const index = eventListeners.current.indexOf(listenerInfo);
+      if (index > -1) {
+        eventListeners.current.splice(index, 1);
+      }
+    };
+  }, [trackEventListeners, enableCleanupLogging]);
+
+  const setTimeout = useCallback((
+    callback: () => void,
+    delay: number
+  ) => {
+    const id = window.setTimeout(callback, delay);
+
+    if (trackTimers) {
+      timers.current.push({ id, type: 'timeout' });
+
+      if (enableCleanupLogging) {
+        console.log(`[Memory] Added timeout: ${id}`);
+      }
+    }
+
+    return id;
+  }, [trackTimers, enableCleanupLogging]);
+
+  const setInterval = useCallback((
+    callback: () => void,
+    delay: number
+  ) => {
+    const id = window.setInterval(callback, delay);
+
+    if (trackTimers) {
+      timers.current.push({ id, type: 'interval' });
+
+      if (enableCleanupLogging) {
+        console.log(`[Memory] Added interval: ${id}`);
+      }
+    }
+
+    return id;
+  }, [trackTimers, enableCleanupLogging]);
+
+  const clearTimeout = useCallback((id: number) => {
+    window.clearTimeout(id);
+
+    if (trackTimers) {
+      const index = timers.current.findIndex(timer => timer.id === id);
+      if (index > -1) {
+        timers.current.splice(index, 1);
+
+        if (enableCleanupLogging) {
+          console.log(`[Memory] Cleared timeout: ${id}`);
+        }
+      }
+    }
+  }, [trackTimers, enableCleanupLogging]);
+
+  const clearInterval = useCallback((id: number) => {
+    window.clearInterval(id);
+
+    if (trackTimers) {
+      const index = timers.current.findIndex(timer => timer.id === id);
+      if (index > -1) {
+        timers.current.splice(index, 1);
+
+        if (enableCleanupLogging) {
+          console.log(`[Memory] Cleared interval: ${id}`);
+        }
+      }
+    }
+  }, [trackTimers, enableCleanupLogging]);
+
+  const addSubscription = useCallback((
+    name: string,
+    unsubscribe: () => void
+  ) => {
+    if (!trackSubscriptions) {
+      return unsubscribe;
+    }
+
+    const subscription = { name, unsubscribe };
+    subscriptions.current.push(subscription);
+
+    if (enableCleanupLogging) {
+      console.log(`[Memory] Added subscription: ${name}`);
+    }
+
+    return () => {
+      unsubscribe();
+      const index = subscriptions.current.indexOf(subscription);
+      if (index > -1) {
+        subscriptions.current.splice(index, 1);
+
+        if (enableCleanupLogging) {
+          console.log(`[Memory] Unsubscribed: ${name}`);
+        }
+      }
+    };
+  }, [trackSubscriptions, enableCleanupLogging]);
+
+  const getMemoryStats = useCallback(() => {
+    return {
+      cleanupFunctions: cleanupFunctions.current.length,
+      eventListeners: eventListeners.current.length,
+      timers: timers.current.length,
+      subscriptions: subscriptions.current.length,
+      totalTrackedItems:
+        cleanupFunctions.current.length +
+        eventListeners.current.length +
+        timers.current.length +
+        subscriptions.current.length
+    };
+  }, []);
+
+  const cleanup = useCallback(() => {
+    if (enableCleanupLogging) {
+      const stats = getMemoryStats();
+      console.log(`[Memory] Running cleanup with ${stats.totalTrackedItems} items`);
+    }
+
+    eventListeners.current.forEach(({ element, event, handler, options }) => {
+      element.removeEventListener(event, handler, options);
+    });
+    eventListeners.current = [];
+
+    timers.current.forEach(({ id, type }) => {
+      if (type === 'timeout') {
+        window.clearTimeout(id);
+      } else {
+        window.clearInterval(id);
+      }
+    });
+    timers.current = [];
+
+    subscriptions.current.forEach(({ unsubscribe }) => {
+      unsubscribe();
+    });
+    subscriptions.current = [];
+
+    cleanupFunctions.current.forEach(cleanup => {
+      try {
+        cleanup();
+      } catch (error) {
+        console.error('[Memory] Cleanup function failed:', error);
+      }
+    });
+    cleanupFunctions.current = [];
+
+    if (enableCleanupLogging) {
+      console.log('[Memory] Cleanup complete');
+    }
+  }, [enableCleanupLogging, getMemoryStats]);
+
+  useEffect(() => {
+    return () => {
+      if (enableCleanupLogging) {
+        const stats = getMemoryStats();
+        console.log(`[Memory] Unmounting with ${stats.totalTrackedItems} items to clean`);
+      }
+
+      cleanup();
+    };
+  }, [cleanup, enableCleanupLogging, getMemoryStats]);
+
+  return {
+    addCleanup,
+    addEventListener,
+    setTimeout,
+    setInterval,
+    clearTimeout,
+    clearInterval,
+    addSubscription,
+    getMemoryStats,
+    cleanup
+  };
+};
+
+export const useMemoryLeakDetector = (componentName?: string) => {
+  const mountTime = useRef<number>(Date.now());
+  const [renderCount, setRenderCount] = useState<number>(0);
+  const [lifespan, setLifespan] = useState<number>(0);
+
+  useEffect(() => {
+    setRenderCount(prev => {
+      const newCount = prev + 1;
+
+      if (newCount > 100 && newCount % 10 === 0) {
+        console.warn(
+          `[Memory Leak] ${componentName || 'Component'} has rendered ${newCount} times. ` +
+          'This might indicate a memory leak or unnecessary re-renders.'
+        );
+      }
+
+      return newCount;
+    });
+  });
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setLifespan(Date.now() - mountTime.current);
+    }, 1000);
+
+    return () => {
+      clearInterval(interval);
+      const finalLifespan = Date.now() - mountTime.current;
+
+      if (import.meta.env.DEV) {
+        console.log(
+          `[Memory] ${componentName || 'Component'} unmounted after ${finalLifespan}ms ` +
+          `with ${renderCount} renders`
+        );
+      }
+    };
+  }, [componentName, renderCount]);
+
+  return {
+    renderCount,
+    lifespan
+  };
+};