@memberjunction/react-runtime 2.75.0 → 2.77.0

package/src/compiler/component-compiler.ts

@@ -161,7 +161,11 @@ export class ComponentCompiler {
    */
   private wrapComponentCode(componentCode: string, componentName: string): string {
     return `
-      function createComponent(React, ReactDOM, useState, useEffect, useCallback, createStateUpdater, libraries, styles, console) {
+      function createComponent(
+        React, ReactDOM, 
+        useState, useEffect, useCallback, useMemo, useRef, useContext, useReducer, useLayoutEffect,
+        libraries, styles, console
+      ) {
         ${componentCode}
         
         // Ensure the component exists
@@ -193,19 +197,17 @@ export class ComponentCompiler {
    */
   private createComponentFactory(transpiledCode: string, componentName: string): Function {
     try {
-      // Create the factory function
+      // Create the factory function with all React hooks
       const factoryCreator = new Function(
-        'React', 'ReactDOM', 'useState', 'useEffect', 'useCallback',
-        'createStateUpdater', 'libraries', 'styles', 'console',
+        'React', 'ReactDOM',
+        'useState', 'useEffect', 'useCallback', 'useMemo', 'useRef', 'useContext', 'useReducer', 'useLayoutEffect',
+        'libraries', 'styles', 'console',
         `${transpiledCode}; return createComponent;`
       );
 
       // Return a function that executes the factory with runtime context
       return (context: RuntimeContext, styles: any = {}) => {
         const { React, ReactDOM, libraries = {} } = context;
-        
-        // Create state updater utility
-        const createStateUpdater = this.createStateUpdaterUtility();
 
         // Execute the factory creator to get the createComponent function
         const createComponentFn = factoryCreator(
@@ -214,7 +216,11 @@ export class ComponentCompiler {
           React.useState,
           React.useEffect,
           React.useCallback,
-          createStateUpdater,
+          React.useMemo,
+          React.useRef,
+          React.useContext,
+          React.useReducer,
+          React.useLayoutEffect,
           libraries,
           styles,
           console
@@ -227,7 +233,11 @@ export class ComponentCompiler {
           React.useState,
           React.useEffect,
           React.useCallback,
-          createStateUpdater,
+          React.useMemo,
+          React.useRef,
+          React.useContext,
+          React.useReducer,
+          React.useLayoutEffect,
           libraries,
           styles,
           console
@@ -238,28 +248,6 @@ export class ComponentCompiler {
     }
   }
 
-  /**
-   * Creates the state updater utility function for nested components
-   * @returns State updater function
-   */
-  private createStateUpdaterUtility(): Function {
-    return (statePath: string, parentStateUpdater: Function) => {
-      return (componentStateUpdate: any) => {
-        if (!statePath) {
-          // Root component - pass through directly
-          parentStateUpdater(componentStateUpdate);
-        } else {
-          // Sub-component - bubble up with path context
-          const pathParts = statePath.split('.');
-          const componentKey = pathParts[pathParts.length - 1];
-          
-          parentStateUpdater({
-            [componentKey]: componentStateUpdate
-          });
-        }
-      };
-    };
-  }
 
   /**
    * Validates compilation options
@@ -267,21 +255,62 @@ export class ComponentCompiler {
    * @throws Error if validation fails
    */
   private validateCompileOptions(options: CompileOptions): void {
+    // Check if options object exists
+    if (!options) {
+      throw new Error(
+        'Component compilation failed: No options provided.\n' +
+        'Expected an object with componentName and componentCode properties.\n' +
+        'Example: { componentName: "MyComponent", componentCode: "function MyComponent() { ... }" }'
+      );
+    }
+
+    // Check component name
     if (!options.componentName) {
-      throw new Error('Component name is required');
+      const providedKeys = Object.keys(options).join(', ');
+      throw new Error(
+        'Component compilation failed: Component name is required.\n' +
+        `Received options with keys: [${providedKeys}]\n` +
+        'Please ensure your component spec includes a "name" property.\n' +
+        'Example: { name: "MyComponent", code: "..." }'
+      );
     }
 
+    // Check component code
     if (!options.componentCode) {
-      throw new Error('Component code is required');
+      throw new Error(
+        `Component compilation failed: Component code is required for "${options.componentName}".\n` +
+        'Please ensure your component spec includes a "code" property with the component source code.\n' +
+        'Example: { name: "MyComponent", code: "function MyComponent() { return <div>Hello</div>; }" }'
+      );
     }
 
+    // Check code type
     if (typeof options.componentCode !== 'string') {
-      throw new Error('Component code must be a string');
+      const actualType = typeof options.componentCode;
+      throw new Error(
+        `Component compilation failed: Component code must be a string for "${options.componentName}".\n` +
+        `Received type: ${actualType}\n` +
+        `Received value: ${JSON.stringify(options.componentCode).substring(0, 100)}...\n` +
+        'Please ensure the code property contains a string of JavaScript/JSX code.'
+      );
+    }
+
+    // Check if code is empty or whitespace only
+    if (options.componentCode.trim().length === 0) {
+      throw new Error(
+        `Component compilation failed: Component code is empty for "${options.componentName}".\n` +
+        'The code property must contain valid JavaScript/JSX code defining a React component.'
+      );
     }
 
     // Basic syntax check
     if (!options.componentCode.includes(options.componentName)) {
-      throw new Error(`Component code must define a component named "${options.componentName}"`);
+      throw new Error(
+        `Component compilation failed: Component code must define a component named "${options.componentName}".\n` +
+        'The function/component name in the code must match the componentName property.\n' +
+        `Expected to find: function ${options.componentName}(...) or const ${options.componentName} = ...\n` +
+        'Code preview: ' + options.componentCode.substring(0, 200) + '...'
+      );
     }
   }
 

package/src/index.ts

@@ -53,7 +53,6 @@ export {
 
 export {
   buildComponentProps,
-  cleanupPropBuilder,
   normalizeCallbacks,
   normalizeStyles,
   validateComponentProps,
@@ -75,6 +74,12 @@ export {
   HierarchyRegistrationOptions
 } from './runtime';
 
+export {
+  ReactRootManager,
+  reactRootManager,
+  ManagedReactRoot
+} from './runtime';
+
 // Export utilities
 export { 
   RuntimeUtilities, 
@@ -103,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

@@ -23,7 +23,6 @@ export {
 
 export {
   buildComponentProps,
-  cleanupPropBuilder,
   normalizeCallbacks,
   normalizeStyles,
   validateComponentProps,
@@ -43,4 +42,10 @@ export {
   HierarchyRegistrationResult,
   ComponentRegistrationError,
   HierarchyRegistrationOptions
-} from './component-hierarchy';
+} from './component-hierarchy';
+
+export {
+  ReactRootManager,
+  reactRootManager,
+  ManagedReactRoot
+} from './react-root-manager';

package/src/runtime/prop-builder.ts

@@ -41,7 +41,8 @@ export function buildComponentProps(
   callbacks: ComponentCallbacks = {},
   components: Record<string, any> = {},
   styles?: ComponentStyles,
-  options: PropBuilderOptions = {}
+  options: PropBuilderOptions = {},
+  onStateChanged?: (stateUpdate: Record<string, any>) => void
 ): ComponentProps {
   const {
     validate = true,
@@ -61,7 +62,8 @@ export function buildComponentProps(
     utilities,
     callbacks: normalizeCallbacks(callbacks, debounceUpdateUserState),
     components,
-    styles: normalizeStyles(styles)
+    styles: normalizeStyles(styles),
+    onStateChanged
   };
 
   // Validate if enabled
@@ -124,74 +126,6 @@ export function normalizeCallbacks(callbacks: any, debounceMs: number = 3000): C
     normalized.OpenEntityRecord = callbacks.OpenEntityRecord;
   }
 
-  if (callbacks.UpdateUserState && typeof callbacks.UpdateUserState === 'function') {
-    // Create a debounced version of UpdateUserState with loop detection
-    const originalCallback = callbacks.UpdateUserState;
-    
-    // Get or create a subject for this callback
-    let subject = updateUserStateSubjects.get(originalCallback);
-    if (!subject) {
-      subject = new Subject<any>();
-      updateUserStateSubjects.set(originalCallback, subject);
-      
-      // Subscribe to the subject with debounce
-      const subscription = subject.pipe(
-        debounceTime(debounceMs)
-      ).subscribe(state => {
-        console.log(`[Skip Component] UpdateUserState called after ${debounceMs}ms debounce`);
-        originalCallback(state);
-      });
-      
-      // Store the subscription for cleanup
-      updateUserStateSubscriptions.set(originalCallback, subscription);
-    }
-    
-    // Get or create loop detection state
-    let loopState = loopDetectionStates.get(originalCallback);
-    if (!loopState) {
-      loopState = { count: 0, lastUpdate: 0, lastState: null };
-      loopDetectionStates.set(originalCallback, loopState);
-    }
-    
-    // Return a function that prevents redundant updates
-    normalized.UpdateUserState = (state: any) => {
-      // Check if this is a redundant update
-      if (loopState!.lastState && deepEqual(state, loopState!.lastState)) {
-        console.log('[Skip Component] Skipping redundant state update');
-        return; // Don't process identical state updates
-      }
-      
-      const now = Date.now();
-      const timeSinceLastUpdate = now - loopState!.lastUpdate;
-      
-      // Check for rapid updates
-      if (timeSinceLastUpdate < 100) {
-        loopState!.count++;
-        
-        if (loopState!.count > 5) {
-          console.error('[Skip Component] Rapid state updates detected - possible infinite loop');
-          console.error('Updates in last 100ms:', loopState!.count);
-          // Still process the update but warn
-        }
-      } else {
-        // Reset counter if more than 100ms has passed
-        loopState!.count = 0;
-      }
-      
-      loopState!.lastUpdate = now;
-      loopState!.lastState = JSON.parse(JSON.stringify(state)); // Deep clone to preserve state
-      
-      console.log('[Skip Component] Processing state update');
-      
-      // Push to debounce subject (which already has 3 second debounce)
-      subject!.next(state);
-    };
-  }
-
-  if (callbacks.NotifyEvent && typeof callbacks.NotifyEvent === 'function') {
-    normalized.NotifyEvent = callbacks.NotifyEvent;
-  }
-
   return normalized;
 }
 
@@ -284,34 +218,7 @@ export function mergeProps(...propsList: Partial<ComponentProps>[]): ComponentPr
 
   return merged;
 }
-
-/**
- * Cleanup function for prop builder resources
- * @param callbacks - The callbacks object that was used to build props
- */
-export function cleanupPropBuilder(callbacks: ComponentCallbacks): void {
-  if (callbacks.UpdateUserState && typeof callbacks.UpdateUserState === 'function') {
-    const originalCallback = callbacks.UpdateUserState;
-    
-    // Unsubscribe from the subject
-    const subscription = updateUserStateSubscriptions.get(originalCallback);
-    if (subscription) {
-      subscription.unsubscribe();
-      updateUserStateSubscriptions.delete(originalCallback);
-    }
-    
-    // Complete and remove the subject
-    const subject = updateUserStateSubjects.get(originalCallback);
-    if (subject) {
-      subject.complete();
-      updateUserStateSubjects.delete(originalCallback);
-    }
-    
-    // Clear loop detection state
-    loopDetectionStates.delete(originalCallback);
-  }
-}
-
+ 
 /**
  * Creates a props transformer function
  * @param transformations - Map of prop paths to transformer functions
@@ -372,20 +279,6 @@ export function wrapCallbacksWithLogging(
     };
   }
 
-  if (callbacks.UpdateUserState) {
-    wrapped.UpdateUserState = (state: any) => {
-      console.log(`[${componentName}] UpdateUserState called:`, state);
-      callbacks.UpdateUserState!(state);
-    };
-  }
-
-  if (callbacks.NotifyEvent) {
-    wrapped.NotifyEvent = (event: string, data: any) => {
-      console.log(`[${componentName}] NotifyEvent called:`, { event, data });
-      callbacks.NotifyEvent!(event, data);
-    };
-  }
-
   return wrapped;
 }
 

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/types/index.ts

@@ -114,6 +114,8 @@ export interface ComponentProps {
   components?: Record<string, any>;
   /** Component styles */
   styles?: ComponentStyles;
+  /** Standard state change handler for controlled components */
+  onStateChanged?: (stateUpdate: Record<string, any>) => void;
 }
 
 /**