wu-framework 1.0.0

package/src/index.js

@@ -0,0 +1,690 @@
+/**
+ * 🚀 WU-FRAMEWORK: UNIVERSAL MICROFRONTENDS
+ *
+ * Framework puro para microfrontends con sistemas esenciales
+ * - Framework Agnostic: React, Vue, Angular, Svelte, Vanilla JS
+ * - Zero Config: npm install wu-framework y funciona
+ * - Shadow DOM: Aislamiento real sin hacks CSS
+ * - Runtime Loading: Apps dinámicas sin rebuild
+ * - Style Sharing: Comparte estilos de node_modules automáticamente
+ * - Internal Cache: Cacheo inteligente de manifests y módulos (interno)
+ * - Event Bus: Comunicación pub/sub entre microfrontends
+ * - Performance Monitor: Monitoreo de lifecycle del framework (mount/unmount)
+ * - Health Monitoring: Sistema de auto-healing para microfrontends
+ *
+ * @example
+ * ```js
+ * import { wu, emit, on } from 'wu-framework';
+ *
+ * // ✨ API SIMPLIFICADA
+ * const canvas = wu.app('canvas', {
+ *   url: 'http://localhost:5178',
+ *   container: '#canvas-container'
+ * });
+ *
+ * await canvas.mount();      // Monta la app
+ * canvas.isMounted;          // Verifica estado
+ * await canvas.unmount();    // Desmonta
+ *
+ * // 📡 EVENT BUS (Comunicación entre microfrontends)
+ * import { emit, on, once } from 'wu-framework';
+ *
+ * // Emitir evento
+ * emit('user:login', { userId: 123, name: 'John' });
+ *
+ * // Escuchar eventos (soporta wildcards)
+ * on('user:*', (event) => {
+ *   console.log('User event:', event.data);
+ * });
+ *
+ * // Escuchar una sola vez
+ * once('app:ready', () => console.log('App is ready!'));
+ *
+ * // ⚡ PERFORMANCE MONITORING (Framework lifecycle)
+ * import { startMeasure, endMeasure, generatePerformanceReport } from 'wu-framework';
+ *
+ * // Medir tiempos de mount/unmount
+ * startMeasure('custom-operation', 'canvas');
+ * await doSomething();
+ * const duration = endMeasure('custom-operation', 'canvas');
+ * console.log(`Operation took ${duration}ms`);
+ *
+ * // Generar reporte
+ * const report = generatePerformanceReport();
+ * console.log('Framework performance:', report);
+ *
+ * // 🔄 API CLÁSICA (también disponible)
+ * wu.init({
+ *   apps: [{ name: 'header', url: 'http://localhost:3001' }]
+ * });
+ * await wu.mount('header', '#header-container');
+ *
+ * // Micro app (cualquier framework)
+ * wu.define('header', {
+ *   mount: (container) => {
+ *     // React: ReactDOM.render(<HeaderApp />, container);
+ *     // Vue: createApp(HeaderApp).mount(container);
+ *     // Vanilla: container.innerHTML = '<h1>Header</h1>';
+ *   },
+ *   unmount: (container) => {
+ *     // Cleanup logic aquí
+ *   }
+ * });
+ * ```
+ */
+
+import { WuCore } from './core/wu-core.js';
+
+// Crear instancia global única de wu-framework
+// Por defecto: Health Monitoring activado PERO aging refresh DESACTIVADO
+const wu = new WuCore({
+  healthMonitoring: true,   // Detecta containers perdidos
+  autoHeal: true,            // Recupera automáticamente
+  agingThreshold: Infinity,  // NUNCA refresca por edad (era el problema)
+  healthCheckInterval: 60000 // Chequeo cada 60 segundos
+});
+
+// Hacer wu disponible globalmente para debugging
+if (typeof window !== 'undefined') {
+  window.wu = wu;
+
+  // Agregar información de versión
+  wu.version = '1.0.0';
+  wu.info = {
+    name: 'Wu Framework',
+    description: 'Universal Microfrontends',
+    features: [
+      'Framework Agnostic',
+      'Zero Config',
+      'Shadow DOM Isolation',
+      'Runtime Loading',
+      'Component Sharing'
+    ]
+  };
+
+  console.log('🚀 Wu Framework loaded - Universal Microfrontends ready');
+}
+
+// Exportar API principal
+export { wu };
+export default wu;
+
+// Exportar clases individuales para uso avanzado
+export { WuCore } from './core/wu-core.js';
+export { WuLoader } from './core/wu-loader.js';
+export { WuSandbox } from './core/wu-sandbox.js';
+export { WuManifest } from './core/wu-manifest.js';
+export { WuStore } from './core/wu-store.js';
+export { WuApp } from './core/wu-app.js';
+export { WuStyleBridge } from './core/wu-style-bridge.js';
+export { default as store } from './core/wu-store.js';
+
+// 🚀 NUEVOS SISTEMAS DE AISLAMIENTO (basados en video-code)
+export { WuProxySandbox } from './core/wu-proxy-sandbox.js';
+export { WuSnapshotSandbox } from './core/wu-snapshot-sandbox.js';
+export { WuScriptExecutor, executeScript, executeScripts } from './core/wu-script-executor.js';
+export { WuHtmlParser, parseHtml, parseHtmlFromUrl } from './core/wu-html-parser.js';
+
+// 🚀 Exportar sistemas esenciales
+export { WuCache } from './core/wu-cache.js';
+export { WuEventBus } from './core/wu-event-bus.js';
+export { WuPerformance } from './core/wu-performance.js';
+
+// 🎯 Exportar advanced systems
+export { WuPluginSystem, createPlugin } from './core/wu-plugin.js';
+export { WuLoadingStrategy } from './core/wu-strategies.js';
+export { WuErrorBoundary } from './core/wu-error-boundary.js';
+export {
+  WuLifecycleHooks,
+  createSimpleHook,
+  createConditionalHook,
+  createGuardHook,
+  createTransformHook,
+  createTimedHook
+} from './core/wu-hooks.js';
+export { WuSandboxPool } from './core/wu-sandbox-pool.js';
+export { WuRegistry } from './core/wu-registry.js';
+
+/**
+ * Utilidades de conveniencia para uso común
+ */
+
+/**
+ * Inicializar wu-framework con configuración simple
+ * @param {Array} apps - Lista de apps: [{ name, url }, ...]
+ * @returns {Promise} Promesa de inicialización
+ */
+export const init = async (apps) => {
+  return await wu.init({ apps });
+};
+
+/**
+ * Montar app en contenedor
+ * @param {string} appName - Nombre de la app
+ * @param {string} containerSelector - Selector del contenedor
+ * @returns {Promise} Promesa de montaje
+ */
+export const mount = async (appName, containerSelector) => {
+  return await wu.mount(appName, containerSelector);
+};
+
+/**
+ * Definir lifecycle de micro-app
+ * @param {string} appName - Nombre de la app
+ * @param {Object} lifecycle - { mount, unmount }
+ */
+export const define = (appName, lifecycle) => {
+  return wu.define(appName, lifecycle);
+};
+
+/**
+ * Desmontar app
+ * @param {string} appName - Nombre de la app
+ * @returns {Promise} Promesa de desmontaje
+ */
+export const unmount = async (appName) => {
+  return await wu.unmount(appName);
+};
+
+/**
+ * Crear instancia de WuApp (API simplificada)
+ * @param {string} name - Nombre de la app
+ * @param {Object} config - Configuración { url, container, autoInit }
+ * @returns {WuApp} Instancia de WuApp
+ */
+export const app = (name, config) => {
+  return wu.app(name, config);
+};
+
+/**
+ * Usar componente compartido
+ * @param {string} componentPath - Ruta del componente (ej: "shared.Button")
+ * @returns {Promise} Componente cargado
+ */
+export const use = async (componentPath) => {
+  return await wu.use(componentPath);
+};
+
+
+/**
+ * Obtener información de una app
+ * @param {string} appName - Nombre de la app
+ * @returns {Object} Información de la app
+ */
+export const getAppInfo = (appName) => {
+  return wu.getAppInfo(appName);
+};
+
+/**
+ * Obtener estadísticas del framework
+ * @returns {Object} Estadísticas
+ */
+export const getStats = () => {
+  return wu.getStats();
+};
+
+/**
+ * 🏪 STORE CONVENIENCE METHODS
+ */
+
+/**
+ * Get value from global store
+ * @param {string} path - Dot notation path
+ * @returns {*} Value at path
+ */
+export const getState = (path) => {
+  return wu.getState(path);
+};
+
+/**
+ * Set value in global store
+ * @param {string} path - Dot notation path
+ * @param {*} value - Value to set
+ * @returns {number} Sequence number
+ */
+export const setState = (path, value) => {
+  return wu.setState(path, value);
+};
+
+/**
+ * Subscribe to state changes
+ * @param {string} pattern - Path or pattern
+ * @param {Function} callback - Callback function
+ * @returns {Function} Unsubscribe function
+ */
+export const onStateChange = (pattern, callback) => {
+  return wu.onStateChange(pattern, callback);
+};
+
+/**
+ * Batch set multiple state values
+ * @param {Object} updates - Object with path:value pairs
+ * @returns {Array} Sequence numbers
+ */
+export const batchState = (updates) => {
+  return wu.batchState(updates);
+};
+
+/**
+ * Get store metrics
+ * @returns {Object} Performance metrics
+ */
+export const getStoreMetrics = () => {
+  return wu.getStoreMetrics();
+};
+
+/**
+ * Clear all state
+ */
+export const clearState = () => {
+  wu.clearState();
+};
+
+/**
+ * Limpiar y destruir framework
+ * @returns {Promise} Promesa de destrucción
+ */
+export const destroy = async () => {
+  return await wu.destroy();
+};
+
+/**
+ * 🎨 STYLE SHARING: Configurar compartición de estilos en Shadow DOM
+ * @param {Object} config - Configuración del StyleBridge
+ */
+export const configureStyleSharing = (config) => {
+  return wu.sandbox.configureStyleSharing(config);
+};
+
+/**
+ * 🔄 RE-INYECTAR ESTILOS: Vuelve a inyectar estilos en una app
+ * @param {string} appName - Nombre de la app
+ * @returns {Promise}
+ */
+export const reinjectStyles = async (appName) => {
+  return await wu.sandbox.reinjectStyles(appName);
+};
+
+/**
+ * 📊 ESTADÍSTICAS DE ESTILOS: Información sobre estilos compartidos
+ * @returns {Object}
+ */
+export const getStyleStats = () => {
+  return wu.sandbox.getStyleStats();
+};
+
+/**
+ * 📡 EVENT BUS: Sistema de eventos avanzado
+ */
+
+/**
+ * Emitir evento
+ * @param {string} eventName - Nombre del evento
+ * @param {*} data - Datos del evento
+ * @param {Object} options - Opciones { appName, timestamp, meta }
+ */
+export const emit = (eventName, data, options) => {
+  wu.eventBus.emit(eventName, data, options);
+};
+
+/**
+ * Suscribirse a evento
+ * @param {string} eventName - Nombre del evento (soporta wildcards: 'app.*')
+ * @param {Function} callback - Función callback
+ * @returns {Function} Función para desuscribirse
+ */
+export const on = (eventName, callback) => {
+  return wu.eventBus.on(eventName, callback);
+};
+
+/**
+ * Suscribirse a evento una sola vez
+ * @param {string} eventName - Nombre del evento
+ * @param {Function} callback - Función callback
+ * @returns {Function} Función para desuscribirse
+ */
+export const once = (eventName, callback) => {
+  return wu.eventBus.once(eventName, callback);
+};
+
+/**
+ * Desuscribirse de evento
+ * @param {string} eventName - Nombre del evento
+ * @param {Function} callback - Función callback
+ */
+export const off = (eventName, callback) => {
+  wu.eventBus.off(eventName, callback);
+};
+
+/**
+ * Reproducir eventos del historial
+ * @param {string} eventNameOrPattern - Nombre o patrón de eventos
+ * @param {Function} callback - Callback para cada evento
+ */
+export const replayEvents = (eventNameOrPattern, callback) => {
+  wu.eventBus.replay(eventNameOrPattern, callback);
+};
+
+/**
+ * Obtener estadísticas del event bus
+ * @returns {Object}
+ */
+export const getEventBusStats = () => {
+  return wu.eventBus.getStats();
+};
+
+/**
+ * ⚡ PERFORMANCE: Monitoreo de lifecycle del framework
+ */
+
+/**
+ * Iniciar medición de performance
+ * @param {string} name - Nombre de la medición
+ * @param {string} appName - Nombre de la app (opcional)
+ */
+export const startMeasure = (name, appName) => {
+  wu.performance.startMeasure(name, appName);
+};
+
+/**
+ * Finalizar medición de performance
+ * @param {string} name - Nombre de la medición
+ * @param {string} appName - Nombre de la app (opcional)
+ * @returns {number} Duración en ms
+ */
+export const endMeasure = (name, appName) => {
+  return wu.performance.endMeasure(name, appName);
+};
+
+/**
+ * Obtener métricas de performance de una app
+ * @param {string} appName - Nombre de la app
+ * @returns {Object}
+ */
+export const getPerformanceMetrics = (appName) => {
+  return wu.performance.getMetrics(appName);
+};
+
+/**
+ * Obtener todas las métricas de performance
+ * @returns {Object}
+ */
+export const getAllPerformanceMetrics = () => {
+  return wu.performance.getAllMetrics();
+};
+
+/**
+ * Generar reporte de performance del framework
+ * @returns {Object}
+ */
+export const generatePerformanceReport = () => {
+  return wu.performance.generateReport();
+};
+
+/**
+ * Limpiar métricas de performance
+ * @param {string} appName - Nombre de la app (opcional, si no se pasa limpia todas)
+ */
+export const clearPerformanceMetrics = (appName) => {
+  wu.performance.clearMetrics(appName);
+};
+
+/**
+ * 🔌 PLUGINS: Sistema de plugins extensible
+ */
+
+/**
+ * Instalar plugin en el framework
+ * @param {Object|Function} plugin - Plugin o factory function
+ * @param {Object} options - Opciones del plugin
+ */
+export const usePlugin = (plugin, options) => {
+  wu.pluginSystem.use(plugin, options);
+};
+
+/**
+ * Desinstalar plugin
+ * @param {string} pluginName - Nombre del plugin
+ */
+export const uninstallPlugin = (pluginName) => {
+  wu.pluginSystem.uninstall(pluginName);
+};
+
+/**
+ * Obtener estadísticas de plugins
+ * @returns {Object}
+ */
+export const getPluginStats = () => {
+  return wu.pluginSystem.getStats();
+};
+
+/**
+ * 🪝 HOOKS: Sistema de lifecycle hooks
+ */
+
+/**
+ * Registrar lifecycle hook
+ * @param {string} phase - Fase del lifecycle
+ * @param {Function} middleware - Función middleware
+ * @param {Object} options - Opciones { priority, name }
+ * @returns {Function} Función para desregistrar
+ */
+export const useHook = (phase, middleware, options) => {
+  return wu.hooks.use(phase, middleware, options);
+};
+
+/**
+ * Remover lifecycle hook
+ * @param {string} phase - Fase del lifecycle
+ * @param {string} name - Nombre del hook
+ */
+export const removeHook = (phase, name) => {
+  wu.hooks.remove(phase, name);
+};
+
+/**
+ * Obtener estadísticas de hooks
+ * @returns {Object}
+ */
+export const getHookStats = () => {
+  return wu.hooks.getStats();
+};
+
+/**
+ * 🎯 STRATEGIES: Sistema de loading strategies
+ */
+
+/**
+ * Registrar loading strategy personalizada
+ * @param {string} name - Nombre de la estrategia
+ * @param {Object} strategy - Configuración de la estrategia
+ */
+export const registerStrategy = (name, strategy) => {
+  wu.strategies.register(name, strategy);
+};
+
+/**
+ * Obtener estadísticas de strategies
+ * @returns {Object}
+ */
+export const getStrategyStats = () => {
+  return wu.strategies.getStats();
+};
+
+/**
+ * 🛡️ ERROR BOUNDARY: Sistema de error handling
+ */
+
+/**
+ * Registrar error handler personalizado
+ * @param {Object} handler - Error handler { name, canHandle, handle }
+ */
+export const registerErrorHandler = (handler) => {
+  wu.errorBoundary.register(handler);
+};
+
+/**
+ * Configurar error boundary
+ * @param {Object} config - Nueva configuración
+ */
+export const configureErrorBoundary = (config) => {
+  wu.errorBoundary.configure(config);
+};
+
+/**
+ * Obtener log de errores
+ * @param {number} limit - Límite de errores a retornar
+ * @returns {Array}
+ */
+export const getErrorLog = (limit) => {
+  return wu.errorBoundary.getErrorLog(limit);
+};
+
+/**
+ * Obtener estadísticas de error boundary
+ * @returns {Object}
+ */
+export const getErrorBoundaryStats = () => {
+  return wu.errorBoundary.getStats();
+};
+
+/**
+ * 🏊 SANDBOX POOL: Sistema de sandbox pooling
+ */
+
+/**
+ * Configurar sandbox pool
+ * @param {Object} config - Nueva configuración
+ */
+export const configureSandboxPool = (config) => {
+  wu.sandboxPool.configure(config);
+};
+
+/**
+ * Obtener estadísticas de sandbox pool
+ * @returns {Object}
+ */
+export const getSandboxPoolStats = () => {
+  return wu.sandboxPool.getStats();
+};
+
+/**
+ * Presets comunes para configuración rápida
+ */
+export const presets = {
+  /**
+   * Configuración para desarrollo local
+   * @param {Array} apps - Apps con puertos locales
+   */
+  development: (apps) => {
+    const devApps = apps.map(app => ({
+      ...app,
+      url: app.url || `http://localhost:${app.port || 3001}`
+    }));
+
+    return {
+      apps: devApps,
+      debug: true,
+      hotReload: true
+    };
+  },
+
+  /**
+   * Configuración para producción
+   * @param {Array} apps - Apps con URLs de producción
+   */
+  production: (apps) => {
+    return {
+      apps,
+      debug: false,
+      cache: true,
+      preload: true
+    };
+  },
+
+  /**
+   * Configuración para single page application
+   * @param {Object} config - Configuración SPA
+   */
+  spa: (config) => {
+    return {
+      apps: [
+        {
+          name: 'main',
+          url: config.url || window.location.origin,
+          container: config.container || '#app'
+        }
+      ]
+    };
+  }
+};
+
+/**
+ * Helpers para desarrollo
+ */
+export const dev = {
+  /**
+   * Activar modo debug
+   */
+  enableDebug: () => {
+    wu.debug = true;
+    console.log('🐛 Wu Framework debug mode enabled');
+  },
+
+  /**
+   * Desactivar modo debug
+   */
+  disableDebug: () => {
+    wu.debug = false;
+    console.log('🐛 Wu Framework debug mode disabled');
+  },
+
+  /**
+   * Inspeccionar estado del framework
+   */
+  inspect: () => {
+    return {
+      version: wu.version,
+      stats: wu.getStats(),
+      apps: Array.from(wu.apps.keys()).map(name => wu.getAppInfo(name))
+    };
+  },
+
+  /**
+   * Recargar app específica (útil para desarrollo)
+   * @param {string} appName - Nombre de la app
+   */
+  reload: async (appName) => {
+    console.log(`🔄 Reloading app: ${appName}`);
+    await wu.unmount(appName);
+
+    // Limpiar caches
+    wu.loader.clearCache(appName);
+    wu.manifest.clearCache(appName);
+
+    await wu.mount(appName);
+    console.log(`✅ App reloaded: ${appName}`);
+  }
+};
+
+/**
+ * Eventos del framework
+ */
+export const events = {
+  // Event listeners para el ciclo de vida de las apps
+  onAppMounted: (callback) => {
+    document.addEventListener('wu:app:mounted', callback);
+  },
+
+  onAppUnmounted: (callback) => {
+    document.addEventListener('wu:app:unmounted', callback);
+  },
+
+  onAppError: (callback) => {
+    document.addEventListener('wu:app:error', callback);
+  },
+
+  onFrameworkReady: (callback) => {
+    document.addEventListener('wu:framework:ready', callback);
+  }
+};