wu-framework 1.0.6 → 1.1.0

package/src/adapters/angular.js

@@ -0,0 +1,642 @@
+/**
+ * 🚀 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;
+  }
+}
+
+/**
+ * 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,
+  createWuService,
+  createWuSlotComponent,
+  getWuSlotModuleConfig,
+  getWuInstance,
+  waitForWu
+};
+
+// Named exports para conveniencia
+export {
+  register,
+  registerStandalone,
+  createWuService,
+  createWuSlotComponent,
+  getWuSlotModuleConfig,
+  getWuInstance,
+  waitForWu
+};
+
+export default wuAngular;