Export Components using ESM

[yordis]

Hey there, I notice that you do the following as of today:

headlessui/packages/@headlessui-react/src/components/dialog/dialog.tsx

Line 421 in 452b2c2

export let Dialog = Object.assign(DialogRoot, { Overlay, Title, Description })

Such things force me to use Dialog object, I have seen such practices before and they always backfire on us due to extra complexity re-exporting things or copying over, and tree-shaking (no problem as of today, yet).

Given the context that ESM is already an object if people really want a single import import * as Something ...

---

Recently I had to wrap Dialog since I had to add FullStory className by default.

import * as React from 'react';
import { Dialog as HeadlessDialog } from '@headlessui/react';
import clsx from 'classnames';
import { FULLSTORY_UNMASK } from '@/styles/constants';

type DialogProps = React.PropsWithChildren<{
  open: boolean;
  onClose?(): void;
  className?: string;
}>;

export function Dialog(props: DialogProps) {
  return (
    <HeadlessDialog open={props.open} onClose={props.onClose} className={clsx(props.className, FULLSTORY_UNMASK)}>
      {props.children}
    </HeadlessDialog>
  );
}

So now I am forced to keep mapping things into the next object rather than using ESM, so I can't do the following:

export { Overlay, Title } from '@headlessui/react';

I can either do imperative things, hopefully getting it right by copying over the keys, or I can leverage ESM for it which already has built-in capabilities for re-exporting things.

---

Any thoughts?

Worth saying, I know how to fix the issue, but I would like to propose to back track out of such a decision made, from my experience, it adds a lot of complexity and burden on the consumers.

[PedroAugustoRamalhoDuarte]

Hello @yordis, I am having trouble to make my component library tree-shakeble using headlessui. I think is a similar issue, do you know how I can achieve tree-shakable using Dialog component for example?