wu-framework 1.1.11 → 1.1.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wu-framework",
-  "version": "1.1.11",
+  "version": "1.1.12",
   "description": "Universal Microfrontends Framework - 8 frameworks, zero config, Shadow DOM isolation",
   "main": "dist/wu-framework.cjs.js",
   "module": "src/index.js",

package/src/adapters/react/index.js

@@ -185,6 +185,12 @@ async function register(appName, Component, options = {}) {
     }
 
     try {
+      // Limpiar el DOM del container antes de crear un nuevo root.
+      // En React 18+, root.unmount() es async — si se llama createRoot()
+      // en el mismo container antes de que termine, falla silenciosamente.
+      // Limpiar innerHTML fuerza un DOM limpio para el nuevo root.
+      container.innerHTML = '';
+
       const root = createRoot(container);
 
       // Crear elemento con o sin StrictMode
@@ -217,16 +223,15 @@ async function register(appName, Component, options = {}) {
 
         instance.root.unmount();
         adapterState.roots.delete(appName);
-
-        console.log(`[WuReact] ✅ ${appName} unmounted successfully`);
       } catch (error) {
         console.error(`[WuReact] Unmount error for ${appName}:`, error);
       }
     }
 
-    // Limpiar container si se proporciona
-    if (container) {
-      container.innerHTML = '';
+    // Limpiar container
+    const target = container || instance?.container;
+    if (target) {
+      target.innerHTML = '';
     }
   };
 

package/src/adapters/vue/index.js

@@ -18,6 +18,8 @@
  * <WuSlot name="my-app" url="http://localhost:3001" />
  */
 
+import { logger } from '../../core/wu-logger.js';
+
 // Estado global del adapter
 const adapterState = {
   apps: new Map(),
@@ -164,7 +166,7 @@ async function register(appName, RootComponent, options = {}) {
 
     // Evitar doble mount
     if (adapterState.apps.has(appName)) {
-      console.warn(`[WuVue] ${appName} already mounted, unmounting first`);
+      logger.warn(`[WuVue] ${appName} already mounted, unmounting first`);
       unmountApp();
     }
 
@@ -206,7 +208,7 @@ async function register(appName, RootComponent, options = {}) {
             if (viteId && !shadowRoot.querySelector(`style[data-vite-dev-id="${viteId}"]`)) {
               const clonedStyle = style.cloneNode(true);
               shadowRoot.insertBefore(clonedStyle, shadowRoot.firstChild);
-              console.log(`[WuVue] ✅ Injected style into Shadow DOM: ${viteId}`);
+              logger.debug(`[WuVue] ✅ Injected style into Shadow DOM: ${viteId}`);
             }
           });
 
@@ -218,7 +220,7 @@ async function register(appName, RootComponent, options = {}) {
               if (!shadowRoot.querySelector(`style[data-vite-dev-id="${viteId}"]`)) {
                 const clonedStyle = style.cloneNode(true);
                 shadowRoot.insertBefore(clonedStyle, shadowRoot.firstChild);
-                console.log(`[WuVue] ✅ Injected app style into Shadow DOM: ${viteId}`);
+                logger.debug(`[WuVue] ✅ Injected app style into Shadow DOM: ${viteId}`);
               }
             }
           });
@@ -228,7 +230,7 @@ async function register(appName, RootComponent, options = {}) {
       // Guardar referencia
       adapterState.apps.set(appName, { app, container });
 
-      console.log(`[WuVue] ✅ ${appName} mounted successfully`);
+      logger.debug(`[WuVue] ✅ ${appName} mounted successfully`);
 
       if (onMount) {
         onMount(container, app);
@@ -252,7 +254,7 @@ async function register(appName, RootComponent, options = {}) {
         instance.app.unmount();
         adapterState.apps.delete(appName);
 
-        console.log(`[WuVue] ✅ ${appName} unmounted successfully`);
+        logger.debug(`[WuVue] ✅ ${appName} unmounted successfully`);
       } catch (error) {
         console.error(`[WuVue] Unmount error for ${appName}:`, error);
       }
@@ -273,22 +275,22 @@ async function register(appName, RootComponent, options = {}) {
       unmount: unmountApp
     });
 
-    console.log(`[WuVue] ✅ ${appName} registered with Wu Framework`);
+    logger.debug(`[WuVue] ✅ ${appName} registered with Wu Framework`);
     return true;
 
   } catch (error) {
-    console.warn(`[WuVue] Wu Framework not available for ${appName}`);
+    logger.warn(`[WuVue] Wu Framework not available for ${appName}`);
 
     // Modo standalone si está habilitado
     if (standalone) {
       const containerElement = document.querySelector(standaloneContainer);
 
       if (containerElement) {
-        console.log(`[WuVue] Running ${appName} in standalone mode`);
+        logger.debug(`[WuVue] Running ${appName} in standalone mode`);
         mountApp(containerElement);
         return true;
       } else {
-        console.warn(`[WuVue] Standalone container ${standaloneContainer} not found`);
+        logger.warn(`[WuVue] Standalone container ${standaloneContainer} not found`);
       }
     }
 
@@ -405,7 +407,7 @@ const WuSlot = {
         try {
           await this.appInstance.unmount();
         } catch (err) {
-          console.warn(`[WuSlot] Error unmounting ${this.actualAppName}:`, err);
+          logger.warn(`[WuSlot] Error unmounting ${this.actualAppName}:`, err);
         }
 
         this.appInstance = null;
@@ -443,7 +445,7 @@ const WuSlot = {
  * const { emit, on } = useWuEvents();
  *
  * onMounted(() => {
- *   on('user:login', (data) => console.log(data));
+ *   on('user:login', (data) => logger.debug(data));
  * });
  * </script>
  */
@@ -455,7 +457,7 @@ function useWuEvents() {
     if (wu?.eventBus) {
       wu.eventBus.emit(event, data, options);
     } else {
-      console.warn('[useWuEvents] Wu Framework not available');
+      logger.warn('[useWuEvents] Wu Framework not available');
     }
   };
 
@@ -466,7 +468,7 @@ function useWuEvents() {
       subscriptions.push(unsubscribe);
       return unsubscribe;
     }
-    console.warn('[useWuEvents] Wu Framework not available');
+    logger.warn('[useWuEvents] Wu Framework not available');
     return () => {};
   };
 
@@ -475,7 +477,7 @@ function useWuEvents() {
     if (wu?.eventBus) {
       return wu.eventBus.once(event, callback);
     }
-    console.warn('[useWuEvents] Wu Framework not available');
+    logger.warn('[useWuEvents] Wu Framework not available');
     return () => {};
   };
 
@@ -505,7 +507,7 @@ function useWuEvents() {
  * const { state, setState, getState } = useWuStore('user');
  *
  * // state es reactivo!
- * console.log(state.value);
+ * logger.debug(state.value);
  * </script>
  */
 function useWuStore(namespace = '') {
@@ -582,7 +584,7 @@ const wuVuePlugin = {
     app.config.globalProperties.$wuEvents = useWuEvents();
     app.config.globalProperties.$wuStore = (ns) => useWuStore(ns);
 
-    console.log('[WuVue] Plugin installed');
+    logger.debug('[WuVue] Plugin installed');
   }
 };
 

package/src/core/wu-app.js

@@ -4,6 +4,8 @@
  * Wrapper simple para uso declarativo de microfrontends
  * Mantiene todo el core de wu-framework pero simplifica el uso
  */
+import { logger } from './wu-logger.js';
+
 
 export class WuApp {
   /**
@@ -40,7 +42,7 @@ export class WuApp {
         keepAlive: this.keepAlive,
         status: 'registered'
       })
-      console.log(`📦 App registered: ${this.name} at ${this.url}`)
+      logger.debug(`📦 App registered: ${this.name} at ${this.url}`)
     }
   }
 
@@ -79,7 +81,7 @@ export class WuApp {
    */
   async unmount(options = {}) {
     if (!this._mounted && !this._wu.isHidden(this.name)) {
-      console.warn(`⚠️ App ${this.name} is not mounted`)
+      logger.warn(`⚠️ App ${this.name} is not mounted`)
       return this
     }
 
@@ -95,7 +97,7 @@ export class WuApp {
    */
   async hide() {
     if (!this._mounted) {
-      console.warn(`⚠️ App ${this.name} is not mounted`)
+      logger.warn(`⚠️ App ${this.name} is not mounted`)
       return this
     }
 
@@ -110,7 +112,7 @@ export class WuApp {
    */
   async show() {
     if (!this._wu.isHidden(this.name)) {
-      console.warn(`⚠️ App ${this.name} is not in keep-alive state`)
+      logger.warn(`⚠️ App ${this.name} is not in keep-alive state`)
       return this
     }
 
@@ -165,7 +167,7 @@ export class WuApp {
    * @returns {Promise<void>}
    */
   async reload() {
-    console.log(`🔄 Reloading app: ${this.name}`)
+    logger.debug(`🔄 Reloading app: ${this.name}`)
 
     await this.unmount()
 
@@ -178,7 +180,7 @@ export class WuApp {
     }
 
     await this.mount()
-    console.log(`✅ App reloaded: ${this.name}`)
+    logger.debug(`✅ App reloaded: ${this.name}`)
 
     return this
   }
@@ -229,6 +231,6 @@ export class WuApp {
     await this.unmount({ force: true })
     this._wu.apps.delete(this.name)
     this._mounted = false
-    console.log(`🗑️ App destroyed: ${this.name}`)
+    logger.debug(`🗑️ App destroyed: ${this.name}`)
   }
 }

package/src/core/wu-cache.js

@@ -9,6 +9,8 @@
  * ⚠️ USO INTERNO: No exponer en API pública
  */
 
+import { logger } from './wu-logger.js';
+
 export class WuCache {
   constructor(options = {}) {
     this.config = {
@@ -79,7 +81,7 @@ export class WuCache {
       this.rateLimiting.inCooldown = true;
       this.rateLimiting.cooldownUntil = now + this.rateLimiting.cooldownMs;
       this.stats.rateLimited++;
-      console.warn(`[WuCache] 🚫 Rate limit exceeded. Cooldown for ${this.rateLimiting.cooldownMs}ms`);
+      logger.warn(`[WuCache] 🚫 Rate limit exceeded. Cooldown for ${this.rateLimiting.cooldownMs}ms`);
       return false;
     }
 
@@ -175,7 +177,7 @@ export class WuCache {
       // Verificar si necesitamos hacer espacio
       const hasSpace = this.ensureSpace(entry.size);
       if (hasSpace === false) {
-        console.warn(`[WuCache] ⚠️ Cannot cache item: ${key} (too large)`);
+        logger.warn(`[WuCache] ⚠️ Cannot cache item: ${key} (too large)`);
         return false;
       }
 
@@ -193,7 +195,7 @@ export class WuCache {
 
       return true;
     } catch (error) {
-      console.warn('[WuCache] ⚠️ Failed to set cache:', error);
+      logger.warn('[WuCache] ⚠️ Failed to set cache:', error);
       return false;
     }
   }
@@ -228,7 +230,7 @@ export class WuCache {
       this.clearStorage();
     }
 
-    console.log('[WuCache] 🧹 Cache cleared');
+    logger.debug('[WuCache] 🧹 Cache cleared');
   }
 
   /**
@@ -271,7 +273,7 @@ export class WuCache {
 
     // 🛡️ FIX: Validar que el item no sea más grande que el máximo permitido
     if (neededSize > maxSizeBytes) {
-      console.warn(`[WuCache] ⚠️ Item size (${neededSize}) exceeds max cache size (${maxSizeBytes}). Skipping.`);
+      logger.warn(`[WuCache] ⚠️ Item size (${neededSize}) exceeds max cache size (${maxSizeBytes}). Skipping.`);
       return false;
     }
 
@@ -288,7 +290,7 @@ export class WuCache {
 
       // 🛡️ FIX: Si el cache está vacío pero aún no hay espacio, salir
       if (this.memoryCache.size === 0) {
-        console.warn('[WuCache] ⚠️ Cache empty but still no space. Breaking loop.');
+        logger.warn('[WuCache] ⚠️ Cache empty but still no space. Breaking loop.');
         break;
       }
 
@@ -304,7 +306,7 @@ export class WuCache {
       }
 
       if (oldestKey) {
-        console.log(`[WuCache] 🗑️ Evicting LRU entry: ${oldestKey}`);
+        logger.debug(`[WuCache] 🗑️ Evicting LRU entry: ${oldestKey}`);
         this.delete(oldestKey);
         this.stats.evictions++;
       } else {
@@ -334,7 +336,7 @@ export class WuCache {
         return JSON.parse(stored);
       }
     } catch (error) {
-      console.warn('[WuCache] ⚠️ Failed to get from storage:', error);
+      logger.warn('[WuCache] ⚠️ Failed to get from storage:', error);
     }
     return null;
   }
@@ -350,13 +352,13 @@ export class WuCache {
       storage.setItem(`wu_cache_${key}`, JSON.stringify(entry));
     } catch (error) {
       // Storage lleno, limpiar entradas antiguas
-      console.warn('[WuCache] ⚠️ Storage full, cleaning old entries');
+      logger.warn('[WuCache] ⚠️ Storage full, cleaning old entries');
       this.cleanOldStorageEntries();
 
       try {
         storage.setItem(`wu_cache_${key}`, JSON.stringify(entry));
       } catch {
-        console.warn('[WuCache] ⚠️ Failed to save to storage after cleanup');
+        logger.warn('[WuCache] ⚠️ Failed to save to storage after cleanup');
       }
     }
   }
@@ -370,7 +372,7 @@ export class WuCache {
       const storage = this.getStorage();
       storage.removeItem(`wu_cache_${key}`);
     } catch (error) {
-      console.warn('[WuCache] ⚠️ Failed to delete from storage:', error);
+      logger.warn('[WuCache] ⚠️ Failed to delete from storage:', error);
     }
   }
 
@@ -388,7 +390,7 @@ export class WuCache {
         }
       });
     } catch (error) {
-      console.warn('[WuCache] ⚠️ Failed to clear storage:', error);
+      logger.warn('[WuCache] ⚠️ Failed to clear storage:', error);
     }
   }
 
@@ -420,9 +422,9 @@ export class WuCache {
         storage.removeItem(entries[i].key);
       }
 
-      console.log(`[WuCache] 🧹 Cleaned ${toRemove} old storage entries`);
+      logger.debug(`[WuCache] 🧹 Cleaned ${toRemove} old storage entries`);
     } catch (error) {
-      console.warn('[WuCache] ⚠️ Failed to clean old storage entries:', error);
+      logger.warn('[WuCache] ⚠️ Failed to clean old storage entries:', error);
     }
   }
 

package/src/core/wu-error-boundary.js

@@ -8,6 +8,8 @@
  * - Fallback rendering
  */
 
+import { logger } from './wu-logger.js';
+
 export class WuErrorBoundary {
   constructor(core) {
     this.core = core;
@@ -23,7 +25,7 @@ export class WuErrorBoundary {
 
     this.registerDefaultHandlers();
 
-    console.log('[WuErrorBoundary] 🛡️ Error boundary initialized');
+    logger.debug('[WuErrorBoundary] 🛡️ Error boundary initialized');
   }
 
   /**
@@ -38,12 +40,12 @@ export class WuErrorBoundary {
                (error.message.includes('fetch') || error.message.includes('network'));
       },
       handle: async (error, context) => {
-        console.log('[ErrorHandler:Network] Handling network error');
+        logger.debug('[ErrorHandler:Network] Handling network error');
 
         // Retry con backoff
         if (context.retryCount < this.config.maxRetries) {
           const delay = this.config.retryDelay * Math.pow(2, context.retryCount);
-          console.log(`[ErrorHandler:Network] Retrying in ${delay}ms...`);
+          logger.debug(`[ErrorHandler:Network] Retrying in ${delay}ms...`);
 
         await new Promise(resolve => setTimeout(resolve, delay));
 
@@ -71,11 +73,11 @@ export class WuErrorBoundary {
                 error.message.includes('Failed to fetch'));
       },
       handle: async (error, context) => {
-        console.log('[ErrorHandler:ScriptLoad] Handling script load error');
+        logger.debug('[ErrorHandler:ScriptLoad] Handling script load error');
 
         // Intentar URL alternativa si existe
         if (context.fallbackUrl) {
-          console.log('[ErrorHandler:ScriptLoad] Trying fallback URL');
+          logger.debug('[ErrorHandler:ScriptLoad] Trying fallback URL');
           return {
             recovered: true,
             action: 'use-fallback-url',
@@ -98,17 +100,17 @@ export class WuErrorBoundary {
         return error.message && error.message.includes('mount');
       },
       handle: async (error, context) => {
-        console.log('[ErrorHandler:Mount] Handling mount error');
+        logger.debug('[ErrorHandler:Mount] Handling mount error');
 
         // Limpiar y reintentar
         if (context.retryCount < 2) {
-          console.log('[ErrorHandler:Mount] Cleaning up and retrying...');
+          logger.debug('[ErrorHandler:Mount] Cleaning up and retrying...');
 
           // Cleanup
           try {
             await this.core.unmount(context.appName);
           } catch (cleanupError) {
-            console.warn('[ErrorHandler:Mount] Cleanup failed:', cleanupError);
+            logger.warn('[ErrorHandler:Mount] Cleanup failed:', cleanupError);
           }
 
           await new Promise(resolve => setTimeout(resolve, 500));
@@ -136,7 +138,7 @@ export class WuErrorBoundary {
                error.message.includes('timeout');
       },
       handle: async (error, context) => {
-        console.log('[ErrorHandler:Timeout] Handling timeout error');
+        logger.debug('[ErrorHandler:Timeout] Handling timeout error');
 
         // Aumentar timeout y reintentar
         if (context.retryCount < 2) {
@@ -161,7 +163,7 @@ export class WuErrorBoundary {
       name: 'generic',
       canHandle: () => true, // Maneja todo
       handle: async (error, context) => {
-        console.log('[ErrorHandler:Generic] Handling generic error');
+        logger.debug('[ErrorHandler:Generic] Handling generic error');
 
         return {
           recovered: false,
@@ -182,7 +184,7 @@ export class WuErrorBoundary {
     }
 
     this.handlers.push(handler);
-    console.log(`[WuErrorBoundary] Handler "${handler.name}" registered`);
+    logger.debug(`[WuErrorBoundary] Handler "${handler.name}" registered`);
   }
 
   /**
@@ -206,12 +208,12 @@ export class WuErrorBoundary {
     for (const handler of this.handlers) {
       try {
         if (handler.canHandle(error, context)) {
-          console.log(`[WuErrorBoundary] Using handler: ${handler.name}`);
+          logger.debug(`[WuErrorBoundary] Using handler: ${handler.name}`);
 
           const result = await handler.handle(error, context);
 
           if (result.recovered) {
-            console.log(`[WuErrorBoundary] ✅ Error recovered by ${handler.name}`);
+            logger.debug(`[WuErrorBoundary] ✅ Error recovered by ${handler.name}`);
             return result;
           }
 
@@ -244,7 +246,7 @@ export class WuErrorBoundary {
    */
   renderFallback(context, result) {
     if (!context.container) {
-      console.warn('[WuErrorBoundary] No container to render fallback');
+      logger.warn('[WuErrorBoundary] No container to render fallback');
       return;
     }
 
@@ -375,6 +377,6 @@ export class WuErrorBoundary {
    */
   cleanup() {
     this.errorLog = [];
-    console.log('[WuErrorBoundary] 🧹 Error boundary cleaned up');
+    logger.debug('[WuErrorBoundary] 🧹 Error boundary cleaned up');
   }
 }

package/src/core/wu-event-bus.js

@@ -8,6 +8,8 @@
  * - Event replay
  * - Verificación de apps autorizadas
  */
+import { logger } from './wu-logger.js';
+
 
 export class WuEventBus {
   constructor() {
@@ -138,7 +140,7 @@ export class WuEventBus {
     if (this.config.validateOrigin && this.config.strictMode) {
       if (!this._validateOrigin(eventName, appName, options.token)) {
         this.stats.rejected++;
-        console.warn(`[WuEventBus] 🚫 Event rejected: ${eventName} from ${appName} (unauthorized)`);
+        logger.warn(`[WuEventBus] 🚫 Event rejected: ${eventName} from ${appName} (unauthorized)`);
         return false;
       }
     }
@@ -160,7 +162,7 @@ export class WuEventBus {
 
     // Log si está habilitado
     if (this.config.logEvents) {
-      console.log(`[WuEventBus] 📢 ${eventName}`, data);
+      logger.debug(`[WuEventBus] 📢 ${eventName}`, data);
     }
 
     // Notificar listeners exactos

package/src/core/wu-hooks.js

@@ -9,6 +9,8 @@
  * - Async/await support
  */
 
+import { logger } from './wu-logger.js';
+
 export class WuLifecycleHooks {
   constructor(core) {
     this.core = core;
@@ -35,7 +37,7 @@ export class WuLifecycleHooks {
       this.hooks.set(phase, []);
     });
 
-    console.log('[WuHooks] 🪝 Lifecycle hooks initialized');
+    logger.debug('[WuHooks] 🪝 Lifecycle hooks initialized');
   }
 
   /**
@@ -66,7 +68,7 @@ export class WuLifecycleHooks {
     // Ordenar por prioridad (mayor primero)
     hooks.sort((a, b) => b.priority - a.priority);
 
-    console.log(`[WuHooks] Hook "${hook.name}" registered for ${phase} (priority: ${hook.priority})`);
+    logger.debug(`[WuHooks] Hook "${hook.name}" registered for ${phase} (priority: ${hook.priority})`);
 
     // Retornar función para desregistrar
     return () => this.remove(phase, hook.name);
@@ -85,7 +87,7 @@ export class WuLifecycleHooks {
 
     if (index > -1) {
       hooks.splice(index, 1);
-      console.log(`[WuHooks] Hook "${name}" removed from ${phase}`);
+      logger.debug(`[WuHooks] Hook "${name}" removed from ${phase}`);
     }
   }
 
@@ -102,7 +104,7 @@ export class WuLifecycleHooks {
       return context;
     }
 
-    console.log(`[WuHooks] Executing ${hooks.length} hooks for ${phase}`);
+    logger.debug(`[WuHooks] Executing ${hooks.length} hooks for ${phase}`);
 
     // Log para debugging
     const executionEntry = {
@@ -146,13 +148,13 @@ export class WuLifecycleHooks {
 
         // Si no se llamó next(), la operación fue cancelada
         if (!nextCalled) {
-          console.log(`[WuHooks] Hook "${hook.name}" cancelled execution`);
+          logger.debug(`[WuHooks] Hook "${hook.name}" cancelled execution`);
           cancelled = true;
           return { cancelled: true };
         }
 
         const duration = Date.now() - startTime;
-        console.log(`[WuHooks] Hook "${hook.name}" executed in ${duration}ms`);
+        logger.debug(`[WuHooks] Hook "${hook.name}" executed in ${duration}ms`);
 
       } catch (error) {
         console.error(`[WuHooks] Error in hook "${hook.name}":`, error);
@@ -257,13 +259,13 @@ export class WuLifecycleHooks {
   cleanup(phase) {
     if (phase) {
       this.hooks.set(phase, []);
-      console.log(`[WuHooks] Hooks cleaned for ${phase}`);
+      logger.debug(`[WuHooks] Hooks cleaned for ${phase}`);
     } else {
       this.lifecyclePhases.forEach(p => {
         this.hooks.set(p, []);
       });
       this.executionLog = [];
-      console.log('[WuHooks] 🧹 All hooks cleaned');
+      logger.debug('[WuHooks] 🧹 All hooks cleaned');
     }
   }
 }