@memberjunction/react-runtime 2.92.0 → 2.94.0

package/src/registry/component-resolver.ts

@@ -5,7 +5,12 @@
  */
 
 import { ComponentRegistry } from './component-registry';
+import { ComponentRegistryService } from './component-registry-service';
 import { ComponentSpec } from '@memberjunction/interactive-component-types';
+import { ComponentCompiler } from '../compiler';
+import { RuntimeContext } from '../types';
+import { UserInfo } from '@memberjunction/core';
+import { ComponentMetadataEngine } from '@memberjunction/core-entities';
 
 /**
  * Resolved component map for passing to React components
@@ -20,28 +25,80 @@ export interface ResolvedComponents {
  */
 export class ComponentResolver {
   private registry: ComponentRegistry;
+  private registryService: ComponentRegistryService | null = null;
+  private resolverInstanceId: string;
+  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) {
+  constructor(
+    registry: ComponentRegistry,
+    compiler?: ComponentCompiler,
+    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, debug);
+    }
   }
 
   /**
    * Resolves all components for a given component specification
    * @param spec - Root component specification
    * @param namespace - Namespace for component resolution
+   * @param contextUser - Optional user context for database operations
    * @returns Map of component names to resolved components
    */
-  resolveComponents(spec: ComponentSpec, namespace: string = 'Global'): ResolvedComponents {
+  async resolveComponents(
+    spec: ComponentSpec, 
+    namespace: string = 'Global',
+    contextUser?: UserInfo
+  ): Promise<ResolvedComponents> {
     const resolved: ResolvedComponents = {};
     
+    // Initialize component engine if we have registry service
+    if (this.registryService) {
+      await this.componentEngine.Config(false, contextUser);
+    }
+    
     // Resolve the component hierarchy
-    this.resolveComponentHierarchy(spec, resolved, namespace);
+    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;
   }
 
   /**
@@ -50,30 +107,103 @@ export class ComponentResolver {
    * @param resolved - Map to store resolved components
    * @param namespace - Namespace for resolution
    * @param visited - Set of visited component names to prevent cycles
+   * @param contextUser - Optional user context for database operations
    */
-  private resolveComponentHierarchy(
+  private async resolveComponentHierarchy(
     spec: ComponentSpec,
     resolved: ResolvedComponents,
     namespace: string,
-    visited: Set<string> = new Set()
-  ): void {
+    visited: Set<string> = new Set(),
+    contextUser?: UserInfo
+  ): Promise<void> {
+    // Create a unique identifier for this component
+    const componentId = `${spec.namespace || namespace}/${spec.name}@${spec.version || 'latest'}`;
+    
     // Prevent circular dependencies
-    if (visited.has(spec.name)) {
-      console.warn(`Circular dependency detected for component: ${spec.name}`);
+    if (visited.has(componentId)) {
+      if (this.debug) {
+        console.warn(`Circular dependency detected for component: ${componentId}`);
+      }
       return;
     }
-    visited.add(spec.name);
+    visited.add(componentId);
 
-    // Try to get component from registry
-    const component = this.registry.get(spec.name, namespace);
-    if (component) {
-      resolved[spec.name] = component;
+    // Handle based on location
+    if (spec.location === 'registry' && this.registryService) {
+      // Registry component - need to load from database or external source
+      try {
+        // First, try to find the component in the metadata engine
+        const component = this.componentEngine.Components?.find(
+          (c: any) => c.Name === spec.name && 
+               c.Namespace === (spec.namespace || namespace)
+        );
+        
+        if (component) {
+          // Get compiled component from registry service
+          const compiledComponent = await this.registryService.getCompiledComponent(
+            component.ID,
+            this.resolverInstanceId,
+            contextUser
+          );
+          resolved[spec.name] = compiledComponent;
+          if (this.debug) {
+            console.log(`📦 Resolved registry component: ${spec.name} from ${componentId}`);
+          }
+        } else {
+          if (this.debug) {
+            console.warn(`Registry component not found in database: ${spec.name}`);
+          }
+        }
+      } catch (error) {
+        if (this.debug) {
+          console.error(`Failed to load registry component ${spec.name}:`, error);
+        }
+      }
+    } else {
+      // Embedded component - get from local registry
+      // Use the component's specified namespace if it has one, otherwise use parent's namespace
+      const componentNamespace = spec.namespace || namespace;
+      const component = this.registry.get(spec.name, componentNamespace);
+      if (component) {
+        resolved[spec.name] = component;
+        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;
+          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;
+        }
+      }
     }
 
-    // Process child components
+    // Process child components recursively
     const children = spec.dependencies || [];
     for (const child of children) {
-      this.resolveComponentHierarchy(child, resolved, namespace, visited);
+      await this.resolveComponentHierarchy(child, resolved, namespace, visited, contextUser);
+    }
+  }
+
+  /**
+   * Cleanup resolver resources
+   */
+  cleanup(): void {
+    // Remove our references when resolver is destroyed
+    if (this.registryService) {
+      // This would allow the registry service to clean up unused components
+      // Implementation would track which components this resolver referenced
+      if (this.debug) {
+        console.log(`Cleaning up resolver: ${this.resolverInstanceId}`);
+      }
     }
   }
 

package/src/registry/index.ts

@@ -5,4 +5,13 @@
 
 export { ComponentRegistry } from './component-registry';
 export { ComponentResolver, ResolvedComponents } from './component-resolver';
+export { ComponentRegistryService } from './component-registry-service';
+export { 
+  RegistryProvider,
+  RegistryComponentMetadata,
+  RegistryComponentResponse,
+  RegistrySearchFilters,
+  ComponentDependencyInfo,
+  DependencyTree
+} from './registry-provider';
 export { ComponentSpec } from '@memberjunction/interactive-component-types';

package/src/registry/registry-provider.ts

@@ -0,0 +1,119 @@
+/**
+ * @fileoverview Registry provider interfaces and implementations for component loading
+ * @module @memberjunction/react-runtime/registry
+ */
+
+import { ComponentSpec } from '@memberjunction/interactive-component-types';
+
+/**
+ * Metadata about a component from a registry
+ */
+export interface RegistryComponentMetadata {
+  name: string;
+  namespace: string;
+  version: string;
+  description: string;
+  title?: string;
+  type?: string;
+  status?: string;
+  properties?: ComponentSpec['properties'];
+  events?: ComponentSpec['events'];
+  libraries?: ComponentSpec['libraries'];
+  dependencies?: ComponentSpec['dependencies'];
+  sourceRegistryID?: string | null;
+  isLocal: boolean;
+  lastFetched?: Date;
+  cacheDuration?: number;
+}
+
+/**
+ * Response from fetching a component from a registry
+ */
+export interface RegistryComponentResponse {
+  metadata: RegistryComponentMetadata;
+  spec: ComponentSpec;
+}
+
+/**
+ * Interface for registry providers that can fetch components
+ */
+export interface RegistryProvider {
+  /**
+   * Name of the registry provider
+   */
+  name: string;
+  
+  /**
+   * Fetch a component from the registry
+   * @param name - Component name
+   * @param namespace - Component namespace
+   * @param version - Component version (optional, defaults to latest)
+   * @returns Component metadata and specification
+   */
+  fetchComponent(
+    name: string,
+    namespace: string,
+    version?: string
+  ): Promise<RegistryComponentResponse>;
+  
+  /**
+   * Check if a component exists in the registry
+   * @param name - Component name
+   * @param namespace - Component namespace
+   * @param version - Component version (optional)
+   * @returns True if component exists
+   */
+  componentExists?(
+    name: string,
+    namespace: string,
+    version?: string
+  ): Promise<boolean>;
+  
+  /**
+   * Get available versions of a component
+   * @param name - Component name
+   * @param namespace - Component namespace
+   * @returns Array of available versions
+   */
+  getComponentVersions?(
+    name: string,
+    namespace: string
+  ): Promise<string[]>;
+}
+
+/**
+ * Search filters for registry queries
+ */
+export interface RegistrySearchFilters {
+  type?: string;
+  status?: string;
+  namespace?: string;
+  query?: string;
+  limit?: number;
+  offset?: number;
+}
+
+/**
+ * Dependency information for a component
+ */
+export interface ComponentDependencyInfo {
+  name: string;
+  namespace: string;
+  version?: string;
+  isRequired: boolean;
+  location: 'embedded' | 'registry';
+  sourceRegistryID?: string | null;
+}
+
+/**
+ * Tree structure for dependency resolution
+ */
+export interface DependencyTree {
+  componentId: string;
+  name?: string;
+  namespace?: string;
+  version?: string;
+  dependencies?: DependencyTree[];
+  circular?: boolean;
+  totalCount?: number;
+}

package/src/runtime/component-hierarchy.ts

@@ -197,14 +197,22 @@ 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,
-        namespace,
+        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';