@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.3 → 0.1.5

package/src/utils/lazy-loading.ts

@@ -0,0 +1,441 @@
+import React from 'react';
+
+// Lazy loading utilities for code splitting and dynamic imports
+export interface LazyLoadConfig {
+  enabled: boolean;
+  preloadThreshold: number;
+  cacheSize: number;
+  retryAttempts: number;
+  retryDelay: number;
+  loadingTimeout: number;
+}
+
+export interface LazyLoadResult<T> {
+  data: T | null;
+  loading: boolean;
+  error: Error | null;
+  retry: () => Promise<LazyLoadResult<T>>;
+}
+
+export interface LazyLoadStats {
+  totalRequests: number;
+  successfulLoads: number;
+  failedLoads: number;
+  cacheHits: number;
+  averageLoadTime: number;
+  totalLoadTime: number;
+}
+
+export class LazyLoader {
+  private config: LazyLoadConfig;
+  private cache: Map<string, { data: any; timestamp: number; ttl: number }>;
+  private loadingStates: Map<string, boolean>;
+  private errorStates: Map<string, Error>;
+  private stats: LazyLoadStats;
+  private preloadQueue: Set<string>;
+  private retryCounts: Map<string, number>;
+
+  constructor(config: LazyLoadConfig = {
+    enabled: true,
+    preloadThreshold: 0.8,
+    cacheSize: 100,
+    retryAttempts: 3,
+    retryDelay: 1000,
+    loadingTimeout: 10000
+  }) {
+    this.config = config;
+    this.cache = new Map();
+    this.loadingStates = new Map();
+    this.errorStates = new Map();
+    this.stats = {
+      totalRequests: 0,
+      successfulLoads: 0,
+      failedLoads: 0,
+      cacheHits: 0,
+      averageLoadTime: 0,
+      totalLoadTime: 0
+    };
+    this.preloadQueue = new Set();
+    this.retryCounts = new Map();
+  }
+
+  // Lazy load a module with dynamic import
+  async lazyLoad<T>(
+    modulePath: string,
+    importFn: () => Promise<T>,
+    options: {
+      cacheKey?: string;
+      ttl?: number;
+      preload?: boolean;
+    } = {}
+  ): Promise<LazyLoadResult<T>> {
+    const cacheKey = options.cacheKey || modulePath;
+    const ttl = options.ttl || 300000; // 5 minutes default
+
+    // Check cache first
+    if (this.config.enabled && this.cache.has(cacheKey)) {
+      const cached = this.cache.get(cacheKey)!;
+      if (Date.now() - cached.timestamp < cached.ttl) {
+        this.stats.cacheHits++;
+        this.stats.totalRequests++; // Count cache hits as requests too
+        return {
+          data: cached.data,
+          loading: false,
+          error: null,
+          retry: () => {
+            // Clear error state before retrying
+            this.errorStates.delete(cacheKey);
+            this.retryCounts.delete(cacheKey);
+            return this.lazyLoad(modulePath, importFn, options);
+          }
+        };
+      } else {
+        // Remove expired cache entry
+        this.cache.delete(cacheKey);
+      }
+    }
+
+    // Check if already loading
+    if (this.loadingStates.get(cacheKey)) {
+      return {
+        data: null,
+        loading: true,
+        error: null,
+        retry: () => this.lazyLoad(modulePath, importFn, options)
+      };
+    }
+
+    // Check for previous errors
+    const previousError = this.errorStates.get(cacheKey);
+    if (previousError) {
+      return {
+        data: null,
+        loading: false,
+        error: previousError,
+        retry: () => this.lazyLoad(modulePath, importFn, options)
+      };
+    }
+
+    // Start loading
+    this.loadingStates.set(cacheKey, true);
+    this.stats.totalRequests++;
+
+    const startTime = Date.now();
+
+    try {
+      const data = await Promise.race([
+        importFn(),
+        this.createTimeout(this.config.loadingTimeout)
+      ]);
+
+      // Success
+      this.loadingStates.delete(cacheKey);
+      this.errorStates.delete(cacheKey);
+      this.stats.successfulLoads++;
+
+      // Cache the result
+      if (this.config.enabled) {
+        this.cacheResult(cacheKey, data, ttl);
+      }
+
+      // Update stats
+      const loadTime = Date.now() - startTime;
+      this.updateLoadTimeStats(loadTime);
+
+      // Preload related modules if enabled
+      if (options.preload && this.config.enabled) {
+        this.queuePreload(modulePath);
+      }
+
+      return {
+        data,
+        loading: false,
+        error: null,
+        retry: () => this.lazyLoad(modulePath, importFn, options)
+      };
+
+    } catch (error) {
+      // Handle error
+      this.loadingStates.delete(cacheKey);
+      this.stats.failedLoads++;
+
+      const loadTime = Date.now() - startTime;
+      this.updateLoadTimeStats(loadTime);
+
+      const retryCount = this.retryCounts.get(cacheKey) || 0;
+      if (retryCount < this.config.retryAttempts) {
+        this.retryCounts.set(cacheKey, retryCount + 1);
+        
+        // Auto-retry after delay
+        setTimeout(() => {
+          this.retryCounts.delete(cacheKey);
+        }, this.config.retryDelay);
+      }
+
+      const errorObj = error instanceof Error ? error : new Error(String(error));
+      this.errorStates.set(cacheKey, errorObj);
+
+      return {
+        data: null,
+        loading: false,
+        error: errorObj,
+        retry: () => {
+          // Clear error state before retrying
+          this.errorStates.delete(cacheKey);
+          this.retryCounts.delete(cacheKey);
+          return this.lazyLoad(modulePath, importFn, options);
+        }
+      };
+    }
+  }
+
+  // Preload a module without waiting for the result
+  preload<T>(modulePath: string, importFn: () => Promise<T>): void {
+    if (!this.config.enabled) return;
+
+    // Limit preload queue size
+    if (this.preloadQueue.size >= 10) {
+      const oldestKey = this.preloadQueue.values().next().value;
+      if (oldestKey) {
+        this.preloadQueue.delete(oldestKey);
+      }
+    }
+
+    this.preloadQueue.add(modulePath);
+    
+    // Use requestIdleCallback if available, otherwise setTimeout
+    if ('requestIdleCallback' in window) {
+      (window as any).requestIdleCallback(() => {
+        this.executePreload(modulePath, importFn);
+      });
+    } else {
+      setTimeout(() => {
+        this.executePreload(modulePath, importFn);
+      }, 100);
+    }
+  }
+
+  // Execute preload
+  private async executePreload<T>(modulePath: string, importFn: () => Promise<T>): Promise<void> {
+    try {
+      await this.lazyLoad(modulePath, importFn, { cacheKey: modulePath, ttl: 600000 }); // 10 minutes for preloaded modules
+    } catch (error) {
+      // Silently fail preloads
+      console.debug(`Preload failed for ${modulePath}:`, error);
+    } finally {
+      this.preloadQueue.delete(modulePath);
+    }
+  }
+
+  // Queue preload for later execution
+  private queuePreload(modulePath: string): void {
+    if (this.preloadQueue.size < 10) { // Limit preload queue
+      this.preloadQueue.add(modulePath);
+    }
+  }
+
+
+
+  // Cache a result
+  private cacheResult(key: string, data: any, ttl: number): void {
+    // Implement LRU cache eviction
+    if (this.cache.size >= this.config.cacheSize) {
+      const oldestKey = this.cache.keys().next().value;
+      if (oldestKey) {
+        this.cache.delete(oldestKey);
+      }
+    }
+
+    this.cache.set(key, {
+      data,
+      timestamp: Date.now(),
+      ttl
+    });
+  }
+
+  // Create a timeout promise
+  private createTimeout(ms: number): Promise<never> {
+    return new Promise((_, reject) => {
+      setTimeout(() => reject(new Error(`Loading timeout after ${ms}ms`)), ms);
+    });
+  }
+
+  // Update load time statistics
+  private updateLoadTimeStats(loadTime: number): void {
+    this.stats.totalLoadTime += loadTime;
+    this.stats.averageLoadTime = this.stats.totalLoadTime / this.stats.totalRequests;
+  }
+
+  // Get loading state for a module
+  isLoading(modulePath: string): boolean {
+    return this.loadingStates.has(modulePath);
+  }
+
+  // Get error state for a module
+  getError(modulePath: string): Error | null {
+    return this.errorStates.get(modulePath) || null;
+  }
+
+  // Clear cache for a specific module
+  clearCache(modulePath: string): void {
+    this.cache.delete(modulePath);
+    this.errorStates.delete(modulePath);
+    this.retryCounts.delete(modulePath);
+  }
+
+  // Clear all cache
+  clearAllCache(): void {
+    this.cache.clear();
+    this.errorStates.clear();
+    this.retryCounts.clear();
+  }
+
+  // Get cache statistics
+  getCacheStats(): {
+    size: number;
+    maxSize: number;
+    hitRate: number;
+  } {
+    const hitRate = this.stats.totalRequests > 0 
+      ? (this.stats.cacheHits / this.stats.totalRequests) * 100 
+      : 0;
+
+    return {
+      size: this.cache.size,
+      maxSize: this.config.cacheSize,
+      hitRate
+    };
+  }
+
+  // Get performance statistics
+  getStats(): LazyLoadStats {
+    return { ...this.stats };
+  }
+
+  // Reset all statistics
+  resetStats(): void {
+    this.stats = {
+      totalRequests: 0,
+      successfulLoads: 0,
+      failedLoads: 0,
+      cacheHits: 0,
+      averageLoadTime: 0,
+      totalLoadTime: 0
+    };
+  }
+
+  // Check if preload is in progress
+  isPreloading(modulePath: string): boolean {
+    return this.preloadQueue.has(modulePath);
+  }
+
+  // Get preload queue status
+  getPreloadQueue(): string[] {
+    return Array.from(this.preloadQueue);
+  }
+
+  // Update configuration
+  updateConfig(newConfig: Partial<LazyLoadConfig>): void {
+    this.config = { ...this.config, ...newConfig };
+    
+    // Adjust cache size if needed
+    if (newConfig.cacheSize && newConfig.cacheSize < this.cache.size) {
+      const entries = Array.from(this.cache.entries());
+      entries.sort((a, b) => a[1].timestamp - b[1].timestamp);
+      
+      // Remove oldest entries
+      const toRemove = entries.slice(0, this.cache.size - newConfig.cacheSize);
+      toRemove.forEach(([key]) => this.cache.delete(key));
+    }
+  }
+
+  // Export lazy loading analysis
+  exportAnalysis(): string {
+    const cacheStats = this.getCacheStats();
+    const stats = this.getStats();
+    const preloadQueue = this.getPreloadQueue();
+
+    return JSON.stringify({
+      config: this.config,
+      cacheStats,
+      performanceStats: stats,
+      preloadQueue,
+      timestamp: new Date().toISOString()
+    }, null, 2);
+  }
+}
+
+// Create and export default instance
+export const lazyLoader = new LazyLoader();
+
+// Utility function for React lazy loading
+export function createLazyComponent<T>(
+  importFn: () => Promise<{ default: React.ComponentType<T> }>
+): React.LazyExoticComponent<React.ComponentType<T>> {
+  return React.lazy(importFn);
+}
+
+// Utility function for conditional lazy loading
+export function conditionalLazyLoad<T>(
+  condition: boolean,
+  importFn: () => Promise<T>,
+  fallback: T
+): Promise<T> {
+  if (condition) {
+    return importFn();
+  }
+  return Promise.resolve(fallback);
+}
+
+// Utility function for batch lazy loading
+export function batchLazyLoad<T>(
+  modules: Array<{ path: string; importFn: () => Promise<T> }>,
+  options: { parallel?: boolean; maxConcurrent?: number } = {}
+): Promise<T[]> {
+  const { parallel = true, maxConcurrent = 3 } = options;
+
+  if (!parallel) {
+    // Sequential loading
+    return modules.reduce(async (promise, module) => {
+      const results = await promise;
+      const result = await module.importFn();
+      return [...results, result];
+    }, Promise.resolve([] as T[]));
+  }
+
+  // Parallel loading with concurrency limit
+  const results: T[] = [];
+  const queue = [...modules];
+  const active: Promise<void>[] = [];
+
+  return new Promise((resolve, reject) => {
+    function processQueue() {
+      if (queue.length === 0 && active.length === 0) {
+        resolve(results);
+        return;
+      }
+
+      while (active.length < maxConcurrent && queue.length > 0) {
+        const module = queue.shift()!;
+        const index = modules.indexOf(module);
+        
+        const promise = module.importFn()
+          .then(result => {
+            results[index] = result;
+          })
+          .catch(reject)
+          .finally(() => {
+            const activeIndex = active.indexOf(promise);
+            if (activeIndex > -1) {
+              active.splice(activeIndex, 1);
+            }
+            processQueue();
+          });
+
+        active.push(promise);
+      }
+    }
+
+    processQueue();
+  });
+}