Fix @calcom/embed-react installation with TS project (calcom#2870)

nathanjobz · May 27, 2022 · 445cdd7 · 445cdd7
1 parent d6678f9
commit 445cdd7
Show file tree

Hide file tree

Showing 41 changed files with 171 additions and 107 deletions.
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
@@ -15,7 +15,8 @@
         "Website(3001)",
         "Embed Core(3100)",
         "Embed React(3101)",
-        "Prisma Studio(5555)"
+        "Prisma Studio(5555)",
+        "Maildev(587)"
       ],
       // Mark as the default build task so cmd/ctrl+shift+b will create them
       "group": {
@@ -65,6 +66,13 @@
       "command": "yarn db-studio",
       "isBackground": false,
       "problemMatcher": []
+    },
+    {
+      "label": "Maildev(587)",
+      "type": "shell",
+      "command": "maildev -s 587",
+      "isBackground": false,
+      "problemMatcher": []
     }
   ]
 }
diff --git a/apps/web/components/CustomBranding.tsx b/apps/web/components/CustomBranding.tsx
@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 
-import { useBrandColors } from "@calcom/embed-core";
+import { useBrandColors } from "@calcom/embed-core/embed-iframe";
 
 const brandColor = "#292929";
 const brandTextColor = "#ffffff";

diff --git a/apps/web/components/Shell.tsx b/apps/web/components/Shell.tsx
@@ -19,7 +19,7 @@ import { useRouter } from "next/router";
 import React, { Fragment, ReactNode, useEffect, useState } from "react";
 import { Toaster } from "react-hot-toast";
 
-import { useIsEmbed } from "@calcom/embed-core";
+import { useIsEmbed } from "@calcom/embed-core/embed-iframe";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import Button from "@calcom/ui/Button";
 import Dropdown, {

diff --git a/apps/web/components/booking/DatePicker.tsx b/apps/web/components/booking/DatePicker.tsx
@@ -7,7 +7,7 @@ import utc from "dayjs/plugin/utc";
 import { memoize } from "lodash";
 import { useEffect, useRef, useState } from "react";
 
-import { useEmbedStyles } from "@calcom/embed-core";
+import { useEmbedStyles } from "@calcom/embed-core/embed-iframe";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
 import classNames from "@lib/classNames";

diff --git a/apps/web/components/booking/pages/AvailabilityPage.tsx b/apps/web/components/booking/pages/AvailabilityPage.tsx
@@ -30,7 +30,7 @@ import {
   useIsBackgroundTransparent,
   sdkActionManager,
   useEmbedNonStylesConfig,
-} from "@calcom/embed-core";
+} from "@calcom/embed-core/embed-iframe";
 import classNames from "@calcom/lib/classNames";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";

diff --git a/apps/web/components/booking/pages/BookingPage.tsx b/apps/web/components/booking/pages/BookingPage.tsx
@@ -24,7 +24,11 @@ import { Frequency as RRuleFrequency } from "rrule";
 import { v4 as uuidv4 } from "uuid";
 import { z } from "zod";
 
-import { useEmbedNonStylesConfig, useIsBackgroundTransparent, useIsEmbed } from "@calcom/embed-core";
+import {
+  useEmbedNonStylesConfig,
+  useIsBackgroundTransparent,
+  useIsEmbed,
+} from "@calcom/embed-core/embed-iframe";
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HttpError } from "@calcom/lib/http-error";

diff --git a/apps/web/components/ui/PoweredByCal.tsx b/apps/web/components/ui/PoweredByCal.tsx
@@ -1,6 +1,6 @@
 import Link from "next/link";
 
-import { useIsEmbed } from "@calcom/embed-core";
+import { useIsEmbed } from "@calcom/embed-core/embed-iframe";
 
 import { useLocale } from "@lib/hooks/useLocale";
 

diff --git a/apps/web/ee/components/stripe/PaymentPage.tsx b/apps/web/ee/components/stripe/PaymentPage.tsx
@@ -9,7 +9,7 @@ import Head from "next/head";
 import { FC, useEffect, useState } from "react";
 import { FormattedNumber, IntlProvider } from "react-intl";
 
-import { sdkActionManager, useIsEmbed } from "@calcom/embed-core";
+import { sdkActionManager, useIsEmbed } from "@calcom/embed-core/embed-iframe";
 import getStripe from "@calcom/stripe/client";
 import PaymentComponent from "@ee/components/stripe/Payment";
 import { PaymentPageProps } from "@ee/pages/payment/[uid]";

diff --git a/apps/web/lib/hooks/useTheme.tsx b/apps/web/lib/hooks/useTheme.tsx
@@ -1,7 +1,7 @@
 import Head from "next/head";
 import { useEffect, useState } from "react";
 
-import { useEmbedTheme } from "@calcom/embed-core";
+import { useEmbedTheme } from "@calcom/embed-core/embed-iframe";
 
 import { Maybe } from "@trpc/server";
 

diff --git a/apps/web/package.json b/apps/web/package.json
@@ -30,7 +30,7 @@
     "@calcom/app-store": "*",
     "@calcom/core": "*",
     "@calcom/ee": "*",
-    "@calcom/embed-core": "*",
+    "@calcom/embed-core": "^1.1.0-beta.10",
     "@calcom/lib": "*",
     "@calcom/prisma": "*",
     "@calcom/stripe": "*",

diff --git a/apps/web/pages/[user].tsx b/apps/web/pages/[user].tsx
@@ -10,7 +10,12 @@ import { useEffect, useState } from "react";
 import { Toaster } from "react-hot-toast";
 import { JSONObject } from "superjson/dist/types";
 
-import { sdkActionManager, useEmbedNonStylesConfig, useEmbedStyles, useIsEmbed } from "@calcom/embed-core";
+import {
+  sdkActionManager,
+  useEmbedNonStylesConfig,
+  useEmbedStyles,
+  useIsEmbed,
+} from "@calcom/embed-core/embed-iframe";
 import defaultEvents, {
   getDynamicEventDescription,
   getGroupName,

diff --git a/apps/web/pages/success.tsx b/apps/web/pages/success.tsx
@@ -22,7 +22,7 @@ import {
   useEmbedNonStylesConfig,
   useIsBackgroundTransparent,
   useIsEmbed,
-} from "@calcom/embed-core";
+} from "@calcom/embed-core/embed-iframe";
 import { getDefaultEvent } from "@calcom/lib/defaultEvents";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { localStorage } from "@calcom/lib/webstorage";

diff --git a/apps/web/pages/team/[slug].tsx b/apps/web/pages/team/[slug].tsx
@@ -5,7 +5,7 @@ import { GetServerSidePropsContext } from "next";
 import Link from "next/link";
 import React, { useEffect } from "react";
 
-import { useIsEmbed } from "@calcom/embed-core";
+import { useIsEmbed } from "@calcom/embed-core/embed-iframe";
 import { WEBSITE_URL } from "@calcom/lib/constants";
 import Button from "@calcom/ui/Button";
 

diff --git a/packages/embeds/embed-core/embed-iframe.ts b/packages/embeds/embed-core/embed-iframe.ts
@@ -0,0 +1,2 @@
+export * from "./src/embed-iframe";
+export * from "./src/sdk-event";
diff --git a/packages/embeds/embed-core/env.d.ts b/packages/embeds/embed-core/env.d.ts
@@ -1,7 +1,9 @@
 /// <reference types="vite/client" />
 
 interface ImportMetaEnv {
-  readonly NEXT_PUBLIC_WEBSITE_URL: string;
+  readonly EMBED_PUBLIC_WEBAPP_URL: string;
+  readonly EMBED_PUBLIC_VERCEL_URL: string;
+  readonly EMBED_PUBLIC_EMBED_LIB_URL: string;
 }
 
 interface ImportMeta {

diff --git a/packages/embeds/embed-core/index.ts b/packages/embeds/embed-core/index.ts
@@ -1,2 +1,2 @@
-export * from "./src/embed-iframe";
 export * from "./src/sdk-event";
+export * from "./src/embed";
diff --git a/packages/embeds/embed-core/package.json b/packages/embeds/embed-core/package.json
@@ -1,10 +1,11 @@
 {
   "name": "@calcom/embed-core",
-  "version": "1.0.0",
+  "version": "1.1.0-beta.10",
   "description": "This is the vanilla JS core script that embeds Cal Link",
-  "main": "./index.ts",
+  "main": "./dist/embed/embed.js",
+  "types": "./dist/index.d.ts",
   "scripts": {
-    "__build": "yarn tailwind && vite build",
+    "__build": "yarn tailwind && vite build && yarn tsc  --emitDeclarationOnly --declarationDir dist && cp -r ../../../apps/web/public/embed ./dist/",
     "__dev": "yarn __build --mode development",
     "build": "NEXT_PUBLIC_EMBED_FINGER_PRINT=$(git rev-parse --short HEAD) yarn __build",
     "build-preview": "PREVIEW_BUILD=1 yarn __build ",
@@ -16,8 +17,12 @@
     "type-check": "tsc --pretty --noEmit",
     "lint": "eslint --ext .ts,.js src",
     "embed-tests": "yarn playwright test --config=playwright/config/playwright.config.ts",
-    "embed-tests-quick": "QUICK=true yarn embed-tests"
+    "embed-tests-quick": "QUICK=true yarn embed-tests",
+    "prepare": "NEXT_PUBLIC_WEBAPP_URL='https://app.cal.com' yarn build"
   },
+  "files": [
+    "dist"
+  ],
   "postcss": {
     "map": false,
     "plugins": {
@@ -29,11 +34,10 @@
     "autoprefixer": "^10.4.7",
     "eslint": "^8.15.0",
     "postcss": "^8.4.13",
-    "vite": "^2.9.9"
-  },
-  "dependencies": {
+    "vite": "^2.9.9",
     "tailwindcss": "^3.0.24",
     "tsc": "^2.0.4",
     "typescript": "^4.6.4"
-  }
+  },
+  "dependencies": {}
 }
diff --git a/packages/embeds/embed-core/playwright/config/playwright.config.ts b/packages/embeds/embed-core/playwright/config/playwright.config.ts
@@ -22,7 +22,8 @@ const config: PlaywrightTestConfig = {
   expect: {
     toMatchSnapshot: {
       // Opacity transitions can cause small differences
-      maxDiffPixels: 50,
+      // Every month the rendered month changes failing the snapshot tests. So, increase the threshold to catch major bugs only.
+      maxDiffPixelRatio: 0.1,
     },
   },
   webServer: {
@@ -123,7 +124,7 @@ expect.extend({
 
     const searchParams = u.searchParams;
     const expectedSearchParams = expectedUrlDetails.searchParams || {};
-    for (let [expectedKey, expectedValue] of Object.entries(expectedSearchParams)) {
+    for (const [expectedKey, expectedValue] of Object.entries(expectedSearchParams)) {
       const value = searchParams.get(expectedKey);
       if (value !== expectedValue) {
         return {

diff --git a/packages/embeds/embed-core/playwright/lib/testUtils.ts b/packages/embeds/embed-core/playwright/lib/testUtils.ts
@@ -36,7 +36,7 @@ export const getEmbedIframe = async ({ page, pathname }: { page: Page; pathname:
   await new Promise((resolve) => {
     setTimeout(resolve, 2000);
   });
-  let embedIframe = page.frame("cal-embed");
+  const embedIframe = page.frame("cal-embed");
   if (!embedIframe) {
     return null;
   }
@@ -83,7 +83,7 @@ export async function bookFirstEvent(username: string, frame: Frame, page: Page)
   const responseObj = await response.json();
   const bookingId = responseObj.uid;
   // Make sure we're navigated to the success page
-  await expect(page.locator("[data-testid=success-page]")).toBeVisible();
+  await expect(frame.locator("[data-testid=success-page]")).toBeVisible();
   expect(await page.screenshot()).toMatchSnapshot("success-page.png");
   return bookingId;
 }
diff --git a/...aywright/tests/inline.test.ts-snapshots/availability-page-1-chromium-darwin.png b/...aywright/tests/inline.test.ts-snapshots/availability-page-1-chromium-darwin.png
diff --git a/...core/playwright/tests/inline.test.ts-snapshots/booking-page-chromium-darwin.png b/...core/playwright/tests/inline.test.ts-snapshots/booking-page-chromium-darwin.png
diff --git a/.../playwright/tests/inline.test.ts-snapshots/event-types-list-chromium-darwin.png b/.../playwright/tests/inline.test.ts-snapshots/event-types-list-chromium-darwin.png
diff --git a/...core/playwright/tests/inline.test.ts-snapshots/success-page-chromium-darwin.png b/...core/playwright/tests/inline.test.ts-snapshots/success-page-chromium-darwin.png
diff --git a/packages/embeds/embed-core/src/FloatingButton/FloatingButton.ts b/packages/embeds/embed-core/src/FloatingButton/FloatingButton.ts
@@ -1,5 +1,4 @@
-import { CalWindow } from "@calcom/embed-snippet";
-
+import { CalWindow } from "../embed";
 import getFloatingButtonHtml from "./FloatingButtonHtml";
 
 export class FloatingButton extends HTMLElement {

diff --git a/packages/embeds/embed-core/src/Inline/inline.ts b/packages/embeds/embed-core/src/Inline/inline.ts
@@ -1,5 +1,4 @@
-import { CalWindow } from "@calcom/embed-snippet";
-
+import { CalWindow } from "../embed";
 import loaderCss from "../loader.css";
 import { getErrorString } from "../utils";
 import inlineHtml from "./inlineHtml";

diff --git a/packages/embeds/embed-core/src/ModalBox/ModalBox.ts b/packages/embeds/embed-core/src/ModalBox/ModalBox.ts
@@ -1,5 +1,4 @@
-import { CalWindow } from "@calcom/embed-snippet";
-
+import { CalWindow } from "../embed";
 import loaderCss from "../loader.css";
 import { getErrorString } from "../utils";
 import modalBoxHtml from "./ModalBoxHtml";

diff --git a/packages/embeds/embed-core/src/embed.ts b/packages/embeds/embed-core/src/embed.ts
@@ -1,5 +1,3 @@
-import type { CalWindow } from "@calcom/embed-snippet";
-
 import { FloatingButton } from "./FloatingButton/FloatingButton";
 import { Inline } from "./Inline/inline";
 import { ModalBox } from "./ModalBox/ModalBox";
@@ -11,8 +9,7 @@ import allCss from "./tailwind.generated.css";
 // HACK: Redefine and don't import WEBAPP_URL as it causes import statement to be present in built file.
 // This is happening because we are not able to generate an App and a lib using single Vite Config.
 const WEBAPP_URL =
-  (import.meta.env.NEXT_PUBLIC_WEBAPP_URL_TYPO as string) ||
-  `https://${import.meta.env.NEXT_PUBLIC_VERCEL_URL}`;
+  import.meta.env.EMBED_PUBLIC_WEBAPP_URL || `https://${import.meta.env.EMBED_PUBLIC_VERCEL_URL}`;
 
 customElements.define("cal-modal-box", ModalBox);
 customElements.define("cal-floating-button", FloatingButton);
@@ -33,7 +30,7 @@ if (!globalCal || !globalCal.q) {
 // Store Commit Hash to know exactly what version of the code is running
 // TODO: Ideally it should be the version as per package.json and then it can be renamed to version.
 // But because it is built on local machine right now, it is much more reliable to have the commit hash.
-globalCal.fingerprint = import.meta.env.NEXT_PUBLIC_EMBED_FINGER_PRINT as string;
+globalCal.fingerprint = import.meta.env.EMBED_PUBLIC_EMBED_FINGER_PRINT as string;
 globalCal.__css = allCss;
 document.head.appendChild(document.createElement("style")).innerHTML = css;
 
@@ -512,6 +509,24 @@ export class Cal {
   }
 }
 
+export interface GlobalCal {
+  (methodName: string, arg?: any): void;
+  /** Marks that the embed.js is loaded. Avoids re-downloading it. */
+  loaded?: boolean;
+  /** Maintains a queue till the time embed.js isn't loaded */
+  q?: InstructionQueue;
+  /** If user registers multiple namespaces, those are available here */
+  ns?: Record<string, GlobalCal>;
+  instance?: Cal;
+  __css?: string;
+  fingerprint?: string;
+  __logQueue?: any[];
+}
+
+export interface CalWindow extends Window {
+  Cal?: GlobalCal;
+}
+
 globalCal.instance = new Cal("", globalCal.q!);
 
 for (const [ns, api] of Object.entries(globalCal.ns!)) {

diff --git a/packages/embeds/embed-core/src/preview.ts b/packages/embeds/embed-core/src/preview.ts
@@ -1,10 +1,10 @@
-import { CalWindow } from "@calcom/embed-snippet";
+import { CalWindow } from "./embed";
 
 const WEBAPP_URL =
-  import.meta.env.NEXT_PUBLIC_WEBAPP_URL || `https://${import.meta.env.NEXT_PUBLIC_VERCEL_URL}`;
-const EMBED_LIB_URL = import.meta.env.NEXT_PUBLIC_EMBED_LIB_URL || `${WEBAPP_URL}/embed/embed.js`;
+  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`;
 
-(window as any).fingerprint = import.meta.env.NEXT_PUBLIC_EMBED_FINGER_PRINT as string;
+(window as any).fingerprint = import.meta.env.EMBED_PUBLIC_EMBED_FINGER_PRINT as string;
 
 // Install Cal Embed Code Snippet
 (function (C, A, L) {

diff --git a/packages/embeds/embed-core/tsconfig.json b/packages/embeds/embed-core/tsconfig.json
@@ -8,6 +8,6 @@
     "moduleResolution": "Node",
     "baseUrl": "."
   },
-  "include": ["."],
+  "include": ["src", "env.d.ts", "index.ts"],
   "exclude": ["dist", "build", "node_modules"]
 }
diff --git a/packages/embeds/embed-core/vite.config.js b/packages/embeds/embed-core/vite.config.js
@@ -1,12 +1,11 @@
-require("dotenv").config({ path: "../../../.env" });
-
-process.env.NEXT_PUBLIC_VERCEL_URL = process.env.VERCEL_URL;
+import viteBaseConfig from "../vite.config";
 
 const path = require("path");
 const { defineConfig } = require("vite");
+
 module.exports = defineConfig((configEnv) => {
   const config = {
-    envPrefix: "NEXT_PUBLIC_",
+    ...viteBaseConfig,
     base: "/embed/",
     build: {
       minify: "terser",

diff --git a/packages/embeds/embed-react/env.d.ts b/packages/embeds/embed-react/env.d.ts
@@ -1 +1,11 @@
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly EMBED_PUBLIC_WEBAPP_URL: string;
+  readonly EMBED_PUBLIC_VERCEL_URL: string;
+  readonly EMBED_PUBLIC_EMBED_LIB_URL: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}