@memberjunction/react-runtime 2.76.0 → 2.77.0

package/src/utilities/cache-manager.ts

@@ -0,0 +1,253 @@
+/**
+ * @fileoverview Cache management with TTL and size limits
+ * @module @memberjunction/react-runtime/utilities
+ */
+
+export interface CacheEntry<T> {
+  value: T;
+  timestamp: number;
+  size?: number;
+}
+
+export interface CacheOptions {
+  maxSize?: number;          // Maximum number of entries
+  maxMemory?: number;        // Maximum memory in bytes (estimated)
+  defaultTTL?: number;       // Default TTL in milliseconds
+  cleanupInterval?: number;  // Cleanup interval in milliseconds
+}
+
+/**
+ * Cache manager with TTL and size limits.
+ * Provides automatic cleanup and memory management.
+ */
+export class CacheManager<T = any> {
+  private cache = new Map<string, CacheEntry<T>>();
+  private memoryUsage = 0;
+  private cleanupTimer?: number;
+  private readonly options: Required<CacheOptions>;
+
+  constructor(options: CacheOptions = {}) {
+    this.options = {
+      maxSize: options.maxSize || 1000,
+      maxMemory: options.maxMemory || 50 * 1024 * 1024, // 50MB default
+      defaultTTL: options.defaultTTL || 5 * 60 * 1000,   // 5 minutes default
+      cleanupInterval: options.cleanupInterval || 60 * 1000 // 1 minute default
+    };
+
+    if (this.options.cleanupInterval > 0) {
+      this.startCleanupTimer();
+    }
+  }
+
+  /**
+   * Set a value in the cache
+   */
+  set(key: string, value: T, ttl?: number): void {
+    const size = this.estimateSize(value);
+    const entry: CacheEntry<T> = {
+      value,
+      timestamp: Date.now(),
+      size
+    };
+
+    // Check if we need to evict entries
+    if (this.cache.size >= this.options.maxSize) {
+      this.evictLRU();
+    }
+
+    // Check memory usage
+    if (this.memoryUsage + size > this.options.maxMemory) {
+      this.evictByMemory(size);
+    }
+
+    // Remove old entry if exists
+    const oldEntry = this.cache.get(key);
+    if (oldEntry) {
+      this.memoryUsage -= oldEntry.size || 0;
+    }
+
+    this.cache.set(key, entry);
+    this.memoryUsage += size;
+
+    // Schedule removal if TTL is set
+    if (ttl || this.options.defaultTTL) {
+      const timeout = ttl || this.options.defaultTTL;
+      setTimeout(() => this.delete(key), timeout);
+    }
+  }
+
+  /**
+   * Get a value from the cache
+   */
+  get(key: string): T | undefined {
+    const entry = this.cache.get(key);
+    if (!entry) return undefined;
+
+    // Check if expired
+    if (this.isExpired(entry)) {
+      this.delete(key);
+      return undefined;
+    }
+
+    // Update timestamp for LRU
+    entry.timestamp = Date.now();
+    return entry.value;
+  }
+
+  /**
+   * Check if a key exists and is not expired
+   */
+  has(key: string): boolean {
+    const entry = this.cache.get(key);
+    if (!entry) return false;
+
+    if (this.isExpired(entry)) {
+      this.delete(key);
+      return false;
+    }
+
+    return true;
+  }
+
+  /**
+   * Delete a key from the cache
+   */
+  delete(key: string): boolean {
+    const entry = this.cache.get(key);
+    if (entry) {
+      this.memoryUsage -= entry.size || 0;
+      return this.cache.delete(key);
+    }
+    return false;
+  }
+
+  /**
+   * Clear all entries
+   */
+  clear(): void {
+    this.cache.clear();
+    this.memoryUsage = 0;
+  }
+
+  /**
+   * Get cache statistics
+   */
+  getStats(): {
+    size: number;
+    memoryUsage: number;
+    maxSize: number;
+    maxMemory: number;
+  } {
+    return {
+      size: this.cache.size,
+      memoryUsage: this.memoryUsage,
+      maxSize: this.options.maxSize,
+      maxMemory: this.options.maxMemory
+    };
+  }
+
+  /**
+   * Manually trigger cleanup
+   */
+  cleanup(): number {
+    let removed = 0;
+    const now = Date.now();
+
+    for (const [key, entry] of this.cache) {
+      if (this.isExpired(entry, now)) {
+        this.delete(key);
+        removed++;
+      }
+    }
+
+    return removed;
+  }
+
+  /**
+   * Destroy the cache and stop cleanup timer
+   */
+  destroy(): void {
+    this.stopCleanupTimer();
+    this.clear();
+  }
+
+  /**
+   * Check if an entry is expired
+   */
+  private isExpired(entry: CacheEntry<T>, now?: number): boolean {
+    if (!this.options.defaultTTL) return false;
+    const currentTime = now || Date.now();
+    return currentTime - entry.timestamp > this.options.defaultTTL;
+  }
+
+  /**
+   * Evict least recently used entry
+   */
+  private evictLRU(): void {
+    let lruKey: string | undefined;
+    let lruTime = Infinity;
+
+    for (const [key, entry] of this.cache) {
+      if (entry.timestamp < lruTime) {
+        lruTime = entry.timestamp;
+        lruKey = key;
+      }
+    }
+
+    if (lruKey) {
+      this.delete(lruKey);
+    }
+  }
+
+  /**
+   * Evict entries to make room for new memory
+   */
+  private evictByMemory(requiredSize: number): void {
+    const entries = Array.from(this.cache.entries())
+      .sort((a, b) => a[1].timestamp - b[1].timestamp);
+
+    let freedMemory = 0;
+    for (const [key, entry] of entries) {
+      if (freedMemory >= requiredSize) break;
+      freedMemory += entry.size || 0;
+      this.delete(key);
+    }
+  }
+
+  /**
+   * Estimate size of a value
+   */
+  private estimateSize(value: T): number {
+    if (typeof value === 'string') {
+      return value.length * 2; // 2 bytes per character
+    } else if (typeof value === 'object' && value !== null) {
+      // Rough estimation for objects
+      try {
+        return JSON.stringify(value).length * 2;
+      } catch {
+        return 1024; // Default 1KB for objects that can't be stringified
+      }
+    } else {
+      return 8; // Default for primitives
+    }
+  }
+
+  /**
+   * Start the cleanup timer
+   */
+  private startCleanupTimer(): void {
+    this.cleanupTimer = window.setInterval(() => {
+      this.cleanup();
+    }, this.options.cleanupInterval);
+  }
+
+  /**
+   * Stop the cleanup timer
+   */
+  private stopCleanupTimer(): void {
+    if (this.cleanupTimer) {
+      window.clearInterval(this.cleanupTimer);
+      this.cleanupTimer = undefined;
+    }
+  }
+}

package/src/utilities/index.ts

@@ -7,4 +7,6 @@ export * from './runtime-utilities';
 export * from './component-styles';
 export * from './standard-libraries';
 export * from './library-loader';
-export * from './component-error-analyzer';
+export * from './component-error-analyzer';
+export * from './resource-manager';
+export * from './cache-manager';

package/src/utilities/library-loader.ts

@@ -10,6 +10,10 @@ import {
 } from './standard-libraries';
 import { LibraryConfiguration, ExternalLibraryConfig, LibraryLoadOptions as ConfigLoadOptions } from '../types/library-config';
 import { getCoreRuntimeLibraries, isCoreRuntimeLibrary } from './core-libraries';
+import { resourceManager } from './resource-manager';
+
+// Unique component ID for resource tracking
+const LIBRARY_LOADER_COMPONENT_ID = 'mj-react-runtime-library-loader-singleton';
 
 /**
  * Represents a loaded script or CSS resource
@@ -214,28 +218,46 @@ export class LibraryLoader {
       script.async = true;
       script.crossOrigin = 'anonymous';
 
-      script.onload = () => {
+      const cleanup = () => {
+        script.removeEventListener('load', onLoad);
+        script.removeEventListener('error', onError);
+      };
+
+      const onLoad = () => {
+        cleanup();
         const global = (window as any)[globalName];
         if (global) {
           resolve(global);
         } else {
           // Some libraries may take a moment to initialize
-          setTimeout(() => {
-            const delayedGlobal = (window as any)[globalName];
-            if (delayedGlobal) {
-              resolve(delayedGlobal);
-            } else {
-              reject(new Error(`${globalName} not found after script load`));
-            }
-          }, 100);
+          const timeoutId = resourceManager.setTimeout(
+            LIBRARY_LOADER_COMPONENT_ID,
+            () => {
+              const delayedGlobal = (window as any)[globalName];
+              if (delayedGlobal) {
+                resolve(delayedGlobal);
+              } else {
+                reject(new Error(`${globalName} not found after script load`));
+              }
+            },
+            100,
+            { url, globalName }
+          );
         }
       };
 
-      script.onerror = () => {
+      const onError = () => {
+        cleanup();
         reject(new Error(`Failed to load script: ${url}`));
       };
 
+      script.addEventListener('load', onLoad);
+      script.addEventListener('error', onError);
+
       document.head.appendChild(script);
+      
+      // Register the script element for cleanup
+      resourceManager.registerDOMElement(LIBRARY_LOADER_COMPONENT_ID, script);
     });
 
     this.loadedResources.set(url, { 
@@ -263,6 +285,9 @@ export class LibraryLoader {
     link.rel = 'stylesheet';
     link.href = url;
     document.head.appendChild(link);
+    
+    // Register the link element for cleanup
+    resourceManager.registerDOMElement(LIBRARY_LOADER_COMPONENT_ID, link);
 
     this.loadedResources.set(url, {
       element: link,
@@ -285,14 +310,19 @@ export class LibraryLoader {
         resolve(global);
       } else {
         // Retry after a short delay
-        setTimeout(() => {
-          const delayedGlobal = (window as any)[globalName];
-          if (delayedGlobal) {
-            resolve(delayedGlobal);
-          } else {
-            reject(new Error(`${globalName} not found after script load`));
-          }
-        }, 100);
+        resourceManager.setTimeout(
+          LIBRARY_LOADER_COMPONENT_ID,
+          () => {
+            const delayedGlobal = (window as any)[globalName];
+            if (delayedGlobal) {
+              resolve(delayedGlobal);
+            } else {
+              reject(new Error(`${globalName} not found after script load`));
+            }
+          },
+          100,
+          { context: 'waitForScriptLoad', globalName }
+        );
       }
     };
 
@@ -304,10 +334,15 @@ export class LibraryLoader {
 
     // Wait for load
     const loadHandler = () => {
-      script.removeEventListener('load', loadHandler);
       checkGlobal();
     };
-    script.addEventListener('load', loadHandler);
+    resourceManager.addEventListener(
+      LIBRARY_LOADER_COMPONENT_ID,
+      script,
+      'load',
+      loadHandler,
+      { once: true }
+    );
   }
 
 
@@ -319,9 +354,19 @@ export class LibraryLoader {
   }
 
   /**
-   * Clear loaded resources cache
+   * Clear loaded resources cache and cleanup DOM elements
    */
   static clearCache(): void {
+    // Remove all script and link elements we added
+    this.loadedResources.forEach((resource, url) => {
+      if (resource.element && resource.element.parentNode) {
+        resource.element.parentNode.removeChild(resource.element);
+      }
+    });
+    
     this.loadedResources.clear();
+    
+    // Clean up any resources managed by resource manager
+    resourceManager.cleanupComponent(LIBRARY_LOADER_COMPONENT_ID);
   }
 }

package/src/utilities/resource-manager.ts

@@ -0,0 +1,305 @@
+/**
+ * @fileoverview Centralized resource management for React Runtime
+ * Handles timers, DOM elements, event listeners, and other resources that need cleanup
+ * @module @memberjunction/react-runtime/utilities
+ */
+
+export interface ManagedResource {
+  type: 'timer' | 'interval' | 'animationFrame' | 'eventListener' | 'domElement' | 'observable' | 'reactRoot';
+  id: string | number;
+  cleanup: () => void;
+  metadata?: Record<string, any>;
+}
+
+/**
+ * ResourceManager provides centralized management of resources that need cleanup.
+ * This prevents memory leaks by ensuring all resources are properly disposed.
+ */
+export class ResourceManager {
+  private resources = new Map<string, Set<ManagedResource>>();
+  private globalResources = new Set<ManagedResource>();
+  private cleanupCallbacks = new Map<string, (() => void)[]>();
+
+  /**
+   * Register a timeout with automatic cleanup
+   */
+  setTimeout(
+    componentId: string,
+    callback: () => void,
+    delay: number,
+    metadata?: Record<string, any>
+  ): number {
+    const id = window.setTimeout(() => {
+      this.removeResource(componentId, 'timer', id);
+      callback();
+    }, delay);
+
+    this.addResource(componentId, {
+      type: 'timer',
+      id,
+      cleanup: () => window.clearTimeout(id),
+      metadata
+    });
+
+    return id;
+  }
+
+  /**
+   * Register an interval with automatic cleanup
+   */
+  setInterval(
+    componentId: string,
+    callback: () => void,
+    delay: number,
+    metadata?: Record<string, any>
+  ): number {
+    const id = window.setInterval(callback, delay);
+
+    this.addResource(componentId, {
+      type: 'interval',
+      id,
+      cleanup: () => window.clearInterval(id),
+      metadata
+    });
+
+    return id;
+  }
+
+  /**
+   * Register an animation frame with automatic cleanup
+   */
+  requestAnimationFrame(
+    componentId: string,
+    callback: FrameRequestCallback,
+    metadata?: Record<string, any>
+  ): number {
+    const id = window.requestAnimationFrame((time) => {
+      this.removeResource(componentId, 'animationFrame', id);
+      callback(time);
+    });
+
+    this.addResource(componentId, {
+      type: 'animationFrame',
+      id,
+      cleanup: () => window.cancelAnimationFrame(id),
+      metadata
+    });
+
+    return id;
+  }
+
+  /**
+   * Clear a specific timeout
+   */
+  clearTimeout(componentId: string, id: number): void {
+    window.clearTimeout(id);
+    this.removeResource(componentId, 'timer', id);
+  }
+
+  /**
+   * Clear a specific interval
+   */
+  clearInterval(componentId: string, id: number): void {
+    window.clearInterval(id);
+    this.removeResource(componentId, 'interval', id);
+  }
+
+  /**
+   * Cancel a specific animation frame
+   */
+  cancelAnimationFrame(componentId: string, id: number): void {
+    window.cancelAnimationFrame(id);
+    this.removeResource(componentId, 'animationFrame', id);
+  }
+
+  /**
+   * Register an event listener with automatic cleanup
+   */
+  addEventListener(
+    componentId: string,
+    target: EventTarget,
+    type: string,
+    listener: EventListener,
+    options?: AddEventListenerOptions
+  ): void {
+    target.addEventListener(type, listener, options);
+    
+    const resourceId = `${type}-${Date.now()}-${Math.random()}`;
+    this.addResource(componentId, {
+      type: 'eventListener',
+      id: resourceId,
+      cleanup: () => target.removeEventListener(type, listener, options),
+      metadata: { target, type, options }
+    });
+  }
+
+  /**
+   * Register a DOM element that needs cleanup
+   */
+  registerDOMElement(
+    componentId: string,
+    element: HTMLElement,
+    cleanup?: () => void
+  ): void {
+    const resourceId = `dom-${Date.now()}-${Math.random()}`;
+    this.addResource(componentId, {
+      type: 'domElement',
+      id: resourceId,
+      cleanup: () => {
+        if (cleanup) {
+          cleanup();
+        }
+        if (element.parentNode) {
+          element.parentNode.removeChild(element);
+        }
+      },
+      metadata: { element }
+    });
+  }
+
+  /**
+   * Register a React root for cleanup
+   */
+  registerReactRoot(
+    componentId: string,
+    root: any,
+    unmountFn: () => void
+  ): void {
+    this.addResource(componentId, {
+      type: 'reactRoot',
+      id: `react-root-${componentId}`,
+      cleanup: unmountFn,
+      metadata: { root }
+    });
+  }
+
+  /**
+   * Register a generic cleanup callback for a component
+   */
+  registerCleanup(componentId: string, cleanup: () => void): void {
+    if (!this.cleanupCallbacks.has(componentId)) {
+      this.cleanupCallbacks.set(componentId, []);
+    }
+    this.cleanupCallbacks.get(componentId)!.push(cleanup);
+  }
+
+  /**
+   * Register a global resource (not tied to a specific component)
+   */
+  registerGlobalResource(resource: ManagedResource): void {
+    this.globalResources.add(resource);
+  }
+
+  /**
+   * Add a resource to be managed
+   */
+  private addResource(componentId: string, resource: ManagedResource): void {
+    if (!this.resources.has(componentId)) {
+      this.resources.set(componentId, new Set());
+    }
+    this.resources.get(componentId)!.add(resource);
+  }
+
+  /**
+   * Remove a specific resource
+   */
+  private removeResource(
+    componentId: string,
+    type: ManagedResource['type'],
+    id: string | number
+  ): void {
+    const componentResources = this.resources.get(componentId);
+    if (componentResources) {
+      const toRemove = Array.from(componentResources).find(
+        r => r.type === type && r.id === id
+      );
+      if (toRemove) {
+        componentResources.delete(toRemove);
+      }
+    }
+  }
+
+  /**
+   * Clean up all resources for a specific component
+   */
+  cleanupComponent(componentId: string): void {
+    // Clean up tracked resources
+    const componentResources = this.resources.get(componentId);
+    if (componentResources) {
+      componentResources.forEach(resource => {
+        try {
+          resource.cleanup();
+        } catch (error) {
+          console.error(`Error cleaning up ${resource.type} resource:`, error);
+        }
+      });
+      this.resources.delete(componentId);
+    }
+
+    // Execute cleanup callbacks
+    const callbacks = this.cleanupCallbacks.get(componentId);
+    if (callbacks) {
+      callbacks.forEach(callback => {
+        try {
+          callback();
+        } catch (error) {
+          console.error('Error executing cleanup callback:', error);
+        }
+      });
+      this.cleanupCallbacks.delete(componentId);
+    }
+  }
+
+  /**
+   * Clean up all global resources
+   */
+  cleanupGlobal(): void {
+    this.globalResources.forEach(resource => {
+      try {
+        resource.cleanup();
+      } catch (error) {
+        console.error(`Error cleaning up global ${resource.type} resource:`, error);
+      }
+    });
+    this.globalResources.clear();
+  }
+
+  /**
+   * Clean up all resources (components and global)
+   */
+  cleanupAll(): void {
+    // Clean up all component resources
+    for (const componentId of this.resources.keys()) {
+      this.cleanupComponent(componentId);
+    }
+
+    // Clean up global resources
+    this.cleanupGlobal();
+  }
+
+  /**
+   * Get resource statistics for debugging
+   */
+  getStats(): {
+    componentCount: number;
+    resourceCounts: Record<string, number>;
+    globalResourceCount: number;
+  } {
+    const resourceCounts: Record<string, number> = {};
+    
+    for (const resources of this.resources.values()) {
+      resources.forEach(resource => {
+        resourceCounts[resource.type] = (resourceCounts[resource.type] || 0) + 1;
+      });
+    }
+
+    return {
+      componentCount: this.resources.size,
+      resourceCounts,
+      globalResourceCount: this.globalResources.size
+    };
+  }
+}
+
+// Singleton instance
+export const resourceManager = new ResourceManager();