@memberjunction/react-runtime 2.71.0 → 2.73.0

package/dist/utilities/library-loader.js

@@ -0,0 +1,193 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LibraryLoader = void 0;
+const standard_libraries_1 = require("./standard-libraries");
+class LibraryLoader {
+    static async loadAllLibraries() {
+        return this.loadLibraries({
+            loadCore: true,
+            loadUI: true,
+            loadCSS: true
+        });
+    }
+    static async loadLibraries(options) {
+        const { loadCore = true, loadUI = true, loadCSS = true, customLibraries = [] } = options;
+        const [React, ReactDOM, Babel] = await Promise.all([
+            this.loadScript(standard_libraries_1.STANDARD_LIBRARY_URLS.REACT, 'React'),
+            this.loadScript(standard_libraries_1.STANDARD_LIBRARY_URLS.REACT_DOM, 'ReactDOM'),
+            this.loadScript(standard_libraries_1.STANDARD_LIBRARY_URLS.BABEL, 'Babel')
+        ]);
+        if (loadCSS) {
+            (0, standard_libraries_1.getCSSUrls)().forEach(url => this.loadCSS(url));
+        }
+        const libraryPromises = [];
+        const libraryNames = [];
+        if (loadCore) {
+            const coreUrls = (0, standard_libraries_1.getCoreLibraryUrls)();
+            coreUrls.forEach(url => {
+                const name = this.getLibraryNameFromUrl(url);
+                libraryNames.push(name);
+                libraryPromises.push(this.loadScript(url, name));
+            });
+        }
+        if (loadUI) {
+            const uiUrls = (0, standard_libraries_1.getUILibraryUrls)();
+            uiUrls.forEach(url => {
+                const name = this.getLibraryNameFromUrl(url);
+                libraryNames.push(name);
+                libraryPromises.push(this.loadScript(url, name));
+            });
+        }
+        customLibraries.forEach(({ url, globalName }) => {
+            libraryNames.push(globalName);
+            libraryPromises.push(this.loadScript(url, globalName));
+        });
+        const loadedLibraries = await Promise.all(libraryPromises);
+        const libraries = {
+            _: undefined
+        };
+        libraryNames.forEach((name, index) => {
+            if (name === '_') {
+                libraries._ = loadedLibraries[index];
+            }
+            else {
+                libraries[name] = loadedLibraries[index];
+            }
+        });
+        if (!libraries._)
+            libraries._ = window._;
+        if (!libraries.d3)
+            libraries.d3 = window.d3;
+        if (!libraries.Chart)
+            libraries.Chart = window.Chart;
+        if (!libraries.dayjs)
+            libraries.dayjs = window.dayjs;
+        if (!libraries.antd)
+            libraries.antd = window.antd;
+        if (!libraries.ReactBootstrap)
+            libraries.ReactBootstrap = window.ReactBootstrap;
+        return {
+            React,
+            ReactDOM,
+            Babel,
+            libraries
+        };
+    }
+    static async loadScript(url, globalName) {
+        const existing = this.loadedResources.get(url);
+        if (existing) {
+            return existing.promise;
+        }
+        const promise = new Promise((resolve, reject) => {
+            const existingGlobal = window[globalName];
+            if (existingGlobal) {
+                resolve(existingGlobal);
+                return;
+            }
+            const existingScript = document.querySelector(`script[src="${url}"]`);
+            if (existingScript) {
+                this.waitForScriptLoad(existingScript, globalName, resolve, reject);
+                return;
+            }
+            const script = document.createElement('script');
+            script.src = url;
+            script.async = true;
+            script.crossOrigin = 'anonymous';
+            script.onload = () => {
+                const global = window[globalName];
+                if (global) {
+                    resolve(global);
+                }
+                else {
+                    setTimeout(() => {
+                        const delayedGlobal = window[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;
+    }
+    static loadCSS(url) {
+        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()
+        });
+    }
+    static waitForScriptLoad(script, globalName, resolve, reject) {
+        const checkGlobal = () => {
+            const global = window[globalName];
+            if (global) {
+                resolve(global);
+            }
+            else {
+                setTimeout(() => {
+                    const delayedGlobal = window[globalName];
+                    if (delayedGlobal) {
+                        resolve(delayedGlobal);
+                    }
+                    else {
+                        reject(new Error(`${globalName} not found after script load`));
+                    }
+                }, 100);
+            }
+        };
+        if (script.complete || script.readyState === 'complete') {
+            checkGlobal();
+            return;
+        }
+        const loadHandler = () => {
+            script.removeEventListener('load', loadHandler);
+            checkGlobal();
+        };
+        script.addEventListener('load', loadHandler);
+    }
+    static getLibraryNameFromUrl(url) {
+        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';
+        const match = url.match(/\/([^\/]+)(?:\.min)?\.js$/);
+        return match ? match[1] : 'unknown';
+    }
+    static getLoadedResources() {
+        return this.loadedResources;
+    }
+    static clearCache() {
+        this.loadedResources.clear();
+    }
+}
+exports.LibraryLoader = LibraryLoader;
+LibraryLoader.loadedResources = new Map();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memberjunction/react-runtime",
-  "version": "2.71.0",
+  "version": "2.73.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",
@@ -25,10 +25,11 @@
   },
   "homepage": "https://github.com/MemberJunction/MJ#readme",
   "dependencies": {
-    "@memberjunction/core": "2.71.0",
-    "@memberjunction/global": "2.71.0",
-    "@memberjunction/interactive-component-types": "2.71.0",
-    "@babel/standalone": "^7.23.5"
+    "@memberjunction/core": "2.73.0",
+    "@memberjunction/global": "2.73.0",
+    "@memberjunction/interactive-component-types": "2.73.0",
+    "@babel/standalone": "^7.23.5",
+    "rxjs": "^7.8.1"
   },
   "devDependencies": {
     "@types/node": "20.10.0",

package/src/index.ts

@@ -53,6 +53,7 @@ export {
 
 export {
   buildComponentProps,
+  cleanupPropBuilder,
   normalizeCallbacks,
   normalizeStyles,
   validateComponentProps,
@@ -94,6 +95,17 @@ export {
   createStandardLibraries
 } from './utilities/standard-libraries';
 
+export {
+  LibraryLoader,
+  LibraryLoadOptions,
+  LibraryLoadResult
+} from './utilities/library-loader';
+
+export {
+  ComponentErrorAnalyzer,
+  FailedComponentInfo
+} from './utilities/component-error-analyzer';
+
 // Version information
 export const VERSION = '2.69.1';
 

package/src/runtime/index.ts

@@ -23,6 +23,7 @@ export {
 
 export {
   buildComponentProps,
+  cleanupPropBuilder,
   normalizeCallbacks,
   normalizeStyles,
   validateComponentProps,

package/src/runtime/prop-builder.ts

@@ -5,6 +5,7 @@
  */
 
 import { ComponentProps, ComponentCallbacks, ComponentStyles } from '../types';
+import { Subject, debounceTime, Subscription } from 'rxjs';
 
 /**
  * Options for building component props
@@ -18,6 +19,8 @@ export interface PropBuilderOptions {
   transformData?: (data: any) => any;
   /** Transform state before passing to component */
   transformState?: (state: any) => any;
+  /** Debounce time for UpdateUserState callback in milliseconds */
+  debounceUpdateUserState?: number;
 }
 
 /**
@@ -43,7 +46,8 @@ export function buildComponentProps(
   const {
     validate = true,
     transformData,
-    transformState
+    transformState,
+    debounceUpdateUserState = 3000 // Default 3 seconds
   } = options;
 
   // Transform data if transformer provided
@@ -55,7 +59,7 @@ export function buildComponentProps(
     data: transformedData,
     userState: transformedState,
     utilities,
-    callbacks: normalizeCallbacks(callbacks),
+    callbacks: normalizeCallbacks(callbacks, debounceUpdateUserState),
     components,
     styles: normalizeStyles(styles)
   };
@@ -68,12 +72,47 @@ export function buildComponentProps(
   return props;
 }
 
+// Store subjects for debouncing per component instance
+const updateUserStateSubjects = new WeakMap<Function, Subject<any>>();
+
+// Store subscriptions for cleanup
+const updateUserStateSubscriptions = new WeakMap<Function, Subscription>();
+
+// Loop detection state
+interface LoopDetectionState {
+  count: number;
+  lastUpdate: number;
+  lastState: any;
+}
+const loopDetectionStates = new WeakMap<Function, LoopDetectionState>();
+
+// Deep equality check for objects
+function deepEqual(obj1: any, obj2: any): boolean {
+  if (obj1 === obj2) return true;
+  
+  if (!obj1 || !obj2) return false;
+  if (typeof obj1 !== 'object' || typeof obj2 !== 'object') return false;
+  
+  const keys1 = Object.keys(obj1);
+  const keys2 = Object.keys(obj2);
+  
+  if (keys1.length !== keys2.length) return false;
+  
+  for (const key of keys1) {
+    if (!keys2.includes(key)) return false;
+    if (!deepEqual(obj1[key], obj2[key])) return false;
+  }
+  
+  return true;
+}
+
 /**
  * Normalizes component callbacks
  * @param callbacks - Raw callbacks object
+ * @param debounceMs - Debounce time for UpdateUserState in milliseconds
  * @returns Normalized callbacks
  */
-export function normalizeCallbacks(callbacks: any): ComponentCallbacks {
+export function normalizeCallbacks(callbacks: any, debounceMs: number = 3000): ComponentCallbacks {
   const normalized: ComponentCallbacks = {};
 
   // Ensure all callbacks are functions
@@ -86,7 +125,67 @@ export function normalizeCallbacks(callbacks: any): ComponentCallbacks {
   }
 
   if (callbacks.UpdateUserState && typeof callbacks.UpdateUserState === 'function') {
-    normalized.UpdateUserState = callbacks.UpdateUserState;
+    // Create a debounced version of UpdateUserState with loop detection
+    const originalCallback = callbacks.UpdateUserState;
+    
+    // Get or create a subject for this callback
+    let subject = updateUserStateSubjects.get(originalCallback);
+    if (!subject) {
+      subject = new Subject<any>();
+      updateUserStateSubjects.set(originalCallback, subject);
+      
+      // Subscribe to the subject with debounce
+      const subscription = subject.pipe(
+        debounceTime(debounceMs)
+      ).subscribe(state => {
+        console.log(`[Skip Component] UpdateUserState called after ${debounceMs}ms debounce`);
+        originalCallback(state);
+      });
+      
+      // Store the subscription for cleanup
+      updateUserStateSubscriptions.set(originalCallback, subscription);
+    }
+    
+    // Get or create loop detection state
+    let loopState = loopDetectionStates.get(originalCallback);
+    if (!loopState) {
+      loopState = { count: 0, lastUpdate: 0, lastState: null };
+      loopDetectionStates.set(originalCallback, loopState);
+    }
+    
+    // Return a function that prevents redundant updates
+    normalized.UpdateUserState = (state: any) => {
+      // Check if this is a redundant update
+      if (loopState!.lastState && deepEqual(state, loopState!.lastState)) {
+        console.log('[Skip Component] Skipping redundant state update');
+        return; // Don't process identical state updates
+      }
+      
+      const now = Date.now();
+      const timeSinceLastUpdate = now - loopState!.lastUpdate;
+      
+      // Check for rapid updates
+      if (timeSinceLastUpdate < 100) {
+        loopState!.count++;
+        
+        if (loopState!.count > 5) {
+          console.error('[Skip Component] Rapid state updates detected - possible infinite loop');
+          console.error('Updates in last 100ms:', loopState!.count);
+          // Still process the update but warn
+        }
+      } else {
+        // Reset counter if more than 100ms has passed
+        loopState!.count = 0;
+      }
+      
+      loopState!.lastUpdate = now;
+      loopState!.lastState = JSON.parse(JSON.stringify(state)); // Deep clone to preserve state
+      
+      console.log('[Skip Component] Processing state update');
+      
+      // Push to debounce subject (which already has 3 second debounce)
+      subject!.next(state);
+    };
   }
 
   if (callbacks.NotifyEvent && typeof callbacks.NotifyEvent === 'function') {
@@ -186,6 +285,33 @@ export function mergeProps(...propsList: Partial<ComponentProps>[]): ComponentPr
   return merged;
 }
 
+/**
+ * Cleanup function for prop builder resources
+ * @param callbacks - The callbacks object that was used to build props
+ */
+export function cleanupPropBuilder(callbacks: ComponentCallbacks): void {
+  if (callbacks.UpdateUserState && typeof callbacks.UpdateUserState === 'function') {
+    const originalCallback = callbacks.UpdateUserState;
+    
+    // Unsubscribe from the subject
+    const subscription = updateUserStateSubscriptions.get(originalCallback);
+    if (subscription) {
+      subscription.unsubscribe();
+      updateUserStateSubscriptions.delete(originalCallback);
+    }
+    
+    // Complete and remove the subject
+    const subject = updateUserStateSubjects.get(originalCallback);
+    if (subject) {
+      subject.complete();
+      updateUserStateSubjects.delete(originalCallback);
+    }
+    
+    // Clear loop detection state
+    loopDetectionStates.delete(originalCallback);
+  }
+}
+
 /**
  * Creates a props transformer function
  * @param transformations - Map of prop paths to transformer functions