@elliemae/pui-app-sdk 5.22.0 → 5.23.0

package/dist/cjs/utils/micro-frontend/tests/utils.js

@@ -0,0 +1,116 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var utils_exports = {};
+__export(utils_exports, {
+  applicationScriptingObject: () => applicationScriptingObject,
+  authScriptingObject: () => authScriptingObject,
+  postMessage: () => postMessage,
+  setupHost: () => setupHost
+});
+module.exports = __toCommonJS(utils_exports);
+var import_microfe_common = require("@elliemae/microfe-common");
+const applicationScriptingObject = {
+  object: {
+    events: [],
+    functions: [
+      "closeModal",
+      "extend",
+      "getApplicationContext",
+      "getCapabilities",
+      "getCompanySettings",
+      "getDescriptor",
+      "getPersonaAccess",
+      "getPoliciesDetails",
+      "getUserAccessRights",
+      "hideSpinner",
+      "keepSessionAlive",
+      "log",
+      "navigate",
+      "open",
+      "openModal",
+      "performAction",
+      "print",
+      "showError",
+      "showSpinner",
+      "supportsAction",
+      "supportsNavigateTo"
+    ],
+    objectId: "application",
+    objectType: "Object"
+  },
+  type: "object"
+};
+const authScriptingObject = {
+  object: {
+    events: [],
+    functions: ["getAccessToken", "createAuthCode", "getUser"],
+    objectId: "auth",
+    objectType: "Object"
+  },
+  type: "object"
+};
+const hostObjects = {
+  application: applicationScriptingObject,
+  auth: authScriptingObject
+};
+const getOrigin = (url) => {
+  if (!url || url === "about:blank") return "*";
+  try {
+    const { origin } = new URL(url);
+    return origin === "null" || !origin ? url : origin;
+  } catch (e) {
+    const { origin } = new URL(url, document.baseURI);
+    return origin;
+  }
+};
+const postMessage = ({
+  srcWindow,
+  targetWindow,
+  message
+}) => {
+  targetWindow.dispatchEvent(
+    new MessageEvent("message", {
+      source: srcWindow,
+      origin: getOrigin(srcWindow.location.href),
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      data: {
+        source: "elli:remoting",
+        ...message
+      }
+    })
+  );
+};
+const setupHost = (hostWindow) => {
+  const onMessage = ({ data }) => {
+    if (data?.type !== import_microfe_common.MessageType.ObjectGet) return;
+    const scriptingObject = hostObjects[data?.body?.objectId ?? ""] ?? null;
+    if (scriptingObject)
+      postMessage({
+        srcWindow: hostWindow,
+        targetWindow: window,
+        message: {
+          body: scriptingObject,
+          type: "elli:remoting:response",
+          requestId: data.requestId
+        }
+      });
+  };
+  hostWindow?.addEventListener?.("message", onMessage);
+  return () => hostWindow?.removeEventListener?.("message", onMessage);
+};

package/dist/cjs/utils/testing/index.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,6 +18,14 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var testing_exports = {};
 __export(testing_exports, {
@@ -24,6 +34,7 @@ __export(testing_exports, {
 module.exports = __toCommonJS(testing_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("@testing-library/react");
+var import_user_event = __toESM(require("@testing-library/user-event"));
 var import_pui_theme = require("@elliemae/pui-theme");
 var import_store = require("../../data/store.js");
 var import_app_root = require("../../view/app-root/index.js");
@@ -36,4 +47,7 @@ const AllTheProviders = ({
   theme = defaultTheme,
   children
 }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_app_root.AppRoot, { store, history: import_history.browserHistory, theme, children });
-const customRender = (ui, options) => (0, import_react.render)(ui, { wrapper: AllTheProviders, ...options });
+const customRender = (ui, options) => ({
+  user: import_user_event.default.setup(),
+  ...(0, import_react.render)(ui, { wrapper: AllTheProviders, ...options })
+});

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

@@ -0,0 +1,113 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var guest_microapp_exports = {};
+__export(guest_microapp_exports, {
+  GuestMicroApp: () => GuestMicroApp
+});
+module.exports = __toCommonJS(guest_microapp_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_styled_components = __toESM(require("styled-components"));
+var import_react_redux = require("react-redux");
+var import_app_bridge = require("../utils/micro-frontend/app-bridge.js");
+var import_actions = require("../data/wait-message/actions.js");
+var import_micro_frontend = require("../utils/micro-frontend/index.js");
+const Div = import_styled_components.default.div`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  overflow: hidden;
+`;
+const useAppRenderer = (props) => {
+  const { id, history, onLoadComplete, onUnloadComplete, containerId } = props;
+  const dispatch = (0, import_react_redux.useDispatch)();
+  (0, import_react.useLayoutEffect)(() => {
+    let isMounted = true;
+    let appBridge = null;
+    let unloadInProgress = Promise.resolve();
+    let instanceId = null;
+    (async () => {
+      await unloadInProgress;
+      dispatch(import_actions.waitMessage.open());
+      try {
+        appBridge = await (0, import_app_bridge.getAppBridge)();
+        if (!appBridge)
+          throw new Error(`Failed to load ${id}, AppBridge not initialized`);
+        if (isMounted) {
+          instanceId = await appBridge.openApp({
+            id,
+            frameOptions: { containerId },
+            history
+          });
+          setTimeout(() => {
+            try {
+              onLoadComplete?.(instanceId);
+            } catch (ex) {
+            }
+          }, 0);
+        }
+      } catch (ex) {
+        (0, import_micro_frontend.getLogger)().error({
+          message: `Failed to load ${id}`,
+          exception: ex
+        });
+        isMounted = false;
+        if (appBridge && instanceId)
+          unloadInProgress = appBridge.closeApp(instanceId);
+        throw ex;
+      } finally {
+        dispatch(import_actions.waitMessage.close());
+      }
+    })();
+    return () => {
+      isMounted = false;
+      if (appBridge) {
+        unloadInProgress = appBridge.closeApp(instanceId);
+        unloadInProgress.then(() => {
+          instanceId = null;
+          setTimeout(() => {
+            try {
+              onUnloadComplete?.();
+            } catch (ex) {
+            }
+          }, 0);
+        }).catch(() => {
+        });
+      }
+    };
+  }, [containerId, dispatch, history, id, onLoadComplete, onUnloadComplete]);
+};
+const GuestMicroApp = (0, import_react.memo)(
+  (props) => {
+    const containerId = (0, import_react.useRef)(crypto.randomUUID());
+    useAppRenderer({ ...props, containerId: containerId.current });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Div, { id: containerId.current });
+  }
+);

package/dist/cjs/view/micro-iframe-app/iframe/index.js

@@ -61,7 +61,7 @@ const IFrame = (0, import_react.memo)(
         ref: frameRef,
         title,
         src,
-        scrolling: "no",
+        "data-testid": `${import_const.IFRAME_CONTAINER_ID_PREFIX}${id}`,
         ...sandboxProps,
         onLoad: () => frameRef?.current?.contentDocument && onFrameReady(frameRef.current.contentDocument)
       }

package/dist/cjs/view/micro-iframe-app/iframe.html

@@ -69,6 +69,10 @@
       <strong>JavaScript has been disabled on your browser</strong>, please
       <strong>enable JS</strong> to make this app work.</noscript
     >
-    <div id="pui-app-container-" class="full-width full-height"></div>
+    <div
+      id="pui-app-container-"
+      data-testid="pui-app-container-"
+      class="full-width full-height"
+    ></div>
   </body>
 </html>

package/dist/cjs/view/micro-iframe-app/use-frame-loaded.js

@@ -25,6 +25,7 @@ var import_react = require("react");
 var import_session = require("../../utils/session.js");
 var import_host = require("../../utils/micro-frontend/host.js");
 var import_micro_frontend = require("../../utils/micro-frontend/index.js");
+var import_const = require("../micro-app/const.js");
 const addBaseTag = (id, documentEle) => {
   const { hostUrl, manifestPath } = (0, import_micro_frontend.getMicroFrontEndAppConfig)({
     id
@@ -36,9 +37,10 @@ const addBaseTag = (id, documentEle) => {
   documentEle.getElementsByTagName("head")[0].appendChild(base);
 };
 const updateContainerId = (id, documentEle) => {
-  const ele = documentEle.getElementById("pui-app-container-");
+  const ele = documentEle.getElementById(import_const.APP_CONTAINER_ID_PREFIX);
   if (ele) {
     ele.id = `${ele.id}${id}`;
+    ele.dataset.testid = ele.id;
   }
 };
 const useFrameLoaded = ({ id, documentEle }) => {

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

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MicroAppV2 should open loanapp and call init and mount methods 1`] = `
+Document {
+  "location": Location {
+    "assign": [Function],
+    "hash": "",
+    "host": "localhost:3111",
+    "hostname": "localhost",
+    "href": "http://localhost:3111/frame.html",
+    "origin": "http://localhost:3111",
+    "pathname": "/frame.html",
+    "port": "3111",
+    "protocol": "http:",
+    "reload": [Function],
+    "replace": [Function],
+    "search": "",
+    "toString": [Function],
+  },
+}
+`;

package/dist/cjs/view/tests/__snapshots__/micro-iframe-app.test.tsx.snap

@@ -0,0 +1,208 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MicroIFrameApp should close previous instance of app before loading new instance 2`] = `
+<body
+  class="full-width full-height"
+>
+  
+    
+  <!-- Display a message if JS has been disabled on the browser. -->
+  
+    
+  <noscript>
+    If you're seeing this message, that means
+      &lt;strong&gt;JavaScript has been disabled on your browser&lt;/strong&gt;, please
+      &lt;strong&gt;enable JS&lt;/strong&gt; to make this app work.
+  </noscript>
+  
+    
+  <div
+    class="full-width full-height"
+    data-testid="pui-app-container-loanapp"
+    id="pui-app-container-loanapp"
+  >
+    <main>
+      <h1>
+        Loan App
+      </h1>
+      <p>
+        Go to 
+        <a
+          href="#"
+        >
+          Pipeline
+        </a>
+      </p>
+    </main>
+  </div>
+  
+  
+
+
+  <script
+    id="emui-script-Loan-1"
+    src="http://localhost:3111/loan/latest/index.js"
+  />
+</body>
+`;
+
+exports[`MicroIFrameApp should open loanapp and call init and mount methods 1`] = `
+<head>
+  
+    
+  <!-- The first thing in any HTML file should be the charset -->
+  
+    
+  <meta
+    charset="utf-8"
+  />
+  
+    
+  <!-- Make the page mobile compatible -->
+  
+    
+  <meta
+    content="width=device-width, initial-scale=1"
+    name="viewport"
+  />
+  
+    
+  <!-- Allow installing the app to the homescreen -->
+  
+    
+  <meta
+    content="yes"
+    name="mobile-web-app-capable"
+  />
+  
+    
+  <link
+    href="/favicon.ico"
+    rel="icon"
+  />
+  
+    
+  <title>
+    Application
+  </title>
+  
+    
+  <!-- Google Tag Manager -->
+  
+    
+  <!-- &lt;script nonce="__CSP_NONCE__"&gt;
+    (function (w, d, s, l, i) {
+      w[l] = w[l] || [];
+      w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
+      var f = d.getElementsByTagName(s)[0],
+        j = d.createElement(s),
+        dl = l != 'dataLayer' ? '&l=' + l : '';
+      j.async = true;
+      j.src =
+        'https://www.googletagmanager.com/gtm.js?id=' +
+        i +
+        dl;
+      f.parentNode.insertBefore(j, f);
+    })(window, document, 'script', 'dataLayer', window.emui.gtm.id);
+  &lt;/script&gt; -->
+  
+    
+  <!-- &lt;script nonce="__CSP_NONCE__"&gt;
+      window.emuiUserMonitoring = window.parent.emuiUserMonitoring || {
+        setCustomVirtualPageName: function () {},
+        startVirtualPageMonitoringWithAutoEnd: function () {},
+      };
+    &lt;/script&gt; -->
+  
+    
+  <script
+    src="https://www.google-analytics.com/analytics.js"
+  />
+  <script>
+    
+      (function (i, s, o, g, r, a, m) {
+        i['GoogleAnalyticsObject'] = r;
+        (i[r] =
+          i[r] ||
+          function () {
+            (i[r].q = i[r].q || []).push(arguments);
+          }),
+          (i[r].l = 1 * new Date());
+        (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
+        a.async = 1;
+        a.src = g;
+        m.parentNode.insertBefore(a, m);
+      })(
+        window,
+        document,
+        'script',
+        'https://www.google-analytics.com/analytics.js',
+        'ga',
+      );
+    
+  </script>
+  
+    
+  <style>
+    
+      .full-width {
+        width: 100%;
+      }
+      .full-height {
+        height: 100%;
+      }
+    
+  </style>
+  
+  
+  <base
+    href="http://localhost:3111/loan/latest"
+  />
+</head>
+`;
+
+exports[`MicroIFrameApp should open loanapp and call init and mount methods 2`] = `
+<body
+  class="full-width full-height"
+>
+  
+    
+  <!-- Display a message if JS has been disabled on the browser. -->
+  
+    
+  <noscript>
+    If you're seeing this message, that means
+      &lt;strong&gt;JavaScript has been disabled on your browser&lt;/strong&gt;, please
+      &lt;strong&gt;enable JS&lt;/strong&gt; to make this app work.
+  </noscript>
+  
+    
+  <div
+    class="full-width full-height"
+    data-testid="pui-app-container-loanapp"
+    id="pui-app-container-loanapp"
+  >
+    <main>
+      <h1>
+        Loan App
+      </h1>
+      <p>
+        Go to 
+        <a
+          href="#"
+        >
+          Pipeline
+        </a>
+      </p>
+    </main>
+  </div>
+  
+  
+
+
+  <script
+    id="emui-script-Loan-1"
+    src="http://localhost:3111/loan/latest/index.js"
+  />
+</body>
+`;