@elliemae/pui-app-bridge 2.21.4 → 2.23.0

package/dist/cjs/appBridge.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,13 +17,21 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var appBridge_exports = {};
 __export(appBridge_exports, {
   CAppBridge: () => CAppBridge
 });
 module.exports = __toCommonJS(appBridge_exports);
-var import_lodash = require("lodash");
+var import_throttle = __toESM(require("lodash/throttle"), 1);
 var import_uuid = require("uuid");
 var import_pui_scripting_object = require("@elliemae/pui-scripting-object");
 var import_microfe_common = require("@elliemae/microfe-common");
@@ -99,7 +109,7 @@ class CAppBridge {
     this.#scriptLoader = new import_loaders.ScriptLoader(logger);
     this.#styleLoader = new import_loaders.StyleLoader(logger);
     this.#soManager = new import_microfe_common.ScriptingObjectManager();
-    this.#eventManager = new import_eventManager.EventManager();
+    this.#eventManager = new import_eventManager.EventManager(this.#logger);
   }
   #isFunction(value) {
     return typeof value === "function";
@@ -144,12 +154,14 @@ class CAppBridge {
    * @param param0.instanceId
    * @param elementIds
    * @param param0.documentEle
+   * @param param0.elementIds
    */
   #addAppToActiveAppList = ({
     id,
     instanceId,
-    documentEle
-  }, elementIds) => {
+    documentEle,
+    elementIds
+  }) => {
     const app = this.#appRegistry.get({ id, instanceId });
     if (!app) {
       throw new Error(this.#getAppNotFoundError(id, instanceId));
@@ -164,45 +176,6 @@ 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, 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 ${options.id} with instance id ${instanceId}. ${err.message}`;
-      this.#logger.error({
-        message,
-        appId: id,
-        exception: err
-      });
-      throw new Error(message);
-    });
-  };
   #initApplication = async ({
     id,
     instanceId,
@@ -249,30 +222,45 @@ class CAppBridge {
     });
   };
   #loadApp = async (options) => {
-    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 import_loaders.ManifestLoader.get(options);
-    assets = import_loaders.ManifestLoader.getFullFileNameofAssets(manifest, files);
-    let counter = 0;
-    const requests = assets.map((fileName) => {
-      counter += 1;
-      const resourceOptions = {
+    try {
+      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 import_loaders.ManifestLoader.get(options);
+      assets = import_loaders.ManifestLoader.getFullFileNameofAssets(manifest, files);
+      const cssAssets = assets.filter((fileName) => isCss(fileName));
+      const jsAssets = assets.filter((fileName) => !isCss(fileName));
+      const loadOptions = {
         name,
         hostUrl,
         documentEle,
-        fileName,
-        index: counter,
-        isJsModule
+        isESMModule: isJsModule
       };
-      return !isCss(fileName) ? this.#scriptLoader.add(resourceOptions) : this.#styleLoader.add(resourceOptions);
-    });
-    await this.#waitAndInitApplication(options, requests);
-    this.#logger.audit(
-      `Application ${id} with instance id ${instanceId} loaded`
-    );
+      const [styleElementIds, scriptElementIds] = await Promise.all([
+        this.#styleLoader.load(cssAssets, loadOptions),
+        this.#scriptLoader.load(jsAssets, loadOptions)
+      ]);
+      this.#addAppToActiveAppList({
+        id,
+        instanceId,
+        documentEle,
+        elementIds: [...styleElementIds, ...scriptElementIds]
+      });
+      await this.#initApplication(options);
+      this.#logger.audit(
+        `Application ${id} with instance id ${instanceId} loaded`
+      );
+    } catch (err) {
+      const message = `Application load failed. Unable to load one or more resources for ${options.id} with instance id ${options.instanceId}. ${err.message}`;
+      this.#logger.error({
+        message,
+        appId: options.id,
+        exception: err
+      });
+      throw new Error(message);
+    }
   };
   #unloadApp = ({ id, instanceId, hostUrl, documentEle }) => {
     this.#logger.debug(
@@ -335,7 +323,7 @@ class CAppBridge {
       }
       const app = this.#activeApps.get(instanceId);
       if (!app) return;
-      app.keepAlive = (0, import_lodash.throttle)(
+      app.keepAlive = (0, import_throttle.default)(
         async () => {
           try {
             await appObj.keepSessionAlive();
@@ -367,11 +355,15 @@ class CAppBridge {
    */
   #clearSession = (app) => {
     if (!this.#extendSession || !app) return;
-    const { keepAlive } = app;
+    const { keepAlive, instanceId } = app;
     if (keepAlive) {
-      userInteractionEvents.forEach((eventType) => {
-        document.removeEventListener(eventType, keepAlive);
-      });
+      const frameEle = import_frame.Frame.get(instanceId);
+      const targetDoc = frameEle?.contentDocument;
+      if (targetDoc) {
+        userInteractionEvents.forEach((eventType) => {
+          targetDoc.removeEventListener(eventType, keepAlive);
+        });
+      }
       app.keepAlive?.cancel();
     }
   };
@@ -460,6 +452,7 @@ class CAppBridge {
    * Close guest micro frontend application
    * @param instanceId unique instance id of the application
    */
+  // eslint-disable-next-line max-statements
   closeApp = async (instanceId) => {
     if (!instanceId) throw new Error("instanceId is required");
     const app = this.#activeApps.get(instanceId);
@@ -469,9 +462,14 @@ class CAppBridge {
       );
       return;
     }
-    this.#activeApps.delete(instanceId);
     const { id } = app;
     const appConfig = this.#microFEConfig.getConfigById(id);
+    if (!appConfig) {
+      this.#logger.warn(`Configuration for application ${id} is not found`);
+      this.#activeApps.delete(instanceId);
+      import_frame.Frame.remove(instanceId);
+      return;
+    }
     const { hostUrl } = appConfig;
     try {
       this.#clearSession(app);
@@ -486,6 +484,7 @@ class CAppBridge {
           documentEle: frameEle.contentDocument
         });
       }
+      this.#activeApps.delete(instanceId);
       import_frame.Frame.remove(instanceId);
     }
   };

package/dist/cjs/appRegistry.js

@@ -34,7 +34,12 @@ class CAppRegistry {
    * @param param0.appId
    * @param param0.app
    */
+  // eslint-disable-next-line complexity
   #registerApp = ({ appId, app }) => {
+    if (!appId) throw new Error("appId is required");
+    if (appId === "__proto__" || appId === "constructor" || appId === "prototype") {
+      throw new Error(`Invalid appId: ${appId}`);
+    }
     if (!app?.uuid) throw new Error("application uuid is required");
     window.emui[appId] = window.emui[appId] || [];
     if (Array.isArray(window.emui[appId])) {
@@ -51,7 +56,7 @@ class CAppRegistry {
       if (existingApp?.uuid === app.uuid) {
         existingApp = { ...existingApp, ...app };
         window.emui[appId] = [existingApp];
-      } else if (typeof existingApp.init === void 0) {
+      } else if (typeof existingApp.init === "undefined") {
         window.emui[appId] = [{ ...existingApp, ...app }];
       } else {
         window.emui[appId] = [window.emui[appId], app];
@@ -90,6 +95,11 @@ class CAppRegistry {
     instanceId,
     documentEle
   }) => {
+    if (!instanceId) {
+      throw new Error(
+        `instanceId (uuid) is required to register application ${id}`
+      );
+    }
     const newAppInstance = {
       uuid: instanceId,
       init: null,
@@ -98,11 +108,6 @@ class CAppRegistry {
     };
     const appInstances = window.emui[id];
     if (appInstances) {
-      if (!instanceId) {
-        throw new Error(
-          `Application ${id} is already loaded. uuid is required to load multiple instances of the same app`
-        );
-      }
       if (Array.isArray(appInstances)) {
         appInstances.push(newAppInstance);
       } else {
@@ -118,10 +123,10 @@ class CAppRegistry {
   };
   /**
    * delete app from global emui window variable
-   * @param id.id app id
-   * @param id.instanceId unique instance id
-   * @param id.id.id
-   * @param id.id.instanceId
+   * @param id.id
+   * @param id app id
+   * @param instanceId unique instance id
+   * @param id.instanceId
    */
   delete = ({ id, instanceId }) => {
     if (Array.isArray(window.emui[id])) {
@@ -129,6 +134,7 @@ class CAppRegistry {
         (app) => app.uuid === instanceId
       );
       if (index > -1) window.emui[id].splice(index, 1);
+      if (window.emui[id].length === 0) delete window.emui[id];
     } else {
       delete window.emui[id];
     }

package/dist/cjs/config/app.js

@@ -33,7 +33,7 @@ __export(app_exports, {
   MicroAppManager: () => MicroAppManager
 });
 module.exports = __toCommonJS(app_exports);
-var import_clone = __toESM(require("lodash/clone"), 1);
+var import_cloneDeep = __toESM(require("lodash/cloneDeep"), 1);
 var import_get = __toESM(require("lodash/get"), 1);
 var import_set = __toESM(require("lodash/set"), 1);
 var import_has = __toESM(require("lodash/has"), 1);
@@ -60,10 +60,9 @@ class CAppConfig {
     this.#baseUrl = (0, import_utils.appendTrailingSlash)(params?.baseUrl || "");
   }
   #parse = (data) => {
-    const { activeEnv } = data;
-    const activeEnvConfig = data.env[activeEnv] || {};
-    if (data.env) delete data.env;
-    this.#gAppConfig = (0, import_merge.default)(data, activeEnvConfig);
+    const { activeEnv, env, ...rest } = data;
+    const activeEnvConfig = env[activeEnv] || {};
+    this.#gAppConfig = (0, import_merge.default)({}, rest, activeEnvConfig);
   };
   /**
    * Get value for the given app config key
@@ -71,14 +70,15 @@ class CAppConfig {
    * @param defaultValue default value to return if key is not found
    * @returns value for the given key
    */
-  get = (key = "", defaultValue = null) => (0, import_clone.default)((0, import_get.default)(this.#gAppConfig, key, defaultValue));
+  get = (key = "", defaultValue = null) => (0, import_cloneDeep.default)((0, import_get.default)(this.#gAppConfig, key, defaultValue));
   /**
    * Set value for the given app config key
    * @param key key to set value for
    * @param value value to set
-   * @returns app config instance
    */
-  set = (key, value) => (0, import_set.default)(this.#gAppConfig, key, value);
+  set = (key, value) => {
+    (0, import_set.default)(this.#gAppConfig, key, value);
+  };
   /**
    * Check if the given key exists in app config
    * @param key key to check
@@ -104,9 +104,21 @@ class CAppConfig {
    * @param assetPath url path to load app config from
    * @param configUrl
    */
+  // eslint-disable-next-line complexity
   load = async (configUrl) => {
     const appConfigUrl = configUrl ?? `${this.#getVersionedBaseUrl()}app.config.json`;
-    const response = await fetch(appConfigUrl);
+    let response;
+    try {
+      response = await fetch(appConfigUrl);
+    } catch (err) {
+      if (!configUrl && this.#version !== import_constant.LATEST_VERSION) {
+        await this.load(`${this.#baseUrl}latest/app.config.json`);
+        return;
+      }
+      throw new Error("Failed to fetch app config", {
+        cause: err
+      });
+    }
     if (response.ok) {
       try {
         const data = await response.json();

package/dist/cjs/config/microFE.js

@@ -41,7 +41,6 @@ const isCIBuild = () => process.env.CI === "true";
 const isProduction = (mode) => {
   if (isCIBuild()) return true;
   return String(mode).toLowerCase() === import_app.LaunchMode.PRODUCTION.toLowerCase();
-  return true;
 };
 const getPathName = (url) => url ? new URL(url).pathname : "";
 const getAbsoluteUrl = (url) => {
@@ -97,12 +96,13 @@ const getConfig = ({
   config,
   version = "latest"
 }) => {
-  const { mode = import_app.LaunchMode.PRODUCTION } = config;
-  const envConfig = isProduction(mode) ? config.production : config.development;
-  if (config.production)
-    delete config.production;
-  if (config.development)
-    delete config.development;
+  const {
+    mode = import_app.LaunchMode.PRODUCTION,
+    production,
+    development,
+    ...restConfig
+  } = config;
+  const envConfig = isProduction(mode) ? production : development;
   const newConfig = (0, import_merge.default)(
     { id },
     {
@@ -112,7 +112,8 @@ const getConfig = ({
       securityContext: import_common.SecurityContext.USER,
       isJsModule: true
     },
-    config,
+    restConfig,
+    { mode },
     envConfig
   );
   newConfig.hostUrl = (0, import_utils.appendTrailingSlash)(

package/dist/cjs/eventManager.js

@@ -22,22 +22,22 @@ __export(eventManager_exports, {
 });
 module.exports = __toCommonJS(eventManager_exports);
 var import_uuid = require("uuid");
-const flatten = (source, target = []) => {
-  const retVal = target || [];
-  if (source && source.forEach) {
-    source.forEach((item) => {
-      flatten(item, retVal);
-    });
-  } else if (typeof source !== "undefined") {
-    retVal.push(source);
-  }
-  return retVal;
-};
 class EventManager {
   /**
    * event listeners
    */
   #listeners = /* @__PURE__ */ new Map();
+  /**
+   * cache for compiled regex patterns used in filter criteria
+   */
+  #regexCache = /* @__PURE__ */ new WeakMap();
+  /**
+   * logger instance
+   */
+  #logger;
+  constructor(logger) {
+    this.#logger = logger;
+  }
   /**
    * call an async function with a timeout
    * @param promise async function to call
@@ -58,21 +58,24 @@ class EventManager {
    */
   #emitEvent = (param) => {
     const { eventName, scriptingObject, eventParams, listeners } = param;
-    listeners.map(async (listener) => {
+    listeners.forEach((listener) => {
       if (listener.criteria) {
         const matches = eventParams ? this.#matchesCriteria(eventParams, listener.criteria) : false;
         if (!matches) {
           return;
         }
       }
-      try {
-        await listener.callback({
+      Promise.resolve(
+        listener.callback({
           obj: scriptingObject,
           eventName,
           eventParams
-        });
-      } catch (e) {
-      }
+        })
+      ).catch((e) => {
+        this.#logger?.warn(
+          `Error in event listener for "${eventName}": ${e.message}`
+        );
+      });
     });
   };
   #emitEventWithFeedback = async ({
@@ -101,7 +104,7 @@ class EventManager {
       );
     });
     const retValues = await Promise.all(promises);
-    return flatten(retValues);
+    return retValues.flat(Infinity).filter((v) => v !== void 0);
   };
   /**
    * Checks if a given payload matches all specified filter criteria.
@@ -135,12 +138,16 @@ class EventManager {
         return !Number.isNaN(numValue) && numValue < condition.lt;
       }
       if ("regex" in condition) {
-        try {
-          const regex = new RegExp(condition.regex);
-          return typeof value === "string" && regex.test(value);
-        } catch {
-          return false;
+        let regex = this.#regexCache.get(condition);
+        if (regex === void 0) {
+          try {
+            regex = new RegExp(condition.regex);
+          } catch {
+            regex = null;
+          }
+          this.#regexCache.set(condition, regex);
         }
+        return regex !== null && typeof value === "string" && regex.test(value);
       }
       return false;
     });

package/dist/cjs/frame.js

@@ -40,58 +40,90 @@ const create = ({
   manifestPath,
   hostUrl,
   options
-}) => new Promise((resolve, reject) => {
-  const iframeContainer = document.createElement("div");
-  iframeContainer.setAttribute(
-    "style",
-    "display: flex;width: 100%;height: 100%;flex-direction: column;overflow: hidden;"
-  );
-  const frame = document.createElement("iframe");
-  frame.setAttribute("id", instanceId);
-  frame.setAttribute("data-testid", id);
-  frame.setAttribute("title", options.title);
-  frame.setAttribute("allowfullscreen", "true");
-  frame.setAttribute("allowtransparency", "true");
-  if (options.permissionPolicy)
-    frame.setAttribute("allow", options.permissionPolicy);
-  if (options.sandbox) frame.setAttribute("sandbox", options.sandbox);
-  frame.setAttribute(
-    "style",
-    options.style ?? "flex-grow: 1;border: none;margin: 0;padding: 0;display: block;min-width: 100%;height: 100%;"
-  );
-  const baseSrc = options.src ?? (import_frame.default.default ?? import_frame.default);
-  const srcWithParams = options.queryParams ? `${baseSrc}${baseSrc.includes("?") ? "&" : "?"}${options.queryParams}` : baseSrc;
-  frame.setAttribute("src", srcWithParams);
-  frame.addEventListener("load", () => {
-    if (!frame.contentDocument) {
-      reject(new Error("Frame content window is null"));
-      return;
+}) => (
+  // eslint-disable-next-line max-statements
+  new Promise((resolve, reject) => {
+    const iframeContainer = document.createElement("div");
+    iframeContainer.setAttribute(
+      "style",
+      "display: flex;width: 100%;height: 100%;flex-direction: column;overflow: hidden;"
+    );
+    const frame = document.createElement("iframe");
+    frame.setAttribute("id", instanceId);
+    frame.setAttribute("data-testid", id);
+    frame.setAttribute("title", options.title);
+    frame.setAttribute("allowfullscreen", "true");
+    frame.setAttribute("allowtransparency", "true");
+    if (options.permissionPolicy)
+      frame.setAttribute("allow", options.permissionPolicy);
+    if (options.sandbox) frame.setAttribute("sandbox", options.sandbox);
+    frame.setAttribute(
+      "style",
+      options.style ?? "flex-grow: 1;border: none;margin: 0;padding: 0;display: block;min-width: 100%;height: 100%;"
+    );
+    const baseSrc = options.src ?? (import_frame.default.default ?? import_frame.default);
+    let srcWithParams = baseSrc;
+    if (options.queryParams) {
+      const sanitized = options.queryParams.replace(
+        /[^a-zA-Z0-9&=_.~%+-]/g,
+        ""
+      );
+      srcWithParams = `${baseSrc}${baseSrc.includes("?") ? "&" : "?"}${sanitized}`;
     }
-    const documentEle = frame.contentDocument;
-    const ele = documentEle.getElementById(FRAME_APP_CONTAINER_ID_PREFIX);
-    if (ele) {
-      ele.id = `${ele.id}${id}`;
-    }
-    let baseTag = documentEle.getElementsByTagName("base")?.[0];
-    if (baseTag) {
-      baseTag.href = new URL(manifestPath, hostUrl).href;
-    } else {
-      baseTag = documentEle.createElement("base");
-      baseTag.href = new URL(manifestPath, hostUrl).href;
-      documentEle.getElementsByTagName("head")[0].appendChild(baseTag);
-    }
-    resolve(frame);
-  });
-  iframeContainer.appendChild(frame);
-  const { containerId } = options;
-  const parentElement = document.getElementById(containerId ?? "") ?? document.body;
-  parentElement.appendChild(iframeContainer);
-});
+    frame.setAttribute("src", srcWithParams);
+    const FRAME_LOAD_TIMEOUT_MS = 1e4;
+    let settled = false;
+    const timeoutId = setTimeout(() => {
+      if (!settled) {
+        settled = true;
+        reject(
+          new Error(
+            `iframe for ${id} failed to load within ${FRAME_LOAD_TIMEOUT_MS}ms`
+          )
+        );
+      }
+    }, FRAME_LOAD_TIMEOUT_MS);
+    frame.addEventListener("error", () => {
+      if (!settled) {
+        settled = true;
+        clearTimeout(timeoutId);
+        reject(new Error(`iframe for ${id} failed to load`));
+      }
+    });
+    frame.addEventListener("load", () => {
+      if (settled) return;
+      settled = true;
+      clearTimeout(timeoutId);
+      if (!frame.contentDocument) {
+        reject(new Error("Frame content window is null"));
+        return;
+      }
+      const documentEle = frame.contentDocument;
+      const ele = documentEle.getElementById(FRAME_APP_CONTAINER_ID_PREFIX);
+      if (ele) {
+        ele.id = `${ele.id}${id}`;
+      }
+      let baseTag = documentEle.getElementsByTagName("base")?.[0];
+      if (baseTag) {
+        baseTag.href = new URL(manifestPath, hostUrl).href;
+      } else {
+        baseTag = documentEle.createElement("base");
+        baseTag.href = new URL(manifestPath, hostUrl).href;
+        documentEle.getElementsByTagName("head")[0].appendChild(baseTag);
+      }
+      resolve(frame);
+    });
+    iframeContainer.appendChild(frame);
+    const { containerId } = options;
+    const parentElement = document.getElementById(containerId ?? "") ?? document.body;
+    parentElement.appendChild(iframeContainer);
+  })
+);
 const get = (instanceId) => document.getElementById(instanceId);
 const remove = (instanceId) => {
   const frameEle = get(instanceId);
   if (frameEle) {
-    frameEle.remove();
+    frameEle.parentElement?.remove();
   }
 };
 const Frame = {

package/dist/cjs/index.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Host</title>
     <script src="https://cdn.tailwindcss.com?plugins=forms"></script>
-    <script src="https://cdn.qa1.ice.com/pui-diagnostics@3" ></script>
+    <script src="https://cdn.mortgagetech.q1.ice.com/pui-diagnostics@3" ></script>
   </head>
   <body>
     <header class="bg-indigo-300 h-10 flex place-items-center">

package/dist/cjs/index.js

@@ -20,10 +20,17 @@ var index_exports = {};
 __export(index_exports, {
   CAppBridge: () => import_appBridge.CAppBridge,
   Event: () => import_microfe_common.Event,
+  LaunchMode: () => import_app.LaunchMode,
+  MicroAppManager: () => import_app.MicroAppManager,
+  ScriptLoader: () => import_script.ScriptLoader,
   ScriptingObject: () => import_microfe_common.ScriptingObject,
-  SecurityContext: () => import_common.SecurityContext
+  SecurityContext: () => import_common.SecurityContext,
+  StyleLoader: () => import_style.StyleLoader
 });
 module.exports = __toCommonJS(index_exports);
 var import_common = require("./typings/common.js");
+var import_app = require("./config/app.js");
 var import_microfe_common = require("@elliemae/microfe-common");
 var import_appBridge = require("./appBridge.js");
+var import_script = require("./loaders/script.js");
+var import_style = require("./loaders/style.js");