@memberjunction/react-runtime 2.95.0 → 2.97.0

package/src/registry/component-resolver.ts

@@ -68,26 +68,36 @@ 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
-    })));
+    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) {
-      console.log(`🔄 [ComponentResolver] Initializing component engine...`);
+      if (this.debug) {
+        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`);
+      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);
     
-    console.log(`📊 [ComponentResolver] Resolved components before unwrapping:`, Object.keys(resolved));
+    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
@@ -98,7 +108,9 @@ export class ComponentResolver {
         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)`);
+          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(`❌ [ComponentResolver] Component ${name} has invalid component property:`, typeof value.component, value);
@@ -107,7 +119,9 @@ export class ComponentResolver {
       } else if (typeof value === 'function') {
         // Already a function - use as is
         unwrapped[name] = value;
-        console.log(`✅ [ComponentResolver] Component already a function: ${name}`);
+        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);
@@ -115,11 +129,13 @@ export class ComponentResolver {
       }
     }
     
-    console.log(`🎯 [ComponentResolver] Final resolved components:`, Object.keys(unwrapped).map(name => ({
-      name,
-      type: typeof unwrapped[name],
-      isUndefined: unwrapped[name] === undefined
-    })));
+    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;
   }
@@ -144,7 +160,9 @@ export class ComponentResolver {
     
     // Check if already resolved (not just visited)
     if (resolved[spec.name]) {
-      console.log(`⏭️ [ComponentResolver] Component already resolved: ${spec.name}`);
+      if (this.debug) {
+        console.log(`⏭️ [ComponentResolver] Component already resolved: ${spec.name}`);
+      }
       return;
     }
     
@@ -158,13 +176,17 @@ export class ComponentResolver {
     visited.add(componentId);
 
     // *** CRITICAL: Process child components FIRST (depth-first, post-order) ***
-    console.log(`🔄 [ComponentResolver] Resolving dependencies for ${spec.name} BEFORE resolving itself`);
+    if (this.debug) {
+      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}`);
+      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) {
+    if (children.length > 0 && this.debug) {
       console.log(`✅ [ComponentResolver] All ${children.length} dependencies resolved for ${spec.name}, now resolving itself`);
     }
 
@@ -172,16 +194,20 @@ export class ComponentResolver {
     // 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}`);
+      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 || [];
-        console.log(`📊 [ComponentResolver] Total components in engine: ${allComponents.length}`);
+        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) {
+        if (matchingNames.length > 0 && this.debug) {
           console.log(`🔎 [ComponentResolver] Found ${matchingNames.length} components with name "${spec.name}":`, 
             matchingNames.map((c: any) => ({
               ID: c.ID,
@@ -199,12 +225,14 @@ export class ComponentResolver {
         );
         
         if (component) {
-          console.log(`✅ [ComponentResolver] Found component in DB:`, {
-            ID: component.ID,
-            Name: component.Name,
-            Namespace: component.Namespace,
-            Version: component.Version
-          });
+          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(
@@ -213,7 +241,9 @@ export class ComponentResolver {
             contextUser
           );
           resolved[spec.name] = compiledComponent;
-          console.log(`📦 [ComponentResolver] Successfully compiled and resolved: ${spec.name}, type: ${typeof 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}`);
@@ -233,29 +263,39 @@ 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;
-      console.log(`🔍 [ComponentResolver] Looking for embedded component: ${spec.name} in namespace: ${componentNamespace}`);
+      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;
-        console.log(`✅ [ComponentResolver] Found embedded component: ${spec.name}, type: ${typeof 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
-        console.log(`⚠️ [ComponentResolver] Not found in namespace ${componentNamespace}, trying fallback namespace: ${namespace}`);
+        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;
-          console.log(`✅ [ComponentResolver] Found embedded component in fallback namespace: ${spec.name}, type: ${typeof 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}`);
-          console.warn(`⚠️ 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;
         }

package/src/runtime/component-hierarchy.ts

@@ -54,6 +54,7 @@ export interface HierarchyRegistrationOptions {
    * Required, metadata for all possible libraries allowed by the system
    */
   allLibraries: ComponentLibraryEntity[];
+  debug?: boolean;
 }
 
 /**

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,15 +420,33 @@ 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 requested libraries:');
-      console.log('  📝 Requested:', requestedLibs);
+      console.log('  📝 Requested (raw):', requestedLibs);
+      console.log('  📝 Requested (valid):', validRequestedLibs);
       console.log('  📚 Total available libraries:', allLibs.length);
     }
 
     // Build a map for quick lookup (case-insensitive)
     const libMap = new Map<string, ComponentLibraryEntity[]>();
     for (const lib of allLibs) {
+      if (!lib?.Name) {
+        warnings.push(`Library with missing name found in available libraries`);
+        continue;
+      }
       const key = lib.Name.toLowerCase();
       if (!libMap.has(key)) {
         libMap.set(key, []);
@@ -438,7 +456,7 @@ export class LibraryDependencyResolver {
 
     // 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;
@@ -446,6 +464,17 @@ 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);

package/src/utilities/library-loader.ts

@@ -65,10 +65,12 @@ export class LibraryLoader {
    * This is the main method that should be used by test harness and Angular wrapper
    * @param config Optional full library configuration to replace the default
    * @param additionalLibraries Optional additional libraries to merge with the configuration
+   * @param options Optional options including debug mode flag
    */
   static async loadAllLibraries(
     config?: LibraryConfiguration, 
-    additionalLibraries?: ExternalLibraryConfig[]
+    additionalLibraries?: ExternalLibraryConfig[],
+    options?: { debug?: boolean }
   ): Promise<LibraryLoadResult> {
     if (config) {
       StandardLibraryManager.setConfiguration(config);
@@ -87,17 +89,17 @@ export class LibraryLoader {
       StandardLibraryManager.setConfiguration(mergedConfig);
     }
     
-    return this.loadLibrariesFromConfig();
+    return this.loadLibrariesFromConfig(undefined, options?.debug);
   }
 
   /**
    * Load libraries based on the current configuration
    */
-  static async loadLibrariesFromConfig(options?: ConfigLoadOptions): Promise<LibraryLoadResult> {
+  static async loadLibrariesFromConfig(options?: ConfigLoadOptions, debug?: boolean): Promise<LibraryLoadResult> {
     // Always load core runtime libraries first
-    const coreLibraries = getCoreRuntimeLibraries();
+    const coreLibraries = getCoreRuntimeLibraries(debug);
     const corePromises = coreLibraries.map(lib => 
-      this.loadScript(lib.cdnUrl, lib.globalVariable)
+      this.loadScript(lib.cdnUrl, lib.globalVariable, debug)
     );
     
     const coreResults = await Promise.all(corePromises);
@@ -151,7 +153,7 @@ export class LibraryLoader {
     
     // Load plugin libraries
     const pluginPromises = pluginLibraries.map(lib => 
-      this.loadScript(lib.cdnUrl, lib.globalVariable)
+      this.loadScript(lib.cdnUrl, lib.globalVariable, debug)
     );
     
     const pluginResults = await Promise.all(pluginPromises);
@@ -214,10 +216,13 @@ export class LibraryLoader {
   /**
    * Load a script from URL
    */
-  private static async loadScript(url: string, globalName: string): Promise<any> {
+  private static async loadScript(url: string, globalName: string, debug: boolean = false): Promise<any> {
     // Check if already loaded
     const existing = this.loadedResources.get(url);
     if (existing) {
+      if (debug) {
+        console.log(`✅ Library '${globalName}' already loaded (cached)`);
+      }
       return existing.promise;
     }
 
@@ -225,6 +230,9 @@ export class LibraryLoader {
       // Check if global already exists
       const existingGlobal = (window as any)[globalName];
       if (existingGlobal) {
+        if (debug) {
+          console.log(`✅ Library '${globalName}' already available globally`);
+        }
         resolve(existingGlobal);
         return;
       }
@@ -251,6 +259,9 @@ export class LibraryLoader {
         cleanup();
         const global = (window as any)[globalName];
         if (global) {
+          if (debug) {
+            console.log(`✅ Library '${globalName}' loaded successfully from ${url}`);
+          }
           resolve(global);
         } else {
           // Some libraries may take a moment to initialize
@@ -259,6 +270,9 @@ export class LibraryLoader {
             () => {
               const delayedGlobal = (window as any)[globalName];
               if (delayedGlobal) {
+                if (debug) {
+                  console.log(`✅ Library '${globalName}' loaded successfully (delayed initialization)`);
+                }
                 resolve(delayedGlobal);
               } else {
                 reject(new Error(`${globalName} not found after script load`));
@@ -278,6 +292,9 @@ export class LibraryLoader {
       script.addEventListener('load', onLoad);
       script.addEventListener('error', onError);
 
+      if (debug) {
+        console.log(`📦 Loading library '${globalName}' from ${url}...`);
+      }
       document.head.appendChild(script);
       
       // Register the script element for cleanup
@@ -479,7 +496,7 @@ export class LibraryLoader {
       }
 
       // Load the script
-      const loadedGlobal = await this.loadScript(library.CDNUrl, library.GlobalVariable);
+      const loadedGlobal = await this.loadScript(library.CDNUrl, library.GlobalVariable, debug);
 
       // Track the loaded state
       const dependencies = Array.from(
@@ -607,7 +624,7 @@ export class LibraryLoader {
       }
 
       // Load the script
-      const loadedGlobal = await this.loadScript(library.CDNUrl, library.GlobalVariable);
+      const loadedGlobal = await this.loadScript(library.CDNUrl, library.GlobalVariable, debug);
 
       // Track the loaded state
       const dependencies = Array.from(