chore: optimizing bundle size (#13473)

* WIP

* Tree shaking

apps/api/lib/helpers/captureErrors.ts

@@ -1,4 +1,4 @@
-import * as Sentry from "@sentry/nextjs";
+import { captureException as SentryCaptureException } from "@sentry/nextjs";
 import type { NextMiddleware } from "next-api-middleware";
 
 import { redactError } from "@calcom/lib/redactError";
@@ -9,7 +9,7 @@ export const captureErrors: NextMiddleware = async (_req, res, next) => {
     // middleware and the API route handler
     await next();
   } catch (error) {
-    Sentry.captureException(error);
+    SentryCaptureException(error);
     const redactedError = redactError(error);
     if (redactedError instanceof Error) {
       res.status(400).json({ message: redactedError.message, error: redactedError });

apps/api/lib/validations/shared/timeZone.ts

@@ -1,5 +1,5 @@
 import tzdata from "tzdata";
-import * as z from "zod";
+import { z } from "zod";
 
 // @note: This is a custom validation that checks if the timezone is valid and exists in the tzdb library
 export const timeZone = z.string().refine((tz: string) => Object.keys(tzdata.zones).includes(tz), {

apps/api/sentry.edge.config.ts

@@ -1,5 +1,5 @@
-import * as Sentry from "@sentry/nextjs";
+import { init as SentryInit } from "@sentry/nextjs";
 
-Sentry.init({
+SentryInit({
   dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
 });

apps/api/sentry.server.config.ts

@@ -1,6 +1,6 @@
-import * as Sentry from "@sentry/nextjs";
+import { init as SentryInit } from "@sentry/nextjs";
 
-Sentry.init({
+SentryInit({
   dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
   tracesSampleRate: 1.0,
 });

apps/web/components/setup/AdminUser.tsx

@@ -3,7 +3,7 @@ import classNames from "classnames";
 import { signIn } from "next-auth/react";
 import React from "react";
 import { Controller, FormProvider, useForm } from "react-hook-form";
-import * as z from "zod";
+import { z } from "zod";
 
 import { isPasswordValid } from "@calcom/features/auth/lib/isPasswordValid";
 import { WEBSITE_URL } from "@calcom/lib/constants";

apps/web/components/setup/EnterpriseLicense.tsx

@@ -3,7 +3,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { noop } from "lodash";
 import { useCallback, useState } from "react";
 import { Controller, FormProvider, useForm, useFormState } from "react-hook-form";
-import * as z from "zod";
+import { z } from "zod";
 
 import { classNames } from "@calcom/lib";
 import { CONSOLE_URL } from "@calcom/lib/constants";

apps/web/sentry.edge.config.ts

@@ -1,5 +1,5 @@
-import * as Sentry from "@sentry/nextjs";
+import { init as SentryInit } from "@sentry/nextjs";
 
-Sentry.init({
+SentryInit({
   dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
 });

apps/web/sentry.server.config.ts

@@ -1,6 +1,6 @@
-import * as Sentry from "@sentry/nextjs";
+import { init as SentryInit } from "@sentry/nextjs";
 
-Sentry.init({
+SentryInit({
   dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
   tracesSampleRate: 1.0,
 });

packages/app-store/alby/api/webhook.ts

@@ -1,6 +1,6 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import getRawBody from "raw-body";
-import * as z from "zod";
+import { z } from "zod";
 
 import { albyCredentialKeysSchema } from "@calcom/app-store/alby/lib";
 import parseInvoice from "@calcom/app-store/alby/lib/parseInvoice";

packages/app-store/paypal/api/webhook.ts

@@ -1,6 +1,6 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import getRawBody from "raw-body";
-import * as z from "zod";
+import { z } from "zod";
 
 import { paypalCredentialKeysSchema } from "@calcom/app-store/paypal/lib";
 import Paypal from "@calcom/app-store/paypal/lib/Paypal";

packages/core/sentryWrapper.ts

@@ -1,4 +1,4 @@
-import * as Sentry from "@sentry/nextjs";
+import { getCurrentHub, startTransaction, captureException } from "@sentry/nextjs";
 import type { Span, Transaction } from "@sentry/types";
 
 /*
@@ -13,11 +13,11 @@ considering that a million monitored iterations only took roughly 8 seconds when
 
 const setUpMonitoring = (name: string) => {
   // Attempt to retrieve the current transaction from Sentry's scope
-  let transaction = Sentry.getCurrentHub().getScope()?.getTransaction();
+  let transaction = getCurrentHub().getScope()?.getTransaction();
 
   // Check if there's an existing transaction, if not, start a new one
   if (!transaction) {
-    transaction = Sentry.startTransaction({
+    transaction = startTransaction({
       op: name,
       name: name,
     });
@@ -37,7 +37,7 @@ const finishMonitoring = (transaction: Transaction | Span, span: Span) => {
   span.finish();
 
   // If this was a new transaction, finish it
-  if (!Sentry.getCurrentHub().getScope()?.getTransaction()) {
+  if (!getCurrentHub().getScope()?.getTransaction()) {
     transaction.finish();
   }
 };
@@ -55,7 +55,7 @@ const monitorCallbackAsync = async <T extends (...args: any[]) => any>(
     const result = await cb(...args);
     return result as ReturnType<T>;
   } catch (error) {
-    Sentry.captureException(error);
+    captureException(error);
     throw error;
   } finally {
     finishMonitoring(transaction, span);
@@ -75,7 +75,7 @@ const monitorCallbackSync = <T extends (...args: any[]) => any>(
     const result = cb(...args);
     return result as ReturnType<T>;
   } catch (error) {
-    Sentry.captureException(error);
+    captureException(error);
     throw error;
   } finally {
     finishMonitoring(transaction, span);

packages/trpc/server/createNextApiHandler.ts

@@ -1,15 +1,15 @@
 import { z } from "zod";
 
-import * as trpcNext from "@calcom/trpc/server/adapters/next";
-import { createContext as createTrpcContext } from "@calcom/trpc/server/createContext";
-
 import type { AnyRouter } from "@trpc/server";
+import { createNextApiHandler as _createNextApiHandler } from "@trpc/server/adapters/next";
+
+import { createContext as createTrpcContext } from "./createContext";
 
 /**
  * Creates an API handler executed by Next.js.
  */
 export function createNextApiHandler(router: AnyRouter, isPublic = false, namespace = "") {
-  return trpcNext.createNextApiHandler({
+  return _createNextApiHandler({
     router,
     /**
      * @link https://trpc.io/docs/context

packages/trpc/server/middlewares/captureErrorsMiddleware.ts

@@ -1,4 +1,4 @@
-import * as Sentry from "@sentry/nextjs";
+import { captureException as SentryCaptureException } from "@sentry/nextjs";
 
 import { redactError } from "@calcom/lib/redactError";
 
@@ -11,7 +11,7 @@ const captureErrorsMiddleware = middleware(async ({ next }) => {
     if (!cause) {
       return result;
     }
-    Sentry.captureException(cause);
+    SentryCaptureException(cause);
     throw redactError(cause);
   }
   return result;

packages/ui/components/avatar/Avatar.tsx

@@ -1,5 +1,5 @@
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { Provider as TooltipPrimitiveProvider } from "@radix-ui/react-tooltip";
 import Link from "next/link";
 
 import classNames from "@calcom/lib/classNames";
@@ -70,9 +70,9 @@ export function Avatar(props: AvatarProps) {
   }
 
   return title ? (
-    <TooltipPrimitive.Provider>
+    <TooltipPrimitiveProvider>
       <Tooltip content={title}>{avatar}</Tooltip>
-    </TooltipPrimitive.Provider>
+    </TooltipPrimitiveProvider>
   ) : (
     <>{avatar}</>
   );