@memberjunction/react-runtime 2.93.0 → 2.95.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(),
@@ -169,67 +172,241 @@ export class ComponentCompiler {
    * @param dependencies - Optional child component dependencies
    * @returns Wrapped component code
    */
+  // Core libraries that are passed as parameters to createComponent and should not be destructured
+  private readonly CORE_LIBRARIES = new Set(['React', 'ReactDOM']);
+
   private wrapComponentCode(componentCode: string, componentName: string, libraries?: any[], dependencies?: Array<{ name: string }>): string {
     // Generate library declarations if libraries are provided
+    // Skip core libraries as they're passed as parameters to createComponent
     const libraryDeclarations = libraries && libraries.length > 0
       ? libraries
-          .filter(lib => lib.globalVariable) // Only include libraries with globalVariable
+          .filter(lib => lib.globalVariable && !this.CORE_LIBRARIES.has(lib.globalVariable)) // Skip core libraries
           .map(lib => `const ${lib.globalVariable} = libraries['${lib.globalVariable}'];`)
           .join('\n        ')
       : '';
-    
+    const libraryLogChecks = libraries && libraries.length > 0  
+      ? libraries
+          .filter(lib => lib.globalVariable && !this.CORE_LIBRARIES.has(lib.globalVariable)) // Skip core libraries
+          .map(lib => `\nif (!${lib.globalVariable}) { console.error('[React-Runtime-JS] Library "${lib.globalVariable}" is not defined'); } else { console.log('[React-Runtime-JS] Library "${lib.globalVariable}" is defined'); }`)
+          .join('\n        ')
+      : '';
+
     // Generate component declarations if dependencies are provided
+    // Filter out the component being compiled to avoid naming conflicts
     const componentDeclarations = dependencies && dependencies.length > 0
       ? dependencies
-          .map(dep => `const ${dep.name} = components['${dep.name}'];`)
+          .filter(dep => dep.name !== componentName) // Don't destructure the component being compiled itself
+          .map(dep => `const ${dep.name} = componentsOuter['${dep.name}'];`)
+          .join('\n        ')
+      : '';
+    const componentLogChecks = dependencies && dependencies.length > 0
+      ? dependencies
+          .filter(dep => dep.name !== componentName) // Don't destructure the component being compiled itself
+          .map(dep => `if (!${dep.name}) { console.error('[React-Runtime-JS] Dependency "${dep.name}" is not defined'); } else { console.log('[React-Runtime-JS] Dependency "${dep.name}" is defined'); }`)
           .join('\n        ')
       : '';
 
-    return `
+    const wrappedCode = `
       function createComponent(
         React, ReactDOM, 
         useState, useEffect, useCallback, useMemo, useRef, useContext, useReducer, useLayoutEffect,
         libraries, styles, console, components
       ) {
-        ${libraryDeclarations ? libraryDeclarations + '\n        ' : ''}${componentDeclarations ? componentDeclarations + '\n        ' : ''}${componentCode}
+        // Code for ${componentName}
+        ${componentCode}
         
         // Ensure the component exists
         if (typeof ${componentName} === 'undefined') {
           throw new Error('Component "${componentName}" is not defined in the provided code');
         }
+        else {
+          console.log('[React-Runtime-JS] Component "${componentName}" is defined');
+        }
         
-        // Return the component with utilities
+        // Store the component in a variable so we don't lose it
+        const UserComponent = ${componentName};
+
+        // 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;
+        
+        // Debug logging to understand what we're getting
+        console.log('[React-Runtime-JS]Component ${componentName} type:', typeof UserComponent);
+        if (typeof UserComponent === 'object' && UserComponent !== null) {
+          console.log('[React-Runtime-JS]Component ${componentName} keys:', Object.keys(UserComponent));
+          console.log('[React-Runtime-JS]Component ${componentName} has .component:', 'component' in UserComponent);
+          if ('component' in UserComponent) {
+            console.log('[React-Runtime-JS]Component ${componentName}.component type:', typeof UserComponent.component);
+          }
+        }
+        
+        // Validate that we have a function (React component)
+        if (typeof ActualComponent !== 'function') {
+          console.error('[React-Runtime-JS] Invalid component type for ${componentName}:', typeof ActualComponent);
+          console.error('[React-Runtime-JS] ActualComponent value:', ActualComponent);
+          console.error('[React-Runtime-JS] Original UserComponent value:', UserComponent);
+          throw new Error('[React-Runtime-JS] Component "${componentName}" must be a function (React component) or an object with a .component property that is a function. Got: ' + typeof ActualComponent);
+        }
+
+        let componentsOuter = null, utilitiesOuter = null;
+        const DestructureWrapperUserComponent = (props) => {
+          if (!componentsOuter) {
+            componentsOuter = props?.components || components;
+          }
+          if (!utilitiesOuter) {
+            utilitiesOuter = props?.utilities;
+          }
+          console.log('Props for ${componentName}:', props);
+          console.log('components for ${componentName}:', componentsOuter);
+          console.log('styles for ${componentName}:', styles);
+          console.log('utilities for ${componentName}:', utilitiesOuter);
+          console.log('libraries for ${componentName}:', libraries);
+          ${libraryDeclarations ? '// Destructure Libraries\n' + libraryDeclarations + '\n        ' : ''}
+          ${componentDeclarations ? '// Destructure Dependencies\n' + componentDeclarations + '\n        ' : ''}
+          ${libraryLogChecks}
+          ${componentLogChecks}          
+
+          const newProps = {
+            ...props,
+            components: componentsOuter,
+            utilities: utilitiesOuter 
+          }
+          return ActualComponent(newProps);
+        };
+        
+        // Create a fresh method registry for each factory call
+        const methodRegistry = new Map();
+        
+        // Create a wrapper component that provides RegisterMethod in callbacks
+        const ComponentWithMethodRegistry = (props) => {
+          // 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(DestructureWrapperUserComponent, {
+            ...props,
+            callbacks: enhancedCallbacks
+          });
+        };
+        
+        ComponentWithMethodRegistry.displayName = '${componentName}WithMethods';
+        
+        // Return the component object with method access
         return {
-          component: ${componentName},
+          component: ComponentWithMethodRegistry,
+          
           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(\`[React-Runtime-JS] Method '\${methodName}' is not registered on component ${componentName}\`);
+            return undefined;
+          },
+          
+          // Check if a method exists
+          hasMethod: function(methodName) {
+            return methodRegistry.has(methodName);
           }
         };
       }
     `;
+
+    return wrappedCode;
   }
 
   /**
-   * 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 +423,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 +582,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 +624,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

@@ -29,7 +29,8 @@ export { ComponentRegistry } from './registry';
 export { 
   ComponentResolver,
   ComponentSpec,
-  ResolvedComponents
+  ResolvedComponents,
+  ComponentRegistryService
 } from './registry';
 
 // Export runtime APIs
@@ -139,6 +140,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 +149,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
   };
 }