perf: Booker bundle size optimization - Remove `sanitize-html` dependency on client (#10801)

apps/web/pages/booking/[uid].tsx

@@ -23,12 +23,9 @@ import {
   useIsEmbed,
 } from "@calcom/embed-core/embed-iframe";
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
-import { SystemField } from "@calcom/features/bookings/lib/SystemField";
+import { SMS_REMINDER_NUMBER_FIELD, SystemField } from "@calcom/features/bookings/lib/SystemField";
 import { getBookingWithResponses } from "@calcom/features/bookings/lib/get-booking";
-import {
-  getBookingFieldsWithSystemFields,
-  SMS_REMINDER_NUMBER_FIELD,
-} from "@calcom/features/bookings/lib/getBookingFields";
+import { getBookingFieldsWithSystemFields } from "@calcom/features/bookings/lib/getBookingFields";
 import { parseRecurringEvent } from "@calcom/lib";
 import { APP_NAME } from "@calcom/lib/constants";
 import {

packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx

@@ -20,7 +20,6 @@ import {
   mapRecurringBookingToMutationInput,
   useTimePreferences,
 } from "@calcom/features/bookings/lib";
-import { getBookingFieldsWithSystemFields } from "@calcom/features/bookings/lib/getBookingFields";
 import getBookingResponsesSchema, {
   getBookingResponsesPartialSchema,
 } from "@calcom/features/bookings/lib/getBookingResponsesSchema";
@@ -179,14 +178,11 @@ export const BookEventForm = ({ onCancel }: BookEventFormProps) => {
     return defaults;
   }, [eventType?.bookingFields, formValues, isRescheduling, bookingData, rescheduleUid]);
 
-  const disableBookingTitle = !!event.data?.isDynamic;
   const bookingFormSchema = z
     .object({
       responses: event?.data
         ? getBookingResponsesSchema({
-            eventType: {
-              bookingFields: getBookingFieldsWithSystemFields({ ...event.data, disableBookingTitle }),
-            },
+            eventType: event?.data,
             view: rescheduleUid ? "reschedule" : "booking",
           })
         : // Fallback until event is loaded.

packages/features/bookings/Booker/components/EventMeta.tsx

@@ -7,7 +7,6 @@ import { EventDetails, EventMembers, EventMetaSkeleton, EventTitle } from "@calc
 import { EventMetaBlock } from "@calcom/features/bookings/components/event-meta/Details";
 import { useTimePreferences } from "@calcom/features/bookings/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
 import { Calendar, Globe, User } from "@calcom/ui/components/icon";
 
 import { fadeInUp } from "../config";
@@ -68,7 +67,7 @@ export const EventMeta = () => {
           <EventTitle className="my-2">{event?.title}</EventTitle>
           {event.description && (
             <EventMetaBlock contentClassName="mb-8 break-words max-w-full max-h-[180px] scroll-bar pr-4">
-              <div dangerouslySetInnerHTML={{ __html: markdownToSafeHTML(event.description) }} />
+              <div dangerouslySetInnerHTML={{ __html: event.description }} />
             </EventMetaBlock>
           )}
           <div className="space-y-4 font-medium rtl:-mr-2">

packages/features/bookings/lib/SystemField.ts

@@ -10,3 +10,5 @@ export const SystemField = z.enum([
   "rescheduleReason",
   "smsReminderNumber",
 ]);
+
+export const SMS_REMINDER_NUMBER_FIELD = "smsReminderNumber";

packages/features/bookings/lib/getBookingFields.ts

@@ -1,6 +1,7 @@
 import type { EventTypeCustomInput, EventType, Prisma, Workflow } from "@prisma/client";
 import type { z } from "zod";
 
+import { SMS_REMINDER_NUMBER_FIELD } from "@calcom/features/bookings/lib/SystemField";
 import { fieldsThatSupportLabelAsSafeHtml } from "@calcom/features/form-builder/fieldsThatSupportLabelAsSafeHtml";
 import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
 import slugify from "@calcom/lib/slugify";
@@ -15,11 +16,10 @@ import {
 type Fields = z.infer<typeof eventTypeBookingFields>;
 
 if (typeof window !== "undefined") {
-  console.warn("This file should not be imported on the client side");
+  // This file imports some costly dependencies, so we want to make sure it's not imported on the client side.
+  throw new Error("`getBookingFields` must not be imported on the client side.");
 }
 
-export const SMS_REMINDER_NUMBER_FIELD = "smsReminderNumber";
-
 /**
  * PHONE -> Phone
  */

packages/lib/defaultEvents.ts

@@ -1,7 +1,6 @@
 import type { Prisma, Credential } from "@prisma/client";
 
 import { DailyLocationType } from "@calcom/app-store/locations";
-import { getBookingFieldsWithSystemFields } from "@calcom/features/bookings/lib/getBookingFields";
 import slugify from "@calcom/lib/slugify";
 import { PeriodType, SchedulingType } from "@calcom/prisma/enums";
 import type { userSelect } from "@calcom/prisma/selects";
@@ -97,15 +96,7 @@ const commons = {
   users: [user],
   hosts: [],
   metadata: EventTypeMetaDataSchema.parse({}),
-  bookingFields: getBookingFieldsWithSystemFields({
-    bookingFields: [],
-    customInputs: [],
-    // Default value of disableGuests from DB.
-    disableGuests: false,
-    disableBookingTitle: false,
-    metadata: {},
-    workflows: [],
-  }),
+  bookingFields: [],
 };
 
 const dynamicEvent = {

packages/lib/markdownToSafeHTML.ts

@@ -2,6 +2,12 @@ import sanitizeHtml from "sanitize-html";
 
 import { md } from "@calcom/lib/markdownIt";
 
+if (typeof window !== "undefined") {
+  // This file imports markdown parser which is a costly dependency, so we want to make sure it's not imported on the client side.
+  // It is still imported at some places on client in non-booker pages, we can gradually remove it from there and then convert it into an error
+  console.warn("`markdownToSafeHTML` should not be imported on the client side.");
+}
+
 export function markdownToSafeHTML(markdown: string | null) {
   if (!markdown) return "";
 

packages/trpc/server/routers/viewer/workflows/util.ts

@@ -1,10 +1,10 @@
 import type { Workflow } from "@prisma/client";
 
 import { isSMSOrWhatsappAction } from "@calcom/ee/workflows/lib/actionHelperFunctions";
+import { SMS_REMINDER_NUMBER_FIELD } from "@calcom/features/bookings/lib/SystemField";
 import {
   getSmsReminderNumberField,
   getSmsReminderNumberSource,
-  SMS_REMINDER_NUMBER_FIELD,
 } from "@calcom/features/bookings/lib/getBookingFields";
 import { removeBookingField, upsertBookingField } from "@calcom/features/eventtypes/lib/bookingFieldsManager";
 import { SENDER_ID, SENDER_NAME } from "@calcom/lib/constants";