@elliemae/pui-app-sdk 5.15.0-beta.1 → 5.15.0

package/dist/cjs/utils/auth/index.js

@@ -72,7 +72,7 @@ const endSession = async ({
   redirectUri,
   responseType,
   scope,
-  code = "1004",
+  code = "",
   skipRevoke = false
 }) => {
   try {
@@ -91,7 +91,7 @@ const endSession = async ({
     const params = {
       client_id: clientId,
       redirect_uri: redirectUri,
-      error_code: code,
+      ...code && { error_code: code },
       response_type: responseType,
       scope
     };

package/dist/cjs/utils/log-records.js

@@ -42,25 +42,25 @@ const logRecords = {
     code: "appsdk05",
     message: `Application load failed. unable to locate ${assetName} in the manifest`
   }),
-  APP_INIT_FAILED: (appId, errMsg) => ({
+  APP_INIT_FAILED: (appId, instanceId, errMsg) => ({
     code: "appsdk06",
-    message: `Application load failed. Unable to load one or more application resources for appId: ${appId}. ${errMsg}`
+    message: `Application load failed. Unable to load one or more application resources for appId: ${appId} and instanceId: ${instanceId}. ${errMsg}`
   }),
-  APP_LOADING: (appId) => ({
+  APP_LOADING: (appId, instanceId) => ({
     code: "appsdk07",
-    message: `Application ${appId} is loading...`
+    message: `Application ${appId} with instanceId ${instanceId} is loading...`
   }),
-  APP_LOADING_COMPLETE: (appId) => ({
+  APP_LOADING_COMPLETE: (appId, instanceId) => ({
     code: "appsdk08",
-    message: `Application ${appId} loaded`
+    message: `Application ${appId} loaded with instanceId ${instanceId}`
   }),
-  APP_UNLOADING: (appId) => ({
+  APP_UNLOADING: (appId, instanceId) => ({
     code: "appsdk09",
-    message: `Application ${appId} unloading...`
+    message: `Application ${appId} with instanceId ${instanceId} unloading...`
   }),
-  APP_UNLOADING_COMPLETE: (appId) => ({
+  APP_UNLOADING_COMPLETE: (appId, instanceId) => ({
     code: "appsdk10",
-    message: `Application ${appId} unloaded`
+    message: `Application ${appId} with instanceId ${instanceId} unloaded`
   }),
   SSF_HOST_OBJECT_NOT_FOUND: (name) => ({
     code: "appsdk11",

package/dist/cjs/utils/micro-frontend/guest.js

@@ -32,6 +32,7 @@ __export(guest_exports, {
 });
 module.exports = __toCommonJS(guest_exports);
 var import_lodash = __toESM(require("lodash"));
+var import_uuid = require("uuid");
 var import_pui_theme = require("@elliemae/pui-theme");
 var import_window = require("../window.js");
 var import_app_config = require("../app-config/index.js");
@@ -53,6 +54,10 @@ const isCrossDomain = () => {
   }
 };
 class CMicroAppGuest {
+  /**
+   * unique microapp id
+   */
+  #uuid;
   static instance;
   logger;
   appId;
@@ -62,9 +67,12 @@ class CMicroAppGuest {
   onMount;
   onUnmount;
   onGetRef;
+  // eslint-disable-next-line max-statements
   constructor(params) {
     this.containerId = "app-container";
+    window.emui.uuid = window.emui.uuid || (0, import_uuid.v4)();
     this.appId = window.emui?.appId || (0, import_config.getAppConfigValue)("appId");
+    this.#uuid = window.emui.uuid;
     this.props = {
       host: null,
       hostUrl: null,
@@ -82,15 +90,7 @@ class CMicroAppGuest {
     this.getHost = this.getHost.bind(this);
     this.getLogger = this.getLogger.bind(this);
     this.getProps = this.getProps.bind(this);
-    const browserWindow = (0, import_window.getWindow)();
-    if (browserWindow) {
-      browserWindow.emui = browserWindow.emui || {};
-      browserWindow.emui[this.appId] = browserWindow.emui[this.appId] || {};
-      browserWindow.emui[this.appId].init = this.init.bind(this);
-      browserWindow.emui[this.appId].mount = this.mount.bind(this);
-      browserWindow.emui[this.appId].unmount = this.unmount.bind(this);
-      browserWindow.emui[this.appId].getRef = this.getRef.bind(this);
-    }
+    this.#addAppToGlobalVariable();
   }
   static getInstance(params) {
     if (!this.instance) {
@@ -113,6 +113,60 @@ class CMicroAppGuest {
   getProps() {
     return this.props;
   }
+  /**
+   * add the microapp to the global variable in the parent window and current window
+   */
+  #addAppToGlobalVariable() {
+    const browserWindow = (0, import_window.getWindow)();
+    if (!browserWindow) return;
+    browserWindow.emui = browserWindow.emui || {};
+    const app = {
+      uuid: this.#uuid,
+      init: this.init.bind(this),
+      mount: this.mount.bind(this),
+      unmount: this.unmount.bind(this),
+      getRef: this.getRef.bind(this),
+      navigate: this.navigate.bind(this)
+    };
+    if (browserWindow.emui[this.appId]) {
+      if (Array.isArray(browserWindow.emui[this.appId])) {
+        const existingApps = browserWindow.emui[this.appId];
+        const appIndex = existingApps.findIndex((a) => a.uuid === this.#uuid);
+        if (appIndex > -1) existingApps[appIndex] = app;
+        else existingApps.push(app);
+      } else if (browserWindow.emui[this.appId].uuid === this.#uuid) {
+        browserWindow.emui[this.appId] = app;
+      } else {
+        browserWindow.emui[this.appId] = [
+          browserWindow.emui[this.appId],
+          app
+        ];
+      }
+    } else {
+      browserWindow.emui[this.appId] = app;
+    }
+    window.emui.app = app;
+    window.addEventListener("beforeunload", this.#onWindowUnload.bind(this));
+  }
+  /**
+   * remove the microapp from the global variable from the parent window and current window
+   */
+  #onWindowUnload() {
+    const browserWindow = (0, import_window.getWindow)();
+    if (Array.isArray(browserWindow.emui[this.appId])) {
+      const existingApps = browserWindow.emui[this.appId];
+      const index = existingApps.findIndex((app) => app.uuid === this.#uuid);
+      if (index > -1) existingApps.splice(index, 1);
+      if (existingApps.length === 0) {
+        delete browserWindow.emui[this.appId];
+      }
+    } else {
+      delete browserWindow.emui[this.appId];
+    }
+    delete window.emui.app;
+    this.unmount({ containerId: this.containerId }).catch(() => {
+    });
+  }
   getSessionStorageItem(key) {
     let value = sessionStorage.getItem(key);
     if (!value && this.props.host?.getItem) {
@@ -134,6 +188,9 @@ class CMicroAppGuest {
     }
     return host;
   }
+  get uuid() {
+    return this.#uuid;
+  }
   async init(options) {
     this.props = import_lodash.default.merge(this.props, options);
     this.props.history = options?.history || this.props.history;

package/dist/cjs/view/micro-app/app-factory/index.js

@@ -37,8 +37,23 @@ const cssType = /\.css$/;
 const isCss = (fileName) => cssType.test(fileName);
 const activeApps = {};
 const getPathName = (url) => url ? new URL(url).pathname : "";
+const getAppNotFoundError = (id, uuid) => `Application ${id} with instance id ${uuid} is not found. Most probably the appId property of app.config.json is not set to ${id}`;
+const getMicroAppGuestFromWindow = ({
+  id,
+  uuid
+}) => {
+  let microAppGuest = null;
+  const guests = window.emui?.[id];
+  if (Array.isArray(guests)) {
+    microAppGuest = guests.find((guest) => guest.uuid === uuid) ?? null;
+  } else {
+    microAppGuest = guests;
+  }
+  return microAppGuest;
+};
 const initApplication = async ({
   id,
+  uuid,
   name,
   hostUrl,
   history,
@@ -46,18 +61,19 @@ const initApplication = async ({
   manifestPath,
   homeRoute
 }) => {
-  const app = window.emui?.[id];
-  if (!app) {
-    throw new Error(
-      `Application ${name} with ${id} is not found. Most probably the appId property of app.config.json is not set to ${id}`
-    );
-  }
+  const app = getMicroAppGuestFromWindow({
+    id,
+    uuid
+  });
+  if (!app) throw new Error(getAppNotFoundError(id, uuid));
   const { init } = app;
   if (!init || typeof init !== "function")
     throw new Error(
       `Application ${name} with id ${id} doesn't expose init method.`
     );
-  const prevState = await import_web_storage.persistentStorage.get(`state-${id}`);
+  const prevState = await import_web_storage.persistentStorage.get(
+    `state-${id}-${uuid}`
+  );
   return init({
     host: import_host.CMicroAppHost.getInstance(),
     hostUrl,
@@ -70,8 +86,12 @@ const initApplication = async ({
     hostViewportSize: (0, import_window.getViewportSize)()
   });
 };
-const mountApp = async ({ id, name }) => {
-  const app = (window.emui || {})[id] || {};
+const mountApp = async ({ id, uuid, name }) => {
+  const app = getMicroAppGuestFromWindow({
+    id,
+    uuid
+  });
+  if (!app) throw new Error(getAppNotFoundError(id, uuid));
   const { mount } = app;
   if (!mount || typeof mount !== "function")
     throw new Error(
@@ -83,8 +103,11 @@ const mountApp = async ({ id, name }) => {
     hostViewportSize: (0, import_window.getViewportSize)()
   });
 };
-const unmountApp = async ({ id, name }) => {
-  const app = (window.emui || {})[id];
+const unmountApp = async ({ id, uuid, name }) => {
+  const app = getMicroAppGuestFromWindow({
+    id,
+    uuid
+  });
   if (!app) return null;
   const { unmount } = app;
   if (!unmount) return null;
@@ -96,64 +119,123 @@ const unmountApp = async ({ id, name }) => {
     containerId: `${import_const.APP_CONTAINER_ID_PREFIX}${id}`
   });
   if (currentState) {
-    await import_web_storage.persistentStorage.set(`state-${id}`, currentState);
+    await import_web_storage.persistentStorage.set(`state-${id}-${uuid}`, currentState);
   }
   return Promise.resolve();
 };
-const addAppToActiveAppList = (id, elementIds) => {
-  const app = (window.emui || {})[id] || {};
+const addAppToActiveAppList = (id, uuid, elementIds) => {
+  const app = getMicroAppGuestFromWindow({
+    id,
+    uuid
+  });
+  if (!app) throw new Error(getAppNotFoundError(id, uuid));
   const { getRef } = app;
-  activeApps[id] = { elementIds };
+  activeApps[`${id}-${uuid}`] = { elementIds };
   const host = import_host.CMicroAppHost.getInstance();
-  if (host) host.activeGuests[id] = getRef && getRef() || {};
+  if (host) host.activeGuests[`${id}-${uuid}`] = getRef && getRef() || {};
   return Promise.resolve();
 };
 const waitAndInitApplication = (appConfig, requests) => (
   // wait for all assets to get downloaded
-  Promise.all(requests).then(addAppToActiveAppList.bind(null, appConfig.id)).then(initApplication.bind(null, appConfig)).catch((err) => {
-    const logRecord = import_log_records.logRecords.APP_INIT_FAILED(appConfig.id, err.message);
+  Promise.all(requests).then(addAppToActiveAppList.bind(null, appConfig.id, appConfig.uuid)).then(initApplication.bind(null, appConfig)).catch((err) => {
+    const logRecord = import_log_records.logRecords.APP_INIT_FAILED(
+      appConfig.id,
+      appConfig.uuid,
+      err.message
+    );
     (0, import_micro_frontend.getLogger)().error({ ...logRecord, exception: err });
     throw new Error(logRecord.message);
   })
 );
-const removeAssetsFromDOM = (id, documentEle = document) => {
+const removeAssetsFromDOM = (id, uuid, documentEle = document) => {
   const host = import_host.CMicroAppHost.getInstance();
-  if (host) delete host.activeGuests[id];
-  const { elementIds } = activeApps[id] || {};
+  if (host) delete host.activeGuests[`${id}-${uuid}`];
+  const { elementIds } = activeApps[`${id}-${uuid}`] || {};
   if (elementIds) {
     elementIds.forEach((elementId) => {
       const ele = documentEle.getElementById(elementId);
       if (ele) ele.remove();
     });
-    delete activeApps[id];
+    delete activeApps[`${id}-${uuid}`];
+  }
+};
+const addAppToGlobalVariable = ({
+  id,
+  uuid,
+  documentEle
+}) => {
+  const newAppInstance = {
+    uuid,
+    init: null,
+    mount: null,
+    unmount: null,
+    getRef: null,
+    navigate: null
+  };
+  const app = getMicroAppGuestFromWindow({ id, uuid });
+  if (app) {
+    if (!uuid) {
+      throw new Error(
+        `Application ${id} is already loaded. uuid is required to load multiple instances of the same app`
+      );
+    }
+    if (Array.isArray(window.emui[id])) {
+      window.emui[id].push(newAppInstance);
+    } else {
+      window.emui[id] = [window.emui[id], newAppInstance];
+    }
+  } else {
+    window.emui[id] = newAppInstance;
+  }
+  if (documentEle.defaultView) {
+    documentEle.defaultView.emui = documentEle.defaultView.emui ?? {};
+    documentEle.defaultView.emui.uuid = uuid;
+  }
+};
+const removeAppFromGlobalVariable = (id, uuid) => {
+  if (Array.isArray(window.emui[id])) {
+    const index = window.emui[id].findIndex(
+      (app) => app.uuid === uuid
+    );
+    if (index > -1) window.emui[id].splice(index, 1);
+  } else {
+    delete window.emui[id];
   }
 };
 const loadApp = async (appConfig) => {
-  (0, import_micro_frontend.getLogger)().info(import_log_records.logRecords.APP_LOADING(appConfig.id));
-  let assets = appConfig.files;
-  const manifest = await (0, import_manifest.getAppManifest)(appConfig);
-  assets = (0, import_manifest.getFullFileNameofAssetsFromManifest)(manifest, appConfig.files);
-  let counter = 0;
-  const requests = assets.map((fileName) => {
-    counter += 1;
-    return !isCss(fileName) ? (0, import_script.addScriptToDOM)(appConfig, fileName, counter) : (0, import_style.addStylesToDOM)(appConfig, fileName, counter);
-  });
-  await waitAndInitApplication(appConfig, requests);
-  (0, import_micro_frontend.getLogger)().info(import_log_records.logRecords.APP_LOADING_COMPLETE(appConfig.id));
+  const { id, uuid, documentEle } = appConfig;
+  addAppToGlobalVariable({ id, uuid, documentEle });
+  try {
+    (0, import_micro_frontend.getLogger)().info(import_log_records.logRecords.APP_LOADING(id, uuid));
+    let assets = appConfig.files;
+    const manifest = await (0, import_manifest.getAppManifest)(appConfig);
+    assets = (0, import_manifest.getFullFileNameofAssetsFromManifest)(manifest, appConfig.files);
+    let counter = 0;
+    const requests = assets.map((fileName) => {
+      counter += 1;
+      return !isCss(fileName) ? (0, import_script.addScriptToDOM)(appConfig, fileName, counter) : (0, import_style.addStylesToDOM)(appConfig, fileName, counter);
+    });
+    await waitAndInitApplication(appConfig, requests);
+    (0, import_micro_frontend.getLogger)().info(import_log_records.logRecords.APP_LOADING_COMPLETE(id, uuid));
+  } catch (err) {
+    removeAppFromGlobalVariable(id, uuid);
+    throw err;
+  }
 };
 const unloadApp = ({
   id,
+  uuid,
   hostUrl,
   documentEle
 }) => {
   if (!hostUrl) throw new Error("Unable to unload app. hostUrl is required");
-  (0, import_micro_frontend.getLogger)().info(import_log_records.logRecords.APP_UNLOADING(id));
-  const app = (window.emui || {})[id];
+  (0, import_micro_frontend.getLogger)().info(import_log_records.logRecords.APP_UNLOADING(id, uuid));
+  const app = getMicroAppGuestFromWindow({ id, uuid });
   if (!app) return;
-  removeAssetsFromDOM(id, documentEle);
+  removeAssetsFromDOM(id, uuid, documentEle);
   (0, import_script.removeDynamicImportedScripts)(hostUrl, documentEle);
   (0, import_script.removePrefetchLinks)(hostUrl, documentEle);
   (0, import_style.removeDynamicImportedStyles)(hostUrl, documentEle);
-  if (window.emui && window.emui[id]) delete window.emui[id];
-  (0, import_micro_frontend.getLogger)().info(import_log_records.logRecords.APP_UNLOADING_COMPLETE(id));
+  removeAppFromGlobalVariable(id, uuid);
+  (0, import_micro_frontend.getLogger)().info(import_log_records.logRecords.APP_UNLOADING_COMPLETE(id, uuid));
 };

package/dist/cjs/view/micro-app/index.js

@@ -41,6 +41,7 @@ const Div = import_styled_components.default.div`
   width: 100%;
 `;
 const MicroApp = (0, import_react.memo)((props) => {
-  (0, import_use_app_will_render.useAppWillRender)(props);
+  const uuid = (0, import_react.useId)();
+  (0, import_use_app_will_render.useAppWillRender)({ uuid, ...props });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Div, { id: `${import_const.APP_CONTAINER_ID_PREFIX}${props.id}` });
 });

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

@@ -30,6 +30,7 @@ var import_micro_frontend = require("../../utils/micro-frontend/index.js");
 var import_log_records = require("../../utils/log-records.js");
 const useAppWillRender = ({
   id,
+  uuid,
   documentEle,
   history,
   theme,
@@ -45,27 +46,27 @@ const useAppWillRender = ({
     [id]
   );
   const unload = (0, import_react.useCallback)(
-    async (appConfig, loadFailed = false) => {
-      await (0, import_app_factory.unmountApp)(appConfig);
-      (0, import_app_factory.unloadApp)(appConfig);
+    async (appParams, loadFailed = false) => {
+      await (0, import_app_factory.unmountApp)(appParams);
+      (0, import_app_factory.unloadApp)(appParams);
       if (!loadFailed && onUnloadComplete) onUnloadComplete();
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
   const load = (0, import_react.useCallback)(
-    async (appConfig) => {
+    async (appParams) => {
       if (dispatch) dispatch(import_actions.waitMessage.open());
       try {
         if (ref.current) await ref.current;
-        await (0, import_app_factory.loadApp)(appConfig);
-        await (0, import_app_factory.mountApp)(appConfig);
+        await (0, import_app_factory.loadApp)(appParams);
+        await (0, import_app_factory.mountApp)(appParams);
       } catch (ex) {
         (0, import_micro_frontend.getLogger)().error({
           ...import_log_records.logRecords.APP_CONFIG_LOAD_FAILED,
           exception: ex
         });
-        await unload(appConfig, true);
+        await unload(appParams, true);
         throw ex;
       }
       if (dispatch) dispatch(import_actions.waitMessage.close());
@@ -81,9 +82,10 @@ const useAppWillRender = ({
       theme,
       homeRoute
     });
-    load(appConfig);
+    const appParams = { ...appConfig, uuid };
+    load(appParams);
     return () => {
-      ref.current = unload(appConfig);
+      ref.current = unload(appParams);
     };
-  }, [documentEle, getConfig, history, theme, homeRoute, load, unload]);
+  }, [documentEle, getConfig, history, theme, homeRoute, load, unload, uuid]);
 };

package/dist/cjs/view/micro-iframe-app/app.js

@@ -38,11 +38,12 @@ var import_iframe2 = require("./iframe/index.js");
 var import_use_frame_loaded = require("./use-frame-loaded.js");
 var import_use_app_will_render = require("../micro-app/use-app-will-render.js");
 const App = (0, import_react.memo)(
-  ({ id, dispose, onUnloadComplete, ...rest }) => {
+  ({ id, uuid, dispose, onUnloadComplete, ...rest }) => {
     const [documentEle, setDocumentEle] = (0, import_react.useState)(null);
     (0, import_use_frame_loaded.useFrameLoaded)({ id, documentEle, ...rest });
     (0, import_use_app_will_render.useAppWillRender)({
       id,
+      uuid,
       documentEle: dispose ? null : documentEle,
       onUnloadComplete,
       ...rest

package/dist/cjs/view/micro-iframe-app/index.js

@@ -28,6 +28,7 @@ var import_app = require("./app.js");
 const MicroIFrameApp = (0, import_react2.memo)(({ entityId = null, ...rest }) => {
   const [disposePrevApp, setDisposePrevApp] = (0, import_react2.useState)(false);
   const [appKey, setAppKey] = (0, import_react2.useState)(Date.now());
+  const uuid = (0, import_react2.useId)();
   const prevEntityId = (0, import_use_previous.usePrevious)(entityId);
   (0, import_react2.useEffect)(() => {
     if (prevEntityId !== entityId && prevEntityId) {
@@ -38,6 +39,7 @@ const MicroIFrameApp = (0, import_react2.memo)(({ entityId = null, ...rest }) =>
     import_app.App,
     {
       ...rest,
+      uuid,
       key: appKey,
       dispose: disposePrevApp,
       onUnloadComplete: () => {

package/dist/esm/utils/auth/index.js

@@ -48,7 +48,7 @@ const endSession = async ({
   redirectUri,
   responseType,
   scope,
-  code = "1004",
+  code = "",
   skipRevoke = false
 }) => {
   try {
@@ -67,7 +67,7 @@ const endSession = async ({
     const params = {
       client_id: clientId,
       redirect_uri: redirectUri,
-      error_code: code,
+      ...code && { error_code: code },
       response_type: responseType,
       scope
     };

package/dist/esm/utils/log-records.js

@@ -19,25 +19,25 @@ const logRecords = {
     code: "appsdk05",
     message: `Application load failed. unable to locate ${assetName} in the manifest`
   }),
-  APP_INIT_FAILED: (appId, errMsg) => ({
+  APP_INIT_FAILED: (appId, instanceId, errMsg) => ({
     code: "appsdk06",
-    message: `Application load failed. Unable to load one or more application resources for appId: ${appId}. ${errMsg}`
+    message: `Application load failed. Unable to load one or more application resources for appId: ${appId} and instanceId: ${instanceId}. ${errMsg}`
   }),
-  APP_LOADING: (appId) => ({
+  APP_LOADING: (appId, instanceId) => ({
     code: "appsdk07",
-    message: `Application ${appId} is loading...`
+    message: `Application ${appId} with instanceId ${instanceId} is loading...`
   }),
-  APP_LOADING_COMPLETE: (appId) => ({
+  APP_LOADING_COMPLETE: (appId, instanceId) => ({
     code: "appsdk08",
-    message: `Application ${appId} loaded`
+    message: `Application ${appId} loaded with instanceId ${instanceId}`
   }),
-  APP_UNLOADING: (appId) => ({
+  APP_UNLOADING: (appId, instanceId) => ({
     code: "appsdk09",
-    message: `Application ${appId} unloading...`
+    message: `Application ${appId} with instanceId ${instanceId} unloading...`
   }),
-  APP_UNLOADING_COMPLETE: (appId) => ({
+  APP_UNLOADING_COMPLETE: (appId, instanceId) => ({
     code: "appsdk10",
-    message: `Application ${appId} unloaded`
+    message: `Application ${appId} with instanceId ${instanceId} unloaded`
   }),
   SSF_HOST_OBJECT_NOT_FOUND: (name) => ({
     code: "appsdk11",

package/dist/esm/utils/micro-frontend/guest.js

@@ -1,4 +1,5 @@
 import _ from "lodash";
+import { v4 as uuidv4 } from "uuid";
 import { getDefaultTheme } from "@elliemae/pui-theme";
 import { getWindow } from "../window.js";
 import { loadAppConfig } from "../app-config/index.js";
@@ -20,6 +21,10 @@ const isCrossDomain = () => {
   }
 };
 class CMicroAppGuest {
+  /**
+   * unique microapp id
+   */
+  #uuid;
   static instance;
   logger;
   appId;
@@ -29,9 +34,12 @@ class CMicroAppGuest {
   onMount;
   onUnmount;
   onGetRef;
+  // eslint-disable-next-line max-statements
   constructor(params) {
     this.containerId = "app-container";
+    window.emui.uuid = window.emui.uuid || uuidv4();
     this.appId = window.emui?.appId || getAppConfigValue("appId");
+    this.#uuid = window.emui.uuid;
     this.props = {
       host: null,
       hostUrl: null,
@@ -49,15 +57,7 @@ class CMicroAppGuest {
     this.getHost = this.getHost.bind(this);
     this.getLogger = this.getLogger.bind(this);
     this.getProps = this.getProps.bind(this);
-    const browserWindow = getWindow();
-    if (browserWindow) {
-      browserWindow.emui = browserWindow.emui || {};
-      browserWindow.emui[this.appId] = browserWindow.emui[this.appId] || {};
-      browserWindow.emui[this.appId].init = this.init.bind(this);
-      browserWindow.emui[this.appId].mount = this.mount.bind(this);
-      browserWindow.emui[this.appId].unmount = this.unmount.bind(this);
-      browserWindow.emui[this.appId].getRef = this.getRef.bind(this);
-    }
+    this.#addAppToGlobalVariable();
   }
   static getInstance(params) {
     if (!this.instance) {
@@ -80,6 +80,60 @@ class CMicroAppGuest {
   getProps() {
     return this.props;
   }
+  /**
+   * add the microapp to the global variable in the parent window and current window
+   */
+  #addAppToGlobalVariable() {
+    const browserWindow = getWindow();
+    if (!browserWindow) return;
+    browserWindow.emui = browserWindow.emui || {};
+    const app = {
+      uuid: this.#uuid,
+      init: this.init.bind(this),
+      mount: this.mount.bind(this),
+      unmount: this.unmount.bind(this),
+      getRef: this.getRef.bind(this),
+      navigate: this.navigate.bind(this)
+    };
+    if (browserWindow.emui[this.appId]) {
+      if (Array.isArray(browserWindow.emui[this.appId])) {
+        const existingApps = browserWindow.emui[this.appId];
+        const appIndex = existingApps.findIndex((a) => a.uuid === this.#uuid);
+        if (appIndex > -1) existingApps[appIndex] = app;
+        else existingApps.push(app);
+      } else if (browserWindow.emui[this.appId].uuid === this.#uuid) {
+        browserWindow.emui[this.appId] = app;
+      } else {
+        browserWindow.emui[this.appId] = [
+          browserWindow.emui[this.appId],
+          app
+        ];
+      }
+    } else {
+      browserWindow.emui[this.appId] = app;
+    }
+    window.emui.app = app;
+    window.addEventListener("beforeunload", this.#onWindowUnload.bind(this));
+  }
+  /**
+   * remove the microapp from the global variable from the parent window and current window
+   */
+  #onWindowUnload() {
+    const browserWindow = getWindow();
+    if (Array.isArray(browserWindow.emui[this.appId])) {
+      const existingApps = browserWindow.emui[this.appId];
+      const index = existingApps.findIndex((app) => app.uuid === this.#uuid);
+      if (index > -1) existingApps.splice(index, 1);
+      if (existingApps.length === 0) {
+        delete browserWindow.emui[this.appId];
+      }
+    } else {
+      delete browserWindow.emui[this.appId];
+    }
+    delete window.emui.app;
+    this.unmount({ containerId: this.containerId }).catch(() => {
+    });
+  }
   getSessionStorageItem(key) {
     let value = sessionStorage.getItem(key);
     if (!value && this.props.host?.getItem) {
@@ -101,6 +155,9 @@ class CMicroAppGuest {
     }
     return host;
   }
+  get uuid() {
+    return this.#uuid;
+  }
   async init(options) {
     this.props = _.merge(this.props, options);
     this.props.history = options?.history || this.props.history;