fix(embeds): add support for RSC by adding `use client` directives by juliusmarminge · Pull Request #7919 · calcom/cal.com

juliusmarminge · 2023-03-23T21:19:22Z

What does this PR do?

Fixes # (issue)

Adds "use client" directives for embeds so we don't have to make wrapper components when using the embeds in RSCs:

// app/cal-embed.tsx
"use client";
import _Cal from "@calcom/embed-react";

export const Cal = (props: SomeType) => <_Cal {...props} />;

Had to make some changes to prettier cause it currently just changed the order and put the "use client" at the end of the import section. Part of this was removing an old workaround you had for getting prettier-plugin-tailwindcss to work with other plugins. I bumped this version and ran yarn format - hence some irrelevant formatting changes are included in this PR too

Environment: Staging(main branch) / Production

Type of change

Bug fix (non-breaking change which fixes an issue)
Chore (refactoring code, technical debt, workflow improvements)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
This change requires a documentation update

How should this be tested?

Test A
Test B

Checklist

vercel · 2023-03-23T21:19:27Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
ui	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Mar 27, 2023 at 7:45PM (UTC)

vercel · 2023-03-23T21:19:28Z

@juliusmarminge is attempting to deploy a commit to the cal Team on Vercel.

A member of the Team first needs to authorize it.

emrysal · 2023-03-23T21:20:48Z

Nice! Will defer to @hariombalhara for approval but looks excellent

juliusmarminge · 2023-03-23T21:22:08Z

packages/config/merged-prettier-plugin.js

This workaround is no longer needed as the tailwind plugin can now be loaded together with other plugins. It was messing with the "use client" directives so fixed it as part of this PR

Thought I'd include "proof" it works - tailwind sorting just fine 👍🏼

CleanShot.2023-03-23.at.22.33.25.mp4

juliusmarminge · 2023-03-23T21:35:06Z

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


got the standard "react is not part of umd" error here - hence the added React import

github-actions · 2023-03-23T21:47:27Z

📦 Next.js Bundle Analysis

This analysis was generated by the next.js bundle analysis action 🤖

⚠️ Global Bundle Size Increased

Page	Size (compressed)
`global`	`233.24 KB` (🟡 +17 B)

Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

Fifty-three Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load	% of Budget (`350 KB`)
`/[user]/[type]`	`91.86 KB`	325.09 KB	92.88% (+/- <0.01%)
`/[user]/[type]/embed`	`91.88 KB`	325.12 KB	92.89% (+/- <0.01%)
`/apps`	`167.17 KB`	400.41 KB	114.40% (+/- <0.01%)
`/apps/[slug]`	`190.89 KB`	424.13 KB	121.18% (+/- <0.01%)
`/apps/[slug]/[...pages]`	`392.3 KB`	625.54 KB	178.73% (🟢 -0.01%)
`/apps/[slug]/setup`	`928 B`	234.14 KB	66.90% (+/- <0.01%)
`/apps/categories`	`152.07 KB`	385.31 KB	110.09% (+/- <0.01%)
`/apps/categories/[category]`	`155.94 KB`	389.17 KB	111.19% (+/- <0.01%)
`/apps/installed/[category]`	`197.04 KB`	430.28 KB	122.94% (+/- <0.01%)
`/availability`	`155.28 KB`	388.51 KB	111.00% (+/- <0.01%)
`/availability/[schedule]`	`272.09 KB`	505.32 KB	144.38% (+/- <0.01%)
`/availability/troubleshoot`	`152.76 KB`	386 KB	110.28% (+/- <0.01%)
`/bookings/[status]`	`272.38 KB`	505.61 KB	144.46% (+/- <0.01%)
`/d/[link]/[slug]`	`91.5 KB`	324.74 KB	92.78% (+/- <0.01%)
`/d/[link]/[slug]/embed`	`91.53 KB`	324.77 KB	92.79% (+/- <0.01%)
`/d/[link]/book`	`183.11 KB`	416.34 KB	118.95% (🟡 +0.01%)
`/event-types`	`349.31 KB`	582.54 KB	166.44% (+/- <0.01%)
`/event-types/[type]`	`382.36 KB`	615.6 KB	175.88% (+/- <0.01%)
`/getting-started/[[...step]]`	`303.04 KB`	536.28 KB	153.22% (+/- <0.01%)
`/insights`	`386.24 KB`	619.48 KB	176.99% (+/- <0.01%)
`/more`	`151.7 KB`	384.93 KB	109.98% (+/- <0.01%)
`/settings/admin`	`157.15 KB`	390.39 KB	111.54% (+/- <0.01%)
`/settings/admin/apps`	`165.84 KB`	399.07 KB	114.02% (+/- <0.01%)
`/settings/admin/apps/[category]`	`165.82 KB`	399.06 KB	114.02% (+/- <0.01%)
`/settings/admin/flags`	`160.05 KB`	393.28 KB	112.37% (🟢 -0.01%)
`/settings/admin/impersonation`	`157.44 KB`	390.67 KB	111.62% (+/- <0.01%)
`/settings/billing`	`157.26 KB`	390.5 KB	111.57% (+/- <0.01%)
`/settings/developer/api-keys`	`186.42 KB`	419.65 KB	119.90% (+/- <0.01%)
`/settings/developer/webhooks`	`159.76 KB`	392.99 KB	112.28% (+/- <0.01%)
`/settings/developer/webhooks/[id]`	`190.61 KB`	423.84 KB	121.10% (+/- <0.01%)
`/settings/developer/webhooks/new`	`190.47 KB`	423.7 KB	121.06% (+/- <0.01%)
`/settings/my-account/appearance`	`171.23 KB`	404.46 KB	115.56% (+/- <0.01%)
`/settings/my-account/calendars`	`191.45 KB`	424.69 KB	121.34% (+/- <0.01%)
`/settings/my-account/conferencing`	`163.03 KB`	396.26 KB	113.22% (+/- <0.01%)
`/settings/my-account/general`	`266.42 KB`	499.65 KB	142.76% (+/- <0.01%)
`/settings/my-account/profile`	`274.31 KB`	507.55 KB	145.01% (+/- <0.01%)
`/settings/security/impersonation`	`159.3 KB`	392.54 KB	112.15% (+/- <0.01%)
`/settings/security/password`	`192.6 KB`	425.83 KB	121.67% (+/- <0.01%)
`/settings/security/sso`	`167 KB`	400.23 KB	114.35% (+/- <0.01%)
`/settings/security/two-factor-auth`	`161.76 KB`	394.99 KB	112.86% (🟢 -0.01%)
`/settings/teams`	`156.9 KB`	390.13 KB	111.47% (+/- <0.01%)
`/settings/teams/[id]/appearance`	`171.25 KB`	404.48 KB	115.57% (🟢 -0.01%)
`/settings/teams/[id]/billing`	`157.13 KB`	390.37 KB	111.53% (+/- <0.01%)
`/settings/teams/[id]/members`	`297.14 KB`	530.37 KB	151.53% (+/- <0.01%)
`/settings/teams/[id]/profile`	`269.52 KB`	502.76 KB	143.65% (🟢 -0.01%)
`/settings/teams/[id]/sso`	`167.09 KB`	400.33 KB	114.38% (+/- <0.01%)
`/settings/teams/new`	`92.72 KB`	325.96 KB	93.13% (+/- <0.01%)
`/team/[slug]/[type]`	`91.51 KB`	324.74 KB	92.78% (+/- <0.01%)
`/team/[slug]/[type]/embed`	`91.54 KB`	324.77 KB	92.79% (+/- <0.01%)
`/team/[slug]/book`	`183.11 KB`	416.34 KB	118.96% (+/- <0.01%)
`/teams`	`151.91 KB`	385.15 KB	110.04% (+/- <0.01%)
`/workflows`	`164.81 KB`	398.04 KB	113.73% (🟢 -0.01%)
`/workflows/[workflow]`	`294.01 KB`	527.24 KB	150.64% (+/- <0.01%)

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/- <0.01%" it means that there was a change in bundle size, but it is a trivial enough amount that it can be ignored.

juliusmarminge · 2023-03-27T17:03:44Z

bump @hariombalhara

PeerRich · 2023-03-27T19:12:59Z

can you fix the merge conflict with yarn.lock @juliusmarminge ?

juliusmarminge · 2023-03-27T19:41:00Z

can you fix the merge conflict with yarn.lock @juliusmarminge ?

Done!

socket-security · 2023-03-27T19:46:42Z

New dependency changes detected. Learn more about Socket for GitHub ↗︎

👍 No new dependency issues detected in pull request

Bot Commands

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of package-name@version specifiers. e.g. @SocketSecurity ignore foo@1.0.0 bar@* or ignore all packages with @SocketSecurity ignore-all

Pull request alert summary

Issue	Status
Install scripts	✅ 0 issues
Native code	✅ 0 issues
Bin script shell injection	✅ 0 issues
Unresolved require	✅ 0 issues
Invalid package.json	✅ 0 issues
HTTP dependency	✅ 0 issues
Git dependency	✅ 0 issues
Potential typo squat	✅ 0 issues
Known Malware	✅ 0 issues
Telemetry	✅ 0 issues
Protestware/Troll package	✅ 0 issues

📊 Modified Dependency Overview:

⬆️ Updated Package	Version Diff	Capability Access	`+/-` Transitive Count	Publisher
prettier-plugin-tailwindcss@0.2.5	0.1.13...0.2.5	eval, filesystem, environment	`+4/-0`	thecrypticace
@trivago/prettier-plugin-sort-imports@4.1.1	3.2.0...4.1.1	None	`+3/-5`	ayusharma

hariombalhara

Looks good to me. Thanks for the change @juliusmarminge

add directives

7f9cb56

juliusmarminge requested a review from a team March 23, 2023 21:19

juliusmarminge requested a review from hariombalhara as a code owner March 23, 2023 21:19

juliusmarminge requested a review from a team March 23, 2023 21:19

bump tw prettier plugin

9748c7b

vercel bot deployed to Preview – ui March 23, 2023 21:27 View deployment

juliusmarminge added 2 commits March 23, 2023 22:29

add note that tw has to go last

ef035d1

bump import plugin

5863822

juliusmarminge commented Mar 23, 2023

View reviewed changes

vercel bot deployed to Preview – ui March 23, 2023 21:38 View deployment

juliusmarminge added 2 commits March 27, 2023 21:39

merge-main

cf7e342

re-run format

5c52952

juliusmarminge requested review from PeerRich and zomars as code owners March 27, 2023 19:40

vercel bot deployed to Preview – ui March 27, 2023 19:45 View deployment

hariombalhara approved these changes Mar 28, 2023

View reviewed changes

hariombalhara merged commit 1620ae6 into calcom:main Mar 28, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

fix(embeds): add support for RSC by adding `use client` directives#7919
hariombalhara merged 6 commits intocalcom:mainfrom
juliusmarminge:embeds/use-client

juliusmarminge commented Mar 23, 2023 •

edited

Loading

Uh oh!

vercel bot commented Mar 23, 2023 •

edited

Loading

Uh oh!

vercel bot commented Mar 23, 2023

Uh oh!

emrysal commented Mar 23, 2023

Uh oh!

juliusmarminge Mar 23, 2023

Uh oh!

juliusmarminge Mar 23, 2023

Uh oh!

juliusmarminge Mar 23, 2023

Uh oh!

github-actions bot commented Mar 23, 2023 •

edited

Loading

Uh oh!

juliusmarminge commented Mar 27, 2023

Uh oh!

PeerRich commented Mar 27, 2023

Uh oh!

juliusmarminge commented Mar 27, 2023

Uh oh!

socket-security bot commented Mar 27, 2023

Uh oh!

hariombalhara left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

juliusmarminge commented Mar 23, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this PR do?

Type of change

How should this be tested?

Checklist

Uh oh!

vercel bot commented Mar 23, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot commented Mar 23, 2023

Uh oh!

emrysal commented Mar 23, 2023

Uh oh!

juliusmarminge Mar 23, 2023

Choose a reason for hiding this comment

Uh oh!

juliusmarminge Mar 23, 2023

Choose a reason for hiding this comment

Uh oh!

juliusmarminge Mar 23, 2023

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Mar 23, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📦 Next.js Bundle Analysis

⚠️ Global Bundle Size Increased

Fifty-three Pages Changed Size

Uh oh!

juliusmarminge commented Mar 27, 2023

Uh oh!

PeerRich commented Mar 27, 2023

Uh oh!

juliusmarminge commented Mar 27, 2023

Uh oh!

socket-security bot commented Mar 27, 2023

Uh oh!

hariombalhara left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

juliusmarminge commented Mar 23, 2023 •

edited

Loading

vercel bot commented Mar 23, 2023 •

edited

Loading

github-actions bot commented Mar 23, 2023 •

edited

Loading