@memberjunction/react-runtime 2.94.0 → 2.96.0

package/src/registry/component-resolver.ts

@@ -68,16 +68,37 @@ export class ComponentResolver {
     namespace: string = 'Global',
     contextUser?: UserInfo
   ): Promise<ResolvedComponents> {
+    if (this.debug) {
+      console.log(`🚀 [ComponentResolver] Starting component resolution for: ${spec.name}`);
+    }
+    if (this.debug) {
+      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) {
+      if (this.debug) {
+        console.log(`🔄 [ComponentResolver] Initializing component engine...`);
+      }
       await this.componentEngine.Config(false, contextUser);
+      if (this.debug) {
+        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);
     
+    if (this.debug) {
+      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
@@ -87,17 +108,35 @@ export class ComponentResolver {
         if (typeof value.component === 'function') {
           // This is a wrapped component - extract the actual React component function
           unwrapped[name] = value.component;
+          if (this.debug) {
+            console.log(`✅ [ComponentResolver] Unwrapped component: ${name} (was object with .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);
+          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 {
-        // This is already a plain component function or something else
+      } else if (typeof value === 'function') {
+        // Already a function - use as is
         unwrapped[name] = value;
+        if (this.debug) {
+          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
       }
     }
     
+    if (this.debug) {
+      console.log(`🎯 [ComponentResolver] Final resolved components:`, Object.keys(unwrapped).map(name => ({
+        name,
+        type: typeof unwrapped[name],
+        isUndefined: unwrapped[name] === undefined
+      })));
+    }
+    
     return unwrapped;
   }
 
@@ -119,6 +158,14 @@ 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]) {
+      if (this.debug) {
+        console.log(`⏭️ [ComponentResolver] Component already resolved: ${spec.name}`);
+      }
+      return;
+    }
+    
     // Prevent circular dependencies
     if (visited.has(componentId)) {
       if (this.debug) {
@@ -128,17 +175,65 @@ export class ComponentResolver {
     }
     visited.add(componentId);
 
+    // *** CRITICAL: Process child components FIRST (depth-first, post-order) ***
+    if (this.debug) {
+      console.log(`🔄 [ComponentResolver] Resolving dependencies for ${spec.name} BEFORE resolving itself`);
+    }
+    const children = spec.dependencies || [];
+    for (const child of children) {
+      if (this.debug) {
+        console.log(`  ↳ [ComponentResolver] Resolving dependency: ${child.name} for parent ${spec.name}`);
+      }
+      await this.resolveComponentHierarchy(child, resolved, namespace, visited, contextUser);
+    }
+    if (children.length > 0 && this.debug) {
+      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
+      if (this.debug) {
+        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 || [];
+        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 (this.debug) {
+            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,
@@ -146,10 +241,15 @@ export class ComponentResolver {
             contextUser
           );
           resolved[spec.name] = compiledComponent;
+          if (this.debug) {
+            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.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}`);
           }
@@ -163,34 +263,47 @@ export class ComponentResolver {
       // 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;
+      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;
+        if (this.debug) {
+          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
+        if (this.debug) {
+          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.warn(`⚠️ Could not resolve embedded component: ${spec.name} in namespace ${componentNamespace} or ${namespace}`);
+          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;
         }
       }
     }
-
-    // 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
   }
 
   /**

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 {
@@ -198,15 +265,14 @@ export class ComponentHierarchyRegistrar {
       }
 
       // 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
+      // 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 full ComponentObject (not just the React component)
       this.registry.register(

package/src/types/index.ts

@@ -13,7 +13,7 @@ import { ComponentLibraryDependency, ComponentStyles, ComponentObject } from '@m
  */
 export interface CompiledComponent {
   /** Factory function that creates a ComponentObject when called with context */
-  factory: (context: RuntimeContext, styles?: ComponentStyles) => ComponentObject;
+  factory: (context: RuntimeContext, styles?: ComponentStyles, components?: Record<string, any>) => ComponentObject;
   /** Unique identifier for the component */
   id: string;
   /** Original component name */

package/src/utilities/core-libraries.ts

@@ -1,61 +1,75 @@
 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.
+ * Get the React CDN URL based on debug mode
  */
-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
-  }
-];
+function getReactUrl(debug: boolean = false): string {
+  return debug 
+    ? 'https://unpkg.com/react@18.2.0/umd/react.development.js'
+    : 'https://unpkg.com/react@18.2.0/umd/react.production.min.js';
+}
+
+/**
+ * Get the ReactDOM CDN URL based on debug mode
+ */
+function getReactDOMUrl(debug: boolean = false): string {
+  return debug
+    ? 'https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js'
+    : 'https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js';
+}
 
 /**
  * Get the core runtime libraries configuration
+ * @param debug Whether to use development builds for better error messages
  */
-export function getCoreRuntimeLibraries(): ExternalLibraryConfig[] {
-  return CORE_RUNTIME_LIBRARIES;
+export function getCoreRuntimeLibraries(debug: boolean = false): ExternalLibraryConfig[] {
+  return [
+    {
+      id: 'react',
+      name: 'react',
+      displayName: 'React',
+      category: 'runtime',
+      globalVariable: 'React',
+      version: '18.2.0',
+      cdnUrl: getReactUrl(debug),
+      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: getReactDOMUrl(debug),
+      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
+    }
+  ];
 }
 
 /**
  * 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);
+  const coreLibraries = getCoreRuntimeLibraries();
+  return coreLibraries.some((lib: ExternalLibraryConfig) => lib.id === libraryId);
 }

package/src/utilities/library-dependency-resolver.ts

@@ -420,22 +420,43 @@ export class LibraryDependencyResolver {
     const errors: string[] = [];
     const warnings: string[] = [];
 
+    // Filter out null, undefined, and non-string values from requestedLibs
+    const validRequestedLibs = requestedLibs.filter(lib => {
+      if (!lib || typeof lib !== 'string') {
+        const warning = `Invalid library name: ${lib} (type: ${typeof lib})`;
+        warnings.push(warning);
+        if (this.debug || options?.debug) {
+          console.warn(`⚠️ ${warning}`);
+        }
+        return false;
+      }
+      return true;
+    });
+
     if (this.debug || options?.debug) {
-      console.log('🔍 Getting load order for:', requestedLibs);
+      console.log('🔍 Getting load order for requested libraries:');
+      console.log('  📝 Requested (raw):', requestedLibs);
+      console.log('  📝 Requested (valid):', validRequestedLibs);
+      console.log('  📚 Total available libraries:', allLibs.length);
     }
 
-    // Build a map for quick lookup
+    // Build a map for quick lookup (case-insensitive)
     const libMap = new Map<string, ComponentLibraryEntity[]>();
     for (const lib of allLibs) {
-      if (!libMap.has(lib.Name)) {
-        libMap.set(lib.Name, []);
+      if (!lib?.Name) {
+        warnings.push(`Library with missing name found in available libraries`);
+        continue;
       }
-      libMap.get(lib.Name)!.push(lib);
+      const key = lib.Name.toLowerCase();
+      if (!libMap.has(key)) {
+        libMap.set(key, []);
+      }
+      libMap.get(key)!.push(lib);
     }
 
     // Collect all libraries needed (requested + their dependencies)
     const needed = new Set<string>();
-    const toProcess = [...requestedLibs];
+    const toProcess = [...validRequestedLibs];
     const processed = new Set<string>();
     const versionRequirements = new Map<string, VersionRequirement[]>();
     let depth = 0;
@@ -443,14 +464,28 @@ export class LibraryDependencyResolver {
 
     while (toProcess.length > 0 && depth < maxDepth) {
       const current = toProcess.shift()!;
+      
+      // Extra safety check for null/undefined
+      if (!current || typeof current !== 'string') {
+        const warning = `Unexpected invalid library name during processing: ${current}`;
+        warnings.push(warning);
+        if (this.debug || options?.debug) {
+          console.warn(`⚠️ ${warning}`);
+        }
+        continue;
+      }
+      
       if (processed.has(current)) continue;
 
       processed.add(current);
       needed.add(current);
 
-      // Find the library
-      const libVersions = libMap.get(current);
+      // Find the library (case-insensitive lookup)
+      const libVersions = libMap.get(current.toLowerCase());
       if (!libVersions || libVersions.length === 0) {
+        if (this.debug || options?.debug) {
+          console.log(`    ❌ Library '${current}' not found in available libraries`);
+        }
         errors.push(`Library '${current}' not found`);
         continue;
       }
@@ -458,6 +493,10 @@ export class LibraryDependencyResolver {
       // For now, use the first version found (should be resolved properly)
       const lib = libVersions[0];
       const deps = this.parseDependencies(lib.Dependencies);
+      
+      if ((this.debug || options?.debug) && deps.size > 0) {
+        console.log(`    📌 ${current} requires:`, Array.from(deps.entries()));
+      }
 
       // Process dependencies
       for (const [depName, depVersion] of deps) {
@@ -489,7 +528,7 @@ export class LibraryDependencyResolver {
     const resolvedLibraries: ComponentLibraryEntity[] = [];
     for (const libName of needed) {
       const requirements = versionRequirements.get(libName) || [];
-      const versions = libMap.get(libName) || [];
+      const versions = libMap.get(libName.toLowerCase()) || [];
       
       if (versions.length === 0) {
         errors.push(`Library '${libName}' not found`);
@@ -573,10 +612,10 @@ export class LibraryDependencyResolver {
     const processed = new Set<string>();
     let depth = 0;
 
-    // Build lookup map
+    // Build lookup map (case-insensitive)
     const libMap = new Map<string, ComponentLibraryEntity>();
     for (const lib of allLibs) {
-      libMap.set(lib.Name, lib);
+      libMap.set(lib.Name.toLowerCase(), lib);
     }
 
     while (toProcess.length > 0 && depth < maxDepth) {
@@ -584,7 +623,7 @@ export class LibraryDependencyResolver {
       if (processed.has(current)) continue;
 
       processed.add(current);
-      const lib = libMap.get(current);
+      const lib = libMap.get(current.toLowerCase());
       if (!lib) continue;
 
       const deps = this.parseDependencies(lib.Dependencies);