bug: missing export of DatetimeHighlightStyle

[aparajita]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

Although the source does export DatetimeHighlightStyle, the built package does not, which results in a TS error when trying to import it.

Expected Behavior

DatetimeHighlightStyle should be exported in the built package.

Steps to Reproduce

1. Open any project.
2. Enter the following:

import { DatetimeHighlightStyle } from '@ionic/core'

3. TypeScript will complain that @ionic/core does not export that name.

Code Reproduction URL

https://stackblitz.com/edit/xkg3uz?file=src/main.ts

Ionic Info

Ionic:

   Ionic CLI : 7.1.1 (/Users/aparajita/Developer/projects/clients/willsub/apps-monorepo/node_modules/.pnpm/@ionic+cli@7.1.1/node_modules/@ionic/cli)

Capacitor:

   Capacitor CLI      : 4.8.0
   @capacitor/android : 4.8.0 (/Users/aparajita/Developer/projects/clients/willsub/apps-monorepo/node_modules/.pnpm/@capacitor+android@4.8.0_@capacitor+core@4.8.0/node_modules/@capacitor/android)
   @capacitor/core    : 4.8.0 (/Users/aparajita/Developer/projects/clients/willsub/apps-monorepo/node_modules/.pnpm/@capacitor+core@4.8.0/node_modules/@capacitor/core)
   @capacitor/ios     : 4.8.0 (/Users/aparajita/Developer/projects/clients/willsub/apps-monorepo/node_modules/.pnpm/@capacitor+ios@4.8.0_@capacitor+core@4.8.0/node_modules/@capacitor/ios)

Utility:

   cordova-res : not installed globally
   native-run  : not installed globally

System:

   NodeJS : v20.0.0 (/Users/aparajita/Library/pnpm/nodejs/20.0.0/bin/node)
   npm    : 9.6.4
   OS     : macOS Unknown

Additional Information

The relevant line in the built package is @ionic/core/types/components.d.ts, lines 18 and 54, which sure enough are missing the relevant name:

import { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";

export { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";

[sean-perkins]

Hello @aparajita thanks for this issue! Can you share your intended usage requiring the DatetimeHighlightStyle type?

To bind to highlightedDates, consumers should need DatetimeHighlight or DatetimeHighlightCallback. Are you requiring the type for the return type of DatetimeHighlightCallback?

[aparajita]

Hey @sean-perkins, first of all, since DatetimeHighlight is defined as:

export type DatetimeHighlight = {
  date: string;
} & DatetimeHighlightStyle;

not exporting DatetimeHighlightStyle does not allow us to set the style separately from the date in a type-safe manner. I'm not quite sure what the rationale is behind that, if indeed it was a conscious choice.

Here's the relevant portions of my code:

  const kDateHighlights: Record<string, DatetimeHighlightStyle> = {
    available: {
      textColor: 'var(--ion-color-dark-contrast)',
      backgroundColor: 'var(--color-available-job)',
    },
    assigned: {
      textColor: 'var(--ion-color-dark-contrast)',
      backgroundColor: 'var(--color-assigned-job)',
    },
    pto: {
      textColor: 'var(--ion-color-dark-contrast)',
      backgroundColor: 'var(--color-pto)',
    },
  }

  function getDateHighlight(item: ListItem): DatetimeHighlightStyle {
    if (isAvailableJob(item)) {
      return kDateHighlights.available
    } else if (isAssignedJob(item)) {
      return kDateHighlights.assigned
    } else {
      return kDateHighlights.pto
    }
  }

  // Not exactly my code, but the general idea
  const highlightedDates = computed((): DatetimeHighlight[] => {
    const highlights: DatetimeHighlight[] = []

    for (const item of items) {
      // Without DatetimeHighlightStyle being defined, TS sees the object
      // parameter as `any`.
      highlights.push({
        date: item.date,
        ...getDateHighlight(item)
      })
    }
  })

[sean-perkins]

@aparajita thanks for the code snippet, that makes sense!

Stencil v3 includes a feature that automatically exports types assigned to a @Prop. Prior to this, Ionic Framework had to manually export all individual types. The downside to this, is that types that are consumed in those automatically exported types, are not additionally exported. That is the case here, where we missed exporting this lower-level type for developers.

I will open #27360 for review.

[aparajita]

Thanks @sean-perkins. I am able to work around it for now by declaring the type myself.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.