wu-framework 1.1.13 → 1.1.14

package/package.json

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

@@ -167,25 +167,6 @@ async function register(appName, Component, options = {}) {
 
   const { React, createRoot } = adapterState;
 
-  // Timer para diferir el unmount — permite que StrictMode remount lo cancele
-  let unmountTimer = null;
-
-  // Unmount real (sin defer)
-  const doUnmount = (container) => {
-    const instance = adapterState.roots.get(appName);
-    if (instance) {
-      try {
-        if (onUnmount) onUnmount(instance.container);
-        instance.root.unmount();
-        adapterState.roots.delete(appName);
-      } catch (error) {
-        console.error(`[WuReact] Unmount error for ${appName}:`, error);
-      }
-    }
-    const target = container || instance?.container;
-    if (target) target.innerHTML = '';
-  };
-
   // Función de mount interna
   const mountApp = (container) => {
     if (!container) {
@@ -193,27 +174,18 @@ async function register(appName, Component, options = {}) {
       return;
     }
 
-    // Cancelar cualquier unmount diferido (patrón StrictMode: mount → unmount → remount)
-    if (unmountTimer) {
-      clearTimeout(unmountTimer);
-      unmountTimer = null;
-    }
-
     // Si ya está montado en el MISMO container, ignorar
     const existing = adapterState.roots.get(appName);
     if (existing) {
       if (existing.container === container) {
         return; // Ya montado aquí, nada que hacer
       }
-      // Diferente container → desmontar inmediatamente (no diferido)
-      doUnmount();
+      // Diferente container → desmontar primero
+      unmountApp();
     }
 
     try {
-      // Limpiar el DOM antes de crear un nuevo root.
-      // root.unmount() de React 18+ es async — innerHTML = '' fuerza DOM limpio.
       container.innerHTML = '';
-
       const root = createRoot(container);
 
       let element = React.createElement(Component, props);
@@ -233,16 +205,21 @@ async function register(appName, Component, options = {}) {
     }
   };
 
-  // Función de unmount diferida — espera 60ms antes de desmontar.
-  // Si mountApp se llama antes de que expire el timer, el unmount se cancela.
-  // Esto resuelve el ciclo StrictMode: effect(mount) → cleanup(unmount) → effect(mount)
-  // donde el cleanup ocurre ENTRE los dos mounts async.
+  // Unmount inmediato — la protección contra StrictMode (deferred unmount)
+  // se maneja en wu-core.js, no aquí en el adapter.
   const unmountApp = (container) => {
-    if (unmountTimer) clearTimeout(unmountTimer);
-    unmountTimer = setTimeout(() => {
-      unmountTimer = null;
-      doUnmount(container);
-    }, 60);
+    const instance = adapterState.roots.get(appName);
+    if (instance) {
+      try {
+        if (onUnmount) onUnmount(instance.container);
+        instance.root.unmount();
+        adapterState.roots.delete(appName);
+      } catch (error) {
+        console.error(`[WuReact] Unmount error for ${appName}:`, error);
+      }
+    }
+    const target = container || instance?.container;
+    if (target) target.innerHTML = '';
   };
 
   // Intentar registrar con Wu Framework

package/src/core/wu-core.js

@@ -30,6 +30,8 @@ export class WuCore {
     this.manifests = new Map();      // Manifiestos cargados
     this.mounted = new Map();        // Apps montadas
     this.hidden = new Map();         // Keep-alive hidden apps
+    this._pendingUnmounts = new Map(); // Deferred unmount timers (StrictMode compat)
+    this._mountingPromises = new Map(); // In-flight mount dedup
 
     // Componentes core
     this.loader = new WuLoader();
@@ -178,6 +180,31 @@ export class WuCore {
    * @param {string} containerSelector - Selector del contenedor
    */
   async mount(appName, containerSelector) {
+    // ── StrictMode guard: cancel pending deferred unmount ──
+    // React StrictMode cycle: effect(mount) → cleanup(unmount) → effect(mount)
+    // The cleanup fires between two mounts. By deferring the actual unmount,
+    // the second mount cancels it and the app stays alive — zero flicker.
+    if (this._pendingUnmounts.has(appName)) {
+      clearTimeout(this._pendingUnmounts.get(appName));
+      this._pendingUnmounts.delete(appName);
+      logger.wuDebug(`${appName} deferred unmount cancelled by remount`);
+    }
+
+    // Already mounted in same container → no-op
+    if (this.mounted.has(appName)) {
+      const existing = this.mounted.get(appName);
+      if (existing.containerSelector === containerSelector) {
+        logger.wuDebug(`${appName} already mounted in ${containerSelector}`);
+        return;
+      }
+    }
+
+    // Deduplicate concurrent mounts (StrictMode fires effect twice)
+    if (this._mountingPromises.has(appName)) {
+      logger.wuDebug(`${appName} mount already in progress, deduplicating`);
+      return await this._mountingPromises.get(appName);
+    }
+
     // Check if app is in keep-alive (hidden) state
     const hiddenEntry = this.hidden.get(appName);
     if (hiddenEntry) {
@@ -189,7 +216,15 @@ export class WuCore {
       await this._destroyHidden(appName);
     }
 
-    return await this.mountWithRecovery(appName, containerSelector, 0);
+    // Track mount promise for deduplication
+    const mountPromise = this.mountWithRecovery(appName, containerSelector, 0);
+    this._mountingPromises.set(appName, mountPromise);
+
+    try {
+      return await mountPromise;
+    } finally {
+      this._mountingPromises.delete(appName);
+    }
   }
 
   /**
@@ -840,28 +875,60 @@ export class WuCore {
    * @param {boolean} [options.force] - Force destroy even if keepAlive
    */
   async unmount(appName, options = {}) {
-    try {
-      logger.wuDebug(`Unmounting ${appName}`);
+    logger.wuDebug(`Unmounting ${appName}`);
 
-      const mounted = this.mounted.get(appName);
-      if (!mounted) {
-        // Check if it's hidden (keep-alive) — force destroy if requested
-        if (options.force && this.hidden.has(appName)) {
-          return await this._destroyHidden(appName);
-        }
-        logger.wuWarn(`App ${appName} not mounted`);
-        return;
+    const mounted = this.mounted.get(appName);
+    if (!mounted) {
+      // Check if it's hidden (keep-alive) — force destroy if requested
+      if (options.force && this.hidden.has(appName)) {
+        return await this._destroyHidden(appName);
       }
+      logger.wuWarn(`App ${appName} not mounted`);
+      return;
+    }
 
-      // Resolve keepAlive: per-call > per-app config > default false
-      const keepAlive = options.force
-        ? false
-        : (options.keepAlive ?? mounted.app?.keepAlive ?? false);
+    // Resolve keepAlive: per-call > per-app config > default false
+    const keepAlive = options.force
+      ? false
+      : (options.keepAlive ?? mounted.app?.keepAlive ?? false);
 
-      if (keepAlive) {
-        return await this.hide(appName);
+    if (keepAlive) {
+      return await this.hide(appName);
+    }
+
+    // Force → immediate unmount (no deferral)
+    if (options.force) {
+      return await this._executeUnmount(appName, mounted);
+    }
+
+    // ── Deferred unmount: 60ms window for React StrictMode ──
+    // StrictMode cycle: effect(mount) → cleanup(unmount) → effect(mount)
+    // The cleanup fires between two mounts. By deferring the actual unmount,
+    // the second mount() call cancels the timer and the app stays alive.
+    if (this._pendingUnmounts.has(appName)) {
+      clearTimeout(this._pendingUnmounts.get(appName));
+    }
+
+    this._pendingUnmounts.set(appName, setTimeout(async () => {
+      this._pendingUnmounts.delete(appName);
+      // Re-verify: only unmount if the same mount entry is still current
+      if (this.mounted.has(appName) && this.mounted.get(appName) === mounted) {
+        try {
+          await this._executeUnmount(appName, mounted);
+        } catch (error) {
+          logger.wuError(`Deferred unmount failed for ${appName}:`, error);
+        }
       }
+    }, 60));
+  }
 
+  /**
+   * Execute the actual unmount immediately (no deferral).
+   * Called by the deferred timer, force unmount, or destroy.
+   * @private
+   */
+  async _executeUnmount(appName, mounted) {
+    try {
       // Execute beforeUnmount hooks
       const beforeUnmountResult = await this.hooks.execute('beforeUnmount', { appName, mounted });
       if (beforeUnmountResult.cancelled) {
@@ -1277,6 +1344,13 @@ export class WuCore {
       // Call plugin onDestroy hooks
       await this.pluginSystem.callHook('onDestroy', {});
 
+      // Cancel all pending deferred unmounts
+      for (const timer of this._pendingUnmounts.values()) {
+        clearTimeout(timer);
+      }
+      this._pendingUnmounts.clear();
+      this._mountingPromises.clear();
+
       // Force-destroy all hidden (keep-alive) apps first
       for (const appName of [...this.hidden.keys()]) {
         await this._destroyHidden(appName);