@memberjunction/react-runtime 2.93.0 → 2.94.0

package/src/registry/component-resolver.ts

@@ -30,25 +30,29 @@ export class ComponentResolver {
   private compiler: ComponentCompiler | null = null;
   private runtimeContext: RuntimeContext | null = null;
   private componentEngine = ComponentMetadataEngine.Instance;
+  private debug: boolean = false;
 
   /**
    * Creates a new ComponentResolver instance
    * @param registry - Component registry to use for resolution
    * @param compiler - Optional compiler for registry-based components
    * @param runtimeContext - Optional runtime context for registry-based components
+   * @param debug - Enable debug logging (defaults to false)
    */
   constructor(
     registry: ComponentRegistry,
     compiler?: ComponentCompiler,
-    runtimeContext?: RuntimeContext
+    runtimeContext?: RuntimeContext,
+    debug: boolean = false
   ) {
     this.registry = registry;
     this.resolverInstanceId = `resolver-${Date.now()}-${Math.random()}`;
+    this.debug = debug;
     
     if (compiler && runtimeContext) {
       this.compiler = compiler;
       this.runtimeContext = runtimeContext;
-      this.registryService = ComponentRegistryService.getInstance(compiler, runtimeContext);
+      this.registryService = ComponentRegistryService.getInstance(compiler, runtimeContext, debug);
     }
   }
 
@@ -74,7 +78,27 @@ export class ComponentResolver {
     // Resolve the component hierarchy
     await this.resolveComponentHierarchy(spec, resolved, namespace, new Set(), contextUser);
     
-    return resolved;
+    // Unwrap component wrappers before returning
+    // Components from the registry come as objects with component/print/refresh properties
+    // We need to extract just the component function for use in child components
+    const unwrapped: ResolvedComponents = {};
+    for (const [name, value] of Object.entries(resolved)) {
+      if (value && typeof value === 'object' && 'component' in value) {
+        if (typeof value.component === 'function') {
+          // This is a wrapped component - extract the actual React component function
+          unwrapped[name] = value.component;
+        } else {
+          // ComponentObject has a component property but it's not a function
+          console.error(`Component ${name} has invalid component property:`, typeof value.component, value);
+          unwrapped[name] = value; // Pass through the problematic value so we can see the error
+        }
+      } else {
+        // This is already a plain component function or something else
+        unwrapped[name] = value;
+      }
+    }
+    
+    return unwrapped;
   }
 
   /**
@@ -97,7 +121,9 @@ export class ComponentResolver {
     
     // Prevent circular dependencies
     if (visited.has(componentId)) {
-      console.warn(`Circular dependency detected for component: ${componentId}`);
+      if (this.debug) {
+        console.warn(`Circular dependency detected for component: ${componentId}`);
+      }
       return;
     }
     visited.add(componentId);
@@ -120,12 +146,18 @@ export class ComponentResolver {
             contextUser
           );
           resolved[spec.name] = compiledComponent;
-          console.log(`📦 Resolved registry component: ${spec.name} from ${componentId}`);
+          if (this.debug) {
+            console.log(`📦 Resolved registry component: ${spec.name} from ${componentId}`);
+          }
         } else {
-          console.warn(`Registry component not found in database: ${spec.name}`);
+          if (this.debug) {
+            console.warn(`Registry component not found in database: ${spec.name}`);
+          }
         }
       } catch (error) {
-        console.error(`Failed to load registry component ${spec.name}:`, error);
+        if (this.debug) {
+          console.error(`Failed to load registry component ${spec.name}:`, error);
+        }
       }
     } else {
       // Embedded component - get from local registry
@@ -134,15 +166,22 @@ export class ComponentResolver {
       const component = this.registry.get(spec.name, componentNamespace);
       if (component) {
         resolved[spec.name] = component;
-        console.log(`📄 Resolved embedded component: ${spec.name} from namespace ${componentNamespace}`);
+        if (this.debug) {
+          console.log(`📄 Resolved embedded component: ${spec.name} from namespace ${componentNamespace}, type:`, typeof component);
+        }
       } else {
         // If not found with specified namespace, try the parent namespace as fallback
         const fallbackComponent = this.registry.get(spec.name, namespace);
         if (fallbackComponent) {
           resolved[spec.name] = fallbackComponent;
-          console.log(`📄 Resolved embedded component: ${spec.name} from fallback namespace ${namespace}`);
+          if (this.debug) {
+            console.log(`📄 Resolved embedded component: ${spec.name} from fallback namespace ${namespace}, type:`, typeof fallbackComponent);
+          }
         } else {
+          // Component not found - this might cause issues later
           console.warn(`⚠️ Could not resolve embedded component: ${spec.name} in namespace ${componentNamespace} or ${namespace}`);
+          // Store undefined explicitly so we know it failed to resolve
+          resolved[spec.name] = undefined;
         }
       }
     }
@@ -162,7 +201,9 @@ export class ComponentResolver {
     if (this.registryService) {
       // This would allow the registry service to clean up unused components
       // Implementation would track which components this resolver referenced
-      console.log(`Cleaning up resolver: ${this.resolverInstanceId}`);
+      if (this.debug) {
+        console.log(`Cleaning up resolver: ${this.resolverInstanceId}`);
+      }
     }
   }
 

package/src/runtime/component-hierarchy.ts

@@ -197,13 +197,21 @@ export class ComponentHierarchyRegistrar {
         };
       }
 
-      // Create component factory
-      const componentFactory = compilationResult.component!.component(this.runtimeContext, styles);
+      // Call the factory to create the ComponentObject
+      const componentObject = compilationResult.component!.factory(this.runtimeContext, styles);
+
+      // Debug logging to verify ComponentObject structure
+      console.log(`📦 Registering ComponentObject for ${spec.name}:`, {
+        hasComponent: 'component' in componentObject,
+        componentType: typeof componentObject.component,
+        hasPrint: 'print' in componentObject,
+        hasRefresh: 'refresh' in componentObject
+      });
 
-      // Register the component
+      // Register the full ComponentObject (not just the React component)
       this.registry.register(
         spec.name,
-        componentFactory.component,
+        componentObject,
         spec.namespace || namespace,
         version
       );

package/src/runtime/prop-builder.ts

@@ -4,8 +4,8 @@
  * @module @memberjunction/react-runtime/runtime
  */
 
-import { ComponentStyles } from '@memberjunction/interactive-component-types';
-import { ComponentProps, ComponentCallbacks } from '../types';
+import { ComponentStyles, ComponentCallbacks } from '@memberjunction/interactive-component-types';
+import { ComponentProps } from '../types';
 import { Subject, debounceTime, Subscription } from 'rxjs';
 
 /**
@@ -39,7 +39,10 @@ export function buildComponentProps(
   data: any = {},
   userState: any = {},
   utilities: any = {},
-  callbacks: ComponentCallbacks = {},
+  callbacks: ComponentCallbacks = {
+    OpenEntityRecord: () => {},
+    RegisterMethod: () => {}
+  },
   components: Record<string, any> = {},
   styles?: ComponentStyles,
   options: PropBuilderOptions = {},
@@ -116,15 +119,19 @@ function deepEqual(obj1: any, obj2: any): boolean {
  * @returns Normalized callbacks
  */
 export function normalizeCallbacks(callbacks: any, debounceMs: number = 3000): ComponentCallbacks {
-  const normalized: ComponentCallbacks = {};
-
-  // Ensure all callbacks are functions
-  if (callbacks.RefreshData && typeof callbacks.RefreshData === 'function') {
-    normalized.RefreshData = callbacks.RefreshData;
-  }
+  // Provide default implementations for required callbacks
+  const normalized: ComponentCallbacks = {
+    OpenEntityRecord: callbacks?.OpenEntityRecord || (() => {}),
+    RegisterMethod: callbacks?.RegisterMethod || (() => {})
+  };
 
-  if (callbacks.OpenEntityRecord && typeof callbacks.OpenEntityRecord === 'function') {
-    normalized.OpenEntityRecord = callbacks.OpenEntityRecord;
+  // Copy any additional callbacks that might exist
+  if (callbacks) {
+    Object.keys(callbacks).forEach(key => {
+      if (typeof callbacks[key] === 'function' && !normalized.hasOwnProperty(key)) {
+        (normalized as any)[key] = callbacks[key];
+      }
+    });
   }
 
   return normalized;
@@ -264,14 +271,20 @@ export function wrapCallbacksWithLogging(
   callbacks: ComponentCallbacks,
   componentName: string
 ): ComponentCallbacks {
-  const wrapped: ComponentCallbacks = {};
+  const wrapped: ComponentCallbacks = {
+    OpenEntityRecord: callbacks?.OpenEntityRecord || (() => {}),
+    RegisterMethod: callbacks?.RegisterMethod || (() => {})
+  };
 
-  if (callbacks.RefreshData) {
-    wrapped.RefreshData = () => {
-      console.log(`[${componentName}] RefreshData called`);
-      callbacks.RefreshData!();
-    };
-  }
+  // Wrap any additional callbacks that might exist
+  Object.keys(callbacks).forEach(key => {
+    if (key !== 'OpenEntityRecord' && key !== 'RegisterMethod' && typeof (callbacks as any)[key] === 'function') {
+      (wrapped as any)[key] = (...args: any[]) => {
+        console.log(`[${componentName}] ${key} called with args:`, args);
+        return (callbacks as any)[key](...args);
+      };
+    }
+  });
 
   if (callbacks.OpenEntityRecord) {
     wrapped.OpenEntityRecord = (entityName: string, key: any) => {
@@ -280,6 +293,13 @@ export function wrapCallbacksWithLogging(
     };
   }
 
+  if (callbacks.RegisterMethod) {
+    wrapped.RegisterMethod = (methodName: any, handler: any) => {
+      console.log(`[${componentName}] RegisterMethod called for:`, methodName);
+      callbacks.RegisterMethod!(methodName, handler);
+    };
+  }
+
   return wrapped;
 }
 

package/src/types/dependency-types.ts

@@ -0,0 +1,110 @@
+/**
+ * @fileoverview Type definitions for library dependency management
+ * @module @memberjunction/react-runtime/types
+ */
+
+import { ComponentLibraryEntity } from '@memberjunction/core-entities';
+
+/**
+ * Represents a parsed dependency with name and version specification
+ */
+export interface ParsedDependency {
+  name: string;
+  versionSpec: string;
+}
+
+/**
+ * Represents a version requirement for a library
+ */
+export interface VersionRequirement {
+  library: string;
+  versionSpec: string;
+  requestedBy: string; // Which library requested this dependency
+}
+
+/**
+ * Represents a resolved version after conflict resolution
+ */
+export interface ResolvedVersion {
+  library: string;
+  version: string;
+  satisfies: VersionRequirement[];
+  warnings?: string[];
+}
+
+/**
+ * Node in the dependency graph
+ */
+export interface DependencyNode {
+  library: ComponentLibraryEntity;
+  dependencies: Map<string, string>; // dependency name -> version spec
+  dependents: Set<string>; // libraries that depend on this one
+}
+
+/**
+ * Dependency graph structure
+ */
+export interface DependencyGraph {
+  nodes: Map<string, DependencyNode>;
+  roots: Set<string>; // libraries with no dependents
+}
+
+/**
+ * Result of determining load order
+ */
+export interface LoadOrderResult {
+  success: boolean;
+  order?: ComponentLibraryEntity[];
+  cycles?: string[][];
+  errors?: string[];
+  warnings?: string[];
+}
+
+/**
+ * Semver version range types
+ */
+export type VersionRangeType = 'exact' | 'tilde' | 'caret' | 'range' | 'any';
+
+/**
+ * Parsed semver version
+ */
+export interface ParsedVersion {
+  major: number;
+  minor: number;
+  patch: number;
+  prerelease?: string;
+  build?: string;
+}
+
+/**
+ * Version range specification
+ */
+export interface VersionRange {
+  type: VersionRangeType;
+  operator?: string;
+  version?: ParsedVersion;
+  raw: string;
+}
+
+/**
+ * Library load state tracking
+ */
+export interface LoadedLibraryState {
+  name: string;
+  version: string;
+  globalVariable: string;
+  loadedAt: Date;
+  requestedBy: string[];
+  dependencies: string[];
+}
+
+/**
+ * Options for dependency resolution
+ */
+export interface DependencyResolutionOptions {
+  allowPrerelease?: boolean;
+  preferLatest?: boolean;
+  strict?: boolean; // Fail on any version conflict
+  maxDepth?: number; // Maximum dependency depth to prevent infinite recursion
+  debug?: boolean;
+}

package/src/types/index.ts

@@ -6,14 +6,14 @@
 
 import { UserInfo } from '@memberjunction/core';
 import { ComponentLibraryEntity } from '@memberjunction/core-entities';
-import { ComponentLibraryDependency, ComponentStyles } from '@memberjunction/interactive-component-types';
+import { ComponentLibraryDependency, ComponentStyles, ComponentObject } from '@memberjunction/interactive-component-types';
 
 /**
  * Represents a compiled React component with its metadata
  */
 export interface CompiledComponent {
-  /** The compiled React component function or class */
-  component: any;
+  /** Factory function that creates a ComponentObject when called with context */
+  factory: (context: RuntimeContext, styles?: ComponentStyles) => ComponentObject;
   /** Unique identifier for the component */
   id: string;
   /** Original component name */
@@ -58,8 +58,8 @@ export interface CompileOptions {
  * Registry entry for a compiled component
  */
 export interface RegistryEntry {
-  /** The compiled component */
-  component: any;
+  /** The compiled component object with all methods */
+  component: ComponentObject;
   /** Component metadata */
   metadata: ComponentMetadata;
   /** Last access time for LRU cache */
@@ -113,7 +113,7 @@ export interface ComponentProps {
   /** Utility functions available to the component */
   utilities: any;
   /** Callback functions */
-  callbacks: ComponentCallbacks;
+  callbacks: any;
   /** Child components available for use */
   components?: Record<string, any>;
   /** Component styles */
@@ -122,20 +122,6 @@ export interface ComponentProps {
   onStateChanged?: (stateUpdate: Record<string, any>) => void;
 }
 
-/**
- * Callbacks available to React components
- */
-export interface ComponentCallbacks {
-  /** Request data refresh */
-  RefreshData?: () => void;
-  /** Open an entity record */
-  OpenEntityRecord?: (entityName: string, key: any) => void;
-  /** Update user state */
-  UpdateUserState?: (state: any) => void;
-  /** Notify of a custom event */
-  NotifyEvent?: (event: string, data: any) => void;
-}
-
 /**
  * Configuration for the component compiler
  */
@@ -155,6 +141,8 @@ export interface CompilerConfig {
   cache: boolean;
   /** Maximum cache size */
   maxCacheSize: number;
+  /** Enable debug logging */
+  debug?: boolean;
 }
 
 /**
@@ -169,6 +157,8 @@ export interface RegistryConfig {
   useLRU: boolean;
   /** Namespace isolation */
   enableNamespaces: boolean;
+  /** Enable debug logging */
+  debug?: boolean;
 }
 
 /**
@@ -232,4 +222,10 @@ export interface ErrorBoundaryOptions {
 }
 
 // Export library configuration types
-export * from './library-config';
+export * from './library-config';
+
+// Export dependency types
+export * from './dependency-types';
+
+// Re-export ComponentObject for convenience
+export { ComponentObject } from '@memberjunction/interactive-component-types';

package/src/utilities/index.ts

@@ -7,6 +7,7 @@ export * from './component-styles';
 export * from './standard-libraries';
 export * from './library-loader';
 export * from './library-registry';
+export * from './library-dependency-resolver';
 export * from './component-error-analyzer';
 export * from './resource-manager';
 export * from './cache-manager';