Techdebt/bundle size experiments (#7894)

* Checking package size effects when we remove zod from middleware

* Remove 'crypto' from client code

* Revert "Checking package size effects when we remove zod from middleware"

This reverts commit ecc2038.

* Adding lodash to dynamicImports + consistent imports

* Remove the locales from the global Dayjs object

apps/web/components/NavTabs.tsx

@@ -1,5 +1,5 @@
 import { AdminRequired } from "components/ui/AdminRequired";
-import noop from "lodash/noop";
+import { noop } from "lodash";
 import type { LinkProps } from "next/link";
 import Link from "next/link";
 import { useRouter } from "next/router";

apps/web/components/booking/BookingListItem.tsx

@@ -5,6 +5,8 @@ import { useState } from "react";
 import type { EventLocationType } from "@calcom/app-store/locations";
 import { getEventLocationType } from "@calcom/app-store/locations";
 import dayjs from "@calcom/dayjs";
+// TODO: Use browser locale, implement Intl in Dayjs maybe?
+import "@calcom/dayjs/locales";
 import ViewRecordingsDialog from "@calcom/features/ee/video/ViewRecordingsDialog";
 import classNames from "@calcom/lib/classNames";
 import { formatTime } from "@calcom/lib/date-fns";

apps/web/next.config.js

@@ -99,6 +99,9 @@ const nextConfig = {
       skipDefaultConversion: true,
       preventFullImport: true,
     },
+    lodash: {
+      transform: "lodash/{{member}}",
+    },
     // TODO: We need to have all components in `@calcom/ui/components` in order to use this
     // "@calcom/ui": {
     //   transform: "@calcom/ui/components/{{member}}",

apps/web/pages/auth/forgot-password/[id].tsx

@@ -1,5 +1,5 @@
 import type { ResetPasswordRequest } from "@prisma/client";
-import debounce from "lodash/debounce";
+import { debounce } from "lodash";
 import type { GetServerSidePropsContext } from "next";
 import { getCsrfToken } from "next-auth/react";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";

apps/web/pages/auth/forgot-password/index.tsx

@@ -1,4 +1,4 @@
-import debounce from "lodash/debounce";
+import { debounce } from "lodash";
 import type { GetServerSidePropsContext } from "next";
 import { getCsrfToken } from "next-auth/react";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";

apps/web/pages/settings/my-account/profile.tsx

@@ -1,6 +1,5 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { IdentityProvider } from "@prisma/client";
-import crypto from "crypto";
 import { signOut } from "next-auth/react";
 import type { BaseSyntheticEvent } from "react";
 import { useRef, useState } from "react";
@@ -332,11 +331,6 @@ const ProfileForm = ({
     bio: z.string(),
   });
 
-  const emailMd5 = crypto
-    .createHash("md5")
-    .update(defaultValues.email || "example@example.com")
-    .digest("hex");
-
   const formMethods = useForm<FormValues>({
     defaultValues,
     resolver: zodResolver(profileFormSchema),
@@ -356,7 +350,7 @@ const ProfileForm = ({
           name="avatar"
           render={({ field: { value } }) => (
             <>
-              <Avatar alt="" imageSrc={value} gravatarFallbackMd5={emailMd5} size="lg" />
+              <Avatar alt="" imageSrc={value} gravatarFallbackMd5="fallback" size="lg" />
               <div className="ltr:ml-4 rtl:mr-4">
                 <ImageUploader
                   target="avatar"

apps/web/playwright/lib/testUtils.ts

@@ -2,7 +2,7 @@ import type { Page } from "@playwright/test";
 import { expect } from "@playwright/test";
 import type { IncomingMessage, ServerResponse } from "http";
 import { createServer } from "http";
-import noop from "lodash/noop";
+import { noop } from "lodash";
 
 import { test } from "./fixtures";
 

packages/core/CalendarManager.ts

@@ -1,5 +1,5 @@
 import type { SelectedCalendar } from "@prisma/client";
-import _ from "lodash";
+import { sortBy } from "lodash";
 import * as process from "process";
 
 import { getCalendar } from "@calcom/app-store/_utils/getCalendar";
@@ -54,8 +54,8 @@ export const getConnectedCalendars = async (
           };
         }
         const cals = await calendar.listCalendars();
-        const calendars = _(cals)
-          .map((cal) => {
+        const calendars = sortBy(
+          cals.map((cal) => {
             if (cal.externalId === destinationCalendarExternalId) destinationCalendar = cal;
             return {
               ...cal,
@@ -64,9 +64,9 @@ export const getConnectedCalendars = async (
               isSelected: selectedCalendars.some((selected) => selected.externalId === cal.externalId),
               credentialId,
             };
-          })
-          .sortBy(["primary"])
-          .value();
+          }),
+          ["primary"]
+        );
         const primary = calendars.find((item) => item.primary) ?? calendars.find((cal) => cal !== undefined);
         if (!primary) {
           return {

packages/core/EventManager.ts

@@ -1,6 +1,5 @@
 import type { DestinationCalendar, Booking } from "@prisma/client";
-import { cloneDeep } from "lodash";
-import merge from "lodash/merge";
+import { cloneDeep, merge } from "lodash";
 import { v5 as uuidv5 } from "uuid";
 import type { z } from "zod";
 

packages/dayjs/index.ts

@@ -1,31 +1,6 @@
 /* eslint-disable @calcom/eslint/deprecated-imports */
 import dayjs from "dayjs";
 import dayjsBusinessTime from "dayjs-business-days2";
-import "dayjs/locale/ar";
-import "dayjs/locale/bg";
-import "dayjs/locale/cs";
-import "dayjs/locale/de";
-import "dayjs/locale/es";
-import "dayjs/locale/es-mx";
-import "dayjs/locale/fr";
-import "dayjs/locale/he";
-import "dayjs/locale/hu";
-import "dayjs/locale/it";
-import "dayjs/locale/ja";
-import "dayjs/locale/ko";
-import "dayjs/locale/nl";
-import "dayjs/locale/pl";
-import "dayjs/locale/pt";
-import "dayjs/locale/pt-br";
-import "dayjs/locale/ro";
-import "dayjs/locale/ru";
-import "dayjs/locale/sr";
-import "dayjs/locale/sv";
-import "dayjs/locale/tr";
-import "dayjs/locale/uk";
-import "dayjs/locale/vi";
-import "dayjs/locale/zh-cn";
-import "dayjs/locale/zh-tw";
 import customParseFormat from "dayjs/plugin/customParseFormat";
 import isBetween from "dayjs/plugin/isBetween";
 import isToday from "dayjs/plugin/isToday";

packages/dayjs/locales.ts

@@ -0,0 +1,25 @@
+import "dayjs/locale/ar";
+import "dayjs/locale/bg";
+import "dayjs/locale/cs";
+import "dayjs/locale/de";
+import "dayjs/locale/es";
+import "dayjs/locale/es-mx";
+import "dayjs/locale/fr";
+import "dayjs/locale/he";
+import "dayjs/locale/hu";
+import "dayjs/locale/it";
+import "dayjs/locale/ja";
+import "dayjs/locale/ko";
+import "dayjs/locale/nl";
+import "dayjs/locale/pl";
+import "dayjs/locale/pt";
+import "dayjs/locale/pt-br";
+import "dayjs/locale/ro";
+import "dayjs/locale/ru";
+import "dayjs/locale/sr";
+import "dayjs/locale/sv";
+import "dayjs/locale/tr";
+import "dayjs/locale/uk";
+import "dayjs/locale/vi";
+import "dayjs/locale/zh-cn";
+import "dayjs/locale/zh-tw";

packages/emails/src/components/WhenInfo.tsx

@@ -2,6 +2,8 @@ import type { TFunction } from "next-i18next";
 import { RRule } from "rrule";
 
 import dayjs from "@calcom/dayjs";
+// TODO: Use browser locale, implement Intl in Dayjs maybe?
+import "@calcom/dayjs/locales";
 import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
 import { TimeFormat } from "@calcom/lib/timeFormat";
 import type { CalendarEvent, Person } from "@calcom/types/Calendar";

packages/features/ee/support/lib/intercom/useIntercom.ts

@@ -1,4 +1,4 @@
-import noop from "lodash/noop";
+import { noop } from "lodash";
 import { useIntercom as useIntercomLib } from "react-use-intercom";
 import { z } from "zod";
 

packages/trpc/server/routers/viewer.tsx

@@ -1,7 +1,7 @@
 import type { DestinationCalendar, Prisma } from "@prisma/client";
 import { AppCategories, BookingStatus, IdentityProvider } from "@prisma/client";
 import { cityMapping } from "city-timezones";
-import _ from "lodash";
+import { reverse } from "lodash";
 import { authenticator } from "otplib";
 import z from "zod";
 
@@ -755,7 +755,7 @@ const loggedInViewerRouter = router({
         });
       }
       await Promise.all(
-        _.reverse(input.ids).map((id, position) => {
+        reverse(input.ids).map((id, position) => {
           return prisma.eventType.update({
             where: {
               id,

packages/trpc/server/routers/viewer/eventTypes.ts

@@ -1,7 +1,6 @@
 import { MembershipRole, PeriodType, Prisma, SchedulingType } from "@prisma/client";
 import { PrismaClientKnownRequestError } from "@prisma/client/runtime/library";
-// REVIEW: From lint error
-import _ from "lodash";
+import { orderBy } from "lodash";
 import type { NextApiResponse } from "next";
 import { z } from "zod";
 
@@ -336,7 +335,7 @@ export const eventTypesRouter = router({
         name: user.name,
         image: user.avatar || undefined,
       },
-      eventTypes: _.orderBy(mergedEventTypes, ["position", "id"], ["desc", "asc"]),
+      eventTypes: orderBy(mergedEventTypes, ["position", "id"], ["desc", "asc"]),
       metadata: {
         membershipCount: 1,
         readOnly: false,

packages/ui/components/head-seo/HeadSeo.tsx

@@ -1,4 +1,4 @@
-import merge from "lodash/merge";
+import { merge } from "lodash";
 import type { NextSeoProps } from "next-seo";
 import { NextSeo } from "next-seo";
 import { useRouter } from "next/router";

packages/ui/components/top-banner/TopBanner.tsx

@@ -1,6 +1,6 @@
 import { XIcon } from "@heroicons/react/solid";
 import classNames from "classnames";
-import noop from "lodash/noop";
+import { noop } from "lodash";
 import type { ReactNode } from "react";
 
 import { FiAlertTriangle, FiInfo } from "../icon";