aril 2.0.1-dev.1 → 2.0.1-dev.2

package/fesm2022/aril-boot-config-apps.mjs

@@ -627,6 +627,13 @@ class CustomRouteReuseStrategy {
             return false;
         }
         const routeKey = this.getRouteKey(route);
+        // Angular `outlet.detach()`, `store()`'dan ÖNCE çalışıp wrapper view'ını DOM'dan söker →
+        // içindeki MFE `<app-xxx>` element'i disconnect olur ve barındırdığı iframe (örn. Superset embed)
+        // reload olup auth handshake'ini kalıcı kaybeder. Bu yüzden element'i HÂLÂ bağlıyken, detach'ten
+        // ÖNCE atomic `moveBefore` ile hidden container'a alıyoruz (bkz. preserveLiveElementBeforeDetach).
+        if (this.isMatcherRoute(route)) {
+            this.preserveLiveElementBeforeDetach(route);
+        }
         console.log(`[Strategy] shouldDetach key="${routeKey}" → true`);
         return true;
     }
@@ -686,18 +693,16 @@ class CustomRouteReuseStrategy {
                 return;
             const element = componentInstance.element;
             const hiddenContainer = this.getHiddenContainer();
-            // Flag — disconnectedCallback bunu okuyup destroy'ı atlayacak. removeChild'tan
-            // ÖNCE set ediliyor ki callback ilk tetiklendiğinde flag yerinde olsun.
+            // Flag — fallback (moveBefore desteklenmeyen tarayıcı) removeChild yaptığında disconnectedCallback
+            // bunu okuyup destroy'ı atlar. moveBefore yolunda callback hiç tetiklenmez (flag zararsız kalır).
             element.__arilPreserveDuringDetach = true;
-            // Eğer element zaten bir parent'a sahipse, ondan ayır
-            if (element.parentNode && element.parentNode !== hiddenContainer) {
-                element.parentNode.removeChild(element);
-            }
-            // Hidden container'a ekle (eğer zaten orada değilse)
-            if (!hiddenContainer.contains(element)) {
-                hiddenContainer.appendChild(element);
-                console.log('Web component element hidden container\'a taşındı (state korunuyor)');
-            }
+            // `shouldDetach` çoğu durumda element'i detach'ten ÖNCE zaten taşıdı → burada no-op.
+            if (hiddenContainer.contains(element))
+                return;
+            // Taşınmadıysa (ör. shouldDetach element'i bulamadı): bu noktada element Angular tarafından
+            // zaten disconnect edilmiş olabilir; moveInto bağlıysa moveBefore, değilse appendChild kullanır.
+            this.moveInto(hiddenContainer, element);
+            console.log('Web component element hidden container\'a taşındı (state korunuyor)');
         }
         catch (error) {
             console.warn('Web component element preserve edilirken hata:', error);
@@ -720,35 +725,45 @@ class CustomRouteReuseStrategy {
                 return;
             const element = componentInstance.element;
             const hiddenContainer = this.getHiddenContainer();
-            // Eğer element hidden container'da ise, çıkar
-            if (hiddenContainer.contains(element)) {
-                hiddenContainer.removeChild(element);
-                delete element.__arilPreserveDuringDetach;
-                console.log('Web component element hidden container\'dan çıkarıldı');
-                // Component view'ın native element'ine eklemeyi dene
-                const tryRestore = () => {
-                    const vc = componentInstance.vc;
-                    if (vc?.nativeElement) {
-                        vc.nativeElement.appendChild(element);
-                        console.log('Web component element component view\'a eklendi (retrieve sırasında)');
-                        // Props'ları güncellemek için flag set et (component kendi populateProps'unu çağıracak)
-                        componentInstance.propsUpdated = false;
-                        return true;
-                    }
+            if (!hiddenContainer.contains(element))
+                return;
+            // ÖNEMLI: element'i hidden container'dan ERKEN çıkarmıyoruz. `retrieve`, Angular
+            // `outlet.attach()`'ten ÖNCE çağrılır → vc henüz DOM'a bağlı değildir. Erken removeChild
+            // element'i disconnect eder ve iframe reload olur (tam kaçındığımız şey). Bunun yerine
+            // element'i hidden container'da (bağlı) bırakıp vc bağlanınca atomic moveBefore ile
+            // doğrudan hidden → vc taşıyoruz; iframe hiç reload olmaz.
+            const tryRestore = () => {
+                const vcNative = componentInstance.vc?.nativeElement;
+                if (!vcNative || !vcNative.isConnected)
                     return false;
-                };
-                // Hemen dene
-                if (!tryRestore()) {
-                    // View henüz hazır değilse, bir sonraki tick'te tekrar dene
-                    setTimeout(() => {
-                        if (!tryRestore()) {
-                            // Hala başarısızsa, flag set et (ngAfterViewInit'te tekrar denenecek)
-                            componentInstance.needsRestore = true;
-                            console.log('Web component element restore edilecek (view hazır değil, ngAfterViewInit\'te tekrar denenecek)');
-                        }
-                    }, 0);
+                this.moveInto(vcNative, element);
+                // Flag'i moveInto SONRASI sil: fallback removeChild yaparsa disconnectedCallback flag'i hâlâ görsün.
+                delete element.__arilPreserveDuringDetach;
+                componentInstance.propsUpdated = false;
+                console.log('Web component element component view\'a eklendi (retrieve sırasında)');
+                return true;
+            };
+            // Hemen dene (vc genelde bağlı değil) → değilse microtask'te tekrar dene. `outlet.attach()`
+            // retrieve'den hemen sonra SENKRON çalışır; microtask geçerli task bitince (attach tamamlanmış,
+            // vc bağlı) ama PAINT'ten ÖNCE koşar → element yerine oturur, tab geçişinde boş-flash olmaz.
+            if (tryRestore())
+                return;
+            queueMicrotask(() => {
+                if (tryRestore())
+                    return;
+                // Son çare: vc hâlâ bağlı değil. Element'i yine de vc'ye taşı ki tab boş kalmasın
+                // (attach view'ı bağlayınca görünür olur — iframe reload olabilir ama eski davranış korunur).
+                const vcNative = componentInstance.vc?.nativeElement;
+                if (vcNative) {
+                    this.moveInto(vcNative, element);
+                    delete element.__arilPreserveDuringDetach;
+                    componentInstance.propsUpdated = false;
                 }
-            }
+                else {
+                    componentInstance.needsRestore = true;
+                    console.log('Web component element restore edilecek (view hazır değil, ngAfterViewInit\'te tekrar denenecek)');
+                }
+            });
         }
         catch (error) {
             console.warn('Web component element restore edilirken hata:', error);
@@ -772,6 +787,61 @@ class CustomRouteReuseStrategy {
         }
         return container;
     }
+    /**
+     * `el`'i `target`'ın son çocuğu olacak şekilde TAŞIR. `moveBefore` (atomic move) destekleniyor ve
+     * her iki düğüm de bağlıysa onu kullanır: nested browsing context (iframe) reload OLMADAN ve custom
+     * element'in connected/disconnected callback'leri tetiklenmeden taşır → iframe-tabanlı embed'lerin
+     * (Superset) auth handshake'i + scroll/filtre state'i korunur. Desteklenmiyorsa veya taşıma kısıtları
+     * ihlal edilirse (disconnected / cross-document) removeChild+appendChild'a düşer (eski davranış: iframe
+     * reload olur ama işlem güvenli tamamlanır).
+     */
+    moveInto(target, el) {
+        const mover = target;
+        if (typeof mover.moveBefore === 'function' && el.isConnected && target.isConnected) {
+            try {
+                mover.moveBefore(el, null);
+                return;
+            }
+            catch {
+                // moveBefore kısıtları ihlal edildi → aşağıdaki klasik taşımaya düş.
+            }
+        }
+        if (el.parentNode && el.parentNode !== target) {
+            el.parentNode.removeChild(el);
+        }
+        if (!target.contains(el)) {
+            target.appendChild(el);
+        }
+    }
+    /**
+     * `shouldDetach` içinden, Angular `outlet.detach()` çalışmadan ÖNCE çağrılır: canlı outlet'teki MFE
+     * element'ini `aril-tab-id` attribute'undan bulup atomic `moveBefore` ile hidden container'a taşır.
+     * Böylece Angular wrapper view'ını söktüğünde `<app-xxx>` element'i zaten güvenli/bağlı konumdadır ve
+     * barındırdığı iframe reload olmaz. Element bulunamaz ya da zaten hidden container'daysa no-op →
+     * `store()` eski yoluyla devreye girer (regresyon yok).
+     */
+    preserveLiveElementBeforeDetach(route) {
+        try {
+            const tabId = this.getTabIdFromRoute(route);
+            if (!tabId)
+                return;
+            const hiddenContainer = this.getHiddenContainer();
+            const candidates = document.querySelectorAll(`[aril-tab-id="${tabId}"]`);
+            for (const candidate of Array.from(candidates)) {
+                const el = candidate;
+                if (hiddenContainer.contains(el))
+                    continue;
+                // Fallback removeChild yolunda disconnectedCallback'in destroy'ı atlaması için flag'i taşımadan ÖNCE set et.
+                el.__arilPreserveDuringDetach = true;
+                this.moveInto(hiddenContainer, el);
+                console.log(`[Strategy] pre-detach preserve: <${el.tagName.toLowerCase()}> tab="${tabId}" hidden container'a taşındı`);
+                break;
+            }
+        }
+        catch (error) {
+            console.warn('[Strategy] pre-detach preserve hatası:', error);
+        }
+    }
     /**
      * Detached route view'ı içindeki plugin/MFE custom element'lerini (tag adında `-`
      * bulunan ve `customElements`'a kayıtlı olanları) hidden container'a taşır ve