Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Context: Omit as prop in types #38844

Merged
merged 1 commit into from
Feb 16, 2022
Merged

Context: Omit as prop in types #38844

merged 1 commit into from
Feb 16, 2022

Conversation

mirka
Copy link
Member

@mirka mirka commented Feb 16, 2022

Description

This is an attempt to actually omit the as prop from WordPressComponentProps when polymorphism is disabled.

Given some code like this with a component flagged as non-polymorphic:

// some-file.tsx
const InvalidDivider = () => <Divider as="a" />;

The current implementation still acknowledges as as an actual prop type, only that it has to be undefined. This will cause some docgens to list as as a member of the props. It also gives us a TS error like this:

Type 'string' is not assignable to type 'undefined'.

Whereas, if it were any other non-existent prop, it should give you an error like:

Type '{ as: string; }' is not assignable to type 'IntrinsicAttributes & Props & Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLHRElement>, HTMLHRElement>, "key" | keyof HTMLAttributes<...>> & { ...; }, "as" | ... 1 more ... | keyof Props>'.

Property 'as' does not exist on type 'IntrinsicAttributes & Props & Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLHRElement>, HTMLHRElement>, "key" | keyof HTMLAttributes<...>> & { ...; }, "as" | ... 1 more ... | keyof Props>'.

I'm not 100% sure if the approach in this PR is the best way to achieve it though. Let me know if there are better ways.

Testing Instructions

  1. In some .tsx file, add a code snippet like const InvalidDivider = () => <Divider as="a" /> for a non-polymorphic component. It should give you the expected TS error.
  2. Similarly, try a snippet like const ValidSpacer = () => <Spacer as="aside" /> for a polymorphic component. It should not emit TS errors.

Types of changes

New feature

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • I've tested my changes with keyboard and screen readers.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).
  • I've updated related schemas if appropriate.

@mirka mirka added the [Package] Components /packages/components label Feb 16, 2022
@mirka mirka requested a review from ajitbohra as a code owner February 16, 2022 01:06
@mirka mirka self-assigned this Feb 16, 2022
Copy link
Contributor

@sarayourfriend sarayourfriend left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't know why this wasn't the original solution to begin with 🤦 Thank you for noticing this improvement! It makes a lot more sense and the types are easier to understand this way too.

@mirka mirka added the [Type] Code Quality Issues or PRs that relate to code quality label Feb 16, 2022
@mirka mirka merged commit e7c8f34 into trunk Feb 16, 2022
@mirka mirka deleted the fix/ts-as-prop branch February 16, 2022 19:09
@github-actions github-actions bot added this to the Gutenberg 12.7 milestone Feb 16, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Components /packages/components [Type] Code Quality Issues or PRs that relate to code quality
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants