@memberjunction/react-runtime 2.74.0 → 2.76.0

package/src/utilities/library-loader.ts

@@ -5,12 +5,11 @@
  */
 
 import { 
-  STANDARD_LIBRARY_URLS,
   StandardLibraries,
-  getCoreLibraryUrls,
-  getUILibraryUrls,
-  getCSSUrls
+  StandardLibraryManager
 } from './standard-libraries';
+import { LibraryConfiguration, ExternalLibraryConfig, LibraryLoadOptions as ConfigLoadOptions } from '../types/library-config';
+import { getCoreRuntimeLibraries, isCoreRuntimeLibrary } from './core-libraries';
 
 /**
  * Represents a loaded script or CSS resource
@@ -22,6 +21,7 @@ interface LoadedResource {
 
 /**
  * Options for loading libraries
+ * @deprecated Use LibraryLoadOptions from library-config instead
  */
 export interface LibraryLoadOptions {
   /** Load core libraries (lodash, d3, Chart.js, dayjs) */
@@ -53,17 +53,99 @@ export class LibraryLoader {
   /**
    * Load all standard libraries (core + UI + CSS)
    * This is the main method that should be used by test harness and Angular wrapper
+   * @param config Optional full library configuration to replace the default
+   * @param additionalLibraries Optional additional libraries to merge with the configuration
    */
-  static async loadAllLibraries(): Promise<LibraryLoadResult> {
-    return this.loadLibraries({
-      loadCore: true,
-      loadUI: true,
-      loadCSS: true
+  static async loadAllLibraries(
+    config?: LibraryConfiguration, 
+    additionalLibraries?: ExternalLibraryConfig[]
+  ): Promise<LibraryLoadResult> {
+    if (config) {
+      StandardLibraryManager.setConfiguration(config);
+    }
+    
+    // If additional libraries are provided, merge them with the current configuration
+    if (additionalLibraries && additionalLibraries.length > 0) {
+      const currentConfig = StandardLibraryManager.getConfiguration();
+      const mergedConfig: LibraryConfiguration = {
+        libraries: [...currentConfig.libraries, ...additionalLibraries],
+        metadata: {
+          ...currentConfig.metadata,
+          lastUpdated: new Date().toISOString()
+        }
+      };
+      StandardLibraryManager.setConfiguration(mergedConfig);
+    }
+    
+    return this.loadLibrariesFromConfig();
+  }
+
+  /**
+   * Load libraries based on the current configuration
+   */
+  static async loadLibrariesFromConfig(options?: ConfigLoadOptions): Promise<LibraryLoadResult> {
+    // Always load core runtime libraries first
+    const coreLibraries = getCoreRuntimeLibraries();
+    const corePromises = coreLibraries.map(lib => 
+      this.loadScript(lib.cdnUrl, lib.globalVariable)
+    );
+    
+    const coreResults = await Promise.all(corePromises);
+    const React = coreResults.find((_, i) => coreLibraries[i].globalVariable === 'React');
+    const ReactDOM = coreResults.find((_, i) => coreLibraries[i].globalVariable === 'ReactDOM');
+    const Babel = coreResults.find((_, i) => coreLibraries[i].globalVariable === 'Babel');
+    
+    // Now load plugin libraries from configuration
+    const config = StandardLibraryManager.getConfiguration();
+    const enabledLibraries = StandardLibraryManager.getEnabledLibraries();
+    
+    // Filter out any core runtime libraries from plugin configuration
+    let pluginLibraries = enabledLibraries.filter(lib => !isCoreRuntimeLibrary(lib.id));
+    
+    // Apply options filters if provided
+    if (options) {
+      if (options.categories) {
+        pluginLibraries = pluginLibraries.filter(lib => 
+          options.categories!.includes(lib.category)
+        );
+      }
+      if (options.excludeRuntimeOnly) {
+        pluginLibraries = pluginLibraries.filter(lib => !lib.isRuntimeOnly);
+      }
+    }
+    
+    // Load CSS files for plugin libraries (non-blocking)
+    pluginLibraries.forEach(lib => {
+      if (lib.cdnCssUrl) {
+        this.loadCSS(lib.cdnCssUrl);
+      }
+    });
+    
+    // Load plugin libraries
+    const pluginPromises = pluginLibraries.map(lib => 
+      this.loadScript(lib.cdnUrl, lib.globalVariable)
+    );
+    
+    const pluginResults = await Promise.all(pluginPromises);
+    
+    // Build libraries object (only contains plugin libraries)
+    const libraries: StandardLibraries = {};
+    
+    pluginLibraries.forEach((lib, index) => {
+      libraries[lib.globalVariable] = pluginResults[index];
     });
+    
+    return {
+      React: React || (window as any).React,
+      ReactDOM: ReactDOM || (window as any).ReactDOM,
+      Babel: Babel || (window as any).Babel,
+      libraries
+    };
   }
 
   /**
-   * Load libraries with specific options
+   * Load libraries with specific options (backward compatibility)
+   * @deprecated Use loadLibrariesFromConfig instead
    */
   static async loadLibraries(options: LibraryLoadOptions): Promise<LibraryLoadResult> {
     const {
@@ -73,78 +155,32 @@ export class LibraryLoader {
       customLibraries = []
     } = options;
 
-    // Load React ecosystem first
-    const [React, ReactDOM, Babel] = await Promise.all([
-      this.loadScript(STANDARD_LIBRARY_URLS.REACT, 'React'),
-      this.loadScript(STANDARD_LIBRARY_URLS.REACT_DOM, 'ReactDOM'),
-      this.loadScript(STANDARD_LIBRARY_URLS.BABEL, 'Babel')
-    ]);
-
-    // Load CSS files if requested (non-blocking)
-    if (loadCSS) {
-      getCSSUrls().forEach(url => this.loadCSS(url));
-    }
-
-    // Prepare library loading promises
-    const libraryPromises: Promise<any>[] = [];
-    const libraryNames: string[] = [];
-
-    // Core libraries
+    // Map old options to new configuration approach
+    const categoriesToLoad: Array<ExternalLibraryConfig['category']> = ['runtime'];
     if (loadCore) {
-      const coreUrls = getCoreLibraryUrls();
-      coreUrls.forEach(url => {
-        const name = this.getLibraryNameFromUrl(url);
-        libraryNames.push(name);
-        libraryPromises.push(this.loadScript(url, name));
-      });
+      categoriesToLoad.push('utility', 'charting');
     }
-
-    // UI libraries
     if (loadUI) {
-      const uiUrls = getUILibraryUrls();
-      uiUrls.forEach(url => {
-        const name = this.getLibraryNameFromUrl(url);
-        libraryNames.push(name);
-        libraryPromises.push(this.loadScript(url, name));
-      });
+      categoriesToLoad.push('ui');
     }
-
-    // Custom libraries
-    customLibraries.forEach(({ url, globalName }) => {
-      libraryNames.push(globalName);
-      libraryPromises.push(this.loadScript(url, globalName));
-    });
-
-    // Load all libraries
-    const loadedLibraries = await Promise.all(libraryPromises);
-
-    // Build libraries object
-    const libraries: StandardLibraries = {
-      _: undefined // Initialize with required property
-    };
-    libraryNames.forEach((name, index) => {
-      // Map common names
-      if (name === '_') {
-        libraries._ = loadedLibraries[index];
-      } else {
-        libraries[name] = loadedLibraries[index];
-      }
+    
+    const result = await this.loadLibrariesFromConfig({
+      categories: categoriesToLoad
     });
-
-    // Ensure all standard properties exist
-    if (!libraries._) libraries._ = (window as any)._;
-    if (!libraries.d3) libraries.d3 = (window as any).d3;
-    if (!libraries.Chart) libraries.Chart = (window as any).Chart;
-    if (!libraries.dayjs) libraries.dayjs = (window as any).dayjs;
-    if (!libraries.antd) libraries.antd = (window as any).antd;
-    if (!libraries.ReactBootstrap) libraries.ReactBootstrap = (window as any).ReactBootstrap;
-
-    return {
-      React,
-      ReactDOM,
-      Babel,
-      libraries
-    };
+    
+    // Load custom libraries if provided
+    if (customLibraries.length > 0) {
+      const customPromises = customLibraries.map(({ url, globalName }) =>
+        this.loadScript(url, globalName)
+      );
+      
+      const customResults = await Promise.all(customPromises);
+      customLibraries.forEach(({ globalName }, index) => {
+        result.libraries[globalName] = customResults[index];
+      });
+    }
+    
+    return result;
   }
 
   /**
@@ -274,22 +310,6 @@ export class LibraryLoader {
     script.addEventListener('load', loadHandler);
   }
 
-  /**
-   * Get library name from URL for global variable mapping
-   */
-  private static getLibraryNameFromUrl(url: string): string {
-    // Map known URLs to their global variable names
-    if (url.includes('lodash')) return '_';
-    if (url.includes('d3')) return 'd3';
-    if (url.includes('Chart.js') || url.includes('chart')) return 'Chart';
-    if (url.includes('dayjs')) return 'dayjs';
-    if (url.includes('antd')) return 'antd';
-    if (url.includes('react-bootstrap')) return 'ReactBootstrap';
-    
-    // Default: extract name from URL
-    const match = url.match(/\/([^\/]+)(?:\.min)?\.js$/);
-    return match ? match[1] : 'unknown';
-  }
 
   /**
    * Get all loaded resources (for cleanup)

package/src/utilities/standard-libraries.ts

@@ -3,95 +3,128 @@
  * @module @memberjunction/react-runtime/utilities
  */
 
-/**
- * CDN URLs for standard libraries used by React components
- */
-export const STANDARD_LIBRARY_URLS = {
-  // Core React libraries
-  REACT: 'https://unpkg.com/react@18/umd/react.development.js',
-  REACT_DOM: 'https://unpkg.com/react-dom@18/umd/react-dom.development.js',
-  BABEL: 'https://unpkg.com/@babel/standalone/babel.min.js',
-  
-  // Data Visualization
-  D3: 'https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js',
-  CHART_JS: 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.js',
-  
-  // Utilities
-  LODASH: 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js',
-  DAYJS: 'https://unpkg.com/dayjs@1.11.10/dayjs.min.js',
-  
-  // UI Libraries (optional)
-  ANTD: 'https://unpkg.com/antd@5.11.5/dist/antd.min.js',
-  REACT_BOOTSTRAP: 'https://unpkg.com/react-bootstrap@2.9.1/dist/react-bootstrap.min.js',
-  
-  // CSS
-  ANTD_CSS: 'https://unpkg.com/antd@5.11.5/dist/reset.css',
-  BOOTSTRAP_CSS: 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css'
-};
+import { LibraryConfiguration, ExternalLibraryConfig } from '../types/library-config';
 
-/**
- * Interface for standard libraries available to React components
- */
-export interface StandardLibraries {
-  _: any; // lodash
-  d3?: any;
-  Chart?: any;
-  dayjs?: any;
-  antd?: any;
-  ReactBootstrap?: any;
-  [key: string]: any; // Allow additional libraries
-}
 
 /**
- * Get the list of core libraries that should always be loaded
+ * Type for dynamically loaded libraries available to React components
  */
-export function getCoreLibraryUrls(): string[] {
-  return [
-    STANDARD_LIBRARY_URLS.LODASH,
-    STANDARD_LIBRARY_URLS.D3,
-    STANDARD_LIBRARY_URLS.CHART_JS,
-    STANDARD_LIBRARY_URLS.DAYJS
-  ];
-}
+export type StandardLibraries = Record<string, any>;
 
 /**
- * Get the list of optional UI library URLs
+ * Default empty library configuration
+ * Libraries should be configured dynamically at runtime
  */
-export function getUILibraryUrls(): string[] {
-  return [
-    STANDARD_LIBRARY_URLS.ANTD,
-    STANDARD_LIBRARY_URLS.REACT_BOOTSTRAP
-  ];
-}
+const DEFAULT_LIBRARY_CONFIG: LibraryConfiguration = {
+  libraries: [],
+  metadata: {
+    version: '1.0.0',
+    lastUpdated: new Date().toISOString(),
+    description: 'Empty default configuration - libraries should be configured at runtime'
+  }
+};
 
 /**
- * Get the list of CSS URLs for UI libraries
+ * Manages standard library configurations with dynamic loading support
  */
-export function getCSSUrls(): string[] {
-  return [
-    STANDARD_LIBRARY_URLS.ANTD_CSS,
-    STANDARD_LIBRARY_URLS.BOOTSTRAP_CSS
-  ];
+export class StandardLibraryManager {
+  private static configuration: LibraryConfiguration = DEFAULT_LIBRARY_CONFIG;
+  
+  /**
+   * Set a custom library configuration
+   */
+  static setConfiguration(config: LibraryConfiguration): void {
+    this.configuration = config;
+  }
+  
+  /**
+   * Get the current library configuration
+   */
+  static getConfiguration(): LibraryConfiguration {
+    return this.configuration;
+  }
+  
+  /**
+   * Get all enabled libraries
+   */
+  static getEnabledLibraries(): ExternalLibraryConfig[] {
+    return this.configuration.libraries.filter(lib => lib.isEnabled);
+  }
+  
+  /**
+   * Get libraries by category
+   */
+  static getLibrariesByCategory(category: ExternalLibraryConfig['category']): ExternalLibraryConfig[] {
+    return this.configuration.libraries.filter(lib => lib.category === category && lib.isEnabled);
+  }
+  
+  /**
+   * Get core libraries (runtime essentials)
+   */
+  static getCoreLibraries(): ExternalLibraryConfig[] {
+    return this.configuration.libraries.filter(lib => lib.isCore && lib.isEnabled);
+  }
+  
+  /**
+   * Get component libraries (non-runtime)
+   */
+  static getComponentLibraries(): ExternalLibraryConfig[] {
+    return this.configuration.libraries.filter(lib => !lib.isRuntimeOnly && lib.isEnabled);
+  }
+  
+  /**
+   * Get library by ID
+   */
+  static getLibraryById(id: string): ExternalLibraryConfig | undefined {
+    return this.configuration.libraries.find(lib => lib.id === id);
+  }
+  
+  /**
+   * Get library URLs as a simple object (for backward compatibility)
+   */
+  static getLibraryUrls(): Record<string, string> {
+    const urls: Record<string, string> = {};
+    this.configuration.libraries
+      .filter(lib => lib.isEnabled)
+      .forEach(lib => {
+        // Use uppercase key for backward compatibility
+        const key = lib.id.replace(/-/g, '_').toUpperCase();
+        urls[key] = lib.cdnUrl;
+        if (lib.cdnCssUrl) {
+          urls[`${key}_CSS`] = lib.cdnCssUrl;
+        }
+      });
+    return urls;
+  }
+  
+  /**
+   * Reset to default configuration
+   */
+  static resetToDefault(): void {
+    this.configuration = DEFAULT_LIBRARY_CONFIG;
+  }
 }
 
+
 /**
  * Creates a standard libraries object for browser environments
- * This assumes the libraries are already loaded as globals
+ * Dynamically collects all libraries based on current configuration
  */
 export function createStandardLibraries(): StandardLibraries {
   if (typeof window === 'undefined') {
     // Return empty object in Node.js environments
-    return {
-      _: undefined
-    };
+    return {};
   }
   
-  return {
-    _: (window as any)._,
-    d3: (window as any).d3,
-    Chart: (window as any).Chart,
-    dayjs: (window as any).dayjs,
-    antd: (window as any).antd,
-    ReactBootstrap: (window as any).ReactBootstrap
-  };
+  const libs: StandardLibraries = {};
+  
+  // Add all component libraries as globals based on configuration
+  StandardLibraryManager.getComponentLibraries().forEach(lib => {
+    const globalValue = (window as any)[lib.globalVariable];
+    if (globalValue !== undefined) {
+      libs[lib.globalVariable] = globalValue;
+    }
+  });
+  
+  return libs;
 }