feat(lint): add checkHtmlElements option for useSelfClosingElements

[abidjappie]

Summary

Fix #3364

This PR implements the checkHtmlElements option provided by Eslint Stylistic jsx-self-closing-comp (as html).

By setting checkHtmlElements to false, it will not enforce this rule on html elements.

Implementation

It checks whether the JsxOpeningElement contains a JsxName i.e. it is not a JsxReferenceIdentifier etc. and assumes that it is a valid html element implicitly. If this assumption does not hold, we may need an alternative implementation.

Limitations

This does not cover the void element case - i.e. it will not automatically lint the void element correctly. It simply disables the rule.

Test Plan

Added the validCheckHtmlElementsFalse and invalidCheckHtmlElementsFalse test cases.

[codspeed-hq]

CodSpeed Performance Report

Merging #3697 will degrade performances by 6.24%

_{Comparing abidjappie:feat/style-use-self-closing-elements-html-option (9e5086a) with main (ecf1f16)}

Summary

⚡ 1 improvements
❌ 1 regressions
✅ 105 untouched benchmarks

⚠️ Please fix the performance issues or acknowledge them on CodSpeed.

Benchmarks breakdown

	Benchmark	main	abidjappie:feat/style-use-self-closing-elements-html-option	Change
❌	dojo_11880045762646467684.js[cached]	7.9 ms	8.4 ms	-6.24%
⚡	react.production.min_3378072959512366797.js[uncached]	2.2 ms	2.1 ms	+6.12%

[ematipico]

Thank you for the contribution.

A couple of important things should be addressed:

• Documentation; I left various tips
• Changelog line for CHANGELOG.md

[ematipico]

IMHO, the name html is not descriptive enough. A name should be explanatory enough so users can understand what it does just by reading it.

I think we should name it checkHtmlElements, what do you think?

Regarding the structure of the docs, it should be like this:

### Options

#### `nameOfTheOoption`

Default: `true`

<Explanation of the option> (e.g. This option allows to control whether this rule should check HTML elements or not)

<Explanation of an example> (e.g. In the following example, when the option is set to `false`, this happens)

```json
{
	"//": "example of the configuration"
}
```

```jsx,ignore
// example of code that will pass, use the `ignore` directive in the code block, so the codegen won't execute the code
<img src="something.png" >
```

[abidjappie]

Thanks for the feedback. I think we can proceed with checkHtmlElements!

[abidjappie]

Addressed in c633de8

Please let me know if it's acceptable.

[Conaclos]

A possible alternative name: ignoreHtmlElements.
This has the advantage to make its default false.

[ematipico]

The options must be documented. The documentation will be part of the configuration JSON schema, this means that users will be able to see the description when their IDE will autocomplete the option.

[abidjappie]

Ah, I see. I'll add the documentation too

[abidjappie]

Addressed in c633de8

Please let me know if it's acceptable.

[ematipico]

@abidjappie, are you still interested in bringing this feature to the finish line?

[abidjappie]

@ematipico sorry, I'll have a look at this one this week!

[abidjappie]

I still need to investigate how to do the CHANGELOG.md line 🙇 🙇

[abidjappie]

I still need to investigate how to do the CHANGELOG.md line 🙇 🙇

Updated 👍

[unvalley]

nits

Suggested change

	/// #### `checkHtmlElements`
	/// ### `checkHtmlElements`

[unvalley]

A suggestion because the following example is set to true.

Suggested change

	/// In the following example, when the option is set to "false", it will not self close native HTML elements.
	/// In the following example, when the option is set to "true", it will check for self-closing native HTML elements.