Bento Tracking Issue: React/Preact compatibility

Description

There are some nuances in React and Preact compatibility we need to address to ensure our Bento components written in Preact are well built in React for their releases. At the very least, there should be no warnings when running our components in React development mode. This is a tracking issue for the effort in doing so.

• react.Fragment and preact.Fragment are not the same type - #35412
• Do not pass unneeded DOM attributes/props - #35553
• Use of className (React build) and class(Preact builds) #35722
• Use of tabIndex preferred to tabindex #35722
• Use of props.children should use the Children API in preact/compat where relevant #36154
• camelCase SVG props inside of JSX for React builds and kebab-case for Preact builds #35722
• Use of onInput and onChange
• Use of onDblClick and onDoubleClick
• Registered events are supported via GlobalEventHandlers and SyntheticEvents
• Pass correctly typed values to DOM, i.e. rtl="false" preferred to rtl={false} - #35696

Alternatives Considered

n/a

Additional Context

No response

[estherkim]

Chatted with @caroqliu offline - we decided that using React syntax with preact/compat to ensure Preact compatibility would be a better fix than adding a build step. No performance issues in using the plugin because it is already being imported.

Back to @caroqliu for next steps?

[caroqliu]

Thanks for performing the analysis here, Alan.

If we ensure that our source has props in React-style, how are we accomplishing that? Do we know of an existing transform that we can run on our codebase?

I assume it would be a change on the preact-preferred-props lint rule, which currently enforces an non-exhaustive set into Preact style, and could be modified to prefer React-style.