wu-framework 1.1.6 → 1.1.8

package/src/adapters/angular.js

@@ -1,813 +1,3 @@
-/**
- * 🚀 WU-FRAMEWORK ANGULAR ADAPTER
- *
- * Simplifica la integración de Angular con Wu Framework.
- * Convierte componentes Angular en microfrontends con configuración mínima.
- *
- * @example
- * // Microfrontend (main.ts)
- * import { wuAngular } from 'wu-framework/adapters/angular';
- * import { AppModule } from './app/app.module';
- * // o para standalone components
- * import { AppComponent } from './app/app.component';
- *
- * wuAngular.register('my-app', AppModule);
- * // o
- * wuAngular.registerStandalone('my-app', AppComponent);
- *
- * @example
- * // Shell (cargar microfrontend)
- * import { WuSlotComponent } from 'wu-framework/adapters/angular';
- *
- * <wu-slot name="my-app" url="http://localhost:3001"></wu-slot>
- */
-
-// Estado global del adapter
-const adapterState = {
-  apps: new Map(),
-  platformRef: null,
-  initialized: false
-};
-
-/**
- * Obtiene la instancia de Wu Framework
- */
-function getWuInstance() {
-  if (typeof window === 'undefined') return null;
-
-  return window.wu
-    || window.parent?.wu
-    || window.top?.wu
-    || null;
-}
-
-/**
- * Espera a que Wu Framework esté disponible
- */
-function waitForWu(timeout = 5000) {
-  return new Promise((resolve, reject) => {
-    const wu = getWuInstance();
-    if (wu) {
-      resolve(wu);
-      return;
-    }
-
-    const startTime = Date.now();
-
-    const handleWuReady = () => {
-      cleanup();
-      resolve(getWuInstance());
-    };
-
-    window.addEventListener('wu:ready', handleWuReady);
-    window.addEventListener('wu:app:ready', handleWuReady);
-
-    const checkInterval = setInterval(() => {
-      const wu = getWuInstance();
-      if (wu) {
-        cleanup();
-        resolve(wu);
-        return;
-      }
-
-      if (Date.now() - startTime > timeout) {
-        cleanup();
-        reject(new Error(`Wu Framework not found after ${timeout}ms`));
-      }
-    }, 200);
-
-    function cleanup() {
-      clearInterval(checkInterval);
-      window.removeEventListener('wu:ready', handleWuReady);
-      window.removeEventListener('wu:app:ready', handleWuReady);
-    }
-  });
-}
-
-/**
- * Registra un módulo Angular como microfrontend
- *
- * @param {string} appName - Nombre único del microfrontend
- * @param {Type<any>} AppModule - Módulo Angular principal (AppModule)
- * @param {Object} options - Opciones adicionales
- * @param {Function} options.platformFactory - Factory del platform (platformBrowserDynamic por defecto)
- * @param {Array} options.providers - Providers adicionales para bootstrap
- * @param {Function} options.onMount - Callback después de montar
- * @param {Function} options.onUnmount - Callback antes de desmontar
- * @param {boolean} options.standalone - Permitir ejecución standalone (default: true)
- * @param {string} options.standaloneContainer - Selector para modo standalone (default: '#root')
- * @param {string} options.rootSelector - Selector del componente root (default: 'app-root')
- *
- * @example
- * // Básico
- * wuAngular.register('my-app', AppModule);
- *
- * @example
- * // Con opciones
- * wuAngular.register('my-app', AppModule, {
- *   providers: [{ provide: 'API_URL', useValue: 'https://api.example.com' }],
- *   onMount: (container) => console.log('Mounted!'),
- *   rootSelector: 'my-app-root'
- * });
- */
-async function register(appName, AppModule, options = {}) {
-  const {
-    platformFactory = null,
-    providers = [],
-    onMount = null,
-    onUnmount = null,
-    standalone = true,
-    standaloneContainer = '#root',
-    rootSelector = 'app-root'
-  } = options;
-
-  // Función de mount interna
-  const mountApp = async (container) => {
-    if (!container) {
-      console.error(`[WuAngular] Mount failed for ${appName}: container is null`);
-      return;
-    }
-
-    // Evitar doble mount
-    if (adapterState.apps.has(appName)) {
-      console.warn(`[WuAngular] ${appName} already mounted, unmounting first`);
-      await unmountApp();
-    }
-
-    try {
-      // Crear elemento root para Angular
-      const appElement = document.createElement(rootSelector);
-      appElement.setAttribute('data-wu-angular-root', appName);
-      container.innerHTML = '';
-      container.appendChild(appElement);
-
-      // Obtener platformBrowserDynamic
-      let platform;
-      if (platformFactory) {
-        platform = platformFactory;
-      } else {
-        // Intentar import dinámico
-        try {
-          const platformModule = await import('@angular/platform-browser-dynamic');
-          platform = platformModule.platformBrowserDynamic;
-        } catch (e) {
-          // Intentar desde window
-          if (window.ng?.platformBrowserDynamic) {
-            platform = window.ng.platformBrowserDynamic;
-          } else {
-            throw new Error('platformBrowserDynamic not available. Please provide it via options.platformFactory');
-          }
-        }
-      }
-
-      // Bootstrap del módulo
-      const platformRef = platform(providers);
-      const moduleRef = await platformRef.bootstrapModule(AppModule);
-
-      // Guardar referencias
-      adapterState.apps.set(appName, {
-        platformRef,
-        moduleRef,
-        container,
-        rootElement: appElement
-      });
-
-      console.log(`[WuAngular] ✅ ${appName} mounted successfully`);
-
-      if (onMount) {
-        onMount(container, moduleRef);
-      }
-    } catch (error) {
-      console.error(`[WuAngular] Mount error for ${appName}:`, error);
-      throw error;
-    }
-  };
-
-  // Función de unmount interna
-  const unmountApp = async (container) => {
-    const instance = adapterState.apps.get(appName);
-
-    if (instance) {
-      try {
-        if (onUnmount) {
-          onUnmount(instance.container, instance.moduleRef);
-        }
-
-        // Destruir el módulo
-        if (instance.moduleRef) {
-          instance.moduleRef.destroy();
-        }
-
-        // Destruir la plataforma
-        if (instance.platformRef) {
-          instance.platformRef.destroy();
-        }
-
-        // Limpiar DOM
-        if (instance.rootElement && instance.rootElement.parentNode) {
-          instance.rootElement.parentNode.removeChild(instance.rootElement);
-        }
-
-        adapterState.apps.delete(appName);
-
-        console.log(`[WuAngular] ✅ ${appName} unmounted successfully`);
-      } catch (error) {
-        console.error(`[WuAngular] Unmount error for ${appName}:`, error);
-      }
-    }
-
-    // Limpiar container si se proporciona
-    if (container) {
-      container.innerHTML = '';
-    }
-  };
-
-  // Intentar registrar con Wu Framework
-  try {
-    const wu = await waitForWu(3000);
-
-    wu.define(appName, {
-      mount: mountApp,
-      unmount: unmountApp
-    });
-
-    console.log(`[WuAngular] ✅ ${appName} registered with Wu Framework`);
-    return true;
-
-  } catch (error) {
-    console.warn(`[WuAngular] Wu Framework not available for ${appName}`);
-
-    // Modo standalone si está habilitado
-    if (standalone) {
-      const containerElement = document.querySelector(standaloneContainer);
-
-      if (containerElement) {
-        console.log(`[WuAngular] Running ${appName} in standalone mode`);
-        await mountApp(containerElement);
-        return true;
-      } else {
-        console.warn(`[WuAngular] Standalone container ${standaloneContainer} not found`);
-      }
-    }
-
-    return false;
-  }
-}
-
-/**
- * Registra un componente Angular standalone como microfrontend (Angular 14+)
- *
- * @param {string} appName - Nombre único del microfrontend
- * @param {Type<any>} RootComponent - Componente standalone principal
- * @param {Object} options - Opciones adicionales
- * @param {ApplicationConfig} options.appConfig - Configuración de la aplicación
- * @param {Function} options.onMount - Callback después de montar
- * @param {Function} options.onUnmount - Callback antes de desmontar
- * @param {boolean} options.standalone - Permitir ejecución standalone (default: true)
- * @param {string} options.standaloneContainer - Selector para modo standalone (default: '#root')
- *
- * @example
- * // Angular 14+ con standalone components
- * import { AppComponent } from './app/app.component';
- * import { appConfig } from './app/app.config';
- *
- * wuAngular.registerStandalone('my-app', AppComponent, { appConfig });
- */
-async function registerStandalone(appName, RootComponent, options = {}) {
-  const {
-    appConfig = {},
-    onMount = null,
-    onUnmount = null,
-    standalone = true,
-    standaloneContainer = '#root'
-  } = options;
-
-  // Función de mount para standalone components
-  const mountApp = async (container) => {
-    if (!container) {
-      console.error(`[WuAngular] Mount failed for ${appName}: container is null`);
-      return;
-    }
-
-    // Evitar doble mount
-    if (adapterState.apps.has(appName)) {
-      console.warn(`[WuAngular] ${appName} already mounted, unmounting first`);
-      await unmountApp();
-    }
-
-    try {
-      // Obtener bootstrapApplication
-      let bootstrapApplication;
-      try {
-        const browserModule = await import('@angular/platform-browser');
-        bootstrapApplication = browserModule.bootstrapApplication;
-      } catch (e) {
-        if (window.ng?.bootstrapApplication) {
-          bootstrapApplication = window.ng.bootstrapApplication;
-        } else {
-          throw new Error('bootstrapApplication not available. Requires Angular 14+');
-        }
-      }
-
-      // Bootstrap del componente standalone
-      const appRef = await bootstrapApplication(RootComponent, appConfig);
-
-      // Guardar referencias
-      adapterState.apps.set(appName, {
-        appRef,
-        container,
-        isStandalone: true
-      });
-
-      console.log(`[WuAngular] ✅ ${appName} (standalone) mounted successfully`);
-
-      if (onMount) {
-        onMount(container, appRef);
-      }
-    } catch (error) {
-      console.error(`[WuAngular] Mount error for ${appName}:`, error);
-      throw error;
-    }
-  };
-
-  // Función de unmount para standalone
-  const unmountApp = async (container) => {
-    const instance = adapterState.apps.get(appName);
-
-    if (instance) {
-      try {
-        if (onUnmount) {
-          onUnmount(instance.container, instance.appRef);
-        }
-
-        // Destruir la aplicación
-        if (instance.appRef) {
-          instance.appRef.destroy();
-        }
-
-        adapterState.apps.delete(appName);
-
-        console.log(`[WuAngular] ✅ ${appName} (standalone) unmounted successfully`);
-      } catch (error) {
-        console.error(`[WuAngular] Unmount error for ${appName}:`, error);
-      }
-    }
-
-    if (container) {
-      container.innerHTML = '';
-    }
-  };
-
-  // Intentar registrar con Wu Framework
-  try {
-    const wu = await waitForWu(3000);
-
-    wu.define(appName, {
-      mount: mountApp,
-      unmount: unmountApp
-    });
-
-    console.log(`[WuAngular] ✅ ${appName} (standalone) registered with Wu Framework`);
-    return true;
-
-  } catch (error) {
-    console.warn(`[WuAngular] Wu Framework not available for ${appName}`);
-
-    if (standalone) {
-      const containerElement = document.querySelector(standaloneContainer);
-
-      if (containerElement) {
-        console.log(`[WuAngular] Running ${appName} in standalone mode`);
-        await mountApp(containerElement);
-        return true;
-      }
-    }
-
-    return false;
-  }
-}
-
-/**
- * Registra un componente Angular Elements (Web Component) como microfrontend
- *
- * @param {string} appName - Nombre único del microfrontend
- * @param {Type<any>} Component - Componente Angular standalone
- * @param {Object} options - Opciones adicionales
- * @param {string} options.elementTag - Tag del custom element (default: basado en appName)
- * @param {ApplicationConfig} options.appConfig - Configuración de la aplicación Angular
- * @param {Function} options.onMount - Callback después de montar
- * @param {Function} options.onUnmount - Callback antes de desmontar
- * @param {boolean} options.standalone - Permitir ejecución standalone (default: true)
- * @param {string} options.standaloneContainer - Selector para modo standalone (default: '#root')
- *
- * @example
- * // Angular Elements (Web Components)
- * import { App } from './app/app';
- * import { appConfig } from './app/app.config';
- *
- * wuAngular.registerElement('mfe-angular', App, {
- *   elementTag: 'mfe-angular-content',
- *   appConfig
- * });
- */
-async function registerElement(appName, Component, options = {}) {
-  const {
-    elementTag = `${appName}-element`,
-    appConfig = {},
-    onMount = null,
-    onUnmount = null,
-    standalone = true,
-    standaloneContainer = '#root'
-  } = options;
-
-  let customElementRegistered = false;
-
-  // Función para inicializar Angular Elements
-  const initializeElement = async () => {
-    if (customElementRegistered) return true;
-
-    try {
-      // Import dinámico de Angular
-      const [{ createApplication }, { createCustomElement }] = await Promise.all([
-        import('@angular/platform-browser'),
-        import('@angular/elements')
-      ]);
-
-      // Crear aplicación Angular
-      const app = await createApplication(appConfig);
-
-      // Crear y registrar el custom element
-      const CustomElement = createCustomElement(Component, { injector: app.injector });
-
-      if (!customElements.get(elementTag)) {
-        customElements.define(elementTag, CustomElement);
-        console.log(`[WuAngular] ✅ Custom element registered: ${elementTag}`);
-      }
-
-      customElementRegistered = true;
-
-      // Guardar referencia
-      adapterState.apps.set(`${appName}:element`, {
-        app,
-        elementTag,
-        CustomElement
-      });
-
-      return true;
-    } catch (error) {
-      console.error(`[WuAngular] Failed to initialize Angular Element:`, error);
-      throw error;
-    }
-  };
-
-  // Función de mount
-  const mountApp = async (container) => {
-    if (!container) {
-      console.error(`[WuAngular] Mount failed for ${appName}: container is null`);
-      return;
-    }
-
-    try {
-      // Asegurar que el elemento está registrado
-      await initializeElement();
-
-      // Crear el elemento custom
-      const element = document.createElement(elementTag);
-      element.setAttribute('data-wu-angular-element', appName);
-
-      // Limpiar y agregar al container
-      container.innerHTML = '';
-      container.appendChild(element);
-
-      // Guardar referencia del mount
-      adapterState.apps.set(appName, {
-        element,
-        container,
-        elementTag
-      });
-
-      console.log(`[WuAngular] ✅ ${appName} (element) mounted successfully`);
-
-      if (onMount) {
-        onMount(container, element);
-      }
-
-      return element;
-    } catch (error) {
-      console.error(`[WuAngular] Mount error for ${appName}:`, error);
-      throw error;
-    }
-  };
-
-  // Función de unmount
-  const unmountApp = async (container) => {
-    const instance = adapterState.apps.get(appName);
-
-    if (instance) {
-      try {
-        if (onUnmount) {
-          onUnmount(instance.container, instance.element);
-        }
-
-        // Remover elemento del DOM
-        if (instance.element && instance.element.parentNode) {
-          instance.element.remove();
-        }
-
-        adapterState.apps.delete(appName);
-
-        console.log(`[WuAngular] ✅ ${appName} (element) unmounted successfully`);
-      } catch (error) {
-        console.error(`[WuAngular] Unmount error for ${appName}:`, error);
-      }
-    }
-
-    if (container) {
-      container.innerHTML = '';
-    }
-  };
-
-  // Intentar registrar con Wu Framework
-  try {
-    const wu = await waitForWu(3000);
-
-    wu.define(appName, {
-      mount: mountApp,
-      unmount: unmountApp
-    });
-
-    console.log(`[WuAngular] ✅ ${appName} (element) registered with Wu Framework`);
-    return true;
-
-  } catch (error) {
-    console.warn(`[WuAngular] Wu Framework not available for ${appName}`);
-
-    if (standalone) {
-      const containerElement = document.querySelector(standaloneContainer);
-
-      if (containerElement) {
-        console.log(`[WuAngular] Running ${appName} in standalone mode`);
-        await mountApp(containerElement);
-        return true;
-      }
-    }
-
-    return false;
-  }
-}
-
-/**
- * Servicio Injectable para usar Wu Framework en Angular
- *
- * @example
- * // En tu módulo o componente
- * import { WuService } from 'wu-framework/adapters/angular';
- *
- * @Injectable()
- * export class MyService {
- *   constructor() {
- *     this.wu = createWuService();
- *   }
- *
- *   sendEvent() {
- *     this.wu.emit('user:action', { data: 'test' });
- *   }
- * }
- */
-function createWuService() {
-  const subscriptions = [];
-
-  return {
-    // Event Bus
-    emit: (event, data, options) => {
-      const wu = getWuInstance();
-      if (wu?.eventBus) {
-        wu.eventBus.emit(event, data, options);
-      } else {
-        console.warn('[WuService] Wu Framework not available');
-      }
-    },
-
-    on: (event, callback) => {
-      const wu = getWuInstance();
-      if (wu?.eventBus) {
-        const unsubscribe = wu.eventBus.on(event, callback);
-        subscriptions.push(unsubscribe);
-        return unsubscribe;
-      }
-      console.warn('[WuService] Wu Framework not available');
-      return () => {};
-    },
-
-    once: (event, callback) => {
-      const wu = getWuInstance();
-      if (wu?.eventBus) {
-        return wu.eventBus.once(event, callback);
-      }
-      return () => {};
-    },
-
-    off: (event, callback) => {
-      const wu = getWuInstance();
-      if (wu?.eventBus) {
-        wu.eventBus.off(event, callback);
-      }
-    },
-
-    // Store
-    getState: (path) => {
-      const wu = getWuInstance();
-      return wu?.store?.get(path) || null;
-    },
-
-    setState: (path, value) => {
-      const wu = getWuInstance();
-      if (wu?.store) {
-        wu.store.set(path, value);
-      }
-    },
-
-    onStateChange: (pattern, callback) => {
-      const wu = getWuInstance();
-      if (wu?.store) {
-        const unsubscribe = wu.store.on(pattern, callback);
-        subscriptions.push(unsubscribe);
-        return unsubscribe;
-      }
-      return () => {};
-    },
-
-    // Cleanup
-    destroy: () => {
-      subscriptions.forEach(unsub => unsub());
-      subscriptions.length = 0;
-    },
-
-    // Access to raw Wu instance
-    get wu() {
-      return getWuInstance();
-    }
-  };
-}
-
-/**
- * Crea un componente Angular para cargar microfrontends (para el Shell)
- * Retorna la configuración del componente para ser usado con @Component
- *
- * @example
- * // wu-slot.component.ts
- * import { Component, Input, Output, EventEmitter } from '@angular/core';
- * import { createWuSlotComponent } from 'wu-framework/adapters/angular';
- *
- * const config = createWuSlotComponent();
- *
- * @Component({
- *   selector: 'wu-slot',
- *   template: config.template,
- *   styles: config.styles
- * })
- * export class WuSlotComponent {
- *   @Input() name!: string;
- *   @Input() url!: string;
- *   @Output() load = new EventEmitter();
- *   @Output() error = new EventEmitter();
- *
- *   // ... implement lifecycle methods from config.methods
- * }
- */
-function createWuSlotComponent() {
-  return {
-    selector: 'wu-slot',
-
-    template: `
-      <div
-        #container
-        class="wu-slot"
-        [class.wu-slot-loading]="loading"
-        [class.wu-slot-error]="error"
-        [attr.data-wu-app]="name"
-        [attr.data-wu-url]="url"
-        style="min-height: 100px; position: relative;">
-
-        <div *ngIf="error" class="wu-slot-error-message"
-             style="padding: 1rem; border: 1px solid #f5c6cb; border-radius: 4px; background: #f8d7da; color: #721c24;">
-          <strong>Error loading {{ name }}</strong>
-          <p style="margin: 0.5rem 0 0 0;">{{ error }}</p>
-        </div>
-
-        <div *ngIf="loading && !error" class="wu-slot-loading-message"
-             style="display: flex; align-items: center; justify-content: center; padding: 2rem; color: #666;">
-          {{ fallbackText || 'Loading ' + name + '...' }}
-        </div>
-      </div>
-    `,
-
-    styles: [`
-      .wu-slot {
-        width: 100%;
-        min-height: 100px;
-      }
-    `],
-
-    // Métodos para implementar en el componente
-    methods: {
-      async ngOnInit() {
-        await this.mountMicrofrontend();
-      },
-
-      ngOnDestroy() {
-        this.unmountMicrofrontend();
-      },
-
-      async mountMicrofrontend() {
-        try {
-          this.loading = true;
-          this.error = null;
-
-          const wu = getWuInstance();
-          if (!wu) {
-            throw new Error('Wu Framework not initialized');
-          }
-
-          // Crear container único
-          const containerId = `wu-slot-${this.name}-${Date.now()}`;
-          const innerContainer = document.createElement('div');
-          innerContainer.id = containerId;
-          innerContainer.style.width = '100%';
-          innerContainer.style.height = '100%';
-
-          this.container.nativeElement.innerHTML = '';
-          this.container.nativeElement.appendChild(innerContainer);
-
-          // Crear y montar la app
-          const app = wu.app(this.name, {
-            url: this.url,
-            container: `#${containerId}`,
-            autoInit: true
-          });
-
-          this.appInstance = app;
-          await app.mount();
-
-          this.loading = false;
-          this.load.emit({ name: this.name, url: this.url });
-
-        } catch (err) {
-          console.error(`[WuSlot] Error loading ${this.name}:`, err);
-          this.error = err.message || 'Failed to load microfrontend';
-          this.loading = false;
-          this.errorEvent.emit(err);
-        }
-      },
-
-      async unmountMicrofrontend() {
-        if (this.appInstance) {
-          try {
-            await this.appInstance.unmount();
-          } catch (err) {
-            console.warn(`[WuSlot] Error unmounting ${this.name}:`, err);
-          }
-          this.appInstance = null;
-        }
-      }
-    }
-  };
-}
-
-/**
- * Helper para crear un módulo Angular que exporta WuSlotComponent
- * Útil para shells que quieren usar <wu-slot> directamente
- */
-function getWuSlotModuleConfig() {
-  return {
-    imports: ['CommonModule'],
-    declarations: ['WuSlotComponent'],
-    exports: ['WuSlotComponent']
-  };
-}
-
-// API pública del adapter
-export const wuAngular = {
-  register,
-  registerStandalone,
-  registerElement,
-  createWuService,
-  createWuSlotComponent,
-  getWuSlotModuleConfig,
-  getWuInstance,
-  waitForWu
-};
-
-// Named exports para conveniencia
-export {
-  register,
-  registerStandalone,
-  registerElement,
-  createWuService,
-  createWuSlotComponent,
-  getWuSlotModuleConfig,
-  getWuInstance,
-  waitForWu
-};
-
-export default wuAngular;
+// Re-export from folder structure — backward compatibility
+export * from './angular/index.js';
+export { default } from './angular/index.js';