Update node version & preload iframe conditional (#79)

* Bump to nodejs 18.18.2
* Bump to v2.6.3

.tool-versions

@@ -1,2 +1,2 @@
 github-cli 2.42.1
-nodejs 18.17.1
+nodejs 18.18.2

package.json

@@ -18,7 +18,7 @@
     "url": "https://github.com/prismatic-io/embedded.git"
   },
   "license": "MIT",
-  "version": "2.6.2",
+  "version": "2.6.3",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [

src/lib/authenticate.ts

@@ -36,6 +36,7 @@ export const authenticate = async (options: AuthenticateProps) => {
   ) as HTMLIFrameElement;
 
   const state = stateService.getStateCopy();
+
   if (state.jwt !== token && iframeElement) {
     postMessage({
       iframe: iframeElement,
@@ -60,6 +61,7 @@ export const authenticate = async (options: AuthenticateProps) => {
 
   if (!authResponse.ok) {
     const responseText = await authResponse.text();
+
     if (responseText) {
       throw new Error(
         `Authentication failed. Server sent back: ${responseText}`
@@ -84,7 +86,9 @@ export const authenticate = async (options: AuthenticateProps) => {
       }
     }`,
   });
+
   state.embeddedDesignerEnabled =
     result.data.authenticatedUser.customer.allowEmbeddedDesigner;
+
   stateService.setState(state);
 };

src/lib/graphqlRequest.ts

@@ -14,14 +14,14 @@ export const graphqlRequest = async ({
 }: GraphqlRequestProps) => {
   assertInit("authenticate");
 
-  const { jwt: accessToken, prismaticUrl } = stateService.getStateCopy();
+  const { jwt, prismaticUrl } = stateService.getStateCopy();
 
   const response = await fetch(urlJoin(prismaticUrl, "api"), {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
       Accept: "application/json",
-      Authorization: `Bearer ${accessToken}`,
+      Authorization: `Bearer ${jwt}`,
     },
     body: JSON.stringify({ query, variables }),
   });

src/lib/init.ts

@@ -6,6 +6,7 @@ import stateService, { State, ValidKeys } from "../state";
 import {
   EMBEDDED_ID,
   EMBEDDED_IFRAME_CONTAINER_CLASS,
+  EMBEDDED_IFRAME_PRELOAD_ID,
   EMBEDDED_OVERLAY_CLASS,
   EMBEDDED_OVERLAY_SELECTOR,
   EMBEDDED_OVERLAY_VISIBLE_CLASS,
@@ -41,8 +42,6 @@ export const EMBEDDED_DEFAULTS = {
 };
 
 export const init = (optionsBase?: InitProps) => {
-  const existingElement = document.getElementById(EMBEDDED_ID);
-
   const options: InitProps = merge({}, EMBEDDED_DEFAULTS, optionsBase);
 
   // when we initialize, start from the fresh default state
@@ -57,8 +56,11 @@ export const init = (optionsBase?: InitProps) => {
   }
 
   state.initComplete = true;
+
   stateService.setState(state);
 
+  const existingElement = document.getElementById(EMBEDDED_ID);
+
   if (existingElement) {
     return;
   }
@@ -68,15 +70,19 @@ export const init = (optionsBase?: InitProps) => {
    * assets (css, js, fonts, etc.) into browser cache. Subsequent
    * calls, use existing connections and cached assets.
    */
-  if (!options.skipPreload) {
+  const existingIframePreload = document.getElementById(
+    EMBEDDED_IFRAME_PRELOAD_ID
+  );
+
+  if (!existingIframePreload && !options.skipPreload) {
     document.body.insertAdjacentHTML(
       "beforeend",
       `<iframe
+        id="${EMBEDDED_IFRAME_PRELOAD_ID}"
         src="${state.prismaticUrl}/embedded"
-        title="PIO Embedded Preload"
+        style="visibility: hidden; display: none;"
         height="0"
         width="0"
-        style="visibility: hidden; display: none;"
       />`
     );
   }

src/utils/assertEmbeddedDesigner.ts

@@ -1,7 +1,9 @@
 import stateService from "../state";
 
 export const assertEmbeddedDesigner = (functionName: string) => {
-  if (!stateService.getStateCopy().embeddedDesignerEnabled) {
+  const { embeddedDesignerEnabled } = stateService.getStateCopy();
+
+  if (!embeddedDesignerEnabled) {
     throw new Error(
       `Embedded designer must be enabled for this customer in order to call ${functionName}`
     );

src/utils/iframe.ts

@@ -10,6 +10,7 @@ import { ScreenConfiguration } from "../types/screenConfiguration";
 
 export const EMBEDDED_ID = "pio__embedded";
 export const EMBEDDED_IFRAME_ID = "pio__iframe";
+export const EMBEDDED_IFRAME_PRELOAD_ID = "pio__iframe-preload";
 export const EMBEDDED_IFRAME_CONTAINER_CLASS = "pio__iframeContainer";
 export const EMBEDDED_IFRAME_CONTAINER_SELECTOR = `#${EMBEDDED_ID} .${EMBEDDED_IFRAME_CONTAINER_CLASS}`;
 export const EMBEDDED_OVERLAY_CLASS = "pio__overlay";
@@ -79,6 +80,7 @@ export const setIframe = (
       JSON.stringify(state.screenConfiguration.initializing)
     );
   }
+
   if (state.fontConfiguration) {
     queryParams.set(
       "fontConfiguration",