@memberjunction/react-runtime 2.70.0 → 2.72.0

package/src/utilities/library-loader.ts

@@ -0,0 +1,307 @@
+/**
+ * @fileoverview Library loading utilities for React runtime
+ * Provides methods to load and manage external JavaScript libraries and CSS
+ * @module @memberjunction/react-runtime/utilities
+ */
+
+import { 
+  STANDARD_LIBRARY_URLS,
+  StandardLibraries,
+  getCoreLibraryUrls,
+  getUILibraryUrls,
+  getCSSUrls
+} from './standard-libraries';
+
+/**
+ * Represents a loaded script or CSS resource
+ */
+interface LoadedResource {
+  element: HTMLScriptElement | HTMLLinkElement;
+  promise: Promise<any>;
+}
+
+/**
+ * Options for loading libraries
+ */
+export interface LibraryLoadOptions {
+  /** Load core libraries (lodash, d3, Chart.js, dayjs) */
+  loadCore?: boolean;
+  /** Load UI libraries (antd, React Bootstrap) */
+  loadUI?: boolean;
+  /** Load CSS files for UI libraries */
+  loadCSS?: boolean;
+  /** Custom library URLs to load */
+  customLibraries?: { url: string; globalName: string }[];
+}
+
+/**
+ * Result of loading libraries
+ */
+export interface LibraryLoadResult {
+  React: any;
+  ReactDOM: any;
+  Babel: any;
+  libraries: StandardLibraries;
+}
+
+/**
+ * Library loader class for managing external script loading
+ */
+export class LibraryLoader {
+  private static loadedResources = new Map<string, LoadedResource>();
+
+  /**
+   * Load all standard libraries (core + UI + CSS)
+   * This is the main method that should be used by test harness and Angular wrapper
+   */
+  static async loadAllLibraries(): Promise<LibraryLoadResult> {
+    return this.loadLibraries({
+      loadCore: true,
+      loadUI: true,
+      loadCSS: true
+    });
+  }
+
+  /**
+   * Load libraries with specific options
+   */
+  static async loadLibraries(options: LibraryLoadOptions): Promise<LibraryLoadResult> {
+    const {
+      loadCore = true,
+      loadUI = true,
+      loadCSS = true,
+      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
+    if (loadCore) {
+      const coreUrls = getCoreLibraryUrls();
+      coreUrls.forEach(url => {
+        const name = this.getLibraryNameFromUrl(url);
+        libraryNames.push(name);
+        libraryPromises.push(this.loadScript(url, name));
+      });
+    }
+
+    // UI libraries
+    if (loadUI) {
+      const uiUrls = getUILibraryUrls();
+      uiUrls.forEach(url => {
+        const name = this.getLibraryNameFromUrl(url);
+        libraryNames.push(name);
+        libraryPromises.push(this.loadScript(url, name));
+      });
+    }
+
+    // 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];
+      }
+    });
+
+    // 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 a script from URL
+   */
+  private static async loadScript(url: string, globalName: string): Promise<any> {
+    // Check if already loaded
+    const existing = this.loadedResources.get(url);
+    if (existing) {
+      return existing.promise;
+    }
+
+    const promise = new Promise((resolve, reject) => {
+      // Check if global already exists
+      const existingGlobal = (window as any)[globalName];
+      if (existingGlobal) {
+        resolve(existingGlobal);
+        return;
+      }
+
+      // Check if script tag exists
+      const existingScript = document.querySelector(`script[src="${url}"]`);
+      if (existingScript) {
+        this.waitForScriptLoad(existingScript as HTMLScriptElement, globalName, resolve, reject);
+        return;
+      }
+
+      // Create new script
+      const script = document.createElement('script');
+      script.src = url;
+      script.async = true;
+      script.crossOrigin = 'anonymous';
+
+      script.onload = () => {
+        const global = (window as any)[globalName];
+        if (global) {
+          resolve(global);
+        } else {
+          // Some libraries may take a moment to initialize
+          setTimeout(() => {
+            const delayedGlobal = (window as any)[globalName];
+            if (delayedGlobal) {
+              resolve(delayedGlobal);
+            } else {
+              reject(new Error(`${globalName} not found after script load`));
+            }
+          }, 100);
+        }
+      };
+
+      script.onerror = () => {
+        reject(new Error(`Failed to load script: ${url}`));
+      };
+
+      document.head.appendChild(script);
+    });
+
+    this.loadedResources.set(url, { 
+      element: document.querySelector(`script[src="${url}"]`)!, 
+      promise 
+    });
+
+    return promise;
+  }
+
+  /**
+   * Load CSS from URL
+   */
+  private static loadCSS(url: string): void {
+    if (this.loadedResources.has(url)) {
+      return;
+    }
+
+    const existingLink = document.querySelector(`link[href="${url}"]`);
+    if (existingLink) {
+      return;
+    }
+
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = url;
+    document.head.appendChild(link);
+
+    this.loadedResources.set(url, {
+      element: link,
+      promise: Promise.resolve()
+    });
+  }
+
+  /**
+   * Wait for existing script to load
+   */
+  private static waitForScriptLoad(
+    script: HTMLScriptElement,
+    globalName: string,
+    resolve: (value: any) => void,
+    reject: (reason: any) => void
+  ): void {
+    const checkGlobal = () => {
+      const global = (window as any)[globalName];
+      if (global) {
+        resolve(global);
+      } else {
+        // Retry after a short delay
+        setTimeout(() => {
+          const delayedGlobal = (window as any)[globalName];
+          if (delayedGlobal) {
+            resolve(delayedGlobal);
+          } else {
+            reject(new Error(`${globalName} not found after script load`));
+          }
+        }, 100);
+      }
+    };
+
+    // Check if already loaded
+    if ((script as any).complete || (script as any).readyState === 'complete') {
+      checkGlobal();
+      return;
+    }
+
+    // Wait for load
+    const loadHandler = () => {
+      script.removeEventListener('load', loadHandler);
+      checkGlobal();
+    };
+    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)
+   */
+  static getLoadedResources(): Map<string, LoadedResource> {
+    return this.loadedResources;
+  }
+
+  /**
+   * Clear loaded resources cache
+   */
+  static clearCache(): void {
+    this.loadedResources.clear();
+  }
+}

package/src/utilities/runtime-utilities.ts

@@ -0,0 +1,122 @@
+/**
+ * @fileoverview Runtime utilities for React components providing access to MemberJunction core functionality
+ * @module @memberjunction/react-runtime/utilities
+ */
+
+import { 
+  Metadata, 
+  RunView, 
+  RunQuery, 
+  RunViewParams, 
+  RunQueryParams,
+  LogError
+} from '@memberjunction/core';
+
+import { MJGlobal, RegisterClass } from '@memberjunction/global';
+import { ComponentUtilities, SimpleMetadata, SimpleRunQuery, SimpleRunView } from '@memberjunction/interactive-component-types';
+
+/**
+ * Base class for providing runtime utilities to React components.
+ * This class can be extended and registered with MJ's ClassFactory
+ * to provide custom implementations of data access methods.
+ */
+@RegisterClass(RuntimeUtilities, 'RuntimeUtilities')
+export class RuntimeUtilities {
+  /**
+   * Builds the complete utilities object for React components
+   * This is the main method that components will use
+   */
+  public buildUtilities(): ComponentUtilities {
+    const md = new Metadata();
+    return this.SetupUtilities(md);
+  }
+
+  /**
+   * Sets up the utilities object - copied from skip-chat implementation
+   */
+  private SetupUtilities(md: Metadata): ComponentUtilities {
+    const rv = new RunView();
+    const rq = new RunQuery();
+    const u: ComponentUtilities = {
+      md: this.CreateSimpleMetadata(md),
+      rv: this.CreateSimpleRunView(rv),
+      rq: this.CreateSimpleRunQuery(rq)
+    };            
+    return u;
+  }
+
+  private CreateSimpleMetadata(md: Metadata): SimpleMetadata {
+    return {
+      Entities: md.Entities,
+      GetEntityObject: (entityName: string) => {
+        return md.GetEntityObject(entityName)
+      }
+    }
+  }
+
+  private CreateSimpleRunQuery(rq: RunQuery): SimpleRunQuery {
+    return {
+      RunQuery: async (params: RunQueryParams) => {
+        // Run a single query and return the results
+        try {
+          const result = await rq.RunQuery(params);
+          return result;
+        } catch (error) {
+          LogError(error);
+          throw error; // Re-throw to handle it in the caller
+        }
+      }
+    }
+  }
+
+  private CreateSimpleRunView(rv: RunView): SimpleRunView {
+    return {
+      RunView: async (params: RunViewParams) => {
+        // Run a single view and return the results
+        try {
+          const result = await rv.RunView(params);
+          return result;
+        } catch (error) {
+          LogError(error);
+          throw error; // Re-throw to handle it in the caller
+        }
+      },
+      RunViews: async (params: RunViewParams[]) => {
+        // Runs multiple views and returns the results
+        try {
+          const results = await rv.RunViews(params);
+          return results;
+        } catch (error) {
+          LogError(error);
+          throw error; // Re-throw to handle it in the caller
+        }
+      }
+    }
+  }
+}
+
+/**
+ * Factory function to create RuntimeUtilities
+ * In a Node.js environment, this will use MJ's ClassFactory for runtime substitution
+ * In a browser environment, it will use the base class directly
+ */
+export function createRuntimeUtilities(): RuntimeUtilities {
+  // Check if we're in a Node.js environment with MJGlobal available
+  if (typeof window === 'undefined') {
+    try {
+      // Use ClassFactory to get the registered class, defaulting to base RuntimeUtilities
+      const obj = MJGlobal.Instance.ClassFactory.CreateInstance<RuntimeUtilities>(RuntimeUtilities);
+      if (!obj) {
+        throw new Error('Failed to create RuntimeUtilities instance');
+      }
+
+      // Ensure the object is an instance of RuntimeUtilities
+      return obj;
+    } catch (e) {
+      // Fall through to default
+    }
+  }
+  
+  // Default: just use the base class
+  return new RuntimeUtilities();
+}

package/src/utilities/standard-libraries.ts

@@ -0,0 +1,97 @@
+/**
+ * @fileoverview Standard libraries configuration for React components
+ * @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'
+};
+
+/**
+ * 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
+ */
+export function getCoreLibraryUrls(): string[] {
+  return [
+    STANDARD_LIBRARY_URLS.LODASH,
+    STANDARD_LIBRARY_URLS.D3,
+    STANDARD_LIBRARY_URLS.CHART_JS,
+    STANDARD_LIBRARY_URLS.DAYJS
+  ];
+}
+
+/**
+ * Get the list of optional UI library URLs
+ */
+export function getUILibraryUrls(): string[] {
+  return [
+    STANDARD_LIBRARY_URLS.ANTD,
+    STANDARD_LIBRARY_URLS.REACT_BOOTSTRAP
+  ];
+}
+
+/**
+ * Get the list of CSS URLs for UI libraries
+ */
+export function getCSSUrls(): string[] {
+  return [
+    STANDARD_LIBRARY_URLS.ANTD_CSS,
+    STANDARD_LIBRARY_URLS.BOOTSTRAP_CSS
+  ];
+}
+
+/**
+ * Creates a standard libraries object for browser environments
+ * This assumes the libraries are already loaded as globals
+ */
+export function createStandardLibraries(): StandardLibraries {
+  if (typeof window === 'undefined') {
+    // Return empty object in Node.js environments
+    return {
+      _: undefined
+    };
+  }
+  
+  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
+  };
+}