fix(embeds): add support for RSC by adding `use client` directives (#7919)

README.md

@@ -352,7 +352,6 @@ We have a list of [help wanted](https://github.com/calcom/cal.com/issues?q=is:is
   </picture>
 </a>
 
-
 <!-- CONTRIBUTORS -->
 
 ### Contributors

package.json

@@ -86,7 +86,7 @@
     "jest-watch-select-projects": "^2.0.0",
     "jest-watch-typeahead": "^2.0.0",
     "lint-staged": "^12.5.0",
-    "prettier": "^2.8.4",
+    "prettier": "^2.8.6",
     "ts-jest": "^28.0.8",
     "typescript": "^4.9.4"
   },

packages/app-store/cron/DESCRIPTION.md

@@ -10,6 +10,7 @@ items:
 {DESCRIPTION}
 
 ### Cron's most valuable features
+
 <!-- From "FAQs: What are Cron’s most valuable features?"
 https://cronhq.notion.site/Cron-Calendar-5625be54feac4e13a75b10271b65ddb7 -->
 

packages/config/merged-prettier-plugin.js

@@ -1,14 +0,0 @@
-/* @see https://github.com/tailwindlabs/prettier-plugin-tailwindcss/issues/31#issuecomment-1024722576 */
-const tailwind = require("prettier-plugin-tailwindcss");
-const sortImports = require("@trivago/prettier-plugin-sort-imports");
-
-const combinedFormatter = {
-  parsers: {
-    typescript: {
-      ...tailwind.parsers.typescript,
-      preprocess: sortImports.parsers.typescript.preprocess,
-    },
-  },
-};
-
-module.exports = combinedFormatter;

packages/config/package.json

@@ -20,13 +20,13 @@
     "@tailwindcss/forms": "^0.5.2",
     "@tailwindcss/line-clamp": "^0.4.0",
     "@tailwindcss/typography": "^0.5.4",
-    "@trivago/prettier-plugin-sort-imports": "3.2.0",
+    "@trivago/prettier-plugin-sort-imports": "4.1.1",
     "@typescript-eslint/eslint-plugin": "^5.52.0",
     "@typescript-eslint/parser": "^5.52.0",
     "eslint": "^8.34.0",
     "eslint-plugin-unused-imports": "^2.0.0",
-    "prettier": "^2.8.4",
-    "prettier-plugin-tailwindcss": "^0.1.13",
+    "prettier": "^2.8.6",
+    "prettier-plugin-tailwindcss": "^0.2.5",
     "tailwind-scrollbar": "^2.0.1",
     "tailwindcss": "^3.2.1",
     "typescript": "^4.9.4"

packages/config/prettier-preset.js

@@ -16,7 +16,14 @@ module.exports = {
     "^[./]",
   ],
   importOrderSeparation: true,
-  plugins: [require("./merged-prettier-plugin")],
+  plugins: [
+    "@trivago/prettier-plugin-sort-imports",
+    /**
+     * **NOTE** tailwind plugin must come last!
+     * @see https://github.com/tailwindlabs/prettier-plugin-tailwindcss#compatibility-with-other-prettier-plugins
+     */
+    "prettier-plugin-tailwindcss",
+  ],
   overrides: [
     {
       files: ["apps/website/lib/utils/wordlist/wordlist.ts"],

packages/embeds/embed-core/src/embed-iframe.ts

@@ -345,11 +345,13 @@ function keepParentInformedAboutDimensionChanges() {
     const contentHeight = Math.ceil(
       parseFloat(mainElementStyles.height) +
         parseFloat(mainElementStyles.marginTop) +
-      parseFloat(mainElementStyles.marginBottom));
+        parseFloat(mainElementStyles.marginBottom)
+    );
     const contentWidth = Math.ceil(
       parseFloat(mainElementStyles.width) +
         parseFloat(mainElementStyles.marginLeft) +
-      parseFloat(mainElementStyles.marginRight));
+        parseFloat(mainElementStyles.marginRight)
+    );
 
     // During first render let iframe tell parent that how much is the expected height to avoid scroll.
     // Parent would set the same value as the height of iframe which would prevent scroll.

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

@@ -1,4 +1,5 @@
-/* eslint-disable prefer-const */
+"use client";
+
 import { useEffect, useRef } from "react";
 
 import useEmbed from "./useEmbed";

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

@@ -1,3 +1,5 @@
+"use client";
+
 import type { GlobalCal } from "@calcom/embed-core";
 import EmbedSnippet from "@calcom/embed-snippet";
 

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

@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useState } from "react";
 
 import EmbedSnippet from "@calcom/embed-snippet";

packages/embeds/embed-react/test-cal.tsx

@@ -1,5 +1,4 @@
-import { useEffect } from "react";
-import { useState } from "react";
+import React, { useEffect, useState } from "react";
 import ReactDom from "react-dom";
 
 import Cal, { getCalApi } from "./src/index";