@thoughtspot/visual-embed-sdk 1.24.0-preRender.1 → 1.24.0-preRender.2

package/src/embed/ts-embed.ts

@@ -377,8 +377,7 @@ export class TsEmbed {
         queryParams[Param.ViewPortWidth] = window.innerWidth;
         queryParams[Param.Version] = version;
         queryParams[Param.AuthType] = this.embedConfig.authType;
-        queryParams[Param.blockNonEmbedFullAppAccess] = this.embedConfig.blockNonEmbedFullAppAccess
-            ?? true;
+        queryParams[Param.blockNonEmbedFullAppAccess] = this.embedConfig.blockNonEmbedFullAppAccess ?? true;
         if (this.embedConfig.disableLoginRedirect === true || this.embedConfig.autoLogin === true) {
             queryParams[Param.DisableLoginRedirect] = true;
         }
@@ -455,8 +454,7 @@ export class TsEmbed {
             queryParams[Param.ContextMenuTrigger] = false;
         }
 
-        const spriteUrl = customizations?.iconSpriteUrl
-            || this.embedConfig.customizations?.iconSpriteUrl;
+        const spriteUrl = customizations?.iconSpriteUrl || this.embedConfig.customizations?.iconSpriteUrl;
         if (spriteUrl) {
             queryParams[Param.IconSpriteUrl] = spriteUrl.replace('https://', '');
         }
@@ -535,9 +533,7 @@ export class TsEmbed {
         // @ts-ignore
         iFrame.allow = 'clipboard-read; clipboard-write';
 
-        const {
-            height: frameHeight, width: frameWidth, ...restParams
-        } = this.viewConfig.frameParams || {};
+        const { height: frameHeight, width: frameWidth, ...restParams } = this.viewConfig.frameParams || {};
         const width = getCssDimension(frameWidth || DEFAULT_EMBED_WIDTH);
         const height = getCssDimension(frameHeight || DEFAULT_EMBED_HEIGHT);
         setAttributes(iFrame, restParams);
@@ -551,11 +547,12 @@ export class TsEmbed {
 
     protected handleInsertionIntoDOM(child: string | Node, showPreRenderByDefault = false): void {
         if (this.isPreRendered) {
-            this.insertIntoDOMForPreRender(
-                this.embedConfig.loginFailedMessage, showPreRenderByDefault,
-            );
+            if (!this.viewConfig.preRenderId) {
+                throw Error('PreRender id is required for preRender');
+            }
+            this.insertIntoDOMForPreRender(child, showPreRenderByDefault);
         } else {
-            this.insertIntoDOM(this.embedConfig.loginFailedMessage);
+            this.insertIntoDOM(child);
         }
     }
 
@@ -592,7 +589,8 @@ export class TsEmbed {
                 ?.then((isLoggedIn: boolean) => {
                     if (!isLoggedIn) {
                         this.handleInsertionIntoDOM(
-                            this.embedConfig.loginFailedMessage, showPreRenderByDefault,
+                            this.embedConfig.loginFailedMessage,
+                            showPreRenderByDefault,
                         );
                         return;
                     }
@@ -616,9 +614,7 @@ export class TsEmbed {
                     this.iFrame.addEventListener('error', () => {
                         nextInQueue();
                     });
-                    this.handleInsertionIntoDOM(
-                        this.iFrame, showPreRenderByDefault,
-                    );
+                    this.handleInsertionIntoDOM(this.iFrame, showPreRenderByDefault);
                     const prefetchIframe = document.querySelectorAll('.prefetchIframe');
                     if (prefetchIframe.length) {
                         prefetchIframe.forEach((el) => {
@@ -641,40 +637,40 @@ export class TsEmbed {
     public getPreRenderIds() {
         return {
             wrapper: `tsEmbed-pre-render-wrapper-${this.viewConfig.preRenderId}`,
-            shield: `tsEmbed-pre-render-shield-${this.viewConfig.preRenderId}`,
+            // shield:
+            // `tsEmbed-pre-render-shield-${this.viewConfig.preRenderId}`,
             child: `tsEmbed-pre-render-child-${this.viewConfig.preRenderId}`,
         };
     }
 
-    protected createPreRenderWrapper(child: HTMLElement): HTMLDivElement {
+    protected createPreRenderWrapper(): HTMLDivElement {
         if (!this.viewConfig.preRenderId) {
-            throw new Error('PreRender id is required');
+            throw new Error('PreRender id is required to create PreRender wrapper');
         }
 
         const preRenderIds = this.getPreRenderIds();
 
-        [preRenderIds.wrapper, preRenderIds.shield, preRenderIds.child]
-            .map((id) => document.getElementById(id))
-            .filter((element) => element)
-            .forEach((existingElement) => existingElement.remove());
+        document.getElementById(preRenderIds.wrapper)?.remove();
 
         const preRenderWrapper = document.createElement('div');
         preRenderWrapper.id = preRenderIds.wrapper;
-        setStyleProperties(preRenderWrapper, { position: 'absolute', width: '100vw', height: '100vh' });
+        const initialPreRenderWrapperStyle = {
+            position: 'absolute',
+            width: '100vw',
+            height: '100vh',
+        };
+        setStyleProperties(preRenderWrapper, initialPreRenderWrapperStyle);
 
         // const preRenderShield = document.createElement('div');
         // preRenderShield.id = preRenderIds.shield;
         // setStyleProperties(preRenderShield, { position: 'absolute',
         // width: '100%', height: '100%' });
 
-        child.id = preRenderIds.child;
-
-        preRenderWrapper.appendChild(child);
         // preRenderWrapper.appendChild(preRenderShield);
 
-        this.preRenderWrapper = preRenderWrapper;
+        // this.preRenderWrapper = preRenderWrapper;
         // this.preRenderShield = preRenderShield;
-        this.preRenderChild = child;
+        // this.preRenderChild = child;
 
         return preRenderWrapper;
     }
@@ -691,8 +687,7 @@ export class TsEmbed {
             || document.getElementById(preRenderIds.wrapper);
         // this.preRenderShield = this.preRenderShield
         //     || document.getElementById(preRenderIds.shield);
-        this.preRenderChild = this.preRenderChild
-            || document.getElementById(preRenderIds.child);
+        this.preRenderChild = this.preRenderChild || document.getElementById(preRenderIds.child);
 
         if (this.preRenderWrapper && this.preRenderChild) {
             this.isPreRendered = true;
@@ -706,20 +701,43 @@ export class TsEmbed {
         return this.isPreRendered;
     }
 
-    protected insertIntoDOMForPreRender(
-        child: string | HTMLElement,
-        showPreRenderByDefault = false,
-    ): void {
-        let childNode: HTMLElement;
+    protected createPreRenderChild(child: string | Node): HTMLElement {
+        const preRenderIds = this.getPreRenderIds();
+
+        document.getElementById(preRenderIds.child)?.remove();
+
+        if (child instanceof HTMLElement) {
+            child.id = preRenderIds.child;
+            return child;
+        }
+
+        const divChildNode = document.createElement('div');
+        setStyleProperties(divChildNode, { width: '100%', height: '100%' });
+        divChildNode.id = preRenderIds.child;
+
         if (typeof child === 'string') {
-            const divChildNode = document.createElement('div');
             divChildNode.innerHTML = child;
-            childNode = divChildNode;
         } else {
-            childNode = child;
+            divChildNode.appendChild(child);
         }
 
-        const preRenderWrapper = this.createPreRenderWrapper(childNode);
+        return divChildNode;
+    }
+
+    protected insertIntoDOMForPreRender(
+        child: string | Node,
+        showPreRenderByDefault = false,
+    ): void {
+        const preRenderChild = this.createPreRenderChild(child);
+        const preRenderWrapper = this.createPreRenderWrapper();
+        preRenderWrapper.appendChild(preRenderChild);
+
+        this.preRenderChild = preRenderChild;
+        this.preRenderWrapper = preRenderWrapper;
+
+        if (preRenderChild instanceof HTMLIFrameElement) {
+            this.iFrame = preRenderChild;
+        }
 
         if (showPreRenderByDefault) {
             this.showPreRender();
@@ -733,21 +751,23 @@ export class TsEmbed {
     public hidePreRender(): void {
         if (!this.isPreRenderAvailable()) {
             // if the embed component is not preRendered , nothing to hide
-            console.log('No preRender found, not hiding ');
+            console.warn(
+                'Warning: You should call PreRender before hiding it using hidePreRender.',
+            );
             return;
         }
-
-        setStyleProperties(this.preRenderWrapper, {
+        const preRenderHideStyles = {
             opacity: '0',
             pointerEvents: 'none',
             zIndex: '-1000',
             position: 'absolute ',
             top: '0',
             left: '0',
-        });
-
-        const childBoundingRect = this.preRenderChild.getBoundingClientRect();
+        };
+        setStyleProperties(this.preRenderWrapper, preRenderHideStyles);
 
+        // const childBoundingRect = this.preRenderChild.getBoundingClientRect();
+        //
         // setStyleProperties(this.preRenderShield, {
         //     opacity: '0',
         //     pointerEvents: 'none',
@@ -766,10 +786,10 @@ export class TsEmbed {
         if (!this.isPreRenderAvailable()) {
             const isAvailable = this.connectPreRendered();
             if (!isAvailable) {
-                // if the Embed component is nor preRendered , Render it now and
-                // show it (hide is defalt behaviour)
-                console.log('No preRender found, creating new ');
+                // if the Embed component is not preRendered , Render it now and
                 this.preRender(true);
+                // show it (hide is defalt behaviour)
+                // console.log('No preRender found, creating new ');
                 return;
             }
         }
@@ -790,7 +810,10 @@ export class TsEmbed {
         const elBoundingClient = this.el.getBoundingClientRect();
 
         setStyleProperties(this.preRenderWrapper, {
-            top: `${elBoundingClient.y}px`, left: `${elBoundingClient.x}px`, width: `${elBoundingClient.width}px`, height: `${elBoundingClient.height}px`,
+            top: `${elBoundingClient.y}px`,
+            left: `${elBoundingClient.x}px`,
+            width: `${elBoundingClient.width}px`,
+            height: `${elBoundingClient.height}px`,
         });
     }
 

package/src/utils.ts

@@ -277,17 +277,12 @@ export const setStyleProperties = (
     element: HTMLElement,
     styleProperties: Partial<CSSStyleDeclaration>,
 ): void => {
-    if (!element || !styleProperties) return;
     Object.keys(styleProperties).forEach((styleProperty) => {
         element.style[styleProperty] = styleProperties[styleProperty].toString();
     });
 };
 
-export const removeStyleProperties = (
-    element: HTMLElement,
-    styleProperties: string[],
-): void => {
-    if (!element || !styleProperties) return;
+export const removeStyleProperties = (element: HTMLElement, styleProperties: string[]): void => {
     styleProperties.forEach((styleProperty) => {
         element.style.removeProperty(styleProperty);
     });