first commit

calcom/packages/embeds/embed-react/src/Cal.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+import type { PrefillAndIframeAttrsConfig } from "@calcom/embed-core";
+
+import useEmbed from "./useEmbed";
+
+type CalProps = {
+  calOrigin?: string;
+  calLink: string;
+  initConfig?: {
+    debug?: boolean;
+    uiDebug?: boolean;
+  };
+  namespace?: string;
+  config?: PrefillAndIframeAttrsConfig;
+  embedJsUrl?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+const Cal = function Cal(props: CalProps) {
+  const { calLink, calOrigin, namespace = "", config, initConfig = {}, embedJsUrl, ...restProps } = props;
+  if (!calLink) {
+    throw new Error("calLink is required");
+  }
+  const initializedRef = useRef(false);
+  const Cal = useEmbed(embedJsUrl);
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (!Cal || initializedRef.current || !ref.current) {
+      return;
+    }
+    initializedRef.current = true;
+    const element = ref.current;
+    if (namespace) {
+      Cal("init", namespace, {
+        ...initConfig,
+        origin: calOrigin,
+      });
+      Cal.ns[namespace]("inline", {
+        elementOrSelector: element,
+        calLink,
+        config,
+      });
+    } else {
+      Cal("init", {
+        ...initConfig,
+        origin: calOrigin,
+      });
+      Cal("inline", {
+        elementOrSelector: element,
+        calLink,
+        config,
+      });
+    }
+  }, [Cal, calLink, config, namespace, calOrigin, initConfig]);
+
+  if (!Cal) {
+    return null;
+  }
+
+  return <div ref={ref} {...restProps} />;
+};
+export default Cal;

calcom/packages/embeds/embed-react/src/index.ts

@@ -0,0 +1,40 @@
+"use client";
+
+import type { GlobalCal, GlobalCalWithoutNs } from "@calcom/embed-core";
+import EmbedSnippet from "@calcom/embed-snippet";
+
+import Cal from "./Cal";
+
+export function getCalApi(options?: {
+  embedJsUrl?: string;
+  namespace?: string;
+}): Promise<GlobalCal | GlobalCalWithoutNs>;
+export function getCalApi(embedJsUrl: string): Promise<GlobalCal | GlobalCalWithoutNs>;
+
+export function getCalApi(
+  optionsOrEmbedJsUrl?:
+    | {
+        embedJsUrl?: string;
+        namespace?: string;
+      }
+    | string
+): Promise<GlobalCal | GlobalCalWithoutNs> {
+  const options =
+    typeof optionsOrEmbedJsUrl === "string" ? { embedJsUrl: optionsOrEmbedJsUrl } : optionsOrEmbedJsUrl ?? {};
+
+  const { namespace = "", embedJsUrl } = options;
+  return new Promise(function tryReadingFromWindow(resolve) {
+    const globalCal = EmbedSnippet(embedJsUrl);
+    globalCal("init", namespace);
+    const api = namespace ? globalCal.ns[namespace as keyof typeof globalCal.ns] : globalCal;
+    if (!api) {
+      setTimeout(() => {
+        tryReadingFromWindow(resolve);
+      }, 50);
+      return;
+    }
+    resolve(api);
+  });
+}
+
+export default Cal;

calcom/packages/embeds/embed-react/src/useEmbed.ts

@@ -0,0 +1,16 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import EmbedSnippet from "@calcom/embed-snippet";
+
+export default function useEmbed(embedJsUrl?: string) {
+  const [globalCal, setGlobalCal] = useState<ReturnType<typeof EmbedSnippet>>();
+  useEffect(() => {
+    setGlobalCal(() => {
+      return EmbedSnippet(embedJsUrl);
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return globalCal;
+}