@memberjunction/ng-react
Version:
Angular components for hosting React components in MemberJunction applications
133 lines (132 loc) • 4.78 kB
TypeScript
/**
* @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 { EventEmitter, ElementRef, AfterViewInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
import { ComponentSpec, ComponentStyles } from '@memberjunction/interactive-component-types';
import { ReactBridgeService } from '../services/react-bridge.service';
import { AngularAdapterService } from '../services/angular-adapter.service';
import { CompositeKey } from '@memberjunction/core';
import * as i0 from "@angular/core";
/**
* Event emitted by React components
*/
export interface ReactComponentEvent {
type: string;
payload: any;
}
/**
* State change event emitted when component state updates
*/
export interface StateChangeEvent {
path: string;
value: any;
}
/**
* User settings changed event emitted when component saves user preferences
*/
export interface UserSettingsChangedEvent {
settings: Record<string, any>;
componentName?: string;
timestamp: Date;
}
/**
* 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 declare class MJReactComponent implements AfterViewInit, OnDestroy {
private reactBridge;
private adapter;
private cdr;
component: ComponentSpec;
private _utilities;
set utilities(value: any);
get utilities(): any;
private _styles?;
set styles(value: Partial<ComponentStyles> | undefined);
get styles(): Partial<ComponentStyles>;
private _savedUserSettings;
set savedUserSettings(value: any);
get savedUserSettings(): any;
stateChange: EventEmitter<StateChangeEvent>;
componentEvent: EventEmitter<ReactComponentEvent>;
refreshData: EventEmitter<void>;
openEntityRecord: EventEmitter<{
entityName: string;
key: CompositeKey;
}>;
userSettingsChanged: EventEmitter<UserSettingsChangedEvent>;
container: ElementRef<HTMLDivElement>;
private reactRootId;
private compiledComponent;
private destroyed$;
private currentCallbacks;
isInitialized: boolean;
private isRendering;
private pendingRender;
private isDestroying;
private componentId;
private componentVersion;
hasError: boolean;
constructor(reactBridge: ReactBridgeService, adapter: AngularAdapterService, cdr: ChangeDetectorRef);
ngAfterViewInit(): Promise<void>;
ngOnDestroy(): void;
/**
* Initialize the React component
*/
private initializeComponent;
/**
* Generate a hash from component code for versioning
* Uses a simple hash function that's fast and sufficient for version differentiation
*/
private generateComponentHash;
/**
* Resolve components with specific version
*/
private resolveComponentsWithVersion;
/**
* Log existing versions of components in registry (for debugging)
*/
private logExistingVersions;
/**
* Register all components in the hierarchy
*/
private registerComponentHierarchy;
/**
* Render the React component
*/
private renderComponent;
/**
* Create callbacks for the React component
*/
private createCallbacks;
/**
* Handle React component errors
*/
private handleReactError;
/**
* Handle onSaveUserSettings from components
* This implements the SavedUserSettings pattern
*/
private handleSaveUserSettings;
/**
* Clean up resources
*/
private cleanup;
/**
* Public method to refresh the component
* @deprecated Components manage their own state and data now
*/
refresh(): void;
/**
* Public method to update state programmatically
* @param path - State path to update
* @param value - New value
* @deprecated Components manage their own state now
*/
updateState(path: string, value: any): void;
static ɵfac: i0.ɵɵFactoryDeclaration<MJReactComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<MJReactComponent, "mj-react-component", never, { "component": { "alias": "component"; "required": false; }; "utilities": { "alias": "utilities"; "required": false; }; "styles": { "alias": "styles"; "required": false; }; "savedUserSettings": { "alias": "savedUserSettings"; "required": false; }; }, { "stateChange": "stateChange"; "componentEvent": "componentEvent"; "refreshData": "refreshData"; "openEntityRecord": "openEntityRecord"; "userSettingsChanged": "userSettingsChanged"; }, never, never, false, never>;
}