@memberjunction/react-runtime 2.93.0 → 2.95.0

package/src/registry/component-registry-service.ts

@@ -3,7 +3,7 @@
  * @module @memberjunction/react-runtime/registry
  */
 
-import { ComponentSpec } from '@memberjunction/interactive-component-types';
+import { ComponentSpec, ComponentObject } from '@memberjunction/interactive-component-types';
 import { ComponentCompiler } from '../compiler';
 import { RuntimeContext } from '../types';
 import { 
@@ -26,7 +26,7 @@ import {
  * Cached compiled component with metadata
  */
 interface CachedCompiledComponent {
-  component: Function;
+  component: ComponentObject;
   metadata: RegistryComponentResponse['metadata'];
   compiledAt: Date;
   lastUsed: Date;
@@ -48,13 +48,16 @@ export class ComponentRegistryService {
   private runtimeContext: RuntimeContext;
   private componentEngine = ComponentMetadataEngine.Instance;
   private registryProviders = new Map<string, RegistryProvider>();
+  private debug: boolean = false;
   
   private constructor(
     compiler: ComponentCompiler,
-    runtimeContext: RuntimeContext
+    runtimeContext: RuntimeContext,
+    debug: boolean = false
   ) {
     this.compiler = compiler;
     this.runtimeContext = runtimeContext;
+    this.debug = debug;
   }
   
   /**
@@ -62,10 +65,11 @@ export class ComponentRegistryService {
    */
   static getInstance(
     compiler: ComponentCompiler, 
-    context: RuntimeContext
+    context: RuntimeContext,
+    debug: boolean = false
   ): ComponentRegistryService {
     if (!ComponentRegistryService.instance) {
-      ComponentRegistryService.instance = new ComponentRegistryService(compiler, context);
+      ComponentRegistryService.instance = new ComponentRegistryService(compiler, context, debug);
     }
     return ComponentRegistryService.instance;
   }
@@ -85,7 +89,7 @@ export class ComponentRegistryService {
     componentId: string,
     referenceId?: string,
     contextUser?: UserInfo
-  ): Promise<Function> {
+  ): Promise<ComponentObject> {
     await this.initialize(contextUser);
     
     // Find component in metadata
@@ -107,12 +111,16 @@ export class ComponentRegistryService {
         this.addComponentReference(key, referenceId);
       }
       
-      console.log(`✅ Reusing compiled component from cache: ${key} (use count: ${cached.useCount})`);
+      if (this.debug) {
+        console.log(`✅ Reusing compiled component from cache: ${key} (use count: ${cached.useCount})`);
+      }
       return cached.component;
     }
     
     // Not in cache, need to load and compile
-    console.log(`🔄 Loading and compiling component: ${key}`);
+    if (this.debug) {
+      console.log(`🔄 Loading and compiling component: ${key}`);
+    }
     
     // Get the component specification
     const spec = await this.getComponentSpec(componentId, contextUser);
@@ -152,7 +160,7 @@ export class ComponentRegistryService {
     if (!compilationResult.component) {
       throw new Error(`Component compilation succeeded but no component returned`);
     }
-    const compiledComponent = compilationResult.component.component(this.runtimeContext);
+    const compiledComponent = compilationResult.component.factory(this.runtimeContext);
     this.compiledComponentCache.set(key, {
       component: compiledComponent,
       metadata,
@@ -194,7 +202,9 @@ export class ComponentRegistryService {
     // EXTERNAL: Check if we have a cached version
     if (component.Specification && component.LastSyncedAt) {
       // For now, always use cached version (no expiration)
-      console.log(`Using cached external component: ${component.Name} (synced: ${component.LastSyncedAt})`);
+      if (this.debug) {
+        console.log(`Using cached external component: ${component.Name} (synced: ${component.LastSyncedAt})`);
+      }
       return JSON.parse(component.Specification);
     }
     
@@ -245,7 +255,9 @@ export class ComponentRegistryService {
       headers['Authorization'] = `Bearer ${apiKey}`;
     }
     
-    console.log(`Fetching from external registry: ${url}`);
+    if (this.debug) {
+      console.log(`Fetching from external registry: ${url}`);
+    }
     
     const response = await fetch(url, { headers });
     
@@ -339,7 +351,9 @@ export class ComponentRegistryService {
       throw new Error(`Failed to save cached component: ${componentEntity.Name}\n${componentEntity.LatestResult.Message || componentEntity.LatestResult.Error || componentEntity.LatestResult.Errors?.join(',')}`);
     }
     
-    console.log(`Cached external component: ${componentEntity.Name} at ${componentEntity.LastSyncedAt}`);
+    if (this.debug) {
+      console.log(`Cached external component: ${componentEntity.Name} at ${componentEntity.LastSyncedAt}`);
+    }
     
     // Refresh metadata cache after saving
     await this.componentEngine.Config(true, contextUser);
@@ -496,7 +510,9 @@ export class ComponentRegistryService {
       const evictionThreshold = 5 * 60 * 1000; // 5 minutes
       
       if (timeSinceLastUse > evictionThreshold) {
-        console.log(`🗑️ Evicting unused component from cache: ${componentKey}`);
+        if (this.debug) {
+          console.log(`🗑️ Evicting unused component from cache: ${componentKey}`);
+        }
         this.compiledComponentCache.delete(componentKey);
       }
     }
@@ -539,10 +555,33 @@ export class ComponentRegistryService {
    * Clear all caches
    */
   clearCache(): void {
-    console.log('🧹 Clearing all component caches');
+    if (this.debug) {
+      console.log('🧹 Clearing all component caches');
+    }
     this.compiledComponentCache.clear();
     this.componentReferences.clear();
   }
+
+  /**
+   * Force clear all compiled components
+   * Used for Component Studio to ensure fresh loads
+   */
+  forceClearAll(): void {
+    this.compiledComponentCache.clear();
+    this.componentReferences.clear();
+    console.log('🧹 Component cache force cleared');
+  }
+
+  /**
+   * Reset the singleton instance
+   * Forces new instance creation on next access
+   */
+  static reset(): void {
+    if (ComponentRegistryService.instance) {
+      ComponentRegistryService.instance.forceClearAll();
+      ComponentRegistryService.instance = null;
+    }
+  }
   
   /**
    * Generate a cache key for a component

package/src/registry/component-registry.ts

@@ -9,6 +9,7 @@ import {
   ComponentMetadata, 
   RegistryConfig 
 } from '../types';
+import { ComponentObject } from '@memberjunction/interactive-component-types';
 import { resourceManager } from '../utilities/resource-manager';
 
 /**
@@ -49,7 +50,7 @@ export class ComponentRegistry {
   /**
    * Registers a compiled component
    * @param name - Component name
-   * @param component - Compiled component
+   * @param component - Compiled component object
    * @param namespace - Component namespace (default: 'Global')
    * @param version - Component version (default: 'v1')
    * @param tags - Optional tags for categorization
@@ -57,7 +58,7 @@ export class ComponentRegistry {
    */
   register(
     name: string,
-    component: any,
+    component: ComponentObject,
     namespace: string = 'Global',
     version: string = 'v1',
     tags?: string[]
@@ -98,9 +99,9 @@ export class ComponentRegistry {
    * @param name - Component name
    * @param namespace - Component namespace
    * @param version - Component version
-   * @returns The component if found, undefined otherwise
+   * @returns The component object if found, undefined otherwise
    */
-  get(name: string, namespace: string = 'Global', version?: string): any {
+  get(name: string, namespace: string = 'Global', version?: string): ComponentObject | undefined {
     const id = version 
       ? this.generateRegistryKey(name, namespace, version)
       : this.findLatestVersion(name, namespace);
@@ -171,10 +172,10 @@ export class ComponentRegistry {
    * Gets all components in a namespace and version as a map
    * @param namespace - Namespace to query (default: 'Global')
    * @param version - Version to query (default: 'v1')
-   * @returns Object mapping component names to components
+   * @returns Object mapping component names to component objects
    */
-  getAll(namespace: string = 'Global', version: string = 'v1'): Record<string, any> {
-    const components: Record<string, any> = {};
+  getAll(namespace: string = 'Global', version: string = 'v1'): Record<string, ComponentObject> {
+    const components: Record<string, ComponentObject> = {};
     
     for (const entry of this.registry.values()) {
       if (entry.metadata.namespace === namespace && entry.metadata.version === version) {
@@ -242,6 +243,34 @@ export class ComponentRegistry {
     this.registry.clear();
   }
 
+  /**
+   * Clear all components in a specific namespace
+   * @param namespace - Namespace to clear (default: 'Global')
+   * @returns Number of components removed
+   */
+  clearNamespace(namespace: string = 'Global'): number {
+    const toRemove: string[] = [];
+    for (const [key, entry] of this.registry) {
+      if (entry.metadata.namespace === namespace) {
+        toRemove.push(key);
+      }
+    }
+    for (const key of toRemove) {
+      this.registry.delete(key);
+    }
+    return toRemove.length;
+  }
+
+  /**
+   * Force clear all components and reset registry
+   * Used for development/testing scenarios
+   */
+  forceClear(): void {
+    this.stopCleanupTimer();
+    this.registry.clear();
+    console.log('🧹 Registry force cleared - all components removed');
+  }
+
   /**
    * Gets the current size of the registry
    * @returns Number of registered components

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);
     }
   }
 
@@ -64,17 +68,60 @@ export class ComponentResolver {
     namespace: string = 'Global',
     contextUser?: UserInfo
   ): Promise<ResolvedComponents> {
+    console.log(`🚀 [ComponentResolver] Starting component resolution for: ${spec.name}`);
+    console.log(`📋 [ComponentResolver] Dependencies to resolve:`, (spec.dependencies || []).map(d => ({
+      name: d.name,
+      location: d.location,
+      namespace: d.namespace
+    })));
+    
     const resolved: ResolvedComponents = {};
     
     // Initialize component engine if we have registry service
     if (this.registryService) {
+      console.log(`🔄 [ComponentResolver] Initializing component engine...`);
       await this.componentEngine.Config(false, contextUser);
+      console.log(`✅ [ComponentResolver] Component engine initialized with ${this.componentEngine.Components?.length || 0} components`);
     }
     
     // Resolve the component hierarchy
     await this.resolveComponentHierarchy(spec, resolved, namespace, new Set(), contextUser);
     
-    return resolved;
+    console.log(`📊 [ComponentResolver] Resolved components before unwrapping:`, Object.keys(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;
+          console.log(`✅ [ComponentResolver] Unwrapped component: ${name} (was object with .component)`);
+        } else {
+          // ComponentObject has a component property but it's not a function
+          console.error(`❌ [ComponentResolver] 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 if (typeof value === 'function') {
+        // Already a function - use as is
+        unwrapped[name] = value;
+        console.log(`✅ [ComponentResolver] Component already a function: ${name}`);
+      } else {
+        // Something else - could be undefined or an error
+        console.warn(`⚠️ [ComponentResolver] Component ${name} is not a function or wrapped component:`, typeof value, value);
+        unwrapped[name] = value; // Pass through for debugging
+      }
+    }
+    
+    console.log(`🎯 [ComponentResolver] Final resolved components:`, Object.keys(unwrapped).map(name => ({
+      name,
+      type: typeof unwrapped[name],
+      isUndefined: unwrapped[name] === undefined
+    })));
+    
+    return unwrapped;
   }
 
   /**
@@ -95,24 +142,70 @@ export class ComponentResolver {
     // Create a unique identifier for this component
     const componentId = `${spec.namespace || namespace}/${spec.name}@${spec.version || 'latest'}`;
     
+    // Check if already resolved (not just visited)
+    if (resolved[spec.name]) {
+      console.log(`⏭️ [ComponentResolver] Component already resolved: ${spec.name}`);
+      return;
+    }
+    
     // 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);
 
+    // *** CRITICAL: Process child components FIRST (depth-first, post-order) ***
+    console.log(`🔄 [ComponentResolver] Resolving dependencies for ${spec.name} BEFORE resolving itself`);
+    const children = spec.dependencies || [];
+    for (const child of children) {
+      console.log(`  ↳ [ComponentResolver] Resolving dependency: ${child.name} for parent ${spec.name}`);
+      await this.resolveComponentHierarchy(child, resolved, namespace, visited, contextUser);
+    }
+    if (children.length > 0) {
+      console.log(`✅ [ComponentResolver] All ${children.length} dependencies resolved for ${spec.name}, now resolving itself`);
+    }
+
+    // NOW resolve the current component (it can access its dependencies)
     // Handle based on location
     if (spec.location === 'registry' && this.registryService) {
       // Registry component - need to load from database or external source
+      console.log(`🔍 [ComponentResolver] Looking for registry component: ${spec.name} in namespace: ${spec.namespace || namespace}`);
+      
       try {
         // First, try to find the component in the metadata engine
+        const allComponents = this.componentEngine.Components || [];
+        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) {
+          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) {
+          console.log(`✅ [ComponentResolver] Found component in DB:`, {
+            ID: component.ID,
+            Name: component.Name,
+            Namespace: component.Namespace,
+            Version: component.Version
+          });
+          
           // Get compiled component from registry service
           const compiledComponent = await this.registryService.getCompiledComponent(
             component.ID,
@@ -120,38 +213,57 @@ export class ComponentResolver {
             contextUser
           );
           resolved[spec.name] = compiledComponent;
-          console.log(`📦 Resolved registry component: ${spec.name} from ${componentId}`);
+          console.log(`📦 [ComponentResolver] Successfully compiled and resolved: ${spec.name}, type: ${typeof compiledComponent}`);
+          
+          if (this.debug) {
+            console.log(`📦 Resolved registry component: ${spec.name} from ${componentId}`);
+          }
         } else {
-          console.warn(`Registry component not found in database: ${spec.name}`);
+          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}`);
+          }
         }
       } 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
       // Use the component's specified namespace if it has one, otherwise use parent's namespace
       const componentNamespace = spec.namespace || namespace;
+      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;
-        console.log(`📄 Resolved embedded component: ${spec.name} from namespace ${componentNamespace}`);
+        console.log(`✅ [ComponentResolver] Found embedded component: ${spec.name}, type: ${typeof 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
+        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;
-          console.log(`📄 Resolved embedded component: ${spec.name} from fallback namespace ${namespace}`);
+          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}`);
           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 recursively
-    const children = spec.dependencies || [];
-    for (const child of children) {
-      await this.resolveComponentHierarchy(child, resolved, namespace, visited, contextUser);
-    }
+    
+    // Child components have already been processed at the beginning of this method
+    // No need to process them again - we're using depth-first, post-order traversal
   }
 
   /**
@@ -162,7 +274,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

@@ -7,7 +7,8 @@
 import { 
   CompilationResult,
   CompileOptions,
-  RuntimeContext
+  RuntimeContext,
+  CompiledComponent
 } from '../types';
 import { ComponentCompiler } from '../compiler';
 import { ComponentRegistry } from '../registry';
@@ -94,31 +95,97 @@ export class ComponentHierarchyRegistrar {
     const errors: ComponentRegistrationError[] = [];
     const warnings: string[] = [];
 
-    // Register the root component
-    const rootResult = await this.registerSingleComponent(
-      rootSpec,
-      { styles, namespace, version, allowOverride, allLibraries: options.allLibraries }
-    );
-
-    if (rootResult.success) {
-      registeredComponents.push(rootSpec.name);
-    } else {
-      errors.push(rootResult.error!);
-      if (!continueOnError) {
-        return { success: false, registeredComponents, errors, warnings };
+    // PHASE 1: Compile all components first (but defer factory execution)
+    const compiledMap = new Map<string, CompiledComponent>();
+    const specMap = new Map<string, ComponentSpec>();
+    
+    // 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 {
+        const compileOptions: CompileOptions = {
+          componentName: spec.name,
+          componentCode: spec.code,
+          styles,
+          libraries: spec.libraries,
+          dependencies: spec.dependencies,
+          allLibraries: options.allLibraries
+        };
+        
+        const result = await this.compiler.compile(compileOptions);
+        if (result.success && result.component) {
+          compiledMap.set(spec.name, result.component);
+          specMap.set(spec.name, spec);
+          return { success: true };
+        } else {
+          return {
+            success: false,
+            error: {
+              componentName: spec.name,
+              error: result.error?.message || 'Unknown compilation error',
+              phase: 'compilation'
+            }
+          };
+        }
+      } catch (error) {
+        return {
+          success: false,
+          error: {
+            componentName: spec.name,
+            error: error instanceof Error ? error.message : String(error),
+            phase: 'compilation'
+          }
+        };
+      }
+    };
+    
+    // Compile all components in hierarchy
+    const compileQueue = [rootSpec];
+    const visited = new Set<string>();
+    
+    while (compileQueue.length > 0) {
+      const spec = compileQueue.shift()!;
+      if (visited.has(spec.name)) continue;
+      visited.add(spec.name);
+      
+      const result = await compileOnly(spec);
+      if (!result.success) {
+        errors.push(result.error!);
+        if (!continueOnError) {
+          return { success: false, registeredComponents, errors, warnings };
+        }
+      }
+      
+      if (spec.dependencies) {
+        compileQueue.push(...spec.dependencies);
       }
     }
-
-    // Register child components recursively
-    const childComponents = rootSpec.dependencies || [];
-    if (childComponents.length > 0) {
-      const childResult = await this.registerChildComponents(
-        childComponents,
-        { styles, namespace, version, continueOnError, allowOverride, allLibraries: options.allLibraries },
-        registeredComponents,
-        errors,
-        warnings
+    
+    // PHASE 2: Execute all factories with components available
+    for (const [name, compiled] of compiledMap) {
+      const spec = specMap.get(name)!;
+      
+      // Build components object from all registered components
+      const components: Record<string, any> = {};
+      for (const [depName, depCompiled] of compiledMap) {
+        // Call factory to get ComponentObject, then extract React component
+        const depObject = depCompiled.factory(this.runtimeContext, styles);
+        components[depName] = depObject.component;
+      }
+      
+      // Now call factory with components available
+      const componentObject = compiled.factory(this.runtimeContext, styles, components);
+      
+      // Register in registry
+      this.registry.register(
+        spec.name,
+        componentObject,
+        spec.namespace || namespace,
+        version
       );
+      
+      registeredComponents.push(spec.name);
     }
 
     return {
@@ -197,13 +264,20 @@ export class ComponentHierarchyRegistrar {
         };
       }
 
-      // Create component factory
-      const componentFactory = compilationResult.component!.component(this.runtimeContext, styles);
+      // 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
+      console.log(`🏭 Calling factory for ${spec.name} with runtime context:`, {
+        hasReact: !!this.runtimeContext.React,
+        hasReactDOM: !!this.runtimeContext.ReactDOM,
+        libraryKeys: Object.keys(this.runtimeContext.libraries || {})
+      });
+      const componentObject = compilationResult.component!.factory(this.runtimeContext, styles);
 
-      // Register the component
+      // Register the full ComponentObject (not just the React component)
       this.registry.register(
         spec.name,
-        componentFactory.component,
+        componentObject,
         spec.namespace || namespace,
         version
       );