wu-framework 1.1.3 → 1.1.5

package/src/core/wu-sandbox.js

@@ -56,9 +56,10 @@ export class WuSandbox {
    * 🔧 SMART SANDBOX: Advanced Shadow DOM creation with error recovery
    * @param {string} appName - Nombre de la aplicación
    * @param {HTMLElement} hostContainer - Contenedor host
+   * @param {Object} options - Opciones adicionales (styleMode, manifest, etc.)
    * @returns {Object} Sandbox con shadow root y container
    */
-  create(appName, hostContainer) {
+  create(appName, hostContainer, options = {}) {
     console.log(`[WuSandbox] 🔨 Creating sandbox for: ${appName}`);
 
     try {
@@ -109,6 +110,9 @@ export class WuSandbox {
       const jsSandbox = this.createAdvancedJSSandbox(appName);
       const jsProxy = jsSandbox.activate(); // Activar sandbox y obtener proxy
 
+      // Verificar styleMode del manifest antes de inyectar estilos
+      const styleMode = options.styleMode || options.manifest?.styleMode;
+
       const sandbox = {
         appName,
         shadowRoot,
@@ -118,28 +122,124 @@ export class WuSandbox {
         jsSandbox, // NUEVO: ProxySandbox o SnapshotSandbox
         jsProxy, // NUEVO: Proxy para ejecutar scripts
         styles: baseStyles,
+        styleMode, // Guardar styleMode para uso futuro
+        manifest: options.manifest, // Guardar manifest completo
         created: Date.now(),
         sandbox_state: 'stable',
         recovery_count: 0
       };
 
-      // 🎨 INJECT SHARED STYLES: Store promise for await in mount
-      sandbox.stylesReady = this.styleBridge.injectStylesIntoShadow(shadowRoot, appName).then(count => {
-        console.log(`[WuSandbox] 🎨 Shared ${count} styles with ${appName}`);
-
-        // 🔄 Observar cambios dinámicos de estilos (HMR de Vite)
-        this.styleBridge.observeStyleChanges(() => {
-          console.log(`[WuSandbox] 🔄 Reinjecting styles for ${appName} due to changes`);
-          this.styleBridge.injectStylesIntoShadow(shadowRoot, appName).catch(err => {
-            console.warn(`[WuSandbox] ⚠️ Failed to reinject styles:`, err);
+      // 🎨 INJECT STYLES: Comportamiento según styleMode
+      // - "shared": Inyecta todos los estilos del documento padre
+      // - "isolated": NO inyecta estilos externos (encapsulamiento nativo Shadow DOM)
+      // - "fully-isolated": Inyecta SOLO estilos propios de la app
+
+      if (styleMode === 'isolated') {
+        // 🔒 MODO ISOLATED: Encapsulamiento nativo del Shadow DOM
+        // No se inyectan estilos externos - la app debe manejar sus propios estilos
+        console.log(`[WuSandbox] 🔒 Style mode "isolated" for ${appName}, using native Shadow DOM encapsulation`);
+        sandbox.stylesReady = Promise.resolve(0);
+        // No configurar observer de estilos - la app es responsable de sus propios estilos
+
+      } else if (styleMode === 'fully-isolated') {
+        console.log(`[WuSandbox] 🛡️ Style mode "fully-isolated" detected for ${appName}, using enhanced style injection`);
+        // Registrar esta app como fully-isolated en el style bridge para filtrar sus estilos
+        const appUrl = options.appUrl || (options.manifest?.name ? `/${options.manifest.name}/` : `/${appName}/`);
+        this.styleBridge.registerFullyIsolatedApp(appName, appUrl);
+        
+        // Guardar appUrl en sandbox para uso en reinjectStyles
+        sandbox.appUrl = appUrl;
+        
+        // Para fully-isolated, inyectar SOLO los estilos propios de la app en su Shadow DOM
+        // Guardamos referencia a this para usar en el observer
+        const self = this;
+        
+        sandbox.stylesReady = new Promise((resolve) => {
+          let resolved = false;
+          
+          const tryInject = async () => {
+            const count = await self.injectOwnStylesToShadow(shadowRoot, appName, appUrl);
+            
+            if (count > 0) {
+              console.log(`[WuSandbox] 🎨 Injected ${count} own styles for ${appName} (fully-isolated)`);
+              if (!resolved) {
+                resolved = true;
+                resolve(count);
+              }
+            }
+            
+            return count;
+          };
+          
+          // Usar MutationObserver PERSISTENTE para detectar cuando se inyectan estilos del app
+          console.log(`[WuSandbox] 👀 Setting up style observer for ${appName} (fully-isolated)`);
+          const observer = new MutationObserver((mutations) => {
+            let newStyleCount = 0;
+            for (const m of mutations) {
+              if (m.type === 'childList') {
+                for (const n of m.addedNodes) {
+                  if (n.nodeName === 'STYLE' || n.nodeName === 'LINK') {
+                    newStyleCount++;
+                    const viteId = n.getAttribute ? n.getAttribute('data-vite-dev-id') : null;
+                    if (viteId && viteId.toLowerCase().includes(appName.toLowerCase())) {
+                      console.log(`[WuSandbox] 🆕 New ${appName} style detected: ${viteId.split('/').pop()}`);
+                    }
+                  }
+                }
+              }
+            }
+            if (newStyleCount > 0) {
+              console.log(`[WuSandbox] 🔄 ${newStyleCount} new styles detected in head, checking for ${appName}...`);
+              tryInject();
+            }
           });
+          
+          // Observar cambios en el head DE FORMA PERSISTENTE
+          observer.observe(document.head, {
+            childList: true,
+            subtree: true
+          });
+          
+          // Guardar referencia al observer para poder desconectarlo cuando se desmonte la app
+          sandbox.styleObserver = observer;
+          
+          // Intento inicial con pequeño delay para que Vite procese los imports
+          setTimeout(async () => {
+            const count = await tryInject();
+            // Si después de 3 segundos no hay estilos, usar fallback
+            if (!resolved) {
+              setTimeout(() => {
+                if (!resolved) {
+                  console.warn(`[WuSandbox] ⚠️ No own styles found for ${appName} after timeout, using FALLBACK`);
+                  const fallbackCount = self.injectAllStylesToShadow(shadowRoot, appName);
+                  console.log(`[WuSandbox] 🎨 FALLBACK: Injected ${fallbackCount} styles for ${appName}`);
+                  resolved = true;
+                  resolve(fallbackCount);
+                }
+              }, 3000);
+            }
+          }, 50);
         });
+      } else {
+        // 🌐 MODO SHARED (default): Inyectar todos los estilos compartidos del documento
+        console.log(`[WuSandbox] 🌐 Style mode "shared" for ${appName}, injecting all shared styles...`);
+        sandbox.stylesReady = this.styleBridge.injectStylesIntoShadow(shadowRoot, appName, styleMode).then(count => {
+          console.log(`[WuSandbox] 🎨 Shared ${count} styles with ${appName}`);
+
+          // 🔄 Observar cambios dinámicos de estilos (HMR de Vite)
+          this.styleBridge.observeStyleChanges(() => {
+            console.log(`[WuSandbox] 🔄 Reinjecting styles for ${appName} due to changes`);
+            this.styleBridge.injectStylesIntoShadow(shadowRoot, appName, styleMode).catch(err => {
+              console.warn(`[WuSandbox] ⚠️ Failed to reinject styles:`, err);
+            });
+          });
 
-        return count;
-      }).catch(error => {
-        console.warn(`[WuSandbox] ⚠️ Failed to inject styles:`, error);
-        return 0;
-      });
+          return count;
+        }).catch(error => {
+          console.warn(`[WuSandbox] ⚠️ Failed to inject styles:`, error);
+          return 0;
+        });
+      }
 
       // 📊 Register in sandbox registry
       this.sandboxes.set(appName, sandbox);
@@ -710,11 +810,152 @@ export class WuSandbox {
       return;
     }
 
-    console.log(`[WuSandbox] 🔄 Reinjecting styles for ${appName}...`);
+    const styleMode = sandbox.styleMode;
+
+    // 🔒 MODO ISOLATED: No reinyectar estilos - la app maneja sus propios estilos
+    if (styleMode === 'isolated') {
+      console.log(`[WuSandbox] 🔒 Skipping reinject for ${appName} (isolated mode - app manages own styles)`);
+      return;
+    }
+
+    // 🛡️ MODO FULLY-ISOLATED: Reinyectar SOLO estilos propios
+    if (styleMode === 'fully-isolated') {
+      console.log(`[WuSandbox] 🔄 Reinjecting OWN styles for ${appName} (fully-isolated)...`);
+      const appUrl = sandbox.appUrl || sandbox.manifest?.name ? `/${sandbox.manifest.name}/` : `/${appName}/`;
+      const count = await this.injectOwnStylesToShadow(sandbox.shadowRoot, appName, appUrl);
+      console.log(`[WuSandbox] ✅ Reinjected ${count} own styles for ${appName}`);
+      return;
+    }
+
+    // 🌐 MODO SHARED: Reinyectar todos los estilos compartidos
+    console.log(`[WuSandbox] 🔄 Reinjecting shared styles for ${appName}...`);
     const count = await this.styleBridge.injectStylesIntoShadow(
       sandbox.shadowRoot,
-      appName
+      appName,
+      styleMode
     );
-    console.log(`[WuSandbox] ✅ Reinjected ${count} styles`);
+    console.log(`[WuSandbox] ✅ Reinjected ${count} shared styles`);
+  }
+
+  /**
+   * 🎨 INYECTAR ESTILOS PROPIOS: Inyecta SOLO los estilos propios de una app en su Shadow DOM
+   * Usado para apps en modo fully-isolated
+   * @param {ShadowRoot} shadowRoot - Shadow DOM donde inyectar
+   * @param {string} appName - Nombre de la app
+   * @param {string} appUrl - URL base de la app
+   * @returns {Promise<number>} Número de estilos inyectados
+   */
+  async injectOwnStylesToShadow(shadowRoot, appName, appUrl) {
+    if (!shadowRoot) return 0;
+
+    let injectedCount = 0;
+    
+    // Buscar TODOS los estilos en el head
+    const allStyles = document.querySelectorAll('style');
+    const normalizedAppName = appName.toLowerCase();
+    
+    // Patrones para detectar estilos de esta app (Windows y Unix paths)
+    // IMPORTANTE: Debe coincidir SOLO con packages/appName/ al inicio del path del paquete
+    // NO debe coincidir con packages/shell/src/components/learning/ (eso es del shell)
+    const appPatterns = [
+      // Patrón específico: packages/learning/src o packages\learning\src
+      // El src/ es clave para asegurar que es el MFE, no un subdirectorio de otro package
+      new RegExp(`packages[/\\\\]${normalizedAppName}[/\\\\]src[/\\\\]`, 'i')
+    ];
+    
+    console.log(`[WuSandbox] 🔍 Searching own styles for ${appName}, found ${allStyles.length} style tags in head`);
+    
+    // Log para debug: mostrar estilos que contienen el nombre de la app
+    let matchingCount = 0;
+    for (const s of allStyles) {
+      const vid = s.getAttribute('data-vite-dev-id') || '';
+      if (vid.toLowerCase().includes(normalizedAppName)) {
+        matchingCount++;
+      }
+    }
+    if (matchingCount > 0) {
+      console.log(`[WuSandbox] 📋 Found ${matchingCount} styles potentially matching ${appName}`);
+    }
+    
+    for (const style of allStyles) {
+      // NO saltar basándose en data-wu-injected del head - eso se pone en los clones del shadow DOM
+      
+      const viteId = style.getAttribute('data-vite-dev-id') || '';
+      const normalizedViteId = viteId.replace(/\\/g, '/').toLowerCase();
+      
+      // Verificar si el estilo pertenece a esta app
+      let belongsToApp = false;
+      
+      // 1. Por data-vite-dev-id (la forma más confiable)
+      if (viteId) {
+        // Revisar si el path contiene packages/appName/
+        for (const pattern of appPatterns) {
+          if (pattern instanceof RegExp) {
+            if (pattern.test(viteId)) {
+              belongsToApp = true;
+              break;
+            }
+          } else {
+            if (normalizedViteId.includes(pattern.toLowerCase())) {
+              belongsToApp = true;
+              break;
+            }
+          }
+        }
+      }
+      
+      if (belongsToApp) {
+        // Verificar si ya existe en el Shadow DOM
+        const existingStyle = shadowRoot.querySelector(`style[data-vite-dev-id="${viteId}"]`);
+          
+        if (!existingStyle) {
+          const clonedStyle = style.cloneNode(true);
+          clonedStyle.setAttribute('data-wu-injected', 'true');
+          shadowRoot.insertBefore(clonedStyle, shadowRoot.firstChild);
+          injectedCount++;
+          const styleName = viteId.substring(viteId.lastIndexOf('/') + 1) || viteId.substring(viteId.lastIndexOf('\\') + 1);
+          console.log(`[WuSandbox] ✅ Injected own style for ${appName}: ${styleName}`);
+        }
+      }
+    }
+    
+    console.log(`[WuSandbox] 🎨 Total own styles injected for ${appName}: ${injectedCount}`);
+    return injectedCount;
+  }
+
+  /**
+   * 🎨 FALLBACK: Inyectar estilos que contengan el nombre de la app
+   * Usado como último recurso cuando no se encuentran los estilos con el patrón exacto
+   * @param {ShadowRoot} shadowRoot - Shadow DOM donde inyectar
+   * @param {string} appName - Nombre de la app (para logging)
+   * @returns {number} Número de estilos inyectados
+   */
+  injectAllStylesToShadow(shadowRoot, appName) {
+    if (!shadowRoot) return 0;
+
+    let injectedCount = 0;
+    const normalizedAppName = appName.toLowerCase();
+    
+    // Inyectar estilos que contengan el nombre de la app en su vite-id
+    const allStyles = document.querySelectorAll('style');
+    for (const style of allStyles) {
+      const viteId = style.getAttribute('data-vite-dev-id') || '';
+      
+      // Solo inyectar si contiene el nombre de la app
+      if (!viteId.toLowerCase().includes(normalizedAppName)) continue;
+      
+      // Verificar si ya existe en el shadow DOM
+      if (shadowRoot.querySelector(`style[data-vite-dev-id="${viteId}"]`)) continue;
+      
+      const clonedStyle = style.cloneNode(true);
+      clonedStyle.setAttribute('data-wu-fallback', 'true');
+      shadowRoot.insertBefore(clonedStyle, shadowRoot.firstChild);
+      injectedCount++;
+      const styleName = viteId.split('/').pop() || viteId.split('\\').pop();
+      console.log(`[WuSandbox] 📦 FALLBACK injected: ${styleName}`);
+    }
+    
+    console.log(`[WuSandbox] 🎨 FALLBACK: Total ${injectedCount} styles injected for ${appName}`);
+    return injectedCount;
   }
 }