@memberjunction/react-runtime 2.112.0 → 2.113.0

package/src/component-manager/component-manager.ts

@@ -4,13 +4,20 @@
  */
 
 import { ComponentSpec, ComponentLibraryDependency } from '@memberjunction/interactive-component-types';
-import { UserInfo, Metadata, LogError } from '@memberjunction/global';
+import { UserInfo, Metadata, LogError } from '@memberjunction/core';
 import { ComponentMetadataEngine, ComponentLibraryEntity, ComponentEntityExtended } from '@memberjunction/core-entities';
 
 import { ComponentCompiler } from '../compiler';
 import { ComponentRegistry } from '../registry';
 import { RuntimeContext, ComponentObject } from '../types';
-import { LoadOptions, LoadResult, HierarchyResult, ComponentManagerConfig, CacheEntry, ResolutionMode } from './types';
+import {
+  LoadOptions,
+  LoadResult,
+  HierarchyResult,
+  ComponentManagerConfig,
+  CacheEntry,
+  ResolutionMode
+} from './types';
 
 /**
  * Unified component management system that handles all component operations
@@ -21,16 +28,16 @@ export class ComponentManager {
   private registry: ComponentRegistry;
   private runtimeContext: RuntimeContext;
   private config: ComponentManagerConfig;
-
+  
   // Caching
   private fetchCache: Map<string, CacheEntry> = new Map();
   private registryNotifications: Set<string> = new Set();
   private loadingPromises: Map<string, Promise<LoadResult>> = new Map();
-
+  
   // Metadata engine
   private componentEngine = ComponentMetadataEngine.Instance;
   private graphQLClient: any = null;
-
+  
   constructor(
     compiler: ComponentCompiler,
     registry: ComponentRegistry,
@@ -47,41 +54,44 @@ export class ComponentManager {
       enableUsageTracking: true,
       dependencyBatchSize: 5,
       fetchTimeout: 30000,
-      ...config,
+      ...config
     };
-
+    
     this.log('ComponentManager initialized', {
       debug: this.config.debug,
       cacheTTL: this.config.cacheTTL,
-      usageTracking: this.config.enableUsageTracking,
+      usageTracking: this.config.enableUsageTracking
     });
   }
-
+  
   /**
    * Main entry point - intelligently handles all component operations
    */
-  async loadComponent(spec: ComponentSpec, options: LoadOptions = {}): Promise<LoadResult> {
+  async loadComponent(
+    spec: ComponentSpec,
+    options: LoadOptions = {}
+  ): Promise<LoadResult> {
     const startTime = Date.now();
     const componentKey = this.getComponentKey(spec, options);
-
-    this.log(`Loading component: ${spec.name}`, {
-      key: componentKey,
+    
+    this.log(`Loading component: ${spec.name}`, { 
+      key: componentKey, 
       location: spec.location,
       registry: spec.registry,
-      forceRefresh: options.forceRefresh,
+      forceRefresh: options.forceRefresh 
     });
-
+    
     // Check if already loading to prevent duplicate work
     const existingPromise = this.loadingPromises.get(componentKey);
     if (existingPromise && !options.forceRefresh) {
       this.log(`Component already loading: ${spec.name}, waiting...`);
       return existingPromise;
     }
-
+    
     // Create loading promise
     const loadPromise = this.doLoadComponent(spec, options, componentKey, startTime);
     this.loadingPromises.set(componentKey, loadPromise);
-
+    
     try {
       const result = await loadPromise;
       return result;
@@ -89,45 +99,50 @@ export class ComponentManager {
       this.loadingPromises.delete(componentKey);
     }
   }
-
+  
   /**
    * Internal method that does the actual loading
    */
-  private async doLoadComponent(spec: ComponentSpec, options: LoadOptions, componentKey: string, startTime: number): Promise<LoadResult> {
+  private async doLoadComponent(
+    spec: ComponentSpec,
+    options: LoadOptions,
+    componentKey: string,
+    startTime: number
+  ): Promise<LoadResult> {
     const errors: LoadResult['errors'] = [];
-
+    
     try {
       // STEP 1: Check if already loaded in ComponentRegistry
       const namespace = spec.namespace || options.defaultNamespace || 'Global';
       const version = spec.version || options.defaultVersion || 'latest';
-
+      
       const existing = this.registry.get(spec.name, namespace, version);
       if (existing && !options.forceRefresh && !options.forceRecompile) {
         this.log(`Component found in registry: ${spec.name}`);
-
+        
         // Still need to notify registry for usage tracking
         if (options.trackUsage !== false) {
           await this.notifyRegistryUsageIfNeeded(spec, componentKey);
         }
-
+        
         // Get cached spec if available
         const cachedEntry = this.fetchCache.get(componentKey);
-
+        
         return {
           success: true,
           component: existing,
           spec: cachedEntry?.spec || spec,
-          fromCache: true,
+          fromCache: true
         };
       }
-
+      
       // STEP 2: Fetch full spec if needed
       let fullSpec = spec;
       if (this.needsFetch(spec)) {
         this.log(`Fetching component spec: ${spec.name}`);
         try {
           fullSpec = await this.fetchComponentSpec(spec, options.contextUser, {
-            resolutionMode: options.resolutionMode,
+            resolutionMode: options.resolutionMode
           });
 
           // Cache the fetched spec
@@ -135,13 +150,13 @@ export class ComponentManager {
             spec: fullSpec,
             fetchedAt: new Date(),
             hash: await this.calculateHash(fullSpec),
-            usageNotified: false,
+            usageNotified: false
           });
         } catch (error) {
           errors.push({
             message: `Failed to fetch component: ${error instanceof Error ? error.message : String(error)}`,
             phase: 'fetch',
-            componentName: spec.name,
+            componentName: spec.name
           });
           throw error;
         }
@@ -150,7 +165,7 @@ export class ComponentManager {
         if (spec.location === 'registry' && spec.code) {
           this.log(`Skipping fetch for registry component: ${spec.name} (code already provided)`, {
             location: spec.location,
-            registry: spec.registry,
+            registry: spec.registry
           });
         }
         // Also cache the spec if it has code to avoid re-fetching
@@ -159,16 +174,16 @@ export class ComponentManager {
             spec: fullSpec,
             fetchedAt: new Date(),
             hash: await this.calculateHash(fullSpec),
-            usageNotified: false,
+            usageNotified: false
           });
         }
       }
-
+      
       // STEP 3: Notify registry of usage (exactly once per session)
       if (options.trackUsage !== false) {
         await this.notifyRegistryUsageIfNeeded(fullSpec, componentKey);
       }
-
+      
       // STEP 4: Compile if needed
       let compiledComponent = existing;
       if (!compiledComponent || options.forceRecompile) {
@@ -179,29 +194,39 @@ export class ComponentManager {
           errors.push({
             message: `Failed to compile component: ${error instanceof Error ? error.message : String(error)}`,
             phase: 'compile',
-            componentName: spec.name,
+            componentName: spec.name
           });
           throw error;
         }
       }
-
+      
       // STEP 5: Register in ComponentRegistry
       if (!existing || options.forceRefresh || options.forceRecompile) {
         this.log(`Registering component: ${spec.name}`);
-        this.registry.register(fullSpec.name, compiledComponent, namespace, version);
+        this.registry.register(
+          fullSpec.name,
+          compiledComponent,
+          namespace,
+          version
+        );
       }
-
+      
       // STEP 6: Process dependencies recursively
       const dependencies: Record<string, ComponentObject> = {};
       if (fullSpec.dependencies && fullSpec.dependencies.length > 0) {
         this.log(`Loading ${fullSpec.dependencies.length} dependencies for ${spec.name}`);
-
+        
         // Load dependencies in batches for efficiency
-        const depResults = await this.loadDependenciesBatched(fullSpec.dependencies, { ...options, isDependent: true });
-
+        const depResults = await this.loadDependenciesBatched(
+          fullSpec.dependencies,
+          { ...options, isDependent: true }
+        );
+        
         for (const result of depResults) {
           if (result.success && result.component) {
-            const depSpec = fullSpec.dependencies.find((d) => d.name === (result.spec?.name || ''));
+            const depSpec = fullSpec.dependencies.find(d => 
+              d.name === (result.spec?.name || '')
+            );
             if (depSpec) {
               dependencies[depSpec.name] = result.component;
             }
@@ -210,46 +235,45 @@ export class ComponentManager {
           }
         }
       }
-
+      
       const elapsed = Date.now() - startTime;
       this.log(`Component loaded successfully: ${spec.name} (${elapsed}ms)`, {
         fromCache: false,
-        dependencyCount: Object.keys(dependencies).length,
+        dependencyCount: Object.keys(dependencies).length
       });
-
+      
       return {
         success: errors.length === 0,
         component: compiledComponent,
         spec: fullSpec,
         fromCache: false,
         dependencies,
-        errors: errors.length > 0 ? errors : undefined,
+        errors: errors.length > 0 ? errors : undefined
       };
+      
     } catch (error) {
       const elapsed = Date.now() - startTime;
       this.log(`Failed to load component: ${spec.name} (${elapsed}ms)`, error);
-
+      
       return {
         success: false,
         fromCache: false,
-        errors:
-          errors.length > 0
-            ? errors
-            : [
-                {
-                  message: error instanceof Error ? error.message : String(error),
-                  phase: 'fetch',
-                  componentName: spec.name,
-                },
-              ],
+        errors: errors.length > 0 ? errors : [{
+          message: error instanceof Error ? error.message : String(error),
+          phase: 'fetch',
+          componentName: spec.name
+        }]
       };
     }
   }
-
+  
   /**
    * Load a complete hierarchy efficiently
    */
-  async loadHierarchy(rootSpec: ComponentSpec, options: LoadOptions = {}): Promise<HierarchyResult> {
+  async loadHierarchy(
+    rootSpec: ComponentSpec,
+    options: LoadOptions = {}
+  ): Promise<HierarchyResult> {
     const startTime = Date.now();
     const loaded: string[] = [];
     const errors: HierarchyResult['errors'] = [];
@@ -258,32 +282,40 @@ export class ComponentManager {
       fromCache: 0,
       fetched: 0,
       compiled: 0,
-      totalTime: 0,
+      totalTime: 0
     };
-
+    
     this.log(`Loading component hierarchy: ${rootSpec.name}`, {
       location: rootSpec.location,
-      registry: rootSpec.registry,
+      registry: rootSpec.registry
     });
-
+    
     try {
       // Initialize component engine if needed (skip in browser context where it doesn't exist)
       if (this.componentEngine && typeof this.componentEngine.Config === 'function') {
         await this.componentEngine.Config(false, options.contextUser);
       }
-
+      
       // Load the root component and all its dependencies
-      const result = await this.loadComponentRecursive(rootSpec, options, loaded, errors, components, stats, new Set());
-
+      const result = await this.loadComponentRecursive(
+        rootSpec,
+        options,
+        loaded,
+        errors,
+        components,
+        stats,
+        new Set()
+      );
+      
       stats.totalTime = Date.now() - startTime;
-
+      
       this.log(`Hierarchy loaded: ${rootSpec.name}`, {
         success: errors.length === 0,
         loadedCount: loaded.length,
         errors: errors.length,
-        ...stats,
+        ...stats
       });
-
+      
       // Unwrap components before returning
       // Components are ComponentObject wrappers, but consumers expect just the React components
       const unwrappedComponents: Record<string, ComponentObject> = {};
@@ -296,7 +328,7 @@ export class ComponentManager {
           unwrappedComponents[name] = componentObject;
         }
       }
-
+      
       return {
         success: errors.length === 0,
         rootComponent: result.component,
@@ -304,29 +336,27 @@ export class ComponentManager {
         loadedComponents: loaded,
         errors,
         components: unwrappedComponents,
-        stats,
+        stats
       };
+      
     } catch (error) {
       stats.totalTime = Date.now() - startTime;
-
+      
       this.log(`Failed to load hierarchy: ${rootSpec.name}`, error);
-
+      
       return {
         success: false,
         loadedComponents: loaded,
-        errors: [
-          ...errors,
-          {
-            message: error instanceof Error ? error.message : String(error),
-            phase: 'fetch',
-            componentName: rootSpec.name,
-          },
-        ],
-        stats,
+        errors: [...errors, {
+          message: error instanceof Error ? error.message : String(error),
+          phase: 'fetch',
+          componentName: rootSpec.name
+        }],
+        stats
       };
     }
   }
-
+  
   /**
    * Recursively load a component and its dependencies
    */
@@ -340,7 +370,7 @@ export class ComponentManager {
     visited: Set<string>
   ): Promise<LoadResult> {
     const componentKey = this.getComponentKey(spec, options);
-
+    
     // Prevent circular dependencies
     if (visited.has(componentKey)) {
       this.log(`Circular dependency detected: ${spec.name}`);
@@ -348,18 +378,18 @@ export class ComponentManager {
         success: true,
         component: components[spec.name],
         spec,
-        fromCache: true,
+        fromCache: true
       };
     }
     visited.add(componentKey);
-
+    
     // Load this component
     const result = await this.loadComponent(spec, options);
-
+    
     if (result.success && result.component) {
       loaded.push(spec.name);
       components[spec.name] = result.component;
-
+      
       // Update stats
       if (stats) {
         if (result.fromCache) stats.fromCache++;
@@ -368,7 +398,7 @@ export class ComponentManager {
           stats.compiled++;
         }
       }
-
+      
       // Load dependencies
       if (result.spec?.dependencies) {
         for (const dep of result.spec.dependencies) {
@@ -391,33 +421,44 @@ export class ComponentManager {
             this.log(`Dependency ${depSpec.name} is a local registry component (registry=undefined)`);
           }
 
-          await this.loadComponentRecursive(depSpec, { ...options, isDependent: true }, loaded, errors, components, stats, visited);
+          await this.loadComponentRecursive(
+            depSpec,
+            { ...options, isDependent: true },
+            loaded,
+            errors,
+            components,
+            stats,
+            visited
+          );
         }
       }
     } else if (result.errors) {
       errors.push(...result.errors);
     }
-
+    
     return result;
   }
-
+  
   /**
    * Load dependencies in batches for efficiency
    */
-  private async loadDependenciesBatched(dependencies: ComponentSpec[], options: LoadOptions): Promise<LoadResult[]> {
+  private async loadDependenciesBatched(
+    dependencies: ComponentSpec[],
+    options: LoadOptions
+  ): Promise<LoadResult[]> {
     const batchSize = this.config.dependencyBatchSize || 5;
     const results: LoadResult[] = [];
-
+    
     for (let i = 0; i < dependencies.length; i += batchSize) {
       const batch = dependencies.slice(i, i + batchSize);
-      const batchPromises = batch.map((dep) => this.loadComponent(dep, options));
+      const batchPromises = batch.map(dep => this.loadComponent(dep, options));
       const batchResults = await Promise.all(batchPromises);
       results.push(...batchResults);
     }
-
+    
     return results;
   }
-
+  
   /**
    * Check if a component needs to be fetched from a registry
    */
@@ -427,10 +468,10 @@ export class ComponentManager {
     // 2. It's missing required fields
     return spec.location === 'registry' && !spec.code;
   }
-
+  
   /**
    * Fetch a component specification from a registry (local or external)
-   *
+   * 
    * Convention: When location === 'registry' and registry === undefined,
    * the component is looked up in the local ComponentMetadataEngine.
    * This allows components to reference local registry components without
@@ -444,94 +485,100 @@ export class ComponentManager {
     // Check cache first
     const cacheKey = this.getComponentKey(spec, {});
     const cached = this.fetchCache.get(cacheKey);
-
+    
     if (cached && this.isCacheValid(cached)) {
       this.log(`Using cached spec for: ${spec.name}`);
       return cached.spec;
     }
-
+    
     // Handle LOCAL registry components (registry is null/undefined)
     if (!spec.registry) {
       this.log(`Fetching from local registry: ${spec.name}`);
-
+      
       // Find component in local ComponentMetadataEngine
-      const localComponent = this.componentEngine.Components?.find((c: ComponentEntityExtended) => {
-        // Match by name (case-insensitive for better compatibility)
-        const nameMatch = c.Name?.toLowerCase() === spec.name?.toLowerCase();
-
-        // Match by namespace if provided (handle different formats)
-        const namespaceMatch = !spec.namespace || c.Namespace?.toLowerCase() === spec.namespace?.toLowerCase();
-
-        if (nameMatch && !namespaceMatch) {
+      const localComponent = this.componentEngine.Components?.find(
+        (c: ComponentEntityExtended) => {
+          // Match by name (case-insensitive for better compatibility)
+          const nameMatch = c.Name?.toLowerCase() === spec.name?.toLowerCase();
+          
+          // Match by namespace if provided (handle different formats)
+          const namespaceMatch = !spec.namespace || c.Namespace?.toLowerCase() === spec.namespace?.toLowerCase();
+
+          if (nameMatch && !namespaceMatch) {
+          }
+          
+          return nameMatch && namespaceMatch;
         }
-
-        return nameMatch && namespaceMatch;
-      });
-
+      );
+      
       if (!localComponent) {
         throw new Error(`Local component not found: ${spec.name}`);
       }
-
+      
       // Parse specification from local component
       if (!localComponent.Specification) {
         throw new Error(`Local component ${spec.name} has no specification`);
       }
-
+      
       const fullSpec = JSON.parse(localComponent.Specification);
-
+      
       // Cache it
       this.fetchCache.set(cacheKey, {
         spec: fullSpec,
         fetchedAt: new Date(),
-        usageNotified: false,
+        usageNotified: false
       });
-
+      
       return fullSpec;
     }
-
+    
     // Handle EXTERNAL registry components (registry has a name)
     // Initialize GraphQL client if needed
     if (!this.graphQLClient) {
       await this.initializeGraphQLClient();
     }
-
+    
     if (!this.graphQLClient) {
       throw new Error('GraphQL client not available for registry fetching');
     }
-
+    
     // Fetch from external registry
     this.log(`Fetching from external registry: ${spec.registry}/${spec.name}`);
-
+    
     const fullSpec = await this.graphQLClient.GetRegistryComponent({
       registryName: spec.registry,
       namespace: spec.namespace || 'Global',
       name: spec.name,
-      version: spec.version || 'latest',
+      version: spec.version || 'latest'
     });
-
+    
     if (!fullSpec) {
       throw new Error(`Component not found in registry: ${spec.registry}/${spec.name}`);
     }
-
+    
     // Apply resolution mode if specified
     const processedSpec = this.applyResolutionMode(fullSpec, spec, options?.resolutionMode);
-
+    
     // Cache it
     this.fetchCache.set(cacheKey, {
       spec: processedSpec,
       fetchedAt: new Date(),
-      usageNotified: false,
+      usageNotified: false
     });
-
+    
     return processedSpec;
   }
-
+  
   /**
    * Apply resolution mode to a fetched spec (recursively including dependencies)
    */
-  private applyResolutionMode(fullSpec: ComponentSpec, originalSpec: ComponentSpec, resolutionMode?: ResolutionMode): ComponentSpec {
+  private applyResolutionMode(
+    fullSpec: ComponentSpec,
+    originalSpec: ComponentSpec,
+    resolutionMode?: ResolutionMode
+  ): ComponentSpec {
     let processedSpec: ComponentSpec;
-
+    
     if (resolutionMode === 'embed') {
       // Convert to embedded format for test harness
       processedSpec = {
@@ -548,47 +595,51 @@ export class ComponentManager {
         location: originalSpec.location,
         registry: originalSpec.registry,
         namespace: originalSpec.namespace || fullSpec.namespace,
-        name: originalSpec.name || fullSpec.name,
+        name: originalSpec.name || fullSpec.name
       };
     }
-
+    
     // Recursively apply resolution mode to dependencies
     if (processedSpec.dependencies && processedSpec.dependencies.length > 0) {
-      processedSpec.dependencies = processedSpec.dependencies.map((dep) => {
+      processedSpec.dependencies = processedSpec.dependencies.map(dep => {
         // For dependencies, use the dep itself as both full and original spec
         // since they've already been fetched and processed
         return this.applyResolutionMode(dep, dep, resolutionMode);
       });
     }
-
+    
     return processedSpec;
   }
 
   /**
    * Compile a component specification
    */
-  private async compileComponent(spec: ComponentSpec, options: LoadOptions): Promise<ComponentObject> {
+  private async compileComponent(
+    spec: ComponentSpec,
+    options: LoadOptions
+  ): Promise<ComponentObject> {
     // Get all available libraries - use passed libraries or fall back to ComponentMetadataEngine
     const allLibraries = options.allLibraries || this.componentEngine.ComponentLibraries || [];
-
+    
     // Filter valid libraries
-    const validLibraries = spec.libraries?.filter(
-      (lib) => lib && lib.name && lib.globalVariable && lib.name !== 'unknown' && lib.globalVariable !== 'undefined'
+    const validLibraries = spec.libraries?.filter(lib => 
+      lib && lib.name && lib.globalVariable && 
+      lib.name !== 'unknown' && lib.globalVariable !== 'undefined'
     );
-
+    
     // Compile the component
     const result = await this.compiler.compile({
       componentName: spec.name,
       componentCode: spec.code || '',
       libraries: validLibraries,
       dependencies: spec.dependencies,
-      allLibraries,
+      allLibraries
     });
-
+    
     if (!result.success || !result.component) {
       throw new Error(result.error?.message || 'Compilation failed');
     }
-
+    
     // Add loaded libraries to runtime context
     if (result.loadedLibraries && result.loadedLibraries.size > 0) {
       if (!this.runtimeContext.libraries) {
@@ -598,38 +649,41 @@ export class ComponentManager {
         this.runtimeContext.libraries![key] = value;
       });
     }
-
+    
     // Get the component object from the factory
     const componentObject = result.component.factory(
       this.runtimeContext,
       undefined, // styles
       {} // components - will be injected by parent
     );
-
+    
     return componentObject;
   }
-
+  
   /**
    * Notify registry of component usage for licensing
    * Only happens once per component per session
    */
-  private async notifyRegistryUsageIfNeeded(spec: ComponentSpec, componentKey: string): Promise<void> {
+  private async notifyRegistryUsageIfNeeded(
+    spec: ComponentSpec,
+    componentKey: string
+  ): Promise<void> {
     if (!spec.registry || !this.config.enableUsageTracking) {
       return; // Only for external registry components with tracking enabled
     }
-
+    
     const notificationKey = `${spec.registry}:${componentKey}`;
     if (this.registryNotifications.has(notificationKey)) {
       this.log(`Usage already notified for: ${spec.name}`);
       return; // Already notified this session
     }
-
+    
     try {
       // In the future, make lightweight usage notification call to registry
       // For now, the fetch itself serves as the notification
       this.log(`Notifying registry usage for: ${spec.name}`);
       this.registryNotifications.add(notificationKey);
-
+      
       // Update cache entry
       const cached = this.fetchCache.get(componentKey);
       if (cached) {
@@ -640,7 +694,7 @@ export class ComponentManager {
       console.warn(`Failed to notify registry usage for ${componentKey}:`, error);
     }
   }
-
+  
   /**
    * Initialize GraphQL client for registry operations
    */
@@ -656,7 +710,7 @@ export class ComponentManager {
       LogError(`Failed to initialize GraphQL client: ${error instanceof Error ? error.message : String(error)}`);
     }
   }
-
+  
   /**
    * Check if a cache entry is still valid
    */
@@ -664,7 +718,7 @@ export class ComponentManager {
     const age = Date.now() - entry.fetchedAt.getTime();
     return age < (this.config.cacheTTL || 3600000);
   }
-
+  
   /**
    * Calculate a hash for a component spec (for cache validation)
    */
@@ -674,19 +728,19 @@ export class ComponentManager {
       name: spec.name,
       version: spec.version,
       code: spec.code,
-      libraries: spec.libraries,
+      libraries: spec.libraries
     });
-
+    
     // Simple hash function (in production, use crypto)
     let hash = 0;
     for (let i = 0; i < content.length; i++) {
       const char = content.charCodeAt(i);
-      hash = (hash << 5) - hash + char;
+      hash = ((hash << 5) - hash) + char;
       hash = hash & hash; // Convert to 32bit integer
     }
     return hash.toString(16);
   }
-
+  
   /**
    * Generate a unique key for a component
    */
@@ -696,7 +750,7 @@ export class ComponentManager {
     const version = spec.version || options.defaultVersion || 'latest';
     return `${registry}:${namespace}:${spec.name}:${version}`;
   }
-
+  
   /**
    * Clear all caches
    */
@@ -706,7 +760,7 @@ export class ComponentManager {
     this.loadingPromises.clear();
     this.log('All caches cleared');
   }
-
+  
   /**
    * Get cache statistics
    */
@@ -718,10 +772,10 @@ export class ComponentManager {
     return {
       fetchCacheSize: this.fetchCache.size,
       notificationsCount: this.registryNotifications.size,
-      loadingCount: this.loadingPromises.size,
+      loadingCount: this.loadingPromises.size
     };
   }
-
+  
   /**
    * Log a message if debug is enabled
    */
@@ -730,4 +784,4 @@ export class ComponentManager {
       console.log(`🎯 [ComponentManager] ${message}`, data || '');
     }
   }
-}
+}