@elliemae/pui-app-bridge 2.0.0-next.24

package/dist/esm/loaders/style.js

@@ -0,0 +1,73 @@
+var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet = (obj, member, getter) => {
+  __accessCheck(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateSet = (obj, member, value, setter) => {
+  __accessCheck(obj, member, "write to private field");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+var _logger;
+import { removeDoubleSlash } from "../utils.js";
+const APP_STYLE_ID_PREFIX = "ice-style-";
+class StyleLoader {
+  constructor(logger) {
+    __privateAdd(this, _logger, void 0);
+    this.add = ({
+      name,
+      hostUrl,
+      documentEle,
+      fileName,
+      index
+    }) => new Promise((resolve, reject) => {
+      const ele = documentEle.createElement("link");
+      ele.id = `${APP_STYLE_ID_PREFIX}${name.toLowerCase()}-${index}`;
+      ele.rel = "stylesheet";
+      const url = new URL(fileName, hostUrl);
+      ele.href = removeDoubleSlash(url.href);
+      ele.onload = resolve.bind(null, ele.id);
+      ele.onerror = (err) => {
+        reject(
+          new Error(`Unable to load stylesheet ${ele.href}`, {
+            cause: new Error(err)
+          })
+        );
+      };
+      documentEle.head.appendChild(ele);
+    });
+    this.remove = (elementId = "", documentEle = document) => new Promise((resolve) => {
+      const ele = documentEle.getElementById(elementId);
+      if (!ele) {
+        __privateGet(this, _logger).warn(`style with id ${elementId} not found`);
+        resolve();
+      }
+      ele.remove();
+      resolve();
+    });
+    this.removeDynamicImportedStyles = (hostUrl, documentEle) => {
+      const hostPattern = new RegExp(hostUrl, "i");
+      const prefetchElements = documentEle.querySelectorAll('[rel="stylesheet"]');
+      for (let index = prefetchElements.length - 1; index >= 0; index -= 1) {
+        const ele = prefetchElements[index];
+        const { href } = ele;
+        if (hostPattern.test(href))
+          ele.remove();
+      }
+    };
+    __privateSet(this, _logger, logger);
+  }
+}
+_logger = new WeakMap();
+export {
+  APP_STYLE_ID_PREFIX,
+  StyleLoader
+};

package/dist/esm/microAppFactory.js

@@ -0,0 +1,285 @@
+var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet = (obj, member, getter) => {
+  __accessCheck(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateSet = (obj, member, value, setter) => {
+  __accessCheck(obj, member, "write to private field");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+var _logger, _scriptLoader, _styleLoader, _appConfig, _microFEConfig, _host, _activeGuests, _activeApps, _removeAssetsFromDOM, _addAppToActiveAppList, _waitAndInitApplication, _initApplication, _loadApp, _unloadApp, _mountApp, _unmountApp;
+import { Frame } from "./frame.js";
+import { getCurrentBreakpoint, getViewportSize } from "./window.js";
+import { CAppConfig } from "./config/app.js";
+import { CMicroFEConfig } from "./config/microFE.js";
+import { StyleLoader, ScriptLoader, ManifestLoader } from "./loaders/index.js";
+import { CMicroAppHost } from "./microAppHost.js";
+const APP_CONTAINER_ID_PREFIX = "pui-app-container-";
+const cssType = /\.css$/;
+const isCss = (fileName) => cssType.test(fileName);
+class CMicroAppFactory {
+  constructor(params) {
+    __privateAdd(this, _logger, void 0);
+    __privateAdd(this, _scriptLoader, void 0);
+    __privateAdd(this, _styleLoader, void 0);
+    __privateAdd(this, _appConfig, new CAppConfig());
+    __privateAdd(this, _microFEConfig, new CMicroFEConfig());
+    __privateAdd(this, _host, void 0);
+    __privateAdd(this, _activeGuests, /* @__PURE__ */ new Map());
+    __privateAdd(this, _activeApps, {});
+    __privateAdd(this, _removeAssetsFromDOM, (id, documentEle = document) => {
+      __privateGet(this, _activeGuests).delete(id);
+      const { elementIds } = __privateGet(this, _activeApps)[id] || {};
+      if (elementIds) {
+        elementIds.forEach((elementId) => {
+          const ele = documentEle.getElementById(elementId);
+          if (ele)
+            ele.remove();
+        });
+        delete __privateGet(this, _activeApps)[id];
+      }
+    });
+    __privateAdd(this, _addAppToActiveAppList, (id, documentEle, elementIds) => {
+      const app = window.emui?.[id] || {};
+      __privateGet(this, _activeApps)[id] = { elementIds };
+      __privateGet(this, _activeGuests).set(id, {
+        guestWindow: documentEle?.defaultView,
+        ...app
+      });
+    });
+    __privateAdd(this, _waitAndInitApplication, (options, requests) => {
+      const { id, name, hostUrl, manifestPath, homeRoute, history, theme } = options;
+      return Promise.all(requests).then(
+        __privateGet(this, _addAppToActiveAppList).bind(null, options.id, options.documentEle)
+      ).then(
+        __privateGet(this, _initApplication).bind(null, {
+          id,
+          name,
+          hostUrl,
+          manifestPath,
+          homeRoute,
+          history,
+          theme
+        })
+      ).catch((err) => {
+        const message = `Application load failed. Unable to load one or more resources for appId: ${options.id}. ${err.message}`;
+        __privateGet(this, _logger).error({
+          message,
+          appId: options.id,
+          exception: err
+        });
+        throw new Error(message);
+      });
+    });
+    __privateAdd(this, _initApplication, async ({
+      id,
+      name,
+      hostUrl,
+      manifestPath,
+      homeRoute,
+      history,
+      theme
+    }) => {
+      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}`
+        );
+      }
+      if (!app.init || typeof app.init !== "function")
+        throw new Error(
+          `Application ${name} with id ${id} doesn't expose init method`
+        );
+      return app.init({
+        host: __privateGet(this, _host),
+        hostUrl,
+        manifestPath,
+        homeRoute,
+        prevState: null,
+        history,
+        theme,
+        hostBreakpoint: getCurrentBreakpoint(),
+        hostViewportSize: getViewportSize(),
+        logger: __privateGet(this, _logger)
+      });
+    });
+    __privateAdd(this, _loadApp, async (options) => {
+      const { id, files, name, hostUrl, documentEle } = options;
+      __privateGet(this, _logger).debug(`Application ${id} is loading...`);
+      let assets = files;
+      const manifest = await ManifestLoader.get(options);
+      assets = ManifestLoader.getFullFileNameofAssets(manifest, files);
+      let counter = 0;
+      const requests = assets.map((fileName) => {
+        counter += 1;
+        const resourceOptions = {
+          name,
+          hostUrl,
+          documentEle,
+          fileName,
+          index: counter
+        };
+        return !isCss(fileName) ? __privateGet(this, _scriptLoader).add(resourceOptions) : __privateGet(this, _styleLoader).add(resourceOptions);
+      });
+      await __privateGet(this, _waitAndInitApplication).call(this, options, requests);
+      __privateGet(this, _logger).audit({ message: "Application loaded", appId: id });
+    });
+    __privateAdd(this, _unloadApp, ({ id, hostUrl, documentEle }) => {
+      __privateGet(this, _logger).debug(`Application ${id} unloading...`);
+      const app = window.emui?.[id];
+      if (!app)
+        return;
+      __privateGet(this, _removeAssetsFromDOM).call(this, id, documentEle);
+      __privateGet(this, _scriptLoader).removeDynamicImportedScripts(hostUrl, documentEle);
+      __privateGet(this, _scriptLoader).removePrefetchLinks(hostUrl, documentEle);
+      __privateGet(this, _styleLoader).removeDynamicImportedStyles(hostUrl, documentEle);
+      if (window.emui?.[id])
+        delete window.emui[id];
+      __privateGet(this, _logger).info({ message: "Application unloaded", appId: id });
+    });
+    __privateAdd(this, _mountApp, async ({ id, name }) => {
+      const app = window.emui?.[id] || {};
+      if (!app?.mount || typeof app?.mount !== "function")
+        throw new Error(
+          `Application ${name} with id ${id} doesn't expose mount method`
+        );
+      return app.mount({
+        containerId: `${APP_CONTAINER_ID_PREFIX}${id}`,
+        hostBreakpoint: getCurrentBreakpoint(),
+        hostViewportSize: getViewportSize()
+      });
+    });
+    __privateAdd(this, _unmountApp, ({ id, name }) => {
+      const app = window.emui?.[id] || {};
+      if (!app?.unmount)
+        return null;
+      if (typeof app.unmount !== "function")
+        throw new Error(
+          `Application ${name} with id ${id} doesn't expose unmount method`
+        );
+      return app.unmount({
+        containerId: `${APP_CONTAINER_ID_PREFIX}${id}`
+      });
+    });
+    this.getGuests = () => Array.from(__privateGet(this, _activeGuests).values());
+    this.getGuest = (guestId) => __privateGet(this, _activeGuests).get(guestId);
+    this.init = async () => {
+      await __privateGet(this, _appConfig).load();
+      __privateGet(this, _microFEConfig).init({
+        version: __privateGet(this, _host).version,
+        appConfig: __privateGet(this, _appConfig)
+      });
+    };
+    this.openApp = async (options) => {
+      const { id, frameOptions, history, theme } = options;
+      const appConfig = __privateGet(this, _microFEConfig).getConfigById(id);
+      if (!appConfig) {
+        throw new Error(`Application with id ${id} is not found`);
+      }
+      if (Frame.get(id))
+        throw new Error(`Application with id ${id} is already open`);
+      const frameEle = await Frame.create(id, {
+        title: appConfig.name,
+        ...frameOptions
+      });
+      if (!frameEle?.contentDocument)
+        throw new Error("unable to create iframe for the microapp");
+      try {
+        await __privateGet(this, _loadApp).call(this, {
+          ...appConfig,
+          history,
+          theme,
+          documentEle: frameEle.contentDocument
+        });
+        await __privateGet(this, _mountApp).call(this, appConfig);
+      } catch (err) {
+        __privateGet(this, _unloadApp).call(this, {
+          id,
+          hostUrl: appConfig.hostUrl,
+          documentEle: frameEle.contentDocument
+        });
+        Frame.remove(id);
+        throw err;
+      }
+    };
+    this.closeApp = async (id) => {
+      if (!id)
+        throw new Error("id is required");
+      const appConfig = __privateGet(this, _microFEConfig).getConfigById(id);
+      if (!appConfig) {
+        throw new Error(`Application with id ${id} is not found`);
+      }
+      const { name, hostUrl } = appConfig;
+      try {
+        await __privateGet(this, _unmountApp).call(this, { id, name });
+      } finally {
+        const frameEle = Frame.get(id);
+        if (!frameEle?.contentDocument) {
+          throw new Error(`Iframe for application with id ${id} is not found`);
+        }
+        __privateGet(this, _unloadApp).call(this, { id, hostUrl, documentEle: frameEle.contentDocument });
+        Frame.remove(id);
+      }
+    };
+    this.mountApp = async (id) => {
+      if (!id)
+        throw new Error("id is required");
+      const appConfig = __privateGet(this, _microFEConfig).getConfigById(id);
+      if (!appConfig) {
+        throw new Error(`Application with id ${id} is not found`);
+      }
+      await __privateGet(this, _mountApp).call(this, appConfig);
+    };
+    this.unmountApp = async (id) => {
+      if (!id)
+        throw new Error("id is required");
+      const appConfig = __privateGet(this, _microFEConfig).getConfigById(id);
+      if (!appConfig) {
+        throw new Error(`Application with id ${id} is not found`);
+      }
+      await __privateGet(this, _unmountApp).call(this, appConfig);
+    };
+    this.closeAllApps = async () => {
+      await Promise.all(Object.keys(__privateGet(this, _activeApps)).map(this.closeApp));
+    };
+    const { logger } = params;
+    if (!logger)
+      throw new Error("logger is required");
+    __privateSet(this, _logger, params.logger);
+    __privateSet(this, _scriptLoader, new ScriptLoader(logger));
+    __privateSet(this, _styleLoader, new StyleLoader(logger));
+    __privateSet(this, _host, new CMicroAppHost(params));
+  }
+  // public api
+  get host() {
+    return __privateGet(this, _host);
+  }
+}
+_logger = new WeakMap();
+_scriptLoader = new WeakMap();
+_styleLoader = new WeakMap();
+_appConfig = new WeakMap();
+_microFEConfig = new WeakMap();
+_host = new WeakMap();
+_activeGuests = new WeakMap();
+_activeApps = new WeakMap();
+_removeAssetsFromDOM = new WeakMap();
+_addAppToActiveAppList = new WeakMap();
+_waitAndInitApplication = new WeakMap();
+_initApplication = new WeakMap();
+_loadApp = new WeakMap();
+_unloadApp = new WeakMap();
+_mountApp = new WeakMap();
+_unmountApp = new WeakMap();
+export {
+  CMicroAppFactory
+};

package/dist/esm/microAppHost.js

@@ -0,0 +1,100 @@
+var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet = (obj, member, getter) => {
+  __accessCheck(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateSet = (obj, member, value, setter) => {
+  __accessCheck(obj, member, "write to private field");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+var _logger, _version, _eventManager, _scriptingObjects;
+import { publish, subscribe, unsubscribe } from "pubsub-js";
+import { EventManager } from "@elliemae/em-ssf-common";
+import { FRAME_CONTAINER_ID_PREFIX } from "./frame.js";
+import { LATEST_VERSION } from "./constant.js";
+class CMicroAppHost {
+  constructor(params) {
+    __privateAdd(this, _logger, void 0);
+    __privateAdd(this, _version, void 0);
+    __privateAdd(this, _eventManager, void 0);
+    __privateAdd(this, _scriptingObjects, /* @__PURE__ */ new Map());
+    this.setAppWindowSize = (appSize) => {
+      const { appId, size } = appSize;
+      const frameEle = document.getElementById(
+        `${FRAME_CONTAINER_ID_PREFIX}${appId}`
+      );
+      if (frameEle) {
+        frameEle.style.height = `${size.height}px`;
+      }
+    };
+    // Scripting Object methods
+    this.getObject = (objectId) => {
+      const id = objectId.toLowerCase();
+      const data = __privateGet(this, _scriptingObjects).get(id);
+      return Promise.resolve(data || null);
+    };
+    this.registerScriptingObject = (so) => {
+      if (!so?.id || !so?._toJSON) {
+        throw new Error("Object is not derived from ScriptingObject");
+      }
+      const objectId = so.id.toLowerCase();
+      if (objectId === "module")
+        throw new Error(
+          "Do not publish the module object. Create a concrete object derived from it."
+        );
+      if (__privateGet(this, _scriptingObjects).has(objectId))
+        throw new Error(`Scripting Object ${so.id} already exists`);
+      __privateGet(this, _scriptingObjects).set(objectId, so);
+    };
+    this.unregisterScriptingObject = (objectId) => {
+      __privateGet(this, _scriptingObjects).delete(
+        objectId.toLowerCase()
+      );
+    };
+    this.dispatchEvent = async ({
+      event: { id, name, requiresFeedback, scriptingObject },
+      eventParams
+    }) => __privateGet(this, _eventManager).dispatchEvent({
+      event: { id, name, requiresFeedback, scriptingObject },
+      eventParams
+    });
+    this.addEventListener = ({
+      eventId,
+      listener
+    }) => __privateGet(this, _eventManager).subscribe({ eventId, listener });
+    this.removeEventListener = ({
+      eventId,
+      subscriptionId
+    }) => __privateGet(this, _eventManager).unsubscribe({ eventId, subscriptionId });
+    this.removeAllEventListeners = () => __privateGet(this, _eventManager).unsubscribeAll();
+    // deprecated methods
+    this.publish = (eventId, data) => publish(eventId, data);
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    this.subscribe = (eventId, listener) => subscribe(eventId, listener);
+    this.unsubscribe = (token) => {
+      unsubscribe(token);
+    };
+    __privateSet(this, _logger, params.logger);
+    __privateSet(this, _version, params?.version || LATEST_VERSION);
+    __privateSet(this, _eventManager, new EventManager());
+  }
+  get version() {
+    return __privateGet(this, _version);
+  }
+}
+_logger = new WeakMap();
+_version = new WeakMap();
+_eventManager = new WeakMap();
+_scriptingObjects = new WeakMap();
+export {
+  CMicroAppHost
+};

package/dist/esm/package.json

@@ -0,0 +1,4 @@
+{
+  "type": "module",
+  "sideEffects": false
+}

package/dist/esm/tests/constants.js

@@ -0,0 +1,20 @@
+const LATEST_VERSION = "latest";
+const RELEASE_VERSION = "23.1.0";
+const LOAN_APP_ID = "loanapp";
+const TASK_APP_ID = "taskapp";
+const FLIGHTS_APP_ID = "flights";
+const HOTELS_APP_ID = "hotels";
+const APP_CONFIG_JSON_URL = "/latest/app.config.json";
+const LOAN_SAVED_EVENT = "loanSaved";
+const PRE_COMMIT_EVENT = "preCommit";
+export {
+  APP_CONFIG_JSON_URL,
+  FLIGHTS_APP_ID,
+  HOTELS_APP_ID,
+  LATEST_VERSION,
+  LOAN_APP_ID,
+  LOAN_SAVED_EVENT,
+  PRE_COMMIT_EVENT,
+  RELEASE_VERSION,
+  TASK_APP_ID
+};

package/dist/esm/tests/flights/23.1/app.checksum1.css

@@ -0,0 +1,3 @@
+h1 {
+  color: green;
+}

package/dist/esm/tests/flights/23.1/app.checksum1.js

@@ -0,0 +1,43 @@
+(function() {
+  const appId = "flights";
+  const appName = "Flights App";
+  const getWindow = () => {
+    try {
+      window.parent.document;
+      return window.parent;
+    } catch (err) {
+      return window;
+    }
+  };
+  let host = null;
+  let parentHistory = null;
+  let logger = null;
+  const browserWindow = getWindow();
+  browserWindow.emui = browserWindow.emui || {};
+  browserWindow.emui[appId] = browserWindow.emui[appId] || {};
+  browserWindow.emui[appId].init = async (options) => {
+    host = options.host;
+    parentHistory = options.history;
+    logger = options.logger;
+    return Promise.resolve();
+  };
+  browserWindow.emui[appId].mount = async () => {
+    const mainElement = document.createElement("main");
+    const pageHeaderEle = document.createElement("h1");
+    pageHeaderEle.textContent = appName;
+    pageHeaderEle.id = "header";
+    mainElement.appendChild(pageHeaderEle);
+    const versionEle = document.createElement("p");
+    versionEle.textContent = "Version: 23.1";
+    versionEle.id = "version";
+    mainElement.appendChild(versionEle);
+    document.body.appendChild(mainElement);
+    return Promise.resolve();
+  };
+  browserWindow.emui[appId].unmount = () => {
+    const mainEle = document.getElementsByTagName("main")[0];
+    if (mainEle)
+      mainEle.remove();
+    return Promise.resolve();
+  };
+})();

package/dist/esm/tests/flights/23.1/manifest.json

@@ -0,0 +1,4 @@
+{
+  "app.js": "23.1/app.checksum1.js",
+  "app.css": "23.1/app.checksum1.css"
+}

package/dist/esm/tests/flights/latest/app.checksum.css

@@ -0,0 +1,3 @@
+h1 {
+  color: green;
+}

package/dist/esm/tests/flights/latest/app.checksum.js

@@ -0,0 +1,43 @@
+(function() {
+  const appId = "flights";
+  const appName = "Flights App";
+  const getWindow = () => {
+    try {
+      window.parent.document;
+      return window.parent;
+    } catch (err) {
+      return window;
+    }
+  };
+  let host = null;
+  let parentHistory = null;
+  let logger = null;
+  const browserWindow = getWindow();
+  browserWindow.emui = browserWindow.emui || {};
+  browserWindow.emui[appId] = browserWindow.emui[appId] || {};
+  browserWindow.emui[appId].init = async (options) => {
+    host = options.host;
+    parentHistory = options.history;
+    logger = options.logger;
+    return Promise.resolve();
+  };
+  browserWindow.emui[appId].mount = async () => {
+    const mainElement = document.createElement("main");
+    const pageHeaderEle = document.createElement("h1");
+    pageHeaderEle.textContent = appName;
+    pageHeaderEle.id = "header";
+    mainElement.appendChild(pageHeaderEle);
+    const versionEle = document.createElement("p");
+    versionEle.textContent = "Version: latest";
+    versionEle.id = "version";
+    mainElement.appendChild(versionEle);
+    document.body.appendChild(mainElement);
+    return Promise.resolve();
+  };
+  browserWindow.emui[appId].unmount = () => {
+    const mainEle = document.getElementsByTagName("main")[0];
+    if (mainEle)
+      mainEle.remove();
+    return Promise.resolve();
+  };
+})();

package/dist/esm/tests/flights/latest/manifest.json

@@ -0,0 +1,4 @@
+{
+  "app.js": "latest/app.checksum.js",
+  "app.css": "latest/app.checksum.css"
+}

package/dist/esm/tests/hotels/23.1/app.checksum.css

@@ -0,0 +1,3 @@
+h1 {
+  color: red;
+}

package/dist/esm/tests/hotels/23.1/app.checksum.js

@@ -0,0 +1,41 @@
+(function() {
+  const appId = "hotels";
+  const appName = "Hotels App";
+  const getWindow = () => {
+    try {
+      window.parent.document;
+      return window.parent;
+    } catch (err) {
+      return window;
+    }
+  };
+  let host = null;
+  let parentHistory = null;
+  let logger = null;
+  const browserWindow = getWindow();
+  browserWindow.emui = browserWindow.emui || {};
+  browserWindow.emui[appId] = browserWindow.emui[appId] || {};
+  browserWindow.emui[appId].init = async (options) => {
+    host = options.host;
+    parentHistory = options.history;
+    logger = options.logger;
+    return Promise.resolve();
+  };
+  browserWindow.emui[appId].mount = async () => {
+    const mainElement = document.createElement("main");
+    const pageHeaderEle = document.createElement("h1");
+    pageHeaderEle.textContent = appName;
+    mainElement.appendChild(pageHeaderEle);
+    const versionEle = document.createElement("p");
+    versionEle.textContent = "Version: 23.1";
+    mainElement.appendChild(versionEle);
+    document.body.appendChild(mainElement);
+    return Promise.resolve();
+  };
+  browserWindow.emui[appId].unmount = () => {
+    const mainEle = document.getElementsByTagName("main")[0];
+    if (mainEle)
+      mainEle.remove();
+    return Promise.resolve();
+  };
+})();

package/dist/esm/tests/hotels/23.1/manifest.json

@@ -0,0 +1,4 @@
+{
+  "app.js": "23.1/app.checksum.js",
+  "app.css": "23.1/app.checksum.css"
+}

package/dist/esm/tests/hotels/latest/app.checksum.css

@@ -0,0 +1,3 @@
+h1 {
+  color: blue;
+}