wu-framework 1.1.6 → 1.1.8

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

@@ -1,280 +1,190 @@
 /**
- * 📄 WU-HTML-PARSER: Parser inteligente de HTML para micro-apps
- * Basado en video-code - Extrae DOM, scripts y estilos
+ * WU-HTML-PARSER: Fetch and parse HTML entries from micro-apps.
+ *
+ * Used in "strict" sandbox mode. The flow:
+ * 1. Fetch the HTML page at the app's URL
+ * 2. Parse it: extract inline/external scripts, inline/external styles, and clean DOM
+ * 3. Return structured result so wu-core can inject DOM + styles into Shadow DOM
+ *    and execute scripts inside the proxy sandbox via WuScriptExecutor.
+ *
+ * This is the qiankun-style "HTML entry" approach that enables real JS isolation.
  */
 
+import { logger } from './wu-logger.js';
+
 export class WuHtmlParser {
   constructor() {
-    this.cache = new Map(); // Cache de HTML parseado
-    console.log('[WuHtmlParser] 📄 HTML parsing system initialized');
+    this._cache = new Map();
   }
 
   /**
-   * 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 }
+   * Fetch HTML content from a URL.
+   * @param {string} url - App URL (e.g. http://localhost:3001)
+   * @param {string} appName - For logging
+   * @returns {Promise<string>} Raw HTML string
    */
-  parse(html, appName, baseUrl) {
-    console.log(`[WuHtmlParser] 📄 Parsing HTML for ${appName}`);
+  async fetchHtml(url, appName) {
+    logger.wuDebug(`[HtmlParser] Fetching HTML for ${appName} from ${url}`);
 
-    // Verificar cache
-    const cacheKey = `${appName}:${html.length}`;
-    if (this.cache.has(cacheKey)) {
-      console.log(`[WuHtmlParser] ⚡ Cache hit for ${appName}`);
-      return this.cache.get(cacheKey);
+    const response = await fetch(url, {
+      method: 'GET',
+      headers: { 'Accept': 'text/html,application/xhtml+xml,*/*' }
+    });
+
+    if (!response.ok) {
+      throw new Error(`[HtmlParser] Failed to fetch ${url}: HTTP ${response.status}`);
     }
 
-    try {
-      // Crear contenedor temporal para parsear
-      const tempDiv = document.createElement('div');
-      tempDiv.innerHTML = html;
+    const html = await response.text();
+    if (!html || !html.trim()) {
+      throw new Error(`[HtmlParser] Empty HTML response from ${url}`);
+    }
 
-      // Extraer recursos
-      const inlineScripts = [];
-      const externalScripts = [];
-      const inlineStyles = [];
-      const externalStyles = [];
+    logger.wuDebug(`[HtmlParser] Fetched ${html.length} chars for ${appName}`);
+    return html;
+  }
 
-      // 🔍 Parsear recursivamente el DOM
-      this.deepParse(tempDiv, {
-        inlineScripts,
-        externalScripts,
-        inlineStyles,
-        externalStyles,
-        baseUrl,
-        appName
-      });
+  /**
+   * Parse HTML string into structured parts.
+   *
+   * @param {string} html - Raw HTML
+   * @param {string} appName - App identifier
+   * @param {string} baseUrl - Base URL for resolving relative paths
+   * @returns {{
+   *   dom: string,
+   *   scripts: { inline: string[], external: string[] },
+   *   styles: { inline: string[], external: string[] }
+   * }}
+   */
+  parse(html, appName, baseUrl) {
+    const cacheKey = `${appName}:${html.length}`;
+    if (this._cache.has(cacheKey)) {
+      return this._cache.get(cacheKey);
+    }
 
-      // Obtener DOM limpio
-      const cleanedDom = tempDiv.innerHTML;
+    const temp = document.createElement('div');
+    temp.innerHTML = html;
 
-      const result = {
-        dom: cleanedDom,
-        scripts: {
-          inline: inlineScripts,
-          external: externalScripts,
-          all: [...inlineScripts, ...externalScripts]
-        },
-        styles: {
-          inline: inlineStyles,
-          external: externalStyles,
-          all: [...inlineStyles, ...externalStyles]
-        }
-      };
+    const inlineScripts = [];
+    const externalScripts = [];
+    const inlineStyles = [];
+    const externalStyles = [];
 
-      // Cachear resultado
-      this.cache.set(cacheKey, result);
+    this._extractResources(temp, {
+      inlineScripts, externalScripts,
+      inlineStyles, externalStyles,
+      baseUrl
+    });
 
-      console.log(`[WuHtmlParser] ✅ Parsed ${appName}: ${inlineScripts.length} inline scripts, ${externalScripts.length} external scripts`);
+    const result = {
+      dom: temp.innerHTML,
+      scripts: { inline: inlineScripts, external: externalScripts },
+      styles: { inline: inlineStyles, external: externalStyles }
+    };
 
-      return result;
+    this._cache.set(cacheKey, result);
 
-    } catch (error) {
-      console.error(`[WuHtmlParser] ❌ Failed to parse HTML for ${appName}:`, error);
-      throw error;
-    }
+    logger.wuDebug(
+      `[HtmlParser] ${appName}: ${inlineScripts.length} inline scripts, ` +
+      `${externalScripts.length} external scripts, ` +
+      `${inlineStyles.length + externalStyles.length} styles`
+    );
+
+    return result;
   }
 
   /**
-   * Parsear recursivamente el DOM extrayendo scripts y estilos
-   * @param {HTMLElement} element - Elemento a parsear
-   * @param {Object} context - Contexto de parsing
+   * Convenience: fetch + parse in one call.
    */
-  deepParse(element, context) {
-    const { inlineScripts, externalScripts, inlineStyles, externalStyles, baseUrl, appName } = context;
+  async fetchAndParse(url, appName) {
+    const html = await this.fetchHtml(url, appName);
+    return this.parse(html, appName, url);
+  }
+
+  /**
+   * Recursively walk the DOM, extracting scripts and styles,
+   * replacing them with comments to keep the DOM clean.
+   */
+  _extractResources(element, ctx) {
+    // Iterate over a static copy since we mutate the DOM
     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);
+      const tag = child.nodeName.toLowerCase();
 
-        // Reemplazar script con comentario
-        const comment = document.createComment(`Wu: script removed from ${appName}`);
-        child.parentElement?.replaceChild(comment, child);
+      if (tag === 'script') {
+        this._extractScript(child, ctx);
+        child.replaceWith(document.createComment('wu:script'));
         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);
+      if (tag === 'style') {
+        const text = child.textContent?.trim();
+        if (text) ctx.inlineStyles.push(text);
+        child.replaceWith(document.createComment('wu:style'));
         continue;
       }
 
-      // 🔗 LINK TAGS (external styles)
-      if (tagName === 'link') {
+      if (tag === '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);
+          ctx.externalStyles.push(this._resolveUrl(href, ctx.baseUrl));
+          child.replaceWith(document.createComment('wu:link'));
           continue;
         }
       }
 
-      // Recursión para elementos hijos
+      // Recurse into children
       if (child.children.length > 0) {
-        this.deepParse(child, context);
+        this._extractResources(child, ctx);
       }
     }
   }
 
   /**
-   * Parsear tag <script>
+   * Extract a <script> tag into inline or external list.
+   * Skips type="module" scripts (they can't be eval'd — use module mode for those).
    */
-  parseScriptTag(scriptElement, inlineScripts, externalScripts, baseUrl, appName) {
-    const src = scriptElement.getAttribute('src');
-    const type = scriptElement.getAttribute('type') || 'text/javascript';
+  _extractScript(el, ctx) {
+    const type = el.getAttribute('type') || '';
+    const src = el.getAttribute('src');
 
-    // Ignorar module scripts (se cargan por import)
+    // Module scripts can't be executed via new Function / eval.
+    // If the app uses ES modules, it should use sandbox: 'module' mode.
     if (type === 'module') {
-      console.log(`[WuHtmlParser] ⏭️ Skipping module script for ${appName}`);
+      logger.wuDebug('[HtmlParser] Skipping type="module" script (use sandbox: "module" for ES modules)');
       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}`;
+      ctx.externalScripts.push(this._resolveUrl(src, ctx.baseUrl));
     } else {
-      // Relativa a base
-      return `${base}${url}`;
+      const text = el.textContent?.trim();
+      if (text) ctx.inlineScripts.push(text);
     }
   }
 
   /**
-   * Cargar HTML desde URL
+   * Resolve a relative URL against a base URL.
    */
-  async fetchHtml(url, appName) {
-    console.log(`[WuHtmlParser] 🌐 Fetching HTML for ${appName} from ${url}`);
+  _resolveUrl(url, baseUrl) {
+    if (url.startsWith('http://') || url.startsWith('https://')) return url;
+    if (url.startsWith('//')) return `https:${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;
+      return new URL(url, baseUrl).href;
+    } catch {
+      // Fallback for environments without URL constructor
+      const base = baseUrl.replace(/\/$/, '');
+      return url.startsWith('/') ? base + url : `${base}/${url}`;
     }
   }
 
   /**
-   * Parsear y cargar HTML desde URL
+   * Clear the parse cache.
    */
-  async parseFromUrl(url, appName) {
-    const html = await this.fetchHtml(url, appName);
-    return this.parse(html, appName, url);
+  clearCache() {
+    this._cache.clear();
   }
-
-  /**
-   * 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);
 }