Ban props containing an "-" for components

[hornta]

I'm looking for a way to forbid passing props that contains a dash - for my components. I only want this to affect custom components, meaning that regular HTML components should be allowed to take <div aria-xxx="asdf"> but not <MyComp aria-label="asdf">. I want to do this because in TypeScript, props beginning with a kebab case like aria-xxx are not type checked. https://github.com/microsoft/TypeScript/issues/32447

We plan on instead creating custom aria props like ariaLabel for components that can take them.

The closest thing I could find was https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/forbid-component-props.md but it doesn't allow me to specify a regex that could pick up every kebab-case named prop which is what I'm looking for.

I could contribute with an addition to this rule if deemed okay.

[ljharb]

I'm trying to understand the need here. It sounds like you're saying that TypeScript should not be checking HTML element dashed props, and should be checking custom component element dashed props, but fails to differentiate between them, and has chosen to not check them all - and so you'd like to ban them from custom components so you can ensure no un-checked props?

[hornta]

That's that more or less what I'm thinking of, and we ran into a case much similar to what's mentioned here: https://github.com/microsoft/TypeScript/issues/32447#issuecomment-1412469110

[ljharb]

That does seem very typescript-specific, and typically we only have rules here that are broadly applicable, even if they have TS-specific enhancements.

However, while that would obstruct a new rule, perhaps this makes more sense anyways as an option on forbid-component-props, as you indicated. What about a propNameGlob property, mutually exclusive with propName, on the object option?