import { History, To } from 'history'; import { DefaultTheme } from 'styled-components'; import { Logger } from '@elliemae/pui-diagnostics'; import { BreakPoint } from '@elliemae/pui-theme'; import { ScriptingObjectTypes, Events } from '@elliemae/pui-scripting-object'; import type { EventListeners, ScriptingObjects } from '@elliemae/microfe-common'; import { IMicroFEHost } from './host.js'; /** * Viewport size */ export type ViewportSize = { /** * width of the viewport */ width: number; /** * height of the viewport */ height: number; }; /** * options to initialize the guest micro frontend app */ export type InitParams, AppEvents extends EventListeners = Events> = { /** * micro frontend host application reference */ host: IMicroFEHost; /** * host application name */ hostName?: string; /** * host application url */ hostUrl?: string; /** * location of the manifest file */ manifestPath?: string; /** * home route of the application */ homeRoute?: string; /** * initial route of the application */ initialRoute?: To; /** * previous state of the application */ prevState?: Record | null; /** * history object */ history?: History; /** * theme object */ theme?: DefaultTheme; /** * host viewport breakpoint */ hostBreakpoint?: BreakPoint; /** * host viewport size */ hostViewportSize?: ViewportSize; /** * reference to the logger */ logger?: Logger; }; /** * options to mount the guest micro frontend app */ export type MountParams = { /** * DOM element id to mount the application */ containerId: string; /** * host application viewport breakpoint */ hostBreakpoint?: BreakPoint; /** * host application viewport size */ hostViewportSize?: ViewportSize; }; /** * Interface to connect and communicate with microfrontend guest application * @typeParam AppObjects - scripting object types * @typeParam AppEvents - scripting object events */ export interface IMicroFEGuest, AppEvents extends EventListeners = Events> { /** * unique guest instance id */ uuid: string; /** * guest window object */ readonly guestWindow: Window; /** * initialize the guest micro frontend application * @param {InitParams} params guest initailization options */ init(params: InitParams): Promise; /** * mount application to the window DOM * @param {MountParams} params application dom mount options */ mount(params: MountParams): Promise; /** * unmount application from the DOM * @param {MountParams} params DOM unmount options * @returns application state serialized as JSON */ unmount(params: MountParams): Promise>; }