@elliemae/pui-app-sdk 5.44.1 → 5.44.2

package/dist/esm/view/guest-microapp.js

@@ -17,6 +17,10 @@ import {
   resolveGuestOpenHistory,
   resolveNestedGuestFrameOptions
 } from "../utils/micro-frontend/guest-host-context.js";
+import {
+  getSsfGuestFrame,
+  preserveIframeForTeardown
+} from "./iframe-teardown-sandbox.js";
 const Div = styled.div`
   display: flex;
   width: 100%;
@@ -59,11 +63,14 @@ const useAppRenderer = (props) => {
     [id]
   );
   const unloadInProgressRef = useRef(Promise.resolve());
+  const hostStateRef = useRef({ appBridge: null, ssfHost: null, instanceId: null });
   useLayoutEffect(() => {
     let isMounted = true;
-    let appBridge = null;
-    let ssfHost = null;
-    let instanceId = null;
+    hostStateRef.current = {
+      appBridge: null,
+      ssfHost: null,
+      instanceId: null
+    };
     const abortController = new AbortController();
     const trackUnload = (unloadResult, onSettled) => {
       unloadInProgressRef.current = unloadInProgressRef.current.then(() => toVoidPromise(unloadResult)).then(() => {
@@ -76,7 +83,7 @@ const useAppRenderer = (props) => {
       });
     };
     const notifyUnloadComplete = () => {
-      instanceId = null;
+      hostStateRef.current.instanceId = null;
       setTimeout(() => {
         try {
           onUnloadComplete?.();
@@ -108,7 +115,8 @@ const useAppRenderer = (props) => {
           ...stableSsfAppOptions
         };
         if (microappManager === MicroAppManager.SSF) {
-          ssfHost = getSSFHost();
+          const ssfHost = getSSFHost();
+          hostStateRef.current.ssfHost = ssfHost;
           if (!ssfHost)
             throw new Error(`Failed to load ${id}, SSFHost not initialized`);
           if (!hostUrl)
@@ -139,14 +147,15 @@ const useAppRenderer = (props) => {
               onLoad: onLoadComplete,
               options: guestOptions
             });
-            instanceId = guest.id;
+            hostStateRef.current.instanceId = guest.id;
           }
         } else {
-          appBridge = await getAppBridge();
+          const appBridge = await getAppBridge();
+          hostStateRef.current.appBridge = appBridge;
           if (!appBridge)
             throw new Error(`Failed to load ${id}, AppBridge not initialized`);
           if (isMounted && !abortController.signal.aborted) {
-            instanceId = await appBridge.openApp({
+            const openedInstanceId = await appBridge.openApp({
               id,
               selfInitialize: configSelfInitialize,
               frameOptions: {
@@ -160,13 +169,14 @@ const useAppRenderer = (props) => {
               initialRoute
             });
             if (!isMounted || abortController.signal.aborted) {
-              trackUnload(appBridge.closeApp(instanceId));
-              instanceId = null;
+              trackUnload(appBridge.closeApp(openedInstanceId));
+              hostStateRef.current.instanceId = null;
               return;
             }
+            hostStateRef.current.instanceId = openedInstanceId;
             setTimeout(() => {
               try {
-                onLoadComplete?.(instanceId);
+                onLoadComplete?.(openedInstanceId);
               } catch (ex) {
                 getLogger().warn({
                   message: `onLoadComplete callback failed for ${id}`,
@@ -183,6 +193,7 @@ const useAppRenderer = (props) => {
           exception: ex
         });
         isMounted = false;
+        const { appBridge, ssfHost, instanceId } = hostStateRef.current;
         if (appBridge && instanceId)
           trackUnload(appBridge.closeApp(instanceId));
         if (ssfHost && instanceId) trackUnload(ssfHost.unloadGuest(instanceId));
@@ -195,12 +206,27 @@ const useAppRenderer = (props) => {
     return () => {
       abortController.abort();
       isMounted = false;
-      if (ssfHost && instanceId) {
-        trackUnload(ssfHost.unloadGuest(instanceId), notifyUnloadComplete);
-      } else if (appBridge && instanceId) {
-        trackUnload(appBridge.closeApp(instanceId), notifyUnloadComplete);
-      } else {
-        notifyUnloadComplete();
+      const {
+        appBridge,
+        ssfHost,
+        instanceId: currentInstanceId
+      } = hostStateRef.current;
+      const startTeardown = (frameEle, unloadResult) => {
+        preserveIframeForTeardown(frameEle ?? void 0);
+        trackUnload(unloadResult, notifyUnloadComplete);
+      };
+      if (ssfHost && currentInstanceId) {
+        startTeardown(
+          getSsfGuestFrame(ssfHost, currentInstanceId),
+          ssfHost.unloadGuest(currentInstanceId)
+        );
+      } else if (appBridge && currentInstanceId) {
+        startTeardown(
+          document.getElementById(
+            currentInstanceId
+          ),
+          appBridge.closeApp(currentInstanceId)
+        );
       }
     };
   }, [

package/dist/esm/view/iframe-teardown-sandbox.js

@@ -0,0 +1,30 @@
+const TEARDOWN_SANDBOX_ID = "pui-iframe-teardown-sandbox";
+let disablePreserveForTeardown = false;
+const setDisablePreserveForTeardown = (disabled) => {
+  disablePreserveForTeardown = disabled;
+};
+const getTeardownSandbox = () => {
+  let sandbox = document.getElementById(TEARDOWN_SANDBOX_ID);
+  if (!sandbox) {
+    sandbox = document.createElement("div");
+    sandbox.id = TEARDOWN_SANDBOX_ID;
+    sandbox.setAttribute("data-testid", TEARDOWN_SANDBOX_ID);
+    sandbox.style.cssText = "position:fixed;left:-9999px;top:-9999px;width:0;height:0;overflow:hidden;visibility:hidden;";
+    document.body.appendChild(sandbox);
+  }
+  return sandbox;
+};
+const clearTeardownSandbox = () => {
+  document.getElementById(TEARDOWN_SANDBOX_ID)?.replaceChildren();
+};
+const preserveIframeForTeardown = (iframe) => {
+  if (disablePreserveForTeardown || !iframe?.isConnected) return;
+  getTeardownSandbox().appendChild(iframe);
+};
+const getSsfGuestFrame = (ssfHost, instanceId) => ssfHost.getGuests().find(({ id }) => id === instanceId)?.domElement ?? null;
+export {
+  clearTeardownSandbox,
+  getSsfGuestFrame,
+  preserveIframeForTeardown,
+  setDisablePreserveForTeardown
+};

package/dist/esm/view/micro-app/use-app-will-render.js

@@ -13,6 +13,8 @@ import {
   getMicroFrontEndAppConfig
 } from "../../utils/micro-frontend/index.js";
 import { logRecords } from "../../utils/log-records.js";
+import { preserveIframeForTeardown } from "../iframe-teardown-sandbox.js";
+import { IFRAME_CONTAINER_ID_PREFIX } from "../micro-iframe-app/iframe/const.js";
 const useAppWillRender = ({
   id,
   uuid,
@@ -32,8 +34,12 @@ const useAppWillRender = ({
   );
   const unload = useCallback(
     async (appParams, loadFailed = false) => {
-      await unmountApp(appParams);
-      unloadApp(appParams);
+      try {
+        await unmountApp(appParams);
+        unloadApp(appParams);
+      } finally {
+        document.getElementById(`${IFRAME_CONTAINER_ID_PREFIX}${appParams.id}`)?.remove();
+      }
       if (!loadFailed && onUnloadComplete) onUnloadComplete();
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -70,9 +76,24 @@ const useAppWillRender = ({
     const appParams = { ...appConfig, uuid };
     load(appParams);
     return () => {
+      preserveIframeForTeardown(
+        document.getElementById(
+          `${IFRAME_CONTAINER_ID_PREFIX}${id}`
+        )
+      );
       ref.current = unload(appParams);
     };
-  }, [documentEle, getConfig, history, theme, homeRoute, load, unload, uuid]);
+  }, [
+    documentEle,
+    getConfig,
+    history,
+    id,
+    theme,
+    homeRoute,
+    load,
+    unload,
+    uuid
+  ]);
 };
 export {
   useAppWillRender

package/dist/types/lib/view/iframe-teardown-sandbox.d.ts

@@ -0,0 +1,20 @@
+export declare const setDisablePreserveForTeardown: (disabled: boolean) => void;
+export declare const clearTeardownSandbox: () => void;
+/**
+ * Re-parent a guest iframe so its JS context stays alive while async host
+ * teardown (closeApp / unloadGuest) completes.
+ * @param iframe
+ */
+export declare const preserveIframeForTeardown: (iframe: HTMLElement | null | undefined) => void;
+/**
+ * Resolve the SSF guest iframe from the host registry.
+ * @param ssfHost
+ * @param ssfHost.getGuests
+ * @param instanceId
+ */
+export declare const getSsfGuestFrame: (ssfHost: {
+    getGuests: () => Array<{
+        id: string;
+        domElement?: HTMLIFrameElement | null;
+    }>;
+}, instanceId: string) => HTMLIFrameElement | null;

package/dist/types/lib/view/tests/iframe-teardown-sandbox.test.d.ts

@@ -0,0 +1 @@
+export {};