Improved typings of window.Cal (#7178)

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 = `<style>${(window as CalWindow).Cal!.__css}</style> ${getFloatingButtonHtml({
+    const buttonHtml = `<style>${window.Cal!.__css}</style> ${getFloatingButtonHtml({
       buttonText: buttonText!,
       buttonClasses: [FloatingButton.updatedClassString(buttonPosition!, "")],
       buttonColor: buttonColor!,

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 = `<style>${
-      (window as CalWindow).Cal!.__css
+      window.Cal!.__css
     }</style><style>${loaderCss}</style>${inlineHtml}`;
   }
 }

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 = `<style>${
-      (window as CalWindow).Cal!.__css
-    }</style><style>${loaderCss}</style>${modalBoxHtml}`;
+    const modalHtml = `<style>${window.Cal!.__css}</style><style>${loaderCss}</style>${modalBoxHtml}`;
     this.attachShadow({ mode: "open" });
     ModalBox.htmlOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";

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;
 }

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");
   }

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<CalWindow["Cal"]> =>
+export const getCalApi = (): Promise<GlobalCal> =>
   new Promise(function tryReadingFromWindow(resolve) {
     EmbedSnippet();
-    const api = (window as CalWindow).Cal;
+    const api = window.Cal;
     if (!api) {
       setTimeout(() => {
         tryReadingFromWindow(resolve);

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();