Problems with tree-shaking (forwardRef|displayName)

[Kiyozz]

Bug report

Current Behavior

Tree-shaking is not optimized/not working.

Current components are not using PURE annotation or is using displayName that cause tree-shaking problems.

Current Dialog component

const DialogOverlay = React.forwardRef<DialogOverlayElement, DialogOverlayProps>(
  (props: ScopedProps<DialogOverlayProps>, forwardedRef) => {
    const portalContext = usePortalContext(OVERLAY_NAME, props.__scopeDialog);
    const { forceMount = portalContext.forceMount, ...overlayProps } = props;
    const context = useDialogContext(OVERLAY_NAME, props.__scopeDialog);
    return context.modal ? (
      <Presence present={forceMount || context.open}>
        <DialogOverlayImpl {...overlayProps} ref={forwardedRef} />
      </Presence>
    ) : null;
  }
);

Easy first solution to do

// Make it PURE and keep comments in the bundle
// bundlers understand and keep PURE annotations anyway from my experience
const DialogOverlay = /* @__PURE__ */ React.forwardRef<DialogOverlayElement, DialogOverlayProps>(
  (props: ScopedProps<DialogOverlayProps>, forwardedRef) => {
    const portalContext = usePortalContext(OVERLAY_NAME, props.__scopeDialog);
    const { forceMount = portalContext.forceMount, ...overlayProps } = props;
    const context = useDialogContext(OVERLAY_NAME, props.__scopeDialog);
    return context.modal ? (
      <Presence present={forceMount || context.open}>
        <DialogOverlayImpl {...overlayProps} ref={forwardedRef} />
      </Presence>
    ) : null;
  }
);

Expected behavior

Unused components should be removed from the bundle.

Reproducible example

Repository

Suggested solution

• Make forwardRef components pure with a comment /* @__PURE__ */ forwardRef(...).
• Make Component.displayName = conditional for components to be removed.

Additional context

Issue #336 with PR #577 fixed tree-shaking in 2021. However, this was reverted later, and I don't know why.

In my repository, after bundling the UI and the Vite App (See the README), you can see the Dialogs reference (DialogPortal for example) in the final bundle because esbuild cannot understand the Dialog could be removed because there is no PURE annotations or displayName is used.

Your environment