feat: implement granular app metadata imports to reduce bundle size

apps/web/components/booking/BookingListItem.tsx

@@ -4,7 +4,7 @@ import { useState } from "react";
 import { Controller, useFieldArray, useForm } from "react-hook-form";
 
 import type { getEventLocationValue } from "@calcom/app-store/locations";
-import { getSuccessPageLocationMessage, guessEventLocationType } from "@calcom/app-store/locations";
+import { getSuccessPageLocationMessage, guessEventLocationTypeSync } from "@calcom/app-store/locations";
 import dayjs from "@calcom/dayjs";
 // TODO: Use browser locale, implement Intl in Dayjs maybe?
 import "@calcom/dayjs/locales";
@@ -200,7 +200,7 @@ function BookingListItem(booking: BookingItemProps) {
     t,
     booking.status
   );
-  const provider = guessEventLocationType(location);
+  const provider = guessEventLocationTypeSync(location);
 
   const isDisabledCancelling = booking.eventType.disableCancelling;
   const isDisabledRescheduling = booking.eventType.disableRescheduling;

apps/web/components/dialog/EditLocationDialog.tsx

@@ -7,7 +7,7 @@ import { z } from "zod";
 
 import type { EventLocationType, LocationObject } from "@calcom/app-store/locations";
 import {
-  getEventLocationType,
+  getEventLocationTypeSync,
   getHumanReadableLocationValue,
   getMessageForOrganizer,
   isAttendeeInputRequired,
@@ -168,7 +168,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
     name: "locationAddress",
   });
 
-  const eventLocationType = getEventLocationType(selectedLocation);
+  const eventLocationType = getEventLocationTypeSync(selectedLocation);
 
   const defaultLocation = defaultValues?.find(
     (location: { type: EventLocationType["type"]; address?: string }) => {

apps/web/modules/bookings/views/bookings-single-view.tsx

@@ -11,7 +11,7 @@ import { z } from "zod";
 
 import BookingPageTagManager from "@calcom/app-store/BookingPageTagManager";
 import type { getEventLocationValue } from "@calcom/app-store/locations";
-import { getSuccessPageLocationMessage, guessEventLocationType } from "@calcom/app-store/locations";
+import { getSuccessPageLocationMessage, guessEventLocationTypeSync } from "@calcom/app-store/locations";
 import { getEventTypeAppData } from "@calcom/app-store/utils";
 import type { ConfigType } from "@calcom/dayjs";
 import dayjs from "@calcom/dayjs";
@@ -158,11 +158,19 @@ export default function Success(props: PageProps) {
   const utmParams = bookingInfo.tracking;
 
   const [date, setDate] = useState(dayjs.utc(bookingInfo.startTime));
-  const calendarLinks = getCalendarLinks({
-    booking: bookingWithParsedMetadata,
-    eventType: eventType,
-    t,
-  });
+  const [calendarLinks, setCalendarLinks] = useState<any[]>([]);
+
+  useEffect(() => {
+    const loadCalendarLinks = async () => {
+      const links = await getCalendarLinks({
+        booking: bookingWithParsedMetadata,
+        eventType: eventType,
+        t,
+      });
+      setCalendarLinks(links);
+    };
+    loadCalendarLinks();
+  }, [bookingWithParsedMetadata, eventType, t]);
 
   // TODO: We could transform the JSX to just iterate over calendarLinks and render a link for each type
   const icsLink = calendarLinks.find((link) => link.id === CalendarLinkType.ICS)?.link;
@@ -353,8 +361,8 @@ export default function Success(props: PageProps) {
     bookingInfo.status
   );
 
-  const providerName = guessEventLocationType(location)?.label;
-  const rescheduleProviderName = guessEventLocationType(rescheduleLocation)?.label;
+  const providerName = guessEventLocationTypeSync(location)?.label;
+  const rescheduleProviderName = guessEventLocationTypeSync(rescheduleLocation)?.label;
   const isBookingInPast = new Date(bookingInfo.endTime) < new Date();
   const isReschedulable = !isCancelled;
 
@@ -415,7 +423,7 @@ export default function Success(props: PageProps) {
       {!isEmbed && !isFeedbackMode && (
         <EventReservationSchema
           reservationId={bookingInfo.uid}
-          eventName={eventName}
+          eventName={typeof eventName === "string" ? eventName : ""}
           startTime={bookingInfo.startTime}
           endTime={bookingInfo.endTime}
           organizer={bookingInfo.user}
@@ -579,7 +587,7 @@ export default function Success(props: PageProps) {
                         )}
                         <div className="font-medium">{t("what")}</div>
                         <div className="col-span-2 mb-6 last:mb-0" data-testid="booking-title">
-                          {isRoundRobin ? bookingInfo.title : eventName}
+                          {isRoundRobin ? bookingInfo.title : typeof eventName === "string" ? eventName : ""}
                         </div>
                         <div className="font-medium">{t("when")}</div>
                         <div className="col-span-2 mb-6 last:mb-0">

apps/web/test/lib/handleChildrenEventTypes.test.ts

@@ -121,7 +121,6 @@ describe("handleChildrenEventTypes", () => {
         autoTranslateDescriptionEnabled,
         includeNoShowInRRCalculation,
         instantMeetingScheduleId,
-        showOptimizedSlots,
         ...evType
       } = mockFindFirstEventType({
         id: 123,
@@ -183,7 +182,6 @@ describe("handleChildrenEventTypes", () => {
         assignRRMembersUsingSegment,
         includeNoShowInRRCalculation,
         instantMeetingScheduleId,
-        showOptimizedSlots,
         ...evType
       } = mockFindFirstEventType({
         metadata: { managedEventConfig: {} },
@@ -294,7 +292,6 @@ describe("handleChildrenEventTypes", () => {
         includeNoShowInRRCalculation,
         instantMeetingScheduleId,
         assignRRMembersUsingSegment,
-        showOptimizedSlots,
         ...evType
       } = mockFindFirstEventType({
         id: 123,
@@ -359,7 +356,6 @@ describe("handleChildrenEventTypes", () => {
         assignRRMembersUsingSegment,
         rrSegmentQueryValue,
         useEventLevelSelectedCalendars,
-        showOptimizedSlots,
         ...evType
       } = mockFindFirstEventType({
         metadata: { managedEventConfig: {} },
@@ -425,7 +421,6 @@ describe("handleChildrenEventTypes", () => {
         includeNoShowInRRCalculation,
         instantMeetingScheduleId,
         assignRRMembersUsingSegment,
-        showOptimizedSlots,
         ...evType
       } = mockFindFirstEventType({
         metadata: { managedEventConfig: {} },
@@ -449,7 +444,6 @@ describe("handleChildrenEventTypes", () => {
         requiresBookerEmailVerification: false,
         lockTimeZoneToggleOnBookingPage: false,
         useEventTypeDestinationCalendarEmail: false,
-        showOptimizedSlots: false,
         workflows: [],
         parentId: 1,
         locations: [],

packages/app-store-cli/src/build.ts

@@ -467,6 +467,102 @@ function generateFiles() {
     videoOutput.push(...videoAdapters);
   }
 
+  const calendarMetadataOutput = [];
+  const calendarMetadataServices = getExportedObject(
+    "CalendarMetadataMap",
+    {
+      importConfig: {
+        fileToBeImported: "_metadata.ts",
+        importName: "default",
+      },
+      lazyImport: true,
+    },
+    (app: App) => {
+      return app.type && app.type.endsWith("_calendar");
+    }
+  );
+  calendarMetadataOutput.push(...calendarMetadataServices);
+
+  const paymentMetadataOutput = [];
+  const paymentMetadataServices = getExportedObject(
+    "PaymentMetadataMap",
+    {
+      importConfig: {
+        fileToBeImported: "_metadata.ts",
+        importName: "default",
+      },
+      lazyImport: true,
+    },
+    (app: App) => {
+      return app.type && app.type.endsWith("_payment");
+    }
+  );
+  paymentMetadataOutput.push(...paymentMetadataServices);
+
+  const videoMetadataOutput = [];
+  const videoMetadataServices = getExportedObject(
+    "VideoMetadataMap",
+    {
+      importConfig: {
+        fileToBeImported: "_metadata.ts",
+        importName: "default",
+      },
+      lazyImport: true,
+    },
+    (app: App) => {
+      return app.type && app.type.endsWith("_video");
+    }
+  );
+  videoMetadataOutput.push(...videoMetadataServices);
+
+  const analyticsMetadataOutput = [];
+  const analyticsMetadataServices = getExportedObject(
+    "AnalyticsMetadataMap",
+    {
+      importConfig: {
+        fileToBeImported: "_metadata.ts",
+        importName: "default",
+      },
+      lazyImport: true,
+    },
+    (app: App) => {
+      return app.type && app.type.endsWith("_analytics");
+    }
+  );
+  analyticsMetadataOutput.push(...analyticsMetadataServices);
+
+  const crmMetadataOutput = [];
+  const crmMetadataServices = getExportedObject(
+    "CrmMetadataMap",
+    {
+      importConfig: {
+        fileToBeImported: "_metadata.ts",
+        importName: "default",
+      },
+      lazyImport: true,
+    },
+    (app: App) => {
+      return app.type && app.type.endsWith("_crm");
+    }
+  );
+  crmMetadataOutput.push(...crmMetadataServices);
+
+  const locationMetadataOutput = [];
+  const locationMetadataServices = getExportedObject(
+    "LocationMetadataMap",
+    {
+      importConfig: {
+        fileToBeImported: "_metadata.ts",
+        importName: "default",
+      },
+      lazyImport: true,
+    },
+    (app: App) => {
+      return !!app.appData?.location;
+    }
+  );
+  locationMetadataOutput.push(...locationMetadataServices);
+
   const banner = `/**
     This file is autogenerated using the command \`yarn app-store:build --watch\`.
     Don't modify this file manually.
@@ -484,6 +580,12 @@ function generateFiles() {
     ["calendar.services.generated.ts", calendarOutput],
     ["payment.services.generated.ts", paymentOutput],
     ["video.adapters.generated.ts", videoOutput],
+    ["calendar.metadata.generated.ts", calendarMetadataOutput],
+    ["payment.metadata.generated.ts", paymentMetadataOutput],
+    ["video.metadata.generated.ts", videoMetadataOutput],
+    ["analytics.metadata.generated.ts", analyticsMetadataOutput],
+    ["crm.metadata.generated.ts", crmMetadataOutput],
+    ["location.metadata.generated.ts", locationMetadataOutput],
   ];
   filesToGenerate.forEach(([fileName, output]) => {
     fs.writeFileSync(`${APP_STORE_PATH}/${fileName}`, formatOutput(`${banner}${output.join("\n")}`));

packages/app-store/BookingPageTagManager.tsx

@@ -1,7 +1,7 @@
 import Script from "next/script";
+import React from "react";
 
 import { getEventTypeAppData } from "@calcom/app-store/_utils/getEventTypeAppData";
-import { appStoreMetadata } from "@calcom/app-store/bookerAppsMetaData";
 import type { Tag } from "@calcom/app-store/types";
 import { sdkActionManager } from "@calcom/lib/sdk-event";
 import type { AppMeta } from "@calcom/types/App";
@@ -29,30 +29,42 @@ const getPushEventScript = ({ tag, appId }: { tag: Tag; appId: string }) => {
   };
 };
 
-function getAnalyticsApps(eventType: Parameters<typeof getEventTypeAppData>[0]) {
-  return Object.entries(appStoreMetadata).reduce(
-    (acc, entry) => {
-      const [appId, app] = entry;
-      const eventTypeAppData = getEventTypeAppData(eventType, appId as keyof typeof appDataSchemas);
+async function getAnalyticsApps(eventType: Parameters<typeof getEventTypeAppData>[0]) {
+  const analyticsApps: Record<
+    string,
+    {
+      meta: AnalyticApp;
+      eventTypeAppData: ReturnType<typeof getEventTypeAppData>;
+    }
+  > = {};
 
-      if (!eventTypeAppData || !app.appData?.tag) {
-        return acc;
-      }
+  const { AnalyticsMetadataMap } = await import("./analytics.metadata.generated");
 
-      acc[appId] = {
-        meta: app as AnalyticApp,
-        eventTypeAppData: eventTypeAppData,
-      };
-      return acc;
-    },
-    {} as Record<
-      string,
-      {
-        meta: AnalyticApp;
-        eventTypeAppData: ReturnType<typeof getEventTypeAppData>;
+  for (const [appId, metadataPromise] of Object.entries(AnalyticsMetadataMap)) {
+    try {
+      const metadata = await metadataPromise;
+      const eventTypeAppData = getEventTypeAppData(eventType, appId as keyof typeof appDataSchemas);
+      if (
+        eventTypeAppData &&
+        metadata &&
+        typeof metadata === "object" &&
+        metadata !== null &&
+        "appData" in metadata
+      ) {
+        const typedMetadata = metadata as AppMeta;
+        if (typedMetadata.appData?.tag) {
+          analyticsApps[appId] = {
+            meta: typedMetadata as AnalyticApp,
+            eventTypeAppData,
+          };
+        }
       }
-    >
-  );
+    } catch (error) {
+      console.warn(`Failed to load analytics app ${appId}:`, error);
+    }
+  }
+
+  return analyticsApps;
 }
 
 export function handleEvent(event: { detail: Record<string, unknown> & { type: string } }) {
@@ -94,7 +106,20 @@ export default function BookingPageTagManager({
 }: {
   eventType: Parameters<typeof getEventTypeAppData>[0];
 }) {
-  const analyticsApps = getAnalyticsApps(eventType);
+  const [analyticsApps, setAnalyticsApps] = React.useState<
+    Record<
+      string,
+      {
+        meta: AnalyticApp;
+        eventTypeAppData: ReturnType<typeof getEventTypeAppData>;
+      }
+    >
+  >({});
+
+  React.useEffect(() => {
+    getAnalyticsApps(eventType).then(setAnalyticsApps);
+  }, [eventType]);
+
   return (
     <>
       {Object.entries(analyticsApps).map(([appId, { meta: app, eventTypeAppData }]) => {

packages/app-store/_appRegistry.ts

@@ -1,5 +1,5 @@
 import { appStoreMetadata } from "@calcom/app-store/appStoreMetaData";
-import { getAppFromSlug } from "@calcom/app-store/utils";
+import { getAppFromSlugSync } from "@calcom/app-store/utils";
 import getInstallCountPerApp from "@calcom/lib/apps/getInstallCountPerApp";
 import { getAllDelegationCredentialsForUser } from "@calcom/lib/delegationCredential/server";
 import type { UserAdminTeams } from "@calcom/lib/server/repository/user";
@@ -121,7 +121,7 @@ export async function getAppRegistryWithCredentials(userId: number, userAdminTea
           (dbAppIterator) => dbAppIterator.credentials.length && dbAppIterator.slug === dependency
         );
         // If the app marked as dependency is simply deleted from the codebase, we can have the situation where App is marked installed in DB but we couldn't get the app.
-        const dependencyName = getAppFromSlug(dependency)?.name;
+        const dependencyName = getAppFromSlugSync(dependency)?.name;
         return { name: dependencyName, installed: dependencyInstalled };
       });
     }

packages/app-store/_utils/setDefaultConferencingApp.ts

@@ -1,13 +1,13 @@
 import type { LocationObject } from "@calcom/app-store/locations";
-import { getAppFromSlug } from "@calcom/app-store/utils";
+import { getAppFromSlugSync } from "@calcom/app-store/utils";
 import { getBulkUserEventTypes } from "@calcom/lib/event-types/getBulkEventTypes";
 import prisma from "@calcom/prisma";
 import { userMetadata } from "@calcom/prisma/zod-utils";
 
 const setDefaultConferencingApp = async (userId: number, appSlug: string) => {
   const eventTypes = await getBulkUserEventTypes(userId);
   const eventTypeIds = eventTypes.eventTypes.map((item) => item.id);
-  const foundApp = getAppFromSlug(appSlug);
+  const foundApp = getAppFromSlugSync(appSlug);
   const appType = foundApp?.appData?.location?.type;
 
   if (!appType) {

packages/app-store/alby/minimal-metadata.ts

@@ -0,0 +1,5 @@
+export const metadata = {
+  slug: "alby",
+  name: "alby",
+  type: "alby_payment",
+};