@elliemae/ssf-host 2.2.0 → 2.3.0

package/dist/cjs/guest.js

@@ -75,7 +75,6 @@ class Guest {
   #remoting;
   /**
    * Create object representing guest application
-   *
    * @param {GuestOption} option - options for creating a guest application
    */
   constructor(option) {
@@ -113,7 +112,6 @@ class Guest {
   };
   /**
    * Get information about the guest application
-   *
    * @returns guest properties
    */
   getInfo = () => ({
@@ -145,7 +143,6 @@ class Guest {
   };
   /**
    * invokes event callback on the guest application
-   *
    * @param {EventObject} event - event object
    * @param {number} timeout - timeout in milliseconds
    */
@@ -158,7 +155,6 @@ class Guest {
   });
   /**
    * Send a message without any form of response. fire and forget
-   *
    * @param {MessageParam} param - message to be sent
    */
   send = (param) => {

package/dist/cjs/host.js

@@ -67,7 +67,6 @@ class SSFHost {
   #popupGuestMonitor = null;
   /**
    * Create a new host
-   *
    * @param hostId unique identifier for the host
    * @param {HostOption} option - options for the host
    */
@@ -98,7 +97,6 @@ class SSFHost {
   };
   /**
    * get the reference to the guest application by its window
-   *
    * @param guestWindow reference to the guest window
    * @returns reference to the guest
    */
@@ -111,7 +109,6 @@ class SSFHost {
   };
   /**
    * get the reference to the guest application by its window
-   *
    * @param url url of the guest application
    * @returns reference to the guest
    */
@@ -124,7 +121,6 @@ class SSFHost {
   };
   /**
    * check if a object is a scripting object
-   *
    * @param value javascript object
    * @returns true if the object is a scripting object
    */
@@ -433,11 +429,12 @@ class SSFHost {
   };
   #isProxyEvent = (value) => (
     // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-    value?.constructor?.name === "ProxyEvent"
+    value?.constructor?.name === "ProxyEvent" || // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    typeof value?.subscribe === "function"
   );
+  // support v1 scripting objects
   /**
    * Register pre-rendered guest application to host
-   *
    * @param {AttachParam} param - parameters for attaching the guest
    * @returns reference to the guest object
    */
@@ -568,7 +565,6 @@ class SSFHost {
   };
   /**
    * registers scripting object to the host
-   *
    * @param {ValueOf<AppObjects>} so scripting object to be registered
    * @param {AddScriptingObjectParams} params params to add scripting object
    */
@@ -577,7 +573,6 @@ class SSFHost {
   };
   /**
    * Clone parent host's scripting object for exposing to grand children
-   *
    * @param proxy - reference to the scripting object obtained through getObject method
    * @param guest - reference to the ssf guest
    * @returns cloned version of the scripting object
@@ -592,33 +587,53 @@ class SSFHost {
     Object.keys(proxy).forEach((propName) => {
       const propValue = proxy[propName];
       if (this.#isProxyEvent(propValue)) {
-        const event = new import_microfe_common.Event({
-          name: propValue.name,
-          requiresFeedback: false,
-          so
-        });
+        let event;
+        if (propValue?.subscribe !== "function") {
+          event = new import_microfe_common.Event({
+            name: propValue.name || propName,
+            requiresFeedback: false,
+            so
+          });
+        } else {
+          event = new automation.Event();
+        }
         Object.defineProperty(so, propName, {
           value: event,
           enumerable: true
         });
-        const listener = ({
-          eventParams,
-          eventOptions
-        }) => this.dispatchEvent({
-          event,
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-          eventParams,
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-          eventOptions
-        });
-        const token = guest.subscribe({
-          eventId: propValue.id,
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-          callback: listener
-        });
-        unsubscribers.push(() => {
-          guest.unsubscribe({ eventId: propValue.id, token });
-        });
+        if (guest.subscribe) {
+          const listener = ({
+            eventParams,
+            eventOptions
+          }) => this.dispatchEvent({
+            event,
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            eventParams,
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            eventOptions
+          });
+          const token = guest.subscribe({
+            eventId: propValue.id,
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            callback: listener
+          });
+          unsubscribers.push(() => {
+            guest.unsubscribe({ eventId: propValue.id, token });
+          });
+        } else {
+          const token = propValue.subscribe?.(
+            (obj, params, options) => this.dispatchEvent({
+              event,
+              // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+              eventParams: params,
+              // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+              eventOptions: options
+            })
+          );
+          unsubscribers.push(() => {
+            propValue.unsubscribe?.(token);
+          });
+        }
       } else if ((0, import_utils.isFunction)(propValue)) {
         Object.defineProperty(so, propName, {
           value: async (...args) => {
@@ -660,7 +675,6 @@ class SSFHost {
   };
   /**
    * dispatch event to guest application(s)
-   *
    * @param {EventDetail} details details of the event to be dispatched
    * @returns promise that resolves to an array with result from each guest application
    */
@@ -732,7 +746,6 @@ class SSFHost {
   };
   /**
    * get reference to all guest applications
-   *
    * @returns list of guest application references
    */
   getGuests = () => {
@@ -744,7 +757,6 @@ class SSFHost {
   };
   /**
    * get the scripting object by id
-   *
    * @param objectId - id of the scripting object
    * @param params
    * @returns scripting object
@@ -752,7 +764,6 @@ class SSFHost {
   getScriptingObject = (objectId) => this.#soManager.getObject(objectId);
   /**
    * loads guest application inside sandboxed iframe
-   *
    * @param {LoadGuestParam} param - parameters for loading the guest application
    * @returns reference to the guest object
    */
@@ -798,7 +809,6 @@ class SSFHost {
   };
   /**
    * loads guest application inside sandboxed iframe with different params
-   *
    * @param {LoadGuestsParam} param - parameters for loading the guest application
    */
   loadGuests = (param) => {
@@ -823,7 +833,6 @@ class SSFHost {
   };
   /**
    * removes all scripting objects from host
-   *
    * @param guestId unique id of the guest application
    */
   removeAllScriptingObjects = (guestId) => {
@@ -831,7 +840,6 @@ class SSFHost {
   };
   /**
    * removes scripting object from the host
-   *
    * @param objectId unique id of the scripting object
    * @param guestId unique id of the guest application
    */
@@ -840,7 +848,6 @@ class SSFHost {
   };
   /**
    * set the log level for the host application
-   *
    * @param level - log level
    */
   setLogLevel = (level) => {
@@ -850,7 +857,6 @@ class SSFHost {
   };
   /**
    * unloads guest application from host
-   *
    * @param guestIdOrWindowOrEle unique id of the guest application or window object or dom element of the guest application
    * @throws Error if guestId or Window reference is invalid
    */

package/dist/cjs/v1-guest-v2-host.html

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Guest V1 -> V2 Host</title>
+    <style>
+      html,
+      body,
+      main {
+        height: 100%;
+        margin: 2px;
+        padding: 0;
+      }
+      iframe {
+        width: 100%;
+        height: 100%;
+        border: none;
+      }
+      #guest-container {
+        height: 100%;
+      }
+    </style>
+    <script src="https://qa.assets.rd.elliemae.io/pui-diagnostics@3"></script>
+    <script src="https://cdn.elliemae.io/elliemae/core/ssf/1.0/elli.ssf.guest.js"></script>
+  </head>
+  <body>
+    <h2>Guest V1 nesting Host V2</h2>
+    <div id="result">
+      <p id="loan-details"></p>
+      <p id="loan-pre-save-event-details"></p>
+    </div>
+    <div id="guest-container"></div>
+    <script type="module">
+      import { getGuestBaseUrl, getHost } from './utils.js';
+
+      const hostV2 = getHost();
+
+      const loadV2Guest = async () => {
+        const guestBaseUrl = await getGuestBaseUrl();
+        const { id } = hostV2.loadGuest({
+          id: 'guestV2',
+          url: new URL('./v2-guest.html', guestBaseUrl).href,
+          title: 'Guest V2',
+          targetElement: document.getElementById('guest-container'),
+        });
+      };
+
+      window.addEventListener('load', async () => {
+        await elli.script.connect();
+        const loan = await elli.script.getObject('Loan');
+        const details = await loan.getLoanDetails();
+        document.getElementById(
+          'loan-details',
+        ).innerText = `Loan Data: ${JSON.stringify(details)}`;
+        elli.script.subscribe('loan', 'onPreSave', (loan, eventData) => {
+          document.getElementById(
+            'loan-pre-save-event-details',
+          ).innerText = `Presave event data: ${JSON.stringify(eventData)}`;
+          return false;
+        });
+        hostV2.addScriptingObject(hostV2.cloneScriptingObject(loan, {}));
+        await loadV2Guest();
+      });
+    </script>
+  </body>
+</html>

package/dist/cjs/v2-host-v1-guest.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Host V2 -> V1 Guest</title>
+    <style>
+      html,
+      body,
+      main {
+        height: 100%;
+        margin: 4px;
+        padding: 0;
+      }
+      iframe {
+        width: 100%;
+        height: 100%;
+        border: none;
+      }
+      #guest-container {
+        height: 100%;
+      }
+    </style>
+    <script src="https://qa.assets.rd.elliemae.io/pui-diagnostics@3"></script>
+  </head>
+  <body>
+    <main>
+      <h1>Host V2 nesting V1 Guest</h1>
+      <button id="save-btn" type="button" onclick="saveLoan()">
+        Save Loan
+      </button>
+      <div id="results">
+        <p id="pre-save-feedback-result"></p>
+      </div>
+      <div id="guest-container"></div>
+    </main>
+    <script type="module">
+      import { Loan } from './loan-object.js';
+      import { getGuestBaseUrl, getHost } from './utils.js';
+
+      const hostV2 = getHost();
+      const loanObj = new Loan();
+      hostV2.addScriptingObject(loanObj);
+      const params = new URLSearchParams(document.location.search);
+      const { id } = hostV2.loadGuest({
+        id: 'guestV1',
+        url: new URL(
+          params.get('nestV1GuestV2Host') !== 'true'
+            ? './v1-guest.html'
+            : './v1-guest-v2-host.html',
+          window.location.href,
+        ).href,
+        searchParams: { nestHostV1: true },
+        title: 'Guest V1',
+        targetElement: document.getElementById('guest-container'),
+      });
+
+      window.saveLoan = async () => {
+        const loanDetails = loanObj.getLoanDetails();
+        const results = await hostV2.dispatchEvent({
+          event: loanObj.onPreSave,
+          eventParams: loanDetails,
+          eventOptions: {
+            timeout: 1000,
+          },
+        });
+        if (results.some((result) => result === false)) {
+          document.getElementById('pre-save-feedback-result').innerText =
+            'Pre save failed';
+        } else {
+          document.getElementById('pre-save-feedback-result').innerText =
+            'Pre save succeeded';
+        }
+      };
+    </script>
+  </body>
+</html>

package/dist/esm/guest.js

@@ -52,7 +52,6 @@ class Guest {
   #remoting;
   /**
    * Create object representing guest application
-   *
    * @param {GuestOption} option - options for creating a guest application
    */
   constructor(option) {
@@ -90,7 +89,6 @@ class Guest {
   };
   /**
    * Get information about the guest application
-   *
    * @returns guest properties
    */
   getInfo = () => ({
@@ -122,7 +120,6 @@ class Guest {
   };
   /**
    * invokes event callback on the guest application
-   *
    * @param {EventObject} event - event object
    * @param {number} timeout - timeout in milliseconds
    */
@@ -135,7 +132,6 @@ class Guest {
   });
   /**
    * Send a message without any form of response. fire and forget
-   *
    * @param {MessageParam} param - message to be sent
    */
   send = (param) => {

package/dist/esm/host.js

@@ -53,7 +53,6 @@ class SSFHost {
   #popupGuestMonitor = null;
   /**
    * Create a new host
-   *
    * @param hostId unique identifier for the host
    * @param {HostOption} option - options for the host
    */
@@ -84,7 +83,6 @@ class SSFHost {
   };
   /**
    * get the reference to the guest application by its window
-   *
    * @param guestWindow reference to the guest window
    * @returns reference to the guest
    */
@@ -97,7 +95,6 @@ class SSFHost {
   };
   /**
    * get the reference to the guest application by its window
-   *
    * @param url url of the guest application
    * @returns reference to the guest
    */
@@ -110,7 +107,6 @@ class SSFHost {
   };
   /**
    * check if a object is a scripting object
-   *
    * @param value javascript object
    * @returns true if the object is a scripting object
    */
@@ -419,11 +415,12 @@ class SSFHost {
   };
   #isProxyEvent = (value) => (
     // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-    value?.constructor?.name === "ProxyEvent"
+    value?.constructor?.name === "ProxyEvent" || // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    typeof value?.subscribe === "function"
   );
+  // support v1 scripting objects
   /**
    * Register pre-rendered guest application to host
-   *
    * @param {AttachParam} param - parameters for attaching the guest
    * @returns reference to the guest object
    */
@@ -554,7 +551,6 @@ class SSFHost {
   };
   /**
    * registers scripting object to the host
-   *
    * @param {ValueOf<AppObjects>} so scripting object to be registered
    * @param {AddScriptingObjectParams} params params to add scripting object
    */
@@ -563,7 +559,6 @@ class SSFHost {
   };
   /**
    * Clone parent host's scripting object for exposing to grand children
-   *
    * @param proxy - reference to the scripting object obtained through getObject method
    * @param guest - reference to the ssf guest
    * @returns cloned version of the scripting object
@@ -578,33 +573,53 @@ class SSFHost {
     Object.keys(proxy).forEach((propName) => {
       const propValue = proxy[propName];
       if (this.#isProxyEvent(propValue)) {
-        const event = new Event({
-          name: propValue.name,
-          requiresFeedback: false,
-          so
-        });
+        let event;
+        if (propValue?.subscribe !== "function") {
+          event = new Event({
+            name: propValue.name || propName,
+            requiresFeedback: false,
+            so
+          });
+        } else {
+          event = new automation.Event();
+        }
         Object.defineProperty(so, propName, {
           value: event,
           enumerable: true
         });
-        const listener = ({
-          eventParams,
-          eventOptions
-        }) => this.dispatchEvent({
-          event,
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-          eventParams,
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-          eventOptions
-        });
-        const token = guest.subscribe({
-          eventId: propValue.id,
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-          callback: listener
-        });
-        unsubscribers.push(() => {
-          guest.unsubscribe({ eventId: propValue.id, token });
-        });
+        if (guest.subscribe) {
+          const listener = ({
+            eventParams,
+            eventOptions
+          }) => this.dispatchEvent({
+            event,
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            eventParams,
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            eventOptions
+          });
+          const token = guest.subscribe({
+            eventId: propValue.id,
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            callback: listener
+          });
+          unsubscribers.push(() => {
+            guest.unsubscribe({ eventId: propValue.id, token });
+          });
+        } else {
+          const token = propValue.subscribe?.(
+            (obj, params, options) => this.dispatchEvent({
+              event,
+              // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+              eventParams: params,
+              // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+              eventOptions: options
+            })
+          );
+          unsubscribers.push(() => {
+            propValue.unsubscribe?.(token);
+          });
+        }
       } else if (isFunction(propValue)) {
         Object.defineProperty(so, propName, {
           value: async (...args) => {
@@ -646,7 +661,6 @@ class SSFHost {
   };
   /**
    * dispatch event to guest application(s)
-   *
    * @param {EventDetail} details details of the event to be dispatched
    * @returns promise that resolves to an array with result from each guest application
    */
@@ -718,7 +732,6 @@ class SSFHost {
   };
   /**
    * get reference to all guest applications
-   *
    * @returns list of guest application references
    */
   getGuests = () => {
@@ -730,7 +743,6 @@ class SSFHost {
   };
   /**
    * get the scripting object by id
-   *
    * @param objectId - id of the scripting object
    * @param params
    * @returns scripting object
@@ -738,7 +750,6 @@ class SSFHost {
   getScriptingObject = (objectId) => this.#soManager.getObject(objectId);
   /**
    * loads guest application inside sandboxed iframe
-   *
    * @param {LoadGuestParam} param - parameters for loading the guest application
    * @returns reference to the guest object
    */
@@ -784,7 +795,6 @@ class SSFHost {
   };
   /**
    * loads guest application inside sandboxed iframe with different params
-   *
    * @param {LoadGuestsParam} param - parameters for loading the guest application
    */
   loadGuests = (param) => {
@@ -809,7 +819,6 @@ class SSFHost {
   };
   /**
    * removes all scripting objects from host
-   *
    * @param guestId unique id of the guest application
    */
   removeAllScriptingObjects = (guestId) => {
@@ -817,7 +826,6 @@ class SSFHost {
   };
   /**
    * removes scripting object from the host
-   *
    * @param objectId unique id of the scripting object
    * @param guestId unique id of the guest application
    */
@@ -826,7 +834,6 @@ class SSFHost {
   };
   /**
    * set the log level for the host application
-   *
    * @param level - log level
    */
   setLogLevel = (level) => {
@@ -836,7 +843,6 @@ class SSFHost {
   };
   /**
    * unloads guest application from host
-   *
    * @param guestIdOrWindowOrEle unique id of the guest application or window object or dom element of the guest application
    * @throws Error if guestId or Window reference is invalid
    */

package/dist/esm/v1-guest-v2-host.html

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Guest V1 -> V2 Host</title>
+    <style>
+      html,
+      body,
+      main {
+        height: 100%;
+        margin: 2px;
+        padding: 0;
+      }
+      iframe {
+        width: 100%;
+        height: 100%;
+        border: none;
+      }
+      #guest-container {
+        height: 100%;
+      }
+    </style>
+    <script src="https://qa.assets.rd.elliemae.io/pui-diagnostics@3"></script>
+    <script src="https://cdn.elliemae.io/elliemae/core/ssf/1.0/elli.ssf.guest.js"></script>
+  </head>
+  <body>
+    <h2>Guest V1 nesting Host V2</h2>
+    <div id="result">
+      <p id="loan-details"></p>
+      <p id="loan-pre-save-event-details"></p>
+    </div>
+    <div id="guest-container"></div>
+    <script type="module">
+      import { getGuestBaseUrl, getHost } from './utils.js';
+
+      const hostV2 = getHost();
+
+      const loadV2Guest = async () => {
+        const guestBaseUrl = await getGuestBaseUrl();
+        const { id } = hostV2.loadGuest({
+          id: 'guestV2',
+          url: new URL('./v2-guest.html', guestBaseUrl).href,
+          title: 'Guest V2',
+          targetElement: document.getElementById('guest-container'),
+        });
+      };
+
+      window.addEventListener('load', async () => {
+        await elli.script.connect();
+        const loan = await elli.script.getObject('Loan');
+        const details = await loan.getLoanDetails();
+        document.getElementById(
+          'loan-details',
+        ).innerText = `Loan Data: ${JSON.stringify(details)}`;
+        elli.script.subscribe('loan', 'onPreSave', (loan, eventData) => {
+          document.getElementById(
+            'loan-pre-save-event-details',
+          ).innerText = `Presave event data: ${JSON.stringify(eventData)}`;
+          return false;
+        });
+        hostV2.addScriptingObject(hostV2.cloneScriptingObject(loan, {}));
+        await loadV2Guest();
+      });
+    </script>
+  </body>
+</html>