@memberjunction/react-runtime 2.99.0 → 2.100.0

package/src/registry/component-resolver.ts

@@ -68,9 +68,16 @@ export class ComponentResolver {
     namespace: string = 'Global',
     contextUser?: UserInfo
   ): Promise<ResolvedComponents> {
-    if (this.debug) {
-      console.log(`🚀 [ComponentResolver] Starting component resolution for: ${spec.name}`);
-    }
+    console.log(`🚀 [ComponentResolver] Starting component resolution for: ${spec.name}`);
+    console.log(`📋 [ComponentResolver] Root component spec:`, {
+      name: spec.name,
+      location: spec.location,
+      registry: spec.registry,
+      namespace: spec.namespace,
+      hasCode: !!spec.code,
+      hasDependencies: !!(spec.dependencies && spec.dependencies.length > 0)
+    });
+    
     if (this.debug) {
       console.log(`📋 [ComponentResolver] Dependencies to resolve:`, (spec.dependencies || []).map(d => ({
         name: d.name,
@@ -93,7 +100,15 @@ export class ComponentResolver {
     }
     
     // Resolve the component hierarchy
+    console.log(`🔄 [ComponentResolver] About to call resolveComponentHierarchy for root: ${spec.name}`);
     await this.resolveComponentHierarchy(spec, resolved, namespace, new Set(), contextUser);
+    console.log(`✅ [ComponentResolver] Returned from resolveComponentHierarchy`);
+    console.log(`🔍 [ComponentResolver] Looking for root component '${spec.name}' in resolved:`, !!resolved[spec.name]);
+    
+    if (!resolved[spec.name]) {
+      console.error(`❌ [ComponentResolver] Root component '${spec.name}' was NOT added to resolved map!`);
+      console.log(`📦 [ComponentResolver] What IS in resolved map:`, Object.keys(resolved));
+    }
     
     if (this.debug) {
       console.log(`📊 [ComponentResolver] Resolved components before unwrapping:`, Object.keys(resolved));
@@ -196,62 +211,96 @@ export class ComponentResolver {
       // Registry component - need to load from database or external source
       if (this.debug) {
         console.log(`🔍 [ComponentResolver] Looking for registry component: ${spec.name} in namespace: ${spec.namespace || namespace}`);
+        if (spec.registry) {
+          console.log(`  📍 [ComponentResolver] External registry specified: ${spec.registry}`);
+        } else {
+          console.log(`  📍 [ComponentResolver] Local registry (no registry field specified)`);
+        }
       }
       
       try {
-        // First, try to find the component in the metadata engine
-        const allComponents = this.componentEngine.Components || [];
-        if (this.debug) {
-          console.log(`📊 [ComponentResolver] Total components in engine: ${allComponents.length}`);
-        }
-        
-        // Log all matching names to see duplicates
-        const matchingNames = allComponents.filter((c: any) => c.Name === spec.name);
-        if (matchingNames.length > 0 && this.debug) {
-          console.log(`🔎 [ComponentResolver] Found ${matchingNames.length} components with name "${spec.name}":`, 
-            matchingNames.map((c: any) => ({
-              ID: c.ID,
-              Name: c.Name,
-              Namespace: c.Namespace,
-              Version: c.Version,
-              Status: c.Status
-            }))
-          );
-        }
-        
-        const component = this.componentEngine.Components?.find(
-          (c: any) => c.Name === spec.name && 
-               c.Namespace === (spec.namespace || namespace)
-        );
-        
-        if (component) {
+        // If spec.registry is populated, this is an external registry component
+        // If spec.registry is blank/undefined, this is a local registry component
+        if (spec.registry) {
+          // EXTERNAL REGISTRY: Need to fetch from external registry via GraphQL
           if (this.debug) {
-            console.log(`✅ [ComponentResolver] Found component in DB:`, {
-              ID: component.ID,
-              Name: component.Name,
-              Namespace: component.Namespace,
-              Version: component.Version
-            });
+            console.log(`🌐 [ComponentResolver] Fetching from external registry: ${spec.registry}`);
           }
           
-          // Get compiled component from registry service
-          const compiledComponent = await this.registryService.getCompiledComponent(
-            component.ID,
+          // Get compiled component from registry service (which will handle the external fetch)
+          const compiledComponent = await this.registryService.getCompiledComponentFromRegistry(
+            spec.registry,  // Registry name
+            spec.namespace || namespace,
+            spec.name,
+            spec.version || 'latest',
             this.resolverInstanceId,
             contextUser
           );
-          resolved[spec.name] = compiledComponent;
+          
+          if (compiledComponent) {
+            resolved[spec.name] = compiledComponent;
+            if (this.debug) {
+              console.log(`✅ [ComponentResolver] Successfully fetched and compiled from external registry: ${spec.name}`);
+            }
+          } else {
+            console.error(`❌ [ComponentResolver] Failed to fetch from external registry: ${spec.name} from ${spec.registry}`);
+          }
+        } else {
+          // LOCAL REGISTRY: Get from local database
           if (this.debug) {
-            console.log(`📦 [ComponentResolver] Successfully compiled and resolved: ${spec.name}, type: ${typeof compiledComponent}`);
+            console.log(`💾 [ComponentResolver] Looking for locally registered component`);
           }
           
+          // First, try to find the component in the metadata engine
+          const allComponents = this.componentEngine.Components || [];
           if (this.debug) {
-            console.log(`📦 Resolved registry component: ${spec.name} from ${componentId}`);
+            console.log(`📊 [ComponentResolver] Total components in engine: ${allComponents.length}`);
           }
-        } else {
-          console.error(`❌❌❌❌❌ [ComponentResolver] Registry component NOT found in database: ${spec.name} with namespace: ${spec.namespace || namespace} ❌❌❌❌`);
-          if (this.debug) {
-            console.warn(`Registry component not found in database: ${spec.name}`);
+          
+          // Log all matching names to see duplicates
+          const matchingNames = allComponents.filter((c: any) => c.Name === spec.name);
+          if (matchingNames.length > 0 && this.debug) {
+            console.log(`🔎 [ComponentResolver] Found ${matchingNames.length} components with name "${spec.name}":`, 
+              matchingNames.map((c: any) => ({
+                ID: c.ID,
+                Name: c.Name,
+                Namespace: c.Namespace,
+                Version: c.Version,
+                Status: c.Status
+              }))
+            );
+          }
+          
+          const component = this.componentEngine.Components?.find(
+            (c: any) => c.Name === spec.name && 
+                 c.Namespace === (spec.namespace || namespace)
+          );
+          
+          if (component) {
+            if (this.debug) {
+              console.log(`✅ [ComponentResolver] Found component in local DB:`, {
+                ID: component.ID,
+                Name: component.Name,
+                Namespace: component.Namespace,
+                Version: component.Version
+              });
+            }
+            
+            // Get compiled component from registry service (local compilation)
+            const compiledComponent = await this.registryService.getCompiledComponent(
+              component.ID,
+              this.resolverInstanceId,
+              contextUser
+            );
+            resolved[spec.name] = compiledComponent;
+            if (this.debug) {
+              console.log(`📦 [ComponentResolver] Successfully compiled and resolved local component: ${spec.name}, type: ${typeof compiledComponent}`);
+            }
+          } else {
+            console.error(`❌ [ComponentResolver] Local registry component NOT found in database: ${spec.name} with namespace: ${spec.namespace || namespace}`);
+            if (this.debug) {
+              console.warn(`Local registry component not found in database: ${spec.name}`);
+            }
           }
         }
       } catch (error) {
@@ -260,44 +309,87 @@ export class ComponentResolver {
         }
       }
     } else {
-      // Embedded component - get from local registry
+      // Embedded/Local component
       // Use the component's specified namespace if it has one, otherwise use parent's namespace
       const componentNamespace = spec.namespace || namespace;
-      if (this.debug) {
-        console.log(`🔍 [ComponentResolver] Looking for embedded component: ${spec.name} in namespace: ${componentNamespace}`);
-      }
       
-      const component = this.registry.get(spec.name, componentNamespace);
-      if (component) {
-        resolved[spec.name] = component;
+      // First check if component has inline code that needs compilation
+      if (spec.code && this.compiler) {
         if (this.debug) {
-          console.log(`✅ [ComponentResolver] Found embedded component: ${spec.name}, type: ${typeof component}`);
+          console.log(`🔨 [ComponentResolver] Component ${spec.name} has inline code, compiling...`);
         }
-        if (this.debug) {
-          console.log(`📄 Resolved embedded component: ${spec.name} from namespace ${componentNamespace}, type:`, typeof component);
+        
+        try {
+          // Compile the component with its code
+          const compilationResult = await this.compiler.compile({
+            componentName: spec.name,
+            componentCode: spec.code,
+            libraries: spec.libraries,
+            dependencies: spec.dependencies,
+            allLibraries: [] // TODO: Get from ComponentMetadataEngine if needed
+          });
+          
+          if (compilationResult.success && compilationResult.component) {
+            // Get the component object from the factory (only if we have runtimeContext)
+            if (!this.runtimeContext) {
+              console.error(`❌ [ComponentResolver] Cannot compile without runtime context`);
+              return;
+            }
+            const componentObject = compilationResult.component.factory(this.runtimeContext);
+            
+            // Register it in the local registry for future use
+            this.registry.register(spec.name, componentObject, componentNamespace, spec.version || 'latest');
+            
+            // Add to resolved
+            resolved[spec.name] = componentObject;
+            
+            if (this.debug) {
+              console.log(`✅ [ComponentResolver] Successfully compiled and registered inline component: ${spec.name}`);
+            }
+          } else {
+            console.error(`❌ [ComponentResolver] Failed to compile inline component ${spec.name}:`, compilationResult.error);
+          }
+        } catch (error) {
+          console.error(`❌ [ComponentResolver] Error compiling inline component ${spec.name}:`, error);
         }
       } else {
-        // If not found with specified namespace, try the parent namespace as fallback
+        // No inline code, try to get from local registry
         if (this.debug) {
-          console.log(`⚠️ [ComponentResolver] Not found in namespace ${componentNamespace}, trying fallback namespace: ${namespace}`);
+          console.log(`🔍 [ComponentResolver] Looking for embedded component: ${spec.name} in namespace: ${componentNamespace}`);
         }
-        const fallbackComponent = this.registry.get(spec.name, namespace);
-        if (fallbackComponent) {
-          resolved[spec.name] = fallbackComponent;
+        
+        const component = this.registry.get(spec.name, componentNamespace);
+        if (component) {
+          resolved[spec.name] = component;
           if (this.debug) {
-            console.log(`✅ [ComponentResolver] Found embedded component in fallback namespace: ${spec.name}, type: ${typeof fallbackComponent}`);
+            console.log(`✅ [ComponentResolver] Found embedded component: ${spec.name}, type: ${typeof component}`);
           }
           if (this.debug) {
-            console.log(`📄 Resolved embedded component: ${spec.name} from fallback namespace ${namespace}, type:`, typeof fallbackComponent);
+            console.log(`📄 Resolved embedded component: ${spec.name} from namespace ${componentNamespace}, type:`, typeof component);
           }
         } else {
-          // Component not found - this might cause issues later
-          console.error(`❌ [ComponentResolver] Could not resolve embedded component: ${spec.name} in namespace ${componentNamespace} or ${namespace}`);
+          // If not found with specified namespace, try the parent namespace as fallback
           if (this.debug) {
-            console.warn(`⚠️ Could not resolve embedded component: ${spec.name} in namespace ${componentNamespace} or ${namespace}`);
+            console.log(`⚠️ [ComponentResolver] Not found in namespace ${componentNamespace}, trying fallback namespace: ${namespace}`);
+          }
+          const fallbackComponent = this.registry.get(spec.name, namespace);
+          if (fallbackComponent) {
+            resolved[spec.name] = fallbackComponent;
+            if (this.debug) {
+              console.log(`✅ [ComponentResolver] Found embedded component in fallback namespace: ${spec.name}, type: ${typeof 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.error(`❌ [ComponentResolver] Could not resolve embedded component: ${spec.name} in namespace ${componentNamespace} or ${namespace}`);
+            if (this.debug) {
+              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;
           }
-          // Store undefined explicitly so we know it failed to resolve
-          resolved[spec.name] = undefined;
         }
       }
     }

package/src/registry/index.ts

@@ -5,7 +5,7 @@
 
 export { ComponentRegistry } from './component-registry';
 export { ComponentResolver, ResolvedComponents } from './component-resolver';
-export { ComponentRegistryService } from './component-registry-service';
+export { ComponentRegistryService, IComponentRegistryClient } from './component-registry-service';
 export { 
   RegistryProvider,
   RegistryComponentMetadata,

package/src/runtime/component-hierarchy.ts

@@ -14,7 +14,7 @@ import { ComponentCompiler } from '../compiler';
 import { ComponentRegistry } from '../registry';
 
 import { ComponentSpec, ComponentStyles } from '@memberjunction/interactive-component-types';
-import { UserInfo } from '@memberjunction/core';
+import { UserInfo, Metadata } from '@memberjunction/core';
 import { ComponentLibraryEntity } from '@memberjunction/core-entities';
 
 /**
@@ -25,6 +25,8 @@ export interface HierarchyRegistrationResult {
   registeredComponents: string[];
   errors: ComponentRegistrationError[];
   warnings: string[];
+  /** The fully resolved component specification with all dependencies and libraries */
+  resolvedSpec?: ComponentSpec;
 }
 
 /**
@@ -55,6 +57,8 @@ export interface HierarchyRegistrationOptions {
    */
   allLibraries: ComponentLibraryEntity[];
   debug?: boolean;
+  /** Optional user context for fetching from external registries */
+  contextUser?: UserInfo;
 }
 
 /**
@@ -66,6 +70,44 @@ export class ComponentHierarchyRegistrar {
     private registry: ComponentRegistry,
     private runtimeContext: RuntimeContext
   ) {}
+  
+  /**
+   * Fetches a component specification from an external registry
+   */
+  private async fetchExternalComponent(
+    spec: ComponentSpec,
+    contextUser?: UserInfo
+  ): Promise<ComponentSpec | null> {
+    try {
+      const provider = Metadata?.Provider;
+      if (!provider || !(provider as any).ExecuteGQL) {
+        console.warn('⚠️ [ComponentHierarchyRegistrar] No GraphQL provider available for external registry fetch');
+        return null;
+      }
+      
+      // Dynamically import the GraphQL client to avoid circular dependencies
+      const { GraphQLComponentRegistryClient } = await import('@memberjunction/graphql-dataprovider');
+      const graphQLClient = new GraphQLComponentRegistryClient(provider as any);
+      
+      const fullSpec = await graphQLClient.GetRegistryComponent({
+        registryName: spec.registry!,
+        namespace: spec.namespace || 'Global',
+        name: spec.name,
+        version: spec.version || 'latest'
+      });
+      
+      if (fullSpec && fullSpec.code) {
+        console.log(`✅ [ComponentHierarchyRegistrar] Fetched external component ${spec.name} with code (${fullSpec.code.length} chars)`);
+        return fullSpec;
+      } else {
+        console.warn(`⚠️ [ComponentHierarchyRegistrar] Failed to fetch external component ${spec.name} or no code`);
+        return null;
+      }
+    } catch (error) {
+      console.error(`❌ [ComponentHierarchyRegistrar] Error fetching external component ${spec.name}:`, error);
+      return null;
+    }
+  }
 
   /**
    * Registers a complete component hierarchy from a root specification
@@ -77,6 +119,12 @@ export class ComponentHierarchyRegistrar {
     rootSpec: ComponentSpec,
     options: HierarchyRegistrationOptions
   ): Promise<HierarchyRegistrationResult> {
+    // If this is an external registry component without code, fetch it first
+    let resolvedRootSpec = rootSpec;
+    if (rootSpec.location === 'registry' && rootSpec.registry && !rootSpec.code) {
+      console.log(`🌐 [ComponentHierarchyRegistrar] Fetching external registry component: ${rootSpec.registry}/${rootSpec.name}`);
+      resolvedRootSpec = await this.fetchExternalComponent(rootSpec, options.contextUser) || rootSpec;
+    }
     const {
       styles,
       namespace = 'Global',
@@ -86,10 +134,10 @@ export class ComponentHierarchyRegistrar {
     } = options;
 
     console.log('🌳 ComponentHierarchyRegistrar.registerHierarchy:', {
-      rootComponent: rootSpec.name,
-      hasLibraries: !!(rootSpec.libraries && rootSpec.libraries.length > 0),
-      libraryCount: rootSpec.libraries?.length || 0,
-      libraries: rootSpec.libraries?.map(l => l.name)
+      rootComponent: resolvedRootSpec.name,
+      hasLibraries: !!(resolvedRootSpec.libraries && resolvedRootSpec.libraries.length > 0),
+      libraryCount: resolvedRootSpec.libraries?.length || 0,
+      libraries: resolvedRootSpec.libraries?.map(l => l.name)
     });
 
     const registeredComponents: string[] = [];
@@ -99,17 +147,26 @@ export class ComponentHierarchyRegistrar {
     // PHASE 1: Compile all components first (but defer factory execution)
     const compiledMap = new Map<string, CompiledComponent>();
     const specMap = new Map<string, ComponentSpec>();
+    const allLoadedLibraries = new Map<string, any>(); // Track all loaded libraries
     
     // Helper to compile a component without calling its factory
     const compileOnly = async (spec: ComponentSpec): Promise<{ success: boolean; error?: ComponentRegistrationError }> => {
       if (!spec.code) return { success: true };
       
       try {
+        // Filter out invalid library entries before compilation
+        const validLibraries = spec.libraries?.filter(lib => {
+          if (!lib || typeof lib !== 'object') return false;
+          if (!lib.name || lib.name === 'unknown' || lib.name === 'null' || lib.name === 'undefined') return false;
+          if (!lib.globalVariable || lib.globalVariable === 'undefined' || lib.globalVariable === 'null') return false;
+          return true;
+        });
+        
         const compileOptions: CompileOptions = {
           componentName: spec.name,
           componentCode: spec.code,
           styles,
-          libraries: spec.libraries,
+          libraries: validLibraries,
           dependencies: spec.dependencies,
           allLibraries: options.allLibraries
         };
@@ -118,6 +175,17 @@ export class ComponentHierarchyRegistrar {
         if (result.success && result.component) {
           compiledMap.set(spec.name, result.component);
           specMap.set(spec.name, spec);
+          
+          // Extract and accumulate loaded libraries from the compilation
+          if (result.loadedLibraries) {
+            result.loadedLibraries.forEach((value, key) => {
+              if (!allLoadedLibraries.has(key)) {
+                allLoadedLibraries.set(key, value);
+                console.log(`📚 [registerHierarchy] Added library ${key} to accumulated libraries`);
+              }
+            });
+          }
+          
           return { success: true };
         } else {
           return {
@@ -142,19 +210,30 @@ export class ComponentHierarchyRegistrar {
     };
     
     // Compile all components in hierarchy
-    const compileQueue = [rootSpec];
+    const compileQueue = [resolvedRootSpec];
     const visited = new Set<string>();
     
     while (compileQueue.length > 0) {
-      const spec = compileQueue.shift()!;
+      let spec = compileQueue.shift()!;
       if (visited.has(spec.name)) continue;
       visited.add(spec.name);
       
+      // If this is an external registry component without code, fetch it first
+      if (spec.location === 'registry' && spec.registry && !spec.code) {
+        const fetched = await this.fetchExternalComponent(spec, options.contextUser);
+        if (fetched) {
+          spec = fetched;
+        } else {
+          console.warn(`⚠️ [ComponentHierarchyRegistrar] Could not fetch external component ${spec.name}, skipping`);
+          continue;
+        }
+      }
+      
       const result = await compileOnly(spec);
       if (!result.success) {
         errors.push(result.error!);
         if (!continueOnError) {
-          return { success: false, registeredComponents, errors, warnings };
+          return { success: false, registeredComponents, errors, warnings, resolvedSpec: resolvedRootSpec };
         }
       }
       
@@ -163,6 +242,17 @@ export class ComponentHierarchyRegistrar {
       }
     }
     
+    // Add all accumulated libraries to runtime context
+    if (allLoadedLibraries.size > 0) {
+      if (!this.runtimeContext.libraries) {
+        this.runtimeContext.libraries = {};
+      }
+      allLoadedLibraries.forEach((value, key) => {
+        this.runtimeContext.libraries![key] = value;
+        console.log(`✅ [registerHierarchy] Added ${key} to runtime context libraries`);
+      });
+    }
+    
     // PHASE 2: Execute all factories with components available
     for (const [name, compiled] of compiledMap) {
       const spec = specMap.get(name)!;
@@ -193,7 +283,8 @@ export class ComponentHierarchyRegistrar {
       success: errors.length === 0,
       registeredComponents,
       errors,
-      warnings
+      warnings,
+      resolvedSpec: resolvedRootSpec
     };
   }
 
@@ -237,19 +328,28 @@ export class ComponentHierarchyRegistrar {
         };
       }
 
+      // Filter out invalid library entries before compilation
+      const validLibraries = spec.libraries?.filter(lib => {
+        if (!lib || typeof lib !== 'object') return false;
+        if (!lib.name || lib.name === 'unknown' || lib.name === 'null' || lib.name === 'undefined') return false;
+        if (!lib.globalVariable || lib.globalVariable === 'undefined' || lib.globalVariable === 'null') return false;
+        return true;
+      });
+      
       // Compile the component
       const compileOptions: CompileOptions = {
         componentName: spec.name,
         componentCode: spec.code,
         styles,
-        libraries: spec.libraries, // Pass along library dependencies from the spec
+        libraries: validLibraries, // Pass along filtered library dependencies
         dependencies: spec.dependencies, // Pass along child component dependencies
         allLibraries: options.allLibraries
       };
 
       console.log(`🔧 Compiling component ${spec.name} with libraries:`, {
-        libraryCount: spec.libraries?.length || 0,
-        libraries: spec.libraries?.map(l => ({ name: l.name, globalVariable: l.globalVariable }))
+        originalCount: spec.libraries?.length || 0,
+        filteredCount: validLibraries?.length || 0,
+        validLibraries: validLibraries?.map(l => ({ name: l.name, globalVariable: l.globalVariable }))
       });
 
       const compilationResult = await this.compiler.compile(compileOptions);
@@ -265,6 +365,17 @@ export class ComponentHierarchyRegistrar {
         };
       }
 
+      // Add loaded libraries to runtime context
+      if (compilationResult.loadedLibraries && compilationResult.loadedLibraries.size > 0) {
+        if (!this.runtimeContext.libraries) {
+          this.runtimeContext.libraries = {};
+        }
+        compilationResult.loadedLibraries.forEach((value, key) => {
+          this.runtimeContext.libraries![key] = value;
+          console.log(`✅ [registerSingleComponent] Added ${key} to runtime context libraries`);
+        });
+      }
+
       // Call the factory to create the ComponentObject
       // IMPORTANT: We don't pass components here because child components may not be registered yet
       // Components are resolved later when the component is actually rendered

package/src/types/index.ts

@@ -175,6 +175,8 @@ export interface CompilationResult {
   duration: number;
   /** Size of compiled code in bytes */
   size?: number;
+  /** Libraries loaded during compilation */
+  loadedLibraries?: Map<string, any>;
 }
 
 /**