wu-framework 1.1.3 → 1.1.5

package/src/core/wu-style-bridge.js

@@ -4,25 +4,37 @@
  * Comparte automáticamente estilos de node_modules entre padre e hijos Shadow DOM
  * Soluciona el problema de aislamiento CSS en microfrontends
  *
- * 🚀 STYLE MODES:
- * - 'isolated': MFE solo tiene sus propios estilos (CSS variables SÍ se heredan)
- * - 'fully-isolated': Aislamiento TOTAL - resetea CSS variables del padre
- * - 'shared': Comparte todos los estilos del padre
- * - 'auto': Comparte solo librerías específicas (element-plus, etc.)
+ * MODOS DE INYECCIÓN DE ESTILOS:
+ * ================================
+ *
+ * 1. "shared" (default):
+ *    - Inyecta TODOS los estilos del documento padre en el Shadow DOM
+ *    - Incluye: librerías (Element Plus, Vue Flow), estilos globales, etc.
+ *    - Ideal para: Apps que necesitan compartir un design system común
+ *    - Riesgo de colisiones: ALTO
+ *
+ * 2. "isolated":
+ *    - NO inyecta estilos externos
+ *    - Usa el encapsulamiento NATIVO del Shadow DOM
+ *    - La app debe incluir sus propios estilos (CSS-in-JS, scoped styles, etc.)
+ *    - Ideal para: Apps con estilos completamente independientes
+ *    - Riesgo de colisiones: NINGUNO
+ *
+ * 3. "fully-isolated":
+ *    - Inyecta SOLO los estilos propios de la micro-app específica
+ *    - Detecta estilos por patrón: packages/appName/src/
+ *    - Usa MutationObserver para HMR de Vite
+ *    - Ideal para: Apps que necesitan sus estilos pero no los globales
+ *    - Riesgo de colisiones: NINGUNO
  */
 
 export class WuStyleBridge {
   constructor() {
     this.sharedStyles = new Map();
     this.styleObserver = null;
-    this.appStyleModes = new Map(); // Per-app style isolation mode
+    this.fullyIsolatedApps = new Map(); // Mapa de appName -> appUrl para apps con fully-isolated
     this.config = {
-      // 🛡️ DEFAULT MODE: 'isolated' = cada MFE tiene sus propios estilos
-      // 'fully-isolated' = aislamiento total incluyendo CSS variables
-      // 'shared' = compartir estilos del padre
-      // 'auto' = compartir solo librerías específicas
-      defaultMode: 'isolated',
-      // Librerías que se deben compartir automáticamente (solo en modo 'auto')
+      // Librerías que se deben compartir automáticamente
       autoShareLibraries: [
         'element-plus',
         'vue-flow',
@@ -32,56 +44,94 @@ export class WuStyleBridge {
         'normalize.css',
         'reset.css'
       ],
-      // Patrones de URLs a compartir (solo en modo 'auto' o 'shared')
+      // Patrones de URLs a compartir
       sharePatterns: [
         /\/node_modules\//,
         /\/@vite\/client/,
         /\/dist\/index\.css$/,
         /\/dist\/style\.css$/
       ],
+      // Modo de compartición
+      mode: 'auto', // 'auto' | 'manual' | 'all'
       // Caché de estilos
       cacheEnabled: true
     };
 
-    console.log('[WuStyleBridge] 🎨 Style sharing system initialized (default: isolated)');
+    console.log('[WuStyleBridge] 🎨 Style sharing system initialized');
   }
 
   /**
-   * 🛡️ SET APP STYLE MODE: Configura el modo de estilos para una app específica
+   * 🛡️ REGISTRAR APP FULLY-ISOLATED: Registra una app con fully-isolated para filtrar sus estilos
    * @param {string} appName - Nombre de la app
-   * @param {'isolated' | 'shared' | 'auto'} mode - Modo de estilos
-   * @param {string} appUrl - URL base del MFE (opcional)
+   * @param {string} appUrl - URL base de la app
    */
-  setAppStyleMode(appName, mode, appUrl = null) {
-    this.appStyleModes.set(appName, mode);
-    if (appUrl) {
-      this.appUrls = this.appUrls || new Map();
-      this.appUrls.set(appName, appUrl);
-    }
-    console.log(`[WuStyleBridge] 🎨 Style mode for ${appName}: ${mode}${appUrl ? ` (url: ${appUrl})` : ''}`);
+  registerFullyIsolatedApp(appName, appUrl) {
+    this.fullyIsolatedApps.set(appName, appUrl);
+    console.log(`[WuStyleBridge] 🛡️ Registered fully-isolated app: ${appName} (${appUrl})`);
   }
 
   /**
-   * 🔗 GET APP URL: Obtiene la URL de una app
-   * @param {string} appName - Nombre de la app
-   * @returns {string|null}
+   * 🔍 VERIFICAR SI ESTILO ES DE APP FULLY-ISOLATED: Verifica si un estilo proviene de una app con fully-isolated
+   * @param {string|Object|HTMLElement} styleUrlOrElement - URL del estilo, objeto de estilo, o elemento DOM
+   * @returns {boolean}
    */
-  getAppUrl(appName) {
-    return this.appUrls?.get(appName) || null;
-  }
+  isStyleFromFullyIsolatedApp(styleUrlOrElement) {
+    let url = '';
+    
+    // Si es un string, usar directamente
+    if (typeof styleUrlOrElement === 'string') {
+      url = styleUrlOrElement;
+    }
+    // Si es un elemento DOM (HTMLElement) - verificar si tiene getAttribute (método común de elementos DOM)
+    else if (styleUrlOrElement && typeof styleUrlOrElement.getAttribute === 'function') {
+      // Obtener data-vite-dev-id o href del elemento
+      url = styleUrlOrElement.getAttribute('data-vite-dev-id') || styleUrlOrElement.href || '';
+    }
+    // Si es un objeto con propiedades
+    else if (styleUrlOrElement) {
+      if (styleUrlOrElement.href) {
+        url = styleUrlOrElement.href;
+      } else if (styleUrlOrElement.viteId) {
+        url = styleUrlOrElement.viteId;
+      } else if (styleUrlOrElement.element) {
+        if (typeof styleUrlOrElement.element.getAttribute === 'function') {
+          url = styleUrlOrElement.element.getAttribute('data-vite-dev-id') || styleUrlOrElement.element.href || '';
+        } else if (styleUrlOrElement.element.href) {
+          url = styleUrlOrElement.element.href;
+        }
+      }
+    }
 
-  /**
-   * 🔍 GET APP STYLE MODE: Obtiene el modo de estilos de una app
-   * @param {string} appName - Nombre de la app
-   * @returns {'isolated' | 'shared' | 'auto'}
-   */
-  getAppStyleMode(appName) {
-    return this.appStyleModes.get(appName) || this.config.defaultMode;
+    if (!url || url.trim() === '') return false;
+
+    // Normalizar la URL para comparación (convertir backslashes a forward slashes)
+    const normalizedUrl = url.replace(/\\/g, '/').toLowerCase();
+
+    // Verificar si la URL pertenece a alguna app con fully-isolated
+    for (const [appName, appUrl] of this.fullyIsolatedApps.entries()) {
+      const normalizedAppUrl = appUrl.replace(/\\/g, '/').toLowerCase();
+      const normalizedAppName = appName.toLowerCase();
+      
+      // Verificar si la URL contiene la URL base de la app (ej: http://localhost:4001)
+      if (normalizedAppUrl && normalizedUrl.includes(normalizedAppUrl)) {
+        return true;
+      }
+      
+      // Verificar si la URL contiene rutas del app en el sistema de archivos
+      // Ej: C:/Users/.../header/src/... o /header/src/...
+      // Patrón: cualquier ruta que contenga /header/ o \header\
+      const appPathPattern = new RegExp(`[/\\\\]${normalizedAppName}[/\\\\]`, 'i');
+      if (appPathPattern.test(normalizedUrl)) {
+        return true;
+      }
+    }
+
+    return false;
   }
 
   /**
    * 🔍 DETECTAR ESTILOS: Escanea todos los estilos del documento
-   * @returns {Array} Lista de estilos detectados
+   * @returns {Array} Lista de estilos detectados (filtrados para excluir apps con fully-isolated)
    */
   detectDocumentStyles() {
     const styles = [];
@@ -89,6 +139,11 @@ export class WuStyleBridge {
     // 1. Detectar TODOS los <link> tags de CSS
     const linkTags = document.querySelectorAll('link[rel="stylesheet"]');
     linkTags.forEach((link) => {
+      // Filtrar estilos de apps con fully-isolated
+      if (this.isStyleFromFullyIsolatedApp(link)) {
+        return;
+      }
+
       styles.push({
         type: 'link',
         href: link.href,
@@ -108,6 +163,12 @@ export class WuStyleBridge {
       const viteId = style.getAttribute('data-vite-dev-id');
       const content = style.textContent;
 
+      // Filtrar estilos de apps con fully-isolated (después de obtener viteId para mejor detección)
+      if (this.isStyleFromFullyIsolatedApp(style) || (viteId && this.isStyleFromFullyIsolatedApp(viteId))) {
+        console.log(`[WuStyleBridge] 🛡️ Filtered out style from fully-isolated app: ${viteId || 'unknown'}`);
+        return;
+      }
+
       // Incluir todos los estilos con contenido
       if (content && content.trim().length > 0) {
         styles.push({
@@ -180,61 +241,42 @@ export class WuStyleBridge {
   }
 
   /**
-   * 🌉 INYECTAR ESTILOS EN SHADOW DOM: Clona estilos al Shadow DOM según el modo
+   * 🌉 INYECTAR ESTILOS EN SHADOW DOM: Clona estilos al Shadow DOM
    * @param {ShadowRoot} shadowRoot - Shadow DOM donde inyectar
    * @param {string} appName - Nombre de la app
-   * @param {string} appUrl - URL base del MFE (opcional, para detectar sus propios estilos)
+   * @param {string} styleMode - Modo de estilos: 'shared', 'isolated', 'fully-isolated'
    * @returns {Promise<number>}
    */
-  async injectStylesIntoShadow(shadowRoot, appName, appUrl = null) {
+  async injectStylesIntoShadow(shadowRoot, appName, styleMode) {
     if (!shadowRoot) {
       console.warn('[WuStyleBridge] ⚠️ No shadow root provided');
       return 0;
     }
 
-    // 🛡️ CHECK STYLE MODE
-    const styleMode = this.getAppStyleMode(appName);
-    // Use stored URL if not provided
-    const resolvedAppUrl = appUrl || this.getAppUrl(appName);
-    console.log(`[WuStyleBridge] 🌉 Injecting styles into ${appName} (mode: ${styleMode}, url: ${resolvedAppUrl || 'none'})...`);
-
-    // 🔒 FULLY-ISOLATED MODE: Inject CSS variables reset FIRST
+    // 🛡️ MODO FULLY-ISOLATED: No inyectar ningún estilo compartido
+    // Los estilos propios se manejan en wu-sandbox.js con injectOwnStylesToShadow
     if (styleMode === 'fully-isolated') {
-      this.injectCSSVariablesReset(shadowRoot, appName);
+      console.log(`[WuStyleBridge] 🛡️ Style mode "fully-isolated" for ${appName}, skipping shared style injection`);
+      return 0;
     }
 
+    // 🔒 MODO ISOLATED: No inyectar estilos externos - usar encapsulamiento nativo de Shadow DOM
+    // La app debe manejar sus propios estilos (CSS-in-JS, scoped styles, imports directos)
+    if (styleMode === 'isolated') {
+      console.log(`[WuStyleBridge] 🔒 Style mode "isolated" for ${appName}, using native Shadow DOM encapsulation (no external styles)`);
+      return 0;
+    }
+
+    // 🌐 MODO SHARED (default): Inyectar todos los estilos compartidos del documento
+    console.log(`[WuStyleBridge] 🌐 Style mode "shared" for ${appName}, injecting all shared styles...`);
+
     // Detectar estilos del documento
     const styles = this.detectDocumentStyles();
     let injectedCount = 0;
 
-    // Inyectar cada estilo según el modo
+    // Inyectar cada estilo
     for (const style of styles) {
       try {
-        const styleSource = style.href || style.viteId || '';
-
-        // 🎯 DETECTAR SI EL ESTILO PERTENECE AL MFE
-        const isOwnStyle = this.isStyleFromApp(styleSource, appName, resolvedAppUrl);
-
-        // 🛡️ En modo 'isolated' o 'fully-isolated': SOLO inyectar estilos propios del MFE
-        if (styleMode === 'isolated' || styleMode === 'fully-isolated') {
-          if (!isOwnStyle) {
-            const shortSource = styleSource.split(/[/\\]/).slice(-2).join('/');
-            console.log(`[WuStyleBridge] 🚫 ${appName} skipping foreign style: ${shortSource}`);
-            continue; // Skip parent/shell styles
-          }
-          console.log(`[WuStyleBridge] 🎨 ${appName} own style: ${styleSource.split(/[/\\]/).slice(-2).join('/')}`);
-        }
-
-        // 🎯 En modo 'auto': compartir librerías + estilos propios
-        if (styleMode === 'auto') {
-          const shouldShare = this.shouldShareStyle(styleSource);
-          if (!shouldShare && !isOwnStyle) {
-            continue; // Skip this style
-          }
-        }
-
-        // 'shared' mode: inject everything
-
         switch (style.type) {
           case 'link':
             await this.injectLinkStyle(shadowRoot, style);
@@ -256,246 +298,10 @@ export class WuStyleBridge {
       }
     }
 
-    console.log(`[WuStyleBridge] ✅ Injected ${injectedCount} styles into ${appName}`);
+    console.log(`[WuStyleBridge] ✅ Injected ${injectedCount} shared styles into ${appName}`);
     return injectedCount;
   }
 
-  /**
-   * 🔒 INJECT CSS VARIABLES RESET: Resetea las CSS variables heredadas del padre
-   * Este método detecta todas las CSS variables definidas en el documento padre
-   * y las resetea a 'initial' dentro del Shadow DOM para lograr aislamiento total.
-   *
-   * @param {ShadowRoot} shadowRoot - Shadow DOM donde inyectar el reset
-   * @param {string} appName - Nombre de la app para logging
-   */
-  injectCSSVariablesReset(shadowRoot, appName) {
-    // Verificar si ya existe el reset
-    const existingReset = shadowRoot.querySelector('style[data-wu-css-reset="true"]');
-    if (existingReset) {
-      console.log(`[WuStyleBridge] ⏭️ CSS variables reset already exists for ${appName}`);
-      return;
-    }
-
-    // 🔍 Detectar todas las CSS variables del documento padre
-    const parentVariables = this.detectParentCSSVariables();
-
-    if (parentVariables.length === 0) {
-      console.log(`[WuStyleBridge] 🔒 No parent CSS variables to reset for ${appName}`);
-      return;
-    }
-
-    // 🎨 Generar CSS reset
-    const resetCSS = this.generateCSSVariablesReset(parentVariables);
-
-    // Crear style tag con el reset
-    const resetStyle = document.createElement('style');
-    resetStyle.setAttribute('data-wu-css-reset', 'true');
-    resetStyle.setAttribute('data-wu-app', appName);
-    resetStyle.textContent = resetCSS;
-
-    // Insertar al PRINCIPIO del shadow root (antes de otros estilos)
-    shadowRoot.insertBefore(resetStyle, shadowRoot.firstChild);
-
-    console.log(`[WuStyleBridge] 🔒 CSS variables reset injected for ${appName} (${parentVariables.length} variables blocked)`);
-  }
-
-  /**
-   * 🔍 DETECT PARENT CSS VARIABLES: Detecta todas las CSS variables del documento padre
-   * @returns {Array<{name: string, value: string}>} Lista de variables detectadas
-   */
-  detectParentCSSVariables() {
-    const variables = [];
-    const seen = new Set();
-
-    try {
-      // 1. Buscar en :root y html
-      const rootStyles = getComputedStyle(document.documentElement);
-
-      // 2. Buscar en todos los stylesheets del documento
-      for (const sheet of document.styleSheets) {
-        try {
-          // Algunos stylesheets (cross-origin) no permiten acceso
-          const rules = sheet.cssRules || sheet.rules;
-          if (!rules) continue;
-
-          for (const rule of rules) {
-            // Solo procesar reglas de estilo
-            if (rule.type !== CSSRule.STYLE_RULE) continue;
-
-            // Buscar reglas que definen variables (:root, html, body, *)
-            const selector = rule.selectorText?.toLowerCase() || '';
-            if (selector === ':root' || selector === 'html' || selector === 'body' || selector === '*') {
-              const style = rule.style;
-              for (let i = 0; i < style.length; i++) {
-                const prop = style[i];
-                // Las CSS variables empiezan con --
-                if (prop.startsWith('--') && !seen.has(prop)) {
-                  seen.add(prop);
-                  variables.push({
-                    name: prop,
-                    value: style.getPropertyValue(prop).trim()
-                  });
-                }
-              }
-            }
-          }
-        } catch (e) {
-          // Ignorar errores de CORS en stylesheets externos
-        }
-      }
-
-      // 3. También detectar variables inline en el html element
-      const htmlStyle = document.documentElement.getAttribute('style') || '';
-      const inlineVarMatches = htmlStyle.matchAll(/--([\w-]+)\s*:\s*([^;]+)/g);
-      for (const match of inlineVarMatches) {
-        const name = `--${match[1]}`;
-        if (!seen.has(name)) {
-          seen.add(name);
-          variables.push({
-            name,
-            value: match[2].trim()
-          });
-        }
-      }
-
-    } catch (error) {
-      console.warn('[WuStyleBridge] ⚠️ Error detecting CSS variables:', error);
-    }
-
-    return variables;
-  }
-
-  /**
-   * 🎨 GENERATE CSS VARIABLES RESET: Genera el CSS que resetea las variables
-   * @param {Array<{name: string, value: string}>} variables - Variables a resetear
-   * @returns {string} CSS con el reset
-   */
-  generateCSSVariablesReset(variables) {
-    // 🔒 TÉCNICA: Redefinir cada variable como "unset" dentro del :host
-    // Esto rompe la cadena de herencia de CSS custom properties
-    //
-    // Problema: CSS variables se heredan a través de Shadow DOM por spec
-    // Solución: Redefinirlas explícitamente para "sobrescribir" el valor heredado
-    //
-    // Usamos valores por defecto del navegador para colores comunes
-    // y cadena vacía para otros
-
-    const resetRules = variables.map(v => {
-      const name = v.name;
-      // Detectar tipo de variable por su nombre y asignar valor neutro
-      if (name.includes('color') || name.includes('bg')) {
-        return `  ${name}: transparent;`;
-      } else if (name.includes('size') || name.includes('width') || name.includes('height')) {
-        return `  ${name}: auto;`;
-      } else if (name.includes('font')) {
-        return `  ${name}: inherit;`;
-      } else {
-        // Para otras variables, usar valor vacío que las invalida
-        return `  ${name}: initial;`;
-      }
-    }).join('\n');
-
-    return `
-/* 🔒 WU-FRAMEWORK: CSS Variables Reset (fully-isolated mode)
- * Este estilo BLOQUEA las CSS variables heredadas del padre
- * para lograr un aislamiento visual completo.
- * Variables bloqueadas: ${variables.length}
- *
- * El MFE debe definir sus propias variables CSS si las necesita.
- * Las variables del padre/shell NO afectarán este componente.
- */
-
-:host {
-  /* 🛡️ Bloquear herencia de propiedades CSS del padre */
-  all: initial;
-  display: block;
-
-  /* 🔒 Redefinir variables del padre como valores neutros */
-${resetRules}
-}
-
-/* Restaurar herencia normal DENTRO del shadow DOM */
-:host * {
-  all: revert;
-}
-`.trim();
-  }
-
-  /**
-   * 🔗 SET APP FOLDER: Asocia una carpeta del sistema de archivos con un MFE
-   * @param {string} appName - Nombre de la app
-   * @param {string} folderPath - Ruta de la carpeta (extraída de data-vite-dev-id)
-   */
-  setAppFolder(appName, folderPath) {
-    this.appFolders = this.appFolders || new Map();
-    this.appFolders.set(appName, folderPath.toLowerCase());
-    console.log(`[WuStyleBridge] 📁 Folder for ${appName}: ${folderPath}`);
-  }
-
-  /**
-   * 🔍 DETECTAR SI UN ESTILO PERTENECE A UN MFE
-   * @param {string} styleSource - URL o viteId del estilo
-   * @param {string} appName - Nombre de la app
-   * @param {string} appUrl - URL base del MFE
-   * @returns {boolean}
-   */
-  isStyleFromApp(styleSource, appName, appUrl) {
-    if (!styleSource) return false;
-
-    const source = styleSource.toLowerCase();
-
-    // 🎯 PRIORITY 1: Verificar puerto del MFE en localhost URL
-    // Ej: "http://localhost:3001/src/style.css" pertenece a MFE en puerto 3001
-    if (appUrl) {
-      try {
-        const appPort = new URL(appUrl).port;
-        if (appPort) {
-          // Si el estilo viene de localhost con el puerto del MFE
-          if (source.includes(`localhost:${appPort}`) ||
-              source.includes(`127.0.0.1:${appPort}`)) {
-            console.log(`[WuStyleBridge] ✅ Port match: ${appPort} for ${appName}`);
-            return true;
-          }
-          // Si el estilo viene de localhost pero con OTRO puerto, NO es de este MFE
-          const portMatch = source.match(/localhost:(\d+)|127\.0\.0\.1:(\d+)/);
-          if (portMatch) {
-            const stylePort = portMatch[1] || portMatch[2];
-            if (stylePort && stylePort !== appPort) {
-              return false;
-            }
-          }
-        }
-      } catch (e) {
-        // Ignore URL parse errors
-      }
-    }
-
-    // 🎯 PRIORITY 2: Usar la carpeta registrada del MFE
-    // Cuando el MFE carga, detectamos su carpeta y la guardamos
-    const appFolder = this.appFolders?.get(appName);
-    if (appFolder && source.includes(appFolder)) {
-      console.log(`[WuStyleBridge] ✅ Folder match for ${appName}`);
-      return true;
-    }
-
-    // 🎯 PRIORITY 3: Para file paths de Vite (data-vite-dev-id)
-    // Verificar si el path contiene la carpeta registrada del MFE
-    // La carpeta ya fue registrada desde wu-core.js con el valor del manifest
-    // Solo comparar, NO auto-detectar ni sobrescribir
-    if (appFolder) {
-      // El path debe contener la carpeta del MFE (e.g., /container/ o /header/)
-      // Normalizar la búsqueda para Windows y Unix paths
-      const folderPattern = appFolder.replace(/\//g, '[/\\\\]');
-      const folderRegex = new RegExp(folderPattern, 'i');
-      if (folderRegex.test(source)) {
-        console.log(`[WuStyleBridge] ✅ Folder regex match for ${appName}: ${appFolder}`);
-        return true;
-      }
-    }
-
-    return false;
-  }
-
   /**
    * 🔗 INYECTAR LINK STYLE: Clona <link> tag al Shadow DOM
    * @param {ShadowRoot} shadowRoot