@elliemae/pui-app-sdk 6.0.0-alpha.2 → 6.0.0-alpha.4

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

@@ -1,5 +1,7 @@
 import { publish, subscribe, unsubscribe } from "pubsub-js";
+import { throttle } from "lodash";
 import { getDefaultTheme } from "@elliemae/pui-theme";
+import { updateBAEventParameters, Analytics } from "@elliemae/pui-analytics-so";
 import { getStore } from "../../data/store.js";
 import { waitMessage } from "../../data/wait-message/actions.js";
 import { actions as error } from "../../data/error/index.js";
@@ -11,18 +13,17 @@ import { consoleLogger } from "../console-logger.js";
 import { setLogger } from "../logger.js";
 import {
   HOST_WINDOW_RESIZED,
-  HOST_WINDOW_BREAKPOINT_CHANGED
+  HOST_WINDOW_BREAKPOINT_CHANGED,
+  SESSION_RENEWAL_INTERVAL
 } from "../constants.js";
 import {
   getWindow,
   getCurrentBreakpoint,
   getViewportSize as getWindowViewportSize
 } from "../window.js";
-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";
+import { getSSFHost, setSSFHost } from "./ssf-host.js";
 class CMicroAppHost {
   static instance;
   logger;
@@ -31,8 +32,10 @@ class CMicroAppHost {
   activeGuests;
   onInit;
   onRenewSessionTimer;
+  throttleRenewSessionTimer;
   scriptingObjects;
   #ssfHostRef;
+  #appBridge = null;
   // eslint-disable-next-line max-statements
   constructor(params) {
     this.appId = getAppConfigValue("appId");
@@ -46,14 +49,13 @@ class CMicroAppHost {
       theme: params?.theme ?? getDefaultTheme()
     };
     this.activeGuests = {};
-    this.#ssfHostRef = params?.ssfHostRef || null;
+    if (params?.ssfHostRef) setSSFHost(params.ssfHostRef);
+    this.#ssfHostRef = getSSFHost();
     const analyticsObj = params?.analytics ?? new Analytics({ logger: this.logger });
     this.scriptingObjects = {
       analytics: analyticsObj,
       ...params?.scriptingObjects ?? {}
     };
-    this.#ssfHostRef?.publish?.(analyticsObj);
-    this.#ssfHostRef?.addScriptingObject?.(analyticsObj);
     this.getProps = this.getProps.bind(this);
     this.getLogger = this.getLogger.bind(this);
     this.getGuests = this.getGuests.bind(this);
@@ -62,19 +64,30 @@ class CMicroAppHost {
     this.renewSessionTimer = this.renewSessionTimer.bind(this);
     this.setSystemVersion = this.setSystemVersion.bind(this);
     this.sendBAEvent = this.sendBAEvent.bind(this);
+    this.throttleRenewSessionTimer = throttle(
+      async () => {
+        await renewSession();
+        if (this.onRenewSessionTimer) this.onRenewSessionTimer();
+      },
+      SESSION_RENEWAL_INTERVAL,
+      {
+        leading: true
+      }
+    );
     loadAppConfig().then(() => {
-      if (this.onInit) this.onInit(this.props);
+      getAppBridge().then((appBridge) => {
+        this.#appBridge = appBridge;
+        if (this.onInit) this.onInit(this.props);
+      }).catch((ex) => {
+        throw ex;
+      });
     }).catch(() => {
     });
     updateBAEventParameters({ appId: this.appId });
-    setAppDynamicsUserData({
-      appId: this.appId
-    });
   }
   static getInstance(params) {
     if (!this.instance) {
-      this.instance = new this(params);
-      setHostApp(this.instance);
+      this.instance = new CMicroAppHost(params);
     }
     return this.instance;
   }
@@ -134,9 +147,9 @@ class CMicroAppHost {
     const store = getStore();
     if (store) store.dispatch(logout.confirm());
   }
+  // eslint-disable-next-line @typescript-eslint/require-await
   async renewSessionTimer() {
-    await renewSession();
-    if (this.onRenewSessionTimer) this.onRenewSessionTimer();
+    this.throttleRenewSessionTimer();
   }
   getBreakpoint() {
     return getCurrentBreakpoint();
@@ -168,6 +181,45 @@ 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);
+    }
+    this.#ssfHostRef.addScriptingObject(so, params);
+  }
+  /**
+   * dispatch event to child microapp
+   * @param {DispatchEventParams<EventId, Params>} params - event parameters
+   * @returns {Promise<any>} A promise that resolves with the combined results of dispatched events.
+   */
+  async dispatchEvent(params) {
+    if (this.#appBridge) {
+      const [appBridgeResult, ssfResult] = await Promise.all([
+        this.#appBridge.dispatchEvent(params),
+        this.#ssfHostRef.dispatchEvent(params)
+      ]);
+      if (Array.isArray(appBridgeResult) && Array.isArray(ssfResult)) {
+        return appBridgeResult.concat(ssfResult);
+      }
+      return Promise.resolve();
+    }
+    return this.#ssfHostRef.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);
+    }
+    this.#ssfHostRef.removeScriptingObject(objectId);
+  }
 }
 export {
   CMicroAppHost

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

@@ -3,13 +3,14 @@ import { CMicroAppGuest } from "./guest.js";
 import { CMicroAppHost } from "./host.js";
 import { getAppConfigValue } from "../app-config/config.js";
 import { convertRelativeToAbsoluteUrl, isCIBuild } from "../helpers.js";
+import { LaunchMode } from "./types.js";
 const isHost = () => CMicroAppHost.isInitialized();
 const isGuest = () => CMicroAppGuest.isInitialized();
 const isStandAloneGuest = () => isGuest() && window.top === window.self;
 const getLogger = () => isHost() ? CMicroAppHost.getInstance().getLogger() : CMicroAppGuest.getInstance().getLogger();
 const isProduction = (mode) => {
   if (isCIBuild()) return true;
-  if (mode) return mode === "production";
+  if (mode) return mode === LaunchMode.PRODUCTION;
   return true;
 };
 const getVersionedPath = (path) => {
@@ -28,7 +29,7 @@ const getMicroFrontEndAppConfig = (appInfo) => {
     throw new Error(
       `unable to locate application configuraiton for ${appInfo.id} under microFrontendApps section of app.config.json`
     );
-  const { mode = "production" } = microFEAppConfig;
+  const { mode = LaunchMode.PRODUCTION } = microFEAppConfig;
   const envConfig = isProduction(mode) ? microFEAppConfig.production : microFEAppConfig.development;
   if (microFEAppConfig.production) delete microFEAppConfig.production;
   if (microFEAppConfig.development) delete microFEAppConfig.development;
@@ -37,7 +38,8 @@ const getMicroFrontEndAppConfig = (appInfo) => {
     {
       mode: "production",
       hostUrl: "./",
-      manifestPath: "./{SYSTEM_VERSION}"
+      manifestPath: "./{SYSTEM_VERSION}",
+      isJsModule: false
     },
     microFEAppConfig,
     envConfig

package/dist/esm/utils/micro-frontend/module-so.js

@@ -0,0 +1,72 @@
+import { ScriptingObject, Event } from "@elliemae/ssf-host";
+import { getMicroFrontEndAppConfig } from "./index.js";
+const LOG_LEVEL_METHOD = {
+  DEBUG: "debug",
+  INFO: "info",
+  AUDIT: "info",
+  WARN: "warn",
+  ERROR: "error",
+  FATAL: "error"
+};
+const buildModuleParams = (guestId, params = {}) => {
+  const config = getMicroFrontEndAppConfig({ id: guestId });
+  return {
+    moduleId: guestId,
+    hostUrl: config.hostUrl,
+    manifestPath: config.manifestPath,
+    homeRoute: config.homeRoute,
+    ...params
+  };
+};
+class GuestModule extends ScriptingObject {
+  #params;
+  #onUnload = null;
+  constructor(guestId, params = {}) {
+    super("module");
+    this.#params = buildModuleParams(guestId, params);
+  }
+  Close = new Event({ name: "close", objectId: "module" });
+  Unloading = new Event({
+    name: "unloading",
+    objectId: "module"
+  });
+  /**
+   * Bind the teardown logic that runs when the guest calls unload().
+   * Prefixed with _ so SSF's for…in discovery skips it.
+   * The App Bridge auto-binds this in openApp().
+   * @param handler
+   */
+  // eslint-disable-next-line no-underscore-dangle
+  _setUnloadHandler(handler) {
+    this.#onUnload = handler;
+  }
+  getParameters() {
+    return Promise.resolve(this.#params);
+  }
+  getCapabilities() {
+    return Promise.resolve({});
+  }
+  log(message, logLevel) {
+    const logger = window.emui?.logger;
+    if (!logger) return Promise.resolve();
+    const text = typeof message === "string" ? message : message.message;
+    const method = LOG_LEVEL_METHOD[logLevel] ?? "info";
+    const logFn = logger[method];
+    if (logFn) logFn(text);
+    return Promise.resolve();
+  }
+  unload() {
+    if (this.#onUnload) return this.#onUnload();
+    return Promise.resolve();
+  }
+}
+const createGuestModule = (guestId, params = {}, overrides = {}) => {
+  const mod = new GuestModule(guestId, params);
+  Object.assign(mod, overrides);
+  return mod;
+};
+export {
+  GuestModule,
+  buildModuleParams,
+  createGuestModule
+};

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

@@ -0,0 +1,24 @@
+import { SSFHost } from "@elliemae/ssf-host";
+import { Analytics } from "@elliemae/pui-analytics-so";
+import { getLogger } from "../logger.js";
+import { getAppConfigValue } from "../app-config/config.js";
+let ssfHost = null;
+const getSSFHost = () => {
+  if (!ssfHost) {
+    const logger = getLogger();
+    ssfHost = new SSFHost(getAppConfigValue("appId"), {
+      logger,
+      analyticsObj: new Analytics({ logger })
+    });
+  }
+  return ssfHost;
+};
+const setSSFHost = (host) => {
+  if (!ssfHost) {
+    ssfHost = host;
+  }
+};
+export {
+  getSSFHost,
+  setSSFHost
+};

package/dist/esm/utils/micro-frontend/tests/__snapshots__/guest.test.ts.snap

@@ -0,0 +1,242 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CMicroAppGuest - Standalone calls onInit 1`] = `
+{
+  "history": {
+    "action": "POP",
+    "back": [Function],
+    "block": [Function],
+    "createHref": [Function],
+    "forward": [Function],
+    "go": [Function],
+    "listen": [Function],
+    "location": {
+      "hash": "",
+      "key": "default",
+      "pathname": "/",
+      "search": "",
+      "state": null,
+    },
+    "push": [Function],
+    "replace": [Function],
+  },
+  "host": SSFGuest {
+    "addScript": [Function],
+    "close": [Function],
+    "connect": [Function],
+    "getAuthToken": [Function],
+    "getObject": [Function],
+    "listObjects": [Function],
+    "removeScript": [Function],
+    "setLogLevel": [Function],
+    "subscribe": [Function],
+    "unsubscribe": [Function],
+  },
+  "hostUrl": null,
+  "manifestPath": "./latest",
+  "prevState": null,
+  "theme": {
+    "breakpoints": {
+      "0": "512px",
+      "1": "768px",
+      "2": "1024px",
+      "3": "350px",
+      "large": "1024px",
+      "medium": "768px",
+      "small": "512px",
+      "xsmall": "350px",
+    },
+    "colors": {
+      "brand": {
+        "100": "#F6FBFF",
+        "200": "#EBF6FF",
+        "250": "#C9E7FF",
+        "300": "#A3D6FF",
+        "400": "#52A6EC",
+        "500": "#1394E5",
+        "600": "#1E79C2",
+        "700": "#006AA9",
+        "800": "#005181",
+      },
+      "danger": {
+        "200": "#FBEBED",
+        "400": "#FBEBED",
+        "600": "#ED5A64",
+        "900": "#C64252",
+        "950": "#A11B2B",
+      },
+      "neutral": {
+        "000": "#FFFFFF",
+        "050": "#F6F7F9",
+        "080": "#EBEDF0",
+        "100": "#E0E3E8",
+        "200": "#CBCFD7",
+        "300": "#B0B9C8",
+        "400": "#8C93A6",
+        "500": "#697489",
+        "600": "#464F5C",
+        "700": "#353C46",
+        "800": "#25292F",
+      },
+      "success": {
+        "300": "#E1F4ED",
+        "400": "#E1F4ED",
+        "600": "#289F6B",
+        "900": "#207E56",
+        "950": "#185D44",
+      },
+      "warning": {
+        "400": "#FFEFD8",
+        "500": "#E06C29",
+        "600": "#E06C29",
+        "900": "#B25119",
+        "950": "#853C12",
+      },
+    },
+    "fontSizes": {
+      "0": "0.8461rem",
+      "1": "0.9230rem",
+      "2": "1rem",
+      "3": "1.0769rem",
+      "4": "1.2307rem",
+      "5": "1.3846rem",
+      "6": "1.8461rem",
+      "7": "2.7692rem",
+      "hyperlink": {
+        "200": "0.8461rem",
+        "300": "0.9230rem",
+        "400": "1rem",
+      },
+      "label": {
+        "200": "0.8461rem",
+        "300": "0.9230rem",
+        "400": "1rem",
+      },
+      "microText": {
+        "200": "0.8461rem",
+      },
+      "subTitle": {
+        "300": "0.9230rem",
+        "400": "1rem",
+      },
+      "title": {
+        "500": "1.0769rem",
+        "600": "1.2307rem",
+        "700": "1.3846rem",
+        "800": "1.8461rem",
+        "900": "2.7692rem",
+      },
+      "value": {
+        "300": "0.9230rem",
+        "400": "1rem",
+        "500": "1.0769rem",
+        "600": "1.2307rem",
+      },
+    },
+    "fontWeights": {
+      "0": 100,
+      "1": 200,
+      "2": 300,
+      "3": 400,
+      "4": 500,
+      "5": 600,
+      "6": 700,
+      "7": 800,
+      "8": 900,
+      "bold": 900,
+      "light": 200,
+      "regular": 400,
+      "semibold": 600,
+      "thin": 100,
+    },
+    "fonts": {
+      "0": "proxima-nova, Arial, sans-serif",
+      "default": "proxima-nova, Arial, sans-serif",
+    },
+    "letterSpacings": {
+      "mega": "0.25rem",
+      "normal": "normal",
+      "tight": "-0.05rem",
+      "tracked": "0.1rem",
+    },
+    "lineHeights": {
+      "0": "1rem",
+      "1": "1.15rem",
+      "2": "1.25rem",
+      "3": "1.5rem",
+      "l": "1.25rem",
+      "m": "1.15rem",
+      "r": "1rem",
+      "xl": "1.5rem",
+    },
+    "media": {
+      "large": [Function],
+      "medium": [Function],
+      "small": [Function],
+      "xsmall": [Function],
+    },
+    "shadows": {
+      "l": "0 16px 28px 0 rgba(0, 0, 0, 0.24), 0 25px 55px 0 rgba(0, 0, 0, 0.19)",
+      "m": "0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19)",
+      "s": "0 6px 20px 0 rgba(0, 0, 0, 0.24), 0 8px 17px 0 rgba(0, 0, 0, 0.19)",
+      "xl": "0 27px 24px 0 rgba(0, 0, 0, 0.24), 0 40px 77px 0 rgba(0, 0, 0, 0.19)",
+      "xs": "0 1px 5px 0 rgba(0, 0, 0, 0.13), 0 2px 4px 0 rgba(0, 0, 0, 0.2)",
+    },
+    "space": {
+      "0": "0",
+      "1": "4px",
+      "2": "8px",
+      "3": "12px",
+      "4": "16px",
+      "5": "32px",
+      "6": "48px",
+      "7": "56px",
+      "8": "64px",
+      "9": "72px",
+      "l": "56px",
+      "m": "48px",
+      "s": "32px",
+      "xl": "64px",
+      "xs": "16px",
+      "xxl": "72px",
+      "xxs": "8px",
+      "xxs2": "12px",
+      "xxxs": "4px",
+    },
+    "states": {
+      "_": null,
+      "active": "&:active",
+      "checked": "&:checked",
+      "disabled": "&:disabled, &[aria-disabled=true]",
+      "even": "&:even",
+      "first": "&:first-child",
+      "focus": "&:focus",
+      "focusVisible": "&:focus-visible",
+      "focusWithin": "&:focus-within",
+      "hover": "&:hover",
+      "last": "&:last-child",
+      "motionReduce": "@media (prefers-reduced-motion: reduce)",
+      "motionSafe": "@media (prefers-reduced-motion: no-preference)",
+      "odd": "&:odd",
+      "placeholder": "&::placeholder",
+      "visited": "&:visited",
+    },
+    "zIndex": {
+      "backdrop": 500,
+      "dialog": 1000,
+      "loader": 4000,
+      "popper": 2000,
+      "tooltip": 3000,
+    },
+  },
+}
+`;
+
+exports[`CMicroAppGuest - Standalone calls onInit 2`] = `
+{
+  "appId": "app-sdk",
+  "envName": "localhost",
+  "instanceId": "",
+  "userId": "",
+}
+`;