wu-framework 1.0.0

package/src/core/wu-strategies.js

@@ -0,0 +1,241 @@
+/**
+ * 🎯 WU-STRATEGIES: LOADING STRATEGIES
+ *
+ * Estrategias de carga para optimizar performance:
+ * - Lazy: Carga solo cuando se monta
+ * - Eager: Precarga en init
+ * - Preload: Usa <link rel="prefetch">
+ * - Idle: Carga cuando el navegador está idle
+ */
+
+export class WuLoadingStrategy {
+  constructor(core) {
+    this.core = core;
+    this.strategies = new Map();
+    this.loadingQueue = [];
+    this.isIdle = false;
+
+    this.registerDefaultStrategies();
+    this.setupIdleCallback();
+
+    console.log('[WuStrategies] 🎯 Loading strategies initialized');
+  }
+
+  /**
+   * 📋 REGISTER DEFAULT STRATEGIES
+   */
+  registerDefaultStrategies() {
+    // Lazy: Solo carga cuando se necesita (no precarga)
+    this.register('lazy', {
+      shouldPreload: false,
+      load: async (appName, config) => {
+        console.log(`[Strategy:Lazy] Loading ${appName} on demand (no preload)`);
+        // No hace nada, la app se carga cuando se monta
+        return;
+      }
+    });
+
+    // Eager: Carga inmediatamente en init
+    this.register('eager', {
+      shouldPreload: true,
+      priority: 'high',
+      load: async (appName, config) => {
+        console.log(`[Strategy:Eager] Preloading ${appName} immediately`);
+
+        // Cargar el módulo de la app
+        const app = this.core.apps.get(appName);
+        if (app) {
+          const moduleUrl = await this.core.resolveModulePath(app);
+          await import(/* @vite-ignore */ moduleUrl);
+          console.log(`[Strategy:Eager] ✅ ${appName} preloaded`);
+        }
+      }
+    });
+
+    // Preload: Usa resource hints del navegador
+    this.register('preload', {
+      shouldPreload: true,
+      priority: 'medium',
+      load: async (appName, config) => {
+        console.log(`[Strategy:Preload] Using resource hints for ${appName}`);
+
+        // Crear <link rel="prefetch">
+        const app = this.core.apps.get(appName);
+        if (app) {
+          const moduleUrl = await this.core.resolveModulePath(app);
+
+          const link = document.createElement('link');
+          link.rel = 'prefetch';
+          link.href = moduleUrl;
+          link.as = 'script';
+          document.head.appendChild(link);
+
+          console.log(`[Strategy:Preload] ✅ Resource hint added for ${appName}`);
+        }
+      }
+    });
+
+    // Idle: Carga cuando el navegador está idle
+    this.register('idle', {
+      shouldPreload: false,
+      load: async (appName, config) => {
+        console.log(`[Strategy:Idle] Queueing ${appName} for idle loading`);
+
+        return new Promise((resolve) => {
+          this.loadingQueue.push({
+            appName,
+            config,
+            resolve
+          });
+
+          // Si ya estamos idle, procesar inmediatamente
+          if (this.isIdle) {
+            this.processIdleQueue();
+          }
+        });
+      }
+    });
+  }
+
+  /**
+   * 📦 REGISTER: Registrar estrategia personalizada
+   * @param {string} name - Nombre de la estrategia
+   * @param {Object} strategy - Configuración de la estrategia
+   */
+  register(name, strategy) {
+    if (!strategy.load || typeof strategy.load !== 'function') {
+      throw new Error('[WuStrategies] Strategy must have a load function');
+    }
+
+    this.strategies.set(name, {
+      name,
+      shouldPreload: strategy.shouldPreload || false,
+      priority: strategy.priority || 'low',
+      load: strategy.load
+    });
+
+    console.log(`[WuStrategies] Strategy "${name}" registered`);
+  }
+
+  /**
+   * 🚀 LOAD: Cargar app con estrategia
+   * @param {string} appName - Nombre de la app
+   * @param {Object} config - Configuración con strategy
+   * @returns {Promise}
+   */
+  async load(appName, config) {
+    const strategyName = config.strategy || 'lazy';
+    const strategy = this.strategies.get(strategyName);
+
+    if (!strategy) {
+      console.warn(`[WuStrategies] Strategy "${strategyName}" not found, using lazy`);
+      return await this.strategies.get('lazy').load(appName, config);
+    }
+
+    return await strategy.load(appName, config);
+  }
+
+  /**
+   * 🎯 PRELOAD: Precargar apps según estrategia
+   * @param {Array} apps - Apps a evaluar para precarga
+   */
+  async preload(apps) {
+    const toPreload = apps.filter(app => {
+      const strategy = this.strategies.get(app.strategy || 'lazy');
+      return strategy.shouldPreload;
+    });
+
+    // Ordenar por prioridad
+    toPreload.sort((a, b) => {
+      const priorityOrder = { high: 0, medium: 1, low: 2 };
+      const aPriority = this.strategies.get(a.strategy)?.priority || 'low';
+      const bPriority = this.strategies.get(b.strategy)?.priority || 'low';
+      return priorityOrder[aPriority] - priorityOrder[bPriority];
+    });
+
+    console.log(`[WuStrategies] Preloading ${toPreload.length} apps`);
+
+    // Precargar en orden
+    for (const app of toPreload) {
+      try {
+        await this.load(app.name, app);
+      } catch (error) {
+        console.error(`[WuStrategies] Failed to preload ${app.name}:`, error);
+      }
+    }
+  }
+
+  /**
+   * ⏰ SETUP IDLE CALLBACK: Configurar idle loading
+   */
+  setupIdleCallback() {
+    if ('requestIdleCallback' in window) {
+      const idleCallback = (deadline) => {
+        this.isIdle = true;
+        this.processIdleQueue(deadline);
+
+        // Re-schedule
+        requestIdleCallback(idleCallback);
+      };
+
+      requestIdleCallback(idleCallback);
+    } else {
+      // Fallback: usar setTimeout
+      setTimeout(() => {
+        this.isIdle = true;
+        this.processIdleQueue();
+      }, 2000);
+    }
+  }
+
+  /**
+   * 📋 PROCESS IDLE QUEUE: Procesar cola de carga idle
+   * @param {Object} deadline - IdleDeadline object
+   */
+  async processIdleQueue(deadline) {
+    while (this.loadingQueue.length > 0) {
+      // Si tenemos deadline y se acabó el tiempo, salir
+      if (deadline && deadline.timeRemaining() <= 0) {
+        break;
+      }
+
+      const item = this.loadingQueue.shift();
+
+      try {
+        const app = this.core.apps.get(item.appName);
+        if (app) {
+          const moduleUrl = await this.core.resolveModulePath(app);
+          await import(/* @vite-ignore */ moduleUrl);
+          console.log(`[Strategy:Idle] ✅ ${item.appName} loaded during idle time`);
+          item.resolve(true);
+        } else {
+          item.resolve(null);
+        }
+      } catch (error) {
+        console.error(`[Strategy:Idle] Failed to load ${item.appName}:`, error);
+        item.resolve(null);
+      }
+    }
+  }
+
+  /**
+   * 📊 GET STATS: Estadísticas de estrategias
+   * @returns {Object}
+   */
+  getStats() {
+    return {
+      totalStrategies: this.strategies.size,
+      strategies: Array.from(this.strategies.keys()),
+      idleQueueSize: this.loadingQueue.length,
+      isIdle: this.isIdle
+    };
+  }
+
+  /**
+   * 🧹 CLEANUP: Limpiar estrategias
+   */
+  cleanup() {
+    this.loadingQueue = [];
+    console.log('[WuStrategies] 🧹 Strategies cleaned up');
+  }
+}

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

@@ -0,0 +1,357 @@
+/**
+ * 🎨 WU-STYLE-BRIDGE: SHADOW DOM STYLE SHARING SYSTEM
+ *
+ * Comparte automáticamente estilos de node_modules entre padre e hijos Shadow DOM
+ * Soluciona el problema de aislamiento CSS en microfrontends
+ */
+
+export class WuStyleBridge {
+  constructor() {
+    this.sharedStyles = new Map();
+    this.styleObserver = null;
+    this.config = {
+      // Librerías que se deben compartir automáticamente
+      autoShareLibraries: [
+        'element-plus',
+        'vue-flow',
+        '@vue-flow',
+        'vueuse',
+        '@vueuse',
+        'normalize.css',
+        'reset.css'
+      ],
+      // 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');
+  }
+
+  /**
+   * 🔍 DETECTAR ESTILOS: Escanea todos los estilos del documento
+   * @returns {Array} Lista de estilos detectados
+   */
+  detectDocumentStyles() {
+    const styles = [];
+
+    // 1. Detectar TODOS los <link> tags de CSS
+    const linkTags = document.querySelectorAll('link[rel="stylesheet"]');
+    linkTags.forEach((link) => {
+      styles.push({
+        type: 'link',
+        href: link.href,
+        element: link,
+        library: this.extractLibraryName(link.href)
+      });
+    });
+
+    // 2. Detectar TODOS los <style> tags (incluyendo Vue scoped styles)
+    const styleTags = document.querySelectorAll('style');
+    styleTags.forEach((style, index) => {
+      // Excluir solo estilos ya compartidos por wu-framework
+      if (style.getAttribute('data-wu-shared') === 'true') {
+        return;
+      }
+
+      const viteId = style.getAttribute('data-vite-dev-id');
+      const content = style.textContent;
+
+      // Incluir todos los estilos con contenido
+      if (content && content.trim().length > 0) {
+        styles.push({
+          type: 'inline',
+          content,
+          element: style,
+          viteId,
+          library: this.extractLibraryName(viteId || ''),
+          index
+        });
+      }
+    });
+
+    // 3. Detectar Constructable Stylesheets (si están disponibles)
+    if (document.adoptedStyleSheets && document.adoptedStyleSheets.length > 0) {
+      document.adoptedStyleSheets.forEach((sheet, index) => {
+        styles.push({
+          type: 'adoptedStyleSheet',
+          sheet,
+          index
+        });
+      });
+    }
+
+    console.log(`[WuStyleBridge] 🔍 Detected ${styles.length} shareable styles`);
+    return styles;
+  }
+
+  /**
+   * 🎯 VERIFICAR SI SE DEBE COMPARTIR: Filtra estilos según configuración
+   * @param {string} urlOrId - URL o ID del estilo
+   * @returns {boolean}
+   */
+  shouldShareStyle(urlOrId) {
+    if (!urlOrId) return false;
+
+    // Modo 'all' - compartir todo
+    if (this.config.mode === 'all') return true;
+
+    // Verificar patrones configurados
+    for (const pattern of this.config.sharePatterns) {
+      if (pattern.test(urlOrId)) return true;
+    }
+
+    // Verificar librerías específicas
+    for (const lib of this.config.autoShareLibraries) {
+      if (urlOrId.includes(lib)) return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * 📦 EXTRAER NOMBRE DE LIBRERÍA: Obtiene el nombre de la librería desde la URL
+   * @param {string} url - URL del estilo
+   * @returns {string|null}
+   */
+  extractLibraryName(url) {
+    if (!url) return null;
+
+    // Extraer de node_modules
+    const nodeModulesMatch = url.match(/\/node_modules\/(@?[^/]+\/[^/]+|@?[^/]+)/);
+    if (nodeModulesMatch) return nodeModulesMatch[1];
+
+    // Extraer de vite dev id
+    const viteMatch = url.match(/\/node_modules\/(.+?)\/.*?\.css/);
+    if (viteMatch) return viteMatch[1];
+
+    return null;
+  }
+
+  /**
+   * 🌉 INYECTAR ESTILOS EN SHADOW DOM: Clona estilos al Shadow DOM
+   * @param {ShadowRoot} shadowRoot - Shadow DOM donde inyectar
+   * @param {string} appName - Nombre de la app
+   * @returns {Promise<number>}
+   */
+  async injectStylesIntoShadow(shadowRoot, appName) {
+    if (!shadowRoot) {
+      console.warn('[WuStyleBridge] ⚠️ No shadow root provided');
+      return 0;
+    }
+
+    console.log(`[WuStyleBridge] 🌉 Injecting shared styles into ${appName}...`);
+
+    // Detectar estilos del documento
+    const styles = this.detectDocumentStyles();
+    let injectedCount = 0;
+
+    // Inyectar cada estilo
+    for (const style of styles) {
+      try {
+        switch (style.type) {
+          case 'link':
+            await this.injectLinkStyle(shadowRoot, style);
+            injectedCount++;
+            break;
+
+          case 'inline':
+            this.injectInlineStyle(shadowRoot, style);
+            injectedCount++;
+            break;
+
+          case 'adoptedStyleSheet':
+            this.injectAdoptedStyleSheet(shadowRoot, style);
+            injectedCount++;
+            break;
+        }
+      } catch (error) {
+        console.warn(`[WuStyleBridge] ⚠️ Failed to inject style:`, error);
+      }
+    }
+
+    console.log(`[WuStyleBridge] ✅ Injected ${injectedCount} styles into ${appName}`);
+    return injectedCount;
+  }
+
+  /**
+   * 🔗 INYECTAR LINK STYLE: Clona <link> tag al Shadow DOM
+   * @param {ShadowRoot} shadowRoot
+   * @param {Object} style
+   */
+  async injectLinkStyle(shadowRoot, style) {
+    // Verificar si ya existe
+    const existing = shadowRoot.querySelector(`link[href="${style.href}"]`);
+    if (existing) {
+      console.log(`[WuStyleBridge] ⏭️ Style already exists: ${style.library || style.href}`);
+      return;
+    }
+
+    // Clonar link tag
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = style.href;
+    link.setAttribute('data-wu-shared', 'true');
+    link.setAttribute('data-wu-library', style.library || 'unknown');
+
+    // Insertar al principio del shadow root (antes de otros estilos)
+    shadowRoot.insertBefore(link, shadowRoot.firstChild);
+
+    console.log(`[WuStyleBridge] 🔗 Injected link: ${style.library || style.href}`);
+  }
+
+  /**
+   * 📝 INYECTAR INLINE STYLE: Clona <style> tag al Shadow DOM
+   * @param {ShadowRoot} shadowRoot
+   * @param {Object} style
+   */
+  injectInlineStyle(shadowRoot, style) {
+    // Verificar si ya existe
+    const viteId = style.viteId;
+    if (viteId) {
+      const existing = shadowRoot.querySelector(`style[data-wu-vite-id="${viteId}"]`);
+      if (existing) {
+        console.log(`[WuStyleBridge] ⏭️ Inline style already exists: ${viteId}`);
+        return;
+      }
+    }
+
+    // Crear nuevo style tag
+    const styleTag = document.createElement('style');
+    styleTag.textContent = style.content;
+    styleTag.setAttribute('data-wu-shared', 'true');
+    styleTag.setAttribute('data-wu-library', style.library || 'unknown');
+    if (viteId) {
+      styleTag.setAttribute('data-wu-vite-id', viteId);
+    }
+
+    // Insertar al principio del shadow root
+    shadowRoot.insertBefore(styleTag, shadowRoot.firstChild);
+
+    console.log(`[WuStyleBridge] 📝 Injected inline style: ${style.library || viteId}`);
+  }
+
+  /**
+   * 📋 INYECTAR ADOPTED STYLESHEET: Comparte stylesheet constructable
+   * @param {ShadowRoot} shadowRoot
+   * @param {Object} style
+   */
+  injectAdoptedStyleSheet(shadowRoot, style) {
+    try {
+      // Agregar stylesheet al array de adopted stylesheets
+      if (!shadowRoot.adoptedStyleSheets) {
+        shadowRoot.adoptedStyleSheets = [];
+      }
+
+      // Verificar si ya existe
+      if (shadowRoot.adoptedStyleSheets.includes(style.sheet)) {
+        console.log(`[WuStyleBridge] ⏭️ Adopted stylesheet already exists`);
+        return;
+      }
+
+      shadowRoot.adoptedStyleSheets = [
+        ...shadowRoot.adoptedStyleSheets,
+        style.sheet
+      ];
+
+      console.log(`[WuStyleBridge] 📋 Injected adopted stylesheet`);
+    } catch (error) {
+      console.warn(`[WuStyleBridge] ⚠️ Failed to inject adopted stylesheet:`, error);
+    }
+  }
+
+  /**
+   * 🔄 OBSERVAR CAMBIOS: Monitorea nuevos estilos en el documento
+   * @param {Function} callback - Callback cuando se detectan cambios
+   */
+  observeStyleChanges(callback) {
+    // Limpiar observer anterior si existe
+    if (this.styleObserver) {
+      this.styleObserver.disconnect();
+    }
+
+    // Crear MutationObserver para detectar nuevos estilos
+    this.styleObserver = new MutationObserver((mutations) => {
+      let hasStyleChanges = false;
+
+      for (const mutation of mutations) {
+        if (mutation.type === 'childList') {
+          // Verificar si se agregaron <link> o <style> tags
+          const addedNodes = Array.from(mutation.addedNodes);
+          const hasNewStyles = addedNodes.some(node =>
+            node.tagName === 'LINK' || node.tagName === 'STYLE'
+          );
+
+          if (hasNewStyles) {
+            hasStyleChanges = true;
+            break;
+          }
+        }
+      }
+
+      if (hasStyleChanges && callback) {
+        console.log('[WuStyleBridge] 🔄 Style changes detected');
+        callback();
+      }
+    });
+
+    // Observar <head> para cambios en estilos
+    this.styleObserver.observe(document.head, {
+      childList: true,
+      subtree: true
+    });
+
+    console.log('[WuStyleBridge] 👀 Observing style changes');
+  }
+
+  /**
+   * ⚙️ CONFIGURAR: Actualiza la configuración
+   * @param {Object} config - Nueva configuración
+   */
+  configure(config) {
+    this.config = {
+      ...this.config,
+      ...config
+    };
+
+    console.log('[WuStyleBridge] ⚙️ Configuration updated:', this.config);
+  }
+
+  /**
+   * 🧹 LIMPIAR: Detiene la observación
+   */
+  cleanup() {
+    if (this.styleObserver) {
+      this.styleObserver.disconnect();
+      this.styleObserver = null;
+    }
+
+    this.sharedStyles.clear();
+    console.log('[WuStyleBridge] 🧹 StyleBridge cleaned up');
+  }
+
+  /**
+   * 📊 OBTENER ESTADÍSTICAS: Información sobre estilos compartidos
+   * @returns {Object}
+   */
+  getStats() {
+    const styles = this.detectDocumentStyles();
+
+    return {
+      totalStyles: styles.length,
+      linkStyles: styles.filter(s => s.type === 'link').length,
+      inlineStyles: styles.filter(s => s.type === 'inline').length,
+      adoptedStyleSheets: styles.filter(s => s.type === 'adoptedStyleSheet').length,
+      libraries: [...new Set(styles.map(s => s.library).filter(Boolean))],
+      config: this.config
+    };
+  }
+}