search

jsx-eslint / eslint-plugin-react

React-specific linting rules for ESLint
MIT License
8.86k stars 2.76k forks source link

Ban props containing an "-" for components #3681

Open hornta opened 5 months ago

hornta commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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?