@memberjunction/react-runtime 2.93.0 → 2.94.0

package/src/compiler/component-compiler.ts

@@ -13,7 +13,9 @@ import {
   ComponentError,
   RuntimeContext
 } from '../types';
+import { ComponentStyles, ComponentObject } from '@memberjunction/interactive-component-types';
 import { LibraryRegistry } from '../utilities/library-registry';
+import { LibraryLoader } from '../utilities/library-loader';
 import { ComponentLibraryEntity } from '@memberjunction/core-entities';
 
 /**
@@ -27,7 +29,8 @@ const DEFAULT_COMPILER_CONFIG: CompilerConfig = {
   minify: false,
   sourceMaps: false,
   cache: true,
-  maxCacheSize: 100
+  maxCacheSize: 100,
+  debug: false
 };
 
 /**
@@ -100,7 +103,7 @@ export class ComponentCompiler {
 
       // Build the compiled component
       const compiledComponent: CompiledComponent = {
-        component: componentFactory,
+        factory: componentFactory,
         id: this.generateComponentId(options.componentName),
         name: options.componentName,
         compiledAt: new Date(),
@@ -191,6 +194,7 @@ export class ComponentCompiler {
         useState, useEffect, useCallback, useMemo, useRef, useContext, useReducer, useLayoutEffect,
         libraries, styles, console, components
       ) {
+        // Parse the component code once to get the component definition
         ${libraryDeclarations ? libraryDeclarations + '\n        ' : ''}${componentDeclarations ? componentDeclarations + '\n        ' : ''}${componentCode}
         
         // Ensure the component exists
@@ -198,16 +202,137 @@ export class ComponentCompiler {
           throw new Error('Component "${componentName}" is not defined in the provided code');
         }
         
-        // Return the component with utilities
+        // Store the component in a variable so we don't lose it
+        const UserComponent = ${componentName};
+        
+        // Debug logging to understand what we're getting
+        console.log('Component ${componentName} type:', typeof UserComponent);
+        if (typeof UserComponent === 'object' && UserComponent !== null) {
+          console.log('Component ${componentName} keys:', Object.keys(UserComponent));
+          console.log('Component ${componentName} has .component:', 'component' in UserComponent);
+          if ('component' in UserComponent) {
+            console.log('Component ${componentName}.component type:', typeof UserComponent.component);
+          }
+        }
+        
+        // Check if the component is already a ComponentObject (has a .component property)
+        // If so, extract the actual React component
+        const ActualComponent = (typeof UserComponent === 'object' && UserComponent !== null && 'component' in UserComponent)
+          ? UserComponent.component
+          : UserComponent;
+        
+        // Validate that we have a function (React component)
+        if (typeof ActualComponent !== 'function') {
+          console.error('Invalid component type for ${componentName}:', typeof ActualComponent);
+          console.error('ActualComponent value:', ActualComponent);
+          console.error('Original UserComponent value:', UserComponent);
+          throw new Error('Component "${componentName}" must be a function (React component) or an object with a .component property that is a function. Got: ' + typeof ActualComponent);
+        }
+        
+        // Create a fresh method registry for each factory call
+        const methodRegistry = new Map();
+        
+        // Create a wrapper component that provides RegisterMethod in callbacks
+        const ComponentWithMethodRegistry = React.forwardRef((props, ref) => {
+          // Register methods on mount
+          React.useEffect(() => {
+            // Clear previous methods
+            methodRegistry.clear();
+            
+            // Provide RegisterMethod callback if callbacks exist
+            if (props.callbacks && typeof props.callbacks.RegisterMethod === 'function') {
+              // Component can now register its methods
+              // This will be called from within the component
+            }
+          }, [props.callbacks]);
+          
+          // Create enhanced callbacks with RegisterMethod
+          const enhancedCallbacks = React.useMemo(() => {
+            if (!props.callbacks) return {};
+            
+            return {
+              ...props.callbacks,
+              RegisterMethod: (methodName, handler) => {
+                if (methodName && handler) {
+                  methodRegistry.set(methodName, handler);
+                }
+              }
+            };
+          }, [props.callbacks]);
+          
+          // Render the original component with enhanced callbacks
+          return React.createElement(ActualComponent, {
+            ...props,
+            callbacks: enhancedCallbacks
+          });
+        });
+        
+        ComponentWithMethodRegistry.displayName = '${componentName}WithMethods';
+        
+        // Return the component object with method access
         return {
-          component: ${componentName},
+          component: ComponentWithMethodRegistry,
+          
+          // Legacy methods for backward compatibility
           print: function() { 
-            if (typeof window !== 'undefined' && window.print) {
+            const printMethod = methodRegistry.get('print');
+            if (printMethod) {
+              printMethod();
+            } else if (typeof window !== 'undefined' && window.print) {
               window.print(); 
             }
           },
           refresh: function(data) { 
+            const refreshMethod = methodRegistry.get('refresh');
+            if (refreshMethod) {
+              refreshMethod(data);
+            }
             // Refresh functionality is handled by the host environment
+          },
+          
+          // Standard method accessors with type safety
+          getCurrentDataState: function() {
+            const method = methodRegistry.get('getCurrentDataState');
+            return method ? method() : undefined;
+          },
+          getDataStateHistory: function() {
+            const method = methodRegistry.get('getDataStateHistory');
+            return method ? method() : [];
+          },
+          validate: function() {
+            const method = methodRegistry.get('validate');
+            return method ? method() : true;
+          },
+          isDirty: function() {
+            const method = methodRegistry.get('isDirty');
+            return method ? method() : false;
+          },
+          reset: function() {
+            const method = methodRegistry.get('reset');
+            if (method) method();
+          },
+          scrollTo: function(target) {
+            const method = methodRegistry.get('scrollTo');
+            if (method) method(target);
+          },
+          focus: function(target) {
+            const method = methodRegistry.get('focus');
+            if (method) method(target);
+          },
+          
+          // Generic method invoker for custom methods
+          invokeMethod: function(methodName, ...args) {
+            const method = methodRegistry.get(methodName);
+            if (method) {
+              return method(...args);
+            }
+            console.warn(\`Method '\${methodName}' is not registered on component ${componentName}\`);
+            return undefined;
+          },
+          
+          // Check if a method exists
+          hasMethod: function(methodName) {
+            return methodRegistry.has(methodName);
           }
         };
       }
@@ -215,21 +340,25 @@ export class ComponentCompiler {
   }
 
   /**
-   * Load required libraries from the registry
+   * Load required libraries from the registry with dependency resolution
    * @param libraries - Array of library dependencies
-   * @param contextUser - Context user for accessing library registry
+   * @param componentLibraries - All available component libraries for dependency resolution
    * @returns Map of loaded libraries
    */
   private async loadRequiredLibraries(libraries: any[], componentLibraries: ComponentLibraryEntity[]): Promise<Map<string, any>> {
     const loadedLibraries = new Map<string, any>();
     
-    console.log('🔍 loadRequiredLibraries called with:', {
-      librariesCount: libraries?.length || 0,
-      libraries: libraries?.map(l => ({ name: l.name, version: l.version, globalVariable: l.globalVariable }))
-    });
+    if (this.config.debug) {
+      console.log('🔍 loadRequiredLibraries called with:', {
+        librariesCount: libraries?.length || 0,
+        libraries: libraries?.map(l => ({ name: l.name, version: l.version, globalVariable: l.globalVariable }))
+      });
+    }
     
     if (!libraries || libraries.length === 0) {
-      console.log('📚 No libraries to load, returning empty map');
+      if (this.config.debug) {
+        console.log('📚 No libraries to load, returning empty map');
+      }
       return loadedLibraries;
     }
 
@@ -246,75 +375,90 @@ export class ComponentCompiler {
       console.warn('⚠️ No componentLibraries provided for LibraryRegistry initialization');
     }
 
-    const loadPromises = libraries.map(async (lib) => {
-      console.log(`📦 Processing library: ${lib.name}`);
-      
-      // Check if library is approved
-      const isApproved = LibraryRegistry.isApproved(lib.name);
-      console.log(`  ✓ Approved check for ${lib.name}: ${isApproved}`);
-      
-      if (!isApproved) {
-        console.error(`  ❌ Library '${lib.name}' is not approved`);
-        throw new Error(`Library '${lib.name}' is not approved. Only approved libraries can be used.`);
-      }
-
-      // Get library definition for complete info
-      const libraryDef = LibraryRegistry.getLibrary(lib.name);
-      console.log(`  ✓ Library definition found for ${lib.name}: ${!!libraryDef}`);
-      
-      if (!libraryDef) {
-        console.error(`  ❌ Library '${lib.name}' not found in registry`);
-        throw new Error(`Library '${lib.name}' not found in registry`);
-      }
+    // Extract library names from the requested libraries
+    const libraryNames = libraries.map(lib => lib.name);
+    
+    if (this.config.debug) {
+      console.log('📦 Using dependency-aware loading for libraries:', libraryNames);
+    }
 
-      // Get CDN URL for the library
-      const resolvedVersion = LibraryRegistry.resolveVersion(lib.name, lib.version);
-      console.log(`  ✓ Resolved version for ${lib.name}: ${resolvedVersion}`);
-      
-      const cdnUrl = LibraryRegistry.getCdnUrl(lib.name, resolvedVersion);
-      console.log(`  ✓ CDN URL for ${lib.name}: ${cdnUrl}`);
-      
-      if (!cdnUrl) {
-        console.error(`  ❌ No CDN URL found for library '${lib.name}' version '${lib.version || 'default'}'`);
-        throw new Error(`No CDN URL found for library '${lib.name}' version '${lib.version || 'default'}'`);
-      }
+    try {
+      // Use the new dependency-aware loading
+      const loadedLibraryMap = await LibraryLoader.loadLibrariesWithDependencies(
+        libraryNames,
+        componentLibraries,
+        'component-compiler',
+        { debug: this.config.debug }
+      );
 
-      // Check if already loaded
-      if ((window as any)[lib.globalVariable]) {
-        console.log(`  ℹ️ Library ${lib.name} already loaded globally as ${lib.globalVariable}`);
-        loadedLibraries.set(lib.globalVariable, (window as any)[lib.globalVariable]);
-        return;
-      }
+      // Map the results to match the expected format
+      // We need to map from library name to global variable
+      for (const lib of libraries) {
+        // Check if library is approved first
+        const isApproved = LibraryRegistry.isApproved(lib.name);
+        if (!isApproved) {
+          console.error(`❌ Library '${lib.name}' is not approved`);
+          throw new Error(`Library '${lib.name}' is not approved. Only approved libraries can be used.`);
+        }
 
-      // Load CSS files if the library requires them
-      const versionInfo = libraryDef.versions[resolvedVersion || libraryDef.defaultVersion];
-      if (versionInfo?.cssUrls) {
-        await this.loadStyles(versionInfo.cssUrls);
+        // Get the loaded library from the map
+        const loadedValue = loadedLibraryMap.get(lib.name);
+        
+        if (loadedValue) {
+          // Store by global variable name for component access
+          loadedLibraries.set(lib.globalVariable, loadedValue);
+          if (this.config.debug) {
+            console.log(`✅ Mapped ${lib.name} to global variable ${lib.globalVariable}`);
+          }
+        } else {
+          // Fallback: check if it's already globally available (might be a dependency)
+          const globalValue = (window as any)[lib.globalVariable];
+          if (globalValue) {
+            loadedLibraries.set(lib.globalVariable, globalValue);
+            if (this.config.debug) {
+              console.log(`✅ Found ${lib.name} already loaded as ${lib.globalVariable}`);
+            }
+          } else {
+            console.error(`❌ Library '${lib.name}' failed to load`);
+            throw new Error(`Library '${lib.name}' failed to load or did not expose '${lib.globalVariable}'`);
+          }
+        }
       }
-
-      // Load the library dynamically (cdnUrl is guaranteed to be non-null here due to check above)
-      console.log(`  📥 Loading script from CDN for ${lib.name}...`);
-      await this.loadScript(cdnUrl!, lib.globalVariable);
+    } catch (error: any) {
+      console.error('Failed to load libraries with dependencies:', error);
       
-      // Capture the library value from global scope
-      // Note: Libraries loaded from CDN typically attach to window automatically
-      // We capture them here to pass through the component's closure
-      const libraryValue = (window as any)[lib.globalVariable];
-      console.log(`  ✓ Library ${lib.name} loaded successfully, global variable ${lib.globalVariable} is:`, typeof libraryValue);
+      // Fallback to old loading method if dependency resolution fails
+      if (this.config.debug) {
+        console.warn('⚠️ Falling back to non-dependency-aware loading due to error');
+      }
       
-      if (libraryValue) {
-        loadedLibraries.set(lib.globalVariable, libraryValue);
-        console.log(`  ✅ Added ${lib.name} to loaded libraries map`);
-      } else {
-        console.error(`  ❌ Library '${lib.name}' failed to expose global variable '${lib.globalVariable}'`);
-        throw new Error(`Library '${lib.name}' failed to load or did not expose '${lib.globalVariable}'`);
+      // Load each library independently (old method)
+      for (const lib of libraries) {
+        if ((window as any)[lib.globalVariable]) {
+          loadedLibraries.set(lib.globalVariable, (window as any)[lib.globalVariable]);
+        } else {
+          // Try to load using LibraryRegistry
+          const libraryDef = LibraryRegistry.getLibrary(lib.name);
+          if (libraryDef) {
+            const resolvedVersion = LibraryRegistry.resolveVersion(lib.name, lib.version);
+            const cdnUrl = LibraryRegistry.getCdnUrl(lib.name, resolvedVersion);
+            
+            if (cdnUrl) {
+              await this.loadScript(cdnUrl, lib.globalVariable);
+              const libraryValue = (window as any)[lib.globalVariable];
+              if (libraryValue) {
+                loadedLibraries.set(lib.globalVariable, libraryValue);
+              }
+            }
+          }
+        }
       }
-    });
-
-    await Promise.all(loadPromises);
+    }
     
-    console.log(`✅ All libraries loaded successfully. Total: ${loadedLibraries.size}`);
-    console.log('📚 Loaded libraries map:', Array.from(loadedLibraries.keys()));
+    if (this.config.debug) {
+      console.log(`✅ All libraries loaded successfully. Total: ${loadedLibraries.size}`);
+      console.log('📚 Loaded libraries map:', Array.from(loadedLibraries.keys()));
+    }
     
     return loadedLibraries;
   }
@@ -390,12 +534,18 @@ export class ComponentCompiler {
         
         const checkGlobal = () => {
           if ((window as any)[globalName]) {
-            console.log(`  ✓ Global variable ${globalName} found after ${attempts * checkInterval}ms`);
+            if (this.config.debug) {
+              console.log(`  ✓ Global variable ${globalName} found after ${attempts * checkInterval}ms`);
+            }
             resolve();
           } else if (attempts >= maxAttempts) {
             // Final check - some libraries might use a different global name pattern
-            console.error(`  ❌ ${globalName} not found after ${attempts * checkInterval}ms`);
-            console.log(`  ℹ️ Window properties:`, Object.keys(window).filter(k => k.toLowerCase().includes(globalName.toLowerCase())));
+            if (this.config.debug) {
+              console.error(`  ❌ ${globalName} not found after ${attempts * checkInterval}ms`);
+              // Only log matching property names, not the entire window object
+              const matchingKeys = Object.keys(window).filter(k => k.toLowerCase().includes(globalName.toLowerCase()));
+              console.log(`  ℹ️ Matching window properties: ${matchingKeys.join(', ') || 'none'}`);
+            }
             reject(new Error(`${globalName} not found after loading script from ${url}`));
           } else {
             attempts++;
@@ -426,7 +576,7 @@ export class ComponentCompiler {
     transpiledCode: string, 
     componentName: string,
     loadedLibraries: Map<string, any>
-  ): Function {
+  ): (context: RuntimeContext, styles?: ComponentStyles) => ComponentObject {
     try {
       // Create the factory function with all React hooks
       const factoryCreator = new Function(

package/src/index.ts

@@ -139,6 +139,7 @@ export const DEFAULT_CONFIGS = {
  * @param babelInstance - Babel standalone instance for compilation
  * @param config - Optional configuration overrides
  * @param runtimeContext - Optional runtime context for registry-based components
+ * @param debug - Enable debug logging (defaults to false)
  * @returns Object containing compiler, registry, and resolver instances
  */
 export function createReactRuntime(
@@ -147,18 +148,31 @@ export function createReactRuntime(
     compiler?: Partial<import('./types').CompilerConfig>;
     registry?: Partial<import('./types').RegistryConfig>;
   },
-  runtimeContext?: import('./types').RuntimeContext
+  runtimeContext?: import('./types').RuntimeContext,
+  debug: boolean = false
 ) {
-  const compiler = new ComponentCompiler(config?.compiler);
+  // Merge debug flag into configs
+  const compilerConfig = {
+    ...config?.compiler,
+    debug: config?.compiler?.debug ?? debug
+  };
+  
+  const registryConfig = {
+    ...config?.registry,
+    debug: config?.registry?.debug ?? debug
+  };
+  
+  const compiler = new ComponentCompiler(compilerConfig);
   compiler.setBabelInstance(babelInstance);
   
-  const registry = new ComponentRegistry(config?.registry);
+  const registry = new ComponentRegistry(registryConfig);
   const resolver = new ComponentResolver(registry, compiler, runtimeContext);
 
   return {
     compiler,
     registry,
     resolver,
-    version: VERSION
+    version: VERSION,
+    debug
   };
 }

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,7 +555,9 @@ 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();
   }

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) {