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

[compat types] - issue with the element's type like button, that gets any instead of ButtonHTMLAttributes #4099

Open
1 task done
samsam-ahmadi opened this issue Aug 15, 2023 · 3 comments
Labels

Comments

@samsam-ahmadi
Copy link

  • Check if updating to the latest Preact version resolves the issue

Describe the bug
The issue is with some conflicts type of compat with React types, when other libraries trying to using the react types inner like: styled-components.

For some elements react has special type like this line: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/f701ddcb5bec7d89238b8f1b9d362a20ff9c8e94/types/react/v17/index.d.ts#L2048

So as you can see there is an error for h1 but for button there isn't and it takes any

Screenshot 2023-08-15 at 15 14 27

So i checked the styled-component that give the button this type.

button: Styled<"web", "button", import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, import("../types").BaseObject>;

But after using aliases of compat, it will be something like this:

button: Styled<"web", "button", **any**, import("../types").BaseObject>;

Because styled component trying to access to ButtonHTMLAttributes, but this type doesn't exist in the compact so it takes any.

To Reproduce

If possible, please provide a CodeSandbox/Codepen that demonstrates the issue. You can use the following template: https://codesandbox.io/s/preact-x-preact-cli-3-starter-vj285y2rn3

I can't do it, Because for displaying the errors needs more typescript configuration but i explain it here:

Steps to reproduce the behavior:

  1. create a vite + typescript + preact+ styled-components
  2. npm i -D vite-plugin-checker
  3. Add this config to vite plugins. => checker({ typescript: true })
  4. Also this one
  5. preact({ babel: { plugins: [ [ "babel-plugin-styled-components", { pure: true, displayName: false, fileName: false, }, ], ], }, }),

Then add ThemeProvider and styled.d.ts like this codesandbox.
https://codesandbox.io/s/interesting-hooks-5m8kvr?file=/src/App.tsx

After that If you create those components in the screenshot you can see h1 has correct type but button doesn't have.

Expected behavior
What should have happened when following the steps above?

@victor-williams
Copy link

Has this issue been resolved?

@samsam-ahmadi
Copy link
Author

@victor-williams I'm waiting for approval, If you can't wait, You can take the new codes and put into the reactCompat.d.ts in your project until this merge.

@wong2
Copy link

wong2 commented Sep 22, 2023

I'm also blocked on this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants