@elliemae/pui-app-sdk 5.21.1 → 5.22.0-beta.1

package/dist/cjs/view/tests/task/latest/index.js

@@ -0,0 +1,67 @@
+"use strict";
+const appId = "taskapp";
+const appName = "Task App";
+const appElementId = `pui-app-container-${appId}`;
+const pipelinePath = "/pipeline";
+const pipelineLinkText = "Pipeline";
+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.__TEST__ = browserWindow.__TEST__ ?? {
+  logs: []
+};
+window.emui = window.emui || { uuid: crypto.randomUUID() };
+window.emui.app = {
+  uuid: window.emui.uuid,
+  init: async (options) => {
+    browserWindow.__TEST__.logs.push(`${appId} initializing`);
+    host = options.host;
+    parentHistory = options.history;
+    logger = options.logger;
+  },
+  mount: async () => {
+    browserWindow.__TEST__.logs.push(`${appId} mounting`);
+    const appContainer = document.getElementById(appElementId);
+    if (appContainer) {
+      const mainElement = document.createElement("main");
+      appContainer.appendChild(mainElement);
+      const pageHeaderEle = document.createElement("h1");
+      pageHeaderEle.textContent = appName;
+      mainElement.appendChild(pageHeaderEle);
+      const contentEle = document.createElement("p");
+      contentEle.textContent = "Go to ";
+      mainElement.appendChild(contentEle);
+      const linkEle = document.createElement("a");
+      linkEle.href = "#";
+      linkEle.onclick = () => {
+        parentHistory?.push?.(pipelinePath);
+      };
+      linkEle.textContent = pipelineLinkText;
+      contentEle.appendChild(linkEle);
+      browserWindow.__TEST__.logs.push(`${appId} mounted`);
+    } else {
+      throw new Error(
+        `App container element with id ${appElementId} not found`
+      );
+    }
+  },
+  unmount: () => {
+    browserWindow.__TEST__.logs.push(`${appId} unmounting`);
+    const appContainer = document.getElementById(appElementId);
+    if (appContainer) {
+      appContainer.removeChild(appContainer.getElementsByTagName("main")[0]);
+    }
+    browserWindow.__TEST__.logs.push(`${appId} unmounted`);
+    return Promise.resolve();
+  }
+};
+browserWindow.emui?.registerApp?.({ appId, app: window.emui.app });

package/dist/cjs/view/tests/task/latest/manifest.json

@@ -0,0 +1,4 @@
+{
+  "index.js": "latest/index.js",
+  "index.dev.js": "latest/index.dev.js"
+}

package/dist/cjs/view/tests/travelhub/23.1/app.checksum.css

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

package/dist/cjs/view/tests/travelhub/23.1/app.checksum.js

@@ -0,0 +1,25 @@
+"use strict";
+const appId = "travelhub";
+const appName = "Travel Hub";
+const getWindow = () => {
+  try {
+    window.parent.document;
+    return window.parent;
+  } catch (err) {
+    return window;
+  }
+};
+const browserWindow = getWindow();
+browserWindow.emui = browserWindow.emui || {};
+browserWindow.emui[appId] = browserWindow.emui[appId] || {};
+const mainElement = document.createElement("main");
+mainElement.id = "travelhub";
+const pageHeaderEle = document.createElement("h1");
+pageHeaderEle.id = "header";
+pageHeaderEle.textContent = appName;
+mainElement.appendChild(pageHeaderEle);
+const versionEle = document.createElement("p");
+versionEle.id = "version";
+versionEle.textContent = "Version: 23.1";
+mainElement.appendChild(versionEle);
+document.body.appendChild(mainElement);

package/dist/cjs/view/tests/travelhub/23.1/landing.checksum1.css

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

package/dist/cjs/view/tests/travelhub/23.1/landing.checksum1.js

@@ -0,0 +1,6 @@
+"use strict";
+const mainElement = document.getElementById("travelhub");
+const contentEle = document.createElement("p");
+contentEle.id = "greeting";
+contentEle.textContent = "Hello Travellers!";
+mainElement.appendChild(contentEle);

package/dist/cjs/view/tests/travelhub/23.1/manifest.json

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

package/dist/cjs/view/tests/travelhub/latest/app.checksum.css

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

package/dist/cjs/view/tests/travelhub/latest/app.checksum.js

@@ -0,0 +1,30 @@
+"use strict";
+(function() {
+  const appId = "travelhub";
+  const appName = "Travel Hub";
+  const getWindow = () => {
+    try {
+      window.parent.document;
+      return window.parent;
+    } catch (err) {
+      return window;
+    }
+  };
+  const browserWindow = getWindow();
+  browserWindow.emui = browserWindow.emui ?? {};
+  browserWindow.emui[appId] = browserWindow.emui[appId] ?? {};
+  browserWindow.__TEST__ = browserWindow.__TEST__ ?? {
+    logs: []
+  };
+  const mainElement = document.createElement("main");
+  mainElement.id = "travelhub";
+  const pageHeaderEle = document.createElement("h1");
+  pageHeaderEle.id = "header";
+  pageHeaderEle.textContent = appName;
+  mainElement.appendChild(pageHeaderEle);
+  const versionEle = document.createElement("p");
+  versionEle.id = "version";
+  versionEle.textContent = "Version: latest";
+  mainElement.appendChild(versionEle);
+  document.body.appendChild(mainElement);
+})();

package/dist/cjs/view/tests/travelhub/latest/landing.checksum.css

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

package/dist/cjs/view/tests/travelhub/latest/landing.checksum.js

@@ -0,0 +1,8 @@
+"use strict";
+(function() {
+  const mainElement = document.getElementById("travelhub");
+  const contentEle = document.createElement("p");
+  contentEle.id = "greeting";
+  contentEle.textContent = "Hello Travellers!";
+  mainElement.appendChild(contentEle);
+})();

package/dist/cjs/view/tests/travelhub/latest/manifest.json

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

package/dist/cjs/{utils/micro-frontend/ssfguest-adapter.js → view/tests/utils.js}

@@ -26,33 +26,38 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var ssfguest_adapter_exports = {};
-__export(ssfguest_adapter_exports, {
-  SSFGuestAdapter: () => SSFGuestAdapter
+var utils_exports = {};
+__export(utils_exports, {
+  getMajorMinorVersion: () => getMajorMinorVersion,
+  logger: () => logger,
+  releaseJSThread: () => releaseJSThread,
+  sendJS: () => sendJS,
+  sendJSText: () => sendJSText
+});
+module.exports = __toCommonJS(utils_exports);
+var import_promises = require("fs/promises");
+var import_node_path = __toESM(require("node:path"));
+var import_pui_diagnostics = require("@elliemae/pui-diagnostics");
+const getMajorMinorVersion = (version) => version.split(".").slice(0, 2).join(".");
+const sendJS = async (res, ctx, filePath) => {
+  const fileContent = await (0, import_promises.readFile)(import_node_path.default.join(__dirname, filePath), "utf-8");
+  return res.once(
+    ctx.status(200),
+    ctx.set("Content-Type", "application/javascript"),
+    ctx.body(fileContent)
+  );
+};
+const sendJSText = async (res, ctx, fileContent) => res.once(
+  ctx.status(200),
+  ctx.set("Content-Type", "application/javascript"),
+  ctx.body(fileContent)
+);
+const releaseJSThread = () => new Promise((resolve) => {
+  setTimeout(resolve, 0);
+});
+const logger = (0, import_pui_diagnostics.logger)({
+  transport: (0, import_pui_diagnostics.Console)(),
+  index: "microfe",
+  team: "ui platform",
+  appName: "MicroFE Tests"
 });
-module.exports = __toCommonJS(ssfguest_adapter_exports);
-var import_em_ssf_guest = __toESM(require("@elliemae/em-ssf-guest"));
-class SSFGuestAdapter {
-  async init() {
-    if (!import_em_ssf_guest.default) return false;
-    await import_em_ssf_guest.default.connect();
-    return true;
-  }
-  async getObject(name) {
-    return import_em_ssf_guest.default.getObject(name);
-  }
-  subscribe(message, func) {
-    const callback = (scriptingObj, eventData) => {
-      func(message, eventData);
-    };
-    const [objectId, eventName] = message.split(".");
-    return import_em_ssf_guest.default.subscribe(
-      objectId,
-      eventName || "",
-      callback
-    );
-  }
-  unsubscribe(token, objectId, eventName) {
-    return import_em_ssf_guest.default.unsubscribe(objectId, eventName, token);
-  }
-}

package/dist/esm/analytics/index.js

@@ -15,7 +15,8 @@ const sendBAEvent = ({
   self = true
 }) => {
   if (!self) {
-    const sendEvent = CMicroAppGuest.getInstance()?.getHost()?.sendBAEvent;
+    const host = CMicroAppGuest.getInstance()?.getHost();
+    const sendEvent = host?.sendBAEvent;
     if (sendEvent) {
       sendEvent(data);
     } else {

package/dist/esm/index.js

@@ -60,7 +60,10 @@ import {
 } from "./utils/session.js";
 import { waitMessage } from "./data/wait-message/actions.js";
 import { initServiceWorker } from "./utils/service-worker.js";
-import { CMicroAppGuest } from "./utils/micro-frontend/guest.js";
+import {
+  CMicroAppGuest,
+  CMicroAppGuest as CMicroAppGuest2
+} from "./utils/micro-frontend/guest.js";
 import { CMicroAppHost } from "./utils/micro-frontend/host.js";
 import { enableReactAppForHostIntegration } from "./utils/app-host-integration/react.js";
 import {
@@ -132,6 +135,7 @@ import { actions } from "./data/live-message/index.js";
 import { actions as actions2 } from "./data/error/index.js";
 import { actions as actions3 } from "./data/logout/actions.js";
 import { MicroApp } from "./view/micro-app/index.js";
+import { GuestMicroApp } from "./view/guest-microapp.js";
 import { MicroIFrameApp } from "./view/micro-iframe-app/index.js";
 import { getNavigationLinks } from "./view/micro-app/utils.js";
 import { getStore } from "./data/store.js";
@@ -145,6 +149,7 @@ export {
   Analytics,
   AppRoot,
   Autocomplete,
+  CMicroAppGuest2 as CMicroApp,
   CMicroAppGuest,
   CMicroAppHost,
   CheckBox,
@@ -161,6 +166,7 @@ export {
   FormItemLayout,
   FormLayoutBlockItem,
   FormSubmitButton,
+  GuestMicroApp,
   InputMask,
   InputText,
   LargeTextBox,

package/dist/esm/utils/micro-frontend/app-bridge.js

@@ -0,0 +1,20 @@
+import { CAppBridge } from "@elliemae/pui-app-bridge";
+import { getLogger } from "../logger.js";
+import { Analytics } from "./scripting-objects/analytics.js";
+let appBridge = null;
+const getAppBridge = async () => {
+  if (!appBridge) {
+    const logger = getLogger();
+    const version = window.emui?.version || "latest";
+    appBridge = new CAppBridge({
+      logger,
+      version
+    });
+    await appBridge.init();
+    appBridge.addScriptingObject(new Analytics({ logger }));
+  }
+  return appBridge;
+};
+export {
+  getAppBridge
+};

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

@@ -1,6 +1,7 @@
 import _ from "lodash";
 import { v4 as uuidv4 } from "uuid";
 import { getDefaultTheme } from "@elliemae/pui-theme";
+import { SSFGuest } from "@elliemae/ssf-guest";
 import { getWindow } from "../window.js";
 import { loadAppConfig } from "../app-config/index.js";
 import { getAppConfigValue } from "../app-config/config.js";
@@ -10,8 +11,7 @@ import { setLogger } from "../logger.js";
 import { removeStorageEvents } from "../web-storage.js";
 import { updateBAEventParameters } from "./scripting-objects/web-analytics.js";
 import { setAppDynamicsUserData } from "../../analytics/appdynamics.js";
-import { SSFGuestAdapter } from "./ssfguest-adapter.js";
-import { setHostApp } from "./host-app.js";
+import { getAppBridge } from "./app-bridge.js";
 const isCrossDomain = () => {
   try {
     window.parent.document;
@@ -20,6 +20,11 @@ const isCrossDomain = () => {
     return true;
   }
 };
+var CommunicationMethod = /* @__PURE__ */ ((CommunicationMethod2) => {
+  CommunicationMethod2["SSF"] = "ssf";
+  CommunicationMethod2["APPSDK"] = "app-sdk";
+  return CommunicationMethod2;
+})(CommunicationMethod || {});
 class CMicroAppGuest {
   /**
    * unique microapp id
@@ -30,6 +35,14 @@ class CMicroAppGuest {
   appId;
   props;
   containerId;
+  /**
+   * communication method used between microapps
+   */
+  #communicationMethod;
+  /**
+   * AppBridge instance
+   */
+  #appBridge = null;
   onInit;
   onMount;
   onUnmount;
@@ -40,6 +53,7 @@ class CMicroAppGuest {
     window.emui.uuid = window.emui.uuid || uuidv4();
     this.appId = window.emui?.appId || getAppConfigValue("appId");
     this.#uuid = window.emui.uuid;
+    this.#communicationMethod = "app-sdk" /* APPSDK */;
     this.props = {
       host: null,
       hostUrl: null,
@@ -61,7 +75,7 @@ class CMicroAppGuest {
   }
   static getInstance(params) {
     if (!this.instance) {
-      this.instance = new this(params);
+      this.instance = new CMicroAppGuest(params);
     }
     return this.instance;
   }
@@ -77,6 +91,46 @@ class CMicroAppGuest {
   getLogger() {
     return this.logger;
   }
+  getObject(objectId) {
+    let host = null;
+    if (this.#communicationMethod === "ssf" /* SSF */) {
+      host = this.getHost();
+      return host.getObject(objectId);
+    }
+    host = this.getHost();
+    if (!host) return Promise.resolve(null);
+    return host.getObject(objectId);
+  }
+  /**
+   * subscribe to the scripting object event
+   * @param {SubscribeParam<EventId, AppEvents[EventId]>} params - the parameters for the subscription
+   * @param {string} params.soName - the name of the scripting object
+   * @param {string} params.eventName - the name of the event
+   * @param {Function} params.callback - the callback function to be called when the event is triggered
+   * @returns {void}
+   */
+  subscribe(params) {
+    let host = null;
+    if (this.#communicationMethod === "ssf" /* SSF */) {
+      host = this.getHost();
+      return host.subscribe(params);
+    }
+    host = this.getHost();
+    return host.subscribe(params);
+  }
+  /**
+   * unsubscribe from the scripting object event
+   * @param params - parameters for the unsubscription
+   */
+  unsubscribe(params) {
+    let host = null;
+    if (this.#communicationMethod === "ssf" /* SSF */) {
+      host = this.getHost();
+      host.unsubscribe(params);
+    }
+    host = this.getHost();
+    host.unsubscribe(params);
+  }
   getProps() {
     return this.props;
   }
@@ -141,21 +195,22 @@ class CMicroAppGuest {
   }
   getSessionStorageItem(key) {
     let value = sessionStorage.getItem(key);
-    if (!value && this.props.host?.getItem) {
-      value = this.props.host.getItem(key);
+    const host = this.getHost();
+    if (!value && host?.getItem) {
+      value = host.getItem(key);
     }
     return value;
   }
-  async getSSFAdapter() {
+  async findHost() {
     let host = null;
     if (window.parent !== window) {
       if (!isCrossDomain()) {
-        host = window.parent?.emui?.MicroAppHost || null;
+        host = window.parent?.emui?.MicroAppHost ?? null;
       }
       if (!host) {
-        const ssfAdapter = new SSFGuestAdapter();
-        if (!await ssfAdapter.init()) return null;
-        host = ssfAdapter;
+        host = new SSFGuest({ appLogger: this.logger });
+        await host.connect();
+        this.#communicationMethod = "ssf" /* SSF */;
       }
     }
     return host;
@@ -167,17 +222,21 @@ class CMicroAppGuest {
     this.props = _.merge(this.props, options);
     this.props.history = options?.history || this.props.history;
     if (!this.props.host) {
-      const host = await this.getSSFAdapter();
-      if (host) this.props.host = host;
+      const host = await this.findHost();
+      if (host) {
+        this.props.host = host;
+      }
     }
-    if (this.props.host) setHostApp(this.props.host);
     __webpack_public_path__ = __webpack_public_path__.replace(/\/?$/, "/");
     return loadAppConfig().then(() => {
       const instanceId = this.getSessionStorageItem("instanceId") || "";
       const userId = this.getSessionStorageItem("userId") || "";
       updateBAEventParameters({ appId: this.appId, instanceId, userId });
       setAppDynamicsUserData({ appId: this.appId, instanceId, userId });
-      if (this.onInit) this.onInit(this.props);
+      return getAppBridge().then((appBridge) => {
+        this.#appBridge = appBridge;
+        if (this.onInit) this.onInit(this.props);
+      });
     });
   }
   mount(options = { containerId: "app-container" }) {
@@ -198,6 +257,34 @@ class CMicroAppGuest {
   navigate(url, state) {
     if (url) this.props.history.push(url, state);
   }
+  /**
+   * add scripting object for child microapp to use
+   * @param so - The scripting object to be added.
+   * @param params - Optional parameters for adding the scripting object.
+   */
+  addScriptingObject(so, params) {
+    if (this.#appBridge) {
+      this.#appBridge.addScriptingObject(so, params);
+    }
+  }
+  /**
+   * dispatch event to child microapp
+   * @param {DispatchEventParams<EventId, Params>} params - event parameters
+   */
+  async dispatchEvent(params) {
+    if (this.#appBridge) {
+      await this.#appBridge.dispatchEvent(params);
+    }
+  }
+  /**
+   * removes scripting object from child microapp use
+   * @param objectId unique id of the scripting object
+   */
+  removeScriptingObject(objectId) {
+    if (this.#appBridge) {
+      this.#appBridge.removeScriptingObject(objectId);
+    }
+  }
 }
 export {
   CMicroAppGuest

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

@@ -24,7 +24,7 @@ import { setAppDynamicsUserData } from "../../analytics/appdynamics.js";
 import { Analytics } from "./scripting-objects/analytics.js";
 import { updateBAEventParameters } from "./scripting-objects/web-analytics.js";
 import { renewSession } from "../session.js";
-import { setHostApp } from "./host-app.js";
+import { getAppBridge } from "./app-bridge.js";
 class CMicroAppHost {
   static instance;
   logger;
@@ -36,6 +36,7 @@ class CMicroAppHost {
   throttleRenewSessionTimer;
   scriptingObjects;
   #ssfHostRef;
+  #appBridge = null;
   // eslint-disable-next-line max-statements
   constructor(params) {
     this.appId = getAppConfigValue("appId");
@@ -76,6 +77,11 @@ class CMicroAppHost {
       }
     );
     loadAppConfig().then(() => {
+      getAppBridge().then((appBridge) => {
+        this.#appBridge = appBridge;
+      }).catch((ex) => {
+        throw ex;
+      });
       if (this.onInit) this.onInit(this.props);
     }).catch(() => {
     });
@@ -86,8 +92,7 @@ class CMicroAppHost {
   }
   static getInstance(params) {
     if (!this.instance) {
-      this.instance = new this(params);
-      setHostApp(this.instance);
+      this.instance = new CMicroAppHost(params);
     }
     return this.instance;
   }
@@ -181,6 +186,34 @@ class CMicroAppHost {
   async getObject(name) {
     return this.scriptingObjects[name];
   }
+  /**
+   * add scripting object for child microapp to use
+   * @param so - The scripting object to be added.
+   * @param params - Optional parameters for adding the scripting object.
+   */
+  addScriptingObject(so, params) {
+    if (this.#appBridge) {
+      this.#appBridge.addScriptingObject(so, params);
+    }
+  }
+  /**
+   * dispatch event to child microapp
+   * @param {DispatchEventParams<EventId, Params>} params - event parameters
+   */
+  async dispatchEvent(params) {
+    if (this.#appBridge) {
+      await this.#appBridge.dispatchEvent(params);
+    }
+  }
+  /**
+   * removes scripting object from child microapp use
+   * @param objectId unique id of the scripting object
+   */
+  removeScriptingObject(objectId) {
+    if (this.#appBridge) {
+      this.#appBridge.removeScriptingObject(objectId);
+    }
+  }
 }
 export {
   CMicroAppHost

package/dist/esm/utils/micro-frontend/scripting-objects/analytics.js

@@ -1,8 +1,8 @@
-import ssfHost from "@elliemae/em-ssf-host";
+import { ScriptingObject } from "@elliemae/ssf-host";
 import { getBAEventParameters } from "./web-analytics.js";
 import { getProductAppDetails } from "../../helpers.js";
 import { HeadSampler } from "../../headSampler.js";
-class Analytics extends ssfHost.ScriptingObject {
+class Analytics extends ScriptingObject {
   /**
    * logger instance
    */