wu-framework 1.0.0

package/src/api/wu-simple.js

@@ -0,0 +1,316 @@
+/**
+ * 🚀 WU-FRAMEWORK SIMPLIFIED API
+ * Developer-friendly interface for universal microfrontends
+ */
+
+import { wu as wuCore } from '../index.js'
+import { logger } from '../core/wu-logger.js'
+
+class WuSimpleAPI {
+  constructor() {
+    this.core = wuCore
+    this.autoInitialized = false
+    this.defaultConfig = {
+      container: '#app',
+      mode: 'auto', // auto, spa, microfrontend
+      debug: false,
+      timeout: 30000,
+      retries: 3
+    }
+  }
+
+  /**
+   * 🌟 SMART MOUNT: Intelligent mounting with auto-discovery
+   * wu.mount('dashboard').into('#container')
+   * wu.mount('http://localhost:3001/dashboard')
+   */
+  mount(appNameOrUrl) {
+    const mountAPI = {
+      into: async (containerSelector = this.defaultConfig.container) => {
+        await this._ensureInitialized()
+
+        // 🔍 Detect if it's a URL or app name
+        if (this._isUrl(appNameOrUrl)) {
+          return await this._mountFromUrl(appNameOrUrl, containerSelector)
+        } else {
+          return await this._mountFromName(appNameOrUrl, containerSelector)
+        }
+      }
+    }
+
+    // Support direct call: wu.mount('dashboard', '#container')
+    if (typeof arguments[1] === 'string') {
+      return mountAPI.into(arguments[1])
+    }
+
+    return mountAPI
+  }
+
+  /**
+   * 🚀 QUICK LOAD: One-liner for loading remote microfrontends
+   * wu.load('http://localhost:3001/dashboard')
+   * wu.load('http://localhost:3001', { name: 'dashboard' })
+   */
+  async load(url, options = {}) {
+    await this._ensureInitialized()
+
+    const appName = options.name || this._extractAppName(url)
+    const container = options.container || this.defaultConfig.container
+
+    // Auto-register and mount
+    await this._registerFromUrl(url, appName)
+    return await this.mount(appName).into(container)
+  }
+
+  /**
+   * 🎯 BATCH OPERATIONS: Load multiple apps at once
+   * wu.loadMany([
+   *   { name: 'dashboard', url: 'http://localhost:3001' },
+   *   { name: 'sidebar', url: 'http://localhost:3002' }
+   * ])
+   */
+  async loadMany(apps) {
+    await this._ensureInitialized()
+
+    const results = []
+    for (const app of apps) {
+      try {
+        await this._registerFromUrl(app.url, app.name)
+        results.push({ name: app.name, status: 'registered' })
+      } catch (error) {
+        results.push({ name: app.name, status: 'failed', error: error.message })
+      }
+    }
+
+    return results
+  }
+
+  /**
+   * 🔧 CONFIGURATION: Flexible configuration methods
+   * wu.config({ debug: true, timeout: 60000 })
+   * wu.debug(true)
+   * wu.timeout(30000)
+   */
+  config(options = {}) {
+    Object.assign(this.defaultConfig, options)
+
+    if (options.debug) {
+      logger.wuDebug('🔧 Configuration updated:', this.defaultConfig)
+    }
+
+    return this
+  }
+
+  /**
+   * 🐛 DEBUG MODE: Quick debug toggle
+   * wu.debug(true)
+   * wu.debug() // toggle
+   */
+  debug(enabled) {
+    if (enabled === undefined) {
+      this.defaultConfig.debug = !this.defaultConfig.debug
+    } else {
+      this.defaultConfig.debug = !!enabled
+    }
+
+    logger.wuInfo(`🐛 Debug mode: ${this.defaultConfig.debug ? 'ON' : 'OFF'}`)
+    return this
+  }
+
+  /**
+   * ⏱️ TIMEOUT: Set operation timeout
+   * wu.timeout(60000) // 60 seconds
+   */
+  timeout(ms) {
+    this.defaultConfig.timeout = ms
+    logger.wuDebug(`⏱️ Timeout set to ${ms}ms`)
+    return this
+  }
+
+  /**
+   * 🔄 RETRIES: Set retry attempts
+   * wu.retries(5)
+   */
+  retries(count) {
+    this.defaultConfig.retries = count
+    logger.wuDebug(`🔄 Retries set to ${count}`)
+    return this
+  }
+
+  /**
+   * 🎯 DEFAULT CONTAINER: Set default mounting container
+   * wu.container('#main-app')
+   */
+  container(selector) {
+    this.defaultConfig.container = selector
+    logger.wuDebug(`🎯 Default container set to ${selector}`)
+    return this
+  }
+
+  /**
+   * 🌐 GLOBAL SETTINGS: Environment-based configuration
+   * wu.development() // Sets debug: true, retries: 1
+   * wu.production()  // Sets debug: false, retries: 3
+   */
+  development() {
+    return this.config({
+      debug: true,
+      retries: 1,
+      timeout: 60000
+    })
+  }
+
+  production() {
+    return this.config({
+      debug: false,
+      retries: 3,
+      timeout: 30000
+    })
+  }
+
+  /**
+   * 🚀 QUICK SETUP: Common configurations
+   * wu.spa() // Single Page App mode
+   * wu.micro() // Microfrontend mode
+   */
+  spa() {
+    return this.config({
+      mode: 'spa',
+      container: '#app',
+      debug: false
+    })
+  }
+
+  micro() {
+    return this.config({
+      mode: 'microfrontend',
+      debug: true,
+      retries: 5
+    })
+  }
+
+  /**
+   * 📊 STATUS: Get framework and apps status
+   * wu.status()
+   */
+  status() {
+    const stats = this.core.getStats?.() || {}
+
+    return {
+      initialized: this.autoInitialized,
+      apps: {
+        registered: stats.registered || 0,
+        mounted: stats.mounted || 0,
+        available: stats.apps || []
+      },
+      health: this.core.quantumState?.dimensionalStability || 'unknown',
+      config: this.defaultConfig
+    }
+  }
+
+  /**
+   * 🧹 CLEANUP: Clean shutdown
+   * wu.destroy()
+   */
+  async destroy() {
+    if (this.core.destroy) {
+      await this.core.destroy()
+    }
+    this.autoInitialized = false
+    logger.wuInfo('🧹 Framework destroyed')
+  }
+
+
+  // 🔒 PRIVATE METHODS
+
+  async _ensureInitialized() {
+    if (!this.autoInitialized) {
+      await this._autoInitialize()
+    }
+  }
+
+  async _autoInitialize() {
+    if (this.defaultConfig.debug) {
+      logger.wuDebug('🚀 Auto-initializing Wu Framework...')
+    }
+
+    // Smart initialization with minimal config
+    await this.core.init({ apps: [] })
+    this.autoInitialized = true
+
+    if (this.defaultConfig.debug) {
+      logger.wuDebug('✅ Wu Framework auto-initialized')
+    }
+  }
+
+  _isUrl(str) {
+    try {
+      new URL(str)
+      return true
+    } catch {
+      return str.includes('://') || str.startsWith('http')
+    }
+  }
+
+  _extractAppName(url) {
+    try {
+      const urlObj = new URL(url)
+      const pathSegments = urlObj.pathname.split('/').filter(Boolean)
+      return pathSegments[pathSegments.length - 1] || urlObj.hostname.split('.')[0]
+    } catch {
+      return 'app-' + Date.now()
+    }
+  }
+
+  async _registerFromUrl(url, appName) {
+    const baseUrl = this._getBaseUrl(url)
+
+    await this.core.registerApp({
+      name: appName,
+      url: baseUrl
+    })
+  }
+
+  _getBaseUrl(url) {
+    try {
+      const urlObj = new URL(url)
+      return `${urlObj.protocol}//${urlObj.host}`
+    } catch {
+      return url
+    }
+  }
+
+  async _mountFromUrl(url, containerSelector) {
+    const appName = this._extractAppName(url)
+    await this._registerFromUrl(url, appName)
+    return await this._mountFromName(appName, containerSelector)
+  }
+
+  async _mountFromName(appName, containerSelector) {
+    try {
+      await this.core.mount(appName, containerSelector)
+
+      if (this.defaultConfig.debug) {
+        logger.wuDebug(`✅ ${appName} mounted successfully in ${containerSelector}`)
+      }
+
+      return {
+        app: appName,
+        container: containerSelector,
+        status: 'mounted',
+        unmount: () => this.core.unmount(appName)
+      }
+
+    } catch (error) {
+      console.error(`[Wu] ❌ Failed to mount ${appName}:`, error.message)
+      throw new Error(`Failed to mount ${appName}: ${error.message}`)
+    }
+  }
+}
+
+// 🌟 Create singleton instance
+const wuSimple = new WuSimpleAPI()
+
+// 🎯 Export simple API
+export { wuSimple as wu }
+export default wuSimple

package/src/core/wu-app.js

@@ -0,0 +1,192 @@
+/**
+ * 🎯 WU-APP: SIMPLIFIED API WRAPPER
+ *
+ * Wrapper simple para uso declarativo de microfrontends
+ * Mantiene todo el core de wu-framework pero simplifica el uso
+ */
+
+export class WuApp {
+  /**
+   * @param {string} name - Nombre de la app
+   * @param {Object} config - Configuración de la app
+   * @param {string} config.url - URL donde está corriendo la app
+   * @param {string} [config.container] - Selector del contenedor (opcional)
+   * @param {Object} wu - Instancia de WuCore
+   */
+  constructor(name, config, wu) {
+    this.name = name
+    this.url = config.url
+    this.container = config.container
+    this._wu = wu
+    this._mounted = false
+    this._autoInit = config.autoInit !== false // Default true
+
+    // Auto-register app in wu-framework
+    if (this._autoInit) {
+      this._registerApp()
+    }
+  }
+
+  /**
+   * Registrar app en wu-framework
+   * @private
+   */
+  _registerApp() {
+    if (!this._wu.apps.has(this.name)) {
+      // Usar el método interno de wu-framework para registrar
+      this._wu.apps.set(this.name, {
+        name: this.name,
+        url: this.url,
+        status: 'registered'
+      })
+      console.log(`📦 App registered: ${this.name} at ${this.url}`)
+    }
+  }
+
+  /**
+   * Montar la app en el contenedor
+   * @param {string} [container] - Selector del contenedor (opcional, usa config.container si no se pasa)
+   * @returns {Promise<void>}
+   */
+  async mount(container) {
+    const targetContainer = container || this.container
+
+    if (!targetContainer) {
+      throw new Error(`Container not specified for app: ${this.name}`)
+    }
+
+    // Asegurar que wu-framework está inicializado
+    if (!this._wu.initialized) {
+      await this._wu.init({
+        apps: [{ name: this.name, url: this.url }]
+      })
+    }
+
+    // Montar usando wu-framework core
+    await this._wu.mount(this.name, targetContainer)
+    this._mounted = true
+
+    return this
+  }
+
+  /**
+   * Desmontar la app
+   * @returns {Promise<void>}
+   */
+  async unmount() {
+    if (!this._mounted) {
+      console.warn(`⚠️ App ${this.name} is not mounted`)
+      return this
+    }
+
+    await this._wu.unmount(this.name)
+    this._mounted = false
+
+    return this
+  }
+
+  /**
+   * Remontar la app (útil para recargas)
+   * @param {string} [container] - Selector del contenedor
+   * @returns {Promise<void>}
+   */
+  async remount(container) {
+    await this.unmount()
+    await this.mount(container)
+    return this
+  }
+
+  /**
+   * Verificar si la app está montada
+   * @returns {boolean}
+   */
+  get isMounted() {
+    return this._mounted && this._wu.mounted?.has(this.name)
+  }
+
+  /**
+   * Obtener información de la app
+   * @returns {Object}
+   */
+  get info() {
+    return {
+      name: this.name,
+      url: this.url,
+      container: this.container,
+      mounted: this.isMounted,
+      status: this._wu.apps.get(this.name)?.status || 'unknown'
+    }
+  }
+
+  /**
+   * Recargar la app (limpiar cache y remontar)
+   * @returns {Promise<void>}
+   */
+  async reload() {
+    console.log(`🔄 Reloading app: ${this.name}`)
+
+    await this.unmount()
+
+    // Limpiar caches
+    if (this._wu.loader?.clearCache) {
+      this._wu.loader.clearCache(this.name)
+    }
+    if (this._wu.manifest?.clearCache) {
+      this._wu.manifest.clearCache(this.name)
+    }
+
+    await this.mount()
+    console.log(`✅ App reloaded: ${this.name}`)
+
+    return this
+  }
+
+  /**
+   * Verificar el estado de la app
+   * @returns {Object}
+   */
+  async verify() {
+    const container = document.querySelector(this.container)
+    const hasShadowDOM = container?.shadowRoot !== null
+    const hasContent = (container?.shadowRoot?.children?.length || 0) > 0
+
+    return {
+      name: this.name,
+      mounted: this.isMounted,
+      container: {
+        found: !!container,
+        selector: this.container,
+        hasShadowDOM,
+        hasContent
+      },
+      wu: {
+        registered: this._wu.apps.has(this.name),
+        mountedInWu: this._wu.mounted?.has(this.name)
+      }
+    }
+  }
+
+  /**
+   * Shorthand para mount
+   */
+  async start(container) {
+    return await this.mount(container)
+  }
+
+  /**
+   * Shorthand para unmount
+   */
+  async stop() {
+    return await this.unmount()
+  }
+
+  /**
+   * Destruir la app completamente
+   */
+  async destroy() {
+    await this.unmount()
+    this._wu.apps.delete(this.name)
+    this._mounted = false
+    console.log(`🗑️ App destroyed: ${this.name}`)
+  }
+}