@elliemae/pui-app-bridge 2.9.9 → 2.16.6

package/dist/esm/appBridge.js

@@ -1,45 +1,120 @@
-import { publish } from "pubsub-js";
-import { ScriptingObjectManager } from "@elliemae/microfe-common";
+import { throttle } from "lodash";
+import { v4 as uuidv4 } from "uuid";
+import {
+  ScriptingObjectNames
+} from "@elliemae/pui-scripting-object";
+import {
+  ProxyEvent,
+  Event,
+  ScriptingObjectManager,
+  ScriptingObject,
+  isScriptingObjectProxy
+} from "@elliemae/microfe-common";
 import { EventManager } from "./eventManager.js";
-import { Frame } from "./frame.js";
+import { Frame, FRAME_APP_CONTAINER_ID_PREFIX } from "./frame.js";
 import { getCurrentBreakpoint, getViewportSize } from "./typings/window.js";
 import { CAppConfig } from "./config/app.js";
 import { CMicroFEConfig } from "./config/microFE.js";
 import { StyleLoader, ScriptLoader, ManifestLoader } from "./loaders/index.js";
 import { CMicroFEHost } from "./microfeHost.js";
-const APP_CONTAINER_ID_PREFIX = "pui-app-container-";
+import { CAppRegistry } from "./appRegistry.js";
+const KEEP_ALIVE_INTERVAL = 12e4;
+const userInteractionEvents = ["click", "scroll", "keypress", "touchstart"];
 const cssType = /\.css$/;
 const isCss = (fileName) => cssType.test(fileName);
 class CAppBridge {
+  /**
+   * instance of the pui diagnostics logger
+   */
   #logger;
+  /**
+   * release version of the product
+   */
   #version;
+  /**
+   * instance of the script loader
+   */
   #scriptLoader;
+  /**
+   * instance of the style loader
+   */
   #styleLoader;
+  /**
+   * instance of the app config
+   */
   #appConfig;
+  /**
+   * instance of the micro frontend config
+   */
   #microFEConfig = new CMicroFEConfig();
+  /**
+   * instance of the scripting object manager
+   */
   #soManager;
+  /**
+   * instance of the event manager
+   */
   #eventManager;
+  /**
+   * list of active apps
+   */
   #activeApps = /* @__PURE__ */ new Map();
+  /**
+   * instance of the app registry
+   */
+  #appRegistry = new CAppRegistry();
+  /**
+   * flag to extend parent session when user interacts with the guest application
+   */
+  #extendSession = true;
   /**
    * Create a new instance of the AppBridge
-   * @param {AppBridgeParams} params - parameter for the constructor
+   * @param {AppBridgeParams} options - App Bridge constructor parameters
    */
-  constructor(params) {
-    const { logger } = params;
+  constructor(options) {
+    const { logger } = options;
     if (!logger) throw new Error("logger is required");
-    this.#logger = params.logger;
-    this.#version = params.version;
+    this.#logger = options.logger;
+    this.#version = options.version;
+    this.#extendSession = options.extendSession ?? true;
     this.#appConfig = new CAppConfig({
-      version: params.version,
-      baseUrl: params.appConfigBaseUrl
+      version: options.version,
+      baseUrl: options.appConfigBaseUrl
     });
     this.#scriptLoader = new ScriptLoader(logger);
     this.#styleLoader = new StyleLoader(logger);
     this.#soManager = new ScriptingObjectManager();
     this.#eventManager = new EventManager();
   }
-  #removeAssetsFromDOM = (id, documentEle = document) => {
-    const { elementIds } = this.#activeApps.get(id) || {};
+  #isFunction(value) {
+    return typeof value === "function";
+  }
+  /**
+   * check if the value is a proxy event
+   * @param value
+   * @returns
+   */
+  #isProxyEvent = (value) => (
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    value instanceof ProxyEvent || // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    typeof value?.subscribe === "function"
+  );
+  // support v1 scripting objects
+  /**
+   * format error message for app not found
+   * @param id app id
+   * @param instanceId unique instance id
+   * @returns error message
+   */
+  #getAppNotFoundError = (id, instanceId) => `Application ${id} with instance id ${instanceId} is not found. Most probably the appId property of app.config.json is not set to ${id}`;
+  /**
+   * remove assets from DOM
+   * @param instanceId unique instance id of the app
+   * @param documentEle  document element of the app
+   * @returns void
+   */
+  #removeAssetsFromDOM = (instanceId, documentEle = document) => {
+    const { elementIds } = this.#activeApps.get(instanceId) || {};
     if (elementIds) {
       elementIds.forEach((elementId) => {
         const ele = documentEle.getElementById(elementId);
@@ -47,9 +122,26 @@ class CAppBridge {
       });
     }
   };
-  #addAppToActiveAppList = (id, documentEle, elementIds) => {
-    const app = window.emui?.[id] || {};
-    this.#activeApps.set(id, {
+  /**
+   * add app to active app list
+   * @param param0
+   * @param param0.id
+   * @param param0.instanceId
+   * @param elementIds
+   * @param param0.documentEle
+   */
+  #addAppToActiveAppList = ({
+    id,
+    instanceId,
+    documentEle
+  }, elementIds) => {
+    const app = this.#appRegistry.get({ id, instanceId });
+    if (!app) {
+      throw new Error(this.#getAppNotFoundError(id, instanceId));
+    }
+    this.#activeApps.set(instanceId, {
+      id,
+      instanceId,
       elementIds,
       guest: {
         guestWindow: documentEle?.defaultView,
@@ -60,29 +152,37 @@ class CAppBridge {
   #waitAndInitApplication = (options, requests) => {
     const {
       id,
+      instanceId,
+      containerId,
       name,
       hostUrl,
       manifestPath,
       homeRoute,
+      initialRoute,
       history,
       theme,
       documentEle
     } = options;
-    return Promise.all(requests).then(this.#addAppToActiveAppList.bind(null, id, documentEle)).then(
+    return Promise.all(requests).then(
+      this.#addAppToActiveAppList.bind(null, { id, instanceId, documentEle })
+    ).then(
       this.#initApplication.bind(null, {
         id,
+        instanceId,
+        containerId,
         name,
         hostUrl,
         manifestPath,
         homeRoute,
+        initialRoute,
         history,
         theme
       })
     ).catch((err) => {
-      const message = `Application load failed. Unable to load one or more resources for appId: ${options.id}. ${err.message}`;
+      const message = `Application load failed. Unable to load one or more resources for ${options.id} with instance id ${instanceId}. ${err.message}`;
       this.#logger.error({
         message,
-        appId: options.id,
+        appId: id,
         exception: err
       });
       throw new Error(message);
@@ -90,28 +190,31 @@ class CAppBridge {
   };
   #initApplication = async ({
     id,
-    name,
+    instanceId,
+    containerId,
     hostUrl,
     manifestPath,
     homeRoute,
+    initialRoute,
     history,
     theme
   }) => {
-    const app = window.emui?.[id];
+    const app = this.#appRegistry.get({ id, instanceId });
     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}`
+        `Application ${id} with instance id ${instanceId} is not found. Most probably the appId property of app.config.json is not set to ${id}`
       );
     }
     if (!app.init || typeof app.init !== "function")
       throw new Error(
-        `Application ${name} with id ${id} doesn't expose init method`
+        `Application ${id} with instance id ${instanceId} doesn't expose init method`
       );
     const host = new CMicroFEHost({
       guest: {
         id
       },
       version: this.#version,
+      containerId,
       logger: this.#logger,
       soManager: this.#soManager,
       eventManager: this.#eventManager
@@ -121,6 +224,7 @@ class CAppBridge {
       hostUrl,
       manifestPath,
       homeRoute,
+      initialRoute,
       prevState: null,
       history,
       theme,
@@ -130,8 +234,10 @@ class CAppBridge {
     });
   };
   #loadApp = async (options) => {
-    const { id, files, name, hostUrl, documentEle } = options;
-    this.#logger.debug(`Application ${id} is loading...`);
+    const { id, instanceId, files, name, hostUrl, documentEle, isJsModule } = options;
+    this.#logger.debug(
+      `Application ${id} with instance id ${instanceId} is loading...`
+    );
     let assets = files;
     const manifest = await ManifestLoader.get(options);
     assets = ManifestLoader.getFullFileNameofAssets(manifest, files);
@@ -143,55 +249,191 @@ class CAppBridge {
         hostUrl,
         documentEle,
         fileName,
-        index: counter
+        index: counter,
+        isJsModule
       };
       return !isCss(fileName) ? this.#scriptLoader.add(resourceOptions) : this.#styleLoader.add(resourceOptions);
     });
     await this.#waitAndInitApplication(options, requests);
-    this.#logger.audit({ message: "Application loaded", appId: id });
+    this.#logger.audit(
+      `Application ${id} with instance id ${instanceId} loaded`
+    );
   };
-  #unloadApp = ({ id, hostUrl, documentEle }) => {
-    this.#logger.debug(`Application ${id} unloading...`);
-    const app = window.emui?.[id];
+  #unloadApp = ({ id, instanceId, hostUrl, documentEle }) => {
+    this.#logger.debug(
+      `Application ${id} with instance id ${instanceId} unloading...`
+    );
+    const app = this.#appRegistry.get({
+      id,
+      instanceId
+    });
     if (!app) return;
-    this.#removeAssetsFromDOM(id, documentEle);
+    this.#removeAssetsFromDOM(instanceId, documentEle);
     this.#scriptLoader.removeDynamicImportedScripts(hostUrl, documentEle);
     this.#scriptLoader.removePrefetchLinks(hostUrl, documentEle);
     this.#styleLoader.removeDynamicImportedStyles(hostUrl, documentEle);
-    if (window.emui?.[id]) delete window.emui[id];
-    this.#activeApps.delete(id);
-    this.#logger.info({ message: "Application unloaded", appId: id });
+    this.#appRegistry.delete({ id, instanceId });
+    this.#logger.audit(
+      `Application ${id} with instance id ${instanceId} unloaded`
+    );
   };
-  #mountApp = async ({ id, name }) => {
-    const app = window.emui?.[id] || {};
+  #mountApp = async ({ id, instanceId }) => {
+    const app = this.#appRegistry.get({ id, instanceId });
     if (!app?.mount || typeof app?.mount !== "function")
       throw new Error(
-        `Application ${name} with id ${id} doesn't expose mount method`
+        `Application ${id} with instance id ${instanceId} doesn't expose mount method`
       );
     return app.mount({
-      containerId: `${APP_CONTAINER_ID_PREFIX}${id}`,
+      containerId: `${FRAME_APP_CONTAINER_ID_PREFIX}${id}`,
       hostBreakpoint: getCurrentBreakpoint(),
       hostViewportSize: getViewportSize()
     });
   };
-  #unmountApp = ({ id, name }) => {
-    const app = window.emui?.[id] || {};
+  #unmountApp = ({ id, instanceId }) => {
+    const app = this.#appRegistry.get({ id, instanceId });
     if (!app?.unmount) return null;
     if (typeof app.unmount !== "function")
       throw new Error(
-        `Application ${name} with id ${id} doesn't expose unmount method`
+        `Application ${id} with instance id ${instanceId} doesn't expose unmount method`
       );
     return app.unmount({
-      containerId: `${APP_CONTAINER_ID_PREFIX}${id}`
+      containerId: `${FRAME_APP_CONTAINER_ID_PREFIX}${id}`
     });
   };
+  /**
+   * manage session for the guest application by calling the keepSessionAlive method exposed by parent
+   * @param root0
+   * @param root0.id
+   * @param root0.instanceId
+   */
+  #manageSession = ({ id, instanceId }) => {
+    if (!this.#extendSession) return;
+    try {
+      const appObj = this.#soManager.getObject(
+        ScriptingObjectNames.Application
+      );
+      if (!appObj) {
+        this.#logger.warn({
+          message: `Application scripting object not available for ${id} to manage session`
+        });
+        return;
+      }
+      const app = this.#activeApps.get(instanceId);
+      if (!app) return;
+      app.keepAlive = throttle(
+        async () => {
+          try {
+            await appObj.keepSessionAlive();
+          } catch (e) {
+            this.#logger.error(
+              `Error keeping session alive. ${e.message}`
+            );
+          }
+        },
+        KEEP_ALIVE_INTERVAL
+        // throttle time
+      );
+      const frameEle = Frame.get(instanceId);
+      userInteractionEvents.forEach((eventType) => {
+        frameEle?.contentDocument?.addEventListener(eventType, app.keepAlive);
+      });
+    } catch (err) {
+      this.#logger.warn({
+        message: `Application scripting object not available for ${id} to manage session`,
+        exception: err
+      });
+    }
+  };
+  /**
+   * clear session management for the guest application
+   * @param instanceId unique instance id of the application
+   * @param app
+   * @returns
+   */
+  #clearSession = (app) => {
+    if (!this.#extendSession || !app) return;
+    const { keepAlive } = app;
+    if (keepAlive) {
+      userInteractionEvents.forEach((eventType) => {
+        document.removeEventListener(eventType, keepAlive);
+      });
+      app.keepAlive?.cancel();
+    }
+  };
   /**
    * registers scripting object to the host
    * @param {ValueOf<AppObjects>} so scripting object
    * @param {AddScriptingObjectParams} params params to add scripting object
    */
   addScriptingObject = (so, params) => {
-    this.#soManager.addScriptingObject(so, params);
+    if (isScriptingObjectProxy(so)) {
+      const clonedSo = this.cloneScriptingObject(so);
+      this.#soManager.addScriptingObject(clonedSo, params);
+    } else {
+      this.#soManager.addScriptingObject(so, params);
+    }
+  };
+  /**
+   * Create new Scripting Object from SSF scripting object proxy
+   * @param proxy - reference to the scripting object obtained through getObject method
+   * @returns cloned version of the scripting object
+   */
+  cloneScriptingObject = (proxy) => {
+    if (!proxy) throw new Error("proxy is required");
+    const so = new ScriptingObject(proxy.id, proxy.objectType);
+    let unsubscribers = [];
+    Object.keys(proxy).forEach((propName) => {
+      const propValue = proxy[propName];
+      if (this.#isProxyEvent(propValue)) {
+        const event = new Event({
+          name: propValue.name || propName,
+          objectId: so.id
+        });
+        Object.defineProperty(so, propName, {
+          value: event,
+          enumerable: true
+        });
+        const listener = ({
+          eventParams,
+          eventOptions
+        }) => this.dispatchEvent({
+          event,
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          eventParams,
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          eventOptions
+        });
+        const token = propValue.subscribe(listener);
+        unsubscribers.push(() => {
+          propValue.unsubscribe(token);
+        });
+      } else if (this.#isFunction(propValue)) {
+        Object.defineProperty(so, propName, {
+          value: async (...args) => {
+            const retVal = await propValue(...args);
+            return isScriptingObjectProxy(retVal) ? this.cloneScriptingObject(retVal) : retVal;
+          },
+          enumerable: true
+        });
+        if (propName === "dispose") {
+          const defaultImpl = so.dispose;
+          Object.defineProperty(so, propName, {
+            value: () => {
+              so._dispose();
+              return defaultImpl.apply(so);
+            },
+            enumerable: true
+          });
+        }
+      }
+    });
+    so._dispose = () => {
+      unsubscribers.forEach((unsub) => {
+        unsub?.();
+      });
+      unsubscribers = [];
+    };
+    return so;
   };
   /**
    * Close all active guest micro frontend applications
@@ -201,43 +443,68 @@ class CAppBridge {
   };
   /**
    * Close guest micro frontend application
-   * @param id unique id of guest application
+   * @param instanceId unique instance id of the application
    */
-  closeApp = async (id) => {
-    if (!id) throw new Error("id is required");
-    const appConfig = this.#microFEConfig.getConfigById(id);
-    if (!appConfig) {
-      throw new Error(`Application with id ${id} is not found`);
+  closeApp = async (instanceId) => {
+    if (!instanceId) throw new Error("instanceId is required");
+    const app = this.#activeApps.get(instanceId);
+    if (!app) {
+      this.#logger.warn(
+        `Application with instance id ${instanceId} is not found`
+      );
+      return;
     }
-    const { name, hostUrl } = appConfig;
+    this.#activeApps.delete(instanceId);
+    const { id } = app;
+    const appConfig = this.#microFEConfig.getConfigById(id);
+    const { hostUrl } = appConfig;
     try {
-      await this.#unmountApp({ id, name });
+      this.#clearSession(app);
+      await this.#unmountApp({ id, instanceId });
     } finally {
-      const frameEle = Frame.get(id);
-      if (!frameEle?.contentDocument) {
-        throw new Error(`Iframe for application with id ${id} is not found`);
+      const frameEle = Frame.get(instanceId);
+      if (frameEle?.contentDocument) {
+        this.#unloadApp({
+          id,
+          instanceId,
+          hostUrl,
+          documentEle: frameEle.contentDocument
+        });
       }
-      this.#unloadApp({ id, hostUrl, documentEle: frameEle.contentDocument });
-      this.#soManager.removeAllScriptingObjects(id);
-      Frame.remove(id);
+      Frame.remove(instanceId);
     }
   };
   /**
    * dispatch event to guest microfrontend application
-   * @param {DispatchEventParams<EventId, Params>} params - event parameters
+   * @param {DispatchEventParams<EventId, Params, Options>} params - event parameters
    */
-  dispatchEvent = async (params) => this.#eventManager.dispatchEvent(params);
+  dispatchEvent = async (params) => {
+    const {
+      event: { id, name }
+    } = params;
+    if (!id) throw new Error("Event Id is required");
+    const objectId = id.split(".")?.[0];
+    const scriptingObject = this.#soManager.getObject(objectId);
+    if (!scriptingObject) {
+      this.#logger.warn(
+        `Attempt to dispatch event ${name} on unknown object ${objectId}`
+      );
+      return Promise.resolve();
+    }
+    return this.#eventManager.dispatchEvent(scriptingObject, params);
+  };
   /**
-   * Get guest by id
+   * Get App by instanceId
    * @param id unique id of guest
+   * @param instanceId
    * @returns guest instance
    */
-  getGuest = (id) => this.#activeApps.get(id)?.guest;
+  getApp = (instanceId) => this.#activeApps.get(instanceId)?.guest;
   /**
-   * Get list of active guests
+   * Get list of active apps
    * @returns list of active guests
    */
-  getGuests = () => [...this.#activeApps.values()].map((app) => app.guest);
+  getApps = () => [...this.#activeApps.values()].map((app) => app.guest);
   /**
    * Initialize appBridge
    */
@@ -250,87 +517,115 @@ class CAppBridge {
   };
   /**
    * Mount guest micro frontend application into DOM
-   * @param id unique id of guest micro frontend application
-   * @throws Error if application with given id is not found in configuration
+   * @param instanceId unique instance id of guest micro frontend application
+   * @throws Error if application with given instance id is not found in configuration
    */
-  mountApp = async (id) => {
-    if (!id) throw new Error("id is required");
+  mountApp = async (instanceId) => {
+    if (!instanceId) throw new Error("instanceId is required");
+    const { id } = this.#activeApps.get(instanceId) || {};
+    if (!id) {
+      throw new Error(
+        `Application with instance id ${instanceId} is not found`
+      );
+    }
     const appConfig = this.#microFEConfig.getConfigById(id);
     if (!appConfig) {
       throw new Error(`Application with id ${id} is not found`);
     }
-    await this.#mountApp(appConfig);
+    await this.#mountApp({ ...appConfig, instanceId });
   };
   /**
    * Open guest micro frontend application
    * @param {OpenAppParams} params - options to open guest application
    */
   openApp = async (params) => {
-    const { id, frameOptions, history, theme } = params;
+    const { id, frameOptions, history, theme, homeRoute, initialRoute } = params;
+    const instanceId = uuidv4();
     const appConfig = this.#microFEConfig.getConfigById(id);
     if (!appConfig) {
-      throw new Error(`Application with id ${id} is not found`);
+      throw new Error(`Application ${id} is not found in app config`);
     }
-    if (Frame.get(id))
-      throw new Error(`Application with id ${id} is already open`);
-    const frameEle = await Frame.create(id, {
-      title: appConfig.name,
-      ...frameOptions
+    const frameEle = await Frame.create({
+      id,
+      instanceId,
+      manifestPath: appConfig.manifestPath,
+      hostUrl: appConfig.hostUrl,
+      options: {
+        title: appConfig.name,
+        ...frameOptions
+      }
     });
     if (!frameEle?.contentDocument)
       throw new Error("unable to create iframe for the microapp");
     try {
+      this.#appRegistry.add({
+        id,
+        instanceId,
+        documentEle: frameEle.contentDocument
+      });
       await this.#loadApp({
-        ...appConfig,
+        instanceId,
         history,
         theme,
-        documentEle: frameEle.contentDocument
+        documentEle: frameEle.contentDocument,
+        containerId: frameOptions?.containerId,
+        ...appConfig,
+        homeRoute: homeRoute ?? appConfig.homeRoute,
+        initialRoute
       });
-      await this.#mountApp(appConfig);
-      return this.#activeApps.get(id)?.guest;
+      await this.#mountApp({ instanceId, ...appConfig });
+      this.#manageSession({ id, instanceId });
+      return instanceId;
     } catch (err) {
       this.#unloadApp({
         id,
+        instanceId,
         hostUrl: appConfig.hostUrl,
         documentEle: frameEle.contentDocument
       });
-      Frame.remove(id);
+      Frame.remove(instanceId);
       throw err;
     }
   };
-  /**
-   * emit event to all subscribers (deprecated)
-   * @deprecated use dispatchEvent instead
-   * @param eventId unique id of the event. The format is [scripting object name].[event name]
-   * @param data data to be sent to the subscribers of the event
-   * @returns true if event is published successfully
-   */
-  publish = (eventId, data) => publish(eventId, data);
   /**
    * remove all listeners
    */
-  removeAllEventListeners = () => {
+  removeAllEventSubscriptions = () => {
     this.#eventManager.unsubscribeAll();
   };
+  /**
+   * removes all scripting objects from host
+   * @param guestId unique id of the guest application
+   */
+  removeAllScriptingObjects = (guestId) => {
+    this.#soManager.removeAllScriptingObjects(guestId);
+  };
   /**
    * removes scripting object from the host
    * @param objectId unique id of the scripting object
+   * @param guestId
    */
-  removeScriptingObject = (objectId) => {
-    this.#soManager.removeScriptingObject(objectId);
+  removeScriptingObject = (objectId, guestId) => {
+    this.#soManager.removeScriptingObject(objectId, guestId);
   };
   /**
    * Unmount guest micro frontend application from DOM
-   * @param id unique id of guest micro frontend application
+   * @param instanceId unique instance id of guest micro frontend application
    * @throws Error if application with given id is not found in configuration
    */
-  unmountApp = async (id) => {
-    if (!id) throw new Error("id is required");
+  unmountApp = async (instanceId) => {
+    if (!instanceId) throw new Error("instanceId is required");
+    const { id } = this.#activeApps.get(instanceId) || {};
+    if (!id) {
+      throw new Error(
+        `Application with instance id ${instanceId} is not found`
+      );
+    }
     const appConfig = this.#microFEConfig.getConfigById(id);
     if (!appConfig) {
       throw new Error(`Application with id ${id} is not found`);
     }
-    await this.#unmountApp(appConfig);
+    await this.#unmountApp({ ...appConfig, instanceId });
   };
 }
 export {