From a09401c203020c861ec3b85a3e625a485a2e7d4e Mon Sep 17 00:00:00 2001 From: Hariom Balhara Date: Wed, 16 Aug 2023 23:33:21 +0530 Subject: [PATCH] perf: Booker bundle size optimization - Remove `sanitize-html` dependency on client (#10801) --- apps/web/pages/booking/[uid].tsx | 7 ++----- .../Booker/components/BookEventForm/BookEventForm.tsx | 6 +----- .../features/bookings/Booker/components/EventMeta.tsx | 3 +-- packages/features/bookings/lib/SystemField.ts | 2 ++ packages/features/bookings/lib/getBookingFields.ts | 6 +++--- packages/lib/defaultEvents.ts | 11 +---------- packages/lib/markdownToSafeHTML.ts | 6 ++++++ packages/trpc/server/routers/viewer/workflows/util.ts | 2 +- 8 files changed, 17 insertions(+), 26 deletions(-) diff --git a/apps/web/pages/booking/[uid].tsx b/apps/web/pages/booking/[uid].tsx index 80742b6e8f..bfe6d748be 100644 --- a/apps/web/pages/booking/[uid].tsx +++ b/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 { diff --git a/packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx b/packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx index 31886fddaf..36eeda9958 100644 --- a/packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx +++ b/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. diff --git a/packages/features/bookings/Booker/components/EventMeta.tsx b/packages/features/bookings/Booker/components/EventMeta.tsx index ac6cd09305..a6cd2803b5 100644 --- a/packages/features/bookings/Booker/components/EventMeta.tsx +++ b/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 = () => { {event?.title} {event.description && ( -
+
)}
diff --git a/packages/features/bookings/lib/SystemField.ts b/packages/features/bookings/lib/SystemField.ts index 3cd28eca72..53d8a6decb 100644 --- a/packages/features/bookings/lib/SystemField.ts +++ b/packages/features/bookings/lib/SystemField.ts @@ -10,3 +10,5 @@ export const SystemField = z.enum([ "rescheduleReason", "smsReminderNumber", ]); + +export const SMS_REMINDER_NUMBER_FIELD = "smsReminderNumber"; diff --git a/packages/features/bookings/lib/getBookingFields.ts b/packages/features/bookings/lib/getBookingFields.ts index 62e55ec7ec..faf5aeb6bf 100644 --- a/packages/features/bookings/lib/getBookingFields.ts +++ b/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; 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 */ diff --git a/packages/lib/defaultEvents.ts b/packages/lib/defaultEvents.ts index 8a78331496..c0871fb983 100644 --- a/packages/lib/defaultEvents.ts +++ b/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 = { diff --git a/packages/lib/markdownToSafeHTML.ts b/packages/lib/markdownToSafeHTML.ts index a774e5498e..0c272fa5f2 100644 --- a/packages/lib/markdownToSafeHTML.ts +++ b/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 ""; diff --git a/packages/trpc/server/routers/viewer/workflows/util.ts b/packages/trpc/server/routers/viewer/workflows/util.ts index ff256e49ee..ec76fea3a4 100644 --- a/packages/trpc/server/routers/viewer/workflows/util.ts +++ b/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";