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 - Bento: TypeError when using React.Fragment #35412
• Do not pass unneeded DOM attributes/props - Bento: React warnings about incorrect DOM attributes / unrecognized props #35553
• Use of className (React build) and class(Preact builds) 🏗 Create eslint rule for preferred Preact props #35722
• Use of tabIndex preferred to tabindex 🏗 Create eslint rule for preferred Preact props #35722
• Use of props.children should use the Children API in preact/compat where relevant BentoStreamGallery: Use toChildArray to get the length #36154
• camelCase SVG props inside of JSX for React builds and kebab-case for Preact builds 🏗 Create eslint rule for preferred Preact props #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} - 🐛 Bento Carousel: Fix unrecognized attributes #35696

Alternatives Considered

n/a

Additional Context

No response