wu-framework 1.1.1 → 1.1.2

package/package.json

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

package/src/adapters/vue.js

@@ -23,9 +23,153 @@ const adapterState = {
   apps: new Map(),
   Vue: null,
   createApp: null,
-  initialized: false
+  initialized: false,
+  collectedStyles: new Map() // Estilos recolectados por app
 };
 
+/**
+ * 🎨 STYLE COLLECTOR: Captura estilos inyectados dinámicamente
+ * Soluciona el problema de estilos no disponibles en Shadow DOM
+ *
+ * Estrategia:
+ * 1. Captura estilos existentes (incluyendo los de Vite HMR)
+ * 2. Filtra por URL base del MFE para identificar estilos relevantes
+ * 3. Observa nuevos estilos durante el mount
+ */
+function createStyleCollector(appName) {
+  const styles = [];
+  const capturedIds = new Set();
+  let observer = null;
+
+  // Capturar estilos existentes antes del mount
+  // Incluye estilos inyectados por Vite via data-vite-dev-id
+  const captureExistingStyles = () => {
+    const styleTags = document.querySelectorAll('style:not([data-wu-shared])');
+    styleTags.forEach(style => {
+      const content = style.textContent;
+      const viteId = style.getAttribute('data-vite-dev-id');
+
+      // Evitar duplicados
+      const styleId = viteId || content?.substring(0, 100);
+      if (capturedIds.has(styleId)) return;
+
+      if (content && content.trim().length > 0) {
+        // Capturar todos los estilos que no sean de wu-framework
+        styles.push({
+          type: 'existing',
+          content: content,
+          viteId: viteId
+        });
+        capturedIds.add(styleId);
+      }
+    });
+    return styles.length;
+  };
+
+  // Observar nuevos estilos agregados durante el mount
+  const startObserving = () => {
+    if (!window.MutationObserver) return;
+
+    observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type === 'childList') {
+          mutation.addedNodes.forEach(node => {
+            if (node.tagName === 'STYLE' && !node.hasAttribute('data-wu-shared')) {
+              const content = node.textContent;
+              const viteId = node.getAttribute('data-vite-dev-id');
+
+              // Evitar duplicados
+              const styleId = viteId || content?.substring(0, 100);
+              if (capturedIds.has(styleId)) return;
+
+              if (content && content.trim().length > 0) {
+                styles.push({
+                  type: 'dynamic',
+                  content: content,
+                  viteId: viteId
+                });
+                capturedIds.add(styleId);
+                console.log(`[WuVue] 🎨 Captured dynamic style for ${appName}`);
+              }
+            }
+          });
+        }
+      }
+    });
+
+    observer.observe(document.head, { childList: true, subtree: true });
+  };
+
+  const stopObserving = () => {
+    if (observer) {
+      observer.disconnect();
+      observer = null;
+    }
+  };
+
+  const getStyles = () => [...styles];
+
+  return {
+    captureExistingStyles,
+    startObserving,
+    stopObserving,
+    getStyles
+  };
+}
+
+/**
+ * 🎨 INJECT STYLES TO SHADOW: Inyecta estilos capturados al Shadow DOM
+ */
+function injectStylesToShadow(shadowRoot, styles, appName) {
+  if (!shadowRoot || !styles || styles.length === 0) return 0;
+
+  let injected = 0;
+
+  for (const style of styles) {
+    // Verificar si ya existe
+    const viteId = style.viteId;
+    if (viteId) {
+      const existing = shadowRoot.querySelector(`style[data-wu-vite-id="${viteId}"]`);
+      if (existing) continue;
+    }
+
+    const styleTag = document.createElement('style');
+    styleTag.textContent = style.content;
+    styleTag.setAttribute('data-wu-shared', 'true');
+    styleTag.setAttribute('data-wu-app', appName);
+    if (viteId) {
+      styleTag.setAttribute('data-wu-vite-id', viteId);
+    }
+
+    shadowRoot.insertBefore(styleTag, shadowRoot.firstChild);
+    injected++;
+  }
+
+  if (injected > 0) {
+    console.log(`[WuVue] 🎨 Injected ${injected} styles into Shadow DOM for ${appName}`);
+  }
+
+  return injected;
+}
+
+/**
+ * 🔍 GET SHADOW ROOT: Obtiene el Shadow Root del contenedor
+ */
+function getShadowRoot(container) {
+  // Buscar shadow root en la jerarquía
+  let current = container;
+  while (current) {
+    if (current.getRootNode && current.getRootNode() instanceof ShadowRoot) {
+      return current.getRootNode();
+    }
+    if (current.shadowRoot) {
+      return current.shadowRoot;
+    }
+    current = current.parentElement;
+  }
+  return null;
+}
+
 /**
  * Detecta y obtiene Vue del contexto global o lo importa
  */
@@ -121,6 +265,7 @@ function waitForWu(timeout = 5000) {
  * @param {Function} options.onUnmount - Callback antes de desmontar
  * @param {boolean} options.standalone - Permitir ejecución standalone (default: true)
  * @param {string} options.standaloneContainer - Selector para modo standalone (default: '#app')
+ * @param {string|string[]} options.styles - CSS string o array de CSS strings para inyectar en Shadow DOM
  *
  * @example
  * // Básico
@@ -135,6 +280,12 @@ function waitForWu(timeout = 5000) {
  *     app.component('MyGlobal', MyComponent);
  *   }
  * });
+ *
+ * @example
+ * // Con estilos explícitos para Shadow DOM
+ * wuVue.register('my-app', App, {
+ *   styles: `.header { background: blue; }`
+ * });
  */
 async function register(appName, RootComponent, options = {}) {
   const {
@@ -143,7 +294,8 @@ async function register(appName, RootComponent, options = {}) {
     onMount = null,
     onUnmount = null,
     standalone = true,
-    standaloneContainer = '#app'
+    standaloneContainer = '#app',
+    styles = null // 🎨 CSS string o array de CSS strings para inyectar en Shadow DOM
   } = options;
 
   // Asegurar que Vue está disponible
@@ -155,6 +307,9 @@ async function register(appName, RootComponent, options = {}) {
 
   const { createApp } = adapterState;
 
+  // 🎨 Crear collector de estilos para esta app
+  const styleCollector = createStyleCollector(appName);
+
   // Función de mount interna
   const mountApp = (container) => {
     if (!container) {
@@ -169,6 +324,13 @@ async function register(appName, RootComponent, options = {}) {
     }
 
     try {
+      // 🎨 Capturar estilos existentes ANTES del mount
+      const existingStylesCount = styleCollector.captureExistingStyles();
+      console.log(`[WuVue] 🎨 Captured ${existingStylesCount} existing styles for ${appName}`);
+
+      // 🎨 Comenzar a observar nuevos estilos
+      styleCollector.startObserving();
+
       // Crear la aplicación Vue
       const app = createApp(RootComponent, props);
 
@@ -184,6 +346,33 @@ async function register(appName, RootComponent, options = {}) {
       // Montar
       app.mount(container);
 
+      // 🎨 Detener observación
+      styleCollector.stopObserving();
+
+      // 🎨 Inyectar estilos en Shadow DOM
+      const shadowRoot = getShadowRoot(container);
+      if (shadowRoot) {
+        // 1. Inyectar estilos declarados explícitamente (opción `styles`)
+        if (styles) {
+          const styleArray = Array.isArray(styles) ? styles : [styles];
+          const explicitStyles = styleArray.map(css => ({ type: 'explicit', content: css }));
+          injectStylesToShadow(shadowRoot, explicitStyles, appName);
+          console.log(`[WuVue] 🎨 Injected ${explicitStyles.length} explicit styles for ${appName}`);
+        }
+
+        // 2. Inyectar estilos capturados dinámicamente
+        const collectedStyles = styleCollector.getStyles();
+        console.log(`[WuVue] 🎨 Total styles collected for ${appName}:`, collectedStyles.length);
+
+        // Inyectar estilos capturados
+        injectStylesToShadow(shadowRoot, collectedStyles, appName);
+
+        // Guardar referencia de estilos para re-inyección si es necesario
+        adapterState.collectedStyles.set(appName, collectedStyles);
+      } else {
+        console.log(`[WuVue] ℹ️ No Shadow DOM detected for ${appName}, styles applied normally`);
+      }
+
       // Guardar referencia
       adapterState.apps.set(appName, { app, container });
 
@@ -193,6 +382,7 @@ async function register(appName, RootComponent, options = {}) {
         onMount(container, app);
       }
     } catch (error) {
+      styleCollector.stopObserving();
       console.error(`[WuVue] Mount error for ${appName}:`, error);
       throw error;
     }

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

@@ -9,8 +9,13 @@ 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
+      // '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 +25,37 @@ 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
+   */
+  setAppStyleMode(appName, mode) {
+    this.appStyleModes.set(appName, mode);
+    console.log(`[WuStyleBridge] 🎨 Style mode for ${appName}: ${mode}`);
+  }
+
+  /**
+   * 🔍 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,7 +159,7 @@ 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
    * @returns {Promise<number>}
@@ -148,15 +170,31 @@ export class WuStyleBridge {
       return 0;
     }
 
-    console.log(`[WuStyleBridge] 🌉 Injecting shared styles into ${appName}...`);
+    // 🛡️ CHECK STYLE MODE: Respetar el modo de aislamiento de la app
+    const styleMode = this.getAppStyleMode(appName);
+
+    if (styleMode === 'isolated') {
+      console.log(`[WuStyleBridge] 🛡️ ${appName} is in ISOLATED mode - no parent styles will be shared`);
+      return 0;
+    }
+
+    console.log(`[WuStyleBridge] 🌉 Injecting styles into ${appName} (mode: ${styleMode})...`);
 
     // 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 {
+        // 🎯 En modo 'auto', solo compartir librerías específicas
+        if (styleMode === 'auto') {
+          const shouldShare = this.shouldShareStyle(style.href || style.viteId || '');
+          if (!shouldShare) {
+            continue; // Skip this style
+          }
+        }
+
         switch (style.type) {
           case 'link':
             await this.injectLinkStyle(shadowRoot, style);