wu-framework 1.1.0 → 1.1.2

package/README.md

@@ -46,26 +46,36 @@ Wu Framework incluye **adapters nativos** para los frameworks más populares:
 
 ## 🔥 Quick Start
 
-### 1. Shell (Host Application)
-
-```js
-import { wu } from 'wu-framework';
-
-// Inicializar y montar microfrontends
-await wu.init({
-  apps: [
-    { name: 'header', url: 'http://localhost:3001' },
-    { name: 'sidebar', url: 'http://localhost:3002' },
-    { name: 'content', url: 'http://localhost:3003' }
-  ]
-});
-
-await wu.mount('header', '#header-container');
-await wu.mount('sidebar', '#sidebar-container');
-await wu.mount('content', '#content-container');
+### 1. Micro App: Crear `wu.json`
+
+Cada microfrontend necesita un archivo `wu.json` en su raíz:
+
+```json
+{
+  "name": "header",
+  "entry": "index.js",
+  "wu": {
+    "exports": {
+      "NavBar": "components/NavBar.js",
+      "UserMenu": "components/UserMenu.js"
+    },
+    "imports": [],
+    "routes": ["/", "/home"],
+    "permissions": ["events", "store"]
+  }
+}
 ```
 
-### 2. Micro App (1 línea de código)
+| Campo | Descripción |
+|-------|-------------|
+| `name` | Nombre único del microfrontend |
+| `entry` | Archivo JS principal (default: `index.js`) |
+| `wu.exports` | Componentes que expone a otros microfrontends |
+| `wu.imports` | Componentes que importa de otros microfrontends |
+| `wu.routes` | Rutas que maneja este microfrontend |
+| `wu.permissions` | Permisos requeridos (`events`, `store`, `dom`) |
+
+### 2. Micro App: Registrar con Adapter (1 línea)
 
 **React:**
 ```tsx
@@ -93,6 +103,70 @@ wuAngular.register('content', AppModule);
 
 **¡Eso es todo!** El adapter se encarga de todo: detección de contexto, modo standalone, cleanup automático.
 
+### 3. Shell (Host Application)
+
+**Desarrollo:**
+```js
+import { wu } from 'wu-framework';
+
+await wu.init({
+  apps: [
+    { name: 'header', url: 'http://localhost:3001' },
+    { name: 'sidebar', url: 'http://localhost:3002' },
+    { name: 'content', url: 'http://localhost:3003' }
+  ]
+});
+
+await wu.mount('header', '#header-container');
+await wu.mount('sidebar', '#sidebar-container');
+await wu.mount('content', '#content-container');
+```
+
+**Producción:**
+```js
+import { wu } from 'wu-framework';
+
+await wu.init({
+  apps: [
+    { name: 'header', url: 'https://cdn.mycompany.com/mfe/header' },
+    { name: 'sidebar', url: 'https://cdn.mycompany.com/mfe/sidebar' },
+    { name: 'content', url: 'https://cdn.mycompany.com/mfe/content' }
+  ]
+});
+
+await wu.mount('header', '#header-container');
+await wu.mount('sidebar', '#sidebar-container');
+await wu.mount('content', '#content-container');
+```
+
+**Con configuración dinámica:**
+```js
+import { wu } from 'wu-framework';
+
+const isDev = process.env.NODE_ENV !== 'production';
+
+await wu.init({
+  apps: [
+    { name: 'header', url: isDev ? 'http://localhost:3001' : 'https://cdn.mycompany.com/mfe/header' },
+    { name: 'sidebar', url: isDev ? 'http://localhost:3002' : 'https://cdn.mycompany.com/mfe/sidebar' },
+    { name: 'content', url: isDev ? 'http://localhost:3003' : 'https://cdn.mycompany.com/mfe/content' }
+  ]
+});
+```
+
+### Estructura de Archivos (Microfrontend)
+
+```
+my-header-mfe/
+├── wu.json          # ← Manifest requerido
+├── index.js         # ← Entry point (registra con adapter)
+├── App.jsx          # ← Componente principal
+├── components/
+│   ├── NavBar.js
+│   └── UserMenu.js
+└── package.json
+```
+
 ---
 
 ## ⚛️ React Adapter
@@ -155,16 +229,20 @@ import { createWuSlot } from 'wu-framework/adapters/react';
 
 const WuSlot = createWuSlot(React);
 
+// URLs pueden ser localhost (dev) o CDN (prod)
+const HEADER_URL = process.env.REACT_APP_HEADER_URL || 'http://localhost:3001';
+const CONTENT_URL = process.env.REACT_APP_CONTENT_URL || 'http://localhost:3002';
+
 function Shell() {
   return (
     <div>
       <WuSlot
         name="header"
-        url="http://localhost:3001"
+        url={HEADER_URL}
         onLoad={() => console.log('Header loaded!')}
         onError={(err) => console.error(err)}
       />
-      <WuSlot name="content" url="http://localhost:3002" />
+      <WuSlot name="content" url={CONTENT_URL} />
     </div>
   );
 }
@@ -229,17 +307,21 @@ onUnmounted(() => cleanup());
 ```vue
 <script setup>
 import { WuSlot } from 'wu-framework/adapters/vue';
+
+// URLs: localhost en dev, CDN en prod
+const headerUrl = import.meta.env.VITE_HEADER_URL || 'http://localhost:3001';
+const sidebarUrl = import.meta.env.VITE_SIDEBAR_URL || 'http://localhost:3002';
 </script>
 
 <template>
   <div>
     <WuSlot
       name="header"
-      url="http://localhost:3001"
+      :url="headerUrl"
       @load="onLoad"
       @error="onError"
     />
-    <WuSlot name="sidebar" url="http://localhost:3002" />
+    <WuSlot name="sidebar" :url="sidebarUrl" />
   </div>
 </template>
 ```
@@ -770,14 +852,21 @@ const timedHook = createTimedHook(async (ctx) => {
 ```js
 await wu.init({
   apps: [
-    { name: 'header', url: '...', strategy: 'lazy' },     // Default
-    { name: 'sidebar', url: '...', strategy: 'eager' },   // Precarga
-    { name: 'footer', url: '...', strategy: 'preload' },  // <link prefetch>
-    { name: 'analytics', url: '...', strategy: 'idle' }   // requestIdleCallback
+    { name: 'header', url: '/mfe/header', strategy: 'lazy' },      // Default - carga cuando se monta
+    { name: 'sidebar', url: '/mfe/sidebar', strategy: 'eager' },   // Precarga inmediata
+    { name: 'footer', url: '/mfe/footer', strategy: 'preload' },   // <link prefetch>
+    { name: 'analytics', url: '/mfe/analytics', strategy: 'idle' } // requestIdleCallback
   ]
 });
 ```
 
+| Estrategia | Descripción | Uso recomendado |
+|------------|-------------|-----------------|
+| `lazy` | Carga cuando se monta (default) | Contenido below-the-fold |
+| `eager` | Precarga inmediata | Componentes críticos |
+| `preload` | Usa `<link rel="prefetch">` | Navegación anticipada |
+| `idle` | Usa `requestIdleCallback` | Analytics, features secundarias |
+
 ---
 
 ## ⚡ Performance Monitoring
@@ -831,8 +920,9 @@ configureErrorBoundary({
 ```js
 import { wu } from 'wu-framework';
 
+// URL puede ser localhost (dev) o CDN (prod)
 const header = wu.app('header', {
-  url: 'http://localhost:3001',
+  url: 'http://localhost:3001',  // o 'https://cdn.mycompany.com/mfe/header'
   container: '#header-container'
 });
 
@@ -849,6 +939,99 @@ await header.destroy();
 
 ---
 
+## 🚀 Deployment
+
+### Estructura de Producción
+
+Cada microfrontend se despliega de forma independiente:
+
+```
+https://cdn.mycompany.com/
+├── mfe/
+│   ├── header/
+│   │   ├── wu.json        # Manifest
+│   │   ├── index.js       # Entry point
+│   │   └── assets/
+│   ├── sidebar/
+│   │   ├── wu.json
+│   │   ├── index.js
+│   │   └── assets/
+│   └── content/
+│       ├── wu.json
+│       ├── index.js
+│       └── assets/
+```
+
+### Configuración por Entorno
+
+```js
+// config.js
+const config = {
+  development: {
+    header: 'http://localhost:3001',
+    sidebar: 'http://localhost:3002',
+    content: 'http://localhost:3003'
+  },
+  staging: {
+    header: 'https://staging-cdn.mycompany.com/mfe/header',
+    sidebar: 'https://staging-cdn.mycompany.com/mfe/sidebar',
+    content: 'https://staging-cdn.mycompany.com/mfe/content'
+  },
+  production: {
+    header: 'https://cdn.mycompany.com/mfe/header',
+    sidebar: 'https://cdn.mycompany.com/mfe/sidebar',
+    content: 'https://cdn.mycompany.com/mfe/content'
+  }
+};
+
+const env = process.env.NODE_ENV || 'development';
+const urls = config[env];
+
+await wu.init({
+  apps: [
+    { name: 'header', url: urls.header },
+    { name: 'sidebar', url: urls.sidebar },
+    { name: 'content', url: urls.content }
+  ]
+});
+```
+
+### CORS Configuration
+
+Los microfrontends deben permitir CORS desde el shell:
+
+```nginx
+# nginx.conf para CDN
+location /mfe/ {
+    add_header Access-Control-Allow-Origin *;
+    add_header Access-Control-Allow-Methods "GET, OPTIONS";
+    add_header Access-Control-Allow-Headers "Content-Type";
+}
+```
+
+### Versionado
+
+```json
+// wu.json con versión
+{
+  "name": "header",
+  "version": "1.2.0",
+  "entry": "index.js"
+}
+```
+
+```js
+// Shell con versiones específicas
+await wu.init({
+  apps: [
+    { name: 'header', url: 'https://cdn.mycompany.com/mfe/header/v1.2.0' },
+    { name: 'sidebar', url: 'https://cdn.mycompany.com/mfe/sidebar/v2.0.0' }
+  ]
+});
+```
+
+---
+
 ## 🏗️ Arquitectura
 
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wu-framework",
-  "version": "1.1.0",
+  "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);