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

[samsam-ahmadi]

• 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

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]

Has this issue been resolved?

[samsam-ahmadi]

@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]

I'm also blocked on this.