[custom-element-jsx-integration] Native HTML Attributes and events in React

[dutchcelt]

More a question than an issue.

Our JSX use case involves React 19 with Custom Elements. Teams using our components encounter the problem that the components do not have onClick or popover types. These native attributes should be available as types to avoid errors. Or am I doing it wrong?

In our setup, we extend the generated partial type in a post-build script with:

React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

For example, for a button component, we end up with this:

(Partial<MyButtonProps & BaseProps & BaseEvents>) &
  React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>

This cannot be the default, as JSX should work as a stand-alone solution.

Could this be configurable if users are targeting a React-based solution? Or is this indeed something users should deal with in their build process?

[break-stuff]

That's a really good question. Let me see of there are built-in types in the JSX library that we can use for this.

[break-stuff]

Darn! It looks like they all use a different namespace:

• Solidjs -> JSX
• React -> React
• Stencil -> JSXBase

[dutchcelt]

Hmm. One would almost be tempted to create a new, more agnostic set of built-in types for the Custom Element Manifest. I haven't seen the SolidJS one somehow—something to dive into during the weekend.

[break-stuff]

I wish there was a global type definition file for generic JSX, but I'm not sure of they are 100% compatable with each other.

[break-stuff]

@dutchcelt I have a new plugin rolling out tomorrow. This won't necessarily solve this problem, but it should provide some better types and configurations.

https://wc-toolkit.com/integrations/jsx/

[dutchcelt]

Additionally, we have an update on our end. We released the first version of the component library, for Dutch Rail, using CEM tools. https://blue-water-08c39b403.5.azurestaticapps.net/?path=/docs/components--docs

[break-stuff]

Oh, awesome! I look forward to checking it out.

[break-stuff]

@dutchcelt did the new types generator work for you? Also, I'm curious to hear how the adoption of your web components has been going.

[break-stuff]

@dutchcelt Closing as this has moved to the WC Toolkit. Please let me know if you're still experiencing issues.