@memberjunction/react-runtime 2.94.0 → 2.95.0

package/src/compiler/component-compiler.ts

@@ -172,68 +172,115 @@ 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
       ) {
-        // Parse the component code once to get the component definition
-        ${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');
+        }
         
         // 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('Component ${componentName} type:', typeof UserComponent);
+        console.log('[React-Runtime-JS]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);
+          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('Component ${componentName}.component type:', typeof UserComponent.component);
+            console.log('[React-Runtime-JS]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);
+          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 = React.forwardRef((props, ref) => {
+        const ComponentWithMethodRegistry = (props) => {
           // Register methods on mount
           React.useEffect(() => {
             // Clear previous methods
@@ -261,11 +308,11 @@ export class ComponentCompiler {
           }, [props.callbacks]);
           
           // Render the original component with enhanced callbacks
-          return React.createElement(ActualComponent, {
+          return React.createElement(DestructureWrapperUserComponent, {
             ...props,
             callbacks: enhancedCallbacks
           });
-        });
+        };
         
         ComponentWithMethodRegistry.displayName = '${componentName}WithMethods';
         
@@ -273,7 +320,6 @@ export class ComponentCompiler {
         return {
           component: ComponentWithMethodRegistry,
           
-          // Legacy methods for backward compatibility
           print: function() { 
             const printMethod = methodRegistry.get('print');
             if (printMethod) {
@@ -326,7 +372,7 @@ export class ComponentCompiler {
             if (method) {
               return method(...args);
             }
-            console.warn(\`Method '\${methodName}' is not registered on component ${componentName}\`);
+            console.warn(\`[React-Runtime-JS] Method '\${methodName}' is not registered on component ${componentName}\`);
             return undefined;
           },
           
@@ -337,6 +383,8 @@ export class ComponentCompiler {
         };
       }
     `;
+
+    return wrappedCode;
   }
 
   /**

package/src/index.ts

@@ -29,7 +29,8 @@ export { ComponentRegistry } from './registry';
 export { 
   ComponentResolver,
   ComponentSpec,
-  ResolvedComponents
+  ResolvedComponents,
+  ComponentRegistryService
 } from './registry';
 
 // Export runtime APIs

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

@@ -561,6 +561,27 @@ export class ComponentRegistryService {
     this.compiledComponentCache.clear();
     this.componentReferences.clear();
   }
+
+  /**
+   * Force clear all compiled components
+   * Used for Component Studio to ensure fresh loads
+   */
+  forceClearAll(): void {
+    this.compiledComponentCache.clear();
+    this.componentReferences.clear();
+    console.log('🧹 Component cache force cleared');
+  }
+
+  /**
+   * Reset the singleton instance
+   * Forces new instance creation on next access
+   */
+  static reset(): void {
+    if (ComponentRegistryService.instance) {
+      ComponentRegistryService.instance.forceClearAll();
+      ComponentRegistryService.instance = null;
+    }
+  }
   
   /**
    * Generate a cache key for a component

package/src/registry/component-registry.ts

@@ -243,6 +243,34 @@ export class ComponentRegistry {
     this.registry.clear();
   }
 
+  /**
+   * Clear all components in a specific namespace
+   * @param namespace - Namespace to clear (default: 'Global')
+   * @returns Number of components removed
+   */
+  clearNamespace(namespace: string = 'Global'): number {
+    const toRemove: string[] = [];
+    for (const [key, entry] of this.registry) {
+      if (entry.metadata.namespace === namespace) {
+        toRemove.push(key);
+      }
+    }
+    for (const key of toRemove) {
+      this.registry.delete(key);
+    }
+    return toRemove.length;
+  }
+
+  /**
+   * Force clear all components and reset registry
+   * Used for development/testing scenarios
+   */
+  forceClear(): void {
+    this.stopCleanupTimer();
+    this.registry.clear();
+    console.log('🧹 Registry force cleared - all components removed');
+  }
+
   /**
    * Gets the current size of the registry
    * @returns Number of registered components

package/src/registry/component-resolver.ts

@@ -68,16 +68,27 @@ export class ComponentResolver {
     namespace: string = 'Global',
     contextUser?: UserInfo
   ): Promise<ResolvedComponents> {
+    console.log(`🚀 [ComponentResolver] Starting component resolution for: ${spec.name}`);
+    console.log(`📋 [ComponentResolver] Dependencies to resolve:`, (spec.dependencies || []).map(d => ({
+      name: d.name,
+      location: d.location,
+      namespace: d.namespace
+    })));
+    
     const resolved: ResolvedComponents = {};
     
     // Initialize component engine if we have registry service
     if (this.registryService) {
+      console.log(`🔄 [ComponentResolver] Initializing component engine...`);
       await this.componentEngine.Config(false, contextUser);
+      console.log(`✅ [ComponentResolver] Component engine initialized with ${this.componentEngine.Components?.length || 0} components`);
     }
     
     // Resolve the component hierarchy
     await this.resolveComponentHierarchy(spec, resolved, namespace, new Set(), contextUser);
     
+    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 +98,29 @@ 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)`);
         } 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;
+        console.log(`✅ [ComponentResolver] Component already a function: ${name}`);
+      } else {
+        // Something else - could be undefined or an error
+        console.warn(`⚠️ [ComponentResolver] Component ${name} is not a function or wrapped component:`, typeof value, value);
+        unwrapped[name] = value; // Pass through for debugging
       }
     }
     
+    console.log(`🎯 [ComponentResolver] Final resolved components:`, Object.keys(unwrapped).map(name => ({
+      name,
+      type: typeof unwrapped[name],
+      isUndefined: unwrapped[name] === undefined
+    })));
+    
     return unwrapped;
   }
 
@@ -119,6 +142,12 @@ export class ComponentResolver {
     // Create a unique identifier for this component
     const componentId = `${spec.namespace || namespace}/${spec.name}@${spec.version || 'latest'}`;
     
+    // Check if already resolved (not just visited)
+    if (resolved[spec.name]) {
+      console.log(`⏭️ [ComponentResolver] Component already resolved: ${spec.name}`);
+      return;
+    }
+    
     // Prevent circular dependencies
     if (visited.has(componentId)) {
       if (this.debug) {
@@ -128,17 +157,55 @@ 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`);
+    const children = spec.dependencies || [];
+    for (const child of children) {
+      console.log(`  ↳ [ComponentResolver] Resolving dependency: ${child.name} for parent ${spec.name}`);
+      await this.resolveComponentHierarchy(child, resolved, namespace, visited, contextUser);
+    }
+    if (children.length > 0) {
+      console.log(`✅ [ComponentResolver] All ${children.length} dependencies resolved for ${spec.name}, now resolving itself`);
+    }
+
+    // NOW resolve the current component (it can access its dependencies)
     // Handle based on location
     if (spec.location === 'registry' && this.registryService) {
       // Registry component - need to load from database or external source
+      console.log(`🔍 [ComponentResolver] Looking for registry component: ${spec.name} in namespace: ${spec.namespace || namespace}`);
+      
       try {
         // First, try to find the component in the metadata engine
+        const allComponents = this.componentEngine.Components || [];
+        console.log(`📊 [ComponentResolver] Total components in engine: ${allComponents.length}`);
+        
+        // Log all matching names to see duplicates
+        const matchingNames = allComponents.filter((c: any) => c.Name === spec.name);
+        if (matchingNames.length > 0) {
+          console.log(`🔎 [ComponentResolver] Found ${matchingNames.length} components with name "${spec.name}":`, 
+            matchingNames.map((c: any) => ({
+              ID: c.ID,
+              Name: c.Name,
+              Namespace: c.Namespace,
+              Version: c.Version,
+              Status: c.Status
+            }))
+          );
+        }
+        
         const component = this.componentEngine.Components?.find(
           (c: any) => c.Name === spec.name && 
                c.Namespace === (spec.namespace || namespace)
         );
         
         if (component) {
+          console.log(`✅ [ComponentResolver] Found component in DB:`, {
+            ID: component.ID,
+            Name: component.Name,
+            Namespace: component.Namespace,
+            Version: component.Version
+          });
+          
           // Get compiled component from registry service
           const compiledComponent = await this.registryService.getCompiledComponent(
             component.ID,
@@ -146,10 +213,13 @@ 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(`📦 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 +233,37 @@ 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}`);
+      
       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(`📄 Resolved embedded component: ${spec.name} from namespace ${componentNamespace}, type:`, typeof component);
         }
       } else {
         // If not found with specified namespace, try the parent namespace as fallback
+        console.log(`⚠️ [ComponentResolver] Not found in namespace ${componentNamespace}, trying fallback namespace: ${namespace}`);
         const fallbackComponent = this.registry.get(spec.name, namespace);
         if (fallbackComponent) {
           resolved[spec.name] = fallbackComponent;
+          console.log(`✅ [ComponentResolver] Found embedded component in fallback namespace: ${spec.name}, type: ${typeof fallbackComponent}`);
           if (this.debug) {
             console.log(`📄 Resolved embedded component: ${spec.name} from fallback namespace ${namespace}, type:`, typeof fallbackComponent);
           }
         } else {
           // Component not found - this might cause issues later
+          console.error(`❌ [ComponentResolver] Could not resolve embedded component: ${spec.name} in namespace ${componentNamespace} or ${namespace}`);
           console.warn(`⚠️ Could not resolve embedded component: ${spec.name} in namespace ${componentNamespace} or ${namespace}`);
           // Store undefined explicitly so we know it failed to resolve
           resolved[spec.name] = undefined;
         }
       }
     }
-
-    // Process child components recursively
-    const children = spec.dependencies || [];
-    for (const child of children) {
-      await this.resolveComponentHierarchy(child, resolved, namespace, visited, contextUser);
-    }
+    
+    // Child components have already been processed at the beginning of this method
+    // No need to process them again - we're using depth-first, post-order traversal
   }
 
   /**

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 */