wu-framework 1.1.1 → 1.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wu-framework",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "🚀 Universal Microfrontends Framework - 8 frameworks, zero config, Shadow DOM isolation",
   "main": "src/index.js",
   "type": "module",

package/src/core/wu-core.js

@@ -587,6 +587,23 @@ export class WuCore {
       // 🏊 Acquire sandbox from pool (if configured)
       const poolSandbox = this.sandboxPool.acquire(appName);
 
+      // 🎨 Configure style mode from manifest before creating sandbox
+      const manifest = app.manifest;
+      console.log(`[Wu] 🔍 DEBUG: Manifest for ${appName}:`, JSON.stringify(manifest, null, 2));
+
+      // Default to 'isolated' if no styleMode specified
+      const styleMode = manifest?.styleMode || 'isolated';
+      if (this.sandbox.styleBridge) {
+        // Pass app URL so StyleBridge can identify MFE's own styles
+        this.sandbox.styleBridge.setAppStyleMode(appName, styleMode, app.url);
+        console.log(`[Wu] 🎨 Style mode for ${appName}: ${styleMode}`);
+
+        // 📁 If folder is specified in manifest, register it for style detection
+        // This is needed when folder name differs from app name (e.g., folder="container", name="content")
+        const folderName = manifest?.folder || appName;
+        this.sandbox.styleBridge.setAppFolder(appName, `/${folderName}/`);
+      }
+
       // 🛡️ Quantum sandbox creation
       const sandbox = this.sandbox.create(appName, container);
 
@@ -603,6 +620,14 @@ export class WuCore {
         if (!lifecycle) {
           throw new Error(`App ${appName} did not register with wu.define()`);
         }
+
+        // 🎨 RE-INJECT STYLES: After remote module loads, Vite may have injected new styles
+        // We need to re-scan and inject any new styles into the Shadow DOM
+        if (sandbox.shadowRoot && this.sandbox.styleBridge) {
+          console.log(`[Wu] 🎨 Re-injecting styles after module load for ${appName}...`);
+          // Pass app URL so StyleBridge can identify MFE's own styles
+          await this.sandbox.styleBridge.injectStylesIntoShadow(sandbox.shadowRoot, appName, app.url);
+        }
       }
 
       // 🪝 Execute beforeMount hooks

package/src/core/wu-manifest.js

@@ -43,14 +43,19 @@ export class WuManifest {
   defineSchema() {
     this.schemas.set('wu.json', {
       required: ['name', 'entry'],
-      optional: ['wu'],
+      optional: ['wu', 'styleMode'],
       wu: {
         optional: ['exports', 'imports', 'routes', 'permissions'],
         exports: 'object',
         imports: 'array',
         routes: 'array',
         permissions: 'array'
-      }
+      },
+      // 🎨 styleMode: 'isolated' | 'shared' | 'auto'
+      // - isolated: No comparte estilos del padre (default, máximo aislamiento)
+      // - shared: Comparte todos los estilos del padre
+      // - auto: Solo comparte estilos de librerías específicas (element-plus, etc.)
+      styleMode: 'string'
     });
   }
 
@@ -312,7 +317,11 @@ export class WuManifest {
   normalize(manifest) {
     const normalized = {
       name: manifest.name.trim(),
+      // 📁 folder: carpeta física del MFE (si difiere del name)
+      folder: manifest.folder?.trim() || manifest.name.trim(),
       entry: this.normalizeEntry(manifest.entry),
+      // 🎨 styleMode: 'isolated' (default) | 'shared' | 'auto'
+      styleMode: this.normalizeStyleMode(manifest.styleMode),
       wu: {
         exports: manifest.wu?.exports || {},
         imports: manifest.wu?.imports || [],
@@ -342,6 +351,26 @@ export class WuManifest {
     return normalized;
   }
 
+  /**
+   * 🎨 Normalizar styleMode
+   * @param {string} styleMode - Modo de estilos
+   * @returns {'isolated' | 'fully-isolated' | 'shared' | 'auto'} styleMode normalizado
+   *
+   * Modos disponibles:
+   * - 'isolated': MFE solo tiene sus propios estilos (CSS variables SÍ se heredan)
+   * - 'fully-isolated': Aislamiento TOTAL - resetea CSS variables del padre (ÚNICO en wu-framework!)
+   * - 'shared': Comparte todos los estilos del padre
+   * - 'auto': Comparte solo librerías específicas (element-plus, etc.)
+   */
+  normalizeStyleMode(styleMode) {
+    const validModes = ['isolated', 'fully-isolated', 'shared', 'auto'];
+    if (styleMode && validModes.includes(styleMode)) {
+      return styleMode;
+    }
+    // Default: isolated (máximo aislamiento sin romper CSS variables)
+    return 'isolated';
+  }
+
   /**
    * Normalizar entry path
    * @param {string} entry - Entry path

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

@@ -3,14 +3,26 @@
  *
  * 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.)
  */
 
 export class WuStyleBridge {
   constructor() {
     this.sharedStyles = new Map();
     this.styleObserver = null;
+    this.appStyleModes = new Map(); // Per-app style isolation mode
     this.config = {
-      // Librerías que se deben compartir automáticamente
+      // 🛡️ 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')
       autoShareLibraries: [
         'element-plus',
         'vue-flow',
@@ -20,20 +32,51 @@ export class WuStyleBridge {
         'normalize.css',
         'reset.css'
       ],
-      // Patrones de URLs a compartir
+      // Patrones de URLs a compartir (solo en modo 'auto' o 'shared')
       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');
+    console.log('[WuStyleBridge] 🎨 Style sharing system initialized (default: isolated)');
+  }
+
+  /**
+   * 🛡️ SET APP STYLE MODE: Configura el modo de estilos para una app específica
+   * @param {string} appName - Nombre de la app
+   * @param {'isolated' | 'shared' | 'auto'} mode - Modo de estilos
+   * @param {string} appUrl - URL base del MFE (opcional)
+   */
+  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})` : ''}`);
+  }
+
+  /**
+   * 🔗 GET APP URL: Obtiene la URL de una app
+   * @param {string} appName - Nombre de la app
+   * @returns {string|null}
+   */
+  getAppUrl(appName) {
+    return this.appUrls?.get(appName) || null;
+  }
+
+  /**
+   * 🔍 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;
   }
 
   /**
@@ -137,26 +180,61 @@ export class WuStyleBridge {
   }
 
   /**
-   * 🌉 INYECTAR ESTILOS EN SHADOW DOM: Clona estilos al Shadow DOM
+   * 🌉 INYECTAR ESTILOS EN SHADOW DOM: Clona estilos al Shadow DOM según el modo
    * @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)
    * @returns {Promise<number>}
    */
-  async injectStylesIntoShadow(shadowRoot, appName) {
+  async injectStylesIntoShadow(shadowRoot, appName, appUrl = null) {
     if (!shadowRoot) {
       console.warn('[WuStyleBridge] ⚠️ No shadow root provided');
       return 0;
     }
 
-    console.log(`[WuStyleBridge] 🌉 Injecting shared styles into ${appName}...`);
+    // 🛡️ 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
+    if (styleMode === 'fully-isolated') {
+      this.injectCSSVariablesReset(shadowRoot, appName);
+    }
 
     // Detectar estilos del documento
     const styles = this.detectDocumentStyles();
     let injectedCount = 0;
 
-    // Inyectar cada estilo
+    // Inyectar cada estilo según el modo
     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);
@@ -182,6 +260,242 @@ export class WuStyleBridge {
     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