wu-framework 1.0.0

package/src/core/wu-hooks.js

@@ -0,0 +1,348 @@
+/**
+ * 🪝 WU-HOOKS: LIFECYCLE MIDDLEWARE SYSTEM
+ *
+ * Sistema de hooks basado en middleware pattern para control fino:
+ * - Middleware chain con next()
+ * - Puede cancelar operaciones (no llamar next)
+ * - Puede modificar contexto
+ * - Prioridad de hooks
+ * - Async/await support
+ */
+
+export class WuLifecycleHooks {
+  constructor(core) {
+    this.core = core;
+    this.hooks = new Map();
+    this.executionLog = [];
+    this.maxLogSize = 100;
+
+    // Lifecycle phases disponibles
+    this.lifecyclePhases = [
+      'beforeInit',      // Antes de inicializar framework
+      'afterInit',       // Después de inicializar
+      'beforeLoad',      // Antes de cargar una app
+      'afterLoad',       // Después de cargar
+      'beforeMount',     // Antes de montar
+      'afterMount',      // Después de montar
+      'beforeUnmount',   // Antes de desmontar
+      'afterUnmount',    // Después de desmontar
+      'beforeDestroy',   // Antes de destruir framework
+      'afterDestroy'     // Después de destruir
+    ];
+
+    // Inicializar hooks
+    this.lifecyclePhases.forEach(phase => {
+      this.hooks.set(phase, []);
+    });
+
+    console.log('[WuHooks] 🪝 Lifecycle hooks initialized');
+  }
+
+  /**
+   * 📦 USE: Registrar middleware hook
+   * @param {string} phase - Fase del lifecycle
+   * @param {Function} middleware - Función middleware (context, next)
+   * @param {Object} options - { priority, name }
+   */
+  use(phase, middleware, options = {}) {
+    if (!this.hooks.has(phase)) {
+      throw new Error(`[WuHooks] Unknown lifecycle phase: ${phase}`);
+    }
+
+    if (typeof middleware !== 'function') {
+      throw new Error('[WuHooks] Middleware must be a function');
+    }
+
+    const hook = {
+      middleware,
+      name: options.name || `hook_${Date.now()}`,
+      priority: options.priority || 0,
+      registeredAt: Date.now()
+    };
+
+    const hooks = this.hooks.get(phase);
+    hooks.push(hook);
+
+    // Ordenar por prioridad (mayor primero)
+    hooks.sort((a, b) => b.priority - a.priority);
+
+    console.log(`[WuHooks] Hook "${hook.name}" registered for ${phase} (priority: ${hook.priority})`);
+
+    // Retornar función para desregistrar
+    return () => this.remove(phase, hook.name);
+  }
+
+  /**
+   * 🗑️ REMOVE: Remover hook
+   * @param {string} phase - Fase del lifecycle
+   * @param {string} name - Nombre del hook
+   */
+  remove(phase, name) {
+    if (!this.hooks.has(phase)) return;
+
+    const hooks = this.hooks.get(phase);
+    const index = hooks.findIndex(h => h.name === name);
+
+    if (index > -1) {
+      hooks.splice(index, 1);
+      console.log(`[WuHooks] Hook "${name}" removed from ${phase}`);
+    }
+  }
+
+  /**
+   * 🎯 EXECUTE: Ejecutar middleware chain
+   * @param {string} phase - Fase del lifecycle
+   * @param {Object} context - Contexto a pasar
+   * @returns {Promise<Object>} Contexto modificado o { cancelled: true }
+   */
+  async execute(phase, context = {}) {
+    const hooks = this.hooks.get(phase);
+
+    if (!hooks || hooks.length === 0) {
+      return context;
+    }
+
+    console.log(`[WuHooks] Executing ${hooks.length} hooks for ${phase}`);
+
+    // Log para debugging
+    const executionEntry = {
+      phase,
+      timestamp: Date.now(),
+      hooksCount: hooks.length,
+      hookNames: hooks.map(h => h.name)
+    };
+
+    let currentContext = { ...context };
+    let cancelled = false;
+
+    // Crear cadena de middleware
+    const executeChain = async (index) => {
+      // Si llegamos al final de la cadena, retornar contexto
+      if (index >= hooks.length) {
+        return currentContext;
+      }
+
+      const hook = hooks[index];
+      const startTime = Date.now();
+
+      try {
+        let nextCalled = false;
+
+        // Función next
+        const next = async (modifiedContext) => {
+          nextCalled = true;
+
+          // Si se pasa un contexto modificado, usarlo
+          if (modifiedContext !== undefined) {
+            currentContext = { ...currentContext, ...modifiedContext };
+          }
+
+          // Continuar con siguiente hook
+          return await executeChain(index + 1);
+        };
+
+        // Ejecutar middleware
+        await hook.middleware(currentContext, next);
+
+        // Si no se llamó next(), la operación fue cancelada
+        if (!nextCalled) {
+          console.log(`[WuHooks] Hook "${hook.name}" cancelled execution`);
+          cancelled = true;
+          return { cancelled: true };
+        }
+
+        const duration = Date.now() - startTime;
+        console.log(`[WuHooks] Hook "${hook.name}" executed in ${duration}ms`);
+
+      } catch (error) {
+        console.error(`[WuHooks] Error in hook "${hook.name}":`, error);
+
+        // Si hay error, pasar al siguiente hook
+        return await executeChain(index + 1);
+      }
+
+      return currentContext;
+    };
+
+    // Ejecutar cadena
+    const result = await executeChain(0);
+
+    // Completar log
+    executionEntry.duration = Date.now() - executionEntry.timestamp;
+    executionEntry.cancelled = cancelled;
+    executionEntry.success = !cancelled;
+
+    this.executionLog.push(executionEntry);
+
+    // Mantener límite de log
+    if (this.executionLog.length > this.maxLogSize) {
+      this.executionLog.shift();
+    }
+
+    return result;
+  }
+
+  /**
+   * 🚀 HELPER: Registrar hook para múltiples fases
+   * @param {Array<string>} phases - Fases del lifecycle
+   * @param {Function} middleware - Función middleware
+   * @param {Object} options - Opciones
+   * @returns {Function} Función para desregistrar de todas las fases
+   */
+  useMultiple(phases, middleware, options = {}) {
+    const unregisterFns = phases.map(phase =>
+      this.use(phase, middleware, { ...options, name: `${options.name}_${phase}` })
+    );
+
+    // Retornar función que desregistra de todas las fases
+    return () => unregisterFns.forEach(fn => fn());
+  }
+
+  /**
+   * 📋 GET HOOKS: Obtener hooks registrados
+   * @param {string} phase - Fase del lifecycle (opcional)
+   * @returns {Object|Array}
+   */
+  getHooks(phase) {
+    if (phase) {
+      return this.hooks.get(phase) || [];
+    }
+
+    // Retornar todos los hooks
+    const allHooks = {};
+    this.hooks.forEach((hooks, phase) => {
+      allHooks[phase] = hooks.map(h => ({
+        name: h.name,
+        priority: h.priority,
+        registeredAt: h.registeredAt
+      }));
+    });
+
+    return allHooks;
+  }
+
+  /**
+   * 📊 GET STATS: Estadísticas de hooks
+   * @returns {Object}
+   */
+  getStats() {
+    const totalHooks = Array.from(this.hooks.values())
+      .reduce((sum, hooks) => sum + hooks.length, 0);
+
+    const executionsByPhase = {};
+    this.executionLog.forEach(entry => {
+      executionsByPhase[entry.phase] = (executionsByPhase[entry.phase] || 0) + 1;
+    });
+
+    const avgDuration = this.executionLog.length > 0
+      ? this.executionLog.reduce((sum, entry) => sum + entry.duration, 0) / this.executionLog.length
+      : 0;
+
+    const cancelledCount = this.executionLog.filter(entry => entry.cancelled).length;
+
+    return {
+      totalHooks,
+      totalExecutions: this.executionLog.length,
+      executionsByPhase,
+      avgDuration: Math.round(avgDuration),
+      cancelledCount,
+      recentExecutions: this.executionLog.slice(-10)
+    };
+  }
+
+  /**
+   * 🧹 CLEANUP: Limpiar todos los hooks
+   * @param {string} phase - Fase específica (opcional)
+   */
+  cleanup(phase) {
+    if (phase) {
+      this.hooks.set(phase, []);
+      console.log(`[WuHooks] Hooks cleaned for ${phase}`);
+    } else {
+      this.lifecyclePhases.forEach(p => {
+        this.hooks.set(p, []);
+      });
+      this.executionLog = [];
+      console.log('[WuHooks] 🧹 All hooks cleaned');
+    }
+  }
+}
+
+/**
+ * 🔧 HELPER: Crear middleware hooks fácilmente
+ */
+
+/**
+ * Crear hook simple que siempre llama next
+ * @param {Function} fn - Función a ejecutar
+ * @returns {Function} Middleware function
+ */
+export const createSimpleHook = (fn) => {
+  return async (context, next) => {
+    await fn(context);
+    await next();
+  };
+};
+
+/**
+ * Crear hook condicional
+ * @param {Function} condition - Función de condición (context) => boolean
+ * @param {Function} fn - Función a ejecutar si condición es true
+ * @returns {Function} Middleware function
+ */
+export const createConditionalHook = (condition, fn) => {
+  return async (context, next) => {
+    if (await condition(context)) {
+      await fn(context);
+    }
+    await next();
+  };
+};
+
+/**
+ * Crear hook que puede cancelar operación
+ * @param {Function} shouldContinue - Función que retorna true para continuar
+ * @returns {Function} Middleware function
+ */
+export const createGuardHook = (shouldContinue) => {
+  return async (context, next) => {
+    if (await shouldContinue(context)) {
+      await next();
+    }
+    // Si no retorna true, no llama next() y cancela
+  };
+};
+
+/**
+ * Crear hook que modifica contexto
+ * @param {Function} transformer - Función que transforma el contexto
+ * @returns {Function} Middleware function
+ */
+export const createTransformHook = (transformer) => {
+  return async (context, next) => {
+    const modified = await transformer(context);
+    await next(modified);
+  };
+};
+
+/**
+ * Crear hook con timeout
+ * @param {Function} fn - Función a ejecutar
+ * @param {number} timeout - Timeout en ms
+ * @returns {Function} Middleware function
+ */
+export const createTimedHook = (fn, timeout = 5000) => {
+  return async (context, next) => {
+    const timeoutPromise = new Promise((_, reject) =>
+      setTimeout(() => reject(new Error('Hook timeout')), timeout)
+    );
+
+    try {
+      await Promise.race([fn(context), timeoutPromise]);
+      await next();
+    } catch (error) {
+      console.error('[WuHooks] Timed hook failed:', error);
+      await next(); // Continuar a pesar del error
+    }
+  };
+};

package/src/core/wu-html-parser.js

@@ -0,0 +1,280 @@
+/**
+ * 📄 WU-HTML-PARSER: Parser inteligente de HTML para micro-apps
+ * Basado en video-code - Extrae DOM, scripts y estilos
+ */
+
+export class WuHtmlParser {
+  constructor() {
+    this.cache = new Map(); // Cache de HTML parseado
+    console.log('[WuHtmlParser] 📄 HTML parsing system initialized');
+  }
+
+  /**
+   * Parsear HTML completo de una micro-app
+   * @param {string} html - HTML a parsear
+   * @param {string} appName - Nombre de la app
+   * @param {string} baseUrl - URL base para resolver recursos
+   * @returns {Object} { dom, scripts, styles, externalScripts, externalStyles }
+   */
+  parse(html, appName, baseUrl) {
+    console.log(`[WuHtmlParser] 📄 Parsing HTML for ${appName}`);
+
+    // Verificar cache
+    const cacheKey = `${appName}:${html.length}`;
+    if (this.cache.has(cacheKey)) {
+      console.log(`[WuHtmlParser] ⚡ Cache hit for ${appName}`);
+      return this.cache.get(cacheKey);
+    }
+
+    try {
+      // Crear contenedor temporal para parsear
+      const tempDiv = document.createElement('div');
+      tempDiv.innerHTML = html;
+
+      // Extraer recursos
+      const inlineScripts = [];
+      const externalScripts = [];
+      const inlineStyles = [];
+      const externalStyles = [];
+
+      // 🔍 Parsear recursivamente el DOM
+      this.deepParse(tempDiv, {
+        inlineScripts,
+        externalScripts,
+        inlineStyles,
+        externalStyles,
+        baseUrl,
+        appName
+      });
+
+      // Obtener DOM limpio
+      const cleanedDom = tempDiv.innerHTML;
+
+      const result = {
+        dom: cleanedDom,
+        scripts: {
+          inline: inlineScripts,
+          external: externalScripts,
+          all: [...inlineScripts, ...externalScripts]
+        },
+        styles: {
+          inline: inlineStyles,
+          external: externalStyles,
+          all: [...inlineStyles, ...externalStyles]
+        }
+      };
+
+      // Cachear resultado
+      this.cache.set(cacheKey, result);
+
+      console.log(`[WuHtmlParser] ✅ Parsed ${appName}: ${inlineScripts.length} inline scripts, ${externalScripts.length} external scripts`);
+
+      return result;
+
+    } catch (error) {
+      console.error(`[WuHtmlParser] ❌ Failed to parse HTML for ${appName}:`, error);
+      throw error;
+    }
+  }
+
+  /**
+   * Parsear recursivamente el DOM extrayendo scripts y estilos
+   * @param {HTMLElement} element - Elemento a parsear
+   * @param {Object} context - Contexto de parsing
+   */
+  deepParse(element, context) {
+    const { inlineScripts, externalScripts, inlineStyles, externalStyles, baseUrl, appName } = context;
+    const children = Array.from(element.children);
+
+    for (const child of children) {
+      const tagName = child.nodeName.toLowerCase();
+
+      // 📜 SCRIPT TAGS
+      if (tagName === 'script') {
+        this.parseScriptTag(child, inlineScripts, externalScripts, baseUrl, appName);
+
+        // Reemplazar script con comentario
+        const comment = document.createComment(`Wu: script removed from ${appName}`);
+        child.parentElement?.replaceChild(comment, child);
+        continue;
+      }
+
+      // 🎨 STYLE TAGS
+      if (tagName === 'style') {
+        const styleContent = child.textContent || '';
+        if (styleContent.trim()) {
+          inlineStyles.push(styleContent);
+          console.log(`[WuHtmlParser] 🎨 Extracted inline style (${styleContent.length} chars)`);
+        }
+
+        // Reemplazar style con comentario
+        const comment = document.createComment(`Wu: style removed from ${appName}`);
+        child.parentElement?.replaceChild(comment, child);
+        continue;
+      }
+
+      // 🔗 LINK TAGS (external styles)
+      if (tagName === 'link') {
+        const rel = child.getAttribute('rel');
+        const href = child.getAttribute('href');
+
+        if (rel === 'stylesheet' && href) {
+          const absoluteUrl = this.resolveUrl(href, baseUrl);
+          externalStyles.push(absoluteUrl);
+          console.log(`[WuHtmlParser] 🔗 Extracted external style: ${absoluteUrl}`);
+
+          // Reemplazar link con comentario
+          const comment = document.createComment(`Wu: link removed from ${appName}`);
+          child.parentElement?.replaceChild(comment, child);
+          continue;
+        }
+      }
+
+      // Recursión para elementos hijos
+      if (child.children.length > 0) {
+        this.deepParse(child, context);
+      }
+    }
+  }
+
+  /**
+   * Parsear tag <script>
+   */
+  parseScriptTag(scriptElement, inlineScripts, externalScripts, baseUrl, appName) {
+    const src = scriptElement.getAttribute('src');
+    const type = scriptElement.getAttribute('type') || 'text/javascript';
+
+    // Ignorar module scripts (se cargan por import)
+    if (type === 'module') {
+      console.log(`[WuHtmlParser] ⏭️ Skipping module script for ${appName}`);
+      return;
+    }
+
+    if (src) {
+      // Script externo
+      const absoluteUrl = this.resolveUrl(src, baseUrl);
+      externalScripts.push(absoluteUrl);
+      console.log(`[WuHtmlParser] 📜 Extracted external script: ${absoluteUrl}`);
+    } else {
+      // Script inline
+      const scriptContent = scriptElement.textContent || '';
+      if (scriptContent.trim()) {
+        inlineScripts.push(scriptContent);
+        console.log(`[WuHtmlParser] 📜 Extracted inline script (${scriptContent.length} chars)`);
+      }
+    }
+  }
+
+  /**
+   * Resolver URL relativa a absoluta
+   */
+  resolveUrl(url, baseUrl) {
+    // Ya es absoluta
+    if (url.startsWith('http://') || url.startsWith('https://') || url.startsWith('//')) {
+      return url.startsWith('//') ? `https:${url}` : url;
+    }
+
+    // Resolver relativa
+    const base = baseUrl.endsWith('/') ? baseUrl : `${baseUrl}/`;
+
+    if (url.startsWith('/')) {
+      // Relativa a raíz
+      const urlObj = new URL(baseUrl);
+      return `${urlObj.protocol}//${urlObj.host}${url}`;
+    } else {
+      // Relativa a base
+      return `${base}${url}`;
+    }
+  }
+
+  /**
+   * Cargar HTML desde URL
+   */
+  async fetchHtml(url, appName) {
+    console.log(`[WuHtmlParser] 🌐 Fetching HTML for ${appName} from ${url}`);
+
+    try {
+      const response = await fetch(url, {
+        method: 'GET',
+        cache: 'no-cache',
+        headers: {
+          'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8'
+        }
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+
+      const html = await response.text();
+
+      if (!html || html.trim().length === 0) {
+        throw new Error('Empty HTML response');
+      }
+
+      console.log(`[WuHtmlParser] ✅ Fetched HTML (${html.length} chars)`);
+
+      return html;
+
+    } catch (error) {
+      console.error(`[WuHtmlParser] ❌ Failed to fetch HTML from ${url}:`, error);
+      throw error;
+    }
+  }
+
+  /**
+   * Parsear y cargar HTML desde URL
+   */
+  async parseFromUrl(url, appName) {
+    const html = await this.fetchHtml(url, appName);
+    return this.parse(html, appName, url);
+  }
+
+  /**
+   * Limpiar cache
+   */
+  clearCache(pattern) {
+    if (pattern) {
+      const regex = new RegExp(pattern);
+      for (const [key] of this.cache) {
+        if (regex.test(key)) {
+          this.cache.delete(key);
+          console.log(`[WuHtmlParser] 🗑️ Cleared cache for: ${key}`);
+        }
+      }
+    } else {
+      this.cache.clear();
+      console.log(`[WuHtmlParser] 🗑️ Cache cleared completely`);
+    }
+  }
+
+  /**
+   * Obtener estadísticas
+   */
+  getStats() {
+    return {
+      cacheSize: this.cache.size,
+      cacheKeys: Array.from(this.cache.keys())
+    };
+  }
+}
+
+/**
+ * 🎯 EXPORTS DE CONVENIENCIA
+ */
+
+/**
+ * Parsear HTML
+ */
+export function parseHtml(html, appName, baseUrl) {
+  const parser = new WuHtmlParser();
+  return parser.parse(html, appName, baseUrl);
+}
+
+/**
+ * Parsear HTML desde URL
+ */
+export async function parseHtmlFromUrl(url, appName) {
+  const parser = new WuHtmlParser();
+  return await parser.parseFromUrl(url, appName);
+}