Skip to content

fix(compiler): conditionally restore prop: branch in OneOf helper - #6855

Open
rajat12826 wants to merge 1 commit into
stenciljs:mainfrom
rajat12826:main
Open

fix(compiler): conditionally restore prop: branch in OneOf helper#6855
rajat12826 wants to merge 1 commit into
stenciljs:mainfrom
rajat12826:main

Conversation

@rajat12826

Copy link
Copy Markdown

Description

This PR fixes an issue where objects could no longer be passed to required aria-* props via JSX (prop:aria={...}) since 4.44.0.

Because Stencil's HTMLAttributes includes a template literal index signature for aria${string}, passing an object shape to a required aria prop fails standard property assignment. The prop:aria prefix historically bypassed this, but #6804 removed the prop: branch from the generated OneOf helper entirely to prevent TS2590 ("union type too complex") on components with 8+ required props.

The Fix:
This PR re-introduces the 3-way exclusive branch version of OneOf (which supports the prop: option) conditionally, only for components with 5 or fewer required props (MAX_ONE_OF_REQUIRED_PROPS_WITH_PROP = 5).

This cleanly balances both needs:

  1. Standard UI components (≤5 required props) regain the ability to use prop: overrides for complex types that overlap with standard HTML attributes.
  2. Components with many required props (6 to 8) continue to use the 2-way exclusive branch, ensuring they do not trigger the TS union size limits that bug: Required @Prop() declarations generate excessively complex JSX types in components.d.ts #6799/fix(compiler): too many required props / "union type too complex" #6804 originally resolved.

Related Issue(s)

Fixes #6854

Testing

  • Verified prop:aria={{ 'aria-label': 'Close' }} compiles correctly for components below the 5-prop threshold.
  • Verified TypeScript union constraints remain within limits for components with up to 8 required properties.

Restores the 3-way exclusive union for `OneOf` on components with 5 or fewer required props. This reenables `prop:` overrides for overlapping keys like `aria` while maintaining the fix from stenciljs#6804 to prevent TS2590 on components with many required props.
@rajat12826
rajat12826 requested a review from a team as a code owner August 30, 2026 14:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

bug: cannot pass an object to a required prop named aria from JSX since 4.44.0

1 participant