jsx-no-literals proposal

[stereobooster]

My use case: I want to catch untranslated strings, for example

<p>hello</p>
<img alt="bird" />

which is supported, but also want to allow:

<Button color="primary" />

My proposal is to add config of props to be checked and default value can be:

["title", "alt", "aria-label", "aria-details", "placeholder"]

WDYT?

PS I'm a bit confused by ignoreProps vs noAttributeStrings.

[purplehat7]

I am also confused by ignoreProps vs noAttributeStrings 😄 .

My proposal is to add config of props to be checked and default value can be:

I would be in favor of something like this. Instead of an "allowlist" of props to check this rule for though, I think I'd prefer a "disallowlist" of props that would be omitted from this rule, though perhaps we can have both?

[ljharb]

ignoreProps means that it only checks jsx children, not props.

noAttributeStrings ensures the opposite - that no props may contain string literals.

There's a bit of overlap, but I'm not sure what the confusion is.

It seems like the OP wants a way to inclusion-list props to check, presumably by component. That's something we could add, but the interaction with other rule options will be tricky.

[stereobooster]

Thanks for the response.

• ignoreProps: true do not check pros
• ignoreProps: false check all props
• ignoreProps: ["color", "size"] do not check color and size props
• noAttributeStrings: true check all props
• noAttributeStrings: false do not check pros
• noAttributeStrings: ["title", "alt"] check only title and alt props

WDYT?

There's a bit of overlap, but I'm not sure what the confusion is.

It seems they are responsible for the same, so not sure why there are two... but maybe it's just me.

UPD if we want to do this based on component we can do something like this:

• noAttributeStrings: ["title", "img.alt"] will check alt only in <img /> and title in every component

[ljharb]

img.alt could be a prop on its own; the schema would have to be objects, with a "component" property for the component name, and a "props" array for the prop(s) to apply.