wu-framework 1.0.0

package/src/core/wu-plugin.js

@@ -0,0 +1,213 @@
+/**
+ * 🔌 WU-PLUGIN: EXTENSIBLE PLUGIN SYSTEM
+ *
+ * Sistema de plugins para extender wu-framework sin modificar el core
+ * - Plugin lifecycle (install, beforeMount, afterMount, etc.)
+ * - Dependency injection
+ * - Plugin communication
+ */
+
+export class WuPluginSystem {
+  constructor(core) {
+    this.core = core;
+    this.plugins = new Map(); // name -> plugin instance
+    this.hooks = new Map(); // hook name -> [callbacks]
+
+    // Hooks disponibles
+    this.availableHooks = [
+      'beforeInit',
+      'afterInit',
+      'beforeMount',
+      'afterMount',
+      'beforeUnmount',
+      'afterUnmount',
+      'onError',
+      'onDestroy'
+    ];
+
+    // Inicializar hooks
+    this.availableHooks.forEach(hook => {
+      this.hooks.set(hook, []);
+    });
+
+    console.log('[WuPlugin] 🔌 Plugin system initialized');
+  }
+
+  /**
+   * 📦 USE: Instalar plugin
+   * @param {Object|Function} plugin - Plugin o factory function
+   * @param {Object} options - Opciones del plugin
+   */
+  use(plugin, options = {}) {
+    // Si es una función, ejecutarla para obtener el plugin
+    if (typeof plugin === 'function') {
+      plugin = plugin(this.core, options);
+    }
+
+    // Validar plugin
+    if (!plugin.name) {
+      throw new Error('[WuPlugin] Plugin must have a name property');
+    }
+
+    // Verificar si ya está instalado
+    if (this.plugins.has(plugin.name)) {
+      console.warn(`[WuPlugin] Plugin "${plugin.name}" already installed`);
+      return;
+    }
+
+    // Ejecutar install del plugin
+    if (plugin.install) {
+      plugin.install(this.core, options);
+    }
+
+    // Registrar hooks del plugin
+    this.availableHooks.forEach(hookName => {
+      if (typeof plugin[hookName] === 'function') {
+        this.registerHook(hookName, plugin[hookName].bind(plugin));
+      }
+    });
+
+    // Guardar plugin
+    this.plugins.set(plugin.name, {
+      plugin,
+      options,
+      installedAt: Date.now()
+    });
+
+    console.log(`[WuPlugin] ✅ Plugin "${plugin.name}" installed`);
+  }
+
+  /**
+   * 🪝 REGISTER HOOK: Registrar callback en un hook
+   * @param {string} hookName - Nombre del hook
+   * @param {Function} callback - Función callback
+   */
+  registerHook(hookName, callback) {
+    if (!this.hooks.has(hookName)) {
+      console.warn(`[WuPlugin] Unknown hook: ${hookName}`);
+      return;
+    }
+
+    this.hooks.get(hookName).push(callback);
+  }
+
+  /**
+   * 🎯 CALL HOOK: Ejecutar todos los callbacks de un hook
+   * @param {string} hookName - Nombre del hook
+   * @param {*} context - Contexto a pasar a los callbacks
+   * @returns {Promise<boolean>} false si algún callback cancela la operación
+   */
+  async callHook(hookName, context) {
+    const callbacks = this.hooks.get(hookName) || [];
+
+    for (const callback of callbacks) {
+      try {
+        const result = await callback(context);
+
+        // Si retorna false, cancelar operación
+        if (result === false) {
+          console.log(`[WuPlugin] Hook ${hookName} cancelled by plugin`);
+          return false;
+        }
+      } catch (error) {
+        console.error(`[WuPlugin] Error in hook ${hookName}:`, error);
+
+        // Llamar hook de error
+        await this.callHook('onError', { hookName, error, context });
+      }
+    }
+
+    return true;
+  }
+
+  /**
+   * 🗑️ UNINSTALL: Desinstalar plugin
+   * @param {string} pluginName - Nombre del plugin
+   */
+  uninstall(pluginName) {
+    const pluginData = this.plugins.get(pluginName);
+
+    if (!pluginData) {
+      console.warn(`[WuPlugin] Plugin "${pluginName}" not found`);
+      return;
+    }
+
+    const { plugin } = pluginData;
+
+    // Ejecutar uninstall si existe
+    if (plugin.uninstall) {
+      plugin.uninstall(this.core);
+    }
+
+    // Remover hooks del plugin
+    this.availableHooks.forEach(hookName => {
+      if (typeof plugin[hookName] === 'function') {
+        const callbacks = this.hooks.get(hookName);
+        const index = callbacks.indexOf(plugin[hookName]);
+        if (index > -1) {
+          callbacks.splice(index, 1);
+        }
+      }
+    });
+
+    // Remover plugin
+    this.plugins.delete(pluginName);
+
+    console.log(`[WuPlugin] ✅ Plugin "${pluginName}" uninstalled`);
+  }
+
+  /**
+   * 📋 GET PLUGIN: Obtener plugin instalado
+   * @param {string} pluginName - Nombre del plugin
+   * @returns {Object}
+   */
+  getPlugin(pluginName) {
+    return this.plugins.get(pluginName)?.plugin;
+  }
+
+  /**
+   * 📊 GET STATS: Estadísticas de plugins
+   * @returns {Object}
+   */
+  getStats() {
+    return {
+      totalPlugins: this.plugins.size,
+      plugins: Array.from(this.plugins.entries()).map(([name, data]) => ({
+        name,
+        installedAt: data.installedAt,
+        hasUninstall: typeof data.plugin.uninstall === 'function'
+      })),
+      hooks: Array.from(this.hooks.entries()).map(([name, callbacks]) => ({
+        name,
+        callbacks: callbacks.length
+      }))
+    };
+  }
+
+  /**
+   * 🧹 CLEANUP: Limpiar todos los plugins
+   */
+  cleanup() {
+    for (const [name] of this.plugins) {
+      this.uninstall(name);
+    }
+
+    console.log('[WuPlugin] 🧹 All plugins cleaned up');
+  }
+}
+
+/**
+ * 📦 PLUGIN HELPER: Helper para crear plugins fácilmente
+ */
+export const createPlugin = (config) => {
+  return {
+    name: config.name,
+    install: config.install,
+    uninstall: config.uninstall,
+    beforeMount: config.beforeMount,
+    afterMount: config.afterMount,
+    beforeUnmount: config.beforeUnmount,
+    afterUnmount: config.afterUnmount,
+    onError: config.onError
+  };
+};

package/src/core/wu-proxy-sandbox.js

@@ -0,0 +1,153 @@
+/**
+ * 🛡️ WU-PROXY-SANDBOX: JavaScript Isolation con Proxy
+ * Basado en video-code - Aislamiento real de variables globales
+ *
+ * Este sandbox usa ES6 Proxy para interceptar accesos a window
+ * y aislar completamente el JavaScript entre micro-apps
+ */
+
+export class WuProxySandbox {
+  constructor(appName) {
+    this.appName = appName;
+    this.proxy = null;
+    this.fakeWindow = Object.create(null); // Namespace aislado
+    this.active = false;
+    this.modifiedKeys = new Set(); // Track de propiedades modificadas
+
+    console.log(`[WuProxySandbox] 🛡️ Creating proxy sandbox for: ${appName}`);
+  }
+
+  /**
+   * Activar sandbox - Crea el Proxy que aísla window
+   */
+  activate() {
+    if (this.active) {
+      console.warn(`[WuProxySandbox] Sandbox already active for ${this.appName}`);
+      return this.proxy;
+    }
+
+    this.proxy = new Proxy(window, {
+      get: (target, prop) => {
+        // 🔍 Primero buscar en el namespace aislado
+        if (prop in this.fakeWindow) {
+          return this.fakeWindow[prop];
+        }
+
+        // 🎯 Propiedades del window real
+        const value = target[prop];
+
+        // ⚠️ CRÍTICO: Bind de funciones para mantener contexto
+        if (typeof value === 'function' && !this.isConstructor(value)) {
+          return value.bind(target);
+        }
+
+        return value;
+      },
+
+      set: (target, prop, value) => {
+        // 🛡️ AISLAMIENTO: Todo set va al namespace aislado
+        this.fakeWindow[prop] = value;
+        this.modifiedKeys.add(prop);
+
+        console.log(`[WuProxySandbox] 📝 ${this.appName} set: ${String(prop)}`);
+        return true;
+      },
+
+      has: (target, prop) => {
+        // Verificar tanto en fakeWindow como en window real
+        return prop in this.fakeWindow || prop in target;
+      },
+
+      deleteProperty: (target, prop) => {
+        // Solo permitir delete en el namespace aislado
+        if (prop in this.fakeWindow) {
+          delete this.fakeWindow[prop];
+          this.modifiedKeys.delete(prop);
+          return true;
+        }
+        return false;
+      }
+    });
+
+    this.active = true;
+    console.log(`[WuProxySandbox] ✅ Proxy sandbox activated for ${this.appName}`);
+
+    return this.proxy;
+  }
+
+  /**
+   * Desactivar sandbox - Limpia el namespace aislado
+   */
+  deactivate() {
+    if (!this.active) {
+      console.warn(`[WuProxySandbox] Sandbox not active for ${this.appName}`);
+      return;
+    }
+
+    console.log(`[WuProxySandbox] 🧹 Deactivating sandbox for ${this.appName}`);
+
+    // 🧹 Limpiar todas las propiedades modificadas
+    this.fakeWindow = Object.create(null);
+    this.modifiedKeys.clear();
+    this.proxy = null;
+    this.active = false;
+
+    console.log(`[WuProxySandbox] ✅ Sandbox deactivated for ${this.appName}`);
+  }
+
+  /**
+   * Verificar si un valor es un constructor (class)
+   */
+  isConstructor(fn) {
+    try {
+      // Detectar constructores/classes por su prototipo
+      return fn.prototype && fn.prototype.constructor === fn;
+    } catch {
+      return false;
+    }
+  }
+
+  /**
+   * Obtener el proxy activo (o null si no está activo)
+   */
+  getProxy() {
+    return this.active ? this.proxy : null;
+  }
+
+  /**
+   * Verificar si el sandbox está activo
+   */
+  isActive() {
+    return this.active;
+  }
+
+  /**
+   * Obtener estadísticas del sandbox
+   */
+  getStats() {
+    return {
+      appName: this.appName,
+      active: this.active,
+      modifiedKeys: Array.from(this.modifiedKeys),
+      isolatedPropsCount: Object.keys(this.fakeWindow).length
+    };
+  }
+
+  /**
+   * Limpiar propiedades específicas del namespace
+   */
+  clearProperty(prop) {
+    if (prop in this.fakeWindow) {
+      delete this.fakeWindow[prop];
+      this.modifiedKeys.delete(prop);
+      console.log(`[WuProxySandbox] 🗑️ Cleared property: ${String(prop)}`);
+    }
+  }
+
+  /**
+   * Obtener todas las propiedades aisladas
+   */
+  getIsolatedProperties() {
+    return { ...this.fakeWindow };
+  }
+}

package/src/core/wu-registry.js

@@ -0,0 +1,130 @@
+/**
+ * 🔔 WU-REGISTRY: EVENT-BASED APP REGISTRATION SYSTEM
+ *
+ * Reemplaza el polling con Custom Events para mejor performance
+ */
+
+export class WuRegistry {
+  constructor() {
+    this.registeredApps = new Set();
+    this.waitingPromises = new Map();
+
+    // Event listeners para registro
+    this.setupEventListeners();
+
+    console.log('[WuRegistry] 🔔 Event-based registration system initialized');
+  }
+
+  /**
+   * 📡 SETUP EVENT LISTENERS
+   */
+  setupEventListeners() {
+    // Escuchar eventos de registro de apps
+    window.addEventListener('wu:app:ready', (event) => {
+      const { appName } = event.detail;
+      console.log(`[WuRegistry] ✅ App registered via event: ${appName}`);
+
+      this.registeredApps.add(appName);
+
+      // Resolver promesas pendientes
+      if (this.waitingPromises.has(appName)) {
+        const { resolve } = this.waitingPromises.get(appName);
+        resolve();
+        this.waitingPromises.delete(appName);
+      }
+    });
+
+    // Exponer API global para microfrontends
+    if (!window.wu) {
+      window.wu = {};
+    }
+
+    // API para que apps notifiquen que están listas
+    window.wu.notifyReady = (appName) => {
+      console.log(`[WuRegistry] 📢 App ${appName} called notifyReady()`);
+
+      const event = new CustomEvent('wu:app:ready', {
+        detail: { appName, timestamp: Date.now() }
+      });
+
+      window.dispatchEvent(event);
+    };
+  }
+
+  /**
+   * ⏳ WAIT FOR APP: Promise-based waiting
+   * @param {string} appName - Nombre de la app
+   * @param {number} timeout - Timeout en ms (default: 10000)
+   * @returns {Promise}
+   */
+  waitForApp(appName, timeout = 10000) {
+    // Si ya está registrada, resolver inmediatamente
+    if (this.registeredApps.has(appName)) {
+      console.log(`[WuRegistry] ⚡ App ${appName} already registered`);
+      return Promise.resolve();
+    }
+
+    console.log(`[WuRegistry] ⏳ Waiting for app ${appName} to register...`);
+
+    return new Promise((resolve, reject) => {
+      // Guardar promesa
+      this.waitingPromises.set(appName, { resolve, reject });
+
+      // Timeout
+      const timeoutId = setTimeout(() => {
+        if (this.waitingPromises.has(appName)) {
+          this.waitingPromises.delete(appName);
+
+          const error = new Error(
+            `App '${appName}' failed to register within ${timeout}ms.\n\n` +
+            `Possible causes:\n` +
+            `  - Module failed to load\n` +
+            `  - wu.define() was not called\n` +
+            `  - Check browser console for import errors\n\n` +
+            `Make sure your app calls:\n` +
+            `  wu.define('${appName}', { mount, unmount })`
+          );
+
+          reject(error);
+        }
+      }, timeout);
+
+      // Limpiar timeout cuando se resuelva
+      this.waitingPromises.get(appName).timeoutId = timeoutId;
+    });
+  }
+
+  /**
+   * ✅ MARK AS REGISTERED
+   * @param {string} appName
+   */
+  markAsRegistered(appName) {
+    this.registeredApps.add(appName);
+    console.log(`[WuRegistry] ✅ App ${appName} marked as registered`);
+  }
+
+  /**
+   * ❌ UNREGISTER APP
+   * @param {string} appName
+   */
+  unregister(appName) {
+    this.registeredApps.delete(appName);
+    console.log(`[WuRegistry] ❌ App ${appName} unregistered`);
+  }
+
+  /**
+   * 🧹 CLEANUP
+   */
+  cleanup() {
+    // Rechazar todas las promesas pendientes
+    for (const [appName, { reject, timeoutId }] of this.waitingPromises) {
+      clearTimeout(timeoutId);
+      reject(new Error(`Registry cleanup: ${appName}`));
+    }
+
+    this.waitingPromises.clear();
+    this.registeredApps.clear();
+
+    console.log('[WuRegistry] 🧹 Registry cleaned up');
+  }
+}