@memberjunction/react-runtime 2.76.0 → 2.78.0

package/src/runtime/react-root-manager.ts

@@ -0,0 +1,218 @@
+/**
+ * @fileoverview React root lifecycle management for preventing memory leaks
+ * @module @memberjunction/react-runtime/runtime
+ */
+
+import { resourceManager } from '../utilities/resource-manager';
+
+export interface ManagedReactRoot {
+  id: string;
+  root: any; // React root instance
+  container: HTMLElement;
+  isRendering: boolean;
+  lastRenderTime?: Date;
+  componentId?: string;
+}
+
+/**
+ * Manages React root instances to prevent memory leaks and ensure proper cleanup.
+ * Handles safe rendering and unmounting with protection against concurrent operations.
+ */
+export class ReactRootManager {
+  private roots = new Map<string, ManagedReactRoot>();
+  private renderingRoots = new Set<string>();
+  private unmountQueue = new Map<string, () => void>();
+  
+  /**
+   * Create a new managed React root
+   * @param container - The DOM container element
+   * @param createRootFn - Function to create the React root (e.g., ReactDOM.createRoot)
+   * @param componentId - Optional component ID for resource tracking
+   * @returns The root ID for future operations
+   */
+  createRoot(
+    container: HTMLElement,
+    createRootFn: (container: HTMLElement) => any,
+    componentId?: string
+  ): string {
+    const rootId = `react-root-${Date.now()}-${Math.random()}`;
+    const root = createRootFn(container);
+    
+    const managedRoot: ManagedReactRoot = {
+      id: rootId,
+      root,
+      container,
+      isRendering: false,
+      componentId
+    };
+    
+    this.roots.set(rootId, managedRoot);
+    
+    // Register with resource manager if component ID provided
+    if (componentId) {
+      resourceManager.registerReactRoot(
+        componentId,
+        root,
+        () => this.unmountRoot(rootId)
+      );
+    }
+    
+    return rootId;
+  }
+  
+  /**
+   * Safely render content to a React root
+   * @param rootId - The root ID
+   * @param element - React element to render
+   * @param onComplete - Optional callback when render completes
+   */
+  render(
+    rootId: string,
+    element: any,
+    onComplete?: () => void
+  ): void {
+    const managedRoot = this.roots.get(rootId);
+    if (!managedRoot) {
+      console.warn(`React root ${rootId} not found`);
+      return;
+    }
+    
+    // Don't render if we're already unmounting
+    if (this.unmountQueue.has(rootId)) {
+      console.warn(`React root ${rootId} is being unmounted, skipping render`);
+      return;
+    }
+    
+    // Mark as rendering
+    managedRoot.isRendering = true;
+    this.renderingRoots.add(rootId);
+    
+    try {
+      managedRoot.root.render(element);
+      managedRoot.lastRenderTime = new Date();
+      
+      // Use microtask to ensure React has completed its work
+      Promise.resolve().then(() => {
+        managedRoot.isRendering = false;
+        this.renderingRoots.delete(rootId);
+        
+        // Process any pending unmount
+        const pendingUnmount = this.unmountQueue.get(rootId);
+        if (pendingUnmount) {
+          this.unmountQueue.delete(rootId);
+          pendingUnmount();
+        }
+        
+        if (onComplete) {
+          onComplete();
+        }
+      });
+    } catch (error) {
+      // Clean up rendering state on error
+      managedRoot.isRendering = false;
+      this.renderingRoots.delete(rootId);
+      throw error;
+    }
+  }
+  
+  /**
+   * Safely unmount a React root
+   * @param rootId - The root ID
+   * @param force - Force unmount even if rendering
+   */
+  unmountRoot(rootId: string, force: boolean = false): Promise<void> {
+    return new Promise((resolve) => {
+      const managedRoot = this.roots.get(rootId);
+      if (!managedRoot) {
+        resolve();
+        return;
+      }
+      
+      const performUnmount = () => {
+        try {
+          managedRoot.root.unmount();
+          this.roots.delete(rootId);
+          this.renderingRoots.delete(rootId);
+          
+          // Clean up container to ensure no dangling references
+          if (managedRoot.container) {
+            // Clear React's internal references
+            delete (managedRoot.container as any)._reactRootContainer;
+            // Clear all event listeners
+            const newContainer = managedRoot.container.cloneNode(false) as HTMLElement;
+            managedRoot.container.parentNode?.replaceChild(newContainer, managedRoot.container);
+          }
+          
+          resolve();
+        } catch (error) {
+          console.error(`Error unmounting React root ${rootId}:`, error);
+          // Still clean up our tracking even if unmount failed
+          this.roots.delete(rootId);
+          this.renderingRoots.delete(rootId);
+          resolve();
+        }
+      };
+      
+      // If not rendering or force unmount, unmount immediately
+      if (!managedRoot.isRendering || force) {
+        performUnmount();
+      } else {
+        // Queue unmount for after rendering completes
+        this.unmountQueue.set(rootId, () => {
+          performUnmount();
+        });
+      }
+    });
+  }
+  
+  /**
+   * Unmount all roots associated with a component
+   * @param componentId - The component ID
+   */
+  async unmountComponentRoots(componentId: string): Promise<void> {
+    const rootIds: string[] = [];
+    
+    for (const [rootId, managedRoot] of this.roots) {
+      if (managedRoot.componentId === componentId) {
+        rootIds.push(rootId);
+      }
+    }
+    
+    await Promise.all(rootIds.map(id => this.unmountRoot(id)));
+  }
+  
+  /**
+   * Check if a root is currently rendering
+   * @param rootId - The root ID
+   * @returns true if rendering
+   */
+  isRendering(rootId: string): boolean {
+    return this.renderingRoots.has(rootId);
+  }
+  
+  /**
+   * Get statistics about managed roots
+   */
+  getStats(): {
+    totalRoots: number;
+    renderingRoots: number;
+    pendingUnmounts: number;
+  } {
+    return {
+      totalRoots: this.roots.size,
+      renderingRoots: this.renderingRoots.size,
+      pendingUnmounts: this.unmountQueue.size
+    };
+  }
+  
+  /**
+   * Clean up all roots (for testing or shutdown)
+   */
+  async cleanup(): Promise<void> {
+    const allRootIds = Array.from(this.roots.keys());
+    await Promise.all(allRootIds.map(id => this.unmountRoot(id, true)));
+  }
+}
+
+// Singleton instance
+export const reactRootManager = new ReactRootManager();

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);
   }
 }