@elliemae/pui-app-bridge 2.9.4 → 2.16.6

package/dist/esm/appRegistry.js

@@ -0,0 +1,116 @@
+class CAppRegistry {
+  constructor() {
+    if (!window.emui) {
+      window.emui = {};
+    }
+    window.emui.registerApp = this.#registerApp;
+  }
+  /**
+   * global method for guest apps to register themselves with parent
+   * @param param0
+   * @param param0.appId
+   * @param param0.app
+   */
+  #registerApp = ({ appId, app }) => {
+    if (!app?.uuid) throw new Error("application uuid is required");
+    window.emui[appId] = window.emui[appId] || [];
+    if (Array.isArray(window.emui[appId])) {
+      const appIndex = window.emui[appId].findIndex(
+        (eApp) => eApp.uuid === app.uuid
+      );
+      if (appIndex > -1) {
+        window.emui[appId][appIndex] = app;
+      } else {
+        window.emui[appId].push(app);
+      }
+    } else {
+      let existingApp = window.emui[appId];
+      if (existingApp?.uuid === app.uuid) {
+        existingApp = { ...existingApp, ...app };
+        window.emui[appId] = [existingApp];
+      } else if (typeof existingApp.init === void 0) {
+        window.emui[appId] = [{ ...existingApp, ...app }];
+      } else {
+        window.emui[appId] = [window.emui[appId], app];
+      }
+    }
+  };
+  /**
+   * get micro app guest from window object
+   * @param param0 id and uuid
+   * @param param0.id app id
+   * @param param0.uuid unique instance id
+   * @param param0.instanceId
+   * @returns micro app guest
+   */
+  get = ({ id, instanceId }) => {
+    const apps = window.emui?.[id];
+    if (Array.isArray(apps)) {
+      const app = apps.find((eApp) => eApp.uuid === instanceId);
+      return app ?? null;
+    }
+    if (apps?.uuid === instanceId) {
+      return apps;
+    }
+    return null;
+  };
+  /**
+   * add app to global emui window variable
+   * @param id.id
+   * @param id app id
+   * @param instanceId unique instance id
+   * @param id.instanceId
+   * @param id.documentEle
+   */
+  add = ({
+    id,
+    instanceId,
+    documentEle
+  }) => {
+    const newAppInstance = {
+      uuid: instanceId,
+      init: null,
+      mount: null,
+      unmount: null
+    };
+    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 {
+        window.emui[id] = [appInstances, newAppInstance];
+      }
+    } else {
+      window.emui[id] = [newAppInstance];
+    }
+    if (documentEle.defaultView) {
+      documentEle.defaultView.emui = documentEle.defaultView.emui ?? {};
+      documentEle.defaultView.emui.uuid = instanceId;
+    }
+  };
+  /**
+   * 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
+   */
+  delete = ({ id, instanceId }) => {
+    if (Array.isArray(window.emui[id])) {
+      const index = window.emui[id].findIndex(
+        (app) => app.uuid === instanceId
+      );
+      if (index > -1) window.emui[id].splice(index, 1);
+    } else {
+      delete window.emui[id];
+    }
+  };
+}
+export {
+  CAppRegistry
+};

package/dist/esm/config/app.js

@@ -40,14 +40,27 @@ class CAppConfig {
    * @returns true if key exists
    */
   has = (key = "") => lodashHas(this.#gAppConfig, key);
+  /**
+   * add version to the base url
+   * @returns versioned base url
+   */
+  #getVersionedBaseUrl = () => {
+    const regex = /(?:\/)(\d+\.\d+|latest)(?:\/?)?$/;
+    if (!regex.test(this.#baseUrl)) {
+      const majorMinorVersion = this.#version.match(/^(?:\d+\.\d+)*/g);
+      return appendTrailingSlash(
+        `${this.#baseUrl}${majorMinorVersion?.[0] || LATEST_VERSION}`
+      );
+    }
+    return this.#baseUrl;
+  };
   /**
    * load application configuration from the given asset path
    * @param assetPath url path to load app config from
    * @param configUrl
    */
   load = async (configUrl) => {
-    const majorMinorVersion = this.#version.match(/^(?:\d+\.\d+)*/g);
-    const appConfigUrl = configUrl ?? `${this.#baseUrl}${majorMinorVersion && majorMinorVersion[0] || LATEST_VERSION}/app.config.json`;
+    const appConfigUrl = configUrl ?? `${this.#getVersionedBaseUrl()}app.config.json`;
     const response = await fetch(appConfigUrl);
     if (response.ok) {
       try {

package/dist/esm/config/microFE.js

@@ -69,7 +69,8 @@ const getConfig = ({
       name: id,
       mode: "production",
       manifestPath: "./{SYSTEM_VERSION}/",
-      securityContext: SecurityContext.USER
+      securityContext: SecurityContext.USER,
+      isJsModule: true
     },
     config,
     envConfig
@@ -90,8 +91,7 @@ class CMicroFEConfig {
     appConfig
   }) => {
     const mfeAppsFromConfig = appConfig.get(CONFIG_KEY);
-    if (!mfeAppsFromConfig)
-      throw new Error("app.config.json is missing microFrontendApps section");
+    if (!mfeAppsFromConfig) return;
     this.#microFrontendApps = Object.keys(mfeAppsFromConfig).map(
       (appId) => {
         validate(appId, mfeAppsFromConfig[appId]);

package/dist/esm/eventManager.js

@@ -70,17 +70,19 @@ class EventManager {
   };
   /**
    * dispatch an event
+   * @param scriptingObject
    * @param {DispatchEventParam<EventId, Params>} param - parameters for dispatching an event
    */
-  dispatchEvent = async (param) => {
+  dispatchEvent = async (scriptingObject, param) => {
     const {
-      event: { id, name, requiresFeedback, scriptingObject },
+      event: { id, name },
       eventParams,
-      feedbackWaitTime = 1e3
+      eventOptions
     } = param;
+    const { timeout } = eventOptions ?? {};
     if (!id) throw new Error("Event Id is required");
     const listeners = this.#listeners.get(id) || [];
-    if (!requiresFeedback) {
+    if (!timeout || timeout <= 0) {
       this.#emitEvent({
         eventName: name,
         scriptingObject,
@@ -94,7 +96,7 @@ class EventManager {
       eventName: name,
       scriptingObject,
       eventParams,
-      feedbackWaitTime
+      feedbackWaitTime: timeout
     });
   };
   /**
@@ -102,30 +104,28 @@ class EventManager {
    * @param {SubscribeParam<EventId, AppEvents[EventId]>} param - parameters for subscribing to an event
    */
   subscribe = (param) => {
-    const { eventId, listener } = param;
+    const { eventId, callback } = param;
     if (!eventId) throw new Error("eventId is required");
-    if (!listener) throw new Error("Listener is required");
+    if (!callback) throw new Error("Callback is required");
     const listeners = this.#listeners.get(eventId) || [];
-    const subscriptionId = uuidv4();
+    const token = uuidv4();
     listeners.push({
-      subscriptionId,
-      callback: listener
+      token,
+      callback
     });
     this.#listeners.set(eventId, listeners);
-    return subscriptionId;
+    return token;
   };
   /**
    * Unsubscribe from an event
    * @param {UnsubscribeParam<EventId>} param - parameters for unsubscribing from an event
    */
   unsubscribe = (param) => {
-    const { eventId, subscriptionId } = param;
+    const { eventId, token } = param;
     if (!eventId) throw new Error("eventId id is required");
-    if (subscriptionId) {
+    if (token) {
       const listeners = this.#listeners.get(eventId) || [];
-      const index = listeners.findIndex(
-        (listener) => listener.subscriptionId === subscriptionId
-      );
+      const index = listeners.findIndex((listener) => listener.token === token);
       if (index > -1) {
         listeners.splice(index, 1);
         this.#listeners.set(eventId, listeners);

package/dist/esm/frame.html

@@ -6,7 +6,7 @@
     <meta name="mobile-web-app-capable" content="yes" />
     <link rel="icon" href="/favicon.ico" />
     <title>Application</title>
-    <script>
+    <script nonce="__CSP_NONCE__">
       (function (i, s, o, g, r, a, m) {
         i['GoogleAnalyticsObject'] = r;
         (i[r] =
@@ -27,7 +27,7 @@
         'ga',
       );
     </script>
-    <style>
+    <style nonce="__CSP_NONCE__">
       .full-width {
         width: 100%;
       }

package/dist/esm/frame.js

@@ -1,23 +1,35 @@
-const FRAME_CONTAINER_ID_PREFIX = "pui-iframe-container-";
+import frameHtml from "./frame.html?resource";
 const FRAME_APP_CONTAINER_ID_PREFIX = "pui-app-container-";
-const create = (appId, options) => new Promise((resolve, reject) => {
+const create = ({
+  id,
+  instanceId,
+  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", `${FRAME_CONTAINER_ID_PREFIX}${appId}`);
+  frame.setAttribute("id", instanceId);
+  frame.setAttribute("data-testid", id);
   frame.setAttribute("title", options.title);
   frame.setAttribute("allowfullscreen", "true");
   frame.setAttribute("allowtransparency", "true");
-  frame.setAttribute("allow", "microphone; camera");
+  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%;"
   );
-  frame.setAttribute("src", options.src ?? "./frame.html");
+  frame.setAttribute(
+    "src",
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    options.src ?? (frameHtml.default ?? frameHtml)
+  );
   frame.addEventListener("load", () => {
     if (!frame.contentDocument) {
       reject(new Error("Frame content window is null"));
@@ -26,7 +38,15 @@ const create = (appId, options) => new Promise((resolve, reject) => {
     const documentEle = frame.contentDocument;
     const ele = documentEle.getElementById(FRAME_APP_CONTAINER_ID_PREFIX);
     if (ele) {
-      ele.id = `${ele.id}${appId}`;
+      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);
   });
@@ -35,13 +55,9 @@ const create = (appId, options) => new Promise((resolve, reject) => {
   const parentElement = document.getElementById(containerId ?? "") ?? document.body;
   parentElement.appendChild(iframeContainer);
 });
-const get = (appId) => document.getElementById(
-  `${FRAME_CONTAINER_ID_PREFIX}${appId}`
-);
-const remove = (appId) => {
-  const frameEle = document.getElementById(
-    `${FRAME_CONTAINER_ID_PREFIX}${appId}`
-  );
+const get = (instanceId) => document.getElementById(instanceId);
+const remove = (instanceId) => {
+  const frameEle = get(instanceId);
   if (frameEle) {
     frameEle.remove();
   }
@@ -53,6 +69,5 @@ const Frame = {
 };
 export {
   FRAME_APP_CONTAINER_ID_PREFIX,
-  FRAME_CONTAINER_ID_PREFIX,
   Frame
 };

package/dist/esm/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://qa.assets.rd.elliemae.io/pui-diagnostics@3" ></script>
+    <script src="https://cdn.qa1.ice.com/pui-diagnostics@3" ></script>
   </head>
   <body>
     <header class="bg-indigo-300 h-10 flex place-items-center">

package/dist/esm/loaders/script.js

@@ -1,7 +1,5 @@
 import { removeDoubleSlash, isJSDOM } from "../utils.js";
 const APP_SCRIPT_ID_PREFIX = "ice-script-";
-const HEAD_SCRIPTS = /(?:emuiDiagnostics|global|global-prod|emuiUserMonitoring)(?:..*)?.js/;
-const isDeferEligible = (scriptSrc) => !HEAD_SCRIPTS.test(scriptSrc);
 class ScriptLoader {
   #logger;
   constructor(logger) {
@@ -12,12 +10,16 @@ class ScriptLoader {
     hostUrl,
     documentEle,
     fileName,
-    index
+    index,
+    isJsModule = true
   }) => new Promise((resolve, reject) => {
     const url = new URL(fileName, hostUrl);
     const ele = documentEle.createElement("script");
     ele.id = `${APP_SCRIPT_ID_PREFIX}${name.toLowerCase()}-${index}`;
     ele.src = removeDoubleSlash(url.href);
+    ele.nonce = "__CSP_NONCE__";
+    if (!isJSDOM() && isJsModule) ele.type = "module";
+    else ele.async = false;
     ele.onload = resolve.bind(null, ele.id);
     ele.onerror = (err) => {
       reject(
@@ -26,8 +28,6 @@ class ScriptLoader {
         })
       );
     };
-    ele.async = false;
-    if (!isJSDOM() && isDeferEligible(ele.src)) ele.defer = true;
     documentEle.head.appendChild(ele);
   });
   remove = (elementId = "", documentEle = document) => new Promise((resolve) => {

package/dist/esm/loaders/style.js

@@ -14,6 +14,7 @@ class StyleLoader {
   }) => new Promise((resolve, reject) => {
     const ele = documentEle.createElement("link");
     ele.id = `${APP_STYLE_ID_PREFIX}${name.toLowerCase()}-${index}`;
+    ele.nonce = "__CSP_NONCE__";
     ele.rel = "stylesheet";
     const url = new URL(fileName, hostUrl);
     ele.href = removeDoubleSlash(url.href);

package/dist/esm/microfeHost.js

@@ -1,8 +1,15 @@
-import { subscribe, unsubscribe } from "pubsub-js";
-import { FRAME_CONTAINER_ID_PREFIX } from "./frame.js";
+import {
+  Event,
+  isPublicFunction,
+  ScriptingObjectProxy
+} from "@elliemae/microfe-common";
 import { LATEST_VERSION } from "./constant.js";
 class CMicroFEHost {
   #logger;
+  /**
+   * unique id of the iframe container
+   */
+  #containerId;
   #guest;
   #version;
   #soManager;
@@ -14,16 +21,11 @@ class CMicroFEHost {
   constructor(params) {
     this.#guest = params.guest;
     this.#logger = params.logger;
+    this.#containerId = params.containerId;
     this.#version = params?.version || LATEST_VERSION;
     this.#soManager = params.soManager;
     this.#eventManager = params.eventManager;
   }
-  /**
-   * add listener to the scripting object event
-   * @param {SubscribeParam<EventId, EventListener>} params - parameters to add event listener
-   * @returns subscription id
-   */
-  addEventListener = (params) => this.#eventManager.subscribe(params);
   /**
    * application release version
    * @returns release version
@@ -37,43 +39,65 @@ class CMicroFEHost {
    * @param objectId
    * @returns scripting object reference
    */
-  getObject = (objectId) => Promise.resolve(this.#soManager.getObject(objectId, this.#guest));
-  /**
-   * removes listener from the scripting object event
-   * @param {UnsubscribeParam<EventId>} params - parameters to remove event listener
-   */
-  removeEventListener = (params) => {
-    this.#eventManager.unsubscribe(params);
+  getObject = (objectId) => {
+    const so = this.#soManager.getObject(objectId, this.#guest);
+    if (so) {
+      const proxy = new ScriptingObjectProxy(so.id, so.objectType);
+      Object.keys(so).forEach((propName) => {
+        const propValue = so[propName];
+        if (propValue instanceof Event) {
+          Object.defineProperty(proxy, propName, {
+            value: new Event({
+              name: propName,
+              objectId: so.id
+            }),
+            enumerable: true
+          });
+        } else if (isPublicFunction(propValue, propName)) {
+          Object.defineProperty(proxy, propName, {
+            value: (...args) => {
+              Object.defineProperty(propValue, "callContext", {
+                value: { guest: this.#guest },
+                configurable: true,
+                enumerable: true,
+                writable: true
+              });
+              return so[propName](
+                ...args
+              );
+            },
+            enumerable: true
+          });
+        }
+      });
+      return Promise.resolve(proxy);
+    }
+    return Promise.resolve(null);
   };
   /**
    * set the size of the guest application iframe window
    * @param {AppWindowSize} appSize window size of the application
    */
   setAppWindowSize = (appSize) => {
-    const { appId, size } = appSize;
-    const frameEle = document.getElementById(
-      `${FRAME_CONTAINER_ID_PREFIX}${appId}`
-    );
+    if (!this.#containerId) return;
+    const { size } = appSize;
+    const frameEle = document.getElementById(this.#containerId);
     if (frameEle) {
       frameEle.style.height = `${size.height}px`;
     }
   };
-  // deprecated legacy eventing methods (to be removed)
   /**
-   * subscribe to an scripting object event (deprecated)
-   * @param eventId unique id of the event. The format is [scripting object name].[event name]
-   * @param listener callback function to be called when the event is fired
-   * @returns token to be used to unsubscribe
+   * add listener to the scripting object event
+   * @param {SubscribeParam<EventId, EventListener>} params - parameters to add event listener
+   * @returns subscription id
    */
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  subscribe = (eventId, listener) => subscribe(eventId, listener);
+  subscribe = (params) => this.#eventManager.subscribe(params);
   /**
-   * unsubscribe from an scripting object event (deprecated)
-   * @param token unique token returned by subscribe
-   * @param eventId unique id of the event. The format is [scripting object name].[event name]
+   * removes listener from the scripting object event
+   * @param {UnsubscribeParam<EventId>} params - parameters to remove event listener
    */
-  unsubscribe = (token) => {
-    unsubscribe(token);
+  unsubscribe = (params) => {
+    this.#eventManager.unsubscribe(params);
   };
 }
 export {

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

@@ -1,27 +1,26 @@
-(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) => {
+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;
+window.emui = window.emui || { uuid: crypto.randomUUID() };
+window.emui.app = {
+  uuid: window.emui.uuid,
+  init: async (options) => {
     host = options.host;
     parentHistory = options.history;
     logger = options.logger;
     return Promise.resolve();
-  };
-  browserWindow.emui[appId].mount = async () => {
+  },
+  mount: async () => {
     const mainElement = document.createElement("main");
     const pageHeaderEle = document.createElement("h1");
     pageHeaderEle.textContent = appName;
@@ -33,10 +32,12 @@
     mainElement.appendChild(versionEle);
     document.body.appendChild(mainElement);
     return Promise.resolve();
-  };
-  browserWindow.emui[appId].unmount = () => {
+  },
+  unmount: () => {
     const mainEle = document.getElementsByTagName("main")[0];
     if (mainEle) mainEle.remove();
     return Promise.resolve();
-  };
-})();
+  }
+};
+const browserWindow = getWindow();
+browserWindow.emui?.registerApp?.({ appId, app: window.emui.app });

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

@@ -1,27 +1,26 @@
-(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) => {
+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;
+window.emui = window.emui || { uuid: crypto.randomUUID() };
+window.emui.app = {
+  uuid: window.emui.uuid,
+  init: async (options) => {
     host = options.host;
     parentHistory = options.history;
     logger = options.logger;
     return Promise.resolve();
-  };
-  browserWindow.emui[appId].mount = async () => {
+  },
+  mount: async () => {
     const mainElement = document.createElement("main");
     const pageHeaderEle = document.createElement("h1");
     pageHeaderEle.textContent = appName;
@@ -33,10 +32,12 @@
     mainElement.appendChild(versionEle);
     document.body.appendChild(mainElement);
     return Promise.resolve();
-  };
-  browserWindow.emui[appId].unmount = () => {
+  },
+  unmount: () => {
     const mainEle = document.getElementsByTagName("main")[0];
     if (mainEle) mainEle.remove();
     return Promise.resolve();
-  };
-})();
+  }
+};
+const browserWindow = getWindow();
+browserWindow.emui?.registerApp?.({ appId, app: window.emui.app });