@elliemae/pui-app-sdk 5.14.2 → 5.15.0

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

@@ -24,8 +24,23 @@ const cssType = /\.css$/;
 const isCss = (fileName) => cssType.test(fileName);
 const activeApps = {};
 const getPathName = (url) => url ? new URL(url).pathname : "";
+const getAppNotFoundError = (id, uuid) => `Application ${id} with instance id ${uuid} is not found. Most probably the appId property of app.config.json is not set to ${id}`;
+const getMicroAppGuestFromWindow = ({
+  id,
+  uuid
+}) => {
+  let microAppGuest = null;
+  const guests = window.emui?.[id];
+  if (Array.isArray(guests)) {
+    microAppGuest = guests.find((guest) => guest.uuid === uuid) ?? null;
+  } else {
+    microAppGuest = guests;
+  }
+  return microAppGuest;
+};
 const initApplication = async ({
   id,
+  uuid,
   name,
   hostUrl,
   history,
@@ -33,18 +48,19 @@ const initApplication = async ({
   manifestPath,
   homeRoute
 }) => {
-  const app = window.emui?.[id];
-  if (!app) {
-    throw new Error(
-      `Application ${name} with ${id} is not found. Most probably the appId property of app.config.json is not set to ${id}`
-    );
-  }
+  const app = getMicroAppGuestFromWindow({
+    id,
+    uuid
+  });
+  if (!app) throw new Error(getAppNotFoundError(id, uuid));
   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}`);
+  const prevState = await persistentStorage.get(
+    `state-${id}-${uuid}`
+  );
   return init({
     host: CMicroAppHost.getInstance(),
     hostUrl,
@@ -57,8 +73,12 @@ const initApplication = async ({
     hostViewportSize: getViewportSize()
   });
 };
-const mountApp = async ({ id, name }) => {
-  const app = (window.emui || {})[id] || {};
+const mountApp = async ({ id, uuid, name }) => {
+  const app = getMicroAppGuestFromWindow({
+    id,
+    uuid
+  });
+  if (!app) throw new Error(getAppNotFoundError(id, uuid));
   const { mount } = app;
   if (!mount || typeof mount !== "function")
     throw new Error(
@@ -70,8 +90,11 @@ const mountApp = async ({ id, name }) => {
     hostViewportSize: getViewportSize()
   });
 };
-const unmountApp = async ({ id, name }) => {
-  const app = (window.emui || {})[id];
+const unmountApp = async ({ id, uuid, name }) => {
+  const app = getMicroAppGuestFromWindow({
+    id,
+    uuid
+  });
   if (!app) return null;
   const { unmount } = app;
   if (!unmount) return null;
@@ -83,66 +106,125 @@ const unmountApp = async ({ id, name }) => {
     containerId: `${APP_CONTAINER_ID_PREFIX}${id}`
   });
   if (currentState) {
-    await persistentStorage.set(`state-${id}`, currentState);
+    await persistentStorage.set(`state-${id}-${uuid}`, currentState);
   }
   return Promise.resolve();
 };
-const addAppToActiveAppList = (id, elementIds) => {
-  const app = (window.emui || {})[id] || {};
+const addAppToActiveAppList = (id, uuid, elementIds) => {
+  const app = getMicroAppGuestFromWindow({
+    id,
+    uuid
+  });
+  if (!app) throw new Error(getAppNotFoundError(id, uuid));
   const { getRef } = app;
-  activeApps[id] = { elementIds };
+  activeApps[`${id}-${uuid}`] = { elementIds };
   const host = CMicroAppHost.getInstance();
-  if (host) host.activeGuests[id] = getRef && getRef() || {};
+  if (host) host.activeGuests[`${id}-${uuid}`] = 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 logRecord = logRecords.APP_INIT_FAILED(appConfig.id, err.message);
+  Promise.all(requests).then(addAppToActiveAppList.bind(null, appConfig.id, appConfig.uuid)).then(initApplication.bind(null, appConfig)).catch((err) => {
+    const logRecord = logRecords.APP_INIT_FAILED(
+      appConfig.id,
+      appConfig.uuid,
+      err.message
+    );
     getLogger().error({ ...logRecord, exception: err });
     throw new Error(logRecord.message);
   })
 );
-const removeAssetsFromDOM = (id, documentEle = document) => {
+const removeAssetsFromDOM = (id, uuid, documentEle = document) => {
   const host = CMicroAppHost.getInstance();
-  if (host) delete host.activeGuests[id];
-  const { elementIds } = activeApps[id] || {};
+  if (host) delete host.activeGuests[`${id}-${uuid}`];
+  const { elementIds } = activeApps[`${id}-${uuid}`] || {};
   if (elementIds) {
     elementIds.forEach((elementId) => {
       const ele = documentEle.getElementById(elementId);
       if (ele) ele.remove();
     });
-    delete activeApps[id];
+    delete activeApps[`${id}-${uuid}`];
+  }
+};
+const addAppToGlobalVariable = ({
+  id,
+  uuid,
+  documentEle
+}) => {
+  const newAppInstance = {
+    uuid,
+    init: null,
+    mount: null,
+    unmount: null,
+    getRef: null,
+    navigate: null
+  };
+  const app = getMicroAppGuestFromWindow({ id, uuid });
+  if (app) {
+    if (!uuid) {
+      throw new Error(
+        `Application ${id} is already loaded. uuid is required to load multiple instances of the same app`
+      );
+    }
+    if (Array.isArray(window.emui[id])) {
+      window.emui[id].push(newAppInstance);
+    } else {
+      window.emui[id] = [window.emui[id], newAppInstance];
+    }
+  } else {
+    window.emui[id] = newAppInstance;
+  }
+  if (documentEle.defaultView) {
+    documentEle.defaultView.emui = documentEle.defaultView.emui ?? {};
+    documentEle.defaultView.emui.uuid = uuid;
+  }
+};
+const removeAppFromGlobalVariable = (id, uuid) => {
+  if (Array.isArray(window.emui[id])) {
+    const index = window.emui[id].findIndex(
+      (app) => app.uuid === uuid
+    );
+    if (index > -1) window.emui[id].splice(index, 1);
+  } else {
+    delete window.emui[id];
   }
 };
 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);
-  let counter = 0;
-  const requests = assets.map((fileName) => {
-    counter += 1;
-    return !isCss(fileName) ? addScriptToDOM(appConfig, fileName, counter) : addStylesToDOM(appConfig, fileName, counter);
-  });
-  await waitAndInitApplication(appConfig, requests);
-  getLogger().info(logRecords.APP_LOADING_COMPLETE(appConfig.id));
+  const { id, uuid, documentEle } = appConfig;
+  addAppToGlobalVariable({ id, uuid, documentEle });
+  try {
+    getLogger().info(logRecords.APP_LOADING(id, uuid));
+    let assets = appConfig.files;
+    const manifest = await getAppManifest(appConfig);
+    assets = getFullFileNameofAssetsFromManifest(manifest, appConfig.files);
+    let counter = 0;
+    const requests = assets.map((fileName) => {
+      counter += 1;
+      return !isCss(fileName) ? addScriptToDOM(appConfig, fileName, counter) : addStylesToDOM(appConfig, fileName, counter);
+    });
+    await waitAndInitApplication(appConfig, requests);
+    getLogger().info(logRecords.APP_LOADING_COMPLETE(id, uuid));
+  } catch (err) {
+    removeAppFromGlobalVariable(id, uuid);
+    throw err;
+  }
 };
 const unloadApp = ({
   id,
+  uuid,
   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];
+  getLogger().info(logRecords.APP_UNLOADING(id, uuid));
+  const app = getMicroAppGuestFromWindow({ id, uuid });
   if (!app) return;
-  removeAssetsFromDOM(id, documentEle);
+  removeAssetsFromDOM(id, uuid, documentEle);
   removeDynamicImportedScripts(hostUrl, documentEle);
   removePrefetchLinks(hostUrl, documentEle);
   removeDynamicImportedStyles(hostUrl, documentEle);
-  if (window.emui && window.emui[id]) delete window.emui[id];
-  getLogger().info(logRecords.APP_UNLOADING_COMPLETE(id));
+  removeAppFromGlobalVariable(id, uuid);
+  getLogger().info(logRecords.APP_UNLOADING_COMPLETE(id, uuid));
 };
 export {
   loadApp,

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

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { memo } from "react";
+import { memo, useId } from "react";
 import styled from "styled-components";
 import { APP_CONTAINER_ID_PREFIX } from "./const.js";
 import { useAppWillRender } from "./use-app-will-render.js";
@@ -8,7 +8,8 @@ const Div = styled.div`
   width: 100%;
 `;
 const MicroApp = memo((props) => {
-  useAppWillRender(props);
+  const uuid = useId();
+  useAppWillRender({ uuid, ...props });
   return /* @__PURE__ */ jsx(Div, { id: `${APP_CONTAINER_ID_PREFIX}${props.id}` });
 });
 export {

package/dist/esm/view/micro-app/use-app-will-render.js

@@ -15,6 +15,7 @@ import {
 import { logRecords } from "../../utils/log-records.js";
 const useAppWillRender = ({
   id,
+  uuid,
   documentEle,
   history,
   theme,
@@ -30,27 +31,27 @@ const useAppWillRender = ({
     [id]
   );
   const unload = useCallback(
-    async (appConfig, loadFailed = false) => {
-      await unmountApp(appConfig);
-      unloadApp(appConfig);
+    async (appParams, loadFailed = false) => {
+      await unmountApp(appParams);
+      unloadApp(appParams);
       if (!loadFailed && onUnloadComplete) onUnloadComplete();
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
   const load = useCallback(
-    async (appConfig) => {
+    async (appParams) => {
       if (dispatch) dispatch(waitMessage.open());
       try {
         if (ref.current) await ref.current;
-        await loadApp(appConfig);
-        await mountApp(appConfig);
+        await loadApp(appParams);
+        await mountApp(appParams);
       } catch (ex) {
         getLogger().error({
           ...logRecords.APP_CONFIG_LOAD_FAILED,
           exception: ex
         });
-        await unload(appConfig, true);
+        await unload(appParams, true);
         throw ex;
       }
       if (dispatch) dispatch(waitMessage.close());
@@ -66,11 +67,12 @@ const useAppWillRender = ({
       theme,
       homeRoute
     });
-    load(appConfig);
+    const appParams = { ...appConfig, uuid };
+    load(appParams);
     return () => {
-      ref.current = unload(appConfig);
+      ref.current = unload(appParams);
     };
-  }, [documentEle, getConfig, history, theme, homeRoute, load, unload]);
+  }, [documentEle, getConfig, history, theme, homeRoute, load, unload, uuid]);
 };
 export {
   useAppWillRender

package/dist/esm/view/micro-iframe-app/app.js

@@ -7,11 +7,12 @@ import {
   useAppWillRender
 } from "../micro-app/use-app-will-render.js";
 const App = memo(
-  ({ id, dispose, onUnloadComplete, ...rest }) => {
+  ({ id, uuid, dispose, onUnloadComplete, ...rest }) => {
     const [documentEle, setDocumentEle] = useState(null);
     useFrameLoaded({ id, documentEle, ...rest });
     useAppWillRender({
       id,
+      uuid,
       documentEle: dispose ? null : documentEle,
       onUnloadComplete,
       ...rest

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

@@ -1,10 +1,11 @@
 import { createElement } from "react";
-import { useEffect, useState, memo } from "react";
+import { useEffect, useState, memo, useId } from "react";
 import { usePrevious } from "../use-previous.js";
 import { App } from "./app.js";
 const MicroIFrameApp = memo(({ entityId = null, ...rest }) => {
   const [disposePrevApp, setDisposePrevApp] = useState(false);
   const [appKey, setAppKey] = useState(Date.now());
+  const uuid = useId();
   const prevEntityId = usePrevious(entityId);
   useEffect(() => {
     if (prevEntityId !== entityId && prevEntityId) {
@@ -15,6 +16,7 @@ const MicroIFrameApp = memo(({ entityId = null, ...rest }) => {
     App,
     {
       ...rest,
+      uuid,
       key: appKey,
       dispose: disposePrevApp,
       onUnloadComplete: () => {

package/dist/types/lib/utils/log-records.d.ts

@@ -19,23 +19,23 @@ export declare const logRecords: {
         code: string;
         message: string;
     };
-    APP_INIT_FAILED: (appId: string, errMsg: string) => {
+    APP_INIT_FAILED: (appId: string, instanceId: string, errMsg: string) => {
         code: string;
         message: string;
     };
-    APP_LOADING: (appId: string) => {
+    APP_LOADING: (appId: string, instanceId: string) => {
         code: string;
         message: string;
     };
-    APP_LOADING_COMPLETE: (appId: string) => {
+    APP_LOADING_COMPLETE: (appId: string, instanceId: string) => {
         code: string;
         message: string;
     };
-    APP_UNLOADING: (appId: string) => {
+    APP_UNLOADING: (appId: string, instanceId: string) => {
         code: string;
         message: string;
     };
-    APP_UNLOADING_COMPLETE: (appId: string) => {
+    APP_UNLOADING_COMPLETE: (appId: string, instanceId: string) => {
         code: string;
         message: string;
     };

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

@@ -20,6 +20,7 @@ interface ConstructorParams {
     history?: History;
 }
 export declare class CMicroAppGuest implements IMicroAppGuest {
+    #private;
     private static instance;
     private readonly logger;
     private readonly appId;
@@ -38,6 +39,7 @@ export declare class CMicroAppGuest implements IMicroAppGuest {
     getProps(): GuestProps;
     private getSessionStorageItem;
     private getSSFAdapter;
+    get uuid(): string;
     init(this: CMicroAppGuest, options: InitOptions): Promise<void>;
     mount(this: CMicroAppGuest, options?: MountOptions): Promise<void>;
     unmount(this: CMicroAppGuest, options: MountOptions): Promise<JSONValue>;

package/dist/types/lib/utils/window.d.ts

@@ -2,7 +2,7 @@ import { IMicroAppGuest, IMicroAppHost, BAEvent } from '@elliemae/pui-micro-fron
 import { BreakPoint } from '@elliemae/pui-theme';
 import { Logger } from '@elliemae/pui-diagnostics';
 export type EMUI = {
-    [key: string]: IMicroAppGuest;
+    [key: string]: IMicroAppGuest | IMicroAppGuest[];
 } & {
     _BASE_PATH: string;
     _ASSET_PATH: string;
@@ -10,6 +10,8 @@ export type EMUI = {
     MicroAppHost?: IMicroAppHost;
     logger?: Logger;
     appId: string;
+    uuid: string;
+    app?: IMicroAppGuest;
 };
 declare global {
     interface Window {

package/dist/types/lib/view/micro-app/app-factory/index.d.ts

@@ -1,9 +1,13 @@
 import { MicroAppConfig } from '../../../utils/micro-frontend/types.js';
-export declare const mountApp: ({ id, name }: MicroAppConfig) => Promise<void>;
-export declare const unmountApp: ({ id, name }: MicroAppConfig) => Promise<void | null>;
-export declare const loadApp: (appConfig: MicroAppConfig) => Promise<void>;
-export declare const unloadApp: ({ id, hostUrl, documentEle, }: {
+export type AppParams = MicroAppConfig & {
+    uuid: string;
+};
+export declare const mountApp: ({ id, uuid, name }: AppParams) => Promise<void>;
+export declare const unmountApp: ({ id, uuid, name }: AppParams) => Promise<void | null>;
+export declare const loadApp: (appConfig: AppParams) => Promise<void>;
+export declare const unloadApp: ({ id, uuid, hostUrl, documentEle, }: {
     id: string;
+    uuid: string;
     hostUrl?: string;
     documentEle: Document;
 }) => void;

package/dist/types/lib/view/micro-app/types.d.ts

@@ -2,7 +2,7 @@ import { Theme } from '@elliemae/pui-theme';
 import { History } from 'history';
 export type MicroAppProps = {
     id: string;
-    documentEle?: HTMLDocument | null;
+    documentEle?: Document | null;
     history?: History;
     theme?: Theme;
     homeRoute?: string;

package/dist/types/lib/view/micro-app/use-app-will-render.d.ts

@@ -1,7 +1,8 @@
 import { MicroAppProps } from './types.js';
 export type OnUnloadCompleteFn = () => void;
 type UseAppWillRenderArgs = MicroAppProps & {
+    uuid: string;
     onUnloadComplete?: OnUnloadCompleteFn;
 };
-export declare const useAppWillRender: ({ id, documentEle, history, theme, homeRoute, onUnloadComplete, }: UseAppWillRenderArgs) => void;
+export declare const useAppWillRender: ({ id, uuid, documentEle, history, theme, homeRoute, onUnloadComplete, }: UseAppWillRenderArgs) => void;
 export {};

package/dist/types/lib/view/micro-iframe-app/app.d.ts

@@ -1,6 +1,7 @@
 import { OnUnloadCompleteFn } from '../micro-app/use-app-will-render.js';
 import { MicroIFrameAppProps } from './types.js';
 type AppProps = MicroIFrameAppProps & {
+    uuid: string;
     dispose: boolean;
     onUnloadComplete: OnUnloadCompleteFn;
 };