@memberjunction/react-runtime 2.76.0 → 2.78.0

package/dist/utilities/library-loader.js

@@ -3,6 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LibraryLoader = void 0;
 const standard_libraries_1 = require("./standard-libraries");
 const core_libraries_1 = require("./core-libraries");
+const resource_manager_1 = require("./resource-manager");
+const LIBRARY_LOADER_COMPONENT_ID = 'mj-react-runtime-library-loader-singleton';
 class LibraryLoader {
     static async loadAllLibraries(config, additionalLibraries) {
         if (config) {
@@ -98,13 +100,18 @@ class LibraryLoader {
             script.src = url;
             script.async = true;
             script.crossOrigin = 'anonymous';
-            script.onload = () => {
+            const cleanup = () => {
+                script.removeEventListener('load', onLoad);
+                script.removeEventListener('error', onError);
+            };
+            const onLoad = () => {
+                cleanup();
                 const global = window[globalName];
                 if (global) {
                     resolve(global);
                 }
                 else {
-                    setTimeout(() => {
+                    const timeoutId = resource_manager_1.resourceManager.setTimeout(LIBRARY_LOADER_COMPONENT_ID, () => {
                         const delayedGlobal = window[globalName];
                         if (delayedGlobal) {
                             resolve(delayedGlobal);
@@ -112,13 +119,17 @@ class LibraryLoader {
                         else {
                             reject(new Error(`${globalName} not found after script load`));
                         }
-                    }, 100);
+                    }, 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);
+            resource_manager_1.resourceManager.registerDOMElement(LIBRARY_LOADER_COMPONENT_ID, script);
         });
         this.loadedResources.set(url, {
             element: document.querySelector(`script[src="${url}"]`),
@@ -138,6 +149,7 @@ class LibraryLoader {
         link.rel = 'stylesheet';
         link.href = url;
         document.head.appendChild(link);
+        resource_manager_1.resourceManager.registerDOMElement(LIBRARY_LOADER_COMPONENT_ID, link);
         this.loadedResources.set(url, {
             element: link,
             promise: Promise.resolve()
@@ -150,7 +162,7 @@ class LibraryLoader {
                 resolve(global);
             }
             else {
-                setTimeout(() => {
+                resource_manager_1.resourceManager.setTimeout(LIBRARY_LOADER_COMPONENT_ID, () => {
                     const delayedGlobal = window[globalName];
                     if (delayedGlobal) {
                         resolve(delayedGlobal);
@@ -158,7 +170,7 @@ class LibraryLoader {
                     else {
                         reject(new Error(`${globalName} not found after script load`));
                     }
-                }, 100);
+                }, 100, { context: 'waitForScriptLoad', globalName });
             }
         };
         if (script.complete || script.readyState === 'complete') {
@@ -166,16 +178,21 @@ class LibraryLoader {
             return;
         }
         const loadHandler = () => {
-            script.removeEventListener('load', loadHandler);
             checkGlobal();
         };
-        script.addEventListener('load', loadHandler);
+        resource_manager_1.resourceManager.addEventListener(LIBRARY_LOADER_COMPONENT_ID, script, 'load', loadHandler, { once: true });
     }
     static getLoadedResources() {
         return this.loadedResources;
     }
     static clearCache() {
+        this.loadedResources.forEach((resource, url) => {
+            if (resource.element && resource.element.parentNode) {
+                resource.element.parentNode.removeChild(resource.element);
+            }
+        });
         this.loadedResources.clear();
+        resource_manager_1.resourceManager.cleanupComponent(LIBRARY_LOADER_COMPONENT_ID);
     }
 }
 exports.LibraryLoader = LibraryLoader;

package/dist/utilities/resource-manager.d.ts

@@ -0,0 +1,36 @@
+/// <reference types="node" />
+export type TimerId = number | NodeJS.Timeout;
+export interface ManagedResource {
+    type: 'timer' | 'interval' | 'animationFrame' | 'eventListener' | 'domElement' | 'observable' | 'reactRoot';
+    id: string | TimerId;
+    cleanup: () => void;
+    metadata?: Record<string, any>;
+}
+export declare class ResourceManager {
+    private resources;
+    private globalResources;
+    private cleanupCallbacks;
+    setTimeout(componentId: string, callback: () => void, delay: number, metadata?: Record<string, any>): number;
+    setInterval(componentId: string, callback: () => void, delay: number, metadata?: Record<string, any>): number;
+    requestAnimationFrame(componentId: string, callback: FrameRequestCallback, metadata?: Record<string, any>): TimerId;
+    clearTimeout(componentId: string, id: number): void;
+    clearInterval(componentId: string, id: number): void;
+    cancelAnimationFrame(componentId: string, id: TimerId): void;
+    addEventListener(componentId: string, target: EventTarget, type: string, listener: EventListener, options?: AddEventListenerOptions): void;
+    registerDOMElement(componentId: string, element: any, cleanup?: () => void): void;
+    registerReactRoot(componentId: string, root: any, unmountFn: () => void): void;
+    registerCleanup(componentId: string, cleanup: () => void): void;
+    registerGlobalResource(resource: ManagedResource): void;
+    private addResource;
+    private removeResource;
+    cleanupComponent(componentId: string): void;
+    cleanupGlobal(): void;
+    cleanupAll(): void;
+    getStats(): {
+        componentCount: number;
+        resourceCounts: Record<string, number>;
+        globalResourceCount: number;
+    };
+}
+export declare const resourceManager: ResourceManager;
+//# sourceMappingURL=resource-manager.d.ts.map

package/dist/utilities/resource-manager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resource-manager.d.ts","sourceRoot":"","sources":["../../src/utilities/resource-manager.ts"],"names":[],"mappings":";AAOA,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC;AAE9C,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,OAAO,GAAG,UAAU,GAAG,gBAAgB,GAAG,eAAe,GAAG,YAAY,GAAG,YAAY,GAAG,WAAW,CAAC;IAC5G,EAAE,EAAE,MAAM,GAAG,OAAO,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAChC;AAiDD,qBAAa,eAAe;IAC1B,OAAO,CAAC,SAAS,CAA2C;IAC5D,OAAO,CAAC,eAAe,CAA8B;IACrD,OAAO,CAAC,gBAAgB,CAAqC;IAK7D,UAAU,CACR,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,MAAM,IAAI,EACpB,KAAK,EAAE,MAAM,EACb,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAC7B,MAAM;IAmBT,WAAW,CACT,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,MAAM,IAAI,EACpB,KAAK,EAAE,MAAM,EACb,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAC7B,MAAM;IAgBT,qBAAqB,CACnB,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,oBAAoB,EAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAC7B,OAAO;IAwBV,YAAY,CAAC,WAAW,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,IAAI;IAQnD,aAAa,CAAC,WAAW,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,IAAI;IAQpD,oBAAoB,CAAC,WAAW,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,GAAG,IAAI;IAa5D,gBAAgB,CACd,WAAW,EAAE,MAAM,EACnB,MAAM,EAAE,WAAW,EACnB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,aAAa,EACvB,OAAO,CAAC,EAAE,uBAAuB,GAChC,IAAI;IAsBP,kBAAkB,CAChB,WAAW,EAAE,MAAM,EACnB,OAAO,EAAE,GAAG,EACZ,OAAO,CAAC,EAAE,MAAM,IAAI,GACnB,IAAI;IAuBP,iBAAiB,CACf,WAAW,EAAE,MAAM,EACnB,IAAI,EAAE,GAAG,EACT,SAAS,EAAE,MAAM,IAAI,GACpB,IAAI;IAYP,eAAe,CAAC,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,IAAI,GAAG,IAAI;IAU/D,sBAAsB,CAAC,QAAQ,EAAE,eAAe,GAAG,IAAI;IAOvD,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,cAAc;IAmBtB,gBAAgB,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI;IA+B3C,aAAa,IAAI,IAAI;IAcrB,UAAU,IAAI,IAAI;IAalB,QAAQ,IAAI;QACV,cAAc,EAAE,MAAM,CAAC;QACvB,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QACvC,mBAAmB,EAAE,MAAM,CAAC;KAC7B;CAeF;AAGD,eAAO,MAAM,eAAe,iBAAwB,CAAC"}

package/dist/utilities/resource-manager.js

@@ -0,0 +1,225 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resourceManager = exports.ResourceManager = void 0;
+const getTimerFunctions = () => {
+    if (typeof window !== 'undefined' && window.setTimeout) {
+        return {
+            setTimeout: window.setTimeout.bind(window),
+            clearTimeout: window.clearTimeout.bind(window),
+            setInterval: window.setInterval.bind(window),
+            clearInterval: window.clearInterval.bind(window),
+            requestAnimationFrame: window.requestAnimationFrame?.bind(window),
+            cancelAnimationFrame: window.cancelAnimationFrame?.bind(window)
+        };
+    }
+    else if (typeof global !== 'undefined' && global.setTimeout) {
+        return {
+            setTimeout: global.setTimeout,
+            clearTimeout: global.clearTimeout,
+            setInterval: global.setInterval,
+            clearInterval: global.clearInterval,
+            requestAnimationFrame: undefined,
+            cancelAnimationFrame: undefined
+        };
+    }
+    else {
+        const noop = () => { };
+        const noopWithReturn = () => 0;
+        return {
+            setTimeout: noopWithReturn,
+            clearTimeout: noop,
+            setInterval: noopWithReturn,
+            clearInterval: noop,
+            requestAnimationFrame: undefined,
+            cancelAnimationFrame: undefined
+        };
+    }
+};
+const timers = getTimerFunctions();
+class ResourceManager {
+    constructor() {
+        this.resources = new Map();
+        this.globalResources = new Set();
+        this.cleanupCallbacks = new Map();
+    }
+    setTimeout(componentId, callback, delay, metadata) {
+        const id = timers.setTimeout(() => {
+            this.removeResource(componentId, 'timer', id);
+            callback();
+        }, delay);
+        this.addResource(componentId, {
+            type: 'timer',
+            id,
+            cleanup: () => timers.clearTimeout(id),
+            metadata
+        });
+        return id;
+    }
+    setInterval(componentId, callback, delay, metadata) {
+        const id = timers.setInterval(callback, delay);
+        this.addResource(componentId, {
+            type: 'interval',
+            id,
+            cleanup: () => timers.clearInterval(id),
+            metadata
+        });
+        return id;
+    }
+    requestAnimationFrame(componentId, callback, metadata) {
+        if (!timers.requestAnimationFrame) {
+            return this.setTimeout(componentId, () => callback(Date.now()), 16, metadata);
+        }
+        const id = timers.requestAnimationFrame((time) => {
+            this.removeResource(componentId, 'animationFrame', id);
+            callback(time);
+        });
+        this.addResource(componentId, {
+            type: 'animationFrame',
+            id,
+            cleanup: () => timers.cancelAnimationFrame?.(id),
+            metadata
+        });
+        return id;
+    }
+    clearTimeout(componentId, id) {
+        timers.clearTimeout(id);
+        this.removeResource(componentId, 'timer', id);
+    }
+    clearInterval(componentId, id) {
+        timers.clearInterval(id);
+        this.removeResource(componentId, 'interval', id);
+    }
+    cancelAnimationFrame(componentId, id) {
+        if (timers.cancelAnimationFrame) {
+            timers.cancelAnimationFrame(id);
+        }
+        else {
+            timers.clearTimeout(id);
+        }
+        this.removeResource(componentId, 'animationFrame', id);
+    }
+    addEventListener(componentId, target, type, listener, options) {
+        if (target && typeof target.addEventListener === 'function') {
+            target.addEventListener(type, listener, options);
+            const resourceId = `${type}-${Date.now()}-${Math.random()}`;
+            this.addResource(componentId, {
+                type: 'eventListener',
+                id: resourceId,
+                cleanup: () => {
+                    if (target && typeof target.removeEventListener === 'function') {
+                        target.removeEventListener(type, listener, options);
+                    }
+                },
+                metadata: { target, type, options }
+            });
+        }
+    }
+    registerDOMElement(componentId, element, cleanup) {
+        if (typeof document !== 'undefined' && element && element.parentNode) {
+            const resourceId = `dom-${Date.now()}-${Math.random()}`;
+            this.addResource(componentId, {
+                type: 'domElement',
+                id: resourceId,
+                cleanup: () => {
+                    if (cleanup) {
+                        cleanup();
+                    }
+                    if (element && element.parentNode && typeof element.parentNode.removeChild === 'function') {
+                        element.parentNode.removeChild(element);
+                    }
+                },
+                metadata: { element }
+            });
+        }
+    }
+    registerReactRoot(componentId, root, unmountFn) {
+        this.addResource(componentId, {
+            type: 'reactRoot',
+            id: `react-root-${componentId}`,
+            cleanup: unmountFn,
+            metadata: { root }
+        });
+    }
+    registerCleanup(componentId, cleanup) {
+        if (!this.cleanupCallbacks.has(componentId)) {
+            this.cleanupCallbacks.set(componentId, []);
+        }
+        this.cleanupCallbacks.get(componentId).push(cleanup);
+    }
+    registerGlobalResource(resource) {
+        this.globalResources.add(resource);
+    }
+    addResource(componentId, resource) {
+        if (!this.resources.has(componentId)) {
+            this.resources.set(componentId, new Set());
+        }
+        this.resources.get(componentId).add(resource);
+    }
+    removeResource(componentId, type, id) {
+        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);
+            }
+        }
+    }
+    cleanupComponent(componentId) {
+        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);
+        }
+        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);
+        }
+    }
+    cleanupGlobal() {
+        this.globalResources.forEach(resource => {
+            try {
+                resource.cleanup();
+            }
+            catch (error) {
+                console.error(`Error cleaning up global ${resource.type} resource:`, error);
+            }
+        });
+        this.globalResources.clear();
+    }
+    cleanupAll() {
+        for (const componentId of this.resources.keys()) {
+            this.cleanupComponent(componentId);
+        }
+        this.cleanupGlobal();
+    }
+    getStats() {
+        const resourceCounts = {};
+        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
+        };
+    }
+}
+exports.ResourceManager = ResourceManager;
+exports.resourceManager = new ResourceManager();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memberjunction/react-runtime",
-  "version": "2.76.0",
+  "version": "2.78.0",
   "description": "Platform-agnostic React component runtime for MemberJunction. Provides core compilation, registry, and execution capabilities for React components in any JavaScript environment.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -25,9 +25,9 @@
   },
   "homepage": "https://github.com/MemberJunction/MJ#readme",
   "dependencies": {
-    "@memberjunction/core": "2.76.0",
-    "@memberjunction/global": "2.76.0",
-    "@memberjunction/interactive-component-types": "2.76.0",
+    "@memberjunction/core": "2.78.0",
+    "@memberjunction/global": "2.78.0",
+    "@memberjunction/interactive-component-types": "2.78.0",
     "@babel/standalone": "^7.23.5",
     "rxjs": "^7.8.1"
   },

package/src/index.ts

@@ -74,6 +74,12 @@ export {
   HierarchyRegistrationOptions
 } from './runtime';
 
+export {
+  ReactRootManager,
+  reactRootManager,
+  ManagedReactRoot
+} from './runtime';
+
 // Export utilities
 export { 
   RuntimeUtilities, 
@@ -102,6 +108,18 @@ export {
   FailedComponentInfo
 } from './utilities/component-error-analyzer';
 
+export {
+  ResourceManager,
+  resourceManager,
+  ManagedResource
+} from './utilities/resource-manager';
+
+export {
+  CacheManager,
+  CacheEntry,
+  CacheOptions
+} from './utilities/cache-manager';
+
 // Version information
 export const VERSION = '2.69.1';
 

package/src/registry/component-registry.ts

@@ -9,6 +9,7 @@ import {
   ComponentMetadata, 
   RegistryConfig 
 } from '../types';
+import { resourceManager } from '../utilities/resource-manager';
 
 /**
  * Default registry configuration
@@ -28,6 +29,7 @@ export class ComponentRegistry {
   private registry: Map<string, RegistryEntry>;
   private config: RegistryConfig;
   private cleanupTimer?: NodeJS.Timeout | number;
+  private registryId: string;
   
   /**
    * Creates a new ComponentRegistry instance
@@ -36,6 +38,7 @@ export class ComponentRegistry {
   constructor(config?: Partial<RegistryConfig>) {
     this.config = { ...DEFAULT_REGISTRY_CONFIG, ...config };
     this.registry = new Map();
+    this.registryId = `component-registry-${Date.now()}`;
     
     // Start cleanup timer if configured
     if (this.config.cleanupInterval > 0) {
@@ -297,6 +300,8 @@ export class ComponentRegistry {
   destroy(): void {
     this.stopCleanupTimer();
     this.clear();
+    // Clean up any resources associated with this registry
+    resourceManager.cleanupComponent(this.registryId);
   }
 
   /**
@@ -362,9 +367,14 @@ export class ComponentRegistry {
    * Starts the automatic cleanup timer
    */
   private startCleanupTimer(): void {
-    this.cleanupTimer = setInterval(() => {
-      this.cleanup();
-    }, this.config.cleanupInterval);
+    this.cleanupTimer = resourceManager.setInterval(
+      this.registryId,
+      () => {
+        this.cleanup();
+      },
+      this.config.cleanupInterval,
+      { purpose: 'component-registry-cleanup' }
+    );
   }
 
   /**
@@ -372,7 +382,7 @@ export class ComponentRegistry {
    */
   private stopCleanupTimer(): void {
     if (this.cleanupTimer) {
-      clearInterval(this.cleanupTimer as any);
+      resourceManager.clearInterval(this.registryId, this.cleanupTimer as number);
       this.cleanupTimer = undefined;
     }
   }

package/src/runtime/index.ts

@@ -42,4 +42,10 @@ export {
   HierarchyRegistrationResult,
   ComponentRegistrationError,
   HierarchyRegistrationOptions
-} from './component-hierarchy';
+} from './component-hierarchy';
+
+export {
+  ReactRootManager,
+  reactRootManager,
+  ManagedReactRoot
+} from './react-root-manager';