@elliemae/pui-app-sdk 2.17.1 → 3.0.0-beta.10

package/dist/es/view/host-binding-events/index.js

@@ -1,14 +1,18 @@
-export const bindEvent = (element, eventName, eventHandler) => {
+const bindEvent = (element, eventName, eventHandler) => {
   if (element.addEventListener) {
     element.addEventListener(eventName, eventHandler, false);
   } else if (element.attachEvent) {
     element.attachEvent(`on${eventName}`, eventHandler);
   }
 };
-export const removeEvent = (element, eventName, eventHandler) => {
+const removeEvent = (element, eventName, eventHandler) => {
   if (element.removeEventListener) {
     element.removeEventListener(eventName, eventHandler);
   } else if (element.detachEvent) {
     element.detachEvent(`on${eventName}`, eventHandler);
   }
-};
+};
+export {
+  bindEvent,
+  removeEvent
+};

package/dist/es/view/intro.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/addon-docs';
 
 <Meta title="Intro" />
 

package/dist/es/view/live-message/index.js

@@ -1,25 +1,16 @@
-import _jsx from "@babel/runtime/helpers/jsx";
-import { LiveMessage as AriaLiveMessage } from 'react-aria-live';
+import * as React from "react";
+import { LiveMessage as AriaLiveMessage } from "react-aria-live";
 import { useAppSelector } from "../../data/react-redux.js";
-export const LiveMessage = () => {
-  const message = useAppSelector(state => {
-    var _state$liveMessage;
-
-    return (_state$liveMessage = state.liveMessage) === null || _state$liveMessage === void 0 ? void 0 : _state$liveMessage.message;
-  });
-  const id = useAppSelector(state => {
-    var _state$liveMessage2;
-
-    return (_state$liveMessage2 = state.liveMessage) === null || _state$liveMessage2 === void 0 ? void 0 : _state$liveMessage2.id;
-  });
-  const ariaLive = useAppSelector(state => {
-    var _state$liveMessage3;
-
-    return (_state$liveMessage3 = state.liveMessage) === null || _state$liveMessage3 === void 0 ? void 0 : _state$liveMessage3.ariaLive;
-  });
-  return /*#__PURE__*/_jsx(AriaLiveMessage, {
-    message: message,
+const LiveMessage = () => {
+  const message = useAppSelector((state) => state.liveMessage?.message);
+  const id = useAppSelector((state) => state.liveMessage?.id);
+  const ariaLive = useAppSelector((state) => state.liveMessage?.ariaLive);
+  return /* @__PURE__ */ React.createElement(AriaLiveMessage, {
+    message,
     "aria-live": ariaLive,
-    id: id
+    id
   });
-};
+};
+export {
+  LiveMessage
+};

package/dist/es/view/loadable/index.js

@@ -1,16 +1,14 @@
-import _jsx from "@babel/runtime/helpers/jsx";
-
-var _WaitMessageLauncher;
-
-import { lazy, Suspense } from 'react';
-import { WaitMessageLauncher } from "../modals/wait-message/wait-message-launcher.js"; // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
-import { jsx as _jsx2 } from "react/jsx-runtime";
-export const loadable = (importFunc, fallback = _WaitMessageLauncher || (_WaitMessageLauncher = /*#__PURE__*/_jsx(WaitMessageLauncher, {}))) => {
-  const LazyComponent = /*#__PURE__*/lazy(importFunc); // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
-  return props => /*#__PURE__*/_jsx(Suspense, {
-    fallback: fallback
-  }, void 0, /*#__PURE__*/_jsx2(LazyComponent, { ...props
+import * as React from "react";
+import { lazy, Suspense } from "react";
+import { WaitMessageLauncher } from "../modals/wait-message/wait-message-launcher.js";
+const loadable = (importFunc, fallback = /* @__PURE__ */ React.createElement(WaitMessageLauncher, null)) => {
+  const LazyComponent = lazy(importFunc);
+  return (props) => /* @__PURE__ */ React.createElement(Suspense, {
+    fallback
+  }, /* @__PURE__ */ React.createElement(LazyComponent, {
+    ...props
   }));
-};
+};
+export {
+  loadable
+};

package/dist/es/view/login/index.js

@@ -1,25 +1,22 @@
-import { useEffect } from 'react';
+import * as React from "react";
+import { useEffect } from "react";
 import { useAppDispatch } from "../../data/react-redux.js";
 import { login } from "../../utils/auth/index.js";
 import { LOGIN_SUCCESS } from "../../data/auth/actions.js";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
-export const Login = ({
+const Login = ({
   clientId,
   scope,
   responseType
 }) => {
   const dispatch = useAppDispatch();
   useEffect(() => {
-    login({
-      clientId,
-      scope,
-      responseType
-    }).then(() => {
-      dispatch({
-        type: LOGIN_SUCCESS
-      });
-    }).catch(() => {});
+    login({ clientId, scope, responseType }).then(() => {
+      dispatch({ type: LOGIN_SUCCESS });
+    }).catch(() => {
+    });
   }, [dispatch, clientId, scope, responseType]);
-  return /*#__PURE__*/_jsx(_Fragment, {});
-};
+  return /* @__PURE__ */ React.createElement(React.Fragment, null);
+};
+export {
+  Login
+};

package/dist/es/view/media-breakpoint/index.js

@@ -1,22 +1,25 @@
-import { useEffect, useContext } from 'react';
-import { ThemeContext } from 'styled-components';
-import { publish } from 'pubsub-js';
+import * as React from "react";
+import { useEffect, useContext } from "react";
+import { ThemeContext } from "styled-components";
+import { publish } from "pubsub-js";
 import { useAppDispatch } from "../../data/react-redux.js";
 import { breakpoint } from "../../data/breakpoint/index.js";
 import { useMediaBreakpoints } from "../useMediaBreakpoints/index.js";
 import { HOST_WINDOW_BREAKPOINT_CHANGED } from "../../utils/constants.js";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
-export const MediaBreakpoint = () => {
+const MediaBreakpoint = () => {
   const theme = useContext(ThemeContext);
-  const currentBreakpoint = useMediaBreakpoints([`(max-width: ${theme.breakpoints.small})`, `(max-width: ${theme.breakpoints.medium})`, `(max-width: ${theme.breakpoints.large})`], ['small', 'medium', 'large'], 'large');
+  const currentBreakpoint = useMediaBreakpoints([
+    `(max-width: ${theme.breakpoints.small})`,
+    `(max-width: ${theme.breakpoints.medium})`,
+    `(max-width: ${theme.breakpoints.large})`
+  ], ["small", "medium", "large"], "large");
   const dispatch = useAppDispatch();
   useEffect(() => {
-    dispatch({
-      type: breakpoint.change,
-      payload: currentBreakpoint
-    });
+    dispatch({ type: breakpoint.change, payload: currentBreakpoint });
     publish(HOST_WINDOW_BREAKPOINT_CHANGED, currentBreakpoint);
   }, [currentBreakpoint, dispatch]);
-  return /*#__PURE__*/_jsx(_Fragment, {});
-};
+  return /* @__PURE__ */ React.createElement(React.Fragment, null);
+};
+export {
+  MediaBreakpoint
+};

package/dist/es/view/message-to-host-app/index.js

@@ -1,14 +1,15 @@
 import { removeEvent } from "../host-binding-events/index.js";
-export const getHostAppData = (action, resolve) => event => {
-  if (event.data.id === 'host-app-data') {
-    action(event.data); // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-
-    removeEvent(window, 'message', getHostAppData());
+const getHostAppData = (action, resolve) => (event) => {
+  if (event.data.id === "host-app-data") {
+    action(event.data);
+    removeEvent(window, "message", getHostAppData());
   }
-
   resolve();
 };
-export const sendMessageToHost = (message, hostedAppUrl = document.referrer) => {
+const sendMessageToHost = (message, hostedAppUrl = document.referrer) => {
   window.parent.postMessage(message, hostedAppUrl);
-};
+};
+export {
+  getHostAppData,
+  sendMessageToHost
+};

package/dist/es/view/micro-app/app-factory/index.js

@@ -1,19 +1,28 @@
-/* eslint-disable max-lines */
 import { persistentStorage } from "../../../utils/web-storage.js";
 import { CMicroAppHost } from "../../../utils/micro-frontend/host.js";
 import { getLogger } from "../../../utils/micro-frontend/index.js";
 import { logRecords } from "../../../utils/log-records.js";
 import { APP_CONTAINER_ID_PREFIX } from "../const.js";
-import { getCurrentBreakpoint, getViewportSize } from "../../../utils/window.js";
-import { addStylesToDOM, removeDynamicImportedStyles } from "../resources/style.js";
-import { addScriptToDOM, removeDynamicImportedScripts, removePrefetchLinks } from "../resources/script.js";
-import { getAppManifest, getFullFileNameofAssetsFromManifest } from "../resources/manifest.js";
+import {
+  getCurrentBreakpoint,
+  getViewportSize
+} from "../../../utils/window.js";
+import {
+  addStylesToDOM,
+  removeDynamicImportedStyles
+} from "../resources/style.js";
+import {
+  addScriptToDOM,
+  removeDynamicImportedScripts,
+  removePrefetchLinks
+} from "../resources/script.js";
+import {
+  getAppManifest,
+  getFullFileNameofAssetsFromManifest
+} from "../resources/manifest.js";
 const cssType = new RegExp(/\.css$/);
-
-const isCss = fileName => cssType.test(fileName);
-
+const isCss = (fileName) => cssType.test(fileName);
 const activeApps = {};
-
 const initApplication = async ({
   id,
   name,
@@ -23,12 +32,10 @@ const initApplication = async ({
   manifestPath,
   homeRoute
 }) => {
-  const app = (window.emui || {})[id] || {}; // eslint-disable-next-line @typescript-eslint/unbound-method
-
-  const {
-    init
-  } = app;
-  if (!init || typeof init !== 'function') throw new Error(`Application ${name} with id ${id} doesn't expose init method.`);
+  const app = (window.emui || {})[id] || {};
+  const { init } = app;
+  if (!init || typeof init !== "function")
+    throw new Error(`Application ${name} with id ${id} doesn't expose init method.`);
   const prevState = await persistentStorage.get(`state-${id}`);
   return init({
     host: CMicroAppHost.getInstance(),
@@ -42,118 +49,97 @@ const initApplication = async ({
     hostViewportSize: getViewportSize()
   });
 };
-
-export const mountApp = async ({
-  id,
-  name
-}) => {
-  const app = (window.emui || {})[id] || {}; // eslint-disable-next-line @typescript-eslint/unbound-method
-
-  const {
-    mount
-  } = app;
-  if (!mount || typeof mount !== 'function') throw new Error(`Application ${name} with id ${id} doesn't expose mount method.`);
+const mountApp = async ({ id, name }) => {
+  const app = (window.emui || {})[id] || {};
+  const { mount } = app;
+  if (!mount || typeof mount !== "function")
+    throw new Error(`Application ${name} with id ${id} doesn't expose mount method.`);
   return mount({
     containerId: `${APP_CONTAINER_ID_PREFIX}${id}`,
     hostBreakpoint: getCurrentBreakpoint(),
     hostViewportSize: getViewportSize()
   });
 };
-export const unmountApp = async ({
-  id,
-  name
-}) => {
+const unmountApp = async ({ id, name }) => {
   const app = (window.emui || {})[id];
-  if (!app) return null; // eslint-disable-next-line @typescript-eslint/unbound-method
-
-  const {
-    unmount
-  } = app;
-  if (!unmount) return null;
-  if (typeof unmount !== 'function') throw new Error(`unmount failed for application ${name} with id ${id}. unmount is not a valid function`);
+  if (!app)
+    return null;
+  const { unmount } = app;
+  if (!unmount)
+    return null;
+  if (typeof unmount !== "function")
+    throw new Error(`unmount failed for application ${name} with id ${id}. unmount is not a valid function`);
   const currentState = await unmount({
     containerId: `${APP_CONTAINER_ID_PREFIX}${id}`
   });
-
   if (currentState) {
     await persistentStorage.set(`state-${id}`, currentState);
   }
-
   return Promise.resolve();
 };
-
 const addAppToActiveAppList = (id, elementIds) => {
-  const app = (window.emui || {})[id] || {}; // eslint-disable-next-line @typescript-eslint/unbound-method
-
-  const {
-    getRef
-  } = app;
-  activeApps[id] = {
-    elementIds
-  };
+  const app = (window.emui || {})[id] || {};
+  const { getRef } = app;
+  activeApps[id] = { elementIds };
   const host = CMicroAppHost.getInstance();
-  if (host) host.activeGuests[id] = getRef && getRef() || {};
+  if (host)
+    host.activeGuests[id] = getRef && getRef() || {};
   return Promise.resolve();
 };
-
-const waitAndInitApplication = (appConfig, requests) => // wait for all assets to get downloaded
-Promise.all(requests).then(addAppToActiveAppList.bind(null, appConfig.id)).then(initApplication.bind(null, appConfig)).catch(err => {
+const waitAndInitApplication = (appConfig, requests) => Promise.all(requests).then(addAppToActiveAppList.bind(null, appConfig.id)).then(initApplication.bind(null, appConfig)).catch((err) => {
   const logRecord = logRecords.APP_INIT_FAILED(appConfig.id, err.message);
-  getLogger().error({ ...logRecord,
-    exception: err
-  });
+  getLogger().error({ ...logRecord, exception: err });
   throw new Error(logRecord.msg);
 });
-
 const removeAssetsFromDOM = (id, documentEle = document) => {
   const host = CMicroAppHost.getInstance();
-  if (host) delete host.activeGuests[id];
-  const {
-    elementIds
-  } = activeApps[id] || {};
-
+  if (host)
+    delete host.activeGuests[id];
+  const { elementIds } = activeApps[id] || {};
   if (elementIds) {
-    elementIds.forEach(elementId => {
+    elementIds.forEach((elementId) => {
       const ele = documentEle.getElementById(elementId);
-      if (ele) ele.remove();
+      if (ele)
+        ele.remove();
     });
     delete activeApps[id];
   }
-}; // const addGoogleTagManager = (appConfig: MicroAppConfig, counter: number) : Promise<string> | null => {
-//   const { gtmId } = appConfig;
-//   if (!gtmId) return null;
-//   return addScriptToDOM(appConfig, 'https://www.googletagmanager.com/gtm.js?id=')
-// };
-
-
-export const loadApp = async appConfig => {
-  // get application manifest & full asset name with hash value
+};
+const loadApp = async (appConfig) => {
   getLogger().info(logRecords.APP_LOADING(appConfig.id));
   let assets = appConfig.files;
   const manifest = await getAppManifest(appConfig);
-  assets = getFullFileNameofAssetsFromManifest(manifest, appConfig.files); // download each asset by adding it to DOM
-
+  assets = getFullFileNameofAssetsFromManifest(manifest, appConfig.files);
   let counter = 0;
-  const requests = assets.map(fileName => {
+  const requests = assets.map((fileName) => {
     counter += 1;
     return !isCss(fileName) ? addScriptToDOM(appConfig, fileName, counter) : addStylesToDOM(appConfig, fileName, counter);
-  }); // wait for all assets to get loaded in DOM and init
-
+  });
   await waitAndInitApplication(appConfig, requests);
   getLogger().info(logRecords.APP_LOADING_COMPLETE(appConfig.id));
 };
-export const unloadApp = ({
+const unloadApp = ({
   id,
   hostUrl,
   documentEle
 }) => {
+  if (!hostUrl)
+    throw new Error("Unable to unload app. hostUrl is required");
   getLogger().info(logRecords.APP_UNLOADING(id));
   const app = (window.emui || {})[id];
-  if (!app) return;
+  if (!app)
+    return;
   removeAssetsFromDOM(id, documentEle);
   removeDynamicImportedScripts(hostUrl, documentEle);
   removePrefetchLinks(hostUrl, documentEle);
   removeDynamicImportedStyles(hostUrl, documentEle);
-  if (window.emui && window.emui[id]) delete window.emui[id];
+  if (window.emui && window.emui[id])
+    delete window.emui[id];
   getLogger().info(logRecords.APP_UNLOADING_COMPLETE(id));
-};
+};
+export {
+  loadApp,
+  mountApp,
+  unloadApp,
+  unmountApp
+};

package/dist/es/view/micro-app/const.js

@@ -1 +1,4 @@
-export const APP_CONTAINER_ID_PREFIX = 'pui-app-container-';
+const APP_CONTAINER_ID_PREFIX = "pui-app-container-";
+export {
+  APP_CONTAINER_ID_PREFIX
+};

package/dist/es/view/micro-app/index.js

@@ -1,15 +1,18 @@
-import _jsx from "@babel/runtime/helpers/jsx";
-import _styled from "styled-components";
-import { memo } from 'react';
+import * as React from "react";
+import { memo } from "react";
+import styled from "styled-components";
 import { APP_CONTAINER_ID_PREFIX } from "./const.js";
 import { useAppWillRender } from "./use-app-will-render.js";
-export const MicroApp = /*#__PURE__*/memo(props => {
+const Div = styled.div`
+  height: 100%;
+  width: 100%;
+`;
+const MicroApp = memo((props) => {
   useAppWillRender(props);
-  return /*#__PURE__*/_jsx(_StyledDiv, {
+  return /* @__PURE__ */ React.createElement(Div, {
     id: `${APP_CONTAINER_ID_PREFIX}${props.id}`
   });
 });
-
-var _StyledDiv = /*#__PURE__*/_styled("div").withConfig({
-  componentId: "sc-1bjah6z-0"
-})(["height:100%;width:100%;"]);
+export {
+  MicroApp
+};

package/dist/es/view/micro-app/resources/manifest.js

@@ -2,37 +2,39 @@ import { getHTTPClient } from "../../../communication/http-client/index.js";
 import { removeDoubleSlash } from "../../../utils/url.js";
 import { getLogger } from "../../../utils/micro-frontend/index.js";
 import { logRecords } from "../../../utils/log-records.js";
-
-const getUnVersionedManifestPath = path => path.replace(/\/\d+\.\d+/, '/latest');
-
-export const getAppManifest = async ({
+const getUnVersionedManifestPath = (path) => path.replace(/\/\d+\.\d+/, "/latest");
+const getAppManifest = async ({
   hostUrl,
   manifestPath
 }) => {
-  const url = new URL(`${manifestPath.replace(/\/?$/, '/')}manifest.json`, hostUrl);
+  if (!hostUrl || !manifestPath)
+    throw new Error("Unable to get app manifest. hostUrl and manifestPath are required.");
+  const url = new URL(`${manifestPath.replace(/\/?$/, "/")}manifest.json`, hostUrl);
   const response = await getHTTPClient().get(removeDoubleSlash(url.href));
-  const {
-    headers
-  } = response;
-  if (headers['content-type'] && headers['content-type'].includes('application/json')) return response.data;
+  const { headers } = response;
+  if (headers["content-type"] && headers["content-type"].includes("application/json"))
+    return response.data;
   const unVersionedManifestPath = getUnVersionedManifestPath(manifestPath);
-
   if (manifestPath !== unVersionedManifestPath) {
     return getAppManifest({
       hostUrl,
       manifestPath: getUnVersionedManifestPath(manifestPath)
     });
   }
-
-  throw new Error('manifest.json is not available for the application');
+  throw new Error("manifest.json is not available for the application");
 };
-export const getFullFileNameofAssetsFromManifest = (manifest, assetNames = []) => assetNames.reduce((assets, assetName) => {
+const getFullFileNameofAssetsFromManifest = (manifest, assetNames = []) => assetNames.reduce((assets, assetName) => {
   const fullFileName = manifest[assetName];
-  if (fullFileName) assets.push(fullFileName); // eslint-disable-next-line no-console
+  if (fullFileName)
+    assets.push(fullFileName);
   else {
     const logRecord = logRecords.ASSET_NOT_FOUND_IN_MANIFEST(assetName);
     getLogger().error(logRecord);
     throw new Error(logRecord.msg);
   }
   return assets;
-}, []);
+}, []);
+export {
+  getAppManifest,
+  getFullFileNameofAssetsFromManifest
+};

package/dist/es/view/micro-app/resources/script.js

@@ -1,53 +1,53 @@
 import { removeDoubleSlash } from "../../../utils/url.js";
-export const APP_SCRIPT_ID_PREFIX = 'emui-script-';
-const HEAD_SCRIPTS = new RegExp('/(?:emuiDiagnostics|global|global-prod|emuiUserMonitoring)(?:..*)?.js', 'i'); // const isDeferEligible = (scriptSrc: string) => !HEAD_SCRIPTS.test(scriptSrc);
-
-const isHeadScript = scriptSrc => HEAD_SCRIPTS.test(scriptSrc);
-
-export const addScriptToDOM = ({
-  name,
-  hostUrl,
-  documentEle
-}, fileName, index) => new Promise((resolve, reject) => {
-  const ele = documentEle.createElement('script');
-  if (!ele) reject(new Error('Unable to insert Application scripts.'));
+const APP_SCRIPT_ID_PREFIX = "emui-script-";
+const HEAD_SCRIPTS = new RegExp("/(?:emuiDiagnostics|global|global-prod|emuiUserMonitoring)(?:..*)?.js", "i");
+const isHeadScript = (scriptSrc) => HEAD_SCRIPTS.test(scriptSrc);
+const addScriptToDOM = ({ name, hostUrl, documentEle }, fileName, index) => new Promise((resolve, reject) => {
+  const ele = documentEle.createElement("script");
+  if (!ele)
+    reject(new Error("Unable to insert Application scripts."));
   ele.id = `${APP_SCRIPT_ID_PREFIX}${name}-${index}`;
   const url = new URL(fileName, hostUrl);
   ele.src = removeDoubleSlash(url.href);
   ele.onload = resolve.bind(null, ele.id);
   ele.onerror = reject.bind(null, ele.id);
-  ele.async = false; // execute the scripts in the same order as they are inserted
-
-  if (isHeadScript(ele.src)) documentEle.head.appendChild(ele);else documentEle.body.appendChild(ele);
+  ele.async = false;
+  if (isHeadScript(ele.src))
+    documentEle.head.appendChild(ele);
+  else
+    documentEle.body.appendChild(ele);
 });
-export const removeScriptFromDOM = (elementId = '', documentEle = document) => new Promise(resolve => {
-  const ele = documentEle.getElementById(elementId); // eslint-disable-next-line no-console
-
-  if (!ele) console.warn(new Error(`script with id ${elementId} not found`));
+const removeScriptFromDOM = (elementId = "", documentEle = document) => new Promise((resolve) => {
+  const ele = documentEle.getElementById(elementId);
+  if (!ele)
+    console.warn(new Error(`script with id ${elementId} not found`));
   ele.remove();
   resolve();
 });
-export const removeDynamicImportedScripts = (hostUrl, documentEle) => {
-  const hostPattern = new RegExp(hostUrl, 'i');
-  const scriptElements = documentEle.getElementsByTagName('script');
-
+const removeDynamicImportedScripts = (hostUrl, documentEle) => {
+  const hostPattern = new RegExp(hostUrl, "i");
+  const scriptElements = documentEle.getElementsByTagName("script");
   for (let index = scriptElements.length - 1; index >= 0; index -= 1) {
     const scriptEle = scriptElements[index];
-    const {
-      src
-    } = scriptEle;
-    if (hostPattern.test(src)) scriptEle.remove();
+    const { src } = scriptEle;
+    if (hostPattern.test(src))
+      scriptEle.remove();
   }
 };
-export const removePrefetchLinks = (hostUrl, documentEle) => {
-  const hostPattern = new RegExp(hostUrl, 'i');
+const removePrefetchLinks = (hostUrl, documentEle) => {
+  const hostPattern = new RegExp(hostUrl, "i");
   const prefetchElements = documentEle.querySelectorAll('[rel="prefetch"]');
-
   for (let index = prefetchElements.length - 1; index >= 0; index -= 1) {
     const ele = prefetchElements[index];
-    const {
-      href
-    } = ele;
-    if (hostPattern.test(href)) ele.remove();
+    const { href } = ele;
+    if (hostPattern.test(href))
+      ele.remove();
   }
-};
+};
+export {
+  APP_SCRIPT_ID_PREFIX,
+  addScriptToDOM,
+  removeDynamicImportedScripts,
+  removePrefetchLinks,
+  removeScriptFromDOM
+};