@memberjunction/ng-react 2.70.0

package/dist/lib/module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"module.js","sourceRoot":"","sources":["../../src/lib/module.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,aAAa;AACb,OAAO,EAAE,gBAAgB,EAAE,MAAM,2CAA2C,CAAC;AAE7E,WAAW;AACX,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;;AAE3E;;;;;;;;;;;;;GAaG;AAiBH,MAAM,OAAO,aAAa;8EAAb,aAAa;mEAAb,aAAa;wEATb;YACT,mBAAmB;YACnB,kBAAkB;YAClB,qBAAqB;SACtB,YANC,YAAY;;iFAWH,aAAa;cAhBzB,QAAQ;eAAC;gBACR,YAAY,EAAE;oBACZ,gBAAgB;iBACjB;gBACD,OAAO,EAAE;oBACP,YAAY;iBACb;gBACD,SAAS,EAAE;oBACT,mBAAmB;oBACnB,kBAAkB;oBAClB,qBAAqB;iBACtB;gBACD,OAAO,EAAE;oBACP,gBAAgB;iBACjB;aACF;;wFACY,aAAa,mBAdtB,gBAAgB,aAGhB,YAAY,aAQZ,gBAAgB","sourcesContent":["/**\n * @fileoverview Angular module for React component integration in MemberJunction.\n * Provides components and services for hosting React components within Angular applications.\n * @module @memberjunction/ng-react\n */\n\nimport { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n// Components\nimport { MJReactComponent } from './components/mj-react-component.component';\n\n// Services\nimport { ScriptLoaderService } from './services/script-loader.service';\nimport { ReactBridgeService } from './services/react-bridge.service';\nimport { AngularAdapterService } from './services/angular-adapter.service';\n\n/**\n * Angular module that provides React component hosting capabilities.\n * Import this module to use React components within your Angular application.\n * \n * @example\n * ```typescript\n * import { MJReactModule } from '@memberjunction/ng-react';\n * \n * @NgModule({\n *   imports: [MJReactModule]\n * })\n * export class MyModule {}\n * ```\n */\n@NgModule({\n  declarations: [\n    MJReactComponent\n  ],\n  imports: [\n    CommonModule\n  ],\n  providers: [\n    ScriptLoaderService,\n    ReactBridgeService,\n    AngularAdapterService\n  ],\n  exports: [\n    MJReactComponent\n  ]\n})\nexport class MJReactModule { }"]}

package/dist/lib/services/angular-adapter.service.d.ts

@@ -0,0 +1,97 @@
+import { ComponentCompiler, ComponentRegistry, ComponentResolver, CompileOptions, RuntimeContext } from '@memberjunction/react-runtime';
+import { ScriptLoaderService } from './script-loader.service';
+import * as i0 from "@angular/core";
+/**
+ * Angular-specific adapter for the React runtime.
+ * Manages the integration between Angular services and the platform-agnostic React runtime.
+ */
+export declare class AngularAdapterService {
+    private scriptLoader;
+    private runtime?;
+    private runtimeContext?;
+    constructor(scriptLoader: ScriptLoaderService);
+    /**
+     * Initialize the React runtime with Angular-specific configuration
+     * @returns Promise resolving when runtime is ready
+     */
+    initialize(): Promise<void>;
+    /**
+     * Get the component compiler
+     * @returns Component compiler instance
+     */
+    getCompiler(): ComponentCompiler;
+    /**
+     * Get the component registry
+     * @returns Component registry instance
+     */
+    getRegistry(): ComponentRegistry;
+    /**
+     * Get the component resolver
+     * @returns Component resolver instance
+     */
+    getResolver(): ComponentResolver;
+    /**
+     * Get the runtime context
+     * @returns Runtime context with React and libraries
+     */
+    getRuntimeContext(): RuntimeContext;
+    /**
+     * Convert SkipComponentStyles to ComponentStyles
+     * @param skipStyles - Skip component styles
+     * @returns Component styles for React runtime
+     */
+    private convertStyles;
+    /**
+     * Compile a component with Angular-specific defaults
+     * @param options - Compilation options
+     * @returns Promise resolving to compilation result
+     */
+    compileComponent(options: CompileOptions & {
+        styles?: any;
+    }): Promise<import("@memberjunction/react-runtime").CompilationResult>;
+    /**
+     * Register a component in the registry
+     * @param name - Component name
+     * @param component - Compiled component
+     * @param namespace - Component namespace
+     * @param version - Component version
+     * @returns Component metadata
+     */
+    registerComponent(name: string, component: any, namespace?: string, version?: string): import("@memberjunction/react-runtime").ComponentMetadata;
+    /**
+     * Get a component from the registry
+     * @param name - Component name
+     * @param namespace - Component namespace
+     * @param version - Component version
+     * @returns Component if found
+     */
+    getComponent(name: string, namespace?: string, version?: string): any;
+    /**
+     * Check if runtime is initialized
+     * @returns true if initialized
+     */
+    isInitialized(): boolean;
+    /**
+     * Get runtime version
+     * @returns Runtime version string
+     */
+    getVersion(): string;
+    /**
+     * Clean up resources
+     */
+    destroy(): void;
+    /**
+     * Get Babel instance for direct use
+     * @returns Babel instance
+     */
+    getBabel(): any;
+    /**
+     * Transpile JSX code directly
+     * @param code - JSX code to transpile
+     * @param filename - Optional filename for better error messages
+     * @returns Transpiled JavaScript code
+     */
+    transpileJSX(code: string, filename?: string): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AngularAdapterService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<AngularAdapterService>;
+}

package/dist/lib/services/angular-adapter.service.js

@@ -0,0 +1,209 @@
+/**
+ * @fileoverview Angular adapter service that bridges the React runtime with Angular.
+ * Provides Angular-specific functionality for the platform-agnostic React runtime.
+ * @module @memberjunction/ng-react
+ */
+import { Injectable } from '@angular/core';
+import { createReactRuntime } from '@memberjunction/react-runtime';
+import { ScriptLoaderService } from './script-loader.service';
+import { DEFAULT_STYLES } from '../default-styles';
+import * as i0 from "@angular/core";
+import * as i1 from "./script-loader.service";
+/**
+ * Angular-specific adapter for the React runtime.
+ * Manages the integration between Angular services and the platform-agnostic React runtime.
+ */
+export class AngularAdapterService {
+    constructor(scriptLoader) {
+        this.scriptLoader = scriptLoader;
+    }
+    /**
+     * Initialize the React runtime with Angular-specific configuration
+     * @returns Promise resolving when runtime is ready
+     */
+    async initialize() {
+        if (this.runtime) {
+            return; // Already initialized
+        }
+        // Load React ecosystem
+        const ecosystem = await this.scriptLoader.loadReactEcosystem();
+        // Create runtime context
+        this.runtimeContext = {
+            React: ecosystem.React,
+            ReactDOM: ecosystem.ReactDOM,
+            libraries: ecosystem.libraries,
+            utilities: {
+            // Add any Angular-specific utilities here
+            }
+        };
+        // Create the React runtime
+        this.runtime = createReactRuntime(ecosystem.Babel, {
+            compiler: {
+                cache: true,
+                maxCacheSize: 100
+            },
+            registry: {
+                maxComponents: 1000,
+                cleanupInterval: 60000,
+                useLRU: true,
+                enableNamespaces: true
+            }
+        });
+    }
+    /**
+     * Get the component compiler
+     * @returns Component compiler instance
+     */
+    getCompiler() {
+        if (!this.runtime) {
+            throw new Error('React runtime not initialized. Call initialize() first.');
+        }
+        return this.runtime.compiler;
+    }
+    /**
+     * Get the component registry
+     * @returns Component registry instance
+     */
+    getRegistry() {
+        if (!this.runtime) {
+            throw new Error('React runtime not initialized. Call initialize() first.');
+        }
+        return this.runtime.registry;
+    }
+    /**
+     * Get the component resolver
+     * @returns Component resolver instance
+     */
+    getResolver() {
+        if (!this.runtime) {
+            throw new Error('React runtime not initialized. Call initialize() first.');
+        }
+        return this.runtime.resolver;
+    }
+    /**
+     * Get the runtime context
+     * @returns Runtime context with React and libraries
+     */
+    getRuntimeContext() {
+        if (!this.runtimeContext) {
+            throw new Error('React runtime not initialized. Call initialize() first.');
+        }
+        return this.runtimeContext;
+    }
+    /**
+     * Convert SkipComponentStyles to ComponentStyles
+     * @param skipStyles - Skip component styles
+     * @returns Component styles for React runtime
+     */
+    convertStyles(skipStyles) {
+        if (!skipStyles)
+            return undefined;
+        // Extract CSS-compatible properties
+        return {
+            className: skipStyles.className,
+            style: skipStyles.style,
+            globalCss: skipStyles.globalCss
+        };
+    }
+    /**
+     * Compile a component with Angular-specific defaults
+     * @param options - Compilation options
+     * @returns Promise resolving to compilation result
+     */
+    async compileComponent(options) {
+        await this.initialize();
+        // Apply default styles if not provided
+        const optionsWithDefaults = {
+            ...options,
+            styles: options.styles || DEFAULT_STYLES
+        };
+        return this.runtime.compiler.compile(optionsWithDefaults);
+    }
+    /**
+     * Register a component in the registry
+     * @param name - Component name
+     * @param component - Compiled component
+     * @param namespace - Component namespace
+     * @param version - Component version
+     * @returns Component metadata
+     */
+    registerComponent(name, component, namespace = 'Global', version = 'v1') {
+        if (!this.runtime) {
+            throw new Error('React runtime not initialized. Call initialize() first.');
+        }
+        return this.runtime.registry.register(name, component, namespace, version);
+    }
+    /**
+     * Get a component from the registry
+     * @param name - Component name
+     * @param namespace - Component namespace
+     * @param version - Component version
+     * @returns Component if found
+     */
+    getComponent(name, namespace = 'Global', version) {
+        if (!this.runtime) {
+            throw new Error('React runtime not initialized. Call initialize() first.');
+        }
+        return this.runtime.registry.get(name, namespace, version);
+    }
+    /**
+     * Check if runtime is initialized
+     * @returns true if initialized
+     */
+    isInitialized() {
+        return !!this.runtime && !!this.runtimeContext;
+    }
+    /**
+     * Get runtime version
+     * @returns Runtime version string
+     */
+    getVersion() {
+        return this.runtime?.version || 'unknown';
+    }
+    /**
+     * Clean up resources
+     */
+    destroy() {
+        if (this.runtime) {
+            this.runtime.registry.destroy();
+            this.runtime = undefined;
+            this.runtimeContext = undefined;
+        }
+    }
+    /**
+     * Get Babel instance for direct use
+     * @returns Babel instance
+     */
+    getBabel() {
+        return this.runtimeContext?.libraries?.Babel || window.Babel;
+    }
+    /**
+     * Transpile JSX code directly
+     * @param code - JSX code to transpile
+     * @param filename - Optional filename for better error messages
+     * @returns Transpiled JavaScript code
+     */
+    transpileJSX(code, filename) {
+        const babel = this.getBabel();
+        if (!babel) {
+            throw new Error('Babel not loaded. Initialize the runtime first.');
+        }
+        try {
+            const result = babel.transform(code, {
+                presets: ['react'],
+                filename: filename || 'component.jsx'
+            });
+            return result.code;
+        }
+        catch (error) {
+            throw new Error(`Failed to transpile JSX: ${error.message}`);
+        }
+    }
+    static { this.ɵfac = function AngularAdapterService_Factory(t) { return new (t || AngularAdapterService)(i0.ɵɵinject(i1.ScriptLoaderService)); }; }
+    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: AngularAdapterService, factory: AngularAdapterService.ɵfac, providedIn: 'root' }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AngularAdapterService, [{
+        type: Injectable,
+        args: [{ providedIn: 'root' }]
+    }], () => [{ type: i1.ScriptLoaderService }], null); })();
+//# sourceMappingURL=angular-adapter.service.js.map

package/dist/lib/services/angular-adapter.service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"angular-adapter.service.js","sourceRoot":"","sources":["../../../src/lib/services/angular-adapter.service.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @fileoverview Angular adapter service that bridges the React runtime with Angular.\n * Provides Angular-specific functionality for the platform-agnostic React runtime.\n * @module @memberjunction/ng-react\n */\n\nimport { Injectable } from '@angular/core';\nimport { \n  ComponentCompiler,\n  ComponentRegistry,\n  ComponentResolver,\n  createReactRuntime,\n  CompileOptions,\n  RuntimeContext,\n  ComponentStyles\n} from '@memberjunction/react-runtime';\nimport { ScriptLoaderService } from './script-loader.service';\nimport { DEFAULT_STYLES } from '../default-styles';\n\n/**\n * Angular-specific adapter for the React runtime.\n * Manages the integration between Angular services and the platform-agnostic React runtime.\n */\n@Injectable({ providedIn: 'root' })\nexport class AngularAdapterService {\n  private runtime?: {\n    compiler: ComponentCompiler;\n    registry: ComponentRegistry;\n    resolver: ComponentResolver;\n    version: string;\n  };\n  private runtimeContext?: RuntimeContext;\n\n  constructor(private scriptLoader: ScriptLoaderService) {}\n\n  /**\n   * Initialize the React runtime with Angular-specific configuration\n   * @returns Promise resolving when runtime is ready\n   */\n  async initialize(): Promise<void> {\n    if (this.runtime) {\n      return; // Already initialized\n    }\n\n    // Load React ecosystem\n    const ecosystem = await this.scriptLoader.loadReactEcosystem();\n    \n    // Create runtime context\n    this.runtimeContext = {\n      React: ecosystem.React,\n      ReactDOM: ecosystem.ReactDOM,\n      libraries: ecosystem.libraries,\n      utilities: {\n        // Add any Angular-specific utilities here\n      }\n    };\n\n    // Create the React runtime\n    this.runtime = createReactRuntime(ecosystem.Babel, {\n      compiler: {\n        cache: true,\n        maxCacheSize: 100\n      },\n      registry: {\n        maxComponents: 1000,\n        cleanupInterval: 60000,\n        useLRU: true,\n        enableNamespaces: true\n      }\n    });\n  }\n\n  /**\n   * Get the component compiler\n   * @returns Component compiler instance\n   */\n  getCompiler(): ComponentCompiler {\n    if (!this.runtime) {\n      throw new Error('React runtime not initialized. Call initialize() first.');\n    }\n    return this.runtime.compiler;\n  }\n\n  /**\n   * Get the component registry\n   * @returns Component registry instance\n   */\n  getRegistry(): ComponentRegistry {\n    if (!this.runtime) {\n      throw new Error('React runtime not initialized. Call initialize() first.');\n    }\n    return this.runtime.registry;\n  }\n\n  /**\n   * Get the component resolver\n   * @returns Component resolver instance\n   */\n  getResolver(): ComponentResolver {\n    if (!this.runtime) {\n      throw new Error('React runtime not initialized. Call initialize() first.');\n    }\n    return this.runtime.resolver;\n  }\n\n  /**\n   * Get the runtime context\n   * @returns Runtime context with React and libraries\n   */\n  getRuntimeContext(): RuntimeContext {\n    if (!this.runtimeContext) {\n      throw new Error('React runtime not initialized. Call initialize() first.');\n    }\n    return this.runtimeContext;\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?: any): ComponentStyles | undefined {\n    if (!skipStyles) return undefined;\n    \n    // Extract CSS-compatible properties\n    return {\n      className: skipStyles.className,\n      style: skipStyles.style,\n      globalCss: skipStyles.globalCss\n    };\n  }\n\n  /**\n   * Compile a component with Angular-specific defaults\n   * @param options - Compilation options\n   * @returns Promise resolving to compilation result\n   */\n  async compileComponent(options: CompileOptions & { styles?: any }) {\n    await this.initialize();\n    \n    // Apply default styles if not provided\n    const optionsWithDefaults = {\n      ...options,\n      styles: options.styles || DEFAULT_STYLES\n    };\n\n    return this.runtime!.compiler.compile(optionsWithDefaults);\n  }\n\n  /**\n   * Register a component in the registry\n   * @param name - Component name\n   * @param component - Compiled component\n   * @param namespace - Component namespace\n   * @param version - Component version\n   * @returns Component metadata\n   */\n  registerComponent(\n    name: string,\n    component: any,\n    namespace: string = 'Global',\n    version: string = 'v1'\n  ) {\n    if (!this.runtime) {\n      throw new Error('React runtime not initialized. Call initialize() first.');\n    }\n    return this.runtime.registry.register(name, component, namespace, version);\n  }\n\n  /**\n   * Get a component from the registry\n   * @param name - Component name\n   * @param namespace - Component namespace\n   * @param version - Component version\n   * @returns Component if found\n   */\n  getComponent(name: string, namespace: string = 'Global', version?: string) {\n    if (!this.runtime) {\n      throw new Error('React runtime not initialized. Call initialize() first.');\n    }\n    return this.runtime.registry.get(name, namespace, version);\n  }\n\n  /**\n   * Check if runtime is initialized\n   * @returns true if initialized\n   */\n  isInitialized(): boolean {\n    return !!this.runtime && !!this.runtimeContext;\n  }\n\n  /**\n   * Get runtime version\n   * @returns Runtime version string\n   */\n  getVersion(): string {\n    return this.runtime?.version || 'unknown';\n  }\n\n  /**\n   * Clean up resources\n   */\n  destroy(): void {\n    if (this.runtime) {\n      this.runtime.registry.destroy();\n      this.runtime = undefined;\n      this.runtimeContext = undefined;\n    }\n  }\n\n  /**\n   * Get Babel instance for direct use\n   * @returns Babel instance\n   */\n  getBabel(): any {\n    return this.runtimeContext?.libraries?.Babel || (window as any).Babel;\n  }\n\n  /**\n   * Transpile JSX code directly\n   * @param code - JSX code to transpile\n   * @param filename - Optional filename for better error messages\n   * @returns Transpiled JavaScript code\n   */\n  transpileJSX(code: string, filename?: string): string {\n    const babel = this.getBabel();\n    if (!babel) {\n      throw new Error('Babel not loaded. Initialize the runtime first.');\n    }\n\n    try {\n      const result = babel.transform(code, {\n        presets: ['react'],\n        filename: filename || 'component.jsx'\n      });\n      return result.code;\n    } catch (error: any) {\n      throw new Error(`Failed to transpile JSX: ${error.message}`);\n    }\n  }\n}"]}

package/dist/lib/services/react-bridge.service.d.ts

@@ -0,0 +1,76 @@
+/**
+ * @fileoverview Service to manage React and ReactDOM instances with proper lifecycle.
+ * Bridges Angular components with React rendering capabilities.
+ * @module @memberjunction/ng-react
+ */
+import { OnDestroy } from '@angular/core';
+import { AngularAdapterService } from './angular-adapter.service';
+import { RuntimeContext } from '@memberjunction/react-runtime';
+import * as i0 from "@angular/core";
+/**
+ * Service to manage React and ReactDOM instances with proper lifecycle.
+ * Provides methods for creating and managing React roots in Angular applications.
+ */
+export declare class ReactBridgeService implements OnDestroy {
+    private adapter;
+    private reactRoots;
+    private reactReadySubject;
+    reactReady$: import("rxjs").Observable<boolean>;
+    private firstComponentAttempted;
+    private maxWaitTime;
+    private checkInterval;
+    constructor(adapter: AngularAdapterService);
+    ngOnDestroy(): void;
+    /**
+     * Bootstrap React early during service initialization
+     */
+    private bootstrapReact;
+    /**
+     * Wait for React to be ready, with special handling for first component
+     */
+    waitForReactReady(): Promise<void>;
+    /**
+     * Get the current React context if loaded
+     * @returns React context with React, ReactDOM, Babel, and libraries
+     */
+    getReactContext(): Promise<RuntimeContext>;
+    /**
+     * Get the current React context synchronously
+     * @returns React context or null if not loaded
+     */
+    getCurrentContext(): RuntimeContext | null;
+    /**
+     * Create a React root for rendering
+     * @param container - DOM element to render into
+     * @returns React root instance
+     */
+    createRoot(container: HTMLElement): any;
+    /**
+     * Unmount and clean up a React root
+     * @param root - React root to unmount
+     */
+    unmountRoot(root: any): void;
+    /**
+     * Transpile JSX code to JavaScript
+     * @param code - JSX code to transpile
+     * @param filename - Optional filename for error messages
+     * @returns Transpiled JavaScript code
+     */
+    transpileJSX(code: string, filename: string): string;
+    /**
+     * Clean up all React roots and reset context
+     */
+    private cleanup;
+    /**
+     * Check if React is currently ready
+     * @returns true if React is ready
+     */
+    isReady(): boolean;
+    /**
+     * Get the number of active React roots
+     * @returns Number of active roots
+     */
+    getActiveRootsCount(): number;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ReactBridgeService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ReactBridgeService>;
+}

package/dist/lib/services/react-bridge.service.js

@@ -0,0 +1,189 @@
+/**
+ * @fileoverview Service to manage React and ReactDOM instances with proper lifecycle.
+ * Bridges Angular components with React rendering capabilities.
+ * @module @memberjunction/ng-react
+ */
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, firstValueFrom } from 'rxjs';
+import { filter } from 'rxjs/operators';
+import { AngularAdapterService } from './angular-adapter.service';
+import * as i0 from "@angular/core";
+import * as i1 from "./angular-adapter.service";
+/**
+ * Service to manage React and ReactDOM instances with proper lifecycle.
+ * Provides methods for creating and managing React roots in Angular applications.
+ */
+export class ReactBridgeService {
+    constructor(adapter) {
+        this.adapter = adapter;
+        this.reactRoots = new Set();
+        // Track React readiness state
+        this.reactReadySubject = new BehaviorSubject(false);
+        this.reactReady$ = this.reactReadySubject.asObservable();
+        // Track if this is the first component trying to use React
+        this.firstComponentAttempted = false;
+        this.maxWaitTime = 5000; // Maximum 5 seconds wait time
+        this.checkInterval = 200; // Check every 200ms
+        // Bootstrap React immediately on service initialization
+        this.bootstrapReact();
+    }
+    ngOnDestroy() {
+        this.cleanup();
+    }
+    /**
+     * Bootstrap React early during service initialization
+     */
+    async bootstrapReact() {
+        try {
+            await this.adapter.initialize();
+            console.log('React ecosystem pre-loaded successfully');
+        }
+        catch (error) {
+            console.error('Failed to pre-load React ecosystem:', error);
+        }
+    }
+    /**
+     * Wait for React to be ready, with special handling for first component
+     */
+    async waitForReactReady() {
+        // If already ready, return immediately
+        if (this.reactReadySubject.value) {
+            return;
+        }
+        // Check if this is the first component attempting to use React
+        const isFirstComponent = !this.firstComponentAttempted;
+        this.firstComponentAttempted = true;
+        if (isFirstComponent) {
+            // First component - check periodically until React is ready
+            console.log('First React component loading - checking for React initialization');
+            const startTime = Date.now();
+            while (Date.now() - startTime < this.maxWaitTime) {
+                try {
+                    const testDiv = document.createElement('div');
+                    const context = this.adapter.getRuntimeContext();
+                    if (context.ReactDOM?.createRoot) {
+                        // Try to create a test root
+                        const testRoot = context.ReactDOM.createRoot(testDiv);
+                        if (testRoot) {
+                            testRoot.unmount();
+                            // React is ready!
+                            this.reactReadySubject.next(true);
+                            console.log(`React is fully ready after ${Date.now() - startTime}ms`);
+                            return;
+                        }
+                    }
+                }
+                catch (error) {
+                    // Not ready yet, continue checking
+                }
+                // Wait before next check
+                await new Promise(resolve => setTimeout(resolve, this.checkInterval));
+            }
+            // If we've exhausted the wait time, throw error
+            console.error('React readiness test failed after maximum wait time');
+            this.firstComponentAttempted = false;
+            throw new Error(`ReactDOM.createRoot not available after ${this.maxWaitTime}ms`);
+        }
+        else {
+            // Subsequent components wait for the ready signal
+            await firstValueFrom(this.reactReady$.pipe(filter(ready => ready)));
+        }
+    }
+    /**
+     * Get the current React context if loaded
+     * @returns React context with React, ReactDOM, Babel, and libraries
+     */
+    async getReactContext() {
+        await this.adapter.initialize();
+        return this.adapter.getRuntimeContext();
+    }
+    /**
+     * Get the current React context synchronously
+     * @returns React context or null if not loaded
+     */
+    getCurrentContext() {
+        if (!this.adapter.isInitialized()) {
+            return null;
+        }
+        return this.adapter.getRuntimeContext();
+    }
+    /**
+     * Create a React root for rendering
+     * @param container - DOM element to render into
+     * @returns React root instance
+     */
+    createRoot(container) {
+        const context = this.getCurrentContext();
+        if (!context?.ReactDOM?.createRoot) {
+            throw new Error('ReactDOM.createRoot not available');
+        }
+        const root = context.ReactDOM.createRoot(container);
+        this.reactRoots.add(root);
+        return root;
+    }
+    /**
+     * Unmount and clean up a React root
+     * @param root - React root to unmount
+     */
+    unmountRoot(root) {
+        if (root && typeof root.unmount === 'function') {
+            try {
+                root.unmount();
+            }
+            catch (error) {
+                console.warn('Failed to unmount React root:', error);
+            }
+        }
+        this.reactRoots.delete(root);
+    }
+    /**
+     * Transpile JSX code to JavaScript
+     * @param code - JSX code to transpile
+     * @param filename - Optional filename for error messages
+     * @returns Transpiled JavaScript code
+     */
+    transpileJSX(code, filename) {
+        return this.adapter.transpileJSX(code, filename);
+    }
+    /**
+     * Clean up all React roots and reset context
+     */
+    cleanup() {
+        // Unmount all tracked React roots
+        for (const root of this.reactRoots) {
+            try {
+                root.unmount();
+            }
+            catch (error) {
+                console.warn('Failed to unmount React root:', error);
+            }
+        }
+        this.reactRoots.clear();
+        // Reset readiness state
+        this.reactReadySubject.next(false);
+        this.firstComponentAttempted = false;
+        // Clean up adapter
+        this.adapter.destroy();
+    }
+    /**
+     * Check if React is currently ready
+     * @returns true if React is ready
+     */
+    isReady() {
+        return this.reactReadySubject.value;
+    }
+    /**
+     * Get the number of active React roots
+     * @returns Number of active roots
+     */
+    getActiveRootsCount() {
+        return this.reactRoots.size;
+    }
+    static { this.ɵfac = function ReactBridgeService_Factory(t) { return new (t || ReactBridgeService)(i0.ɵɵinject(i1.AngularAdapterService)); }; }
+    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: ReactBridgeService, factory: ReactBridgeService.ɵfac, providedIn: 'root' }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ReactBridgeService, [{
+        type: Injectable,
+        args: [{ providedIn: 'root' }]
+    }], () => [{ type: i1.AngularAdapterService }], null); })();
+//# sourceMappingURL=react-bridge.service.js.map

package/dist/lib/services/react-bridge.service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-bridge.service.js","sourceRoot":"","sources":["../../../src/lib/services/react-bridge.service.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @fileoverview Service to manage React and ReactDOM instances with proper lifecycle.\n * Bridges Angular components with React rendering capabilities.\n * @module @memberjunction/ng-react\n */\n\nimport { Injectable, OnDestroy } from '@angular/core';\nimport { BehaviorSubject, firstValueFrom } from 'rxjs';\nimport { filter } from 'rxjs/operators';\nimport { AngularAdapterService } from './angular-adapter.service';\nimport { RuntimeContext } from '@memberjunction/react-runtime';\n\n/**\n * Service to manage React and ReactDOM instances with proper lifecycle.\n * Provides methods for creating and managing React roots in Angular applications.\n */\n@Injectable({ providedIn: 'root' })\nexport class ReactBridgeService implements OnDestroy {\n  private reactRoots = new Set<any>();\n  \n  // Track React readiness state\n  private reactReadySubject = new BehaviorSubject<boolean>(false);\n  public reactReady$ = this.reactReadySubject.asObservable();\n  \n  // Track if this is the first component trying to use React\n  private firstComponentAttempted = false;\n  private maxWaitTime = 5000; // Maximum 5 seconds wait time\n  private checkInterval = 200; // Check every 200ms\n\n  constructor(private adapter: AngularAdapterService) {\n    // Bootstrap React immediately on service initialization\n    this.bootstrapReact();\n  }\n\n  ngOnDestroy(): void {\n    this.cleanup();\n  }\n\n  /**\n   * Bootstrap React early during service initialization\n   */\n  private async bootstrapReact(): Promise<void> {\n    try {\n      await this.adapter.initialize();\n      console.log('React ecosystem pre-loaded successfully');\n    } catch (error) {\n      console.error('Failed to pre-load React ecosystem:', error);\n    }\n  }\n\n  /**\n   * Wait for React to be ready, with special handling for first component\n   */\n  async waitForReactReady(): Promise<void> {\n    // If already ready, return immediately\n    if (this.reactReadySubject.value) {\n      return;\n    }\n\n    // Check if this is the first component attempting to use React\n    const isFirstComponent = !this.firstComponentAttempted;\n    this.firstComponentAttempted = true;\n\n    if (isFirstComponent) {\n      // First component - check periodically until React is ready\n      console.log('First React component loading - checking for React initialization');\n      \n      const startTime = Date.now();\n      \n      while (Date.now() - startTime < this.maxWaitTime) {\n        try {\n          const testDiv = document.createElement('div');\n          const context = this.adapter.getRuntimeContext();\n          \n          if (context.ReactDOM?.createRoot) {\n            // Try to create a test root\n            const testRoot = context.ReactDOM.createRoot(testDiv);\n            if (testRoot) {\n              testRoot.unmount();\n              // React is ready!\n              this.reactReadySubject.next(true);\n              console.log(`React is fully ready after ${Date.now() - startTime}ms`);\n              return;\n            }\n          }\n        } catch (error) {\n          // Not ready yet, continue checking\n        }\n        \n        // Wait before next check\n        await new Promise(resolve => setTimeout(resolve, this.checkInterval));\n      }\n      \n      // If we've exhausted the wait time, throw error\n      console.error('React readiness test failed after maximum wait time');\n      this.firstComponentAttempted = false;\n      throw new Error(`ReactDOM.createRoot not available after ${this.maxWaitTime}ms`);\n    } else {\n      // Subsequent components wait for the ready signal\n      await firstValueFrom(this.reactReady$.pipe(filter(ready => ready)));\n    }\n  }\n\n  /**\n   * Get the current React context if loaded\n   * @returns React context with React, ReactDOM, Babel, and libraries\n   */\n  async getReactContext(): Promise<RuntimeContext> {\n    await this.adapter.initialize();\n    return this.adapter.getRuntimeContext();\n  }\n\n  /**\n   * Get the current React context synchronously\n   * @returns React context or null if not loaded\n   */\n  getCurrentContext(): RuntimeContext | null {\n    if (!this.adapter.isInitialized()) {\n      return null;\n    }\n    return this.adapter.getRuntimeContext();\n  }\n\n  /**\n   * Create a React root for rendering\n   * @param container - DOM element to render into\n   * @returns React root instance\n   */\n  createRoot(container: HTMLElement): any {\n    const context = this.getCurrentContext();\n    if (!context?.ReactDOM?.createRoot) {\n      throw new Error('ReactDOM.createRoot not available');\n    }\n\n    const root = context.ReactDOM.createRoot(container);\n    this.reactRoots.add(root);\n    return root;\n  }\n\n  /**\n   * Unmount and clean up a React root\n   * @param root - React root to unmount\n   */\n  unmountRoot(root: any): void {\n    if (root && typeof root.unmount === 'function') {\n      try {\n        root.unmount();\n      } catch (error) {\n        console.warn('Failed to unmount React root:', error);\n      }\n    }\n    this.reactRoots.delete(root);\n  }\n\n  /**\n   * Transpile JSX code to JavaScript\n   * @param code - JSX code to transpile\n   * @param filename - Optional filename for error messages\n   * @returns Transpiled JavaScript code\n   */\n  transpileJSX(code: string, filename: string): string {\n    return this.adapter.transpileJSX(code, filename);\n  }\n\n  /**\n   * Clean up all React roots and reset context\n   */\n  private cleanup(): void {\n    // Unmount all tracked React roots\n    for (const root of this.reactRoots) {\n      try {\n        root.unmount();\n      } catch (error) {\n        console.warn('Failed to unmount React root:', error);\n      }\n    }\n    this.reactRoots.clear();\n    \n    // Reset readiness state\n    this.reactReadySubject.next(false);\n    this.firstComponentAttempted = false;\n\n    // Clean up adapter\n    this.adapter.destroy();\n  }\n\n  /**\n   * Check if React is currently ready\n   * @returns true if React is ready\n   */\n  isReady(): boolean {\n    return this.reactReadySubject.value;\n  }\n\n  /**\n   * Get the number of active React roots\n   * @returns Number of active roots\n   */\n  getActiveRootsCount(): number {\n    return this.reactRoots.size;\n  }\n}"]}