From 94f239bc4231f4fde05cb89d70950a44020c22a8 Mon Sep 17 00:00:00 2001 From: Matt Pocock Date: Fri, 17 Feb 2023 13:23:30 +0000 Subject: [PATCH] Improved typings of window.Cal (#7178) --- .../embed-core/src/FloatingButton/FloatingButton.ts | 3 +-- packages/embeds/embed-core/src/Inline/inline.ts | 3 +-- packages/embeds/embed-core/src/ModalBox/ModalBox.ts | 5 +---- packages/embeds/embed-core/src/embed.ts | 8 +++++++- packages/embeds/embed-core/src/preview.ts | 8 +++----- packages/embeds/embed-react/src/index.ts | 6 +++--- packages/embeds/embed-snippet/src/index.ts | 2 +- 7 files changed, 17 insertions(+), 18 deletions(-) diff --git a/packages/embeds/embed-core/src/FloatingButton/FloatingButton.ts b/packages/embeds/embed-core/src/FloatingButton/FloatingButton.ts index 5a4aad9913..ca50655dcf 100644 --- a/packages/embeds/embed-core/src/FloatingButton/FloatingButton.ts +++ b/packages/embeds/embed-core/src/FloatingButton/FloatingButton.ts @@ -1,4 +1,3 @@ -import type { CalWindow } from "../embed"; import getFloatingButtonHtml from "./FloatingButtonHtml"; export class FloatingButton extends HTMLElement { @@ -62,7 +61,7 @@ export class FloatingButton extends HTMLElement { const buttonTextColor = this.dataset["buttonTextColor"]; //TODO: Logic is duplicated over HTML generation and attribute change, keep it at one place - const buttonHtml = ` ${getFloatingButtonHtml({ + const buttonHtml = ` ${getFloatingButtonHtml({ buttonText: buttonText!, buttonClasses: [FloatingButton.updatedClassString(buttonPosition!, "")], buttonColor: buttonColor!, diff --git a/packages/embeds/embed-core/src/Inline/inline.ts b/packages/embeds/embed-core/src/Inline/inline.ts index 98ba5c47e9..a191948ed5 100644 --- a/packages/embeds/embed-core/src/Inline/inline.ts +++ b/packages/embeds/embed-core/src/Inline/inline.ts @@ -1,4 +1,3 @@ -import type { CalWindow } from "../embed"; import loaderCss from "../loader.css"; import { getErrorString } from "../utils"; import inlineHtml from "./inlineHtml"; @@ -26,7 +25,7 @@ export class Inline extends HTMLElement { super(); this.attachShadow({ mode: "open" }); this.shadowRoot!.innerHTML = `${inlineHtml}`; } } diff --git a/packages/embeds/embed-core/src/ModalBox/ModalBox.ts b/packages/embeds/embed-core/src/ModalBox/ModalBox.ts index 9bc7442bc5..e72ae30597 100644 --- a/packages/embeds/embed-core/src/ModalBox/ModalBox.ts +++ b/packages/embeds/embed-core/src/ModalBox/ModalBox.ts @@ -1,4 +1,3 @@ -import type { CalWindow } from "../embed"; import loaderCss from "../loader.css"; import { getErrorString } from "../utils"; import modalBoxHtml from "./ModalBoxHtml"; @@ -100,9 +99,7 @@ export class ModalBox extends HTMLElement { constructor() { super(); - const modalHtml = `${modalBoxHtml}`; + const modalHtml = `${modalBoxHtml}`; this.attachShadow({ mode: "open" }); ModalBox.htmlOverflow = document.body.style.overflow; document.body.style.overflow = "hidden"; diff --git a/packages/embeds/embed-core/src/embed.ts b/packages/embeds/embed-core/src/embed.ts index 856324a5aa..6cfb2ab22e 100644 --- a/packages/embeds/embed-core/src/embed.ts +++ b/packages/embeds/embed-core/src/embed.ts @@ -23,7 +23,7 @@ type Config = { uiDebug?: boolean; }; -const globalCal = (window as CalWindow).Cal; +const globalCal = window.Cal; if (!globalCal || !globalCal.q) { throw new Error("Cal is not defined. This shouldn't happen"); } @@ -532,6 +532,12 @@ export interface GlobalCal { __logQueue?: any[]; } +declare global { + interface Window { + Cal?: GlobalCal; + } +} + export interface CalWindow extends Window { Cal?: GlobalCal; } diff --git a/packages/embeds/embed-core/src/preview.ts b/packages/embeds/embed-core/src/preview.ts index 030d4846c5..1516579651 100644 --- a/packages/embeds/embed-core/src/preview.ts +++ b/packages/embeds/embed-core/src/preview.ts @@ -1,5 +1,3 @@ -import type { CalWindow } from "./embed"; - const WEBAPP_URL = import.meta.env.EMBED_PUBLIC_WEBAPP_URL || `https://${import.meta.env.EMBED_PUBLIC_VERCEL_URL}`; const EMBED_LIB_URL = import.meta.env.EMBED_PUBLIC_EMBED_LIB_URL || `${WEBAPP_URL}/embed/embed.js`; @@ -36,9 +34,9 @@ const EMBED_LIB_URL = import.meta.env.EMBED_PUBLIC_EMBED_LIB_URL || `${WEBAPP_UR } p(cal, ar); }; -})(window as CalWindow, EMBED_LIB_URL, "init"); +})(window, EMBED_LIB_URL, "init"); -const previewWindow: CalWindow = window; +const previewWindow = window; previewWindow.Cal!("init", { origin: WEBAPP_URL, @@ -71,7 +69,7 @@ previewWindow.addEventListener("message", (e) => { return; } - const globalCal = (window as CalWindow).Cal; + const globalCal = window.Cal; if (!globalCal) { throw new Error("Cal is not defined yet"); } diff --git a/packages/embeds/embed-react/src/index.ts b/packages/embeds/embed-react/src/index.ts index 1ba24fd6a3..c1975a40a5 100644 --- a/packages/embeds/embed-react/src/index.ts +++ b/packages/embeds/embed-react/src/index.ts @@ -1,12 +1,12 @@ -import type { CalWindow } from "@calcom/embed-core"; +import type { GlobalCal } from "@calcom/embed-core"; import EmbedSnippet from "@calcom/embed-snippet"; import Cal from "./Cal"; -export const getCalApi = (): Promise => +export const getCalApi = (): Promise => new Promise(function tryReadingFromWindow(resolve) { EmbedSnippet(); - const api = (window as CalWindow).Cal; + const api = window.Cal; if (!api) { setTimeout(() => { tryReadingFromWindow(resolve); diff --git a/packages/embeds/embed-snippet/src/index.ts b/packages/embeds/embed-snippet/src/index.ts index 997d72cfc3..563d55e3da 100644 --- a/packages/embeds/embed-snippet/src/index.ts +++ b/packages/embeds/embed-snippet/src/index.ts @@ -49,7 +49,7 @@ export default function EmbedSnippet(url = EMBED_LIB_URL) { ); /*! Copying ends here. */ - return (window as CalWindow).Cal; + return window.Cal; } export const EmbedSnippetString = EmbedSnippet.toString();