Skip to content

Infer types automatically based on HTML element or React component #51

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

irangarcia
Copy link

Summary

  • Infer types automatically based on HTML element or React component
  • Stop overriding element props when defining custom props

Instead of:
tw.div<TwcComponentProps<'div'> & { $custom: string }>(...)
tw(Link)<LinkProps & $custom: string>(...)

Simply use:
tw.div<{ $custom: string }>(...)
twc(Link)<{ $custom?: boolean }>(...)

Test plan

Copy link

vercel bot commented Mar 11, 2025

@irangarcia is attempting to deploy a commit to the Argos CI Team on Vercel.

A member of the Team first needs to authorize it.

@gregberge
Copy link
Owner

Hi @irangarcia, with your system, how do you restrict props to be passed to your component? I think your system is less flexible than the original one right?

@santinozaracho
Copy link

@gregberge First, I want to say thank you for the twc I love it <3.

Then, what @irangarcia is proposing here you are going to get with the following explanation:

Here is how this works fine but without custom styling:
image

If we need to add a custom property to change classes based on behavior we get the following TS Issue (looks like IntrinsicAttributes is not well detected, could be a TS version issue? did you experience the same while using it?):
"Type '{ children: string; href: string; $isDisabled: true; }' is not assignable to type 'IntrinsicAttributes & { $isDisabled?: boolean | undefined; }'.
Property 'children' does not exist on type 'IntrinsicAttributes & { $isDisabled?: boolean | undefined; }'.ts(2322)"

Screenshot 2025-03-17 at 5 39 01 PM

To solve it, we must specify the props including the current component ones plus extending the required.
image

In conclusion, what Iran wanted to do is to automatically infer the native component props, instead to be adding every time the extended ones (doesn't matter if we are talking about the forwarded to the component or not).

I'm clear about the issue. How do I collaborate?

@irangarcia I feel that we shouldn't change the tests, I mean, you can create new ones but not modify current ones to avoid missing adding a new issue, including retro-compatibility, if the people are manually adding we need to concatenate them. What do you think @gregberge?

Thanks a lot!

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.

3 participants