@elliemae/pui-app-sdk 3.0.0-beta.1 → 3.0.0-beta.13

package/dist/es/view/app-root/hosted-app.js

@@ -1,8 +1,9 @@
+import * as React from "react";
 import styled from "styled-components";
-import { MediaBreakpoint } from "../media-breakpoint";
-import { WindowSize } from "../window-size";
-import { HTMLWaitMessage } from "../modals/wait-message/html-wait-message";
-import GlobalStyle from "./style";
+import { MediaBreakpoint } from "../media-breakpoint/index.js";
+import { WindowSize } from "../window-size/index.js";
+import { HTMLWaitMessage } from "../modals/wait-message/html-wait-message.js";
+import GlobalStyle from "./style.js";
 const Div = styled.div`
   height: 100%;
 `;

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

@@ -1,14 +1,15 @@
+import * as React from "react";
 import { Provider } from "react-redux";
 import { ThemeProvider } from "styled-components";
-import { Router } from "react-router-dom";
 import { getDefaultTheme } from "@elliemae/pui-theme";
 import { useInjectSaga } from "redux-injectors";
-import { isStandAloneGuest, isHost } from "../../utils/micro-frontend";
-import { waitMessage } from "../../sideeffect/wait-message";
-import { errorToast } from "../../sideeffect/error-toast";
-import { ErrorBoundary } from "../error-boundary";
-import { StandAloneApp } from "./stand-alone-app";
-import { HostedApp } from "./hosted-app";
+import { AppRouter } from "../app-router.js";
+import { isStandAloneGuest, isHost } from "../../utils/micro-frontend/index.js";
+import { waitMessage } from "../../sideeffect/wait-message/index.js";
+import { errorToast } from "../../sideeffect/error-toast/index.js";
+import { ErrorBoundary } from "../error-boundary/index.js";
+import { StandAloneApp } from "./stand-alone-app.js";
+import { HostedApp } from "./hosted-app.js";
 const AppToRender = (props) => {
   useInjectSaga({ key: "waitMessage", saga: waitMessage });
   useInjectSaga({ key: "errorToast", saga: errorToast });
@@ -31,7 +32,7 @@ const AppRoot = ({
   errorTemplate
 }, /* @__PURE__ */ React.createElement(Provider, {
   store
-}, /* @__PURE__ */ React.createElement(Router, {
+}, /* @__PURE__ */ React.createElement(AppRouter, {
   history
 }, /* @__PURE__ */ React.createElement(ThemeProvider, {
   theme

package/dist/es/view/app-root/stand-alone-app.js

@@ -1,12 +1,13 @@
+import * as React from "react";
 import styled from "styled-components";
 import { LiveAnnouncer } from "react-aria-live";
-import { MediaBreakpoint } from "../media-breakpoint";
-import { WindowSize } from "../window-size";
-import { SessionTimeout } from "../session-timeout";
-import { LiveMessage } from "../live-message";
-import { ErrorToast } from "../error-toast";
-import { WaitMessage as DefaultWaitMessage } from "../modals/wait-message";
-import GlobalStyle from "./style";
+import { MediaBreakpoint } from "../media-breakpoint/index.js";
+import { WindowSize } from "../window-size/index.js";
+import { SessionTimeout } from "../session-timeout/index.js";
+import { LiveMessage } from "../live-message/index.js";
+import { ErrorToast } from "../error-toast/index.js";
+import { WaitMessage as DefaultWaitMessage } from "../modals/wait-message/index.js";
+import GlobalStyle from "./style.js";
 const Div = styled.div`
   height: 100%;
 `;

package/dist/es/view/app-router.js

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { useState, useLayoutEffect } from "react";
+import { Router } from "react-router-dom";
+const AppRouter = ({ history, ...props }) => {
+  const [state, setState] = useState({
+    action: history.action,
+    location: history.location
+  });
+  useLayoutEffect(() => history.listen(setState), [history]);
+  return /* @__PURE__ */ React.createElement(Router, {
+    ...props,
+    location: state.location,
+    navigationType: state.action,
+    navigator: history
+  });
+};
+export {
+  AppRouter
+};

package/dist/es/view/error-boundary/default-error-template.js

@@ -1,3 +1,4 @@
+import * as React from "react";
 const DefaultErrorTemplate = () => /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("h2", null, "We are unable to process your request"), /* @__PURE__ */ React.createElement("section", null, "Please close your browser and login again"));
 export {
   DefaultErrorTemplate

package/dist/es/view/error-boundary/index.js

@@ -1,9 +1,9 @@
 import React from "react";
 import {
   DefaultErrorTemplate
-} from "./default-error-template";
-import { getLogger } from "../../utils/micro-frontend";
-import { logRecords } from "../../utils/log-records";
+} from "./default-error-template.js";
+import { getLogger } from "../../utils/micro-frontend/index.js";
+import { logRecords } from "../../utils/log-records.js";
 class ErrorBoundary extends React.Component {
   constructor(props) {
     super(props);

package/dist/es/view/error-toast/index.js

@@ -1,12 +1,8 @@
+import * as React from "react";
 import { useEffect, memo } from "react";
-import {
-  ToastPosition,
-  ToastType,
-  DSToast,
-  toast
-} from "@elliemae/ds-basic/Toast";
-import { useAppSelector, useAppDispatch } from "../../data/react-redux";
-import { actions as error } from "../../data/error";
+import { ToastPosition, ToastType, DSToast, toast } from "@elliemae/ds-toast";
+import { useAppSelector, useAppDispatch } from "../../data/react-redux.js";
+import { actions as error } from "../../data/error/index.js";
 const ErrorToast = memo((props) => {
   const storeError = useAppSelector((state) => state?.error);
   const dispatch = useAppDispatch();

package/dist/es/view/fetch-host-app-data/index.js

@@ -1,7 +1,10 @@
 import _ from "lodash";
-import { isHostAppDataExist, setHostAppData } from "./store";
-import { sendMessageToHost, getHostAppData } from "../message-to-host-app";
-import { bindEvent } from "../host-binding-events";
+import { isHostAppDataExist, setHostAppData } from "./store.js";
+import {
+  sendMessageToHost,
+  getHostAppData
+} from "../message-to-host-app/index.js";
+import { bindEvent } from "../host-binding-events/index.js";
 const fetchHostAppData = (hostedAppUrl, guestAppId) => {
   const isDataExist = isHostAppDataExist();
   return new Promise((resolve) => {

package/dist/es/view/fields/check-box/index.js

@@ -1,4 +1,5 @@
-import DSCheckbox, { CHECKBOX_VARIANT } from "@elliemae/ds-basic/form/Checkbox";
+import * as React from "react";
+import { DSCheckbox, CHECKBOX_VARIANT } from "@elliemae/ds-form/Checkbox";
 import {
   Controller
 } from "react-hook-form";

package/dist/es/view/fields/combo-box/index.js

@@ -1,4 +1,5 @@
-import DSComboBox from "@elliemae/ds-basic/form/ComboBox";
+import * as React from "react";
+import { DSComboBox } from "@elliemae/ds-form/ComboBox";
 import {
   Controller
 } from "react-hook-form";

package/dist/es/view/fields/date-input/index.js

@@ -1,4 +1,5 @@
-import DSDateInput from "@elliemae/ds-basic/form/DateInput";
+import * as React from "react";
+import { DSDateInput } from "@elliemae/ds-form/DateInput";
 import {
   Controller
 } from "react-hook-form";

package/dist/es/view/fields/date-picker/index.js

@@ -1,4 +1,5 @@
-import DSDatePicker from "@elliemae/ds-date-picker";
+import * as React from "react";
+import { DSDatePicker } from "@elliemae/ds-date-picker";
 import {
   Controller
 } from "react-hook-form";

package/dist/es/view/fields/form-item-layout/index.js

@@ -1,6 +1,7 @@
-import DSFormItemLayout from "@elliemae/ds-basic/form/FormItem";
+import * as React from "react";
+import { DSFormItemLayout } from "@elliemae/ds-form/FormItem";
 import { get } from "react-hook-form";
-import { ConnectForm } from "../connect-form";
+import { ConnectForm } from "../connect-form.js";
 const FormItemLayout = ({
   name,
   ...rest

package/dist/es/view/fields/input-mask/index.js

@@ -1,7 +1,9 @@
-import DSInputMask, {
+import * as React from "react";
+import {
+  DSInputMask,
   MASK_TYPES,
   MASK_PIPES
-} from "@elliemae/ds-basic/form/InputMask";
+} from "@elliemae/ds-form/InputMask";
 import {
   Controller
 } from "react-hook-form";

package/dist/es/view/fields/large-text-box/index.js

@@ -1,4 +1,5 @@
-import DSLargeInputText from "@elliemae/ds-basic/form/LargeInputText";
+import * as React from "react";
+import { DSLargeInputText } from "@elliemae/ds-form/LargeInputText";
 import {
   Controller
 } from "react-hook-form";

package/dist/es/view/fields/radio/index.js

@@ -1,4 +1,5 @@
-import DSRadio from "@elliemae/ds-basic/form/Radio";
+import * as React from "react";
+import { DSRadio } from "@elliemae/ds-form/Radio";
 import {
   Controller
 } from "react-hook-form";

package/dist/es/view/fields/radio-group/index.js

@@ -1,4 +1,5 @@
-import DSRadioGroup from "@elliemae/ds-basic/form/RadioGroup";
+import * as React from "react";
+import { DSRadioGroup } from "@elliemae/ds-form/RadioGroup";
 import {
   Controller
 } from "react-hook-form";

package/dist/es/view/fields/text-box/index.js

@@ -1,4 +1,5 @@
-import DSTextBox from "@elliemae/ds-basic/form/TextBox";
+import * as React from "react";
+import { DSTextBox } from "@elliemae/ds-form/TextBox";
 import {
   Controller
 } from "react-hook-form";

package/dist/es/view/fields/watch-value.js

@@ -1,3 +1,4 @@
+import * as React from "react";
 import styled from "styled-components";
 import { useFormContext } from "react-hook-form";
 const Section = styled.section`

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

@@ -1,3 +1,4 @@
+import * as React from "react";
 import styled from "styled-components";
 import {
   useForm,

package/dist/es/view/form/personal-info-section.js

@@ -1,8 +1,9 @@
+import * as React from "react";
 import moment from "moment";
-import { TextBox } from "../fields/text-box";
-import { ComboBox } from "../fields/combo-box";
-import { DateInput } from "../fields/date-input";
-import { FormItemLayout } from "../fields/form-item-layout";
+import { TextBox } from "../fields/text-box/index.js";
+import { ComboBox } from "../fields/combo-box/index.js";
+import { DateInput } from "../fields/date-input/index.js";
+import { FormItemLayout } from "../fields/form-item-layout/index.js";
 const FirstName = () => /* @__PURE__ */ React.createElement(FormItemLayout, {
   floatingLabel: true,
   inputComponent: TextBox,

package/dist/es/view/form/submit-button/index.js

@@ -1,5 +1,6 @@
+import * as React from "react";
 import { useFormContext } from "react-hook-form";
-import DSButton from "@elliemae/ds-basic/Button";
+import { DSButton } from "@elliemae/ds-button";
 const FormSubmitButton = ({
   ...rest
 }) => {

package/dist/es/view/guest-unload-handlers/index.js

@@ -1,4 +1,4 @@
-import { sendMessageToHost } from "../message-to-host-app";
+import { sendMessageToHost } from "../message-to-host-app/index.js";
 const onGuestUnloadStart = () => new Promise((resolve) => {
   window.addEventListener("message", (msg) => {
     if (msg.data.id === "unload-guest" || msg.data.id === "close_loan") {

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

@@ -0,0 +1,27 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Intro" />
+
+# Get Started
+
+Software Development Kit / API for developing React Web applications. Implements cross cutting concerns as reusable APIs
+
+## Install
+
+`npm install --save @elliemae/app-react-dependencies @elliemae/pui-user-monitoring @elliemae/pui-theme @elliemae/ds-basic @elliemae/ds-modal @elliemae/pui-app-sdk`
+
+### **Use**
+
+Import react components you want into your UI
+
+`import { WaitMessage } from ‘@elliemae/pui-app-sdk’;`
+
+and use them like so
+
+```
+  const LoadingIndicator = () => (
+    <div>
+      <WaitMessage size='m' isOpen />
+    </div>
+  )
+```

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

@@ -1,5 +1,6 @@
+import * as React from "react";
 import { LiveMessage as AriaLiveMessage } from "react-aria-live";
-import { useAppSelector } from "../../data/react-redux";
+import { useAppSelector } from "../../data/react-redux.js";
 const LiveMessage = () => {
   const message = useAppSelector((state) => state.liveMessage?.message);
   const id = useAppSelector((state) => state.liveMessage?.id);

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

@@ -1,5 +1,6 @@
+import * as React from "react";
 import { lazy, Suspense } from "react";
-import { WaitMessageLauncher } from "../modals/wait-message/wait-message-launcher";
+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, {

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

@@ -1,7 +1,7 @@
 import { useEffect } from "react";
-import { useAppDispatch } from "../../data/react-redux";
-import { login } from "../../utils/auth";
-import { LOGIN_SUCCESS } from "../../data/auth/actions";
+import { useAppDispatch } from "../../data/react-redux.js";
+import { login } from "../../utils/auth/index.js";
+import { LOGIN_SUCCESS } from "../../data/auth/actions.js";
 const Login = ({
   clientId,
   scope,
@@ -14,7 +14,7 @@ const Login = ({
     }).catch(() => {
     });
   }, [dispatch, clientId, scope, responseType]);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null);
+  return null;
 };
 export {
   Login

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

@@ -1,10 +1,10 @@
 import { useEffect, useContext } from "react";
 import { ThemeContext } from "styled-components";
 import { publish } from "pubsub-js";
-import { useAppDispatch } from "../../data/react-redux";
-import { breakpoint } from "../../data/breakpoint";
-import { useMediaBreakpoints } from "../useMediaBreakpoints";
-import { HOST_WINDOW_BREAKPOINT_CHANGED } from "../../utils/constants";
+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";
 const MediaBreakpoint = () => {
   const theme = useContext(ThemeContext);
   const currentBreakpoint = useMediaBreakpoints([
@@ -17,7 +17,7 @@ const MediaBreakpoint = () => {
     dispatch({ type: breakpoint.change, payload: currentBreakpoint });
     publish(HOST_WINDOW_BREAKPOINT_CHANGED, currentBreakpoint);
   }, [currentBreakpoint, dispatch]);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null);
+  return null;
 };
 export {
   MediaBreakpoint

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

@@ -1,4 +1,4 @@
-import { removeEvent } from "../host-binding-events";
+import { removeEvent } from "../host-binding-events/index.js";
 const getHostAppData = (action, resolve) => (event) => {
   if (event.data.id === "host-app-data") {
     action(event.data);

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

@@ -1,23 +1,26 @@
-import { persistentStorage } from "../../../utils/web-storage";
-import { CMicroAppHost } from "../../../utils/micro-frontend/host";
-import { getLogger } from "../../../utils/micro-frontend";
-import { logRecords } from "../../../utils/log-records";
-import { APP_CONTAINER_ID_PREFIX } from "../const";
-import { getCurrentBreakpoint, getViewportSize } from "../../../utils/window";
+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";
+} from "../resources/style.js";
 import {
   addScriptToDOM,
   removeDynamicImportedScripts,
   removePrefetchLinks
-} from "../resources/script";
+} from "../resources/script.js";
 import {
   getAppManifest,
   getFullFileNameofAssetsFromManifest
-} from "../resources/manifest";
-const cssType = new RegExp(/\.css$/);
+} from "../resources/manifest.js";
+const cssType = /\.css$/;
 const isCss = (fileName) => cssType.test(fileName);
 const activeApps = {};
 const initApplication = async ({
@@ -120,6 +123,8 @@ const unloadApp = ({
   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)

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

@@ -1,7 +1,8 @@
+import * as React from "react";
 import { memo } from "react";
 import styled from "styled-components";
-import { APP_CONTAINER_ID_PREFIX } from "./const";
-import { useAppWillRender } from "./use-app-will-render";
+import { APP_CONTAINER_ID_PREFIX } from "./const.js";
+import { useAppWillRender } from "./use-app-will-render.js";
 const Div = styled.div`
   height: 100%;
   width: 100%;

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

@@ -1,12 +1,14 @@
-import { getHTTPClient } from "../../../communication/http-client";
-import { removeDoubleSlash } from "../../../utils/url";
-import { getLogger } from "../../../utils/micro-frontend";
-import { logRecords } from "../../../utils/log-records";
+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");
 const getAppManifest = async ({
   hostUrl,
   manifestPath
 }) => {
+  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;

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

@@ -1,6 +1,6 @@
-import { removeDoubleSlash } from "../../../utils/url";
+import { removeDoubleSlash } from "../../../utils/url.js";
 const APP_SCRIPT_ID_PREFIX = "emui-script-";
-const HEAD_SCRIPTS = new RegExp("/(?:emuiDiagnostics|global|global-prod|emuiUserMonitoring)(?:..*)?.js", "i");
+const HEAD_SCRIPTS = /(?:emuiDiagnostics|global|global-prod|emuiUserMonitoring)(?:..*)?.js/;
 const isHeadScript = (scriptSrc) => HEAD_SCRIPTS.test(scriptSrc);
 const addScriptToDOM = ({ name, hostUrl, documentEle }, fileName, index) => new Promise((resolve, reject) => {
   const ele = documentEle.createElement("script");

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

@@ -1,4 +1,4 @@
-import { removeDoubleSlash } from "../../../utils/url";
+import { removeDoubleSlash } from "../../../utils/url.js";
 const APP_STYLE_ID_PREFIX = "emui-style-";
 const addStylesToDOM = ({ name, hostUrl, documentEle }, fileName, index) => new Promise((resolve, reject) => {
   const ele = documentEle.createElement("link");

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

@@ -1,18 +1,24 @@
 import { useRef, useLayoutEffect, useCallback } from "react";
 import { merge } from "lodash";
 import { useDispatch } from "react-redux";
-import { waitMessage } from "../../data/wait-message/actions";
-import { loadApp, unloadApp, mountApp, unmountApp } from "./app-factory";
+import { waitMessage } from "../../data/wait-message/actions.js";
+import {
+  loadApp,
+  unloadApp,
+  mountApp,
+  unmountApp
+} from "./app-factory/index.js";
 import {
   getLogger,
   getMicroFrontEndAppConfig
-} from "../../utils/micro-frontend";
-import { logRecords } from "../../utils/log-records";
+} from "../../utils/micro-frontend/index.js";
+import { logRecords } from "../../utils/log-records.js";
 const useAppWillRender = ({
   id,
   documentEle,
   history,
   theme,
+  homeRoute,
   onUnloadComplete
 }) => {
   const dispatch = useDispatch ? useDispatch() : null;
@@ -52,13 +58,14 @@ const useAppWillRender = ({
     const appConfig = merge(getConfig(), {
       documentEle,
       history,
-      theme
+      theme,
+      homeRoute
     });
     load(appConfig);
     return () => {
       ref.current = unload(appConfig);
     };
-  }, [documentEle, getConfig, history, theme, load, unload]);
+  }, [documentEle, getConfig, history, theme, homeRoute, load, unload]);
 };
 export {
   useAppWillRender

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

@@ -1,4 +1,4 @@
-import { getAppConfigValue } from "../../utils/app-config/config";
+import { getAppConfigValue } from "../../utils/app-config/config.js";
 const getNavigationLinks = () => {
   const microApps = getAppConfigValue("microFrontendApps");
   if (!microApps)

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

@@ -1,10 +1,11 @@
+import * as React from "react";
 import { memo, useState } from "react";
 import frameHtml from "file-loader?name=iframe.[contenthash].[ext]!./iframe/index.html";
-import { IFrame } from "./iframe";
-import { useFrameLoaded } from "./use-frame-loaded";
+import { IFrame } from "./iframe/index.js";
+import { useFrameLoaded } from "./use-frame-loaded.js";
 import {
   useAppWillRender
-} from "../micro-app/use-app-will-render";
+} from "../micro-app/use-app-will-render.js";
 const App = memo(({ id, dispose, onUnloadComplete, ...rest }) => {
   const [documentEle, setDocumentEle] = useState(null);
   useFrameLoaded({ id, documentEle, ...rest });

package/dist/es/view/micro-iframe-app/iframe/index.html

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <!-- The first thing in any HTML file should be the charset -->
+    <meta charset="utf-8" />
+    <!-- Make the page mobile compatible -->
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <!-- Allow installing the app to the homescreen -->
+    <meta name="mobile-web-app-capable" content="yes" />
+    <link rel="icon" href="/favicon.ico" />
+    <title>Application</title>
+    <!-- Google Tag Manager -->
+    <!-- <script nonce="__CSP_NONCE__">
+    (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);
+  </script> -->
+    <!-- <script nonce="__CSP_NONCE__">
+      window.emuiUserMonitoring = window.parent.emuiUserMonitoring || {
+        setCustomVirtualPageName: function () {},
+        startVirtualPageMonitoringWithAutoEnd: function () {},
+      };
+    </script> -->
+    <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>
+  </head>
+
+  <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
+      <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>
+  </body>
+</html>

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

@@ -1,6 +1,7 @@
+import * as React from "react";
 import { memo, useRef } from "react";
 import styled from "styled-components";
-import { IFRAME_CONTAINER_ID_PREFIX } from "./const";
+import { IFRAME_CONTAINER_ID_PREFIX } from "./const.js";
 const Div = styled.div`
   display: flex;
   width: 100%;