@memberjunction/ng-react 2.70.0

package/dist/lib/components/mj-react-component.component.js

@@ -0,0 +1,391 @@
+/**
+ * @fileoverview Angular component that hosts React components with proper memory management.
+ * Provides a bridge between Angular and React ecosystems in MemberJunction applications.
+ * @module @memberjunction/ng-react
+ */
+import { Component, Input, Output, EventEmitter, ViewChild, ElementRef, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
+import { Subject } from 'rxjs';
+import { ReactBridgeService } from '../services/react-bridge.service';
+import { AngularAdapterService } from '../services/angular-adapter.service';
+import { buildComponentProps, createErrorBoundary, ComponentHierarchyRegistrar } from '@memberjunction/react-runtime';
+import { LogError } from '@memberjunction/core';
+import * as i0 from "@angular/core";
+import * as i1 from "../services/react-bridge.service";
+import * as i2 from "../services/angular-adapter.service";
+const _c0 = ["container"];
+function MJReactComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 3)(1, "div", 4);
+    i0.ɵɵelement(2, "i", 5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 6);
+    i0.ɵɵtext(4, "Loading component...");
+    i0.ɵɵelementEnd()();
+} }
+/**
+ * Angular component that hosts React components with proper memory management.
+ * This component provides a bridge between Angular and React, allowing React components
+ * to be used seamlessly within Angular applications.
+ */
+export class MJReactComponent {
+    set data(value) {
+        const oldData = this._data;
+        this._data = value;
+        // Only re-render if data actually changed and component is initialized
+        if (this.isInitialized && !this.isEqual(oldData, value)) {
+            this.renderComponent();
+        }
+    }
+    get data() {
+        return this._data;
+    }
+    set state(value) {
+        const oldState = this._state;
+        this._state = value;
+        // Only update state and re-render if it actually changed
+        if (this.isInitialized && !this.isEqual(oldState, value)) {
+            this.currentState = { ...value };
+            this.renderComponent();
+        }
+    }
+    get state() {
+        return this._state;
+    }
+    constructor(reactBridge, adapter, cdr) {
+        this.reactBridge = reactBridge;
+        this.adapter = adapter;
+        this.cdr = cdr;
+        this._data = {};
+        this._state = {};
+        this.utilities = {};
+        this.stateChange = new EventEmitter();
+        this.componentEvent = new EventEmitter();
+        this.refreshData = new EventEmitter();
+        this.openEntityRecord = new EventEmitter();
+        this.reactRoot = null;
+        this.compiledComponent = null;
+        this.destroyed$ = new Subject();
+        this.currentState = {};
+        this.isInitialized = false;
+        this.isRendering = false;
+        this.pendingRender = false;
+        this.hasError = false;
+    }
+    async ngAfterViewInit() {
+        // Trigger change detection to show loading state
+        this.cdr.detectChanges();
+        await this.initializeComponent();
+    }
+    ngOnDestroy() {
+        this.destroyed$.next();
+        this.destroyed$.complete();
+        this.cleanup();
+    }
+    /**
+     * Convert SkipComponentStyles to ComponentStyles
+     * @param skipStyles - Skip component styles
+     * @returns Component styles for React runtime
+     */
+    convertStyles(skipStyles) {
+        // Pass through the full styles object as-is
+        // Skip components expect the full structure including colors, typography, etc.
+        return skipStyles;
+    }
+    /**
+     * Initialize the React component
+     */
+    async initializeComponent() {
+        try {
+            // Ensure React is loaded
+            await this.reactBridge.getReactContext();
+            // Wait for React to be fully ready (handles first-load delay)
+            await this.reactBridge.waitForReactReady();
+            // Register component hierarchy
+            await this.registerComponentHierarchy();
+            // Compile main component
+            const result = await this.adapter.compileComponent({
+                componentName: this.component.componentName,
+                componentCode: this.component.componentCode,
+                styles: this.styles
+            });
+            if (!result.success) {
+                throw new Error(result.error?.message || 'Component compilation failed');
+            }
+            // Get runtime context and execute component factory
+            const context = this.adapter.getRuntimeContext();
+            this.compiledComponent = result.component.component(context, this.styles);
+            this.currentState = { ...this._state };
+            // Create React root
+            this.reactRoot = this.reactBridge.createRoot(this.container.nativeElement);
+            // Initial render
+            this.renderComponent();
+            this.isInitialized = true;
+            // Trigger change detection since we're using OnPush
+            this.cdr.detectChanges();
+        }
+        catch (error) {
+            this.hasError = true;
+            LogError(`Failed to initialize React component: ${error}`);
+            this.componentEvent.emit({
+                type: 'error',
+                payload: {
+                    error: error instanceof Error ? error.message : String(error),
+                    source: 'initialization'
+                }
+            });
+            // Trigger change detection to show error state
+            this.cdr.detectChanges();
+        }
+    }
+    /**
+     * Register all components in the hierarchy
+     */
+    async registerComponentHierarchy() {
+        // Create the hierarchy registrar with adapter's compiler and registry
+        const registrar = new ComponentHierarchyRegistrar(this.adapter.getCompiler(), this.adapter.getRegistry(), this.adapter.getRuntimeContext());
+        // Register the entire hierarchy
+        const result = await registrar.registerHierarchy(this.component, {
+            styles: this.styles, // Skip components use SkipComponentStyles which is a superset
+            namespace: 'Global',
+            version: 'v1'
+        });
+        // Check for errors
+        if (!result.success) {
+            const errorMessages = result.errors.map(e => `${e.componentName}: ${e.error}`);
+            throw new Error(`Component registration failed: ${errorMessages.join(', ')}`);
+        }
+    }
+    /**
+     * Render the React component
+     */
+    renderComponent() {
+        if (!this.compiledComponent || !this.reactRoot) {
+            return;
+        }
+        // Prevent concurrent renders
+        if (this.isRendering) {
+            this.pendingRender = true;
+            return;
+        }
+        const context = this.reactBridge.getCurrentContext();
+        if (!context) {
+            return;
+        }
+        this.isRendering = true;
+        const { React } = context;
+        // Get components from resolver
+        const components = this.adapter.getResolver().resolveComponents(this.component);
+        // Build props - pass styles as-is for Skip components
+        const props = buildComponentProps(this._data || {}, this.currentState, this.utilities || {}, this.createCallbacks(), components, this.styles // Skip components expect the full SkipComponentStyles structure
+        );
+        // Create error boundary
+        const ErrorBoundary = createErrorBoundary(React, {
+            onError: this.handleReactError.bind(this),
+            logErrors: true,
+            recovery: 'retry'
+        });
+        // Create element with error boundary
+        const element = React.createElement(ErrorBoundary, null, React.createElement(this.compiledComponent.component, props));
+        // Render with timeout protection
+        const renderTimeout = setTimeout(() => {
+            this.componentEvent.emit({
+                type: 'error',
+                payload: {
+                    error: 'Component render timeout - possible infinite loop detected',
+                    source: 'render'
+                }
+            });
+        }, 5000);
+        try {
+            this.reactRoot.render(element);
+            clearTimeout(renderTimeout);
+            // Reset rendering flag after a microtask to allow React to complete
+            Promise.resolve().then(() => {
+                this.isRendering = false;
+                // If there was a pending render request, execute it now
+                if (this.pendingRender) {
+                    this.pendingRender = false;
+                    this.renderComponent();
+                }
+            });
+        }
+        catch (error) {
+            clearTimeout(renderTimeout);
+            this.isRendering = false;
+            this.handleReactError(error);
+        }
+    }
+    /**
+     * Create callbacks for the React component
+     */
+    createCallbacks() {
+        return {
+            RefreshData: () => {
+                this.refreshData.emit();
+            },
+            OpenEntityRecord: (entityName, key) => {
+                // Convert CompositeKey to a simple recordId for the event
+                // Try to get the ID field first, otherwise get the first value
+                const recordId = key.GetValueByFieldName('ID')?.toString() ||
+                    key.GetValueByIndex(0)?.toString() ||
+                    '';
+                this.openEntityRecord.emit({ entityName, recordId });
+            },
+            UpdateUserState: (userState) => {
+                // Prevent updates during rendering
+                if (this.isRendering) {
+                    return;
+                }
+                // Deep comparison to detect actual changes
+                const hasChanges = Object.keys(userState).some(key => {
+                    const currentValue = this.currentState[key];
+                    const newValue = userState[key];
+                    return !this.isEqual(currentValue, newValue);
+                });
+                if (!hasChanges) {
+                    // No actual changes, skip update to prevent infinite loop
+                    return;
+                }
+                this.currentState = {
+                    ...this.currentState,
+                    ...userState
+                };
+                // Emit change for each key in the state update
+                Object.keys(userState).forEach(path => {
+                    this.stateChange.emit({ path, value: userState[path] });
+                });
+                // Schedule re-render
+                this.renderComponent();
+            },
+            NotifyEvent: (event, data) => {
+                this.componentEvent.emit({ type: event, payload: data });
+            }
+        };
+    }
+    /**
+     * Handle React component errors
+     */
+    handleReactError(error, errorInfo) {
+        LogError(`React component error: ${error?.toString() || 'Unknown error'}`, errorInfo);
+        this.componentEvent.emit({
+            type: 'error',
+            payload: {
+                error: error?.toString() || 'Unknown error',
+                errorInfo,
+                source: 'react'
+            }
+        });
+    }
+    /**
+     * Clean up resources
+     */
+    cleanup() {
+        // Unmount React root
+        if (this.reactRoot) {
+            this.reactBridge.unmountRoot(this.reactRoot);
+            this.reactRoot = null;
+        }
+        // Clear references
+        this.compiledComponent = null;
+        this.currentState = {};
+        this.isInitialized = false;
+        // Trigger registry cleanup
+        this.adapter.getRegistry().cleanup();
+    }
+    /**
+     * Public method to refresh the component
+     * @param newData - Optional new data to merge
+     */
+    refresh(newData) {
+        if (newData) {
+            // Use the setter to trigger change detection
+            this.data = { ...this._data, ...newData };
+        }
+        else {
+            this.renderComponent();
+        }
+    }
+    /**
+     * Public method to update state programmatically
+     * @param path - State path to update
+     * @param value - New value
+     */
+    updateState(path, value) {
+        this.currentState = {
+            ...this.currentState,
+            [path]: value
+        };
+        this.stateChange.emit({ path, value });
+        this.renderComponent();
+    }
+    /**
+     * Deep equality check that handles null/undefined properly
+     */
+    isEqual(a, b) {
+        // Handle null/undefined cases
+        if (a === b)
+            return true;
+        if (a == null || b == null)
+            return false;
+        // For objects/arrays, use JSON comparison
+        if (typeof a === 'object' && typeof b === 'object') {
+            return JSON.stringify(a) === JSON.stringify(b);
+        }
+        return a === b;
+    }
+    static { this.ɵfac = function MJReactComponent_Factory(t) { return new (t || MJReactComponent)(i0.ɵɵdirectiveInject(i1.ReactBridgeService), i0.ɵɵdirectiveInject(i2.AngularAdapterService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJReactComponent, selectors: [["mj-react-component"]], viewQuery: function MJReactComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 7, ElementRef);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.container = _t.first);
+        } }, inputs: { component: "component", data: "data", state: "state", utilities: "utilities", styles: "styles" }, outputs: { stateChange: "stateChange", componentEvent: "componentEvent", refreshData: "refreshData", openEntityRecord: "openEntityRecord" }, decls: 4, vars: 3, consts: [["container", ""], [1, "react-component-wrapper"], [1, "react-component-container"], [1, "loading-overlay"], [1, "loading-spinner"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "loading-text"]], template: function MJReactComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 1);
+            i0.ɵɵelement(1, "div", 2, 0);
+            i0.ɵɵtemplate(3, MJReactComponent_Conditional_3_Template, 5, 0, "div", 3);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("loading", !ctx.isInitialized);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(!ctx.isInitialized && !ctx.hasError ? 3 : -1);
+        } }, styles: ["[_nghost-%COMP%] {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n    .react-component-wrapper[_ngcontent-%COMP%] {\n      position: relative;\n      width: 100%;\n      height: 100%;\n    }\n    .react-component-container[_ngcontent-%COMP%] {\n      width: 100%;\n      height: 100%;\n      transition: opacity 0.3s ease;\n    }\n    .react-component-container.loading[_ngcontent-%COMP%] {\n      opacity: 0;\n    }\n    .loading-overlay[_ngcontent-%COMP%] {\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      background-color: rgba(255, 255, 255, 0.9);\n      z-index: 1;\n    }\n    .loading-spinner[_ngcontent-%COMP%] {\n      font-size: 48px;\n      color: #5B4FE9;\n      margin-bottom: 16px;\n    }\n    .loading-text[_ngcontent-%COMP%] {\n      font-family: -apple-system, BlinkMacSystemFont, \"Inter\", \"Segoe UI\", Roboto, sans-serif;\n      font-size: 14px;\n      color: #64748B;\n      margin-top: 8px;\n    }"], changeDetection: 0 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJReactComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-react-component', template: `
+    <div class="react-component-wrapper">
+      <div #container class="react-component-container" [class.loading]="!isInitialized"></div>
+      @if (!isInitialized && !hasError) {
+        <div class="loading-overlay">
+          <div class="loading-spinner">
+            <i class="fa-solid fa-spinner fa-spin"></i>
+          </div>
+          <div class="loading-text">Loading component...</div>
+        </div>
+      }
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["\n    :host {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n    .react-component-wrapper {\n      position: relative;\n      width: 100%;\n      height: 100%;\n    }\n    .react-component-container {\n      width: 100%;\n      height: 100%;\n      transition: opacity 0.3s ease;\n    }\n    .react-component-container.loading {\n      opacity: 0;\n    }\n    .loading-overlay {\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      background-color: rgba(255, 255, 255, 0.9);\n      z-index: 1;\n    }\n    .loading-spinner {\n      font-size: 48px;\n      color: #5B4FE9;\n      margin-bottom: 16px;\n    }\n    .loading-text {\n      font-family: -apple-system, BlinkMacSystemFont, \"Inter\", \"Segoe UI\", Roboto, sans-serif;\n      font-size: 14px;\n      color: #64748B;\n      margin-top: 8px;\n    }\n  "] }]
+    }], () => [{ type: i1.ReactBridgeService }, { type: i2.AngularAdapterService }, { type: i0.ChangeDetectorRef }], { component: [{
+            type: Input
+        }], data: [{
+            type: Input
+        }], state: [{
+            type: Input
+        }], utilities: [{
+            type: Input
+        }], styles: [{
+            type: Input
+        }], stateChange: [{
+            type: Output
+        }], componentEvent: [{
+            type: Output
+        }], refreshData: [{
+            type: Output
+        }], openEntityRecord: [{
+            type: Output
+        }], container: [{
+            type: ViewChild,
+            args: ['container', { read: ElementRef, static: true }]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJReactComponent, { className: "MJReactComponent", filePath: "lib/components/mj-react-component.component.ts", lineNumber: 116 }); })();
+//# sourceMappingURL=mj-react-component.component.js.map

package/dist/lib/components/mj-react-component.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mj-react-component.component.js","sourceRoot":"","sources":["../../../src/lib/components/mj-react-component.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @fileoverview Angular component that hosts React components with proper memory management.\n * Provides a bridge between Angular and React ecosystems in MemberJunction applications.\n * @module @memberjunction/ng-react\n */\n\nimport {\n  Component,\n  Input,\n  Output,\n  EventEmitter,\n  ViewChild,\n  ElementRef,\n  AfterViewInit,\n  OnDestroy,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef\n} from '@angular/core';\nimport { Subject, takeUntil } from 'rxjs';\nimport { SkipComponentRootSpec, SkipComponentCallbacks, SkipComponentStyles } from '@memberjunction/skip-types';\nimport { ReactBridgeService } from '../services/react-bridge.service';\nimport { AngularAdapterService } from '../services/angular-adapter.service';\nimport { \n  buildComponentProps, \n  ComponentCallbacks,\n  ComponentError,\n  createErrorBoundary,\n  ComponentStyles,\n  ComponentHierarchyRegistrar,\n  HierarchyRegistrationResult\n} from '@memberjunction/react-runtime';\nimport { LogError, CompositeKey } from '@memberjunction/core';\n\n/**\n * Event emitted by React components\n */\nexport interface ReactComponentEvent {\n  type: string;\n  payload: any;\n}\n\n/**\n * State change event emitted when component state updates\n */\nexport interface StateChangeEvent {\n  path: string;\n  value: any;\n}\n\n/**\n * Angular component that hosts React components with proper memory management.\n * This component provides a bridge between Angular and React, allowing React components\n * to be used seamlessly within Angular applications.\n */\n@Component({\n  selector: 'mj-react-component',\n  template: `\n    <div class=\"react-component-wrapper\">\n      <div #container class=\"react-component-container\" [class.loading]=\"!isInitialized\"></div>\n      @if (!isInitialized && !hasError) {\n        <div class=\"loading-overlay\">\n          <div class=\"loading-spinner\">\n            <i class=\"fa-solid fa-spinner fa-spin\"></i>\n          </div>\n          <div class=\"loading-text\">Loading component...</div>\n        </div>\n      }\n    </div>\n  `,\n  styles: [`\n    :host {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n    .react-component-wrapper {\n      position: relative;\n      width: 100%;\n      height: 100%;\n    }\n    .react-component-container {\n      width: 100%;\n      height: 100%;\n      transition: opacity 0.3s ease;\n    }\n    .react-component-container.loading {\n      opacity: 0;\n    }\n    .loading-overlay {\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      background-color: rgba(255, 255, 255, 0.9);\n      z-index: 1;\n    }\n    .loading-spinner {\n      font-size: 48px;\n      color: #5B4FE9;\n      margin-bottom: 16px;\n    }\n    .loading-text {\n      font-family: -apple-system, BlinkMacSystemFont, \"Inter\", \"Segoe UI\", Roboto, sans-serif;\n      font-size: 14px;\n      color: #64748B;\n      margin-top: 8px;\n    }\n  `],\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class MJReactComponent implements AfterViewInit, OnDestroy {\n  @Input() component!: SkipComponentRootSpec;\n  \n  private _data: any = {};\n  @Input() \n  set data(value: any) {\n    const oldData = this._data;\n    this._data = value;\n    \n    // Only re-render if data actually changed and component is initialized\n    if (this.isInitialized && !this.isEqual(oldData, value)) {\n      this.renderComponent();\n    }\n  }\n  get data(): any {\n    return this._data;\n  }\n  \n  private _state: any = {};\n  @Input() \n  set state(value: any) {\n    const oldState = this._state;\n    this._state = value;\n    \n    // Only update state and re-render if it actually changed\n    if (this.isInitialized && !this.isEqual(oldState, value)) {\n      this.currentState = { ...value };\n      this.renderComponent();\n    }\n  }\n  get state(): any {\n    return this._state;\n  }\n  \n  @Input() utilities: any = {};\n  @Input() styles?: Partial<SkipComponentStyles>;\n  \n  @Output() stateChange = new EventEmitter<StateChangeEvent>();\n  @Output() componentEvent = new EventEmitter<ReactComponentEvent>();\n  @Output() refreshData = new EventEmitter<void>();\n  @Output() openEntityRecord = new EventEmitter<{ entityName: string; recordId: string }>();\n  \n  @ViewChild('container', { read: ElementRef, static: true }) container!: ElementRef<HTMLDivElement>;\n  \n  private reactRoot: any = null;\n  private compiledComponent: any = null;\n  private destroyed$ = new Subject<void>();\n  private currentState: any = {};\n  isInitialized = false;\n  private isRendering = false;\n  private pendingRender = false;\n  hasError = false;\n\n  constructor(\n    private reactBridge: ReactBridgeService,\n    private adapter: AngularAdapterService,\n    private cdr: ChangeDetectorRef\n  ) {}\n\n  async ngAfterViewInit() {\n    // Trigger change detection to show loading state\n    this.cdr.detectChanges();\n    await this.initializeComponent();\n  }\n\n  ngOnDestroy() {\n    this.destroyed$.next();\n    this.destroyed$.complete();\n    this.cleanup();\n  }\n\n  /**\n   * Convert SkipComponentStyles to ComponentStyles\n   * @param skipStyles - Skip component styles\n   * @returns Component styles for React runtime\n   */\n  private convertStyles(skipStyles?: Partial<SkipComponentStyles>): any {\n    // Pass through the full styles object as-is\n    // Skip components expect the full structure including colors, typography, etc.\n    return skipStyles;\n  }\n\n  /**\n   * Initialize the React component\n   */\n  private async initializeComponent() {\n    try {\n      // Ensure React is loaded\n      await this.reactBridge.getReactContext();\n      \n      // Wait for React to be fully ready (handles first-load delay)\n      await this.reactBridge.waitForReactReady();\n      \n      // Register component hierarchy\n      await this.registerComponentHierarchy();\n      \n      // Compile main component\n      const result = await this.adapter.compileComponent({\n        componentName: this.component.componentName,\n        componentCode: this.component.componentCode,\n        styles: this.styles\n      });\n\n      if (!result.success) {\n        throw new Error(result.error?.message || 'Component compilation failed');\n      }\n\n      // Get runtime context and execute component factory\n      const context = this.adapter.getRuntimeContext();\n      this.compiledComponent = result.component!.component(context, this.styles);\n      this.currentState = { ...this._state };\n      \n      // Create React root\n      this.reactRoot = this.reactBridge.createRoot(this.container.nativeElement);\n      \n      // Initial render\n      this.renderComponent();\n      this.isInitialized = true;\n      \n      // Trigger change detection since we're using OnPush\n      this.cdr.detectChanges();\n      \n    } catch (error) {\n      this.hasError = true;\n      LogError(`Failed to initialize React component: ${error}`);\n      this.componentEvent.emit({\n        type: 'error',\n        payload: {\n          error: error instanceof Error ? error.message : String(error),\n          source: 'initialization'\n        }\n      });\n      // Trigger change detection to show error state\n      this.cdr.detectChanges();\n    }\n  }\n\n  /**\n   * Register all components in the hierarchy\n   */\n  private async registerComponentHierarchy() {\n    // Create the hierarchy registrar with adapter's compiler and registry\n    const registrar = new ComponentHierarchyRegistrar(\n      this.adapter.getCompiler(),\n      this.adapter.getRegistry(),\n      this.adapter.getRuntimeContext()\n    );\n    \n    // Register the entire hierarchy\n    const result: HierarchyRegistrationResult = await registrar.registerHierarchy(\n      this.component,\n      {\n        styles: this.styles as any, // Skip components use SkipComponentStyles which is a superset\n        namespace: 'Global',\n        version: 'v1'\n      }\n    );\n    \n    // Check for errors\n    if (!result.success) {\n      const errorMessages = result.errors.map(e => \n        `${e.componentName}: ${e.error}`\n      );\n      throw new Error(`Component registration failed: ${errorMessages.join(', ')}`);\n    }\n  }\n\n  /**\n   * Render the React component\n   */\n  private renderComponent() {\n    if (!this.compiledComponent || !this.reactRoot) {\n      return;\n    }\n\n    // Prevent concurrent renders\n    if (this.isRendering) {\n      this.pendingRender = true;\n      return;\n    }\n\n    const context = this.reactBridge.getCurrentContext();\n    if (!context) {\n      return;\n    }\n\n    this.isRendering = true;\n    const { React } = context;\n    \n    // Get components from resolver\n    const components = this.adapter.getResolver().resolveComponents(this.component);\n    \n    // Build props - pass styles as-is for Skip components\n    const props = buildComponentProps(\n      this._data || {},\n      this.currentState,\n      this.utilities || {},\n      this.createCallbacks(),\n      components,\n      this.styles as any // Skip components expect the full SkipComponentStyles structure\n    );\n\n    // Create error boundary\n    const ErrorBoundary = createErrorBoundary(React, {\n      onError: this.handleReactError.bind(this),\n      logErrors: true,\n      recovery: 'retry'\n    });\n\n    // Create element with error boundary\n    const element = React.createElement(\n      ErrorBoundary,\n      null,\n      React.createElement(this.compiledComponent.component, props)\n    );\n\n    // Render with timeout protection\n    const renderTimeout = setTimeout(() => {\n      this.componentEvent.emit({\n        type: 'error',\n        payload: {\n          error: 'Component render timeout - possible infinite loop detected',\n          source: 'render'\n        }\n      });\n    }, 5000);\n\n    try {\n      this.reactRoot.render(element);\n      clearTimeout(renderTimeout);\n      \n      // Reset rendering flag after a microtask to allow React to complete\n      Promise.resolve().then(() => {\n        this.isRendering = false;\n        \n        // If there was a pending render request, execute it now\n        if (this.pendingRender) {\n          this.pendingRender = false;\n          this.renderComponent();\n        }\n      });\n    } catch (error) {\n      clearTimeout(renderTimeout);\n      this.isRendering = false;\n      this.handleReactError(error);\n    }\n  }\n\n  /**\n   * Create callbacks for the React component\n   */\n  private createCallbacks(): ComponentCallbacks {\n    return {\n      RefreshData: () => {\n        this.refreshData.emit();\n      },\n      OpenEntityRecord: (entityName: string, key: CompositeKey) => {\n        // Convert CompositeKey to a simple recordId for the event\n        // Try to get the ID field first, otherwise get the first value\n        const recordId = key.GetValueByFieldName('ID')?.toString() || \n                        key.GetValueByIndex(0)?.toString() || \n                        '';\n        this.openEntityRecord.emit({ entityName, recordId });\n      },\n      UpdateUserState: (userState: any) => {\n        // Prevent updates during rendering\n        if (this.isRendering) {\n          return;\n        }\n        \n        // Deep comparison to detect actual changes\n        const hasChanges = Object.keys(userState).some(key => {\n          const currentValue = this.currentState[key];\n          const newValue = userState[key];\n          return !this.isEqual(currentValue, newValue);\n        });\n        \n        if (!hasChanges) {\n          // No actual changes, skip update to prevent infinite loop\n          return;\n        }\n        \n        this.currentState = {\n          ...this.currentState,\n          ...userState\n        };\n        \n        // Emit change for each key in the state update\n        Object.keys(userState).forEach(path => {\n          this.stateChange.emit({ path, value: userState[path] });\n        });\n        \n        // Schedule re-render\n        this.renderComponent();\n      },\n      NotifyEvent: (event: string, data: any) => {\n        this.componentEvent.emit({ type: event, payload: data });\n      }\n    };\n  }\n\n  /**\n   * Handle React component errors\n   */\n  private handleReactError(error: any, errorInfo?: any) {\n    LogError(`React component error: ${error?.toString() || 'Unknown error'}`, errorInfo);\n    this.componentEvent.emit({\n      type: 'error',\n      payload: {\n        error: error?.toString() || 'Unknown error',\n        errorInfo,\n        source: 'react'\n      }\n    });\n  }\n\n  /**\n   * Clean up resources\n   */\n  private cleanup() {\n    // Unmount React root\n    if (this.reactRoot) {\n      this.reactBridge.unmountRoot(this.reactRoot);\n      this.reactRoot = null;\n    }\n\n    // Clear references\n    this.compiledComponent = null;\n    this.currentState = {};\n    this.isInitialized = false;\n\n    // Trigger registry cleanup\n    this.adapter.getRegistry().cleanup();\n  }\n\n  /**\n   * Public method to refresh the component\n   * @param newData - Optional new data to merge\n   */\n  refresh(newData?: any) {\n    if (newData) {\n      // Use the setter to trigger change detection\n      this.data = { ...this._data, ...newData };\n    } else {\n      this.renderComponent();\n    }\n  }\n\n  /**\n   * Public method to update state programmatically\n   * @param path - State path to update\n   * @param value - New value\n   */\n  updateState(path: string, value: any) {\n    this.currentState = {\n      ...this.currentState,\n      [path]: value\n    };\n    this.stateChange.emit({ path, value });\n    this.renderComponent();\n  }\n\n  /**\n   * Deep equality check that handles null/undefined properly\n   */\n  private isEqual(a: any, b: any): boolean {\n    // Handle null/undefined cases\n    if (a === b) return true;\n    if (a == null || b == null) return false;\n    \n    // For objects/arrays, use JSON comparison\n    if (typeof a === 'object' && typeof b === 'object') {\n      return JSON.stringify(a) === JSON.stringify(b);\n    }\n    \n    return a === b;\n  }\n}"]}

package/dist/lib/default-styles.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @fileoverview Default styles for React components in MemberJunction.
+ * These styles provide a consistent design system for React components.
+ * @module @memberjunction/ng-react
+ */
+import { SkipComponentStyles } from '@memberjunction/skip-types';
+/**
+ * Default styles that match the Skip design system
+ */
+export declare const DEFAULT_STYLES: SkipComponentStyles;

package/dist/lib/default-styles.js

@@ -0,0 +1,106 @@
+/**
+ * @fileoverview Default styles for React components in MemberJunction.
+ * These styles provide a consistent design system for React components.
+ * @module @memberjunction/ng-react
+ */
+/**
+ * Default styles that match the Skip design system
+ */
+export const DEFAULT_STYLES = {
+    colors: {
+        // Primary colors - modern purple/blue gradient feel
+        primary: '#5B4FE9',
+        primaryHover: '#4940D4',
+        primaryLight: '#E8E6FF',
+        // Secondary colors - sophisticated gray
+        secondary: '#64748B',
+        secondaryHover: '#475569',
+        // Status colors
+        success: '#10B981',
+        successLight: '#D1FAE5',
+        warning: '#F59E0B',
+        warningLight: '#FEF3C7',
+        error: '#EF4444',
+        errorLight: '#FEE2E2',
+        info: '#3B82F6',
+        infoLight: '#DBEAFE',
+        // Base colors
+        background: '#FFFFFF',
+        surface: '#F8FAFC',
+        surfaceHover: '#F1F5F9',
+        // Text colors with better contrast
+        text: '#1E293B',
+        textSecondary: '#64748B',
+        textTertiary: '#94A3B8',
+        textInverse: '#FFFFFF',
+        // Border colors
+        border: '#E2E8F0',
+        borderLight: '#F1F5F9',
+        borderFocus: '#5B4FE9',
+        // Shadows (as color strings for easy use)
+        shadow: 'rgba(0, 0, 0, 0.05)',
+        shadowMedium: 'rgba(0, 0, 0, 0.1)',
+        shadowLarge: 'rgba(0, 0, 0, 0.15)',
+    },
+    spacing: {
+        xs: '4px',
+        sm: '8px',
+        md: '16px',
+        lg: '24px',
+        xl: '32px',
+        xxl: '48px',
+        xxxl: '64px',
+    },
+    typography: {
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif',
+        fontSize: {
+            xs: '11px',
+            sm: '12px',
+            md: '14px',
+            lg: '16px',
+            xl: '20px',
+            xxl: '24px',
+            xxxl: '32px',
+        },
+        fontWeight: {
+            light: '300',
+            regular: '400',
+            medium: '500',
+            semibold: '600',
+            bold: '700',
+        },
+        lineHeight: {
+            tight: '1.25',
+            normal: '1.5',
+            relaxed: '1.75',
+        },
+    },
+    borders: {
+        radius: {
+            sm: '6px',
+            md: '8px',
+            lg: '12px',
+            xl: '16px',
+            full: '9999px',
+        },
+        width: {
+            thin: '1px',
+            medium: '2px',
+            thick: '3px',
+        },
+    },
+    shadows: {
+        sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+        md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+        lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+        xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+        inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
+    },
+    transitions: {
+        fast: '150ms ease-in-out',
+        normal: '250ms ease-in-out',
+        slow: '350ms ease-in-out',
+    },
+    overflow: 'auto'
+};
+//# sourceMappingURL=default-styles.js.map

package/dist/lib/default-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"default-styles.js","sourceRoot":"","sources":["../../src/lib/default-styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAwB;IACjD,MAAM,EAAE;QACN,oDAAoD;QACpD,OAAO,EAAE,SAAS;QAClB,YAAY,EAAE,SAAS;QACvB,YAAY,EAAE,SAAS;QAEvB,wCAAwC;QACxC,SAAS,EAAE,SAAS;QACpB,cAAc,EAAE,SAAS;QAEzB,gBAAgB;QAChB,OAAO,EAAE,SAAS;QAClB,YAAY,EAAE,SAAS;QACvB,OAAO,EAAE,SAAS;QAClB,YAAY,EAAE,SAAS;QACvB,KAAK,EAAE,SAAS;QAChB,UAAU,EAAE,SAAS;QACrB,IAAI,EAAE,SAAS;QACf,SAAS,EAAE,SAAS;QAEpB,cAAc;QACd,UAAU,EAAE,SAAS;QACrB,OAAO,EAAE,SAAS;QAClB,YAAY,EAAE,SAAS;QAEvB,mCAAmC;QACnC,IAAI,EAAE,SAAS;QACf,aAAa,EAAE,SAAS;QACxB,YAAY,EAAE,SAAS;QACvB,WAAW,EAAE,SAAS;QAEtB,gBAAgB;QAChB,MAAM,EAAE,SAAS;QACjB,WAAW,EAAE,SAAS;QACtB,WAAW,EAAE,SAAS;QAEtB,0CAA0C;QAC1C,MAAM,EAAE,qBAAqB;QAC7B,YAAY,EAAE,oBAAoB;QAClC,WAAW,EAAE,qBAAqB;KACnC;IACD,OAAO,EAAE;QACP,EAAE,EAAE,KAAK;QACT,EAAE,EAAE,KAAK;QACT,EAAE,EAAE,MAAM;QACV,EAAE,EAAE,MAAM;QACV,EAAE,EAAE,MAAM;QACV,GAAG,EAAE,MAAM;QACX,IAAI,EAAE,MAAM;KACb;IACD,UAAU,EAAE;QACV,UAAU,EAAE,4EAA4E;QACxF,QAAQ,EAAE;YACR,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,GAAG,EAAE,MAAM;YACX,IAAI,EAAE,MAAM;SACb;QACD,UAAU,EAAE;YACV,KAAK,EAAE,KAAK;YACZ,OAAO,EAAE,KAAK;YACd,MAAM,EAAE,KAAK;YACb,QAAQ,EAAE,KAAK;YACf,IAAI,EAAE,KAAK;SACZ;QACD,UAAU,EAAE;YACV,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,KAAK;YACb,OAAO,EAAE,MAAM;SAChB;KACF;IACD,OAAO,EAAE;QACP,MAAM,EAAE;YACN,EAAE,EAAE,KAAK;YACT,EAAE,EAAE,KAAK;YACT,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,IAAI,EAAE,QAAQ;SACf;QACD,KAAK,EAAE;YACL,IAAI,EAAE,KAAK;YACX,MAAM,EAAE,KAAK;YACb,KAAK,EAAE,KAAK;SACb;KACF;IACD,OAAO,EAAE;QACP,EAAE,EAAE,iCAAiC;QACrC,EAAE,EAAE,uEAAuE;QAC3E,EAAE,EAAE,yEAAyE;QAC7E,EAAE,EAAE,2EAA2E;QAC/E,KAAK,EAAE,uCAAuC;KAC/C;IACD,WAAW,EAAE;QACX,IAAI,EAAE,mBAAmB;QACzB,MAAM,EAAE,mBAAmB;QAC3B,IAAI,EAAE,mBAAmB;KAC1B;IACD,QAAQ,EAAE,MAAM;CACjB,CAAC","sourcesContent":["/**\n * @fileoverview Default styles for React components in MemberJunction.\n * These styles provide a consistent design system for React components.\n * @module @memberjunction/ng-react\n */\n\nimport { SkipComponentStyles } from '@memberjunction/skip-types';\n\n/**\n * Default styles that match the Skip design system\n */\nexport const DEFAULT_STYLES: SkipComponentStyles = {\n  colors: {\n    // Primary colors - modern purple/blue gradient feel\n    primary: '#5B4FE9',\n    primaryHover: '#4940D4',\n    primaryLight: '#E8E6FF',\n    \n    // Secondary colors - sophisticated gray\n    secondary: '#64748B',\n    secondaryHover: '#475569',\n    \n    // Status colors\n    success: '#10B981',\n    successLight: '#D1FAE5',\n    warning: '#F59E0B',\n    warningLight: '#FEF3C7',\n    error: '#EF4444',\n    errorLight: '#FEE2E2',\n    info: '#3B82F6',\n    infoLight: '#DBEAFE',\n    \n    // Base colors\n    background: '#FFFFFF',\n    surface: '#F8FAFC',\n    surfaceHover: '#F1F5F9',\n    \n    // Text colors with better contrast\n    text: '#1E293B',\n    textSecondary: '#64748B',\n    textTertiary: '#94A3B8',\n    textInverse: '#FFFFFF',\n    \n    // Border colors\n    border: '#E2E8F0',\n    borderLight: '#F1F5F9',\n    borderFocus: '#5B4FE9',\n    \n    // Shadows (as color strings for easy use)\n    shadow: 'rgba(0, 0, 0, 0.05)',\n    shadowMedium: 'rgba(0, 0, 0, 0.1)',\n    shadowLarge: 'rgba(0, 0, 0, 0.15)',\n  },\n  spacing: {\n    xs: '4px',\n    sm: '8px',\n    md: '16px',\n    lg: '24px',\n    xl: '32px',\n    xxl: '48px',\n    xxxl: '64px',\n  },\n  typography: {\n    fontFamily: '-apple-system, BlinkMacSystemFont, \"Inter\", \"Segoe UI\", Roboto, sans-serif',\n    fontSize: {\n      xs: '11px',\n      sm: '12px',\n      md: '14px',\n      lg: '16px',\n      xl: '20px',\n      xxl: '24px',\n      xxxl: '32px',\n    },\n    fontWeight: {\n      light: '300',\n      regular: '400',\n      medium: '500',\n      semibold: '600',\n      bold: '700',\n    },\n    lineHeight: {\n      tight: '1.25',\n      normal: '1.5',\n      relaxed: '1.75',\n    },\n  },\n  borders: {\n    radius: {\n      sm: '6px',\n      md: '8px',\n      lg: '12px',\n      xl: '16px',\n      full: '9999px',\n    },\n    width: {\n      thin: '1px',\n      medium: '2px',\n      thick: '3px',\n    },\n  },\n  shadows: {\n    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',\n    md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',\n    lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',\n    xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',\n    inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',\n  },\n  transitions: {\n    fast: '150ms ease-in-out',\n    normal: '250ms ease-in-out',\n    slow: '350ms ease-in-out',\n  },\n  overflow: 'auto'\n};"]}

package/dist/lib/module.d.ts

@@ -0,0 +1,22 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./components/mj-react-component.component";
+import * as i2 from "@angular/common";
+/**
+ * Angular module that provides React component hosting capabilities.
+ * Import this module to use React components within your Angular application.
+ *
+ * @example
+ * ```typescript
+ * import { MJReactModule } from '@memberjunction/ng-react';
+ *
+ * @NgModule({
+ *   imports: [MJReactModule]
+ * })
+ * export class MyModule {}
+ * ```
+ */
+export declare class MJReactModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MJReactModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MJReactModule, [typeof i1.MJReactComponent], [typeof i2.CommonModule], [typeof i1.MJReactComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<MJReactModule>;
+}

package/dist/lib/module.js

@@ -0,0 +1,58 @@
+/**
+ * @fileoverview Angular module for React component integration in MemberJunction.
+ * Provides components and services for hosting React components within Angular applications.
+ * @module @memberjunction/ng-react
+ */
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+// Components
+import { MJReactComponent } from './components/mj-react-component.component';
+// Services
+import { ScriptLoaderService } from './services/script-loader.service';
+import { ReactBridgeService } from './services/react-bridge.service';
+import { AngularAdapterService } from './services/angular-adapter.service';
+import * as i0 from "@angular/core";
+/**
+ * Angular module that provides React component hosting capabilities.
+ * Import this module to use React components within your Angular application.
+ *
+ * @example
+ * ```typescript
+ * import { MJReactModule } from '@memberjunction/ng-react';
+ *
+ * @NgModule({
+ *   imports: [MJReactModule]
+ * })
+ * export class MyModule {}
+ * ```
+ */
+export class MJReactModule {
+    static { this.ɵfac = function MJReactModule_Factory(t) { return new (t || MJReactModule)(); }; }
+    static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: MJReactModule }); }
+    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [
+            ScriptLoaderService,
+            ReactBridgeService,
+            AngularAdapterService
+        ], imports: [CommonModule] }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJReactModule, [{
+        type: NgModule,
+        args: [{
+                declarations: [
+                    MJReactComponent
+                ],
+                imports: [
+                    CommonModule
+                ],
+                providers: [
+                    ScriptLoaderService,
+                    ReactBridgeService,
+                    AngularAdapterService
+                ],
+                exports: [
+                    MJReactComponent
+                ]
+            }]
+    }], null, null); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MJReactModule, { declarations: [MJReactComponent], imports: [CommonModule], exports: [MJReactComponent] }); })();
+//# sourceMappingURL=module.js.map