@memberjunction/react-runtime 2.74.0 → 2.76.0

package/src/registry/component-resolver.ts

@@ -5,16 +5,7 @@
  */
 
 import { ComponentRegistry } from './component-registry';
-
-/**
- * Component specification interface matching Skip component structure
- */
-export interface ComponentSpec {
-  componentName: string;
-  componentCode?: string;
-  childComponents?: ComponentSpec[];
-  components?: ComponentSpec[]; // Alternative property name for children
-}
+import { ComponentSpec } from '@memberjunction/interactive-component-types';
 
 /**
  * Resolved component map for passing to React components
@@ -67,20 +58,20 @@ export class ComponentResolver {
     visited: Set<string> = new Set()
   ): void {
     // Prevent circular dependencies
-    if (visited.has(spec.componentName)) {
-      console.warn(`Circular dependency detected for component: ${spec.componentName}`);
+    if (visited.has(spec.name)) {
+      console.warn(`Circular dependency detected for component: ${spec.name}`);
       return;
     }
-    visited.add(spec.componentName);
+    visited.add(spec.name);
 
     // Try to get component from registry
-    const component = this.registry.get(spec.componentName, namespace);
+    const component = this.registry.get(spec.name, namespace);
     if (component) {
-      resolved[spec.componentName] = component;
+      resolved[spec.name] = component;
     }
 
-    // Process child components (handle both property names)
-    const children = spec.childComponents || spec.components || [];
+    // Process child components
+    const children = spec.dependencies || [];
     for (const child of children) {
       this.resolveComponentHierarchy(child, resolved, namespace, visited);
     }
@@ -114,16 +105,16 @@ export class ComponentResolver {
     missing: string[],
     checked: Set<string>
   ): void {
-    if (checked.has(spec.componentName)) return;
-    checked.add(spec.componentName);
+    if (checked.has(spec.name)) return;
+    checked.add(spec.name);
 
     // Check if component exists in registry
-    if (!this.registry.has(spec.componentName, namespace)) {
-      missing.push(spec.componentName);
+    if (!this.registry.has(spec.name, namespace)) {
+      missing.push(spec.name);
     }
 
     // Check children
-    const children = spec.childComponents || spec.components || [];
+    const children = spec.dependencies || [];
     for (const child of children) {
       this.checkDependencies(child, namespace, missing, checked);
     }
@@ -154,13 +145,13 @@ export class ComponentResolver {
     graph: Map<string, string[]>,
     visited: Set<string>
   ): void {
-    if (visited.has(spec.componentName)) return;
-    visited.add(spec.componentName);
+    if (visited.has(spec.name)) return;
+    visited.add(spec.name);
 
-    const children = spec.childComponents || spec.components || [];
-    const dependencies = children.map(child => child.componentName);
+    const children = spec.dependencies || [];
+    const dependencies = children.map(child => child.name);
     
-    graph.set(spec.componentName, dependencies);
+    graph.set(spec.name, dependencies);
 
     // Recursively process children
     for (const child of children) {
@@ -262,12 +253,12 @@ export class ComponentResolver {
     collected: ComponentSpec[],
     visited: Set<string>
   ): void {
-    if (visited.has(spec.componentName)) return;
-    visited.add(spec.componentName);
+    if (visited.has(spec.name)) return;
+    visited.add(spec.name);
 
     collected.push(spec);
 
-    const children = spec.childComponents || spec.components || [];
+    const children = spec.dependencies || [];
     for (const child of children) {
       this.collectComponentSpecs(child, collected, visited);
     }

package/src/registry/index.ts

@@ -4,4 +4,5 @@
  */
 
 export { ComponentRegistry } from './component-registry';
-export { ComponentResolver, ComponentSpec, ResolvedComponents } from './component-resolver';
+export { ComponentResolver, ResolvedComponents } from './component-resolver';
+export { ComponentSpec } from '@memberjunction/interactive-component-types';

package/src/runtime/component-hierarchy.ts

@@ -13,7 +13,7 @@ import {
 import { ComponentCompiler } from '../compiler';
 import { ComponentRegistry } from '../registry';
 
-import { ComponentSpec } from '../registry/component-resolver';
+import { ComponentSpec } from '@memberjunction/interactive-component-types';
 
 /**
  * Result of a hierarchy registration operation
@@ -89,7 +89,7 @@ export class ComponentHierarchyRegistrar {
     );
 
     if (rootResult.success) {
-      registeredComponents.push(rootSpec.componentName);
+      registeredComponents.push(rootSpec.name);
     } else {
       errors.push(rootResult.error!);
       if (!continueOnError) {
@@ -98,7 +98,7 @@ export class ComponentHierarchyRegistrar {
     }
 
     // Register child components recursively
-    const childComponents = rootSpec.childComponents || rootSpec.components || [];
+    const childComponents = rootSpec.dependencies || [];
     if (childComponents.length > 0) {
       const childResult = await this.registerChildComponents(
         childComponents,
@@ -136,7 +136,7 @@ export class ComponentHierarchyRegistrar {
 
     try {
       // Skip if no component code
-      if (!spec.componentCode) {
+      if (!spec.code) {
         return {
           success: true,
           error: undefined
@@ -144,12 +144,12 @@ export class ComponentHierarchyRegistrar {
       }
 
       // Check if component already exists
-      const existingComponent = this.registry.get(spec.componentName, namespace, version);
+      const existingComponent = this.registry.get(spec.name, namespace, version);
       if (existingComponent && !allowOverride) {
         return {
           success: false,
           error: {
-            componentName: spec.componentName,
+            componentName: spec.name,
             error: `Component already registered in ${namespace}/${version}`,
             phase: 'registration'
           }
@@ -158,8 +158,8 @@ export class ComponentHierarchyRegistrar {
 
       // Compile the component
       const compileOptions: CompileOptions = {
-        componentName: spec.componentName,
-        componentCode: spec.componentCode,
+        componentName: spec.name,
+        componentCode: spec.code,
         styles
       };
 
@@ -169,7 +169,7 @@ export class ComponentHierarchyRegistrar {
         return {
           success: false,
           error: {
-            componentName: spec.componentName,
+            componentName: spec.name,
             error: compilationResult.error?.message || 'Unknown compilation error',
             phase: 'compilation'
           }
@@ -181,7 +181,7 @@ export class ComponentHierarchyRegistrar {
 
       // Register the component
       this.registry.register(
-        spec.componentName,
+        spec.name,
         componentFactory.component,
         namespace,
         version
@@ -193,7 +193,7 @@ export class ComponentHierarchyRegistrar {
       return {
         success: false,
         error: {
-          componentName: spec.componentName,
+          componentName: spec.name,
           error: error instanceof Error ? error.message : String(error),
           phase: 'registration'
         }
@@ -226,8 +226,8 @@ export class ComponentHierarchyRegistrar {
       });
 
       if (childResult.success) {
-        if (child.componentCode) {
-          registeredComponents.push(child.componentName);
+        if (child.code) {
+          registeredComponents.push(child.name);
         }
       } else {
         errors.push(childResult.error!);
@@ -237,7 +237,7 @@ export class ComponentHierarchyRegistrar {
       }
 
       // Register nested children recursively
-      const nestedChildren = child.childComponents || child.components || [];
+      const nestedChildren = child.dependencies || [];
       if (nestedChildren.length > 0) {
         await this.registerChildComponents(
           nestedChildren,
@@ -279,26 +279,26 @@ export async function registerComponentHierarchy(
 export function validateComponentSpec(spec: ComponentSpec): string[] {
   const errors: string[] = [];
 
-  if (!spec.componentName) {
-    errors.push('Component specification must have a componentName');
+  if (!spec.name) {
+    errors.push('Component specification must have a name');
   }
 
   // If componentCode is provided, do basic validation
-  if (spec.componentCode) {
-    if (typeof spec.componentCode !== 'string') {
-      errors.push(`Component code for ${spec.componentName} must be a string`);
+  if (spec.code) {
+    if (typeof spec.code !== 'string') {
+      errors.push(`Component code for ${spec.name} must be a string`);
     }
-    if (spec.componentCode.trim().length === 0) {
-      errors.push(`Component code for ${spec.componentName} cannot be empty`);
+    if (spec.code.trim().length === 0) {
+      errors.push(`Component code for ${spec.name} cannot be empty`);
     }
   }
 
   // Validate child components recursively
-  const children = spec.childComponents || spec.components || [];
+  const children = spec.dependencies || [];
   children.forEach((child, index) => {
     const childErrors = validateComponentSpec(child);
     childErrors.forEach(error => {
-      errors.push(`Child ${index} (${child.componentName || 'unnamed'}): ${error}`);
+      errors.push(`Child ${index} (${child.name || 'unnamed'}): ${error}`);
     });
   });
 
@@ -313,7 +313,7 @@ export function validateComponentSpec(spec: ComponentSpec): string[] {
 export function flattenComponentHierarchy(rootSpec: ComponentSpec): ComponentSpec[] {
   const components: ComponentSpec[] = [rootSpec];
   
-  const children = rootSpec.childComponents || rootSpec.components || [];
+  const children = rootSpec.dependencies || [];
   children.forEach(child => {
     components.push(...flattenComponentHierarchy(child));
   });
@@ -333,11 +333,11 @@ export function countComponentsInHierarchy(
 ): number {
   let count = 0;
   
-  if (includeEmpty || rootSpec.componentCode) {
+  if (includeEmpty || rootSpec.code) {
     count = 1;
   }
 
-  const children = rootSpec.childComponents || rootSpec.components || [];
+  const children = rootSpec.dependencies || [];
   children.forEach(child => {
     count += countComponentsInHierarchy(child, includeEmpty);
   });

package/src/runtime/index.ts

@@ -23,7 +23,6 @@ export {
 
 export {
   buildComponentProps,
-  cleanupPropBuilder,
   normalizeCallbacks,
   normalizeStyles,
   validateComponentProps,

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;
 }
 
 /**
@@ -223,4 +225,7 @@ export interface ErrorBoundaryOptions {
   logErrors?: boolean;
   /** Error recovery strategy */
   recovery?: 'retry' | 'reset' | 'none';
-}
+}
+
+// Export library configuration types
+export * from './library-config';

package/src/types/library-config.ts

@@ -0,0 +1,75 @@
+/**
+ * Configuration for external libraries used in React components
+ */
+
+export interface ExternalLibraryConfig {
+  /** Unique identifier for the library */
+  id: string;
+  
+  /** Library name (e.g., 'lodash') */
+  name: string;
+  
+  /** Display name for UI (e.g., 'Lodash') */
+  displayName: string;
+  
+  /** Library category */
+  category: 'core' | 'runtime' | 'ui' | 'charting' | 'utility';
+  
+  /** Global variable name when loaded (e.g., '_' for lodash) */
+  globalVariable: string;
+  
+  /** Library version */
+  version: string;
+  
+  /** CDN URL for the library JavaScript */
+  cdnUrl: string;
+  
+  /** Optional CDN URL for library CSS */
+  cdnCssUrl?: string;
+  
+  /** Library description */
+  description: string;
+  
+  /** Instructions for AI when using this library */
+  aiInstructions?: string;
+  
+  /** Example usage code */
+  exampleUsage?: string;
+  
+  /** Whether the library is enabled */
+  isEnabled: boolean;
+  
+  /** Whether this is a core library (always loaded) */
+  isCore: boolean;
+  
+  /** Whether this is runtime-only (not exposed to generated components) */
+  isRuntimeOnly?: boolean;
+}
+
+export interface LibraryConfigurationMetadata {
+  version: string;
+  lastUpdated: string;
+  description?: string;
+}
+
+export interface LibraryConfiguration {
+  libraries: ExternalLibraryConfig[];
+  metadata: LibraryConfigurationMetadata;
+}
+
+/**
+ * Library loading options
+ */
+export interface LibraryLoadOptions {
+  /** Skip loading if already loaded */
+  skipIfLoaded?: boolean;
+  
+  /** Timeout for loading (ms) */
+  timeout?: number;
+  
+  /** Filter to specific categories */
+  categories?: Array<ExternalLibraryConfig['category']>;
+  
+  /** Exclude runtime-only libraries */
+  excludeRuntimeOnly?: boolean;
+}

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