@memberjunction/react-runtime 2.90.0 → 2.92.0

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@memberjunction/react-runtime",
-  "version": "2.90.0",
+  "version": "2.92.0",
   "description": "Platform-agnostic React component runtime for MemberJunction. Provides core compilation, registry, and execution capabilities for React components in any JavaScript environment.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "browser": "dist/runtime.umd.js",
   "scripts": {
-    "build": "tsc",
+    "build": "npm run build:node && npm run build:umd",
+    "build:node": "tsc",
+    "build:umd": "webpack --config webpack.umd.config.js",
     "build:clean": "rimraf ./dist && npm run build",
     "watch": "tsc -w",
     "patchVersion": "npm version patch",
@@ -25,9 +28,10 @@
   },
   "homepage": "https://github.com/MemberJunction/MJ#readme",
   "dependencies": {
-    "@memberjunction/core": "2.90.0",
-    "@memberjunction/global": "2.90.0",
-    "@memberjunction/interactive-component-types": "2.90.0",
+    "@memberjunction/core": "2.92.0",
+    "@memberjunction/global": "2.92.0",
+    "@memberjunction/interactive-component-types": "2.92.0",
+    "@memberjunction/core-entities": "2.92.0",
     "@babel/standalone": "^7.23.5",
     "rxjs": "^7.8.1"
   },
@@ -35,6 +39,12 @@
     "@types/node": "20.10.0",
     "jest": "^27.5.1",
     "rimraf": "^3.0.2",
-    "typescript": "~5.3.3"
+    "typescript": "~5.3.3",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4",
+    "babel-loader": "^9.1.3",
+    "@babel/core": "^7.23.5",
+    "@babel/preset-env": "^7.23.5",
+    "path-browserify": "^1.0.1"
   }
 }

package/src/compiler/component-compiler.ts

@@ -4,6 +4,7 @@
  * @module @memberjunction/react-runtime/compiler
  */
 
+import { UserInfo } from '@memberjunction/core';
 import { 
   CompileOptions, 
   CompiledComponent, 
@@ -13,6 +14,7 @@ import {
   RuntimeContext
 } from '../types';
 import { LibraryRegistry } from '../utilities/library-registry';
+import { ComponentLibraryEntity } from '@memberjunction/core-entities';
 
 /**
  * Default compiler configuration
@@ -80,7 +82,7 @@ export class ComponentCompiler {
       this.validateCompileOptions(options);
 
       // Load required libraries if specified
-      const loadedLibraries = await this.loadRequiredLibraries(options.libraries);
+      const loadedLibraries = await this.loadRequiredLibraries(options.libraries!, options.allLibraries);
 
       // Transpile the component code
       const transpiledCode = this.transpileComponent(
@@ -142,7 +144,7 @@ export class ComponentCompiler {
       throw new Error('Babel instance not set. Call setBabelInstance() first.');
     }
 
-    const wrappedCode = this.wrapComponentCode(code, componentName, options.libraries);
+    const wrappedCode = this.wrapComponentCode(code, componentName, options.libraries, options.dependencies);
 
     try {
       const result = this.babelInstance.transform(wrappedCode, {
@@ -164,9 +166,10 @@ export class ComponentCompiler {
    * @param componentCode - Raw component code
    * @param componentName - Name of the component
    * @param libraries - Optional library dependencies
+   * @param dependencies - Optional child component dependencies
    * @returns Wrapped component code
    */
-  private wrapComponentCode(componentCode: string, componentName: string, libraries?: any[]): string {
+  private wrapComponentCode(componentCode: string, componentName: string, libraries?: any[], dependencies?: Array<{ name: string }>): string {
     // Generate library declarations if libraries are provided
     const libraryDeclarations = libraries && libraries.length > 0
       ? libraries
@@ -174,14 +177,21 @@ export class ComponentCompiler {
           .map(lib => `const ${lib.globalVariable} = libraries['${lib.globalVariable}'];`)
           .join('\n        ')
       : '';
+    
+    // Generate component declarations if dependencies are provided
+    const componentDeclarations = dependencies && dependencies.length > 0
+      ? dependencies
+          .map(dep => `const ${dep.name} = components['${dep.name}'];`)
+          .join('\n        ')
+      : '';
 
     return `
       function createComponent(
         React, ReactDOM, 
         useState, useEffect, useCallback, useMemo, useRef, useContext, useReducer, useLayoutEffect,
-        libraries, styles, console
+        libraries, styles, console, components
       ) {
-        ${libraryDeclarations ? libraryDeclarations + '\n        ' : ''}${componentCode}
+        ${libraryDeclarations ? libraryDeclarations + '\n        ' : ''}${componentDeclarations ? componentDeclarations + '\n        ' : ''}${componentCode}
         
         // Ensure the component exists
         if (typeof ${componentName} === 'undefined') {
@@ -207,12 +217,19 @@ 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[]): Promise<Map<string, any>> {
+  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;
     }
 
@@ -222,28 +239,49 @@ export class ComponentCompiler {
       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
-      if (!LibraryRegistry.isApproved(lib.name)) {
+      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;
       }
@@ -255,20 +293,29 @@ export class ComponentCompiler {
       }
 
       // 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;
   }
 
@@ -313,11 +360,16 @@ export class ComponentCompiler {
       // Check if script already exists
       const existingScript = document.querySelector(`script[src="${url}"]`);
       if (existingScript) {
-        // Wait for it to finish loading
+        // 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);
           }
         };
@@ -331,14 +383,28 @@ export class ComponentCompiler {
       script.async = true;
       
       script.onload = () => {
-        // Give the library a moment to initialize
-        setTimeout(() => {
+        // 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 {
-            reject(new Error(`${globalName} not found after loading script`));
+            attempts++;
+            setTimeout(checkGlobal, checkInterval);
           }
-        }, 100);
+        };
+        
+        // Start checking immediately (don't wait 100ms first)
+        checkGlobal();
       };
       
       script.onerror = () => {
@@ -366,12 +432,12 @@ export class ComponentCompiler {
       const factoryCreator = new Function(
         'React', 'ReactDOM',
         'useState', 'useEffect', 'useCallback', 'useMemo', 'useRef', 'useContext', 'useReducer', 'useLayoutEffect',
-        'libraries', 'styles', 'console',
+        'libraries', 'styles', 'console', 'components',
         `${transpiledCode}; return createComponent;`
       );
 
       // Return a function that executes the factory with runtime context
-      return (context: RuntimeContext, styles: any = {}) => {
+      return (context: RuntimeContext, styles: any = {}, components: Record<string, any> = {}) => {
         const { React, ReactDOM, libraries = {} } = context;
         
         // Merge loaded libraries with context libraries
@@ -394,7 +460,8 @@ export class ComponentCompiler {
           React.useLayoutEffect,
           mergedLibraries,
           styles,
-          console
+          console,
+          components
         );
 
         // Call createComponent to get the actual component
@@ -411,7 +478,8 @@ export class ComponentCompiler {
           React.useLayoutEffect,
           mergedLibraries,
           styles,
-          console
+          console,
+          components
         );
 
         // Return the component directly

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;
@@ -161,9 +174,16 @@ export class ComponentHierarchyRegistrar {
         componentName: spec.name,
         componentCode: spec.code,
         styles,
-        libraries: spec.libraries // Pass along library dependencies from the spec
+        libraries: spec.libraries, // Pass along library dependencies from the spec
+        dependencies: spec.dependencies, // Pass along child component dependencies
+        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) {
@@ -223,7 +243,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) {
@@ -266,7 +287,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,22 +40,20 @@ export interface CompileOptions {
   babelPlugins?: string[];
   /** Custom Babel presets to use */
   babelPresets?: string[];
+
   /** Library dependencies that the component requires */
-  libraries?: any[]; // Using any[] to avoid circular dependency with InteractiveComponents
-}
+  libraries?: ComponentLibraryDependency[];
+  
+  /** Child component dependencies that the component requires */
+  dependencies?: Array<{ name: string; code?: 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;
+  /**
+   * Required, metadata for all possible libraries allowed by the system
+   */
+  allLibraries: ComponentLibraryEntity[];
 }
 
+
 /**
  * Registry entry for a compiled component
  */

package/src/utilities/index.ts

@@ -3,7 +3,6 @@
  * @module @memberjunction/react-runtime/utilities
  */
 
-export * from './runtime-utilities';
 export * from './component-styles';
 export * from './standard-libraries';
 export * from './library-loader';

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();