@elliemae/pui-app-sdk 5.30.4 → 5.31.0-beta.2

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

@@ -25,6 +25,7 @@ import { Analytics } from "./scripting-objects/analytics.js";
 import { updateBAEventParameters } from "./scripting-objects/web-analytics.js";
 import { renewSession } from "../session.js";
 import { getAppBridge } from "./app-bridge.js";
+import { getSSFHost, setSSFHost } from "./ssf-host.js";
 class CMicroAppHost {
   static instance;
   logger;
@@ -56,14 +57,16 @@ 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.#ssfHostRef.addScriptingObject(
+      analyticsObj
+    );
     this.getProps = this.getProps.bind(this);
     this.getLogger = this.getLogger.bind(this);
     this.getGuests = this.getGuests.bind(this);
@@ -198,15 +201,21 @@ class CMicroAppHost {
     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
    */
   async dispatchEvent(params) {
-    if (this.#appBridge) {
-      await this.#appBridge.dispatchEvent(params);
+    const [appBridgeResult, ssfResult] = await Promise.all([
+      this.#appBridge ? this.#appBridge.dispatchEvent(params) : Promise.resolve(null),
+      this.#ssfHostRef.dispatchEvent(params)
+    ]);
+    if (Array.isArray(appBridgeResult) && Array.isArray(ssfResult)) {
+      return appBridgeResult.concat(ssfResult);
     }
+    return Promise.resolve();
   }
   /**
    * removes scripting object from child microapp use
@@ -216,6 +225,7 @@ class CMicroAppHost {
     if (this.#appBridge) {
       this.#appBridge.removeScriptingObject(objectId);
     }
+    this.#ssfHostRef.removeScriptingObject(objectId);
   }
 }
 export {

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;

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

@@ -117,8 +117,8 @@ class Analytics extends ScriptingObject {
       throw new Error("parameter options is required");
     const startMark = performance.mark(name, { detail: options });
     return Promise.resolve({
-      name: startMark.name,
-      startTime: startMark.startTime
+      name: startMark?.name,
+      startTime: startMark?.startTime
     });
   };
   /**

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

@@ -0,0 +1,24 @@
+import { SSFHost } from "@elliemae/ssf-host";
+import { getLogger } from "../logger.js";
+import { getAppConfigValue } from "../app-config/config.js";
+import { Analytics } from "./scripting-objects/analytics.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/types.js

@@ -0,0 +1,14 @@
+var LaunchMode = /* @__PURE__ */ ((LaunchMode2) => {
+  LaunchMode2["DEVELOPMENT"] = "development";
+  LaunchMode2["PRODUCTION"] = "production";
+  return LaunchMode2;
+})(LaunchMode || {});
+var MicroAppManager = /* @__PURE__ */ ((MicroAppManager2) => {
+  MicroAppManager2["SSF"] = "ssf";
+  MicroAppManager2["APPSDK"] = "appsdk";
+  return MicroAppManager2;
+})(MicroAppManager || {});
+export {
+  LaunchMode,
+  MicroAppManager
+};

package/dist/esm/view/guest-microapp.js

@@ -1,10 +1,15 @@
 import { jsx } from "react/jsx-runtime";
-import { memo, useLayoutEffect, useRef } from "react";
+import { memo, useLayoutEffect, useRef, useCallback } from "react";
 import styled from "styled-components";
 import { useDispatch } from "react-redux";
+import { MicroAppManager } from "../utils/micro-frontend/types.js";
 import { getAppBridge } from "../utils/micro-frontend/app-bridge.js";
+import { getSSFHost } from "../utils/micro-frontend/ssf-host.js";
 import { waitMessage } from "../data/wait-message/actions.js";
-import { getLogger } from "../utils/micro-frontend/index.js";
+import {
+  getLogger,
+  getMicroFrontEndAppConfig
+} from "../utils/micro-frontend/index.js";
 const Div = styled.div`
   display: flex;
   width: 100%;
@@ -20,35 +25,67 @@ const useAppRenderer = (props) => {
     initialRoute,
     onLoadComplete,
     onUnloadComplete,
-    containerId
+    containerId,
+    ssfAppOptions = {}
   } = props;
   const dispatch = useDispatch();
+  const getConfig = useCallback(
+    () => getMicroFrontEndAppConfig({
+      id
+    }),
+    [id]
+  );
   useLayoutEffect(() => {
     let isMounted = true;
     let appBridge = null;
+    let ssfHost = null;
     let unloadInProgress = Promise.resolve();
     let instanceId = null;
     (async () => {
       await unloadInProgress;
       dispatch(waitMessage.open());
       try {
-        appBridge = await getAppBridge();
-        if (!appBridge)
-          throw new Error(`Failed to load ${id}, AppBridge not initialized`);
-        if (isMounted) {
-          instanceId = await appBridge.openApp({
-            id,
-            frameOptions: { containerId },
-            history,
-            homeRoute,
-            initialRoute
-          });
-          setTimeout(() => {
-            try {
-              onLoadComplete?.(instanceId);
-            } catch (ex) {
-            }
-          }, 0);
+        const {
+          microappManager = MicroAppManager.APPSDK,
+          hostUrl,
+          name
+        } = getConfig();
+        if (microappManager === MicroAppManager.SSF) {
+          ssfHost = getSSFHost();
+          if (!ssfHost)
+            throw new Error(`Failed to load ${id}, SSFHost not initialized`);
+          if (isMounted) {
+            const { searchParams, ...guestOptions } = ssfAppOptions;
+            const guest = ssfHost.loadGuest({
+              id,
+              url: hostUrl,
+              title: name,
+              targetElement: document.getElementById(containerId),
+              searchParams,
+              onLoad: onLoadComplete,
+              options: guestOptions
+            });
+            instanceId = guest.id;
+          }
+        } else {
+          appBridge = await getAppBridge();
+          if (!appBridge)
+            throw new Error(`Failed to load ${id}, AppBridge not initialized`);
+          if (isMounted) {
+            instanceId = await appBridge.openApp({
+              id,
+              frameOptions: { containerId },
+              history,
+              homeRoute,
+              initialRoute
+            });
+            setTimeout(() => {
+              try {
+                onLoadComplete?.(instanceId);
+              } catch (ex) {
+              }
+            }, 0);
+          }
         }
       } catch (ex) {
         getLogger().error({
@@ -58,6 +95,8 @@ const useAppRenderer = (props) => {
         isMounted = false;
         if (appBridge && instanceId)
           unloadInProgress = appBridge.closeApp(instanceId);
+        if (ssfHost && instanceId)
+          unloadInProgress = Promise.resolve(ssfHost.unloadGuest(instanceId));
         throw ex;
       } finally {
         dispatch(waitMessage.close());
@@ -65,19 +104,21 @@ const useAppRenderer = (props) => {
     })();
     return () => {
       isMounted = false;
-      if (appBridge) {
+      if (ssfHost) {
+        unloadInProgress = Promise.resolve(ssfHost.unloadGuest(instanceId));
+      } else if (appBridge) {
         unloadInProgress = appBridge.closeApp(instanceId);
-        unloadInProgress.then(() => {
-          instanceId = null;
-          setTimeout(() => {
-            try {
-              onUnloadComplete?.();
-            } catch (ex) {
-            }
-          }, 0);
-        }).catch(() => {
-        });
       }
+      unloadInProgress.then(() => {
+        instanceId = null;
+        setTimeout(() => {
+          try {
+            onUnloadComplete?.();
+          } catch (ex) {
+          }
+        }, 0);
+      }).catch(() => {
+      });
     };
   }, [
     containerId,
@@ -87,7 +128,9 @@ const useAppRenderer = (props) => {
     initialRoute,
     id,
     onLoadComplete,
-    onUnloadComplete
+    onUnloadComplete,
+    getConfig,
+    ssfAppOptions
   ]);
 };
 const GuestMicroApp = memo(

package/dist/esm/view/tests/__snapshots__/guest-microapp.test.tsx.snap

@@ -1,5 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`GuestMicroApp with SSFHost should open ssfapp 1`] = `
+"<html lang="en"><head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SSFApp</title>
+    <!-- <script src="https://cdn.mortgagetech.q1.ice.com/ssf-guest"></script> -->
+</head>
+<body>
+    <h1>SSF App</h1>
+    <output id="output">ssfapp starting
+ssfapp loaded</output>
+    <script src="./latest/index.js"></script>
+
+</body></html>"
+`;
+
 exports[`MicroAppV2 should open loanapp and call init and mount methods 1`] = `
 Document {
   "location": Location {

package/dist/esm/view/tests/app.config.json

@@ -15,6 +15,11 @@
         "files": ["index.js"]
       }
     },
+    "ssfapp": {
+      "name": "SSF App",
+      "hostUrl": "./ssfapp",
+      "microappManager": "ssf"
+    },
     "taskapp": {
       "name": "Task",
       "hostUrl": "./task",

package/dist/esm/view/tests/constants.js

@@ -1,6 +1,7 @@
 const LATEST_VERSION = "latest";
 const RELEASE_VERSION = "23.1.0";
 const LOAN_APP_ID = "loanapp";
+const SSF_APP_ID = "ssfapp";
 const TASK_APP_ID = "taskapp";
 const FLIGHTS_APP_ID = "flights";
 const HOTELS_APP_ID = "hotels";
@@ -20,5 +21,6 @@ export {
   LOAN_SAVED_EVENT,
   PRE_COMMIT_EVENT,
   RELEASE_VERSION,
+  SSF_APP_ID,
   TASK_APP_ID
 };

package/dist/esm/view/tests/serverHandlers.js

@@ -172,6 +172,21 @@ const serverHandlers = [
     "/loan/latest/manifest.json",
     (req, res, ctx) => res(ctx.json(loanAppManifest))
   ),
+  rest.get("/ssfapp/", async (req, res, ctx) => {
+    const fileContent = await readFile(
+      path.join(__dirname, "ssfapp/index.html"),
+      "utf-8"
+    );
+    return res(
+      ctx.status(200),
+      ctx.set("Content-Type", "text/html"),
+      ctx.body(fileContent)
+    );
+  }),
+  rest.get("/ssfapp/latest/index.js", async (req, res, ctx) => {
+    const newRes = await sendJS(res, ctx, "./ssfapp/latest/index.js");
+    return newRes;
+  }),
   ...getServerHandlers()
 ];
 export {

package/dist/esm/view/tests/ssfapp/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SSFApp</title>
+    <!-- <script src="https://cdn.mortgagetech.q1.ice.com/ssf-guest"></script> -->
+</head>
+<body>
+    <h1>SSF App</h1>
+    <output id="output"></output>
+    <script src="./latest/index.js"></script>
+</body>
+</html>

package/dist/esm/view/tests/ssfapp/latest/index.js

@@ -0,0 +1,15 @@
+const appId = "ssfapp";
+const output = document.getElementById("output");
+output.textContent = `${appId} starting`;
+window.addEventListener("beforeunload", () => {
+  if (output) {
+    output.textContent += `
+${appId} unloading`;
+  }
+});
+document.addEventListener("load", () => {
+  if (output) {
+    output.textContent += `
+${appId} loaded`;
+  }
+});

package/dist/esm/view/tests/ssfapp/latest/manifest.json

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

package/dist/types/lib/utils/micro-frontend/guest.d.ts

@@ -1,6 +1,7 @@
 import { DefaultTheme } from 'styled-components';
 import { History, To } from 'history';
 import type { IMicroAppGuest, IMicroAppHost, InitOptions, MountOptions } from '@elliemae/pui-micro-frontend-base';
+import { SSFHost } from '@elliemae/ssf-host';
 import { ScriptingObjectTypes, Events } from '@elliemae/pui-scripting-object';
 import { IMicroFEHost } from '@elliemae/pui-app-bridge';
 import type { ScriptingObjects, EventListeners, SubscribeParam, UnsubscribeParam, DispatchEventParam, EventOptions, AddScriptingObjectParams } from '@elliemae/microfe-common';
@@ -24,6 +25,7 @@ interface ConstructorParams {
     onUnmount?: OnUnMountCallback;
     onGetRef?: OnGetRefCallback;
     history?: History;
+    ssfHostRef?: SSFHost<ScriptingObjectTypes, Events> | null;
 }
 export declare class CMicroAppGuest<AppObjects extends ScriptingObjects = Partial<ScriptingObjectTypes>, AppEvents extends EventListeners = Events> implements IMicroAppGuest<AppObjects, AppEvents> {
     #private;
@@ -73,10 +75,11 @@ export declare class CMicroAppGuest<AppObjects extends ScriptingObjects = Partia
      */
     addScriptingObject<SO extends AppObjects[keyof AppObjects]>(so: SO, params?: AddScriptingObjectParams): void;
     /**
-     * dispatch event to child microapp
-     * @param {DispatchEventParams<EventId, Params>} params - event parameters
+     * Dispatches an event to the child microapp.
+     * @param {DispatchEventParam<EventId, Params, Options>} params - Event parameters.
+     * @returns {Promise<any[]>} A promise that resolves with the combined results of dispatched events.
      */
-    dispatchEvent<EventId extends Extract<keyof AppEvents, string>, Params extends Parameters<AppEvents[EventId]>[0]['eventParams'], Options extends EventOptions>(params: DispatchEventParam<EventId, Params, Options>): Promise<void>;
+    dispatchEvent<EventId extends Extract<keyof AppEvents, string>, Params extends Parameters<AppEvents[EventId]>[0]['eventParams'], Options extends EventOptions>(params: DispatchEventParam<EventId, Params, Options>): Promise<void | any[]>;
     /**
      * removes scripting object from child microapp use
      * @param objectId unique id of the scripting object

package/dist/types/lib/utils/micro-frontend/host.d.ts

@@ -76,7 +76,7 @@ export declare class CMicroAppHost<AppObjects extends ScriptingObjects = Partial
      * dispatch event to child microapp
      * @param {DispatchEventParams<EventId, Params>} params - event parameters
      */
-    dispatchEvent<EventId extends Extract<keyof AppEvents, string>, Params extends Parameters<AppEvents[EventId]>[0]['eventParams'], Options extends EventOptions>(params: DispatchEventParam<EventId, Params, Options>): Promise<void>;
+    dispatchEvent<EventId extends Extract<keyof AppEvents, string>, Params extends Parameters<AppEvents[EventId]>[0]['eventParams'], Options extends EventOptions>(params: DispatchEventParam<EventId, Params, Options>): Promise<void | any[]>;
     /**
      * removes scripting object from child microapp use
      * @param objectId unique id of the scripting object

package/dist/types/lib/utils/micro-frontend/ssf-host.d.ts

@@ -0,0 +1,5 @@
+import { SSFHost } from '@elliemae/ssf-host';
+import { ScriptingObjectTypes, Events } from '@elliemae/pui-scripting-object';
+import type { ScriptingObjects, EventListeners } from '@elliemae/microfe-common';
+export declare const getSSFHost: <AppObjects extends ScriptingObjects = ScriptingObjectTypes, AppEvents extends EventListeners = Events>() => SSFHost<AppObjects, AppEvents>;
+export declare const setSSFHost: (host: SSFHost<any, any>) => void;

package/dist/types/lib/utils/micro-frontend/types.d.ts

@@ -1,19 +1,86 @@
 import { InitOptions } from '@elliemae/pui-micro-frontend-base';
 import { Events, ScriptingObjectTypes } from '@elliemae/pui-scripting-object';
+/**
+ * Files specific to the mode of the micro-frontend application.
+ */
 type EnvConfig = {
+    /**
+     * Array of file paths specific to the environment (development or production).
+     * relative or absolute URLs
+     */
     files: Array<string>;
 };
+/**
+ * Modes in which a micro-frontend application can operate.
+ */
+export declare enum LaunchMode {
+    DEVELOPMENT = "development",
+    PRODUCTION = "production"
+}
+/**
+ * Library that manages the micro-frontend application.
+ */
+export declare enum MicroAppManager {
+    SSF = "ssf",
+    APPSDK = "appsdk"
+}
+/**
+ * Configuration object for a micro-frontend application.
+ */
 export type MicroAppConfig = {
+    /**
+     * Unique identifier for the micro-frontend application.
+     */
     id: string;
+    /**
+     * Human-readable name for the micro-frontend application.
+     */
     name: string;
-    mode?: string;
+    /**
+     * Optional title for the micro-frontend application.
+     */
+    title?: string;
+    /**
+     * Mode in which the micro-frontend operates (e.g., 'development', 'production').
+     */
+    mode?: LaunchMode;
+    /**
+     * Base URL where the micro-frontend is hosted.
+     */
     hostUrl?: string;
+    /**
+     * Path to the manifest file for the micro-frontend.
+     */
     manifestPath?: string;
+    /**
+     * Route to the home page of the micro-frontend application.
+     */
     homeRoute: string;
+    /**
+     * If true, the micro-frontend is treated as a JavaScript module.
+     */
     isJsModule?: boolean;
+    /**
+     * Library that manages the micro-frontend application (e.g., 'ssf', 'appsdk').
+     * @default 'appsdk'
+     */
+    microappManager?: MicroAppManager;
+    /**
+     * Array of file paths required by the micro-frontend application.
+     * relative or absolute URLs
+     */
     files?: Array<string>;
+    /**
+     * files specific to the development build.
+     */
     development?: EnvConfig;
+    /**
+     * files specific to the production build.
+     */
     production?: EnvConfig;
+    /**
+     * The Document object associated with the micro-frontend application.
+     */
     documentEle: Document;
 } & InitOptions<Partial<ScriptingObjectTypes>, Events>;
 export {};

package/dist/types/lib/view/guest-microapp.d.ts

@@ -1,10 +1,59 @@
+import { OpenMode, IFrameSandboxValues, WindowFeatures } from '@elliemae/ssf-host';
 import { OpenAppParams } from '@elliemae/pui-app-bridge';
 export type OnLoadCompleteFn = (instanceId: string) => void;
 export type OnUnloadCompleteFn = () => void;
+/**
+ * parameters for the ssf microapp components
+ */
+export type SSFMicroAppParams<SearchParams> = {
+    /**
+     * individual query parameters indicating guest application's url parameter string
+     */
+    searchParams?: SearchParams;
+    /**
+     * mode of opening the guest application, popup or embed
+     * @default OpenMode.Embed
+     */
+    openMode?: OpenMode;
+    /**
+     * flag to disable sandboxing for iframe
+     * @default false
+     */
+    disableSandbox?: boolean;
+    /**
+     * sandbox values for iframe
+     * @default [IFrameSandboxValues.AllowScripts, IFrameSandboxValues.AllowPopups, IFrameSandboxValues.AllowModals, IFrameSandboxValues.AllowForms, IFrameSandboxValues.AllowDownloads, IFrameSandboxValues.AllowSameOrigin ]
+     */
+    sandboxValues?: Array<IFrameSandboxValues>;
+    /**
+     * resize the iframe to fit the content inside
+     * @default true
+     */
+    fitToContent?: boolean;
+    /**
+     * css style for the microapp iframe
+     */
+    style?: string;
+    /**
+     * features for the popup window
+     * @default { width: 800, height: 600, top: 100, left: 100 }
+     */
+    popupWindowFeatures?: WindowFeatures;
+    /**
+     * permission policy for the guest iframe
+     * check https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe#allow for more details
+     * @example "microphone 'self' https://example.com; geolocation 'none'"
+     */
+    permissionPolicy?: string;
+};
+/**
+ * Parameters for the GuestMicroApp component.
+ */
 export type GuestMicroAppParams = OpenAppParams & {
     onLoadComplete?: OnLoadCompleteFn;
     onUnloadComplete?: OnUnloadCompleteFn;
     containerId?: string;
+    ssfAppOptions?: SSFMicroAppParams<Record<string, string | number | boolean>>;
 };
 /**
  * Component to load a guest microapp

package/dist/types/lib/view/tests/constants.d.ts

@@ -1,6 +1,7 @@
 export declare const LATEST_VERSION = "latest";
 export declare const RELEASE_VERSION = "23.1.0";
 export declare const LOAN_APP_ID = "loanapp";
+export declare const SSF_APP_ID = "ssfapp";
 export declare const TASK_APP_ID = "taskapp";
 export declare const FLIGHTS_APP_ID = "flights";
 export declare const HOTELS_APP_ID = "hotels";

package/dist/types/lib/view/tests/ssfapp/latest/index.d.ts

@@ -0,0 +1,2 @@
+declare const appId: "ssfapp";
+declare const output: HTMLElement | null;