@memberjunction/react-runtime 2.75.0 → 2.76.0

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/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;
 }
 
 /**

package/src/utilities/core-libraries.ts

@@ -0,0 +1,61 @@
+import { ExternalLibraryConfig } from '../types/library-config';
+
+/**
+ * Core runtime libraries required for the React runtime to function.
+ * These are not plugin libraries and are always loaded.
+ */
+export const CORE_RUNTIME_LIBRARIES: ExternalLibraryConfig[] = [
+  {
+    id: 'react',
+    name: 'react',
+    displayName: 'React',
+    category: 'runtime',
+    globalVariable: 'React',
+    version: '18.2.0',
+    cdnUrl: 'https://unpkg.com/react@18.2.0/umd/react.production.min.js',
+    description: 'React core library',
+    isEnabled: true,
+    isCore: true,
+    isRuntimeOnly: true
+  },
+  {
+    id: 'react-dom',
+    name: 'react-dom',
+    displayName: 'ReactDOM',
+    category: 'runtime',
+    globalVariable: 'ReactDOM',
+    version: '18.2.0',
+    cdnUrl: 'https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js',
+    description: 'React DOM library',
+    isEnabled: true,
+    isCore: true,
+    isRuntimeOnly: true
+  },
+  {
+    id: 'babel-standalone',
+    name: '@babel/standalone',
+    displayName: 'Babel Standalone',
+    category: 'runtime',
+    globalVariable: 'Babel',
+    version: '7.24.4',
+    cdnUrl: 'https://unpkg.com/@babel/standalone@7.24.4/babel.min.js',
+    description: 'Babel compiler for JSX transformation',
+    isEnabled: true,
+    isCore: true,
+    isRuntimeOnly: true
+  }
+];
+
+/**
+ * Get the core runtime libraries configuration
+ */
+export function getCoreRuntimeLibraries(): ExternalLibraryConfig[] {
+  return CORE_RUNTIME_LIBRARIES;
+}
+
+/**
+ * Check if a library ID is a core runtime library
+ */
+export function isCoreRuntimeLibrary(libraryId: string): boolean {
+  return CORE_RUNTIME_LIBRARIES.some(lib => lib.id === libraryId);
+}

package/src/utilities/library-loader.ts

@@ -9,6 +9,7 @@ import {
   StandardLibraryManager
 } from './standard-libraries';
 import { LibraryConfiguration, ExternalLibraryConfig, LibraryLoadOptions as ConfigLoadOptions } from '../types/library-config';
+import { getCoreRuntimeLibraries, isCoreRuntimeLibrary } from './core-libraries';
 
 /**
  * Represents a loaded script or CSS resource
@@ -52,12 +53,30 @@ export class LibraryLoader {
   /**
    * Load all standard libraries (core + UI + CSS)
    * This is the main method that should be used by test harness and Angular wrapper
+   * @param config Optional full library configuration to replace the default
+   * @param additionalLibraries Optional additional libraries to merge with the configuration
    */
-  static async loadAllLibraries(config?: LibraryConfiguration): Promise<LibraryLoadResult> {
+  static async loadAllLibraries(
+    config?: LibraryConfiguration, 
+    additionalLibraries?: ExternalLibraryConfig[]
+  ): Promise<LibraryLoadResult> {
     if (config) {
       StandardLibraryManager.setConfiguration(config);
     }
     
+    // If additional libraries are provided, merge them with the current configuration
+    if (additionalLibraries && additionalLibraries.length > 0) {
+      const currentConfig = StandardLibraryManager.getConfiguration();
+      const mergedConfig: LibraryConfiguration = {
+        libraries: [...currentConfig.libraries, ...additionalLibraries],
+        metadata: {
+          ...currentConfig.metadata,
+          lastUpdated: new Date().toISOString()
+        }
+      };
+      StandardLibraryManager.setConfiguration(mergedConfig);
+    }
+    
     return this.loadLibrariesFromConfig();
   }
 
@@ -65,55 +84,55 @@ export class LibraryLoader {
    * Load libraries based on the current configuration
    */
   static async loadLibrariesFromConfig(options?: ConfigLoadOptions): Promise<LibraryLoadResult> {
+    // Always load core runtime libraries first
+    const coreLibraries = getCoreRuntimeLibraries();
+    const corePromises = coreLibraries.map(lib => 
+      this.loadScript(lib.cdnUrl, lib.globalVariable)
+    );
+    
+    const coreResults = await Promise.all(corePromises);
+    const React = coreResults.find((_, i) => coreLibraries[i].globalVariable === 'React');
+    const ReactDOM = coreResults.find((_, i) => coreLibraries[i].globalVariable === 'ReactDOM');
+    const Babel = coreResults.find((_, i) => coreLibraries[i].globalVariable === 'Babel');
+    
+    // Now load plugin libraries from configuration
     const config = StandardLibraryManager.getConfiguration();
     const enabledLibraries = StandardLibraryManager.getEnabledLibraries();
     
+    // Filter out any core runtime libraries from plugin configuration
+    let pluginLibraries = enabledLibraries.filter(lib => !isCoreRuntimeLibrary(lib.id));
+    
     // Apply options filters if provided
-    let librariesToLoad = enabledLibraries;
     if (options) {
       if (options.categories) {
-        librariesToLoad = librariesToLoad.filter(lib => 
+        pluginLibraries = pluginLibraries.filter(lib => 
           options.categories!.includes(lib.category)
         );
       }
       if (options.excludeRuntimeOnly) {
-        librariesToLoad = librariesToLoad.filter(lib => !lib.isRuntimeOnly);
+        pluginLibraries = pluginLibraries.filter(lib => !lib.isRuntimeOnly);
       }
     }
     
-    // Separate runtime and component libraries
-    const runtimeLibs = librariesToLoad.filter(lib => lib.category === 'runtime');
-    const componentLibs = librariesToLoad.filter(lib => lib.category !== 'runtime');
-    
-    // Load runtime libraries first (React, ReactDOM, Babel)
-    const runtimePromises = runtimeLibs.map(lib => 
-      this.loadScript(lib.cdnUrl, lib.globalVariable)
-    );
-    
-    const runtimeResults = await Promise.all(runtimePromises);
-    const React = runtimeResults.find((_, i) => runtimeLibs[i].globalVariable === 'React');
-    const ReactDOM = runtimeResults.find((_, i) => runtimeLibs[i].globalVariable === 'ReactDOM');
-    const Babel = runtimeResults.find((_, i) => runtimeLibs[i].globalVariable === 'Babel');
-    
-    // Load CSS files (non-blocking)
-    componentLibs.forEach(lib => {
+    // Load CSS files for plugin libraries (non-blocking)
+    pluginLibraries.forEach(lib => {
       if (lib.cdnCssUrl) {
         this.loadCSS(lib.cdnCssUrl);
       }
     });
     
-    // Load component libraries
-    const componentPromises = componentLibs.map(lib => 
+    // Load plugin libraries
+    const pluginPromises = pluginLibraries.map(lib => 
       this.loadScript(lib.cdnUrl, lib.globalVariable)
     );
     
-    const componentResults = await Promise.all(componentPromises);
+    const pluginResults = await Promise.all(pluginPromises);
     
-    // Build libraries object
+    // Build libraries object (only contains plugin libraries)
     const libraries: StandardLibraries = {};
     
-    componentLibs.forEach((lib, index) => {
-      libraries[lib.globalVariable] = componentResults[index];
+    pluginLibraries.forEach((lib, index) => {
+      libraries[lib.globalVariable] = pluginResults[index];
     });
     
     return {