@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.9 → 0.2.11

package/dist/utils/performance-monitor.js

@@ -1,63 +1,66 @@
 // Performance monitoring utilities for tracking various metrics
 export interface PerformanceMetric {
-  name;
-  value;
-  unit;
-  timestamp;
-  metadata?, any>;
+  name: string;
+  value: number;
+  unit: string;
+  timestamp: number;
+  metadata?: Record<string, any>;
 }
 
 export interface PerformanceThreshold {
-  name;
-  warning;
-  critical;
-  unit;
+  name: string;
+  warning: number;
+  critical: number;
+  unit: string;
 }
 
 export interface PerformanceReport {
-  metrics];
-  thresholds];
-  violations;
-    value;
-    threshold;
-    severity;
+  metrics: PerformanceMetric[];
+  thresholds: PerformanceThreshold[];
+  violations: Array<{
+    metric: string;
+    value: number;
+    threshold: number;
+    severity: 'warning' | 'critical';
   }>;
-  summary;
-    warnings;
-    criticals;
-    averagePerformance;
+  summary: {
+    totalMetrics: number;
+    warnings: number;
+    criticals: number;
+    averagePerformance: number;
   };
-  timestamp;
+  timestamp: number;
 }
 
 export interface PerformanceMonitorConfig {
-  enabled;
-  autoCollect;
-  collectionInterval;
-  maxMetrics;
-  thresholds];
-  enableWebVitals;
-  enableMemoryMonitoring;
-  enableNetworkMonitoring;
+  enabled: boolean;
+  autoCollect: boolean;
+  collectionInterval: number;
+  maxMetrics: number;
+  thresholds: PerformanceThreshold[];
+  enableWebVitals: boolean;
+  enableMemoryMonitoring: boolean;
+  enableNetworkMonitoring: boolean;
 }
 
 export class PerformanceMonitor {
-  private config;
-  private metrics];
-  private thresholds, PerformanceThreshold>;
-  private observers, PerformanceObserver>;
-  private collectionTimer;
-  private startTime;
-
-  constructor(config= {
-    enabled,
-    autoCollect,
-    collectionInterval, // 5 seconds
-    maxMetrics,
-    thresholds],
-    enableWebVitals,
-    enableMemoryMonitoring,
-    enableNetworkMonitoring}) {
+  private config: PerformanceMonitorConfig;
+  private metrics: PerformanceMetric[];
+  private thresholds: Map<string, PerformanceThreshold>;
+  private observers: Map<string, PerformanceObserver>;
+  private collectionTimer: NodeJS.Timeout | null;
+  private startTime: number;
+
+  constructor(config: PerformanceMonitorConfig = {
+    enabled: true,
+    autoCollect: true,
+    collectionInterval: 5000, // 5 seconds
+    maxMetrics: 1000,
+    thresholds: [],
+    enableWebVitals: true,
+    enableMemoryMonitoring: true,
+    enableNetworkMonitoring: true
+  }) {
     this.config = config;
     this.metrics = [];
     this.thresholds = new Map();
@@ -87,13 +90,14 @@ export class PerformanceMonitor {
   }
 
   // Set up default performance thresholds
-  private setupDefaultThresholds()] = [
-      { name, warning, critical, unit},
-      { name, warning, critical, unit},
-      { name, warning, critical, unit},
-      { name, warning, critical, unit},
-      { name, warning, critical, unit},
-      { name, warning, critical, unit}
+  private setupDefaultThresholds(): void {
+    const defaultThresholds: PerformanceThreshold[] = [
+      { name: 'themeSwitchTime', warning: 100, critical: 300, unit: 'ms' },
+      { name: 'componentRenderTime', warning: 50, critical: 150, unit: 'ms' },
+      { name: 'bundleLoadTime', warning: 2000, critical: 5000, unit: 'ms' },
+      { name: 'memoryUsage', warning: 100, critical: 500, unit: 'MB' },
+      { name: 'firstContentfulPaint', warning: 1000, critical: 3000, unit: 'ms' },
+      { name: 'largestContentfulPaint', warning: 2500, critical: 4000, unit: 'ms' }
     ];
 
     defaultThresholds.forEach(threshold => {
@@ -102,7 +106,8 @@ export class PerformanceMonitor {
   }
 
   // Set up Web Vitals observer
-  private setupWebVitalsObserver())) return;
+  private setupWebVitalsObserver(): void {
+    if (!('PerformanceObserver' in window)) return;
 
     try {
       // First Contentful Paint
@@ -110,22 +115,24 @@ export class PerformanceMonitor {
         const entries = list.getEntries();
         entries.forEach(entry => {
           this.recordMetric('firstContentfulPaint', entry.startTime, 'ms', {
-            entryType,
-            name});
+            entryType: entry.entryType,
+            name: entry.name
+          });
         });
       });
-      fcpObserver.observe({ entryTypes] });
+      fcpObserver.observe({ entryTypes: ['paint'] });
 
       // Largest Contentful Paint
       const lcpObserver = new PerformanceObserver((list) => {
         const entries = list.getEntries();
         entries.forEach(entry => {
           this.recordMetric('largestContentfulPaint', entry.startTime, 'ms', {
-            entryType,
-            name});
+            entryType: entry.entryType,
+            name: entry.name
+          });
         });
       });
-      lcpObserver.observe({ entryTypes] });
+      lcpObserver.observe({ entryTypes: ['largest-contentful-paint'] });
 
       // First Input Delay
       const fidObserver = new PerformanceObserver((list) => {
@@ -134,12 +141,13 @@ export class PerformanceMonitor {
           if ('processingStart' in entry) {
             const fidEntry = entry as any;
             this.recordMetric('firstInputDelay', fidEntry.processingStart - fidEntry.startTime, 'ms', {
-              entryType,
-              name});
+              entryType: entry.entryType,
+              name: entry.name
+            });
           }
         });
       });
-      fidObserver.observe({ entryTypes] });
+      fidObserver.observe({ entryTypes: ['first-input'] });
 
       // Cumulative Layout Shift
       const clsObserver = new PerformanceObserver((list) => {
@@ -148,27 +156,29 @@ export class PerformanceMonitor {
           if ('value' in entry) {
             const clsEntry = entry as any;
             this.recordMetric('cumulativeLayoutShift', clsEntry.value, 'score', {
-              entryType,
-              name});
+              entryType: entry.entryType,
+              name: entry.name
+            });
           }
         });
       });
-      clsObserver.observe({ entryTypes] });
+      clsObserver.observe({ entryTypes: ['layout-shift'] });
 
       this.observers.set('webVitals', fcpObserver);
     } catch (error) {
-      console.warn('Failed to set up Web Vitals observer, error);
+      console.warn('Failed to set up Web Vitals observer:', error);
     }
   }
 
   // Record a performance metric
-  recordMetric(name, value, unit, metadata?, any>)) return;
+  recordMetric(name: string, value: number, unit: string, metadata?: Record<string, any>): void {
+    if (!this.config.enabled) return;
 
-    const metric= {
+    const metric: PerformanceMetric = {
       name,
       value,
       unit,
-      timestamp),
+      timestamp: Date.now(),
       metadata
     };
 
@@ -184,7 +194,8 @@ export class PerformanceMonitor {
   }
 
   // Check if a metric violates any thresholds
-  private checkThresholds(metric)= this.thresholds.get(metric.name);
+  private checkThresholds(metric: PerformanceMetric): void {
+    const threshold = this.thresholds.get(metric.name);
     if (!threshold) return;
 
     if (metric.value >= threshold.critical) {
@@ -195,24 +206,28 @@ export class PerformanceMonitor {
   }
 
   // Emit threshold violation event
-  private emitThresholdViolation(metric, threshold, severity)= new CustomEvent('performanceThresholdViolation', {
-      detail,
-        value,
-        threshold],
+  private emitThresholdViolation(metric: PerformanceMetric, threshold: PerformanceThreshold, severity: 'warning' | 'critical'): void {
+    const event = new CustomEvent('performanceThresholdViolation', {
+      detail: {
+        metric: metric.name,
+        value: metric.value,
+        threshold: threshold[severity],
         severity,
-        unit,
-        timestamp}
+        unit: threshold.unit,
+        timestamp: metric.timestamp
+      }
     });
 
     window.dispatchEvent(event);
 
     // Log to console
-    const logMethod = severity === 'critical' ? 'error' ;
-    console[logMethod](`Performance ${severity}} = ${metric.value}${metric.unit} (threshold]}${threshold.unit})`);
+    const logMethod = severity === 'critical' ? 'error' : 'warn';
+    console[logMethod](`Performance ${severity}: ${metric.name} = ${metric.value}${metric.unit} (threshold: ${threshold[severity]}${threshold.unit})`);
   }
 
   // Measure theme switch performance
-  measureThemeSwitch(callback) => void)= performance.now();
+  measureThemeSwitch(callback: () => void): number {
+    const startTime = performance.now();
     callback();
     const endTime = performance.now();
     const duration = endTime - startTime;
@@ -222,7 +237,8 @@ export class PerformanceMonitor {
   }
 
   // Measure component render performance
-  measureComponentRender(callback) => void)= performance.now();
+  measureComponentRender(callback: () => void): number {
+    const startTime = performance.now();
     callback();
     const endTime = performance.now();
     const duration = endTime - startTime;
@@ -232,7 +248,8 @@ export class PerformanceMonitor {
   }
 
   // Measure bundle load performance
-  measureBundleLoad(callback) => Promise<any>)= performance.now();
+  measureBundleLoad(callback: () => Promise<any>): Promise<number> {
+    const startTime = performance.now();
     return callback().then(() => {
       const endTime = performance.now();
       const duration = endTime - startTime;
@@ -242,7 +259,8 @@ export class PerformanceMonitor {
   }
 
   // Measure memory usage
-  measureMemoryUsage())) {
+  measureMemoryUsage(): number | null {
+    if (!this.config.enableMemoryMonitoring || !('memory' in performance)) {
       return null;
     }
 
@@ -250,14 +268,16 @@ export class PerformanceMonitor {
     const usedMB = memory.usedJSHeapSize / 1024 / 1024;
     
     this.recordMetric('memoryUsage', usedMB, 'MB', {
-      totalJSHeapSize,
-      jsHeapSizeLimit});
+      totalJSHeapSize: memory.totalJSHeapSize / 1024 / 1024,
+      jsHeapSizeLimit: memory.jsHeapSizeLimit / 1024 / 1024
+    });
 
     return usedMB;
   }
 
   // Measure network performance
-  measureNetworkPerformance())) return;
+  measureNetworkPerformance(): void {
+    if (!this.config.enableNetworkMonitoring || !('getEntriesByType' in performance)) return;
 
     try {
       const navigationEntries = performance.getEntriesByType('navigation');
@@ -270,12 +290,13 @@ export class PerformanceMonitor {
         this.recordMetric('firstByte', nav.responseStart - nav.fetchStart, 'ms');
       }
     } catch (error) {
-      console.warn('Failed to measure network performance, error);
+      console.warn('Failed to measure network performance:', error);
     }
   }
 
   // Start automatic metric collection
-  startAutoCollection()) return;
+  startAutoCollection(): void {
+    if (this.collectionTimer) return;
 
     this.collectionTimer = setInterval(() => {
       // Collect memory usage
@@ -290,14 +311,17 @@ export class PerformanceMonitor {
   }
 
   // Stop automatic metric collection
-  stopAutoCollection()) {
+  stopAutoCollection(): void {
+    if (this.collectionTimer) {
       clearInterval(this.collectionTimer);
       this.collectionTimer = null;
     }
   }
 
   // Collect custom metrics
-  private collectCustomMetrics()= Date.now() - this.startTime;
+  private collectCustomMetrics(): void {
+    // Record uptime
+    const uptime = Date.now() - this.startTime;
     this.recordMetric('uptime', uptime, 'ms');
 
     // Record metric count
@@ -305,24 +329,26 @@ export class PerformanceMonitor {
   }
 
   // Get metrics by name
-  getMetricsByName(name)] {
+  getMetricsByName(name: string): PerformanceMetric[] {
     return this.metrics.filter(metric => metric.name === name);
   }
 
   // Get latest metric by name
-  getLatestMetric(name)= this.getMetricsByName(name);
-    return metrics.length > 0 ? metrics[metrics.length - 1] ;
+  getLatestMetric(name: string): PerformanceMetric | null {
+    const metrics = this.getMetricsByName(name);
+    return metrics.length > 0 ? metrics[metrics.length - 1] : null;
   }
 
   // Get metrics within time range
-  getMetricsInRange(startTime, endTime)] {
+  getMetricsInRange(startTime: number, endTime: number): PerformanceMetric[] {
     return this.metrics.filter(metric => 
       metric.timestamp >= startTime && metric.timestamp <= endTime
     );
   }
 
   // Calculate average for a metric
-  getAverageMetric(name, timeRange?; end})= this.getMetricsByName(name);
+  getAverageMetric(name: string, timeRange?: { start: number; end: number }): number {
+    let metrics = this.getMetricsByName(name);
     
     if (timeRange) {
       metrics = this.getMetricsInRange(timeRange.start, timeRange.end);
@@ -335,10 +361,12 @@ export class PerformanceMonitor {
   }
 
   // Get performance report
-  getPerformanceReport();
-      value;
-      threshold;
-      severity;
+  getPerformanceReport(): PerformanceReport {
+    const violations: Array<{
+      metric: string;
+      value: number;
+      threshold: number;
+      severity: 'warning' | 'critical';
     }> = [];
 
     // Check all metrics against thresholds
@@ -347,16 +375,18 @@ export class PerformanceMonitor {
       if (threshold) {
         if (metric.value >= threshold.critical) {
           violations.push({
-            metric,
-            value,
-            threshold,
-            severity});
+            metric: metric.name,
+            value: metric.value,
+            threshold: threshold.critical,
+            severity: 'critical'
+          });
         } else if (metric.value >= threshold.warning) {
           violations.push({
-            metric,
-            value,
-            threshold,
-            severity});
+            metric: metric.name,
+            value: metric.value,
+            threshold: threshold.warning,
+            severity: 'warning'
+          });
         }
       }
     });
@@ -368,48 +398,56 @@ export class PerformanceMonitor {
     const timeMetrics = this.metrics.filter(m => m.unit === 'ms');
     const averagePerformance = timeMetrics.length > 0 
       ? timeMetrics.reduce((sum, m) => sum + m.value, 0) / timeMetrics.length 
-      ;
+      : 0;
 
     return {
-      metrics],
-      thresholds)),
+      metrics: [...this.metrics],
+      thresholds: Array.from(this.thresholds.values()),
       violations,
-      summary,
+      summary: {
+        totalMetrics: this.metrics.length,
         warnings,
         criticals,
         averagePerformance
       },
-      timestamp)
+      timestamp: Date.now()
     };
   }
 
   // Add custom threshold
-  addThreshold(threshold), threshold);
+  addThreshold(threshold: PerformanceThreshold): void {
+    this.thresholds.set(threshold.name, threshold);
   }
 
   // Remove threshold
-  removeThreshold(name));
+  removeThreshold(name: string): void {
+    this.thresholds.delete(name);
   }
 
   // Clear all metrics
-  clearMetrics()= [];
+  clearMetrics(): void {
+    this.metrics = [];
   }
 
   // Export metrics to JSON
-  exportMetrics(),
-      metrics,
-      thresholds)),
-      report),
-      timestamp).toISOString()
+  exportMetrics(): string {
+    return JSON.stringify({
+      config: this.config,
+      metrics: this.metrics,
+      thresholds: Array.from(this.thresholds.values()),
+      report: this.getPerformanceReport(),
+      timestamp: new Date().toISOString()
     }, null, 2);
   }
 
   // Get configuration
-  getConfig()};
+  getConfig(): PerformanceMonitorConfig {
+    return { ...this.config };
   }
 
   // Update configuration
-  updateConfig(newConfig)= { ...this.config, ...newConfig };
+  updateConfig(newConfig: Partial<PerformanceMonitorConfig>): void {
+    this.config = { ...this.config, ...newConfig };
     
     // Restart auto-collection if interval changed
     if (newConfig.collectionInterval && this.collectionTimer) {
@@ -419,7 +457,8 @@ export class PerformanceMonitor {
   }
 
   // Cleanup resources
-  destroy());
+  destroy(): void {
+    this.stopAutoCollection();
     
     // Disconnect observers
     this.observers.forEach(observer => {
@@ -437,10 +476,11 @@ export const performanceMonitor = new PerformanceMonitor();
 
 // Utility function for measuring async operations
 export async function measureAsync<T>(
-  name,
-  operation) => Promise<T>,
-  monitor= performanceMonitor
-)= performance.now();
+  name: string,
+  operation: () => Promise<T>,
+  monitor: PerformanceMonitor = performanceMonitor
+): Promise<T> {
+  const startTime = performance.now();
   try {
     const result = await operation();
     const duration = performance.now() - startTime;
@@ -455,10 +495,11 @@ export async function measureAsync<T>(
 
 // Utility function for measuring sync operations
 export function measureSync<T>(
-  name,
-  operation) => T,
-  monitor= performanceMonitor
-)= performance.now();
+  name: string,
+  operation: () => T,
+  monitor: PerformanceMonitor = performanceMonitor
+): T {
+  const startTime = performance.now();
   try {
     const result = operation();
     const duration = performance.now() - startTime;