@memberjunction/react-runtime 2.89.0 → 2.91.0

package/src/compiler/component-compiler.ts

@@ -4,6 +4,7 @@
  * @module @memberjunction/react-runtime/compiler
  */
 
+import { UserInfo } from '@memberjunction/core';
 import { 
   CompileOptions, 
   CompiledComponent, 
@@ -12,6 +13,8 @@ import {
   ComponentError,
   RuntimeContext
 } from '../types';
+import { LibraryRegistry } from '../utilities/library-registry';
+import { ComponentLibraryEntity } from '@memberjunction/core-entities';
 
 /**
  * Default compiler configuration
@@ -78,6 +81,9 @@ export class ComponentCompiler {
       // Validate inputs
       this.validateCompileOptions(options);
 
+      // Load required libraries if specified
+      const loadedLibraries = await this.loadRequiredLibraries(options.libraries!, options.allLibraries);
+
       // Transpile the component code
       const transpiledCode = this.transpileComponent(
         options.componentCode,
@@ -85,10 +91,11 @@ export class ComponentCompiler {
         options
       );
 
-      // Create the component factory
+      // Create the component factory with loaded libraries
       const componentFactory = this.createComponentFactory(
         transpiledCode,
-        options.componentName
+        options.componentName,
+        loadedLibraries
       );
 
       // Build the compiled component
@@ -137,7 +144,7 @@ export class ComponentCompiler {
       throw new Error('Babel instance not set. Call setBabelInstance() first.');
     }
 
-    const wrappedCode = this.wrapComponentCode(code, componentName);
+    const wrappedCode = this.wrapComponentCode(code, componentName, options.libraries);
 
     try {
       const result = this.babelInstance.transform(wrappedCode, {
@@ -158,16 +165,25 @@ export class ComponentCompiler {
    * Wraps component code in a factory function for execution
    * @param componentCode - Raw component code
    * @param componentName - Name of the component
+   * @param libraries - Optional library dependencies
    * @returns Wrapped component code
    */
-  private wrapComponentCode(componentCode: string, componentName: string): string {
+  private wrapComponentCode(componentCode: string, componentName: string, libraries?: any[]): string {
+    // Generate library declarations if libraries are provided
+    const libraryDeclarations = libraries && libraries.length > 0
+      ? libraries
+          .filter(lib => lib.globalVariable) // Only include libraries with globalVariable
+          .map(lib => `const ${lib.globalVariable} = libraries['${lib.globalVariable}'];`)
+          .join('\n        ')
+      : '';
+
     return `
       function createComponent(
         React, ReactDOM, 
         useState, useEffect, useCallback, useMemo, useRef, useContext, useReducer, useLayoutEffect,
         libraries, styles, console
       ) {
-        ${componentCode}
+        ${libraryDeclarations ? libraryDeclarations + '\n        ' : ''}${componentCode}
         
         // Ensure the component exists
         if (typeof ${componentName} === 'undefined') {
@@ -190,13 +206,219 @@ export class ComponentCompiler {
     `;
   }
 
+  /**
+   * Load required libraries from the registry
+   * @param libraries - Array of library dependencies
+   * @param contextUser - Context user for accessing library registry
+   * @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 (!libraries || libraries.length === 0) {
+      console.log('📚 No libraries to load, returning empty map');
+      return loadedLibraries;
+    }
+
+    // Only works in browser environment
+    if (typeof window === 'undefined') {
+      console.warn('Library loading is only supported in browser environments');
+      return loadedLibraries;
+    }
+
+    // Initialize LibraryRegistry with componentLibraries if provided
+    if (componentLibraries) {
+      await LibraryRegistry.Config(false, componentLibraries);
+    } else {
+      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`);
+      }
+
+      // 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'}'`);
+      }
+
+      // 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;
+      }
+
+      // Load CSS files if the library requires them
+      const versionInfo = libraryDef.versions[resolvedVersion || libraryDef.defaultVersion];
+      if (versionInfo?.cssUrls) {
+        await this.loadStyles(versionInfo.cssUrls);
+      }
+
+      // 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);
+      
+      // 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);
+      
+      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}'`);
+      }
+    });
+
+    await Promise.all(loadPromises);
+    
+    console.log(`✅ All libraries loaded successfully. Total: ${loadedLibraries.size}`);
+    console.log('📚 Loaded libraries map:', Array.from(loadedLibraries.keys()));
+    
+    return loadedLibraries;
+  }
+
+  /**
+   * Load CSS stylesheets dynamically
+   * @param urls - Array of CSS URLs to load
+   * @returns Promise that resolves when all stylesheets are loaded
+   */
+  private async loadStyles(urls: string[]): Promise<void> {
+    const loadPromises = urls.map(url => {
+      return new Promise<void>((resolve) => {
+        // Check if stylesheet already exists
+        const existingLink = document.querySelector(`link[href="${url}"]`);
+        if (existingLink) {
+          resolve();
+          return;
+        }
+
+        // Create new link element
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = url;
+        
+        // CSS load events are not reliable cross-browser, so resolve immediately
+        // The CSS will load asynchronously but won't block component rendering
+        document.head.appendChild(link);
+        resolve();
+      });
+    });
+
+    await Promise.all(loadPromises);
+  }
+
+  /**
+   * Load a script dynamically
+   * @param url - Script URL
+   * @param globalName - Expected global variable name
+   * @returns Promise that resolves when script is loaded
+   */
+  private loadScript(url: string, globalName: string): Promise<void> {
+    return new Promise((resolve, reject) => {
+      // Check if script already exists
+      const existingScript = document.querySelector(`script[src="${url}"]`);
+      if (existingScript) {
+        // Wait for it to finish loading with exponential backoff
+        let attempts = 0;
+        const maxAttempts = 50; // 5 seconds total with 100ms intervals
+        const checkLoaded = () => {
+          if ((window as any)[globalName]) {
+            resolve();
+          } else if (attempts >= maxAttempts) {
+            reject(new Error(`${globalName} not found after ${maxAttempts * 100}ms waiting for existing script`));
+          } else {
+            attempts++;
+            setTimeout(checkLoaded, 100);
+          }
+        };
+        checkLoaded();
+        return;
+      }
+
+      // Create new script element
+      const script = document.createElement('script');
+      script.src = url;
+      script.async = true;
+      
+      script.onload = () => {
+        // More robust checking with multiple attempts
+        let attempts = 0;
+        const maxAttempts = 20; // 2 seconds total
+        const checkInterval = 100; // Check every 100ms
+        
+        const checkGlobal = () => {
+          if ((window as any)[globalName]) {
+            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())));
+            reject(new Error(`${globalName} not found after loading script from ${url}`));
+          } else {
+            attempts++;
+            setTimeout(checkGlobal, checkInterval);
+          }
+        };
+        
+        // Start checking immediately (don't wait 100ms first)
+        checkGlobal();
+      };
+      
+      script.onerror = () => {
+        reject(new Error(`Failed to load script: ${url}`));
+      };
+      
+      document.head.appendChild(script);
+    });
+  }
+
   /**
    * Creates a component factory function from transpiled code
    * @param transpiledCode - Transpiled JavaScript code
    * @param componentName - Name of the component
+   * @param loadedLibraries - Map of loaded libraries
    * @returns Component factory function
    */
-  private createComponentFactory(transpiledCode: string, componentName: string): Function {
+  private createComponentFactory(
+    transpiledCode: string, 
+    componentName: string,
+    loadedLibraries: Map<string, any>
+  ): Function {
     try {
       // Create the factory function with all React hooks
       const factoryCreator = new Function(
@@ -209,6 +431,12 @@ export class ComponentCompiler {
       // Return a function that executes the factory with runtime context
       return (context: RuntimeContext, styles: any = {}) => {
         const { React, ReactDOM, libraries = {} } = context;
+        
+        // Merge loaded libraries with context libraries
+        const mergedLibraries = { ...libraries };
+        loadedLibraries.forEach((value, key) => {
+          mergedLibraries[key] = value;
+        });
 
         // Execute the factory creator to get the createComponent function
         const createComponentFn = factoryCreator(
@@ -222,7 +450,7 @@ export class ComponentCompiler {
           React.useContext,
           React.useReducer,
           React.useLayoutEffect,
-          libraries,
+          mergedLibraries,
           styles,
           console
         );
@@ -239,7 +467,7 @@ export class ComponentCompiler {
           React.useContext,
           React.useReducer,
           React.useLayoutEffect,
-          libraries,
+          mergedLibraries,
           styles,
           console
         );
@@ -366,7 +594,8 @@ export class ComponentCompiler {
     if (this.compilationCache.size >= this.config.maxCacheSize) {
       // Remove oldest entry (first in map)
       const firstKey = this.compilationCache.keys().next().value;
-      this.compilationCache.delete(firstKey);
+      if (firstKey)
+        this.compilationCache.delete(firstKey);
     }
 
     const cacheKey = this.createCacheKey(component.name, code);

package/src/index.ts

@@ -71,10 +71,6 @@ export {
 } from './runtime';
 
 // Export utilities
-export { 
-  RuntimeUtilities, 
-  createRuntimeUtilities 
-} from './utilities/runtime-utilities';
 
 export { 
   SetupStyles,
@@ -93,6 +89,11 @@ export {
   LibraryLoadResult
 } from './utilities/library-loader';
 
+export {
+  LibraryRegistry,
+  LibraryDefinition
+} from './utilities/library-registry';
+
 export {
   ComponentErrorAnalyzer,
   FailedComponentInfo

package/src/registry/component-registry.ts

@@ -167,6 +167,24 @@ export class ComponentRegistry {
     return components;
   }
 
+  /**
+   * 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
+   */
+  getAll(namespace: string = 'Global', version: string = 'v1'): Record<string, any> {
+    const components: Record<string, any> = {};
+    
+    for (const entry of this.registry.values()) {
+      if (entry.metadata.namespace === namespace && entry.metadata.version === version) {
+        components[entry.metadata.name] = entry.component;
+      }
+    }
+
+    return components;
+  }
+
   /**
    * Gets all registered namespaces
    * @returns Array of unique namespace names

package/src/runtime/component-hierarchy.ts

@@ -7,13 +7,14 @@
 import { 
   CompilationResult,
   CompileOptions,
-  ComponentStyles,
   RuntimeContext
 } from '../types';
 import { ComponentCompiler } from '../compiler';
 import { ComponentRegistry } from '../registry';
 
-import { ComponentSpec } from '@memberjunction/interactive-component-types';
+import { ComponentSpec, ComponentStyles } from '@memberjunction/interactive-component-types';
+import { UserInfo } from '@memberjunction/core';
+import { ComponentLibraryEntity } from '@memberjunction/core-entities';
 
 /**
  * Result of a hierarchy registration operation
@@ -48,6 +49,10 @@ export interface HierarchyRegistrationOptions {
   continueOnError?: boolean;
   /** Whether to override existing components */
   allowOverride?: boolean;
+  /**
+   * Required, metadata for all possible libraries allowed by the system
+   */
+  allLibraries: ComponentLibraryEntity[];
 }
 
 /**
@@ -68,7 +73,7 @@ export class ComponentHierarchyRegistrar {
    */
   async registerHierarchy(
     rootSpec: ComponentSpec,
-    options: HierarchyRegistrationOptions = {}
+    options: HierarchyRegistrationOptions
   ): Promise<HierarchyRegistrationResult> {
     const {
       styles,
@@ -78,6 +83,13 @@ export class ComponentHierarchyRegistrar {
       allowOverride = true
     } = options;
 
+    console.log('🌳 ComponentHierarchyRegistrar.registerHierarchy:', {
+      rootComponent: rootSpec.name,
+      hasLibraries: !!(rootSpec.libraries && rootSpec.libraries.length > 0),
+      libraryCount: rootSpec.libraries?.length || 0,
+      libraries: rootSpec.libraries?.map(l => l.name)
+    });
+
     const registeredComponents: string[] = [];
     const errors: ComponentRegistrationError[] = [];
     const warnings: string[] = [];
@@ -85,7 +97,7 @@ export class ComponentHierarchyRegistrar {
     // Register the root component
     const rootResult = await this.registerSingleComponent(
       rootSpec,
-      { styles, namespace, version, allowOverride }
+      { styles, namespace, version, allowOverride, allLibraries: options.allLibraries }
     );
 
     if (rootResult.success) {
@@ -102,7 +114,7 @@ export class ComponentHierarchyRegistrar {
     if (childComponents.length > 0) {
       const childResult = await this.registerChildComponents(
         childComponents,
-        { styles, namespace, version, continueOnError, allowOverride },
+        { styles, namespace, version, continueOnError, allowOverride, allLibraries: options.allLibraries },
         registeredComponents,
         errors,
         warnings
@@ -130,6 +142,7 @@ export class ComponentHierarchyRegistrar {
       namespace?: string;
       version?: string;
       allowOverride?: boolean;
+      allLibraries: ComponentLibraryEntity[];
     }
   ): Promise<{ success: boolean; error?: ComponentRegistrationError }> {
     const { styles, namespace = 'Global', version = 'v1', allowOverride = true } = options;
@@ -160,9 +173,16 @@ export class ComponentHierarchyRegistrar {
       const compileOptions: CompileOptions = {
         componentName: spec.name,
         componentCode: spec.code,
-        styles
+        styles,
+        libraries: spec.libraries, // Pass along library dependencies from the spec
+        allLibraries: options.allLibraries
       };
 
+      console.log(`🔧 Compiling component ${spec.name} with libraries:`, {
+        libraryCount: spec.libraries?.length || 0,
+        libraries: spec.libraries?.map(l => ({ name: l.name, globalVariable: l.globalVariable }))
+      });
+
       const compilationResult = await this.compiler.compile(compileOptions);
 
       if (!compilationResult.success) {
@@ -222,7 +242,8 @@ export class ComponentHierarchyRegistrar {
         styles: options.styles,
         namespace: options.namespace,
         version: options.version,
-        allowOverride: options.allowOverride
+        allowOverride: options.allowOverride,
+        allLibraries: options.allLibraries
       });
 
       if (childResult.success) {
@@ -265,7 +286,7 @@ export async function registerComponentHierarchy(
   compiler: ComponentCompiler,
   registry: ComponentRegistry,
   runtimeContext: RuntimeContext,
-  options: HierarchyRegistrationOptions = {}
+  options: HierarchyRegistrationOptions
 ): Promise<HierarchyRegistrationResult> {
   const registrar = new ComponentHierarchyRegistrar(compiler, registry, runtimeContext);
   return registrar.registerHierarchy(rootSpec, options);

package/src/runtime/prop-builder.ts

@@ -4,7 +4,8 @@
  * @module @memberjunction/react-runtime/runtime
  */
 
-import { ComponentProps, ComponentCallbacks, ComponentStyles } from '../types';
+import { ComponentStyles } from '@memberjunction/interactive-component-types';
+import { ComponentProps, ComponentCallbacks } from '../types';
 import { Subject, debounceTime, Subscription } from 'rxjs';
 
 /**
@@ -187,7 +188,7 @@ export function mergeProps(...propsList: Partial<ComponentProps>[]): ComponentPr
     utilities: {},
     callbacks: {},
     components: {},
-    styles: {}
+    styles: {} as ComponentStyles
   };
 
   for (const props of propsList) {

package/src/types/index.ts

@@ -4,6 +4,10 @@
  * @module @memberjunction/react-runtime/types
  */
 
+import { UserInfo } from '@memberjunction/core';
+import { ComponentLibraryEntity } from '@memberjunction/core-entities';
+import { ComponentLibraryDependency, ComponentStyles } from '@memberjunction/interactive-component-types';
+
 /**
  * Represents a compiled React component with its metadata
  */
@@ -36,20 +40,17 @@ export interface CompileOptions {
   babelPlugins?: string[];
   /** Custom Babel presets to use */
   babelPresets?: string[];
-}
 
-/**
- * Component styles that can be applied
- */
-export interface ComponentStyles {
-  /** CSS classes to apply */
-  className?: string;
-  /** Inline styles */
-  style?: Record<string, any>;
-  /** Global CSS to inject */
-  globalCss?: string;
+  /** Library dependencies that the component requires */
+  libraries?: ComponentLibraryDependency[];
+
+  /**
+   * Required, metadata for all possible libraries allowed by the system
+   */
+  allLibraries: ComponentLibraryEntity[];
 }
 
+
 /**
  * Registry entry for a compiled component
  */

package/src/utilities/index.ts

@@ -3,10 +3,10 @@
  * @module @memberjunction/react-runtime/utilities
  */
 
-export * from './runtime-utilities';
 export * from './component-styles';
 export * from './standard-libraries';
 export * from './library-loader';
+export * from './library-registry';
 export * from './component-error-analyzer';
 export * from './resource-manager';
 export * from './cache-manager';

package/src/utilities/library-loader.ts

@@ -99,6 +99,24 @@ export class LibraryLoader {
     const ReactDOM = coreResults.find((_, i) => coreLibraries[i].globalVariable === 'ReactDOM');
     const Babel = coreResults.find((_, i) => coreLibraries[i].globalVariable === 'Babel');
     
+    // Expose React and ReactDOM as globals for UMD libraries that expect them
+    // Many React component libraries (Recharts, Victory, etc.) expect these as globals
+    if (typeof window !== 'undefined') {
+      if (React && !(window as any).React) {
+        (window as any).React = React;
+        console.log('✓ Exposed React as window.React for UMD compatibility');
+      }
+      if (ReactDOM && !(window as any).ReactDOM) {
+        (window as any).ReactDOM = ReactDOM;
+        console.log('✓ Exposed ReactDOM as window.ReactDOM for UMD compatibility');
+      }
+      // Also expose PropTypes as empty object if not present (for older libraries)
+      if (!(window as any).PropTypes) {
+        (window as any).PropTypes = {};
+        console.log('✓ Exposed empty PropTypes as window.PropTypes for UMD compatibility');
+      }
+    }
+    
     // Now load plugin libraries from configuration
     const config = StandardLibraryManager.getConfiguration();
     const enabledLibraries = StandardLibraryManager.getEnabledLibraries();